TOUT CE QUI SUIT est présenté en détail dans le diaporama. J’ai laissé la structure mais c’est temporaire.
Un UX/UI Designer ne travaille jamais seul. Il collabore avec :
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 !
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…
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 !
Même les idées bizarres sont les bienvenues ! Faites du Brainstorming sans jugement.
Exemple :
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…
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 !
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/
Exemple : dans la présentation
Exemple : sur le Site Airbnb vous voyez que la recherche est centrale, les infos secondaires en bas.
Exemple : Google garde toujours le bouton bleu “Suivant” à droite.
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.
Donner un feedback immédiat à l’utilisateur :
Exemple : Gmail vous affiche “Message envoyé” en bas à gauche. C’est bien d’être informé !
Exemple : Au lieu de Erreur 404 – ressource introuvable préféré : “Oups ! Désolé, la page n’existe plus !”.
Exemple : le Tunnel d’achat Amazon avec des étapes visibles (Panier puis Adresse puis Paiement puis Validation). c’est le principe du fil d’ariane.
Exemple : Gmail propose Annuler l’envoi pendant quelques secondes.
Exemple : le formulaire d’Apple Pay = 2 clics pour payer.
Exemple : le site Booking.com propose des recherches libres avec des filtres avancés.
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.
N’oubliez jamais le but ultime !
Exemple : Avec le site Spotify, l’internaute a généralement une expérience satisfaisante, rapide, aevc design agréable, un service fiable.
Ces 12 règles forment un cadre pratique pour auditer ou concevoir un site ergonomique.
Elles sont complémentaires à l’accessibilité :
Fiche utilisateur type :
Les fiches fiches personas sont présenter dans le cours.
Carte des étapes vécues par l’utilisateur avec ses émotions.
Idem, fourni pendant le cours.
Ces principes sont expliqué lors de la présentation.
Exemple visuel : page web mal hiérarchisée vs bien structurée
Exemple visuel : Palette cohérente contre palette arc-en-ciel trop chargée.
Voir site de simulation.
Testez vos couleurs sur contrastchecker.com.
https://www.youtube.com/watch?v=sVog_1n1WyM&ab_channel=BlueSoft
Concevoir une application mobile de réservation de salles de sport.
Ce cours est complet sous la forme de diaporama qui vous sera donné au format PDF pour le cours en présentiel.