book

Ergonomie web

by Amélie Boucher

October 2011

Beginner

380 pages

12h 25m

French

Eyrolles

Read now

Unlock full access

Internet change, nous aussi !Pourquoi ce livre ?À qui s’adresse ce livre ?Est-ce que mon site est concerné ?Que vais-je trouver dans ce livre ?Remerciements
Généalogie et objectifs de l’ergonomie webUn site web ergonomique est un site utile et utilisableLa notion d’utilitéLa notion d’utilisabilitéAu départ : un utilisateur, des objectifs, un contexteObjectif 1 : efficacitéObjectif 2 : efficienceObjectif 3 : satisfactionIntérêt et retours sur investissementLes méthodes de l’ergonomie webMéthodes expertesMéthodes participativesLa place de l’ergonomie dans un projet web

L’idée reçue en quelques motsPourquoi faut-il se méfier de cette règle ?Le bon côté de la règle, et comment aller plus loinLes internautes sont des idiotsL’ergonomie et le design, ennemis jurésIdée reçue et réalités du métierPourquoi l’ergonomie aime le design graphiquePas besoin d’ergonomie, on a fait un focus groupFaites-moi un site ergonomiqueLes internautes lisent en FL’ergonomie, c’est juste du bon sensOn le fera en HTML 5, en Ajax, etc.Les internautes ne scrollent pasPour l’ergonomie, on verra à la finL’idée reçue en quelques motsPourquoi faut-il commencer par l’ergonomie ?
La loi de proximitéLa proximité doit respecter la logique des contenusLa proximité au niveau microscopiqueLa proximité peut causer des soucis d’interactionLa loi de similaritéDécouvrez et appliquez la loi de FittsLes éléments cliquables doivent être grosAugmenter la taille réelle des éléments cliquablesAugmenter la taille virtuelle des éléments cliquablesAugmenter la surface cliquable des éléments cliquablesAugmenter la distance entre les éléments cliquablesLes éléments cliquables doivent être prochesDécouvrez et appliquez le concept d’affordanceOptimiser l’affordance « vous pouvez me cliquer »Attention aux affordances erronéesOptimiser l’affordance « vous pouvez interagir avec moi »Le nombre magique de Miller et la loi de HickAccessibilité visuelle et lisibilitéFaciliter l’utilisation de moyens de contournement du mode visuelOptimiser la lisibilité à l’écranOptimisation des couleursLa différence de couleursLa différence de brillanceOptimisation des caractéristiques des textes
La notion de tâche pour mieux cerner l’internauteLes statistiques de visite, un atout majeurInterroger les internautesUn persona pas comme les autresPourquoi avez-vous intérêt à inventer des personas ?Inventer des personas vous force à vous pencher réellement sur votre cibleInventer des personas humanise votre cibleInventer des personas donne des objectifs à votre cibleComment créer et utiliser des personas ?Il existe différents types de personasCombien de personas devez-vous créer ?La création d’un persona est un travail collectifComment définit-on un persona ?Communiquer sur les personas
Les regroupements sont logiquesLa structuration met en avant les contenus clésLes menus aident l’internaute à naviguer dans les contenusContourner un site mal rangéRègle n° 2. Organisation visuelle : la page est bien rangéeÉviter le trop-plein d’informationsRéduire la quantité de mots sur les pages navigantesN’afficher que les principaux éléments de navigation et d’interactionAfficher les éléments optionnels seulement si nécessaireSupprimer les éléments d’interaction inutilesN’afficher que les éléments d’interaction les plus utilesDifférencier les quantités d’informations réelles et perçuesL’hétérogénéité visuelle augmente la charge informationnelleLes images de fond augmentent la charge informationnelleLes animations augmentent la charge informationnelleDémultiplier la valeur du pixel carréLe remplacement d’informations au clicLe remplacement d’informations au survolL’apparition d’informations au survolLa question de la publicitéOptimiser l’organisation et la hiérarchie visuelleRègle n° 3. Cohérence : le site capitalise sur l’apprentissage interneLes localisations sont cohérentesLes appellations sont cohérentesLes formats de présentation sont cohérentsLes interactions sont cohérentesRègle n° 4. Conventions : le site capitalise sur l’apprentissage externeQu’est-ce qu’une convention ?Respecter les conventions de localisationRespecter les conventions de vocabulaireRespecter les conventions d’interaction et de présentationRègle n° 5. Information : le site informe l’internaute et lui répondL’ordinateur informe et prévient l’internauteNe soyez pas avare d’informationsDonner de l’information généraleDonner de l’information pour faciliter la navigationDonner de l’information ponctuelleInformez, mais au bon momentInformez pour augmenter votre force persuasiveL’ordinateur répond aux actions de l’internauteDonner du feedback aux actions de l’internauteVisibilité du feedbackRègle n° 6. Compréhension : les mots et symboles sont choisis minutieusementLa bonne utilisation des mots sur le WebUtilisez le vocabulaire !Le vocabulaire doit être compréhensibleLe vocabulaire doit être orienté utilisateurLe vocabulaire doit être exact et précisLe vocabulaire doit être conventionnelAttention à l’utilisation des métaphoresLe vocabulaire doit être concisLes symboles et codes doivent être compréhensiblesRègle n° 7. Assistance : le site aide et dirige l’internauteDirigez grâce à l’organisation et à la visibilitéDirigez grâce aux affordancesLes affordances permettent de repérer ce qui est cliquableLes affordances permettent de repérer ce qui est utilisableHiérarchisez vos call-to-actionAttention à ne pas diriger de façon erronéeÉvitez d’avoir à diriger grâce à un modèle d’interaction adaptéAssistez votre internaute en tenant compte de ses besoins en termes de tâchesAssistez votre internaute en le suivant de très prèsFournissez de l’aide explicite en cas de besoinRègle n° 8. Gestion des erreurs : le site prévoit que l’internaute se trompeL’internaute ne doit pas faire d’erreurLa présentation du formulaire peut protéger contre l’erreurÉviter les erreurs grâce à l’indication des champs obligatoiresÉviter les erreurs grâce aux libellés et légendes des champsÉviter les erreurs grâce à la taille des champsÉviter les erreurs en utilisant les éléments de formulaire à bon escientÉviter les erreurs par l’affordance générale de l’interfaceLe fonctionnement du formulaire peut protéger contre l’erreurÉviter les erreurs en demandant une confirmation pour les actions risquéesÉviter les erreurs en empêchant la saisie de données erronéesÉviter les erreurs en validant ou en corrigeant à la voléeL’internaute doit facilement repérer et comprendre ses erreursFaciliter le repérage de l’erreurFournir une explication précise de l’erreurFaire preuve de courtoisie dans les messages d’erreurL’internaute doit facilement pouvoir corriger ses erreursFaciliter la correction grâce à l’explication de l’erreurFaciliter la correction grâce aux mécanismes de gestion des erreursRègle n° 9. Rapidité : l’internaute ne perd pas son tempsFaciliter les interactionsFaciliter l’action de visée des éléments cliquablesPrendre en compte les besoins de votre internaute sur le plan fonctionnelÉviter les actions inutilesProposer pour simplifier la tâcheDes modes d’interaction orientés efficienceRègle n° 10. Liberté : c’est l’internaute qui commandeRespectez les contrôles utilisateur conventionnelsFuyez les actions au rolloverFlexibilité des actions utilisateurDonnez la possibilité à l’internaute de contourner le système et d’agir dessusN’induisez pas de comportement passifLe système n’est pas intrusifLe système n’est pas lourd ou insistant dans ses propositionsLe système ne force pas l’utilisateur à voir quelque choseÉviter les introductions et fournir des entrées directesÉviter l’affichage de pop-ups spontanéesLe site n’agit pas à la place de l’internauteAu secours, le site prend le contrôle de l’ordinateurRègle n° 11. Accessibilité : un site facile d’accès pour tousAccessibilité physiqueAccessibilité technologiqueLa plate-forme de consultation est de l’ordre du bonus : adaptez le contenuLa plate-forme de consultation est stratégique : informez et guidezRègle n° 12. Satisfaction de votre internauteSatisfaire grâce au critère d’utilitéSatisfaire grâce à l’esthétique et à l’expérience utilisateur globaleSatisfaire grâce à la qualité du serviceSatisfaire grâce à la puissance et à la fiabilité techniqueEn bref : 12 règles à utiliser à bon escient
L’évaluation ergonomique, une pratique multiformeSupport et périmètre de l’évaluation ergonomiqueNormes, conventions, critères, checklists, etc.Structurer l’étude selon vos besoinsLes personas pondèrent les règles génériquesLes technologies vous mettent la puce à l’oreilleLe type de site et son contenu impliquent despointsclésàsurveillerConduire une analyse ergonomiqueSeul ou à plusieurs ?Le fil rouge : dans la peau de votre personaPar où commencer ?Les outils de l’audit ergonomiqueLes règles d’ergonomie, premier guide de travailLogiciels et outils techniquesPrendre des notesFaire des captures d’écranTester la compatibilité techniqueÉvaluer l’accessibilité visuelleÉvaluer la forme générale du siteQue faire de vos observations ?Hiérarchisez vos observationsLes livrables de l’auditLa suite des événements
Quelle est votre utilité globale ?Créez vos micro-utilitésComment imaginer et choisir des micro-utilitésDes exemples de micro-utilitésOffrir la vue la plus complète possible d’un produitPrendre en compte les comportements liés à l’achatPrécéder les interrogations des internautesSimplifier la tâche des internautes en précédant leurs besoins fonctionnelsPrendre en compte les potentialisateurs d’actionPour énumérer vos contenus, exploitez toutes vos sources !Que font les autres ? L’analyse concurrentielle en ergonomieLa démarche de l’analyse concurrentiellePrincipes de base de l’analyse concurrentielleDéfinissez votre panel concurrentielQui sont vos concurrents ergonomiques ?Combien de concurrents devez-vous analyser ?Analyses concurrentielles généralesAnalyses concurrentielles détaillées
Comment visite-t-on un site Internet ?La recherche par mot-clé : droit au but !La navigation ciblée : étape par étapeSupport : la navigation globale, un repère persistantSupport : la navigation locale, fille de la navigation globaleLa navigation libre, ou comment se promener sur le WebSupport : la navigation transversale, générée en fonction du besoinRechercher ou naviguer, telle est la questionLa raison pour laquelle on vient sur le siteLes préférences personnelles de l’utilisateurLes objectifs poursuivisLa confiance envers le moteur de recherche et la navigationLe type de siteLa présentation des fonctions de recherche et de navigationUne organisation calquée sur les attentes de l’internauteSource d’inspiration n° 1 : les objectifs et comportements utilisateurSource d’inspiration n° 2 : les représentations mentalesSource d’inspiration n° 3 : allez voir ailleurs !Source d’inspiration interdite : votre propre vision des chosesConcevez votre architecture de l’informationMode d’emploi en deux étapes : catégoriser puis structurerLa catégorisation : regrouper pour simplifierAlphabetChronologieLocalisation géographiqueThèmeActions utilisateurCible utilisateurLa structuration de l’informationUne structure hiérarchique représentée par les menusUne structure secondaire représentée par des liens contextuelsUne structure floue représentée par des liens semés au gré du siteUne structure vivanteRéaliser un plan de siteBien choisir ses motsLa quête du mot idéalIntégrer les contraintes spécifiques du WebLa concision : faites court !Prendre en compte les conventions de vocabulaireTraduire l’architecture par la navigationAu-delà de la navigation : architecturer les parcours client et les interactionsEn bref : obtenir des bases solides pour la suite
Espace disponible et principes de répartitionL’espace horizontal : une limite maximaleL’espace vertical et la notion de foldLes types de zonesLe zoning par l’exempleLe wireframe : chaque zone en détailLes différents types de wireframesQu’est-ce que je mets dans mon wireframe ?Textes et vocabulaireApparence et comportement des objetsApparence et comportement de classes d’objetsApparence et comportement d’éléments individuelsLe wireframe par l’exempleEt la suite ?
Le matériel du tri de cartesLes participants au tri de cartesDéroulement d’un tri de cartes : les règles du jeu1re étape : immersion2e étape : validation et précision des contenus3e étape : groupement4e étape : nommageAccompagner vos participantsLes grands types de tris de cartesSelon la liberté d’action des participantsTri de cartes ouvert : tout est possibleTri de cartes fermé : une place pour chaque chose et chaque chose à sa placeSelon le support du tri de cartesLe tri de cartes physiqueLe tri de cartes informatiséSelon votre panel de participantsAvec des internautes, pour s’adapter à leurs attentesAvec des spécialistes, pour s’inspirer de leur expertiseSelon le niveau de profondeur du tri de cartesExtensions possibles au tri de cartesCe que l’on peut tirer d’un tri de cartes : analysez les donnéesLe tri de cartes en bref : utilité et limites
Les participants d’un test utilisateurDes participants plus vrais que natureDes participants représentatifs de votre cible réelleGenreÂgeMétier et CSPRapport au site, à la marque ou à un domaineNiveau d’expertiseSituation familiale, région, projets de vie, etc.La personnalité idéale du testeurPlus ils jouent le jeu, mieux c’estPlus ils s’expriment, mieux c’estCombien de participants sont-ils nécessaires ?Oubliez les échantillons statistiquement suffisantsNombre idéal et nombre acceptable de participantsPlus de participants ou plus de tests ?L’étape de recrutementLa logistique du recrutementPrésenter l’étude à vos invités : mystère et doigtéComment remercier les participants ?Le support de test : tester quoi, à quel moment ?Prototype papier ou maquettes statiques à l’écranPrototype semi-fonctionnelSite finaliséRécapitulatif et intérêts de supports multiplesPlan de test et objectifs d’utilisabilitéUn test comme dans la vraie vie« Nous voulons tester l’efficacité de la barre de navigation »Tester un élément d’interface en particulierExcluez les tests comparatifsRéalisme des scénariosSouplesse des scénariosNombre de scénariosAu-delà des tâches la compréhension du siteEffets d’ordre et contrebalancementsLes erreurs à éviter lors de l’écriture du plan de testUn plan de test ne doit pas utiliser les mêmes mots que le siteUn plan de test ne doit pas détailler les étapes permettant de réaliser la tâcheUn plan de test ne doit pas être un questionnaireUn plan de test doit tester les missions du persona et non vos propres objectifsUn plan de test ne s’écrit pas seulLes objectifs d’utilisabilitéPendant le test utilisateurUn participant, et qui d’autre ?Qui doit être chargé du test ?Le rôle de l’animateurLes observateursCombien de temps dure un test utilisateur ?Le déroulement d’un test : étapes et recommandationsPré-questionnaire et déchargesMise en situation : les points clésFamiliarisation avec la procédureFamiliarisation avec le produitRéalisation des scénariosComment présenter le plan de test ?La bonne manière de prendre des notesComment relancer en cas de déviation ou d’échec ?Post-questionnaire et débriefingPost-testLe matériel d’enregistrementAnalyse des résultats et suite des événementsTri et hiérarchisation des observationsQuelles sont les observations que vous allez prendre en compte ?Pondération des observationsInterprétation et pistes de résolutionInterprétation des observationsTrouver des solutionsLe rapport de testUn test utilisateur à votre mesureAller plus loin que le test utilisateur : l’usage réel
Et après ?

