Ux design & ergonomie des interfaces 6ème édition (extrait)

  • View
    184

  • Download
    2

Embed Size (px)

Transcript

  • Table des matires

    AVANT-PROPOS IX

    CHAPITRE 1 CONCEVOIR DES INTERFACES ERGONOMIQUES 1

    Les enjeux de la conception ergonomique 1Du besoin lusage 1Les bnfices de lergonomie 2Quelques russites commerciales 3

    Ergonomie du web 4Pourquoi faire des sites web faciles utiliser ? 4Linternaute est gnralement le client 4Concevoir un site web pour ses utilisateurs 5Proposer une exprience web mobile 7

    Ergonomie des intranets 8Les enjeux de lintranet 11La navigation : principale difficult des intranets 12

    Ergonomie tactile et mobile 13Les contextes dusage des smartphones et tablettes 14Concevoir pour de petits crans 15Tablette : plus despace pour enrichir lexprience 16Linteractivit au bout des doigts 18Ergonomie dune application mobile 19

    Cas pratique guichet-entreprises.fr : Ergonomie & Dmatrialisation 22Guichet Entreprises : dmatrialiser la cration dentreprise 23Dmatrialiser et tester auprs des usagers 23Maquetter pour valider linterface avant de dvelopper 24LUX pour rduire la dure du projet 25

  • IV UX Design et ergonomie des interfaces

    CHAPITRE 2 ORGANISER LINFORMATION 27

    Identifier le contenu 27Cibler les attentes des utilisateurs 28Transmettre linformation 28Architecture de communication 29

    Architecture de linformation 30Organiser selon la tche 30Organiser selon le contenu 34

    Agencer pour interagir 37Organiser lespace 37Le regard de lutilisateur 39Parcours visuel dune page web 40Accessibilit des lments de linterface 41Zones de manipulation 45Les dimensions de lcran 46Longueur des pages web 47Poids des pages web 49Multifentrage 49

    Concevoir la page daccueil 51Le responsive web design 55

    Cas pratique Refonte de lintranet de lEnseigne La Poste 63Le tri par cartes pour organiser les contenus 63Une utilisation quotidienne facilite pour les 55 000 agents de La Poste 65

    CHAPITRE 3 CONSTRUIRE LA NAVIGATION 67

    Principes ergonomiques de navigation 67

    Concevoir le systme de navigation 72Barre de navigation 72Navigation contextuelle 74Navigation web 75Navigation sur smartphone 79Processus par tapes : exemple du tunnel dachat 83

    Naviguer autrement dans une interface 87Moteur de recherche 87Plan de site 90

    Les lments du systme de navigation 91Le fil dAriane 91Les onglets 92Les menus droulants 93Les boutons de navigation 97Les liens 99

    Vrifier la navigation 102

    Cas pratique Photoweb : dvelopper ses photos avec une application mobileen toute simplicit 103

    Une application mobile pour personnaliser les produits photos 103

  • Table des matires V

    CHAPITRE 4 CRER LINTERACTION 107

    Interagir avec linterface 107Clavier 108Manipulation directe 109Souris 114Interaction tactile 117

    Les lments dinteraction 123Boutons 123Menus 125lments de slection 131Formulaires et champs de saisie 134

    Temps de rponse 144Lattente pour lutilisateur 144Minimiser lattente 146

    Cas pratique Lyonnaise des Eaux : un portail client mobile first 147Une refonte web responsive 147Tout Sur Mon Eau : Un rseau de sites pour simplifier les dmarches 148Une conception centre client et tactile (mobile first) 148Co-concevoir avec les utilisateurs et lquipe projet 149Une exprience client facilite, enrichie et rcompense 149

    CHAPITRE 5 COMMUNIQUER AVEC LUTILISATEUR 153

    Le langage de linterface 153Libell des commandes 153Messages 155Lcriture web 160Design motionnel 165

    Internationalisation des interfaces 167La page daccueil 167Choisir sa langue 169Traduction 170Localiser linterface 171Lecture du texte 175Spcificits culturelles 178Mthodologie 179

    Traitement des erreurs 180Types derreurs 180Messages derreur 184Prvention des erreurs 187Correction des erreurs 189

    Aide et assistance lutilisateur 189Diffrentes aides 190Lergonomie de laide 190Rdiger une aide efficace 192

    DunodToute

    reproductionnonau

    toris

    ees

    tundlit.

  • VI UX Design et ergonomie des interfaces

    Cas pratique SIRIUS NG : le compagnon du conducteur SNCF 195Une dmatrialisation ergonomique pour le conducteur SNCF 195Lapplication SIRIUS 195Une dmarche BYOD (Bring your own device) 195Une dmarche centre utilisateur en mode agile 195Un taux de satisfaction de plus de 90 % 197

    CHAPITRE 6 PRSENTER LINFORMATION 199

    Perception des informations 199Les lois de la perception 199Hirarchie visuelle 201

    Techniques de mise en vidence 201Animation 203Couleur de fond 203Graisse 204Taille 205Police de caractres 205Soulignement 206Forme 206Proximit 206Encadrement 206

    La couleur 206Composantes de la couleur 209Codage couleur 209Choix des couleurs 212Mthode de choix des couleurs 212

    Les icnes 213Construction des icnes 214Recommandations 215

    Le texte 216Liste puces 216Polices de caractres 217

    Prsentation des produits pour le-commerce 219La page produit 219La zone Panier 222La page Panier 224

    Cas pratique Logista France : une dmarche ergonomique pour concevoir un nouveau terminalde vente 226

    Un nouvel outil pour un nouveau mtier 226Une conception centre sur lusage 226Des ateliers de co-cration avec les quipes marketing 226Un design pur et novateur 227Une utilisation quotidienne intensive 227

    CHAPITRE 7 MTHODES DE CONCEPTION DES INTERFACES 229

    Conception oriente utilisateur 229Les tapes de la conception 229

  • Table des matires VII

    Les affres de la conception web 231Lutilisateur moyen nexiste pas 231

    Analyse 232Enqute/interviews utilisateur 232Focus group 234Modlisation de la tche 237

    Conception 239Personas 239Tri par carte 243Maquettage 245Conception mobile first 250

    valuation ergonomique 252Audit ergonomique 253Test de perception 255Test utilisateur 256

    Derniers conseils 265

    CONCLUSION 269

    ANNEXE 271

    Ltre humain 272Modle du processeur humain 272Thorie de laction 274Tche et activit 277

    Critres ergonomiques 279Compatibilit 279Guidage 281Homognit 283Flexibilit 284Contrle utilisateur 284Traitement des erreurs 285Charge mentale 286Check-list dvaluation ergonomique 287

    RFRENCES 291

    INDEX 301

    DunodToute

    reproductionnonau

    toris

    ees

    tundlit.

  • Avant-propos

    Trente rais se runissent autour dun moyeu.Cest de son vide que dpend lusage du char.

    On ptrit de la terre glaise pour faire des vases.Cest de son vide que dpend lusage des vases.

    On perce des portes et des fentres pour faire une maison.Cest de leur vide que dpend lusage de la maison.

    Cest pourquoi lutilit vient de ltre, lusage du non-tre.Lao-Tseu

    Chaque jour, le digital prend une place grandissante dans notre vie quotidienne ; aubureau, dans la rue, mais aussi dans nos foyers o la tablette a trouv sa place sur tousles canaps de nos salons. De nombreux objets de la vie de tous les jours : tlphone,montre, tlvision, etc. sont maintenant connects .

    Cesobjets, rendus intelligents par le numrique,ont t conuspournous faciliterla vie. Effectivement, ils nous aident et nous permettent de raliser facilement certainestches qui, sans eux, auraient demand beaucoup de temps et dnergie.

    Mais qui na jamais prouv des difficults les utiliser ? Qui na pas eu ouvrirle mode demploi de sa box avant denregistrer son mission favorite ? Qui na jamaisressenti ce sentiment de frustration de ne pas pouvoir utiliser pleinement un objet,faute de savoir comment sen servir ? Nul doute que ces machines nous sont utiles,mais elles ne sont pas toujours facilement utilisables...

    En fait, lusage dun instrument se caractrise selon deux dimensions : son utilit etson utilisabilit1.

    Lutilit est la capacit de lobjet servir la ralisation dune activit humaine, tandisque lutilisabilit reprsente la facilit demploi de cet objet.

    1. Utilisabilit est une traduction littrale de usability qui est le terme employ par les ergonomesanglo-saxons. Usability aurait aussi pu tre traduit par ergonomie , mais ce mot a un sens pluslarge. Lergonomie est une science qui a pour objet ltude du travail humain, tandis que lutilisabilitest une caractristique de lobjet lui-mme. Cest donc par abus de langage que nous emploieronsdans cet ouvrage le terme ergonomie la place de utilisabilit .

  • X UX Design et ergonomie des interfaces

    Considrons, par exemple, deux objets ddis une utilisation similaire : la combi-naison de plonge et le scaphandre. Ils relvent de la mme utilit : permettre de sedplacer sous leau. Cependant, le scaphandre, du fait de son poids et de la connexionpermanente avec la source dair, est dune utilisabilit moindre que la combinaisonqui offre une plus grande autonomie. Les plongeurs lont vite compris : depuis que lacombinaison de plonge a t invente, le scaphandre nest quasiment plus utilis...Linstrument dont lutilisabilit est la meilleure a t choisi.

    Lutilisabilit est la capacit de lobjet tre facilement utilis par une personnedonnepour raliser la tche pour laquelle il a t conu. La notion dutilisabilit englobe la fois la performance de ralisationde la tche, la satisfaction que procure lutilisationde lobjet et la facilit avec laquelle on apprend sen servir.

    Cette qualit concerne tout type dinstrument destin aider ltre humain. Nousnous intressons ici lutilisabilit des applications digitales.

    Les auteurs anglais emploient gnralement le terme User Experience pour dsi-gner lutilisabilit. Cest une notion plus globale ; il sagit de lexprience complte vcuepar lutilisateur lorsquil se sert de lapplication. Aujourdhui, dans unmonde o les appli-cations sont ubiquitaires (lutilisateur commence sur son smartphone puis continue sursa tablette ou son portable), nous ne pouvons plus tenir compte uniquement de linter-action sur un seul dispositif. Lusage est devenu une exprience globale. Cest pourquoi,nous prfrerons utilisabilit , le terme ExprienceUtilisateur dont lacronymeest UX par rfrence au t