WeChat Mini Program Design Specifications (3) Convenient and Elegant

3. Convenience and Elegance

From the physical keyboard and mouse in the PC era to fingers in the mobile era, although the input devices are greatly simplified, the accuracy of finger operations is much less accurate than that of the keyboard and mouse. In order to adapt to this change, developers need to make full use of mobile phone features during the design process to provide users with a convenient and elegant control interface.

1. Reduce input

Since the mobile phone keyboard area is small and dense, input is difficult and it is easy to cause input errors. Therefore, when designing the mini program page, the user input is minimized. The reason is that interface or some other easy-to-operate selection controls to improve the user input experience.

Reduce input and use interfaces skillfully

For example, in the picture below, when adding a bank card, the camera recognition SDK interface is used to help the user input. In addition, the WeChat team has also opened up various SDK interfaces such as the geographical location interface (see WeChat JS-SDK for details). Making full use of these interfaces will greatly improve the efficiency and accuracy of user input, thereby optimizing the experience.

In addition to using the interface, when the user has to make manual input, try to let the user make choices instead of keyboard input. On the one hand, recall is easy to remember, and it is usually easier for users to choose among limited options than to rely entirely on memory input; on the other hand, it is still considered that the dense single-key input on mobile phone keyboards can easily cause input errors. For example, in the figure, providing search history shortcut options when users search will help users search quickly and reduce or avoid unnecessary keyboard input.

2. Avoid misoperation

On a mobile phone, we touch the screen with our fingers to control the interface. The accuracy of finger clicks is far less than that of a mouse, so When designing controls that need to be clicked on the page, the hot zone area needs to be fully considered to avoid misoperations caused by the clickable area being too small or too dense. When the interface originally used on the computer screen is simply transplanted directly to the mobile phone without any adaptation, such problems are often prone to occur. Since the screen resolutions of mobile phones are different, the optimal click pixel size is not entirely consistent, but when converted into physical size, it is roughly between 7mm-9mm. In the standard control library provided by WeChat, various controls have taken into account the page click effect and adaptation to different screens, so it is again recommended to use or imitate the standard control size for design.

3. Use interfaces to improve performance

WeChat Design Center has launched a set of web standard control libraries, including the sketch design control library and the WeUI reconstruction code library. These controls have fully considered the mobile page. features to ensure its usability and operational performance on mobile pages; colleagues, the WeChat web development team is also constantly improving and expanding the WeChat JS-SDK interface and providing WeChat public libraries. Using these resources can not only provide users with faster service, and has a great effect on improving page performance, which invisibly improves user experience.