Designing for Reach

Written by

The new iPhones have been quite the topic recently. While the mainstream media focuses on the “Bendgate” non-issue, I thought I would spend a little time going through the design decisions we should keep in our mind while designing for the new iPhone sizes.

I recently released version 2.0 of Paper Tree which included a pretty significant update to the design. Version 1 had a ‘hamburger’ menu on the top left of the screen, a common design trend still in use by many apps. However, after attending Apple’s WWDC conference and a great talk with an Apple designer about navigation, I decided to rethink Paper Tree’s navigation.

The first thing I did was drop the hamburger menu in favor of a tab bar navigation on the bottom of the screen. I also began making much more extensive use of gestures.

For example, in order to go back from the Event Detail screen to the event listing screen, you can tap on the arrow on the top left or just as easily swipe from the left edge of the screen in what is becoming a standard navigation technique on iOS.

Reachability

When holding the hand in the right hand, the ‘reachability’ of the average thumb should be taken into consideration if you want your users to be able to have an easier time using your app one handed. I have used Scott Hurff’s wonderful iPhone overlays to showcase just how some parts of the screen are easier and some are harder to reach.

paperTree-iphone5

 

As you can see, the two main action areas are inside the ‘natural’ reach area. The detail page’s navigation is in the stretch section. It gets tricky once the iPhone gets a little bigger, though. Here is the same app, scaled up slightly to the new iPhone 6.

paperTree-iphone6

Finally, the tricky one is the iPhone 6 Plus. Once the design is scaled to the much larger screen, you can see how much more of the app is almost impossible to reach from a one handed use case.

paperTree-iphone6plus

Almost none of the top navigation is reachable without some painful reaching. Only the furthest right is barely reachable. For now, I’m dealing with this since most of the action areas (areas you need to tap) of the app are well within the natural and stretch area.

This isn’t the best use case and I have been experimenting with optimized designs for the iPhone 6 Plus. But it is this constant thinking of how an app is used and how it can be used when held in the hand that we must keep in the front of our mind.

An app might look great, but if all the navigation is at the top and tough to use, then there’s a chance users might use your app less, or worse, switch to another app.