Get best of the week

How to design mobile applications for one hand

tl; dr 90% of modern smartphones have a screen diagonal of more than five inches. The emergence of such displays presented a fundamentally new problem for application developers and designers. Let's see how to solve them.



After Apple presented in January 2007, the whole world shrank to the size of our hands. The company combined the iPod, phone and browser into a single device. Apple introduced to the mass market a new class of devices that we today know as “smartphones”. These gadgets worked without a keyboard (like BlackBerry) or a stylus (like Palm).

The iPhone was designed for convenient operation with just one hand, with smooth thumb movements across the screen.

Steve Jobs once said that 3.5 inches is “the perfect size for consumers,” and larger screens are stupid.



However, at the turn of the decade, phablets with large screens became popular on the market. Today, less than 1% of devices are sold with screens less than 4 inches, while 90% have a diagonal of more than 5 inches.

This race with a constant increase in the screen has provided new opportunities for application developers and designers to use the extra screen space to deliver more content and more features.

For example, the CNN app was one of the few to gain early access to the iPhone 5, introduced in 2012. The developers not only aesthetically transformed it, but also improved readability by highlighting headings.


Apple 2012


While large screens are great for displaying a lot of content, Steve Jobs’s main consideration for 3.5-inch phones suffers - one-handed use .

In his two-month study - at airports, on the streets, in cafes, on buses and trains - Stephen Huber examined three ways that users hold their phones.



It turned out that 49% of users hold their phones with one hand, especially on the go. In general, this is the default smartphone grip.

Providing convincing arguments in favor of developing applications for one-handed use, Stephen also found that users often change grip depending on convenience and situation.

Why single-handed design should be a top priority


We often use phones when busy or in a hurry. This greatly affects how we hold the phone and how we use applications. In practice, this grip is much more common than in the 49% mentioned above.

Studies show that the average user checks their phone 58 times a day, with 70% of mobile interactions lasting less than two minutes. People often use phones in "brief periods of time with distracted attention."


Image: Rescue Time

A group of researchers from Simform observed these sporadic impulses of using a phone in several scenarios:


Examples of using a smartphone in short intervals

Google Product Director Luke Wroblesci calls these short impulses of mobile use “one finger, one look” (one thumb, one eyeball). This reflects how a distracting environment leaves a smartphone with only short intervals of partial attention of a person. He also adds that the most optimal type of smartphone use with one hand is the one where fast interaction is supported by convenient functionality .

How to design a design for such short intervals with one finger?


The answer is pretty simple. Continuously conduct usability testing and learn how your users hold their phones in various situations.

If users often use the application in distracting scenarios, then you should focus on developing templates aimed at accessibility and use with one hand.



To get an idea of ​​the problem, let's look at the evolution of the Spotify interface:


Old Spotify navigation - Spotify hamburger

used a hamburger-like menu in the upper left corner, which hid the application’s functions and set users to search for them. With the advent of large screens, another design problem was added to the list: reachability .


Spotify users experienced a certain level of difficulty and discomfort

This forced the Spotify team to collapse the hamburger menu in 2016 and place its main functions - Home, Browse, Search, Radio and Library - at the bottom, which led to an increase in the number of clicks by 9% in general and by 30% on menu items .

Use standard UX templates for typical use cases.


Why reinvent the wheel if you can use proven effective UX templates. Many designers have already worked out scenarios for using the application with one hand.

We went through hundreds of applications and thousands of templates to find the best tricks and methods for such use. Let's see which ones work best, what problems they solve, and what benefits you get from this.

We divided the most common user behavior patterns and UX templates into six categories:

  1. Navigation
    For example, menu bars, tabs and gestures for easy movement between the most important sections of the application.
  2. Actions
    Create, edit, place, add, delete and other actions that use the basic functionality of the application.
  3. ,
  4. , , .

  5. , , , , , ,  — .

  6. , , , .

1.



The foundation of a great application is good navigation. It helps to quickly find the necessary functions and what is important to users.

In 70% of cases, users find new functions and features of the application by navigating through it, and not by searching or in other ways. Navigation panels, menus, gestures, links, tabs, etc. are the most common UX templates.

Good navigation should immediately demonstrate all the important sections and be easily accessible.

