Web Design Analysis: The use of flat interface design to attract users

"Editor's note" This article translates from Speckyboy design Magazine, translator @c7210. In the traditional web development and even now designed for mobile devices, the complex dazzling effect of the product is not necessarily a good choice.

Especially in mobile devices, too complex effect not only rarely for the application to attract users, but often let the user in the visual fatigue, the product interface of the most basic functions of cognitive barriers. Therefore, we need to refer to the "flat" aesthetics in the design.

What is flat design

In practice, the term "flat design" refers to a seemingly more "flat" interface by abandoning the visual effects of gradients, shadows, and highlights that have been in vogue for years.

Layervault's designer, Allen Grinshtein, once wrote in an article in Hackernews:

"For a long time, the Web site's interface style seems to follow the same design aesthetics, we are using a bevel, gradient, shadow-type effect to highlight the texture of the interface elements." For designers, making this kind of ' cute ' element has become a guild or even an honor. But for us, and a handful of other designers, this idiom is not necessarily correct. ”

Go to layervault a few eyes, turn around, you will find that they are pursuing this kind of simplicity in the embodiment of the visual beauty. It's also interesting to see the visual styles we've been accustomed to are being subtly subverted in more and more websites and mobile apps. Here are some other examples:

Squarespace

The new version of Squarespace almost exclusively uses a flattened visual style, highlighting important interaction elements in a relatively traditional way in some detail. Try you will find, in fact, their products in the functional logic is still quite complex, but all this implied in the simple and straightforward interface behind, you can really vaguely feel the design team to pay the effort.

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

Facebook

Another example that everyone is familiar with is Facebook.

"Facebook is a great example of flat interface design. Except for a few major action buttons that use a slight bevel effect, all other interface elements are flat-styled. Given that they have been in this situation for years, at least we can say that this style of design is entirely applicable to Facebook. "-Ian Storm Taylor (Segment.io)

Rdio

Rdio the latest version of the Web site and product interface is a very thorough minimum, flat design style, you can not find the use of shadow, gradient and other effects of the interface elements.

Related reading: Minimizing usability design

Nest

As a front-end engineer, I have been involved in Nest's website development, and I still remember their designer's enthusiastic pursuit of flat style. On their website, actual products and related application environment photos as "real" elements into a flat-style media carrier (the site itself), the combination of reality, so that visitors can easily focus on the product, and will not be the site interface of the visual elements interference.

Beforweb

The translator's station randomly enters ... Translator @c7210 Note

On the reverse attack of quasi-materialization

Just as the minimalist movement of the architecture world of the 20th century, the gradual rise of flattened design styles can also be seen as an inversion of the overly-designed, overly-polished interface style that has been over the years, especially in recent times, when Apple has been criticized for being quite sharp in its parody style.

The definition of the proposed materialization ("imitation", "Skeuomorph") by Wikipedia is:

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

For example, we usually add gradients and projections to the buttons in the interface, because the buttons in the real world have these visual features, even if they have no real meaning for the function of the interface element. For example, some weather applications use thermometers to show the temperature; in the real world, the presence of such entities is necessary, and in the application software, the image of the thermometer is purely decorative.

Is it necessary to design elements of leather texture in calendar applications? If the button does not use 3D texture, does the user 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 you can't feel the physical feedback on a desktop or mobile device screen." Things that seem to be physical do not feel the feedback effect that the entity should have, at least for me it's a crappy, unexpected experience. "–allan Yu (Svpply/ebay)

Form serves the function

The 20th century minimalist movement in the architectural world presented a number of famous slogans, including "form service to function", "Less is much (less is more)" and so on, until today we still talk about these. In addition, I personally like Michelangelo's answer when asked how he created the statue of David:

"Very simple. I just need to chisel away the extra stones and leave something useful. ”

The same is true for interface design; 37signals of guys have a knack for this. To realize the flat style of design aesthetics in practice, as a designer, we need to pay more attention to how the product function works, and not just to consider the problem of visual presentation.

Flat or fitting? It's just a matter of choice.

At least I don't see any research report that suggests that a button with a pseudo style will bring more clicks. Indeed, there are enough theoretical and practical conclusions to demonstrate that interactive elements that visually produce stronger contrast effects can better attract the attention of the user, but I believe that in some contexts, a flattened orange button can have a more contrasting effect than a raised-textured button. Therefore, the context, that is, the specific interface environment of the product, is a key element here. Let's take a look at some of the other designers ' ideas:

"It's a bit like fashion fashion," he said. When a style is fully popularized, as a designer, to stand out, you have to do the opposite. "–cemre Güngör (Branch)

"If someone tells you that ' materialization is a bad design ', it's equivalent to saying ' purple is an ugly color ' and it doesn't make any sense. "–sacha Greif

"Why do you have to belittle a design style without any real evidence, and raise the other one?" ignoring the actual functionality of the product and the overall experience and simply pursuing a certain design style is not an exciting and enjoyable thing. "–geoff steams (YouTube)

The quality of the design is not "aesthetic" can be decided

The choice of design style will ultimately depend on the actual situation of the specific products. In my opinion, one of the advantages of a flat style is that it can be more straightforward to show the way information and things work, and to reduce the emergence of cognitive impairment, compared to physical materialization.

Regardless of the style, excellent interface design needs to follow some common design principles:

Consistency

With consistent design patterns and visual style, the user can establish a complete and consistent mental model to make the product more user-friendly and improve the overall experience.

Contrast

By adjusting color, size and layout, the clickable interface elements are visually contrasted with other elements.

Layout

You can try to use a 960GS grid layout to set the visual specification for the interface, so that the user's sight can follow the natural movement of the path defined by the content itself, and enhance the visual balance of the interface.

Level of

The most important things are more likely to be seen than the relatively minor ones. On this topic I can write a whole article out, simply put, is in the interface design highlight those with the core features and common use cases related to the interaction elements, and other operational elements in the secondary position, which can make the interface most targeted optimization and simplification.

"My personal experience is that both flat and materialized are nothing, and the most important thing is that the interface allows users to clearly identify the level of information and functionality in the shortest possible time, and it's easy to know what to do next." "–caroline Keem

Target User

Different types of user's preferred interface styles are also different. Architecture, design, fashion and other areas of the user can better embrace the flat style, while other more "ordinary" users are more likely to accept the relatively traditional physical interface.

Feedback

When the click behavior occurs, provide the user with clear and clear visual feedback immediately. Animation transitions are a more common form of feedback, such as using the Rotate icon to prompt the user for a response after a user performs an action.

Recommended reading: Provide positive feedback for the user's successful operation

Reduce "friction"

Whatever visual style you use, make the interface as simple as possible, reduce the user's need to perform the task, and create a smoother interactive experience. Any obstacle or extra step can increase the operation cost, increase the complexity of the function, and reduce the conversion rate.

Related reading: Form design and improvement of conversion rate

Encourage exploration

Understand what the target user is likely to explore for the product. Once they are accustomed to the product interface and basic functions, and start to the "Advanced user" stage, to their exploration and learning behavior to carry out the necessary guidance and "reward" feedback.

Prototype

Regardless of style, the interface form depends on the actual function. A good design solution is inseparable from the early stage of the product planning, especially through the sketch or Wireframe prototype exploration. Identify the core use case requirements, the use of prototype continuous testing and validation, for the next interface design work to lay a solid foundation.

"The gradual prevalence of flat style is a truth, but in essence it is only one of the design aesthetics; with the same visual effects as antique, high gloss, metal texture, wood and so on, the choice of visual style must be based on good information architecture and interactive mode. "–mike Cuesta (CareCloud)