Aller au contenu principal

Design UX

Design thinking​

Qu'est-ce que le design thinking ?​

  • Origines : 1950-1960 (plutôt pour le milieu architecture + ingénieur), puis arrivée dans le milieu informatique en 1969
  • processus de conception itératif et non-linéaire, où l'utilisateur est au cœur de la démarche de conception
  • doit satisfaire 3 critères : désirabilité, faisabilité technique et viabilité économique
  • contient généralement entre 3 à 7 phases

Principes​

  • Etre centré utilisateur => on utilise des méthodes d'observation, de co-conception et d'évaluation
  • Etre collaboratif => travailler en équipes pluridisciplinaires, souvent des ateliers
  • Etre itératif => itérations courtes ; se tromper fait partie du cheminement qui conduit vers la solution optimale

Différents frameworks du design thinking​

  • "Early traditional" (Herbert Simon - 1969) : définir, rechercher, imaginer, prototyper, choisir, mettre en œuvre, apprendre
  • 5-stage model - d.school : empathize, define, ideate, prototype, test
  • AIGA - Head (solve), Heart (Empathize), Hand (Create)
  • Deep dive (IDEO, HCD - human centered design)
  • Double diamant (design council)

Focus sur le framework du "5-stage model" de la d.school :

  • entrer en empathie : comprendre les besoins, frustrations et attentes des utilisateurs (par exemple avec des personas, cartes d'empathie,...)
    • Développer son empathie pour un groupe cible : en faisant de la discovery, en s'immergeant (expérimenter le contexte depuis le POV de l'utilisateur), en se connectant / se rappelant de nos propres expériences
  • définir (le point de vue, le problème de l'utilisateur)
    • Métaphore des deux diamants
    • NOM a besoin de VERBE parce que INSIGHT
    • Customer journey - représentation graphique de l'expérience utilisateur sur une ligne de temps en distinguant xp positive de négative
  • imaginer : brainstormer, générer des idées
  • prototyper - commencer à créer des solutions
  • tester - tester la solution

Sources​

Bonnes pratiques et lois UX​

Quelques principes UX

Loi de Fitts

  • par Paul Fitts (1954)
  • "Le temps requis pour atteindre une cible est proportionnel à la distance entre le point de départ et la cible, et inversement proportionnel à la taille de la zone de destination."
  • Les fonctions les plus utilisées doivent être rapidement accessibles, de taille respectable et proche de l'action précédente

Loi de Hick ou loi de Hick-Hyman

  • plus l'utilisateur a de choix, plus il lui faudra du temps pour prendre une décision

  • Eviter de proposer trop de choix, ou mettre en avant des choix recommandés ou populaires

  • Privilégier une arborescence ou des filtres

    Groupement par la localisation

  • D'après Bastien & Scapin : on a plus de facilité à repérer les différents items s'ils sont présentés de façon organisée (alphabétique, fréquence d’utilisation,...)

Actions minimales

  • D'après Bastien & Scapin
  • Limiter autant que possible les étapes par lesquelles doivent passer les utilisateurs

UX honeycomb​

ou diagramme "alvéolé"de Peter Morville avec 7 principes :

  • Utilité
  • Désirabilité - rendre le produit fun, engageant
  • Accessibilité
  • Crédibilité : gagner la confiance des utilisateurs - être transparent, inclure des testimonials et reviews, présenter l'équipe, rendre plus humains...
  • Repérabilité : navigation intuitive, information bien structuré
  • Utilisabilité
  • Valable (Valeur-impact)

Design émotionnel​

"All design is emotional"

  • Design émotionnel = designer spécifiquement pour les émotions
  • Emotional economy : beaucoup de personnes achètent sous le coup de l'émotion
  • Les trois niveaux de design de Don Norman :
    • Viscéral ("cerveau réptilien"/lizard brain - instinctif) : premières impressions, principalement visuel
    • Comportemental. Veut faire qqchose et accomplir un but ; satisfaire les besoins
    • Réflexif : culture, statut (social par ex)
  • Comment rendre un design émotionnel
    • Ajouter une touche humaine à nos produits
    • Définir des objectifs d'expérience : comment on veut que ces personnes se sentent en faisant l'action
    • Peut être définie par : le ton, les couleurs, la typographie (formelle/informelle, sérieuse ou joueuse), l'ux writing/microcopy

Sources :

Design inclusif​

Choix de la civilité :

  • En a-t-on vraiment besoin ?
  • Si oui, proposer des choix non-binaires + ajouter des explications. Le choix "ne se prononce pas" peut être perçu négativement (vu comme accusatoire, comme si la personne répondante devait garder un secret)

Choix du nom/prénom :

  • Faire la différence entre prénom civil vs d'usage
  • Pouvoir mettre à jour son nom légal facilement et gratuitement

Sexe biologique :

  • Certains sites peuvent demander de saisir son sexe (contexte médical par ex)
  • En as t'on réellement besoin ?
  • Si oui, plutôt proposer 3 options si cohérent (homme, femme, intersexe) en expliquant pourquoi l'information est nécessaire

Pronoms :

  • Possibilité de choisir ses pronoms (usage : réseaux sociaux par ex)

Sources :

Formulaires​

  • Lisibilité et compréhension
    • Label : toujours avoir un label, concis (pas de "Merci de remplir..."), pas de tout majuscule, lier les labels aux champs (avec for/id)
    • Indiquer le :focus et le retour au touch avec :active
    • Comprendre pourquoi on a besoin de l'information de tel champ
    • Comprendre où trouver l'information (ex: pour un champ "Code promo", un lien "où trouver un code ?")
    • Comprendre comment je dois formatter dans le format (pour les dates par exemple JJ/MM/AAAA)
    • Eviter les placeholders (le champ vide peut sembler rempli, pb d'accessibilité souvent sur les contrastes et lecteurs d'écrans) ; potentiellement ok pour des champs très courts (recherche et login)
  • Marquer les champs optionnels et obligatoires
  • Faciliter le remplissage des champs
    • Faire en sorte que le champ ait la taille du contenu souhaité
    • Choisir le bon type html (email, password, date, tel, search,...) pour l'autocomplétion navigateur ou mobile

Sur mobile :

  • En tél portrait : Label au dessus du champ et pas à côté
  • En tél paysage : l'inverse (label à gauche)
  • CSS: media query pour check l'orientation du téléphone

Tester :

  • Tester, la suppression de champs ne fait pas tout
  • Tester le temps de complétion, taux d'abandon, points d'accrochage, frustration utilisateur.rice

Sources :

Dernière mise à jour le