H5 app designers need to be aware of issues

We usually do H5 app design process, encountered many seemingly very small, and very easy to ignore the problem, it is these small problems, again and again the user's patience, so that users of your app heart resentment. Now WeX5 June hematemesis for everyone to sort out the H5 app design 21 Taboo, hope and H5 app designer's you share.

1. Don't start designing or drawing a wireframe before you have a flowchart

Even a simple H5 app should have a thoughtful flowchart to ensure that the H5 app has a logical and reasonable navigation structure. Skip the flowchart direct into the development will make the development complex, not controllable, it is easy to confuse users, and finally choose to switch off or uninstall your App.

2. The Division of labor to be clear do not neglect development budget

A planned H5 app may have a search box that the designer envisions as a type search that produces real-time results, but the designer can't be the only one making the big decision.

3. Don't feel free to use introductory animations

If you're going to use introductory animations, make the animation time as short as possible, the design as fine and attractive as it should be, and it's worth the user's time to wait.

The App loads the image before it transitions to the animation. Make sure the excess is smooth and natural. It's boring to have apps that transition from loading pictures to introducing animation designs that are very lame.

4. Do not let the user empty wait

The APP's long loading time makes it easy for users to think that something is wrong, and it can lead to a bad user experience. When the app loads, don't let the user see the blank screen, use the load indicator bar or small animation to let the user know that the app is in normal operation.

5. The menu level is too deep

menu items to 5~7, if there is a level two menu, you should pay attention to a reasonable menu classification, can not have too many levels of the menu, otherwise difficult to anticipate, it is difficult to find, find and return will become very troublesome.

6. Too many interactive process branches

When doing the interaction must have a task flow concept throughout, the user is to complete a task and use the software, interaction designers in addition to focus on interface elements, jump logic and interactive feedback, but also focus on user tasks, to clear the main tasks and secondary characters, to the main task of a clear flow of unimpeded, Do not give too many possible branches to interfere with the main process.

7, the relevant options are far away

Relevant options must have operational continuity, if the relevant selection on the phone is far away, the user one is easy to get lost, can not find the next operation, the second is to move the finger, to the other side of the screen to trigger the operation.

8. Load too much data at once

If your application is not reasonable to help users save traffic, power, improve browsing speed and browsing experience, to ensure the stable performance of the application, do not talk about what user experience.

9. Expose all operations

H5 App product interaction design to go through the process of shrinking, hiding, attaching, organizing, do not try to put what function, what operation are exposed, in order to demonstrate the strong. You need to put all the functions of the application of your own priority settings, those commonly used in 20% of the function, placed in the main interface, the other 80% of the operation, placed in a secondary position or a reasonable classification of the organization, hidden can be.

10. No empty Data interface design

When we do the design, often is to provide the idealized scene, the user has come in, we how to play. However, often when the application just launched, there is no user, even when the application has a certain user base, when the new users open the application, the application may still be a state of no data, or when the user clear all the data, these three cases, users may encounter empty data interface.

11. User-Directed abuse

If it is a general-purpose, non-focus module, there is no need to boot, if it is a function to inform, just light-weight boot, if the version of the update instructions, manual guidance can be used, but to be concise.

12. No loading state

H5 app products as long as the need to network, need to exchange data, need to provide a loading state, whether it is a daisy or toast or dialog box, and to take into account the loading time is too long, the network switch is not open, the network is not connected, such as how to deal with the situation.

13. Don't forget gestures but don't misuse

Not every element is visualized, such as the delete process of the IPhone Mail app. In the Inbox, the user can bash the screen to display the Delete button, and the user does not have to click "Edit", select the message and then delete the message.

14. Don't think that every user has the same App you use

Usability testing is a must, no matter how good your App looks. Find someone to trust (or an experienced designer) for a small-scale, closed test that updates the interface before it's publicly released. Another easy way to get user feedback is to post ads on the classifieds site to recruit the right people for focus group testing.

15. Importance of pre-launch testing

For the H5 test, there is no difference with the app test items, mainly is the terminal's accessory problem, especially the different terminal browser system and resolution, but the same is, the app is installed, start steps, relatively simple. But in UI Automation testing, functional traversal testing is nothing different.

H5 app designers need to be aware of issues