Simple, essential tips for designing tablet-sized apps

Posted on Mar 3, 2011

Greetings! A few weeks ago we announced our first non-phone product: the HP TouchPad. It’s a tablet with a stunning 1024×768 touch screen. It’s really a beauty to behold. It ships this summer, and while we don’t have a public SDK for you *just* yet, here are a few simple, but essential things to keep in mind as you design apps for a tablet-sized screen.

When you make an app for a tablet it’s similar but distinct from both a phone and a desktop computer. It really is a new kind of screen, and it requires a new user experience. You can’t just blow up a phone app to the larger screen and expect it to work well. This applies to shrinking desktop apps as well. That said, there’s a lot of simple things you can do to make your existing applications work well on multiple screen sizes.

The rest of this article will talk about the tablet form factor in general without getting into specific devices or toolkits. You can apply these principles to any tablet device.

When you design applications for the tablet, there are two very big things to remember. First, these are devices driven entirely by touching with fingers. They don’t have mice, and usually the keyboard is virtual. Second, remember that these are meant to be picked up, carried around, and rotated. They are used very differently than a notebook PC, and that will have to carry over to your app design. Let’s go through a few tablet considerations and see how apps can adapt:

Fingers are big
People will use your app with their fingers. Fingers are much bigger than a mouse pointer. This means any UI control in your app should be larger than on a desktop device. Fingers also can’t make fine adjustments the way a mouse can. You can move a mouse by only 3 pixels if you want to. The resolution of a finger is more like 30. The end result is that you need larger click targets and therefore fewer of them on screen.

Also, remember that fingers can touch, but not hover. Anything in your app that depends on hover events probably won’t on a tablet. Think in terms of taps rather than discrete mouse events.

Tablets can be rotated
Though most tablet devices have a fixed pixel size (the TouchPad is 1024×768) you shouldn’t code your app specifically for that size. Not only will you probably want your app to run on multiple tablets and phones, but even a single device can be rotated.

The difference between landscape and portrait mode can be significant, but it’s easy to deal with by using flexible layouts. Most UI toolkits (like Enyo) provide a way to make your layout adapt to changing screen sizes. Even without a UI toolkit you can make flexible layouts in CSS using relative units like percentages or em‘s rather than fixed pixels. The easiest way to test flexibility is just load your app or web page into your desktop browser and resize the window. Most browsers even have plugins or scripts to make this easy. This will not only help with tablet apps, but also with phone apps. Flexible layouts can help you adapt to just about any form factor, with minimal fuss.

Tablets are used on-the-go
Even though some notebook PCs are as small as tablets, they are fundamentally different devices. Tablets are used far more on-the-go. Often someone will turn on their tablet, do one very quick task, then turn it off. This means your apps should be very focused. They should do one thing and do it well with a minimal amount of fuss. Incidentally, these kinds of apps also sell better, so both you and your users benefit.

Tablets aren’t desktops
In most cases you will want larger text on a tablet than with a desktop app. 15 is a good point size to start with. It often helps to print out your UI designs on real paper to see how it looks.

We also recommend against using fixed positioning in your web layout. Tablet browsers usually support fixed positioning, but not in the way you might think. The user is given a virtual screen that they can zoom in and out of. The fixed position layout is calculated in terms of this virtual screen, not the real device, so parts of your layout may end up out of the viewport. If you really want fixed positioning (ex: a fixed footer) then make your entire page be a single div with the same size as the viewport. Put your content inside that div and use absolute positioning instead.

There is no fold
Traditional design says that the most important content must be ‘above the fold’, which in computer terms means around 600 pixels. This is a holdover from the newspaper days when you needed engaging content to grab the reader in the newsstand. This was so that they would then buy the paper and read the rest.

In the tablet world there is no fold. We aren’t using paper of a fixed size and no one is buying your content from a newsstand. If someone comes to your site or app they have *already* chosen to view it. You don’t need to re-grab them with the top 600 pixels. Instead, embrace the vertical nature of a tablet. Scrolling vertically is absolutely the easiest gesture to perform on a tablet. Use it!

Learning more
This is just the start of tablet apps. As we get closer to the release of the TouchPad we’ll have more info. For now here are a few links to learn more about tablet content design.

No comments
Mobile Application Development • Palm OS App Development