Overview

Présentation

Quelles règles pour séduire et fidéliser votre internaute ?

Tout site Internet doit réussir le pari difficile de séduire et de satisfaire ses visiteurs. Mais comment connaître ces derniers et se mettre à leur place ? Comment concevoir un site si agréable et efficace qu'il donne envie d'y rester et d'y revenir ? Grâce aux conseils pratiques et méthodologiques d'Amélie Boucher dans ce livre devenu désormais la référence francophone, comprenez et appliquez l'ergonomie web sur le terrain !

Afin de tenir compte de l'évolution du Web, la totalité des exemples a été renouvelée pour cette troisième édition, enfin en couleur !

Alliez ergonomie et efficacité : concevez des sites pourvos utilisateurs

Débarrassez-vous des idées reçues et maîtrisez les 12 premières règles de l'ergonomie
Maniez les personas pour vous mettre dans la peau de vos internautes
Auditez l'ergonomie de votre site web
Définissez vos contenus et menez des benchmarks ergonomiques
Optimisez les parcours client dans votre site
Réalisez des zonings et wireframes
Évaluez les usages par des tris de cartes, des tests utilisateurs et de comportement
Inspirez-vous de sites réels pour améliorer votre ergonomie
Découvrez les fondements théoriques de l'ergonomie (accessibilité visuelle, loi de Fitts, affordances, théories de la Gestalt...)

À qui s'adresse cet ouvrage ?

Concepteurs web, ergonomes, architectes de l'information, designers web, rédacteurs
Développeurs web, webmestres et chefs de projet
Directeurs artistiques, responsables marketing, chefs de produit et directeurs de clientèle
Toute personne souhaitant réaliser un site web

Préfacé par Élie Sloïm.

Au sommaire

Introduction à l'ergonomie web
- L'ergonomie web, qu'est-ce que c'est ?
- Top 10 des idées reçues sur l'ergonomie
Dans la peau de votre internaute : les fondements de l'ergonomie
- Comprendre l'internaute : d'abord un être humain
- Définir votre internaute : critères et méthode des personas
Les règles de l'ergonomie web
- 12 règles pour optimiser l'ergonomie de votre site
- L'audit ergonomique : conseils et méthodologie
Les étapes de la conception web : pensez votre site de A à Z
- Définition des contenus et analyse concurrentielle
- Architecturer l'information et les interactions
- Passez à l'écran : zonings et wireframes
Mettez votre site à l'épreuve
- La méthode du tri de cartes pour organiser un site
- Les tests utilisateurs