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.

Read also: PRACTICAL TIPS FOR IMPROVING UI DESIGN

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:

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

How to achieve?

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

Read also: COMMON MOBILE INTERFACE MYTHS

• 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:

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

How to achieve?

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

Read also: LARGE-SCREEN ECOMMERCE DESIGN

• 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:

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

How to achieve?

1. Apply autofill options to fill the basic user information like address, edit card, and name
2. Make product variations like color and size easily discoverable and accessible
3. 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:

1. Making sure that these core actions are indeed easily accessible  

How to achieve?

1. Design multi-level edit controls and menus 
2. 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: 

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

How to achieve?

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

Read also: HOW TO CHOOSE CLOUD SOLUTIONS FOR WEB AND APP DEVELOPMENT?

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!