It’s no secret that space is limited on mobile device screens. While screen sizes and resolution are on the rise, the nature of how we use mobile devices also limits the amount of information they can effectively communicate on a single screen. No matter how many pixels-per-inch your new device has, you can only read a certain amount while you’re bumping around on the bus or walking down the street. Knowing the best type of layout (or view) to use for a given information display need will help you design higher-quality, more effective mobile experiences.
Mobile views can be broken down into a handful of view types.
List Views
High-Density / Text Content
The list view is probably one of the most common types around. Sometimes referred to as a “table view”, this layout is well suited for navigation because it allows users to quickly scan and scroll through lots of information. Typically, tapping a row will take you to a different screen.
Grid Views
High-Density / Non-text Content
Grid views are a useful layout option when you need to let users scan a lot of visual content. Like list views, these layouts are typically navigational and tend to be used more frequently for images than text.
maCard Views
Medium Density / Text, and/or Non-text Content
The card view has emerged as a dominate layout model for mobile applications, and for good reason. The card consolidates both content and navigational UI into modules that work well for giving users quick summary info – just enough to decide if more information is desired, or simply communicating all the information for a selected object.
Detail Views
Detail views take range of directions in terms of layout. They are typically the destination for any navigational process. The key to these types of screens is that they are designed to optimize for slightly longer viewing or interaction times. These are the screens where people spend more time. But, don’t let that serve as an excuse to overload them with information. Remember that in most cases, the user isn’t likely to spend more than about 60-seconds on a single view.
Modal Views
Modal views are most typically detail views, but the important distinction is that they require the user to act on it before they can proceed. Where a standard detail view is part of a navigational process where a user might expect to be given several choices about where to go after they are done with the that screen, a modal view requires that the user take a specific action or cancel out of the view.
Pannable Views
The pannable view is most commonly associated with maps. The main attribute for this view type is that the user can zoom in and out and pan around the canvas without the notion of “pages” or defined view sizes. It’s obvious to see how this works on a map, but you’ll find it’s a common view within game environments too.
Hybrid Views
Hybrid views serve as sort of catch-all for mixing-and-matching different content. These views are successful in early phases of a user flow where there’s a high degree of uncertainty on the user’s behalf. The reason for this is that they provide a lot of different kinds of content and functionality with a variety of interaction models, giving users the most choices of discovering something that’s of interest to them.
This is not to say that these are the only kinds of views available to you as a mobile designer. But keeping in mind the goals you’re trying to achieve when laying out your screens and choosing a layout system which best addresses those goals will help you move through the design process more efficiently and feel confident you’re providing the optimized experience for you users.