Search results enable access to sort and filter options on a separate page or lightbox.
how It works
When the customer wants to refine the query, he can access a dedicated page or a lightbox with filter and sort options, followed by some sort of a “go” button to re-initiate the now refined search. Optionally, the set of refinements applied to the search might be shown to the customer with a Filter Strip design pattern. (Filter Strip is covered next, in section 8.3.)
example
One excellent example of a full-featured mobile refinement is the eBay app. (See Figure 8.4.)
Figure 8.4: The eBay app is an excellent example of a Refinement Page pattern.
Chapter 8: Sorting and Filtering154
Despite apparent complexity, this remains one of the most useful and profitable mobile apps, with several billion mobile e-commerce dollars generated as of the date of this writing. One reason for its success is that designers refused to dumb down the experience and have instead done an excellent job managing complexity:
The app provides a full-featured eBay search experience in a tiny mobile device.
This app makes an excellent example because it shows off some uncommon but useful refinements, including
■ Multiple select check boxes (Free Shipping, US-only) as shown in Figure 8.5
■ Multistep drill-down refinement (Refine c Category c Sporting Goods) with additional subcategories (see Figure 8.6)
■ Sort on the same refinement page as search (Best Match and so on) as shown in Figure 8.7
Figure 8.5: One uncommon refinement in the eBay app is the use of multiple select check boxes.
8.1 Antipattern: Crippled Refinement155
Figure 8.6: This is an example of drill-down refinement.
Figure 8.7: The eBay app provides both search refinement and sort in the same Refine page.
But the eBay app not only offers full-featured refinements, but also actually does more than the desktop web version—for example, offering refinement by distance from the current location without having to enter the ZIP code (see Figure 8.8).
Chapter 8: Sorting and Filtering156
Figure 8.8: The Refinement Page pattern in the eBay app offers distance-based refinement.
when and where to use It
Any time you have a faceted search or there is a use case for changing the sort order, the Refinement Page pattern is an excellent tool for the job.
why use It
Refinement is an essential part of search, especially on the mobile device where typing avoidance generally gives rise to shorter, more general queries, which need to be refined quickly and efficiently.
other uses
Some of the best implementations of the Refinement Page pattern are not pages at all. They are Refinement Page lightboxes (also somewhat loosely called pop-ups). Early Android phones simply did not have sufficient real estate to imple-ment refineimple-ment in a lightbox that could still be operated with fat fingers, and the iPhone’s smaller size still prevents iOS designers from doing this effectively in most cases. However, today’s higher-end Android devices have a decent-size screen, which means multiple refinement options can be displayed in a lightbox, as shown in Figure 8.9, demonstrating the excellent Yelp refinement example.
8.1 Antipattern: Crippled Refinement157
Figure 8.9: The Refinement Page Lightbox in the Yelp app is a good implementation of the pattern.
Why is there a distinction between lightboxes and dedicated pages? The reason has to do with maintaining flow within the current task. As discussed in greater detail in Chapter 13, “Navigation,” immersive UIs (of which Refinement Page Lightbox is a good example) maintain the illusion of staying on the same page and within the same task, whereas separate pages appear to switch the task from one interacting with the content to that of refinement. Separate pages yank the per-son out of the search results and place her in a different environment. If you can accomplish your refinement tasks using a lightbox without sacrificing functional-ity, it almost always creates a better experience.
Pet shop Application
Either the dedicated refinement page or lightbox refinement could be usable for the faceted refinement and sorting in the Pet Shop app. What makes the design of the refinement functionality even better is the addition of the Filter Strip pat-tern. In the next section, the entire package is wireframed together using the agile sticky notes methodology.
tablet Apps
Refinements are important for tablets. Tablets have more surface area, which exposes more inventory to the customer and presumably causes them to make the decision to refine even sooner. Tablet owners also presumably care more
Chapter 8: Sorting and Filtering158
about flow than the mobile users, and tablet search tasks last on average longer than similarly structured mobile tasks. Together these factors clearly dictate that the tablet refinements need to be as full-featured as web refinements, plus provide the refinements that are only available on touch devices (such as using the GPS locator feature for distance filtering).
Because tablets have more surface area, most refinements should be done via lightboxes, not dedicated refinement pages. Remember to place the lightbox in the correct ergonomic position where the controls can be manipulated easily in both portrait and landscape orientations. In the absence of specific use information, the best place is typically on the top-right corner of the screen, where inputs in the light-box can be manipulated with the right thumb without the user having to let go of the device completely or while using a typical two-handed grip with the bottom of the tablet resting on the user’s lap or a table (see Chapter 3, “Android Fragmentation”).
caution
With the increase in screen size, there is a strong trend in many apps, such as Kayak, to have separate filtering and searching controls (large buttons on the bot-tom of the screen), as shown in Figure 8.10.
Figure 8.10: The Kayak app includes separate Sort and Filter refinement controls.
8.1 Antipattern: Crippled Refinement159
This is a mistake. As described in Designing Search: UX Strategies for Ecommerce Success (Wiley, 2011, ISBN: 978-0-470-94223-9), my original research shows that most people have trouble differentiating sorting from filtering. Furthermore, this distinction is not nearly as important as most designers and engineers think.
Consider that most people will never see more than the first 100 to 300 items of a typical result set, especially on a mobile device. In other words, people can never hope to view anything but a tiny fraction of today’s typical high-volume result set numbering in the thousands. The result is The Mystery of Filtering by Sorting. In many people’s minds they filter out high-price items when they sort by Price: Low-est First, because they can never go through the entire result set to view the high-price items at the bottom of the list. Thus the action of sorting creates an inherent filtering effect due the large number of items in the set.
On mobile devices with limited screen real estate, filtering and sorting options are often placed on the same refinement page or lightbox. (Both the Yelp and eBay apps do this.) This is a great trend that should be encouraged because it matches well with the user’s mental model of these controls, which are both seen by customers as types of “refinement.” Furthermore, as I explain in my first book, sorting controls should often be shown first and called out especially because sorting often creates a much better refinement of the result set: It never causes zero results; its outcome is predictable; and it’s hard to screw it up. So, in short, you should consider combining filtering and sorting under a single Refine Area, unless there is a good reason to do otherwise, and make refinement as much of an integral part of finding, in general, as possible
Last but not least, faceted filtering cannot strictly be considered being faceted without letting the customer know the numbers of items that will result when the facets or filters are applied. Numbers of items associated with refinements let customers know how to proceed. Unfortunately, knowing numbers of items is particularly hard to do with multiple refinements being applied in a single shot using check boxes, as they are in the eBay and Yelp apps. By default, this creates a refinement experience that is inferior to that of using a desktop web browser.
In your apps, if at all possible, try to indicate the outcomes of user refinement actions, including how many items will be left over after the filter is applied in order to avoid zero-results outcomes.
related Patterns
8.3 Pattern: Filter Strip 13.5 Pattern: Watermark
8.4 Pattern: Parallel Architecture
Chapter 8: Sorting and Filtering160