Interactive design experience: Principles of mobile application interaction Design

Article Description: design in a lot of times are inspired by the Flash, mobile application design is more flexible, how to better design an application, there is no specific methods and conventions. However, in order to better avoid the designers detours, design principles of learning is necessary, it gave designers a certain reference and guidance.

Absrtact: The interactive design profession has also flourished, with Ben Shneiderman's interactive design "Golden Eight" and Nielsen's "Heuristic evaluation 10 principles" provide a standard for the evaluation of interactive design. On the basis of considering other principles, we have sorted out the eight specific principles of mobile application design.

　　　　　　
This article is excerpted from the book "Mobile Design", Fu, Hu Jiachu, Zheng, published by the electronic industry publishing house.

In recent years, the interaction design profession has also flourished, Alan Cooper, Donald Norman and other human interaction design provides a lot of theoretical support, Ben Shneiderman proposed interactive design "Golden Eight" and Nielsen "heuristic evaluation of 10 principles" It provides a standard for the evaluation of interactive design, and all of these theories and principles are still common in the design of mobile applications. But the mobile application has its particularity, in the equipment and the scene all is different with the ordinary design. Therefore, on the basis of considering other principles, we have sorted out the pertinence principle of eight mobile application design.

content First: the interface layout should be content as the core, to provide content to meet user expectations.
Designed for touch: The interactive system of the interface is constructed on the basis of natural gestures, ergonomic and consistent.
Conversion Input mode: use of various mobile phone device characteristics and design means to reduce the text input in the application.
Fluency: maintains the flow of the application-interactive fingers and gestures, the user's attention stream, and the interface feedback transitions.
Multi-Channel design: to give full play to the multi-channel characteristics of the equipment, collaborative multi-channel interface and interaction, so that users more realistic and immersed
easy to learn: to maintain the interface structure is simple, clear, clear and easy to understand the navigation design, the operation is simple to see, through the interface elements of the ideographic and interface to provide clues to let users know the way they operate.
Designed for interruption: Consider the application of the use of situations, to ensure that in each output interruption of the situation, so that users recover before the operation, to maintain the user's labor pay.
Intelligent Love: provide users with a pleasant, intelligent, efficient and intimate design that makes him pleasantly surprised.

First, Content priority

For mobile phones, screen space resources appear very precious. In order to improve the utilization of screen space, the interface layout should be content-centered, while providing content that meets user's expectation is the key to the success of mobile applications. It is important to design and organize content so that users can quickly understand what the mobile apps are offering and make the content truly meaningful.

Reorganize content to conform to moving features

Web pages on PCs are often relatively complex, and when content is moved, it is not appropriate to copy the content directly to the handset side. In the design of mobile applications, content should be reorganized to conform to the characteristics of mobile applications.

The content of the mobile application should use the user's language, organize content in a familiar dimension, which makes it easier to find target information, improve content utilization, remove extraneous content, make content more concise, consider layout in small screen space, and increase screen utilization; If the content is clear and specific, is what the user just needs, if the content has the characteristic of the situation, it can provide the user with different situations under different situations.

Prioritize the information users need, and simplify the navigation of the interface

The information that an application provides to the user is often too much, not too little, and the designer's focus shifts to how to get the user to find content, ignoring the content, not the navigation, that gives the user value.

In mobile application design, we are more concerned about the user needs of content, followed by navigation. When the content itself is complex and changeable, how to enable users to get the right information more quickly will appear important in moving situations.

Increase the utilization of screen space in a timely manner

Even if the user's visual attention is focused on the content, in the design of the screen resources will be more to the content rather than navigation. Only at the right time, you can let the user exhale the navigation.

Second, design for touch

Click operation is the basis of the PC era interaction, on the touch screen device based on finger gesture operation has replaced the mouse click operation. Gesture operation Flexible, interactive nature, but also bring poor recognition, Operation precision is not high shortcomings, all need some basic principles of gesture design to guide and improve.

Based on information architecture, the code of gesture interaction is established

In a mobile application, the uniformity of gestures is very important. Let the user know how to use gestures in any interface of the application and achieve the desired results. This requires the designer to provide a set of gesture specifications based on the application information architecture, which will be the basis of navigation and interaction. Let's take clear as an example to describe the architectural design of gestures.

Clear this application's three-tier navigation architecture is based on gestures for the entire interaction architecture.

