Search Results Page Design

Searching for products in your website, users could make many mistakes. Your website search engine should not only accept exact matches but also misspelled words.

Petsmart.com, the online pet shop, propose other search terms when the one entered by the user does not match any on the database. Searching for “dogga” will propose the search term “doggy”.

Amazon Search 20071231

Improving usability and sales, Amazon.com has a much better design of its search result page. At Amazon, searching for “shinning” will not only propose the exact term “shining” but it will also show related products.

Amazon Search 200712311

This approach makes users’ life easier and could bring the products you want to sell closer to your clients.

Tab Rows, Good Example

Using tabs is sometimes a very good option for a wed design. Visitors use them to navigate the site and to know where they are.

JCPenney 20071229

The JCPenney tab rows are 100% fine. They use a different color for the selected tab, but this color is similar to the one used for the unselected tabs. From the usability point of view, I can imagine that this could affect visually impaired and color blinded people.

MySQL 20071229

Giving users a graphical and shaped sign could be much better for everybody. The MySQL website not only uses a different color for the selected tab but also makes a connection to the menu line below, creating a much obvious and nicer visual effect.

Search Box With Subsections Solution

Giving users the chance to narrow the search from the beginning might increase the possibility that they find the information or product they are looking for at your website. One usability approach is to provide a search box with a list of subsections. Here an example of Cafepress.com, a design-it-yourself shop.

Cafepress 20071228

Give users a list of selectors, specially if you are offering a wide range of products. But take care, many users might not understand how the selector works, so make the “search all departments” the default option.

Etsy 20071228

Etsy.com, the handmade product website, got a not so perfect solution, subsections are not very clear. They split the subsections into farther subsections using “items:” and “sellers:”, plus they assume that all users understand the meaning and use of tags.