On the design differences between Web App, Hybrid App and Native App

Currently, mainstream applications can be roughly divided into three categories: Web App, Hybrid App, and Native App.

1. Vertical comparison of Web App, Hybrid App and Native App

First, let’s take a look at what Web App, Hybrid App, and Native App are.

(1) Web APP

Web App refers to an App written in Html5 language, which does not need to be downloaded and installed. It is similar to what we now call light applications. Applications that exist in browsers can basically be said to be touch-screen versions of web applications.

advantage

(1) Low development cost,

(2) Fast update,

(3) Updates do not require notification to users and do not require manual upgrades.

(4) Able to work across multiple platforms and terminals.

shortcoming:

(1) Temporary entrance

(2) Unable to obtain system-level notifications, reminders, animations, etc.

(3) Low user retention rate

(4) The design is subject to many restrictions

(5) Poor experience

(2) Hybrid App

Hybrid APP refers to a hybrid app that is half native and half web. It needs to be downloaded and installed, and looks similar to Native App, but has only a few UI Web Views, and accesses the web content.

For example, news apps and video apps in the Store generally use Native frameworks and Web content.

Hybrid App tries its best to create an experience similar to Native App, but it is still limited by technology, network speed, and many other factors. It is not perfect yet.

(3) Native App

Native APP refers to a native program, which is generally based on the operating system, has strong interaction, is a complete App, and is highly scalable. Users need to download and install it for use.

advantage:

(1) Create the best user experience

(2) Stable performance

(3) Fast operation and smooth operation

(4) Access local resources (address book, photo album)

(5) Design excellent animations and transitions.

(6) Have system-level thoughtful notifications or reminders

(7) High user retention rate

shortcoming:

(1) High distribution cost (different platforms have different development languages ​​and interface adaptations)

(2) High maintenance cost (for example, an App has been updated to version V5, but some users are still using versions V2, V3, and V4, requiring more developers to maintain previous versions)

(3) Updates are slow. Different platforms have different processes such as submission, review, and launch, which makes the process more complicated.

2. Technical Features of Web App, Hybrid App, and Native App

As can be seen from the above figure, Web APP is developed based on Html5 language. However, Html5 language itself has inevitable limitations. It is precisely because of these limitations that Web App is inferior to Native App in experience.

3. Web App Restrictions and Design Points

Compared with Native App, Web App experience is limited by the above five factors: network environment, rendering performance, platform characteristics, browser limitations, and system limitations.

(1) Network environment and rendering performance

Web APP is highly dependent on the network environment, because when users use the H5 page in the Web APP, they go to the server to request the page to be displayed. If the user happens to encounter other environments such as slow network speed and unstable network, the efficiency of the user's page request will be greatly reduced, and the user will experience unsmooth and intermittent use. At the same time, the rendering performance of H5 technology itself is weak: it does not support complex graphic styles, various animations, custom fonts, etc.

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

Simplify unimportant animations/motion effects

Simplify complex graphic text styles

Reduce the frequency and number of page renderings

From the comparison between the mobile web version of jing.fm and the native version of jing in the figure below, we can see that the web APP homepage removes redundant functions and traces back to the origin, providing users with only the original essential needs of jing.fm - radio. This not only complies with the design principle of H5 to simplify functions but also achieves the design principle of highlighting core functions. It undoubtedly gives users a bright breath.

As one of the core points in the book "The Beauty of Moments" says: What is important is not how much information we provide, but whether we can provide them with the information they really need.

Another example: Baidu*** launched a direct number, taking Liangzi Fitness as an example:

From the comparison between Native App and Web App (Baidu Direct Access), we can see that Native Liangzi is presented in the form of a nine-square grid, and has dual navigation, with too many function entrances; the disadvantage is that users don’t know where to focus, which distracts users’ attention. The Web version of Liangzi integrates and reduces the entrances of navigation, enhancing user concentration; the interface is refreshing and tidy, which well conveys the meaning of Liangzi itself - relaxed, pleasant, casual, and comfortable.

(2) Limited by browser

Usually Web App exists in the browser, and the host is the browser. Different browsers have different properties, such as browser-built-in gestures, page switching methods, link jump methods, version compatibility issues, etc.

For example, the following figure: UC Browser and Baidu Browser support gesture switching. Slide the page from the left to return to the previous level. Baidu Mobile Assistant H5 page, the top banner supports gesture switching by sliding left and right. This operation conflicts with the browser's own gestures.

For example, when a browser-based Web APP opens a page in a new module, it will usually open a new window to display it. For example, when a user uses a shopping APP and browses the daily selection module, a new window will be opened by default every time a new product is opened. The advantages and disadvantages of this are obvious: the advantage is that it can record the user's browsing traces and browsed products for subsequent horizontal comparison; the disadvantage is that too many pages can easily make users lost in the pages.

As described in the Google development manual: When users open a Web App, they expect the app to be like a single app, not a combination of a series of web pages. However, when to jump to a page and when to display it on the current page requires careful consideration by designers.

Therefore, based on the characteristics of the browser, Web App should follow the following two points from a design perspective:

Use gestures sparingly to avoid conflicts with browser gestures

Reduce the number of page jumps and try to display on the current page.

(3) System limitations and platform characteristics

Due to the technical characteristics of the Html5 language, system-level permissions cannot be called. For example, system-level pop-ups, system-level notifications, geographic information, address books, voice, etc. There will also be some compatibility issues with the system. The above limitations usually lead to weak scalability of the APP and relatively poor experience. For example, Baidu Maps:

The web version of the map is displayed based on the browser, so it cannot display the map in full screen, which gives the user a sense of limitation; on the contrary, the native version of the map is displayed in full screen, which greatly expands the user's vision. The entire interface is clean and simple, and redundant functions are removed from the homepage.

In the experience of making a route, as shown in the figure:

The web version of the map consumes more traffic than the native version, and offline maps cannot be pre-cached. The determination of geographic location is also based on the host browser, not the web map itself. After obtaining the route, it is relatively inconvenient to change the way of arrival.

On the contrary, the Native version of the map can directly access the user's geographic location, clearly show the route planned by the App to the user, and easily view multiple route options so that the best option can be made. Switching routes such as public transportation, walking, and driving only requires one click. Compared with the Web version of the map, the Native version of the map adds more emotional and easy-to-use functions, such as being able to record the user's life trajectory, record the user's footprints, and enjoy the congestion avoidance plan. The Web version of the map is based on a technical framework, and it is difficult to achieve the above functions. From the perspective of user experience, it is weaker than the Native version of the map.

IV. Summary

In summary, when designing a Web APP, the following points should be followed:

(1) Simplification

Simplify unimportant animations/motion effects

Simplify complex graphic text styles

(2) Use sparingly

Use gestures sparingly to avoid conflicts with browser gestures

Use fewer pop-ups

(3) Reduction

Reduce page content

Reduce the number of controls

Reduce the number of page jumps and try to display on the current page

(4) Enhancement

Enhance the fun of loading

Enhance the primary and secondary relationship of pages

Enhance control reusability

***: The editor recommends a group of excellent Web APPs to everyone

forecast.io/

m.ftchinese.com/phone.html

thenextweb.com

jing.fm

yuedu.fm

mail.google.com

plus.google.com

snowbird.com

everthing.me

m.vancl.com

pattern.dk/sun/

Please indicate the source as "Baidu MUX" when reprinting