About the arrangement of reminder methods in APP

I have sorted out the usage of various pop-up windows~

When making an APP, you will find a problem, various pop-up reminders, and when to use what kind of reminder method. Let’s summarize it today.

1. Concept Overview

As the name suggests, reminder methods refer to some reminder mechanisms that appear in the APP when users need reminders.

Generally, a pop-up window is used for prompting, and its functional significance is:

Provide information reminders and supplements to the user's current operation, or interrupt the user's current operation and provide feedback.

The owner of the pavilion has made some arrangements from the perspective of how to use it in actual cases, as shown below

The owner of the pavilion will explain the light, medium and severe reminder methods based on the following elements of relevant reminder information.

2. Reminder method in mobile scene - mild reminder

1. Application scenarios:

Users can expect predictable change information, with prompt reminders and immediate feedback after operation.

Such as: sending successfully or failed, adding to favorites, turning on data saving mode...

2. Design principles:

• Avoid any distractions from the current task and allow interested users to discover the hint.
• Disappears automatically without any action required.

3. Method: Toast, HUD

4. Content structure: text information, pictures

5. Location on the page:

It can appear anywhere on the page, and can be set to appear at the top, middle, or bottom of the page (but generally appears on the center axis of the page). The specific display position is set according to the overall design of the page. This type of Toast is very common on Android apps.

6. Accompanying state: Generally no accompanying state

7. The difference between iOS and Android: There is no obvious difference between the two

The Toast case is shown below

The HUD case is shown in the following figure

3. Reminder method in mobile scene - medium reminder

1. Application scenario: Change information that users may need to know and be interested in, such as friend messages, network errors, account upgrades, etc.

2. Design principles:

• Make sure the prompt is visible to the user while minimizing interruption to the current task.
• It does not disappear automatically, but users do not need to make a choice and can choose to ignore it.

3. Methods: prompt dialog box Snackbar, prompt bar, floating layer

4. Content structure: text information, buttons, pictures, and possible closure

5. Position in the page: Snackbar appears at the bottom of the page, the prompt bar can be at the top or bottom of the page, and the floating layer may appear anywhere on the screen

6. Accompanied state: may be accompanied by sound

7. The difference between iOS and Android: There is no obvious difference between the two

Prompt dialog box Snackbar

Snackbar, like Toast, has a time limit. Even if the user does not respond, the pop-up window will automatically disappear after a period of time.

Snackbar pops up a small message as a reminder or message feedback. It is generally used to display the results of an operation. In addition, it can provide a function button for users to choose to use.

For example, if you delete a picture, the App pops up a window to tell you that the deletion is successful, and provides an "undo delete" function button for you to perform the corresponding function operation. The example is as follows

Prompt bar: The difference from the prompt dialog box is that it is embedded in the page. The example is as follows

Floating Layer

The case is shown below

IV. Reminder method in mobile scene - heavy reminder

1. Application scenarios: irreversible, money-related or unrecommended changes, such as: ***delete, purchase, unfollow...

2. Design principles:

• Make sure users can see the prompt, even if it interrupts their current task.
• Active user action or selection is required to continue.

3. Method: Dialog box Dialog, function box Actionbar

4. Content structure: title, content description (may have pictures), options

5. Position on the page: Dialog boxes usually appear in the middle of the page, and function boxes usually appear at the bottom of the page

6. Accompanying state: there may be sound

7. The difference between iOS and Android: Similar in form

Dialog (called Alerts in iOS)

It is divided into information issuing category and information submission category.

When using Dialog, there are only two function buttons, allowing users to choose "yes" or "no" function operation;

It is also often designed with only one "Confirm" button, the purpose of which is to let users click to close the pop-up window after reading the content (for this style of Dialog, the information content must be so necessary that the user's operation needs to be interrupted to confirm the reading of the information content, otherwise please use Toast for non-modal pop-up prompts).

shortcoming:

If there are three or more function buttons in the Dialog box, it will increase the user's function selection burden, so please consider using Actionbar when you need to use multiple function buttons. The example is as follows

Dialog box Dialog - Information sending case is as follows

Dialog box Dialog - Information submission class example is as follows

Function box Actionbar-operation bar (iOS called Action Sheets)

Actionbar is generally designed to display multiple function button selections to users. It has more function buttons than Dialog and provides users with more function choices. Actionbar is generally designed with a default "Cancel" function button. Clicking this button closes the pop-up window. When the user clicks outside the pop-up window, it is equivalent to the default response of clicking the "Cancel" function button.

In iOS, the most common style of Actionbar is a text list box, which appears at the bottom of the page and displays function buttons with concise function description text. Sensitive function operations are generally marked in red font (other colors can also be designed to highlight a function button). The example is shown in the figure below

Actionbar - Action menu (called Activity Views in iOS)

When there are many function buttons, the text list format is not suitable for display. In this case, it can be displayed in the form of graphics and text descriptions. In this case, the menu format is more suitable. The example is shown in the figure below

Actionbar - Action menu (called Activity Views in iOS)

When there are many function buttons, the text list format is not suitable for display. In this case, it can be displayed in the form of graphics and text descriptions. In this case, the menu format is more suitable. The example is shown in the figure below

5. Optimization solutions on the market

If it can be displayed in the interface, there is no need for a pop-up window. If a non-modal pop-up window can be used, do not use a modal pop-up window.

At this time we have 3 solutions:

1. It is displayed through a new interface. However, we can see that there is not much explanatory information and it does not need to be displayed through a new page.
2. Use a dialog box or a floating layer. We cannot use toast here because the toast time is too short and the user cannot finish reading it.
3. Displayed on the current interface.

In summary: Try to display it on the current page and don’t make unnecessary reminders.

Display information directly on the current page. The example is as follows

Use multi-state buttons to represent states, as shown below

VI. Summary: Overall Principles

Whether it is a modal pop-up window or a non-modal pop-up window, its appearance will more or less affect the user's current experience, so we should use pop-ups with restraint, first prioritize the information to be displayed, and choose the appropriate reminder method according to the strength of the demand. Only low-frequency and reasonable use will make users take it seriously. Avoid excessive use.