What are the interactive design differences between WEB apps and native apps?

From the use scenario, Web app users are facing more serious problems than native app users:

　　1, the page jumps more laborious, the unstable feeling is stronger

Thinking points: How to reduce the jump (flat structure, page layout skills), increase data and display flow and stability (technology)

　　2, a smaller page space (because the browser's navigation itself occupies a part of the screen space), a greater burden of information memory

Mobile devices have a much smaller screen. This, like reading through the door, adds to the burden of cognition. The short-term memory of the human brain is unstable, and the more information the user needs to remember during scrolling, the worse they will behave. -Intimate design: creating highly available mobile products

Thinking points: More clear typography, more concise information (can remove some rich, complex visual performance on the basis of native app)

　　3, the navigation is not obvious, the original bottom navigation disappears, the effective navigation meets the challenge

Thinking point: How to provide navigation effectively? What are the forms?

　　4, Interactive dynamic effect received restrictions, affecting some of the page scene, logic understanding.

Thinking points: For example, login registration process pop-up, complete and abnormal exit, do a good job writing tips.

　　For the above dilemma, the solution is summarized as follows:

First of all, from app to WAP edition, on the product, the most obvious and core:

　　1, the streamlining of functions, only the core of the task to achieve, Non-core side can be considered for deletion.

　　2, do a new web App navigation.

　　3, supplemented from the Web app to download the native app boot.

　　First, a few common web App navigation styles

1.1 The top bottom navigation design:

1.2 Navigation shortcut key design:

American Regiment: Top Bar Fixed position

Taobao: Floating Circle – Expandable button

Youku: The right side of the page is suspended when not the first screen

　　Second, effective navigation design

　　1, the basic shortcut navigation includes the return to the common page (for example homepage Mine etc.) the shortcut

　　2, the emergence of deep architecture in time to add back to the important level of the page shortcuts

　　3, situational navigation, user-friendly quick jump to ta want to go to the page, such as the purchase at the end of the offer to view the Order Details button.

Ps:web app more need to draw the flow chart of page jump, find out the entrance of each page, especially the process that the page returns; some simplified return buttons can be specially marked to return to the page

　　Where does the guide appear?

General homepage, the core task of the page (such as the Electronic Business Web App product Details page, video web App video viewing page)

What are the forms of the download app?

Place the download bar at the top of the page

The bottom of the page is suspended layer boot

Merge in the first screen of the page

Download button Form

The bottom foot contains the client download portal

Second, when designing web apps, you have the following tips to refer to:

　　1, from the page layout to reduce the jump: using interactive techniques to hide text (eg Tencent video)

Use the Unwind button to reduce page jumps.

　　2, cancel float float layer, enlarge exhibition space (eg: public comment)

Cancel the float float and add the "buy" button again at the end of the details.

The conversion process of the floating layer.

　　3, the page of the picture to reduce (as a result of the situation) of the processing, streamlining some of the label navigation visual display.

Visual fine-tuning.

　　Technical Attention points:

1 compatibility test of each mobile browser

2 The bottom service of the transfer (can be transferred, but only when it is the core function to retain eg: Sina, the United States and so on are removed Avatar upload function)

3 attention to off-line data storage, reduce the frequency of data requests.

4 Consider what data to save users: settings, personal data, reading anchor points, jumping out of the page, and so on.

5 Avoid interactive conflict between dynamic effect and browser

6 asynchronous loading in sequence eg: Tencent video

Tencent video is loaded asynchronously.

Although the Web app is now in a more awkward position, we started making the Web App version because some pages in the original app client needed to be shared.

But admittedly, web based lightweight app updates are easier to iterate through, and with the maturity and development of H5 technology, it may be that the world of Web apps based on H5 is 0.0