Mobile UX Design: The Rule of Thumbs

UX Design on Mobile Phones for Thumbs & Touch

 (UX Strategy Varies Across Operating Systems)

In development the user experience is crucial to the lasting usability of an application, be it mobile or desktop. During the developmental research phase of any build the functionality on the front end needs to reflect the natural decision making of the user. Several issues may come up that UX designers and developers have to tackle before the final product can be deployed. Let’s take a look at just some of them.

Hardware Features:

Integrating and using the hardware provided on the device can be very advantageous in regards to the user experience of all the software. One can take the “back” button on many Android phones, which for the most part are designed as hardware features but are slowly being phased out and replaced with an onscreen “back” button that stays consistent throughout the navigation.

Android Menu Navigation

(Android UI Patterns)

From left to right there is a dedicated back, home, and app switcher button accessible no matter what application is open. This helps developers use a global solution and consequently users are familiar with the navigation of a certain application. Plus, depending on how users hold a device, the most interaction would occur with the thumbs.

LG attempted to address how users approach the using these navigational buttons by moving them to the back of the phone. Their research concluded that most users keep several digits behind the device as they hold it. As such, providing hardware buttons on the rear of their device could make for a better user experience:

LG Phone Hardware Mobile Navigation Buttons

(PocketNow)

 

From the image above one can see the center button for home, and the volume up and down toggles. These are the only buttons on the phone. The user experience is mixed in this regard, with Taylor Martin of PocketNow saying he had to “train my brain to stop sliding my finger along the edge of the phone to find the volume rocker, and feel for the buttons on the back to change the volume.” This could have been a detriment to the user experience, the verdict is still out there.

 

Onscreen Navigation:

In the Apple ecosystem, navigation is a much more liberal affair. Onscreen buttons can be placed anywhere but often they’re at the top. Recently there has been chatter in the UX blogosphere about the hamburger button and whether it benefits or impedes the usability of an application and the user experience overall. Several applications on iOS have ditched the hamburger button or moved it to the bottom of the screen:

iPhone navigation bar features

(Techcrunch)

All of the above navigation menus are for iOS and are located at the bottom of the device screen for easy access. When developing for mobile, considering the placement of these navigational features on screen is vital to a positive user experience.

Device Optimization:

One of the big downsides to the iPhone prior to the iPhone 5S was it’s screen size. Steve Jobs famously said in regards to bigger screen size “You can’t get your hand around it… No one’s going to buy that.” Most agree that wasn’t true, especially the designers at Apple.

Bigger size means more possible engagement, but it means implementing it properly. Reducing the steps to take users to a different function in the application can help ensure users remain engaged.

Thumb size is generally static and particular to each user. UX Matters did a very extensive study on device placement in user hands, which included different postures while standing, sitting, and even leaning while standing:

Mobile Phone Thumb Accessiblity

(Originally published in “How Do Users Really Hold Mobile Devices?,” by Steven Hoober, on UXmatters, February 18, 2013)

Apple even produced a commercial about the thumb placement:

The reach of the thumb is crucial for users to remain engaged and impediment free from extra steps when completing a task. Extra menus are generally frowned upon if they’re not needed. The entire organization of the information architecture needs to be reflected rationally in its development and empathetic in it’s design. Users will only go as far as their thumbs can take them.

So take iOS for instance, where navigation is largely based on the developer, sometimes they will not follow guides produced by Apple for UI and UX. In this case Apple developed Reachability, which with a quick and light double tap of the home button, slides the screen down so the user can input commands that are at the top of the screen.

iPhone makes thumb accessibility easier

This might be a solution, but from an innovational standpoint there could be a better use of space. This function is after all a realization that the freedom developers have with iOS navigation can motivate those very innovations.

In the same study mentioned earlier by UXMatters, they determined the ‘hotspots,’ of a 4 inch screen, with 67% of users using devices one handed (right):

 

How people hold their mobile devices

(Originally published in “How Do Users Really Hold Mobile Devices?,” by Steven Hoober, on UXmatters, February 18, 2013)

The central issue for UX is fluid comprehension. When this is achieved it’s engagement increases. Optimizing your app to ensure this fluidity regardless of device size may encourage a better user experience. This is just one reason by running iOS apps built for iPhone on an iPad is often a disgruntling affair. In any case, remember the rule of thumbs when designing, because it matters in UX.