Designing internal search
By: Saurav Kendre
Tags: Internal Search, UI Design, UX, Ui Ux, UI

Search usability is one of the important factors of positive user experience for websites and mobile apps. Especially, the ones that contain a lot of items to choose from. Our blog provides some good insights and design practices on making internal search intuitive and easy.

What Is Internal Search

Internal search is the function of browsing the content inside the website or app and showing it to the user according to his or her search query. Tuned correctly, it shows the relevant content and this way provides the shortcut to what the user needs. Thus, the internal search saves the user’s time and effort, amplifies usability and desirability of the digital product, supports user retainment and increases conversion rates. Easy to see that this element is vital.

The interactive element responsible for the internal search in the user interface is a search field. A search field, which is also called a search box or search bar, presents the interface element that enables a user to type in the search query and this way find the pieces of content that are needed.

When to Use Internal Search

Whatever great you find the navigation of your interface, if your website or app is made of many pages, it’s the time you need to consider implementing the internal search. Well-designed and easily found search field lets the user to jump to the necessary point without browsing through the number of pages and menus. This approach is a common pattern of user behaviour now, it cares about the user’s time and effort, so it is highly demanded in user-friendly interfaces.

Internal search for Youtube

Internal search of Zerodha

Why is it important to have internal search? Earlier applying the internal search started from 100–200 pages on the website. Modern users have numerous resources and have lots of varieties on web and in the app stores. If a visitor has already come to your website, your task is to give them what they want as soon as possible. And in most cases, users (especially led from external search engines) come to a resource with a specific goal or query and without the wish to spend much time looking for it. Search enables them to make their journey focused and effective.

In case you have a single-page website, if your app or website is concise and not heavily-packed with content, the internal search is not needed. Well-thought navigation will be enough, for example, for a corporate or portfolio website highlighting core information and services.

However, designing search usability, don’t make the opposite mistake: don’t prioritize search over navigation in a user interface. Based on everything mentioned above, designers may think that search is the best and only interactive element worth their attention. And that’s a big mistake. Although many users do try getting closer to their aim via search, there are also others who may have problems with search interactions. For example, they don’t know a language well enough to form the correct query, it’s not convenient for them to type something in, or they just hate thinking over the textual queries and they would prefer to follow the already existing navigation and cues rather than the cognitive load of communicating to the system via the search. Always create a good balance between internal search and navigation.

Zomato Internal Search

Core Features of Effective Search

There are different nuances of making the search interactions clear and intuitive, yet the three features below are core points to consider for the internal search:

1. Instantly visible

2. Clear as a search functionality

3. Must show relevant content

UX Design Practices for Search

To start with UX design, following steps are needed to be followed

Part 1. Observe and ask questions

Basically, ask these 8 questions.

1. What are your users’ information needs and intents?

Do they search to:

Navigate, find a particular web page.

Find specific information

Find advice

Find resources, applications, documents.

Find facts, data

Gather information from different sources.

Analyse data.

2. At what point do users click on search?

What were they doing right before clicking on search?

What app were they using before switching to your search?

3. How do they form queries?

Interaction with search is a conversation. If you know how users start the conversation, you can give them the right answers.

4. Do they know exactly what they are looking for? Or are they just browsing?

For example, I might research the topic of friendship and look for any book or a category of books. Or I might look for a particular book. I expect different outcomes from these two requests.

5. What do they expect to find?

Can they describe what the desired outcome of the search is?

How else can they find this information?

6. What are the next steps?

What do they do with the results?

What do they do if they didn’t find what they were searching for?

How does search fit into their workflow?

7. Is there a pattern in user actions?

Patterns in user behaviour describe how users interact with search, what results they expect, and what their next steps are. Patterns are especially important when redesigning an existing interface.

8. What applications do they use?

If your product is part of a workflow, other tools may affect user habits and expectations about their user experience. Find out more on how they interact with searches in these tools and what works best for them.

Part 2. Check-list: Consider every part of the search

This part of the process lets the developer to check everything that can’t meet the eye and so doesn’t forget anything to implement.

1. Results page

Types of results: Videos, events, audio, locations, charts (What types of information are available on your site? What types are searchable? How can different types be better shown on a result page?)

