Touch Interactive Design Quick start of mobile phone

How do you interact with your thumb and forefinger when you're still in the desktop? Interactive designer Josh Clark explains how designers should think about problems and how to create "finger-friendly" interfaces in the interactive design of touch screens at the mobile end.

The great mobile-end interface is designed to do more than just put visual elements into a small screen, but also to consider interaction issues. In the context of continuous improvement of the touch screen and increasing market share, more and more users are using their fingers to interact with each other, and some ergonomics of the fingers should also be considered as design considerations. New interactive form, need designer no longer limited to the visual and information level direction of the design, to take a long view, a lot of industrial design for reference to human-computer interaction. Touch screen is not only visual interaction, but also contains a lot of ergonomics factors: Users in the operation of the fingers, how does it feel?

　The rule of thumb

One of the questions about the design of the touchscreen is that it is the finger, which part of the screen is usually operated on.

For example, a single handheld handshake, unless your finger days grow particularly long, you will normally use your thumb to click. Therefore, for mobile phones, for the touch of interactive design, the main target is the thumb.

Because of the thumb, humans have the precise grasp ability, thus in the evolution to stand out, become intelligent species, but in mobile phone operation, the control range of the thumb is limited, lack of flexibility. Of course, if you do your best, your thumb will still be able to slide through the entire screen. But on a big-screen phone, the thumb's controllable range is less than one-third of the screen--mostly on the bottom of the screen, opposite the thumb.

The main operating target is placed in the hot area of the thumb. For example, when holding a handshake with the right hand, the hot area of the thumb is shown in the lower-left corner, showing an arc.

That's why toolbars and navigation bars are generally on the bottom edge of the phone's interface-which is exactly the opposite of what we do in the desktop interface. This is precisely because of the limited control of the thumb, the interface design on the touch screen is contrary to traditional practice, the navigation bar and the main operating target is put to the bottom.

For the bottom of the screen, the thermal area of the thumb is designed to solve a lot of user problems. This is more important than the problem of "left-handed" users. Because in this society, right-handed children still occupy the majority. And almost every user in the use of mobile phones, have a "single hand grip, thumb operation" experience. (On the bus, one hand good railing, the other hands to operate the mobile phone)

The thumb rule at the bottom of the screen, whatever the hand does, applies. At the same time, it also gives designers some hints: how to organize the visual hierarchy of operational objectives to give users the most convenient and comfortable experience. For example, according to the iOS design practice, generally put the edit button in the upper right corner, that is obvious, but also to avoid accidental touch caused by sudden changes in the interface.

suppressing controls on the bottom of the screen is not just about the comfort of the thumb, it's about a problem: if you put it on top and use your finger to manipulate it, it will block the view of the reading. If the control is at the bottom, no matter how the hand moves, at least not blocking the main content, giving a clear perspective. The screen at the top of the presentation, the control button is below. Do you feel a familiar feeling? Yes, many of the classic products in industrial design are also laid out: ipods, calculators, vintage phones, and a lot of countless products.

　　Me, the robot.

The design of the top/bottom is very simple and practical. But not all of the products that are designed to benefit from it: The Android system is used to cram a lot of control elements underneath the screen. These buttons, close to the edge of the screen, are crowded together with a physical button that makes the fingers very inconvenient to operate. Android in order to put the control to the bottom of the screen, do not hesitate to put the search bar above (the following image). This is the main screen layout of Android, very wrong. (Here want to explain is: in fact, the design law is still valid, the error is unreasonable to follow the design law, piling up caused the space layout problem)

(To solve the problem of limited space) be sure to avoid piling controls in the touch interface, especially the bottom area. Unfortunately, this means Android app has to put controls on top of the screen to avoid crowding problems. But also not ideal: 1. Outside the hot area of the thumb. 2. The operation is easy to block sight. But it is always better than the original layout, the original layout, for the finger fat people, is really a nightmare.

