Skip navigation
Help

TripAdvisor

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.

  

Editor’s Note: Smashing Magazine is happy to present this sample chapter from Theresa Neil’s new book Mobile Design Pattern Gallery: UI Patterns for iOS, Android and More, which provides solutions to common design challenges. We’re certain you’ll find the information useful for your next mobile project.

As I was waiting for a table at a local restaurant the other day, I flipped through a couple of the free classified papers. I was shocked to realize how dependent I’ve grown on three simple features that just aren’t available in the analog world: search, sort and filter.

AutoDirect and some of the other freebies are organized by category (like trucks, vans, SUVs) but others, like Greensheet, just list page after page of items for sale. I would actually have to read every single ad in the paper to find what I wanted. No thank you, I’ll use Craigslist on my phone instead.

But after taking a look at Craigslist mobile, it became obvious we could all benefit from some best practices around mobile search, sort and filter UI design. This chapter explores a dozen different ways to surface and refine the data your customers want.

Search Patterns

Before you ever try to design a search interface for any platform, buy and read these two books: Search Patterns: Design for Discovery by Peter Morevill and Jeffery Callendar, and Designing Search: UX Strategies for eCommerce Success by Greg Nudelman.

Then take a look at these search patterns specific to mobile applications:

  • Explicit Search
  • Auto-Complete
  • Dynamic Search
  • Scoped Search
  • Saved & Recent
  • Search Form
  • Search Results

Explicit Search

Explicit search relies on an explicit action to perform the search and view results. That action might be to tap a search button on the screen, like Walmart, or on the keyboard, like Target. The results are typically displayed in the area below the search bar. Consider pairing an explicit search pattern with the auto-complete pattern.


Walmart uses a search button (Go) on the screen, Target uses the Search on the keyboard.


Target loading and then displaying search results.

Offer a clear button in the field and an option to cancel the search. Use feedback to show the search is being performed.

Auto-Complete

Probably the most useful search pattern that emerged in Web 2.0 is auto-complete. Typing will immediately surface a set of possible results, just tap on one to selected it and the search will be performed. Or continue typing your own criteria and then tap the explicit search button.


Android Marketplace (Google Play) and Netflix both use auto-complete

Ideally the results will be displayed immediately, but a progress indicator (searching…) should be used for system feedback. Netflix (above) uses an indicator in the search field, whereas Fidelity (below) displays one where the results will eventually be displayed.


Fidelity shows feedback while loading the auto-complete options.

TripAdvisor provides an enhanced auto-complete, grouping the results by popular destinations, hotels, restaurants. LinkedIn does something similar by showing direct connections first, then other people in LinkedIn.


TripAdvisor and LinkedIn group the suggested options.

Provide feedback if there could be a delay in displaying the results. Consider emphasizing the matching search text in the search results.

Dynamic Search

This pattern may also be called dynamic filtering. Entering text in the search field will dynamically (onkeypress) filter the data on the screen. Note, the examples may look similar to auto-complete but there is a different interation model. The dynamic search pattern is used to refine or whittle down a existing and visible list of objects. In these examples from BlackBerry App World and WorldMate on Android, apps and hotels, respectively, were already displayed on the page.


BlackBerry App World and WorldMate offer dynamic search for refining a big list of results.

Works well for refining constrained data sets, like an address book or personal media library, but may be impractical for searching large data sets from multiple sources.

Scoped Search

Sometimes it is easier (and faster) to get to the desired result by scoping the search criteria before performing the search. Google and Photobucket use different designs to the same end.


Google uses an overlay to present scope options, whereas Photobucket uses a dialog.

AllRecipes also lets you select criteria (or filters) before submitting the search. Dropbox defaults the initial scope to All, but you can switch it to Files or Folders before or after tapping the search button.


AllRecipes pushes the limit of scoping options, Dropbox keeps it simple with just 3.

Offer reasonable scoping options based on the data set. Three to six scoping options are plenty, consider a search form for advanced searching capabilities.

Saved & Recent

Successful mobile interfaces follow a basic usability maxim: respect the users effort. Saved and recent searches do this by making it easy to select from previous searches, instead of retyping the same keywords or search criteria.


eBay lets customers explicity save searches. Both eBay and Walmart implicity save customers’ most recent searches.

