Research
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
