The ecological changes of the large-screen era, the thumb hotkey and the interface layout of the tablet phone

Introduction: Once Upon a while, countless large and small touch-screen devices as if the flood of the gates flooded the world. Faced with the sudden ecological changes, interface designers have no choice, only in the rapids struggling to learn to swim, so that they can not be swallowed by flood. This article gives you an idea of how to target your tablet phone's thumb hotkeys and interface layouts to help with this shift.
This article is selected from "Comprehend by analogy: touch screen interface design in multi-terminal era".

How people use a tablet phone

In the years since the iphone appeared, the size of the phone screen was basically 4 inches (diagonal), making it easy to operate with one hand. However, with the advent of large-screen mobile phones, nearly one-third of mobile web traffic has come from these devices by the year 2014. The big screen phone fills the gap between the traditional touchscreen phone and the tablet, and some large screen phones even reach the 7-inch giant, so they get a slightly lame nickname-a tablet phone.

650) this.width=650; "Src=" http://img.blog.csdn.net/20170511093400168?watermark/2/text/ ahr0cdovl2jsb2cuy3nkbi5uzxqvynjvywr2awv3mjawng==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/ Gravity/southeast "alt=" "Figure 1" "title=" "Figure 1" "style=" border:0px;vertical-align:middle; "/>
　　　　　　　　　　　　
Although this type of equipment has a huge physique, people will still use it as a mobile phone. However, unlike small-screen devices, in order to dance on such a large screen, users must switch between different holding modes more frequently, and need both hands to participate in most of the time. Tablet phone users in nearly 70% of the operation time will use two hands, of which the hand-held machine, the second index finger operation is the most common, accounting for about 35%. But even so, for tablet phones, the real dominant interaction is still the thumb: in 60% of the time, the user will touch the screen through the thumb, regardless of whether the machine is one-handed or both hands.
650) this.width=650; "Src=" http://img.blog.csdn.net/20170511093408635?watermark/2/text/ ahr0cdovl2jsb2cuy3nkbi5uzxqvynjvywr2awv3mjawng==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/ Gravity/southeast "alt=" Picture description "title=" Picture description "style=" border:0px;vertical-align:middle; "/>
Although in the case of a gesture, the hand-held machine, the other hand index finger operation occupies the highest proportion (35%), but the thumb operation of all the total number of ways to achieve the sum of 60%.

Thumb hot zone for tablet phone

Since thumb manipulation is also dominant, the importance of the thumb hot zone is comparable to that of a small-screen mobile phone. The difference is that tablet phone users are more frequently manipulated by both hands and thumbs. In this case, the thumb hot zone will also be divided into two parts, located at the left and right sides of the screen, which will also produce intersection, and the broad area above the screen is the thumb under normal circumstances difficult to reach. However, for designers, the priority is still the thumb hot zone of the smallest of the holding machine, that is, single handheld operation.
In fact, this is our first thumb design principle: Regardless of the size of the touch screen equipment, should give priority to the thumb hot zone of the smallest, the highest operating limitations of the holding machine, so as to ensure that people in any posture can interact with the interface normal. So, for a tablet phone, the first thing we should focus on is still a single handheld operation.
Here is a very interesting phenomenon: the same is a single handheld operation state, tablet phone on the thumb hot area is smaller than the average mobile phone. This is because, in the small screen specification range, regardless of the screen size changes, the thumb hot zone basically can maintain similar shape and position, and once the screen size breaks a certain threshold, people usually need to move the little finger from the lower edge of the screen to the back of the fuselage, so that it with the other three fingers to hold the phone to maintain stability, But this gesture will make the thumb's range of motion and the corresponding area of the heat area become smaller than usual.
650) this.width=650; "Src=" http://img.blog.csdn.net/20170511093421916?watermark/2/text/ ahr0cdovl2jsb2cuy3nkbi5uzxqvynjvywr2awv3mjawng==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/ Gravity/southeast "alt=" "Figure 3" "title=" "Figure 3" "style=" border:0px;vertical-align:middle; "/>
One-handed operation of the tablet phone, people must be in addition to the thumb of the four fingers on the back of the fuselage to maintain stability, which makes the thumb of the range of activity and the corresponding area of the hot area is smaller.

In a single-handed state, a large portion of the tablet phone's screen will be outside the thumb's control area. In the face of this situation, people in the practice also have countermeasures, such as directly grasp or hold the middle of the upper body position, so that the thumb of the control area to be a disguised expansion.
650) this.width=650; "Src=" http://img.blog.csdn.net/20170511093503263?watermark/2/text/ ahr0cdovl2jsb2cuy3nkbi5uzxqvynjvywr2awv3mjawng==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/ Gravity/southeast "alt=" "Figure 4" "title=" "Figure 4" "style=" border:0px;vertical-align:middle; "/>
High-level holding can expand the thumb hot zone upward, but at the same time will make more areas below the screen out of the thumb control.

The interface layout of a tablet phone

