Talk about the design method and example of feedback hint in mobile app

Giving users timely and appropriate feedback is a very important principle of interactive design. By Sohu News Client team written under the "Design," a book, the operation of feedback from the form, content, position several aspects made a very detailed summary, full of dry goods. Today @ Green Creek Joanna This reading note extracts the main points of the book and with examples, to share with you.

　　One, why to feedback

　　1, the exchange of people as an example

1 in the communication between people, intolerable one situation is: the other side of their words did not respond, as if blind.

2 No feedback or unfriendly feedback, like cold people, will give users a negative experience of helplessness or displeasure

　　2. What is the usefulness of timely and appropriate feedback?

1 can tell the user what to do next

2 Help users make judgments and decisions

　　Second, the form of feedback

Feedback in a variety of forms, all the tips should be in the right place at the appropriate time, with short and clear text to provide useful information, do not let users create confusion.

　　1, bubble-like tips

1) Use one

Usually appears briefly on the screen, just like a bubble, and then disappear, and you don't have to do anything about it.

Typically used to tell a task's status, action results

The following figure three examples are the feedback prompts for the operation results, figure 1 prompts to add a successful collection, use the system to bring the toast of the tip; Figure 2 is a hint of the success of the new micro-boga, floating above the content area under the navigation bar; Figure 3 is the QQ space added to the song, the background color in the navigation bar and the status bar color is consistent, The effect is good. Although the display position is different, but these hints are short appear in the picture, 1 seconds or so disappear.

2) Use two

Used for booting, just like in a Comic book dialog box, with a pointer to a specific location that prompts the user to focus on which location.

Unlike usefulness, this type of boot class hint usually does not go away quickly. The following figure, fig. 1, the wonderful list, Figure 2, provides a close button, the user can either click the Guide area or click the Close button to let the hint disappear; Figure 3 from the photo-app--in, the user clicks the Guide area in order to let the hint disappear.

3) deficiencies

Easy to be ignored by users, so it is not appropriate to host too many text or important information

　　2, Pop-up box

1) Usage

Typically with one or two text and two action buttons to confirm and cancel important actions (for example, whether or not to delete content)

It is usually used in obvious colors to highlight action items that may cause yo transfer loss (for example, "delete", "Do not Save")

2) features

Pop-up box will force users to focus on the contents and operation of the window, and screen all the contents of the background

One of the most disturbing tips for users

3) Design Attention

Pop-up box on the description, buttons on the text, the best concise, clear, can help users make decisions quickly. Because usually the user wants to quickly turn off the pop-up box so that the interrupted operation can be completed.

In the design process to avoid abuse pop-up prompts, for less important and feedback things can be expressed in bubble hint.

　　3, Button/icon/link down state

1 based on human experience in the real world

Pressing a button in reality immediately presses the state

2) Human-Computer Interaction

When a user presses a button or link on the screen, a change in state is also required to let the user know that the interface has received his operation.

As shown below, Figure 1 is the iphone photo interface, click "Select" in the upper right corner, the text transparency becomes high, the color fades; Figure 2 is the Watercress app, click on a block when the background color to indicate the effect; Figure 3, 4 is the app, click the button, the background color deepened, while the button size dynamic reduction.

　　4. Sound

1) Common examples

Click of the virtual keyboard when pressed

"Swish" after text messaging and email delivery

Micro-letter shake the phone after the sound of the clicks

Photo App Press Button Yes click Sound

2) Design attention

Proper use of sound feedback has a dotting effect, but too much use becomes an interruption

You cannot use sound as primary feedback, and you want to turn off the beep for the user (because the user is in a diverse environment, may be noisy and cannot hear, or may not be appropriate to turn on sound)

　　5, Vibration

1) Use

A more intense tactile feedback that can be used to replace or enhance a sound cue

2) Examples

Widely used in mobile phone systems, such as calls, text messages, connected charging is less used in mobile apps

3) Design Attention

Don't mess with it.

　　6, animation

1) Use

Provide meaningful feedback to users to help them understand the results of the operation

Beautiful and interesting animation, can give users a deep impression, improve the use of pleasure, and even become a product to attract users of a factor

2) Examples

The iOS system removes messages and photos by animating the animation to let users know that the operation is in effect, that is, no mail or photos have been thrown into the trash bin. This image of the animation, to help users clearly feel the operation of the implementation process, and add fun.

