Notice on designing a mobile UI: "small design"

The design on a large computer web page is much easier than the design on a mobile device with limited space. The spacious space once encouraged the casual layout and large-scale negative space design. In a mobile phone screen with a width of only-80 pixels, the layout design of the two columns has become very risky.

However, in Mobile webpage design, the most difficult part is not the problem of dividing several columns, nor using a responsive framework design, or learning to query media and turning back to the old browser, the biggest challenge is that the designer needs to decide what content should be retained and deleted.

Mobile UI design experience

There are many ways to revise the website to adapt to mobile devices. The simplest and most commonly used method is: do not change anything. The result is: the text is very small and it is inconvenient to read; navigation is difficult to click; images smaller than stamps will also lose the original visual impact. Such a user experience is really bad, but from the perspective of the website owner, such a change does not require any effort.

Another method is to design a mobile phone version that contains the main content of the website. We assume that the content management system is equipped with two sets of content. This is often not the case. Using this method will make the website a victim of the capacity limit on mobile phone devices, this is especially true when a smaller screen can only hold less content.

People do not visit websites on mobile devices, maybe) because they do not need so much information, but more likely because they want to be more convenient. However, website administrators need another convenience and do not need to manage two sets of content at the same time. If there are two sets of content, it will increase the risk of inconsistent content. At the same time, it will produce twice the workload for both the mobile browser and the non-mobile browser.

Designers who are willing to focus only on a set of content understand the opportunity to achieve this goal is on this small cell phone) canvas.

"Small design" is not a new thing

Compact thinking does not mean that thinking is limited. The Design on other media has already fully demonstrated how to extract content creatively under limits.

Business cards

Two clear functions are required for business cards:

There is no space on the business card for product promotion or listing all products. Finally, creative business card designers think about this question in a casual way: "What is a business card ?"

Billboard

The size is not the only problem. The mobile phone UI Designer wants to solve the problem of Attention Concentration, just as the billboard designer tries to grasp the attention of people on the move. Drivers focus most of their attention on driving, so billboards must be far away from people. The design space of highway advertisements has been much more tolerant, but it still needs to transmit information in a very short time. A successful advertising idea can tell a complete story and complement visual information.

RSS subscription

Streamlined information transmission is not limited to visual media. Simple and portable, truly simple design removes any unnecessary width, height, Font, color and browser compatibility requirements. The subscription content does not have any settings about when, where, and how it can be used, therefore, it can meet the application requirements from mobile websites to App Store under any circumstances through design iterations.

Business cards, billboards, codes, and news subscriptions share a common purpose-simplifying does not only mean content) deletions and downsizes. It represents focus!

Concentration Structure

Focusing on website development is not an easy task. Being focused will consume a lot of energy and require constant dedication. Both of them will inspire creativity, even if no one appreciates it at the moment. The first method is to flatten the website structure.

This is a typical site map. The relationship between different pages is displayed in the site map, which can be indicated by the line between square blocks. The site map does not allow users to jump between different pages accurately in the navigation bar), and there is no substantive help link ).

It is essential for designers to decide what to merge and delete based on the traditional site map. Wayne maps can be used in this regard.

In the preceding example, the relationship between different contents is displayed through an overlapping ellipse. "Case" Case studies) describes how products and customer service benefit customers. Therefore, the circle of "case" covers two aspects: "product" and "service. The "Contact" page is independent of other content.

The six ovans do not mean that the site has only six pages. Specifically, they indicate that the site has six types of information or functions. A company may produce many products, but each product should have a name, description, images, and purchase settings. Similarly, each case is a unique story, but the same problem/solution format should be used.

In order for users to focus on the site, we need to minimize the overlapping parts.

The above scheme requires the integration of each case and related products or customer service. If more than one content is introduced in a case, you should link it to the next content and do not repeat it. The home page or Product Overview may list each item. Do not repeat those items on an independent shopping cart page. Set a "Buy now" button next to each item to complete the entire purchase flow on the new payment page.

Wayne graph applies to any type of website.

Do I have to perform operations on two pages to find a blog post? The preceding example shows how to use a configured page to complete the previous two pages.

