Design of touch screen mobile devices

It is impressive that the spring of the past few years has always brought about a really awkward climate experience. rain and cold winds are like catalysts, which make people and things in life and work messy, it seems that a group of betel nuts are chewed to completely lose taste. The piano melody in November Rain's Prelude can make your mind feel safe. Once you have your earphones removed, it is a world that you want to screw your head down and eat it.

But once the head is screwed down, nothing can be eaten, isn't it. Let's get started. Designing for touch, about this topic and related articles, seems to have been laid on the street recently, but I still do it for me. Add the word "again" to the title to indicate distinction. There should be some intersection of content, but this is my own.

 

Mr. Josh Clark has been very active recently. In this article, he will introduce some precautions for the user interface design of touch-screen mobile devices, in addition, the friendliness of iPhone, iPad, and Android devices in touch interaction experience is compared and analyzed. Welcome.

 

For the operating systems and applications of mobile devices, an important measure of judging whether the user interface design scheme is excellent is that it is friendly to finger touch operations. Compared with desktop computing devices and related software environments, the interactive features of touch-screen mobile devices bring almost user experience designers into the field of industrial design; the design scheme is more about the human-machine engineering principle, rather than the visual presentation method that is only used to plan content and functions. Something about the internet

Principle of thumb hot zone and bottom

 

First, we need to know how people usually dock their fingers on the device. For mobile phones, most young people use the thumb to perform touch operations. Therefore, the interface interaction solution of touch-screen mobile phones is basically built around the thumb. Yixieshi

The thumb is incredible. It is said that it is one of the important signs of separating us from animals... the functionality of the thumb is quite flexible and limited. For conventional touch-screen phones, we can use the thumb to scan most of the areas on the screen, but only about 1/3 of them are truly valid touch areas. Therefore, in the design process, we should try to place the most important interface interaction elements in this scope. The valid touch area is located at the bottom left of the screen when the right-side host is located:

This is also why some important toolbar or navigation structures in mobile systems or applications are usually placed at the bottom of the interface. On the contrary, in traditional desktop device system environments, navigation menus and other interface elements are usually placed on the top of the interface, both local software and web pages. For our limited scope of thumb, this traditional layout method obviously cannot be well applied in the user interface of mobile devices. Something about the internet

In contrast, the problem in the lower left or lower right corner is slightly secondary. In practice, we often change the Left and Right hosts mode. Let's see if this is the case. For example, for the right hosts, when they are writing or need to use the mouse to operate the desktop device at the same time, the mobile phone is usually handed over to the left hand, while the left-handed mobile phone is opposite. However, in most of the time, there are still a relatively large number of users using the right-side host.

The bottom principle can help us better organize the touch elements in the interface. The most common function buttons should be placed in the hotspot area that is most easily touched by the thumb, while other relatively secondary or sensitive control elements should try to avoid this area. In iOS, the "edit" button is usually placed in the upper-right corner of the interface, which ensures that it is clearly visible without being easily touched to avoid misoperation. Yixieshi

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 content below the finger will be blocked; only the interaction control element is placed below the content area, to minimize this negative effect. In fact, this is a design principle with a wide range of applicability. We can see this concept in many other types of devices, such as iPod, calculator, ordinary mobile phones with physical keyboards, and electronic scales, none is not the content above, control it down.

Me, robot (Android)

 

On Android devices, the bottom principle is a little complicated by the solid buttons at the bottom of the body, especially on the platform before ice cream sandwiches. These hardware-level control buttons occupy the bottom area and, to some extent, compete visually with the interaction elements at the bottom of the application. The software and hardware toolbar that are stacked with each other can confuse users in the fast operation process and increase the chance of misoperation. For the software and hardware buttons that coexist in the thumb hot zone in two dimensions, conflicts between them are almost inevitable.

 

Fixed hard buttons cannot be removed. The most direct way to avoid conflicts between control elements is to visually separate virtual and entity tool bars, this means that the related control elements and navigation structure of the Android Application must be placed at the top of the user interface. This is naturally not the ideal solution, because the top of the interface is far away from the thumb hot zone. When you need to touch a button, almost half of your palm will be covered on the screen. However, compared with the way that the hardware toolbar is stacked together, this solution is still more advantageous than the disadvantage.

This method of placing important control and navigation elements on the top is opposite to that of iOS devices. Although the iPhone's Home button is also at the bottom of the body, its expression is very different from that of the Android device's hard button, it does not bring visual interference to the related operation elements at the bottom of the application interface. The following shows the interface design comparison of the Foursqure application on these two platforms:

