Fingers or thumbs? The challenges of large screen mobile UX design

Posted November 19th, 2014 in User Experience (UX)

The launch of the iPhone 6 and 6 + have forced all user experience (UX) and user interface (UI) designers to reconsider the way we design for the smaller screen.

Why? because the smaller screen ain’t so small any more.

Apple haven’t exactly led the way here – Samsung launched the Galaxy Note in 2011 with a whopping 5.3in screen with many questioning the long term viability of a phone of that size. The term ‘phablet‘ was coined around that time reflecting the view that this was a hybrid of 2 species – phone and tablet – but an unnatural mutant rather then celebrated offspring.

Contrary to popular opinion in the media though, the appetite and demand for larger screens meant the Note and it’s subsequent iterations have been a great success.

Enter Apple.

It’s a shame that we only really start taking trends seriously when Apple get on board – arguably this is because they still have the most significant share of the smartphone market in the UK and US but it’s been coming for a while so perhaps we should’ve been better prepared. Large screen mobiles are here to stay and with it some UX issues we need to address.

Thumbs

The most comfortable and widely used method for interacting with a touch screen phone is through using ones thumb and below is a diagram showing how far the ‘thumb zone’ stretches across the Apple mobile devices:

Source: Unknown

What becomes clear straight away is that top left is not a good placement for any primary inputs on a large screen, which means rethinking the convention for placing the main menu button there amongst other things.

The quick fix might be to move the menu icon to the bottom in nice easy reach of the all important thumb.

It’s not quite that easy. Luke Wrobleski covers the menu icon placement conundrum in some detail in his recent article and makes the important point that Android phones have their own device controls at the bottom of the screen and therefor their guidelines discourage placing primary functions there to avoid mis-taps.

General UI

Placement of the menu icon isn’t the only problem of course – any UI elements in the upper half of a large screen are going to be a stretch at best, completely out of reach at worst.

Apple has introduced it’s ‘reachability‘ function to help counter the general problems current apps and sites might have with larger screens.

It’s OK but not really a long term solution as it negates the large screen benefits and is slightly cumbersome (the home button needs to be tapped twice to initiate the resize).

Solutions

So how do we modify the UX and UI to cope with ‘phablets’?

The first point to make is that user behaviour is likely to change. If a phone becomes a tablet then users will start interacting with them as such which means 2 hands will be better then 1.

We already do this when the device is in landscape orientation and there’s no reason why this won’t become more common in portrait as well.

Forcing users into 2 handed use will frustrate them though so solutions need to be found to make the most of our thumbs as the primary interaction method.

fingers-thumbs-1

Floating buttons

Android’s latest incarnation, Lollipop has a potential useful addition to it’s UI in the form of a floating button. This could be utilised as the main menu icon triggering a fly out menu that expands vertically.

fingers-thumbs-2

Right side nav

Instead of being bottom or top aligned the main menu could be placed on the right to allow for easy reach. A pull out tab would allow for easy access.

fingers-thumbs-3

Split-screen content

Applications often employ a split screen view for their tablet and desktop versions and it is possible that could also work for large screen mobiles with a top/bottom split and a pull up/down navigation block.

fingers-thumbs-4

Reachability v2

Perhaps Apple’s ‘reachability’ mode could be initiated not by tapping the home button but instead simply placing the thumb on the screen and dragging it down until the area of the screen that needs to be accessed is within reach.

fingers-thumbs-5

Device augmentation

The Apple Watch will have a ‘digital crown’ enabling the user to navigate the various onscreen options and perhaps large screen phones will evolve protrusions that will allow users to select options on screen without tapping on the screen.

The above are a few thoughts and possible solutions – none are perfect and require changing some relatively established conventions but as we move firmly into the large screen mobile era it’s time to address how users can still use one hand to interact with their phones.