Mobile screens keep getting bigger, but our thumbs stay the same size. This is an unfortunate situation, and it isn’t going away. Designers have their hands full (pun intended) making sure thumbs feel comfortable and productive on this ever-expanding glass surface.

Steve Hoober conducted a defining study in 2013 on how users really hold their smartphones in which he and his team observed over 1300 people using mobile devices out in the real world. He found that 75% of users interact with their phones using their thumb, opposed to fingers alone. He also found that 49% of the people observed manipulate their phone with just one hand.

So what does this mean? Knowing that people prefer to use their thumb and that half of people use their phones one-handed will inform how user interface elements should be designed and laid out on the screen. With the ever-increasing phone size, our thumbs are getting much more of a workout than we ever intended. However, fear not! Designers are working hard to ease the burden on thumbs through innovative UX and UI patterns.

Gestures

As we’ve seen, a larger phone means less reachability. So, what can we do to navigate through an app with ease while not worrying about reaching up to that top corner to tap the menu button? Enter, gestures. When a user can navigate through an app simply by tapping and swiping, they no longer have to worry about reaching the navigational buttons.

Let’s take a look at Apple’s native music app for example and compare the UIs from the two most recent iOS updates. While it may not seem like a big detail, take note of the back button placement on iOS 7 screenshot below. Now look at the screenshot from iOS 8. That’s right, there is no back button. The same screen is now reinforcing gesture interaction. The screen can be hidden by swiping down, a gesture that is taught through the placement of a small downward arrow in the top left-hand corner. Tapping this small arrow will slide the screen down as well but it is obviously harder to reach and serves more as a learning tool than a practicality feature.



Many apps have been gesture based for a while, allowing users to move back and forth from screen to screen by sliding left and right, for example. This is a mode of interaction that is sure to stick around as users and designers rely on it even more heavily in the future.

Menu Placement

While we’re on the topic of moving around UI elements, let’s take a look at one of the larger Facebook app updates from recent years. The older Facebook screen capture below shows all the navigational elements at the top of the screen. Notice the hamburger icon in the upper left corner and then the two levels of navigation along the top of the screen.

Let’s compare this with a more recent screenshot. The screen on the right clearly demonstrates how Facebook moved their navigational elements to the bottom of the screen, making them more easily accessible with your thumb.

Floating Action Buttons

We’ve all seen these “Floating Action Buttons” (FABs), popularized in Google’s Material Design. The small circular call to action buttons are prominent UI fixtures that typically reside in the bottom right-hand portion of the screen.

See where I’m going with this? These call to action buttons put the most important actions right at your thumb, requiring little thumb stretching and less frequent hand repositioning to access. A comfortable thumb is a happy thumb, particularly when reaching for a heavily utilized action button.

Card Layouts as Responsive Design

Card-based UI design puts an emphasis on content components that are easily adaptable and rearrangeable in a variety of contexts and screen sizes. Cards can be in the form of images, text, or any combination; plus, they provide simplicity in layout and interaction.

The truth is, as smartphones continue to emerge in a huge variety of sizes, card layouts provide an amazing solution to adaptive layouts. It seems like all major apps are moving to this layout style and in a world where designers must make apps to fit both the iPhone4 and iPhone 6S Plus, I don’t blame them.

While these are a few examples to illustrate trends in large screen mobile layouts, designers are coming up with great solutions every day. Next time you find yourself repositioning your hand to reach a button take a moment and think about how you might redesign the interaction for convenient (and more comfortable) reachability.

LEARN MORE ABOUT UX DESIGN AT GENERAL ASSEMBLY