WE CREATE BRANDS PEOPLE L♥VE
Share

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

Inactive 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

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 filtering.

Typing State

Use an autocomplete feature to enable quick selection from a pre-populated list, leveraging searching and filtering.

Category Search  Help the users distinguish between the different types of
results by adding categories a he bottom

Category Search

Help the users distinguish between the different types of results by adding categories a he bottom.

Size Matters  When the user is interacting with your search bar, he doesn't care about what's around it, so maximize your search space.

Size Matters

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

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 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, 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.

Placement Mobile

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.

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

Related posts

Leave a Reply