6 tips on prototyping search boxes for better UI navigation

Search box design best practices and prototyping them to improve your site’s UI navigation

The search box is a highly effectively navigation feature in user experience design. In fact, over half of all web users use search as their primary navigation method and 30% use the search box, according to Econsultancy.

Users who opt for the search box are usually task-focused and looking for a specific product, service or experience. A poorly designed search box can have massive implications for usability, traffic and search engine rankings.

Read our six tips on creating usable search functionality in your prototypes, and step up your UI navigation game.

1. Make Searching Your Website Or App Easy

The trick to good user experience is designing the user’s fastest route to discovery. If you’re going to include a search box in your user interface, make sure that the box is easy for the user to find. This means making it look like a search box, maintaining the same style throughout the website or app, and placing it in an intuitive spot.

Users scanning the page will need to be able to sight the search box at first glance — if not, they’re simply not going to use it. To prototype the perfect search box, the first thing to do is decide on the shape and size.

Shape — use a rectangle or button UI element because a box is what users are scanning for. As for size, a Nielsen study on prioritizing web usability reveals that a capacity of 27 characters accommodates 90% of search box queries.

In search box design, location is everything. Even with a perfectly crafted search box, if it’s not visible it won’t have the desired effect. Our advice is to have the search box displayed on every page, fully visible in your header. This is usually where users expect to find it — just a head’s up!

2. Keep Users Engaged With a Visual Cue — The Search Button

Making sure that users get to where they need to be means always thinking about the next step in the user journey. They’ve landed on your site, so show them how to sign up. They’ve subscribed to your newsletter, so send them a confirmation email. They’ve typed a query into your search box, so give them a search button to send their request. Even Google’s home has a search button!

Having an additional search button alongside your search box will make sure that users acknowledge the step they are engaging in — a big win for user experience design. Although younger users are used to pressing ‘Enter’ in a search box, a non-technical audience may not necessarily be aware of this type of interaction.

When prototyping your search button, keep things simple and familiar. Use an icon that people will recognize, such as the magnifying glass, or a mouse pointer icon. Make it big, make it clickable (at least 8 characters). And don’t make people click twice!

3. Use a Sensible Labeling System In Search Box Design

Some labels in searchable content have a bad reputation. For instance, placeholder text inside search fields. Imagine a user misses the search box and clicks just outside of it, i.e. in the search button. The text won’t disappear. Instead, they’ll begin searching for something irrelevant and more often than not, it won’t produce any search hits.

Additionally, if you add too much placeholder text, you run the risk of placing a burden on the user’s short-term memory. The placeholder disappears as soon as the user clicks or begins to type within the search box, so they’ll have to delete their entry to view the text again. And often, users won’t even figure out how to get the placeholder back.

On the other hand, sensible use of labels can help the user out. Enter tooltips. Tooltips that hover over, next to or above the search box can be viewed any time and don’t affect entered text. To prototype a tooltip, you’ll need rectangle and text UI widgets and an interaction that will allow you to keep the widgets hidden until the user hovers over them with the mouse.

4. Include Filtered Navigation If You’ve Got Lots of Content

Filters are a great way of getting the most out of the search feature on websites and apps. Whether a user arrives on your site or app with a clear idea of what they want, or they’re just browsing, getting to where they want to be is much simpler when information is filterable because it reduces the cognitive load.

As Nielsen Norman Group’s Digital Strategy Manager Kathryn Whitenton has it, filters “help users narrow large sets of content”. She explains that filters analyze a set of objects and remove any that don’t match the criteria selected by the user. They’re particularly useful when there is a lot of information to get through, for example in an eCommerce site such as Amazon.

To build filters into your web or mobile designs, start out by using data-driven prototyping. Create drop downs with data that you’ve imported via CSV file, or added manually into your prototype.

5. Predictive search saves users time

Predictive search and as-you-type suggestions have become invaluable ever since Google introduced auto-completein 2004. It helps users search faster by subtly guiding them towards results rather than typing in incorrect text. Returning no results is such a drag. And, by reducing the amount users type, it’s also kind on the hands and fingers.

And as predictive search matures and becomes more powerful, so the results become more relevant. There’s even this thing called instant results now that works by bypassing the search results page and taking you directly to a product-specific landing page. So much potential!

But back to predictive search and how to prototype it. With data-driven prototyping techniques, you can trigger a search every time a letter is entered into the search box.

6. Test Your Search Box To Make Sure It Works!

Remember, nothing works until you prove that it does. With your fabulous, newly designed search boxes and buttons, you can start to test how users manage them.

Read the original article on Justinmind’s blog