Problems


Conventional navigation templates, such as the Apple tab bar and Android swipe menu, have limitations. Only a limited number of functions are placed on the tab bar, and access to all elements of the swipe menu is not easy.

Users do not have to struggle to reach an important part of the application; they do not have to reach with the finger to the top of the screen. This is just uncomfortable. In particular, if a person is on the go and uses the application very quickly.

Decision


Facebook and many other applications solve the problem by placing items under the button called “Menu” or “More”, from where users can access additional functions and sections of the application. However, this is not ideal when used with one hand.

  • For accessibility and placement of more than five items, not a full-page, but a pop-up menu is better suited.
  • Extended tab bar if there is more content.
  • Personalized tab bar for advanced users.
  • Gestures for users to develop habits of convenient and quick access.
  • Returning and closing the page should be as easy.
  • Quick jump to specific sections of the application.

For example, Facebook hides many features in the hamburger menu, which closes the main screen. Although it looks beautiful and logical, users suffer when working with one hand .


1.1. What is the main problem with the hamburger menu?

Use a pop-up rather than a full-page menu


Fortunately, we have a way to solve the problem. 

Full-page menus can often be replaced with pop-up menus. As the name implies, they "pop up" from below. This makes it easy to access options with just one hand.


1.2. Popup menu templates. Video: Joox

Extend the tab bar if there is a lot of content


The Apple Human Interface Guidelines recommends placing no more than five functions in the bottom navigation bar. This is where the "More" option comes in handy (three points). Located in the bottom panel, it can hide other functions and open them with one click.


1.3. Design of the bottom navigation menu with additional options panel

Personalized tab bar for advanced users


Each user is individual, and a function that is important for one may not be of interest to the other. To take full advantage of the design, you can allow users to customize tab panels with frequently used functions.


1.4. Personalized bottom tab bar for quick access to features

Gestures for users to develop habits of convenient and quick access


Tinder's popular gesture navigation is a great way to make one-handed navigation easier.


1.5. Gesture-based navigation to access application features

Returning and closing the page should be as easy.


Navigation is not only access to the screen or section of an application. It’s important to consider the method of returning back, closing the screen or moving to a specific section on the page! Let's see how applications use UX gestures and templates for such things.


1.6. Using gestures to navigate multiple screens (video: Zenly )

Quick jump to specific sections of the application


Applications with many categories, subcategories and sections, such as books, wikis, restaurant menus, product catalogs, need a well-organized organization so that users do not have problems finding content.

Applications can be organized hierarchically and use custom UX templates to increase accessibility and ease of use.


1.7. Floating tab panels and gestures for moving between sections

2. One-handed actions


What it is


Users spend about 50% of their mobile time doing activities on their smartphones. These are social interactions, purchases, self-expression, financial, health and productivity management, as well as planning for upcoming events. All of these templates include actions such as creating social messages, editing documents, and some others.

Problems


When developing action-driven apps, we need to make sure the right actions are at hand. For example, the button for publishing a message or creating a document is located near the thumb, and not at the top of the screen.

Decision


Four important points to keep in mind.

  1. . , . .
  2. , . , .
  3. .
  4. , .


The main task is, for example, taking photographs, creating a post, adding files, publishing, etc. It is important that this task first of all attract the user's attention.

For example, Snapchat generally hides all the functions except the main task of photo and video shooting. In addition, the “Submit” button invites you to immediately share your stories.


2.1. Simplify access to basic tasks with gestures, pop-up menus and floating tab panels

Break down complex editing tasks with menus and controls designed specifically for mobile devices


For many users, a mobile phone is the most commonly used computing device. A generation has grown up that does real office work on phones. For example, editing documents. This feature is in many mobile applications.

Microsoft Word and WPS Office offer many editing tools and multi-level menus within reach of your finger. These intuitive menu systems are smart and powerful, allowing users to perform complex operations and make multiple choices.


2.2. Editing tools at the bottom of the screen for faster changes

Designing simple sharing and sending functions without forgetting about reachability


What makes it especially possible to enjoy your favorite music these days is a super-fast option to share on social networks, often with just one click.

There is also an option for an extended panel that swaps from the bottom up and allows you to directly enter messages.


