Convenient one-handed operation in app design

Before exploring the app's gestures, I'd like to introduce two articles to understand how users use their mobile phones and how touch screens can sense our actions.

　　How users use their mobile phones

In the article "How do users really Hold mobile Devices" [1], Steven Hoober points out that two months of 1333 mobile users in public places (streets, airports, bus stops, cafes, trains, cars, etc.) The use of customary observations draws the following conclusions:

① 780 users operate screens by sliding, clicking, typing, and other users simply use their mobile phones to listen, watch, and make phone calls.

②49% users through a single hand operation, 36% hands holding a mobile phone operation, and another 15% hand operation.

③ in one-hand operation users, 33% of the user with the left thumb to operate.

④ users often change their operating posture and gestures.

49% of the single hand operation user is the following two postures (opposite to left-handed users). Green represents easy to click Area, yellow for thumb extension can go to click Area, red area exceeds single hand clickable range.

　How the touch screen is perceived to operate

Steven Hoober, in Common Misconceptions's about touch [2], points out that because our fingers are three-dimensional and soft, only part of the finger area is in contact with the screen when operating the screen, which is called contact imprinting. The touch screen only perceives the geometrical center position of people touching the imprinting, which is independent of the size of the contact imprinted area.

In addition to these factors, the differences in hardware devices, users use mobile devices when the line of sight will affect the accuracy of the click operation (more detailed description can be attached in the article after the original link to view). For this reason, Steven Hoober proposed the design of visual targets and touch targets (that is, the hot zone we used to say) for the interface elements respectively. If you click on the URL link in the article (visual target), we do not need to click the letter on the link accurately, but only need to trigger the square area around it (touch target) can be generated to jump to the site. On the basis of not affecting the visual effect, the proper amplification of the touch area can improve the accuracy of the operation.

Another way to separate visual and touch targets is to do what we often call gestures, as mentioned above, the use of mobile phones in the single hand and left-handed operation of the proportion of users are relatively large, good hand gesture design can effectively improve the use of efficiency, reduce misoperation, to bring users surprises. For this reason, the author summarizes the 4 usages of the existing app one-handed operation.

　　How gestures are used.

1. Page switch

In the limited screen space to use the app, multi-level, multiple page switching is the most frequent operation, if only rely on most of the upper left corner of the back key to return or click to switch tab, it will be very inconvenient to use, Therefore, the most common use of one-handed operation is to use the left and right hand gestures to traverse the various levels of the page. The following figure NetEase Cloud Reading Information Center tab switch. In this gesture operation there are two key factors affecting the experience: first, the sliding process of the page to follow the finger, so that users can form a sense of control of the product and a clearer sense of hierarchy, and the second is the need for "signpost" The role of the page elements as a guideline.

Figure (1) is NetEase cloud reading and iOS settings in the right sliding operation signal. NetEase Cloud reading, in any position on the page can be gently right to return, iOS return operation gesture Hot area at the edge of the screen. The difference is that the return design in cloud reading is more to take advantage of the user's subconscious behavior, low operating costs, but also increase the risk of misoperation. In iOS, the user's action is consciously, the probability of misoperation is small, and the operating cost increases. Both of these methods have their own advantages and disadvantages, so in the design, it should be more realistic to define the sensing range and angle of the finger sliding.

Figure (1) iphone and NetEase cloud read the right sign hot zone

Figure (2) for NetEase Cloud reading and NetEase news article body page, can slide back through the left, slide into the comments page. By contrast with NetEase news appears more natural, the first use of NetEase cloud users will be more easily to the right sliding into the comments page to create confusion. The reason, NetEase News in the title bar on both sides of the "return" and "thread" page elements, like a fork in the two road signs, so that users on the road ahead to form psychological expectations. By contrast, NetEase cloud reading returns and comments are at the bottom of the page on the left, the guidance is not clear.

Figure (2) the page guide when gesture switch

2. Content Rendering Dimension Switching

The following figure, Cal and read, shows another way to apply gestures. The date of the detachable dimension of years, months, quarters, weeks, and so on, different use of the scene needs to switch time granularity, cal use gestures to move up and down conveniently switch weekly and calendar, using the left-right sliding switch date. Read the first screen, the default display of the article summary, on the slide can browse the article details, the use of gestures from top to bottom slide can be carried out for the article 4 dimensions of browsing: summary, details, previous article, next. In addition, the use of similar gestures or ink weather.

Figure (3) Cal weekly, calendar switching

Figure (4) Read the summary and details of the article switch

3. Hide the related function in the gesture operation of the content, enlarge the display space of the screen content.

Smart phones are limited in size, and the first screen space is more valuable to users. The app's charms will be compromised if the user is not given effective information at the very first time. However, the actual design is often many functions, if placed in the first screen, the page will be a function of the stack of buttons, occupy the effective information of the display space, if not put in the first screen, there may be a level too deep, so that users can not find the direction. The information-reading software Digg and the Magic TeeVee uses the way shown in figure (5) and figure (6). Digg allows you to praise, bookmark, and share the information module after it has been made with a right-slip gesture. TeeVee, left-slip is the most common delete operation, right-sliding to see more detailed repertoire update information and reminder settings. This direct operation of the natural human-computer interaction, not only in line with the user's perceptual habits, but also good to save screen space, creating an immersive reading experience, this and the Windows UI design concept is very much in agreement. As long as the novice user to do a good job, after the operation is very handy.

Figure (5) Digg hides content-related actions such as tagging after left-slip gestures

Fig. (6) TeeVee gesture operation

In addition to the iOS from the Mail, information, and small fresh wallpaper application of the light has a similar gesture application.

　　4. Extract important function, use gesture to exhale the operation

iOS's multiple finger touch is needless to say, but requires additional memory costs [3]. As mentioned above, in the use of the most commonly used gestures are sliding and clicks, the use of proper can also achieve stunning results. The most commonly used operation is to read and write when refreshing the wave Weibo. Sina Weibo will write microblogging operations in the upper left corner is very obvious position, but a single hand difficult to operate, and fuubo through the screen at the bottom of the home button and then the flow on the slide, you can trigger the operation of micro-bo, more concise and fast. Figure (7) is a comparison between Sina Weibo and Fuubo's interface function layout.

Figure (7) Sina Weibo and Fuubo's writing microblogging function exhaled way

In the cool play interface anywhere sliding to control playback progress, up and down sliding control volume, the fingers from the interface of many functions liberated.

Figure (8) The use of cool gestures

In addition, clear,any.do-do application uses the Drop-down gesture to directly pull out the most commonly used editing new entry function; Easy to double-click out voice; Read the text of the book directly add bookmarks; Readmill in the article reading when the direct adjustment of brightness; Solar uses a downward gesture to see the weather at different points in time. The common features of these applications are the use of simple on-and-click gestures to use the most commonly used and trigger-frequency functions to improve efficiency. But which function priority is higher, whether it is easy to misoperation, the consequences of misoperation is a matter that needs careful consideration. such as the cool down adjust the volume function is so high priority, in some cases will make the user misoperation and embarrassed, these are the need to use a combination of scenarios to carefully consider.