Designing Search: UX Strategies for eCommerce Success

CHAPTER 3

CHOOSING THE RIGHT SEARCH RESULTS PAGE LAYOUT

Using Liquid Layouts PAGE 52

Using Fixed-Width Layouts PAGE 54

Optimizing for Your Best Customers PAGE 56

Handling Margins in Fixed-Width Layouts PAGE 57

Your layout decisions for search results pages will have tremendous impact on user experience (UX). For instance, choosing the right width for search results is important, and the optimal width for search results may be a great deal narrower than some people using big monitors would believe.

Figure 3.1 shows a Starbucks search results page made virtually unusable through some very poor page layout choices. At a screen resolution of 800 × 600 pixels, most of what you see is the left margin of the layout and a large logo.

FIGURE 3.1 Starbucks search results at 800 × 600 pixel resolution

Although there are many ways to use horizontal space on search results pages, you can generally distinguish between liquid and fixed-width layouts. Each style of layout offers a unique set of challenges and opportunities.

USING LIQUID LAYOUTS

In a liquid layout, the width of the search results on a Web page shrinks and expands to fill the available space as a user changes the screen resolution or the width of the browser window. Not surprisingly, many top sites such as Google effectively utilize liquid layouts to create top-notch user interfaces that perform well at any screen resolution or window ...