Thumbs or index?

This is not by all means a debate about which of the two digits is best! It’s about which of the two interaction techniques should tablet application designers design for. It has been observed that people who use tablets tend to use two different techniques to select items on the screen, depending on the way they are holding their tablet. One is holding them with their full palm behind the tablet’s back, while tapping away content with the other hand’s index (we’ll call this “index tapping”) and the other one is holding the tablet like a stirring wheel, with all four fingers of each hand behind the back of the tablet, using both thumbs to select content (we’ll call this “thumb attack”, just because I like the sound of it). Below are the two techniques.

Observations

Android tablet users seem to prefer holding their tablet in landscape more (source) which has probably something to do with the aspect ratio of most of those devices which looks awkward in portrait mode. The main interaction technique used in this orientation is “thumb attack”, mainly because the length and weight of the tablet requires two hands to hold it, therefore letting only the thumbs free. iPad users seem to be divided between the two modes (portrait or landscape), most of them using the device 50/50 depending on the application, having a similar division between the interaction techniques; some of them use index tapping and some use thumb attack. Windows 8 on the other hand is designed primarily as a landscape orientation, aiming their whole design towards the thumb attack mode. It is fair to say that Android and Windows tablets promote landscape mode and thumb typing, whilst iPad promotes index typing and no specific orientation, showing that the aspect ratio of the devices somehow influences how people tend to use them. That said, people still use their indexes on landscape or their thumbs on portrait regardless of the aspect ratio of the device.

Limitations and characteristics

So who is right? Frankly, I don’t think that this is the right question. A more appropriate question would be “how can we design with both techniques in mind?” In order to start answering this question, we need to break down the limitations each technique poses to the design and the special characteristics it may have.

Using index tapping means you have no limitations regarding the position of elements on the screen. Everything can easily be reached by slightly moving your free hand and tapping with your index. The only real limitation is hiding parts of the screen with your palm while trying to reach the top-most areas of the interface, making it almost necessary to place important controls on the bottom of the screen and content on the top. This technique is generally used when flicking through menus, selecting content and navigating the overall interface of the device.

Using only your thumbs can limit your reach, making elements that are placed near the middle point of the screen unreachable. Moreover, depending on your initial hand position, those reachable areas differ as we can see in the image below.

People tend to use this technique when they are already inside an app and want to lazily view content, when they are playing games or when they browse the web on their couch. Sometimes they only use their right hand to hold it and put their left behind their head, making only the right hot area reachable. Sometimes they do the opposite, making only the left hot area reachable!

How to use in design

Firstly it is important to accept that people hold and use their tablets in a number of different ways. Designing with only one of them in mind, may make things extremely uncomfortable when used in a different way.

Let’s see some examples first to get an idea of both approaches. We’ll start with QuickOffice Pro HD, a popular office app for android. As a remnant of desktop versions of office, the tools and controls are placed on the top of the interface, leaving the content below them. This results to not only blocking the content with your hand as you try and find the correct control, but also the context menus that appear when you select a control block themselves part of the content.

Now let’s see another app, IMDb app for Android. Apart from the Android navigation buttons that are placed within thumb’s reach, the most commonly pressed controls (add to watchlist, watch trailer, share) are placed under the content, not obscuring it when you try to reach them. Also, the app navigation controls and the movie content is placed on the right-most part of the screen, making them easily reachable by the right thumb and leaving the content clearly visible in the middle.

It is clear that the first example, QuickOffice, the designer followed pre-existing guidelines about desktop office software and designed with the “index tapping” technique in mind. Partly, it makes sense, because you are most likely going to use this app with both hands, tablet sitting on a table or your laps, tapping away with your indexes. However, by placing the controls on top of the content, the content will keep getting hidden when performing operations. On the second example, the designer carefully considered what kind of app he is designing and how the user may want to interact with it. I personally use the app when I am lying on the sofa, using only my right hand to interact with it. Which is great, because you can do pretty much everything in the app with your right thumb! That does not mean however that you cannot use with the “index tapping” technique.

Conclusions

It is clear that, depending on each app’s context of use, the habits of the user and the characteristics of the app, different interaction techniques may be employed. It is the interaction designer’s job to anticipate how the app may be used and to try and accommodate any scenario. Just as the IMDb app example above, we have shown that designing for one primary interaction technique doesn’t necessarily mean you can’t use it with another technique. When the right balance is struck, the user can enjoy using the app without feeling constrained by the interface and feel that the interaction is easy and intuitive. If that is not a successful design, then I don’t know what is.