Designing Tablet Apps
Published: January 21, 2013
In this edition of Ask UXmatters, our experts discuss what is the best approach to designing tablet apps.
Every month in Ask UXmatters, our panel of UX experts answers our readers’ questions about a variety of user experience matters. To get answers to your own questions about UX strategy, design, user research, or any other topic of interest to UX professionals in an upcoming edition of Ask UXmatters, please send your questions to: [email protected].
The following experts have contributed answers to this edition of Ask UXmatters:
- Steven Hoober—Mobile Interaction Designer at Cummins; Author of Designing Mobile Interfaces; UXmatters columnist
- Jordan Julien—Independent Experience Strategy Consultant
- Yury Vetrov—Head of UX at Mail.Ru
Q: When designing a tablet app, do you start your design from scratch, make the design relate to designs of your existing Web site or smartphone apps, or create a responsive design that works across all of these platforms and devices?—from a UXmatters reader
“I think everyone knows that the typical separation between a mobile-optimized Web site versus a native app is utility,” responds Jordan. “In general, if a Web site is a configurable tool that a user employs frequently, it should probably be a native app. But if a Web site is an information portal whose focus is on content, it could probably be a mobile-optimized Web site.
“Of course, there are other things you should consider when you’re making such a recommendation. For instance, if many users would search for your tool using a Web browser, it might be a good idea to provide a Web version of the tool that users could use rather than immediately asking them to install a native app.”
Consider the Entire Ecosystem
“My favorite way to design any application, Web site, or service is to consider the entire ecosystem at once,” recommends Steven. “For example, if there are both a desktop Web site and apps for particular handsets, by all means design them as an integrated experience. And while you are at it, keep in mind how the applications store and share data, how data syncs between them, and how reminder or password-reset email messages are formatted.
“Even so, once you get to detailing the features, layouts, and interactions, it is absolutely critical to design for a targeted device, whatever that device is. Tablets are still something new to a lot of us, and they have different design requirements based on their scale and the way we use them.
“Rarely will stretching a handset screen to tablet size—or squashing a desktop down—work very well. You need to take advantage of a device’s scale. For example, put more information on the screen; use columns—for example, to present a hierarchy for rapid switching or to show multiple types of information; or design entirely new user interfaces that use all of the gesture-driven space that’s available.”
“If you have smartphone and tablet apps for one product, it’s a good idea to create similar designs for them,” answers Yury. “If you’ve already launched a great product for a phone that users love and are used to, why not create a bigger version of it for a tablet? At Mail.Ru, we’re applying this strategy to our email product. We launched our tablet Web app in a short time because we reused a lot of design and code components from our smartphone Web app. And we created our iOS app using the same approach.
“However, tablets give you much more screen real estate and many more interaction design possibilities than smartphones, so why not use them? You can include more rich visual content—including visualizations of data—and complex features. This doesn’t mean that you should overload users. Use the additional screen estate responsibly.
“We’re taking this approach for our content-centric tablet apps. Our News app for iPhone focuses on the newsfeed, with just a few illustrations, but our iPad app leverages the bigger screen to show a modular grid of tiles with photos. Interaction with the app is also totally different: the iPad app uses Metro—and its magazine-style content navigation mechanisms—while our iPhone app follows a typical approach.”
Offer More Than One Solution
“You can approach tablet design in different stages,” suggests Yury. “For example, your tablet app could start as a tweaked version of your Web application. Then, you could develop a tablet-specific app that is similar to what you offer for smartphones. And finally, you could create a completely separate app that follows its own user-interface design conventions. If you take this approach, you can make your products available on tablets really quickly, then refine them by leveraging the possibilities of each tablet device better.”
The Uniqueness of the Tablet Experience
“You need to think about how people use tablets,” advises Steven. “They aren’t little computers or big phones, but a different class of device. People use tablets when performing other tasks, slouching on the couch, or watching TV. They use them a lot more at home than they do their mobile handsets. Data entry is somewhere between a handset and a computer; and reading or viewing is, in some cases, easier than on a computer. And, of course, tablets have the same sensors as mobile devices, so understand orientation, gesture, and location.
“Handsets are for individuals, but people share tablets. A tablet might be a household resource that mom, dad, and the kids all take turns using. Tablet users notice when apps use a handset user interface and throw them away in favor of apps with designs that were created specifically for a tablet. Most of these people are also smartphone users, so their choice to use a tablet is not just about their dissatisfaction with another class of computing device or a general sense of its inefficiency, but an informed understanding that they want the best experience for this particular class of device.
“And lastly, what is a tablet? iPad tablets were originally 10-inch devices, but now we have 7-inch devices—and the almost 8-inch iPad Mini—that are fairly different from iPad. Very often, you won’t want to create exactly the same design for all tablet sizes. Though here you can get away with some clever design approaches to accommodate multiple sizes, in much the same way that you change an app’s layout for orientation changes. You are allowing users to pick their orientation and changing the layout to take advantage of the aspect-ratio change, aren’t you?
“Think about every mobile user interface or interaction before assuming it is right for a tablet. Common mistakes that I fight against are things like locators with list and map tabs. While this design is okay on mobile handsets, on a tablet, it just wastes time and space. There’s plenty of room to show both views or otherwise combine the features of a user interface in more interesting and useful ways.” Steven recommends the Google Research article, “Understanding Tablet Use: A Multi-Method Exploration.”
Here are some specific guidelines for the most common tablet platforms from Yury:
- “iPad—This is the easiest platform to support because there are just a few devices and screen resolutions. You can build on its really good UX guidelines and find thousands of great apps for inspiration.
- Windows 8—This OS (operating system) is new, but it’s gaining momentum really fast. Just a month after its launch, Windows 8 already had 40 million users and more than 20,000 apps. Microsoft provides good UX guidelines and a bunch of design resources to help you get things right. This OS takes a hybrid approach that is worth considering: on either a tablet or the desktop, users can use your app with either touch or traditional mouse and keyboard controls. The good news is that the so-called gorilla arm problem turned out to be insignificant in practice. You’ll find a discussion of this issue in the Global Moxie blog post ‘New Rule: Every Desktop Design Has to Go Finger Friendly’.”
- Android—This platform is also growing, but the fragmentation problem is strongest here. First, a significant number of these tablets are 7-inch devices that provide a very different experience from a 10-inch device, as Jakob Nielsen describes in ‘Kindle Fire Usability Findings.’ Second, some devices are locked out of the platform ecosystem—for example, Kindle Fire. Third, a lot of devices are cheap slates with low performance. Another bad thing is the Android browsers, which, other than Chrome, have crippled capabilities, so you’ll be limited in what you can do in designing Web applications for Android.
“My company has had a lot of interesting experiences with Windows 8 during the last year,” relates Yury. “We started working on our first app for this OS last autumn—before there were any guidelines or even a finished user interface for the OS. But having already designed several Windows Phone apps, we’ve extended our understanding of Metro style and logic to tablets. And it turned out that we took the right direction, because Microsoft’s own apps are going the same route. It’s really important to understand a mobile OS design language.”
The Usefulness of Responsive Design
“Regarding the usefulness of responsive design, I don’t think a design needs to be exactly the same—or even that similar—across different platforms, as long as users know the apps are related—that is, of course, if they actually are related,” asserts Jordan. “Geri Coady discusses this issue in ‘The Problem with Style Guides.’ I think about 70% of Web sites would benefit from being responsive. In my opinion, any simple site that wouldn’t normally consider providing a device-specific experience would benefit from being a responsive site.
“Responsive design tends to be an inexpensive way of ensuring content is optimized for a user’s device. But if a site is so complex that things have to be hidden and conventions can’t remain consistent across breakpoints, it’s likely too complicated to benefit from being responsive. Instead, it would be best to create device-specific experiences. One thing to note: the RESS approach to responsive design, or Responsive Web Design + Server Side Components, takes the best of both worlds and allows a server to serve up different headers and footers and functionality based on the device detected.”
“We have dozens of different Web products in the Mail.Ru Group, and a lot of them display on smartphone and tablet platforms,” says Yury. “These products are different by nature, and they’re also currently in different iterations. So, we have several complementary strategies for tablet design.
“Before putting serious effort into a tablet-specific app, you can start by optimizing your current Web product for the slate browser. It’s cheap and fast. You just have to make sure that the user interface fits the screen, all the mouse-specific interactions like hovers have alternatives, graphics are retina-display ready, and all Flash is gone. You can go further with true responsive design by considering all of the necessary screen resolutions and orientations. Our recently launched Calendar product is following this strategy. We’re optimizing our Web app for the tablet browser through a series of tweaks.
“You could also create a native Web-based app that mixes OS-specific user interface elements with Web content, but its user experience would be far from optimal. Remember the sad story of the Facebook iPhone app. But this is the fastest way get your Web applications for tablets into the app stores, which is good for product distribution. Odnoklassniki, which is part of the Mail.Ru Group, is using this strategy for a lot of mobile platforms.”