Shulou(Shulou.com)06/02 Report--

Eight principles of Mobile Design

In recent years, the specialty of interaction design has also developed vigorously. Alan Cooper, Donald Norman and others have provided a lot of theoretical support for interaction design. The "Golden eight methods" of interaction design proposed by Ben Shneiderman and the "10 principles of heuristic evaluation" of Nielsen provide standards for the evaluation of interaction design. All these theories and principles are still common in the design of mobile applications. However, mobile applications have their own particularities, which are different from ordinary designs in terms of devices and scenarios. Therefore, on the basis of considering other principles, we have sorted out eight targeted principles for mobile application design.

First, content first

For mobile phones, screen space resources are very precious. In order to improve the utilization of screen space, the interface layout should focus on content, and providing content that meets the expectations of users is the key to the success of mobile applications. It is very important to design and organize content so that users can quickly understand the content provided by mobile applications and make the content really meaningful.

Reorganize the content to match the mobile characteristics

The web content on the PC is often relatively complex, so it is not appropriate to copy the content directly to the mobile phone when moving the content. When designing a mobile application, the content should be reorganized to make it conform to the characteristics of the mobile application.

The content of the mobile application should use the user's language and organize the content according to the dimensions that the user is familiar with, so that it is easier to find the target information and improve the utilization of the content; delete the extraneous content and make the content more concise and clear. consider a reasonable layout in a small screen space to increase screen utilization; if the content is clear and specific, it is exactly what the user needs. If the content has situational characteristics, it can provide users with content in different situations.

Give priority to the information needed by the user and simplify the navigation of the interface

An application often provides too much rather than too little information to users, and designers' focus shifts to how to let users find content, ignoring that it is content rather than navigation that can give users value.

Book City Reading Software

The picture above is the home page of the two book city reading software. the left application is designed on the basis of navigation and framework. users need to operate again if they want to see the content. The application on the right directly takes the content (book) that the user wants to read as the main body, highlighting the design of the content.

When designing mobile applications, we pay more attention to the content that users need, followed by navigation. When the content itself is complex and changeable, how to enable users to get the appropriate information more quickly will be very important in the mobile situation.

Timely improve the utilization of screen space

Even if the user's visual attention is focused on the content, the design should devote more screen resources to the content than to the navigation. Just at the right time, you can let the user exhale the navigation.

In the search list interface of Tmall client, when the user first enters the search list, the application will display the filter and title bar to the user. When the user slides up the list to see more content in the list, the filter and title bar are automatically folded, giving the maximum space to display the content the user needs. When the user needs to navigate, scroll down the list to display it. Content priority is fully taken into account in the design, and information such as navigation and filtering is displayed only at the right time.

Search list design

Second, designed for touch

Click operation is the basis of interaction in the era of PC. Finger-based gesture operation on touch screen devices has replaced mouse click operation. Gesture operation is flexible and natural, but it also brings some shortcomings such as poor recognition and low operation precision, which need some basic principles of gesture design to guide and improve.

Establish the specification of gesture interaction based on the information architecture.

In a mobile application, the unity 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 designers to provide a set of gesture specifications based on 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.

Gesture Architecture of Clear

The three-tier navigation architecture of the Clear application is based on gestures in the entire interaction architecture. Here you can analyze the interaction design of Clear.

The first part is its navigation logic. Its navigation logic is based on the gesture architecture. When the hierarchical navigation is downward, it is clicked by Tab, and when the hierarchical navigation is back up, it is dragged down a certain distance at the top of the List. The navigation logic of the whole application is unified. As long as users learn to operate in one place, they can get started quickly in the whole application.

The second part is the detailed interaction. It is also based on gestures, the new operation is to drag an item distance upward at the top of the list, the delete operation is to drag the item from right to left to a certain distance, and the setting is to drag the item from left to right to a certain distance.

In general, the Clear app's navigation architecture and gesture architecture are logical, consistent and easy to learn.

In the application design, after the completion of the information architecture design, we should also consider the architecture of the application gesture, so that the gesture-based navigation can be integrated with the information architecture, so that users can find content conveniently and quickly.

Give priority to designing natural gesture interactions, not just Tap clicks

In the design process of mobile applications, we can find that most applications are very conservative in the use of gestures, basically based on Tap clicks, simulating the mode of operation on PC. However, as a touch screen-based design, if you only use the form of Tap clicks, it can not fully reflect the natural interaction. We suggest that in the design, we can think more about a set of gesture interaction forms suitable for their own applications, so that users can be more natural and efficient in the process of operation.

Guide users to learn gesture operations in the situation

