Eight principles of mobile phone wireless design

The following content to Self-Knowledge, the original author @ A well-behaved design, the original Millet technology product manager, Lei Feng Network has been authorized by the author, and the original answer to make appropriate edits.

In the product design, the product interface, the usage situation, the user operation and so on will affect the user to the product experience. Therefore, we should follow certain principles in the process of design, avoid the designer one-sided according to their own subjective understanding of the product to make a choice.

Principle 1: The user interface should be based on the user's heart model, not the engineering implementation model

is to put the background is very complicated things through the design to meet the user's daily life commonly used browsing mode or mode of operation. In fact, this is the designer of the life of the details and data combination of cohesion points, the user's psychological model to grasp the more accurate, the interface will be better.

#左边界面 #: Public comment on the new version of the price of the search is more in line with the user's heart model;

#右边界面 #: God Shake shake the mobile phone to find a restaurant more in line with the hearts of the public users, we should have the kind of noon do not know which restaurant to eat, then shake a shake to randomly draw a nearby restaurant.

Principle 2: Train the user to use the situation thinking way to do the design

It is difficult to achieve this principle, and it requires long term experience.

Well, we all know that rice chats earlier than micro letters, but then was the micro-letter, personal think not only QQ help the micro-letter is very busy, such as user login threshold low, user source, advertising dozen and so on, in fact, users use the situation of rice chat research is not a micro-letter thorough.

For a social instant messaging product, the ability to add friends is the source of friends converge, although the rice chat micro-letter are bound mobile phone address book, but then again, the user to find mobile phone address Book contact voice chat is still relatively small. Add Friends is to guide users to find friends, find friends, touch a friend's door.

So for such an important function placed in the application of which location, in the product upfront will allow users to choose which application to use, because the premise of the chat tool is to have someone to chat with you. Go back to the real interface and look at the following comparisons:

Micro-Letter 1.0 when (I only intercepted 4.0 of the figure) to add friends to place the main tab, user-friendly quickly add friends

Rice Chat 2.0 or put add friends in the first row of friends list, users can hardly find

principle 3: as little as possible to allow users to input, as much as possible to give the reference

Mobile end of the virtual keyboard has been unable to solve the scientific and technological problems, the main disadvantages of virtual keyboard:

1. Input positioning can not be feedback, so can not form an efficient blind; 2. The space limit of the virtual keyboard, the click of the finger often causes false press.

Just above these two points let the virtual keyboard in the input, so we design the application, as long as we encounter input box control, first of all to think of the user less input, or intelligent to give a reference.

Baidu Music Search first of the most recent popular songs in order in the list, when there is a word input, the singer will appear in the candidate words, here is commendable Baidu Music search can be based on user input words to determine whether the user is a search singer or song name.

Baidu Map is also my use of a more comfortable map navigation applications, in the reduction of input is also done better, Baidu Map has cookies, and also is the application of Baidu search technology in the matching of place names is also very gratifying, in the user input to half of the time, the following candidate list appears the target address, The user simply stops the input click List.

principle 4: Global navigation needs to exist, it is best to preview the dynamic

of other modules

Global navigation in web interaction design is relatively easy to do, in mobile phone mobile terminal Global navigation to see the demand for product design, what function needs global navigation.

social applications are usually: messages, notices, requests; music video applications are usually: Download, search, tool products are often the core tool bar (tool bar) such as browser, voice assistant, music recognition applications and so on.

The value of global navigation is to allow users to use the process will not lose information, reduce the number of page and secondary page jump between the times, of course, the global navigation in the Info-task to be able to complete the current page, if you need to jump to a new interface, you will lose the significance of global navigation.

Because when multiple info-task, it is necessary for users to continue to enter the global navigation page to complete.

Facebook Friend requests, messages, notifications are all in the way of global navigation, is the ugly face of the panel design ~

Rice Chat Notice Center, which contains a lot of notification types, it seems a bit messy, I hope the following version will filter the collation

Principle 5: Provide non modal feedback without interrupting task flow

