Talk about the design differences between Web App, Hybrid app and native app

Editor's note: Do you know all these 3 mainstream applications? Designers in addition to have visual Kung Fu, to different forms of the app should also be clear on the chest, today Baidu classmate wrote a very comprehensive summary, to help you quickly fix 3 kinds of mainstream app design method, with a large wave of lightning rod, with you cleverly skip the app design of the minefield, up posture is minutes of urgent things!

Mainstream applications are broadly divided into three categories: Web app, Hybrid app, Native app.

One, Web app, Hybrid app, Native app portrait contrast

First, let's look at what is Web app, Hybrid app, Native app.

1. Web APP

Web apps are apps written in the HTML5 language and don't need to be downloaded and installed. Similar to what is now said about light applications. Survival in the browser of the application, basically can be said to be touch screen version of the Web application.

Advantages

(1) Low development cost,
(2) Update fast,
(3) Update without notifying the user, do not need to upgrade manually,
(4) Ability to span multiple platforms and terminals.

Disadvantages:

(1) Temporary entrance
(2) Unable to get system-level notifications, reminders, action, etc.
(3) Low user retention rate
(4) The design is limited by many
(5) Poor experience

2. Hybrid App

The Hybrid app refers to a semi-native, semi-web, mixed-class app. Need to download the installation, looks like the native App, but only a few UI Web View, access to the content is the Web.

For example, in the store's news app, the video class app is commonly adopted as a native framework for Web content.

The Hybrid app is trying to create an experience similar to the native app, but it's still limited by technology, speed, and many other factors. Not perfect yet.

3. Native App

Native app refers to the native program, generally rely on the operating system, there is a strong interaction, is a complete APP, can be extended strong. Users need to download the installation to use.

Advantages:

(1) Create the perfect user experience
(2) Stable performance
(3) Fast operation speed, easy to get started and smooth
(4) Access to local resources (newsletters, albums)
(5) Design Excellent dynamic effect, transition,
(6) Have a system-level intimate notification or reminder
(7) High user retention rate

Disadvantages:

(1) High distribution costs (different platforms have different development languages and interface adaptation)
(2) High maintenance costs (such as an app has been updated to the V5 version, but there are still users using V2, V3, V4 version, need more developers to maintain the previous version)
(3) Slow updating, depending on the platform, submit – Audit – go live and so on different processes, need to pass the process more complex

second, Web app, Hybrid app, Native app technology features

By visible, Web APP development is based on HTML5 language. And the HTML5 language itself has the unavoidable limitation. It is these limitations that make web apps less experienced than native apps.

third, Web app restricted factors and design essentials

Compared to the native App,web App experience, it is limited to 5 factors: network environment, rendering performance, platform features, limited by browser, system limitations.

1. Network environment, rendering performance

Web apps are more dependent on the network environment because the H5 page in the Web app, when the user uses it, goes to the server to request that the page be displayed. If at this time the user happens to encounter network speed slow, instability and other environment, the user requests the efficiency of the page is greatly reduced, in the user's use will appear not smooth, intermittent bad feeling. At the same time, H5 technology has weak rendering performance: the support of complex graphic styles, various dynamic effects, custom fonts, etc. is not strong.

Therefore, based on the impact of network environment and rendering performance, the following points should be noted when designing H5 pages:

• Simplified animations/dynamic effects that are not important
• Simplify complex graphic text styles
• Reduce page rendering frequency and number of times

From the mobile web version of Jing.fm and native version of the Jing comparison can be seen: The Web App home page to remove redundant features, back to the source, only to provide users with jing.fm the original essential needs-radio. It meets the design principle of H5 and the core function. Undoubtedly give the user a bright breath.

As one of the core points of the book, "The Beauty of the moment", it is not how much information we provide, but whether we can provide them with what they really need.

Does the user really care about the exact information? This article gives you another new perspective! "Great recommend!" How do you design flyers so they don't get thrown away? 》

Again, such as: Baidu's latest launch of the direct number, taking good son fitness as an example:

From the native app and the Web App (Baidu Direct) in the comparison, we can see that native in the form of nine Gongge, and is dual navigation, the function of the entrance too much, the disadvantage is that users do not know where to focus, distract users. and the web version of the Good son integration and reduce the navigation of the entrance, enhance the user's focus; The interface is clean and tidy, which conveys the moral meaning of the child itself-------------easy, pleasant, relaxed and comfortable.

2. Browser-restricted

Web apps typically live in a browser, and the host is a browser. Different browser properties are not the same, such as: The browser's own gestures, page switching mode, link jump mode, version compatibility issues and so on.

For example: The UC browser and Baidu browser itself support gesture Switch page. Swipe the page from the left to return to the previous level. Baidu Mobile Phone Assistant H5 page, the top of the banner support gesture left and right swipe switch. This action is in conflict with the browser's own gestures.

For example, a browser-based web app will open a new window when it opens a page in a new module. For example, when users browse the daily featured module when they are using the shopping app, a new window is opened by default whenever a new item is opened. The advantages are obvious: The advantage is the ability to record user-viewed traces, viewed goods, so that the subsequent horizontal contrast; The disadvantage is that too many pages are easy for users to get lost in the page.

As the Google Development Manual describes: when users open a web app, they expect the app to be like a single application rather than a combination of a series of pages. However, there are situations where a jump page is required, and in what case the current page will require careful consideration by the designer.

Therefore, Web app based on browser features, from the design point of view should follow the following two points:

Use less gestures to avoid conflicting with browser gestures.

Reduce the number of page jumps, as far as possible on the current page display.

3. System limitations, Platform features

System-level permissions cannot be invoked due to the technical nature of the HTML5 language. For example, system-level pop-up windows, System-level notifications, geographic information, contacts, voice, and so on. And the compatibility with the system also has some problems. These limitations often result in apps being less scalable and experiencing relatively poor experience. For example, Baidu Map:

Web version of the map based on the browser display, therefore, not full-screen display of the map, to the user's vision to bring a sense of limitation; instead, the Native version of the map in full-screen display, very good to expand the user's vision. The whole interface is clean and concise, the homepage removes redundant function.

In the experience of developing a route,

Web maps consume more traffic than the native version, and cannot pre-cache offline maps. The location is also judged based on the host browser, not the Web map itself. After obtaining the route, it is relatively not convenient for the replacement arrival mode.

On the contrary, the Native version of the map, direct access to the user's geographical location, can clearly show the user the app planning route, and can easily view a variety of route plans, in order to make the best solution for their own. For switching buses, walking, self-driving and other routes are just one-click operation.

Native version of the map with respect to the Web version of the add more emotional, easy-to-use features, such as: the ability to record the user's life track, record the user's footprints, to enjoy the escape congestion program. The web version of the map based on the technical framework, it is difficult to achieve the above features, from the user experience point of view, weaker than the native version of the map.

Iv. Summary

As described in the review, when designing a Web app, you should follow these points:

1. Simplifying

• Simplified animations/dynamic effects that are not important
• Simplify complex graphic text styles

2. Use less

• Use less gestures to avoid conflicting with browser gestures
• Less use of pop-up windows

3. Reduce

• Reduce page Content
• Reduce the number of controls
• Reduce the number of page jumps, try to display on the current page

4. Enhanced

• Interest in enhancing loading
• Enhance the primary and secondary relationship of pages
• Enhanced Control reusability

Talk about the design differences between Web App, Hybrid app and native app