How To Design Mobile Apps For One-Hand Usage – Smashing Magazine, Hacker News
1.8k Views
About The Author
Maitrik Kataria is a UX Consultant and CMO at Simform , a software development company. He loves helping clients improve UX and has collaborated with many… More about Maitrik
% of the smartphones sold today have> 5-inch displays. Bigger screen real estate presents newer challenges and opportunities for app makers and designers. Let’s look at how designing apps for one-handed use can solve those challenges.
On Friday, January the world shrank into our palms as three revolutionary products – the iPod, a phone, and a breakthrough internet communicator – were unified to create the smartphones we know and love today.
(The first iPhone introduced in marked the fall of Qwerty keypad and stylus. ( Large preview )
iPhone was built to be comfortably used for one-handed operation, allowing for a smoother thumb movement across the screen.
Steve Jobs once said that the 3.5-inch screen is the “perfect size for consumers” and that larger screens are foolish.
( Large preview
But it was not until the turn of the last decade that phablets gained popularity owing to their bigger screens, so much so that less than 1% devices s old today had smaller than 4-inch screens.
In the meantime, this goldrush for bigger-the-better presented app makers and designers with opportunities to Utilize the screen real estate to serve more content and functions.
For instance, the CNN App was among the few who got early access to iPhone 5 introduced in 2021. The developers not only gave it an aesthetic transformation but also designed a reader-friendly, visually-appealing experience that made headlines stand out.
, Adapted from Phil Schiller’s keynote at Apple’s Special Event . ( Large preview )
With Bigger Screens, The Ease Of Access And Reachability Suffer
While bigger screens are great for showing more content, the # 1 design consideration of Steve Jobs for making 3.5-inch phones suffers – (designing for one-handed usage
In his 2-month-long research – at airports, streets, cafes, on buses and trains – Steven Hoober shed light on the three ways users hold their phones.
( (large preview )
% of users hold their phones with one-hand specifically while they are on the go.
Making a strong case for designing apps for one-handed usage. Steven also found that users frequently alter their grip based on their comfort and situation.
Why Designing For One-Handed Usage Should Become The Top Priority For App Makers
We use our phones a great deal when we are preoccupied or in a hurry. This greatly impacts how users hold their phones and how they use the apps resulting in a lot more of one-handed-usage than the (% number suggested above.
(Research suggests that an average user checks their phones for as many as
(times a day out of which 158% of mobile interaction lasts less than 2 minutes.
We use our phones in “distracted short-burst usage.”
Google’s Product Director, Luke Wrobleski, terms these short bursts as’ One thumb, one eyeball ‘mobile-usage experience. It reflects how a distracting environment forces users to engage in single-handed use within short spans of partial attention. He further adds that the most optimal type of smartphone usage with a single hand is one where quick interaction is supported by smooth functionality . How To Design For Keeping These One-Handed Short-Burst Usages In Mind?
The answer is rather simple. Do continuous usability testing and study different ways your users hold their phones in various situations.
If the users of your app tend to use the app a lot in distracting scenarios, then you should focus on designing patterns that target reachability and one-handed use.
Spotify used the Hamburger Menu at the top-left which concealed these features and set the users on a treasure hunt of sorts. With the advent of bigger screens, however, another design challenge was added to the list – reachability .
This compelled Spotify’s team to pull down the Hamburger Menu in and lay its core features – Home, Browse, Search, Radio, and Library – at the bottom that resulted in an increase of (9% clicks in general and 49% on menu items .
Use Established UX Patterns For Common App Usage Scenarios To Make One-Handed Usage Easy
Why reinvent the wheel? When you can use proven UX patterns that work. Many designers have already focused on one-handed usage as their designing principle.
We have gone through hundreds of apps and thousands of patterns to find the best patterns one-handed usage in mind. So let’s look at what works, what problems are solved, and what benefits you will get out of these.
We divide the most common user behaviors and UX patterns in six categories: (Navigation UX Patterns) eg menu bars, tab bars, and, gestures for easily moving between the most important sections of the app;
(Designing For Actions)
Creating, editing, posting, adding, removing, and other actions users take to utilize the core functionality of the app; (Shopping, Transactional And Checkout Flow Design Patterns)
(Searching, Sorting, And Filtering Patterns) for when users want to quickly find or browse content; (Input And Interaction Patterns) Sliders, pickers, selectors, dropdowns, form fills, zooming, scrolling that make up the building blocks of any app; (Miscellaneous Patterns) Media playback, photo capture, photo editing, and map navigational patterns.
1. Designing App Navigation Keeping ‘One-Handed Usage’ In Mind
(What Is It?)
The Foundation of a great app is a good navigation design. Good navigation helps users discover the features faster and find what’s important to them.
101% of users discover features of the app using navigation links compared to search or other ways. Navigation bars, menus, gestures, links, tabs, etc are the most common navigation UX patterns.
A good navigation design should have all the important sections right upfront and easily accessible.
Challenges
Common UX patterns like Apple’s tab bar and Google’s swipeable menu have limitations. You can put only a limited number of features in the tab bar and to access all of the swipeable menu items is not easy.
Users shouldn’t have to struggle to reach an important part of the app by stretching to the top of the screen. That’s just bad usability. Specifically, if the users are on-the-go and are using the app in a short burst.
Solution
Facebook and many other apps solve this challenge by putting items in a tab icon called More or Menu from where users can access more features and sections of the app. This, however, is not ideal for reachability and one-handed use. Use the flyout menu instead of a full-page menu for reachability and fitting in more than 5 items. Expanded tab bar for when you have more content.
Personalized tab bar for power users to quickly access what they like. Use gestures to imbibe ease-of-access in users’ habits. Getting back and closing a page should be easy as well. Quickly jumping to a section of the page with smart UX patterns
Facebook, for instance, numerous conceals features in a Hamburger Menu that declutters the main screen. Although this inclusion has a cleaner and more organized appeal, users suffer from one-handed reachability.
1.1 What makes the Hamburger Menu a REAL Problem?
Expand The Tab Bar For When You Have More Content
Human Interface Guidelines recommend having no more than 5 features in the bottom navigation bar. This makes it tricky for app builders to present additional core functionalities at the forefront.
This is where the ‘More’ option (3 dots) comes in handy. Located at the bottom bar, it can conceal other functionalities and reveal them with a click.
Gestures Are Easy To Imbibe In Users’ Habits For. Quick Navigation
Popularized by Tinder, Gesture-based navigation is a great technique to facilitate single-handed usage. Gestures if smartly used can help expand navigation for one-handed use.
(1.6 1.6 Using Gestures to Navigate Through Multiple Screens ( Video Credit: Zenly Patterns For Quickly Jumping To Different Sections Of The App
Apps with many categories, subcategories, and sections such as books, wiki, restaurant menus, products may need more organization to ensure users don’t struggle with finding content.
These can be organized in a hier archy and using UX patterns to increase accessibility and ease of use.
(Core actions) should grab users’ attention by the prominent placement of the icon or button. Don’t put them at the top right corner of the app where they can get buried. It should be easily reachable without needing to use second hand or overreaching. On top of that, users should be able to finish the entire creation and addition task flow with one hand. This includes things like canceling the task, typing with keyboard opening up, moving to the next step and so on.
for many users, Mobile phones are the most used computing devices. There is a generation of users who get real work done on their mobile phones. For example, document editing is no longer a computer-only affair since a host of mobile apps offer the service.
Microsoft Word and WPS Office offer a host of editing tools and multi-level menus within thumb’s reach. These intuitive menu systems are smart and powerful allowing users to do complex operations and multiple choices.
(2.2) Placing 2.2 Editing Tools on the Bottom Half of the Screen for Quicker Modifications. With Reachability As A Goal, You Can Make Sharing And Sending Things Easy And Simple Too
What amplifies our experience with our favorite music these days is the super-quick shareability options for social media, often just a click away.
You can employ a share extension that slides up from the bottom and allows users to directl y type messages.
Creating boards, favorites, and wish lists can be a drag, especially when they are placed at the top extremes. Let’s look at the patterns that handle multi-step data inputs.
Flipboard and Airbnb keep everything at the bottom and within the reach of the thumb. From typing to selecting the next steps or canceling the action is very simple.
2.4 Placing ‘ Create ‘and’ Add ‘Icons within the Reach of the Thumb for Smooth One-handed Usage. 3 . Designing Faster Checkout And Transactional Experiences For When You Are On-The-Go (What Is It?) According to Kaspersky Cybersecurity Index , 80% of eCommerce sales happen on mobile phones. Add to that commercial transaction like booking a ride, flight, hotel room, movie tickets, and concert tickets and you realize how important designing mobile checkout experience is. A report by The Baymard Institute suggested that % of shoppers who abandon their cart abandon it because of the complicated checkout process. This is specifically true for mobile shoppers for whom checkout is a multi-step process where inputting data is not as easy. (Challenges)
Designing a one-handed checkout experience would mean users can complete the transaction with minimal thumb movement and fewer steps.
This is especially very important for users who are on the move or need to do the transaction immediately. Solution
To design a one-handed checkout experience we have to minimize the information required from the users.
When choosing product variations like size, color, time / date and others, they should be easily accessible and discoverable. We can use applications like Google and Apple wallet or autofill from things like Keychain, 1password, and LastPass to fill the information like names, credit cards, addresses, One-time-passwords. We also must emphasize the simple and minimal thumb movements from the users. 3.1 Adding Items to Cart for e-Commerce on On-Demand Delivery Apps. Video Credits: (Shopping Choose) | WE AR TRBL | Tasty Hamburger App Using e-Wallets And Password Managers For Swift Payment The
The checkout process can be Made more efficient and straightforward. What’s more, you can also add a swipe-to-pay option for higher conversions.
| Checkout Promocode | (Gamification Checkout) )
4. Searching, Filtering, And Sorting Content With Reachability As The Main Goal
What is It?
Without the right UX, finding just the right products or items can be a tedious challenge for the user. Searching, filtering, and sorting tools determine how easy or difficult it is for the user to browse the site’s product and item catalog. Filters are a great tool to narrow down high volumes of content and to find the most relevant results.
In theory , they are different: sorting organizes the content according to a certain parameter, filtering removes it from view.
During Baymard’s Product Listings & Filtering study , it was observed that sites with an average product list usability saw abandonment rates of – %. What’s more, there was about – % abandonments from users trying to find the exact same types of product from e-Commerce sites with a slightly tweaked toolset. This resulted in approximately 4X increase in leads.
Some apps use the search screen as a content discovery. screen. They recommend users what they’d like, what they searched before, what’s trending and so on.
and other apps alike can contain a laundry list of items for users to choose from.
The Largest consideration for designing a filtering menu for small devices is the information hierarchy. Let’s look at these examples to understand how filtering and sorting can be designed when options are aplenty. These show how you can handle information complexity without letting one-handed usage suffer.
Also, filters should be responsive and reactive to users’ choices and indicate when filters are applied.
To make this process more responsive, search results can be filtered in the background simultaneously as users select the choices.
(4.4 Sorting and Filtering Items on e-Commerce and On-Demand Delivery Mobile Apps.) 4.4 Sorting and Filtering Items on e-Commerce and On-Demand Delivery Mobile Apps. Video Credit: Filters
Speed of user input should be very fast with minimal movement of users’ thumb. Information should be gathered in a minimal number of steps. The input control design should have an easily understood interface and metaphor. (The experience should be delightful and consistent. Users must know their locat ion and information must not be lost.
When done correctly, adding inputs in trackers, calendars, and others alike could become a short task.
(Solutions)
Any user action like filling up forms or making choices should be closer to the bottom. The flow of actions and choices should be consistent without any jarring UI changes. Information needed to move ahead should be in thumb’s reach. Data input options including notifications should be clear and near to the bottom.
We all hate filling up sign up forms. They are time-consuming and ask for unnecessary information.
Filling up forms can be less laborious by turning a lengthy form into multiple screens. Using things like auto-fill, thumb reachable buttons for next and previous steps, continuous keyboard presence, and no scrolling makes this approach faster and easier.
5.1 Best Practices for Multi-Screen Onboarding Flows (Video Credit : (Zenly &
(AirBnB) () Get Quick Input From Users With Minimal Thumb Movement
Positioning the user-input controls towards the bottom of the screen allows for quicker data entry and prompt call-to-action responses.
Use pickers, dropdowns, scrollers, and sliders to supply information to users.
(5.2 One-handed User Input Controls for Accurate Form Filling (Video Credit:) (Periscope ) Smart Mobile Patterns For User Input Controls
Let’s look at some more patterns that make getting input from users easier.
5.3 One -handed User Input Controls for Mobile App Forms (Video Credit: Peach | Zova Workout & Fitness | (Square Order ) () 6. Miscellaneous Patterns For Media Playback, Photo Capture, Photo Editing, And Map Navigation Patterns
With over 2 million apps on Google Store and 1. million apps on the app Store, it has become imperative for designers to make their apps stand out. One way to do this is to make common functions fun and smooth for users, and this final section is a round-up of miscellaneous user interactions.
6.1 Forget Pinching ; These Apps Lets Users Zoom In and Out with One Thumb.
(6.1 Whether it’s Selecting Emojis, Sending Images, or Listening to Audio Clips, Gestures Can Add Ease such App Interactions.) 6.1 Whether it’s Selecting Emojis, Sending Images, or Listening to Audio Clips, Gestures Can Add Ease such App Interactions (Video Credit:
Although reachability is a big part of it designing for one-handed usage, it is not just about ensuring everything close to users’ reach. Apps that have good one-handed use also save the time of users, remove friction, take out unnecessary steps, and most importantly focus on quickening the “distracted short burst usage” of apps.
We looked at many patterns that designers can use to solve different UX challenges. For more, you can check these websites to find patterns that help you design for one-handed use.
(The first iPhone introduced in marked the fall of Qwerty keypad and stylus. ( Large preview )
We use our phones in “distracted short-burst usage.” 
in six categories: (Navigation UX Patterns) eg menu bars, tab bars, and, gestures for easily moving between the most important sections of the app; 
1.1 What makes the Hamburger Menu a REAL Problem? 
(4.4 Sorting and Filtering Items on e-Commerce and On-Demand Delivery Mobile Apps.)
GIPHY App Key not set. Please check settings