Here you can analyze the interactive design of clear.

The first part is its navigation logic. Its navigation logic is based on the gesture architecture, the level of navigation down for the tab click, the level back to the top of the list at the end of the drag a certain distance. The entire application of navigation logic Unified, users as long as in a place learned to operate, in the entire application can be quickly started.

The second part is the detail interaction. It is also based on gestures, the new action is at the top of the list to drag an item distance, delete operation is from right to left drag items to a certain distance, set is from left to right drag items to a certain distance.

In general, clear this application of the navigation structure and gesture structure of the logic is clearer, the operation of high consistency, easy to learn strong.

In the application design, the completion of information architecture design, but also to consider the application of gesture structure, so that based on the gesture of navigation and information architecture integration, so that users can easily and quickly find content.

Priority design natural gesture interaction and not just tap click

In the design of mobile applications, we can find that most applications are very conservative in the use of gestures, basically tap click to simulate the way the operation on the PC. However, as a touch-screen based design, if only using tap-click Form, can not fully reflect the natural interactive operation. We suggest that in the design, we can think more about a set of suitable for their own application of gesture interactive form, so that users in the process of operation can be more natural and more efficient.

Guide users to learn gestures in a situation

Because gestures are relatively hidden in the interface of the operation type, users need to explore and learn. Therefore, in addition to the basic users are familiar with the gesture, other gestures in the use of the need to give hints and guidance. Gesture operation based on procedural knowledge, the best way to learn is through the actual operation to understand and memory. Therefore, in the gesture guidance design, more is to guide the user to operate the way to do, can let the user quickly grasp.

Special gestures are not necessary.

Apple's Mac OS offers a number of quick and easy ways to interact with gestures, and these multiple-fingered gestures can greatly improve the operational efficiency of expert users. Beginners have difficulty remembering all gestures, but this does not affect their use of the MAC system because the system offers interactive solutions that satisfy the novice. The design of mobile applications will also be personalized, not within the various operating system specifications defined gestures, in some scenarios will be very appropriate to use. However, special gestures should be used as shortcuts, and users can accomplish tasks without using them. The use of special gestures can enhance the interactive efficiency of the product, or give an interesting experience, but they are not necessary.

The contact area must be greater than 7x7 mm, as much as possible than 9x9mm

In the design of the touch operation, we already know that the contact physical area in the interface should not be less than 7~9mm. In order for users to be able to operate in a variety of scenarios, we recommend that the touch area should not be less than 9mm. But the touch area is different from the physical size that is presented directly in the screen, and for visual and aesthetic needs, designers sometimes design smaller screen elements, which is permissible, and the actual touch area can be larger than the size of the screen element present to us. We need to control the touch area of the space, in the touch area can trigger the user's action.

Gesture action to provide process feedback hints

In the touchscreen interface, because gesture manipulation is hidden in the interface, users have to try to know what the real effect is. Therefore, feedback is very important in the process of user gesture operation, they need feedback to know whether the gesture is valid or not, they can know the results obtained after the operation.

Iii. Conversion Input Mode

Text input is one of the soft spots on the mobile side, whether it is handwriting input or keyboard input, the operation efficiency is relatively low. When walking or one-handed operation, the input error rate is also relatively high. How to avoid text input in the application design, or use some substitution scheme to enhance the input efficiency, is especially important in the mobile application design.

Reduce text input, transform input form

In the digital input process, the input of the text is often converted into the basic gesture input. Gesture operation will be entered in a faster form, increasing the efficiency of the input. The following two examples provide assistance in moving input improvements, the price input of the cat client is converted into gesture pulling; in black Berry input method, when the user input a letter, the system will give the user to start the string of recommendations, the user's finger pull can complete the word input, Eliminates the subsequent string's click-through input and increases the efficiency.

Simplify input options and fill in the blanks for selection

In setting input or for some known items, try to make the user input into a selection. If an existing account is logged on, let the user select instead of ENTER. The date, address, and so on itself can be converted to the contents of the selection, as far as possible with the selection input. Try to filter out the user's common options to allow users to choose, rather than directly let the user input.

Using the sensor input that is already on the phone