Other options to respect the users’ effort involve location based searching options like Trulia, and bar code searching, like PriceCheck by Amazon.


Trulia offers location based searching, Amazon offers 4 ways to search.


Google Shopper offers scan and speak search options and a full search history grouped by search date.

Saved searches typically require additional steps to name a search for later use, whereas recent searches are implicitly saved and surfaced. Consider which one will best serve your customers’ needs.

Search Form

This pattern is characterized by a separate form for entering search criteria, and an explicit search button.


Search forms on WorldMate and airbnb.


WholeFood’s recipe search allows customers to add multiple criteria, course, category, special diets and keywords.

Minimize the number of input fields. Implement OS specific input controls properly. Follow form design best practices (alignment, labels, size).

Search Results

Once a search is performed the results can be displayed in the same screen or on a dedicate results screen. Results may be displayed in a table or list, on a map or satellite, or as thumbnail images. Multiple view options can be used depending on the type of results and user preferences.


Kayak and Foursquare (webOS) show the results in a table.


airbnb shows the results in a list and offers a map view toggle.


Zappos offers a list view and alternate carousel view for browsing search results.

Lazy loading is a common technique to use so that some results will be displayed while the rest are being loaded. Many applications offer either a button to explicitly “view more results” or will automatically load more results when the screen is flicked.


eBay Motors and Best Buy.

Label the results with the number returned. Use lazy loading instead of paging. Apply a reasonable default sort order. Avoid paging tables, they break the natural interaction model for viewing information on a mobile device.

Sort

It is important to choose a reasonable default sort for displaying search results. A little common sense plus user validation is the best way to choose the default sort order. These patterns offer options for changing the default sort:

  • Onscreen Sort
  • Sort Selector
  • Sort Form

Onscreen Sort

When there are only a few sort options, an onscreen sort can provide a simple one tap solution. Placing the sort toggle at the top or bottom of the screen will depend on the other screen elements.

Target provides four sort options with a three toggle button. For the price sort option, they offer two choices: sort by price ascending and sort by price descending.


Expedia (older version) and Target iOS use onscreen sort.

Clearly show which option is selected or “on”. Consider the Sort Order Selector pattern if the option labels don’t fit nicely in a toggle button bar.

Sort Order Selector

The selector pattern is a good alternative to the onscreen sort. There are a number of different UI controls that can be used for selection, but consider the design guidelines for the OS you are designing for (ex. the menu is common for Android app, and the picker and actionsheet are common in iOS apps).


Walmart on Android uses the common menu control.

The option titles can be longer (more explicit) and more options can be displayed. Walmart places the sort button in proximity with the search field, wheras Kayak offers sort and filter options at the bottom of the screen.


Kayak on iOS uses the standard selector control.

OS neutral solutions include a simple combobox, like Target on Android, or an overlay menu, like Awesome Note.


Target on Android just uses a combobox. AwesomeNote uses an overlay.

Follow OS design conventions for choosing the selector control, or choose an OS neutral implementation. Clearly show which sort option is applied.

Sort Form

Some applications have consolidated the sort and filter options into one screen, typically titled “Refine”. This is the most effort intensive sort pattern requiring the user to open the form, select an option, and then apply the selection (by tapping “done” or “apply”).


Cars.com and eBay Classifieds.

Consider the more efficient sort option toggle or sort order selector patterns before choosing this design.

Filter

Large sets of data can require additional filtering, also called refining. Filtering relies on the user selecting criteria by which to refine the set of search results or a large set of objects. Common filtering patterns include:

  • Onscreen Filter
  • Filter Drawer
  • Filter Dialog
  • Filter Form

Also see the earlier search pattern, Scoped Search, for an optional pre-filtering technique.

Onscreen filter

Similar to the onscreen sort, the onscreen filter is displayed with the results or list of objects. With one tap, the filter is applied. HeyZap uses the standard toggle button bar, whereas Google uses vertical tabs.


HeyZap and Google.

CBS News and the ACL Festival app uses a scrolling filter bar as a way to let users quickly hone in on certain types of articles and bands, respectively.


CBS News (single filter bar) and Austin City Limits Music Festival (double filter bar).

Don’t use this filter pattern for primary navigation within your app, but instead use it to group and filter related content.

SXSW offers a filter button bar combined with a second row of filtering options. Feed a Fever news reader uses a super simple stylized set of comboboxes for filtering news feeds.


