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.

Studied solutions

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

User Feedback

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.

The 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

Controllability

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

Clarity

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

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.

Accessible Familiarity

Making things accessible by taking advantage of the already existing deeply engrained user behaviors.

Speed

Lowering the time to reaching a result is of essence. Users want to do things fast, with less clicks.

Consistency

Same features, same controls, different devices. Users need to instantly recognize similar functionality independent of the device they are using.

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

Things I detailed deeper

Smaller screen sizes

Proposed Solution

greeting the user

the menu

showing the results

searching in action

filtering the results

Adapting to various screen dimensions

Prototypes

Menu animation

Search animation

Ipad mockup