Apple’s Bigger Screens A Bigger Headache For Designers?

james-authorBy James Clifton (@cliffioo)

iphone_main-image

So the new (or by the time you read this, maybe not so new) iPhone 6 and iPhone 6 Plus mobile devices from Apple are here. And with them come new larger screens, a variety of new features and hardware bumps that are turning heads and making the android world think again.

What i’m interested in mainly are these new bigger screens and how they will affect the way we design and think about UX on a mobile device. But I will get to that later.

Firstly I would like to talk about the interesting direction apple seem to now be taking and are they the right moves? One of the last things Steve Jobs said when they released the iPhone 5 was that the screen size was “Just right” and that they wouldn’t want to have a bigger screen, as the new iPhone 5 screen being simply taller fitted into the hand easier, meaning it wasn’t a problem to reach all of the screen estate with your thumb with the device in one hand.

To me, I understand that they are having to make the jump into bigger screens, this being one of the main reasons for a consumer choosing Google’s mobile OS based devices over Apple’s offering. Consumers seem to be leaning towards bigger devices with bigger screens to consume their media, social content and websites. But are apple’s new devices bridging this gap enough and have they gone too far with the new iPhone 6 Plus and it’s 5.5” monster screen?

This is where the UX debate comes into play. Previously websites have had the header of their websites and apps generally positioned in the the top area of the screen. However on the new iPhone 6 Plus this is quite an awkward stretch to reach. I know that a user can “simply” double tap the Touch ID button and the top of the screen will drop down for your thumb to reach, but in my eyes, if you need to introduce a mechanic such as that to be able to reach the top of the screen, the screen is indeed too big.

The graphic below shows how the new iPhone 6  and 6 Plus devices are now changing our “Natural thumb reach” areas on the mobile devices.

iphone-heatmap

Previously in the iPhone 4 and 5’s case, the green and orange areas covered most of the screen, from bottom to top, meaning that a user could relatively easily reach the upper echelons of a website or app (this was one of the main things that I noticed when I switched from an iPhone 4 to a bigger screen android device, and it’s the one complaint I do have about a bigger screen phone). But the most interesting issue is with the iPhone 6 Plus. The ‘natural’ area stops around half the way up the screen and the ‘stretch’ area stops quite a way before the header area of most sites. Almost making that handy menu icon in the top corners a burden.

So what would the solution be? I expect a few different trends to emerge over the coming year or so to try and tackle this issue. Some which are already evident in some of the apps that we use today.

I expect that “Gestures” as a navigation method will become more prominent and a common convention within apps and websites where possible, instead of tapping on the menu icon to bring out the menu, simply swiping in from the edge to slide it out, or swiping left and right to navigate through tabbed areas (much like Spotify currently does).

There is also the possibility of a floating type navigation, much like the way that Facebook messengers “chat heads” work. And finally there is the options for the nav being at the bottom of the page rather than the header as we have seen from a lot of apps in the past.

I think that UX is something that a lot of users take for granted but an incredible amount of thought and work goes into it and the new Apple devices are now going to make more designers and UX designers take note of this and try out new things.

And personally, I’m looking forward to it.

A great read and a more in depth look at this topic can be found here: http://scotthurff.com/posts/how-to-design-for-thumbs-in-the-era-of-huge-screens

Sources: ScottHurff