SXSW Conference app and Feed a Fever.

Filter options should be clearly worded and easy to understand. Show the filters that are applied or “on”.

Filter Drawer

Almost as efficient as the onscreen filter, a drawer can be used to reveal filter options. Flicking or tapping a handle will open the drawer. Audible’s drawer reveals a simple filter toggle bar, whereas Sam’s offers a host of filter options that can be applied to the map of club locations. A better design for Sam’s would be to leave the map visible and allow for dynamic filtering instead of the explicit “filter” button.


Audible and Sam’s Club.


Expedia’s new filter drawer.

Filter Dialog

Like a pop-up on in a web app, the filter dialog is modal in nature. It requires the user to select a filter option, or cancel the action. TripAdvisor on iOS has a custom filter dialog, whereas USPS Mobile on Android relies on the default selector control.


TripAdvisor and Due Today Lite.

While the Filter Dialog may get the job done, the first two patterns provide more freedom for users to experiment with and apply filters directly in context.

Keep the options list short, avoid scrolling. Consider a Filter Form for lengthier or multi-select filter options.

Filter Form

Large data sets can benefit from more advanced filter/refinement options. For example, WorldMate uses a form to filter hotels based on price, brand and stars. Zappos uses a similar approach, using the iOS standard drill down for selection, and the clear/done buttons in the title bar.


WorldMate’s filter form (looks very similar to Kayak’s design) and Zappos filter form for iOS.

Freetime uses custom controls in their filter form. First you pick the filter category, then choose the filter criteria, then apply the filter to the calendar.


Free-Time filter form.

Conditional filters, also called predicate editors or expression builders, are an advanced filtering feature typically found in reporting tools. Here’s the standard layout used on the web and desktop.


Predicate editor in the Wufoo web application.

Creating a conditional filtering a mobile application can be challenging in a mobile form factor but Roambi has accomplished it.


Roambi’s predicate editor.

Don’t over-design the filters, a simple onscreen filter or drawer will usually suffice. If a filter form is necessary, follow form design best practices.

More Resources

Learn more about designing usable and effective mobile apps in Mobile Design Pattern Gallery: UI Patterns for iOS, Android, and More:

  • Navigation
  • Forms
  • Tables
  • Tools
  • Charts
  • Invitations
  • Feedback & Affordance
  • Help

Also check out the Mobile Design Pattern Gallery website, blog and Flickr photostream with +600 screenshots.

(fi)

© Theresa Neil for Smashing Magazine, 2012.

0
Your rating: None

ApU7PuJCEAISoHY

[Editor’s Note: Brenden Mulligan is an entrepreneur who created Onesheet, TipList, ArtistData, MorningPics, and PhotoPile. He’s a mentor for 500 Startups and several startups. You can find him on Twitter at @mulligan.]

When my wife and I travel, we rarely stay in hotels. We usually either stay in hostels or apartments. The apartments are usually found and booked on Airbnb. We’re big fans of the service, and think it’s one of the best ways to experience a foreign city. However, some recent events have made me think a bit deeper about this maturing marketplace and the whole spectrum of collaborative consumption services.

We are currently on a trip to Tokyo for an speaking engagement and some mentoring of the teams at Open Network Lab, a Tokyo-based incubator I wrote about last fall during our last Tokyo visit.

Last night, we arrived to our apartment. The amenities and space was almost exactly as described. But there was something about our place that didn’t appear in the Airbnb description, which almost made us walk out immediately: the cleanliness of the bedding.

After 24 hours of traveling, got to a disgusting @airbnb place. Not happy we are stuck here 5 nights. Provided pillows: http://t.co/N7g5R3tB


Brenden Mulligan (@mulligan) March 31, 2012

Luckily, both the host and Airbnb have been extremely responsive and helpful with the issue and we’ve got it resolved (the pillows and sheets are being replaced). But it got me thinking about a few subtle aspects of collaborate consumption.

Lack of Consistent Health / Cleanliness Standards

When you stay at a hotel, there’s a certain level of cleanliness you expect. That level is probably directly proportional with the price you are paying, but even at budget hotels, you still expect a decently clean room. And the worst case scenario is that your room isn’t what you want, you can try to switch to one that’s more suited for your needs.

