Talk about the 6 big differences between Web sites and mobile apps

Interactive design for nearly 4 years, has been involved in Web sites and mobile app design, the former relies on the PC browser, the latter is based on mobile/tablet computers. Different devices/platforms have their own characteristics, so that there are some differences in the design of these two types of products.

Today, from an interactive design perspective, talk about the differences between Web sites and mobile apps, as well as the design points to consider.

　　One, the user and interface interaction/operation of different ways

Web site: To the mouse or touchpad as the media, more left-click operation, also supports the mouse over, the right mouse button operation mode.

Mobile app: Touch the screen directly with the finger, in addition to the most common click operation, but also support sliding, kneading and other complex gestures.

Design points:

1, compared to the mouse, finger touch range is more difficult to precisely control the location of the click, the iOS human-computer interaction specifications mentioned in the most appropriate touch area of the finger at least. So the click area of mobile app to set a larger number of different Click elements can not be too close to the interval.

2, the Web Web site to support the effect of the mouse, some tips tips usually use the mouse to slide over the expanded/closed interactive mode. Mobile apps do not support this kind of effect, unobstructed need to click on a specific icon to collect/expand the hint.

3, mobile app support rich gesture operation, such as through the left slide can see you may need the shortcut operation "Cancellation of attention", "delete", this type of operation is characterized by fast and efficient, but for beginners to have a certain learning, learn the cost. We also need to support the most common way of clicking to complete the operation path of the task while we are designing these quick operation methods rationally. For the high cost of gesture manipulation, some apps often teach users in a novice-led way.

4, mobile app is a single hand operation, the important elements of the interface need to be in the user's one-hand click Range, or provide quick gesture operation.

　　Second, the equipment size is different

Web site: Different PCs have different resolutions, the size of the browser window is maximized, and the browser window is scalable.

Mobile app: Device size is relatively small, different devices have more differences in resolution, especially Android, support horizontal screen, vertical screen switch direction.

Design points:

1, mobile app size is small, a screen display of limited content, more need to clarify which information is more important, effective "organization" associated with content, high priority content highlighting, secondary content appropriate "hidden."

2, the Web site because the browser resolution is larger, and the window size can be changed, the design needs to determine the different resolution of the content display and layout, but also because of this and webapp browsing needs, in recent years, more common response design.

3, due to equipment resolution, the DPI size is different, so mobile app in the interface layout, pictures, text display, to take into account the effects of various equipment, designers and development to work together to do a good job fit.

4, because mobile devices support horizontal screen, vertical display, so in the design of mobile app (such as games, video playback interface), you need to consider whether the user has "look for a different direction," the need to switch the screen direction, how to switch and so on.

　　Third, the use of the environment is different

Web site: Usually sitting in a room, using a relatively long time;

Mobile app: It can be used for a long time indoors, or it may be used at a time of fragmentation, or stand or sit or lie or walk, with a different posture;

Design points:

1, the use of Web sites, users more focused;

2, the use of mobile apps, users are easily affected by the surrounding environment, the content displayed on the interface may not be as easy to notice; Long time use is more suitable for silent browsing, when the use of fragmentation time users may not have enough time, each browsing content is limited, similar to "read Later", "collection" and other functions are more practical , users are more prone to misoperation during the move, and need to consider how to prevent misoperation and how to recover from errors.

　　Four, the network environment is different

Web site: The network is relatively stable and basic need not worry about traffic problems

Mobile app: Because the user environment is complex, it may be in the mobile process from the unobstructed environment to the closed signal poor environment, the network may be from there to no, from the fast to the slow, can not worry about the flow of WiFi, may also use the need to control the flow of 3g/4g.

Design points:

1, mobile app, the situation of network anomaly is more common, need to pay more attention to this kind of scene of error hint, and how to recover from the error method.

2, mobile app, in the case of 3g/4g users to the flow of attention, for the need to consume more traffic operation, need to remind users, the user allows the premise to continue.

　　V. Different modes of notification

Web site: For the notification center of the browser, users do not use much, it is difficult to actively arouse users

Mobile app: The way to push notifications to users is very common.

Design points:

In mobile app can notify users of some important information in a timely manner, but also need to consider the user to turn off notification reminders in the context of users can still be used; because the "notification" function is more important to users, designers need to think about how to make it easier for users to "turn on notification permissions."

　　Vi. different granularity based on location service

Web site: The location feature typically gets to the current city

Mobile app: More accurate access to the user's current position

Design points:

Mobile app can make a reasonable use of the user's location, to provide users with some services. For example, map classes can search "My location" to the destination of the route, life services can query my location near the food, shopping malls, cinemas and so on, this way eliminates the user manually enter the current location of the complex, more intelligent.