Designed for touch-screen mobile devices

The impression that the recent spring of these years has always brought people to feel really uncomfortable climate experience, rain and cold wind is like a catalyst, so that life and work of people and things also become unusually messy, as if a group was chewed to completely lose the taste of betel nut. November Rain Prelude The piano melody of how many can let the heart some Enron, once took off the headset is a want to put his head down to eat the world.

But once the head is screwed down, nothing can eat it, right? Say something. Designing for touch, about this topic and related articles, seems to have paved the street recently, but I still do mine. In the title added a nondescript "again" two words, to differentiate. There should be some overlap in content, but it's my own.

Miss Josh Clark has been quite active recently. In this article, he will show us some of the issues that need to be noted in the user interface design for touch-screen mobile devices, and compare and analyze the friendliness of the iphone, ipad and Android-related devices in the touch-and-interact experience. Welcome, walk.

As for the operating system and application of mobile devices, an important measure to judge the excellence of the user interface design is to see its friendliness to the finger touch operation. Compared to desktop computing devices and related software environments, the interactive characteristics of touch-screen mobile devices bring user experience designers into the field of industrial design, and the design scheme is more to embody the principle of ergonomics than to plan the visual presentation of content and function.

Thumb hot zone and bottom principle

First, we need to understand how people usually dock their fingers on the device. For mobile phones, the majority of young people use their thumbs for touch operations, so touch-screen mobile phone interface Interaction program is basically around the thumb to build.

The thumb is incredible, it's said to be one of the important signs that separates us from animals ... The function of the thumb is quite elastic, but it is also subject to certain limitations. For a regular touchscreen phone, we can use the thumb to sweep through most areas of the screen, but only about one-third of them are really effective touch areas. So in the design, try to put the most important interface interaction elements in this range. In the case of the right hand holder, the effective touch area is located at the bottom left of the screen:

This is why some important toolbars or navigation structures in mobile systems or applications are usually placed at the bottom of the interface. In contrast, in a traditional desktop system environment, interface elements such as navigation menus are usually placed at the top of the interface, both local software and Web pages. For our limited scope of thumb, this traditional layout is clearly not a good fit in the user interface of mobile devices.

In contrast, the lower-left or lower-right corner of the problem is slightly minor. We often change the way we do it in practice, and think about it, for example, for right-handed people who are writing or need to use the mouse to manipulate their desktop devices, usually turn their phones on to the left hand, while left-handed men are the opposite. But for most of the time, the number of users using the right hand holder is still relatively high.

The bottom principle can help us better organize the touch elements in the interface. The most commonly used function keys should be placed in the hotspot area where the thumb is most easily touched, while other relatively minor or sensitive control elements should avoid the area as far as possible. With the Edit button in iOS, it is usually placed at the top right of the interface, which ensures that it is visible and not easily touched, so as not to be accidentally manipulated.

In addition, the bottom principle is not only related to the scope of the thumb. When we use the thumb to operate on the screen, the contents of the lower part of the finger will be blocked, so that the negative effect can be minimized only if the interaction control element is placed below the content area. In fact, this is a broad applicability of the design principle, we can in many other types of equipment to see the embodiment of this principle, such as ipods, calculators, with the physical keyboard of ordinary mobile phones, electronic scales, and so on, all content is on, control in the next.

me, Android

In Android devices, the bottom principle is a bit more complicated by the hard buttons underneath the body, especially before the ice cream sandwich. These hardware-level control buttons occupy the bottom area and, to some extent, visually compete with the bottom interaction elements in the application. The hardware and software toolbars stacked together in each other can cause users to be confused in the process of fast operation, increase the chance of misoperation; The conflict between the hardware and software buttons that coexist in the thumb hot zone on two dimensions is almost inevitable.

Cured hard buttons cannot be removed, the most straightforward way to avoid conflict between control elements is to let the virtual and Entity toolbars visually separate from each other, which means that the relevant control elements and navigation structures in the Android application need to be placed at the top of the user interface. This is not the most ideal solution, because the top of the interface is far from the thumb hot zone, you want to touch one of the keys, almost half of the palm will be covered on the screen. However, this solution is still more advantageous than the way the hardware toolbar is stacked.

This approach to placing important controls and navigation elements on top is the opposite of the way iOS devices are. Although the iphone's Home button is also at the bottom of the fuselage, its presentation is very different from the hard buttons of the Android device, and it does not visually interfere with the relevant operating elements at the bottom of the application interface. The screenshot below shows a comparison of the interface design scenarios for Foursquare applications in these two platforms:

Mobile version of the site

