Introduction au design d'interface (UI) et expérience utilisateur (UX)

1. Utilise ta charte graphique (couleurs de la marque).
2. Respecte la règle 60-30-10 (60% couleur dominante, 30% secondaire, 10% accent).
3. Vérifie le contraste.

💡 À retenir : La couleur doit servir la hiérarchie, pas juste décorer.

1. L'UX (User Experience) est la structure : c'est la logique, le parcours et la facilité d'utilisation.
2. L'UI (User Interface) est la peau : c'est le design, les couleurs, les icônes et la typographie.

💡 À retenir : L'UX rend le produit utile, l'UI le rend beau et agréable à utiliser.

Non, c'est une erreur classique.

1. Commence par le "Wireframe" (croquis noir et blanc) pour valider la structure.
2. Une fois que le parcours est logique, applique ta charte graphique (UI).

💡 À retenir : Ne jamais décorer une structure qui ne fonctionne pas.

Il n'y a pas de calcul fixe, mais utilise la règle de la "grille" (grid system).

1. Définis des marges fixes (ex: 20px).
2. Laisse des espaces vides (white space) entre les blocs pour aérer.

💡 À retenir : Le vide est un élément de design aussi important que le plein.

C'est rendre ton interface utilisable par tout le monde, y compris les personnes en situation de handicap (malvoyants, daltoniens).

1. Utilise des contrastes forts.
2. Ne compte pas uniquement sur la couleur pour transmettre une information.

💡 À retenir : Une bonne interface est une interface inclusive.

Non, l'UX s'applique à tout support numérique : sites web, logiciels, bornes interactives, montres connectées.

1. Le principe reste le même : comprendre l'utilisateur.
2. Seule l'ergonomie change selon la taille de l'écran.

💡 À retenir : L'UX est universel, quel que soit le support.

Il faut tester ton prototype avec des utilisateurs réels.

1. Donne une mission à un utilisateur (ex: "achète ce produit").
2. Observe ses difficultés sans l'aider.
3. Corrige les points de blocage.

💡 À retenir : Tu n'es pas ton utilisateur, teste toujours ton travail.

C'est un schéma basse fidélité, souvent en noir et blanc, qui montre l'emplacement des éléments.

1. Il sert à définir la hiérarchie.
2. Il évite de se perdre dans les détails graphiques trop tôt.

💡 À retenir : Le wireframe est le plan de l'architecte avant la construction de la maison.

Non, c'est déconseillé.

1. Utilise maximum deux polices : une pour les titres, une pour le texte courant.
2. Joue sur les graisses (Bold, Regular, Light) pour créer du contraste.

💡 À retenir : La simplicité renforce la lisibilité.

C'est le chemin que fait l'utilisateur pour atteindre son but.

1. Il doit être le plus court possible.
2. Chaque clic inutile est une frustration potentielle.

💡 À retenir : Moins il y a de clics, meilleure est l'expérience.

C'est une règle empirique qui dit qu'un utilisateur doit trouver ce qu'il cherche en 3 clics maximum.

1. Si c'est plus long, l'utilisateur risque de quitter.
2. C'est un objectif pour simplifier l'architecture.

💡 À retenir : L'efficacité est la priorité de l'UX.

Oui, idéalement.

1. Une icône seule peut être ambiguë (ex: une disquette pour "sauvegarder" n'est pas comprise par les plus jeunes).
2. Le texte lève toute ambiguïté.

💡 À retenir : La clarté prime sur l'esthétique pure.