🔍 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!
Make it clear what users can search for. Place samples, multiple criteria or hints in the input held as placeholders.
Before the user starts typing, showing the top searches or previous searches reduces his searching time.
Use an autocomplete feature to enable quick selection from a pre-populated list, leveraging searching and filtering.
Help the users distinguish between the different types of results by adding categories a he bottom.
When the user is interacting with your search bar, he doesn’t care about what’s around it, so maximize your search space.
Number of Results
Showing the amount of results found can let the user know what to expect and improve his search wording.
Put the search box where users expect to hnd it. lt’s not a good sign when the user needs o search forthe search box.
lf the search bar is your most important featured, I strongly believe that you should put it on the bottom (thumb-rule: important elements, should be closer to the thumb) and not on the top. Good examples: Uber, Google Chrome and Lyft.
Bonus — 6 tools that may be useful in your designer way:
FlyWheel — is managed WordPress hosting built for designers and creative agencies.
Leadpages — lets you build beautiful, high-converting websites, unlimited landing pages, pop-up forms you can add to your other websites.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.
Kinsta – Premium WordPress Hosting for Everyone. Kinsta’s managed WordPress hosting service helps you take care of all your website needs.
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.