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.”