What is the difference between Website and Mobile App Design? More than designers in other fields, web designers need to work fully with people who have mastered these skills. Mobile application design, as the graphic user interface design and interactive design of third-party smartphone applications, takes the mobile Internet as a platform, and gradually brings users into a period where they are used to using mobile clients to surf the Internet. In application design, beauty needs to convey by function, and each interface element must focus on the needs of the current user.

Here are the articles to explain, The Difference Between Website Design and Mobile App Design

At present, various mobile phone applications emerge in an endless stream, and their number can be called overwhelming. On the AppStore or other platforms, mobile phone applications are roughly divided into several categories. System tools, audio-visual entertainment, web browsing, office reading, social communication, life encyclopedias, shopping, games, etc. The difference between website design and mobile app design:

Different user experiences

(1) Differences in the characteristics of media

Traditional websites are browsed through computer terminals. While mobile applications are used and operated through smartphone terminal platforms. The operating medium has different characteristics and user usage statuses. In comparison, to the website and mobile app design, phones are more flexible and can carry around, and users can complete operations while walking. Because of this, it’s nothing like the app you see as a designer.

(2) Mouse click and touch screen

When the user uses the computer to surf the Internet. He uses the mouse to operate the interface: single click, double click, right button, and scroll wheel. The hot zone (clickable) for user operation is usually in the upper middle of the web page. The accuracy of the operation with the mouse is strong, and the small buttons will not cause misclicks. When users use mobile applications, they usually operate with their thumbs. And only one-third of the screen is easy to reach, that is, the area that the thumb can reach (under the premise of one-handed operation).

For an ergonomically comfortable experience, designers should place the primary click target in a hotspot that is convenient for thumb clicks. So this is why toolbars and tab bars are generally placed at the bottom of the screen. While in traditional computer interfaces, it is customary to place menus at the top of the screen or window. But due to our limited thumb hotspot, the main click target falls to the bottom of the phone screen.

How to organize the visual hierarchy of click targets is a factor for designers to consider. Commonly used buttons and navigation can be placed on the left side of the screen. And infrequently used buttons and click targets that change data can be safely tucked in the upper right. For example, the “delete” and “edit” buttons for sorting list items are generally placed in the upper right corner. Which can reduce misunderstandings.

(3) Physical metaphors

When users use the touch screen of a smartphone, they will find its obvious physical metaphor: sliding the screen, clicking the button, stroking the digital wheel, dragging the map, and zooming in and out of the picture with the thumb and index finger. Users can easily manipulate these interactions because they behave exactly like real-world objects.

This is due to the sensing devices that come with the mobile phone: gravity sensor, acceleration sensor, direction sensor, orientation sensor, three-axis gyroscope, distance sensor, light sensor, air pressure and temperature sensor, ultraviolet sensor, etc. Designers can take advantage of these physical properties to create more interesting interactive experiences. And these are sensing systems that traditional computer screens just can’t have.

(4) Advantages of mobile applications

Compared with traditional websites, the affiliated applications of the website have the following advantages:

Efficiency—In mobile scenarios, one of the most important user needs is efficient use. Good websites will redesign the app to improve the experience of the corresponding part of the site. Taobao’s comprehensive e-commerce website has designed a unique mobile platform application. Compared with the Taobao website directly opened by the Safari browser, the Taobao application interface is more concise, and each icon represents the most important part of the Taobao homepage. function, hide or omit the secondary function information, which is convenient for mobile phone users to find and use.

More vivid and beautiful interactive dynamic effects—the website application based on the smartphone platform can use the dynamic controls provided by the mobile phone to display the content more vividly. Although the close effect can simulate through Web technology, the realistic physical dynamic effect of the mobile phone cannot simulate.

Temporary storage function—one of the advantages of some mobile applications compared with the corresponding sites is that the application can pre-store content for offline reading. For example, the interactive sharing and personalized reading application Zaker provides downloading of all the latest information, microblogs, blogs, newspapers, magazines, pictures, rss, google reader, and many other contents when online, and selects the layout area according to the user’s wishes The content of the block is composed, and the articles downloaded after offline can be read in the blind area of ​​the network.

Differences in interface design

(1) Different interface layouts

The traditional network platform uses computers as the communication medium. The size of the screen display restricts the size of the webpage. The common size is 1000 pixels (screen width) × 768 pixels (screen length). The screen length of the web page determines according to the content and function. The common ones are two screens and three screens. The interface size of the website and mobile app or application design is closely related to the size of the display screen of the mobile phone. For example, the size of the iphone3G is 320×480 pixels, and the size of the iphone4 is 960×640 pixels.

The above comparison shows that the size of web pages is much larger than that of mobile phone applications. Living in a palm-sized screen, every piece of space is “an inch of land and an inch of gold”. The interface layout of web design mainly composing of an advertising area, a navigation area, and a page content area. The navigation area usually distributes on the top or left side of the interface. This arrangement is to ensure that each column of the navigation can completely see on the first screen. The advertising area is usually located near the navigation area, occupying the core position of the page.

