A Simple Guide to Mobile Web Design for Web Designers

As early as a few years ago, the data traffic of mobile terminals has exceeded that of desktop terminals. Mobile phones and tablets have become the mainstream, and large-screen mobile phones that combine the advantages of both are even more popular. For today's designers, it is really hard to say whether the real best screen is the desktop or the mobile terminal interface. Maybe the saying "mobile terminal first" is not accurate, but the saying "mobile terminal screen is the main" is very close to the actual situation. Creating an excellent small-screen user experience has become an instinct deep in the bones of today's designers.

So what is the most important thing to create an excellent mobile user experience? Fine pictures? Elegant icons? Or a meticulous UI interface? If you often browse mobile web pages, you should expect a seamless and smooth navigation experience. Smooth switching from one interface to another, no lag, no misplaced visual elements, and complete content loading. Users can't stop browsing with such a browsing experience, and the improvement in conversion rate is obvious.

A truly excellent navigation experience can often better help users find what they want, rather than cramming more information onto a limited screen. The wisest choice is to accurately add useful, easy-to-use, and main items to the menu bar.

search

Many web pages have a lot of content, and introducing a search engine into the interface can help users filter content more quickly. The limitation of the mobile screen size has determined that the content that a page can carry is limited, and it is impossible to display information systematically and comprehensively like the desktop.

Users expect websites to provide a channel to quickly obtain accurate information. Apart from aimless browsing, users usually look for a certain type of article or even a specific article in the hope of finding a certain product, and search engines can quickly narrow the scope of browsing.

The best solution is to place the search function at the top of the screen, whether it is a mobile web page or an APP. The advantage of this design is that it is easy to find and is in line with users' daily browsing habits.

Wikipedia's mobile page naturally places the search box at the top of the page, which is determined by the nature of the website. However, LinkedIn places the search function in the bottom menu bar, which is also solidified in the interface in a sense, which is also logical - after all, its social attribute is higher than information search.

front page

As the most important symbol inherited from the desktop, the small house icon on the homepage can be said to be a conventional existence. When users see this icon, they usually know clearly what it represents.

On mobile devices, the role of the home page is significantly magnified, because on mobile devices with strong interactive multi-interfaces, the presence of the home page icon allows users to more efficiently and quickly understand where the home page is and where the most important content is contained, so they know where to start. At the same time, the presence of the mobile home page provides a core for carrying more content.

There is also a common situation in multi-tasking and highly interactive mobile terminals, that is, calls, text messages, and push notifications are everywhere, and users are easily attracted by various pop-up messages. Once users browse other information and return to the browser, the homepage of the website becomes an important transit point for information.

Albertson’s mobile page hides the homepage icon in the sidebar under the hamburger icon. Even Twitter, which has transformed to a full-scroll interface, habitually solidifies the homepage button in the bottom menu bar when designing its client.

Share Button

Nowadays, social sharing has become an indispensable part of users' lives with the rapid development of social media. Mobile users will share all kinds of interesting, fun and useful content and products they see on different platforms, and sharing buttons are indispensable.

In fact, sharing on mobile devices is more frequent, faster, and more popular than sharing on desktop devices. The ease of use and popularity of mobile devices is one aspect, and sharing also occupies a place in the common interaction mode of mobile devices. This is why you should add a share button to your navigation or menu.

After all, there is a lot of content that attracts users, and as the owner of the website, you also want to share your content at all costs, right?

Related categories and recommendations

E-commerce and content-heavy websites have a lot of content, and the navigation can only accommodate a limited amount of content, so related categories and related recommendations are quite practical. When the keyword system and classification system are perfect enough, related recommendations and category recommendations will keep users coming back.

Whether it is a shopping or content consumption website, there is usually no need to add too many links such as About Us and Contact Us. Good classification and recommendation will better retain users.

The mobile websites of JC Penney and EB Games will hide the category catalog in the hamburger menu, so users can browse products from the category catalog more efficiently.

Not a lot of menu options

Designers always want to do more for users, but when it comes to mobile navigation design, less is better than more. Too many choices usually confuse users, which is even more disastrous for users with growing obsessive-compulsive disorder.

The mountains of content on desktop web pages have already made users extremely irritated. It is difficult for users to accept the same idea on mobile terminals. Whether you are willing to admit it or not, the time available to users nowadays is more fragmented. Information can only be noticed and focused if it is presented more quickly and directly. Careful consideration and careful selection are the winning strategies for mobile web pages.