2.3. UX templates for sharing photos, videos, music and other materials with one hand

Divide the tasks of creating or adding content into several stages


Creating boards, favorites, and a wish list can be tricky. Let's look at the templates for entering data in several stages.

Flipboard and Airbnb place all the elements at the bottom of the screen within the reach of the thumb. From typing to selecting the next steps or undoing the action - everything is very simple.


2.4. Create and Add Icons within Thumb Reach

3. Shopping, transactions and settlement in the store with one hand


What it is


According to the Kaspersky Cybersecurity Index , 50% of purchases in online stores are made from mobile phones. Add other commercial transactions, such as booking a trip, flight, hotel room, movie tickets and concert tickets, and you will understand how important the correct design of the mobile interface for placing an order is. A Baymard Institute report says that 23% of shoppers abandon a cart with goods due to the complex checkout process. This is especially true for mobile phones, where the process is multi-step and data entry is not so simple.

Problems


The process of placing an order requires the input of a large amount of data and close attention from the user.

  • Placing an order with one hand means that the user must complete the transaction in a minimum number of steps and finger movements.
  • This is especially important for users on the go or who need to complete a transaction immediately.

Decision


In one-handed design, user input should be minimized.

  • When choosing options, such as size, color, time / date and others, they should be easily visible and accessible.
  • We can integrate Google or Apple payment systems, or make auto-completion from password managers such as Keychain, 1Password and LastPass to enter names, bank cards, addresses, one-time passwords.
  • We must think through the design so that the user minimally moves his finger, because in this hand he holds a smartphone.

Adding products to the basket and selecting product options at a fingertip


Logistics online shopping can be reduced to three steps:

  1. Adding products to the cart.
  2. Selection of product options.
  3. Completion of the payment process.

It is important to make these steps explicit and place them within the reach of the thumb.

One of the tricks is to display product options in the tray, which moves up as you select. Another way is to allow scrolling of the page with quick product selection and the option “Place an order” or “Buy” is statically at the bottom.


3.1. A smooth checkout process with the ability to add products and select options


3.1. Adding products to the cart in e-commerce and custom delivery applications. Video: Shopping Choose  / WE + AR TRBL  / Tasty Hamburger app

Using e-wallets and password managers to simplify payments


According to the Report on Payment Methods for 2019 , more than 71% of online transactions are carried out through electronic wallets such as Apple Pay, Google Pay, Alipay, Fitbit, Samsung Pay, YandexMoney and others. These wallets are not only considered faster, but they are much safer and easier to use.

The checkout process can be made more efficient and simple. Moreover, to increase the conversion, you can add the swipe-to-pay option.


3.2. Settlement process in mobile e-commerce applications


3.2. Settlement process in mobile e-commerce applications. Video: SPACED Challenge (Travel + VR)  / Checkout Promocode  / Gamification Checkout

4. One-handed search, sorting and filtering


What it is


Search, filtering and sorting tools determine how easy it is for a user to browse a product catalog or other information on a site.

Filters are a great tool for thinning out large amounts of content and finding the most relevant results.

In theory, they are of two types: sorting organizes the content according to a certain parameter, filtering removes unnecessary.

In a Product Listing & Filtering study at the Baimard Institute, it was noticed that sites with average usability of the product list showed a failure rate of 67-90%. However, a small change in the toolbox reduced the failure rate to 17-33% when searching for the same products. This led to about four times the multiplication of leads.

Problems


  • . , Youtube, Amazon Prime, Slack Google Maps , .
  • , , , .
  • , .
  • , , .
  • .


  • . , .
  • . «/» . , .
  • , .
  • . . . , .
  • First show recommendations, recently used or most frequently used filters.

In many applications, search is in the top 5 functions used. But many application developers make access to this icon difficult. Compare below the interfaces of Apple Maps and Google Maps, as well as Netflix and Youtube. How accessible is the search bar on Apple Maps and Google Maps ( enlarged image ) How accessible is the search bar on Netflix and YouTube ( enlarged image ) Some applications use the search screen to familiarize the user with new content: show recommendations that they were looking for in the past etc. 4.1. Demonstration of new content to the user through the search page ( enlarged image )












