Designing Tablet Apps

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