In my previous post I discussed navigation, search, and the LATCH model for user experience design. This post presents a few more “best practices” in tablet reader app design.
The Rule of 7+/- 2
In general, hierarchies (including menus, bullet lists, tabs) should be limited to about 7 items at each level. More than 7 (plus or minus 2), the average reader will tend to forget what the first item is by the time they get to the last. This means they have to read the list again from the top, meaning they’ll forget the bottom few.
“In considering breadth, you should be sensitive to the cognitive limits of the human mind. Particularly with ambiguous organization schemes, try to follow the seven plus-or-minus two rule. Web sites with more than ten options on the main menu can overwhelm users.”
– Rosenfeld and Morville, Information Architecture
This is an old, well-understood cognitive model: see G. Miller, “The Magical Number Seven, Plus Or Minus Two: Some Limits On Our Capacity for Processing Information” Psychological Review 63, no. 2 (1956): 81-97.
So if you have 350 articles, then you should be able to organize them in just two levels (an average of 7 topics x 7 subtopics x 7 articles in each = 343 articles).
But high-volume publishers like news agencies often have thousands (sometimes tens of thousands) of stories. What do you do? Consider moving much of your content to news archives with advanced search capabilities, including filtering by date, topic, and keyword (remember that LATCH model from my previous post).
Discovery Models
Once you have thought about how to organize your content, you need to consider your discovery models. The term progressive disclosure refers to an interface that starts simply and waits for the user to make the first move. Once the user makes a UI gesture, such as swiping across the screen or tapping a tab, the interface discloses more information.
The most common progressive disclosure model is the tried-and-true dropdown menu. What you first see is a top-level hierarchy. Once you make a gesture—say by tapping or clicking on a menu item—you’ll then see the items below it. Sliders and drawers and other collapsible areas in the interface are all part of progressive disclosure (Netflix does this masterfully).
Progressive disclosure prevents the reader from seeing too much overwhelming information at once. But if too much is hidden, the user doesn’t know what to do next, and can get frustrated and confused. Providing a familiar and overarching schema (another cognitive science term) refers to the art of showing the user the overall organizing principles at a glance, so they don’t get lost. It is the gestalt of the interface, and it needs to be balanced against progressive disclosure.
Schema theory says to show familiar (or at least intuitive) signposts and the overall user interface paradigms at a glance. For example, if you fly to a distant city and rent a car, you’ll find that the car you rent may be an unfamiliar model, but the schema is familiar: you recognize the steering wheel and gas pedal and brake. You might have to guess about how to turn on the headlights, but because you know the general schema you’ll likely figure it out.
App interfaces for content readers are similar: it is important to display the overarching organizing principles, such as the navigational model and hierarchies, along with easy-to-understand (unambiguous) labels and familiar UI widgets, such as drawer sliders, spinners, and links.
Avoid the Unexpected
Schema theory means giving people a sense of familiarity, a sense of knowing where they are and how things are expected to work. If you change what people are accustomed to, you can disorient your reader. Just look at what trouble American and Continental drivers get into when driving on the left side of the road in England and Ireland, with the steering wheel on the right. It isn’t a major schema shift, but I’ve seen crashes occur in the short span between the rental car agency and the airport exit!
Tablets come with some common gestures (pinching, swiping, tapping) and some common widgets that users are accustomed to (number spinners, calendars, sliders, and drawers). They also come with familiar icons (search, back, home, the triangle overlay that signifies a video) and other common signposts. Try not to depart from the familiar unless you have an actual need to; innovation is good, but change simply for the sake of change will alienate users. Mobile users have even shorter attention spans than computer users, and little patience to learn new UI models.