Eyes and Thumbs Driving Mobile Experience!
In the simplest terms, mobile experience is controlled by how well our eyes and fingers perform with the display we are using. In the future, this will also include how well our voice projects and how well our ears hear.
The fact is that our fingers get longer, fatter and slower, and eyes get weaker over time. Our fingers are what they are, unless we diet and make them thinner. Our eyes can be corrected mechanically and physically. An interesting but obvious point is that these physical changes impact everyone from toddler to aged.
In a 2010 study, a total of 160 children's fingers were examined. The average length of each finger increased by 37% from 3 to 10 years of age, and diameter increased by 20%. [2010 Elsevier GmbH.]
Thomas M. Greiner, a researcher for the U.S. Army did a study in 1991 finding that an average thumb length of 2.74 inches for men and 2.49 for women. Shorter in length than the average mobile display diagonal today.
Based on data from data from the National Health and Nutrition Examination Survey on 12,000 people aged 20 and older between 1999 and 2004, more than half of all Americans have some sort of vision problem. Most of them myopia or astigmatism.
Mobile touch displays until June 29th, 2007 were able to handle the average thumb length, that is until the iPhone was released. The iPhone increased the diagonal to 3.5 inches. This was 25% longer than the next largest phone which at the time was the Cingular 8525, which had a 2.8 inch diagonal. The display area also increased 56% from 3.9 square inches for the Cingular, to 6.1 square inches for the iPhone. The iPhone was bad for thumbs but good for eyes! See all the iPhones below, from the 2007 Gen 1 far left to the iPhone 7 far right.
Diagonals and areas have gotten bigger over time, one iphone exception is the 2016 SE which has a 4 inch diagonal. Apple's marketing says, "this light and compact phone is designed to fit comfortably in your hand." "A brilliant Retina display [326ppi] makes everything look vibrant and sharp." So they made it usable for thumbs and better for eyes. A great product idea but limited area for functionality.
The new iphone 8 has a 4.7 inch diagonal and 9.4 sq inch area, and the 8+ has a 12.9 sq in area 50%/100% respectively bigger than the first iPhone. The iPhone 8+ is so big that someone called it a Phablet!
How we hold our mobile device is critical too. According to a study by Steve Hoober at uxmatters.com, the three most popular ways are:
1-handed [49% choose this method]. One thumb controlled interaction. Can cover 2.7 inches across the display naturally and more depending on the stretch.
Cradle [36% choose this method]. One thumb and or finger controlled interaction from one hand. Can cover the entire screen if using a finger.
2-handed [15% choose this method]. Two thumb controlled interaction, covering 2.7 inches across the screen from both sides. Can't use fingers though.
So here is the dilemma. Thumbs can not reach the far corners of most smartphones, though 49% of the mobile device population use the 1-handed thumb focused hold. A longer diagonal is theoretically better for eyes though pixel density matters too. It seems that a phone with a 3.5 inch diagonal like the iPhone 4s and possibly the SE, are the right size for the average thumb length of 2.74 inches. The potential problem is that a 3.5 inch diagonal translates to a 6.1 sq inch area screen which limits the amount of space for content and therefore functionality.
Focusing on the eyes for a second, pixels per square inch [PPI] or density of pixels matters. The iPhone SE’s has a pixel density of 326ppi, and according to the iPhone maker the human eye cannot distinguish individual pixels beyond this display resolution. Density and therefore clarity helps those with weak performing eyes to better see text, images and other rendered assets.
The new iPhone 8 with a 4.7 diagonal requires users to use a cradle or 2-handed hold, while those with weak eyesight get the benefit of larger text and imagery. The pixel density is said to 400ppi, a benefit for eyes too. Those with fat fingers also benefit from a larger screen area, because touch buttons can be made larger. And it is not just touch, but double touch, drag, swipe, pinch in, pinch out, hold and drag, and touch and drag. Which gestures can you execute better, with 1-hand, cradle or 2-hand?
What do thumbs want in a mobile experience? Ideally a display diagonal that can handle an average length thumb for a 1-handed hold since this is the most popular. A display layout that has the key gestures reachable within thumb length or stretch. Same idea for a 2-handed hold, where both thumbs can reach key functions. Also, gestures that are not made to small to handle a fat thumb or finger.
What do eyes want in a mobile experience? A layout that works with the diagonal display they are using. Key actions, text and imagery not designed too small to see. Pixels per inch [PPI] or resolution that provides clarity. Remember a higher PPI can make a smaller diagonal work. Animation not to fast, and coloring that that provides clarity as well.
This is where personalized design, maybe even AI aided can be a huge benefit. If you know user's thumb size based on age and sex, eyesight performance based on age, how they prefer to hold their device, and device specifications, users could be presented with an "agile" app design that is based on these parameters. The information needed to do this on the fly agile design is just a few questions away or already stored in the mobile device set-up.
For example, I am a 40 year old right-handed female, my iPhone 8 has a 4.7 diagonal display and I use the 1-handed hold. This means I can't reach the top third of the display. The app they open would focus on using a card design with touch, double touch and swiping gestures. Key actions would be placed on the bottom half of the device display. The top of the display might include larger fonts and imagery since it won't be used for gestures. A man in his 20's who uses a cradle hold would get a different design based on his parameters.
Designing more personalized mobile experiences would present more satisfying mobile experiences and therefore drive up mobile adoption for all ages. Today mobile apps and websites are designed for a one type fits all approach for the most part. A competitive differentiator and higher adoption would be major benefits from this thumb and eye mobile experience design approach.