Sometimes called Hub-and-Spoke (first documented by the User Experience (UX) w expert Jennifer Tidwell in her essential 2011 book Designing Interfaces from O’Reilly), List of Links is a popular and venerable design pattern used all over the mobile world on all manner of platforms and applications. Unfortunately, this pattern frequently tells people about the story, rather than telling the story itself.
Here’s how to spruce it up to improve its usefulness.
how It works
The home screen acts as a hub that presents a bunch of links or icons of primary functions or popular views that can be obtained with the app.
example
You don’t have to look hard to find an example of this pattern. Travelocity (see Fig-ure 6.1) offers a good one that also highlights the key issue with this pattern: tell-ing customers about the story (instead of the story itself).
Figure 6.1: The Travelocity app uses a typical List of Links pattern.
The screen makes it clear what information can be obtained within the app and what actions you can take if you engage with the app as a customer. The icons are clear.
6.1 Pattern: List of Links89
However, despite the clarity of the display, the screen leaves the customer feeling…
a little blue (or a little gray, if you are viewing this screenshot in gray scale). There is absolutely no information that pertains to the customer: Everyone gets the same set of links. How would you make this static page tell customers more of a story?
One approach is to use notification badges somewhere on the page or on the indi-vidual icons or links. One example of this is the older version of Google Plus (see Figure 6.2), where notifications are featured prominently on the top of the screen (the 3 in the red box).
Figure 6.2: Google Plus List of Links tells more of the story.
A simple variation of this would be to put notifications as smaller badges on individual icons—for example, place a (1) on the Photos icon if someone shared a new photo and a (2) on the Circles icon when two people have been added to your circles, and so on. The additional notifications would help the List of Links provide a few more details of the story (rather than telling people about the story).
when and where to use It
List of Links is the default pattern most people should consider as the first design for the home screen because List Of Links does a great job of cataloging vari-ous aspects of the app’s functionality. Even if you do not end up ultimately using this pattern for your home screen, drawing a List of Links for your app is a great
Chapter 6: home Screen90
exercise in organizing the app’s Information Architecture (IA) and cataloging pos-sible use cases and those of your competitors.
Other patterns in this chapter are better for certain applications; however, List of Links is the basic default you should consider if your app covers a lot of highly variable functionality. Consider that in the Travelocity example (refer to Figure 6.1) the customer can book hotels, flights, or cars; read about new and exciting vaca-tion destinavaca-tions; and even find gas. This is a great deal of useful funcvaca-tionality to pack into a mobile app!
why use It
The List of Links pattern is one of the easiest and most intuitive for a novice to navigate. It’s easy to design and build (provided you have a decent icon designer), and it launches instantly because it does not require a server call to retrieve any information that is not already on the phone. Even if you do decide to go to the server to grab the badges, as shown in the Google Plus app (refer to Figure 6.2), these updates are typically single digits, which require minimal download time.
other uses
One popular variation from this basic pattern is the Grouped List of Links shown in the Southwest Airlines app in Figure 6.3.
Figure 6.3: The Southwest Airlines app shows a grouped variation of the List of Links pattern.
6.1 Pattern: List of Links91
This is a great variation for apps that have a lot of links because it enables a logi-cal grouping that helps reduce the cognitive load on the customer.
Pet shop Application
List of Links enables designers to succeed with a wonderful variety of IAs. For example, Figure 6.4 shows just two: the IA on the left enables exploration by type of object (Dogs, Cats, Birds, Fish, Reptilians, and Other), whereas the IA on the right is more centered on what you can do (Find Pets, Care & Feeding, Local News, and Your Profile). It’s a great exercise to pause here and imagine a few other alternative IAs that fit the Pet Shop theme. Which one should you choose?
Obviously the one on the left emphasizes the e-commerce application, whereas the one on the right is more suited to social networking applications. The one you ultimately choose depends on what your app is designed to do.
Figure 6.4: The List of Links pattern supports multiple IAs.
The badge update mechanism mentioned earlier is also included so that some links (for example, Local News in the right-hand design variation) show the new updates that have come in since the last time that particular area of the app was visited.
tablet Apps
This pattern always feels a bit dry on the tablet with a large expanse of space available to the viewer. List of Links is less suited to the tablet in general. If you do use List of Links, consider having a split pane view with one of the other patterns in this chapter shown in the other pane.
Chapter 6: home Screen92
caution
None
related Patterns
6.4 Pattern: Browse