Because gestures are relatively hidden types of operations on the interface, users need to explore and learn. Therefore, except for the basic gestures that are familiar to the user, other gestures need to be prompted and guided when used. Gesture operation is based on procedural operation knowledge, and the best way to learn is to understand and memorize it through practical operation. Therefore, in the design of gesture guidance, it is more often done in a way that guides the user to operate, which allows the user to master it quickly.

Gesture guide

In the operation prompt interface of Fantastical, there is a small blue dot falling from top to bottom, prompting the user to drag down to switch views. Because of the combination of actual operation, this gesture is easier to remember.

Special gestures are not necessary.

Apple's Mac OS provides many shortcuts and interactive forms of gestures, which can greatly improve the efficiency of expert users. It is difficult for beginners to remember all the gestures, but this does not affect their use of the Mac system, because the system provides interactive solutions that satisfy novice users. Some personalized gestures that are not defined in various operating system specifications will also be used in the design of mobile applications, and it will be very appropriate in some situations. However, special gestures should exist as a form of shortcut operation, and users can complete the task without using it. The use of special gestures can improve the interactive efficiency of the product, or give interesting experiences, but they are not necessary.

The touchable area must be greater than 7 × 7 mm and 9 × 9mm as much as possible.

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

Gestures should provide process feedback tips.

On the touch screen interface, because gestures are 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 effective or not, and to know the results obtained after the operation.

Third, change the input mode

Text input is one of the weaknesses of the mobile end, whether it is handwriting input or keyboard input, the operation efficiency is relatively low. When walking or one-handed operation, the error rate of input is also relatively high. How to avoid text input in application design, or how to use some alternative schemes to improve input efficiency is particularly important in mobile application design.

Reduce text input and transform input form

In the process of digital input, text input is often transformed into basic gesture input. Gesture operations will input in a faster form, improving the efficiency of the input. For example, the following two examples provide help in the improvement of mobile input. Tmall client price input is converted into gesture pullout; in the Black Berry input method, when the user enters a letter, the system will provide the user with the recommended words at the beginning of the string, and the user's finger pull can complete the word input, eliminating the click input of the later string and improving the efficiency.

BlackBerry Quick input of gesture for Price selection

Simplify input options and change filling in blanks to selection

In setting the input or for some known items, try to turn what the user wants to enter into a choice. If you have an existing account login process, let the user choose rather than enter. The date, address, etc., can be converted into the contents of the selection. Use the selection input as much as possible. Try to filter out the user's common options for the user to choose, rather than directly let the user enter.

Use the sensor input that the phone already has

Use voice, scan recognition (QR code, bar code, text, etc.), LBS technology to reduce user input and provide convenience to users. In the input design, we change our thinking, give full play to the basic characteristics of each sensor and use it flexibly, transforming the difficult input into a simple and intelligent input form, so that users can use it more easily.

IV. Fluency

In the process of mobile application operation, we will encounter a variety of situations-can not find the target, do not know how to operate, there is no timely feedback after the operation, and so on, which will affect the fluency of the application. In the design of mobile applications, the fluency of the application is mainly considered from three aspects, namely, the operation flow of fingers and gestures, the flow of user attention and the transition fluency of interface feedback.

Comparison of flow

When the operation contacts of the user to complete the task can be connected to form a complete operation flow, we can judge the fluency of the interface by the operation path. To a certain extent, the short operation path can be considered as higher operation efficiency and better fluency. When the user operates the interface, the focus formed by the focus transfer forms the attention flow. Whether the attention flow is smooth or not is also an important sign to judge whether the interface is smooth or not. Note that the interface with a large jump in flow is generally considered to be unreasonable in the layout of interface elements, so it is necessary to rearrange the interface elements or design a better attention guidance mechanism to make the attention flow more smooth. In the extra part of this book, flow, we will explore a flow design method for mobile applications, which is to discuss a more natural and smooth design experience on the basis of operation flow and attention flow.

In addition to paying attention to the flow and operation flow, in order to keep the interface smooth, it is more important to make the transition and feedback of the application interface timely and fluent. The design of the dynamic effect of transition will be described in detail in Chapter 5, "details" of Mobile Design. In addition to completing the ideal dynamic effect, designers also need to follow up the project all the time, try out the intermediate version of the development, experience whether the design of the application is smooth, and adjust the interface and transition dynamic effect in time.

5. Multi-channel design

Multi-channel design means that the input and output of the system can be accomplished by vision, hearing, touch, etc., and the collaborative multi-channel interface and interaction will also make users feel more realistic and immersed. At present, the basic technology under various system platforms has become more and more mature, and voice input, gesture recognition and other integrated recognition systems composed of a variety of sensors will also bring users a more natural feeling. When designers are thinking, they can also think about the design from the perspective of other channels to give users a better way to interact.

