The app's main section screens divide content into several topic categories. The Headlines section, for example, organizes articles into News, Money, Sports, Life, Tech, and Travel sections. The Photos section similarly organizes its images by topic. The design challenge was how to create compact controls that offered all these content categories without crowding out the content. Early on, the designers arrived at an "accordion" display, a collection of stacked, sliding category headings (see Psst . . . Hints for Working Custom Controls). Tap a category to reveal its content; the category slides open and other categories slide shut, a variation on the secret-panel approach. The accordion approach embraces scroll skepticism and works well for some types of content. However, when the team ran into trouble using the accordion for news headlines, they appropriately embraced a scrolling list.
Rusty: In the Weather and Pictures sections, each of the categories hold similar weight, so we didn't want to place too much emphasis on one of the section categories over the others. It was important that all categories remain onscreen. It was an instance where "out of sight, out of mind" was really true. All of the categories in these sections were too compelling to allow them to be overlooked because they were hidden offscreen. The accordion approach worked well and let us fit everything into the same screen.
We thought we'd try the accordion for the Headlines section for news articles, too. Our original mockups used an accordion section selector like the Weather and Pictures sections. You could flip through headlines by swiping left and right the same way that you can page through cities in Weather. We quickly discovered that paging through ten headlines one at a time was just never going to be as quick or efficient as a traditional list view. It's important to recognize early on if doing something unique or cool is actually slowing down access to information. We settled on the need to return to a standard list view.
Figure 3-32. USA Today's accordion view displays photos by category in a single screen. Tap a topic heading to slide open the thumbnails for that category, and then tap a thumbnail to see the full-sized photos.
Figure 3-33. The USA Today team experimented with several designs using an accordion view to browse news articles, but all the interface chrome left room for only one headline at a time. Here, mockups tested ways to change that one visible headline with arrow buttons (left) or with swiping, with your progress shown on page-indicator dots (right).