90% of smartphones sold today have screens > 5 inches. Larger screen properties offer manufacturers and application designers new challenges and opportunities. Let’s see how designing apps for one-handed use can solve these challenges.
The world shrank in our hands on Friday January 2007, when three revolutionary products – the iPod, a phone and a revolutionary Internet communicator – were combined to create the smartphones we know and love today.
The iPhone has been designed to be able to be used comfortably with one hand and allow a more fluid movement of the thumb on the screen.
Steve Jobs once said that the 3.5-inch screen was the “perfect size for consumers” and that the larger screens were stupid.
But it wasn’t until the turn of the past decade that phablets became so popular due to their larger screens that less than 1% of the devices sold today had screens less than 4 inches.
90% of smartphones sold today have screens larger than 5 inches.
In the meantime, this gold rush offers manufacturers and application designers better and better presented the possibility of using screen space to provide more content and functions.
For example, the CNN app was one of the few that had early access to the iPhone 5 in 2012. Developers not only made an aesthetic change, but also designed a user-friendly and visually appealing experience that made the headlines.
Our practical guide in which Alla Kholmatova examines how efficient and maintainable design systems can be created for the development of great digital products. Get to know the design systems with traps, common traps and the lessons that Alla has learned over the years.
With larger screens, access and accessibility suffer
While larger screens are perfect for displaying more content, Steve Jobs’ main design consideration when making 3.5-inch phones suffers – one-handed design.
In his two-month research – at airports, streets, cafes, buses and trains – Steven Hoober highlighted the three ways in which users hold their phones.
49% of users hold their phone with one hand while on the go.
A solid case for designing applications to be used with one hand. Steven also found that users often change handles because of their comfort and location.
Why design for one-hand use should become a top priority for application manufacturers
We use our phones very often when we are busy or in a hurry. This has a huge impact on how users hold their phones and how they use apps, which translates to much more one-handed operation than the 49% suggested above.
Research has shown that the average user checks their phone up to 58 times a day, 70% of which requires less than 2 minutes of mobile interaction.
We use our phones for “short term distracted use”.
A Simform research team observed the use and behavior of sporadic use of short bursts in several scenarios, such as:
Google’s product manager Luke Wrobleski describes these short bursts as “one inch, one eyeball” for mobile use. It shows how a distracting environment forces users to get involved with partial attention to one-handed operation for short periods of time. He adds that the best way to use a smartphone with one hand is one in which fast interaction is supported by smooth functions.
How can you keep an eye on these apps with a short burst hand?
The answer is quite simple. Perform continuous usability testing and examine how your users hold their phones in different situations.
If users of your app frequently use the app in distracting scenarios, you should focus on designing accessible, one-handed models.
Let’s take a look at the development of the Spotify user interface to get an overview of the problem:
Spotify used the hamburger menu at the top left, which hid these features and dragged users into a sort of treasure hunt. With the advent of larger screens, however, another design challenge was added to the list – accessibility.
This forced the Spotify team to close the hamburger menu in 2016 and place its main functions – reception, research, research, radio and library – at the bottom, which led to a 9% increase in clicks in general and 30% menu items,
Use established UX models for common application usage scenarios to simplify one-handed use
Why reinvent the wheel? If you can use proven UX models that work. Many designers have already focused on one-handed operation as a design principle.
We’ve scoured hundreds of apps and thousands of models to find the best one-handed model. So let’s see what works, what problems are solved and what benefits you get.
We divide the most common user behaviors and UX models into six categories:
- UX Navigation Pattern ; for example, Menu Bars, Tab Bars and Gestures to easily switch between the most important sections of the application;
- Design of actions ; Create, modify, publish, add, delete, and other actions that users take to take advantage of the basic functionality of the application.
- Design templates for purchase, transaction and payment flows
- Search, sort and filter templates when users want to quickly search or search for content;
- Input and interaction models ; Cursors, choices, choices, drop-down lists, form fills, zooming and scrolling that form the building blocks of each application;
- Different models ; Multimedia playback, photo shooting, photo editing and map navigation models.
1. Design the navigation of the application taking into account the use with one hand
The basis of a great application is good navigation design. Good navigation allows users to recognize features faster and find out what’s important to them.
70% of users discover the functionality of the application using navigation links in relation to research or otherwise. Navigation bars, menus, gestures, links, tabs, etc. are the most common UX navigation models.
A good navigation design must have all important sections in advance and be easily accessible.
Common UX models like Apple’s tab bar and Google’s scan menu have limitations. You can only add a limited number of functions to the tab bar, and accessing all the draggable menu items is not easy.
Users shouldn’t have to struggle to reach a large part of the app by stretching to the top of the screen. It is simply misuse. Especially when users are on the go and use the app in a short burst.
Facebook and many other applications solve this challenge by inserting elements into a tab icon called “More” or “Menu” which allows users to access additional functions and sections of the application. However, it is not ideal for accessibility and one-handed use.
• Use the drop-down menu instead of a full-page menu to ensure that more than 5 items are accessible and customizable.
• Expanded tab bar if you have more content.
• Custom tab bar allowing key users to quickly access what they like.
• Use gestures to simplify user access for easier use.
• Returning and closing a page should also be easy.
• Quickly access a section of the page with smart UX models
Facebook, for example, hides many functions in a hamburger menu that decrypts the main screen. While this inclusion has a cleaner, more organized appeal, users suffer from accessibility with one hand.
Use the drop down menu instead of a full page menu for accessibility
Fortunately, we have a way to solve this challenge –
The full-page menus can be replaced by drop-down menus, which, as their name suggests, mean “flyout” from below. This allows easier access to options, even with one hand.
Expand the tab bar if you have more content
The user interface guidelines recommend that you have no more than 5 functions in the bottom navigation bar. This makes it difficult for application developers to bring additional basic features to the fore.
The “Plus” option (3 points) is recommended here. Other functions can be hidden in the lower bar and displayed with one click.
Custom tab bar for key users to quickly access what they like
Each user is different, and a feature that is important to one user may not be as important to the other. To get the most out of your application, you can allow users to customize their tab bars with commonly used features.
Gestures are easy to integrate into user habits for quick navigation
Tinder’s popular gesture navigation is a great technique to make it easier to use with one hand. When used intelligently, gestures can help extend navigation for one-handed use.
From the “Arrival” to “Return” concept with gestures and accessibility
Navigation is not just about accessing a screen or a section of the application. It is important to design to return to where the user is coming from, close a screen or move to a section of a page! Let’s see how apps use UX gestures and patterns to do these things easily.
Templates to quickly jump to different sections of the app
Applications with many categories, subcategories, and sections such as books, wiki, restaurant menus, and products may need more organization to ensure that users have no problem finding content.
These can be organized in a hierarchy and use UX models to improve accessibility and usability.
2. One-hand models for basic actions such as – create, modify, publish, add, delete and others
Users spend around 50% of their time on their cellphones representing themselves, interacting with social media, shopping online, managing finances, health and productivity, and planning for upcoming events. These action-oriented UX models include things like creating social posts, editing documents, editing, and more.
When designing action-oriented apps, we need to make sure they don’t stay in the back seat. For example, have an item or create a button above it instead of right next to your thumb.
There are three things to consider when designing the user experience for these main actions.
• Basic actions should grab the attention of users through the distinctive placement of the icon or button. Do not place them in the upper right corner of the application where they can be buried. It must be easily accessible without having to be used secondhand or going too far.
• Additionally, users should be able to complete the entire creation and adding workflow with one hand. This includes things like canceling the task, typing with the keyboard open, going to the next step, etc.
• Design for complex editing tasks with multi-level editing menus and commands.
• With accessibility as a goal, you can make sharing and sending things simple and straightforward.
The main task button or symbol of the application should attract users
The main tasks of the applications focus on things like capturing images, creating a post, adding files, sharing, etc. It becomes necessary for users to focus on them first and make them accessible and findable.
For example, Snapchat hides everything and only offers users incentives to take photos and videos. The “Submit” button also immediately invites users to share their stories with others.
Divide complex editing tasks with menus and controls specially designed for mobile devices
For many users, mobile phones are the most commonly used computer device. There is a generation of users who do real work on their cell phones. For example, editing documents is no longer the business of the computer, as a variety of mobile applications provide the service.
Microsoft Word and WPS Office offer a variety of editing tools and multi-level menus at your fingertips. These intuitive menu systems are intelligent and powerful and allow users to perform complex operations and multiple selections.
With accessibility as a goal, you can make sharing and sending things simple and straightforward
What strengthens our experience with our favorite music these days is the super-fast sharing options for social media, which are often just a click away.
You can use a sharing extension that moves up and down and allows users to directly enter messages.
Divide creating or adding tasks into multiple steps
Creating tables, favorites, and wish lists can be a problem, especially if they are placed at the top ends. Let’s look at the models that deal with data entry at several levels.
Flipboard and Airbnb keep everything at the bottom and within reach of your thumb. It’s very simple, from entering the selection of the following steps to canceling the action.
3. Design faster payment and transaction experiences while on the go
According to the Kaspersky Cybersecurity Index, 50% of e-commerce sales are made with mobile phones. Add to this business transaction, like booking a trip, flight, hotel room, movie tickets and concert tickets, and you realize the importance of designing the mobile payment process. A report from the Baymard Institute found that 23% of buyers leaving their shopping cart leave due to the complicated ordering process. This is especially true for mobile buyers where payment is a multi-step process where entering data is not so easy.
The ordering process requires a lot of input and special attention from the users.
Designing a one-hand crate would mean that users can complete the transaction with minimal thumb movement and fewer steps.
This is especially important for users on the go or who need to complete the transaction immediately.
To create a one-hand payment experience, we need to minimize the information that users need.
• If you select product variants such as size, color, time / date and others, they should be easily accessible and easy to find.
• We can use apps like Google and Apple Wallet or auto-fill items like Keychain, 1 password and LastPass to enter information like names, credit cards, addresses and passwords for single use.
• We must also emphasize the simple and minimal movements of the users’ thumb.
Add items to the shopping carts and select the product parameters as desired with the thumb
The logistics of online shopping can be simplified in three steps: add items to the baskets, select product variants and complete the payment process.
As designers, it is important for us not only to make this selection visible, but also to make it within an inch.
One way to achieve this goal is to display product variants in a tray that slides up when the user selects an item.
Another option is to allow users to scroll down and quickly select product variants, while the “order” or “buy” option remains static below.
Use e-wallets and password managers for quick payments
According to the report on payment methods 2019, more than 71% of online transactions are processed via electronic wallets such as Apple Pay, Google Pay, Alipay, Fitbit, Samsung Pay, YandexMoney and others. Not only are these wallets considered faster, they are also much safer and more accessible.
The payment process can be made more efficient and simpler. You can also add a scanning option to pay for higher conversions.
4. Find, filter and sort content with accessibility as the main goal
Without the right UX, finding the right product or item can be a tedious challenge for the user. Search, filter and sort tools determine how easy or difficult it is for the user to search the product and article catalog on the website.
Filters are a great tool for reducing large amounts of content and finding the most relevant results.
Theoretically, they are different: sorting organizes the content according to a certain parameter, filtering removes it from the view.
During the Baymard Product Lists and Filtering study, it was found that websites with average use of product lists had dropout rates of 67 to 90%. Additionally, there have been around 17 to 33% of user crashes trying to find exactly the same types of products from ecommerce websites using a slightly optimized set of tools. This resulted in an increase of approximately 4 times in the number of prospects.
Research on mobile phones should be easily accessible. For example, YouTube, Amazon Prime, Slack, and Google Maps prevent users from accessing the search menu by reaching the upper right corner.
Organize the filter information hierarchy because there are too many parameters and categories for users to quickly find what they are looking for.
Manage information at multiple levels in the user interface, especially when there are many categories and each category contains many elements.
Change the user interface according to different states such as “the filter is applied” and “the filter is applied”.
All of this must be done by users within the user’s reach.
Use easily accessible gestures or buttons for research. When users access the search screen, make suggestions and immediately open the text box.
Speak the language of the users and think about the intentions of the users when organizing the filters. Keep the filter / sort button close to the users. Also access and close the filter menu with one hand.
Use a two-step filter control or a side-by-side filter control to resolve the complexity of the information.
Apply the filter immediately. Make filters interactive based on the actions that users take. Allow users to select multiple options. Modify the filter categories according to the filters applied.
First, view recommendations, recently used or most frequently used information.
For many applications, search is one of the five most important functions. However, many application designers make it difficult to access the search icon. See the comparison below for Apple Maps vs Google Maps and Netflix vs Youtube.
Some applications use the search screen as the content recognition screen. They recommend to users what they want, what they were looking for before, what’s trending, etc.
Remove friction and next steps in search and filtering
To make it easier for users, we can bring up the keyboard immediately when you tap the search icon in the tab bar so that users can start typing their queries immediately. See the examples for Netflix and SpotHero.
Many applications like Amazon or Google Drive use the search bar at the top of the home page. In such cases, we can use gestures (swipe down) like the Inshorts app to start typing immediately, instead of going up and hitting the search bar.
Double tap the search icon to display the keyboard
If you want to use your search page to display information to users, you can also double-tap the keyboard, like Microsoft News, Spotify, and Reddit Apollo.
The filter menu, accessible with the thumb, should allow users to find information more quickly
Online shopping, booking, on-demand and other apps can include a full list of items from which users can choose.
The biggest consideration when designing a filter menu for small devices is the hierarchy of information. Let’s take a look at these examples to understand how filtering and sorting can be done with many options. They show how you can manage the complexity of information without compromising one-handed use.
Filters must also respond to user selections and indicate when the filters are applied.
To make this process more responsive, search results can be filtered simultaneously in the background when users make their selection.
5. User input controls such as forms, selections, selections, drop-down lists, and sliders that make up the building blocks of an application
Small buildings are equipped with smaller screens. Basic user interactions need to be redefined to increase productivity for mobile users.
Things like filling out forms, entering the password, selecting the date / time, making a selection, the popovers had to be easy to transfer to the touchscreen without sacrificing PC metaphors.
Entering data on mobile devices is cumbersome, especially when multiple data fields need to be completed.
Translating user interactions on smaller devices is not easy. The biggest challenges are:
• User input speed must be very high with minimal movement of the user’s thumb.
• Information should be collected in a minimum number of steps.
• The design of the entry control should have an easy to understand interface and metaphor.
• The experience must be pleasant and constant.
• Users must know their location and information must not be lost.
When done correctly, adding entries to trackers, calendars, and more can be a quick task.
• Any user action, such as filling out forms or making decisions, should be closer to the bottom. The action flow and selection options must be consistent without making any changes to the user interface.
• The information you need to move forward should be within your thumb.
• Data entry options, including notifications, should be clear and close to the ground.
• Larger forms can be divided into multi-level forms and multi-screen forms. This multi-screen approach should be very easy to do in both directions.
Correction of the completion of forms starting with registration forms
We all hate filling out registration forms. They are time consuming and require unnecessary information.
Filling out forms can be less complicated when converting a long form into multiple screens. Using things like auto-fill, thumb click buttons for next and previous steps, continuous keyboard presence and no scrolling make this approach faster and easier.
Get quick user input with minimal thumb movement
Positioning user input controls at the bottom of the screen allows for faster data entry and quick prompts.
Use choices, drop-down lists, scroll bars, and sliders to provide information to users.
Smart mobile templates for user input controls
Let’s take a look at a few more models that make it easier to get user feedback.
6. Different models for multimedia playback, photo taking, photo editing and map navigation models
With more than 2 million apps in the Google Store and 1.83 million apps in the App Store, it has become essential for designers to showcase their apps. One way to do this is to make the general functions fun and smooth for users. This last section summarizes the different user interactions.
While accessibility is a big part of developing a one-handed operation, it’s not just about making sure everything is within reach of the user. Applications with good one-handed use also save users time, eliminate friction loss, take unnecessary action, and most importantly, focus on speeding up “short burst distracted use” of applications.
We have looked at many models that designers can use to solve different UX challenges. For more information, visit these websites to find templates that you can use with one hand.