In some ongoing operations, such as downloading and deleting a large number of files, showing completed progress with a dynamic progress bar, and providing explanatory information when possible, can reduce user anxiety.

A lot of interesting drop-flushes, on-slide loading more examples, let wait no longer boring

　　Third, the content of the feedback

　　1, information

1) Design attention

Text information should be simple and easy to understand, to avoid the use of inverted sentences, the best one or two words can express the meaning clearly

Avoid the use of overly programmed language

The page has a detailed description of the operation of the text, its feedback can be simple, do not have to repeat the page has text. For example, nickname, the interface has the format required, feedback error only to prompt "nickname does not meet the requirements"

The appropriate use of icons, can attract the attention of users, help users determine the type of hint.

　　2. Warning

1) Use

Warning box, which is used to show users information that has a significant impact on the use of the program.

2) features

appear in the center of the program, covering the main program

Its arrival is due to an important change in the state of the program or device and is not necessarily the result of the user's recent operations

There is usually at least one button that closes the window after the user clicks it

Usually have a title and show additional auxiliary information

　　3. Error

1) Use

Prompt for a problem or exception with the user action, unable to continue execution

2) Design attention

The error message tells the user why the operation was interrupted and what error occurred.

Error messages should be as accurate and easy to understand as possible.

Valid error messages explain the cause of the occurrence and provide a solution to enable the user to recover from the error.

　　4. Confirm

1) Use

Used to ask users if they want to continue an operation, so that users can further confirm, to provide users with a fallback, revocable retreat.

2) Design attention

When the user's operation result is more dangerous or not reversible, through two times selects and confirms, prevents the user to operate incorrectly

　　Iv. Position of feedback

　　1. Status bar

1) Advantages

Good use of space

2) Disadvantages

The location is not very obvious, suggesting that only the importance is not high, or there is a cross screen display requirements of the hint

3) Examples

The following figure, figure 1, 2 is Sina Weibo app, in the write microblogging interface click "Send", back to the original interface at the same time the status bar prompts to send the status; Figure 3 is NetEase mailbox Master app, Mail sent to leave the Write mail interface, while the top right tip mail sent progress.

Usually send content, need a certain amount of time, in order not to let users empty, but also to do something else, will wait for the process weakening is very necessary.

　　2, navigation bar

1) Use the scene

Usually the display of the connection state, indicating that the product is trying to connect the network, pull the data

Suitable for displaying temporary, more important informational class information

2) Examples

The following figure, Figure 1 is the QQ music to add a song note, the previous article also mentioned; Figure 2 is Appflow, when loading content in the navigation bar prompts, loading completed and then back to the original state, this way in the Reeder also useful.

　　3, above the content area

1) Use the scene

The location is above the content area, below the navigation bar, usually a drop-down refresh, and is a quick way to load new content.

The default hint information is hidden, and the corresponding prompts are displayed when you pull down the interface to guide the user.

　　4. Screen Center

1) Use the scene

A more important informational tip that is usually holistic

System prompts that require attention from the user can be displayed in this location

2) Design attention

Now we are more and more pursuit of product style, luxury easily belong to their own products unique feedback form, and customize a fixed location display tips are also more popular.

　　5, above the menu bar

1) Use the scene

Can be used flexibly according to the need, basically no limit

Can be a hint of the overall information applied, or a hint related to the content at the bottom of the interface. For example, load more content, or bubble tips to show crosses on a picture, and so on.

2) Examples

The following figure, watercress app, loaded home page content, no updated tips. Not only inform the user results, but also guide users to search more interest, so that the content of the first page become richer.

　　6, the bottom (Cover menu bar)

1) Use the scene

There is no particular benefit in showing hints in this position, perhaps a quest for new forms.

2) Examples

As shown in the following figure, the keep download video prompts, the progress bar is displayed at the bottom, this position is more obvious does not affect the user browsing content area.

　　Design principles of Feedback

1, for users at all stages of feedback to provide the necessary, positive and immediate feedback

2, avoid the transition feedback, so as not to cause unnecessary interruption to the user

3, can see the effect of timely, simple operation, you can omit feedback tips

4, provide feedback, to enable users to use the most convenient way to complete the selection

5, not different types of feedback to do the differential design

6, do not interrupt the user's stream of consciousness, to avoid blocking the user may go back to view or manipulate the object.