Aller au contenu

Cours UX/UI Design & Ergonomie

logo-ux-ui-design

Introduction à l’UX/UI Design & Ergonomie

Ce cours est complet sous la forme de diaporama qui vous sera donné au format PDF en présentiel.

Cette page n’est que la structure de base qui sera complétée par la suite avec d’autres exemples complémentaires.

Définitions et concepts

heureux

Exemple : Vous êtes content après avoir pu réserver un train rapidement et facilement.

Exemple : Vous cliquez sur la forme arrondie d’un bouton Acheter de couleur verte pétante !

Combinaisons UX/UI

Comparaison des combinaisons UX / UI et leurs effets sur l'expérience utilisateur
UX UI Interface Visuelle Expérience Utilisateur Retour utilisateur
Mauvaise Bonne Beau design, joli visuel Incompréhensible, frustrant C’est un beau site, mais je ne trouve pas ce que je cherche !
Bonne Mauvaise Moche, dépassée Facile, rapide à utiliser Ce site est moche mais j’ai réservé facilement une séance !
Bonne Bonne Claire, jolie et moderne Fluide, agréable, efficace Ce site est superbe et j'ai pu trouver les articles que je cherchais ! »

Illustration avec les écouteurs

écouteurs avec fils

écouteurs sans fils

Chapitre 2 – Le rôle du designer UX/UI

Missions UX

Missions UI

Collaboration

Un UX/UI Designer ne travaille jamais seul. Il collabore avec :

Schéma

à intégrer

Exercice

Faites une carte mentale des acteurs avec lesquels un designer doit collaborer !

Chapitre 3 – Design Thinking

Les 5 étapes (itératives)

  1. Empathie : Interviews, observation.
  2. Définir : Reformuler le problème.
  3. Idéation : Générer plein d’idées (crazy 8, brainstorming).
  4. Prototype : Maquettes papier ou Figma.
  5. Test : Retour utilisateur, itération.

Exemple visuel

à intégrer

C’est quoi le Design Thinking ?

Le Design Thinking, c’est un processus de pensées, un cadre qui favorise l’innovation pour résoudre des problèmes en comprenant vraiment les internautes (co-créativité) et en trouvant des idées utiles, originales et efficaces. Nous restons ici dans le processus de l’eXpérience Utilisateur (retours des internautes finaux).

C’est un processus itératif, on observe, on imagine, on teste et on améliore, encore et encore !

Processus en 5 étapes

1. EMPATHIE : Comprendre ce que veulent réellement les internautes !

On doit comprendre ce que ressentent et vivent les internautes lorsqu’ils naviguent sur un site web ou une application.

Exemple : Votre amie Joséphine vous dit : “Je n’arrive jamais à réserver une salle de sport sur ton site !”

Vous devez raisonner comme un.e “UX Designer” !

Vous l’écoutez, vous l’observez, vous lui posez des questions et vous notez ce qui pose problème pour elle…

2. DÉFINIR : Trouver le vrai problème à résoudre

Quand on comprend ce que vivent les internautes, on trouve le cœur du problème.

Joséphine vous dit : Je ne sais jamais quand il reste des places, alors je perds du temps.

Vous identifiez le problème : Elle veut connaître les créneaux disponibles facilement et rapidement !

3. IDÉATION : Trouver des idées sans se restreindre

Même les idées bizarres sont les bienvenues ! Faites du Brainstorming sans jugement.

Exemple :

4. PROTOTYPE : Concevoir une version non fonctionnelle

Vous choisissez l’idée la plus pertinente et vous fabriquez une version rapide : un dessin, une maquette, un prototype.

En règle générale, on utilise un logiciel comme Figma (voir Chapitre 14).

Note : Ce n’est pas encore une vraie application. C’est juste une maquette pour voir à quoi ça pourrait ressembler et présenter cette dernière à l’internaute dans la dernière étape…

5. TEST : Vous faites tester votre idée pour l’améliorer

Vous montrez votre prototype à Joséphine ou à d’autres internautes.

Vous les observez pour savoir ce qu’ils comprennent, ce qu’ils ne trouvent pas, ce qui les gêne !

Théo vous dit : Je ne vois pas tout de suite les créneaux libres, les couleurs sont trop proches ! (Théo est daltonien)

Vous notez : Améliorer la visibilité des créneaux en adaptant les couleurs pour les personnes daltoniennes.