There is no doubt that similar problems can arise when we browse Web pages in a mobile device. We can understand the Web as an application, because it needs to be rendered out of the browser's application. Many of the browsers in the mobile platform put some of the usual control elements on the bottom toolbar, which in some ways is likely to create visual conflicts with the interactive elements in the page. Therefore, for mobile version of the site, one of the most basic design principle is not to the important control elements or navigation structure through the CSS position:fixed positioning method Fixed in the bottom of the user interface.

However, unlike the solutions in Android apps, it is also problematic for Web pages to place control elements and navigation structures at the top of the interface. After all, the vast majority of the mainstream touchscreen phones still belong to small screen devices, the traditional Web page's horizontal global navigation structure usually consists of a number of navigation items containing one or two words, which is too crowded for the mobile phone screen, we have to find another way to solve the problem of navigation bar layout.

"In many mobile versions of the site, users will first see a large pile of navigation structures, not content," said Luke Wroblewski in Mobile Book one. In the context of mobile applications, time is always valuable, traffic is not good to spend the wood there, you have to do your best to let users in the first screen to get the information they want to get. ”

That's really what it is. Mobile version of the site, in terms of layout, should make the main content as much as possible occupy the space in the first screen, and the navigation structure should be in some form of abbreviations in a relatively minor position. Wroblewski An example to advocate this design pattern, namely Ad Age mobile version site. In the first screen, in addition to the site title and the latest content list, the menu button in the upper right corner is the only interactive control element in the interface. When the user clicks the button, the navigation list appears on the screen. The entire navigation list looks like another interface, but it's actually placed at the bottom of the page, and the menu button is just an anchor point.

Wroblewski continued: "This design uses the minimized navigation mechanism (only one button link) in the first screen, and users can focus on reading the latest article in each category. When they browse to the bottom of the current page, they can also explore more content directly from the navigation list. Best of all, the menu button at the top is just an anchor point, and the entire navigation mechanism does not involve any elements that can complicate the interaction process, such as JavaScript, overlay, or standalone navigation pages. ”

The "content on, control down" rule looks pretty simple, but when it comes to the actual context, such as the user interface features of the operating system or browser, the designers need to take into account the situation becomes more complicated. As of now, we can generalize the topics discussed to several design principles:

for client applications in the iphone, try to put important interactive objects and navigation structures at the bottom of the interface. For client applications in Android, try to put important interactive objects and navigation structures at the top of the interface. For mobile version of the Site page, try to put the navigation structure at the bottom of the page (note, not the bottom of the current user interface)

These design principles are limited to the context of the mobile phone, and the rules are going to change for screen-size touchscreen devices such as the ipad.

Tablet PC

The relevant rules for the thumb hot zone also apply to tablets, but the location of the hot zone varies with the way the machine is held. The ipad's approach depends largely on the attitude of the whole person. When we are standing, we need a hand-holding operation; At the table, we tend to hold the ipad from the side like a bracket, and the other hand is used to poke a little bit; when sitting on a chair, we usually put it on our lap, while lying or half lying, it will be in the abdomen, A prop, an operation.

Each of these modes corresponds to a particular hot zone rule, and the distance between the device and our body is different in each gesture. For example, when standing, we will be closer to the ipad, while lying down is relatively distant.

Although it may sound complicated, there are some common features in the interaction in these context scenarios. First, the hand that is used to hold the machine usually holds the upper part of the fuselage, because it is the most leveraged principle; Accordingly, the Thumb hot zone will basically be in the top One-third part of the screen, leaning to the upper left corner or upper right corner. Second, the ipad's screen is relatively large, and it's hard for users to see almost everything in the interface with a glance like the iphone. As with normal print or Web pages, users will usually focus on the top of the ipad interface, so our design needs to be consistent with the user's approach. In other words, in the process of manipulating the ipad, both eyes and fingers, their main activity area is the top half of the device. The lower part of the fuselage will not only be ignored by the user in many cases, but also in certain circumstances it is really invisible, for example, when we lie in bed, this part is likely to be blocked by clothing or quilt, it is sad to urge.

So, unlike the mobile interface, the main interactive control objects should be placed in the upper-left or upper-right corner of the ipad and similar tablet devices so that the thumb can be easily touched. Instapaper and Twitter are doing well:

Note that you should try to avoid placing the interaction elements in the middle of the screen, otherwise the palm will cover a large portion of the content when the user is operating. In fact, any interaction element that directly controls the underlying content should not be placed in this position. In the daily ipad app, there is a slider above the content that users can drag to toggle the article page back and forth. The intention is good, but when you perform this operation you will find that your palm will block the content of the article, and the fingers will be blocking the thumbnail, experience a weak burst. This design is enough to be used as a counter case on the ground of negligence alone.

