Le Design d'Interface

Pourquoi c'est important

Une bonne UI ne se remarque pas : elle guide l'utilisateur naturellement. Les patterns UI sont des conventions testees par des millions d'utilisateurs. Les respecter, c'est réduire la friction.

Le framework

1. 01

   1. L'Affordance

   Un élément doit communiquer sa fonction par son apparence. Un bouton doit ressembler a un bouton. Un lien doit etre percu comme cliquable. L'affordance reduit la charge cognitive.

2. 02

   2. Le Feedback

   Hover : changement subtil au survol; Active : retour visuel au clic; Loading : indicateur de chargement; Success / Error : confirmation claire

3. 03

   3. La Hiérarchie

   Taille : plus c'est grand, plus c'est important; Couleur : l'accent guide le regard; Espacement : le vide crée du focus; Position : en haut a gauche = vu en premier

4. 04

   Navigation

   Barre fixe en haut, burger sur mobile, breadcrumbs pour la profondeur. Max 7 items principaux.

5. 05

   Formulaires

   Labels au-dessus, un champ par ligne, validation inline, progression visible pour les longs formulaires.

6. 06

   Cards

   Conteneurs d'information autonomes. Image + titre + description + CTA. Le pattern le plus polyvalent du web.

7. 07

   Modales

   Pour les actions critiques uniquement. Overlay sombre, bouton fermer visible, focus piege à l'intérieur.

Pour aller plus loin