As the screen of the mobile phone increases, more interface elements are forced to move out of the thumb hot zone, and the layout design needs to be adjusted for this situation. Although tablet phone users are more accustomed to taking the initiative to adjust their holding mode according to different circumstances, as designers, we are obliged to reduce the extra cost. Regardless of the size of the touch screen equipment, priority should be given to the minimum thumb heat area, the highest operating limitations of the holding machine, so as to ensure that people in any state can interact with the interface normal. Therefore, for tablet phones, it is also important to place high-frequency functional elements in one-hand operation of the thumb hot zone. Perhaps you remember, with one hand operation, the thumb hot area of a tablet phone is actually smaller than that of a regular mobile phone, but the two are similar in shape and position, so some basic design principles are also interlinked.
On a tablet phone, you still need to place navigation and high-frequency function controls at the bottom of the screen. No matter how the user holds the machine, the top area of the tablet phone's screen is always relatively hard to reach. So, as in the small screen phone, we still have to emphasize the "content on, control down" principle, so that the high-frequency interaction elements as far as possible in the thumb hot zone, and avoid the content is obscured by the finger. However, the exception still comes from Android. Although according to the Android design code, we should put the app's navigation and function controls on top of the small screen phone to avoid conflict with the system navigation bar at the bottom, but on a large screen device, you can move some high-frequency controls out of the standard action bar and place them at the bottom of the screen. In fact, this split-action Bar mode was originally designed for small-screen devices, but is now proven to be more suitable for large-screen handsets.
650) this.width=650; "Src=" http://img.blog.csdn.net/20170511093511076?watermark/2/text/ ahr0cdovl2jsb2cuy3nkbi5uzxqvynjvywr2awv3mjawng==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/ Gravity/southeast "alt=" "Figure 5" "title=" "Figure 5" "style=" border:0px;vertical-align:middle; "/>
By default, Android's Action bar consolidates all navigation and feature options to the top of the interface (left), while the split action Bar puts some important features at the bottom of the screen, making it easier for the thumb to tap (right).
　　

However, the application is not the same as the ideal. In Android, the practice of stacking interactive elements at the bottom of the screen does increase the likelihood of mis-operation, which is an objective fact. However, given the huge screen size of a tablet phone and the difficulty of touching the top area of the screen in one hand, it is reasonable to move a portion of the control to the bottom, even if it takes some risk, at least to allow people to easily click when one hand is operating. As we mentioned in the previous article, the complex environmental characteristics of the system platform require designers to constantly make various tradeoffs and compromises. In the indecision, remember that "the two evils of the right to take its light" principle-on the one hand, the possibility of misoperation increased, on the other hand is unable to operate, in this situation the former is obviously more advantageous.
In addition, the suspension button is also a practical design mode. These buttons are usually located in the lower right corner of the interface and hover over the content. In this way, the most important features of the app global or current interface can be provided to the user, such as posting photos or checking in, sending messages, and so on. It is also a good interaction mode to deform the hover button to a horizontal toolbar or a radiant menu after clicking.

650) this.width=650; "Src=" http://img.blog.csdn.net/20170511093518589?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5 Uzxqvynjvywr2awv3mjawng==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/southeast "alt=" "Figure 6" "Title=" "Figure 6" "style=" border:0px;vertical-align:middle; "/> 
similar to the split Action Bar mode, located at the bottom of the screen, The suspension button, which may lead to misoperation, also reflects the original intent of the compromise. However, the small size of a single button does not have much effect as stacking a layer of toolbars on the system navigation bar. In the Android UI system, this hover button is called "FAB" (floating Action button). If the reader is interested, read the Android Design specification (http://bkaprt.com/dft/01-16/) for a more in-depth understanding.

650) this.width=650; "Src=" Http://img.blog.csdn.net/20170511093529292?watermark/2/text/aHR0cDovL2Jsb2cuY 3nkbi5uzxqvynjvywr2awv3mjawng==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/southeast "alt = "" Figure 7 "" title= "" Figure 7 "" style= "border:0px;vertical-align:middle;"/> the
can trigger more functions from the hover button at the bottom of the screen. Also avoid a wide range of conflicts with Android's system navigation bar.
 
Alternatively, you can try to place the control at the top, but make it responsive to a form of secondary interaction that acts on the bottom of the screen. For example, the tab navigation can be placed above the content, but the toggle can be controlled by the left and right swipe gestures in the content area, which is also a disguised thumb-friendly mode.

650) this.width=650; "Src=" http://img.blog.csdn.net/20170511093537561?watermark/2/text/ ahr0cdovl2jsb2cuy3nkbi5uzxqvynjvywr2awv3mjawng==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/ Gravity/southeast "alt=" "Figure 8" "title=" "Figure 8" "style=" border:0px;vertical-align:middle; "/>
Android's "Contacts" is a typical example. The user can click the tab itself directly, or you can toggle tab through the left and right swipe actions.

