Sometimes, the best home screens are the ones that engage the customer in browsing items or information important to them—provided you supply enough information to avoid pogo-sticking.
how It works
When the home screen loads, it displays some actual items and item categories of interest to the customer.
example
A decent example of this pattern is the Amazon.com app (see Figure 6.9). When the app loads, the home screen displays some items of immediate and personal interest to the customer based on his previous search history, or items obtained via the People Who Shopped for X Also Shopped for Y loose-matching algorithm.
Why is this not the best possible example? Even though Amazon.com has a good Browse section, it is small compared to the overall screen real estate. There is a lot of branded miscellaneous junk, such as Gold Box, greeting, and navigation. Most important, individual item-level information is completely missing; the custom-ers have no idea why this shoe is shown, what the item’s title is, or (this is the key) what the item’s price and any associated discount are. All the customer sees is the picture.
A better approach is developed by the redesigned Newegg app, as shown in Figure 6.10.
Chapter 6: home Screen100
Figure 6.9: The Amazon.com app includes a decent example of the Browse pattern.
Figure 6.10: The Newegg app has a better implementation of the Browse pattern.
6.1 Pattern: List of Links101
Most of the page is devoted to products on sale. Each product is shown with a good-sized thumbnail and description, and the price and discount take center-stage. This is an actionable home screen designed so that the customer can immediately make a purchase decision without looking at the detail page. If you scroll past the sale items, you come to the category list, which offers brows-ing opportunities by category for those customers not immediately interested in sales.
Depending on your app, an even better approach to design a Browse pattern home screen might be to use the 2-D More Like This pattern (similar to Netflix and Gowalla). You can find more information on this useful pattern in Chapter 14,
“Tablet Patterns.”
when and where to use It
Any time you have some content that might be of interest to the customer, Browse is a great pattern to put to work. A Browse section can be small, like it is on the Amazon.com app or implemented as the 2-D More Like This pattern over the entire home screen as it is in the Netflix app.
why use It
Much like the individual updates in the Updates pattern, real items of interest are the story. Seeing these actual items front and center tells the story and engages the customer immediately.
other uses
You could argue that Updates and Browse are similar patterns, and you are, of course, correct. However, there is one crucial difference: Updates are strictly devoted to showing updates from the people you are already connected with or real updates happening in the system. Browse is another facet of the same idea, but it can be expanded greatly to also show related merchandise, upsells, deals, local inventory, and the like. Most successful apps including Amazon.com experi-ment with a mixture of items in their Browse streams, making a fresh list each time the person visits the home screen. You should, too.
Browsing content for local information and deals is always popular, and it’s great to include these things on a mobile device that tracks a customer’s immediate location via on-board GPS. Make sure, however, that this content relates in some way to the person’s interests and avoid spam and outright ads.
Chapter 6: home Screen102
Pet shop Application
Figure 6.11 shows a simple example of the Browse pattern created with a gallery of new pets available in the customer’s area.
Figure 6.11: This wireframe shows a gallery of pets on the home screen of the Pet Shop app using the Browse pattern.
This approach is both effective and attractive as a homepage that enables new customers to know upfront what they can expect from the app. For another great example of a Browse home screen interface design, see the Pet Shop section in the 2-D More Like This pattern in Chapter 14.
6.1 Pattern: List of Links103
tablet Apps
Browse is practically made for tablets because of the more expansive real estate and free-flowing swiping gestures. Any browse content you can bring into the tab-let interface improves the customer’s home screen engagement and the appeal of your app.
caution
It’s easy to yield to the pressure from the marketing department to include items that have nothing to do with the customer and are basically ads. Don’t do this. If you do, conversion and customer loyalty will both plummet.
Another thing to watch out for is to ensure that you provide not just images of items but also enough supplemental information so that the customer can make a solid, committed decision to drill down into details to investigate further and pos-sibly purchase or otherwise engage; you want to help the customer avoid pogo-sticking into multiple items. This commitment on your part must include a large enough thumbnail image for the customer to see the necessary detail and also sufficient supplemental textual information (refer to the earlier Amazon.com and Newegg examples).
related Patterns
14.5 Pattern: 2-D More Like This