🔍 Search Bar Tips
Courtesy of @ux.ale
⚠️ If your web/app has a search function, most likely it is one of the most important features, and if we are talking about an e-commerce platform, it 100% is, so read this carefully.
📚 Above are some tips to get you started, but remember that there is always room for improvement, get into your users head and think how can you make the search experience even better, smoother and seamless. Break the status quo.
💎 Extra Tips:
🔹Make your search visible. Don’t just use the icon, make the box.
🔹Support typos and misspellings. («Did you mean…»)
🔹Defined pre-filters and separators.
🔹Use relevant auto-complete options.
🔹Show some suggestions if there are no results found.
🔬Now, some facts for you guys:
8️⃣0️⃣% of consumers will abandon a site after a poor search experience.
8️⃣ seconds or less is all the time you have to help someone find what they want.
1️⃣.8️⃣X of the users that complete a search are more likely to convert.
4️⃣X higher is the conversion rate of someone that uses the search function.
📝Can’t cover all the good search functionalities in this post, so feel free to leave your honorable mentions in the comments!
🧠 Hope this helps!
Bonus — 4 tools that may be useful in your designer way:
Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.
Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.