This method is only a guideline, not a provision, and will change according to the website in the Process of use. The home page will still overlap with other content, because the home page often contains the content of the entire website. In the above content, although the order is merged into the product page, we have designed a new "Payment" page. Focus is not to reduce the number of pages, but to make the entire process smoother.

Use folding

Merging content solves the navigation bar problem at the cost of a more complex design. Fortunately, the same concept-the type of unified information-can benefit a single page and the entire website. Displays typical news pages.

Although this layout can work on a wide-screen desktop or laptop, it may be a problem if it is applied on a smart machine ).

Borrow a quote from the newspaper industry: "crease" is the first place for readers to see. But folding is not so much the demarcation line as the beginning of new content. When using touch-screen devices, people instinctively know that pages can be rolled by swiping the screen with your fingers. That means the designer can maximize the fold advantage.

First, let's take a look at the purpose of using Wayne graphs and integrate relevant types of information.

Over-used navigation links (usually the first place to change) and advertisements to jump to other articles are either merged or removed. Metadata appears in a blank area around the navigation. Whether advertisements, directories, site names, and navigation appear at the top of the screen reflects the priority order in the designer's mind.

When we discard the page concept we first imagined and re-organize the Page Based on the content, it will have an unexpected effect.

In the previous article, the new page elements are displayed in a vertical plane after being reorganized. In terms of concept, the browser of a smart machine becomes a window, and users need to fill in each piece of content. The screen is not reduced, but the content that the user can see is reduced each time compared with the usual.

Rethink navigation bar Design

Mobile phones allow designers to thoroughly transform traditional elements, not just reorganizing them. In addition to better transformation, they also raised the question "Why do we need transformation ?"

Users can have a general understanding of the website content through the link list, but the list is too long to be a problem that designers have to deal with, and today this trend is becoming increasingly apparent. The navigation bar is outdated, and the form of pages and panels is becoming popular. More and more responsive websites move navigation bars to separate pages or drop-down lists. By convention, clicking the icon that contains three levels will show the clickable link column table or site architecture.

As shown in, three entries are used for each of the five websites.☰Navigation icon☰Sometimes there is an explanation, sometimes there is no. By clicking the icon, the navigation will appear on the page. This method works well because you can decide when to display or hide the link.

It is strange that the Starbucks icon also contains a hovering state, but it may not be surprising. Mobile design means to design information for more applications, not just for mobile devices outside the desktop browser.

Content reduction

Reducing unnecessary information is equally important for mobile websites and desktop websites. However, it is not that easy to delete information. Generally, things develop from scratch.

This is a violation of user intuition, but in order for the user to be more focused in the Process of use, the designer must delete it from the beginning of the design.

This is not for the purpose of deleting or for the convenience of some users. This is in the process of information design, so that the information can be used in more scenarios beyond the user's expectations.

• Help users make informed choices:For example, a descriptive text does not always serve the title. The title itself should contain the correct keywords that help the user decide what to click. Thumbnails must be recognizable while displaying the entire image.
• Exercise resetting:When you create or edit pages, posts, images, or other media, think about what they will look like in different environments. Just like testing in different browsers, what is the reaction of the same design in different environments? Can it still work in the mobile browser? In a desktop browser? What about emails? Can I be read aloud? Can it be pasted into a Word document, printed or faxed? Do not underestimate the seemingly absurd use cases. They are all excellent attempts and the web page cannot appear on a mobile phone in the near future. Where will your website appear in the future?
• Delete the Home Page:Don't worry. You can release the home page later. Nothing is better than removing the set profile to help you better identify the priority of your website. Which page can best present the purpose of the website? If one of these pages can replace the home page, you can think about what the page can do for the website.
• On each page, each article and each part of the content repeat this experiment:If you delete it, what can replace it? If the answer is "Irreplaceable", it is necessary. If the homepage disappears and the "main business" page still works normally, you need to design the page until it becomes crucial or simply delete it.

All in all, it must be concise and concise. In today's modern media, space and attention are so precious that we must make full use of them.