Read Me Now, and Hear Me Later

First, let me preface this by saying, the instructions I’m about to give apply primarily to apps that are used for reading or consuming content. If your app is primarily for the purposes of creating content, then probably the user will have their hands all over your screen anyway. The usage model I’m going to talk about here has to do with cases where the user is sitting, holding their iPad like a book and reading or watching videos. The apps affected are things like eBook readers, RSS readers, Twitter clients, etc.

If you are an iPad developer, please, Please, PLEASE, follow my instructions in the rest of this post very carefully.

Step #1:

Load your app on an actual iPad.

Step #2:

Sit down with said iPad in an easy chair. Hold the iPad with both hands. Your fingers behind it to support it and your thumbs on the front.

Step #3:

Use your thumbs as the only means of controlling the user experience for about 15-30 minutes. Try your app in both landscape and portrait modes.

Most apps have very very commonly used buttons. Are those buttons located near where your thumbs rest naturally? If you’re spending a lot of time lifting your hand from holding the iPad and reaching across the screen to tap a “Next” or similar button, then listen up… You’re doing it wrong! FIX THAT. Make sure those buttons are near where the user’s thumbs naturally rest! I can’t stress this enough!

Also, hold your hand over those same buttons for an extended period of time. Does your hand or arm get tired because you’re trying to keep your hand from touching the screen? Does your hand or arm obscure part of the screen making you have to move your arm to read all the content? Again.. You’re doing it wrong! FIX IT.

Let’s look at a couple examples of how NOT to do it…

NewsRack

NewsRack is a good RSS reader. It’s UI has some quirks (for example, I’d like it if it adopted a three-paned view, but that’s just me.) But regardless, it’s a great example of the kind of app I’m talking about. Imagine that an RSS reader is going to be read in chairs, on the couch, etc.. any time the user might be lounging around.

In landscape mode, the app isn’t too bad. You can use your left thumb to tap the “Unread” button, which then brings up all the unread articles, then tap through the articles one by one with your left thumb. Pretty good. If you’re southpaw-challenged (read: a rightie, not a leftie) all this left-thumb action can get tiring pretty quickly, but I’m not gonna ding them on that. It’s usable. The real problem with NewsRack comes when you switch to portrait mode.

Notice, in portrait mode, the article itself takes up the entire screen, where did the article list go? It’s in the popup from the button on the top bar. Ok, that’s fine, that matches what the HIG suggests, but here’s where the real problem lies: Where do you tap to get to the next article if you just want to tap through them?

The answer is, it’s in the upper left, too far for the left thumb to reach. So in order to just bounce to the next article, you have to constantly move your right hand across the screen to press the button. If you want to just tap-tap-tap through the articles, you have to hold your hand at the top of the screen, obscuring the main content. For an otherwise decent app, this is a PITA.

GoodReader

GoodReader is an excellent PDF reading app that again, has a little bit of a quirky UI. For the purposes of this post, however, I’m going to focus on one central item. The use-case in question, is that of paging through a PDF.

This is the PDF reading screen of GoodReader. Notice that to proceed to the next page, you don’t tap where you would intuitively thing to tap, the right and left sides of the page, but instead the top or bottom! Virtually every other eBook reader I have seen follows the convention of right and left sides of the page to go forward and backward, respectively. GoodReader fails here. This would have been incredibly obvious to the developers if they had just sat down and used their app like one would expect. In a reading posture as if they’re reading a book. The real shame here is this is so central to the whole functionality of the app that it kind of ruins the whole experience.

Where Do Your Thumbs Rest?

I just made this little guide by pulling up Sketchbook Pro, and just wiggling my thumbs there they landed. The red marks are middle of the screen holding, the orange ones are if I’m feeling frisky and holding it at the bottom. Your most used operations in portrait-mode should be in these zones. I have pretty long fingers too, so I probably have more flexibility here than some folks do. Keep that in mind.

Summary

So, to sum up, if the app you’re making is for reading, remember that users are going to hold your app like a book, and plan accordingly. Don’t make us stretch our thumbs!