But personal apartments are different. There is no baseline of cleanliness, and no immediate options if it doesn’t suit your needs. If when you check into a hotel room, you see a big stain in the middle of the bed, you can ask to switch rooms, or at the very least to get new sheets. But when you check into an apartment in a foreign city, you don’t have that option. There’s a small chance you can be moved to a different apartment, but that might be in a totally different neighborhood, with different amenities, etc..

I think that’s a subtle but very important dynamic. Essentially, when you choose to stay in an apartment, you are making a gamble. Most of the time, the gamble results in a more positive overall experience, but in the times it doesn’t, it really leaves a negative impression.

To be clear, I love @Airbnb. But when every pillow provided looks soaked in every body fluid imaginable, hotels seem appealing.


Brenden Mulligan (@mulligan) March 31, 2012

Sometimes the trade off of a more local experience isn’t worth the chance of dirty sheets.

I’ve found a similar experience when renting cars from RelayRidesGetAround, or Zipcar. In general, the interiors of the vehicles are dirtier than a traditional rental cars. The reasons for this are obvious. Rental car companies prep the cars for each renter, the same way hotels clean / prep the rooms for each guest. But with the economics of car sharing by the hour, it doesn’t make sense to professionally clean a car every time someone wants to pay $10 to take it to IKEA.

As more of these companies come into existence, it’ll be interesting to see if a set of standards is developed so renters / guests can come to expect a certain amount of cleanliness when reserving a car/apartment/etc…. That will most likely increase consumer confidence in these services and take them closer to mainstream use.

Professionals service providers are more attune to when items “expire”

Hotels make a business out of rotating people through its rooms night after night. I’ve never worked in the industry, but I’d assume there is some kind of schedule about when they replace certain things. For example, maybe a hotel has an internal policy to replace the pillows once a month.

But most people renting their spaces on Airbnb or Homeaway probably don’t think about this stuff, because they’re not professionals. They are just making some extra cash from their places.

It’d be interesting to see these services help owners by adding some alerts to their dashboard. Maybe after they have logged 60 consecutive days of bookings, an email is sent to the host saying “We recommend you replace the pillows and sheets”.

Even better, maybe there’s a way for the hosts to mark in their account that this has happened, so potential renters can see “Pillows replaced 23 days ago” in the profile. I know this seems minor but think about it: you are smashing your face (and mouth) into the pillow for 8 straight hours. You should care about how many other people did this on the same pillow.

TripAdvisor brought transparency to hotel photos; Airbnb… professional photographers

When TripAdvisor launched, it gave us all an opportunity to see what hotel rooms actually look like. It was amazing. We got to see beyond the stock photos hotels post on their website and get a glimpse of what the real bed and bathroom we will be experiencing. It was great, and brought accountability to the whole industry.

But Airbnb seems like the opposite from a photography standpoint:

We extend a professional photography program that offers immense value. Professionally photographed listings get booked twice as often as those without professional photography since high-resolution photos really showcase your space.

Source: Airbnb Support

This is an awesome service that they provide and they’re really smart to do it. They bring in a photographer — with a wide angle lens, it seems like — to stage the apartment and make it feel as bright and spacious as possible. And it works; the places look huge!

But this also has negative consequences. For almost every apartment I’ve rented on Airbnb, my first thoughts were “this is smaller than it looked online”. I’ve come to expect this, so it’s never a surprise, but for new Airbnb-ers, it could be a turnoff.

But this doesn’t bother me. The thing that bothers me is that although they let me write reviews, I can’t post my own photos.

I want to see the glamor shots, and think they should always appear on the front page, but I also think it’d be useful to see the real photos of these places. I can see why Airbnb wouldn’t want that on their site (because the renter photos will undoubtably look MUCH worse than the provided ones), but it’d be nice for this to exist somewhere.

Regardless if it’s apartments, cars, or hotels, when you rent from a well known brand, you inherently start with a basis of trust in how the end product will appear in comparison to how its represented on their website. When renting from another person, there isn’t that basis of trust, which is why reviews from other users are so important and the addition of visual elements can enhance those reviews.

Going Forward

Collaborative consumption is amazing and is here to stay. But as these services grow in usage and enter the mainstream, they will continually need to add more elements that make the experience across their inventory more consistent.

I can’t wait to continue to watch as this dynamic matures and see the new things that become standard across these sharing marketplaces.

0
Your rating: None