Mobile websiteYixieshi

There is no doubt that similar problems may occur when we browse website pages on mobile devices. We can understand the web page as an application, because it needs to be output and presented through the browser. Many browsers on the mobile platform place some common control elements in the bottom toolbar, which may cause visual conflicts with interaction elements on the page to some extent. Therefore, for mobile websites, the most basic design principle is not to pin important control elements or navigation structures at the bottom of the user interface through CSS position: fixed positioning.

 

However, unlike the solutions in Android applications, placing control elements and navigation structures on the top of the page also poses a major problem for Web pages. After all, most mainstream touch-screen mobile phones are still small-screen devices, while the horizontal global navigation structure of traditional web pages is usually composed of navigation items containing one or two words, this is too crowded for the mobile phone screen. We must try another way to solve the navigation bar layout problem.

Luke Wroblewski mentioned in Mobile First: "In many Mobile websites, users First see a large navigation structure, not content. In the context of mobile applications, time is always precious. If traffic is poor, money is required, you must do your best to get the most desired information on the first screen."

 

This is indeed the case. In terms of layout, the mobile version of the site should occupy as much space as possible in the first screen, while the navigation structure should appear in a relatively secondary position in a scaling form. Wroblewski uses an example to advocate this design model, that is, the mobile version site of the Ad Age. In the first screen, in addition to the website title and the latest content list, the menu button in the upper right corner is the only interactive control element in the interface. When you click this button, the navigation list will appear on the screen. It seems that the entire navigation list is another interface, but it is actually placed at the bottom of the page, and the menu button is just an anchor.

Wroblewski continued: "This design uses a minimal navigation mechanism (with only one button link) on the first screen. You can concentrate on reading the latest articles in each category. When they browse to the bottom of the current page, they can also explore more content directly through the navigation list. The best thing is that the top menu button is just an anchor. The entire navigation mechanism does not involve any elements that may complicate the interaction process, such as JavaScript, overwriting, or independent navigation pages ."

 

The rule "content above, under control" looks simple, but once it involves the actual context environment, such as the user interface features of the operating system or browser, the situations that designers need to consider become complicated. So far, we can summarize the topics we have discussed into several design principles:

 

● For client applications on the iPhone, try to place important interaction objects and navigation structures at the bottom of the interface.

● For Android client applications, place important interaction objects and navigation structures at the top of the interface as much as possible.

 

● For mobile website pages, try to place 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. for touch-screen devices with Large Screen specifications, such as iPad, the rules will change.

 

Tablet

 

The rules for thumb hot zone are also applicable to tablet computers. However, the location of the hot zone varies depending on the host holding mode. The method of iPad depends largely on the attitude of the whole person. When we are standing, we need a one-handed camera. When sitting at the table, we often use a hand to hold the iPad from the side like a bracket, the other hand is used to stamp the point. When sitting in a chair, we usually place it on our lap for operation. When lying down or half-lying, it will also be placed in the abdomen, one hand to support, one hand operation. Yixieshi

Each mode almost corresponds to a specific heat zone rule, and the distance between the device and our body varies in each posture. For example, when we stand, we will close the iPad side, and when we lie down, we will be far away.

 

Although it sounds complicated, interaction in these context scenarios still has some common features. First, the hand used to hold the machine usually holds the upper half of the body, because it best fits the lever principle. Correspondingly, the thumb Heat Zone is usually located in the first 1/3 of the screen, tends to the upper left or upper right corner. Second, the screen of the iPad is relatively large, and it is difficult for users to see almost all the content on the interface at a glance as if they were using the iPhone. Just like ordinary print or Web pages, users usually focus on the top area of the iPad interface first, therefore, our design scheme should also conform to user habits in this regard. In other words, during iPad operations, the main active areas of the eyes and fingers are the top half of the device. The lower half of the body is not only invisible to users, but also invisible in some specific environments. For example, when we are lying in bed, this part is likely to be blocked by clothing or quilt, it is really sad.

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

 

It should be noted that you should try to avoid placing interaction elements in the middle of the top of the screen. Otherwise, a large part of the content will be hidden in the palm of your hand during operations. In fact, no interaction element that directly controls the content below should be placed in this position. In The Daily iPad app, there is a slider on The top of The content. You can drag it to switch The article page. The intention is good, but when you perform this operation, you will find that your palm will block the content of the article, while your fingers will block the thumbnail, the experience is weak. With the negligence of this place alone, this design scheme is enough to appear as a counterexample.

