Client contact: +33 1 76 42 00 45 hello@ferpection.com

December 9, 2020

Flat Design? Skeuomorphism? Which style for designing an interface

Last October, Google unveiled the new logos of its software suite, with a new design for its 5 main apps (Email, Calendar, Drive, Docs and Meet). The giant wanted to improve its design, but users' reactions were rather mixed, even a bit mocking.

Les nouvelles icones de Google, comment les utilisateurs les voient-ils?

Clearly, when it comes to design, trends come and go. But when it comes to interface design, wouldn't it be more appropriate to leave fashion aside and focus on how our users feel?

So between skeuomorphism, flat design, neumorphism and material design, what is their position?

This article aims to give an objective overview of the last few years' tendencies. It is based on a survey made with 137 French people from 18 to 55 years old.

Before looking at the study, let's define the different types of design

First of all, what is skeuomorphism?

Skeuomorphism is the art of faking: For example, painting fake marble or fake wood on plaster, or putting LEDs on fake candles to create lights that look like old fashioned chandeliers.

In the digital interface industry, this type of design was very popular in the 90s. It uses real life objects to represent interfaces that serve the same purpose. For example, an app giving time uses a very realistic clock, an interactive zone uses the picture of a light switch, an app giving temperature looks like a mercury thermometer, etc.

Interface skeuomorphique d'un logiciel audio ressemblant à un panneau physique.
Interface of an audio software that looks like a physical panel (Author: Klaus Göttling)

Flat design, everything seems basic, or in other words is "flattened"

As a response to skeuomorphism, the years 2010 saw the emergence of a very radically different UI tendency: flat design. This Swiss movement appeared in the world of graphic design in the 1920s and is based on legibility and minimalism. With its simple geometric shapes and grid systems, paper graphics comes to flatten and streamline interfaces, with for example the release of Windows 8 in 2012 and iOS 7 in 2013.

Apple passe du skeuomorhisme au flat design en 2013 avec les icones stylisées de iOS7
Apple Inc. - Own work

Material design, from "flat" to Google

Apple's and Windows' flat design has often been contrasted with Google's material design, even though it's actually a continuation of it. Actually, Google wants to standardize all user interfaces using a strict grid and a set of "physical" rules. The basic idea is that the screen, no matter if it is a smartphone or a computer, has a thickness in which we can superimpose several layers of flat elements, like a pile of paper sheets. So, designers take the "flat" elements and give them a small shadow, very subtle, to materialize their presence. The "flat" takes a few millimeters of thickness but the design remains basic and more structured than ever.

Google Inc. - Own work based on: https://material.io/design

Neumorphism, the latest trend

The current major trend among interface designers is neumorphism. This new term created from "new" and skeuomorphism is actually more an evolution of material design than a real comeback to skeuomorphism. Where "material" cuts out certain "flat" elements to bring them to the foreground, neumorphism imagines that the background itself is distorted in depth or in 3D to create the interface. The background is then treated as a smooth virtual material, entirely solid, often of a slightly cold gray, which allows to create 3D with shadows and light reflections.