This pattern usually applies to tab navigation. On a small screen phone, users can easily click the tab in the top action bar, while on a tablet phone, sliding right and left in the content area is obviously the most convenient way to switch. In fact, the popular drop-down refresh mode is the same, and the user does not have to interact with a control at the far end of the interface, as long as the gesture is done directly on the content.
For mobile versions of Web pages, it is still recommended to use the Anchor link navigation mode described earlier in this article. A series of problems that we encounter on a small screen device, such as CSS compatibility limitations or conflicting page elements with the layout of the browser itself, still exist on the tablet phone. Admittedly, placing anchor links on top is not a thumbs-down approach, but in a comprehensive context, this factor is less important in a browser environment. I will always observe this phenomenon in user research: On mobile devices, the Web page, unless the user in the main content area can not find the information they need, otherwise they would hardly think of the main navigation. From this perspective, it is reasonable to place the navigation menu below the main content so that users can use it when they need it most, and not to suffer the thumb.
Avoid finger cross-screen operation. Most people don't have enough thumb lengths to tap across the screen on a tablet phone. In the case of a single handheld, needless to say, diagonal, even the right thumb to click on the left side of the screen element is also very difficult. Therefore, try to avoid placing important interaction elements close to the left and right sides of the edge. In terms of size, the width of the element should be as wide as possible to reach more than one-third of the screen width, preferably close to the screen width, thus minimizing the cost of thumb operation.
Do not enlarge the trigger area of the gesture operation as the screen grows. For example, on a flat-screen mobile phone, do not zoom in on the distance required by the slider to allow the user to use gestures across the entire screen to achieve the trigger effect. People use a giant screen phone that doesn't mean they have giant hands, and gestures should be designed around the finger, not around the screen.
Overall movement. Most of the elements in the interface are static, and we need to reach out for ourselves. We're going to click on the button, and the button will never move to our fingertips. But that's not exactly what happened. Samsung has created a unique one-handed operation for its Android tablet phone (1.26), and the entire interface is scaled down to the size of a typical small screen phone, so that almost all of the interactive elements can be found in the thumb hot zone. In fact, this model is equivalent to temporarily shrinking the big-screen phone. Although the operation of a lot of convenience, but often such use is very awkward-since the big screen can not be fully utilized, why should buy such equipment?
iOS uses a design pattern called "touch-up". Touch the "Home" button twice, the interface will move down the whole, so that the top element into the thumb hot zone. When the user finishes the next action, the interface automatically moves up to the initial position. This mode makes it easier for the elements at the top of the interface to be manipulated by the thumb, which in effect equates to the user moving their own holder up. Apple's approach to implementation has a significant advantage over Samsung-shifting the interface instead of scaling to avoid changes in the size or layout of the interaction elements themselves.

650) this.width=650; "Src=" http://img.blog.csdn.net/20170511093546527?watermark/2/text/ ahr0cdovl2jsb2cuy3nkbi5uzxqvynjvywr2awv3mjawng==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/ Gravity/southeast "alt=" "Figure • 9" "title=" "Figure • 9" "style=" border:0px;vertical-align:middle; "/>
Samsung's one-handed mode reduces the overall interface to the size of the small-screen handset (left), while Apple's "reach" moves the interface down to the thumb's control (right).

In addition to this system-level solution offered by Apple and Samsung, we can use similar ideas in our own products, such as the ability to host content in the form of a sliding panel. Unlike the way the system provides up and down mobile interfaces, a more practical approach in the app or Web page is to place a "drawer handle" at the edge of the interface, such as a button or tab, and then expand the entire panel.  

650) this.width=650; "Src=" http://img.blog.csdn.net/20170511093554261?watermark/2/text/aHR0 cdovl2jsb2cuy3nkbi5uzxqvynjvywr2awv3mjawng==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/ Southeast "alt=" "Figure 10" "title=" "Figure 10" "style=" border:0px;vertical-align:middle; "/>
Time place a" drawer handle "on the side of its mobile page, point A complete recent news panel will be launched after the click.
 
The interaction elements placed at the left and right edges of the screen are most likely to be outside the thumb hot zone of the tablet phone, but are easier to manipulate, no matter how it is placed at the top. You can also add a cross-slide gesture to this mode, as long as it does not clash with the overall horizontal slide back effect. On the whole, the mode of the function control on the left and right edge of the screen is more suitable for both hands and thumbs, so it is more common in the tablet interface.

This article is selected from the "comprehend by analogy: touch screen interface design in multi-terminal era", this link can be viewed at the blog point of view of the book.
650) this.width=650; "Src=" http://img.blog.csdn.net/20170511093616308?watermark/2/text/ ahr0cdovl2jsb2cuy3nkbi5uzxqvynjvywr2awv3mjawng==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/ Gravity/southeast "alt=" Picture description "title=" Picture description "style=" border:0px;vertical-align:middle; "/>
Want to get more good articles in time, you can search "blog point of View" or scan the QR code below and follow.
650) this.width=650; "src=" http://img.blog.csdn.net/20161128135240324 "alt=" Picture description "title=" Picture description "style=" border:0px; Vertical-align:middle; "/>

The ecological changes of the large-screen era, the thumb hotkey and the interface layout of the tablet phone