Ensuite… vous améliorez votre prototype et vous pousuivez le processus si nécessaire !

Le processus est itératif !

Exercice

Chapitre 4 – UI & Ergonomie

Définition

L’ergonomie web vise à adapter l’interface d’un site ou d’une application aux caractéristiques cognitives, perceptives et émotionnelles de l’utilisateur.

Objectif : que l’utilisateur atteigne son but rapidement, facilement et avec plaisir.

Lien : https://seomaniak.ma/lergonomie-pour-une-meilleure-ux/

Les 12 règles d’ergonomie

1. Architecture : un site bien construit

Exemple : à intégrer

2. Organisation visuelle

Exemple : Site Airbnb : La recherche est centrale, les infos secondaires en bas

3. Cohérence

Exemple : Google garde toujours le bouton bleu “Suivant” à droite.

4. Conventions

Exemple : si vous mettez un panier en forme de cœur ou autre, l’internaure ne va pas comprendre même si vous trouvez cela drôle Vous allez générer de la confusion.

5. Informer

Exemple : Gmail vous affiche “Message envoyé” en bas à gauche.

6. Compréhensible

Exemple : Au lieu de Erreur 404 – ressource introuvable préféré : “Oups ! Désolé, la page n’existe plus !”.

7. Guider l’internaute

Exemple : Tunnel d’achat Amazon avec étapes visibles (Panier puis Adresse puis Paiement puis Validation).

8. Droit à l’erreur

Exemple : Gmail propose Annuler l’envoi pendant quelques secondes.

9. Fluidité et rapidité

Exemple : Formulaire d’Apple Pay = 2 clics pour payer.

10. Liberté pour l’internaute

Exemple : Booking.com propose des recherches libres + filtres avancés.

11. Accessibilité

Cette règle est approfondie dans le cours RGAA, WCAG, RAAM.

Mais dans l’ergonomie :

Exemple : un bouton Rouge = erreur : doit aussi être accompagné d’un texte clair.

12. Internaute heureux

N’oubliez jamais le but ultime !

Exemple : Spotify : expérience rapide, design agréable, service fiable.

Conclusion sur les 12 règles

Ces 12 règles forment un cadre pratique pour auditer ou concevoir un site ergonomique.

Elles sont complémentaires à l’accessibilité :

Chapitre 5 – Outils incontournables

Wireframing

UI Design

Tests

Exemple visuel

à intégrer

Chapitre 5 – UX Research

Méthodes

Personas

Fiche utilisateur type :

Exemple fiche persona à intégrer

User Journey Map

Carte des étapes vécues par l’utilisateur avec ses émotions.

Diagramme à intégrer

Chapitre 6 – Principes de l’UI Design

Hiérarchie visuelle

Exemple visuel : page web mal hiérarchisée vs bien structurée

Typographie

Couleurs

Exemple visuel

Palette cohérente contre palette arc-en-ciel trop chargée.

Chapitre 7 – Accessibilité et inclusivité

Principes clés

Voir site de simulation

Exercice

Testez vos couleurs sur contrastchecker.com.

Chapitre 8 – Tests utilisateurs

Étapes

Exemple visuel

Capture d’un test utilisateur filmé (interface + caméra).

https://www.youtube.com/watch?v=sVog_1n1WyM&ab_channel=BlueSoft

Chapitre 9 – Métriques UX

à intégrer l’exemple graphique en barres avec 3 métriques

Chapitre 10 – Projet fil rouge

Sujet

Concevoir une application mobile de réservation de salles de sport.

Étapes

  1. Créer 2 personas.
  2. Parcours utilisateur.
  3. Wireframes.
  4. Maquette haute fidélité Figma.
  5. Test utilisateur.
  6. Amélioration.

Chapitre 11 – Exercices pratiques

  1. Analyse d’un site → 3 points positifs + 3 à améliorer.
  2. Wireframe papier d’une page d’accueil.
  3. Vérification accessibilité.
  4. Tests utilisateurs en binôme.

Chapitre 12 – Questions certification

  1. UX vs UI ?
  2. Qu’est-ce qu’un persona ?
  3. Citez 3 critères d’accessibilité.
  4. 5 étapes du Design Thinking.
  5. Définition d’un wireframe.

Chapitre 13 – Ressources

Ce cours est complet sous la forme de diaporama qui vous sera donné au format PDF pour le cours en présentiel.