Principles of mobile phone interaction design

In the design of e-pass client and wap2.0 page, the accumulation of some mobile phone interaction design experience, and constantly summarized, to clarify the design ideas. The following design summarizes the mobile phone interactive http://www.aliyun.com/zixun/aggregation/8912.html "> Design principles, for reference only."

Screen

Mobile screen size is divided into physical size and display resolution.

physical dimensions are measured in inches. The display resolution refers to the precision of the screen image, which is the number of pixels the screen can display. The display precision is the pixel (DPI) that can be displayed on each inch.

The physical size of the nokia,n78 is 2.4 inches, the display resolution is 240*320 pixels, and the HTC T7278 has a physical size of 2.8 inches with a display resolution of 480*640 pixels. Two mobile phone display accuracy is different, the same 100*100 pixel size of the picture in the two mobile phones to see the effect is also different, the same size of the picture in HTC T7278 looks much smaller than Nokia N78.

Resolution type (incomplete statistics):

128*128 128*160 130*130 176*144 176*220 208*208 208*320 240*160 240*240 240*260240*320 240*400 240*432 240*480 320*240 320*320 320*400 320*480 345*800 352*416360*480 360*640 400*800 480*320 480*360480*640 sized 480*854 480*864 640x480 800* 480

A software suitable for all resolution of the mobile phone is difficult, it is necessary to first select the mainstream resolution design, on this basis to match the other resolution of the mobile phone. In view of the 2010-year QVGA (240*320) screen market share will reach 70%, can be QVGA mobile phone as the main design object.

visual focus from top to bottom

Most of the time viewers look at the computer screen can not help the "F" shape of the model to read the Web page, and the phone screen is very small, display ability Limited, the screen content panoramic view, reading text from top to bottom, so the importance of information is also from up to the next in sequence.

Pattern reading for "F" shapes

Concise

Mobile screen display ability is limited, the use of physical keys, unable to the computer or touchscreen those jump operation, you must switch the focus of the control, such as the mobile phone screen in the page, the user is the most use of the "next", the "next page" placed as the first control user-friendly, Scheme 1 is better than programme 2.

Simple interface:

reduces the number of controls, making it obvious that the main function of the program is visible and directs user action. When the content is too much, the important information should be highlighted to make it easy for users to browse. When displaying an error message, do not just tell the user that the program is wrong, but provide useful information to guide the user through the operation. Mobile internet speed is slow, generally in 6k/s, this requires the content of the page as far as possible, avoid too many pictures. The content of the page is controlled within two screens and cannot be blank. For example, when a user pays for a movie ticket, you can't just show "payment success", you can guide the user to use other features.

Concise Requirements for concise text description, but also to take full advantage of the phone screen on the only display space. For example, the iphone's Search bar, search box for content search, after the click will show the virtual keyboard, in addition to the left default search icon, the search bar contains other elements.

placeholder text. You can alert users to the functionality of the search bar (such as "search") or to search for content (such as Google or YouTube). The Bookmark button. Remember the user's search, such as in the map search, the bookmark button can quickly find the marked location, the latest search content and contact person. The bookmark button may appear when the user does not enter text or placeholder text on the search bar by default. Clear the button. You can quickly remove content from the search bar, and the Purge button appears by default when users enter text in the search field. Task

When you complete a task that requires a multi-step operation, you can split the task into subtasks, and each interface completes a subtask. If the logic is clear and the user's fluency is ensured, the number of page jumps and clicks can be increased appropriately. If the use of E refers to the client to buy movie tickets are: Query movie → select screening → choose the seat → determine the order → payment.

E finger

Attention to the first task is also the user of the program satisfaction is an important factor. So at design time, it is important to ensure that each element of the interface is designed to be based on the current priority task, and whether the user needs these elements to complete the task. To give a specific example: Is this information or functionality useful for users to shop? If not, is this information or functionality important in another usage scenario?

Avoid input

When using standard ISO phone keys, the average user input English 21 words per minute, input on the mobile phone will slow down the user's operation speed, too much text input is wasting the user's time and energy, if you want to enter, you need to ensure "value for money", users will feel that the input and not delayed the task completed.

The following ways to avoid typing:

use the form of list options. Increases the memory of the control. Consistency

The colors, fonts, text, and pictures that appear on the phone's interface should be consistent, allowing users to know where to find specific features or information, while also enabling them to know how to use these features correctly. For example, a return to the previous level can be expressed as: return, upper level, retreat, retreat ... For the user, there is no obvious difference between these words, but when the mobile interface is displayed, use only one and the same location, such as "return" in the iphone interface only to the left of the navigation bar.

Panda Reading

Use situation

Mobile QQ

Mobile phones belong to mobile devices, can be used in a variety of occasions, such as subways, roadside, supermarkets, aircraft, etc., mobile phones can switch to aircraft mode. Mobile phones can be used in various time periods, mobile phone QQ can also switch use mode: Standard mode, outdoor mode and night mode.

Mode of Operation

Mobile phone operation has physical buttons and touch and other modes of operation, when the same program to be used in a variety of operating mode, need to take into account the point of click on the size of the area. When you use a physical key, the button can be just two words, select the control to operate, and the iphone's clickable area is best not less than 44x44 pixels.

Feedback

The program needs to give reasonable feedback to know the current state of the user program.

For example, the iphone's running instructions indicate that a program is running in the background, but the task does not alert the user when it completes. When the program cannot complete the network immediately, the status bar displays a running instruction. When a program performs a task that cannot be completed immediately, a slightly larger run indicator appears on the toolbar. The run instructions provide a good feedback mechanism for explicitly informing the user that the program is running is more important than telling the user that the task has been completed.

Source Address: http://daichuanqing.com/i......archives/1042