Research

Getting familiar with the search functionality and solutions across the internet. Researching what the competition is doing and what is the current status-quo in the industry regarding search interaction.

Competition

I looked at the most popular websites an their implementation. International websites like Amazon, Booking, Get Your Guide or ebay, but also local websites like Walmart, Otto or MediaMarkt reveal a few consistent patterns,

Patterns and building blocks

All of the studied websites have a similar way of showing the search results. There are 3 zones in every search result page. This, over the last years created a certain expectation in the users behavior. Changing this expectation requires learning and cognitive overhead slowing down the buying process.

FILTERING

ORDERING

RESULTS

First insights

search

is the most important function by position and size. It is always displayed in a very central zone. On some websites it even spans the entire screen like Amazon.

search results

are displayed in a similar fashion which in turn creates user expectations. The users expect a certain behavior and layout.

filtering

is always one-click away, easy to read and directly accessible. Usual placement in on the left side of the results.

sorting

is placed above the results and usually on the right side it offers the possibility of sorting the results by price, rating or other criteria

Studied solutions

3 Types of search

known product

The user knows the exact name of the product he/she is looking for.

 

solutions: autocomplete, good site structure

forgotten name

The user knows how the product looks or maybe the brand but he/she forgot the exact name. Also the user is aware of the category the product might be into.

 

solutions: good filtering of results, autocomplete, brand suggestions, category suggestion

exploration

Users are not looking for something in particular but they simply want to buy something interesting.

 

solutions: display sales and promotions on front-page, new products suggestions, exploratory filtering (like color), trends visualization

Evaluating the current solution

1
search is placed in a marginal position to the right giving it less visibility
2
Filtering is less optimal to use. It needs at minimum 3 clicks to operate. Users stare at the screen expecting that something happens.
3
Filters are sometimes duplicated on the top and on the right side. Users are confused about the difference.
4
The results area is smaller that it could be. The area above the results is occupied by filters and the layout does not take advantage of the wide screens of most computers.

How happy is the customer?

Opportunities

1

search functionality can be optimized by simply placing the searchbox in a more visible position/area

2

Filtering speed can be improves by reducing the number of required clicks.

3

Removing duplicated controls can free up the interface and give it a more clean look while improving on usability.

4

The results area can be enlarged. Filters could take advantage of the wide screens of most computers.

Design

Taking the above into account I started sketching and wire-framing then laying out the controls. Here is what it turned out into.

Guiding principles

1. Controllability

User is in control and always informed. User can read the current state of the page at a glance.

2. Clarity

Clear hierarchy and function prioritization. Order of importance is top to bottom and left to right.

3. Simplicity

User is informed using complete simple sentences. Natural language is preferred. Decluttering where possible and avoid double controls. Hide controls that are not needed in certain contexts.

4. Consistency

Respecting user expectations. Similar user needs require similar user actions. Making use of already existing deeply engrained user behaviors.

Things I tried

search on top / genre on left

search on right / login on second row

search on right / genre in center top

visible top level filters

small search button

large search field

Proposed solution

greeting the user

searching in action

showing the results

filtering the results

Next Steps

  • building a prototype

  • conducting user testing to measure:

    • improvement in searching speed

    • improvement in the accuracy of search results

    • order of filters in the search results page

    • user acceptance

  • iterate on the solution, test, iterate, test …

  • then implement and release