Visualisation of results

Table or list: Paper.dropbox.com

Cards: Pinterest.com

Adjustable view: Bookmate.com

Faceted navigation: Dividing search results into a logical group based on information architecture makes the browsing experience more comfortable — Spotify

Number of items on a page: How many results do users need to see at a time? Can we let them comfortably arrange results by providing alternative views and sorting?

View settings: Ebay.com

Sorting: Ikea.com

Pagination

Loading: Asos.com

Infinite scroll: Duckduckgo.com with infinite scroll

Combinations

Preview

This is a well-researched part of the interface. What do best practices tell us to include in the search results?

Query terms highlight in preview: iBooks

Summary of a document that helps differentiate between results: Ataccama.com

Page preview: Youtube.com

Accessibility

It’s our job to make sure every user can comfortably work with our product. Are search results scannable and readable with a text-to-speech service? Are font size and contrast readable? Can people read them on a mobile display on a sunny day? Are the colors you use recognizable by everyone?

Shortcuts

Some companies take result previews to the next usability level and give users the necessary minimum amount of info and functionality without leaving the result page.: Google

Actionable results

How can we help users do their job faster and more comfortably? For example, give users the opportunity to start working with items they were looking for without leaving the result page.

These are some common actions. They can vary considerably from product to product:

- Sharing

- Saving results, bookmarks, adding to a wish list

- Adding to shopping cart

- Appstore

- Commenting

- Previewing gallery

- Bulk actions

- Dropbox paper

Interface feedback

Loading icon or progress indicator- Skyscanner

Information about search process (results, time, applied filters)- Fights.yandex.com

System notifications (example, if results are time sensitive, the user might need to refresh them)- Not found page, Skyscanner.net, Microinteractions

Search history

Recent queries

Most popular queries

Filters and sorting

Filters deserve a blog post of their own. Well-defined filters are highly important when designing complex sites. They would make the search experience a lot smoother.

Booking.com

Categories and their granularity

Labels

Types of filters

Placement

Actions

Sorting

Customisation

If search is a key function in your application and an important part in the workflow of your users, customisation would be important for them. You may allow users to adjust a result page layout, change fonts and colors, define how many results are shown on a page, save filters, customise sorting parameters or add call to actions.

Google search

Aliexpress.com

Personalisation

Think of how user setting, previous queries, preferences or other information about a user can improve the search experience.

Keyboard shortcuts

A set of keyboard shortcuts would make navigating through search results much easier.

Relevance Indicators

Depending on the type of content, how precise the results are, and how big the gap in the relevance of results is, relevance indicators may help make the decision quicker.

Search box check-list

Visualisation

Positioning of a search box

Call to action

Icon

Single box or several input fields

Franzen and Karlgren, 2000 found that showing study participants a wider entry form encouraged them to type longer queries. Search user interfaces

Input types

What types of inputs should your search support?

Text

Voice

Images

Tags

Help

Search tips. Show users the whole potential of the search.

Stackoverflow.com

Default text in an input field.

Imdb.com

Autocomplete

Autocomplete can be a powerful tool to make interaction with search quick and efficient.

Fullstory.com

Predefined autocomplete may suggest recent or popular queries, filters, tags or play a navigational role.

Structured suggestions help users navigate complex webs.

Twitch.tv

Microineractions

Loading

Error messages

System notifications

Fast way to erase query

Advanced search

If there are many parameters for finding an item, you might consider using advanced search options and logical operations.

Example: I want to find all clients who live in Berlin AND made a purchase during the last month AND their age is between 45–60.

How can we support these types of queries with interface?

Logical operations

Confluence

Interface based advanced search

So, the internal search is the element of high importance to provide website visitors or app users with a good user experience. Make it intuitive, use the power of habits, consider the points above to improve the search experience of your user interface and strive for the good balance of search and all the other navigation. And don’t forget to analyze the internal search result: they will tell you what the users need and look for on your resource.

Blog by

Sakshi Bangad EL-A-10 1710570 | Saurav Kendre CS-A-95 1710219 | Aishwarya Jadhav EL-A-49 1710646

Educational Purpose Only.