Shulou(Shulou.com)06/02 Report--

How to analyze Less and More in web design, I believe that many inexperienced people do not know what to do about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Less is More is the mantra of many designers. It was first put forward by the architect Ludwig Mies van der Rohe. It is a design concept that advocates simplicity and opposes excessive decoration. On this basis, designers continue to improve and interpret this idea, and now it has become a basic theory and criterion in the design field. Proponents of this theory believe that the use of minimalist design to remove unnecessary details can make products and users get greater benefits and produce better results.

In traditional industries, there are many successful cases about Less is More.

In 1979, Sony found that most users needed far more for playback than for recording, so they removed the recording function of traditional tape recorders and even external speakers, which were considered essential at the time. Then put the rest into a small box and match it with stereo headphones. This is the Walkman Walkman that is popular all over the world.

In 1984, IBM simplified its structure on the basis of mouse and trackball, invented TrackPoint (Little Red Riding Hood), effectively replaced the function of mouse on mobile devices, and solved the shortcomings such as excessive space occupied by trackball. Now TrackPoint has become the symbol of Thinkpad notebooks, and similar designs have been applied to many other brands of notebooks.

In 2007, Apple streamlined the phone's keys and even cut off the entire physical keyboard to launch the iPhone. Led a smartphone revolution around the world.

All of the above are the great successes of Less's ideas. But in the actual design work, sometimes we will make some mistakes because we do not have a deep understanding of this idea. Therefore, whether the specific design should be Less or More, or should be based on the actual situation to decide. Examples include the following:

1. Some details of Baidu's commercial products

In the Phoenix Nest system promoted by Baidu, an account has the following basic structure: account > promotion plan > promotion unit > keyword. As shown in the figure:

In other words, there can be multiple "promotion plans" in an account, multiple "promotion units" in a promotion plan, and multiple "keywords" in a promotion unit. Now PM needs a new feature, and he provides a sketch like this:

PM explained: "I need a locator. Users can choose to navigate to a" full account ", a" promotion plan ", a" promotion unit "or a" keyword ". After a brief drawing, in line with the principle that 'less is more', I put them together."

After reading it, I was very confused and asked, "what should I do if I want to locate the full account?"

PM replied: "if you have a full account, you will choose nothing and just click 'View'."

Me: "dizzy..."

This is a typical example of simplifying the content of the interface but losing the user experience. Although this kind of design is the most concise and space-saving, it does not clearly express the function here. Later, after discussion, it was changed to something like the following:

That is, four options have been added before the original drop-down box and input box. These four options correspond to four different levels that can be analyzed, and only when a level is selected will a specific selection control appear below that level. With this change, the user's task is divided 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 complex, the benefit is clear that the whole process has become simpler and smoother, and users can get started almost without any thought. So the More on the interface elements actually enhances the actual user experience. It's like a sentence 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 unmistakable choice without thinking."

Second, italics on the web page

On many English web pages, designers will choose to make some text italic. For English, italic characters will be more beautiful in some specific fonts, and this effect also bears a certain special meaning in some specific situations. In Wikipedia, for example, italics are often used to write book titles or annotate content, as shown in the figure:

In the screenshot above, "This article is about the line of..." This line is the nature of comments, not the text that introduces iPhone, so Wikipedia uses italics. The rational use of these styles can not only improve the reading efficiency of readers, but also improve the degree of aesthetics.

But as far as italics itself is concerned, I don't think it is very suitable for Chinese web pages. The reason is simple: under the 12px font size, which is more commonly used in Chinese web pages, the recognition of italic Chinese characters will become worse. For example, the following picture is a screenshot of a comparison of two different languages of the same functional control on an airline website (to make the problem more obvious, I chose traditional Chinese):

We can see clearly from the screenshot that the English version on the left performs well in italics under the action of Arial fonts. I can see it clearly and it's beautiful. But the right side is more tragic. With the addition of italics, the recognition of Chinese 12px Song characters has been seriously reduced (this is a bit like what Ludwig Mies van der Rohe calls "over-decoration"). In particular, some Chinese characters with more strokes will be stacked together.

Obviously, in this example, when designing the Chinese version, it should be more Less, and it would be better to get rid of the italic style.

Play buttons and phone buttons

On many electronic products, designers use a triangle symbol to the right to represent the play button. This is already an industry standard, and when we see this kind of symbol, we will naturally have the correct cognition. So when designing a similar function again, we can directly follow this symbol:

In the three completely different playback software shown above, we can easily find the button that represents the playback function without indicating the word "play" at the bottom of the graph. This not only saves space, but also conveys our definition of function. The Less here achieves the effect of More.

But does this mean that Less, which provides only graphics and no text, can be used when designing buttons for a product? The answer must be no. For example:

This is the button on the phone of a certain brand. Who can guess the exact meaning of the three buttons above the digital key? Especially for the first and third ones, most users may not be able to draw accurate conclusions in the first place, except for the designers of this product. For users who specifically use the product, they face not only functional confusion, but more importantly, when they operate the product, they will have no expectation of what will happen after pressing these buttons. If there is no expectation, many users will choose not to try at all, then even if the feature itself is very useful, it will be difficult to promote it successfully. If our Less is based on the price of unclear expression, it deviates from the original intention of Less. In such details, I think it is better to consider marking the text under the button, or directly replace the graphics with text to express.

Summary

1, simple design in many cases can make the product use more smoothly and efficiently, can make the user experience better.

But sometimes we don't have a thorough understanding of Less is More. Its original intention is to oppose "excessive decoration", rather than blindly "simple".

3. Less is not only simple on UI, but also easy to use at the process and cognitive level. If you mess up the process in order to streamline UI, the loss will outweigh the gain.

4. The core principle is still the classic Don't make me think.

After reading the above, have you mastered how to analyze Less and More in web design? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.