Feedback

After a user completes an operation in a Mini Program, the Mini Program is required to give feedback. In this case, the user can have a feeling of control and know that the Mini Program is running normally, and proceed to the next operation.

After a user completes an operation, the Mini Program needs to load or refresh content, which takes some time. In this case, dynamic loading feedback is needed to indicate that the operation has taken effect and the Mini Program is loading or refreshing content.

Feedback in a Mini Program is an interaction between the Mini Program and users. You can use texts to inform users of the results of their operations.

Loading Feedback

Start-up Page Loading

The start-up page of a Mini Program is the interface that appears after a user starts the Mini Program and before the Mini Program completes loading content. The start-up page can contain the brand logo of the Mini Program and a dynamic loading component. Dynamic loading feedback informs users that the Mini Program is loading content at the moment, which can relieve the anxiety of users while waiting. If a new version of the Mini Program is available, you can inform users of the new version on the start-up page so that users can upgrade the Mini Program. In this case, the start-up takes slightly longer than usual.

Page Loading

Page loading refers to the dynamic loading feedback that appears before the Mini Program completes loading content of the current page. Before content is loaded on a page, users focus their attention on the navigation bar. Therefore, we recommend that you place the dynamic loading component below the navigation bar. This can help users see the component and know that the Mini Program is loading content. You can also add a progress bar below the navigation bar to show the loading progress.

Toast Loading

You can also use the toast component to provide loading feedback. A toast has a strong visual effect that will attract the attention of users. The toast component is suitable for loading processes that do not take a long time, such as quick switching between pages. The toast component does not show the loading progress. If the page contains a lot of content and takes a long time to load, we recommend that you use this component with caution to avoid user anxiety.

Skeleton Loading

As a common loading style, skeleton loading uses a simple graph to outline the content of the page to be loaded. The benefit of this style is that users can expect what content to be loaded on the page while waiting.
Loading feedback must be dynamic and inform users of the normal running status of the Mini Program in real time. Therefore, the process of skeleton loading must also be dynamic. In design, you can configure a graphic with color gradient to achieve dynamic feedback.

Swipe-Down-To-Refresh

When a user refreshes the content on a page, a loading process is triggered. For example, for feed flow products, mobile users have become accustomed to refreshing the page content by swiping down the page to a specific length and then releasing the page. This scenario also requires feedback for loading.

When a user swipes down the page to a specific length, the loading component appears below the navigation bar. The loading component uses a text to remind the user to release so that the page will start loading.

Button Loading

Button loading feedback refers to the dynamic loading feedback that is displayed inside a button after a user taps on the button. This type of feedback is more targeted and informs the user that the tap has taken effect.

Text Feedback

You can use dynamic loading feedback to inform users whether the Mini Program is running normally. As for detailed running information about the Mini Program, you must use text feedback to inform users. The most common method is to add a text about the running information in a toast. When the Mini Program is required to display running information to users, the toast appears as a floating layer.

Toast

Toast feedback refers to a black floating layer that appears in the center of a page. The floating layer can contain only texts or a combination of icons and texts. This layer usually disappears in around 1.5 seconds. This type of feedback is less intrusive to users and is generally used for lightweight feedback. If the feedback contains status information, we recommend that you use a combination of texts and icons so that users can identify feedback information faster.

Dialog

Dialog box feedback refers to a modal component that appears in the center of a page after a user completes an operation. This modal component allows the user to focus on the feedback and disappears only after the user completes the task in the dialog box. This type of feedback is more intrusive to users and is generally used for feedback that is important and requires users to make choices.

A dialog box generally consists of a title, a description, and operation buttons. The description is optional.

The title must be as concise as possible. You can use a question or a short statement. Description information is optional. If a description is needed, limit the description information to one to two lines.

As for texts on buttons, we recommend that you use verbal phrases to describe the operations instead of using ambiguous texts such as yes-no questions. For destructive operations such as deletion, you can use red buttons.

Result Page

If feedback is necessary after a user completes an operation, you can use a full-screen result page to provide the feedback. This provides users with feedback to the greatest extent and allows users to perform corresponding operations.