The use of voice, scanning recognition (two-dimensional code, barcode, text, etc.), LBS technology to reduce user input, to provide users with convenience. We are in the input design, multiple conversion thinking, play the basic characteristics of each sensor and flexible application, the difficult input into a simple intelligent input form, so that users can be more convenient to use.

Four, the flow of

There are a variety of situations in the operation of a mobile application--no target, no knowledge of how to operate, no timely feedback after operation, etc., which will affect the fluency of the application. In the design of mobile application, the paper mainly considers the fluency of application from three aspects, namely the operation flow of finger and gesture, the user's attention flow and the transition fluency of interface feedback.

When the user completes the task of the operation of the contact link can be composed of a complete flow of operations, we can use the path to determine the flow of the interface, the operation path short to a certain extent is considered to be more operational efficiency, fluency and better. User in the operation of the interface, the focus of attention to shift the formation of focal point after the formation of a note flow, pay attention to whether the flow is smooth is also to determine the interface is an important sign of fluency.

Note that a large jump in the interface is generally considered the interface element layout is not reasonable, need to let the interface elements to rearrange or design a better attention to guide the mechanism, so that more smooth attention flow. In the "Flow" of this book, we will explore a flow design method for mobile applications, which is to discuss a more natural and fluent design experience on the basis of operation flow and attention flow.

V. Multi-Channel Design

Multi-channel design means that the input and output of the system can be completed by visual, auditory, tactile and so on, and collaborative multi-channel interface and interaction will also make users more realistic and immersed. At present, the basic technology under each system platform has become more and more mature, voice input, gesture recognition and other integrated recognition system composed of various sensors will bring more natural feeling to the users. When designers think, they can also think of design from other channels, giving users a better way to interact.

Multi-channel design in most cases need to have a strong technical foundation to do support, the new team also need more accumulation before it can be achieved.

Vi. Ease of learning

For mobile application products, the promotion of simple, direct operation, tend to clearly express product goals and values. Let users quickly learn to use, try not to let them see the help document. Maintain the interface structure is simple, clear, navigation design is clear and easy to understand, the operation is simple and visible, through the interface elements of the ideographic and interface to provide clues to let users know how to operate clearly. Only such a design can make the user's learning use without burden, not through the Help system to teach users to operate.

The help page for mobile apps is now almost an essential element, with an operational boot interface embedded in the application, which is completely unnecessary. Some products for a variety of reasons, have to design a help page, so that users do not know what the application is to do after the open, do not understand how the operation and give up the use.

In fact, these pages are designed to consider the mobile end of the user behavior and use situations, because the user may not have so much time to look at the instructions, but try to quickly understand the application itself. After many applications have been updated, will find that the startup page has a lot of help content, some applications even provide 8, 9 screen content or a variety of operation instructions, users have no patience to see, it is difficult to remember these operations, we recommend that it is best not to exceed 3 screen content, and to have a quick exit operation.

For functional guidance design, better help design is the new features of the hint and the product itself to do a more perfect combination, so that users in his right to use the situation to get tips, so that users feel friendly is not abrupt, such a design is more appropriate.

Vii. Design for interruption

When playing mobile phone suddenly did not power, write Weibo and was called by the boss to do important things, in search of goods received an important message ... In a mobile context, it's common to be interrupted by a variety of other things.

Save user's operations, reduce duplication of work

Network Interrupt State: Mobile network is often unstable, when the user in the process, suddenly break the network will bring interference to the user, then whether to consider the design of saving the user before the labor results? If a user is sending a comment and suddenly the network is interrupted, what should be done?

When moving the application upstream server data, it is necessary to consider the state of abnormal network status. For example, Sina Weibo client, when the blog post is not successful will be temporarily deposited in the draft box, users can be sent in the draft box again. The IPhone does not send the information successfully, it also saves the content, marks the sending failure, and allows the user to send it repeatedly. This is a good case of staging user input information. When the site is not in good condition, the application needs to save the content that the user edits, allows the user to continue sending when the network is in good condition, and even automatically continues to finish in the background.

Edit Interrupt Status: What should the edited content do when the user edits the content, because other instant messages or events must interrupt the current operation? In the mobile phone text input has not been very good experience, that save users have entered the results, do not lose the user input data is particularly important.

When the dialog input interface of instant communication tools such as line switches to other interfaces, and then returns, the information is saved without loss. In the editing content interface, consider saving edited content after various interrupt events, reducing user duplication.

