One-Handed Use – UI/UX Design Patterns

Do you remember those times before the smartphones were invented, when it took us only one hand to make a call and type a message? Many people still believe that nothing could be more comfortable than using those simple push-button devices. Anyway, those days are long gone, and today we typically have to use both hands to perform tasks on our iOS and Android devices.

Or maybe not? It is believed that the core reason of this two-handed use dominance is that the screens are constantly growing in size, creating both opportunities and challenges for UI/UX designers. But the fact is that today the vast majority of the smartphones sold are not that big (5-6-inch). So basically all we have to do is to stop putting all those buttons at awkward positions. In this posting, we will explore the challenges and solutions for creating a one-handed use design pattern for mobile applications.

One-Handed Use Explained

Before we get to designing, let’s talk about the so-called “green zone” on the screen. Take your smartphone and try to use it only with your thumb. The “green zone” is the area where you can easily move you thumb around. In contrast, you might have noticed another zone (let’s call it red zone), where you cannot reach any spot only with your thumb without moving your other fingers. In addition, it is also possible to indicate the yellow zone, where it is not that easy but still possible to reach some of the buttons. Basically, one-handed use pattern refers to staying away from the red zone, and putting all those elements within the green and yellow zones on the screen.

UI/UX Design Patterns for One-Handed Use

So how to make your design one-hand-friendly? Let’s find out:

Redesign the building blocks of an application.

This includes sliders, dropdowns, selectors, pickers, and forms.

Problems:

The UX should be made consistent and delightful
Providing an intuitive UI
Data should be collected within a minimal number of actions
Providing maximum user input effectiveness with minimal movement

How to achieve?

Multi-screen approach. Big forms should be divided into multi-screen/multi-step forms.
Keep data input options (making choices, filling up forms) closer to the bottom. All critical data should be placed in thumb’s reach.

Provide easy sorting, filtering, and searching content according to a certain parameter

A high-quality UX design stands for easy browsing the website’s directory or item catalog. Filters are an effective instrument to display the most relevant results and narrow down high amounts of content.

Problems:

Redesigning UI based on various states, such as “a filter is applied”
Providing multi-level data management in UI
Creating the hierarchy of filters and easy search

How to achieve?

Display recommendations first (like “frequently used items”)
Provide interactive filters based on actions visitors take. Make it possible to close/access the filters menu with a thumb
Provide easily accessible buttons for search

Design on-the-go checkout

With the vast majority of ecommerce sales occurring via mobile devices, it is crucial that you build a fast and easy mobile checkout experience that does not make the users feel frustrated.

Problems:

Enabling for doing the transactions immediately.
Designing a checkout experience with few steps and minimal thumb movement

How to achieve?

Apply autofill options to fill the basic user information like address, edit card, and name
Make product variations like color and size easily discoverable and accessible
Minimize the amount of data required from your users

Provide one-handed patterns for all basic actions

These UX patterns mostly include things like creating/editing/deleting documents and posts.

Problems:

Making sure that these core actions are indeed easily accessible

How to achieve?

Design multi-level edit controls and menus
Make the addition/creation task flow possible with one hand (move forward, cancel, etc.)

Tip: uncomfortable placement can burry these actions on a screen. Place them somewhere where they would be reachable.

Always keep one-handed use in mind

A good navigation design is the foundation of any successful application. It helps people more easily find what’s important to them and discover the features faster.

Problems:

Having all the important sections easily accessible
Avoiding from making users struggle to reach a crucial part of the application

How to achieve?

Ensure easy jumping betweens sections
Ensure easy closing a page
Provide personalized tab bar
Provide multi-tab bar for more content
Use the flyout menu to increase reachability

Key Takeaways

Designing for one-handed use is not just about reachability. In other words, the trick is not just making sure everything is within users’ reach. One-handed use pattern is about focusing on quickening the application by taking out all the unnecessary steps, removing friction, saving the users time, thereby improving your UI/UX, and conversion. At Loonar Studios, we can help you with any of those UI/UX challenges. As always, feel free to contact us. Good luck!