In most cases, multi-channel design needs to be supported by deep technical skills, and the new team also needs more accumulation to achieve it.

Chirp

The picture above shows the interface of two mobile phones using Chirp to transmit pictures. The signals used to initiate and receive pictures are birdsong. The initiator emits a sound, and after receiving the sound, the receiver completes the transmission of the picture. This is a vivid example of multi-channel cooperation. Sending messages by voice is a natural form, which is consistent with our understanding of communication (different bird calls send different messages), while complex protocols such as Bluetooth and Wi- Fi are invisible, unfathomable, unlovable, disturbing or unpleasant. The results obtained through Chirp make the design more loving.

VI. Ease of learning

For mobile application products, it advocates simple and direct operation, and tends to express the product goal and value clearly. Let users learn to use it quickly and try not to let them view the help documentation. Keep the interface structure simple and clear, the navigation design clear and easy to understand, the operation is simple and visible, and the user can know the mode of operation clearly through the ideographic meaning of the interface elements and the clues provided by the interface. Only in this way can users learn and use without burden, instead of teaching users to operate by helping the system.

Pre-use boot

Now the help page of the mobile application has almost become an essential element, and the operation guide interface has been implanted in the application, which is totally unnecessary. Some products have to design help pages for a variety of reasons so that users don't know what the application does or how to operate it after opening it. In fact, these pages are designed to consider the user behavior and usage situation on the mobile side, because users may not have so much time to read the instructions carefully, but try to quickly understand the application itself. After many applications are updated, they will find that there are a lot of help content after starting the page, and some applications even provide 8 or 9 screens of content or various operation instructions. Users do not have the patience to read or remember these operations. We recommend that it is best not to exceed 3 screens of content, and to have a quick exit operation.

For function-guided design, a better help design is to better combine the prompts of new features with the product itself, so that the user gets a hint in the context in which he is about to use it, making the user feel friendly and unabrupt, and this design is more appropriate.

7. Designed for interruption

When I was playing with my mobile phone, I suddenly lost my power, when I was writing Weibo, I was asked by my boss to do something important, and I received an important message when searching for goods. In a mobile situation, it is common to be interrupted by a variety of other things.

Save the user's actions and reduce repetitive work

Network outage state: the mobile network is often unstable, and when the user is in the process of operation, the sudden disconnection will bring interference to the user, so should we consider saving the results of the user's previous work in the design? What if a user is sending a comment and the network is suddenly cut off?

When the mobile application uplink server data, we need to consider the abnormal state of the network. For example, the Sina Weibo client will temporarily save the blog post to the draft box when it is not sent successfully, and the user can send it again in the draft box. If the iPhone message is not successful, it will also save the content, marking it as a failure, allowing the user to send it again. These are good examples of temporary storage of user input information. When the website is in bad state, the application needs to save the content edited by the user, allowing the user to continue sending when the network is in good condition, or even automatically continue to complete it in the background.

Edit interrupt status: when the user is editing content, what about the edited content because other instant messages or events must interrupt the current operation? There is no good experience in mobile text input, so it is particularly important to preserve the results of user input without losing the data entered by the user.

In the conversation input interface of instant messaging tools such as Line, switch to other interfaces, and then return, the information has been saved, but not lost. In the interface of editing content, it is necessary to consider saving the edited content after various interrupt events so as to reduce the repetitive operation of the user.

Connect the user's memory instead of starting all over again

What do you do with the returned state when the user is interrupted while reading? In the reading state, it can be divided into different situations based on the content:

Book reading-after the user enters the interface again, the user connects to the page he was reading last time, rather than the home page of the book.

News reading-you need to judge according to the interval. If you haven't read for more than a day, you can choose whether to continue reading or return to the latest content on the home page after re-entering. If the interval is very short, then directly return to the previous page content to continue reading.

For the application of reading, it is necessary to judge whether users want to continue to read, so that the content can be better connected.

Seamlessly switch the content of different devices

When users browse the content of a product using PC, and then open the corresponding mobile app, how to make users feel that accessing the same content on different devices can connect seamlessly?

Chrome's mobile browser can view the open web pages in the PC browser, so that the mobile browser can quickly browse the content that has been seen in PC. That is also necessary for similar products. Most of the time, users switch devices in a hurry, but they still want to continue the previous operation. how to switch seamlessly between multiple different devices will play a very important role in improving the experience. Users can initiate content to switch to other devices, or when the user opens the application, they can prompt the user, "do you want to continue unfinished operations on other devices?" There will be more and more multi-device users in the future, and how to improve the user switching experience in this area is also worthy of consideration by designers.