The interface layout of the web page generally divides into “country” type, corner type, title body type, left and right frame type, top, and bottom frame type, comprehensive frame type, etc. What kind of layout to choose should reasonably design according to the content and functions that the page needs to contain. The interface layouts of mobile applications and websites are both different and related.

Additional

Based on the characteristics of the mobile phone screen in the interface layout, important information should place at the top, and important operations should be placed at the bottom. A common mobile application layout is the tab bar layout, which divides into upper, middle, and lower parts.

Usually, the tab bar and toolbar places at the bottom of the screen. The navigation bar is set at the top of the screen, and the middle part is the content area. When designing a mobile application, try to display the page on one screen and avoid scroll bars. Reduce on-screen elements and hide advanced tools and actions. Tiled pages: This layout often use for pages that form a hierarchy, and swiping the screen can switch pages. A row of small dots at the bottom of the page are page-paging control icons.

The number of small dots represents the number of pages. And the highlighted dots represent the position of the current page, which can flip as needed. This page layout generally contains less than 10 pages. Tree structure/list layout: This layout often uses for pages with many levels. Clicking on a single list bar can expand the page or enter the next level of the page. It is also easy to go back to the previous page. These layout methods can use in combination according to the specific situation of the information to achieve an efficient and good user experience.

(2) Processing of text information

Paragraphs of text on the Web stand also known as “text”. Text is the most essential form of information transmission on the Web. Still, there are too many texts and large sections of text. Such as complex and meaningless explanatory text and lengthy links can only slow down the browsing speed of users.

• Avoid long paragraphs of prose;
• Use headings, phrases, and bullets for paragraph-shaped text.

In Web layout, text paragraphs stand generally used in the divided page content area. There are several text-carrying blocks in its mobile app:

• The Tab bar use to display very short text;
• Text view: use to display text fields;
• Text input box: text input area.

(3) Buttons and auxiliary icons

On web pages, there are buttons in the navigation bar, input form, search, and other panels. A button prompts the user to click and complete a function. Buttons stand generally composed of graphics (background color blocks) and text and usually have two states. Download preview state (when the mouse does not click); and the state of mouse passing or pressing. The interface button of its mobile phone application is the most basic style in the mobile phone interface—a rounded rectangle button and the button contains text or graphics.

As shown in the picture, the auxiliary icon of the camera adds to the button on the left side of the navigation area, which is simple and clear. The blue three-dimensional button contrasts the navigation bar and is very unified. On the right is the delete button, which stands emphasized and hinted at in red.

Button types;

Buttons in mobile applications usually have the following states:

• In the preload state, that is, the original state without touch.
• The state when pressed usually highlights.
• The state after clicking and touching.
• The feedback after clicking and touching is very important to the design of mobile phone applications.

It prompts the user’s current operating state. We can prompt by changing the background color, changing the icon picture, or changing the text color. There are also functional auxiliary icons on the website, such as play icons in the player indicating various functions, forward and backward arrows with page-turning functions, etc. The icon system of the mobile application is richer and more powerful. One type of icon for the mobile application is for the tab bar, and the other type is for the navigation bar and toolbar.

(4) Navigation design

In traditional web pages, navigation is the “hub” of the website, just like the catalog page in a book. Through navigation, you can understand the information architecture classification of the entire website and help users locate it. Navigation design is based on user needs and technical possibilities, integrating interaction, interface, and graphic design. Because the content of the website is leading, so that users can guide themselves to find the information they need, an efficient navigation system is often the first demand of users who visit the website for the first time.

Website navigation mainly divides into main navigation, secondary navigation, local navigation, and contextual navigation. The hierarchical structure is a typical organizational method for information in the network. A multi-level website interface will have an important impact on whether users can smoothly find the information they need. Compared with directly entering the home page, more people arrive at a certain page through a search, E-mail, or advertising links. One of the most important factors is that the navigation system should show the scope and context of the information on the page to help people measure and determine its relevance.

Design Thinking Connections

The user research can predict the specific use process and understand the user’s operation behavior. The user group here limit by age, gender, occupation, Internet access method, and computer and network technology level – research the actual user group. For example, whether the text of the website serving the older people user group should consider larger (the commonly used text on the Internet is Song typeface 5). Whether the distance needs to adjust, and whether it is necessary to add functions that stand only used by older people users, etc. In the design of the website and mobile app applications, customers and users should also carefully analyze, and deficiencies in the application should regularly revise according to user feedback.

Conclusion

After discussing the differences and connections between the website and mobile app design. For its subsidiary application design, we need to conduct detailed user and customer analysis when designing a mobile subsidiary application and conduct in-depth investigations into the layout characteristics, functions, and services of the original website. From it, find out where the mobile phone subsidiary applications can use for reference and play.

On this basis, according to the different characteristics of mobile application layout, navigation, buttons, text, and other elements, the information stands reasonably sorted and visualized. Design thinking using metaphors makes design closer to life, minimizes barriers to use, and enables users to get a good product experience. And summarize and modify the application in repeated user feedback, and gradually improve the design.