Remove unnecessary actions when searching and filtering


To speed up everything as much as possible, you can make sure that by clicking on the search icon the keyboard immediately appears, and the user can immediately enter a query. For an example, see Netflix and SpotHero applications.

Many applications, such as Amazon or Google Drive, leave a search bar at the top of the home page. In such cases, it is better to use gestures (swipe down), as in the Inshorts application - immediately start entering a search query, instead of reaching for the top of the page and clicking on the search bar.


4.2. Search and filtering made convenient for working with one thumb

Double-clicking on the search icon launches the keyboard


If the search page is used to display additional information, double-clicking on the icon immediately launches the keyboard, as is done with Microsoft News, Spotify and Reddit Apollo.


4.3. Access to the keyboard is simplified by double-clicking on the search icon

Finger reach filter menu should speed up information retrieval


Online stores, booking systems, applications for instant ordering of goods / services and others may contain huge lists from which users must choose a suitable offer.

The most important thing when designing a filter menu for small devices is the information hierarchy. Let's look at these examples to understand how to design filtering and sorting from a large number of options. They show how to cope with the complexity of information without making the user who holds the phone in one hand suffer.

Filters should respond to user choices and demonstrate when they are applied.

To make this process more flexible, search results can be filtered in the background simultaneously with the choice of options that the user produces.


4.4. Sorting and filtering products in mobile e-commerce and custom delivery applications



4.4. Sorting and filtering products in mobile e-commerce and custom delivery applications. Video: Filters  / Car Sharing with Friends

5. One-handed input and interaction


What it is


As the screen shrinks, the available space also decreases. To increase the productivity of mobile users in such conditions, it is necessary to rethink the main types of interaction.

Things like filling out forms, entering a password, choosing a date / time, highlighting should be correctly transferred to the touch interface, without giving up the usual metaphors.

Problems


On mobile devices, it is tedious to enter data, especially when you need to fill out several fields.

Moving user interactions from desktop computers to smaller devices is not easy. Here are the main issues:

  • Data entry speed should be very high with minimal movement of the user's thumb.
  • Information must be collected in a minimum number of steps.
  • Input fields should have an easy to understand interface and clarity.
  • Impressions of users from work should be pleasant and integral.
  • Users should be well oriented in the interface, and information should not be lost.

If everything is done correctly, this will allow you to quickly add data to trackers, calendars and other similar applications.

Solutions


  • , , . - .
  • .
  • , , .
  • . .

,


We all hate filling out registration forms. They are time consuming and require the input of unnecessary information.

Filling out forms can be simplified by splitting a long form into several screens, using automatic filling, convenient “forward / backward” buttons next to the thumb, ensuring the constant presence of the keyboard and guaranteeing no scrolling.


5.1. Recommendations for multi-screen registration. Video: Zenly and Airbnb

Fast data entry with minimal finger movements


The arrangement of elements at the bottom of the screen accelerates data entry and allows you to respond more quickly.

To do this, use select lists (pickers), drop-down lists, scrollers and sliders.


5.2. Accurate form filling with one-handed data entry. Video: Periscope

Smart tricks for data entry


Consider a few more tricks that make it easier to get information from users.


5.3. One-handed data entry in mobile applications. Video: Peach  / Zova Workout & Fitness  / Square Order

6. Other templates


There are already more than two million applications in the Google catalog, and 1.83 million in the App Store. In such circumstances, developers want to distinguish their applications from others. One way is to make the standard program functions interesting and convenient. In this last section, we consider some of these interactions.


6.1. Forget about tweaking: these apps let you zoom in and out with one finger


6.1. Gestures are always able to facilitate interaction with the application, whether it is the choice of emoticons, sending images or listening to sound clips


6.1. Gestures are always able to facilitate interaction with the application, whether it is the choice of emoticons, sending images or listening to sound clips. Video: Composer Concept  / Gamification + Checkout

Conclusion


When working with one hand, it is important to guarantee the reach of all functions with one finger. If the application is well managed with one hand, it saves users time, eliminates unnecessary steps and, most importantly, focuses on speeding up the work in the "short intervals of distracted attention" of users, which is very important now.

More articles:


All Articles