8. Intelligence and love

In the design of E-mail, when the message contains the word "attachment", if there is no attachment, it will remind the user, "have you forgotten the attachment?" This is a thoughtful design that has been widely praised. In the design of mobile applications, such a design is more needed to enhance the competitiveness of applications. To evaluate the quality of a mobile application experience, in addition to whether it meets the needs of users and whether it has friendly usability, it is most respected in mobile application design that it can make users feel surprised. Such a design often exceeds the user's expectations, and its performance is that the function, interaction, or operation flow is not expected by the user, but the user can understand it well and complete the task more efficiently and interestingly. The design of mobile applications should be surprising, interesting, intelligent, efficient and thoughtful. Surprising and interesting designs are mainly achieved through design techniques. The designer is an observer of life, has a very good accumulation of interesting and beautiful things in life, and will often transfer such good ideas when they need to be expressed in product design.

……

Intelligent and efficient design is mainly the result of designers'in-depth analysis of the characteristics of mobile devices and the use of products.

Line logs in to PC client by scanning code on mobile phone.

Line designs a QR code scanning login function when switching between mobile phone and PC. Designers have to find out the user's usage situation and behavior, for example, when the user is next to the computer, they prefer to use Line through the computer in order to improve the efficiency of operation.

At the same time, designers should also analyze the characteristics of mobile devices and give full play to the mobile characteristics to solve this handover problem. Thoughtful design will often help users think of something in advance, and meet the needs of users who are not aware of it. When users make mistakes, they can automatically make up for, correct their actions, and give warm reminders. For example, Sync.ME (formerly Smartsync) is an interesting social information synchronization application. When a friend calls you, the app will display its latest Facebook status or photos on the phone screen to let you know your friend's recent status in advance. Then if you see the latest photos of your friends skiing, you can answer the phone and say, "how's it going? did you enjoy skiing?"

Sync.ME prompts the caller's status update when making an incoming call.

In short, the design often depends on the flash of inspiration, the design of mobile applications is more flexible, how to better design an application, there are no specific methods and conventions. However, in order to better prevent designers from taking detours, it is necessary to study design principles, which gives designers some reference and guidance. The design provided by each mobile platform is a collection of important mobile design experience accumulated by major companies, which can give us a lot of reference and inspiration. After learning the design principles of these platforms, we summarize the above eight mobile application design principles, hoping to provide help for the design of mobile applications.

Principle 1-content first: the interface layout should focus on content and provide content that meets the expectations of users.

Principle 2-Design for touch: the interactive system of the interface is based on natural gestures, ergonomic and consistent.

Principle 3-change the input mode: use the device characteristics and design means of various mobile phones to reduce the text input in the application.

Principle 4-fluency: maintain the flow of finger and gesture operations, the flow of user attention and the fluency of interface feedback transitions.

Principle 5-Multi-channel design: give full play to the multi-channel characteristics of the device, collaborative multi-channel interface and interaction, so that users have a more realistic and immersive sense

Principle 6-ease of learning: keep the interface structure simple and clear, the navigation design clear and easy to understand, the operation simple and visible, and let the user know how to operate clearly through the ideographic meaning of the interface elements and the clues provided by the interface.

Principle 7-Design for interruption: consider the usage situation of the application to ensure that the user resumes the previous operation and maintains the user's labor in the case of interruption of each output.

Principle 8-Smart and loving: provide users with interesting, intelligent, efficient and thoughtful designs that surprise them.

A brief introduction to the author

Fu Xiaozhen, graduated from the Department of Psychology of Zhejiang University, has been engaged in mobile interaction design and user research in UT Starcom, China Mobile Research Institute, Taobao and other companies since 2003. She has set up Taobao mobile design team to lead the design of Taobao mobile master station and main client. He is now in charge of Skye UXC department, promoting the design of bubble series products.

Hu Jiachao, interaction designer, from Ali UX team. Joined Alibaba in 2006, engaged in website, desktop software, wireless client interaction design, participated in Ali software, Taobao Android client, Ali Wangwang and other product design. Multi-platform design experience in the mobile field, focusing on cross-border design and mobile experience innovation.

Zheng Yuanchang, an expert in wireless design, has a lot of experience in front-line combat. Currently working in Taobao, engaged in wireless creative product design, responsible for Taobao series of products mobile interaction design.

This article is excerpted from the book Mobile Design.

Fu Xiaozhen, Hu Jia and Zheng Yuanzhang

Published by Electronic Industry Press

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.