User Experience Design (UXD) practitioners know that every user interface project begins with certain basic principles of information architecture. Just to be clear, some people use the term “user interface design” interchangeably with UXD, but really, building an interface is just part of the user experience puzzle:
- Understanding users isn’t just about demographic segmentation; it’s also an exercise in cognitive psychology.
- Graphical aesthetics aren’t arbitrary; if Apple taught us anything, it’s the importance of industrial design.
- Making things usable is just part of the task; we also have to achieve business goals. Behind every interface is a business problem to be solved.
- UXD has to concern itself with the structures and attributes of the content to be served, the metadata available to drive design features, and the technology enabling (or limiting) the interface.
- There are external environmental factors to take into account, including bandwidth and features of the user’s device itself. Not to mention features of the app marketplace and the competitive arena.
But for now, let’s focus on some very practical matters concerning the information architecture:
Navigation and Search
The biggest issue in a tablet reader app is being able to navigate the content collection. News outlets deliver a lot of content in small chunks (sad to say, long-form journalism is disappearing). This means you have to first and foremost focus on the organizing principles of that content and the means to find things. In fact, if you did nothing more than nail this one, you’re doing pretty well.
“Some users know exactly what they’re looking for. They know what it’s called (or labeled), and they know it exists. They just want to find it and leave, as quickly and painlessly as possible. This is called known-item searching.
Other users do not know what they’re looking for….As they casually explore your site, they may learn about products or services that they’d never even considered.”
– Rosenfeld and Morville, Information Architecture
Many systems support known-item searching (usually through a search feature, index, or navigational hierarchy). Does your tablet interface design also support casual browsing, the discovery of both unexpected and usefully related information? Many users will switch between both modes as they navigate your information.
Sometimes a user wants to drill deeper, or read more on a topic. Other times they want to jump to something completely different. So for example, if the user is reading an article on world politics you might reasonably assume that they are interested in other related stories (typically in a “see related” area). But you also have to provide links to other topics, and teasers from generally popular articles across the board. After all, the fact that the user started with politics doesn’t mean they might not want to move on to sports or entertainment.
The ability to guide a reader toward anything they may be looking for (or discovering) is known as signposting, and it includes using clearly defined, unambiguous labels, buttons, and headings. In retail, the successful application of casual browsing is called “impulse buying.” It could mean putting chips next to the beer, or for that matter, chocolate and flowers. You can learn a lot about navigation, search, and signposting from big-name merchandisers.
The LATCH Model
Designing the information architecture of an interface can be complex work, but it begins with an understanding of a few basic concepts. The first is the LATCH model for presenting content:
- Location
- Alphabet
- Time
- Category
- Hierarchy
Consider how a tablet app for a news site might use all of these. DNAinfo.com (and in a larger geographic context, Patch.com) break down news by neighborhood. So location would be a prominent aspect of the interface. Users may want to search by specific keywords, like “Angelina Jolie” or “fiscal cliff,” which brings alphabetic text search into the interface.
For a while Google offered a terrific timeline feature in Google News. Sadly, they killed it in August of 2011. It used to offer users the ability to view a story from its inception. Facebook now offers user timelines. But not many news archives enable you to use time effectively.
This is because journalists by their nature are obsessed with breaking news; they are also generally unaware that some users don’t share this obsession. (Even when confronted with statistical data about the popularity of certain older articles, an editor once stared at me in horror at the notion that people might care just as much about old news.)
Categories in the news world are often, but not always, equivalent to hierarchies. While hierarchies tend to be somewhat set in stone, categories ebb and flow on the editorial tides. These might include passing fancies like “Funny Dog Photos,” “Around the Town,” “Holiday Recipes,” “TV Bloopers,” Deal of the Day,” “Fashion Faux Pas”; the list is seemingly limitless.
Hierarchies are a part of the basic genetics of news stories; whether you are unfolding a print newspaper or navigating CNN, you’ll see familiar topics like Breaking News, World, Business, Politics, Sports, and Lifestyle (who remembers when newspapers also cornered the market on Help Wanted and Auto?) Topics often spawn sub-topics; Sports is easily divided into Football, Basketball, Baseball, and so forth.
The LATCH model doesn’t mean “pick one.” You can support multiple organizing principles in the same interface, such as both menus and text search, with “advanced search” for those brave souls with more exotic research requirements.
If you have a lot of content, you’ll have to balance the breadth of your hierarchies against the depth:
- Deep hierarchies
– more clicks to find content
– easy to get lost
- Broad hierarchies
– information overload
– topics may overlap
– users are not sure where to go
So plan your hierarchies using the most commonly recognized section headings, and try to shoot for 7 or so headings. This is a “magic number” that we’ll discuss in the next post: UXD discovery models and the famous “Rule of 7 +/- 2.”