General UX Principles

There are several principles that you should follow when designing an app to create a consistent user experience. Here are our General UX Principles that can help you in delivering the best app design.

Highlight important points

Each screen should have a clear focus so that the user can easily understand the content. The user should have minimal distraction by the elements that are unnecessary and unrelated to the user's decisions and the intent of the screen.

Distribute information clearly

When you design a screen, it is necessary to ensure that users can easily distinguish primary information from secondary information and the amount of information in one level is not too much.

Clear navigation and freedom of movement

It is important to protect users from getting lost when browsing through pages. Navigation must inform the users of their current location, possible destinations, and how to get back.

The following notes should be considered when designers make Mini App navigation bar:

• Merchants should use the color of the brand as the color for the Navigation bar.
• Avoid using the same color as the branding color of the MoMo Super App.

• In case the merchant branding color is not suitable for use, white can be used as a safety measure.

User-friendly interface

The design of the interface can help users quickly understand the operation of the screen. Therefore, the designer should avoid the influencing factors unrelated to the user’s decision or the purpose of the screen.

Provide clear action step

When the user performs actions on the screen, avoid disturbing the user with irrelevant content and interrupting the user with unwanted events.

When using pop-ups, it is essential to pay attention to how often they are displayed and displayed to avoid causing discomfort to users.

Control error cases and provide guidance

When an error occurs, it is necessary to notify and give instructions to the user accordingly on a case-by-case basis:

• When an error occurs, it is necessary to report the reason precisely, identify the error, and guide the user to correct it. The user should be notified of the invalid fields on input screens to facilitate easier modification, especially those with multiple information fields.
• When there is a system error (network or server problem) or a local error on the screen, it should be reported and given the corresponding handling button.

Reduce wait times with quick responses

Waiting times that are too long can lead to user dissatisfaction. Appropriate feedback and clear results messages are required when excessive load times cannot be avoided. Some general notes are as follows:

• If the data takes a long time to load, a progress bar should be displayed, and aborting action should be provided to the user.
• During loading, the effect should be displayed continuously to avoid confusing the interface with freezing.
• On the same screen, it is not recommended to use multiple loading effects at the same time.

Ux writing

The copywriting of the Mini App should be simple, consistent, and universal. The wording of the text should be familiar and easy to understand for users. Avoid using language that is too specific in particular expertise. Ensure the content is clear and concise to avoid misunderstanding.

For more information, please refer to UX Writing Guidelines.

Streamline number of tab bar

If not needed, there is no need to use the Tab Bar. Try to provide the main functions of Mini App on one page. Choose the shortest step to get to that function instead of going back and forth with the tab bar. If the use of the tab bar cannot be avoided, refine the core functionality of the product and use no more than three modules in the bottom tab bar.

Minimize user input

Since the mobile keyboard area is small, users are more prone to making mistakes. Therefore, designers should handle the user’s input with alternative options and reduce direct input as much as possible.

For example, Mini App can use API or data requests to fill some existing data automatically. This method can help provide the user with accurate information, enhance user experience, and reduce errors in data.

In case you do not want to use API or data, you can provide the user with predefined or auto-generated options.

Tutorial

Use tutorials only to guide complex, multi-step operations. Don't use tutorials to solve bad UX problems.

Do not use tutorials to highlight or showcase features. In cases that the guide needs to be highlighted, we use the tooltip instead.

For more information, please refer to our Tutorial guide.