Présent dans tous les sites Internet, le « bouton » est un composant ordinaire d’interaction, mais le design de cet élément clé de l’interface utilisateur -a priori, très simple – a fortement évolué depuis ces dernières décennies.
Découvrons ensemble l’évolution de la conception des boutons, ce composant essentiel à l’engagement du visiteur, qui doit impérativement être reconnaissable et clair.
Du bouton en trois dimensions au bouton fantôme, en passant par les éléments skeuomorphiques, plats ou flottants…
Le bouton en trois dimensions
Cette boîte de dialogue Windows 95 utilisait des ombres lourdes que l’on mettait en évidence pour créer un effet 3D. Cela aidait les utilisateurs à interpréter la hiérarchie visuelle et à comprendre quels éléments étaient interactifs.
Le bouton Skeuomorphic
Dans le design numérique, le terme skeuomorphism renvoie à la forme que prennent les éléments d’interface utilisateur pour ressembler à des objets de la vie réelle.
Le bouton Flat Design
Puis, on est passé du « Skeuomorphic design » au « Flat design » : des boutons dépourvus d’effets 3D. Un moyen d’explorer le milieu numérique, sans essayer de reproduire l’apparence du monde physique.
Le bouton d’action flottant
Ensuite, on a fait évoluer la conception plate en une conception « presque » plate. Concrètement, cela se traduit par des ombres subtiles, des reflets et des calques pour créer une certaine profondeur dans l’interface utilisateur.
Le bouton fantôme
En 2014, c’est l’apparition des boutons fantômes. Ils sont généralement délimités par une ligne très mince, tandis que la section interne se compose de texte brut.
Source : Le site UX Planet
Jeu de briques
Snake
Pacman
Bubble