Small-screen visual area to create a successful user interface design scheme

Article Description: It is 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 has been screwed down, nothing can eat the appearance of it, is not it. Just talk about it. Designing for the touch, about this topic and related articles, seems to have been paved on the street recently, but I still do my bar. In the title added a nondescript "again" two words, to differentiate. There should be some overlap in content, but it's my own.

Mr. Josh Clark is 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 the user experience designers into the field of industrial design, and the design scheme is more to embody the principle of ergonomics, and it is no longer the only way 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, Robot (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, are visually competitive 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 foursqure applications in these two platforms:

[1] [2] [3] Next page