Another bottom Principle

 

We can learn from The mistakes of The Daily that for iPad apps, in some specific situations, The control elements are still not at The top. You can put them on the bottom or even the side, as long as the control element itself and the interaction behavior required do not affect the readability of the content. Let's take a look at how the sysydney Morning Herald's iPad app works. As shown in, there is a page number indicator at the bottom of the application interface. When you drag it, the title of the article on the corresponding page appears on the top of the indicator in the form of a list, so that you do not have to flip the page to get a general understanding of the content of other pages. Although the article title list blocks the content on the page, in this interactive scenario, the most important thing for users is the article title in the list, instead of the original main content area.

For the question of whether the control element should be placed at the top or bottom under different circumstances, we may summarize the weak points here:

 

● For interactive elements that act as interface navigation (such as "menu", "Return", and "close ), buttons used to complete sharing, adding, editing, and deleting functions can usually be placed at the top of the interface. Yixieshi

● For the control elements used to browse or preview content, the bottom of the interface is the best position. Something about the internet

Therefore, we can see in many books or magazine applications that the page thumbnail list is usually placed at the bottom of the interface. (For more information, see the Martha Stewart Living and Pulse design solutions presented in the previous article on the top 10 user experience design guidelines for iPad apps.) Suppose you are designing a map-related application, there is a landmark tray on the page. You can drag the landmark from the tray and "Press" somewhere on the map. In this example, the pallets should also be placed at the bottom of the interface, which ensures that the map will not be blocked by the hand when you drag the landmark from the tray.

 

Interaction object size

 

If the layout of interaction objects depends on the platform type and host holding mode, their size is largely determined by the finger size. We must design these interaction elements sufficiently large to ensure that users can accurately identify and touch. Something about the internet

But how big is enough? Raise your hand and look at your fingertips. Many system platform design specifications are described in this regard, but I personally think Apple is still doing the best: theoretically, the minimum size of the touchable element should be 44 pixels (approx. 1/4 inch or 7mm.

The comfortable minimum size of tappable UI elements is 44x44 points.

Note that the conversion relationship between point and pixel is different between the Retina screen and the normal screen.

 

In the context of a mobile application, buttons that are large enough are not only easy to operate, but also allow users to maintain the necessary attention to avoid interference by the surrounding environment.

The minimum specification of 44 pixels is only ideal. In practice, a reasonable compromise is usually necessary. Even many native controls on the iPhone user interface are not limited by this rule. The most typical example is the system's built-in keyboard. The height of each key bit is 44 pixels, but the width is only 30 pixels. In the landscape, the width is 44 pixels, the height is 38 pixels. However, this is also Apple's helplessness, because all the complete QWERTY keyboard must be included in the interface, so there must be a trade-off in the design scheme.

 

According to Apple's practice, when space limitations make it impossible for us to implement a 44-pixel insightful design scheme, we should try our best to ensure its minimum specification of 44 × 30. Something about the internet

Element size and Space Layout

 

In the last century, many people were wasted a lot of time by Casio's calculator watches. The problem is not only that the tiny buttons make the people who wear them look very good, but the most unreliable is that the layout of these buttons is too tight. You want to press 5, but usually press 8 or 2. It is better to call it a lucky turntable than a calculator. The two most direct causes of this result are the buttons with a small size and the layout with no space to be separated. Something about the internet

When designing interfaces for small screen devices, we often need to face these challenges, but the root cause is not the product requirements. Whether in the heyday of the calculator watch, or today, we often hear the demand side of the product say over and over again: "Let's move these things closer... I just want to add a button in This toolbar... "Add your sister!

If we have to arrange the interaction elements very closely in the design scheme, we should at least make the sizes of them as big as possible. Think about the iPhone's native dial-up keyboard interface, or applications such as Skype. The interval between the dial-up buttons in the interface is usually very small, or even no spacing. The size of each button can be described as huge, because this can effectively reduce the chance of misoperation. Something about the internet

In fact, whether it's the iPhone's native dial-up interface or the similar interface in Skype, they all place some control buttons above the bottom navigation toolbar. If we use some of the principles we mentioned above, this is not a proper practice. But in these specific scenarios, the large size characteristics of these control buttons can effectively reduce their visual conflicts with the bottom navigation toolbar. Yixieshi

Therefore, to create a successful user interface design scheme in a limited area with small screens, we must meet the actual product requirements, fully balance and judge the size and layout of interaction elements.

 

Link: http://www.yixieshi.com/ucd/10346.html