The written name of the modal pop-up box is called in the iphone OS: Alert-box, said in the Android OS: Pop-up box, we all know that the frame will interrupt the task flow, so on the limited screen how to make these frames weakened, or to say elegant, gentleman to remind users, This needs to be defined by the designer.

Modal refers to the interface is only a reminder bomb frame to have interactive behavior, everything else is not operational; modeless does not make the reminder into a frame, it may be processed into List Notification, Toast list and other ways to remind users.

Gmail is the first to delete the modal frame as a list notification this way, reminding users to undo the deletion of the operation, this mode of processing, so that the process of deletion more smoothly and easily.

K Song Talent The second version of the frame is the mode of processing, the interface is very unfriendly, the user in the karaoke process to be interrupted three times to be able to publish a song of their own to sing, so reduce the user's participation.

Principle 6: Do not allow users to wait for the task to complete, users will find more interesting places

The core of mobile interconnection is to bring users a mobile experience of convenience and efficiency, this is the mobile Internet apps need to consider, users in the use of your products in many cases are fragments of time, so in the design as far as possible to let users in a short time familiar with our products, know the sincerity of this product.

In particular, some waiting interface needs to design, can not put a very boring waiting interface presented in front of the user, the user will soon change other apps.

After Instagram the photo, click Upload, it is the way back to the home page location, tell your photos are submitted, not show a upload progress interface, let users see the upload percentage.

Therefore, we in the design of rice bar upload song file is also just to inform the user backstage is to help you upload, call users at ease, users will naturally go to play other functions, do not let users anxious waiting.

And so uploaded, we use Toast List to notify users have uploaded success, so that the initiative to view the results of the upload to the user.

Principle 7: Automatically save user input results

At the mobile end, because of the complexity of Input Panel, and touch input is not a physical key to the feedback nature, especially the mobile phone to enter a paragraph of text or information, the user itself is a very painful thing; for the product, the user's input in your product is a very fortunate thing, So designers need to let your apps automatically save the user's input results.

Microblogging official mobile phone clients in the user input information, click the fork in the upper left corner will pop up action sheet to ask, confirm whether to give up, or save as a draft;

Path processing is more humane, in a broken network situation, the user can still post photos and text, of course, after the successful networking, the system will automatically upload, but the publication time is the network after the release of the point of time;

Instagram's comments are also very friendly, in the case of disconnection or network instability, user input comments can still be released, there will be an exclamation mark later to remind users to release or retry, enhance user participation in the positive line, while active community.

principle 8: For the speed of the program response, the design sometimes needs to act as a cover

Technology is not omnipotent, technology is still mobile Internet applications most need to optimize and improve, as a technology ally our designers also need to assist them, so that users feel that the program should be so run. In particular, the speed of the program response is not only a technical problem, and the network environment also has a great relationship, this time designers need to consider these objective circumstances, help the program to cover these flaws, so that users feel in use is fluent.

#随后实现 # Instagram post "praise" regardless of the participants or post authors are stimulating their active community atmosphere of the important function, so in the response of the program must have available, Easy-to-use features. We look at the left picture, the "Praise" button has been the reality of "praise", at the same time we look at the red box "chrysanthemum petals" know backstage in the loading, so this is the ingenious design, let the user perceive the program is very fast, and not wait loading after the show "has been praised";

#提前传输 # Instagram posted in the post, the user processed photos click "Upload" button to see the middle of the interface, this time the interface is to allow users to enter a theme for their posts, or to set up sharing functions, and we can see the red box in the "Chrysanthemum petals", It is clear that the background has begun to transfer the photos just uploaded, so when the user clicks "Finish", the data only need to upload the remaining part, so that users feel upload very quickly;

#边唱边完成 # It takes a lot of data to be processed in the background to compose the accompaniment and the user's song into a piece of music. If the step-by-step to allow users to wait for a relatively long synthesis time, in order to let users do not have to wait for the tedious synthesis, we need the background in the user singing at the same time, backstage has begun to sing the accompaniment and singing synthesis.

The above eight principles are my experience in the work of a more profound interactive design principles, I hope to see this blog to help friends. Of course, the design principle is changing with the change of time, so also please friends to improve and add, thank you!

Via: Know