For Android, app navigation bars and controls should be on top. This is in contrast to the iphone's practice, because the iphone has only one home button, and it's not like Android, which has 3 or so physical keystrokes, plus controls at the bottom of the screen, which can be difficult to manipulate. Foursquare on the iphone (right), and the Foursquare on Android (left) is not accidental.

In a way, this kind of counter stack element (to prevent the operation error, advocate to avoid the bottom stack elements) seems to be "content on, control in the next" element of the opposition. Although Android effectively avoids the element piling up and reduces the error operation, this design pattern leads to the previously mentioned problem: During the operation, the hand will block the line of sight.

Web applications: Applying in Applications

Similarly, in mobile-end Internet, the principle of anti-piling brings inconvenience to internet browsing. Web pages and Web applications, generally rely on the browser to achieve browsing. The browser has its own buttons and controls, and the Web page/Web application interface also has buttons and controls. If you slide the screen and slide the navigation bar from the Web page to the bottom of the screen, you will find that there is also a browser toolbar nearby that causes the operation to be extremely prone to errors (see figure below). That means, to try to avoid the "page navigation bar sliding to the bottom of the screen," the phenomenon, which requires us to put the site's toolbar on the top (part of the guidelines in the understatement of the note: the use of CSS code position:fixed, you can achieve fixed, but no one knows, Many mobile browsers do not support this feature. )

The problem with Android is different. Android's Mobile browser, which is chrome, puts the navigation bar to the top and still doesn't solve its problem, the problem is the overall page. Because the Chorme control eats up a lot of space, the user experience in the browsing process is very not smooth, there is a feeling of squeezing toothpaste, plus the top navigation bar, really suffocating (see the image of the early chrome).

Therefore, in the "Move First", Luke Wroblewski wrote "When the navigation options no longer occupy the space, is the beginning of the Man-machine conversation" time is money, download the flow, so the message must be quickly intuitive (avoid because of too many controls, occupy a lot of space, resulting in the user reading speed down )

Regardless of these problems, the trend remains: the Web browsing experience is content-oriented, and the main navigation bar is limited to the bottom of the screen. Wroblewski solves this series of problems through an effective design pattern, and you can see in the Ad Age mobile website that all navigation elements are stuffed into a menu button, and the menu button is at the top right of the screen. Just tap this button and the navigation options will pop up in full screen. You can jump to the bottom of the page to navigate simply by connecting the anchor.

WRoblewski wrote that there are several advantages to this side:

"This design pattern, with the least amount of navigation elements, occupy the smallest amount of space, you can give users navigation, so that users choose the required information to browse, and less information level, just need a simple anchor cable to work." No need to buy expensive javascrip, no stacking level, no need to create a separate navigation page to be able to achieve-just the anchor, can help users jump to the bottom of the page. It's kind of like HTML 0. "

"Content first, under control" seems to be a simple rule, but as you can see, the situation is different and we should make appropriate adjustments according to this rule. Then on-demand design, so that the design can not only follow this rule to ensure that the user's unobstructed browsing (otherwise the hand will still block the view), but also according to the limited space for layout to ensure that the page is not crowded, not complex. If the two cannot be beautiful, they can only find a halfway way.

In fact, the mobile end of the touch screen design, the problem mentioned in this article, in layman's terms, is two:

1. The space is limited, the element is too crowded can cause the mistake operation.

2. If "Control" at the top, and "content" at the bottom, with the hands of the time, will block the line of sight, not convenient to read.

Summarize the design patterns of different platforms:

1.iPhone, put the app control at the bottom of the screen (content to top)

In 2.Android, app controls are placed at the top of the screen (space is limited)

3. For Web apps, global navigation is placed at the bottom of the entire page (not at the bottom of the screen).

But these guidelines apply only to mobile phones; how do we design interactively on a larger touchscreen? The rules of the game on the ipad change again, we'll talk about it next time.