Interface fitness - neumorphism (Author: Mary Tokar, source: Dribbble

Users' opinions on these 4 types of design, what the quantitative study says?

1. Users are sensitive to changing patterns

The 4 clocks below were displayed to the survey sample, and respondents were able to properly rank the 4 designs in order from most to least outdated.

Sondage Ferpection : Parmi ces 4 designs d'horloge, laquelle trouvez-vous la plus démodée ? Flat design 28%, Skeuomorphism 40%, Material design 19% et Neuomorphisme 12%

Same for these 4 calculator designs, the results roughly rank the designs in chronological order (with a slight switch between "flat" and "material").

Sondage Ferpection : Parmi ces 4 designs de calculatrices, laquelle trouvez-vous la plus moderne ? Flat design 27%, Skeuomorphism 7%, Material design 23% et Neuomorphisme 42%

2. Skeuomorphism is easier to understand

Although users are able to recognize the more "old-school" or retro side of skeuomorphism, it doesn't necessarily mean that they don't like it.

In fact, again among the 4 clocks, 42% of the survey sample prefers the clock, closest to a real clock, with the highest level of detail, and thus corresponding to skeuomorphism.

Sondage Ferpection : Parmi ces 4 designs d'horloge, lequel préférez-vous ? Neuomorphisme 30%, Skeuomorphism 42%, Flat design 18% et Material design 10%

One of the testers interviewed, Noah (49), called the design "the simplest without complicating life" and Erika (36) called it "basic in appearance but easy to use and understand". Actually, the similarity with the real object is reassuring. The user knows how to use it in real life, so he can easily project himself in the virtual world.

3. Flat Design, more aesthetic but too strict

On the different sets of visuals submitted to the survey sample, flat design was mainly chosen as the favorite. For example, on the Google logo, flat design is the winner. Almost half of the respondents prefer it (45%) and find it more aesthetic (46%).

Sondage Ferpection : Parmi les 3 designs de logo, lequel trouvez-vous le plus esthétique ? Flat design 46%, Skeuomorphism 28% et Material design 26%

On the other hand, on the forms below, although 62% find the first interface more professional, 60% of the users prefer the second one, finding it more attractive.

Sondage Ferpection : Parmi ces deux écrans, lequel trouvez-vous le plus sérieux ? Flat design 62% vs. Neuomorphisme 38%

Sondage Ferpection : Parmi ces deux écrans, lequel préférez-vous ? Flat design 40% vs. Neuomorphisme 60%

It is generally the simple and refined aspect of flat design that gives it its aesthetic appeal, according to the respondents: "it is basic and refined which makes it pleasant" (Thomas). At the same time, it confirms the sober and professional look, which can also be less appealing to users depending on the situation.

In a lesser way, but still worth noting, 25% of users feel that the skeuomorphic Google logo is the most aesthetically pleasing. The attention to depth and texture can give some users the impression of a more polished image, as this user describes about the calculator visuals, "I like this style as if it were 3D." - Ali (36)

4. Material design? Not so original...

Material design having mostly influenced the last few years, and being supported by Google, it is unsurprisingly considered rather ordinary. On the criterion of originality, it comes in last place for respondents when they are shown the pictograms below.

On the other hand, it should be noted that skeuomorphism is no longer used by our UI designers, which makes it rarer. Actually, 40% of the respondents thought that skeuomorphic pictograms were the most original.

Sondage Ferpection : Parmi ces 4 pages de pictogrammes, laquelle trouvez-vous la plus originale ? Flat design 27%, Skeuomorphism 40%, Material design 13% et Neuomorphisme 20%

5. Neumorphism, high-end but lacking in contrast

For the interfaces below, but also for the calculators shown previously, it is actually neumorphism that comes out on top. In both cases, it is the design preferred by the respondents. But above all, this type of design appears to them as more upscale as one user explains: "The white color of the D calculator brings out the sleek and premium aspect at the same time". This is confirmed by the interfaces below, as 64% of respondents found the left version more premium than the right one in flat design.

Sondage Ferpection : Parmi ces 2 types d'interfaces, laquelle trouvez-vous la plus haut de gamme ? Flat design 37% et Neuomorphisme 64%

On the contrary, users do not react positively to buttons in "pure" neumorphism. This is because keeping the strict definition, buttons remain the same material as the background, and therefore the same color. This offers very little contrast and does not attract the user's eye.

Sondage Ferpection : Parmi les 4 designs de bouton, sur lequel auriez-vous envie de cliquer ?  Flat design 42%, Skeuomorphism 35%, Material design 14% et Neuomorphisme 9%

Conclusion

In conclusion, although neumorphism seems to be the "latest" trend, the choice of design will depend on your brand image, the message you want to convey, and what you expect from the user. For a bank, flat design may be appropriate because it will tend to send a professional image, while neumorphism may be preferred for a luxury brand, but it should be avoided for "call to action". In any case, we can only advise you to listen to your users to choose the design that corresponds to their expectations and will allow you to offer them a satisfying experience.

All articles from the category: | RSS

Marie Mantopoulos

Marie Mantopoulos

Product Designer, Marie listens to our customers, users and teammates to evolve our processes and product so that it bests fit their different needs.

Starting a user research project? Try our free demo