medium bookmark / Raindrop.io |
Just a regular dude that breathes UX & UI. Passionate about everything I get involved in, with a crush on micro interactions and UI patterns. I like coffee. ☕️
Nov 23
If you are reading this article you have probably been put in charge of designing a website or application that would benefit from a search feature.
In my first article I will be covering 5 best practices that have helped me design better, more usable, search mechanisms.
Giving your users the tools they need to scan the screen quicker is part of your job, when creating any kind of user interface. Doing this ensures that your user will know where to find exactly what he wants, when he wants and what happens once he interacts with it.
Use an icon. I can’t stress how much this speeds up finding the search bar. The simpler, the better. Less details allow the user to scan it quicker. Although, an icon just by itself, without an input container or button will actually make search harder to find.
Example of a minimalist search icon.
People usually recognize that a magnifying-glass icon indicates a search tool, even when it has no label. Unfortunately, showing only the icon makes search more difficult to find. (KATIE SHERWIN in “The Magnifying-Glass Icon in Search Design: Pros and Cons” from Nielsen Norman Group)
Not everyone is a millennial surfing the web, meaning, not everyone knows to press the Enter key once they’ve input their query. Having an actual button alongside your search input will help the user acknowledge their next action — thus, reducing the amount of cognitive load required by the user.
Avoid placing the button on the left, above or below the input.
Tips:
Alternatively you can hide your input button until the text input has focus.
Make sure the button is sized properly so that clicking it feels natural.
Sometimes the shiniest, most powerful or bigger car just doesn’t do the trick. Same goes for the search pattern.
Design it to fit the theme of your website or app while making sure it stands out just enough.
Youtube’s new (and amazing) dark theme portrays this perfectly by keeping the search pattern coherent with the rest of the elements.
Make sure the input length isn’t too small either. Nielsen Norman Group studies have shown that having an input capable of housing 27 characters covers the needs of 90% of the users.
A quotidian example of a 5 word and 26 character search.
It is important that you use appropriate copy for the input’s placeholder text, usually an hint of what users can search for. This ensures they know what to search for and are not frustrated by writing bad queries. Lately web tools have allowed you to do this easily by adding hints as placeholders in HTML5.
Adding a placeholder helps users filter down what their queries can be.
Tips:
It is known that humans have little short term memory. Keep the copy used for placeholder text short and direct. Using a long hint will end up harming user experience by increasing cognitive load. You can learn more about harmful labels and placeholders here.
Certain projects demand a search feature that’s slightly more specific. In this case you can use hovering tooltips to make sure the hints remain visible at all times allowing the user to spare his short term memory for other tasks.
In this example the tooltip helps the user with the format of the query as well as what he can search for.
Often times your user will be to busy thinking about the search result instead of focusing on building a proper search query. This is also a burden to the user when he can’t find the results he was expecting. It is the user’s fault just as much as it is the designer’s. This is where an Auto Suggestion mechanism comes in handy.
The goal isn’t to make the search faster, but to provide a little bit of help in query construction. One of the many ways you can do this is by implementing a predictive search pattern. What is this monstrous word you ask? Well it’s just the act of using whatever characters the user is writing and — guess what — predicting what their query is going to be.
It is known that most users that fail to gather their expected search result from the first query will rarely succeed in the following tries, as studied by the teams led by Jakob Nielsen. So by doing this, besides greatly reducing your users effort to perform a search, you will also increase the amount of times they find what they are looking for.
Tips:
Don’t make the mistake of giving them just any auto suggestion. Make sure whatever mechanism you use, it makes sense and matches your user’s needs.
Give your user visual cues of his recent search history. This is especially useful during recurrent searches.
Keep it simple, use a minimum of elements to separate the different suggestions (i.e: paddings and borders)
Limit the number of search suggestions you give your users to something between 5 and 9. Remember Miller’s Law applications in User Experience Design.
Users have certain expectations regarding the position of some UI elements and patterns as found by A. D. Shaikh & K. Lenz in 2006. Search is one of this patterns and the vast majority of users expects to find it on the top center or top right corner of the interface, just like shown in the following representation of the supra-mentioned study.
“Many participants expected to find the “Site Search Engine” located in the upper right corner of the web page or near the upper left corner”
Try to position the search pattern according to this knowledge and it will ensure that it is easily found by your dear users.
Search is an ever evolving pattern and I know this article doesn’t cover all of the existing guidelines. Knowing this, I hope this article will help some of you beginners and even veterans of UX & UI Design.
I believe that everyday we deal with too many so called best practices, so it is easy to overlook some simple topics like the ones I mention in this piece.
This is my first article so if you have made it this far, a big thank you for letting me share this bit of valuable knowledge with you. 💙💜
AI-driven updates, curated by humans and hand-edited for the Prototypr community
