All Products
Search
Document Center

Feedback

Last Updated: Feb 05, 2021

One of the most important aspect in the process of human-computer interaction is the operation feedback. We should give timely feedback to the user’s operation, and immediate response will improve user’s trust in interaction.

mPaaS provides a series of feedback components where you should select the correct one for feedback under different scenes.

Feedback principle:

  1. Provide necessary, positive and immediate feedback for users at all stages of operation;
  2. Avoid excessive feedback, so as not to cause unnecessary interruption to the user. It is recommended to provide the feedback that can prompt simple and effective operations. The feedback prompt can be omitted.

Necessary feedback

Provide necessary, positive and immediate feedback for users at all stages of operation.

  • Correct example: When a blank page opens, a prompt appears to inform users that they need to wait

    1

  • Error example: When a blank page opens, no waiting prompt appears

    2

Avoid excessive feedback

Excessive feedback can cause unnecessary interruptions to the user and should be avoided.

  • Error example 1: When the user actively closes the cashier, a dialog box pops up to let the user confirm whether to quit, which is very unnecessary.

    3

  • Error example 2: In the service window, when a service window is deleted, a deleted successfully toast is displayed. At this point the page state has changed significantly, this toast is completely unnecessary.

    4

Start page loading

In an application, a start page is one of the pages that are used by the MINI to displays brand characteristics.

This page will highlight the MINI’s brand characteristics and loading status. Except for the brand logo, all other elements on the start page, such as loading progress indicator, are provided by mPaaS and cannot be changed. This eliminates the need for the development.

5

ActionSheet

The action sheet is a special type of pop-up box that displays multiple action options.

6

Definition and principle

  • The action sheet provides the user with multiple action options to choose from.
  • The maximum height of the action sheet is limited and the maximum number of action options is 5.
  • The action sheet is a special form of pop-up box. When it appears, the page will be covered by a semitransparent mask.

ActivityIndicator

The loading component visualizes the loading process of the page content, reducing the anxiety of the user during the waiting period.

Definition and principle

When a user enters into a new page or performs a submit action, and the page loading requires the user to wait, we should use the progress bar to inform the user of the loading progress. Otherwise, the user will feel absently and the waiting seems endless, thus leaving your page with anger.

We provide two styles, i.e. progress bar and progress ring, and define them separately.

7

Example

  • Loading progress bar on page launch:

    When the user loads a brand new online page using the mPaaS framework, a loading progress bar will appear below the navigation bar to show the progress of the current page content loading. The loading progress bar is provided by mPaaS and cannot be changed. This eliminates the need for the development.

8

  • Modal loading:

    Modal loading can be used when the user has to wait for a page to load after a submission action, and the modal loading style covers the entire page. Since the specific loading location or content cannot be clearly communicated to the user, the modal loading may cause anxiety and should be used with caution. Try not to use modal loading except under some global operations.

9

  • Partial loading:

    The partial loading feedback means that the feedback is only given on the partial page that triggers loading. This feedback mechanism tends to be highly specific and causes minor content jumping, which is a recommended feedback method in mPaaS.

10

Dialog box (Modal)

A dialog box is used to inform users about critical information, or require users to make necessary decisions.

11

Definition and principle

A dialog box consists of one or two descriptive sentence(s) and action buttons. It has two usage patterns:

  1. Confirm and cancel important operations (such as whether to delete content);
  2. Inform the user of very important information (such as a serious error). The bold text are often used to highlight actions that may cause user loss (for example, “Delete”, “Don’t Save”, “Cancel”).

The dialog box must be used with caution. The dialog box is only used to prompt users of the content that they are required to know or the decision that they are required to make. Otherwise, use other weaker feedback methods such as toast.

Visual style

A standard dialog box consists of three parts: a title bar, main instruction, and commit buttons. A special type of dialog box can be configured with images and illustrations to facilitate better communication.

12

13

Example

Warning and error

  • When the user’s operation may cause irreparable damage, a double confirmation dialog box should be appeared to alert users.

    Double confirmation for Delete action:

    14

  • When an error occurs in the user’s operation, the dialog informs the user of the cause of the error and what to do next.

    Form submission error:

    15

Special dialog with illustration

Under some scenes, you may want to use a dialog box with images to lively convey relevant information, in such case a special dialog with illustration can be used.

16

17

Toast

Toast provides lightweight feedback about an operation or message prompt, in other words, it is actually a weakened version of the dialog box. Like a bubble, it disappears on its own after a few seconds (1.5 seconds or 3 seconds) on the interface. It does not force the user to perform any operation or confirmation, so it reduces interruption compared with the dialog box.

Toast is typically used to confirm the status or result of user task, and can also prompt the user of less important information, such as network abnormal condition, loading failure, and the like.

18

Definition and principle

  • If you can timely see the status change on the page, the toast should not be used in order to avoid excessive feedback.
  • Toast loading is a block type loading, which should be used sparingly and replaced by other methods if possible.
  • The duration of toast is shorter, so the copy can only display up to 15 characters.