Talking about Less and More in Web Design (Picture)

Talking about Less and More in Web Design (Picture)
Less and More in Design Trilogy
Less is More is a catchphrase for many designers. It was first proposed by the architectural master Ludwig Mies van der Rohe. It is a design concept that advocates simplicity and opposes excessive decoration . On this basis, designers have continuously improved and reinterpreted this idea, and now it has become a basic theory and principle in the design industry. Supporters of this theory believe that using minimalist design and removing unnecessary details can bring greater benefits to products and users and produce better results.
In traditional industries, there are many successful cases of Less is More.
In 1979, Sony discovered that most users had a much greater demand for playback than for recording, so they removed the recording function of traditional tape recorders and even removed the external speakers that were considered essential at the time. Then put the rest of the thing into a small box and pair it with stereo headphones. This is the Walkman portable player that is popular all over the world.
In 1984, IBM invented TrackPoint by simplifying the structure of mouse and trackball, which effectively replaced the function of mouse on mobile devices and solved the shortcomings of trackball such as taking up too much space. Now TrackPoint has become the symbol of Thinkpad notebooks, and similar designs are used in many other brands of laptops.
In 2007, Apple streamlined the buttons on its phone, even removing the entire physical keyboard, and launched the iPhone. It has led a smartphone revolution around the world.
All of the above are great successes brought about by Less’s ideas. However, in actual design work, we sometimes make mistakes because we do not have a deep enough understanding of this idea. Therefore, whether the specific design should be Less or More should be decided based on the actual situation. For example, the following examples:
1. Details of Baidu's commercial products
 In the Fengchao system of Baidu Promotion, an account has the following basic structure: Account > Promotion Plan > Promotion Unit > Keyword. As shown in the figure:
That is to say: there can be multiple "promotion plans" in one account; there can be multiple "promotion units" in a promotion plan; and there can be multiple "keywords" in a promotion unit. Now PM needs to come up with a new feature, and he provides a sketch like this:
The PM explained: "I need a locator. It allows users to choose to locate the "entire account", a "promotion plan", a "promotion unit" or a "keyword". I drew them briefly and combined them together based on the principle of 'less is more'. ”
I was confused after reading it and asked: "If I want to locate the entire account, how should I do it?"
The PM replied: “For all accounts, just don’t select anything and click “View” directly. ”
Me: “Dizzy…”
This is a typical example of streamlining the content on the interface but sacrificing user experience. Although this design is the simplest and most space-saving, it fails to clearly express the function here. After discussion, it was changed to something like this:
That is, 4 options are added before the original drop-down box and input box. These four options correspond to four different levels for analysis. Only after a level is selected will the specific selection controls for that level appear below. This change divides the user's task into two steps: 1. Choose which level you want to analyze. 2. Select the specific analysis object. Although the process has become longer, the number of clicks has increased, and the elements on the interface have become more complicated, the benefits are obvious: the entire process has become simpler and smoother, and users can get started without almost any thought. Therefore, the "More" on interface elements actually improves the actual user experience. Just like what is said in the book "Don't make me think": "It doesn't matter how many times you click, as long as each click is a clear and unambiguous choice without thinking."
2. Italic words on web pages
 On many English web pages, designers choose to italicize some text. For English, italics look more beautiful in some specific fonts, and this effect also has certain special meanings in some specific occasions. For example, in Wikipedia, italics are often used to write book titles or annotations, as shown in the figure:
In the screenshot above, the line “This article is about the line of …” is a note, not the main text introducing the iPhone, so Wikipedia uses italics. Reasonable use of these styles can improve readers' reading efficiency and enhance the aesthetics.
But as for italics itself, I think it is not very suitable for Chinese web pages. The reason is simple. At the 12px font size that is commonly used on Chinese web pages, the recognition of italic Chinese characters will be poor. For example, the following screenshots show the same functional control in two different languages ​​on an airline website (I chose Traditional Chinese to make the problem more obvious):
From the screenshot we can clearly see that the italic text in the English version on the left performs well with the Arial font. Clear to see and beautiful. But the right side is more tragic. The recognition of Chinese 12px Songti font is seriously reduced after adding italic style (this is a bit like what Ludwig Mies van der Rohe called "over-decoration"). Especially some Chinese characters with more strokes will appear to be overlapping.
Obviously, in this example, when designing the Chinese version, it should be less complicated and removing the italic style will provide a better experience.
3. Play button and phone button <br />On many electronic products, designers use a right-pointing triangle symbol to represent the play button. This has become an industry standard. When we see this symbol, we will naturally have the correct understanding. So when designing similar functions again, we can directly use this symbol:
In the three completely different playback software shown in the above picture, we can easily find the button representing the playback function, and there is no need to write the word "Play" under the graphic. This saves space and also conveys our definition of functionality. The Less here achieves the effect of More.
However, does this mean that when designing buttons for a product, we can continue to use the Less approach of providing only graphics but no text? The answer is definitely no. for example:
These are the buttons on a certain brand of telephone. Can anyone guess the specific meaning of the three buttons above the number keys? Especially the first and third buttons. Except for the designer of this product, most users may not be able to draw an accurate conclusion at the first time. For users who use this product, they face not only functional confusion, but more importantly, when they operate the product, they have no idea what will happen after pressing the buttons. If there is no anticipation, many users will choose not to try it at all, so even if the feature itself is useful, it will be difficult to promote successfully. If our Less is built on the cost of unclear expression, it deviates from the original intention of Less. Regarding such details, I think we should consider putting text under the button, or directly replace the graphics with text to express it.
Summarize
 1. Simple design can often make the product use smoother and more efficient, and provide a better user experience.
2. But sometimes we don’t understand the phrase “Less is More” thoroughly enough. Its original intention was to oppose "excessive decoration" rather than blindly "simplicity".
3. Less is not just about simplicity in UI, but more importantly, it is about simplicity and ease of use in terms of process and cognition. If you mess up the process in order to streamline the UI, the result will be counterproductive.
4. The more core principle is still the classic saying: Don’t make me think .
Author: xidea

<<:  Summary of common HTML elements including basic structure, document type, header, body, etc.

>>:  Learn the basics of nginx

Recommend

WeChat applet to determine whether the mobile phone number is legal example code

Table of contents Scenario Effect Code Summarize ...

TypeScript namespace explanation

Table of contents 1. Definition and Use 1.1 Defin...

Common styles of CSS animation effects animation

animation Define an animation: /*Set a keyframe t...

Web interview frequently asked questions: the principles and differences between reflow and repaint

Table of contents The browser's rendering mec...

CSS Sticky Footer Implementation Code

This article introduces the CSS Sticky Footer imp...

How to use Navicat to export and import mysql database

MySql is a data source we use frequently. It is v...

Vue implements simple calculator function

This article example shares the specific code of ...

Install mysql5.7.13 using RPM in CentOS 7

0. Environment Operating system for this article:...

A brief discussion on two methods of achieving semi-transparent background color in CSS

When laying out the page, in order to give users ...

MYSQL unlock and lock table introduction

MySQL Lock Overview Compared with other databases...

Solution to Ubuntu 20.04 Firefox cannot play videos (missing flash plug-in)

1. Flash plug-in package download address: https:...

How to use node to implement static file caching

Table of contents cache Cache location classifica...

Detailed explanation of Nginx Location configuration (Location matching order)

Location means "positioning", which is ...

Vue implements simple data two-way binding

This article example shares the specific code of ...

About the usage and precautions of promise in javascript (recommended)

1. Promise description Promise is a standard buil...