Search Bar Tips⁣⁣⁣

Tegra - December 29, 2019 - 0 comments

Search Bar Tips⁣⁣⁣

🔍 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! ⁣⁣⁣

lnactive State  Make it clear what users can search for. Place samples,
multiple criteria or hints in the input held as placeholders
Active State  Before the user starts typing, showing the top searches or
previous searches reduces his searching time
Typing State  Use an autocomplete feature to enable quick selection from
a pre-populated list, leveraging searching and hltering
Category Search  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
Placement Deskop  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
Placement Mobile  lf the search bar is your most important featured, | strongly
believe that you should put it on lhe bottom (thumb-rule:
important elements, should be closer to the thumb) and not
on the top. Good examples: Uber, Google Chrome and Lyft.

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.

Be free to send me any feedback by reply or reach me in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

Related posts

Post a Comment

Your email address will not be published. Required fields are marked *