Whenever you have regular relevant personal information of interest to the cus-tomer, consider using the Updates pattern on your home screen.
how It works
The home screen shows one or more posts or messages from the customer’s update stream.
example
There are many examples of this pattern, from e-mail apps such as Gmail to news apps such as CNN. However, where this pattern really shines is in social media apps such as Twitter and LinkedIn. Perhaps the quintessential and richest exam-ple is Facebook (see Figure 6.7).
The Facebook app home screen shows a running summary of updates of various different types, all arranged in the order of Most Recent First. This design is easy to understand and use and immediately tells the freshest story possible anywhere.
Note also the roll-away side menu that Chapter 13, “Navigation,” covers in more detail.
Chapter 6: home Screen96
Figure 6.7: The Facebook app’s implementation of the Updates home screen pattern is excellent.
when and where to use It
Regular updates that are of some interest to the customer are the prerequisite for using this pattern. Thus, it is most often used in communications-driven apps, such as e-mail and social media, and less so in e-commerce, e-readers, and other content- and action-centric applications.
why use It
Updates tell the story—pure and simple. Recall the earlier discussion of the Google Plus app in Figure 6.2. The older design of the Google Plus app notifies the customer that he had three updates. It is slightly better than no notifications, but still it tells no story—but only tells about the story—and requires the customer to make the extra tap to reveal the details. In sharp contrast, the Updates design pattern makes the story the front centerpiece of the display. For the apps where the story matters, this is an effective pattern because it enables your customers to immerse themselves in the story from the beginning, which means they navi-gate less and stay engaged longer. Compare the older design of the Google Plus
6.1 Pattern: List of Links97
app shown in Figure 6.2 with the recent design that uses the Updates pattern as shown in Figure 1.7 in Chapter 1, “Design for Android: A Case Study.”
other uses
In addition to personalized feeds from social media and e-mail apps, news stories of general interest are also appropriate for the Updates pattern implementation.
Here you have a choice: Whereas typical updates are posted in the order of Most Recent First, news can also be posted in order by Most Popular First or in multiple sections, such as Breaking News, Most Popular Stories of the Day, and Editorials.
Pet shop Application
Figure 6.8 demonstrates the Updates pattern designed with the screen in two sec-tions: Local Canine News and New Puppies on the Market. Both sections assume you have identified some pieces of information about yourself: where you live and what kind of pet you are looking for. Note that you do not need to label each sec-tion explicitly if they have different layouts (though there is nothing wrong with labels). This design saves some screen real estate by not labeling the New Pup-pies on the Market section because it should be pretty clear to the customer even without the label that it has some “featured” type items that the system judged relevant for him or her. This arrangement also enables you to experiment with this important section and create the perfect mix of content for each customer without being constrained by the section title.
This kind of information might be useful to a dog enthusiast, who would be the tar-get customer for this kind of app. The local news section is shown first because it is less likely that there is much local dog news, so these events are more urgent/
important. This section can be entirely optional. For example, if there is no local dog news happening right now, the section might be empty. Verify any assump-tions you make in your own designs through user research that will help you understand the needs of your market and design accordingly.
The second section can be based on the last search the customer performed or set up on a separate page, looking for new arrivals on the market of dogs and puppies of a particular breed. There are usually more updates to this section because inventory turns over quickly. Therefore, this section can extend well below the fold. (Above the fold is the portion of the screen that is visible without scrolling.) Depending on the design, the entire page can be made scrollable, so the news, once read, can be scrolled off the screen easily. This mixed content updates is a useful model adopted from Facebook; as you can see it can be suc-cessfully applied in many different situations.
Chapter 6: home Screen98
Figure 6.8: This wireframe presents an alternative approach to mixed media: the two-sectioned Updates pattern in the Pet Shop app.
tablet Apps
Updates on the tablets are fantastic and constitute one of the best tablet home screen patterns. Because screen real estate is much less of a problem than on a smaller device, you can devote more space to tell the story with updates without worrying about the mechanism for hiding the navigation; there is usually plenty of space to display navigation alongside the updates.
Whether you use List of Links, Dashboard, or any other pattern described for your tablet home screen, make an effort to also include a section of updates. You’ll be glad you did.
6.1 Pattern: List of Links99
caution
Keep it simple, especially on tablets. One or two sections of updates are usually plenty; a single section of mixed updates (using the Facebook model) is often best.
Remember, the customer is most likely to have the Facebook model in mind when she sees your updates, so she will expect the sort order to be Most Recent First.
If you choose a different sort order, make sure that you have a good reason to change, and signal it appropriately to the customer.
related Patterns
6.1 Pattern: List of Links