Bridging the user's memory rather than getting the user to start over

When users are interrupted while reading, how do you handle the return status? In the reading state, the content can be divided into different situations:

Reading books--once again the user enters the interface and joins the last page that was being read, not the homepage of the book.

The reading of news class-need to judge according to interval time, more than one day time does not read, once again enters, can let the user choose whether to continue to read or to return the newest content of the homepage. If the time interval is very short, then return directly to the page before the content continues to read.

For the application of reading class, we should judge whether the user should read continuously, so that the content can be better connected.

　　Seamless switching of the contents of different devices

When users use a PC to browse the content of a product, then open the corresponding mobile applications, how to make users feel that access to the same content in different devices can seamlessly connect?

Chrome's mobile browser can look at the pages that are open in the PC's browser, allowing the mobile browser to quickly browse through what is already on the PC. That is also necessary for similar products. Most of the time users are hurriedly switching devices, but also want to continue before the operation, how can be in a number of different devices seamless switch between the experience will have a very important role in the promotion. Users can actively initiate content to switch to other devices, or when the user opens the application, you can prompt the user "Do you want to continue the unfinished operation on another device?" "There will be more and more users of multiple devices in the future, and how to improve the user's switching experience in this area is worthy of the designers ' consideration."

Eight, intelligence has love

In the design of e-mail, the message content in the "attachment" text, if there is no attachment, will remind the user "whether to forget the attachment?" "This is a thoughtful design that has been widely praised. In the design of mobile applications, this design is needed to enhance the competitiveness of applications.

The evaluation of a mobile application experience is good or bad, in addition to whether it meets the needs of users and whether the availability of friendly, so that users can feel the surprise is in the mobile application design most respected. This design is often beyond the expectations of the user, it is the performance of the function, interaction or operation flow Although not the user expected, but users can understand well, and more efficient, more interesting to complete the task.

The design of mobile applications should be pleasantly fun, intelligent, efficient and intimate. The interesting design that is pleasantly surprised is mainly realized through the design technique. A designer is a living observer, has a very good accumulation of interesting and beautiful things in life, and when it is necessary to perform in product design, this kind of good ideas will often be transferred.

Intelligent and efficient design is mainly through the designers of mobile equipment characteristics and product use of the situation to do a deep analysis of the results will be produced.

Line in the mobile phone and PC switch, designed a two-dimensional code scan login function. Designers are going to find out about user situations and behavior, such as when users are on the edge of a computer, and want to use line on a computer to improve operational efficiency.

At the same time, designers are also going to analyze the characteristics of mobile devices, to play the characteristics of mobile to solve the problem of switching. Intimate design will often help users think of some things ahead of time, and to meet the user is not aware of the needs of users in making mistakes can automatically make up, correct the user's operation, and give a warm reminder.

For example, Sync.me (formerly known as Smartsync) is a very interesting social Information synchronization application. When a friend calls you, the app will display its latest Facebook status or photos on the phone screen, allowing you to know the latest status of a friend in advance. Then if you see a friend's latest ski photo, then you answer the phone and you can say, "What's the fun of skiing?" ”

In short, design in many times are inspired by the Flash, mobile application design is more flexible, how to better design an application, there is no specific methods and rules. However, in order to better avoid the designers detours, design principles of learning is necessary, it gave designers a certain reference and guidance.

Author Introduction

Fu, graduated from psychology Department of Zhejiang University, since 03 in UT Tatsu Kang, China Mobile Research Institute, Taobao and other companies engaged in mobile interaction design and user research work, has formed a mobile design Taobao team, leading Taobao mobile master station and the main client design; is responsible for the Sky UXC Department, promote bubble series products design.

Hu Jiachu, interactive designer, from Ali UX team. 06 joined Alibaba, engaged in the website, desktop software, wireless client interactive design, participated in Ali Software, Taobao android client, Ali Wangwang and other products design. Multi-platform design experience in mobile domain, focus on cross-border design and mobile experience innovation.

Zheng, wireless field design experts, a first-line combat experience. At present, working in Taobao, engaged in wireless creative product design, is responsible for Taobao products mobile end of the interactive design.
This article is excerpted from the book "Mobile Design", Fu, Hu Jiachu, Zheng, published by the electronic industry publishing house.

Original Address: Programmer http://www.csdn.net/article/2013-08-15/2816586