Design scannable and effective search results UI on Web
General principles to design effective search results UI and ensure scalability
The People Problem
When searching, users can miss useful results due to the unscannable results page. This challenge might result in “low perceived relevance” towards the search engine and low click-through rate (CTR), even with high-accuracy data.
The Goal
Therefore, I explored general principles to design effective search results UI and ensure scannability. I am writing this article to share my learnings.
Disclaimer: The views and opinions expressed in this article are my own and not the views of my employer.
The Process and Design Principles
1. Understand the Universal Anatomy of Search Results.
“Can you tell which search engines are the screenshots below from?”
The search results of three major web search engines are all consist of three components: the page title, the URL, and a snippet (body data).
Follow the universal structure of “a standard search result UI” is the start point of improving your search results UI.
2. Make page titles succinct.
Principles:
1. Make page titles succinct to ensure efficient information parsing.
2. Left aligns page titles. Web readers scan information from top to down.
3. Do not bold the search string within page titles to avoid visual noise.
3. Leverage the URL/ Breadcrumb
Principles:
1. Provide well-structured URLs to offer users a quick hint about the page topic and how the page fits within the website.
2. Do not bold the “hit highlight” within the URL/ breadcrumb to avoid visual noise.
4. The snippet (body data) should provide strong information scent.
Principle: Shorten user’s decision-making time.
4.1 Provide an informative snippet can help users quickly decide if they want to click into a search result.
4.2 Provide deep link feature: By offering deep links to key pages as a part of the search results, users can skip the home page and navigate directly to the pages without browsing through the website nav.
4.3. Provide previews as parts of the search results.
5. The Visual Design Principles
- Keep the number of fonts used at a minimum. Usually 2–3 font types on the same page.
- Keep enough line height/ paddings to ensure readability.
- Remove uninformative icons and thumbnails to reduce visual noise.
- Ensure the alignment of the information on the search results page.
What Else Have I Learned
- It is important for designers to support engineering implementation continuously after “handing off process”. Because providing the specs doesn’t mean the job is done. Detail matters.
- Designers are also the “safeguard” of the product quality. We should check the diffs before launching the products.
- If you followed all the design principles above, it is essential to finalize a list of measurement to evaluate the success of search results UI design. It might be worth to conduct A/B testing.
