Website Design Analysis: attract users with flat interface design

　　

 

[Editor's note] This article is translated from Speckyboy Design Magazine, translator @ C7210. In traditional web development and even the current design for mobile devices, the complex and dazzling effect may not be a good choice for products.

Especially on mobile devices, far from attracting users for applications, the overly complex effects often lead to visual fatigue and lead to cognitive barriers to the most basic functions on the product interface. Therefore, we need to refer to the "flat" aesthetics in design.

What is flat design?

In reality, the term "flat design" refers to abandoning anthropomorphic visual effects such as gradient, shadows, and highlights that have been popular for many years, to create a more "flat" interface.

　　

 

Allen Grinshtein, A Layervault designer, once said in an article on HackerNews:

"For a long time, the website's interface style seems to be following the same Design Aesthetics. Everyone is highlighting the texture of the interface elements with effects such as slope, gradient, and shadow. For designers, the creation of such 'cute 'elements has simply become a rule or even an honor. However, for us and a few other designers, this method is not always correct ."

When you look at Layervault, you will find that the visual beauty they pursue is embodied in simplicity. It is also quite interesting to see that the visual styles we have been used to are being subverted by more and more websites and mobile app products. The following are some other examples:

Squarespace

　　

 

The new Squarespace uses almost all flat visual styles. It only uses traditional methods to highlight important interaction elements in some details. After a trial, you will find that their products are still quite complicated in terms of functional logic, but all these are hidden behind the simple and straightforward interface, you can feel the painstaking efforts of your design team.

Related reading: Concise and supreme Web design-creative elements and design skills

Facebook

　　

 

Another example that everyone is familiar with is Facebook.

"Facebook is an excellent case for flat interface design. In addition to the slight slope effects used in several major action buttons, all other interface elements adopt a flat style. Given that they have maintained such a feature over the years, at least we can say that this design style is perfect for Facebook ." -Ian Storm Taylor (Segment. io)

Rdio

　　

 

The latest version of Rdio uses a minimal and flat design style on the website and product interface. It is difficult for you to find the interface elements that use shadow, gradient, and other effects.

Read more: Minimal Availability design

Nest

　　

 

I once participated in Nest's website development as a front-end engineer. I still remember their passionate pursuit of flat style. In their websites, photos of actual products and related application environments are integrated into the flat style media carrier (the website itself) as "authentic" elements, visitors can easily focus on products without being disturbed by visual elements on the website interface.

Beforweb

The translator entered the website in disorder... Translator @ C7210 note

Inverse attack on quasi-materialized objects

Just like the minimalism movement in the S architecture field, the gradual rise of flat design styles can also be seen as a reverse attack on over-designed and over-crafted interface styles over the years; in particular, Apple's Paster style has been criticized sharply recently.

　　

 

Wikipedia defines quasi-materialized objects ("counterfeits" and "Skeuomorph") as follows:

Some necessary forms of the original objects are no longer necessary in the new design, but the new design still imitates the old form to make the new appearance more familiar and friendly.

For example, we usually add gradient and projection effects to the buttons in the interface, because the buttons in reality have these visual features, even if these effects do not have any practical significance for the functions of the interface elements. For example, some weather applications use a thermometer to show the temperature. In the real world, the existence of such entities is necessary, and in the application software, the image of a thermometer is purely decorative.

Are leather design elements necessary in calendar applications? If 3D textures are not used on buttons, do you still know that they can be clicked? How many decorative elements are really necessary?

"In real life, when a button is pressed, you can clearly feel its elasticity, but on the display screen of a desktop or mobile device, you cannot feel this physical feedback. What seems to be an entity, but it cannot make people feel the feedback that the entity should have. At least for me, this is a very bad and unexpected experience ." -Allan Yu (svpply/eBay)

Form service functions

Some Famous slogans were put forward in the minimalism movement of the architectural community in the 20th century, including "form follows function" and "less is more, we have talked about this till today. In addition, I personally like the answer from the question of how he created the statue of David:

"It's easy. I just need to cut the extra stones and leave them useful ."

The same is true for the interface design. The 37signals team have obvious skills in this aspect. As a designer, we need to focus on how the product functions work, not just on visual presentation.

Flat or quasi-object? It's just a matter of choice.

At least I have not seen any research reports indicating that the quasi-thing style button will bring more clicks. Indeed, there are enough theoretical and practical conclusions to prove that the interaction elements that can produce more visual comparisons can attract the attention of users, but I believe that in some context, the comparison effect of a flat orange button is higher than that of a highlighted button. Therefore, context, that is, the specific interface environment of a specific product, is a key element here. Let's take a look at some of the opinions of other designers:

"This is similar to fashion. After a style is fully popularized, you have to do the opposite if you want to stand out from the crowd as a designer ." -Cemre güng ör (Branch)

"If someone tells you that 'quasi-materialized is not a good design, 'it is equivalent to saying that 'purple is an ugly color', which makes no sense ." -When a Greif

"Why belittle a design style without any practical evidence while raising the other one? Ignoring the actual functions and overall experience of the product and simply pursuing a certain design style is not an exciting and pleasant task ." -Geoff Steams (YouTube)

The quality of design is not determined by aesthetics.

The final choice of the design style depends on the actual situation of the specific product. In my opinion, one advantage of the flat style is that it can display information and how things work more simply and directly to reduce the emergence of cognitive barriers.

No matter what style is used, excellent interface design must follow some common design principles:

Consistency

With consistent design patterns and visual styles, you can build a complete and consistent mental model to make the product easier to use and improve the overall experience.

Comparison

By adjusting the color, size, and layout, You can visually compare the clickable interface elements with other elements.

Layout

You can try to Set visual specifications for the interface by using a grid layout of 960gs, so that the user's line of sight can naturally move along the path defined by the content itself, enhancing the visual balance of the interface.

Hierarchical

The most important things are easier to see than the less important things. I can write a whole article on this topic. Simply put, it is to highlight the interaction elements related to core functions and common use cases in the interface design, other operation elements are placed at a secondary position, which can optimize and simplify the interface.

"My personal experience is that no matter whether it is flat or quasi-materialized, the most important thing is that the interface allows users to clearly identify the hierarchical relationship between information and functions in the shortest time, it is easy to know what to do next." -Caroline Keem

Target User

Different types of users prefer different interface styles. Users in the fields of architecture, design, and fashion can better embrace the flat style, while other users who are more "common" are more likely to accept the traditional quasi-materialized interface.

Feedback

When a click occurs, you must provide clear visual feedback to the user immediately. Animation transition effect is a common feedback method. For example, after a user executes an operation, the rotation icon is used to prompt that the user's system is responding.

Recommended reading: provides positive feedback on successful operations

Reduce "friction"

Regardless of the visual style, the interface should be simplified as much as possible to reduce the operations required for the user to complete the target and create a smoother interaction experience. Any obstacle or extra step will increase the operation cost, increase the complexity of the function, and thus reduce the conversion rate.

Reading: Improving Form Design and Conversion Rate

Encourage exploration

Measure the test taker's understanding about the potential exploration of the target user for the product. Once they get used to the product's interface and basic functions, and begin to move toward the "advanced user" stage, provide necessary guidance and "Rewards" for their exploration and Learning behaviors.

Prototype

Regardless of the style, the Interface Format depends on the actual function. A good design scheme is inseparable from the preliminary planning of the product, especially through the exploration of sketch or box prototype. Identifies the core use case requirements and uses prototypes for continuous experimentation and verification, laying a solid foundation for the subsequent interface design work.

"Although the gradual prevalence of flat style has its own principle, it is essentially only one of the Design Aesthetics. It has the same visual effects as antique, highlight, metal texture, wood, and other elements, the choice of visual style must be based on a sound information architecture and interactive mode." -Mike Cuesta (carecsag)