Le Journal d'UX
L'actualité UX,
au-dessus de la ligne de flottaison.
Wiki UX Flat design

Flat design

Concept
Définition

Style visuel minimaliste qui élimine les effets de volume, d'ombre et de texture au profit de formes plates, de couleurs unies et de typographies franches. Popularisé par Microsoft avec Metro (Windows Phone, 2010) puis adopté par Apple avec iOS 7 en 2013. Le flat design est une réaction au skeuomorphisme et à l'excès d'ornement. Sa faiblesse principale : la réduction des affordances visuelles rend les éléments interactifs difficiles à distinguer. Le flat design 2.0 (ou semi-flat) réintroduit des ombres subtiles pour compenser.

En pratique

Maintenir la distinction visuelle entre éléments cliquables et non cliquables, même en flat. Utiliser la couleur, la taille et la position pour hiérarchiser l'information puisque le relief n'est plus disponible. Tester les taux de clic sur les éléments interactifs : si les utilisateurs ne cliquent pas, le flat design a supprimé trop d'indices. Ajouter des micro-ombres ou des bordures légères aux boutons si les tests montrent des hésitations. Le flat n'interdit pas tout indice visuel, il interdit le superflu.

Exemple

La refonte iOS 7 a éliminé les textures de feutre et les reflets de verre de l'interface. Les premières semaines, les utilisateurs peinaient à identifier les boutons. Apple a progressivement réintroduit des indices visuels dans les versions suivantes.

Voir aussi
Affordance
Material design
Signifiant (*Signifier*)
Skeuomorphisme (*Skeuomorphism*)
Sources
Nielsen Norman Group, Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users
Le Journal d'UX est un média indépendant sur l'expérience utilisateur. Liens curatés, wiki UX en français, communauté.