UX Design Suggestions

Based on the characteristics of the Mini-Program, we have formulated mini progmini design recommendations. The aim is to establish a friendly, efficient and consistent user experience within the Mini-Program ecosystem on the basis of fully respecting users' right to know and operate, while maximizing adaptation and support for different needs and achieving a win-win situation for both users and Mini-Program service providers.

Mini-Program Design Guidelines

• Uniformity: unified design language for Mini-Programs, emphasizing framework generality and interaction logic uniformity.
• Extensibility: multiple expansion styles to choose from, clear operational guidelines, consistent use of controls and interactions.
• Lightness: systematic design, simplification of hierarchy, reduction of unnecessary interaction and page jumping.
• Efficient: clear functional structure, simple interaction logic, timely feedback, in line with the principle of intimacy.

Mini-Program Design Concept

Focus on the use of scenarios

For the Mini-Program, it is important to clarify the use scenario of the Mini-Program users when designing the product. Combined with the real needs of the users when using the Mini-Program, it needs to meet the simple, light and efficient experience of the Mini-Program. In the design of mini programs, remember to control the demand boundary.

Provide Clear Interaction

In the Mini-Program for dynamic design and one-time use settings need to be well balanced, making the user's operation simple, easy to understand and easy to use.

• The user path of the Mini-Program must be single (there can be many function points, but the path must be single).
• Well-designed one-time use mechanism (provide the necessary guidance information for the first time, reduce strange interaction design, use the interaction mode that users are used to).
• Reduce dynamic design and decorative elements (but not in conflict with the brand tone design).
• Clearly lay out complex information in a way that is easy for users to understand and use.

Ensure Focused Use

Most of the time when users use the app, they only want to solve some specific goals (purpose) of the problem, so when the user operation as far as possible, the user needs to complete the process of detailed and thoughtful design, so as to reduce the user's heart anxiety and unnecessary heart resentment.

• Reduce unnecessary page jumps, reduce the cost and anxiety of adapting to different pages.
• Replace the cumbersome content of input and forms with options, auto-fill and user data.
• Add skeleton screens to increase users' psychological security (pre-load state).

Mini-Program Design Review

The design review of the Mini-Program can help the Mini-Program designer to improve the design efficiency and check the completion and accuracy of each design experience point, please mark the completion of the walk-through before checking that there are no problems. Pages that do not meet the design experience standards will affect the user experience of the Mini-Program.

Core Experience Concerns

• LOGO clear and recognizable
• Uniform function icons
• Clear picture material
• The frequency of using non-user-triggered pop-ups on the same page is limited to 2
• Correct use of navigation
• Clear and reasonable use of overall page color
• Uniform visual elements (ICON, font, spacing, etc.) on the page
• Reasonable use of dynamic effects on the page
• The default state of the page is expressed

Architecture and Process

• Information architecture is clear and easy to understand, with clear guidelines
• The relationship between navigation is clear and easy to understand
• Clear and reasonable information hierarchy in the page, smooth visual flow of information, clear focus
• Consistent user experience paths in similar tasks
• The operation path meets user expectations

Interface Presentation

• Page layout conforms to specifications
• Basic controls use components
• Font size and color are consistent
• Good experience in using page color, can clearly convey information
• Information hierarchy is clearly displayed

Data and Display

• Display default images/placeholders for missing data content
• Design truncation and display strategy for data that cannot be displayed completely
• Data limit value consideration

Copywriting

• No misspellings
• Copy is simple and easy to understand, no ambiguity
• No out-of-the-way terminology used

Processes and Special Scenarios

• All operations have feedback
• Loaded state has been designed
• Feedback for failed operations, with explanations and suggestions provided
• Special network states are responded to (weak network, timeout, no network)
• Various login states are responded to (not logged in, after logging out, account switching, guest account)