The Sweet Spot
Semi Permanent Sydney - recap
Diving into the digital deep end
A mobile paper prototype investigation
Scotts sign off
Getting into AngularJS
The stealing sh*t design workflow
Experiment - a new way of validating forms
New phones make my thumb feel inadequate
A front end playground
Growing your business from within
Gen-i to Spark Digital
Kelly's sign off
It’s kind of a big deal
Near miss for Frontend's Mascot
Responsive web - a light post
Great Scott Marty What Year Is It?
iPhone application design and the righteous retina
New phones make my thumb feel inadequate
Tuesday 20 January 2015
Smartphones seem to be getting larger and larger, yet our poor thumbs are still the same size. We'll take a look at the issue, and propose an experimental solution for mobile website navigation.
With the release of the Apple iPhone 6, Apple embraced the trend of the larger phone format which was previously seen across Android flagship range. This wasn't always the Apple way of thinking.
Back in 2012, Apple released the iPhone 5 along with releasing the now infamous 'thumb' ad. The ad showed how the device fit perfectly in the hand and could be operated at thumb length (something Apple probably still agree with regardless of the new iPhone 6+)
However these newer, physically larger phones, inspire a new question… how do users navigate on bigger phones? This is even more pertinent when we consider those crazy, large "phablet" devices.
Lucky people with large hands or exceptionally long thumbs won't have any issues with these new devices. It is worthwhile thinking how this could possibly be resolved for the rest of the populace.
For this blog post we'll be using the Samsung Galaxy S5 as our base example. It measures 142mm (w) x 72.5mm (h) x 8.1mm (d).
I naturally rested the phone on my pinky finger. This gives me the general range I can comfortably access with my thumb.
When I need to access a little more of the screen, my hands co-ordinate to retract my fingers and extend out my thumb. This gives a little more extended range, but I lose some fine motor control with my thumb, and holding a phone in this position is fairly uncomfortable.
If we then combine the two images it gives us a rough indication of what area of the screen is accessible.
I also switch between using my left and right hand so we'll overlay a mirror version as well. Also just to help clearly identify what is accessible, I've added an additional colour to outline what's outside of my thumb's comfortable range. This gives us a guideline of what parts of the screen is accessible.
We can also use these exact same guidelines across different devices. We'll also include a tiny android device and the latest iPhone 6+ to the same scale
We can see there's a definite area that's not naturally accessible to my thumb on larger devices. My handspan measures roughly 23cm (or 9" in the old scale), which puts me fairly square for an average male hand. An average female hand roughly spans 19cm (just slightly over 7.5") source
This has led me to think about navigation on mobile websites displaying on larger phones. If someone else next to you has a larger device (iPhone 6+, HTC one (M8), LG G3, Samsung Galaxy Note 4, or similar) see if you can quickly borrow it, and try out a few of the examples below.
Note — You can try these on the desktop with emulation, but that kind of misses the point of this post.
The first example is a regular mobile website with the traditional "hamburger" menu in the top of the screen. While on smaller device it's still comfortably accessible, those with larger devices will find it just out of reach.
Shifting the core navigational elements of a webpage to the bottom of the screen as opposed to the top, could potentially accommodate us regular length thumb users.
Of course phones aren't just getting taller, they are also becoming physically wider. This could potentially mean that regardless of whether we put the menu on the bottom right or bottom left, users could still have difficulty reaching this position easily.
What can we do to resolve this?
Consider making the clickable area larger.
There is a de facto standard of clicking on a logo to take the user to the homepage. Possibly breaking this convention to simply open the menu up instead would make the navigation comfortably accessible to all users across any device being held. The consequence being that a user would require one more extra click to get back to the homepage.
Do I see any downsides with this? Yes, personally I see there are 3 fundamental issues with this idea that is apparent when testing this theory out.
- The phone UI: While we can shift the navigation to the bottom, the phone still includes the application chrome on the top of the page. For websites this includes the URL, application menu, and back button (on iOS devices). Ideally for this idea to work this would also shift down to the bottom of the screen.
- Inconsistent with desktop menu traditions, if we had this as a responsive system, it would be incredibly odd for the menu to jump from the top to the bottom of the page.
- On larger devices where you don't actually hold it with one hand such as tablets, including the fullsize iPad, bottom navigation seems a bit odd. This becomes more apparent when you're using a stand with the device. While it is still usable, the original issue with the thumb not being able to reach the navigation is no longer a concern. This is somewhat related to the previous issue, where if it was implemented responsively the user would encounter the menu jumping around the page.
The latest iPhone from Apple continues the trend of releasing physically bigger phones. These larger devices have tangible effect on how users interact with their thumbs on the screen surface. Some initial thinking has lead me to investigate the benefit of experimenting with the mobile navigation at the bottom.
I'll be trying to get my hands on a larger device, and film some of the team using the examples in the up coming weeks. Nothing better than some real life testing.
Give it a go and let me know what you think.
Jim 'the average hand span guy'