Blog‎ > ‎

2009/12/18 - Visual Design Concepts of the USA Today Android Application

posted Dec 17, 2009, 9:20 PM by Rick Anderson   [ updated Dec 17, 2009, 10:24 PM ]

I was thinking tonight... what is it about the USA Today Android application that I find irresistible.  I think the answer is... the visual design has been so well done whereby the development team has taken the essence of a newspaper product and shrunk it down into a 3" by 2" screen without being cumbersome or unwieldy to use.  The answer is that here is an application that other developers can look at and say - this is how you design an application the right way.

I can imagine what happened after picking up the USA Today account by the folks at Mercury Intermedia - initial euphoria - and then - oh crap, how do we take something that's two feet wide and shrink it into two inches.  I'm sure they had some ideas, but I've found out in my experience that going from design to production is a long road in-between.

With that thought, I'd like to look at this as a case study of what to do right when designing an Android application...

Tabs - we've been living with tabs since the dawn of the office - back in the days of the paper world we called them file folders - somehow the logical placement of tabs got lost in the electronic age until the Firefox browser brought them back to the top and everyone else followed - they're logical - we understand them.  It's the first place the eye goes and the design team figured out the essence of what "IS" the USA Today through those tabs - headline news, sports scores, weather information (with the cute icons), the day in pictures, and snapshot graphs of survey data with their character impressions charting the data.  About five tabs at the top of the screen is the max finger width when holding a smartphone vertically.

Ribbon - the horizontally scrolling ribbon bar just underneath the tabs is a brilliant piece of work - it's a great way to sub-tab without looking clunky and taking up a lot of space. When there are more topics than horizontal room, they simply make it scrollable to display the other topics.

Content - a headline, a paragraph of text, and picture (a picture says a thousand words) - line those up in a vertical scroll band -  finger scroll until an interesting article catches the imagination and select.  The article's content appears with the single picture - select the picture and a bigger image pops up to view.

Swipe - the power of swiping - how do you display multiple graphics without cluttering up the screen with another menu?  Within that answer lies understanding the difference between designing for a computer versus a hand held device and knowing how powerful the swipe of a finger can be!  Within the weather tab is a section displaying the national weather map (again, an "essence" issue of the paper).  Initially displayed is the doppler radar - however, the other maps the paper is known for are simply a swipe away.  Swipe, ir satellite - swipe, precipitation forecast - swipe, current temperature, etc.  An elegant design element allowing for a clean and simple interface. 

The more I've dug into it, the more respect I have for the brilliant user interface design. There are swipes vertically and horizontal all over the place to change categories, maps, and graphs - all sorts of ways to dig a little bit more into the details without overburdening the initial information stored on such a small screen.  The end product is just a little scoop of design awesomeness.