another bottom principle

We can learn from the daily blunder that, for the ipad application, in certain situations, the control element still avoids the top subtlety. You can put them at the bottom or even the side, as long as the control elements themselves and the interaction they need do not affect the readability of the content. Let's see how Sydney Morning Herald's ipad app is done. As the following illustration shows, there is a page number indicator at the bottom of the application's interface, and when the user drags it, the title of the article in the corresponding page appears as a list on the top of the indicator, allowing the user to get a general idea of what is on the other page without paging. Although the article title list will block the contents of the page, but in this interactive scenario, the user is most concerned about the title of the article in the list, and is no longer the original main content area.

For the problem of whether or not the control element should be placed at the top or bottom in different situations, we might as well have a weak summary here:

for interactive elements such as "menu", "return", "close", and so on that interact with the interface navigation, as well as buttons for sharing, collecting, editing, and deleting functions, they can usually be placed at the top of the interface. The bottom of the interface is the best location for the control elements that are used to browse or preview the content.

So, we can see in many books and magazine applications that the page thumbnail list is usually placed at the bottom of the interface. (Refer to the Martha Stewart Living Magazine and the pulse design for the top ten user experience design guidelines for ipad apps) Suppose you're designing a map-related application with a landmark tray in the interface, Users can drag landmarks from this pallet and "press" somewhere on the map. In this example, the pallet should also be placed at the bottom of the interface to ensure that when the user pulls the landmark from the tray, the map is not blocked by the hand.

Interactive Object Dimensions

If the placement of the interactive objects depends on the platform type and the mode of the machine, their size is largely determined by the size of the finger. We must design these interaction elements sufficiently large to ensure that users can accurately identify and strike.

But how big is enough? You might as well raise your hands and look at your fingertips. Many system platform design specifications are described in this regard, but I personally think that Apple is still doing the best: in theory, the minimum size of the hit elements should be 44 pixels (about 1/4 inches or 7 mm) square.

The comfortable minimum size of tappable UI elements is-X-points.

Note that the conversion between point and pixel differs between the retina screen and the normal screen.

In the context of mobile applications, a large enough button is not only easy to operate, but also allows the user to maintain the necessary attention and avoid being disturbed by the surrounding environment.

A minimum size of 44 pixels square is just an ideal condition, in practice, a reasonable compromise is usually required. Even many native controls in the iphone user interface avoid this rule. The most typical example is the system's own keyboard, where the height of each key is 44 pixels, but the width is only 30 pixels, and in the horizontal screen, its width is 44 pixels, and the height becomes 38 pixels. But this is also Apple's frustration, because how all have to get the full QWERTY keyboard into the interface, so must be in the design of a choice.

Referring to Apple's approach, when space limitations make it really impossible to achieve a 44-pixel square design, we should try to ensure that its 44x30 minimum specification.

Dimensions and spatial layout of

elements

In the last century, many people were wasted by Casio's calculator watches. The problem is not just that the tiny buttons will make the person who wears it look two, and the most unreliable is that the buttons are too tightly arranged. You want to press 5, but you'll usually press 8 or 2, so it's better to call it a lucky turntable than a calculator. The two most direct reasons for this result are the small size buttons and the space-spaced layout.

When it comes to interface design for small screen devices, such challenges are really what we often need to face, and the root cause of the problem is usually not the product requirement itself. Whether in the heyday of the calculator watch or today, we often hear the product demand side repeatedly said: "Let's move these things closer ... I just want to add another button to the toolbar ... Add Your Sister!

If we have to arrange the interaction elements very tightly in the design, we should at least make them as big as possible. Think about the iphone's native dial-up keyboard interface or Skype apps. The spacing between the dialing keys in the interface is usually small, even without spacing, and the size of each key is almost as large as it can effectively reduce the chance of misoperation.

In fact, both the iphone's native dial-up interface and the similar interface in Skype, shown above, put some control buttons above the bottom navigation toolbar. This is not really a good thing to measure in terms of some of the principles we mentioned in the previous article, but in these specific situations, the large size of the control buttons can effectively reduce the visual conflict between them and the bottom navigation toolbar.

Therefore, in the limited small screen visual area to create a successful user interface design, we must combine the actual product requirements, in the interactive elements of the size and space layout to do a full balance and judgment.

original site to compile the article. If you want to reprint, please specify: This article from the is for Web English original: Http://www.netmagazine.com/features/designing-touc ... Translator Information: C7210-web design and front-end players, is now working in the Mass Comment Network product Department user Experience Design Group (UED) product design