Talking about Less and More in Web Design (Picture)

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

CSS realizes that the left side of the webpage column is fixed and automatically adjusts the position when scrolling to the bottom

Blog

Detailed explanation of crontab scheduled execution command under Linux

Talking about Less and More in Web Design (Picture)

How to install nginx under Linux

How to set static IP for Ubuntu 18.04 Server

Vue implements star rating with decimal points

CSS realizes that the left side of the webpage column is fixed and automatically adjusts the position when scrolling to the bottom

Detailed explanation of crontab scheduled execution command under Linux

Introduction and usage summary of React-Native screenshot component react-native-view-shot

Multi-service image packaging operation of Dockerfile under supervisor

Perfect solution for theme switching based on Css Variable (recommended)

js realizes the effect of Tanabata confession barrage, jQuery realizes barrage technology

What is web design

Recommend

vue-pdf realizes online file preview

Detailed explanation of CSS3 elastic expansion box

The difference between Display, Visibility, Opacity, rgba and z-index: -1 in CSS

Vue implements irregular screenshots

Nginx routing forwarding and reverse proxy location configuration implementation

MySQL 5.7.29 + Win64 decompression version installation tutorial with pictures and text

Detailed explanation of the installation commands and usage of Docker and FastDFS

Practical record of Vue3 combined with TypeScript project development

In-depth understanding of JavaScript callback functions

Explanation of the use of GROUP BY in grouped queries and the SQL execution order

Several methods of horizontal and vertical centering of div content using css3 flex

URL representation in HTML web pages

Detailed steps for installing MinIO on Docker

Centos7 mysql database installation and configuration tutorial

CSS Pick-up Arrows, Catalogs, Icons Implementation Code