AL
BE INT
ER
ER
-SELL ST
N AT I O
N
Site Web : priorité à la simplicité
Jakob Nielsen Hoa Loranger
CampusPress...
23 downloads
1439 Views
59MB Size
Report
This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Report copyright / DMCA form
AL
BE INT
ER
ER
-SELL ST
N AT I O
N
Site Web : priorité à la simplicité
Jakob Nielsen Hoa Loranger
CampusPress a apporté le plus grand soin à la réalisation de ce livre afin de vous fournir une information complète et fiable. Cependant, CampusPress n’assume de responsabilités, ni pour son utilisation, ni pour les contrefaçons de brevets ou atteintes aux droits de tierces personnes qui pourraient résulter de cette utilisation. Les exemples ou les programmes présents dans cet ouvrage sont fournis pour illustrer les descriptions théoriques. Ils ne sont en aucun cas destinés à une utilisation commerciale ou professionnelle. CampusPress ne pourra en aucun cas être tenu pour responsable des préjudices ou dommages de quelque nature que ce soit pouvant résulter de l’utilisation de ces exemples ou programmes. Tous les noms de produits ou marques cités dans ce livre sont des marques déposées par leurs propriétaires respectifs.
Publié par CampusPress
Titre original : Prioritizing Web Usability
47 bis, rue des Vinaigriers
Traduction : Nathalie Le Guillou de Penanros
75010 PARIS
ISBN original : 0-321-35031-6
Tél. : 01 72 74 90 00 Copyright © 2006 by Nielsen Norman Group Réalisation PAO : Léa B. ISBN : 978-2-7440-4091-7 Copyright© 2009 Pearson Education France Tous droits réservés
New Riders 1249 Eighth Street - Berkeley, CA 94710 All rights Reserved.
No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education, Inc.
Aucune représentation ou reproduction, même partielle, autre que celles prévues à l’article L. 122-5 2˚ et 3˚ a) du code de la propriété intellectuelle ne peut être faite sans l’autorisation expresse de Pearson Education France ou, le cas échéant, sans le respect des modalités prévues à l’article L. 122-10 dudit code.
Note de l’éditeur français Traduire implique nécessairement un délicat exercice d’adaptation d’un univers linguistique à un autre. La traduction de l’ouvrage de Jacob Nielsen et Hoa Loranger n’a pas échappé à cette règle, laquelle s’est appliquée ex abrupto dès la traduction du titre original et de ce concept d’usability qui est au cœur du propos des auteurs. Après avoir envisagé plusieurs termes capables de rendre les nuances de facilité d’utilisation mais aussi d’efficacité que sous-entend usability (et qu’échouent à transcrire tant « convivialité » que « simplicité d’utilisation »), il a été décidé d’employer le néologisme « utilisabilité », qui semble désormais consacré tant par les milieux universitaires que par les organismes de normalisation : « un système est utilisable lorsqu’il permet à l’utilisateur de réaliser sa tâche avec efficacité, efficience et satisfaction dans le contexte d’utilisation spécifié » (ISO 9241-11, « Lignes directrices relatives à l’utilisabilité »). Notons qu’»ergonomie » aurait pu être un autre choix recevable, bien que cette notion soit historiquement liée à l’amélioration des conditions de travail, quand l’utilisabilité se rattache plus à une démarche qualité, applicable à tous types d’activités (et notamment celles menées sur le Web). La traduction de « design » aura posé un autre type de problème, du fait que l’anglais exprime par ce substantif et ce verbe tant la notion de création de forme que de conception. La traduction française exprime donc cette polysémie par l’emploi de « conception, concevoir, projet » lorsqu’il s’agit de transcrire l’action de penser un site Web, qu’il s’agisse de son architecture globale ou du bon placement des éléments d’IHM au sein d’une page Web. Et par « design » quand l’esthétique est en jeu, quand le dessin de la page et sa perception visuelle par l’internaute prévalent sur le « dessein », le projet global.
III
A propos des auteurs Jakob Nielsen Jakob Nielsen est l’un des principaux membres de Nielsen Norman Group. Il est fondateur du mouvement de « l’ingénierie de l’utilisabilité », qui propose des méthodes rapides et efficaces pour améliorer la qualité de l’interface utilisateur. Jakob Nielsen, qualifié de « premier expert au monde de l’utilisabilité du Web » par U.S. News and World Report et « la meilleure chose qui existe après la machine à remonter le temps » par USA Today, est l’auteur du bestseller Designing Web Usability:The Practice of Simplicity (New Riders Publishing, 2000), avec plus de 250 000 exemplaires vendus dans 22 langues. Il a également publié Usability Engineering (Morgan Kaufmann, 1993), Usability Inspection Methods (Wiley, 1994) avec Robert L. Mack, Multimedia and Hypertext: The Internet and Beyond (Morgan Kaufman, 1995), International User Interfaces (Wiley, 1996) et Homepage Usability: 50 Websites Deconstructed (New Riders Publishing, 2001) avec Marie Tahir. Ses articles Alertbox sur l’utilisabilité sont publiés sur Internet depuis 1995, avec environ 200 000 lecteurs sur le site www.useit.com. De 1994 à 1998, J. Nielsen était ingénieur chez Sun Microsystems, après avoir occupé des postes chez Bell Communications Research, à l’université technique du Danemark et à l’IBM User Interface Institute. Il a déposé 79 brevets aux Etats-Unis, principalement sur des moyens de simplifier l’utilisation d’Internet. J. Nielsen a obtenu un doctorat en interaction homme-machine à l’université technique du Danemark.
IV
Site Web : priorité à la simplicité
Hoa Loranger Hoa Loranger est spécialiste de l’expérience utilisateur chez Nielsen Norman Group et dirige le bureau de San Diego. Elle conseille de nombreuses grandes entreprises des secteurs du divertissement, de la finance, de la technologie, du commerce électronique, de l’intranet, etc. Elle a permis d’installer des stratégies de conception centrées sur l’utilisateur, menant à une amélioration des ventes et du retour sur investissement. H. Loranger propose des conférences et des cours sur toute une série de sujets, comprenant les principes et directives d’utilisabilité, les concepts de design axés sur l’utilisateur et les méthodologies de recherche appliquée. Elle produit des vidéos de formation et rédige des rapports sur des thèmes tels que les applications Flash, les adolescents sur le Web, les sites Web B2B et les techniques de prototypage papier. Ses recherches étendues en matière d’utilisabilité ont des répercussions en Asie, en Australie, en Europe et en Amérique du Nord. Avant de rejoindre Nielsen Norman Group, Hoa Loranger a travaillé dans le secteur des facteurs humains chez Intuit, où son groupe était chargé de l’interaction utilisateur et de la conception visuelle pour la ligne de produits TurboTax et QuickBooks. Chez TRW (actuellement Northrop Grumman), elle s’est spécialisée dans les systèmes matériels et logiciels, notamment les applications logistiques et de navigation, ainsi que dans les configurations informatiques pour les véhicules militaires. Hoa Loranger a obtenu une maîtrise en facteurs humains et psychologie expérimentale appliquée à l’université de Californie à Northbridge et une licence en psychologie à l’université de Californie, à Irvine.
V
Table des matières
1
2
Préface . . . . . . . . . . . . . . . . . . . . . . . . . .
XV
L’utilisabilité au fil du temps . . . . . . . . . . . . . .
XIX
Public concerné par cet ouvrage . . . . . . . . . . . .
XXI
Introduction : rien à cacher . . . . . . . . . . . . . .
3
La source de nos données . . . . . . . . . . . . . . .
4
Déroulement de l’étude . . . . . . . . . . . . . .
5
Et si un site a changé ? . . . . . . . . . . . . . . .
14
Pourquoi ai-je besoin d’effectuer un test utilisateur ? . . . . . . . . . . . . . . . . . . .
17
Les exceptions . . . . . . . . . . . . . . . . . . . .
17
L’expérience de l’utilisateur sur le Web . . . . . .
21
Quel emploi fait-on du Web ? . . . . . . . . . . . . .
22
Des taux de succès non dirigés . . . . . . . . . . .
24
Le succès par niveau d’expérience . . . . . . . . .
25
Satisfaction des utilisateurs quant aux sites Web
. .
26
Utilisation des sites Web . . . . . . . . . . . . . . . .
27
La page d’accueil, tant à dire en si peu de temps
30
Comportement sur les pages intérieures
. . . . .
33
Prédominance des recherches . . . . . . . . . . . . .
36
Utilisation de la page des résultats des moteurs de recherche . . . . . . . . . . . . .
39
Utiliser la tarification des mots-clés pour estimer les améliorations de l’utilisabilité . . . . .
41
VII
3
VIII
Défilement . . . . . . . . . . . . . . . . . . . . . . .
45
Respect des conventions de conception et des instructions d’utilisabilité . . . . . . . . . . .
47
Butinage d’informations . . . . . . . . . . . . . . . .
52
La trace des informations, un bon indice du succès . . . . . . . . . . . . . . .
52
Régimes alimentaires : les sites à visiter . . . . . .
52
Abandonner le terrain de chasse : à quel moment aller chasser ailleurs . . . . . . . .
53
Comportement de navigation informativore . . .
55
Révision des premières conclusions sur l’utilisabilité . . . . . . . . . . . . . . . . . . . .
57
Huit problèmes qui n’ont pas changé . . . . . . . . .
60
Les liens qui ne changent pas de couleur lorsqu’ils ont été visités . . . . . . . . . . . . . .
60
Mauvais fonctionnement du bouton Précédent . .
63
Ouverture de nouvelles fenêtres de navigateur . .
67
Fenêtres contextuelles . . . . . . . . . . . . . . .
72
Eléments de conception ressemblant à des publicités. . . . . . . . . . . . . . . . . . . .
76
Enfreindre les conventions du Web . . . . . . . .
78
Contenu vaporeux et réputation surfaite . . . . .
80
Contenu dense et texte illisible
. . . . . . . . . .
81
Evolution technologique et utilisabilité . . . . . . . .
84
Les temps de téléchargement . . . . . . . . . . .
86
Les cadres . . . . . . . . . . . . . . . . . . . . . .
87
Flash . . . . . . . . . . . . . . . . . . . . . . . . .
88
Résultats de recherche peu pertinents
. . . . . .
91
Multimédia et vidéos volumineux . . . . . . . . .
91
Mises en page figées . . . . . . . . . . . . . . . .
92
Incompatibilité entre les plates-formes . . . . . .
94
Site Web : priorité à la simplicité
Adaptation : comment les utilisateurs ont influencé l’utilisabilité . . . . . . . . . . . . . . .
96
Incertitude sur la possibilité de cliquer sur un élément . . . . . . . . . . . . . . . . . . .
97
Liens de couleur autre que le bleu . . . . . . . . .
100
Défilement
. . . . . . . . . . . . . . . . . . . . .
100
Inscription . . . . . . . . . . . . . . . . . . . . . .
102
URL complexes
. . . . . . . . . . . . . . . . . . .
103
Menus déroulants et menus en cascade . . . . . .
103
Auto-discipline : comment les concepteurs ont allégé les problèmes d’utilisabilité . . . . . . . .
104
Plug-in et technologies de pointe . . . . . . . . .
108
Interface utilisateur 3D . . . . . . . . . . . . . . .
109
Design encombré . . . . . . . . . . . . . . . . . .
111
Pages de garde . . . . . . . . . . . . . . . . . . .
111
Graphiques mobiles et texte défilant . . . . . . .
113
Designs d’interface utilisateur personnalisés . . .
113
Ne pas indiquer l’auteur des informations . . . . .
115
Néologismes . . . . . . . . . . . . . . . . . . . . .
116
Contenu obsolète . . . . . . . . . . . . . . . . . .
116
Incohérences dans un site Web . . . . . . . . . . .
118
Demandes prématurées d’informations personnelles . . . . . . . . . . . . .
118
Sites multiples . . . . . . . . . . . . . . . . . . . .
119
Pages orphelines . . . . . . . . . . . . . . . . . . .
119
Evolution des premières conclusions
4
. . . . . . . . .
119
Hiérarchiser les problèmes d’utilisabilité . . . . .
123
Facteurs de gravité des problèmes
. . . . . . . . . .
125
Echelle de désagrément . . . . . . . . . . . . . . . .
129
Les raisons de l’échec des utilisateurs . . . . . . . . .
132
Suffit-il de se concentrer sur les pires problèmes ? . .
134
Table des matières
IX
5 Recherche . . . . . . . . . . . . . . . . . . . . . . . .
137
L’état de la recherche . . . . . . . . . . . . . . . . . .
138
Fonctionnement recommandé pour la recherche
. .
140
Interface de recherche . . . . . . . . . . . . . . . . .
142
Longueur des requêtes et largeur de la zone de recherche . . . . . . . . . . . . . . . . . . . . .
148
Recherche avancée . . . . . . . . . . . . . . . . .
150
Recherche ciblée . . . . . . . . . . . . . . . . . . .
150
Pages de résultats des moteurs de recherche . . . . .
151
Meilleurs résultats . . . . . . . . . . . . . . . . . .
154
Trier la SERP . . . . . . . . . . . . . . . . . . . . .
157
Pas de résultats . . . . . . . . . . . . . . . . . . .
159
Un résultat trouvé . . . . . . . . . . . . . . . . . .
159
Optimisation des moteurs de recherche . . . . . . . .
160
SEO linguistique . . . . . . . . . . . . . . . . . . .
165
SEO architecturale . . . . . . . . . . . . . . . . . .
167
SEO de réputation . . . . . . . . . . . . . . . . . .
169
Navigation et architecture de l’information . . .
171
Suis-je arrivé ? . . . . . . . . . . . . . . . . . . . . . .
172
Correspondance entre la structure du site et les attentes du client . . . . . . . . . . . . . . . .
173
Navigation : soyez cohérent . . . . . . . . . . . . . .
178
Navigation : attention aux attraits de la mode . . . .
184
Réduire le fouillis et éviter la redondance . . . . . . .
189
Liens et intitulés : soyez spécifiques . . . . . . . . . .
192
Menus déroulants verticaux : faites court . . . . . . .
202
Menus multi-niveaux : le mieux est l’ennemi du bien
202
Puis-je cliquer dessus ? . . . . . . . . . . . . . . . . .
205
Accès direct par la page d’accueil . . . . . . . . . . .
210
6
X
Site Web : priorité à la simplicité
7
8
Typographie et lisibilité . . . . . . . . . . . . . . . .
213
Texte principal : la règle des dix points . . . . . . . .
221
Le problème, ce n’est pas l’âge . . . . . . . . . . .
223
Prévoir les différences d’équipement . . . . . . . .
225
Résolutions d’écran habituelles . . . . . . . . . . .
225
Spécifications relatives . . . . . . . . . . . . . . . . .
227
Concevoir pour les malvoyants . . . . . . . . . . .
227
Choix des polices . . . . . . . . . . . . . . . . . . . .
232
Dans le doute, utiliser le Verdana. . . . . . . . . .
233
Mélange de polices et de couleurs . . . . . . . . . . .
235
Texte et contraste avec l’arrière-plan . . . . . . . .
240
Daltonisme . . . . . . . . . . . . . . . . . . . . . .
245
Texte sous forme graphique . . . . . . . . . . . . . .
247
Texte mobile. . . . . . . . . . . . . . . . . . . . . . .
249
Ecrire pour le Web . . . . . . . . . . . . . . . . . . .
253
Une mauvaise rédaction, facteur d’échec . . . . . . .
254
La lecture sur le Web . . . . . . . . . . . . . . . . . .
258
Ecriture adaptée à votre lectorat. . . . . . . . . . . .
259
Utiliser un vocabulaire simple . . . . . . . . . . .
262
Réduire le discours marketing . . . . . . . . . . .
265
Résumer les points principaux et réduire le texte
269
Mise en forme du texte pour plus de lisibilité . . . . .
275
Surligner les mots-clés . . . . . . . . . . . . . . . .
275
Utiliser des titres et des intitulés concis et descriptifs . . . . . . . . . . . . . . . . .
276
Utiliser des listes à puces et à numéros . . . . . . .
279
Conserver des paragraphes courts . . . . . . . . .
282
Table des matières
XI
9
XII
Fournir un bon contenu informatif . . . . . . . . .
285
Combien ça coûte ? . . . . . . . . . . . . . . . . . . .
287
Plus d’excuses . . . . . . . . . . . . . . . . . . . .
290
Mentionner les suppléments . . . . . . . . . . . .
292
Gagner la confiance du client . . . . . . . . . . . . .
295
Décrire le produit . . . . . . . . . . . . . . . . . .
295
Proposer des images et des illustrations de produits . . . . . . . . . . . . . . . . . . . . . .
298
Hiérarchiser les pages de produit . . . . . . . . . .
304
Etre de bonne foi . . . . . . . . . . . . . . . . . .
310
Achat par comparaison . . . . . . . . . . . . . . . . .
311
Affiner et trier . . . . . . . . . . . . . . . . . . . .
314
Aider les ventes par la qualité du contenu . . . . . .
317
10 Présentation des éléments de la page . . . . . . .
321
La page doit-elle défiler ? . . . . . . . . . . . . . . . .
322
Guider les utilisateurs, pas à pas . . . . . . . . . . . .
329
Ne pas mélanger les torchons et les serviettes. . . . .
333
Mise en page bâclée des formulaires . . . . . . . .
338
Répondre aux attentes des utilisateurs . . . . . . . .
344
L’espace blanc . . . . . . . . . . . . . . . . . . . . . .
347
11 Concilier technologie et besoins des utilisateurs .
351
Le multimédia au service du public . . . . . . . . .
353
Obstacles au multimédia . . . . . . . . . . . . . . . .
359
S’adapter aux utilisateurs peu équipés . . . . . . .
359
Concevoir en tenant compte de la vitesse de connexion du public . . . . . . . . . . . . . . .
361
Site Web : priorité à la simplicité
Fournir un indicateur simple et précis de la progression du téléchargement . . . . . . .
361
Sous-estimer les connaissances techniques de vos utilisateurs . . . . . . . . . . . . . . . . . .
364
Détecter la bande passante des utilisateurs . . . .
366
S’en tenir aux conventions d’interface familières . . .
368
Les excès du multimédia . . . . . . . . . . . . . . . .
375
Baisser le volume . . . . . . . . . . . . . . . . . .
377
Création de vidéos pour le Web . . . . . . . . . . . .
378
Mise en pratique de la simplicité . . . . . . . . . . . .
380
Vers un design plus élégant . . . . . . . . . . . . . .
390
12 Conclusion : Des designs qui fonctionnent . . . .
393
Testez vos hypothèses. . . . . . . . . . . . . . . . . .
395
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . 3971j
Table des matières
XIII
Préface • Qu’est-ce que l’utilisabilité ? • Où trouver des recherches utilisateur détaillées ?
XIX L’utilisabilité au fil du temps
XXI Public concerné par cet ouvrage
Préface
Il y a encore dix ans, le Web passionnait les foules. Aujourd’hui, il fait partie de la vie de tous les jours. C’est un outil. Pratique, il sera utilisé, mal aisé, il n’aura aucun succès. Avec dix fois plus de sites et probablement cent fois plus de pages sur le Web, les utilisateurs sont de moins en moins tolérants envers les sites difficiles à utiliser. Chaque erreur de conception se traduit par une perte d’activité. L’utilisabilité est donc plus importante que jamais.
Cet ouvrage répond à deux objectifs, le plus important étant suggéré par son titre : expliquer aux concepteurs, responsables marketing, programmeurs ou auteurs les bases d’une utilisation facile du Web. Le second est d’actualiser nos instructions sur l’utilisabilité, énoncées dans les années 1990, et de présenter nos conclusions pour les années 2000. Nous avons démarré les tests utilisateur des sites Web en 1994. Au cours des vingt dernières années, nous avons identifié des milliers de problèmes liés à l’utilisabilité et développé de nombreuses instructions visant à les éviter. Notre société, Nielsen Norman Group, a publié près de 5 000 pages de rapports suite à nos recherches, montrant comment des milliers d’utilisateurs sur quatre continents interagissent avec le Web, accompagnées de 3 000 captures d’écran issues de centaines de sites. Toutes ces recherches sont informatives et précieuses, pour autant que nous puissions en juger nous-mêmes. Mais rassurez-vous, vous n’aurez pas à lire ces 5 000 pages. Cet ouvrage vous distille les informations les plus utiles en un seul volume. Bien entendu, nous croyons en nos instructions et préférerions que toutes les conceptions respectent les directives formulées pour l’amélioration des sites Web. Mais ce n’est hélas pas réalisable. De nombreux projets doivent d’abord se concentrer sur les problèmes d’utilisation majeurs et traiter les thèmes moins importants par la suite. Nous espérons vous aider dans cette tâche avec cet ouvrage.
L’utilisabilité L’utilisabilité est une caractéristique de qualité liée à la facilité à se servir de quelque chose. Plus précisément, il s’agit de la rapidité avec laquelle des personnes peuvent apprendre à l’utiliser, de son efficacité, de sa rémanence, de son taux d’erreur et de sa facilité d’utilisation. Si le public n’utilise pas une fonction, elle n’a aucun intérêt à exister.
XVI
Avant toute chose, l’utilisabilité est bien plus importante aujourd’hui qu’elle ne l’était lorsque nous avons entrepris nos recherches car la concurrence s’est exacerbée. Comme nous le verrons au Chapitre 2, le développement de bons moteurs de recherche implique que le public utilise une stratégie dominante lorsqu’il lance une recherche sur le Web (ce qui correspond aussi au moment où il est réceptif à de nouvelles marques). Les internautes tapent quelques mots dans un moteur de recherche et obtiennent une liste intéressante de sociétés qui se font concurrence pour résoudre leur problème.Toutes ne sont qu’à un clic de souris et il faut, pour obtenir un résultat, qu’elles n’imposent trop d’obstacles ni d’attente à l’utilisateur. On attend aujourd’hui beaucoup des sites Web et nous tolérons de moins en moins les mauvaises conceptions.
Site Web : priorité à la simplicité
Vous vous demandez peutêtre si cet ouvrage contient des informations qui vous seront utiles. Dans ce cas, la principale question à vous poser est la suivante : les utilisateurs essayent-ils d’atteindre un objectif lorsqu’ils visitent votre site ? Si la réponse est oui, l’utilisabilité vous concerne.
Cet ouvrage souligne les erreurs de conception grossières et fréquentes, qui génèrent l’insatisfaction du client et font perdre des opportunités commerciales. Les instructions que nous proposons reposent sur des recherches et des observations comportementales, et non sur notre simple avis. A la différence des études de marché, nous ne demandons pas simplement aux utilisateurs de spéculer sur la manière dont ils utiliseraient une interface car les données proposées ne sont souvent pas fiables et ne répondent pas précisément à notre objectif. Nous faisons plutôt appel à des méthodes de test utilisateur basées sur des stratégies d’observation. Ainsi, nous proposons des tâches réalistes à exécuter sur le Web et nous observons les testeurs lorsqu’ils interagissent avec divers sites. Nous vérifions alors ce qu’ils font réellement, et non ce qu’ils disent qu’ils font. Les groupes et les enquêtes ciblés constituent un bon moyen pour évaluer les préférences générales des personnes mais pas pour découvrir si elles peuvent utiliser un site ou encore les éléments de conception spécifiques utilisés. Seule une recherche basée sur l’observation peut permettre d’apporter des réponses valables à ces questions. Ne cherchez pas ici de conseils sur les langages de programmation ou autres détails d’implémentation. Notre objectif est de savoir comment réagit l’utilisateur à l’autre bout du câble. Enfin, sachez que cet ouvrage traite de vos clients et de leurs besoins, et non pas des vôtres. Pendant les premières années du Web, nous étions les seuls à réaliser des tests utilisateur systématiques sur les sites ; nos premières conclusions ont donc reçu une attention soutenue et été largement diffusées. Cela pose aujourd’hui problème car certains considèrent que ces instructions n’ont pas évolué depuis 1994. Cet ouvrage a donc aussi pour objet d’actualiser les instructions des années 1990 au vu de nos conclusions des années 2000. Celles que nous avons développées après 2000 ont eu tendance à perdurer dans les études que nous avons réalisées depuis lors et nous finissons généralement par les compléter par des résultats toujours renouvelés montrant les nouveaux développements du Web. Il n’en va pas de même pour les résultats des recherches des années 1990. Les études que nous avons réalisées au cours de ces dernières années ont quelque peu contredit ces conclusions ; nous devons donc modifier nos premières instructions. Préface
XVII
Certaines de nos premières conclusions sur l’utilisabilité sont toujours d’actualité car les interactions fondamentales sur le Web n’ont pas tellement changé. Les utilisateurs continuent à cliquer sur des liens pour naviguer sur des pages. Et leurs capacités cognitives ne changent pas tant que cela d’une décennie à l’autre. Ainsi, les instructions d’utilisabilité, qui traduisent les capacités humaines, évoluent lentement. Les personnes qui utilisent le Web n’ont pas non plus beaucoup changé ; 80 % des utilisateurs de votre site au cours des dix dernières années sont les mêmes que ceux qui l’utilisent aujourd’hui (ils ont peut-être un peu vieilli et nécessitent simplement des polices de caractères plus grosses). Pourtant, les concepteurs, les utilisateurs et la technologie ont évolué. Cet ouvrage explique l’évolution des précédentes instructions au vu de ces changements. Le Chapitre 3 notamment présente une analyse détaillée des premiers problèmes d’utilisabilité parmi les plus importants et propose des conseils pour les traiter aujourd’hui.
Où trouver des recherches utilisateur détaillées Les recherches que nous avons menées sont bien plus volumineuses que tout ce que nous pourrions relater ici. Ces études sont disponibles à l’adresse www.nngroup.com/ reports. Sachez que ces informations ne vous seront utiles que si votre projet est de même teneur qu’une des études disponibles.
XVIII
De nos jours, la technologie Web est moins fragile et les connexions à bas débit, extrêmement lentes, sont de plus en plus rares. De nombreuses instructions dont l’objectif était auparavant d’alléger les contraintes techniques sont maintenant remplacées par des instructions équivalentes, mais différentes, qui répondent aux contraintes humaines correspondantes. Par exemple, dans les années 1990, la plupart des connexions des utilisateurs étaient trop lentes pour voir de la vidéo sur Internet et les rares chanceux qui pouvaient en télécharger subissaient souvent des pannes ou des incompatibilités du système. Nous conseillions tout simplement de l’éviter. Aujourd’hui, du point de vue technique, la vidéo fonctionne, nous pouvons donc annuler cette instruction. Mais nous la remplaçons par d’autres car les internautes regardent la vidéo sur le Web différemment de la télévision. Cet ouvrage contient une partie des informations que nous avons accumulées au cours des années, c’est la célèbre partie émergée de l’iceberg. Sachez aussi que nous avons dû ramener nos conclusions à moins de 10 % de l’ensemble de nos rapports. Pour tous ceux qui souhaiteraient lire nos recherches et notre documentation plus en détail, un encadré est présenté à la fin de chaque chapitre, donnant les références des nombreux rapports détaillés qui y sont cités.
Site Web : priorité à la simplicité
L’utilisabilité au fil du temps L’ouvrage de Jakob Nielsen, Designing Web Usability: The Practice of Simplicity (édité chez New Riders Publishing, 2000 ; traduction française : Conception de sites Web : L’art de la simplicité, Pearson Education) est sorti à l’époque de la première bulle Internet et a été qualifié d’étape marquante grâce au rôle qu’il a joué dans l’évolution des attitudes des professionnels d’Internet envers la conception Web. Avant cet ouvrage, la plupart des sociétés voulaient simplement des sites « cool ». L’ouvrage de design Web le plus vendu à l’époque, Creating Killer Websites, se faisait le défenseur des écrans contextuels et autres atrocités du même genre. Après la publication du livre de J. Nielsen, de nombreux responsables d’Internet ont réalisé que ce genre de sites voyants était contraire aux intérêts des sociétés. Ils ont découvert que la meilleure manière de faire des affaires sur le Web consistait à créer des sites que les utilisateurs pourraient exploiter. Le Web, ce n’est pas la télévision. Les utilisateurs ne s’en servent pas pour passer le temps. Ils surfent sur le Web dans un but bien précis. Une main sur la souris, ils sont prêts à interagir et à s’engager. Les taux de succès augmentent et les blocages ne sont plus aussi fréquents. La campagne destinée à améliorer l’utilisabilité a eu des résultats quantifiables et amélioré l’expérience de l’utilisateur.
Designing Web Usability fut un manifeste. Son objectif était de vendre aux lecteurs « la pratique de la simplicité », qui devait primer sur un design tendance ou des interfaces utilisateur complexes qui dominaient le Web à l’époque. Et il y est parvenu en partie en décortiquant de nombreuses captures d’écran des sites Web déplorables qui étaient alors au goût du jour. En fait, si l’on reprend cet ouvrage aujourd’hui, la plus grosse critique que l’on peut lui faire, c’est que les captures d’écran sont vieillottes. Heureusement, un grand nombre d’erreurs de conception contre lesquelles nous nous élevions sont désormais hors de propos. Malheureusement, de nouvelles erreurs ont remplacé les anciennes. Nous proposons aujourd’hui d’autres captures d’écran montrant des conceptions déplaisantes ayant causé des problèmes et des pertes d’activité. Malgré tout, le Web s’est amélioré. Nous sommes maintenant en mesure d’inclure de nombreuses captures d’écrans qui fonctionnent bien. De plus, l’utilisabilité mesurée a considérablement augmenté, notamment dans la rapidité et la simplicité à réaliser des actions sur les sites. La mesure la plus simple que nous collectons est le taux de succès : les utilisateurs peuvent-ils utiliser le site ? En moyenne, les
Préface
XIX
taux de succès augmentent et les blocages ne sont plus aussi fréquents. Autrement dit, la campagne destinée à améliorer l’utilisabilité a eu des résultats quantifiables et a amélioré l’expérience de l’utilisateur. Le Web contenait moins de 10 millions de sites lors de la publication de Designing Web Usability. Le chiffre suffisait pour faire de l’utilisabilité un thème important : même si un site était difficile à utiliser, l’internaute pouvait se rendre sur d’autres. A l’heure où nous écrivons, le Web compte 80 millions de sites et lorsque vous lirez ces mots, il aura probablement dépassé les 100 millions, environ dix fois le nombre de sites existant il y a sept ans. L’attitude des utilisateurs envers le Web a également changé. L’ouvrage de J. Nielsen est né à la fin de l’époque où le Web était intéressant en soi. Les gens étaient exaltés de pouvoir atteindre le bout du monde et de recevoir des informations sur leur ordinateur très rapidement, souvent en 30 secondes. Bien entendu, il n’y avait pas grand-chose à faire et lorsque l’on trouvait ce que l’on cherchait, on était transporté ! Aujourd’hui, la situation est à l’opposé. Avec l’expansion massive du Web, les attentes se sont élargies. On suppose aujourd’hui que le Web contient tout ce que l’on cherche. On pose toutes sortes de questions aux moteurs de recherche et il finit toujours par en sortir quelque chose. On suppose que les sites fonctionnent. On suppose qu’on trouvera ce que l’on cherche et que l’on peut acheter quasiment n’importe quoi en ligne. Le Web est un outil. Souvenez-vous comment les gens considéraient une invention étonnante en son temps, le téléphone. On ne se réveille plus le matin en pensant : « aujourd’hui, je vais tester mon appareil téléphonique et appeler quelqu’un pour évaluer la qualité de la connexion ». Nous utilisons le téléphone en fonction des besoins du monde réel. Et cela vaut également pour un utilisateur moyen sur le Web.Vous-même, cher lecteur, n’êtes pas dans la moyenne des utilisateurs puisque vous vous interrogez suffisamment pour acheter un livre qui parle du Web. De la même manière, les personnes qui achètent des livres sur le fonctionnement des téléphones sont souvent des ingénieurs en téléphonie et leur manière de réfléchir au téléphone diffère de la manière dont la plupart des utilisateurs du téléphone y pensent. XX
Site Web : priorité à la simplicité
Il ne suffit plus de dire ce que l’on veut concevoir pour les clients. Si vous donnez à l’utilisabilité la priorité qu’elle mérite sur votre site, celui-ci sera axé sur les utilisateurs.
L’un des objectifs de Designing Web Usability était de secouer le petit monde de la conception Web, pour lui faire prendre conscience des besoins humains. Il y a réussi, mais en partie seulement. La plupart des projets Web actuellement ne se soucient du service à l’utilisateur qu’en théorie ; même s’il est rare de trouver des responsables Internet qui ne répertorient pas l’utilisabilité parmi leurs principaux objectifs, dans la pratique, les sites continuent à enfreindre de nombreuses instructions bien connues et, en conséquence, ne touchent qu’une fraction de leur clientèle potentielle. Nous espérons, grâce à cet ouvrage, faire évoluer la situation. Notre objectif est de poursuivre la révolution entamée avec Designing Web Usability et d’obliger les sites Web à avoir plus de succès en respectant les instructions les plus importantes développées au cours de la dernière décennie. Plus d’excuses. Nous savons ce qui fonctionne sur le Web, il ne suffit plus de dire ce que l’on veut concevoir pour les clients. Si vous donnez à l’utilisabilité la priorité qu’elle mérite sur votre site, celui-ci sera axé sur les utilisateurs.
Public concerné par cet ouvrage Cet ouvrage est destiné aux personnes dont le site Web présente un objectif professionnel. Il s’agit évidemment des sites de commerce électronique qui vendent en ligne mais aussi des sites d’entreprises qui présentent les produits vendus dans leur réseau de distribution. Notre définition d’un « objectif professionnel » englobe bien plus que la vente de produits ou de services. Si votre site est un site d’actualités, les utilisateurs devront pouvoir trouver, lire et comprendre vos articles et peut-être aussi s’abonner à votre lettre d’information. Les organisations à but non lucratif pourront faire la promotion de leur cause et attirer les dons en ligne. Les institutions gouvernementales pourront aider les contribuables en leur apportant des informations, pour réduire la bureaucratie grâce aux informations et services en ligne. Vous vous demandez peut-être si cet ouvrage contient des informations qui vous seront utiles. Dans ce cas, la principale question à vous poser est la suivante : les utilisateurs essayent-ils d’atteindre un objectif lorsqu’ils visitent mon site ? Si la réponse est oui, l’utilisabilité vous concerne. Bien entendu, il existe également des sites Web qui n’ont pas « d’objectifs professionnels », comme les sites artistiques, qui sont une pure expression de la créativité. Ou encore Préface
XXI
ceux des designers Web qui présentent des conceptions expérimentales qui ne fonctionneraient pas sur les sites de leurs clients. Il peut également s’agir d’un site destiné à vos trois meilleurs amis. Nos directives ne s’appliquent pas à ces cas car leur but n’est pas d’attirer des utilisateurs à la recherche d’informations. Si votre site n’a pas pour objet d’aider les utilisateurs dans leur recherche, faites comme bon vous semblera, vous ne risquez pas de perdre de l’argent. En revanche, cet ouvrage contient de nombreuses informations pertinentes pour les intranets, même s’il est principalement destiné aux sites Internet. On constatera quelques différences dans ces instructions de conception, du fait même qu’elles sont destinées à des publics différents. Ainsi par exemple, les intranets ne se font pas de concurrence ; les utilisateurs s’y rendent principalement pour des tâches professionnelles tandis que les utilisateurs du Web y sont souvent amenés par leurs besoins personnels. Pourtant, les intranets utilisent les technologies du Web ; ce sont des systèmes d’information en ligne et les utilisateurs parcourent leurs pages en utilisant des compétences, des connaissances et des attentes obtenues en naviguant sur le Web. Les informations et les directives de cet ouvrage concernent aussi bien les grandes entreprises que les PME. En réalité, nous employons le mot d’»entreprise » de manière assez large, en y englobant également les organismes non commerciaux comme les organisations à but non lucratif, les institutions gouvernementales et même les sites personnels proposant des informations à des tiers. Que vous disposiez de centaines de milliers de salariés ou d’une structure n’employant que vous-même, cela n’a pas d’importance. Les utilisateurs ne voient dans tous les cas qu’une page à la fois lorsqu’ils visitent votre site et ils cliquent sur le bouton Précédent pour le quitter s’il est trop difficile à utiliser. Peut-être les utilisateurs de votre site ne s’appellent-ils pas des « clients », mais des « consommateurs », « membres », « bénévoles », « électeurs », « citoyens », des termes qui n’impliquent pas de relations professionnelles directes. Toutefois, dès lors qu’ils visitent votre site, ils deviennent une sorte de client, dans la mesure où ils se trouvent sur le « marché » de ce que vous proposez. Ils peuvent ou non payer pour ce service, mais ils porteront certainement de l’attention au contenu et vous remercieront de leur fidélité si vous les traitez correctement.
XXII
Site Web : priorité à la simplicité
www.myspace.com Myspace permet à de jeunes utilisateurs de créer un environnement social dans lequel ils peuvent concevoir leurs propres pages et porter des commentaires sur les pages de leurs amis. Si c’est le genre de page que vous concevez, sachez que cet ouvrage n’est pas pour vous. Si vous souhaitez simplement communiquer avec vos amis les plus proches, ces directives ne vous seront pas utiles non plus. Bien entendu, un conseil du style : « n’utilisez pas des graphiques de fond qui masquent le texte et le rendent difficile à lire » peut vous concerner, tout comme nous pouvons vous déconseiller d’insérer un cœur animé sans cesse en mouvement sur la page. Ces conseils sont utiles pour un site à visée professionnelle, y compris s’il vend à des adolescents. En effet, nos études sur l’utilisabilité auprès des adolescents montrent qu’ils rejettent les sites commerciaux ou gouvernementaux cherchant à faire croire qu’ils ont été conçus par des adolescents alors que ce n’est pas le cas. Mais lorsque les jeunes créent des sites personnels pour exprimer leur personnalité, l’utilisabilité telle que nous l’entendons ne s’applique pas.
Préface
XXIII
En fait, l’utilisabilité présente des avantages. D’une part, elle sous-tend vos objectifs professionnels sur le Web et aide votre société à gagner plus d’argent. C’est l’angle que nous adoptons dans cet ouvrage car nous voulons vous motiver (vous et votre patron) à prendre ce sujet sérieusement en compte. D’autre part, cet aspect redonne du pouvoir aux hommes et permet de gérer plus simplement et plus joliment la technologie qui s’insère dans tous les aspects de la vie moderne. Nous ne voulons pas être compatissants, mais simplifier la vie et la rendre plus agréable.Voir des personnes qui se sentent oppressées par la technologie n’est pas un spectacle agréable mais il est très commun dans le domaine du test utilisateur. En améliorant l’utilisabilité, nous permettons aux personnes ayant peu d’éducation de conserver des emplois intéressants, nous pouvons relier les citoyens seniors à la communauté, donner aux personnes handicapées les mêmes informations et les mêmes services qu’à tous les autres et permettre à chacun de rentabiliser le temps passé sur l’ordinateur, en réduisant le sentiment de frustration et d’impuissance. Le plus gratifiant, c’est que ces améliorations de la qualité de vie ne se font pas à vos dépens. Au contraire, l’utilisabilité profite aux entreprises et à l’humanité. Jakob Nielsen et Hoa Loranger, mai 2006
XXIV
Site Web : priorité à la simplicité
4
La source de nos données • Déroulement de l’étude • Et si un site a changé ?
17
Pourquoi ai-je besoin d’effectuer un test utilisateur ? • Les exceptions
1
Introduction : rien à cacher Commençons par vous révéler un secret. Il n’y a pas de secret pour mener de bonnes études sur l’utilisabilité. Il suffit de savoir que rechercher, à quel moment, puis de documenter les observations. L’utilisabilité fonctionne bien car elle révèle la manière dont le monde avance. Lorsque vous aurez découvert les modes d’interaction entre les utilisateurs et votre design, vous pourrez le rendre meilleur que celui de vos concurrents.
Nous écrivons pour des sites qui ne figurent pas parmi les dix plus visités. Il vaut d’ailleurs mieux pour vous que vous ne figuriez pas parmi ce Top ten !
Cet ouvrage montre comment se comportent les personnes sur Internet et les facteurs de réussite ou d’échec d’un site Web. Nous les connaissons parce que nous avons passé des centaines d’heures à les étudier. Et s’il doit y en avoir qu’un, voilà notre secret : nous savons réaliser les recherches utilisateur. Ce n’est pas non plus vraiment un secret car nous dispensons un cours sur la manière de réaliser correctement ces études sur l’utilisabilité. Nous tentons d’enseigner aux entreprises à mener leurs propres recherches utilisateur et à employer des méthodes valables, mais on continue à nous demander des conseils pour améliorer les sites Web. Beaucoup aimeraient savoir ce qui fonctionne en général plutôt que de passer du temps à tester leurs propres conceptions. Avec tout ce que nous savons déjà et ce qui a été documenté sur le comportement des utilisateurs, pourquoi ne pas baser votre conception sur ces connaissances générales ? Vous pourrez toujours les affiner en réalisant des recherches sur des questions spécifiques à votre secteur. C’est pour cela que nous avons écrit cet ouvrage, pour rassembler nos meilleures connaissances sur l’utilisabilité en un outil pratique. Les observations qui y figurent sont basées sur des problèmes que nous avons constatés à de nombreuses reprises auprès de plusieurs utilisateurs. Les directives traduisent nos observations empiriques en conseils généraux, montrant ce qui fonctionne réellement sur le Web. Même s’il y a des exceptions, et c’est pourquoi nous vous conseillons de tester votre propre site, ces instructions concernent 90 % des cas et la grande majorité des sites Web seraient de meilleure qualité si elles étaient respectées.
La source de nos données L’ensemble de nos conclusions et de nos instructions se base sur des preuves empiriques provenant de deux sources. Tout d’abord, nous nous basons sur le test de 716 sites Web réalisés par 2163 utilisateurs partout dans le monde. La majeure partie de ces recherches a été réalisée aux Etats-Unis, mais nous avons également mené des sessions en Australie, en Belgique, au Canada, au Danemark, en Finlande, en France, en Allemagne, en Israël, en Italie, au Japon, à Hong Kong, en Corée, en Suisse et au Royaume-Uni. Une grande partie de ces études a été réalisée pour des clients, de sorte que ces informations sont confidentielles. Or, cette vaste recherche a également permis d’obtenir des idées générales sur le com4
Site Web : priorité à la simplicité
portement des utilisateurs, en particulier lorsque nous observons les mêmes conclusions dans des secteurs très diversifiés. D’autres études ont été menées lorsque nous écrivions des articles de recherche sur des problèmes particuliers. La majeure partie des instructions tirées de ces études n’est pertinente que si vous travaillez sur le problème exact qui est étudié, mais nous avons également tiré des idées générales précieuses des milliers d’observations spécifiques présentées dans ces études. Ainsi, la majeure partie de ce que nous avançons est basée sur des résultats généraux tirés de l’observation d’un très grand nombre de sites Web et d’utilisateurs, qu’ils aient été testés pour le compte d’entreprises ou pour nos propres études. Notre seconde source d’informations est une étude menée spécialement pour cet ouvrage. Lorsque nous parlerons de « l’étude », sachez que nous ferons référence à cet ensemble de données plus restreint.
Déroulement de l’étude Nous avons testé 69 utilisateurs, 57 se trouvant aux EtatsUnis et 12 au Royaume-Uni. Un peu moins de la moitié (32) étaient des hommes et un peu plus de la moitié (37) étaient des femmes, répartis de manière égale entre 20 et 60 ans. Chacun a été rémunéré 100 dollars pour sa participation. Nous n’avons testé ni adolescent ni senior, même si nous proposons parfois des idées pour ces groupes d’âge particuliers, idées basées sur des études séparées que nous avons réalisées auprès de ce public. Les utilisateurs présentaient des profils professionnels et des expériences du Web divers. Nous avons écarté tous ceux travaillant dans le domaine de la technologie, du marketing, de la conception Web ou de l’ergonomie, car ils ne représentent que très rarement des utilisateurs lambda. Les personnes qui travaillent dans ce secteur en savent trop et ont des difficultés à considérer la conception du point de vue d’un utilisateur ordinaire. Elles ont plutôt tendance à critiquer la conception en fonction de leur propre philosophie, ce qui n’est pas pertinent dans notre cas. En fait, dès qu’un utilisateur utilise une terminologie du style « architecture d’information » lors d’un test, vous savez que les résultats devront être écartés. Tous les utilisateurs disposaient d’au moins un an d’expérience dans l’utilisation du Web. Nous ne testons presque jamais des personnes ne connaissant pas du tout Internet car alors, tout ce que nous aurions pu découvrir, c’est que 1 : Introduction : rien à cacher
5
le Web en général et les navigateurs en particulier ont des interfaces utilisateur difficiles à utiliser et qu’il faut du temps pour les maîtriser. Nous n’aurions pas appris grand-chose pour nous aider à concevoir de meilleurs sites Web car les utilisateurs novices ne pénètrent pas très loin dans les sites. L’expérience des utilisateurs tout à fait novices n’est généralement pas prépondérante pour les sites Web car ils s’y rendent rarement lors de leur première expédition sur Internet sauf bien sûr pour Yahoo!, AOL, MSN ou d’autres prestataires de services Internet, dont le site est la page d’accueil par défaut pour leurs clients. Or, nous n’écrivons pas pour ces sites exceptionnels. Nous nous adressons aux grands sites d’entreprises, de commerce électronique, d’actualités et aux sites gouvernementaux, mais aussi pour d’autres qui ne figurent pas parmi la liste des dix sites les plus visités du Web. Il vaut d’ailleurs mieux pour vous que vous ne fassiez pas partie de ce Top ten car lorsque les utilisateurs visitent votre site, ils auront déjà appris ailleurs les bases de l’utilisation du Web. La règle standard pour le test utilisateur consiste à employer l’équipement que l’on rencontre le plus probablement chez les utilisateurs. Pour cette étude, nous nous sommes appuyés sur une machine Windows, exécutant la dernière version d’Internet Explorer. Le moniteur avait une résolution d’écran de 1024 × 768 pixels. Pour Internet, nous avons utilisé une connexion haut débit, de 1 à 3 mégabits par seconde.
La méthode de la réflexion à haute voix
Entendre les « pensées » de l’utilisateur permet de comprendre pourquoi ils agissent comme ils le font, ce qui représente une information très précieuse.
6
Dans nos études, les utilisateurs sont testés un par un pour qu’ils ne s’influencent pas entre eux. A chaque session, l’utilisateur est assis devant un ordinateur tandis que l’opérateur, et quelquefois un ou deux observateurs supplémentaires, sont assis à côté. S’il y a plusieurs observateurs, il vaut mieux procéder au test dans un laboratoire possédant deux pièces séparées par un miroir sans tain, de sorte que les observateurs soient cachés. Mais lorsque les observateurs sont peu nombreux, ils peuvent s’asseoir derrière l’utilisateur, pour ne pas gêner sa vision et ne pas le perturber. L’étude du livre a été réalisée avec la méthode de la « réflexion à haute voix », notre approche préférée pour les tests d’utilisabilité. Dans cette méthode, nous demandons aux utilisateurs de réfléchir à haute voix lorsqu’ils interagissent avec
Site Web : priorité à la simplicité
Sites testés Grandes entreprises Nestlé Cummins (société d’énergie) United States Postal Service (USPS, service postal américain) American Honda Motor Co. Burger King Sociétés de taille moyenne BankOne Dianon Systems (diagnostic de santé) Dime Savings Bank of Williamsburgh Escalade Sports House of Blues (site de blues) Pixar Animation Studios Petites entreprises Black Mountain Bicycles (VTT) GW Eye Associates (produits oculaires) Commerce électronique Atlantis, Paradise Island (résidence de vacance) Bath & Body Works (produits de soins) Kitchen Etc. (cuisines) Movies.com (cinéma) The Sharper Image (électroménager, sport, ...) Whistler Blackcomb Mountains (station de ski) Organismes gouvernementaux et sans but lucratif American Heart Association (association américaine pour le cœur) California State Parks (parcs californiens) City of San Diego J. Paul Getty Trust (site du musée) Her Majesty’s Revenue & Customs (administration douanière britannique) United States Social Security Administration (administration américaine de la sécurité sociale)
l’interface. Entendre les « pensées » de l’utilisateur permet de comprendre les raisons de son comportement, soit des informations très précieuses. Il est intéressant de savoir pourquoi les utilisateurs ont cliqué sur le mauvais bouton et n’ont pas pu par exemple finaliser une transaction sur un site de commerce électronique. Si vous souhaitez améliorer la conclusion des ventes, vous devez savoir pourquoi les personnes ont cliqué sur les mauvais boutons. Nous avons également réalisé deux enregistrements vidéo de chaque session de test : l’un de l’écran d’ordinateur et l’autre du visage et du torse de l’utilisateur. Ces enregistrements étaient accompagnés d’une bande sonore contenant les commentaires de l’utilisateur. Pour la plupart des projets d’utilisabilité, il n’est généralement pas nécessaire de revoir les enregistrements car les grands problèmes de conception sont évidents dès après la session de test. Pour des raisons pratiques, il vaut généralement mieux résoudre rapidement les problèmes et augmenter dès que possible le nombre de transactions de la société. Mais pour un projet de recherche comme le nôtre, il est bon de pouvoir les repasser et s’assurer que nous avons correctement consigné tout ce qu’a fait l’utilisateur.
Les tests spécifiques à un site Pour la première partie de l’étude du livre, nous avons systématiquement testé vingt-cinq sites Web couvrant toute une série de domaines, dans des secteurs comme l’automobile et les services financiers mais aussi des sites de divertissement et des sites culturels et médicaux, à orientation intellectuelle. On voit sur leurs pages d’accueil que les sites présentaient également des styles de design très divers, certains très basiques et d’autres totalement glamour. Notre objectif général était de tester un bon éventail de sites Web actuels. Nous n’avons pas choisi ces sites pour en étudier la stratégie Internet. De même, nos commentaires ne doivent pas être pris pour une critique des sociétés ou des équipes qui les ont élaborés. Il y a de nombreuses raisons aux défauts de conception d’un site et notamment un manque de ressources. Mais ce ne sont pas ces raisons qui nous intéressent ici. Peu importe la cause d’une erreur, nous devons avertir nos lecteurs contre cette erreur pour qu’ils évitent de la reproduire sur leur propre site.
1 : Introduction : rien à cacher
7
Pages d’accueil des vingt-cinq sites qui ont été systématiquement testés dans l’étude sur l’utilisabilité menée pour cet ouvrage. Les pages d’accueil sont présentées comme elles apparaissent dans une fenêtre de navigateur sur un écran en 1024 × 768.
www.nestle.com
www.cummins.com
www.usps.com
www.honda.com
8
Site Web : priorité à la simplicité
www.bk.com
www.escaladesports.com
www.bankone.com
www.hob.com
www.dianon.com
www.pixar.com
www.dimewill.com
www.blackmountainbicycles.com
1 : Introduction : rien à cacher
9
www.drgordonwong.com
www.movies.go.com
www.atlantis.com
www.sharperimage.com
www.bathandbodyworks.com
www.whistlerblackcomb.com
www.kitchenetc.com
www.americanheart.org
10
Site Web : priorité à la simplicité
www.parks.ca.gov
www.hmrc.gov.uk
www.sandiego.gov
www.ssa.gov
www.getty.edu
1 : Introduction : rien à cacher
11
Sachez également que l’étude de ce livre n’a pas été financée par les organismes dont nous avons testé les sites. Nous nous sommes chargés nous-mêmes des frais pour pouvoir être libres de nos opinions. Cette partie de l’étude a été une véritable chasse au trésor. Nous avons donné à chaque utilisateur trois ou quatre tâches spécifiques à réaliser sur chaque site. Même si ces tâches n’ont pas pu dévoiler tous les problèmes d’utilisabilité d’un site (les grands sites en particulier proposent plus de fonctionnalités que ce que nous pouvons traiter), ils ont suffi pour notre objectif : évaluer la facilité avec laquelle les sites répondent aux besoins les plus habituels de leurs utilisateurs. Voici certaines des tâches que nous avons données aux utilisateurs : ■
Allez sur le site www.usps.com et découvrez combien coûte l’envoi d’une carte postale en Chine.
■
Allez sur le site www.sandiego.gov et trouvez le nom du membre du conseil municipal d’un quartier donné.
■
Vous organisez une réunion de famille au Sugarloaf Ridge en Californie. Accédez au site www.parks.ca.gov et réservez des places de camping pour 35 personnes.
■
Vous recherchez un en-cas à manger pendant l’exercice. Allez sur le site www.nestle.com et découvrez les produits disponibles.
■
Rendez-vous sur le site www.pixar.com et essayez de découvrir comment leur est venue l’idée du film Monsters et compagnie.
■
Vous souhaitez visiter ce week-end le musée Jean-Paul Getty. Rendez-vous sur le site www.getty.edu et découvrez le prix d’entrée et les heures d’ouverture.
■
Vous souhaitez déposer 1 000 dollars à la banque et les y laisser pendant un moment. Allez sur le site www.bankone.com et trouvez les comptes ayant les meilleurs taux d’intérêt.
■
Vous lisez un article traitant de la technologie de la pile à combustible qui précise qu’elle peut changer le monde. Accédez au site www.cummins.com et trouvez les deux principaux avantages et inconvénients de cette technologie.
Toutes ces tâches étaient tout à fait faisables sur les sites Web en question. Nous n’avons presque jamais demandé
12
Site Web : priorité à la simplicité
Dans la plupart des études sur la simplicité d'utilisation, on indique aux utilisateurs où se rendre. Ce n’est bien sûr pas ainsi qu’ils agissent dans la vie de tous les jours et nous leur avons donc donné un ensemble d'exercices à réaliser avec toute liberté pour se rendre où ils le souhaitaient.
aux utilisateurs « de faire l’impossible ». Nous avons constaté de nombreuses difficultés lorsqu’ils tentaient de réaliser les tâches qu’un site est supposé permettre.
Les tests non dirigés Pour les tests spécifiques à des sites, nous indiquions aux utilisateurs où se rendre et leur demandions de rester sur le site le temps de réaliser l’exercice. C’est ainsi que sont menées la plupart des études sur l’utilisabilité, ce qui permet de savoir comment fonctionnent les composantes d’un design particulier. Bien entendu, les utilisateurs n’agissent pas ainsi dans la vie de tous les jours. Ils ont tout Internet à portée de clic et passent souvent d’un site à un autre. C’est pour cette raison que, dans la seconde partie de notre test, nous avons donné aux utilisateurs un ensemble d’exercices à réaliser avec toute liberté pour se rendre où ils le souhaitaient. C’est ce que nous appelons des « tâches non dirigées » car les utilisateurs pouvaient choisir leur destination sur le Web. Ces tâches concernent une large gamme d’activités, allant de quêtes hautement commerciales à des recherches de pure curiosité, toutes pouvant être réalisées sur le Web de manière réaliste. Le principal inconvénient de cette approche réside dans le fait que les utilisateurs se rendent sur des sites différents, même lorsqu’ils travaillent sur le même problème, nous n’avons donc pas systématiquement testé ces sites avec plusieurs utilisateurs. L’avantage, c’est que nous observons comment ils parviennent à des solutions sur plusieurs sites, comme lorsqu’ils sont à la maison. Pour cette partie du test, nous avons attribué douze tâches à chaque utilisateur : ■
Vous et votre famille souhaitez partir en vacances à Mazatlan, au Mexique. Trouvez une offre de voyage qui soit à la fois attirante et abordable pour votre famille.
■
Vous avez un peu de temps pendant la semaine et vous souhaitez faire quelque chose pour aider votre voisinage. Trouvez un programme de bénévolat qui vous conviendrait.
■
L’oncle Georges souhaite acheter un ordinateur. Il l’utilisera principalement pour naviguer sur le Web, envoyer des e-mails ou imprimer des photos numériques. Trouvez un ordinateur que vous pourriez lui conseiller.
1 : Introduction : rien à cacher
13
■
L’anniversaire de votre neveu approche. Il va avoir cinq ans et il aime lire. Abonnez-le à un magazine qu’il appréciera.
■
Vous envisagez d’investir 10 000 dollars dans un plan de retraite. Trouvez la meilleure manière d’investir votre argent.
■
Vous envisagez d’acheter une nouvelle maison et vous devez la financer. Trouvez une société qui vous proposera le meilleur service et les meilleurs taux.
■
On a beaucoup entendu parler récemment des virus sur Internet. Trouvez la meilleure façon de protéger votre ordinateur.
■
Vous rédigez un rapport sur Marie Curie. Découvrez qui elle est et quelques-unes de ses découvertes les plus célèbres.
■
Quelles sont les trois principales raisons qui font que les tigres de Sibérie sont une espèce en voie de disparition ?
■
Découvrez ce qu’est un « let » au tennis.
■
En août 2003, les Etats-Unis et le Canada ont connu une énorme panne d’électricité, qui a touché 50 millions de personnes. Trouvez-en la cause.
■
Un bon ami à vous se plaint d’une douleur pulsatile qui va généralement d’un œil jusqu’au front, à la tempe et à la joue. De quoi pourrait souffrir votre ami ?
Et si un site a changé ? Nous présentons dans cet ouvrage de nombreuses captures d’écran car il est plus facile d’appréhender des principes abstraits lorsqu’ils sont illustrés par des exemples spécifiques. Pendant l’année passée à écrire cet ouvrage, plusieurs des sites apparaissant dans les captures d’écran ont été repensés. Dans certains cas, les sociétés ont mené leurs propres études sur l’utilisabilité. Dans d’autres, des représentants du site ont participé à des séminaires où nous présentions des clips vidéo du comportement des utilisateurs tirés d’études récentes. Ainsi, même s’ils n’étaient pas avertis de la publication de cet ouvrage, ils ont tout de même pu consulter des études préliminaires de leurs sites, obtenant ainsi une étude gratuite sur l’utilisabilité ! Quel que soit le cas, cela signifie que si vous consultez un site après l’avoir vu dans cet ouvrage, il est très probable que son aspect diffère. Cela fait-il de notre analyse un outil moins 14
Site Web : priorité à la simplicité
pertinent pour votre projet ? Pas du tout. Les principes et les instructions qu’illustre une capture d’écran sont pertinents bien après que le site a changé. En fait, de nombreuses conclusions de nos tests de 1994 continuent à s’appliquer aux études de 2006 et continueront probablement à ennuyer les testeurs malchanceux en 2020 et au-delà. Citons par exemple le site de la BBC. Jakob Nielsen et Marie Tahir avaient d’ailleurs utilisé le site bbc.co.uk dans l’ouvrage Homepage usability: 50 Websites Deconstructed pour illustrer le thème de la simplicité d’accès aux archives des articles. L’absence d’archives était l’un des problèmes du site de la BBC en 2001, qui a perduré en 2005, comme le montre la capture d’écran. La veille du jour où cette capture d’écran a été réalisée, le site de la BBC présentait une excellente recette de dinde rôtie avec une farce à la sauge et à l’oignon et une sauce à la pomme. Comment retrouver cette recette ? Un utilisateur expérimenté pourrait finir par retrouver la page mais la moyenne des utilisateurs sera complètement perdue.
www.bbc.co.uk
1 : Introduction : rien à cacher
15
On le voit sur la deuxième capture d’écran, la BBC travaillait sur des archives fin 2005. Si vous visitez le site aujourd’hui, il est possible que la page d’accueil présente maintenant ces archives. Si c’est le cas, la BBC aura finalement fait ce que nous lui conseillions en 2001. Cela modifie-t-il l’importance des commentaires apportés dans Homepage Usability ? Pas du tout, car ce conseil (proposer des archives des pages d’accueil) concerne toujours des millions d’autres sites Web. Seuls 41 % des pages d’accueil d’entreprises respectent ce principe, ce qui signifie que 59 % pourraient s’améliorer en s’intéressant à l’erreur commise par la BBC en 2001.
La version bêta du service d’archivage de la BBC pour tous les articles parus sur la page d’accueil, permettant aux utilisateurs de les retrouver par la suite. Imaginons que vous vous souveniez d’une photo alléchante de la dinde de Noël de Rick Stein lorsque vous avez visité le site hier, mais que vous n’avez pas eu le temps de lire la recette. Vous y retournez le lendemain, pour découvrir que la BBC est passée à un article sur la musique préférée de Franz Ferdinand (voir la capture d’écran précédente). Même si vous aimez ce groupe de rock écossais, il vous sera peu utile pour cuisiner votre dinde. Si vous connaissez l’URL des archives de la BBC (www.bbc. co.uk/homearchive), vous trouverez facilement l’article en faisant défiler la liste des sujets de la veille jusqu’à reconnaître la photo. Il est à espérer que lorsque vous lirez cet ouvrage, la fonction de gestion d’archives bêta de la BBC sera devenue une version complète, avec un lien sur la page d’accueil.
www.bbc.co.uk
16
Site Web : priorité à la simplicité
Des tests utilisateurs en trois jours
Pourquoi ai-je besoin d’effectuer un test utilisateur ?
Notre ouvrage n’a pas pour objet d’expliquer comment réaliser une étude sur l’utilisabilité, mais ce n’est pas difficile à apprendre. Pourquoi alors si peu de sociétés testent-elles leurs sites ? Probablement parce qu’elles croient, à tort, que cela retardera leurs projets, même si, en réalité, le test peut être extrêmement rapide. Nous proposons un cours dans lequel nous faisons passer un test de site élémentaire en trois jours.
Désormais, c’est presque un cliché dans les livres consacrés à l’utilisabilité d’exhorter les utilisateurs à mener leurs propres tests. Avec la pléthore d’informations qui circulent, y compris notre ouvrage, pourquoi tant insister sur le test ? Ne suffit-il pas de profiter des résultats de tests déjà réalisés et de simplement appliquer ces directives à un projet ? En fait, les instructions d’utilisabilité sont basées sur trois niveaux de recherche : ■
le comportement général de l’utilisateur sur la plupart des sites Web ;
■
des conclusions spécialisées sur des genres de sites spécifiques ou des domaines spécifiques ;
■
des conclusions détaillées sur un site spécifique et ses clients.
Cet ouvrage applique le premier type d’instructions. Elles sont liées à des problèmes que nous rencontrons tant et plus, parmi toutes sortes d’utilisateurs, sur toutes sortes de sites, elles sont donc pertinentes pour la grande majorité des sites. Les nombreux rapports disponibles sur notre site Web couvrent une grande partie du second type d’instructions. Le troisième a trait à des circonstances qui peuvent être spécifiques à votre site et vous seul êtes en mesure de les déterminer.
Les exceptions Certains thèmes sont tellement spécifiques à votre site qu’ils ne seront pas traités dans nos rapports. C’est pourquoi vous devez toujours réaliser vos tests auprès de vos propres utilisateurs.
Il est important de souligner que, même si les instructions de cet ouvrage concernent la grande majorité des cas, elles ne sont pas universelles. Le comportement humain est tellement variable que ces instructions risquent de ne pas s’appliquer à votre site, dans 10 % des cas par exemple. Pour 1000 instructions, cela pourrait signifier que 100 d’entre elles ne vous concernent pas, un petit pourcentage si on le rapporte au tableau général, mais un chiffre important s’il concerne votre site. En réalité, nous avons produit bien plus de 1000 instructions d’utilisabilité, mais nous ne couvrons que les plus importantes ici. Il est donc à la fois vrai que vous devez suivre la grande majorité de ces instructions mais aussi que vous ne devez pas toutes les respecter.
1 : Introduction : rien à cacher
17
Que faire dans les cas de conceptions spécialisées qui ne sont pas traitées dans cet ouvrage ? Et comment savoir si elles sont suffisamment importantes pour se permettre de contrevenir à une instruction générale ? Vous n’obtiendrez les réponses à ces deux questions qu’en effectuant votre propre test utilisateur.Voyons par exemple ce site qui vend des montres d’occasion. Les internautes peuvent acheter et vendre des montres d’occasion sur ce site. La longue partie de texte en milieu de page contrevient aux instructions générales de rédaction sur le Web. Il est conseillé de présenter les options dans des menus faciles à parcourir.
Watches.co.uk doit se conformer aux instructions générales de tous les sites Web, notamment la réduction des parties de texte trop denses. Le site respecte une instruction générale : montrer son sujet en présentant des exemples sur la page d’accueil. Cette instruction n’indique pas exactement comment chaque site doit présenter son contenu, mais
Le texte dense a probablement été inclus pour une optimisation des moteurs de recherche, une tentative pour faire rentrer autant de noms de marques que possible sur la page d’accueil. Il aurait mieux valu, d’un point de vue professionnel, concevoir des pages à thème pour chaque marque que les utilisateurs déjà décidés auraient pu trouver. S’ils arrivent directement sur une page présentant plusieurs montres de leur fabricant préféré, ils sont plus susceptibles de trouver un article qui leur plaise. Une personne recherchant par exemple une montre « IWC Mark 10 » peut très bien aboutir sur cette page d’accueil mais la quittera probablement sans acheter car la montre n’est ni présentée ni facile à trouver. Vous vous interrogez peut-être sur le mal qu’il y a à attirer des utilisateurs même s’ils ne trouvent pas le produit qu’ils veulent. Au pire, ils quitteront le site. En réalité, ils risquent de ne jamais revenir, ce qui est encore pire. Si les utilisateurs sont déçus à plusieurs reprises après avoir cliqué sur un lien dans un moteur de recherche, ils décideront sûrement d’ignorer le site à l’avenir. L’ironie, c’est que le site aura parfois le modèle souhaité. www.watches.co.uk
18
Site Web : priorité à la simplicité
l’approche qu’il a, à savoir montrer des photos et des prix de certaines montres, est une bonne application de l’instruction. Puisque watches.co.uk est un site de commerce électronique, son concepteur doit aussi respecter les quelques centaines d’instructions spécialisées destinées au commerce électronique et présentées dans notre rapport spécialisé. Nous avons par exemple développé un ensemble d’instructions détaillées pour les paniers d’achat, notamment en précisant qu’ils doivent être présentés en haut de toutes les pages, comme ici. Enfin, puisque watches.co.uk vend des montres d’occasion, et non des livres, des fleurs, des ordinateurs, des billets d’avion, etc., ses concepteurs doivent se conformer aux instructions spécifiques pour la vente de montres et d’articles d’occasion. Certaines instructions pour la vente d’articles d’occasion se retrouvent dans les études sur l’utilisabilité effectuées auprès des vendeurs de marchandises d’occasion, allant d’eBay aux bouquinistes. Pour déterminer les directives spécifiques à la vente de montres, la société doit effectuer une recherche personnalisée auprès des utilisateurs de son site. Les instructions de cet ouvrage vous aideront à développer votre site, quel que soit son type. Mais vous devrez toujours vous reporter à des études supplémentaires traitant de problèmes plus spécifiques. Certains sont même tellement spécifiques à votre site qu’ils ne seront pas traités ici : pour que votre site devienne leader dans sa catégorie, vous devrez procéder à un test auprès de vos propres utilisateurs. En résumé, cet ouvrage compile des milliers de conclusions sur l’utilisabilité en un nombre assez restreint de principes clé et souligne ceux qui auront le plus d’impact sur vos projets. Nous vous présentons les principales erreurs de conception et les réussites des sites d’aujourd’hui et nous les comparons à ceux des années précédentes. Au terme de votre lecture, vous saurez ce qui fonctionne et ce qui ne fonctionne pas et comment rendre votre site Web plus facile d’utilisation et donc plus fructueux.
1 : Introduction : rien à cacher
19
22
Quel emploi fait-on du Web ?
36
• Utilisation de la page des résultats des moteurs de recherche
• Des taux de succès non dirigés • Le succès par niveau d’expérience 26
Satisfaction des utilisateurs quant aux sites Web
27
Utilisation des sites Web
47 • La page d’accueil, tant à dire en si peu de temps • Comportement sur les pages intérieures
Prédominance des recherches
52
Butinage d’informations • La trace des informations, un bon indice du succès • Régimes alimentaires : les sites à visiter
• Utiliser la tarification des mots-clés pour estimer les améliorations de l’utilisabilité
• Abandonner le terrain de chasse : à quel moment aller chasser ailleurs
Respect des conventions de conception et des instructions d’utilisabilité
• Comportement de navigation informativore
2
L’expérience de l’utilisateur sur le Web Sachez que vous avez moins de deux minutes pour communiquer la première fois qu’un client potentiel visite votre site Web. C’est la base de l’expérience utilisateur : en ce qui les concerne, chaque page doit justifier sa présence. Si l’une d’elles ne le fait pas immédiatement et clairement, ils se rendent sur un autre site. La plupart ne se donnent même pas la peine de faire défiler pour voir la fin de la page.
Les utilisateurs du Web sont extrêmement impatients : dans notre étude, ils ont passé une moyenne de 27 secondes sur chaque page. Pourquoi si peu de temps ? Car il y a trop d’informations non pertinentes sur Internet. Si l’on devait étudier soigneusement tout ce que l’on trouve en ligne, on n’aurait pas le temps de vivre. Il n’existe pas de petites clochettes pour indiquer aux utilisateurs si la page mérite leur attention. C’est à vous de les convaincre. Dans ce chapitre, nous étudions le comportement général des utilisateurs sur le Web, les endroits où ils se rendent en premier, combien de temps ils y passent et ce qu’ils y font lorsqu’ils y sont. Nous nous attardons également sur le « butinage d’informations » et les évolutions des moteurs de recherche. Ce sont des facteurs à garder en tête pour que les utilisateurs passent suffisamment de temps sur votre site.
Quel emploi fait-on du Web ? Il y a plus d’un milliard d’utilisateurs d’Internet, n’importe quel site ayant moins de 10 millions de clients (autrement dit, quasiment tous) n’a pas conquis 99 % de son public potentiel.
22
Au départ, la question était de savoir si les personnes étaient tout simplement capables d’utiliser des sites Web. Aujourd’hui, la réponse est « oui », la plupart du temps. Lorsque nous avons demandé aux testeurs de se rendre sur un site spécifique, ils y ont réussi 66 % du temps. Bien entendu, cela signifie aussi un échec dans 34 % du temps, mais en moyenne cela fonctionne. Pourquoi les personnes utilisent-elles le Web alors que cela ne fonctionne pas un tiers du temps ? En réalité, l’échec n’est pas si fréquent. Il survient lorsque des personnes utilisent de nouveaux sites. Or, nous passons beaucoup de temps sur des sites qui se sont révélés utiles par le passé. Le taux de succès au cours d’une journée donnée est donc supérieur. Les utilisateurs choisissent des sites en fonction de leurs précédentes expériences, ceux présentant une grande simplicité d’utilisation sont donc plus susceptibles d’être choisis. De plus, le succès entraîne le succès : les utilisateurs s’améliorent dans l’utilisation des sites qu’ils visitent régulièrement. Par exemple, si vous avez déjà acheté neuf livres sur amazon.com, il sera plus facile d’acheter le dixième que d’acheter le premier.
Site Web : priorité à la simplicité
Apprendre que l’expérience générale des utilisateurs est meilleure que ce qu’indiquent nos statistiques vous sera d’un maigre réconfort, car le seul espoir d’un site pour attirer de nouveaux clients réside dans sa simplicité d’utilisation lors de cette première visite. Il y a plus d’un milliard d’utilisateurs d’Internet, n’importe quel site ayant moins de 10 millions de clients (autrement dit, quasiment tous) n’a pas conquis 99 % de son public potentiel. Le taux de succès de 66 % mesuré dans notre étude constitue en fait une avancée majeure par rapport à la faible utilisabilité qui caractérisait le Web dans les années 1990. A cette époque, les études mesuraient régulièrement des taux de succès d’environ 40 %, l’échec était donc plus important. Un long chemin a donc été parcouru en une décennie seulement. Mais quand pourrons-nous constater des taux de succès de 100 % ? Probablement jamais, car il existera toujours des sites que presque personne ne pourra utiliser.
La mesure du succès Le taux de succès se définit par les progrès réalisés par les utilisateurs pour accomplir leurs exercices. C’est évidemment une mesure brute : elle ne dit rien des raisons de leur échec ou de leur réussite. Néanmoins, les taux de succès sont intéressants car ils sont aisés à collecter et constituent une statistique très parlante. Après tout, le succès de l’utilisateur est à la base d’une bonne utilisabilité. Les taux de succès sont simples à mesurer, à une exception près : comment prendre en compte les cas de succès partiel ? Si les utilisateurs parviennent à accomplir une partie d’une tâche mais pas l’autre, comment les noter ? Imaginons par exemple que nous demandions à des utilisateurs de commander douze roses jaunes pour les faire livrer à un ami le jour de son anniversaire. Lorsqu’un testeur parvient à réaliser ce qui est convenu, nous pouvons certainement comptabiliser cette tâche comme un succès. S’il ne parvient pas à passer commande, il s’agira d’un échec.
Mais il existe également d’autres possibilités. Un utilisateur pourrait commander douze tulipes jaunes ou vingt-quatre roses jaunes, ne pas spécifier l’adresse de livraison ou donner la bonne adresse mais une mauvaise date, ou encore oublier de demander qu’un message soit inclus avec le bouquet. Chacune de ces situations implique un certain degré d’échec, nous pourrions donc les comptabiliser comme tels. Toutefois, nous accordons généralement un crédit partiel pour une tâche partiellement réalisée. Pour nous, il semble peu raisonnable de donner un zéro à l’utilisateur qui n’a rien fait ainsi qu’à celui qui a réalisé la plus grande partie de l’exercice. La manière dont nous notons un succès partiel dépend donc de l’amplitude d’erreur de l’utilisateur. Il n’existe pas de règle bien établie pour affecter un crédit à un succès partiel. Les notes partielles ne sont que des estimations mais donnent une impression plus réaliste de la qualité de la conception.
2 : L’expérience de l’utilisateur sur le Web
23
Si la tendance actuelle se poursuit et que les sites continuent à investir dans l’utilisabilité, nous devrions nous approcher des 100 % aux environs de 2015. Le Web sera-til parfait à cette époque ? Certainement pas. Les taux de succès ne mesurent que s’il est possible d’utiliser des sites Web, pas s’ils sont agréables ou efficaces. De plus, le Web étant le dernier environnement concurrentiel du moment, lorsque l’on pourra utiliser presque tous les sites Web, nos choix porteront plutôt sur ceux qui rendent le meilleur service.
Des taux de succès non dirigés Dans 66 % des cas où nous indiquions aux testeurs la page d’accueil du site où réaliser un exercice faisable, les utilisateurs ont réussi. Mais lorsque nous leur avons présenté un écran de navigateur et demandé d’aller là où ils voulaient pour réaliser l’exercice, le taux de succès moyen est descendu à 60 %. En effet, les utilisateurs ont d’abord dû identifier un site qui résoudra le problème, puis l’utiliser pour accomplir l’exercice. Si vous collectez des mesures d’utilisabilité pour votre propre site Web, mesurez toujours les chiffres par rapport aux taux de succès enregistrés pour des tâches spécifiques à un site, en supposant que vous commenciez à tester les utilisateurs sur la page d’accueil. C’est la manière la plus commune de mener à bien ce genre d’étude car cela optimise le temps passé par les utilisateurs sur le site concerné. S’ils parviennent à réaliser 70 % de tâches raisonnables et représentatives, l’utilisabilité du site est au-dessus de la moyenne. A l’inverse, si le taux de succès tombe à 50 %, c’est que l’utilisabilité est en dessous de tout et vous devrez l’améliorer d’environ un tiers pour atteindre la moyenne des 66 %. Le taux de succès de 60 % enregistré pour les exercices non dirigés est plus représentatif de l’expérience générale des utilisateurs qui tentent de faire quelque chose de nouveau et ne savent pas encore sur quel site se rendre. Ce taux plus faible mesure la difficulté à utiliser le Web dans son ensemble et les fonctionnalités existantes fournies pour aider les utilisateurs à identifier des sites (principalement par le biais des moteurs de recherche). Il y a donc une marge d’amélioration importante.
24
Site Web : priorité à la simplicité
Le succès par niveau d’expérience Nous avons divisé nos utilisateurs en deux groupes, selon leur expérience d’Internet. Tous avaient au moins un an d’expérience du Web, mais leurs compétences étaient très diversifiées. Pour cette analyse, nous les avons séparés en « utilisateurs avec peu d’expérience » et « utilisateurs très expérimentés », en fonction de divers facteurs : ■
le nombre d’années d’expérience du Web ;
■
le nombre d’heures par semaine passées sur le Web, hors courrier électronique ;
■
le nombre de comportements "avancés » dont ils ont fait preuve, comme la discussion sur le Web, la modification des intitulés des signets, la mise à niveau de leurs navigateurs et la conception de leurs propres pages Web ;
■
selon s’ils résolvent eux-mêmes ou non les problèmes de leur équipement informatique ;
■
la manière dont ils suivaient les tendances de la technologie, par exemple s’ils s’étaient abonnés à des magazines informatiques ou s’ils étaient considérés par leurs amis comme des sources de conseils en informatique.
En règle générale, les personnes étaient considérées comme ayant « peu d’expérience » si elles n’étaient connectées que depuis moins de trois ans, si elles utilisaient le Web moins de dix heures par semaine, si elles démontraient moins d’un tiers de comportements avancés, si elles demandaient à un tiers de résoudre leurs problèmes informatiques et si on ne les consultait pas pour obtenir des conseils en matière de technologie. A l’inverse, les personnes étaient classées comme ayant « beaucoup d’expérience » si elles étaient connectées depuis au moins quatre ans, utilisaient le Web plus de dix heures par semaine, montraient plus d’un tiers des comportements avancés, résolvaient leurs propres problèmes informatiques et étaient source de conseils techniques pour les autres. Bien entendu, certaines personnes étaient avancées sur certaines échelles de notation et moins sur d’autres. Dans ce cas, leur classement dépendait de leur note moyenne. Comme le montre ce tableau, l’écart entre les utilisateurs peu et très expérimentés s’est révélé être de 13 % pour les tâches spécifiques à un site et de 15 % pour les tâches générales sur le Web. Autrement dit, l’expérience a plus profité pour les exercices non dirigés que lorsque le site à utiliser 2 : L’expérience de l’utilisateur sur le Web
25
était connu. Cette différence montre que la liberté de mouvement est plutôt un avantage pour les utilisateurs compétents et plutôt un frein pour les utilisateurs moins avancés et confirme une fois de plus l’approche « grillagée » (un environnement fermé qui limite l’accès de l’utilisateur aux informations extérieures) qu’AOL a utilisée à ses débuts pour tenter de simplifier l’expérience en ligne des utilisateurs novices. Taux de succès et expérience Expérience du Web
Tâches spécifiques à un site
Tâches sur tout le Web
Faible
59 %
52 %
Elevée
72 %
67 %
Les utilisateurs moins expérimentés avaient plus de difficultés que les utilisateurs expérimentés pour accomplir des tâches standard en ligne. Les deux groupes ont eu de moins bonnes notes dans les exercices non dirigés.
Satisfaction des utilisateurs quant aux sites Web En règle générale, les notations de satisfaction subjectives ne constituent pas une mesure très parlante d’utilisabilité car les utilisateurs ont tendance à accorder des notes généreuses même lorsqu’ils ont rencontré des difficultés. Les êtres humains veulent généralement être polis et ne pas faire de vagues. Les testeurs n’évaluent généralement pas non plus la médiocrité de leurs performances lorsqu’ils ont testé un site. S’ils ont trouvé certaines informations, ils pensent que le site a été utile, sans réaliser qu’il aurait pu contenir beaucoup d’informations plus pertinentes. Sur une échelle de 1 à 7, où 7 correspond à l’expérience la plus satisfaisante, la note moyenne donnée par nos utilisateurs aux vingt-cinq sites testés était de 4,7. Nous analysons rarement ces notes pour évaluer l’utilisabilité d’une interface, sauf pour voir si les utilisateurs ont particulièrement apprécié ou détesté un point particulier. Toutefois, le fait que les notes de satisfaction de notre étude aient été raisonnables montre que nous avons choisi un échantillon représentatif des tendances actuelles du Web, correspondant assez aux attentes des internautes en matière d’utilisabilité.
26
Site Web : priorité à la simplicité
Utilisation des sites Web Observer nos utilisateurs lorsqu’ils tentent de se dépêtrer de leurs exercices non dirigés nous indique comment l’internaute lambda approche un site lorsqu’il n’a pas de prédisposition pour lui. C’est un aspect commun à la nouveauté, par exemple au moment d’acheter un article jamais acheté auparavant, et c’est exactement la situation dans laquelle doit être un site Web pour être le plus compétitif et le plus attirant possible. Les pages intérieures ont comptabilisé 60 % des premières consultations. Sachez-le et intégrez cette information. N’essayez pas de forcer les utilisateurs à entrer sur la page d’accueil.
En moyenne, les utilisateurs ont passé 1 minute et 49 secondes à visiter un site Web avant de se décider à le quitter et à passer à autre chose. Sur le dernier site visité pour un exercice, ils ont passé une moyenne de 3 minutes et 49 secondes. Pour accomplir une tâche, les utilisateurs ont visité une moyenne de 3,2 sites, hors moteurs de recherche. Et surtout, ils sont retournés sur des sites déjà visités en moyenne 0,4 fois pour un exercice, un résultat quasi négligeable. Un site n’a que 12 % de probabilités d’être revisité. Ainsi, si vous perdez un utilisateur, c’est presque pour toujours.
Trois instructions pour aider les utilisateurs de liens profonds 1. Dites-leur où ils sont arrivés et comment ils peu-
cement actuel de l’utilisateur dans la hiérarchie du
vent se rendre vers d’autres parties du site en pré-
site et lui permet de revenir en arrière ou d’avan-
sentant ces trois éléments sur chaque page :
cer. Faites également figurer des liens vers d’autres
le nom ou le logo de la société dans le coin supérieur gauche ;
ressources pertinentes mais ne noyez pas l’utilisa-
■
un lien en un clic vers la page d’accueil ;
site ou vers des pages sans intérêt.
■
un système de recherche (de préférence dans
■
teur sous une série de liens vers d’autres zones du
3. Ne supposez pas que les utilisateurs ont suivi un chemin linéaire pour arriver à la page actuelle. Ils
le coin supérieur droit). 2. Orientez l’utilisateur vers le reste du site. Si le site
ont pu suivre un parcours tout à fait différent de
possède une architecture hiérarchique, la meilleure
ce que vous souhaitiez et ne pas avoir vu les
manière de procéder consiste généralement à uti-
informations contenues dans des pages de niveau
liser un « fil d’Ariane », un lien qui signale l’empla-
supérieur.
2 : L’expérience de l’utilisateur sur le Web
27
Les utilisateurs de notre test se sont d’abord rendus sur la page d’accueil d’un site 40 % du temps. En considérant que la plupart des sites Web possèdent des milliers de pages, cela signifie que la page d’accueil reçoit plus de visites, et ce de manière disproportionnée. De plus, les utilisateurs se tournent souvent vers la page d’accueil pour avoir une idée générale du site, même s’ils sont entrés par une page intérieure. Il est donc fortement conseillé de prêter une attention toute particulière à son utilisabilité.
www.allmusicals.com Imaginons que vous recherchiez les paroles de la chanson « Singin’ in the Rain » et que vous les trouviez sur le site All Musicals, par exemple depuis un moteur de recherche ou par un lien d’un autre site. Cette capture d’écran montre ce que vous verrez. Il n’y a là rien d’encourageant à faire après avoir lu les paroles, sauf à s’entraîner à chanter correctement. Le nom du site se trouve en haut de la page, mais il ressemble à un titre et pas à un logo. Il n’y a pas d’accroche indiquant le but du site. On trouve quelques liens, notamment un lien commercial pour acheter le CD mais on n’a pas l’impression de pouvoir cliquer dessus car il n’est ni présenté en couleur ni souligné. De même, pris ensemble, les liens ne ressemblent pas à une barre de navigation et les utilisateurs auront tendance à ignorer cette partie de l’écran car elle est associée à la bannière de mauvais goût. Pire encore, le titre de la comédie musicale n’est pas un lien, les utilisateurs n’ont donc aucun moyen facile d’accéder à une liste des autres chansons de cette comédie musicale par exemple. Ce site ne sait pas gérer les visiteurs venant de liens profonds et perdra une grande quantité de trafic.
28
Site Web : priorité à la simplicité
Malgré l’importance de la page d’accueil, les pages intérieures comptaient pour 60 % des consultations de la page initiale. Un site Web, c’est une maison avec des milliers de portes. Les visiteurs peuvent pousser n’importe laquelle d’entre elles, ne l’oubliez pas. Certains sites obligent les utilisateurs à passer par la page d’accueil mais en ce faisant ils vont à l’encontre d’un élément très ancré dans le Web : les liens profonds. Les liens profonds améliorent l’utilisabilité car ils sont plus susceptibles de satisfaire les besoins des utilisateurs. Les liens génériques, comme ceux allant vers la page d’accueil d’une société, sont moins utiles que ceux qui les emmènent vers un article ou un produit spécifique. Encouragez les sites tiers et les moteurs de recherche à placer des liens vers les pages de votre site répondant à des besoins spécifiques.
News.com propose plusieurs guides pour les utilisateurs qui pourraient arriver sur cette page par un lien profond, par exemple depuis un blog traitant de la publicité du Super Bowl, le sujet de cet article. Sous l’article, on trouve trois liens de catégorie vers des articles traitant de sujets similaires. Imaginons que vous soyez intéressé par l’affichage de publicités sur des téléphones portables. Vous pouvez cliquer sur « mobile/wireless » pour accéder à des articles sur les derniers développements de la technologie mobile. Les articles traitant plus spécifiquement du Super Bowl sont répertoriés à droite. Enfin, on trouve une case avec des titres très consultés mais sans rapport avec le sujet (nous conseillerions d’échanger les deux jeux de titres de sorte que la liste qui soit la plus liée à l’article apparaisse le plus près du corps du texte). Enfin, bien sûr, on accède simplement aux autres zones du site en se rendant sur la page d’accueil ou en utilisant le moteur de recherche interne, tous deux présentés à l’emplacement prévu.
www.news.com.com
2 : L’expérience de l’utilisateur sur le Web
29
La page d’accueil, tant à dire en si peu de temps Comme le montre ce tableau, les utilisateurs expérimentés qui se sont d’abord rendus sur la page d’accueil d’un site Web ont passé une moyenne de 10 secondes de moins que les utilisateurs ayant moins d’expérience. La différence montre que les utilisateurs sont plus rudes dans l’évaluation des sites lorsqu’ils gagnent en expérience ; ils analysent les pages plus rapidement et rejettent aussi plus vite ce qu’ils n’aiment pas. Temps moyen passé sur la page d’accueil Expérience du Web
Temps passé sur la page d’accueil
Faible
35 secondes
Elevée
25 secondes
Premières consultations de la page d’accueil lorsque c’est la première page visitée sur un site Web. Présentez votre produit rapidement. Vous avez peu de temps pour faire bonne impression. Pour connaître le temps passé lors des visites suivantes, reportez-vous au tableau suivant.
Quatre objectifs en trente secondes Quatre choses les plus importantes que doit communiquer une page d’accueil pendant cette fameuse demi-minute : ■
le site sur lequel l’utilisateur arrive ;
■
les avantages proposés par cet organisme ;
■
quelques mots sur la société et ses derniers produits ou ses derniers développements ;
■
les choix disponibles et comment aller dans la section qui intéresse le plus l’utilisateur.
30
Bien entendu, il est toujours difficile de prévoir l’avenir mais il est à parier que cette tendance va se poursuivre. Plus les utilisateurs passent d’années en ligne, plus ils font confiance à leur jugement des sites Web et moins ils passent de temps sur la page d’accueil. Avec une demi-minute à votre disposition, tous les messages doivent être ultra-percutants. Pas de paragraphes délayés que les utilisateurs ne liront pas de toute façon. La plupart des adultes sont capables de lire de 200 à 300 mots par minute, selon leur niveau d’éducation.Vous pourriez donc présenter un message d’accueil de 100 mots sur votre page d’accueil. Eh bien non. Mieux vaut vous limiter à 10 ou 20 mots. Les utilisateurs passeront la majeure partie des 25 à 35 secondes à chercher où aller ensuite et non à lire mot pour mot ce qui fait de vous une entreprise si spéciale.
Site Web : priorité à la simplicité
Que fait cette société ? Même avec tout le texte présenté sur la page d’accueil, on ne sait pas. Un simple bandeau ou une petite description placée en haut de la page aurait suffi. Le fort accent mis sur les titres et les actualités envahit la page, laissant peu de place pour présenter les produits et les services. Vous remarquerez aussi la liste de liens au bas de la page. Envoyer des utilisateurs vers différents sites Web sans contexte adéquat, ni avertissement, pose problème car c’est inattendu. Si vous intégrez des liens vers d’autres sites, présentez leur nom ou une description claire, mais pas leurs adresses.
www.qg.com
Dial Before You Dig semble un site assez simple, dont la page d’accueil est peu complexe. Mais que fait la société ? Apparemment, quoi qu’elle fasse, rien n’est plus simple (« It’s never been easier »), mais quoi exactement ? Avec quelques secondes seulement pour communiquer avec de nouveaux utilisateurs, ne perdez pas de temps à annoncer que votre nouveau service Web est disponible. D’autre part, le système permettant de se procurer un mot de passe doit être relégué sur la page d’identification.
www.dialbeforeyoudig.com.au
2 : L’expérience de l’utilisateur sur le Web
31
Vous pourriez être tenté de penser que les utilisateurs liront plus de choses lors de leur prochaine visite.Malheureusement, ce n’est pas le cas. Si éventuellement les personnes reviennent sur la page d’accueil, elles passeront encore moins de temps à admirer vos jolis slogans. Comme le montre ce tableau, les utilisateurs passent de moins en moins de temps sur la page d’accueil à chaque nouvelle visite. Après tout, l’objectif principal d’une page d’accueil est de guider les utilisateurs vers un autre endroit ; plus il y aura de personnes à comprendre la page, moins elles s’y promèneront. Elle se rendront directement aux éléments de navigation et cliqueront là où elles veulent aller. Consultations par page-écran Temps passé sur la page d’accueil
Utilisateurs ayant fait défiler
Pages-écrans ayant défilé
Première visite
31 secondes
23 %
0,8
Deuxième visite
25 secondes
16 %
0,8
Troisième visite
22 secondes
16 %
0,8
Quatrième visite et plus
19 secondes
14 %
0,5
Note : une « page-écran » correspond à un écran réglé sur 1024 × 768 pixels. Une page-écran ayant défilé signifie que la personne a vu l’écran initial plus une page-écran supplémentaire dessous. Les statistiques sur le défilement ne concernent que les pages d’accueil trop longues pour une fenêtre de navigateur.
Partis en 30 secondes : les utilisateurs passent très peu de temps sur la page d’accueil et ne font que très rarement défiler l’écran, en particulier lors des visites ultérieures. Pour des raisons de simplicité, les chiffres de ce tableau ont été pondérés entre les utilisateurs expérimentés et les utilisateurs novices.
Seuls 23 % des utilisateurs ont fait défiler la page d’accueil lors de leur première visite et encore moins l’ont fait au cours des visites ultérieures. Ceci est dû au fait que les utilisateurs savent (ou pensent savoir) où se trouvent les zones importantes de la page d’accueil après une seule visite. Même les rares personnes ayant fait défiler ne l’ont pas fait beaucoup : moins d’une page-écran supplémentaire en moyenne.
32
Site Web : priorité à la simplicité
L’une des principales raisons d’utiliser les liens profonds réside dans le fait que les internautes lisent plus de contenu sur les pages intérieures que sur la page d’accueil.
Comportement sur les pages intérieures Les utilisateurs de peu d’expérience qui sont entrés sur un site par le biais de liens profonds et ont visité une page intérieure y ont d’abord passé une moyenne de 60 secondes. Les utilisateurs expérimentés ont passé environ 45 secondes lors de la première visite d’une page intérieure. Nous constatons ici le même phénomène que pour les pages d’accueil : avec l’expérience, les utilisateurs analysent plus vite la première page et décident ce qu’ils veulent faire sur le site. Les testeurs ont passé de 70 à 80 % plus de temps à revoir leur point d’entrée lorsqu’ils sont entrés sur une page intérieure que lorsqu’ils sont entrés sur la page d’accueil. Ceci est dû au fait que les pages intérieures visitées étaient plus directement liées à leur recherche. Avec 45 à 60 secondes passées sur une page intérieure, les utilisateurs pourraient en théorie lire environ 200 mots mais ils passent généralement une partie de ce temps à évaluer le système de navigation du site et à décider où se rendre ensuite. Ils peuvent lire jusqu’à 100 mots d’informations initiales, ce qui est sensiblement plus que les 10 à 20 mots qu’ils lisent lorsqu’ils entrent sur la page d’accueil. L’une des principales raisons d’utiliser les liens profonds réside dans le fait que les internautes lisent plus de contenu sur les pages intérieures d’un site. Page d’accueil et pages intérieures Expérience du Web
Temps passé sur la page d’accueil
Temps passé sur une page intérieure
Faible
35 secondes
60 secondes
Elevée
25 secondes
45 secondes
Les personnes passent plus de temps sur les pages intérieures que sur les pages d’accueil. Une fois de plus, ceux qui ont l’expérience du Web parcourent les écrans plus rapidement que les utilisateurs novices, qui ont tendance à scruter l’écran de manière plus attentive.
2 : L’expérience de l’utilisateur sur le Web
33
Imaginons qu’un utilisateur recherche des lecteurs de musique et soit arrivé sur la page des produits iPod du site Web d’Apple. En moyenne, les gens lisent à peu près la quantité de texte que nous avons encadrée dans cette case rouge. En pratique, les utilisateurs ne vont pas lire ces deux paragraphes mot pour mot. Ils vont plutôt balayer plusieurs des paragraphes supérieurs, en lisant moins de la moitié de chaque. Le reste des 45 à 60 secondes est passé à regarder les photos et à parcourir la liste à puces des fonctionnalités et autres éléments de la page. Au total, cette page contient 523 mots (y compris une mention légale que nous n’avons pas présentée), ce qui prendrait à l’utilisateur moyen deux minutes à lire, plus de deux fois le temps qu’ils sont susceptibles de passer sur la page. Le texte est écrit pour un niveau de lecture de quatrième, ce que nous recommandons pour les utilisateurs adultes mais qui sera trop difficile pour la majorité des adolescents, qui constituent un important public potentiel pour ce produit.
www.apple.com
34
Site Web : priorité à la simplicité
Astuce : optimisation des liens vers les pages intérieures Avec environ une demi-minute passée sur les pages intérieures, les utilisateurs consacrent la majorité du temps à la zone de contenu, et non à la navigation. Placez-y des liens importants pour qu’ils les voient facilement.
Lorsque les utilisateurs ont visité les pages intérieures d’un site, ils ont passé une moyenne de 27 secondes sur chaque page. Ce laps de temps extrêmement court souligne la nécessité d’être très clair sur chaque page pour ce que les utilisateurs en retiendront. Les gens n’ont pas le temps de tout lire, ils vont donc juger les pages en quelques secondes. Ce camembert montre là où les utilisateurs ont cliqué sur la page. Il peut sembler surprenant que les utilisateurs aient passé plus de temps dans la zone de contenu que dans les zones généralement utilisées pour la navigation, comme le haut de la page ou les colonnes droite ou gauche. Nous savons toutefois grâce aux études de suivi oculaire qu’ils ont passé la grande majorité de leur temps à regarder la zone de contenu et rarement analysé les zones de navigation.
Pied de page
Colonne droite
Colonne gauche
Haut de la page
Zone de contenu
Endroits où les utilisateurs ont cliqué sur les pages Web pour se rendre ailleurs sur le même site (une moyenne sur 4719 clics).
2 : L’expérience de l’utilisateur sur le Web
35
Prédominance des recherches Lorsque nous avons laissé libre cours aux utilisateurs pour qu’ils aillent où ils le voulaient sur le Web, ils se sont rendus à 88 % du temps sur un moteur de recherche. Dans 12 % des cas uniquement, ils ont accédé à un site Web dont ils pensaient qu’il pourrait les aider à résoudre leurs problèmes. Par exemple, lorsque la tâche consistait à rechercher un voyage de loisirs vers le Mexique, seuls quelques utilisateurs se sont rendus sur un site de voyage qu’ils connaissaient déjà et dans lequel ils avaient confiance, comme Expedia ou Travelocity. La grande majorité a fait appel à un moteur de recherche. Le fait que les moteurs de recherche soient devenus l’outil prédominant pour les utilisateurs cherchant des solutions montre clairement en quoi la publicité ciblée est devenue une activité rentable. Les publicités ciblées sont la principale manière de vous présenter à des clients potentiels au moment exact où ils recherchent de nouveaux fournisseurs. De plus en plus, l’expérience des utilisateurs sur Internet consiste à jeter un œil sur des sites Web plutôt qu’à véritablement les visiter. Les moteurs de recherche servant d’interface Web, les internautes extraient souvent des « pépites d’informations » liées à leur requête sans s’engager sur les sites.
La montée des « moteurs de réponses » L’étude que nous avons menée pour cet ouvrage a confirmé notre première conclusion : les utilisateurs poursuivent leurs objectifs idiosyncrasiques et dépendent d’un service générique, la recherche, pour obtenir des conseils. Ce qui a changé, c’est que plutôt que de rechercher des sites à explorer et à utiliser en profondeur, les utilisateurs demandent aujourd’hui des réponses spécifiques. Les moteurs de recherche sont devenus pour l’essentiel des « moteurs de réponses ».
36
Les moteurs de recherche ont toujours été un outil important pour les utilisateurs. En 1994, lorsque nous tentions de comprendre pourquoi le public utilisait le Web malgré sa très mauvaise utilisabilité, nous posions deux questions à tous ceux qui se rendaient dans notre laboratoire : que faites-vous en ligne ? Quels sont vos sites favoris ? Leurs réponses étaient véritablement diversifiées. Leur intérêt allait du golf au tricot en passant par Linux ou l’histoire militaire et leurs sites favoris variaient tout autant. En fait, le seul point commun était que tous nommaient parmi leurs sites préférés un moteur de recherche. La conclusion est claire : la force du Web provient de sites précisément ciblés qui offrent aux utilisateurs les informations hautement spécialisées dont ils ont besoin ou pour lesquelles ils se passionnent. Il est également évident que la recherche est un service d’intérêt général, extrêmement important, car même lorsque le Web ne contenait que 30 000 sites, leur localisation était quasiment impossible sans aide. Site Web : priorité à la simplicité
Les utilisateurs considèrent maintenant le Web comme un tout intégré, d’où sa croissance. C’est une bonne nouvelle pour les moteurs de recherche, mais pas pour les sites Web.
L’un des changements majeurs survenus au cours des années a été le déclin de l’utilisation de la recherche pour identifier les bons sites. Les personnes cherchent des réponses. Le Web en tant que tel est devenu une ressource agglomérée pour ceux qui veulent dénicher des pages spécifiques à leurs besoins, sans s’occuper de qui les leur fournit. Le travail des moteurs de recherche n’est plus de découvrir des ressources mais de répondre à des questions. Ce changement de comportement s’explique par la théorie du « butinage d’informations » : plus il est facile de dénicher de nouvelles ressources, moins les utilisateurs passent de temps sur chacune d’entre elles. Ainsi, l’amélioration de la qualité de recherche accélère l’attrait pour les moteurs de recherche. Les connexions illimitées ont un effet similaire, car elles encouragent la recherche rapide d’informations et des sessions plus courtes. Enfin, la mauvaise prise en charge des signets et des favoris par les navigateurs Web a contribué au déclin de l’intérêt que les utilisateurs leur portent. Les utilisateurs considèrent maintenant le Web comme un tout intégré, d’où sa croissance. Ils supposent que ce qu’ils cherchent est disponible quelque part. Il suffit de poser la question. « Les sites Web » n’étaient de toute façon pas vraiment un concept tangible jusqu’en 1993. Le Web avant Mosaic en 1991 et 1992, ce n’était rien d’autre qu’un réseau d’informations dont l’unité fondamentale était l’article et non le serveur hébergeant une page Web. Ce nouveau comportement est en fait une quasi-inversion de la vision initiale du Web, mais les utilisateurs conservent toujours des sites favoris qu’ils peuvent considérer comme des ressources. Pour les moteurs de recherche, devenir une interface utilisateur au détriment des gros sites est une bonne nouvelle. C’est aussi une bonne nouvelle pour les utilisateurs qui trouvent leurs réponses en parcourant quelques résultats de recherche plutôt qu’en se coltinant l’obscure conception et les mauvais outils de navigation de nombreux sites. Mais est-ce aussi bon pour les sites Web ? Malheureusement non. Ils tirent très peu d’avantages à apporter des réponses aux utilisateurs qui ne savent pas qui leur fournit le service ou qui s’en moquent.
2 : L’expérience de l’utilisateur sur le Web
37
Les sites de commerce électronique font quelque peu exception car ils concluent souvent une vente auprès des utilisateurs qui jettent un coup d’œil sur leur catalogue. Ces sites diffèrent des autres car ils passent par des étapes de confirmation et de réalisation suite à la première visite des utilisateurs, des étapes qui peuvent aller jusqu’au souvenir du site, la probabilité que le site revienne à l’esprit de l’utilisateur lorsqu’il pense au type de produits ou de services qu’il propose. Ainsi, la conclusion de la première transaction est l’un des plus importants facteurs pour d’éventuelles ventes ultérieures. Il serait suicidaire pour les sites de commerce électronique de refuser les robots d’achat (des logiciels qui parcourent le Web à la recherche des prix les plus intéressants), d’interdire les liens profonds ou d’employer d’autres astuces exigeant des utilisateurs qu’ils entrent par la page d’accueil et passent du temps à naviguer sur le site.Toute barrière entre le client et le produit entraîne une perte des ventes.
Quatre moyens pour tirer avantage des visiteurs des moteurs de recherche Certaines tactiques permettent de faire grimper la valeur de votre société grâce aux utilisateurs qui entrent sur votre site en provenance d’un moteur de recherche. A moins d’utiliser au moins l’une de ces quatre options, vous risquez de voir partir les utilisateurs au bout d’une ou deux pages, et ils ne sauront jamais rien de votre société. ■
Proposez un contenu attractif grâce à des pages très ciblées, proposant des réponses claires à des problèmes communs. Ces pages doivent respecter l’optimisation utilisée par les moteurs de recherche (SEO, Search Engine Motors), n’oubliez donc pas d’inscrire des titres clairs.
■
Embellissez votre réponse grâce à des liens riches du type « voir aussi », pointant vers du contenu et des services connexes. Les éléments de navigation globale n’y feront rien car tous ceux qui cherchent des réponses les ignoreront. N’oubliez pas qu’ils ne sont pas intéressés par votre site. Toutefois, les liens contextuels aideront les utilisateurs les plus volontaires à aller voir plus loin, et ce sont ceux
38
à conserver comme prospects pour vos services payants. Les liens du type « voir aussi » peuvent être intégrés à l’article ou placés à la fin, où ils serviront pour un suivi. Vous pouvez aussi faire savoir que vous vendez quelque chose et que vous ne distribuez pas simplement des informations gratuites. ■
Allez au-delà des informations pures et proposez une analyse et des études, de préférence d’un point de vue unique, avec un aspect original qui appuie votre position. Un certain pourcentage d’utilisateurs appréciera votre point de vue et voudra en savoir plus, même après avoir trouvé la réponse à leurs questions immédiates.
■
Publiez une lettre d’informations contenant des astuces complémentaires et des informations utiles. Ces lettres envoyées par e-mail établissent une relation avec les utilisateurs, en proposant une expérience plus personnelle que la simple consultation de la page.
Site Web : priorité à la simplicité
Liens organiques et liens sponsorisés Les moteurs de recherche présentent généralement deux sortes de résultats sur la SERP : des listes organiques et des liens sponsorisés. Les listes organiques sont celles qui ont été naturellement trouvées sur le Web et représentent la meilleure correspondance à la requête de l’utilisateur, en fonction de l’algorithme utilisé par le moteur de recherche. On peut supposer que les listings organiques sont « purs » et non commerciaux dans la mesure où le site n’a pas payé pour être répertorié et ne sera pas facturé si l’utilisateur clique sur le lien. Les liens sponsorisés, au contraire, ne sont rien d’autre que des publicités, même si la plupart des moteurs de recherche persistent à employer l’euphémisme « sponsorisé » pour y faire référence. Malheureusement, beaucoup d’utilisateurs ne comprennent pas ce que « sponsorisé » signifie ici et ne voient pas que ces liens sont simplement des publicités.
Même les sites n’ayant pas d’activité commerciale doivent se plier à la tendance : donner des réponses aux utilisateurs. Rien ne sert de chercher à éviter la nature de réseau du Web. Les chiffres de suivi des visiteurs uniques ne sont plus pertinents. La plupart parcourent une seule page pour avoir une réponse et ne s’engagent pas dans votre site. Au lieu de les suivre, comptabilisez les utilisateurs fidèles comme une mesure du succès du site.
Utilisation de la page des résultats des moteurs de recherche La page de résultats des moteurs de recherche est généralement appelée SERP (Search Engine Results Page). Ce terme est rarement utilisé au pluriel car la plupart des utilisateurs n’en consultent pas plus d’une pour chaque requête. Dans 93 % des cas, les utilisateurs de notre étude n’ont consulté que la première, qui contenait généralement dix résultats, plus un certain nombre de publicités. Dans seulement 7 % des cas, ils se sont rendus sur une seconde SERP et ceux qui en ont visité trois pour une simple requête ont été trop peu nombreux pour que l’on apporte une estimation ferme mais il est probable que c’était moins de 1 %. Non seulement la plupart des utilisateurs se sont contentés d’une seule SERP mais ils n’ont même pas été voir la fin de la page. Seuls 47 % des utilisateurs ont navigué jusqu’à la fin de la première SERP, ce qui signifie que 53 % d’entre eux n’ont vu que les résultats de recherche de la première page-écran. Sur le moteur le plus utilisé, Google, les internautes ne voient que quatre ou cinq résultats sans faire défiler lorsqu’ils consultent la page à la résolution d’écran la plus employée (1024 × 768 pixels), comme dans notre étude. Outre les quatre ou cinq résultats de recherche « organiques », on trouve généralement six ou sept publicités dans le premier écran, soit un total de dix articles à peu près parmi lesquels choisir. Ce tableau montre la fréquence à laquelle les utilisateurs ont cliqué sur les résultats de recherche à des emplacements différents de la liste SERP. La première n’affichant que dix liens organiques, les utilisateurs ont dû se rendre sur la deuxième pour cliquer sur les liens suivants. Sur les 7 % qui ont réellement visité la deuxième page, seul 5 % y ont cliqué, une différence qui s’explique par le fait
2 : L’expérience de l’utilisateur sur le Web
39
que certains de ceux ayant visité la deuxième page sont retournés sur la première. Il n’est pas surprenant que les liens du dessus obtiennent plus de clics que ceux du bas mais il peut être étonnant de constater la prédominance du résultat n° 1, qui obtient plus de la moitié des clics. Endroits où les utilisateurs ont cliqué sur la SERP Position dans la liste des résultats de recherche
Clics sur les liens à cette place
N° 1
51 %
N° 2
16 %
N° 3
6%
N° 4
6%
N° 5
5%
N° 6
4%
N° 7
2%
N° 8
1%
N° 9
1%
N° 10
2%
N° 11 et +
5%
Note : les nombres ne totalisent pas 100 % du fait de l’arrondi.
95 % des clics ont eu lieu sur les articles 1 à 10 de la première page de résultats. Ce tableau ne compte que les clics réalisés sur les liens organiques. Les liens sponsorisés obtiennent une distribution similaire avec un nombre disproportionné de clics sur les premières publicités.
Directive numéro 1 pour l’optimisation dans les moteurs de recherche Essayez d’accéder à la première place de la liste pour tous les mots-clés importants que vos utilisateurs sont susceptibles de rechercher. Malheureusement, c’est plus facile à dire qu’à faire. Si vous n’arrivez pas en tête de liste, les deuxième et troisième positions conviendront aussi. Plus vous descendez dans la liste, moins vous avez de chances d’être vu, mais si vous avez le choix entre être neuvième ou dixième,
40
choisissez le dernier résultat de la page, car être le dernier élément de la liste est meilleur en termes de visibilité. Si vous ne parvenez pas à obtenir un classement organique convenable pour les termes de recherche importants, envisagez sérieusement d’utiliser des publicités ciblées.
Site Web : priorité à la simplicité
Utiliser la tarification des mots-clés pour estimer les améliorations de l’utilisabilité Réaliser de grandes études sur l’utilisabilité comme la nôtre sur une large gamme de sites Web est onéreux et long. Nous ne pouvons pas le faire tous les ans, nous ne pouvons donc pas précisément suivre les améliorations d’utilisabilité de manière constante grâce à des mesures directes. Heureusement, il existe une mesure indirecte, plus réalisable : les prix payés pour la publicité ciblée sur les principaux moteurs de recherche. Au fil du temps, le prix des publicités ciblées a considérablement augmenté. Les futures augmentations seront strictement liées aux améliorations de l’utilisabilité
Sur les grands moteurs de recherche, la publicité ciblée fonctionne ainsi : la société doit d’abord étudier la somme qu’il est rentable de payer pour attirer un visiteur ayant tapé un mot-clé donné et qui peut être intéressé par un produit ou un service associé à ce mot. La société enchérit pour chaque mot-clé et le moteur de recherche affiche généralement les publicités des huit principaux enchérisseurs. Il existe de nombreuses astuces en matière de publicité des moteurs de recherche mais le principe de base reste une enchère dans laquelle un nombre limité de places est vendu aux meilleurs enchérisseurs. A titre d’exemple, notre propre société, Nielsen Norman Group, paie généralement 31 cents pour chaque utilisateur ayant cherché les termes « usability training » (formation en utilisabilité) et qui a cliqué sur le lien vers la page de notre conférence annuelle sur l’utilisabilité. De même, une société qui vend des produits de vacances pour le Mexique pourrait payer une somme substantielle pour des utilisateurs qui recherchent les termes « vacances Mexique « ou « hôtel Yucatan ». Au fil du temps, le prix des publicités ciblées a considérablement augmenté. Sur le long terme, les augmentations de ces enchères seront strictement liées aux améliorations d’utilisabilité. Dans les années à venir, les prix des mots-clés augmenteront considérablement car de plus en plus de sociétés réalisent les avantages de la publicité dans les moteurs de recherche. C’est en effet la meilleure manière de promouvoir un site Web car ces mots-clés attirent les utilisateurs qui cherchent le produit que vous proposez. Actuellement, la plupart des directeurs marketing sur Internet ne connaissent rien à la publicité par mots-clés et passent la majeure partie de leur budget sur des techniques
2 : L’expérience de l’utilisateur sur le Web
41
publicitaires adaptées aux anciens médias mais qui ne fonctionnent pas sur un support interactif comme le Web. Toutefois, l’un des avantages du Web réside dans la prise de responsabilités : vous pouvez suivre les résultats des dépenses publicitaires pour les clics et la mesure dans laquelle les utilisateurs ayant cliqué deviennent acheteurs. De ce fait, même les directeurs ignorants du sujet vont graduellement affecter leur budget aux meilleures offres, le plus souvent la publicité ciblée.
Comment déterminer l’enchère optimale pour une publicité ciblée Nous précisons dans notre discussion sur la publicité ciblée qu’une société doit augmenter ses enchères pour les mots-clés à condition qu’elle gagne plus d’argent pour un nouveau visiteur que ce qu’elle paye pour chaque clic. Cette simplification permet d’expliquer facilement un argument compliqué. Aujourd’hui, vous devez optimiser vos profits, et pas simplement faire un maximum de transactions. Imaginons par exemple que votre site Web fasse un profit moyen de 2 euros pour chaque nouveau visiteur qui arrive après avoir cliqué sur un mot-clé donné. Imaginons aussi que vous ayez un taux de conversion de 1 %, de sorte que le profit de 2 euros par visiteur soit tiré d’un profit de 200 euros par acheteur, puisque seul un nouveau visiteur sur cent deviendra un client. L’expérience a montré que vous obtiendrez le trafic suivant pour chacune des trois offres publicitaires possibles, pour un mot-clé fortement ciblé sur votre produit : ■
Enchérir 1 euro place votre publicité en troisième position et génère 500 visiteurs par mois.
■
Enchérir 1,50 euros place votre publicité en deuxième position et génère 1500 visiteurs par mois.
■
Enchérir 1,90 euros place votre publicité en première position et génère 2000 visiteurs par mois.
42
Combien faut-il enchérir ? Vous pourriez bien sûr vous permettre de proposer 1,90 euros car vous gagneriez 10 centimes par visiteur, pour un profit de 200 euros par mois. Enchérir 1 euro permettrait d’obtenir 1 euro de profit par utilisateur, soit un profit mensuel total de 500 euros pour les 500 utilisateurs attirés par une publicité en troisième place. Enfin, enchérir 1,50 euros rapportera un profit mensuel de 750 euros. C’est à l’évidence le choix à faire, car offrant la plus forte marge de bénéfice. Dans cet exemple, mieux vaut se priver des 500 utilisateurs supplémentaires qui seraient attirés par la publicité en première place mais ne cliqueraient pas sur une publicité en deuxième place. Ces utilisateurs ne valent tout simplement pas la dépense. Ceux qui cliquent sur des publicités en position inférieure sont souvent plus avantageux que ceux qui cliquent sur la première publicité car ils sont plus actifs pour obtenir une solution à leurs problèmes. Bien entendu, vous devez rassembler des informations détaillées sur vos clients à partir de votre site. En général, cependant, la principale instruction est simple : plus le nouveau visiteur est intéressant, plus vous devez enchérir pour l’attirer sur votre site.
Site Web : priorité à la simplicité
Pourquoi améliorer l’utilisabilité ? Une société peut doubler le « taux de conversion » (le fait de conclure une vente ou d’obtenir une demande d’informations produit par un nouvel utilisateur) de son site Web grâce à un bon projet d’utilisabilité. Nous avons découvert dans une étude portant sur 42 projets de reconception que ce taux a augmenté de 135 % après une amélioration de l’utilisabilité.
De plus en plus de sociétés découvrent les forts retours sur investissement de la publicité ciblée, ce qui va faire monter les prix. Bien entendu, les moteurs de recherche pourraient placer plus de publicités sur chaque page, mais cela se ferait au détriment de leur efficacité. Ce que les moteurs mettent véritablement aux enchères, c’est l’attention des utilisateurs motivés et tant que la motivation reste la même, il y a une limite à la subdivision d’une page si l’on veut conserver la rentabilité. Il est difficile d’estimer le moment où toutes les sociétés comprendront pleinement les bénéfices de la publicité ciblée, mais ce pourrait être aux environs de 2010. Lorsque cela arrivera, le prix des mots-clés augmentera encore du fait des améliorations des sites Web concernés. Comme indiqué, chaque société ne doit pas enchérir plus que ce qu’elle considère être un retour sur investissement positif. Imaginons qu’une société génère un profit moyen de 2 euros pour chaque nouveau client. Elle pourrait enchérir jusqu’à 1,99 euros pour un clic, pour des profits marginaux de 1 centime par nouvel utilisateur. Enchérir 2,01 euros serait trop et entraînerait des pertes. Supposons maintenant que cette société ait réalisé un travail suffisant sur l’utilisabilité pour doubler le taux de conversion des nouveaux visiteurs, un résultat tout à fait probable. La société gagne maintenant une moyenne de 4 euros par nouveau visiteur, elle peut donc proposer jusqu’à 3,99 euros pour chaque clic. Améliorer l’utilisabilité et doubler le taux de conversion double l’enchère que la société peut se permettre de payer au moteur de recherche. Bien entendu, cette société espère ne pas avoir à augmenter ses enchères d’autant. Il serait préférable de conserver une partie des profits tirés des améliorations de l’utilisabilité au lieu de les remettre à un moteur de recherche. A court terme, la société peut en effet conserver une partie de ses profits car son site est supérieur à celui de la concurrence. Tant que ses concurrents n’ont pas augmenté la valeur tirée de leurs visiteurs, ils ne pourront pas s’offrir des enchères supérieures. Mais tôt ou tard, ils réaliseront leurs propres projets d’utilisabilité et amélioreront leurs profits, ce qui
2 : L’expérience de l’utilisateur sur le Web
43
leur permettra d’augmenter ces enchères. Dès lors que huit concurrents auront doublé leurs enchères, la société devra à nouveau doubler son offre. Et puisque même un profit de 1 % est mieux que pas de profit du tout, les sociétés rationnelles augmenteront leurs offres en conséquence. A long terme, les prix des mots-clés auront tendance à augmenter à peu près au même rythme que les taux de conversion des sites Web. Puisque le taux de conversion est une mesure clé de l’utilisabilité, les enchères publicitaires continueront à traduire l’amélioration des sites Web. A mesure que les sites Web vont s’améliorer, les moteurs de recherche confisqueront presque tous les profits obtenus de la meilleure utilisabilité. Autrement dit, les moteurs de recherche n’ont rien d’autre à faire que de regarder leurs revenus augmenter à mesure que les principaux sites Web effectueront tout le travail d’amélioration. Est-ce équitable ? Non. Mais la réalité est que les moteurs de recherche attirent une grande partie du trafic qu’un site peut espérer.
Trois raisons d’améliorer votre site Pourquoi un site Web doit-il se préoccuper d’utilisabilité si la majeure partie des avantages en revient aux moteurs de recherche ? Il y a à cela trois raisons : ■
Si vous ne les améliorez pas, vos enchères de mots-clés ne seront plus suffisantes et le trafic dérivé de la recherche sera réduit à néant.
■
Si vous vous améliorez, vous disposerez d’une fenêtre d’opportunités lorsque vous dépasserez la concurrence et vous n’aurez pas à porter vos enchères au maximum. Pendant ce temps, vous profiterez des fruits de votre labeur en espérant que vos concurrents ne lisent pas cet ouvrage et ne réagiront que plus tard.
44
■
Enfin, vous conserverez l’augmentation des profits tirés des clients arrivant par d’autres moyens. Même si les publicités de recherche constituent une très bonne manière d’augmenter le trafic, ce n’est pas la seule. Les liens des autres sites, le bouche à oreille, la publicité hors Internet et de nombreuses autres techniques peuvent également générer du trafic. De même, la plupart des moteurs de recherche offrent également ce que l’on appelle des « résultats organiques », des listes gratuites où s’affiche votre site lorsqu’il a une correspondance naturelle avec la requête de l’utilisateur, même si vous n’utilisez pas de publicité.
Site Web : priorité à la simplicité
Astuce : design sans défilement La plupart des utilisateurs ne font pas ou peu défiler les écrans. Ceux qui ont fait défiler ont consulté à peu près 1,3 écrans d’informations en moyenne, ils ont donc vu un total de 2,3 écrans, le premier compris. Toute page située au-delà des 2,3 écrans risque d’être ignorée, même par les quelques utilisateurs qui sont suffisamment intéressés pour faire défiler.
Défilement Les utilisateurs sont paresseux et ignorants. C’est une conclusion que nous pouvons tirer du fait qu’ils se préoccupent rarement d’utiliser la molette de leur souris. Autre conclusion, peut-être plus appropriée : les utilisateurs sont tellement occupés et il y a tant d’informations sur le Web qu’il y a peu d’intérêt à entrer plus avant dans une page Web, à moins que les informations initialement visibles ne montrent clairement que la page a de la valeur. Malheureusement, puisque la plupart des pages ont peu de valeur, les utilisateurs évitent, à juste titre, de les faire défiler. Si vous concevez des pages Web, vous devez le savoir et présenter suffisamment d’informations sur la première page-écran pour qu’ils aient envie de faire défiler la page. Dans notre étude, 35 % des pages étaient si courtes qu’elles n’avaient pas besoin de défiler. Nous n’irons pas jusqu’à conseiller des pages ultracourtes même si elles résolvent à l’évidence le problème de l’aversion pour le défilement. Nos testeurs n’ont pas fait défiler plus de la moitié des 65 % de pages plus longues. Toutes les informations soigneusement conçues qui se trouvaient au-delà de la première page-écran pourraient aussi bien ne pas avoir existé pour la plupart d’entre eux. 100% 80% Pourcentages d’utilisateurs
Dans notre étude pour cet ouvrage, les utilisateurs ont visité 3992 pages plus longues que la fenêtre du navigateur. Ce graphique montre le nombre de pages-écrans d’informations que les utilisateurs ont consultées sur ces pages. A l’évidence, tous ont vu le premier écran (sans défilement). Mais la fréquence de consultation baisse rapidement après cela. Plus de la moitié des utilisateurs n’ont pas du tout fait défiler, seuls 42 % ont vu des informations sur la deuxième page-écran (celle venant après le premier défilement). Seuls 14 % ont été au-delà de deux pages-écrans. Les 1 % les plus entreprenantsont vu plus de sept pagesécrans d’informations (ce qui ne signifie pas qu’ils les ont lues, mais juste qu’ils ont fait défiler jusque-là).
60% 40% 20% 0% 1
2
3
4
5
6
7
8
Pages-écrans consultées
2 : L’expérience de l’utilisateur sur le Web
45
Ce sont les utilisateurs avec le plus d’expérience du Web qui ont le plus fait défiler. Ceux présentant peu d’expérience n’ont fait défiler que 38 % des pages longues, tandis que les utilisateurs expérimentés ont fait défiler 46 % de ces pages. Il y a deux explications possibles à cela : tout d’abord, les utilisateurs expérimentés savent plus souvent que les sites Web mal conçus cachent parfois des informations importantes plus loin sur la page, deuxièmement ils sont plus rapides à extraire les informations pertinentes lorsqu’ils analysent des pages Web et sont donc plus susceptibles de prendre du temps pour le faire.
www.apple.com Voici la page iPod dont nous avons parlé précédemment dans ce chapitre telle qu’elle apparaît pour un utilisateur dont le moniteur est réglé sur 1024 × 768, la taille d’écran la plus fréquente à l’époque de la capture. Quasiment aucune information n’est visible si l’on ne fait pas défiler la page mais, au moins, les faits les plus importants sont affichés : ce qu’est le produit et son aspect. Il est très probable que les fans d’Apple soient suffisamment captivés pour faire défiler une fois que ces deux faits les ont convaincus d’être sur la bonne page. Les autres sites doivent être moins arrogants.
46
Site Web : priorité à la simplicité
Défilement par type de page Type de page
Utilisateurs ayant fait défiler
Page d’accueil, première visite
23 %
Page d’accueil, quatrième visite et plus
14 %
Pages intérieures
42 %
Pages de résultats des moteurs de recherche
47 %
Le pourcentage d’utilisateurs ayant fait défiler les différentes sortes de pages Web dans ce tableau a été calculé en fonction uniquement des pages ayant nécessité un défilement pour être vues dans leur intégralité sur un écran de 1024 par 768 pixels. Les SERP sont celles qui ont fait l’objet du plus de défilement, au contraire des pages d’accueil. Sachez que même les utilisateurs ayant fait défiler ne l’ont peut-être pas fait assez pour voir toute la page.
Respect des conventions de conception et des instructions d’utilisabilité Tout le concept de la « conception Web » est une équivoque. Chaque équipe projet ne conçoit pas plus le Web que chaque fourmi ne construit une fourmilière. Les concepteurs de sites construisent des composants d’un ensemble, en particulier maintenant que les utilisateurs considèrent le Web comme une ressource unique et globale. Malheureusement, une grande partie du Web ressemble à une fourmilière construite par des fourmis sous LSD. De nombreux sites ne respectent pas le cadre global et sont trop difficiles à utiliser parce que divergents par rapport aux normes.
Définition des normes et des conventions ■
■
Standard : 80 % ou plus des sites Web utilisent la même approche de conception. Les utilisateurs s’attendent à ce que des éléments standard fonctionnent d’une certaine manière lorsqu’ils visitent un nouveau site car c’est la norme. Convention : de 50 à 79 % des sites Web utilisent la même approche de conception. Les utilisateurs s’attendent à ce que les éléments conventionnels
fonctionnent d’une certaine manière lorsqu’ils visitent un nouveau site car c’est ainsi la plupart du temps. ■
Confusion : dans ce système, aucune approche de conception ne domine et même l’approche la plus populaire n’est utilisée que par moins de la moitié des sites Web. Dans ce cas, les utilisateurs ne savent pas à quoi s’attendre lorsqu’ils se rendent sur un nouveau site.
2 : L’expérience de l’utilisateur sur le Web
47
Sept raisons pour opter pour des éléments de conception standard Les standards s’assurent que les utilisateurs : ■
savent quelles fonctionnalités attendre ;
■
savent comment ces fonctionnalités apparaissent dans l’interface ;
■
savent où trouver ces fonctionnalités sur le site et sur la page ;
■
savent comment actionner chaque fonctionnalité pour parvenir à leurs objectifs ;
■
■
■
n’ont pas besoin de s’interroger sur la signification d’éléments de conception inconnus ; ne manquent pas les fonctionnalités importantes du fait d’un élément de conception non standard ; n’ont pas de surprise désagréable lorsque quelque chose ne fonctionne pas comme prévu.
Nous devons éliminer les éléments de design déroutants et avancer le plus possible vers des conventions. Mieux encore, nous devons établir des standards pour chaque tâche importante sur un site Web. Les standards améliorent le sens de la maîtrise pour les utilisateurs d’un site, ils les aident à accomplir des actions et à augmenter la satisfaction générale. Même si vous ne croyez pas aux arguments théoriques en faveur des standards d’interface utilisateur, les preuves empiriques vont largement dans le sens du respect des conventions de conception existantes et des instructions d’utilisabilité. Dans ce chapitre, nous avons vu que souvent les utilisateurs : 1. se rendent dans un moteur de recherche et tapent deux ou trois mots ; 2. regardent les premiers résultats de la SERP ; 3. visitent certains des sites mais les quittent après moins de deux minutes s’ils ne leur semblent pas suffisamment utiles ; 4. consultent la plupart des pages du site pendant moins d’une demi-minute. Avec si peu de temps pour communiquer les avantages de votre produit à de possibles clients, vous devez éliminer tout ce qui peut vous gêner. Si un utilisateur passe 27 secondes à étudier la page d’un produit, il ne doit pas passer la majeure partie de ce temps à s’interroger sur le style de navigation ou sur d’autres éléments de l’interface utilisateur. Si la conception respecte les conventions, l’internaute reportera toute son attention sur le contenu. Il existe bien sûr des cas où vous pouvez diverger de ces instructions. On les appelle des « directives », elles sont là pour diriger mais il est possible de s’en éloigner. Prenez l’exemple de Victoria’s Secret. Le site de commerce électronique de la célèbre marque de mode et de lingerie compte parmi les plus fructueux du Web. La nature de ses produits et son positionnement lui permettent d’appliquer des concepts qui seraient une erreur pour quasiment n’importe quelle autre société. Il attire d’ailleurs de grands nombres de visiteurs à chaque fois qu’il diffuse une production vidéo d’une heure. La plupart des sites Web devront se contenter de clips bien plus courts.
48
Site Web : priorité à la simplicité
Et pourtant, même les sites qui violent quelques directives ne réussiront qu’en se conformant à la majorité d’entre elles. Certains sont tellement particuliers qu’ils peuvent s’affranchir de la plupart des directives, mais ce sont des exceptions.
www.victoriassecret.com Chaque année, Victoria’s Secret produit un spectacle de mode diffusé à la télévision et disponible en flux vidéo sur son site Web. Cette vidéo est généralement l’une des plus téléchargées d’Internet et des clips qui en sont extraits sont disponibles sur de nombreux autres sites. Une heure complète de vidéo, voilà qui dépasse de loin notre recommandation : ne pas dépasser 1 à 2 minutes. Sauf si présentez des tops modèles en lingerie, mieux vaut vous conformer aux instructions et produire des vidéos courtes au lieu de recycler des productions télévisées.
2 : L’expérience de l’utilisateur sur le Web
49
www.victoriassecret.com
Victoria’s Secret enfreint peut-être l’instruction de la vidéo mais ses pages de commerce électronique se conforment aux conseils de cet ouvrage. Sur cette page, il faudrait toutefois un bouton d’achat près du produit principal et il serait encore mieux que le top modèle de la photo porte les chaussures que le site propose sur la page. Cette disparité montre que les sites de commerce électronique doivent prendre leurs propres photos plutôt que de réutiliser les images d’un catalogue papier.
50
Site Web : priorité à la simplicité
www.victoriassecret.com
Victoria’s Secret continue à se conformer aux instructions d’utilisabilité pour son panier d’achat. Les instructions standard sont respectées, on indique par exemple si un produit est en stock (même si cela doit aussi figurer sur la page des produits), un lien simple est proposé pour vérifier les frais de livraison et de gestion et il est possible de commander sans s’inscrire. Malgré l’accent mis sur le côté glamour, le magasin est facile à utiliser, il figure donc parmi les vingt-cinq meilleurs sites de commerce électronique au monde.
2 : L’expérience de l’utilisateur sur le Web
51
Une lecture recommandée Si notre brève explication du butinage vous a aiguisé l’appétit, vous pourrez parcourir l’ouvrage de Peter Pirolli, Information Foraging: A Theory of Adaptative interaction with Information (Oxford University Press, 2006). Attention, cet ouvrage est très théorique et nécessite quelques aptitudes pour les mathématiques et la psychologie cognitive. Mais si vous êtes capable de digérer de la science pure, vous serez amplement récompensé par de bonnes analyses des principes sousjacents au comportement des utilisateurs, lequel détermine les sites Web à succès.
Butinage d’informations Le « butinage » est le concept le plus important qui émerge de l’interaction homme-machine depuis 1993. Développé au centre de recherches de Palo Alto (anciennement Xerox PARC) par Stuart Card, Peter Pirolli et leurs collègues, cette notion fait appel à une analogie avec les animaux collectant leur nourriture, pour montrer comment les humains récoltent des informations en ligne. Les utilisateurs du Web se comportent-il comme des animaux dans la jungle ? Beaucoup d’observations vont en ce sens. En effet, les animaux prennent des décisions quant à l’endroit, au moment et à la manière de manger sur la base d’une formule hautement optimisée, développée au fil des générations. Ces comportements rejettent les actions synonymes de famine. Les humains ont une pression moins importante pour améliorer leur utilisation du Web mais la paresse de base est une caractéristique humaine qui pourrait bien être liée à la survie. Dans tous les cas, les utilisateurs aiment profiter au maximum en contrepartie d’un effort minimum. C’est ce qui fait du butinage un outil utile pour analyser les supports en ligne.
La trace des informations, un bon indice du succès Le concept le plus célèbre du butinage est « la trace que laissent les informations » : au figuré, les utilisateurs évaluent leurs chances de rapporter une proie à partir des traces, qui indiquent si leur chemin contient des indices les menant vers leurs objectifs. Les informativores continuent à cliquer lorsqu’ils sentent qu’ils « brûlent », mais la trace doit s’intensifier sans cesse sinon ils abandonnent. Leur progression doit leur sembler suffisamment rapide pour les récompenser de leurs efforts.
Régimes alimentaires : les sites à visiter Un renard vit dans une forêt où habitent de gros et de petits lapins. Lesquels doit-il manger ? C’est une question de régime alimentaire et la réponse n’est pas toujours « les gros lapins ». Savoir s’il doit manger de gros ou de petits animaux dépend de la facilité qui existe à les attraper. Si les gros lapins sont très difficiles à attraper, le renard les laissera partir et se concentrera sur les petits ; la probabilité d’une prise est trop faible pour justifier l’énergie consommée par la chasse. 52
Site Web : priorité à la simplicité
Trois manières d’améliorer la trace des informations 1. Vérifiez que les liens et les descriptions de catégorie décrivent explicitement ce que les utilisateurs trouveront au bout du chemin. Face à plusieurs options de navigation, il vaut mieux qu’ils puissent clairement identifier le chemin vers leur proie et voir que les autres sont exempts de biens comestibles. 2. N’utilisez pas de mots inventés ni vos propres slogans pour la navigation, car ils n’ont pas l’odeur de l’élément recherché (des mots simples fonctionnent également mieux pour la visibilité dans les moteurs de recherche). 3. Rappelez aux utilisateurs qu’ils sont toujours sur la bonne voie lorsqu’ils avancent dans le site. Autrement dit, donnez des indications sur leur emplacement et en quoi il est lié à leur tâche.
La grosse différence entre les sites Web et les lapins est que les sites Web veulent être attrapés, les gros autant que les petits. Comment faire alors pour concevoir un site qui attirera les prédateurs affamés ? Les deux principales stratégies consistent à déguiser votre contenu en un repas nutritif et signaler qu’il est facile à attraper. Ces stratégies doivent être combinées : les utilisateurs quitteront le site si le contenu est bon mais difficile à trouver ou s’il est facile à trouver mais pas assez nourrissant. Cette double stratégie est la raison pour laquelle l’ouvrage de Jacob Nielsen et de Marie Tahir, Homepage Usability: 50 Websites Deconstructed (New Riders Publishing, 2002) recommandait de présenter un exemple sur la page d’accueil (paraître appétissant) et d’afficher de manière voyante la navigation et les fonctions de recherche (être une proie facile). Le choix du régime alimentaire va de pair avec notre conseil traditionnel : éviter les écrans voyants et les contenus vides. Ces éléments indiquent aux utilisateurs qu’ils vont assister à un supplice assommant qui ne satisfera que les rongeurs faméliques.
Abandonner le terrain de chasse : à quel moment aller chasser ailleurs Les pâturages présentent souvent plusieurs zones différentes où le gibier se rassemble. Où les prédateurs doivent-ils donc chasser ? Dans le terrain de chasse qui a le plus de proies, bien entendu. Et une fois que les prédateurs ont mangé une partie du gibier, doivent-ils continuer à chasser dans le même terrain ou passer à un autre ? La réponse dépend de l’éloignement du terrain suivant. S’il est facile de se rendre au terrain suivant, les prédateurs auront tout intérêt à avancer. Inutile de prélever tout le gibier sur le terrain actuel ; lorsqu’il sera un peu plus difficile de trouver la prochaine proie, ils pourront se rendre dans des terrains de chasse plus riches. En revanche, s’il est difficile de se déplacer, par exemple s’ils doivent traverser une rivière, les prédateurs auront mieux fait de chasser de manière plus extensive sur chaque terrain avant de se rendre au suivant. Pour les informativores, chaque site est un terrain de chasse et chaque information est une proie. Se déplacer entre des sites a toujours été facile mais pour butiner, il valait mieux
2 : L’expérience de l’utilisateur sur le Web
53
Toute une théorie a été consacrée à l’idée de « sites aimantés » et de visites prolongées. L’amélioration des moteurs de recherche a permis d’inverser cette équation.
que les utilisateurs restent concentrés. La grande majorité des sites étaient horribles et il était très peu probable que le site suivant soit mieux. Nous conseillions auparavant aux concepteurs de sites Web de suivre deux stratégies : convaincre les utilisateurs que le site mérite leur attention (en disposant de bonnes informations et en les rendant faciles à trouver) et faciliter la découverte d’éléments encore plus intéressants pour retenir les internautes. Une théorie entière a été consacrée à l’idée de « sites aimantés » et de visites prolongées. Ces dernières années, des moteurs de recherche nettement plus performants ont inversé cette équation en mettant l’accent sur la qualité du tri des résultats de recherche. Il est maintenant extrêmement facile aux utilisateurs de trouver d’autres bons sites. Le butinage dit que plus il est facile de trouver de bons terrains de chasse, plus les utilisateurs quitteront rapidement un terrain. Ainsi, lorsque les moteurs de recherche mettent en avant des sites de qualité, les utilisateurs passent moins de temps sur un site donné. Cette réduction théorique a été amplement confirmée par les données empiriques recueillies pour cet ouvrage : les testeurs ont quitté les sites qu’ils trouvaient inutiles en moins de deux minutes.
De nouvelles stratégies de conception pour attirer les butineurs ■
Favorisez les visites courtes, transformez-vous en en-cas.
■
Encouragez les utilisateurs à revenir ; utilisez des stratégies comme les lettres d’information pour vous rappeler au bon souvenir des utilisateurs.
■
Mettez l’accent sur la visibilité dans les moteurs de recherche et autres méthodes pour augmenter les visites fréquentes en répondant aux besoins immédiats des utilisateurs.
54
L’augmentation des connexions haut débit illimitées encourage également cette tendance à des visites plus courtes. La connexion bas débit était quelque peu laborieuse et les utilisateurs naviguaient principalement pendant des périodes prolongées. Au contraire, les connexions illimitées encouragent le « grignotage d’informations » : des recherches brèves en ligne pour obtenir des réponses rapides. L’avantage de cette tendance est que les utilisateurs rendront plus souvent visite aux sites et vous trouveront donc plus souvent, en quittant les autres sites plus rapidement. Une meilleure navigation sur le site et de meilleurs plans de sites peuvent faire légèrement pencher la balance en faveur de visites plus longues mais il vaut mieux supposer que les utilisateurs resteront de moins en moins sur un site en particulier. Cette prévision est soutenue par nos données empiriques montrant que les utilisateurs plus expérimentés passent moins de temps sur les pages que les utilisateurs moins expérimentés.
Site Web : priorité à la simplicité
En savoir plus Pour en savoir plus sur le retour sur investissements de notre étude sur l’utilisabilité, rendez-vous sur le site www.nngroup.com/reports et cliquez sur « Return on
Comportement de navigation informativore Le butinage présente de nombreuses métaphores intéressantes et de nombreux modèles mathématiques pertinents pour analyser le comportement des utilisateurs. Le plus important est celui de l’analyse de rentabilité. Les utilisateurs font des compromis en se basant sur ces deux questions : ■
Quel gain puis-je attendre d’une information spécifique (comme une page Web) ?
■
Quel est le coût probable pour découvrir et consommer cette information ?
Les deux questions impliquent des estimations faites par l’utilisateur à partir de son expérience ou des indices trouvés dans le design du site. Les concepteurs de sites peuvent ainsi influencer ces décisions grâce à des conceptions qui améliorent leurs espoirs de gains et réduisent leurs estimations de coût. Enfin, bien entendu, c’est le contenu du site qui est le plus important, mais il ne pourra avoir de nombreux utilisateurs si la première rencontre n’est pas fructueuse. Les utilisateurs optimisent la rentabilité par rapport à des critères personnels et dans un système plus grand que le seul site Web. Souvenez-vous qu’ils sont égoïstes, paresseux et rudes lorsqu’ils appliquent leurs propres analyses de rentabilité.
2 : L’expérience de l’utilisateur sur le Web
55
60
Huit problèmes qui n’ont pas changé
84
• Les liens qui ne changent pas de couleur lorsqu’ils ont été visités
• Les temps de téléchargement
• Mauvais fonctionnement du bouton Précédent
• Contenu vaporeux et réputation surfaite • Contenu dense et texte illisible
• Plug-in et technologies de pointe
• Résultats de recherche peu pertinents
• Interface utilisateur 3D
• Mises en page figées
• Fenêtres contextuelles 96
104 Auto-discipline : comment les concepteurs ont allégé les problèmes d’utilisabilité
• Les cadres
• Multimédia et vidéos volumineux
• Ouverture de nouvelles fenêtres de navigateur
• Enfreindre les conventions du Web
Evolution technologique et utilisabilité
Adaptation : comment les utilisateurs ont influencé l’utilisabilité • Incertitude sur la possibilité de cliquer sur un élément • Liens de couleur autre que le bleu • Défilement • Inscription
• Design encombré • Pages de garde • Graphiques mobiles et texte défilant • Design d’interface utilisateur personnalisés • Ne pas indiquer l’auteur des informations • Néologismes • Contenu obsolète • Incohérences dans un site Web
• URL complexes
• Demandes prématurées d’informations personnelles
• Menus déroulants et menus en cascade
• Sites multiples • Pages orphelines 119 Evolution des premières conclusions
3
Révision des premières conclusions sur l’utilisabilité Le Web a considérablement changé depuis que nous avons identifié les premiers problèmes d’utilisabilité en 1994. Nos premières instructions des années 1990 résistent-elles à l’évolution de la technologie et de la conception Web ? Les changements du niveau de compétence des utilisateurs, de la sophistication du Web ou des attentes ont-ils un impact ? Ce chapitre revisite 34 des principaux problèmes d’utilisabilité, pour savoir s’ils se sont améliorés, s’ils ne sont plus pertinents ou s’ils demeurent aussi importants.
Huit de nos instructions initiales sont toujours aussi importantes aujourd’hui. Certaines mauvaises pratiques posent encore plus problème car les utilisateurs y sont plus sensibles du fait des abus.
Nous avons mené nos premières études utilisateur sur les sites Web et les intranets en 1994. La première, qui ne testait que cinq sites et trois utilisateurs, a identifié un certain nombre de problèmes d’utilisabilité. Par exemple, il était évident que les utilisateurs ne voulaient pas lire beaucoup, qu’ils détestaient les longues pages contenant du texte dense et non structuré et qu’ils préféraient un contenu facile à parcourir. En 1997, nous avons mené une étude plus approfondie sur la lecture en ligne. Elle a confirmé nos premières découvertes et mené à une analyse affinée des problèmes de conception et à des instructions plus détaillées pour les éviter. Cette recherche est confirmée dans un autre projet de 2004, donnant lieu à des instructions encore plus détaillées en matière de rédaction pour le Web. Dans ce chapitre, nous revisitons 34 des principaux problèmes d’utilisabilité et nos instructions pour les contrecarrer, développées lors de notre première période de recherche utilisateur, de 1994 à 1999. Nous verrons d’abord huit problèmes qui continuent à véritablement poser problème pour la conception du Web ; nous traiterons ensuite de ceux qui sont devenus moins importants au fil du temps. Nous avons affecté à chacun des 34 problèmes une note d’importance, pouvant aller jusqu’à trois symboles «Tête de mort » lorsqu’ils sont restés très présents. Le schéma de notation est le suivant :
58
ccc
Demeure un problème d’utilisabilité à fort impact. Il est très important que les concepteurs continuent à prêter attention à ce problème et que les évaluations les vérifient méticuleusement.
cc
Est devenu un problème d’utilisabilité d’impact moyen. Les concepteurs doivent toujours éviter de commettre cette erreur, mais ce n’est plus une priorité essentielle.
c
Aujourd’hui un problème mineur. Les concepteurs doivent se souvenir de nos instructions et essayer d’éviter cette erreur de conception mais cela amène rarement des sites Web à l’échec.
0 tête de mort
Ce n’est plus un problème et cet aspect ne doit pas être vérifié systématiquement dans les évaluations d’interface.
Site Web : priorité à la simplicité
Il existe trois raisons pour lesquelles la gravité d’un problème d’utilisabilité peut avoir diminué et nous traiterons chacun d’entre elles : ■
La technologie s’est améliorée. Lorsque l’on pense à l’état primitif du Web dans les années 1990, on comprend que plusieurs approches entraînaient des problèmes d’utilisabilité considérables, même lorsque ce n’était pas en soi de mauvaises conceptions. L’amélioration de la technologie a allégé certaines des difficultés passées.
■
Les utilisateurs s’adaptent aux designs des sites Web. Les conceptions déroutantes créent de nombreux problèmes d’utilisabilité. Lorsque l’on s’habitue à certaines approches, on n’est plus dérouté et ces problèmes deviennent moins importants.
■
Les concepteurs s’interdisent les abus les plus terribles. Dans la mesure où les concepteurs ont montré une meilleure compréhension des problèmes particuliers et se sont interdits d’utiliser des approches qui augmentent les problèmes potentiels, nous considérons cet élément comme moins important et nous n’avons pas besoin de le signaler spécifiquement.
En construction Malheureusement, nous ne pouvons pas revisiter ici un grand nombre de nos conclusions mineures. Nous déconseillions par exemple en 1994 d’apposer la mention « en construction » sur les sites Web. Les utilisateurs se disaient : « soit vous l’avez, soit vous ne l’avez pas » et ne voulaient pas être tentés par des liens pointant vers des documents qui n’étaient pas encore disponibles. Notre principale instruction est d’éviter les panneaux « en construction » et de ne pas faire de publicité pour des fonctionnalités tant que vous ne les avez pas. Si cela n’est pas possible, proposez au moins une estimation du délai d’attente. Mieux encore, s’il s’agit de produits que vous allez vendre,
proposez aux utilisateurs de recevoir un e-mail annonçant la mise en ligne de la page. Même si les panneaux « en construction » ne sont plus aussi courants qu’ils l’étaient dans les années 1990, nous en rencontrons toujours de temps à autre. Dans un projet de consulting récent pour l’intranet d’une grande société, nous avons suivi un lien vers une fonction utile pour atterrir sur une page indiquant « bientôt disponible ». Notre première conclusion reste donc vraie, les utilisateurs n’aiment toujours pas cliquer dans le vide, mais nous ne le soulignons plus beaucoup car ces panneaux sont devenus très rares.
3 : Révision des premières conclusions sur l‘utilisabilité
59
Huit problèmes qui n’ont pas changé Huit des problèmes initiaux d’utilisabilité sont toujours aussi importants aujourd’hui. Même si certaines de ces mauvaises pratiques de conception sont moins communes sur le Web, d’autres posent plus de problèmes car un abus constant a rendu les utilisateurs plus sensibles. Domaines qui posent toujours de réels problèmes : ■
les liens qui ne changent pas de couleur lorsqu’ils ont été visités ;
■
le mauvais fonctionnement du bouton Précédent ;
■
l’ouverture de nouvelles fenêtres dans le navigateur ;
■
les fenêtres contextuelles (pop-ups) ;
■
les éléments de design qui ressemblent à des publicités ;
■
les infractions aux conventions du Web ;
■
un contenu vaporeux et du battage inutile ;
■
un contenu dense et un texte illisible.
Les liens qui ne changent pas de couleur lorsqu’ils ont été visités ccc La plus ancienne instruction d’utilisabilité, quel que soit le type de navigation, est d’aider les utilisateurs à comprendre où ils ont été, où ils sont et où ils peuvent aller, leur passé, leur présent et leur futur en ligne. Ces trois éléments sont assez liés : une bonne idée de votre navigation vous aide à comprendre votre position actuelle. Connaître vos emplacements passés et présents facilite ensuite la décision à prendre pour savoir où aller. Sur le Web, les liens sont un facteur essentiel de ce processus de navigation. Les utilisateurs peuvent arrêter d’utiliser des liens qui n’ont pas été fructueux par le passé. A l’inverse, ils peuvent revisiter des liens qu’ils ont trouvés utiles. Et surtout, lorsque les utilisateurs savent où ils sont passés, ils sont moins susceptibles de les revisiter de manière non intentionnelle.
60
Site Web : priorité à la simplicité
Généralement, les navigateurs Web prennent très mal en charge la navigation utilisateur mais permettent de modifier la couleur d’un lien lorsqu’un utilisateur a déjà visité la page. Cette fonction existe depuis que Mosaic a été créé au National Center for Supercomputing Applications (NCSA) en 1993. Actuellement, 74 % des sites Web utilisent cette approche de conception, c’est donc une convention attendue. Sur les sites qui contreviennent à cette convention, il peut y avoir de sérieux problèmes d’utilisabilité. Les utilisateurs de notre test ont revisité des pages sans intention de le faire et se sont perdus plus fréquemment, ils ont mal interprété ou ont ignoré les différences entre des liens similaires s’ils n’étaient pas sûrs de celui qu’ils avaient déjà vus et ils ont abandonné le site plus rapidement. Ils ont ressenti un manque de maîtrise sur les sites qui ne traduisaient pas leur itinéraire et qui ne les aidaient pas à naviguer. Ces problèmes sont aggravés pour les utilisateurs ayant une mauvaise mémoire à court terme, qui souvent ne parviennent pas à se souvenir de ce sur quoi ils ont cliqué sans avoir de représentation visuelle. Tous les humains souffrent d’une mauvaise mémoire à court terme dans une certaine mesure, c’est pourquoi le changement de couleur des liens est si important. Et puisque l’impact est plus important sur certaines personnes que sur d’autres, il est particulièrement important de changer les couleurs des liens si votre public comprend, par exemple, de nombreux utilisateurs âgés, comme le montre notre recherche auprès des seniors. Ne pas modifier la couleur des liens crée une confusion de navigation car les utilisateurs ne comprennent pas leurs différents choix ni l’endroit où ils se trouvent. Ce problème, qui demeure aussi grave qu’auparavant, continue à mériter ses trois têtes de mort.
3 : Révision des premières conclusions sur l‘utilisabilité
61
Pourquoi les concepteurs ne nous croient pas Même ceux qui acceptent les autres instructions d’utilisabilité remettent parfois en cause le besoin de modifier la couleur des liens. Ceci est probablement dû au fait qu’ils ne réalisent pas les désagréments causés lorsqu’ils mènent leurs propres tests utilisateur. Ce problème peut être parmi les plus difficiles à détecter.
Certains problèmes d’utilisabilité exigent un travail de détective plus poussé et sont souvent ignorés par les personnes relativement novices dans le test utilisateur. C’est particulièrement vrai pour les problèmes qui naissent de plusieurs petits désagréments, aucun ne causant des difficultés par lui-même.
Le test utilisateur est simple : nous dispensons un cours, visant à enseigner à une équipe des méthodes de test valables en trois jours. La plupart des gros problèmes d’utilisabilité sont si évidents qu’ils peu-
Le problème des couleurs de lien qui ne changent pas est très difficile à identifier lors du test utilisateur. Sur une page donnée, les utilisateurs semblent très bien comprendre le lien. Ils ne se
vent être identifiés par un simple test. Une fois que vous savez écrire des tâches adaptées et que vous dirigez une session sans influencer le comportement des utilisateurs, vous distinguez clairement les problèmes rencontrés du fait des parties mal conçues de votre site.
plaignent presque jamais des couleurs des liens à condition qu’elles se distinguent du reste du texte. Tout va bien dans le meilleur des mondes ou presque. Observez toutefois soigneusement et vous remarquerez que les utilisateurs font des cercles. Ils visiteront la même page plusieurs fois, non pas parce qu’ils le veulent mais parce qu’ils ne réalisent pas qu’ils s’y sont déjà rendus. Ou encore, ils ignoreront des liens pointant vers des pages qu’ils n’ont pas vues car ils ne réalisent pas qu’ils ne s’y sont pas rendus. Les utilisateurs abandonnent lorsqu’ils ont testé la plupart des liens d’une liste, même s’il y a encore un lien ou deux qu’ils n’ont pas essayés.
Imaginons par exemple qu’un utilisateur clique sur le mauvais bouton. Il est évident pour n’importe quel observateur que ceci signale une erreur de conception. Ecouter le commentaire de l’utilisateur avant de cliquer permet de savoir pourquoi il a mal compris l’interface, ce qui vous guide vers une solution. Même s’il est plus difficile de détecter le problème lorsque les utilisateurs ne font rien, la plupart des organisateurs de tests d’utilisabilité parviennent toujours à identifier de nombreux problèmes. Ils peuvent, par exemple, observer que personne n’a cliqué sur une fonction principale. Les commentaires dits à haute voix par les utilisateurs précisent s’ils ont vu la fonction mais ne l’ont pas trouvée pertinente ou s’ils n’ont jamais envisagé de l’utiliser car elle ressemblait trop à une publicité.
62
Les types de problèmes créés par une couleur de lien qui ne change pas pourraient aussi être le symptôme d’une architecture d’information désorganisée ou d’étiquettes mal écrites, il faut donc de l’expérience pour en identifier la véritable cause. Ces inconvénients peuvent être facilement oubliés lors du test mais ce sont de vrais problèmes pour les utilisateurs.
Site Web : priorité à la simplicité
L’exception : la fonctionnalité orientée commande La fonctionnalité orientée commande constitue l’exception à la règle. Montrer les zones visitées n’est pas nécessaire pour les applications dans lesquelles les personnes peuvent vouloir répéter des actions plusieurs fois. Pour décider s’il faut ou non indiquer les zones visitées, vous devez savoir si l’action emmène les personnes vers d’autres écrans ou leur permet simplement de répéter des activités sur le même écran. Si les utilisateurs se rendent vers d’autres zones, en particulier pour récupérer du contenu, ils n’auront peutêtre besoin que d’une seule visite, le lien doit donc montrer qu’il a été visité. Toutefois, si les personnes peuvent répéter une activité sur le même écran, inutile de le montrer.
Mauvais fonctionnement du bouton Précédent ccc Certaines choses dans la vie ne peuvent pas être défaites : par exemple, une fois que vous vendez les actions de votre PEA, elles disparaissent de votre portefeuille et vous ne pouvez pas les faire revenir si le prix remonte. Sur le Web, toutefois, les utilisateurs doivent être convaincus qu’ils peuvent annuler ou modifier leurs actions. Encourager les utilisateurs à explorer librement un site, sachant avec assurance qu’ils peuvent échapper à tout problème est l’un des principes les plus fondamentaux de l’interaction homme/machine.
Le bouton Précédent est la deuxième fonction la plus utilisée dans la navigation sur le Web. En supposant, bien sûr, qu’il fonctionne comme prévu.
Dans les logiciels, c’est la commande « Annuler » qui le permet. Si vous utilisez une application graphique, vous pouvez colorer les parties d’une image en rouge et voir. Si le résultat n’est pas bon, appelez Ctrl+Z à la rescousse et le résultat disparaît. Depuis le début des années 1980, une directive de conception demande à toutes les plates-formes logicielles d’installer la fonction d’annulation dans autant de programmes que possible. Le retour en arrière permet l’annulation dans la navigation hypertexte.Vous pouvez vous déplacer dans l’espace informatif autant que vous le souhaitez et ne jamais véritablement vous perdre car vous pouvez retracer votre chemin et revenir sur une base plus sûre. Dans les navigateurs Web, le retour en arrière est implémenté par le bouton Précédent.
3 : Révision des premières conclusions sur l‘utilisabilité
63
Les utilisateurs continuent simplement à cliquer sur ce bouton tant qu’ils ne sont pas revenus à l’endroit où ils souhaitent se trouver. Les utilisateurs experts peuvent aussi pointer sur le bouton Précédent pour afficher leur historique de navigation et revenir directement à un emplacement précédent. Dans les études statistiques, le bouton Précédent est généralement la deuxième fonction la plus utilisée de la navigation Web (après les liens vers de nouvelles pages). Dans le test utilisateur, nous voyons souvent des personnes cliquer à plusieurs reprises sur le bouton Précédent, même lorsqu’il existe un lien direct vers l’endroit d’où ils viennent. Au départ, ce comportement semble paradoxal car il faut alors cliquer plus et passer plus de temps pour revenir en arrière. Mais lorsque nous factorisons le temps de réflexion requis pour que les personnes trouvent les liens directs sur les différents sites, nous comprenons qu’ils préfèrent utiliser le bouton Précédent, souvent plus rapide. Le bouton Précédent présente deux avantages importants et un plus petit :
64
■
Il est toujours disponible, toujours au même endroit et il fonctionne toujours de la même manière, c’est-à-dire qu’il permet de revenir en arrière d’une étape chaque fois. Cette forte cohérence de l’interface utilisateur signifie que les personnes n’ont pas besoin de parcourir la page pour trouver un lien : elles savent tout de suite où aller. Les pages Web respectant rarement les standards de conception, les utilisateurs ne peuvent pas vraiment se fier au fait qu’ils trouveront des types spécifiques de liens au même endroit sur toutes les pages. Pire encore, certaines pages n’ont peut-être pas du tout le lien souhaité, il est donc inutile de parcourir la page à sa recherche.
■
En règle générale en matière d’interface utilisateur, il vaut mieux reconnaître un élément que de se le rappeler car il est plus simple et plus rapide de reconnaître quelque chose que de s’en souvenir et d’en conserver une description. Dans le cas des clics consécutifs sur le bouton Précédent, les utilisateurs doivent simplement regarder chaque page lorsqu’elle se charge (rapidement puisqu’elle sort du cache) et si ce n’est pas celle qu’ils veulent, ils cliquent à nouveau sur le bouton Précédent.
Site Web : priorité à la simplicité
Pour utiliser un lien de navigation direct, d’autre part, les utilisateurs doivent d’abord se souvenir de l’endroit où ils veulent revenir, puis parcourir la page actuelle pour voir si certains liens se rapprochent de l’idée qu’ils ont en tête. Cela fait beaucoup à penser et une probabilité substantielle d’échec, soit parce qu’il n’y a pas du tout de lien direct, soit parce que l’utilisateur a mal évalué le lien et se dirige vers une mauvaise destination. ■
Enfin, parce que le bouton Précédent est une cible visible, il est plus facile à utiliser que le lien de navigation standard. C’est un gros avantage pour les utilisateurs présentant des incapacités motrices. Cela n’est pas particulièrement important pour l’utilisateur moyen, qui gagne environ 0,3 seconde. Ce temps économisé en mouvements physiques est éclipsé par la baisse de la surcharge cognitive.
Le bouton Précédent est donc très important pour l’utilisateur. Peu importe ce qui se passe, il vous sauvera, en supposant, bien entendu, qu’il fonctionne comme il faut. Malheureusement, les sites Web peuvent employer plusieurs astuces de codage qui désactivent le bouton Précédent et gênent sérieusement les mouvements des utilisateurs.
Loi de Fitts sur les temps de clic La rapidité avec laquelle les gens cliquent sur les éléments à l’écran est déterminée par la loi de Fitts, qui précise que le temps nécessaire pour qu’un dispositif de pointage atteigne une cible est proportionnel au logarithme de la distance à la cible divisé par la taille de la cible. Plus une chose est éloignée, plus il faudra de temps pour cliquer dessus. Ceci est évident mais la loi ajoute que le temps n’augmente que du logarithme de la distance, ce qui signifie qu’il augmente assez lentement. Ceci est dû au fait que les personnes accélèrent leurs mouvements lorsqu’elles déplacent leurs pointeurs sur un élément éloigné. La loi de Fitts indique également que plus quelque chose est gros, moins il faut de temps pour cliquer dessus. Ceci est dû au fait que les utilisateurs n’ont pas besoin d’être très précis, cela leur prend donc
moins de temps. Et quand le bouton est imposant, le clic est rapide et facile. Cliquer sur de grosses cibles est une des raisons pour lesquelles nous recommandons d’insérer sur le logo un lien vers la page d’accueil. La loi de Fitts a été établie en 1954 par Paul M. Fitts, premier responsable de la division d’ingénierie humaine de l’US Air Force et professeur à l’université de l’Etat d’Ohio et de l’université du Michigan. Cette loi s’est vérifiée pour de nombreux dispositifs de pointage : souris, trackballs, manettes de jeu, pédales de pied, écrans tactiles, voire même suivi oculaire pour la sélection d’objets à l’écran. C’est un bon exemple de la longévité des conclusions sur l’utilisabilité, qui dépend généralement plus des caractéristiques humaines que des technologies spécifiques.
3 : Révision des premières conclusions sur l‘utilisabilité
65
La manière la plus insidieuse de désactiver le bouton Précédent consiste à le supprimer de la fenêtre du navigateur par le biais d’une instruction JavaScript. Même si elle a parfois une apparence frivole, la barre d’icônes comprend en fait plusieurs des fonctionnalités les plus utiles de la navigation sur le Web comme les boutons Précédent, Suivant, Imprimer, Actualiser et Modifier le corps. Une fenêtre de navigateur sans boutons irrite les utilisateurs. L’exception concerne certains types d’applications Internet affichées techniquement dans des fenêtres de navigateur mais qui n’impliquent pas de navigation hypertexte ni de visualisation de documents. Il vaut quelquefois mieux ôter les boutons, même si le document est présenté dans un navigateur. Cliquer sur un lien pour ouvrir une nouvelle fenêtre de navigateur désactive également le bouton Précédent car la nouvelle fenêtre n’hérite généralement pas de l’historique de la première. Ouvrir des fenêtres non sollicitées est une erreur, comme nous le voyons dans la section suivante, c’est donc une raison pour éviter cette technique. Enfin, le bouton Précédent peut être falsifié par l’utilisation des redirections intégrées dans une page Web au lieu d’être communiquées en coulisses par des redirections de serveur. Lorsqu’une page Web a été déplacée, il est généralement conseillé de laisser une redirection pour éviter les liens cassés. Mais cette redirection doit être implémentée sous forme de réponse HTTP 301 ou 302 par le serveur Web car ces codes indiquent au navigateur de passer immédiatement à la nouvelle URL et d’oublier l’ancienne. La différence entre les deux codes de statut est que 301 indique une page qui s’est déplacée de manière permanente tandis que 302 indique un déplacement temporaire. Malheureusement, certains sites Web implémentent la redirection en plaçant une instruction d’actualisation par métabalise sur l’ancienne page, ce qui entraîne son remplacement immédiat par la nouvelle. Lorsque les utilisateurs tentent de revenir à l’emplacement précédent, leur premier clic sur le bouton Précédent les emmène sur la page contenant le code de rafraîchissement. Bien entendu, le chargement de cette page renvoie immédiatement vers le nouvel emplacement. Mais c’est la page que l’utilisateur vient de quitter ! Chaque clic supplémentaire sur le bouton Précédent a le même effet, l’utilisateur est donc piégé sur cette nouvelle page.
66
Site Web : priorité à la simplicité
Dans le test utilisateur, nous observons une confusion considérable dès que le bouton Précédent n’est pas disponible ou ne fonctionne pas. Les utilisateurs expert sauront surmonter le problème mais la plupart se sentent tout simplement piégés. Supprimer le bouton Précédent continue à causer de gros problèmes d’utilisabilité et mérite toujours trois têtes de mort.
Ouverture de nouvelles fenêtres de navigateur ccc Les concepteurs nous disent souvent qu’ils ouvrent de nouvelles fenêtres pour ne pas perdre les visiteurs de leur site. C’est toutefois une cause perdue. Si les internautes veulent vraiment partir, ils le feront.
Lorsque les utilisateurs cliquent sur un lien ou sur un bouton, ils s’attendent généralement à ce qu’une nouvelle page apparaisse à la place de la dernière. Pour annuler cette action, ils cliquent sur le bouton Précédent, comme indiqué. Ne pas répondre à cette attente gêne leur navigation dans le cyberespace. Malheureusement, de nombreux concepteurs de sites insistent pour afficher les nouvelles informations dans une autre fenêtre de navigateur au lieu de réutiliser la fenêtre existante. Il s’agit parfois de petites fenêtres contextuelles, un phénomène suffisamment gênant pour que nous lui consacrions une section entière (voir « Fenêtres contextuelles » dans ce chapitre). A d’autres moments, la nouvelle page s’affiche dans une nouvelle fenêtre de navigateur en plein écran. Les concepteurs nous indiquent souvent qu’ils ouvrent de nouvelles fenêtres pour ne pas perdre les visiteurs de leur site. Les nouvelles fenêtres sont donc particulièrement communes pour des liens pointant vers des documents d’autres sites Web mais au final, c’est une cause perdue. Si les internautes veulent réellement vous quitter, ils le feront. Et s’ils suivent un lien vers un autre site et veulent revenir sur le vôtre, ils le feront invariablement en cliquant sur le bouton Précédent. La prolifération de fenêtres de navigateur présente bon nombre de problèmes d’utilisabilité. Le premier, c’est qu’elles polluent l’espace de travail de l’utilisateur, entraînant parfois un arrêt du système ou des erreurs de mémoire. Les utilisateurs n’ont plus qu’à fermer le trop-plein de fenêtres, en supposant qu’ils réussissent à les trouver dans la barre des tâches.
3 : Révision des premières conclusions sur l‘utilisabilité
67
Les navigateurs Web contiennent une fonctionnalité parfaitement adaptée qui permet de rouvrir un lien dans une nouvelle fenêtre : un clic droit sur le lien. On peut bien sûr supposer que cette fonction est réservée aux utilisateurs experts, mais les fenêtres multiples devraient de toute façon être réservées aux utilisateurs expérimentés. Dans le test, nous avons souvent remarqué des utilisateurs expérimentés qui ouvraient des fenêtres supplémentaires pour naviguer en parallèle sur plusieurs sites ou pour préserver l’ancien contexte tout en explorant une nouvelle direction. Conclusion : si les utilisateurs veulent des fenêtres supplémentaires, ils peuvent les demander. Puisque le bouton Précédent n’emmène les utilisateurs que jusqu’à la première page affichée dans une fenêtre, les utilisateurs experts peuvent se rendre compte qu’ils doivent fermer la nouvelle fenêtre gênante pour revenir à l’originale. Mais la plupart ne comprennent pas vraiment comment manipuler plusieurs fenêtres et se concentrent sur la fenêtre supérieure. S’ils ne peuvent pas revenir en arrière, ils se sentent piégés. Si la nouvelle fenêtre n’occupe pas tout l’écran ou n’obscurcit pas totalement la fenêtre initiale, les personnes y reviennent parfois en cliquant dans la partie toujours visible, bien souvent par inadvertance. Cliquer sur une autre fenêtre la fait revenir à l’avant et masque celle qui était précédemment par-dessus. C’est une manière très simple d’utiliser des fenêtres multiples mais même certains utilisateurs expérimentés n’arrivent pas toujours à suivre toutes les fenêtres à l’écran. Souvent, après qu’un utilisateur a ouvert une fenêtre séparée, il fait apparaître la fenêtre initiale de manière accidentelle ou délibérée, qui masque alors la nouvelle. Il peut ensuite cliquer sur un lien faisant apparaître des informations dans la nouvelle fenêtre mais, puisqu’elle est masquée, il ne les voit pas. Le concepteur a peut-être eu pour intention d’afficher plus lisiblement ces informations dans une nouvelle fenêtre mais l’utilisateur ne les voit pas. Le système d’exploitation Microsoft Windows répertorie les fenêtres actuellement ouvertes dans la barre des tâches, au bas de l’écran. Cette barre discrète est placée dans un endroit où l’on ne pense pas à regarder. Grâce au test utilisateur, nous savons que les internautes ignorent souvent la barre des tâches et donc la liste des fenêtres. 68
Site Web : priorité à la simplicité
La malédiction de l’agrandissement Les interfaces graphiques utilisateur actuelles disposent malheureusement d’un bouton Agrandir, généralement destiné à amener la fenêtre à couvrir tout l’écran. Or, cette fonction devrait simplement afficher la fenêtre à sa plus grande taille utile. Sur les petits écrans, « la plus grande taille utile » et « l’écran en entier » reviennent presque au même. Voir plus d’informations augmente généralement l’utilisabilité mais, à mesure que les écrans grandissent, la différence augmente entre la taille des écrans et la taille de la fenêtre. Même si le bouton Agrandir tente de nombreux utilisateurs, il ne les aide pas souvent. Par exemple, une fenêtre large de 1024 pixels créera des lignes trop longues dans les applications de texte, comme sur le Web. Les fenêtres agrandies compliquent
aussi la gestion des fenêtres multiples. En théorie, on est supposé travailler avec des fenêtres qui se chevauchent, chose impossible lorsque les fenêtres occupent tout l’écran. Les fenêtres agrandies font croire à l’utilisateur que l’ordinateur est un environnement en plein écran et non un environnement contenant plusieurs zones actives simultanément. Heureusement, les fenêtres agrandies disparaîtront à mesure que les écrans augmenteront en taille. Avec un écran de 2048 pixels, une fenêtre agrandie devient tellement large que nous devrons la redimensionner et travailler sur deux fenêtres ou plus à la fois. Les mosaïques risquent de regagner des lettres de noblesse et l’on pourra travailler simultanément avec deux ou quatre fenêtres.
www.latimes.com Les nouvelles fenêtres de navigateurs, comme celle du site du Los Angeles Times, gênent les utilisateurs qui ne comprennent pas le concept des fenêtres multiples. Si possible, maintenez votre site Web dans une même fenêtre de navigateur et vérifiez que le bouton Précédent fonctionne. Ouvrir de nouvelles fenêtres sur la fenêtre parente empêche de nombreux utilisateurs d’interagir avec le site. Nous avons d’ailleurs vu des personnes cliquer accidentellement en dehors de la fenêtre parent, avec pour conséquence de l’enfouir sous les autres, puis essayer de rouvrir la nouvelle fenêtre à partir de la fenêtre parente, en vain. Dans l’impossibilité de retrouver le chemin vers la nouvelle fenêtre, ils concluent que le site a un problème.
3 : Révision des premières conclusions sur l‘utilisabilité
69
Nous l’avons vu, l’ouverture de nouvelles fenêtres de navigateur présente les inconvénients suivants : ■ Elle interrompt la fluidité de la navigation. ■ Elle pollue l’écran avec des objets indésirables (entraînant parfois des blocages ou des erreurs de mémoire). ■ Elle empêche l’utilisateur de revenir aux pages déjà vues. ■ Elle encombre la fenêtre sur laquelle il travaillait initialement. ■ Elle fait croire que des liens sont inactifs car ils semblent ne pas avoir d’effets alors que les informations apparaissent dans une fenêtre masquée. Tous ces problèmes ne se sont pas améliorés et nous les revoyons test après test. L’ouverture de nouvelles fenêtres de navigateur mérite donc toujours nos compliments et trois têtes de mort.
L’exception : les documents aux formats PDF et similaires Dans les tests utilisateur, nous observons souvent que lorsque des personnes ont terminé d’utiliser des fichiers Adobe PDF, des documents Microsoft Word, des diapos PowerPoint, des feuilles de calcul Excel et documents similaires, ils cliquent sur la case Fermer de Windows au lieu de cliquer sur le bouton Précédent. Cela les fait sortir du document mais ils ne reviennent pas à la page Web d’origine. Fermer les fenêtres de navigateur est particulièrement mauvais sur les intranets où les utilisateurs doivent souvent s’identifier ou passer par d’autres étapes pour accéder aux banques de documents. Comme les utilisateurs ferment souvent les fenêtres de documents, procédez comme suit pour les fenêtres de documents hors Web : ■ Ouvrez les documents hors Web dans une nouvelle fenêtre de navigateur. ■ Avertissez les utilisateurs qu’une nouvelle fenêtre va s’ouvrir. ■ Retirez les barres de navigation (comme le bouton Précédent) de la nouvelle fenêtre. ■ Et surtout, empêchez le navigateur d’ouvrir directement le document. Proposez plutôt à l’utilisateur d’enregistrer le fichier sur son disque dur ou de l’ouvrir dans une application native (Adobe Reader pour PDF, PowerPoint
70
Site Web : priorité à la simplicité
pour les diapos, etc.). Ceci nécessite un peu de technique : les concepteurs doivent ajouter un en-tête HTTP supplémentaire à la transmission du fichier concerné. La ligne d’en-tête à ajouter est : « Content-disposition: Attachment ». Si possible, les concepteurs doivent aussi ajouter : « ; filename=un_fichier.pdf » à la fin de cette ligne pour indiquer au navigateur un nom de fichier explicite si l’utilisateur choisit de l’enregistrer. Toutes ces instructions sont dérivées du même phénomène sous-jacent : les documents hors Web ont des formats natifs. Ils sont issus d’applications, chacune offrant aux utilisateurs un ensemble de commandes et d’options de navigation différentes de celle de la navigation des sites Web.
Comment utiliser Windows si vous ne comprenez pas les fenêtres ? Beaucoup d’entre vous croient peut-être que nous insistons trop sur la difficulté des utilisateurs à gérer les fenêtres multiples. Comment le concept le plus basique de l’interface graphique utilisateur peut-il ne pas être compris par tous ? Comment utiliser Microsoft Windows si vous ne comprenez pas les fenêtres ? Comment peut-on ne pas comprendre la barre des tâches alors qu’elle apparaît constamment à l’écran ? Faites-nous confiance, les difficultés que nous décrivons sont très communes. Nous les voyons année après année, étude après étude. La plupart des lecteurs de cet ouvrage sont probablement très compétents dans l’utilisation des ordinateurs, mais de nombreuses autres personnes ne le sont pas. Même ceux qui utilisent l’ordinateur plusieurs heures par jour n’en ont souvent pas une connaissance approfondie. Les utilisateurs moins expérimentés ne sont souvent pas avertis de la différence qui existe entre des concepts comme les fichiers, les applications et différentes sortes de fenêtres, par exemple les fenêtres du système d’exploitation ou les icônes représentant des fichiers et les applications où chaque fenêtre représente un fichier. Souvent, ils ne savent pas non plus très bien la différence entre les navigateurs Web et d’autres fenêtres et ne font pas la distinction entre les différents champs de saisie à l’écran. L’une des interrogations les plus fréquentes sur Yahoo! est « www.google.com ». Pourquoi rechercherait-on Google si l’on connaît son adresse ? En fait, les
internautes ne comprennent pas tout à fait le concept des URL ni la différence qui existe entre taper quelque chose dans la barre d’adresse du navigateur et dans le champ d’un navigateur. Après tout, les deux zones permettent de taper une adresse Web ! L’une des principales raisons de l’utilisabilité est de s’adapter à la large gamme des compétences des utilisateurs. Les concepteurs, les programmeurs, les responsables du marketing sur Internet et presque toutes les autres personnes membres d’une équipe de développement sont généralement très compétents. C’est ce qui leur a permis de travailler dans le domaine de l’informatique. Et lorsque vous savez quelque chose, il est difficile d’imaginer que d’autres ne le savent pas. Cela devient une seconde nature, comme de manipuler plusieurs fenêtres qui se chevauchent. Mais lorsque nous testons des utilisateurs représentatifs, nous découvrons souvent qu’ils en savent beaucoup moins et qu’ils ont besoin d’une interface utilisateur considérablement simplifiée. Pourquoi les personnes n’apprennent-elles pas les bases de l’informatique si elles travaillent avec tous les jours ? Car l’ordinateur est un outil, et non une mission pour la plupart. Lorsqu’elles en savent suffisamment pour réaliser le travail, elles se concentrent sur leur tâche. Ceux d’entre nous qui sont intéressés par la technologie pourront en être attristés mais c’est un fait et il vaut mieux concevoir pour les utilisateurs tels qu’ils sont plutôt que tel que vous les aimeriez.
3 : Révision des premières conclusions sur l‘utilisabilité
71
Lorsque les utilisateurs travaillent par exemple avec une présentation PowerPoint, ils se concentrent sur les fonctions de manipulation des diapositives. Puisque ces opérations sont très similaires à celles des diapositives hors Internet, il est aisé d’oublier qu’elles ont été téléchargées sur un site Web. A la fin de leur travail, ils font ce que tout le monde fait, ils cliquent sur la case Fermer. Lorsqu’une application native s’ouvre dans une fenêtre de navigateur, un second phénomène, assez malheureux, survient. Les utilisateurs voyant toujours les commandes et les boutons du navigateur, ils supposent qu’ils peuvent les utiliser pour manipuler le document. Malheureusement, les fonctions comme « Agrandir le texte », « Imprimer » et « Rechercher » ne fonctionnent pas dans un document d’application native. Mieux vaut alors ne pas les afficher pour les documents hors Web. N’oubliez pas qu’il s’agit d’une exception, et non d’une instruction. La règle générale veut que l’on maintienne les pages Web dans une même fenêtre et que l’on évite d’en ouvrir de nouvelles.
Fenêtres contextuelles ccc Les fenêtres contextuelles (pop-up) sont un défi à l’utilisabilité encore pire aujourd’hui que par le passé. Les utilisateurs en sont de plus en plus gênés et beaucoup ont été jusqu’à installer un logiciel de blocage des pop-ups. Et nous savons que les utilisateurs détestent installer de nouveaux logiciels, cela témoigne donc de leur agacement. Pour la plupart, les fenêtres contextuelles sont à éviter. Elles apparaissent souvent par surprise et détournent les utilisateurs de ce qu’ils attendent, c’est-à-dire découvrir des informations dans la fenêtre principale du navigateur. De plus, elles ont une connotation ringarde car elles apparaissent le plus souvent sur les sites de jeux et les sites pornographiques.
72
Site Web : priorité à la simplicité
Citibank met en garde ses utilisateurs contre les fenêtres contextuelles car elles sont souvent utilisées pour le « phishing », c’est-à-dire faire croire à des personnes qu’elles doivent communiquer leurs informations confidentielles en se faisant passer pour une entreprise ou une personne de confiance. Ce n’est que l’un des nombreux exemples pour lesquelles les fenêtres contextuelles ont mauvaise réputation. A l’évidence, si de grandes sociétés respectées lancent un avertissement contre les fenêtres contextuelles, les utilisateurs seront encore moins enclins à interagir avec elles sur d’autres sites. Cet avertissement continuera à les tracasser et réduira leur confiance dans les sites qui en affichent, même si le site est respectable et n’a pas d’intentions malhonnêtes.
www.citicards.com
3 : Révision des premières conclusions sur l‘utilisabilité
73
De nombreux utilisateurs ferment les pop-ups aussi vite que possible, souvent même avant que le contenu ne soit affiché. Qu’il s’agisse d’une pop-up est une raison suffisante pour avoir envie de la fermer.
Les utilisateurs qui présentent différents types de handicaps rencontrent des problèmes particuliers pour gérer les fenêtres multiples. Les personnes handicapées moteur ne doivent pas avoir à lutter pour cliquer sur de nombreuses cases Fermer. Les utilisateurs mal voyants ne sauront peut-être même pas qu’une fenêtre contextuelle est apparue s’ils ont zoomé sur une autre partie de l’écran. Enfin, les utilisateurs aveugles seront considérablement affectés par la charge cognitive supplémentaire nécessaire pour gérer les fenêtres multiples et se souvenir des informations lues pour chaque fenêtre contextuelle. Nous découvrons de manière empirique que de nombreux utilisateurs ferment les fenêtres contextuelles dès que possible, souvent même avant que le contenu n’ait été affiché. Le fait qu’il s’agisse d’une fenêtre contextuelle est une raison suffisante pour vouloir la faire disparaître rapidement. Les fenêtres contextuelles peuvent en fait être utilisées de manière légitime. Auparavant, ces fenêtres convenaient pour afficher quelques informations supplémentaires, sans encombrer l’espace de travail, notamment pour afficher de l’aide ou un glossaire. Les utilisateurs aiment à obtenir de l’aide dans une petite fenêtre et se reporter ensuite au problème sans avoir oublié le contexte. Malheureusement, les fenêtres contextuelles légitimes sont elles aussi rarement appropriées de nos jours car d’autres, mal intentionnées, ont terni leur réputation. Un site de commerce électronique a récemment perdu une grosse partie de ses ventes car il utilisait des fenêtres contextuelles dans sa procédure de vente. Cette conception fonctionnait bien par le passé mais au final, de nombreux utilisateurs ne voyaient plus les informations des fenêtres contextuelles, soit parce qu’ils employaient des systèmes de blocage des pop-ups, soit parce qu’ils les avaient manuellement fermées sans les lire. Les fenêtres contextuelles ont toujours été suffisamment embêtantes pour mériter trois têtes de mort et elles fonctionnent maintenant si mal que nous devrions même leur en donner 4. Mais l’échelle de notation ne va pas aussi loin, nous nous en tiendrons à 3.
74
Site Web : priorité à la simplicité
Techniques publicitaires les plus détestées Lors d’une conférence sur l’expérience utilisateur de Nielsen Norman Group de 2004, John Boyd, directeur de la recherche plate-forme chez Yahoo! et Christian Rohrer, directeur de la recherche utilisateur chez eBay ont présenté un large corpus de recherche sur la perception de la publicité en ligne. Ce tableau montre les réponses d’une étude menée en 2004 sur 605 utilisateurs du Web à qui l’on a demandé en quoi les divers aspects des publicités en ligne affectaient leur expérience du Web.
Elément de conception
Utilisateurs ayant répondu « très négativement » ou « négativement »
Fenêtres contextuelles devant votre fenêtre
95 %
Se charge lentement
94 %
Essaye de vous amener à cliquer dessus
94 %
Ne possède pas de bouton Fermer
93 %
Recouvre ce que vous tentez de voir
93 %
N’indique pas son objectif
92 %
Déplace le contenu
92 %
Occupe la majeure partie de la page
90 %
Clignote
87 %
Flotte au-dessus de l’écran
79 %
Diffuse automatiquement du son
79 %
Comme le montre le tableau, les fenêtres contextuelles étaient la technique publicitaire la plus détestée sur le Web. Les utilisateurs interrogés aujourd’hui seraient certainement encore plus négatifs. L’un d’eux a noté le commentaire suivant dans le formulaire d’un grand site Web : « vous devriez avoir honte de vous ! Je n’ai pas demandé à avoir trois pop-ups sur mon écran lorsque j’ai visité votre site. Je ne visite pas de sites pour célibataires et je ne veux pas ajouter 10 cm à mon pénis. En fait, je n’utilise aucun des services qui apparaissent sur mon écran. Je trouve dégoûtant que des bâtards avides d’argent comme vous soient entrés sur mon ordinateur pour vos propres gains égoïstes. A partir de maintenant, je vous boycotte et je vais avertir tout le monde de faire la même chose. J’en ai assez de vous et de vos publicités contextuelles ». Les utilisateurs transfèrent leur dégoût des fenêtres contextuelles sur les annonceurs qui y sont présents et sur les sites Web qui les affichent. Dans une étude portant sur 18 808 utilisateurs menée par Yahoo! en 2004, plus de la moitié ont signalé qu’une publicité par fenêtre contextuelle avait influencé leur avis sur les annonceurs de manière très négative et près de 40 % ont mentionné que cela avait influencé leur avis sur le site Web de manière très négative. Lorsque les utilisateurs rejettent autant un élément de conception, mieux vaut ne pas l’utiliser.
3 : Révision des premières conclusions sur l‘utilisabilité
75
Eléments de conception ressemblant à des publicités ccc Les utilisateurs du Web sont extrêmement orientés vers leurs objectifs. Ils recherchent des informations qui les intéressent et ignorent celles que vous voulez leur imposer. En fait, ils ont même évolué vers un système actif d’autodéfense car ils sont constamment importunés par des tentatives visant à capter leur attention et à la détourner de leur objectif.
Aveuglement aux bannières et autres radars publicitaires Il est reconnu que les utilisateurs appliquent un « aveuglement aux bannières » incroyablement performant. Les études de suivi oculaire ont enregistré des fixations sur les bannières de l’ordre de la microseconde mais presque jamais de regards ou de lectures prolongés. Les utilisateurs évitent même les bannières clignotantes les plus ennuyeuses en entraînant leurs yeux à les éviter. « L’aveuglement aux bannières » permet maintenant d’éviter tout ce qui pourrait ressembler à des informations ou à des publicités non pertinentes. Les utilisateurs ignorent également les cases colorées en marge de la page car elles servent souvent aux publicités. En fait, tout élément trop grand ou trop coloré risque fort d’être ignoré, en particulier s’il contient des animations. Nous observons souvent les utilisateurs qui tentent des tas de choses sauf de cliquer sur l’élément voulu. Lorsqu’ils sont interrogés après le test, ils nous répètent : « oh, j’ai vu ça, mais ça ressemblait à une publicité et je l’ai ignoré ». Peu importe si l’élément de conception est ou non une publicité. Puisque les utilisateurs ne le verront pas, ils ne le sauront jamais.
Les utilisateurs ont été conditionnés pour supposer que toutes les parties utiles des sites Web apparaissent en texte brut, à l’exception de petits boutons « ajouter au panier » situés près des photos de produits. Nous avons même observé des personnes qui n’achetaient pas des produits sur des sites de commerce électronique car elles ne trouvaient pas le bouton Acheter, trop gros et trop coloré. Inconsciemment, elles l’avaient ignoré. Ironiquement, dans ces situations, peu importe si l’élément de conception est ou non une publicité. Puisque les utilisateurs ne le verront pas, ils ne le sauront jamais. Le réflexe de contournement les empêche de les lire.
76
Site Web : priorité à la simplicité
www.ew.com Les grandes cases graphiques rectangulaires en haut de page peuvent être aisément confondues avec des publicités car elles y ressemblent. Si vous voulez que l’utilisateur remarque quelque chose sur le site, cela ne doit pas ressembler à une publicité. Les liens de texte simples, présentés à un endroit approprié sur la page, attireront plus l’attention que des éléments très graphiques et dynamiques. En outre, la case Rechercher (Search) n’est pas standard et risque fort de ne pas être remarquée.
Il existe aussi une raison technique pour éviter les éléments qui ressemblent à des bannières publicitaires : certains utilisateurs ont installé des bloqueurs de publicités pour empêcher qu’elles n’apparaissent à l’écran. Ce logiciel ne peut pas lire le contenu, il se contente de rejeter les graphiques aux dimensions d’une bannière publicitaire standard (disons 728 × 90 pixels). Les utilisateurs sont de plus en plus adeptes de l’aveuglement aux bannières et autres techniques d’évitement des publicités. Les éléments qui ressemblent à des publicités vont forcément dégrader l’utilisabilité d’un site ; ils méritent donc toujours trois têtes de mort.
3 : Révision des premières conclusions sur l‘utilisabilité
77
Enfreindre les conventions du Web ccc Rappelez-vous de la loi de Jacob Nielsen sur l’expérience utilisateur sur Internet : les internautes passent la majeure partie de leur temps sur d’autres sites Web (la loi est discutée plus en détail dans l’ouvrage Homepage Usability: 50 Websites Deconstructed de Jacob Nielsen et Marie Tahir). Même s’ils viennent sur votre site par vagues, lorsque c’est le plus gros et le plus visible sur le Web, leurs visites cumulées sur d’autres sites dépasseront toujours celles du vôtre. Les utilisateurs axent donc leurs attentes sur ce qu’ils ont vu ailleurs. S’ils sont habitués à des standards et des conventions de conception prédominants, ils s’attendront également à les trouver sur votre site. Avec 1 minute 49 secondes en moyenne pour convaincre des clients potentiels que vous valez le coût, ne les gaspillez pas avec une interface utilisateur déviante.
Eviter d’influencer les utilisateurs pendant le test De nombreuses sociétés emploient une méthodologie défaillante pour leurs études utilisateurs ; c’est peut-être l’une des raisons pour lesquelles nous continuons à voir autant de conceptions malheureuses sur le Web. Le design peut réussir à passer « le test utilisateur », même avec des couleurs « flashy » et le responsable du site n’hésitera donc pas à le mettre en ligne. Mais s’il a influencé l’étude, les résultats sont sans valeur. Dans nos cours de trois jours, il est difficile de couvrir tous les détails et toutes les nuances du test utilisateur. Il faut donc souligner ici un point important pour aider les organisateurs de tests à ne pas détourner l’attention des utilisateurs par inadvertance. Si vous demandez aux utilisateurs de commenter chaque élément d’une page pendant un test, ils commenteront les publicités et autres éléments qui
78
ressemblent à des publicités. Ayant remarqué ces éléments, ils les utiliseront certainement s’ils leur semblent utiles. Pire encore, si vous leur demandez ce qu’ils pensent d’un élément de conception spécifique, vous les alertez sur cet élément, ce qui influence leurs actions pour le reste de l’étude. Ainsi, une toute petite faiblesse dans la manière de poser les questions peut empêcher d’observer l’évitement des publicités, soit le comportement naturel des utilisateurs. Pour les éléments de conception qui ressemblent à des publicités, le protocole correct consiste à se limiter aux commentaires pendant le test. A l’issue du test et pendant le débriefing, vous pouvez interroger la personne sur l’élément de conception en question. C’est ainsi que nous avons entendu de nombreux testeurs dire qu’ils avaient ignoré des éléments pensant qu’il s’agissait de publicités.
Site Web : priorité à la simplicité
Nous voyons toujours des utilisateurs déroutés lorsque les sites se comportent de manière inattendue et satisfaits lorsqu’ils comprennent immédiatement une conception prévisible. Nous donnons donc toujours trois têtes de mort au problème de non-respect des conventions du Web.
www.zincbistroaz.com Ce design néglige les conventions d’interaction ; il est très difficile de trouver ce que l’on cherche. Les mots Lunch, Dinner et Navigate ressemblent vraiment à des liens alors que ce n’en sont pas. Les seuls éléments sélectionnables sur cette page d’accueil sont cinq des œufs. Si vous cliquez sur le support de l’œuf au mauvais endroit, vous risquez de croire qu’il n’y a pas d’autres informations que ce qui est montré. Cacher les éléments d’interface dégrade l’expérience de l’utilisateur et décourage les internautes. Lorsque les informations sont masquées, les personnes supposent qu’elles sont absentes. Les interactions prévisibles permettent quant à elles de naviguer sans avoir peur de rencontrer d’obstacles.
3 : Révision des premières conclusions sur l‘utilisabilité
79
Contenu vaporeux et réputation surfaite ccc L’un des plus gros problèmes du Web est le fait que les sociétés ne veulent pas dire décrire simplement leur activité sur leur site. Or, les utilisateurs du Web sont extrêmement impatients et passent très peu de temps sur chaque page. Plus les descriptions sont ampoulées, plus les utilisateurs les ignorent et vont ailleurs. Il est essentiel d’indiquer rapidement ce que vous proposez et les avantages que l’on peut en tirer. Plus vous proposez un style inadapté à vos utilisateurs, plus ils ignoreront votre message général. Un contenu inutile ne fait pas qu’ennuyer, c’est une cause majeure de perte de ventes.
Il est intéressant de constater que l’une des plus anciennes directives de vente et de marketing, quel que soit le support, consiste à vendre les avantages, et non les fonctionnalités du produit ; nous ne devrions donc pas vraiment avoir à insister là-dessus. Malheureusement, le Web est tellement envahi par un contenu vaporeux et un verbiage impossible que les utilisateurs ignorent ce type de sites. Bien entendu, plus vous proposez un style inadapté à vos utilisateurs, plus ils ignoreront votre message général. Un contenu inutile ne fait pas qu’ennuyer, c’est une cause majeure de perte de ventes.
www.montblanc.com Mont-Blanc fabrique de jolis stylos, mais il est impossible d’en savoir plus sur cette société sur son site Web. Cet écran présente les collections de modèles classiques, mais les utilisateurs n’auront un aperçu des stylos disponibles (stylos plumes, stylo bille, crayons, surligneurs) qu’en cliquant sur la petite flèche triangulaire près des photos. De même, ce site n’apporte aucune information utile comme la taille, la couleur ou le prix des produits.
80
Site Web : priorité à la simplicité
La pratique qui consiste à rendre le site Web plus visible pour les moteurs de recherche est appelée SEO (Search Engine Optimization). Plus le texte est concret, plus votre site ressortira dans les moteurs de recherche. Nous l’avons vu au Chapitre 2, les utilisateurs à la recherche d’un achat potentiel commencent presque toujours par une recherche. Ceci fait de la SEO la technique de marketing numéro un pour les sites Web ; l’utilisation de mots basiques et clairs est également essentiel pour la SEO car ce sont les motsclés que les internautes entreront dans les moteurs de recherche. Utiliser un langage vaporeux ne nuit pas seulement lorsque les utilisateurs se retrouvent sur votre site, cela peut les empêcher de le trouver. En effet, ceux qui emploient un langage clair vous surpasseront dans les résultats de moteurs de recherche.
Contenu dense et texte illisible ccc Les blocs de texte denses représentent un inconvénient majeur sur le Web. Le simple aspect d’une page remplie de texte suggère immédiatement aux utilisateurs qu’ils vont devoir faire des efforts pour obtenir les informations voulues. Pour reprendre la métaphore du butinage, les blocs de texte sont comme la carapace d’une tortue. De nombreux prédateurs dédaigneront cette créature car le temps et les efforts nécessaires pour casser la carapace et accéder à la nourriture sont trop importants. De même, les internautes rechignent souvent à creuser dans un texte dense. Ce sont souvent les institutions gouvernementales qui commettent les pires infractions dans cette catégorie. Cela est probablement dû au fait que les fonctionnaires ont l’habitude de travailler avec de longs documents denses, rédigés pour des publics internes et richement épicés de terminologie bureaucratique spécialisée. Dès qu’elles corrigent un peu cet aspect, elles considèrent que le contenu est devenu plus accessible pour le lecteur moyen du Web. Or, ce n’est pas suffisant. Le jargon administratif doit être terriblement revu à la baisse.Voilà encore un exemple classique de problèmes d’utilisabilité causés par des concepteurs et des auteurs trop enracinés dans leur culture interne pour reconnaître le fossé qui les sépare du monde extérieur.
3 : Révision des premières conclusions sur l‘utilisabilité
81
Le texte du Web doit être court, lisible et assimilable. Il est d’ailleurs conseillé d’écrire moitié moins de mots pour le Web que pour une impression papier. Si vous ciblez un large public de consommateurs, comprenant des personnes de peu ou pas d’éducation, mieux vaut ramener ce chiffre à 25 %. Pour écrire sur le Web, partez toujours de la conclusion, de sorte que les personnes qui ne liront que la première ligne d’une page en connaissent toutefois le point principal. Tant que le contenu Web ne sera pas écrit clairement et de manière concise, le problème conservera ses trois têtes de mort.
ssa-custhelp.ssa.gov Les informations de la sécurité sociale américaine sur le versement des allocations à l’étranger sont écrites pour un public de niveau professeur d’université. Il faut donc un diplôme universitaire pour comprendre cette page Web. Le texte ici n’est pas particulièrement horrible si on le compare à celui de certains sites du gouvernement fédéral. Ainsi, par exemple, cette page commence par la conclusion. Malgré tout, de nombreuses phrases mériteraient d’être réécrites, et notamment celle qui commence par « For example » et contient 61 mots.
82
Site Web : priorité à la simplicité
direct.gov.uk Le gouvernement britannique propose des informations sur les retraites à l’étranger à un niveau de lecture de première. C’est toujours trop compliqué pour un large public de citoyens seniors, moins susceptibles que les plus jeunes d’être allés au lycée. L’âge peut aussi diminuer la capacité de certaines personnes à lire un niveau de langue avancé. Nos recherches sur les utilisateurs peu éduqués montre qu’il vaut mieux écrire pour un niveau de lecture de quatrième lorsque vous ciblez un large public de consommateurs (les contribuables étant le plus large public qui soit). Toutefois, le site du gouvernement britannique a fait mieux que celui de l’administration de la sécurité sociale américaine. Par exemple, le résumé de départ (« if you are retiring abroad, you can continue to receive your UK state pension », si vous prenez votre retraite à l’étranger, vous pouvez continuer à percevoir votre retraite britannique) est indiqué clairement et en plus gros caractères que le texte des diverses exceptions à la règle.
3 : Révision des premières conclusions sur l‘utilisabilité
83
Evolution technologique et utilisabilité Le Web a considérablement changé depuis ses débuts, en 1991, où il ne s’agissait que d’une collection d’articles de physique. Les deux premières années, on ne trouvait qu’un petit système hypertexte de documents utilisés par quelques chercheurs. Mais en 1993, la première grande interface utilisateur a été introduite avec le navigateur Mosaic. Notre recherche sur l’interaction des utilisateurs avec les sites Web et les intranets s’est poursuivie à mesure que le Web a évolué au travers des générations technologiques, passant des premières pages en gris de Mosaic aux pages colorées et aux tableaux de Netscape, pour arriver aux pages multicouches, riches en fonctionnalités, de Microsoft Internet Explorer (IE), faisant de plus en plus appel à JavaScript et aux feuilles de style en cascade (CSS). Au début de nos recherches en 1994, les particuliers accédaient principalement à Internet par des modems bas débit, à 28,8 Kbits/s. Aujourd’hui, la plupart des internautes à domicile aux Etats-Unis et dans de nombreux autres pays disposent de connexions dites haut débit, affichant quelques mégabits par seconde. Il s’agit ici des modems par câble et des lignes DSL, dites « haut débit », qui ne sont d’ailleurs pas encore aussi rapides qu’elles devraient l’être pour offrir une expérience optimale à l’utilisateur. Le service par fibre optique nous apportera des centaines de mégabits et nous pourrons alors véritablement parler d’un Internet haut débit. Sept des trente-quatre problèmes initiaux d’utilisabilité sont devenus moins importants aujourd’hui du fait de l’évolution des navigateurs, de la bande passante ou d’autres technologies d’Internet.
84
Ces avancées technologiques substantielles n’ont malheureusement pas entraîné de changement radical des problèmes d’utilisabilité. Les premières instructions demeurent étonnamment stables au fil du temps car c’est plus un sujet de comportement humain et les personnes ne changent pas totalement d’une décennie à l’autre. En fait, la grande majorité des utilisateurs d’aujourd’hui sont les mêmes que ceux qui utilisaient le Web il y a dix ans. Leurs caractéristiques sont à peu près identiques, tout comme leur comportement. La mémoire à court terme des humains ne contient pas plus de sept (plus ou moins deux) informations et cette spécificité remonte probablement à Néandertal.
Site Web : priorité à la simplicité
Pourtant, sept des trente-quatre problèmes initiaux d’utilisabilité que nous avons répertoriés sont devenus moins importants aujourd’hui du fait de l’évolution des navigateurs, de la bande passante ou d’autres technologies d’Internet. Ces améliorations ont quelque peu résolu certains problèmes comme : ■
le temps de chargement ;
■
les cadres ;
■
Flash ;
■
les listes de recherche peu pertinentes ;
■
le multimédia et les vidéos ;
■
les mises en page figées ;
■
l’incompatibilité entre les plates-formes.
Dans cette section, nous étudions les problèmes qui ont perdu des têtes de mort grâce à l’amélioration de la technologie. N’oubliez pas que les têtes de mort indiquent l’ampleur de la gêne causée par un problème d’utilisabilité. S’il y en a moins, cela signifie que le problème a perdu en importance grâce aux avancées technologiques.
Les directives de l’Air Force de 1986 résistent au temps qui passe De 1984 à 1986, l’US Air Force a compilé ses connaissances sur l’utilisabilité en un ensemble unique et cohérent d’instructions, à destination de ses concepteurs d’interface utilisateur et intitulé Guidelines for Designing User Interface Software, ESD-TR-86-278. Jacob Nielsen comptait par les nombreuses personnes à avoir conseillé sa mise en place. Le projet identifiait 944 directives, la plupart relatives au commandement militaire et aux systèmes de contrôle élaborés dans les années 1970 et au début des années 1980, qui utilisaient la technologie dominante.
Vous pensez peut-être que ces vieilles conclusions ne pourront pas intéresser les concepteurs modernes. Eh bien, vous avez tort. Nous avons retesté 60 des 1986 directives de 2005. 54 continuent à être valables aujourd’hui. Sur les 944 directives, nous en avons déduit que 10 % ne sont plus valables et que 20 % ne sont plus pertinentes car elles concernent des technologies d’interface rarement utilisées. Mais près de 70 % des instructions d’origine continuent à être à la fois correctes et pertinentes vingt ans plus tard.
3 : Révision des premières conclusions sur l‘utilisabilité
85
La plupart des sites développés dans les années 1990 présentaient peu de graphismes et des pages au chargement rapide. Les concepteurs graphiques s’en plaignaient mais les utilisateurs les adoraient.
Les temps de téléchargement c Les temps de téléchargement étaient généralement l’un des problèmes les plus importants d’utilisabilité sur le Web : dans chaque étude menée, les utilisateurs se plaignaient du temps d’attente. Ils félicitaient rarement les sites pour leur rapidité. La plupart des sites développés dans les années 1990 présentaient peu de graphismes et des pages au chargement rapide. Les concepteurs graphiques se plaignaient de l’aspect primitif, voire carrément affreux de Yahoo! (1994), Amazon (1995), eBay (1995) et Google (1998) mais les utilisateurs adoraient ces sites et leur faisaient confiance car il était agréable de pouvoir passer sans attendre à la page suivante. A moindre échelle, notre site www.useit.com est devenu l’un des plus importants sites consacrés à l’utilisabilité au monde tout en affichant délibérément un aspect affreux et sans design. Au départ, nous avons pensé que cela était nécessaire pour charger rapidement les pages mais nous l’avons conservé à titre d’exemple du fait des fortes connotations positives qu’il a pour les utilisateurs. Voilà donc un autre exemple du comportement des utilisateurs face à un design, selon le niveau réflectif expliqué dans le modèle du design émotionnel de Don Norman.
Les trois niveaux du design émotionnel de Don Norman Dans son ouvrage Emotional Design: Why We Love (Or Hate) Everyday Things, notre collègue Donald A. Norman décrit trois niveaux de comportements face à un design. Le niveau viscéral est le plus immédiat, il est dominé par l’apparence. Des objets lisses ou ronds ont des connotations douces et agréables ; les objets pointus ou abrupts véhiculent l’idée de peur ou de danger. Les araignées vous font trembler lorsque vous les apercevez et les bébés vous donnent envie d’être protecteur. La plupart des émotions viscérales sont ancrées et déclenchées immédiatement car elles sont basées sur les avantages de l’évolution et les principes de survie. La plupart des designs graphiques tentent d’opérer au niveau viscéral, en faisant passer des émotions positives.
86
Le niveau comportemental est basé sur l’utilisation de l’objet. Comment vous sentez-vous en le manipulant ? Est-il ennuyeux ou agréable à utiliser ? La plupart des problèmes d’utilisabilité se situent à ce niveau. Les temps de réponse en sont un exemple classique : on est gêné de devoir ainsi attendre, et attendre, et attendre. Le niveau réflectif est basé sur la manière dont nous pensons (ou réfléchissons) à un objet. A-t-il des connotations positives ou prestigieuses ? Evoque-t-il un souvenir heureux ? La stratégie de marque fonctionne souvent au niveau réflectif, en évoquant à l’avance un certain produit ou un certain fournisseur de manière spéciale.
Site Web : priorité à la simplicité
Un régime drastique pour les sites Web ? Aujourd’hui, il est moins important que les pages Web évitent tout graphisme. La plupart des utilisateurs disposant de connexions haut débit, les pages contenant des images se téléchargent assez rapidement. A une vitesse de 3 Mbits/s, valeur habituelle pour les modems par câble, le navigateur peut télécharger environ 300 Ko en une seconde, d’où une navigation hypertexte agréable. Dans la pratique, le téléchargement des données peut prendre un peu plus de temps du fait des retards de communication des requêtes et des allées et venues sur Internet. Mais un poids de 100 Ko est raisonnable pour obtenir un téléchargement rapide. Cela signifie qu’une page Web peut facilement associer une assez grande quantité de texte à une mise en page, une feuille de style, voire quelques petites photos ou autres images. Attention, la première page ne doit pas contenir beaucoup de gros graphiques, mais l’utilisateur doit pouvoir cliquer sur une miniature pour obtenir un agrandissement de 200 Ko par exemple dans un temps de réponse acceptable. Pourtant, les temps de chargement méritent toujours une tête de mort. Les habitants de zones rurales, ceux qui utilisent des connexions mobiles ou qui se connectent depuis une chambre d’hôtel en bas débit sont toujours limités par la connexion. De même, les utilisateurs à haut débit ne peuvent toujours pas télécharger tellement d’informations en 1 seconde, il faut donc toujours contrôler le poids de la page. Enfin, les temps de réponse sont déterminés par la vitesse du serveur autant que par le nombre de kilo-octets transmis. Il existe toujours trop de sites s’exécutant sur des serveurs surchargés qui n’envoient pas immédiatement la page suivante.
Les cadres c Les cadres ont été l’une des « avancées » les plus mal conçues de la technologie Web. Ils étaient rivés aux modèles de page simples qui étaient à la base des premiers navigateurs Web et ont enfreint de nombreuses conventions d’interface que les utilisateurs avaient appris à reconnaître, notamment l’apposition de signets sur des informations ou l’envoi d’une URL par e-mail. Dans les premiers navigateurs, il était extrêmement difficile d’imprimer des pages qui contenaient des cadres et ils interféraient aussi avec les moteurs de recherche.
3 : Révision des premières conclusions sur l‘utilisabilité
87
Les cadres empêchaient surtout le bouton Précédent de fonctionner dans Netscape version 2. Comme indiqué plus tôt dans ce chapitre, le dysfonctionnement du bouton Précédent demeure un problème à trois têtes de mort et toute technologie qui y contribue ne peut être décrite que comme un désastre pour l’utilisabilité. Il vaut toujours mieux éviter les cadres mais le problème n’est plus aussi sérieux avec les navigateurs modernes. Le bouton Précédent fonctionne à nouveau et l’impression des pages est beaucoup plus facile.
Flash cc Pendant les premières années, nous avons donné à Macromedia Flash la note de « 99 % de négatif » car ce logiciel gênait le fonctionnement du bouton Précédent, il ne fonctionnait pas avec les signets et causait des problèmes d’accessibilité pour les utilisateurs handicapés. Dans ses premières versions, Flash a introduit plusieurs problèmes graves d’utilisabilité. Tout d’abord, il encourageait les animations gratuites. Entendons-nous bien, l’animation a tout à fait sa place dans la communication en ligne, mais une place limitée. Deuxièmement, il empêchait les utilisateurs de contrôler leur propre destinée. Le Web permet d’aller où on le souhaite. C’est ce qui en fait un outil tellement pratique, malgré ses nombreux problèmes d’utilisabilité. Malheureusement, de nombreux concepteurs Flash ont enfreint ce principe en employant des présentations de style télévisé plutôt que des médias interactifs. Quel que soit la convivialité d’une présentation, les utilisateurs s’ennuient s’ils doivent la regarder sans rien faire. Troisièmement, de nombreux concepteurs Flash ont introduit leurs propres contrôles d’interface utilisateur non standard, comme par exemple avec les barres de défilement. Les meilleurs concepteurs d’interaction au monde ont travaillé pendant des années à tester de nombreuses alternatives pour parvenir aux barres de défilement actuelles présentées dans Mac OS et Windows. Une nouvelle barre de défilement conçue en deux jours ne fera que causer des problèmes. Et même si elle fonctionne, elle réduit l’utilisabilité du site car les utilisateurs doivent se l’approprier. Or, ils savent déjà faire fonctionner la barre traditionnelle.
88
Site Web : priorité à la simplicité
Aucun de ces problèmes n’est inhérent à Flash. Vous pouvez concevoir des objets multimédia pratiques qui respectent les directives et soient simples à utiliser. Seulement, les premières réalisations Flash encourageaient les abus. Après que nous ayons mené une campagne incessante contre les mauvaises conceptions Flash, Macromedia a cherché à promouvoir les capacités de son logiciel à ajouter des fonctionnalités aux sites Web. En 2002, une nouvelle version était lancée avec une meilleure accessibilité et qui corrigeait la plupart de ses autres problèmes, comme le mauvais fonctionnement du bouton Précédent et l’utilisation de contrôles d’interface non standard. Flash semblait sur la bonne voie pour devenir un contributeur efficace à une meilleure utilisabilité du Web.
www.tiffany.com Les barres d’outils de défilement non standard sont presque toujours une mauvaise idée mais notre test utilisateur en a révélé quelques-unes qui fonctionnent bien. Les petits triangles gris sur le site de Tiffany sont efficaces car le site est dépouillé et élégant et ces contrôles ressortent malgré leur petite taille.
3 : Révision des premières conclusions sur l‘utilisabilité
89
Flash ne doit pas être utilisé pour encombrer une page. Si votre contenu est ennuyeux, réécrivez-le et engagez un photographe professionnel pour prendre de meilleures photos. N’animez pas vos pages.
Malgré de si bonnes intentions, la plupart des éléments Flash que nous continuons à rencontrer sur le Web sont mauvais, sans autre objectif qu’ennuyer l’utilisateur. La bonne nouvelle, c’est que les introductions Flash ont presque totalement disparu. Elles sont si mal considérées que même les plus nonchalants des concepteurs Web ne les recommandent plus, même si quelques-uns (encore plus nonchalants) continuent à les demander. Flash est un environnement de programmation et doit être utilisé pour proposer des performances et des fonctionnalités supplémentaires qui n’existent pas sur une page statique. Il ne doit pas servir à encombrer une page. Si le contenu est ennuyeux, réécrivez-le et engagez un photographe professionnel pour prendre de meilleures photos. N’animez pas vos pages. Cela fait fuir les utilisateurs au lieu d’attirer leur attention. Utiliser Flash pour la navigation n’est pas une bonne idée non plus. Les internautes préfèrent une navigation prévisible et des menus statiques.
Flash : le bon, la brute et l’utile En 2002, nous avons mené un test utilisateur sur 46 réalisations Flash et résumé nos conclusions dans un rapport comprenant 117 instructions d’utilisabilité pour Flash. La tenue de ces sessions avec les applications Flash nous a rappelé nos tests sur les premières moutures des applications Macintosh des années 1980. Nombre des problèmes d’utilisabilité de Flash que nous avons identifiés avaient trait au concept de base de l’interface utilisateur : rendre les commandes évidentes et faciles à saisir. L’une des directives de Flash est quasiment la copie d’une directive des années 1980 : vous devez proposer des zones de clic généreuses autour des éléments actifs, faute de quoi les utilisateurs penseront qu’ils ont cliqué là où il faut même si ce n’est pas le cas. Nous avons également répété une conclusion des premiers tests de MacDraw et Lotus Freelance Graphics : lorsque vous créez de nouveaux objets sur un fond de dessin, ils doivent être éloignés des autres pour être visibles. Les autres directives de Flash sont nouvelles et peu pertinentes pour les logiciels traditionnels. Nous avons par exemple découvert de nombreux
90
problèmes d’utilisabilité relatifs aux sons et aux objets animés, à la fois positifs (ils peuvent indiquer un changement et une direction) et négatifs (ils peuvent être distrayants, ennuyeux et difficiles pour les personnes handicapées). Certaines applications Flash ont apparemment hérité des mauvaises habitudes de conception du Web. Un problème d’utilisabilité particulier mérite d’être souligné : dans plusieurs applications, les utilisateurs ont raté des options à cause de barres de défilement non standard. La commande de défilement est un élément d’interface utilisateur standard qui doit répondre aux attentes des utilisateurs. Nous avons rencontré certaines barres non standard qui fonctionnaient, notamment sur le site de Tiffany tellement simplifié que les utilisateurs ne pouvaient pas les manquer, malgré leur taille. Ces divergences ont entraîné d’autres problèmes mais au moins, les personnes utilisaient la barre de défilement. En général, les utilisateurs ratent les contrôles de défilement non standard et ne parviennent pas à faire défiler la liste pour voir toutes les options.
Site Web : priorité à la simplicité
Le déclin bienvenu de Flash signifie qu’il ne mérite plus ses trois têtes de mort. De nombreux concepteurs ont appris à le reléguer aux situations utiles et à ne pas l’utiliser simplement pour le spectacle. Toutefois, nous lui réservons toujours deux têtes de mort car d’autres continuent à l’implémenter à mauvais escient. Certains ignorent les instructions d’utilisabilité pour Flash, mais les nouvelles animations dégradent l’expérience de l’utilisateur en insérant des obstacles sur son chemin.
Résultats de recherche peu pertinents cc Après la navigation, la recherche est la manière la plus utilisée pour trouver ce que l’on cherche sur le Web. Jusqu’à il y a peu, la plupart des sites possédaient de mauvaises fonctions de recherche, qui ne donnaient pas la priorité aux résultats de manière intelligente. Les premiers logiciels de recherche ne parvenaient pas à récupérer de résultats utiles car ils classaient les listes en fonction de la fréquence d’apparition des termes de recherche sur chaque page, et non en fonction de leur pertinence. Peu importe le nombre de fois où le terme apparaît sur une page, mieux vaut placer les pages les plus pertinentes en premier. Ainsi, lorsque l’on tape un nom de produit, le premier résultat doit être la page du produit, à la différence des communiqués de presse et des documents annexes. La page du produit doit permettre d’obtenir des informations générales et être un point de départ pour accéder à d’autres informations pertinentes. Même aujourd’hui, peu de sites possèdent un outil de recherche fluide et efficace et beaucoup renvoient à des résultats si peu pertinents que nous pourrions conserver les trois têtes de mort. Toutefois, la recherche reste suffisamment utile sur les plus gros sites pour que nous lui réservions une tête de mort. En moyenne, nous donnons maintenant deux têtes de mort aux résultats de recherche peu pertinents.
Multimédia et vidéos volumineux cc Trois avancées ont rendu plus acceptables le multimédia et les clips vidéo sur le Web. Tout d’abord, la bande passante a suffisamment augmenté pour qu’il soit maintenant possible
3 : Révision des premières conclusions sur l‘utilisabilité
91
de télécharger plus rapidement des vidéos et autres présentations multimédias. Deuxièmement, leur qualité technique s’est améliorée et ce ne sont plus les films saccadés miniatures qui existaient auparavant. Ceci est en partie dû à l’augmentation de la bande passante et en partie à l’amélioration des logiciels de lecture. Troisièmement, les producteurs Web se sont améliorés : ils créent désormais des vidéos et autres présentations multimédias véritablement destinés au Web. L’utilisabilité du multimédia demeure un problème. Ces composants doivent toujours être conçus pour bien fonctionner lors d’une diffusion en ligne, car les utilisateurs ont tendance à être très impatients. La plupart des clips vidéo doivent durer moins d’une minute pour conserver leur attention. Nous lui conservons deux têtes de mort.
Mises en page figées cc Dire d’une page Web que sa mise en page est « figée » signifie que les informations qui y sont affichées conservent la même largeur, quelle que soit la taille de la fenêtre dans laquelle elles sont affichées. Si la fenêtre est trop étroite, une partie des informations sera masquée et ne s’affichera que si l’utilisateur fait défiler l’écran horizontalement. Nous savons, d’après nos tests, que les utilisateurs détestent la navigation horizontale et la dénigrent toujours lorsqu’ils la rencontrent. C’est une raison suffisante pour l’éviter, Les adolescents, maîtres de la technologie ? Les adolescents sont souvent dépeints comme étant plus à l’aise avec les nouvelles technologies et plus adeptes de la nouveauté que les adultes. Or, cette simplification est trop poussée. Croire que les adolescents sont maîtres de la technologie peut mener à des résultats désastreux. Les adolescents ont bien plus peur de la technologie qu’il n’y paraît. En fait, nous avons découvert que la plupart se refusent à télécharger des plug-ins et à cliquer sur des éléments inconnus car leurs enseignants ou leurs parents leur ont dit de ne pas le faire par peur des virus. En outre, lorsque le multimédia en ligne ne fonctionne pas comme ces jeunes personnes s’y attendent, par exemple lorsqu’une vidéo ne se lance pas
92
automatiquement ou nécessite une opération complexe, ils perdent patience et rejettent la faute sur le site Web. Dans nos tests sur des adolescents, nous avons vu qu’ils préfèrent abandonner plutôt que d’essayer de surmonter les difficultés techniques. Le jeune public a moins de succès avec les sites Web que les adultes car ils ont moins de patience. Et même si les adolescents apprécient les graphismes et le multimédia, ils ne disposent souvent pas de la configuration nécessaire pour en profiter. La plupart de ceux chez qui nous nous sommes rendus, à la maison ou à l’école, possédaient de vieux ordinateurs dépassés et lents, ne possédant pas les derniers logiciels, plug-ins ou haut-parleurs.
Site Web : priorité à la simplicité
mais il en existe deux autres. Tout d’abord, les utilisateurs s’attendent à trouver un défilement vertical. Comme toujours, mieux vaut employer des éléments standard. Deuxièmement, lorsque les pages proposent à la fois un défilement vertical et un défilement horizontal, l’utilisateur doit regarder dans les deux directions, opération plus compliquée. Pour les personnes souffrant d’une mauvaise visualisation spatiale, cela est particulièrement difficile. Généralement, les utilisateurs sont moins performants que les concepteurs en matière de raisonnement spatial et de tests de visualisation. Au contraire, un défilement vertical permet de consulter simplement le contenu : vous vous contentez de faire monter ou descendre le texte. Le risque du défilement horizontal est une raison suffisante pour ne pas figer les mises en page, ou au moins pour ne pas figer les largeurs de page sur une taille supérieure à celle de la plupart des fenêtres. Pour connaître la taille des fenêtres des navigateurs, on la déduit de la largeur de l’écran (fenêtre maximisée). Le grand public dispose actuellement d’écrans de 1024 pixels de large. A l’avenir, les écrans augmenteront en taille (on voit déjà aujourd’hui beaucoup d’écrans de 1600 pixels ou plus). Les utilisateurs ont tendance à profiter de ces grands écrans pour afficher plusieurs petites fenêtres au lieu d’agrandir une fenêtre pour remplir l’espace. Les mises en page figées demeurent toutefois peu souhaitables. L’utilisateur perd le bénéfice de son grand écran car la page ne s’élargit pas, même lorsqu’il y a plus d’espace disponible. Les mises en page figées entraînent des problèmes d’utilisabilité mais elles sont passées à trois têtes de mort grâce à la présence accrue des grands écrans. Il est très rare qu’un site propose des pages figées supérieures à 1024 pixels. Nous conseillons toutefois à la place une « mise en page fluide », à savoir une page Web qui s’allonge et se contracte avec les fenêtres pour avoir toujours la largeur exacte du navigateur, ni plus ni moins. Cela satisfait les utilisateurs possédant des écrans suffisamment grands pour avoir des lignes d’informations plus longues et ceux qui préfèrent des lignes plus courtes.
3 : Révision des premières conclusions sur l‘utilisabilité
93
Incompatibilité entre les plates-formes cc Les ventes internationales d’ordinateurs personnels ont atteint les 183 millions d’articles en 2004. Sur ce chiffre, seuls 3 millions étaient des Macintosh, soit 2 % du marché. Ce déclin risque de se poursuivre car la majeure partie de la croissance sur le Web proviendra des pays où Apple a peu voire pas de présence. La part de marché d’Apple est de 3 % aux Etats-Unis, 1,5 % en Europe et environ 1 % dans le reste du monde où se trouve le potentiel de croissance. Pour les sites Web, la compatibilité entre les plates-formes signifie de pouvoir travailler sur différents navigateurs, et non pas simplement sur différents ordinateurs.
Pauvre Mac Nous sommes au regret de vous signaler que la part de marché des Mac avoisine l’insignifiance. Notre société a été co-fondée par un ancien vice-président d’Apple Computer, Don Norman ; un autre de nos collègues, Bruce « Tog » Tognazzini, a écrit les premières directives d’interface hommemachine d’Apple. Nous avons été d’heureux et fidèles utilisateurs de Macintosh pendant 12 ans ; Jacob Nielsen a acheté son premier Mac en 1986 et a même utilisé un Lisa pendant les premières années. Pourtant, c’est le marché qui commande et il parle avec des chiffres et non avec des souvenirs.
94
Faut-il alors tester votre site Web sur un Mac pour vous adapter à ces 2 % du marché (3 % si le site n’est consulté qu’aux Etats-Unis) ? Oui, probablement, au moins pour les grands sites Web pour qui quelques tests et quelques correctifs peuvent mener à une augmentation de 2 % de leur activité. Les sites plus petits, en revanche, n’en tireront peut-être pas de bénéfices financiers suffisants. A vous de faire votre choix en fonction de votre budget. La conception inter plates-formes revêt toujours une certaine importance, c’est pourquoi nous lui attribuerons deux têtes de mort. Nous avions ramené cette directive à une tête de mort dans les présentations données en 2005 mais nous remontons la note du fait du succès du navigateur Firefox. Pour les sites Web, la compatibilité inter plates-formes signifie de pouvoir travailler sur différents navigateurs, et non pas simplement sur différents ordinateurs. Après que Microsoft a évincé Netscape pendant la guerre des navigateurs de 1997 à 2002, presque tous les utilisateurs se sont tournés vers Internet Explorer version 5, évitant ainsi aux sites d’être compatibles avec plusieurs navigateurs. Avec si peu de concurrence, Microsoft a réduit la fréquence de publication des nouvelles versions du navigateur, ce qui rend les tests sur plusieurs versions de navigateur moins nécessaires. Depuis 2003, seuls 2 % des utilisateurs d’Internet utilisaient une version 4, il était donc raisonnable de les ignorer. En 2006, les derniers avaient abandonné la version 4, du moins dans ce que l’on peut mesurer de manière raisonnable. En 2006, c’est Internet Explorer version 5 qui devient minoritaire, avec 5 % des utilisateurs. Ainsi en va-t-il du cycle de vie des navigateurs.
Site Web : priorité à la simplicité
Notre conseil est d’attendre cinq à six ans après le lancement d’une nouvelle version de navigateur avant d’arrêter de tester la version précédente. Par exemple, IE 5 a été lancé en 1999, vous pouvez donc commencer à ignorer la version 4 en 2004. IE 6 a été lancé en 2001, vous pouvez commencer à ignorer IE 5 en 2007. IE 7 a été introduit en 2006, vous devrez donc le prendre en charge jusqu’en 2012. La règle des cinq à six ans est utile pour la planification à long terme ; pour cesser la prise en charge d’un navigateur, consultez les journaux de votre serveur et voyez le pourcentage de clients qui emploient cette version. Plus récemment, de nouveaux navigateurs comme Firefox, Safari d’Apple et Opera ont croqué une certaine part de marché et Microsoft a dû reprendre le développement d’Internet Explorer pour lancer de nouvelles versions. Ainsi, à tout moment, un site Web peut être consulté par des utilisateurs employant différentes versions d’IE, ainsi que par des internautes utilisant des navigateurs tiers, notamment dans d’anciennes versions. Etant donné cette diversité renouvelée des navigateurs, on pourrait penser que l’incompatibilité entre plates-formes doit conserver ses trois têtes de mort. Ce n’est pourtant pas le cas. Les avancées technologiques sont venues à notre secours et ont réduit l’importance des problèmes inter plates-formes. Les nouveaux navigateurs sont plus compatibles avec les normes que ceux des années 1990, il est donc plus rare qu’un site Web fonctionne dans un navigateur et pas dans un autre. Des pannes continuent à arriver, vous devez donc tester votre site avec plusieurs navigateurs et plusieurs versions mais le problème a perdu en gravité. Même si nous faisons mention des développements technologiques, sachez que la retenue des concepteurs a aussi joué un rôle partiel. Les conceptions lourdes et novatrices sont devenues rares, un bon point car elles posent plus de problèmes dans les navigateurs minoritaires.
3 : Révision des premières conclusions sur l‘utilisabilité
95
Périphériques mobiles : un nouvel argument pour la conception inter plates-formes ? Nous pensions que la prédominance croissante des périphériques mobiles avec accès à Internet serait un argument fort en faveur de la conception Web inter plates-formes. Après tout, les téléphones portables, Blackberries, organiseurs et autres appareils de poche sont très différents des ordinateurs personnels et ne permettent pas d’afficher les sites conçus pour un environnement à écran large. Nos études sur des utilisateurs accédant à du contenu et des services mobiles nous ont convaincus du contraire. L’aspect mobile est tellement différent qu’il nécessite véritablement un site Web propre, avec une interface utilisateur simplifiée.
« Inter plates-formes » signifie en fait « sur quelques plates-formes similaires ». Ainsi, par exemple, les formats Mac, PC et Linux sont suffisamment similaires pour qu’une seule conception fonctionne sur les trois. Idem pour IE et Firefox, ou pour un écran 14 pouces et un écran 28 pouces (la différence du nombre de pixels disponibles ne doit pas excéder le facteur 4). D’autre part, il existe une différence de facteur 8 entre les tailles d’écran d’un smartphone Treo et d’un petit moniteur de 1024 × 768. De même, un écran de téléphone cellulaire plus traditionnel est 31 fois plus petit qu’un écran de bureau. Ces écarts sont trop importants pour qu’une même interface utilisateur s’adapte correctement.
Adaptation : comment les utilisateurs ont influencé l’utilisabilité Les utilisateurs s’étant adaptés à l’environnement en ligne et ayant appris à se servir des sites Web, six problèmes d’utilisabilité ont perdu en importance.
96
Même si une grande partie des utilisateurs que nous rencontrons aujourd’hui sont ceux d’il y a dix ans, les personnes se sont adaptées à l’environnement en ligne et ont amélioré leur capacité à utiliser le Web. En conséquence, certains problèmes d’utilisabilité sont devenus moins importants et ont perdu des têtes de mort. Au fil des années d’exposition sur le Web, les publics s’adaptent lentement à ces problèmes : ■
incertitude sur la possibilité de cliquer sur un élément ;
■
liens de couleur autre que le bleu ;
■
défilement ;
■
inscription ;
■
URL complexes ;
■
menus déroulants et menus en cascade.
Site Web : priorité à la simplicité
Incertitude sur la possibilité de cliquer sur un élément c Au cours de nos premières études, les utilisateurs ne savaient souvent pas où cliquer sur l’écran. Les premières pages Web étaient très graphiques et des liens étaient cachés dans des images totalement anodines. Bien entendu, en ignorant le lien, les utilisateurs ne trouvent pas les informations recherchées ; c’est donc un problème très important d’utilisabilité.
Dès que vous devez donner des instructions à l’utilisateur pour lui indiquer où cliquer, c’est que vous rencontrez un problème d’utilisabilité. Le site Diamond K se sent obligé de préciser : « click a product for more information » (cliquez sur un produit pour en savoir plus) car personne ne devine que l’on peut cliquer sur les photos. Les noms de produits auraient pu être transformés en liens hypertexte, cela aurait résolu le problème et éliminé les instructions superflues. Les photos de produits auraient pu agir comme des liens supplémentaires mais ne croyez pas que les utilisateurs vont cliquer sur des éléments qui ne ressemblent pas à des liens ou à des boutons. www.diamondkgypsum.com
3 : Révision des premières conclusions sur l‘utilisabilité
97
Aujourd’hui, les utilisateurs sont très habitués aux conventions de clic sur le Web. Ils savent qu’il est possible de cliquer sur un texte s’il est en couleur et souligné. Et ils savent qu’il est possible de cliquer sur des graphiques s’ils s’affichent en 3D, avec un effet de relief, et qu’ils ressemblent à des boutons. Tant que vous vous conformez à ces deux conventions, les utilisateurs ne devraient avoir aucun problème à cliquer sur vos liens. Savoir pourquoi ils doivent cliquer sur un lien est une autre affaire, bien entendu.
www.bicsportsurfboards.com
Sur quoi cliqueriez-vous pour passer la page d’introduction ? Sur « Skip intro » ? Sur cette page, il n’a aucun effet. Contrairement aux attentes de l’utilisateur, pour passer l’introduction, vous devez cliquer sur le drapeau britannique ou américain. Ceci peut faire gagner du temps en associant deux étapes en une : le choix d’un pays et l’arrêt de l’introduction. Toutefois, le non-respect du modèle d’interaction des utilisateurs fait souvent plus de mal que de bien. Tout gain de temps est annihilé par le potentiel d’erreur et de frustration. Enfin, les pages d’introduction ne sont qu’une perte de temps.
98
Site Web : priorité à la simplicité
Les liens n’ont plus nécessairement à être bleus. Mais ici, il est évident que « Bulletin » est un lien car le mot est coloré et souligné.
www.p-i-m-s.com
www.organize-everything.com Les titres soulignés en bleu marine sur cette page font penser qu’il est possible de cliquer dessus alors que ce n’est pas le cas. Le texte bleu véhicule une forte idée de clic, en particulier lorsqu’il est souligné ou utilisé pour des éléments de menus. La mauvaise utilisation d’indices visuels est source de confusion car l’interface ne répond pas aux attentes des personnes. Contrevenir aux conventions du Web réduit la confiance de l’utilisateur et décourage les personnes d’utiliser le site.
3 : Révision des premières conclusions sur l‘utilisabilité
99
Ce problème ne mérite maintenant plus qu’une tête de mort car il est relativement rare. Pourtant, quelquefois, nous rencontrons des sites Web où il est possible de cliquer sur le titre alors qu’on ne le croirait pas ; les problèmes de clic sont très fréquents chez les jeunes enfants. Ce problème n’est donc pas arrivé à la notation zéro tête de mort.
Liens de couleur autre que le bleu Au début, nous recommandions des liens bleus car c’était la couleur associée au clic. Aujourd’hui, les utilisateurs ont rencontré des liens dans de nombreuses autres couleurs qui fonctionnent à condition de se démarquer clairement du corps du texte et de changer d’apparence lorsque l’utilisateur a cliqué dessus. Une certaine résistance à faire défiler les pages persiste. On voit encore souvent des utilisateurs abandonner une page trop rapidement car elle ne leur semble pas pertinente.
(Page de droite, en haut) La conception et la mise en page graphiques de la page d’accueil d’Atlantis ne proposent pas d’indices adaptés pour signaler qu’il a plus d’informations que ce que l’on voit. L’image de la résidence entre parfaitement dans la fenêtre et le titre « Begin Your Adventure » semble marquer la fin de la page. Vérifiez que les éléments du design ne ressemblent pas à des marqueurs de fin de page. Les utilisateurs expérimentés eux-mêmes ont besoin d’indices pour savoir qu’il existe des informations pertinentes sous la zone visible. Malheureusement, sur ce site, ils ne sauront pas qu’il existe de nombreuses données intéressantes situées plus bas sur la page.
100
Si vous n’avez pas de raison particulière de préférer une autre couleur, nous continuons de recommander le bleu. Il y a toutefois si peu de problèmes à utiliser une autre couleur que ce problème ne mérite même plus une tête de mort.
Défilement cc Nous l’avons vu au Chapitre 2, certains utilisateurs ne font toujours pas défiler les pages Web pour déterminer où se rendre ou s’ils vont quitter la page. Le problème n’est plus aussi sérieux qu’il l’était aux premiers jours du Web mais nous avons rencontré de nombreux testeurs qui ne faisaient défiler que rarement ou pas du tout. Aujourd’hui, les utilisateurs se sont habitués aux longues pages Web et savent qu’ils doivent parfois faire défiler le texte. S’ils décident d’avancer dans une page, ils savent généralement comment faire défiler le texte. Pourtant, une certaine résistance persiste. Ce problème n’est pas réservé à Internet. Les journalistes inscrivent leurs articles de une sur le premier écran, c’est-à-dire sur la partie supérieure de la première page du journal, pour qu’ils soient visibles sur les présentoirs, avant même que les lecteurs ne déplient le journal pour le lire. Sur le Web, on voit encore souvent des utilisateurs abandonner une page trop rapidement car elle ne leur semble pas pertinente alors qu’en réalité les informations dont ils avaient besoin se trouvaient plus bas et n’étaient pas visibles au premier regard.
Site Web : priorité à la simplicité
www.atlantis.com
www.atlantis.com La page d’accueil d’Atlantis, après défilement : voyez toutes les informations intéressantes que l’on pourrait manquer. Elles devraient être affichées dès le premier écran. Les clients décident souvent de réaliser une transaction en fonction de ce qu’ils voient sans faire défiler. N’oubliez pas de consulter votre page sous différentes résolutions d’écran pour insérer suffisamment d’indices visuels dans la zone consultable et piquer la curiosité des internautes.
3 : Révision des premières conclusions sur l‘utilisabilité
101
Nous continuons à accorder deux têtes de mort à ce problème d’utilisabilité car il persiste à porter tort, plus que de raison ! Ceci est probablement dû aux différences de jugement des concepteurs et des utilisateurs. Les professionnels du Web savent lorsqu’une page donnée répond à un problème et peuvent supposer que les utilisateurs feront défiler la page pour chercher le lien vers cette solution. Et en effet, les internautes le feraient s’ils savaient que les informations s’y trouvent. Pendant les premières secondes où ils jugent une page, ils prennent leur décision en fonction de ce qui est visible. Si ce n’est pas assez prometteur, certains partiront sans faire défiler.
Inscription c Aux premiers jours du Web, l’inscription constituait un obstacle important et les internautes ne savaient pas s’ils devaient faire confiance aux sites en leur communiquant leurs informations personnelles. Aujourd’hui, les utilisateurs sont plus habitués à saisir ces informations, à condition de faire confiance au site et d’avoir envie d’acheter les produits ou services proposés. Ils savent s’inscrire sur un site s’ils ont décidé d’y faire une transaction.
Le service postal des Etats-Unis exige de ses clients qu’ils s’inscrivent avant d’acheter des produits sur son site. Permettre à des personnes d’acheter sans s’inscrire est une meilleure approche commerciale car il y a moins de risques que l’utilisateur ne s’en aille. Ainsi, les personnes essaient souvent de s’inscrire en créant un nouveau nom d’utilisateur et un mot passe au mauvais endroit, même si l’on peut lire « Utilisateurs déjà inscrits ». L’internaute est tout simplement attiré vers les zones de texte et y inscrit immédiatement ses informations ; il est ensuite dérouté lorsque le système lui envoie un message d’erreur. Rendre l’inscription optionnelle au terme d’un achat est moins intrusif pour un client car cela n’interrompt pas ses achats et lui laisse le choix.
De même, de nombreux sites de commerce électronique ont conçu des chemins alternatifs pour l’achat, grâce auxquels les utilisateurs n’ont pas officiellement à s’inscrire. Bien entendu, ils doivent malgré tout entrer la majeure partie de leurs informations personnelles, notamment leur numéro de carte de crédit, mais pour beaucoup cela semble moins intrusif lorsqu’il s’agit d’une transaction d’achat.
www.usps.com
102
Site Web : priorité à la simplicité
Pourtant, les utilisateurs n’aiment toujours pas s’inscrire sur les sites Web, qui perdent une grande part d’activité si l’inscription prématurée est obligatoire ou s’ils posent trop de questions inquisitrices. Dans l’ensemble, l’inscription demeure une cause de perte d’activité, mais pas autant que par le passé. Une tête de mort.
URL complexes cc Inutile de produire des URL longues de plusieurs centaines de caractères.
Les URL sont toujours aussi déplorables ; les URL complexes portent tort à la fois à la simplicité d’utilisation et à l’optimisation des moteurs de recherche. Inutile de produire des URL longues de plusieurs centaines de caractères. La plupart des sites Web possèdent moins d’un million de pages et devraient donc se contenter d’URL de 20 à 50 caractères. Nous avons ramené le problème des URL complexes à deux têtes de mort car les utilisateurs ne se basent plus sur elles pour interpréter une page Web ni pour naviguer sur un site. Les utilisateurs experts continueront parfois à jouer avec les URL, mais de plus en plus rarement, les URL difficiles à manipuler ne sont donc plus aussi dangereuses que par le passé. Il existe aussi des services comme TinyURL qui aident les utilisateurs experts à créer des URL plus courtes pour les envoyer à des amis par e-mail.
Menus déroulants et menus en cascade c Par le passé, les éléments dynamiques du Web déroutaient souvent les utilisateurs mais aujourd’hui, ils sont habitués aux menus déroulants, voire aux menus hiérarchiques qui tombent en cascade sur plusieurs niveaux. Plus le menu est complexe, plus il est difficile à manipuler. Nous conservons donc toujours une tête de mort pour les menus en cascade, qui présentent des problèmes d’utilisabilité lorsqu’ils sont trop peu élaborés ou trop longs. Réfléchissez-y à deux fois avant d’insérer un menu complexe, mais faites-le si cela aide véritablement le site. Attention toutefois aux problèmes d’accessibilité et souvenez-vous que les personnes handicapées physiques ont plus de difficultés à contrôler le pointeur.
3 : Révision des premières conclusions sur l‘utilisabilité
103
Auto-discipline : comment les concepteurs ont allégé les problèmes d’utilisabilité Treize problèmes d’utilisabilité posent moins problème aujourd’hui car la plupart des concepteurs ont appris à concevoir pour le Web.
Nous avons pu constater une amélioration graduelle de treize problèmes d’utilisabilité liée au fait que les concepteurs Web ont gagné de l’expérience et se sont disciplinés. Ces problèmes représentent toujours des désagréments potentiels car des designers inexpérimentés, qui n’ont pas eu à constater l’échec de leurs premiers sites, peuvent être tentés de les faire renaître. Toutefois, les designers échaudés savent maintenant quand et comment utiliser la technologie pour créer une bonne expérience utilisateur. Les domaines qui se sont améliorés sont : ■
les plug-ins et les technologies de pointe ;
■
l’interface utilisateur 3D ;
■
le design encombré ;
■
les pages de garde ;
■
les graphiques mobiles et le texte défilant ;
■
les designs d’interface utilisateur personnalisés ;
■
la non-communication de l’auteur des informations ;
■
les néologismes ;
■
le contenu obsolète ;
■
l’incohérence à l’intérieur du site ;
■
les demandes prématurées d’informations personnelles ;
■
les sites multiples ;
■
les pages orphelines.
Nous l’avons indiqué précédemment, nous ne pouvons pas détailler ici les nombreuses petites instructions ciblées sur l’utilisabilité qui peuvent continuer à poser des problèmes aux utilisateurs. En fait, la plupart des sites Web continuent à enfreindre plusieurs instructions spécialisées. Ainsi par exemple, notre recherche a identifié 207 instructions d’utilisabilité pour la conception des sites de commerce électronique. Il a depuis longtemps été précisé à tous ceux qui proposent un produit dans plusieurs couleurs d’étiqueter leur nuancier. Or, nous continuons à rencontrer des sites de commerce électronique qui ne respectent pas cette règle évidente. C’est pourquoi nous compilons ces règles dans des listes, afin de réduire le risque d’oubli.
104
Site Web : priorité à la simplicité
www.hurricanepasstraders.com Le site Hurricane Pass Traders n’étiquette pas ses nuanciers de couleurs, les utilisateurs ne savent donc pas laquelle des options du menu déroulant fait référence aux diverses couleurs. On peut concevoir que les nuanciers et les options de menu soient présentées dans le même ordre (« black » fait certainement référence au dernier choix dans les deux cas) mais les utilisateurs seraient plus en confiance si le nuancier avait été étiqueté, en particulier parce que certains des noms de couleurs sont assez ambigus. Que représente par exemple « asparagus » (asperge) ? L’asperge que nous achetons au supermarché est d’un vert vif qui ne correspond à aucune des nuances de la capture. Le site contrevient à une autre instruction d’utilisation de la couleur. On ne trouve pas d’option pour voir le short dans les autres couleurs ; à vous donc d’imaginer ce que pourrait donner par exemple la couleur amande. Inutile de renvoyer les acheteurs vers le numéro de téléphone pour obtenir des informations sur la couleur. Il vaut bien mieux, bien sûr, présenter les couleurs.
3 : Révision des premières conclusions sur l‘utilisabilité
105
www.store.nordstrom.com En étiquetant son nuancier, Nordstrom facilite la compréhension des noms de couleurs, même s’ils sont assez étranges, comme « Pink Martini ». Malheureusement, ce site ne permet pas aux utilisateurs de voir leurs produits dans leur couleur préférée. Le lien vers « view colors/patterns » (voir les couleurs/motifs) semble prometteur mais affiche une fenêtre contextuelle peu intéressante, montrant des sweats empilés dans quatre des cinq couleurs disponibles. C’est mieux que rien, mais il est étrange qu’il manque une couleur et il est difficile d’imaginer ce « bleu rêve » (dreamy blue) alors que vous n’en voyez qu’un petit morceau.
106
Site Web : priorité à la simplicité
www.cadillaceurope.com Cadillac propose des nuanciers étiquetés et modifie les photos de l’extérieur et de l’intérieur du véhicule lorsque l’utilisateur clique sur les différentes couleurs. Ici, l’utilisateur a choisi un « Chili red » pour l’extérieur et un « Cuir ebony » pour l’intérieur. Ces retours d’informations en temps réel sont particulièrement importants lorsqu’un client coordonne deux choix de couleurs.
3 : Révision des premières conclusions sur l‘utilisabilité
107
Plug-in et technologies de pointe c Les technologies de pointe étaient une malédiction aux débuts du Web et les sites ont perdu beaucoup de clients potentiels qui refusaient de télécharger un nouveau plugin ou une mise à niveau du logiciel pour les utiliser. Deux faits ont modifié cet état de choses. Tout d’abord, les designers sont devenus plus raisonnables et ont reconnu qu’ils ne pouvaient pas obliger les utilisateurs à utiliser de nouvelles technologies. Lorsque l’internaute rencontre une boîte de dialogue de téléchargement, il l’annule le plus souvent, par peur des virus et pour ne pas avoir à attendre le téléchargement ni même parfois le redémarrage de l’ordinateur pour consulter la page Web. Aujourd’hui, la plupart des concepteurs s’appuient sur une technologie qui a fait ses preuves, vieille de quelques années, pour éviter ce problème. La limitation en matière de conception est la principale raison du changement. Mais les améliorations de la technologie ont également eu un impact. L’affinement des technologies de pointe et des plug-in a permis de les mettre à niveau et de les utiliser de manière plus souple. Le navigateur Firefox, en particulier, possède une interface habile pour mettre à jour les plug-in. Ces deux améliorations ont aidé à ramener le problème des plug-in et de la technologie de pointe à une tête de mort. Nous recommandons toujours de vous limiter à des technologies vieilles d’au moins deux ans et de ne pas obliger les utilisateurs à mettre à niveau l’un de leurs outils pour visiter votre site. Ces problèmes persistent, nous ne pouvons donc pas attribuer zéro tête de mort.
108
Site Web : priorité à la simplicité
Interface utilisateur 3D c Les interfaces utilisateur 3D sur le Web sont presque toujours trop difficiles à utiliser et n’en valent généralement pas l’effort. Le problème de base est que les images 3D sont affichées sur une surface à deux dimensions, l’écran, et contrôlées par un dispositif de saisie à deux dimensions, la souris. Ajoutez à cela le zoom et les multiples angles de caméra et le risque de problème s’accroît. Les utilisateurs ont souvent des difficultés à utiliser les interfaces 3D pour présenter les produits sous le bon angle. Ils passent la majeure partie du temps à se battre avec l’interface plutôt qu’à visualiser le produit. Mieux vaut optimiser l’interface utilisateur pour la réalité de l’écran plat que d’inonder les utilisateurs de jolis mannequins en 3D difficiles à manipuler.
Les interfaces en trois dimensions ont un rôle à jouer dans les applications médicales par exemple, où elles peuvent être essentielles pour visualiser des tumeurs, des incisions chirurgicales et des patients en trois dimensions. De même, les applications d’architecture constituent une utilisation naturelle de la 3D car les structures de la vie réelle sont construites en trois dimensions. Mais la plupart des applications du Web n’exigent pas véritablement la 3D. Lorsque vous achetez des produits sur des sites de commerce électronique, par exemple, il n’y a généralement aucun problème à choisir des objets 3D en fonction de photos en 2D. Mieux vaut optimiser l’interface utilisateur pour la réalité de l’écran plat que d’inonder les utilisateurs de jolis mannequins en 3D difficiles à manipuler. Dans la majorité des cas, les interfaces 3D font partie du passé. Les premières technologies 3D ne fonctionnaient généralement pas, les designers ont donc cessé de torturer leurs utilisateurs avec. De temps à autre, toutefois, un nouveau fournisseur de technologie 3D apparaît et convainc un pauvre responsable de commerce électronique peu suspicieux de parsemer son site de 3D. Nous réservons donc toujours une tête de mort à ce problème.
3 : Révision des premières conclusions sur l‘utilisabilité
109
www.jcrew.com
Au lieu de faire appel à un modèle en 3D qui pivote, le site J. Crew propose quatre photos professionnelles de cette robe, avec un gros plan et des angles bien choisis. Le site permet également de voir la robe dans chacune des couleurs disponibles. Deux petits inconvénients à ce design: il faudrait signaler la vue actuelle par un numéro en gras au lieu d’utiliser le souligné, car le texte souligné est plutôt synonyme de lien. D’autre part, il n’est pas nécessaire qu’il y ait un lien Suivant lorsque l’on se trouve sur la dernière image de la série (ni un lien Précédent lorsque l’on se trouve sur la première image).
110
Site Web : priorité à la simplicité
Design encombré c Les pages qui noient les utilisateurs sous une profusion d’éléments mobiles, de lumières clignotantes et de liens mal structurés représentaient une véritable malédiction dans les premières années du Web. Les designers semblaient croire que plus vous en jetiez aux utilisateurs, plus vous aviez de chances que quelque chose attire leur attention. En réalité, les utilisateurs ont abandonné ces sites et passé leur temps sur des lieux moins modernes. Aujourd’hui, certains sites disposent de plus de fonctionnalités qu’il ne leur en faut, d’autres ont des graphiques trop grands et peu pertinents mais les designs surchargés ne sont plus aussi fréquents qu’auparavant, nous avons donc ramené ce problème à une tête de mort. Les sites Web se concentrent bien plus sur l’affichage d’informations professionnelles, c’est ce que souhaitent également les utilisateurs.
Pages de garde c Les pages de garde doivent disparaître. Elles donnent l’impression que le site s’occupe plus de son image que de résoudre les problèmes des utilisateurs.
Les pages de garde étaient l’un des premiers problèmes des conceptions Web car elles empêchaient d’atteindre les éléments voulus. Nous étions tout près de leur attribuer zéro tête de mort car nous n’en voyons presque plus. Mais certains sites persistent à ralentir les utilisateurs avec cette abomination, nous conservons donc un avertissement d’une tête de mort. Les nouveaux sites de petites entreprises semblent particulièrement susceptibles de se faire avoir, peut-être parce que leurs propriétaires souhaitent un design moderne au lieu de se préoccuper de satisfaire les besoins des clients. Les pages de garde doivent disparaître. Elles donnent l’impression que le site s’occupe plus de son image que de résoudre les problèmes des utilisateurs. S’il est vrai qu’une page d’accueil doit immédiatement communiquer ce dont traite le site et ce que l’utilisateur en ressortira en le visitant, elle doit aussi respecter le temps du visiteur, faute de quoi il partira tout simplement. L’un des premiers arguments, biaisé, en faveur des pages de garde était qu’elles fonctionnent comme la couverture d’un magazine, donnant le ton du site à l’aide d’une image attractive. Une image attractive aide certainement un site, elle
3 : Révision des premières conclusions sur l‘utilisabilité
111
donne la priorité à l’information et guide l’œil de l’utilisateur vers les fonctions les plus importantes. Mais une couverture de magazine n’a pas besoin de communiquer son utilisabilité. Une page d’accueil qui le fait apporte une importante contribution à la réputation de la société.
www.wynnlasvegas.com Ceci n’est pas tout à fait une page de garde car elle propose aux utilisateurs un choix de trois endroits où aller. Mais ce n’est pas non plus vraiment une page de routage car les trois options doivent être proposées sur la page d’accueil, comme c’est aussi le cas ici. Cette page est donc une perte de temps.
La différence la plus importante entre une couverture de magazine et la page d’accueil d’un site réside dans le fait que la couverture doit piquer l’intérêt des personnes pour les amener à acheter le magazine tandis qu’une page d’accueil est consultée par des personnes qui ont déjà choisi de visiter le site. Deux rôles très différents, deux conceptions très différentes. N’imposez pas une page de garde sur votre site Web. Souvenez-vous que vous avez moins de deux minutes auprès des prospects avant qu’ils ne décident de quitter votre site. Ne gâchez pas tout avec une page de garde.
112
Site Web : priorité à la simplicité
Graphiques mobiles et texte défilant c Sur le Web, comme dans la vie, les gens qui parlent fort font généralement fuir leur auditoire car on suppose qu’ils n’ont rien d’important à dire. Les testeurs nous confirment d’ailleurs que le texte qui défile et les images qui s’animent sans cesse leur paraissent inutiles et qu’ils les ignorent. Les sites s’en sont aussi rendu compte. Le texte défilant et les animations frivoles n’étant plus aussi fréquents, nous avons ramené ce problème à une seule tête de mort.
Designs d’interface utilisateur personnalisés cc A moins que vos créations ne ressemblent à de vraies barres de défilement, les utilisateurs risquent de les manquer. A moins qu’elles ne se comportent comme de vraies barres de défilement, les utilisateurs risquent de ne pas savoir afficher le contenu souhaité.
Les utilisateurs s’attendent à ce que les boutons radios ressemblent à des boutons radio et se comportent comme des boutons radio. Ceci vaut également pour n’importe quel élément de conception standard des interfaces graphiques utilisateurs. Malheureusement, certains concepteurs Web ressentent le besoin pressant d’introduire leurs propres designs pour certains éléments de dialogue, tels que boutons et barres de défilement. Les barres de défilement semblent être l’élément d’interface utilisateur le plus souvent contrefait. Dans notre test utilisateur, nous avons souvent constaté des échecs dus à des barres de défilement personnalisées. A moins que vos créations ne ressemblent à de vraies barres de défilement, les utilisateurs risquent de les manquer. A moins qu’elles ne se comportent comme de vraies barres de défilement, les utilisateurs risquent de ne pas savoir afficher le contenu souhaité. Dans l’un ou l’autre cas, ils ne pourront faire des affaires avec vous que sur la base de quelques éléments visibles sans faire défiler l’écran et pourraient même ne jamais voir votre gamme complète.Assurer l’utilisabilité d’une barre de défilement promet des retours sur investissement supérieurs à la plupart des autres instructions d’utilisabilité. Heureusement, ces commandes personnalisées ont diminué ces dernières années, le problème a donc été ramené à deux têtes de mort.
3 : Révision des premières conclusions sur l‘utilisabilité
113
www.norahjones.com Respectez les standards d’interface utilisateur en faisant appel à des éléments traditionnels. Les barres de défilement personnalisées (avec un soleil jaune ici) risquent de créer des problèmes d’utilisabilité. Les internautes n’utilisent pas les défilements « personnalisés » lorsqu’ils sont trop éloignés de la norme, soit parce qu’ils ne les remarquent pas, soit parce qu’ils ne savent pas les utiliser. N’oubliez pas, un élément de défilement évident permet au client de voir toute l’étendue de votre offre. Il est aussi plus facile à créer : moins vous y travaillez, mieux ce sera.
114
Site Web : priorité à la simplicité
Ne pas indiquer l’auteur des informations c La confiance et la crédibilité sont des problèmes majeurs sur le Web, où même les plus grandes sociétés ne se présentent qu’avec quelques mots et quelques images dans une fenêtre de navigateur.
Pouvez-vous faire confiance au site de commerce électronique sur lequel vous voulez commander ? Vont-ils accepter de reprendre votre produit s’il arrive en mauvais état ? Si vous vous inscrivez sur un site, vendra-t-il vos coordonnées à une société de marketing pour vous exposer à un spam incessant de plus ou moins bon goût ? La confiance et la crédibilité sont des problèmes majeurs sur le Web, où même les plus grandes sociétés ne se présentent qu’avec quelques mots et quelques images dans une fenêtre de navigateur. La société la plus décevante et la plus contraire à l’éthique peut avoir une aussi belle image qu’une vieille société de bonne réputation et qui affiche des relations honnêtes avec sa clientèle. Pour la bonne marche d’un site, l’utilisateur doit savoir qui en est l’auteur, comment il a été financé et s’il est crédible. On trouve maintenant fréquemment une section dédiée, intitulée « A propos de… ». Ces zones présentent leurs propres problèmes d’utilisabilité, mais elles permettent aux utilisateurs de connaître l’auteur des informations qu’ils voient sur le site. Ce problème a été ramené à une tête de mort.
Des pages « A propos de » qui n’en disent pas assez Lorsque nous avons testé l’utilisabilité de la fonction « A propos de » sur quinze sites d’entreprises, nous avons découvert que les utilisateurs ne trouvaient les informations voulues que 70 % du temps. Ils avaient des difficultés en particulier à retrouver des informations essentielles sur la société comme : ■
Son principal dirigeant ou représentant : 59 % de succès
■
Ses coordonnées correctes : 62 % de succès
■
L’éthique de l’entreprise : 59 % de succès
■
Les dates et grands événements de l’entreprise : 58 % de succès
Le mauvais résultat des coordonnées est déplorable pour deux raisons. Tout d’abord, les internautes les recherchent et sont frustrés lorsqu’elles ne sont pas disponibles. Deuxièmement, c’est l’un des principaux marqueurs permettant de juger de la crédibilité d’une société : s’agit-il d’une opération temporaire ou possède-t-elle une adresse et un numéro de téléphone qu’elle n’hésite pas à communiquer ?
3 : Révision des premières conclusions sur l‘utilisabilité
115
Néologismes c A l’époque de la bulle Internet, chaque site Web pensait devoir inventer son propre vocabulaire pour décrire ses services. Ces mots inventés diminuaient l’utilisabilité car les utilisateurs ne savaient plus sur quelles options de menu cliquer. Ces néologismes étaient destinés à inciter les utilisateurs à explorer le site mais ils se perdaient et préféraient fuir. Les néologismes sont également un désastre pour l’optimisation des moteurs de recherche car les utilisateurs ne vont à l’évidence pas rechercher des mots qu’ils n’utilisent pas. A l’inverse, utiliser un langage de base et des termes simples améliore le classement du site dans les moteurs de recherche et sa probabilité d’être trouvé par les internautes. Quelques sites continuent à utiliser leur propre terminologie, mais cela devient de plus en plus rare du fait des pertes d’activité qui en découlent. Les néologismes ne sont plus aujourd’hui qu’un problème à une tête de mort.
Contenu obsolète cc Les informations obsolètes pourraient être considérées comme un problème à trois têtes de mort car elles augmentent de manière monotone à mesure que le Web se développe. Le problème ne concerne pas ces informations en soi, bien entendu. Organisées en archives et en informations de fond, elles ont une place importante sur le Web. Le problème survient lorsque les utilisateurs se voient proposer des informations obsolètes à la place des dernières actualités. Généralement, cela survient sur des sites qui ne sont pas entretenus. Mais les sites plus importants, gérés par des professionnels, actualisent maintenant régulièrement leurs pages principales, nous avons donc ramené ce problème à deux têtes de mort.
116
Site Web : priorité à la simplicité
www.rottentomatoes.com Méfiez-vous des jolies métaphores et des noms que personne ne comprend. Dans la plupart des cas, les internautes veulent obtenir rapidement leurs informations. Ils comptent sur des titres clairs et concis et des intitulés qui les dirigent dans la bonne direction. Ceux qui exigent qu’ils déchiffrent du code sont décourageants. Le thème de la tomate sur ce site de cinéma ne communique pas les concepts de base. Des catégories comme « Certified Fresh » (Fraîcheur garantie), « Critics Tomatometer » (Tomatomètre de la critique) et « Cream of the Crop » (La crème du panier) sont assez abstraites. A première vue, difficile de savoir ce que signifient la tomate et les icônes vertes et ce qu’elles ont à voir avec les critiques de cinéma. Les concepteurs ont peut-être voulu réserver ce dessin vert aux flops des salles obscures, mais beaucoup ne comprendront pas cette subtilité et y verront plutôt une astérisque.
3 : Révision des premières conclusions sur l‘utilisabilité
117
Incohérences dans un site Web cc Au départ, chaque page n’existait que pour elle-même. Les nouvelles étaient conçues pour l’instant présent, sans s’inquiéter vraiment de leur relation avec le reste du site. Les sites dérivés étaient souvent différents, difficile de savoir s’ils appartenaient à la même société et s’ils faisaient partie du même service. Depuis l’année 2000 au moins, les grandes sociétés ont fait un effort pour afficher une façade unifiée et présentent désormais des sites bien plus cohérents, du moins en termes de contenu. La plupart comportent toujours des domaines conçus par des équipes différentes et cela se voit. Les intranets sont une autre affaire : ils demeurent souvent incohérents, avec des conceptions très différentes selon les services. Ce problème conserve ses trois têtes de mort pour les intranets et deux seulement pour Internet.
Demandes prématurées d’informations personnelles cc Si, lors d’une réception, un étranger s’approche de vous et vous demande votre numéro de téléphone, votre date de naissance, votre numéro de sécurité sociale et le dossier médical de votre grand-mère, il y a des chances que vous le fuyiez. Il en va de même pour les sites Web. S’ils sont trop curieux trop tôt, les internautes refusent de répondre à leurs questions. Les sites doivent établir une certaine relation avec les utilisateurs avant de pouvoir commencer à leur poser des questions personnelles. La plupart des sites Web ignoraient ce conseil de bon sens. Les meilleurs sites sont maintenant un peu plus sobres et reportent les questions plus personnelles lors de la transaction. A l’évidence, si vous devez livrer un colis à un client, mieux vaut connaître son adresse ; l’acheteur ne fera alors aucune difficulté à vous la donner au moment idoine. Mais si, pour entrer sur un site et y naviguer, la personne doit communiquer ses informations personnelles, il y a peu de chances qu’elle insiste. Les demandes d’informations personnelles prématurées conservent deux têtes de mort car on trouve encore trop de sites pour qui cela reste une bonne technique marketing.
118
Site Web : priorité à la simplicité
Sites multiples cc A une époque, les sociétés avaient tendance à lancer de nouveaux sites Web dès que l’occasion se présentait, et tous à des adresses différentes. Avec une telle profusion de pages, les utilisateurs ne savaient pas comment obtenir certains services d’une société et ne trouvaient pas d’architecture d’information unifiée pour la recherche et la navigation. Aujourd’hui, la plupart des sociétés ont adopté la stratégie Internet, le problème n’est donc plus aussi important. Nous lui gardons toutefois deux têtes de mort car des micro-sites continuent à apparaître, en particulier pour des campagnes publicitaires. Mieux vaut disposer d’une page principale dédiée pour chaque campagne, regroupées au sein du même site Web.
Pages orphelines Les pages orphelines sont des pages qui n’ont aucun lien avec d’autres pages. Si vous atterrissez sur l’une d’elles, vous ne pouvez aller nulle part ailleurs sur le site. Ces pages étaient assez fréquentes dans les années 1990 mais ont presque disparu aujourd’hui, d’où sa notation. Presque tous les concepteurs ont reconnu la nécessité de proposer un minimum d’options de navigation pour se connecter au reste du site.
Evolution des premières conclusions Dans ce chapitre, nous avons revisité trente-quatre des plus gros problèmes des sites Web et noté chacun au moyen de têtes de mort pour indiquer l’importance qu’ils continuent à avoir aujourd’hui. Notre échelle allait de 0 à 3, nous aurions donc pu attribuer un total de 102 têtes de mort si aucun de ces problèmes ne s’était amélioré. Nous n’en avons distribué que 59 au total. Les problèmes d’utilisabilité que nous constatons aujourd’hui persistent donc pour 58 % – ou leur potentiel de désagrément a augmenté de 42 %. Le camembert montre l’état actuel des problèmes d’utilisabilité, entre ceux qui restent importants et ceux qui le sont moins aujourd’hui grâce aux améliorations de la technologie et de la conception, mais aussi de l’adaptation des utilisateurs à divers éléments de conception.
3 : Révision des premières conclusions sur l‘utilisabilité
119
De nombreux analystes sont extrêmement enthousiastes sur les avancées de la technologie Internet, mais il est intéressant de noter que cette technologie n’a compté que pour 10 % des améliorations. Comme le montre le graphique, les changements de comportement des utilisateurs ont en fait eu un impact plus important, menant à 11 % des améliorations. Le plus gros progrès, entraînant la plus grande diminution de têtes de mort, est dû aux concepteurs qui se sont limités dans l’application de techniques gênantes. L’amélioration des conceptions compte pour 21 % de la diminution du nombre de têtes de mort, et ce grâce à des concepteurs plus responsables. Malheureusement, il n’existe aucune garantie qu’ils continueront dans cette voie. La prochaine génération ne comprendra peut-être pas les désagréments subis par les clients du fait des violations des premières directives. Les problèmes devenant de plus en plus rares sur le Web, il existe un risque que des designers inexpérimentés commettent les erreurs dont ont fait les frais des collègues plus expérimentés.
ÕÌViÃÕÀi `ià VVi«ÌiÕÀà `>«Ì>Ì V«ÀÌiiÌ>i jÀ>Ìà ÌiV
}µÕià ,iÃÌi Õ «ÀLmi
Distribution du potentiel de désagrément des trente-quatre problèmes d’utilisabilité traités dans ce chapitre.
120
Site Web : priorité à la simplicité
En savoir plus Quelques-unes des premières études sur l’utilisabilité du Web mentionnées dans ce chapitre ont été détaillées dans des rapports qui sont toujours disponibles à l’adresse www.useit. com/papers. Pour le test de 1994 sur cinq sites Web, voir « 1994 Study of Web Usability » ; pour les études de 1994 sur l’utilisabilité des intranets, voir « Sun Web: User Interface Design for Sun Microsystems’ Intranet » ; pour les études de 1995 sur les alternatives de conception Web, voir « 1995 Design of Sun Microsystems’ Website, Using Interactive Design and User Testing » et pour la recherche de 1997 sur la manière dont les gens lisent en ligne, voir « How to Write for the Web ». Pour obtenir des détails sur d’autres rapports et vous procurer les instructions citées dans ce chapitre, rendez-vous à l’adresse www.nngroup. com/ reports et consultez les sections Flash, Teenagers, E-Commerce et
Cinquante pour cent des améliorations sont dus au fait que les concepteurs Web ont décidé de suivre plus rigoureusement les instructions d’utilisabilité ; or, le pourcentage de problèmes qui continuent à nous assaillir est en fait plus important que ne l’indique le camembert. Les 21 % de problèmes qui ont été allégés par les changements de comportement des utilisateurs et par la technologie représentent la seule partie véritablement acquise. Les autres 21 % d’améliorations portées au crédit d’une meilleure conception ne sont pas définitifs. Cela pourrait changer avec le temps, il faut donc toujours prendre en compte 79 % des problèmes initiaux. Autrement dit, la majeure partie de nos conseils d’utilisabilité des années 1990 sont toujours valables même si certains des inconvénients ne sont plus aussi gênants. En général, il est étonnant de voir que nos premières conclusions sont souvent confirmées, même si les études récentes en donnent une idée plus nuancée et plus détaillée. Pour cette raison, nous pensons que les problèmes d’utilisabilité continueront à être d’une importance majeure au cours des années à venir.
3 : Révision des premières conclusions sur l‘utilisabilité
121
125 Facteurs de gravité des problèmes 129 Echelle de désagrément
132 Les raisons de l’échec des utilisateurs
134 Suffit-il de se concentrer sur les pires problèmes ?
4
Hiérarchiser les problèmes d’utilisabilité L’utilisabilité peut devenir une affaire de vie ou de mort. En temps de guerre, le pilote d’un avion de combat a un avantage certain si l’interface des systèmes de visée et de tir est une seconde plus rapide seulement que celle de son ennemi. Sur le Web, bien entendu, l’utilisabilité n’a pas un rôle aussi dramatique. Elle peut toutefois déterminer le succès ou l’échec de votre site Web. Comment discerner les problèmes d’utilisabilité susceptibles d’avoir les conséquences les plus sérieuses pour votre site Web ? Quels sont ceux à résoudre et ceux à ignorer ? Dans ce chapitre, nous verrons les problèmes qui créent le plus de gêne pour le public et les plus grandes pertes d’opportunités pour les entreprises. Grâce à ces informations, vous pourrez mieux décider comment affecter vos ressources.
C’est grave docteur ? ■
Les problèmes très sévères entraînent un coût inacceptable ou une perte d’activité, soit en empêchant les personnes d’utiliser le site, soit en les en faisant fuir.
■
Les problèmes moyens génèrent confusion et frustration chez les utilisateurs et une perte d’activité pour certains sites, mais pas autant que les problèmes sévères.
■
Les problèmes peu graves sont superficiels ou irritants mais n’affectent pas l’activité du site. Bien sûr, l’effet combiné de nombreuses erreurs de conception mineures peut diminuer la qualité de l’expérience utilisateur et l’amener à quitter le site.
Pour chaque problème d’utilisabilité de votre site, vous devez pondérer la gravité du problème avec l’effort nécessaire pour le résoudre.
124
Aujourd’hui, les sites Web rencontrent de nombreux problèmes, mais pour améliorer l’utilisabilité, nous devons donner la priorité à certaines ressources et résoudre les problèmes qui affectent le plus l’utilisateur. Pour ce faire, il faut disposer d’une évaluation systématique de la gravité des problèmes. C’est ce dont traite ce chapitre. Lorsque nous rédigeons des rapports de consulting pour nos clients, nous notons les problèmes d’utilisabilité grâce à des notations Sévère, Moyen et Faible. Nous basons ensuite nos recommandations sur la gravité des problèmes : corriger si possible ceux notés Elevé, affecter quelques ressources supplémentaires aux problèmes Moyens et reporter la résolution des problèmes Faibles à une date ultérieure, à moins qu’ils puissent être résolus avec très peu de travail. Pour les recherches de cet ouvrage, nous avons utilisé une échelle sur 100 points car les échelles numériques permettent de réaliser des statistiques plus intéressantes qu’une échelle basée sur des mots. Nous vous déconseillons toutefois d’utiliser cette échelle plus complexe car elle est trop détaillée pour des projets de développement quotidiens. Les notations plus simples permettent aux concepteurs de se concentrer sur leurs priorités, c’est-à-dire de résoudre les problèmes les plus sévères. Une telle échelle est une invitation pour les membres de l’équipe à se faire entendre et à chipoter sur des points de détail. C’est une perte de temps : quelle différence y a-t-il entre la note 62 et la note 63 par exemple ? Une échelle simple vaut également mieux pour des projets pratiques car il faut équilibrer la gravité du problème par rapport à l’effort requis pour le résoudre. Un problème très sévère peut avoir à être résolu même s’il est extrêmement coûteux et gourmand en temps. Nous savons tous que les estimations des calendriers de développement sont peu fiables, des notations trop précises sur l’utilisabilité n’ont donc pas leur place face à des estimations de développement approximatives.
Site Web : priorité à la simplicité
Facteurs de gravité des problèmes Trois facteurs affectent la gravité d’un problème : ■
La fréquence. Combien d’utilisateurs rencontreront le problème ? Si ce nombre est relativement faible, le problème est mineur.
■
L’impact. Quelle somme de désagréments le problème pose-t-il aux utilisateurs ? Cela peut aller d’une irritation presque imperceptible à une perte de plusieurs heures de travail, voire à la décision de quitter le site Web.
■
La persistance. Le problème constitue-t-il un empêchement exceptionnel pour les utilisateurs ou les gênet-il de manière répétée ? De nombreux problèmes d’utilisabilité n’ont qu’une faible persistance car une fois que les personnes l’ont découvert, elles peuvent le surmonter. D’autres conceptions sont si déroutantes que les internautes se font piéger à plusieurs reprises. Les erreurs de conception de ce type méritent une notation de gravité supérieure à celles qui ne surviennent qu’une fois.
Noter la gravité Pour calculer la note de gravité totale d’un problème d’utilisabilité, nous multiplions la note de fréquence par la note d’impact, puis nous multiplions ce nombre par la racine carrée de la notation de persistance et divisons cela par la racine carrée de 10. Diviser par la racine carrée de 10 simplifie la notation en maintenant le nombre total de points potentiel inférieur à 100. La raison pour laquelle nous multiplions la fréquence par l’impact est évidente : pour l’essentiel, nous multiplions le nombre d’utilisateurs touchés par l’ampleur du problème, le résultat étant une estimation de la somme des désagréments. Il peut
être surprenant toutefois que nous multipliions ensuite cette réponse par la racine carrée de la note de persistance au lieu d’utiliser la note totale. Ceci est dû au fait que nous traitons de sites Web, où l’utilisation persistante n’est pas l’un des principaux facteurs. Les utilisateurs ne visitent généralement les sites Web que quelquefois et si le site présente des erreurs de conception suffisamment dommageables, ils n’y retourneront plus. Ainsi, nous ne pouvons pas donner une pondération complète à l’idée que les utilisateurs pourraient hypothétiquement continuer à être gênés lors des visites consécutives car la plupart d’entre eux n’y reviendront pas.
4 : Hiérarchiser les problèmes d’utilisabilité
125
Pour chaque problème d’utilisabilité, nous notons chacun des trois attributs sur une échelle de 1 à 10, 10 correspondant au maximum de désagrément pour la plupart des personnes. Nous calculons ensuite la gravité du problème. Ces captures d’écran illustrent des problèmes peu sévères et des problèmes très sévères.
www.parks.ca.gov Voici un problème d’utilisabilité peu sévère : ici, les numéros de la liste n’apparaissent pas par ordre croissant, on dirait qu’ils sont placés de manière aléatoire. On pourrait ainsi croire que la liste a été séparée en deux colonnes alors qu’elle est en fait structurée en lignes. Ce problème n’apparaît que rarement car la plupart des utilisateurs cliquent sur la carte, très peu tentent de faire la correspondance entre la carte et la liste. Pour ceux qui le font, l’impact est très faible car la liste est assez limitée. Il faudra simplement passer quelques secondes de plus à l’étudier. Enfin, la persistance du problème est faible car si vous revenez sur cet écran, vous saurez réagir. Il est peu probable que, par la suite, vous passiez quelques secondes de plus à réfléchir à l’absence de concordance. Ce problème de mise en page ne suscite qu’une irritation mineure, sa résolution ne présente pas une priorité essentielle.
126
Site Web : priorité à la simplicité
www.dimewill.com Problème d’utilisabilité grave : la page « About Us » (Mieux nous connaître) de cette banque n’en dit pas suffisamment pour établir la confiance et la crédibilité. Elle contient bien les mots « home of traditional banking » (acteurs de la banque traditionnelle), mais ne propose pas de faits tels que la date de création de la banque, son nombre de filiales, sa solidité financière ou toute information spécifique qui pourrait vous donner confiance. Ce problème est très fréquent : les utilisateurs souhaitent obtenir des informations sur la société avant de lui confier leur argent. Le problème a aussi un fort impact car beaucoup refuseront tout simplement d’utiliser le site. Enfin, sa persistance est élevée car à chaque fois qu’un internaute envisage de faire une transaction avec la banque, il voudra en savoir plus et sera déçu. Cette page peu satisfaisante porte vraiment tort à la possibilité de générer des transactions en ligne.
4 : Hiérarchiser les problèmes d’utilisabilité
127
Utilisabilité à l’hôpital : état critique Une mauvaise interface utilisateur peut être fatale dans les applications médicales. Dans le numéro du 9 mars 2005 du Journal of the American Medical Association, Ross Koppel et ses collègues rapportaient le cas d’une étude de terrain dans un système de saisie de commandes de l’hôpital, utilisé par les médecins pour spécifier les médications aux patients. L’étude identifiait vingt-deux cas dans lesquels des erreurs de conception du système généraient des erreurs de dosage pour les patients. La plupart étaient dus à des problèmes d’utilisabilité. Les écrans du système répertoriaient des dosages en fonction des unités de médicaments disponibles dans la pharmacie de l’hôpital. Si un médicament rare est généralement prescrit à des doses de 20 ou 30 mg, par exemple, la pharmacie stockait des pilules de 10 mg pour couvrir les besoins de stockage, sans excès. Toutefois, lorsque les employés de l’hôpital prescrivaient des médicaments peu souvent utilisés, ils supposaient souvent que l’article listé était un dosage typique. Des années d’études sur l’utilisabilité, dans de nombreux domaines, ont montré que les utilisateurs supposent généralement que les valeurs par défaut ou les valeurs d’exemple données sont applicables à leur propre situation. Ainsi, un médecin pouvait prescrire 10 mg, alors que 20 ou 30 mg auraient été plus appropriés. La solution d’utilisabilité ici est simple : chaque écran doit répertorier des dosages de prescription typiques. Un autre problème est survenu lorsque les médecins ont modifié le dosage d’une médication de patient. Ils ont souvent entré la nouvelle dose sans annuler l’ancienne, le patient a donc reçu la somme de l’ancienne et de la nouvelle dose. Ceci ressemble à une erreur d’interface bancaire, lorsqu’un client
128
autorise par erreur un paiement au même destinataire deux fois le même jour. De nombreux sites Web bancaires intercepteront cette erreur et demanderont au client de bien vérifier leurs dossiers. En général, si les utilisateurs répètent une chose déjà faite, le système doit leur demander si les deux opérations sont valides ou si la nouvelle commande doit écraser la première. L’article signalait que parfois le personnel devait visualiser jusqu’à vingt écrans pour consulter toutes les médications d’un patient. Dans une étude, 72 % du personnel a indiqué qu’il doutait souvent des médications et des dosages car ils avaient des difficultés à tous les voir. Les limites connues sur la mémoire humaine à court terme empêchent de se souvenir d’autant de choses. On le sait, les humains ont du mal à retenir des informations exactes ; réduire la charge pour la mémoire de l’utilisateur est depuis longtemps une directive essentielle. Plutôt que d’exiger qu’ils se souviennent d’éléments d’un écran à l’autre, et encore moins sur les dix-neuf suivants, le système doit rappeler les faits à l’utilisateur lorsqu’il en a besoin. D’autres aspects du système ont nécessité des utilisateurs qu’ils parcourent plusieurs écrans, d’où une charge supplémentaire pour une partie du personnel. Ils n’utilisaient donc pas toujours le système comme indiqué. Par exemple, il était plus simple pour les infirmières de conserver des dossiers papier qu’elles entraient dans le système au terme de leur garde plutôt que de les mettre à jour au fil de la journée. Ceci augmentait le risque d’erreurs et ne permettait pas au système d’apporter des informations en temps réel sur les médications reçues par les patients. Généralement, si les utilisateurs ont recours à des notes autocollantes ou autres rappels sur papier, c’est que l’interface ne fonctionne pas.
Site Web : priorité à la simplicité
Echelle de désagrément Les points de gravité associés aux problèmes d’utilisabilité peuvent être considérés comme une estimation du désagrément total de l’expérience sur le Web. Nous savons depuis le Chapitre 2 que la situation est assez mauvaise car les utilisateurs n’arrivent souvent pas à accomplir leurs tâches ou abandonnent les sites. Ce camembert montre les types de problèmes les plus gênants. *À jà Vi i ÃÕ
, ÕÀ «> } > À> `Ì j à à j v Vj i Ìj Õ i Ûi >Ì Ì i vi iÕÀ k ÌÀi
À
v
ÌÀi
}
Õ
- L i 7
i
ÃÃ
,iV
iÀV
i
ÀV
ÌiVÌÕÀi `i ¿vÀ>Ì
ÕiÃ
É*i
Àv À> «ÀiÃà Vià ` Õ Ã Ìi ÕÌ * ÀjVj`iÌ
* É
ÃLÌj
À>«
µÕiÃÉ ÕÌÃ
j`>
ÕÌ
À«Ì Ìj ÃÉÃV À Õ V É-j Ìj Ì>
>Ài ÀÕ
ÌiÕ
`i v
và «À`ÕÌ
Ý`
¿
>Û
vÀ
}
>Ì
>
Ì
Ã
i
Õ
à `i V>Ìj}Àià ëÃÌ
Problèmes d’utilisabilité pondérés par la note sur la gravité. Chaque tranche désigne le pourcentage de désagrément total imposé aux utilisateurs par chaque type d’erreur de conception. La dernière représente 4 % de la note totale, due à divers problèmes difficiles à classer.
4 : Hiérarchiser les problèmes d’utilisabilité
129
Vous devez enquêter au-delà des fonctions de recherche pour déterminer pourquoi votre site n'atteint pas son potentiel d'activité. La majeure partie de vos pertes est probablement due à des problèmes au niveau de la page.
Dans l’échelle de gravité que nous avons préparée pour cet ouvrage, la recherche a été le principal élément cité, suivi de près par une architecture de l’information déroutante, une mauvaise lisibilité et un contenu peu informatif. Autrement dit, près des trois quarts des problèmes d’utilisabilité concernent les objectifs de base de l’utilisateur : trouver, lire et comprendre les informations. La plupart de ces problèmes ont retardé ou ennuyé des utilisateurs, mais ils les ont finalement surmontés dans de nombreux cas. Par exemple, les utilisateurs pourraient se perdre dans l’architecture de l’information d’un site, mais trouver ce qu’ils veulent grâce à une recherche. Certaines erreurs de conception graves sont parfois si minimes ou si peu fréquentes qu’elles n’ont pas réuni suffisamment de points pour être prises en compte dans au moins 1 % des cas. Des publicités agressives, offensantes et intrusives par exemple ont compté pour 4 % seulement de la note de gravité et ne sont donc pas affichées dans le camembert, et ce pour deux raisons : tout d’abord, nous n’avons pas testé de nombreux sites de contenu dans cette étude, la plupart ne contenaient donc pas beaucoup de publicités. Deuxièmement, les publicités doivent être extrêmement énervantes pour amener les utilisateurs à quitter un site. Cela ne signifie pas que les utilisateurs ne les trouvent pas irritantes, mais que la plupart ont développé une stratégie de défense : ils ignorent tout ce qui ressemble à une publicité. C’est pourquoi nous disposons d’une directive vous mettant en garde contre cette erreur. Pour avoir une meilleure idée des grands domaines d’erreurs dans les sites Web actuels, nous avons regroupé les problèmes dans des catégories plus larges. Comme le montre le camembert, la recherche demeure un tel problème qu’elle représente presque une catégorie à elle toute seul. Mais, dans ce regroupement, c’est la capacité à trouver quelque chose qui a été le plus gros problème, comptant pour 26 % des désagréments des utilisateurs. Pouvoir trouver des éléments, notamment des éléments de conception, des noms de catégories et des liens, est l’une des deux manières de se diriger sur un site. L’autre est bien entendu la recherche. Lorsque nous ajoutons les deux, nous voyons que 37 % des difficultés sur le Web concernent la découverte de la page adaptée.
130
Site Web : priorité à la simplicité
Recherche Simplicité de recherche (IA, noms de catégorie, navigation, liens) Design de la page (lisibilité, mise en page, graphiques, amateur, défilement) Informations (contenu, infos produit, infos sur la société, prix) Prise en charge des tâches (processus, confidentialité, formulaires, comparaison, rigidité) Conception inhabituelle (multimédia, bouton Précédent, PDF/Impression, nouvelle fenêtre, son) Autre (bogues, présence sur le Web, publicités, nouveau site, métaphores)
Les problèmes d’utilisabilité pondérés par note de gravité et regroupés en grandes catégories d’erreurs de conception. L’association de problèmes en catégories plus larges montre les domaines ayant entraîné confusion et insatisfaction chez les utilisateurs.
Astuce : la première loi du commerce électronique Si l’utilisateur ne trouve pas un produit, il ne pourra pas l’acheter. La capacité à se déplacer sur un site est extrêmement importante en matière de simplicité d’utilisation, mais les principaux éléments de la recherche et la facilité à trouver comptent pour plus d’un tiers des difficultés des utilisateurs.
62 % du malaise des utilisateurs est causé par une mauvaise conception de la page ou de la progression des pages dans une procédure, lorsque l’utilisateur arrive au bon endroit mais que l’on ne répond pas à ses besoins. Cela signifie que vous devez aller au-delà des fonctions de recherche pour déterminer pourquoi votre site n’atteint pas son potentiel d’activité. La majeure partie de vos pertes est probablement à rechercher au niveau de la page, à cause d’informations incompréhensibles, qui diminuent la confiance ou n’apportent tout simplement pas à l’utilisateur la réponse cruciale qu’il attend. A l’inverse, seul 1 % des difficultés de l’utilisateur sont liées à des sociétés ayant des sites multiples et incohérents, le problème est donc moins sévère. Bonne nouvelle : une conception fantaisiste n’entraîne plus aujourd’hui que 8 % du malaise des utilisateurs. Nous devons toujours nous méfier de la réapparition de certains excès, comme les pages de garde et les animations ennuyeuses, mais pour le moment ces éléments font partie du passé.
4 : Hiérarchiser les problèmes d’utilisabilité
131
Les raisons de l’échec des utilisateurs Dans la section précédente, nous avons discuté des problèmes qui ont principalement retardé ou ennuyé les utilisateurs sans forcément les empêcher de réaliser leurs tâches. Certains problèmes sont toutefois trop graves pour que les utilisateurs moyens les surmontent. Ce graphique montre les problèmes suffisamment graves pour amener les utilisateurs à quitter le site, à abandonner la tâche ou à la réaliser de manière incorrecte.
-
Ã
>À>
«
À
}Õ
É*i
ÌÀ
Àv
i
É
k
iÃ
*
,iV
iÀV
i
vi
ÀjV j ÃÉ `i ÕÌ Ì Ã
µÕi
ÕÌÀi
i
«
*
iÕ
À>
ÕÌ
Ûi
Õ
>Ì
À
«Ài
>
ÃÃ
Vi
Ã`
Õ
ÃÌ
i
ÕÌj`>
iÃÉÃVÀ«Ì
ÀÕ>À
iÃ
}>Ì
>Û
Ã
>Ì
ÕÝ
L
v
¿
`
Ã
À
Ã
«
ÃÌ
à ` i V>Ìj }Ài
jVÕÀÌj
Ì>ÌjÉ-
i
v`
Ìj
ÌiÕ
và «À`ÕÌ
Problèmes d’utilisabilité pondérés par la fréquence des problèmes générés dans l’échec d’une tâche. Ce sont ici les problèmes qui ont empêché les internautes de réaliser leurs objectifs.
132
Site Web : priorité à la simplicité
Les cinq plus grandes causes d’échec utilisateur ■
Recherche
■
Architecture de l’information
■
Contenu
■
Informations produit
■
Flux de travail
Les designers du Web adorent discuter de l’importance d’éléments comme les graphiques ou la mise en page, or le design n’est pas si important quant à la capacité à utiliser le site.
En comparant tous les types de problèmes utilisateur à ceux qui entraînent un échec, nous voyons quelques différences significatives. La fonction de recherche et l’architecture de l’information sont les facteurs les plus importants d’échec. C’est logique car rien d’autre n’a d’importance si vous ne trouvez pas ce que vous cherchez. La lisibilité arrive en troisième position sur notre échelle des désagréments mais elle a entraîné beaucoup moins d’échecs pour les utilisateurs. Il est très ennuyeux que les lecteurs doivent loucher ou se pencher vers l’écran lorsque le texte est difficile à lire, mais ils peuvent généralement le supporter quelques minutes. Quelquefois bien sûr, la mauvaise lisibilité fait fuir l’utilisateur ou lui fait ignorer certaines informations importantes, mais il s’agit généralement plus d’une gêne que d’une véritable cause d’échec. Dans le dernier camembert, nous avons regroupé dans des catégories plus larges les problèmes de conception ayant entraîné des échecs. Cela peut vous aider à classer vos priorités et à vous concentrer sur les thèmes qui portent tort à votre activité. Notez une fois de plus que les deux catégories précédentes (fonction de recherche et capacité à trouver des éléments) ont pris encore plus d’importance. 15 % des échecs étaient causés par des problèmes de recherche et jusqu’à 27 % par la difficulté à trouver des informations. La deuxième tranche englobait des informations difficiles à trouver ou leur absence totale, soit 19 % des échecs. ,iV
iÀV
i -«VÌj `i ÀiV
iÀV
i ] à `i V>Ìj}ÀiÃ] >Û}>Ì] iî
Vi«Ì `i > «>}i ÃLÌj] Ãi i «>}i] }À>«
µÕiÃ] >>ÌiÕÀ] `jviiÌ® vÀ>Ìà VÌiÕ] và «À`ÕÌ] và ÃÕÀ > ÃVjÌj] «ÀÝ® *ÀÃi i V
>À}i `ià Ì@V
ià «ÀViÃÃÕÃ] Vv`iÌ>Ìj] vÀÕ>ÀiÃ] V«>À>Ã] À}`Ìj®
Vi«Ì
>LÌÕii ÕÌj`>] LÕÌ *ÀjVj`iÌ] * É«ÀiÃÃ] ÕÛii vikÌÀi] î ÕÌÀi L}ÕiÃ] «ÀjÃiVi ÃÕÀ i 7iL] «ÕLVÌjÃ] ÕÛi>Õ ÃÌi] jÌ>«
Àiî
Les plus grandes catégories de problèmes d’utilisabilité pondérées par la fréquence où elles ont fait échouer les utilisateurs. Remarquez la prédominance combinée de la recherche et des informations.
4 : Hiérarchiser les problèmes d’utilisabilité
133
Une fois de plus, si l’on compare l’expérience de l’utilisateur et les désagréments généraux, il est intéressant de noter que la conception de la page est plutôt un désagrément qu’une cause directe d’échec. Les designers Web adorent discuter de l’importance d’éléments comme les graphiques et la mise en page, or le design n’est pas si important que cela quant à la capacité à utiliser le site. Bien entendu, il ne faut pas que les utilisateurs connaissent un échec. L’argument est de donner une plus haute priorité aux capacités de recherche, à la simplicité à trouver des éléments et aux informations réelles présentées sur les pages.
Suffit-il de se concentrer sur les pires problèmes ? Faut-il consacrer toutes vos ressources aux problèmes qui créent l’échec et oublier ceux qui n’entraînent que des ennuis et des difficultés mineurs ? Pas selon nous, et c’est pourquoi nous avons analysé les données des deux manières. Les problèmes d’utilisabilité qui ne sont pas la cause directe d’un échec peuvent malgré tout gêner votre activité de diverses manières. Ennuyer constamment les utilisateurs avec des problèmes comme une mauvaise lisibilité finit par vous porter tort, ce qu’il faut éviter lorsque vous œuvrez dans le marketing et la promotion. Et surtout, lorsque plusieurs petites irritations s’ajoutent à une mauvaise expérience utilisateur, l’utilisateur risque fort de partir pour ne jamais revenir. Les données présentées dans ce chapitre doivent vous aider à définir des priorités relatives à votre propre projet d’utilisabilité et à vos ressources de développement. Nous recommandons en particulier d’accentuer l’utilisabilité du contenu plus que la moyenne. Disposer des informations dont ont besoin les utilisateurs et les présenter dans un langage approprié est essentiel au succès sur le Web. Bien entendu, il est aussi extrêmement important de travailler sur la capacité de recherche et la simplicité à trouver des informations. Dans le reste de cet ouvrage, vous traiterons des points qui influencent le plus la capacité des personnes à utiliser votre site Web et de la manière de les améliorer.
134
Site Web : priorité à la simplicité
138 L’état de la recherche 140 Fonctionnement recommandé pour la recherche 142 Interface de recherche • Longueur des requêtes et largeur de la zone de recherche • Recherche avancée • Recherche ciblée
151 Pages de résultats des moteurs de recherche
160 Optimisation des moteurs de recherche
• Meilleurs résultats
• SEO linguistique
• Trier la SERP
• SEO architecturale
• Pas de résultats
• SEO de réputation
• Un résultat trouvé
5 Recherche
Dans notre test, le taux de succès des personnes employant des moteurs de recherche externes était assez bon. Celui des personnes utilisant des moteurs de recherche internes était atroce. Pourtant, la recherche sur un site spécifique devrait mieux fonctionner que celle réalisée sur l’ensemble du Web. La recherche est une partie si importante de l’expérience utilisateur sur le Web que les internautes en attendent beaucoup. Pour fournir une bonne recherche, le mieux est de connaître les directives utilisées par les grands moteurs de recherche et les appliquer sur votre site. Ce chapitre explique comment disposer d’une fonction de recherche efficace et optimiser les résultats dans les moteurs de recherche externes.
Même si certains utilisateurs se sont immédiatement rendus vers la case Rechercher, d’autres ont toutefois préféré utiliser les liens de navigation. Fournir ces deux fonctions est important pour capter un large public
Astuce : comment savoir si vous avez besoin d’une fonction de recherche En règle générale, vous pouvez vous passer de la fonction de recherche si votre site comporte moins de 200 pages. Les sites comprenant entre 100 et 1000 pages ont besoin d’un moteur de recherche assez simple. C’est lorsque vous atteignez les milliers de pages que vous devez investir pour améliorer la fonction de recherche autant que possible. Vous pouvez aussi étudier votre liste de produits, vos communiqués de presse ou toute autre catégorie de contenu importante. Si ces listes sont très courtes et que les utilisateurs peuvent facilement les parcourir sur une seule page, la fonction de recherche n’est probablement pas nécessaire. La grande exception serait en cas de catégories de contenu très différentes, avec de nombreuses listes à parcourir, ce qui pourrait perdre les utilisateurs.
138
La recherche est l’un des éléments de conception les plus importants d’un site Web. dix-neuf des vingt-cinq sites Web que nous avons étudiés pour cet ouvrage possédaient des moteurs de recherche et les testeurs ont réalisé des recherches sur ces sites. Ceci montre l’importance de la recherche pour les utilisateurs. Même si certains utilisateurs se sont immédiatement rendus vers la case Rechercher, d’autres ont toutefois préféré localiser les informations par les liens de navigation par exemple. La recherche est particulièrement utile pour les personnes qui savent exactement ce qu’elles cherchent et choisissent rapidement des termes appropriés. Mais proposer de bonnes catégories de liens encourage à explorer le site et à découvrir ce qui est disponible, en particulier lorsque le visiteur ne fait que passer ou ne connaît pas les mots à saisir dans la case de recherche. Accepter ces deux types de comportements est important pour capter un large public.
L’état de la recherche Pour mener des recherches, la plupart des utilisateurs tapent un, deux ou trois mots dans le moteur de recherche. C’est très peu d’informations pour trouver la réponse à un problème à partir des milliards de pages qui se trouvent sur le Web. Mais dans notre test, les grands moteurs de recherche externes comme Google,Yahoo! et MSN Search ont réussi 56 % du temps, ce qui est assez bon. Même si la plupart des utilisateurs de notre étude ont utilisé l’un de ces trois grands, d’autres ont préféré des moteurs moins prédominants, comme America Online (AOL) Search. Lorsque les testeurs se sont servis des moteurs de recherche pour effectuer une recherche sur le site où ils se trouvaient, leur taux de succès n’était que de 33 %. Une recherche sur le site devrait être meilleure que la recherche sur le Web, et ce pour de nombreuses raisons : ■
Le jeu de pages à prendre en compte sur un site est plus restreint que sur l’ensemble du Web.
■
Sur un seul site Web, vous disposez d’une meilleure mainmise sur l’utilisateur. Vous savez par exemple si le mot "Jaguar" fait référence à des voitures, à des animaux, à une équipe de football ou à un orchestre de rockabilly selon le site sur lequel a lieu la recherche.Yahoo! ne peut pas se permettre ce luxe.
Site Web : priorité à la simplicité
■
Vous connaissez les documents les plus importants de votre site, vous pouvez donc donner la priorité aux résultats en fonction de leur valeur intrinsèque plutôt que selon la valeur attribuée par les moteurs de recherche externes.
■
A l’inverse, vous connaissez les documents anciens ou obsolètes, vous pouvez donc leur donner une priorité de placement inférieure par défaut.
■
Vous avez potentiellement plus accès aux méta-données que les grands moteurs de recherche, ce qui permet à votre logiciel d’en savoir plus sur vos documents et leurs relations croisées qu’un moteur externe.
■
Vous avez un vocabulaire contrôlé, vous connaissez donc les synonymes, les fautes d’orthographe et autres variantes, ce qui pourrait vous permettre de renvoyer un document même si la requête exacte de l’utilisateur n’apparaît pas dans le texte.
■
Vous pouvez avoir confiance en vos propres informations, vous pouvez donc utiliser des résumés optimaux, écrits par des hommes, pour chaque page au lieu d’obtenir les extraits générés par informatique de nombreux moteurs de recherche qui ne font pas confiance aux sites Web pour les décrire eux-mêmes de manière honnête.
■
Vous n’avez pas à vous battre avec les spammeurs ou les sites qui tentent de manipuler les moteurs de recherche pour parvenir à un placement supérieur à ce qu’ils méritent.
Trois étapes simples pour une meilleure recherche ■
Achetez le meilleur logiciel de recherche. Cela vaut l’investissement, si l’on considère l’importance que revêt la recherche pour les utilisateurs. Prenez également le temps de le paramétrer pour optimiser le taux de succès des recherches au sein de votre site.
■
Concevez l’interface de recherche et la page des résultats du moteur de recherche (SERP) en fonction des directives d’utilisabilité de ce chapitre.
5 : Recherche
■
Améliorez les pages de votre site afin qu’elles fonctionnent mieux avec le logiciel de recherche. Ecrivez des titres de pages sur la SERP qui soient simples à parcourir pour les utilisateurs. Ecrivez des résumés qui décrivent de manière succincte le sujet de chaque page pour aider les utilisateurs à choisir les listings sur lesquels cliquer. Utilisez l’optimisation des moteurs de recherche (SEO) de la dernière section de ce chapitre pour aider le logiciel à mieux travailler.
139
Les nouvelles directives d’utilisabilité n’ont pas pour seul objet d’offrir une bonne recherche ; elles doivent offrir la recherche attendue. Diverger des attentes entraîne presque toujours des problèmes.
Fonctionnement recommandé pour la recherche Dans les tests utilisateurs, les personnes indiquent généralement qu’elles souhaitent que la fonction de recherche des sites Web et des intranets fonctionne comme celles de leurs moteurs de recherche favoris. Heureusement, Google, Yahoo! et MSN œuvrent tous de la même manière : avec une case de recherche et un bouton, puis avec une page de résultats présentés par priorité. Les principaux moteurs de recherche se conforment en fait aux grandes directives d’utilisabilité, ce qui explique leur prédominance. Les nouvelles instructions d’utilisabilité ne concernent donc pas seulement la conception d’une bonne recherche. Elles sont destinées à concevoir la recherche attendue. Diverger des attentes entraîne presque toujours des problèmes d’utilisabilité.
Les trois choses que les utilisateurs attendent d’une fonction de recherche ■
une case où ils peuvent taper des mots ;
■
un bouton Rechercher sur lequel ils peuvent cliquer pour lancer la recherche ;
■
une liste des principaux résultats, classés par priorité, qui s’affiche sur une nouvelle page.
Astuce : à quel moment une recherche n’est-elle plus une recherche ? Pour la grande majorité des utilisateurs, l’intitulé Rechercher décrit une recherche par mots-clés uniquement. Ne l’utilisez par pour d’autres actions, comme Entrer, Envoyer ou Aller.
140
Etant donné que la recherche est totalement intégrée par les utilisateurs, évitez d’utiliser ce modèle pour d’autres emplois. N’utilisez donc pas de bouton Rechercher pour une recherche par paramètres (dans laquelle l’utilisateur définit certains paramètres de la recherche). Ce type de recherche peut être utile sur des sites de commerce électronique, par exemple pour trouver des chaussures en précisant la taille, la largeur, la couleur, la marque ou le style. Mais cette recherche n’entre pas dans le cadre d’une fonction de recherche, essayez donc de choisir un autre terme pour éviter la confusion. La recherche avancée, qui associe la recherche par mot-clé à d’autres fonctions, peut aussi aider les utilisateurs mais ne doit être qu’un deuxième choix et ne s’afficher que lorsqu’elle est demandée. Les utilisateurs ont maintenant conçu une représentation mentale qu’ils s’attendent à pouvoir appliquer sur le Web et même sur les intranets. C’est une bonne chose. Ces hypothèses leur permettent de se concentrer sur leurs objectifs, et non sur la compréhension des mécanismes qui gèrent l’interface. Mais tout s’écroule si votre design diffère de ces représentations. Ne commettez pas ce péché !
Site Web : priorité à la simplicité
www.zappos.com Les cases pour rechercher des chaussures figurant au-dessus des photos sur le site Zappos.com sont un très bon exemple de recherche par paramètres : pourquoi regarder des chaussures qui ne sont pas disponibles dans votre taille ? Le seul petit reproche, c’est que le bouton ne doit pas être intitulé « Go! » (Aller) pour se différencier du bouton de recherche par paramètres. Le bouton Rechercher doit être intitulé Rechercher. D’après notre expérience, lorsque les utilisateurs rencontrent le bouton Rechercher, ils recherchent ardemment la case où saisir des mots-clés. Actuellement, il n’existe pas vraiment d’intitulé parfait pour la recherche sans mots-clés mais les mots Trouver ou Récupérer fonctionnent généralement bien. Pour bien faire la différence, vous pouvez utiliser des intitulés comme « Affiner les résultats ».
5 : Recherche
141
Interface de recherche L’interface de recherche, une case de texte dans laquelle les utilisateurs peuvent entrer leurs demandes, associée à un bouton Rechercher, doit se trouver en haut à gauche ou, encore mieux, en haut à droite de la page, car c’est là que les utilisateurs la cherchent. Cette case doit se trouver sur la page d’accueil et aussi, dans l’idéal, sur chaque page du site. Les utilisateurs se tournent vers la fonction de recherche lorsqu’ils sont perdus ou qu’ils ont abandonné la navigation sur le site. Vous ne pouvez pas prévoir à l’avance où cela surviendra, elle doit donc être partout disponible.
www.dimewill.com Ce site possède un lien vers un moteur de recherche mais il est presque invisible, la plupart des utilisateurs n’ont même pas vu qu’il était disponible. Après avoir cherché en vain pendant un moment, ils en ont conclu que le site ne proposait pas cette fonction.
142
Site Web : priorité à la simplicité
www.nordstrom.com Lorsque nous avons testé le site Web de Nordstrom en 2000, les utilisateurs n’ont pas trouvé la fonction de recherche, même s’ils l’ont souvent demandée. Regardez cette capture d’écran pendant un moment. Combien vous faut-il de temps pour trouver la fonction de recherche ? Lorsqu’elle n’apparaît pas sous forme de case, les utilisateurs ne la trouvent pas.
Astuce : n’essayez pas de devenir un moteur de recherche Conservez une interface de recherche aussi simple que possible. Ne proposez pas de recherche sur tout le Web. Les internautes ont déjà leurs moteurs de recherche attitrés. Cette fonction ne fait qu’encombrer vos pages. La seule exception concerne les cas où vous disposez de plusieurs sites Web. Si c’est le cas, la recherche multi-sites peut être utile mais sachez qu’elle compliquera votre interface utilisateur et réduira son utilisabilité car les personnes n’y sont pas habituées.
5 : Recherche
143
www.nordstrom.com Nordstrom a depuis longtemps réaménagé son site Web pour proposer la recherche grâce à une case et une liste déroulante, plus visibles. La société a agi comme il se doit en plaçant par défaut une recherche toutes catégories (« In All Categories ») car c’est le paramètre le plus largement utilisé. Les utilisateurs conservent souvent le paramètre par défaut le plus large pour obtenir le plus de résultats possible. Affiner trop tôt la recherche pourrait leur faire rater des résultats pertinents. Dans la plupart des cas, nous déconseillons d’utiliser les options déroulantes car elles déroutent l’utilisateur, en particulier lorsqu’il est difficile de faire la part des options. Par exemple, les jeans de designer peuvent entrer dans plusieurs catégories – Apparel (habillement), Sale (commercial) et Juniors. Devoir essayer de deviner la bonne catégorie nécessite des efforts supplémentaires.
144
Site Web : priorité à la simplicité
www.disney.com Le fait que l’on trouve rapidement la case Rechercher sur la page d’accueil très remplie de Disney montre l’importance du champ de saisie pour l’œil. La case est un peu trop étroite et le souligné fait plutôt penser à un lien qu’à un bouton (un lien vous emmène vers une nouvelle page, tandis qu’un bouton lance une commande). Puisque la recherche est une action, utilisez plutôt un bouton.
5 : Recherche
145
http://disneyland.disney.go.com La case de recherche de Disneyland est plus standard que celle de la page d’accueil de Disney : elle est placée dans le coin supérieur droit et le bouton ressemble bien à un bouton. Toutefois, il est déconseillé de déplacer les éléments d’interface importants (comme la case Rechercher) sur les différentes pages Web d’une société. Cela nuit au sentiment de cohérence de la marque. Il suffirait ici de supprimer l’intitulé Rechercher au début de la zone de texte et de renommer le bouton « Go » (Aller) en bouton « Search » (Rechercher).
146
Site Web : priorité à la simplicité
http://disneyvideos.disney.go.com En suivant un autre lien de la page d’accueil de Disney, on arrive à un autre design de page avec une autre interface de recherche. Il peut être logique que Disneyland et Disney Videos aient des interfaces utilisateur assez différentes car leurs services sont différents (réserver des vacances, trouver et acheter des films). Mais la recherche par mot-clé pourrait être présentée de la même manière pour favoriser le sentiment de cohérence dans la navigation utilisateur. Heureusement, la partie la plus importante de la recherche est cohérente sur les deux pages : une case placée en haut à droite. Raison de plus pour l’apposer à droite de la page d’accueil également. La case est suffisamment large ici, avec 26 caractères, elle permet d’écrire plusieurs termes. Les inconvénients de cette conception : nous déconseillons les intitulés du style « Trouvez rapidement ». Il est toujours dangereux d’annoncer une fonction « rapide » ou « simple » car les utilisateurs risquent d’être désenchantés. Les multiples boutons « Go » sont inappropriés et créent un désordre inutile. Un bouton de recherche conviendrait pour la zone de recherche mais les autres doivent disparaître.
5 : Recherche
147
Longueur des requêtes et largeur de la zone de recherche Le graphique suivant montre la longueur des chaînes de recherche dans les requêtes des testeurs de notre étude. La moitié étaient plutôt courtes, avec moins de 14 caractères. L’autre moitié étaient plutôt longues, les utilisateurs employant plusieurs mots pour exprimer leurs besoins. 70 60 Nombre de caractères tapés
Distribution des requêtes de recherche dans notre étude. Pour 84 % des requêtes, on constate une augmentation stable de la longueur jusqu’à 22 caractères ; les derniers 16 % des requêtes augmentent rapidement. La plus longue requête comptait 68 caractères, soit presque une ligne complète.
50 40 30 20 10 0 0%
20%
40%
60%
80%
100%
Pourcentage de toutes les requêtes
Astuce pour les cases de recherche : élargissez-vous La case de recherche moyenne sur le Web aujourd’hui accueille 18 caractères, ce qui signifie que 27 % des requêtes sont trop longues. Cela gêne trop d’utilisateurs et présente un risque d’erreur important. Nous recommandons de créer des cases larges de 27 caractères, ce qui suffit dans 90 % des cas. Masquer une petite partie de la recherche pour 10 % des utilisateurs seulement constitue un compromis acceptable pour la plupart des sites. N’oubliez pas que la case doit se retrouver sur chaque page.
148
Les zones de recherche assez larges conviennent mieux pour deux raisons.Tout d’abord, elles encouragent les utilisateurs à taper des requêtes plus longues, d’où des résultats plus précis et plus utiles. Deuxièmement, les fautes d’orthographe et autres erreurs sont réduites lorsque les utilisateurs voient ce qu’ils tapent. Mais même ainsi, la zone de recherche ne doit pas permettre de loger les requêtes les plus longues. Les moteurs de recherche du Web eux-mêmes possèdent généralement des cases de recherche larges de 48 caractères. Pour un site standard, où la recherche est un outil et non un objectif, cela prendrait trop de place.
Site Web : priorité à la simplicité
Dans l’ouvrage de Jakob Nielsen et Marie Tahir, Homepage Usability: 50 Websites Deconstructed, il est recommandé des cases de 25 caractères. Quelques années après seulement, nous recommandons 27 caractères. La tendance semble aller vers des chaînes de requêtes plus longues car les internautes s’habituent à cette fonction et nous ne serions pas surpris que cette recommandation passe à 30 caractères à l’avenir. En fait, si vous vouliez assurer votre conception pour l’avenir, créez des zones de 30 caractères.
www.americanheart.org La case Rechercher (Search) du site Web de l’American Heart Association ne laisse la place que pour 17 caractères. C’est légèrement moins que la moyenne et particulièrement problématique sur un site de santé, du fait des termes longs et complexes souvent employés en médecine. « Peripheral artery disease » (maladie artérielle périphérique) est un terme courant en médecine et n’entre pourtant pas dans la case, ce qui augmente beaucoup le risque d’erreurs lors de la saisie.
5 : Recherche
149
Recherche avancée Notre meilleur conseil pour la fonction de recherche avancée est de l’éviter. Très peu l’utilisent correctement et cela crée presque toujours plus de problèmes que d’avantages.
Notre meilleur conseil pour la fonction de recherche avancée est de l’éviter. Très peu l’utilisent correctement et cela crée presque toujours plus de problèmes que d’avantages. Mais à moins que vos utilisateurs ne soient très qualifiés techniquement (ou bibliothécaires professionnels), ils ne sauront pas utiliser des fonctions comme la recherche booléenne. Dans l’étude que nous avons menée pour cet ouvrage, seul 1,2 % des requêtes utilisaient une forme de syntaxe avancée (comme « et », « ou » et « sauf »). Pire encore, lorsque les personnes tentent d’utiliser la recherche avancée, elles font généralement des erreurs et n’obtiennent pas ce qu’elles cherchent. La seule exception concerne l’utilisation des guillemets pour signaler une recherche sur une chaîne de texte littérale. Dans notre étude, les guillemets ont été utilisés dans 3,5 % des requêtes, il faut donc prendre en charge cette fonction. Si vous disposez d’une fonction de recherche avancée, il vaut généralement mieux la reléguer dans une page spéciale laissant la place à tous les outils spécialisés et où vous pourrez l’expliquer en détail. La recherche simple doit être placée par défaut sur la page d’accueil et sur les pages intérieures du site. Cette approche guide l’utilisateur lambda d’abord vers une recherche simple, ce qui vaut généralement mieux.
Recherche ciblée La recherche ciblée, qui limite la recherche à une plage donnée, constitue une autre fonction avancée parfois utile. Les utilisateurs n’effectuent la recherche que sur une partie seulement du site. Sur un site qui vend des livres, de la musique et des DVD par exemple, la recherche ciblée aidera ceux qui connaissent le nom du film recherché mais ne permettra pas de savoir que la bande sonore du film est disponible sur CD, ce qui peut restreindre les ventes. La recherche ciblée est logique sur des sites dont les sections sont extrêmement différenciées et lorsqu’il est fréquent que les personnes ne demandent des articles que dans une zone bien particulière.
150
Site Web : priorité à la simplicité
Le ciblage est dangereux pour deux raisons. Tout d’abord, si la recherche est ciblée par défaut (ce que nous déconseillons), les utilisateurs peuvent supposer qu’ils effectuent une recherche sur tout le site. Ils ne sauront pas que la recherche ne sera pas la plus large possible. Les sites disposant d’une recherche ciblée doivent toutefois proposer la recherche globale par défaut. Deuxièmement, les utilisateurs peuvent penser à tort que les éléments se trouvent dans une certaine zone du site alors que ce n’est pas le cas. Ils risquent alors de ne pas trouver ce qu’ils cherchent ni ce que le site peut leur proposer sur ce sujet. Si vous proposez une recherche ciblée, respectez deux autres directives : indiquez clairement sur la page de résultat la zone concernée par la recherche et proposez un accès en un clic permettant de répéter la recherche sur tout le site.
Pages de résultats des moteurs de recherche Pratiques ciblées La loi de Fitts, que nous avons vue au Chapitre 3, prétend que le temps qu’il faut pour cliquer sur une cible est inversement proportionnel à la taille de la cible. De nombreuses SERP mal conçues exigent des utilisateurs qu’ils cliquent sur de petites cibles, des numéros à un seul chiffre, pour passer à la page suivante. Vous pouvez tout à fait offrir des liens directs vers de nombreuses pages de résultats, mais cette fonction n’est pas très utile car il est peu probable que les utilisateurs sautent des pages. S’ils veulent passer plus à la page suivante, ils cliqueront sur les flèches ou le lien Suivant plutôt que de manipuler la souris sur des zones très petites.
Notre directive n° 1 pour la conception des pages de résultats des moteurs de recherche (SERP) est d’imiter l’un des principaux moteurs de recherche du Web. Proposez une liste de résultats, avec les choix les plus recommandés en premier. Il n’est pas nécessaire de numéroter chaque résultat car tous les utilisateurs commencent par le haut. Il n’est pas non plus besoin d’annoter ces résultats avec une note de pertinence ou autre estimation d’adéquation. Les utilisateurs commencent à lire en haut et abandonnent lorsque les résultats de recherche ne leur semblent plus tout à fait prometteurs, en fonction du contenu, et non de la note de pertinence. Chaque résultat de recherche doit commencer par un titre cliquable, suivi d’un résumé de deux ou trois lignes. Le titre est le plus important, notamment ses premiers mots. Les utilisateurs ne le liront pas en entier en parcourant les résultats. Il est important de commencer par les mots les plus informatifs de la page. Le résumé doit développer le titre sans le répéter.
5 : Recherche
151
Cette SERP est facile à parcourir et présente de bons titres et des résumés raisonnables. Il est facile de parcourir les résultats car les symboles des flèches en haut et en bas de la page sont visibles et agréables. La conception de cette page pourrait être améliorée si l’on supprimait les pourcentages de pertinence. Les internautes se concentrent sur les titres et les descriptions et non sur les pourcentages. De même, la requête de l’utilisateur est répétée dans la case de recherche standard du site, dans le coin supérieur gauche, mais il vaut mieux, sur la SERP, l’afficher dans une case de recherche plus large à droite, en haut des résultats, de sorte que l’utilisateur puisse la retrouver plus facilement et l’utiliser pour reformuler sa requête.
www.americanheart.org
Astuce : conventions de date des SERP Si vous présentez des dates sur un site Web, utilisez le format de date international, en écrivant le nom du mois au lieu de le représenter par un chiffre. Sachez que les pays ont adopté des conventions différentes pour écrire la date. En France par exemple, 5/4 désigne le 5 avril mais c’est le 4 mai aux Etats-Unis.
152
Sur certains sites, vous pouvez donner une indication de l’adresse du document sous son résumé, soit avec son URL, soit avec le nom de la zone du site qui contient le document. Toutefois, sur la plupart des sites, ces informations sont peu pertinentes et seront omises à des fins de brièveté. Vous pouvez également indiquer la date de mise à jour du document, à condition que cela corresponde à des informations réelles de création ou de modification. Si les dates ne signalent que le moment où l’on a corrigé une faute d’orthographe ou l’instant où le document a été déplacé vers un autre serveur, la fonction est plus trompeuse qu’autre chose.
Site Web : priorité à la simplicité
www.basf.com La SERP de cette société multinationale convient pour certains aspects et pas pour d’autres. Les bons points : elle répète la requête de l’utilisateur dans une case de recherche modifiable et chaque résultat adopte un format attendu, avec un titre, un résumé qui souligne les occurrences du terme de recherche et l’URL. On trouve également une manière simple pour parcourir les résultats si l’on veut consulter d’autres SERP. Les mauvais points : inutile de proposer une fonction pour rechercher « tout ou partie des mots ». Ceci doit être réservé à la recherche avancée au lieu d’encombrer la page par défaut. Pouvoir effectuer une recherche sur tous les serveurs ou sur des serveurs régionaux complique aussi l’opération de manière inutile ; il n’est pas non plus nécessaire de préciser « commerce électronique » (e-commerce) parmi les options. Souvent, l’utilisateur qui recherche un article souhaite accéder à la page où il peut l’acheter. Avec les nombreuses fonctions supplémentaires, les résultats de la recherche sont ramenés en bas de la page. Vous ne voyez même pas le premier résultat en totalité sans faire défiler l’écran si vous utilisez une résolution de 1024 × 768 pixels. Il ne sert à rien de présenter les notations de pertinence et il vaudrait mieux indiquer l’URL pour que d’autres résultats apparaissent à l’écran. Enfin bien sûr, le titre en allemand en quatrième place ne doit pas être utilisé. Les utilisateurs anglophones risquent fort d’ignorer cet article, en particulier parce que le résumé ne précise pas clairement que l’article est en anglais.
5 : Recherche
153
Astuce : assistance pour les problèmes d’orthographe Votre SERP peut proposer une fonction de vérification de l’orthographe, généralement sous forme de lien intitulé « essayez avec cet orthographe ». Il est généralement placé juste au-dessus de la liste des résultats de recherche pour que les utilisateurs le voient plus facilement lorsqu’ils commencent à parcourir la liste. Dans notre étude, 7,5 % des requêtes contenaient des fautes d’orthographe, il est donc utile d’aider les utilisateurs à corriger les erreurs qu’ils risquent de ne même pas voir.
Les utilisateurs reformulent rarement leur requête si les premiers résultats ne fonctionnent pas. Dans l’étude menée pour cet ouvrage, les testeurs se contentent d’une simple requête dans 83 % des cas. Dans seulement 17 % des recherches, ils tentent une alternative. Pourtant, les utilisateurs doivent pouvoir reformuler leurs requêtes sur la SERP : faites figurer une case de recherche et insérez-y automatiquement la requête de l’utilisateur pour qu’il puisse la modifier en cliquant dessus. Enfin, la SERP peut proposer un lien vers la page de recherche avancée, qui peut aussi être répété au bas de la page. Les utilisateurs le verront s’ils descendent jusqu’au bas de la liste et qu’ils n’ont pas encore trouvé ce qu’ils cherchent.
Meilleurs résultats Dans l’idéal, les logiciels de recherche doivent toujours proposer la page la plus importante en premier. Or, ce n’est pas le cas dans la pratique car l’ordinateur n’est qu’une machine stupide qui ne comprend pas ce que vous voulez. Il mesure les pages de manière indirecte, par exemple avec la fréquence d’apparition de certains mots et la fréquence des liens vers d’autres pages. Pour que les pages importantes apparaissent au-dessus des pages secondaires dans les moteurs de recherche sur le Web, vous devez faire avec ces marqueurs secondaires. C’est ce que l’on appelle l’optimisation des moteurs de recherche (SEO, Search Engine Optimization), que nous verrons plus en détail dans ce chapitre. Malheureusement, vous ne pouvez pas indiquer à un moteur de recherche externe celles des pages de votre site qui sont le plus importantes pour chaque requête ; le moteur ne vous fera pas confiance et tentera de vous devancer. Mais vous pouvez signaler aux moteurs de votre site les pages à placer en premier pour des requêtes importantes. Cette fonctionnalité, souvent connue sous le nom de « best bet » (meilleur résultat), permet de choisir les meilleures réponses pour la requête de vos utilisateurs.
154
Site Web : priorité à la simplicité
Quatre manières d’élaborer les meilleurs résultats Elaborez vos meilleurs résultats de manière à satisfaire ces recherches : ■
Les noms de produits et autres noms de marques. Lorsqu’un utilisateur les saisit, il doit arriver en premier à la page principale du produit.
■
Les numéros de produit, identifiants numériques, numéros de catalogues et autres codes. Une fois de plus, c’est la page principale du produit qui doit apparaître en premier. Ne supposez pas que les utilisateurs connaissent ces codes.
■
■
Les noms de catégorie. La page principale de cette catégorie doit arriver en premier. N’oubliez pas d’employer les mots souvent utilisés sur votre secteur pour se référer à une catégorie, notamment ceux utilisés par la concurrence. Souvent, les sociétés emploient leur propre vocabulaire, que les utilisateurs ne connaissent pas forcément.
Lorsque vous ajoutez ces meilleurs résultats à votre moteur de recherche, vous devez établir manuellement la liste de la meilleure page ou des quelques meilleures pages en réponse aux diverses requêtes utilisateur. Si l’utilisateur tape l’une de ces recherches, le moteur placera les meilleurs résultats en haut, puis poursuit avec ses propres résultats triés par l’algorithme. Mieux vaut ne pas faire de différence entre vos meilleurs résultats, sélectionnés manuellement, et ceux choisis par l’ordinateur. De toute façon, les utilisateurs commencent à lire la page par le haut, donc par vos meilleurs résultats. Si vous les insérez dans une case où si vous les soulignez d’une manière quelconque, les utilisateurs pourront penser qu’il s’agit de publicités et les ignorer. Pour trouver vos meilleurs résultats, il est utile de consulter les termes de recherche fréquemment tapés par vos utilisateurs. Consultez les cent requêtes les plus populaires de vos journaux de recherche, entrez chacune d’entre elles dans un moteur de recherche et voyez ce qui en ressort. Si le premier résultat n’est pas la page la plus importante pour ce terme, ajoutez-la à votre liste des meilleurs résultats. Après avoir vérifié les cent requêtes les plus fréquentes, poursuivez la liste par les cent requêtes suivantes. Procédez ainsi pour les requêtes les plus fréquentes.
Les noms des principaux dirigeants et autres membres du personnel. Les pages de biographie de ces personnes doivent arriver en premier.
5 : Recherche
155
La SERP de Hewlett-Packard fait apparaître un ensemble d’éléments annexes, classés par catégories, dans une colonne à gauche des résultats principaux. C’est un moyen intéressant de compléter les meilleurs résultats, à savoir la page produit correspondant à la recherche de l’utilisateur. Par exemple, ici, nous avons demandé une imprimante populaire. Le moteur de recherche a placé comme il se doit la page produit de l’imprimante en haut de sa liste mais propose également des liens vers les consommables dans la colonne de gauche. La page utilise également la convention de date internationale, même si la recherche a été réalisée dans la zone américaine du site. Le mieux aurait encore été d’épeler le nom de chaque mois.
www.hp.com
Actualiser les meilleurs résultats Le meilleur résultat à une requête doit correspondre à la page actuellement la plus importante pour la requête, et non à celle de l’année dernière. Ainsi, par exemple, si vous sortez un nouveau modèle, mieux vaut que sa page arrive en premier, même si vous conservez les pages des modèles passés pour l’archivage et pour apporter une assistance continue à vos anciens clients.
156
Il vous faut un programme actif pour surveiller le système des meilleurs résultats et actualiser la liste pour chaque requête. Vous devez également consulter régulièrement votre journal de recherche, tous les trimestres par exemple, pour voir si de nouvelles requêtes sont devenues suffisamment populaires pour mériter un meilleur résultat.
Site Web : priorité à la simplicité
Trier la SERP Généralement, la SERP doit être triée par pertinence et aucune autre option ne doit être proposée car cela ne ferait que dérouter l’utilisateur. Pour certains types de sites toutefois, il peut être logique de proposer d’autres critères de recherche. Vous pouvez classer les résultats par date plutôt que par pertinence pour ceux qui souhaitent surveiller les événements récents ou découvrir ce qui a changé sur un site. La plupart des internautes n’ont rien à faire des changements périodiques ou des mises à jour mais pour certains types de sites, les développements récents revêtent une importance toute particulière, notamment sur les sites d’actualités. Permettre aux utilisateurs de trier les résultats de la recherche selon certains attributs, comme le prix, peut aussi être très utile. C’est souvent le cas sur des sites de commerce électronique ou sur ceux qui présentent de nombreux produits.
Un classement par date peut être utile pour plusieurs types de sites Web, en plus des sites d’actualités. Les utilisateurs qui souhaitent évaluer la stratégie produit de Yahoo! à l’avenir peuvent se rendre sur le site du bureau américain des marques et brevets, afin de découvrir les brevets que la société a récemment demandés.
http://patft.uspto.gov
5 : Recherche
157
Dans la plupart des cas, mieux vaut proposer aux utilisateurs un ordre croissant ou décroissant, avec possibilité de basculer entre les deux. L’ordre de tri par défaut doit être le plus logique pour la plupart des utilisateurs. Ainsi, lorsque vous triez par date, placez les documents les plus récents en premier. Si l’utilisateur clique sur la colonne de date, le résultat le plus ancien doit alors s’afficher. Lorsque vous triez par prix, montrez les articles les moins chers en premier et les plus onéreux ensuite.
www.staples.com
158
Site Web : priorité à la simplicité
Pas de résultats Lorsque la requête d’un utilisateur ne renvoie pas de résultat, vous devez renvoyer une SERP spéciale, qui doit mentionner clairement qu’aucun résultat n’a été trouvé. Sans indication, les utilisateurs pourraient attendre indéfiniment la fin de la recherche. Les pages vides risquent aussi de faire croire que quelque chose a mal fonctionné. Une SERP sans résultat doit aussi permettre aux utilisateurs de modifier leur requête pour obtenir de meilleurs résultats. Elle doit aussi répéter la requête de l’utilisateur dans une case de recherche de manière à ce qu’il puisse la modifier facilement et fournir des conseils explicites pour corriger les erreurs ordinaires. Si vous disposez d’une fonction de correction d’orthographe, comme nous le conseillons, elle doit proposer des suggestions d’orthographe corrigée. (Page de gauche) Cette SERP permet un tri selon trois attributs de produits : le nom (ou la marque si tous les produits sont précédés par le nom de marque), la date de livraison et le prix. Ici, l’utilisateur recherche des cartes mémoire. Il aurait été agréable de pouvoir effectuer un classement en fonction de la capacité de stockage. L’utilisateur a simplement cliqué sur la colonne du prix. Un second clic sur « Sorted by price » (Trié par prix) inversera l’ordre de tri et placera les produits les plus chers en premier (cela peut servir à voir les cartes ayant la plus forte capacité, puisque ce seront sûrement les plus chères). Les miniatures ne sont pas très utiles pour ce type de produit, même si elles permettent de parcourir rapidement les marques. Elles peuvent toutefois l’être pour les produits facilement différenciables au point de vue visuel. Le principal problème de cette SERP réside dans l’espacement trop important entre les produits car les offres de remises et autres propositions prennent beaucoup de place. Il est plus difficile d’utiliser une SERP si l’on ne voit qu’un petit nombre de produits à la fois.
Enfin, terminez par un lien vers votre page de recherche avancée, le cas échéant. Même si elle est généralement plus déroutante qu’utile, cela vaut mieux que de ne rien trouver, et elle peut aider les utilisateurs à trouver un résultat.
Un résultat trouvé Parfois aussi, la recherche ne renvoie qu’un seul résultat. Certains sites passent outre la SERP et vous emmènent directement à la page trouvée. Nous déconseillons cette pratique car elle va à l’encontre de ce qu’attendent les utilisateurs, à savoir une SERP. Ils risquent d’être déroutés en voyant une page de contenu plutôt qu’une liste de liens. Une autre raison d’afficher une SERP même lorsqu’il n’y a qu’un résultat, c’est que les utilisateurs peuvent vouloir modifier leur requête lorsqu’ils voient le peu de résultats renvoyés. La SERP doit également présenter d’autres orthographes ou d’autres fonctions pour affiner la recherche. La SERP peut être ignorée lorsque les utilisateurs recherchent un élément connu, par exemple s’ils tapent un identifiant produit, un numéro de pièce ou tout autre identifiant unique qui ne peut pas servir à une recherche en texte brut.Vous pouvez alors accéder directement à la page de ce produit
5 : Recherche
159
Les utilisateurs se tournent presque toujours vers les moteurs de recherche lorsqu’ils ont un problème mais vont rarement au-delà de la première page de résultats ; la SEO doit donc être l’un des éléments les plus importantes de votre stratégie Internet.
Optimisation des moteurs de recherche Même si nous n’avons pas là une science exacte du fait des diverses technologies de moteurs de recherche, la SEO regroupe un ensemble de méthodes censées améliorer la notation d’un site Web dans un moteur de recherche. Nous l’avons vu au Chapitre 2, les utilisateurs se tournent presque toujours vers des moteurs de recherche lorsqu’ils rencontrent un problème mais vont rarement au-delà de la première page de résultats. La SEO doit donc être l’un des éléments les plus importants de votre stratégie Internet. Il est essentiel d’obtenir une position adaptée sur la première SERP pour tous les mots-clés importants si vous voulez être retrouvé par ceux qui recherchent vos produits ou vos services. Comment apparaître sur la première page dans les principaux moteurs de recherche ? Il n’existe pas de méthode miracle ; un consultant qui vous le promettrait tiendrait du « pirate informatique ». Ces personnes emploient des astuces peu éthiques réprouvées par les moteurs de recherche qui finissent généralement par supprimer les sites qui y font appel.
En travaillant sur ce chapitre, nous avons par bonheur reçu cet e-mail. Bien entendu, n’achetez jamais rien aux spammeurs. Mais dans ce cas, appliquons un autre conseil de base : si c’est trop beau pour être vrai, c’est qu’il y a un problème. Toute personne qui vous garantit un placement en première place dans un grand moteur de recherche est presque certainement un pirate : vous risquez d’être exclu des moteurs de recherche.
160
Site Web : priorité à la simplicité
Notre principal conseil est de se protéger de telles pratiques. Seules quelques stratégies garantissent un bon placement dans les SERP : si vous êtes une société importante ou une institution gouvernementale ou si votre nom est si célèbre qu’aucune autre organisation au monde ne l’utilise. Dans ce cas, vous devez apparaître sur la première SERP lorsque l’on recherche le nom de votre société ou de votre marque. Si vous n’y êtes pas, c’est généralement parce que vous commettez quelques erreurs simples sur votre site Web. Un consultant honorable le découvrira facilement et vous indiquera comment le résoudre. Peu après, votre site devrait obtenir le meilleur placement pour ce mot-clé. Pour tous les autres termes de recherche, ne vous attendez pas à arriver en haut des listes en une semaine. Si l’on vous promet l’impossible, vous risquez d’être déçu et les conséquences seront lourdes si vous êtes exclu des moteurs de recherche.
Astuce des SEO pirates Les consultants pirates tentent de manipuler les moteurs de recherche grâce à des techniques comme celle-ci, toutes considérées comme de la fraude par les principaux moteurs de recherche : Cloaking (camouflage). Un site Web peut envoyer différents contenus selon si la page est demandée par un utilisateur ou par un moteur de recherche. Le site masque son véritable contenu (ce que voient les utilisateurs) derrière une page spéciale, uniquement proposée aux moteurs de recherche et destinée à bien se placer dans le logiciel de ce moteur. Ces pages spéciales sont appelées des « pages passerelle ». Il est possible, mais peu recommandé, de disposer de pages passerelles séparées, comportant un texte inutile, mais optimisées pour chacun de vos mots-clé. Elles ne s’affichent pas pour les utilisateurs. Eux ne voient que les pages « réelles » qui sont invisibles pour les robots de recherche. Spam de recherche. Il s’agit de la création de milliers voire de millions de pages sans contenu réel mais dont le but est d’entrer dans les moteurs de recherche, quel que soit le mot-clé demandé. Il peut aussi s’agir de la création de grands nombres de
5 : Recherche
doublons d’informations, dans l’espoir qu’elles s’afficheront plus souvent dans une liste de recherche. Link farms (fermes de liens). Certains pirates créent des milliers de sites factices n’ayant d’autre objet que de se lier au site Web de leur client pour tenter de le rendre plus populaire. Spam de commentaires. C’est l’envoi de grandes quantités de commentaires sur les blogs, les forums de discussion ou autres espaces du Web qui permettent à des tiers d’ajouter du contenu. Ces commentaires comprennent invariablement un lien vers le site de l’auteur, afin de faire monter sa position. Un contributeur normal peut inclure un lien vers sa page d’accueil ; ces commentaires sont qualifiés de spam lorsqu’ils sont postés sans discrimination, souvent par un script automatisé qui envoie un contenu similaire à des milliers de sites innocents. Réaffectation d’un domaine. C’est l’achat d’un site Web qui possède une notation respectable dans les moteurs de recherche, pour finir par effacer le contenu qui a permis au site de se classer et l’utiliser à des fins tout à fait différentes (généralement de la pornographie).
161
www.bmw.de En 2006, Google a interdit le site principal de BMW en Allemagne car il employait le cloaking. Après avoir fait amende honorable, la société a été réhabilitée. Les moteurs de recherche n’aiment pas le cloaking du fait de leur aspect trompeur : ils donnent à une page un traitement différent de ce qu’elles « méritent ». On peut supposer que BMW a employé le « cloaking » du fait que ses pages sont à très forte teneur graphique. Il y a peu de texte à indexer dans les moteurs de recherche. Ainsi, le titre principal de la voiture présentée est une typographie graphique et non un texte réel. Il en va de même pour le titre de la catégorie « Neue Automobile » (voitures neuves), même si ces mots apparaissent également sous forme de texte dans la colonne de droite. Notons deux grandes différences entre les typographies graphiques et le texte réel : les lecteurs d’écran employés par les utilisateurs malvoyants ne peuvent pas lire le texte à base d’images et les moteurs de recherche ne peuvent pas indexer les pixels. Les moteurs de recherche ne comprennent que le texte, ce sont donc les utilisateurs aveugles les plus influents au monde.
162
Site Web : priorité à la simplicité
La SEO véhicule une réputation douteuse à cause des nombreux opérateurs pirates qui sont apparus au départ. Or, la profession est honorable ; aujourd’hui, un bon conseil en SEO s’en tiendra à des méthodes convenables et éthiques, appliquant les règles d’une bonne netétiquette. Il existe trois grands types de techniques SEO autorisées : ■
SEO linguistique ;
■
SEO architecturale ;
■
SEO de réputation.
Les trois doivent être appliquées à votre site. Par chance, quasiment toutes les opérations pour améliorer votre classement dans les moteurs de recherche sur le Web amélioreront également le moteur de recherche de votre site qui offrira de meilleures données à traiter. Après cela, apprenez la patience. Lorsque votre site sera plus facile à trouver, ne vous attendez pas à obtenir une meilleure place dès le lendemain. Il faudra peut-être des mois, voire des années pour remonter dans le classement. Et en supposant que vous soyez toujours en affaire dans deux ans, vous profiterez des résultats juteux de votre investissement dans la SEO.
Donner un nom Si vous avez la chance de devoir donner un nom à une nouvelle société ou à une nouvelle marque, l’une des premières étapes consiste à taper vos premières idées dans les principaux moteurs de recherche. Si vous obtenez des sites importants, évitez ce nom, même si vous avez l’autorisation légale de l’utiliser aux termes des lois sur les marques commerciales.
américaine FDA (Food and Drug Administration) ; même au Royaume-Uni, l’acronyme de trois lettres sert plus souvent à se référer à l’agence gouvernementale américaine qu’au syndicat britannique. Sur Google.com, la FDA britannique apparaît en position n° 8, les sept premiers faisant référence à l’agence américaine d’une manière ou d’une autre.
Citons d’ailleurs le cas du syndicat des responsables supérieurs du fonctionnariat britannique, la First Division Discounters Association ou FDA. Avec 13 000 membres, toutes membres importants du gouvernement, vous pourriez vous attendre à ce que la FDA soit bien traitée dans les moteurs de recherche. Lorsque vous recherchez « FDA » sur Google.co.uk, le site arrive en deuxième position, ce qui n’est pas mal, mais pas tout à fait satisfaisant. Le premier résultat concerne l’administration
Lorsque la FDA britannique a été fondée en 1918, personne ne s’attendait probablement à ce qu’elle soit confondue avec une importante agence gouvernementale américaine mais c’est le cas aujourd’hui. La FDA britannique n’atteindra probablement jamais la première place pour son propre nom ; c’est une cause perdue. Mais conserver une position relativement élevée dans les moteurs de recherche britannique et une présence sur la première page dans le reste du monde sont des objectifs raisonnables.
5 : Recherche
163
Les publicités ciblées fonctionnent bien car les internautes consultent les moteurs de recherche dans l’objectif explicite de trouver un lieu où se rendre.
Si tout échoue, utilisez les publicités ciblées. Bien entendu, l’option est onéreuse et le sera de plus en plus, ce n’est donc pas la meilleure solution pour obtenir un bon placement. Toutefois, les publicités ciblées permettent de bons résultats à court terme car elles peuvent être rapidement appliquées et les résultats sont immédiats. Les publicités ciblées fonctionnent bien car les internautes consultent les moteurs de recherche dans le but explicite de trouver un endroit où se rendre. S’ils voient une publicité sur le thème qui les intéresse, ils risquent fort de cliquer dessus. Les publicitaires peuvent satisfaire les besoins immédiats d’un utilisateur car ils ciblent les publicités en fonction des termes de la recherche. Ceci explique aussi pourquoi les publicités sur les pages d’accueil des moteurs de recherche ne fonctionnent pas : impossible de cibler la publicité tant que l’utilisateur n’a pas saisi sa requête.
Astuce : la beauté des publicités en texte seul La plupart des publicités des moteurs de recherche apparaissent sous forme de petites cases ne contenant que du texte : pas de grandes bannières colorées et clignotantes. En réalité, ce format très simple est pris très aux sérieux par les utilisateurs. De même, le fait de devoir exprimer un message en quelques mots amène les publicitaires à être plus ciblés et plus communicatifs. Les messages sans contenu sont trahis par ce format ; les publicitaires s’écartent ainsi des mauvais instincts qu’ils avaient dans les anciens supports. Même s’il n’existe pas de raison évidente pour ne pas utiliser le texte dans un élément sans contenu, par exemple « où voulez-vous aller ? », les utilisateurs ne
164
cliqueront pas sur ces publicités. Ignorer leurs besoins immédiats équivaut à une disparition sur le Web. Les sociétés qui emploient des publicités riches ne tenant pas compte de l’utilisateur peuvent donner l’impression qu’elles « font la promotion de la marque » ; en réalité, elles sont ignorées car elles ne répondent pas aux besoins. Après 13 ans d’étude sur le Web, nous pouvons clairement conclure que les utilisateurs sont parfaitement égoïstes et vivent l’instant présent. Leur donner exactement ce qu’ils veulent est la manière de réussir sur le Web. Les petites cases de texte des publicitaires y contribuent.
Site Web : priorité à la simplicité
Astuce : connaître la valeur des publicités ciblées Si vous faites appel à des publicités payantes dans les moteurs de recherche, vous devrez procéder au suivi des visiteurs qui s’en servent pour acheter sur votre site. C’est la seule manière de déterminer la somme que vous pouvez y consacrer. Imaginons que le taux de conversion des visiteurs provenant des publicités ciblées soit de 1 % et que vous obteniez un bénéfice de 10 % pour chaque visiteur converti. Vous gagnez ensuite 10 euros pour chaque utilisateur qui clique sur la publicité, ce qui signifie que vous pouvez enchérir jusqu’à 9 centimes par clic pour continuer à gagner de l’argent. Evitez les deux erreurs classiques lorsque vous étudiez le taux de conversion et autres retours sur investissement pour cette publicité ciblée : ■
Ne confondez pas les clics sur les publicités qui apparaissent dans une SERP avec les clics sur les publicités du réseau publicitaire géré par le moteur de recherche. Ce n’est pas parce qu’une
société de recherche gère un réseau de sites que ces sites sont des sites de recherche. Généralement, la valeur des publicités qui apparaissent sur les pages de contenu est bien inférieure à celle des publicités des SERP car les lecteurs des pages de contenu ne font que naviguer et peuvent cliquer sur votre publicité dans un moment d’inactivité. Investissez moins pour les publicités non ciblées ; si vous les analysez en même temps que les publicités ciblées, votre retour sur investissement sera faussé. ■
N’utilisez pas les systèmes de suivi de conversion ou autres analyseurs du Web proposés par les moteurs de recherche. N’oubliez pas que ce sont eux qui décident ce qu’ils vont vous facturer pour la publicité. Ne leur dites pas combien vous gagnez pour chacune. Utilisez toujours des progiciels d’analyse proposés par des fournisseurs indépendants qui n’ont pas d’intérêt dans votre facturation.
SEO linguistique Les utilisateurs qui tapent des requêtes dans les moteurs de recherche pensent rarement à utiliser les mots que vous avez employés dans votre dernier slogan ou dans votre documentation officielle. C’est pourquoi il est très important d’utiliser les mots de votre public. La principale directive de la SEO linguistique Utilisez les mots de l’utilisateur, en particulier si vous voulez être trouvé dans les moteurs de recherche. Les utilisateurs emploient leur propre vocabulaire pour leurs recherches.
Il existe deux raisons d’écrire des titres en langage parlé, comprenant ces mots-clés. Tout d’abord, les moteurs de recherche ont tendance à donner un poids supplémentaire aux titres et autres intitulés de paragraphe ; deuxièmement, les utilisateurs parcourent les listes de recherche sans lire autre chose que les titres. Si certains des mots de l’utilisateur apparaissent dans votre titre, ils sont plus susceptibles de porter attention à votre liste.
5 : Recherche
165
Astuce : les ratés d’une utilisation trop intensive des mots-clés L’une des rares fois où les directives SEO sont entrées en conflit avec les directives d’utilisabilité concerne le cas de la densité des mots-clés. Les consultants en SEO souhaitent souvent que vous remplissiez vos pages en répétant les mots-clés ciblés, même si cela réduit la lisibilité. Généralement, on utilise naturellement les termes importants à plusieurs reprises sur une page, mais s’il vous vaut écrire des phrases ampoulées afin d’inclure un mot-clé encore et encore, n’allez pas plus loin. Rien ne sert d’attirer des personnes sur votre page si elles doivent la quitter immédiatement parce que le texte est illogique ou inutile.
Dans le domaine de la SEO, connaître les mots employés par les clients est généralement appelé « recherche par motclé ». Il existe bon nombre de sites Web et de services logiciels dédiés qui vous aideront à réaliser une recherche ciblée. Ainsi,Yahoo! propose un outil de sélection de motsclés gratuit permettant d’entrer un terme et d’obtenir des suggestions de termes annexes. Yahoo! précise également la fréquence de recherche de chacun des termes suggérés le mois dernier. Ceci vous donne un premier aperçu aidant à attribuer des priorités aux mots-clés. N’oubliez pas, toutefois, de procéder en plus à votre propre analyse, car vous devez connaître l’emploi fait par votre public.
Google propose à ses clients publicitaires un outil pour suggérer des mots-clés pertinents de leurs produits et leurs services. En réalité, Google se contente de lire ce que vous avez déjà écrit sur votre site Web puis trouve les termes annexes souvent recherchés par les utilisateurs. Cette capture d’écran montre les principaux mots-clés suggérés par Google pour promouvoir cet ouvrage en fonction de la page Web que nous avons réalisée pour vendre le livre aux lecteurs de notre propre site. La liste n’est pas parfaite (par exemple, elle comprend « intranet usability » (utilisabilité des intranets) alors que nous traitons principalement d’Internet ici), mais c’est un bon point de départ pour choisir les mots-clés qui permettront de promouvoir le livre. http://adwords.google.com
166
Site Web : priorité à la simplicité
Les deux meilleures méthodes pour connaître la terminologie de vos utilisateurs sont vos journaux de recherche et vos tests utilisateur.Vous pouvez exploiter les fichiers journaux du moteur de recherche de votre site pour y découvrir les requêtes tapées par vos clients. A l’évidence, vous ne trouverez que les mots saisis par les personnes qui ont trouvé votre site, mais ces journaux demeurent la meilleure source pour des requêtes brutes. Pour vous faire l’idée la plus large du vocabulaire des utilisateurs, écoutez ce qu’ils disent lors des tests. Comment décrivent-ils leurs problèmes et vos produits ? Probablement par des termes totalement différents de ceux utilisés par votre service marketing.Vous pouvez aussi utiliser les transcriptions de groupes spécialisés, en vous méfiant toutefois du problème de la pensée de groupe : une fois qu’un membre du groupe spécialisé a commencé à utiliser un certain mot pour décrire quelque chose, les autres feront de même. C’est l’une des raisons pour lesquelles nous préférons toujours les sessions individuelles aux sessions de groupe. Astuce : penser en expressions, et non en mots-clés La plupart des utilisateurs ne tapent que deux ou trois mots dans une case de recherche. Les personnes les plus averties tapent souvent les requêtes les plus longues car elles ont avancé dans leur recherche commerciale et se sont donc fait une idée plus spécifique. Dans tous les cas, élevez la SEO au-delà des mots-clés individuels. Envisagez des expressions à plusieurs mots, plus efficaces.
Enfin, vous pouvez écouter les appels à l’assistance clientèle et lire les blogs et les groupes de discussion pour obtenir de plus amples informations sur le vocabulaire de vos utilisateurs. Attention, les blogueurs et les participants aux groupes de discussion en ligne ne sont généralement pas représentatifs de la clientèle dans son ensemble. Mais leurs mots sont probablement une meilleure indication du langage des clients que tout ce que vous pourrez entendre dans votre propre société. En pensant à la terminologie employée par les clients sur vos pages Web, n’oubliez pas les mots utilisés pour décrire un problème. Souvent, lorsque l’on vend une solution, on se concentre sur la description des fonctionnalités, voire des avantages, sans parler du problème sous-jacent. Or, les internautes cherchent souvent des informations sur leurs problèmes, sans nécessairement savoir ce qui existe pour le résoudre.
SEO architecturale La SEO architecturale s’appuie sur deux composantes : s’assurer que vos pages puissent être indexées et proposer une structure de liens appropriée pour guider les robots de recherche vers votre contenu.
5 : Recherche
167
Pour qu’un moteur de recherche puisse indexer votre contenu, ce contenu doit être composé de texte réel. Attention, les robots des moteurs de recherche ne voient pas les typographies graphiques. Ils ne peuvent pas non plus indexer les informations présentées sous divers formats multimédias comme la vidéo ou les fichiers audio. Vous pouvez inclure du multimédia sur votre site Web, à condition qu’il fonctionne (voir le Chapitre 11 pour obtenir des directives à ce sujet), mais vous devez les compléter par une description textuelle pour les indexer. Les moteurs de recherche découvrent les pages de votre site en suivant des liens. Ceux-ci doivent donc être codés en HTML brut et pouvoir être facilement décodés, pour indiquer le chemin aux robots. Cela signifie aussi que vos URL doivent décrire des pages Web ordinaires plutôt que des pages créées dynamiquement. Peu importe si la page est créée dynamiquement dans votre ordinateur. Ce qui compte, c’est que le robot du moteur de recherche pense qu’il s’agit d’une page ordinaire, placée à demeure sur le site. De nombreux robots ignoreront alors ce qui se trouve après le point d’interrogation de l’URL, signe généralement d’une requête de bases de données ou d’autres formes de contenus à usage unique. Soignez le chemin allant de votre page d’accueil aux pages à indexer dans les moteurs de recherche. Le texte d’ancrage des liens doit décrire la fonction la plus importante de chacune. Les moteurs de recherche mettent souvent l’accent sur le texte utilisé pour décrire un lien vers une page. Un texte adapté constitue une instruction d’utilisabilité primordiale car les utilisateurs parcourent souvent les pages à la recherche des liens et doivent savoir où ils iront sans devoir lire trop de texte. Assurez-vous également que les liens vers la page principale d’un concept soient plus nombreux que ceux vers des pages moins importantes car les moteurs de recherche ont tendance à donner la priorité aux pages souvent visitées. Si les internautes cherchent l’un de vos produits et trouvent une mention mineure dans un communiqué de presse placé plus haut que la page principale du produit, c’est que votre architecture est défaillante. Pour la corriger, créez un lien de retour du communiqué de presse vers la page du produit. De même, si vous disposez d’une architecture de l’information hiérarchique, la structure des liens doit refléter ces niveaux et offrir plus de liens vers les résultats 168
Site Web : priorité à la simplicité
les plus élevés. Utiliser les restes sous forme de navigation auxiliaire permet d’y parvenir car ces restes comprendront toujours des liens vers les pages principales et utiliseront leurs noms comme texte d’ancrage. Comment les moteurs de recherche déterminent la réputation d’un site A l’heure où nous écrivons, les moteurs de recherche déterminent une réputation en dénombrant le nombre de liens dirigés vers un site. La théorie veut que si de nombreux sites vous considèrent suffisamment digne de confiance pour placer un lien vers votre site, c’est que vous l’êtes probablement. A l’avenir, les moteurs de recherche iront probablement au-delà de cette simple constatation et mettront au point d’autres estimations. Mais même alors, les liens resteront probablement un composant important des notations de réputation.
Vous pouvez vous efforcer d’attirer d’autres liens. Vous pouvez, par exemple, faire figurer des liens dans tous vos communiqués de presse ; les sites qui diffusent les actualités finiront par se lier au vôtre.
SEO de réputation Les moteurs de recherche tentent d’offrir les meilleurs résultats en plaçant un fort accent sur la réputation des sites. Ceux qui sont considérés de qualité obtiennent généralement une note plus élevée que les sites considérés comme mauvais. Pour parvenir à un bon positionnement sur les SERP, les autres sites Web doivent créer des liens vers le vôtre. Les liens seront plus importants s’ils proviennent de sites ayant eux-mêmes une bonne réputation, vous devez donc particulièrement insister sur ce fait. Le meilleur moyen consiste simplement à proposer un bon site Web auquel les tiers auront envie de se lier. Si vous disposez d’un produit de grande qualité, les internautes placeront un lien dans une discussion à ce sujet. Si votre contenu est intéressant ou que vos services sont utiles, il en ira de même. Bien sûr, les autres sites ne se lieront au vôtre que si vous le permettez, en employant des URL simples pour chaque page et en les conservant dans le temps. En cas de rupture des liens, votre notation diminue. A l’inverse, si vous conser vez la même URL année après année pour le même concept ou service, votre notation augmentera graduellement. En plus d’avoir un site de qualité, auquel d’autres voudront naturellement se lier, vous pouvez vous efforcer d’attirer d’autres liens. Vous pouvez, par exemple, faire figurer des liens dans tous vos communiqués de presse ; les sites qui diffusent les actualités finiront par se lier au vôtre. Si vous ne le faites pas, vous laissez au tiers la charge de trouver votre URL.Vérifiez également que les associations professionnelles et autres groupes auxquels vous appartenez insèrent un lien vers votre site. Enfin, vous pouvez inscrire votre site dans les annuaires en ligne appropriés comme switchboard.com. Certains facturent l’inscription et sont rarement aussi bien notés que ceux dont le contenu est éditorial.Toutefois, selon le placement de votre site, le paiement peut être un bon moyen de vous améliorer, même si l’avancée dans les classements sera minime. 5 : Recherche
169
172 Suis-je arrivé ? 173 Correspondance entre la structure du site et les attentes du client 178 Navigation : soyez cohérent
184 Navigation : attention aux attraits de la mode
202 Menus déroulants verticaux : faites court
189 Réduire le fouillis et éviter la redondance
202 Menus multi-niveaux : le mieux est l’ennemi du bien
192 Liens et intitulés : soyez spécifiques
205 Puis-je cliquer dessus ? 210 Accès direct par la page d’accueil
6
Navigation et architecture de l’information Une conception chaotique entraîne des culs-de-sac et un gaspillage d’efforts. Les sites Web conçus dans la hâte, ne disposant pas d’une architecture de l’information efficace, empêchent les utilisateurs d’aller au bout de leur recherche. Ils risquent alors d’abandonner, voire de se tourner vers un autre site. Un site bien structuré offre aux utilisateurs ce qu’ils veulent lorsqu’ils le veulent. Dans ce chapitre, nous abordons certains des obstacles de conception les plus communs qui se dressent entre les utilisateurs et leurs objectifs et proposons des instructions pour les surmonter.
A de nombreuses reprises, nos testeurs ont dû se battre pour obtenir les informations voulues ; ils ont alors passé leur temps à se plaindre. En réalité, la difficulté à trouver ce qu’ils voulaient a été leur principal problème. Toutefois, quatre autres domaines ont généré encore plus de difficultés. Ces quatre domaines (navigation et menus, nom des catégories, liens et architecture de l’information, c’est-à-dire la structure de l’espace de l’information) déterminent la simplicité à trouver des éléments sur un site, par opposition à l’emploi de la fonction de recherche. Beaucoup considèrent que les « noms de catégorie » sont un thème sous-jacent de « l’architecture de l’information » car la structuration et la dénomination vont souvent de pair. Mais parce qu’ils impliquent différents types de décisions de conception, nous considérons qu’il vaut mieux séparer ces thèmes.
Suis-je arrivé ? L’un des plus gros compliments que l’on puisse faire à un site, c’est que les testeurs n’aient pas parlé de sa structure. C’est le travail du concepteur de s’inquiéter de la structure, pas celui de l’utilisateur.
Les sites Web mal conçus font plus que ralentir les utilisateurs : ils risquent de les décourager d’utiliser le site. Lorsqu’un internaute ne trouve pas ce qu’il veut, il suppose souvent que les informations ne sont pas disponibles. Frustré, il risque de se rendre ailleurs. Dans le cas d’un design agréable, l’internaute trouve et gère les informations sans efforts ; les intitulés, la mise en page et les relations entre les pages sont clairement représentés. Une navigation efficace indique à l’utilisateur où il se trouve, où se trouvent les éléments et comment accéder aux informations recherchées de manière méthodique. Une AI adéquate garantit le confort des utilisateurs et leur assure de pouvoir facilement revenir aux pages précédemment visitées. L’un des plus gros compliments que l’on puisse faire à un site, c’est que les testeurs n’aient pas parlé de sa structure. Sur les sites bien organisés, les utilisateurs peuvent se déplacer librement, en se concentrant sur leur tâche, sans avoir à s’inquiéter de la structure. C’est le travail du concepteur de s’inquiéter de la structure, pas celui de l’utilisateur.
172
Site Web : priorité à la simplicité
Lecture recommandée sur l’AI Pour en savoir plus sur les méthodes de planification et de structuration du contenu de votre site, nous recommandons l’ouvrage Information Architecture for the World Wide Web, par Louis Rosenfeld et Peter Morville (O’Reilly, 2002). Ce livre est un classique dans le domaine de l’architecture d’information. Pour économiser de l’argent, sachez que la première édition est disponible gratuitement sur le Web et contient des informations plus utiles que la plupart des ouvrages plus récent sur le sujet. La nouvelle édition mérite toutefois la dépense.
Correspondance entre la structure du site et les attentes du client Les sites les plus efficaces sont ceux qui répondent aux attentes des utilisateurs. Nous savons que ceux-ci ne passeront pas leur temps à se souvenir de la structure ou à apprendre par cœur la navigation des différents sites Web. Allouer des ressources adéquates pour concevoir la meilleure AI permet de s’assurer que les clients trouveront les réponses dont ils ont besoin aux endroits attendus. Plus la conception semble naturelle, plus les utilisateurs risquent d’y retourner. Les internautes n’aiment pas parcourir des liens ambigus pour obtenir du contenu. Ils attendent des sites qu’ils organisent l’information d’une manière qui fasse sens. Utilisez une structure de navigation qui reflète l’idée qu’ils se font du site et de ses informations et services. N’oubliez pas que le mot important est « eux » et pas « vous ». Vous pourriez penser que la structure organisationnelle de votre site est intuitive. L’une des plus grosses erreurs lors de la catégorisation des composants consiste à utiliser des schémas familiers aux concepteurs, comme un classement des produits par marque ou la mise en miroir du contenu du site à partir d’un schéma organisationnel. Les sites sont alors tout à fait logiques pour leurs créateurs, mais pas pour les utilisateurs.
Essayer de concevoir la structure de votre site sans prendre en compte vos clients est une grosse erreur qui peut vous coûter des milliers ou des millions de dollars. La conception doit se faire pour leur commodité, pas pour la vôtre.
En fait, la manière dont vous-même et votre société structurez et organisez l’information peut être très différente de celle dont vos utilisateurs l’envisagent. Si vous vendez des lampes torches par exemple, mieux vaut organiser les données selon les caractéristiques que les utilisateurs peuvent rechercher, comme le format des lampes, que par le nom de la marque, comme Xeon. Xeon pourrait bien être une ligne connue de lampes torches dans votre entreprise, mais pas chez vos clients. Essayer de concevoir la structure de votre site sans prendre en compte vos clients est une grosse erreur qui peut vous coûter des milliers ou des millions de dollars. Peu importe l’aspect agréable ou moderne de votre site, c’est inutile s’il n’est pas logique pour le public ciblé. La conception se fait pour leur commodité, pas pour la vôtre.
6 : Navigation et architecture de l’information
173
(Page de droite, en haut) Ce site est trop centré sur les marques. Pour trouver la table de billard qui réponde le mieux à leurs besoins, les internautes peu familiers avec les marques doivent cliquer sur chacune des trois options : Mizerak, Murrey et Mosconi. C’est une perte de temps. De plus, les descriptions marketing de chacune ne fournissent pas les informations nécessaires qui pourraient aider les personnes à se rapprocher de leur objectif.
(Page de droite, en bas) Même si le site Escalade fournit des informations sur différents types et styles d’équipements, les utilisateurs ne les ont pas trouvées car les logos prédominants et la stratégie de marque masquent les liens vers ces documents : « J’ai trouvé que c’était difficile. Une fois que vous arrivez chez le fabricant, c’est le bout du chemin. On ne pouvait pas regarder chaque produit individuellement… Je n’ai pas particulièrement aimé ». « Chaque étiquette de produit fait la publicité de la société, et non du produit ».
Comment organiser votre site ? Nous vous recommandons fortement de concevoir une structure qui reflète la pensée et les objectifs de vos utilisateurs, mais nous ne pouvons pas vous proposer de méthode clé en main pour y parvenir. Les demandes des personnes varient, l’AI optimale de chaque site est donc dictée par les objectifs singuliers de l’organisation et de ses utilisateurs. La création de l’AI et de structures de navigation efficaces remplit des ouvrages complets. Nous le signalons simplement ici pour vous démontrer son importance. Lorsque les internautes parviennent à leurs fins sur votre site, vous en tirerez des bénéfices.
Architecture de l’information pour intranets La directive qui consiste à éviter de structurer un site autour de l’organisation interne de la société s’applique uniquement aux sites Web ciblés sur un public extérieur. Pour concevoir un site destiné à un public interne d’employés, d’autres règles s’appliquent. Les employés d’une société connaissent souvent sa structure. De même, un grand nombre de tâches réalisées par les employés sont naturellement liées à la structure de la société. Ils ont souvent besoin de consulter le schéma organisationnel de l’entreprise pour trouver qui dirige un service et comment les divers services sont liés. Nous recommandons de présenter de manière explicite la structure de la société sur l’intranet. Mais il vaut toujours mieux, même pour les intranets, ne pas structurer l’AI autour de la charte de l’organisation. Les meilleurs intranets que nous avons étudiés utilisent les flux de travail et les tâches quotidiennes des employés comme base de leur AI.
« Je n’ai pas trouvé. Je vais sûrement aller sur un autre site. J’irai sur Google ».
174
Site Web : priorité à la simplicité
www.escaladesports.com
www.escaladesports.com
6 : Navigation et architecture de l’information
175
www.blackmountainbicycles.com Ce site tente de répondre aux besoins d’un large public en classant les vélos par marque et par type. Ceux qui sont déjà familiarisés avec une marque peuvent y accéder par le nom, et ceux qui recherchent selon une fonction ou une autre caractéristique peuvent la faire apparaître. Les utilisateurs doivent sélectionner une marque avant de trouver un endroit où rechercher des produits par caractéristique, par exemple le type et le prix.
(Page de droite, en haut) Catégorisation correcte : dans notre test, les personnes qui ont utilisé le site de la ville de San Diego n’ont pas été gênées par le grand nombre de liens sur la page d’accueil car ils sont organisés sous de petits titres courts et significatifs ; les utilisateurs préfèrent des liens courts et descriptifs aux longues descriptions détaillées. Remarquez que les sous-catégories aident à définir des catégories plus importantes en indiquant les spécificités de chaque contenu. Ainsi, il n’est pas toujours évident de savoir ce qu’une catégorie comme « Communauté » pourrait englober et nous la déconseillons généralement. Mais ici, son contenu est évident d’après les six sous-catégories. Le site utilise également la sous-catégorie générique « more » (en savoir plus), ce que nous déconseillons car elle n’est pas assez explicative.
176
Site Web : priorité à la simplicité
www.sandiego.gov
www.cummins.com Catégorisation incorrecte : les utilisateurs qui ont testé ce site s’attendaient à trouver des informations sur la technologie de la pile à combustible sous la catégorie Products (Produits), et non sous la catégorie Who We Are (Qui sommes-nous), la dernière option du menu. Cette catégorisation incorrecte a donné du mal aux testeurs ou leur a fait croire que les informations ne se trouvaient pas à cet endroit : « Maintenant, je suis perdu… Cela ne m’aide pas. Je n’ai pas l’impression d’avoir d’autres options. Je dois regarder sur la page. On ne voit rien dans les colonnes supérieures [les choix de navigation généraux] .» « Je recherche la catégorie des piles à combustible. Je ne la vois pas dans les produits. » « C’est un peu trop long ! »
6 : Navigation et architecture de l’information
177
Navigation : soyez cohérent Lorsque la navigation change considérablement d’une page à l’autre, les personnes doivent porter leur attention sur la manière d’utiliser le site Web et non sur son contenu. Les sites Web à la navigation peu fiable font hésiter les utilisateurs.
La cohérence est un concept fondamental de la navigation. Conserver une structure de navigation cohérente aide les utilisateurs à visualiser leurs emplacements et leurs options et évite d’avoir à deviner. Les éléments de navigation agissent comme des jalons pour passer d’une zone à l’autre. Modifier la navigation revient à supprimer les jalons alors que les utilisateurs sont au milieu de nulle part ; lorsqu’ils atterrissent, ce n’est pas à l’endroit attendu. La navigation qui se trouvait à gauche sur la page précédente peut maintenant se trouver au milieu ; les catégories ont changé. Le bouton Précédent ne fonctionne pas et il n’y a aucun moyen facile pour revenir en page précédente. Lorsque la navigation change considérablement d’une page à l’autre, les personnes doivent porter leur attention sur la manière d’utiliser le site Web et non sur son contenu. Les sites Web à la navigation peu fiable font hésiter les utilisateurs. Les grands sites Web composés de sous-sites ou des sites affiliés sont connus pour cela. Chaque sous-site est généralement créé par un groupe différent et possède sa propre organisation et son propre aspect. Lorsque les sous-sites sont reliés ensemble de manière aléatoire, l’expérience utilisateur est atroce. Les utilisateurs doivent souvent demander la même chose à plusieurs reprises car chaque sous-site agit indépendamment. Les sites Web d’entreprise, par exemple, donne l’apparence de l’incohérence lorsque les relations investisseurs, les relations presse et les sections de produits possèdent chacune leur propre schéma de navigation et un aspect totalement différent. Une bonne navigation est prévisible, elle permet d’explorer confortablement un site. Elle n’a pas besoin d’être étudiée ni mémorisée car elle traduit bien ce que l’internaute attend de la présentation des informations dans l’espace Web. Elle a un sens et un ordre et il y a peu voire pas d’ambiguïté sur l’endroit où se trouvent les articles. Les utilisateurs peuvent avancer, revenir en arrière, explorer tout en sachant qu’ils ne se perdront pas.
178
Site Web : priorité à la simplicité
www.pixar.com La zone de navigation en haut du site de Pixar reste visible et cohérente partout sur le site. Que les personnes se trouvent dans les sections « Feature Films » (Films vedette) ou « About Us » (A propos de Pixar), ils savent où se tourner pour revoir les diverses options de navigation. Nos utilisateurs ont considéré qu’ils pouvaient explorer ce site en toute confiance et facilement revenir à une zone à tout moment : « Tout est dit simplement en haut. Vous n’avez pas à chercher partout. Cela a été bien configuré et bien disposé. Vos yeux n’ont pas besoin de parcourir tout l’écran. » « Tous les éléments sur lesquels vous cliquez sont reliés les uns aux autres. On dirait que ce site Web est très facile à utiliser. »
6 : Navigation et architecture de l’information
179
www.ssa.gov
180
Site Web : priorité à la simplicité
(Page de gauche) Les zones de contenu qui se chevauchent et les options de navigation incohérentes sur le site Web de la sécurité sociale américaine sont susceptibles de générer des erreurs. Le choix de parcours différents mais qui paraissent similaires produit différents résultats. Ainsi, il est facile de trouver l’âge de votre retraite si vous sélectionnez « Plan Your Retirement » (Prévoir votre retraite) dans la page d’accueil. Toutefois, si vous optez pour un chemin différent et que vous entrez dans le Retirement Planner (Planificateur de retraite), il est plus difficile de trouver cette information. Le lien « Find my retirement age » (Trouver l’âge de ma retraite) est très apparent dans le premier exemple mais pas disponible dans le second même si tous deux semblent être des outils de planification de la retraite. Comparez les deux écrans et remarquez les choix qui se répètent sur les deux. Cette AI non structurée fait oublier aux utilisateurs ce sur quoi ils ont cliqué et quels sont les choix restants, ce qui donne des commentaires comme ceux-ci : « J’aurais pensé que l’âge de la retraite serait plus facile à trouver. J’ai l’impression d’être stupide. » « Cela pourrait être plus convivial. Le site doit s’adapter au mode de pensée d’un nouvel utilisateur. »
www.ssa.gov Lorsque les visiteurs de ce site cliquent sur « About Factors that Affect Your Retirement Benefits » (A propos des facteurs qui affectent vos prestations de retraite), les choix de l’écran précédent disparaissent pour être remplacés par des choix différents mais qui semblent annexes. Ceci a causé beaucoup de confusion chez les testeurs. Ainsi, ils ne savaient pas si « Calculate My Benefits » (Calculer mes prestations) de l’écran précédent équivalait à « Benefit Calculators » (Calculs des prestations). L’obligation revient aux utilisateurs de devoir naviguer entre les différents liens et déterminer s’ils sont équivalents et quelles sont les nouvelles informations.
6 : Navigation et architecture de l’information
181
www.bathandbodyworks.com Les sujets figurant sous les catégories principales se développent et se réduisent en fonction de la catégorie choisie par l’utilisateur. Chacun des trois panneaux possède des sujets différents et des styles de navigation différents. Ces changements extrêmes de navigation ont dérouté nos utilisateurs : « Je me perds. Je ne sais pas d’où je viens. » « Il y a trois barres différentes ; il vaudrait mieux qu’elles soient sur une page d’accueil, plutôt que de devoir cliquer à trois endroits pour avoir plus d’informations. » « C’est frustrant car on ne trouve rien. » « Je ne me souviens même pas : est-ce que j’ai cliqué sur Fragrance ? Où suis-je ? » « L’emplacement des éléments n’était pas du tout évident. Il fallait chercher plus que sur d’autres sites. »
182
Site Web : priorité à la simplicité
www.nestle.com Les incohérences du schéma de navigation sur le site de Nestlé ont compliqué la tâche de nos utilisateurs. La navigation globale change selon les sections. Par exemple, la navigation principale sur la page « All about Nestlé » (Tout savoir sur Nestlé) apparaît en haut et sur le côté. Les principaux éléments de navigation de la page Nutrition ne se trouvent toutefois qu’en haut mais à deux niveaux. Voici ce qu’en ont dit les testeurs : « Ce n’est pas un endroit où je reviendrai car la navigation est trop difficile et trop étrange. J’aime un autre style de sites Web : des barres latérales qui comprennent tous les éléments. Ici, on voit deux barres en haut et d’autres choses encore. Il y en a partout. » « Je ne trouve pas ce que je cherche sur ce site. Si je devais rechercher un en-cas, je partirais car je ne vois rien. » « J’ai perdu beaucoup de temps à essayer de trouver ce dont j’ai besoin. » « Il y a trop d’informations. Essayer de réaliser l’exercice m’a pris un peu plus longtemps que ce que j’aurais pensé. J’ai eu du mal à trouver quelque chose de simple. »
6 : Navigation et architecture de l’information
183
Evitez toutes les navigations fantaisistes ou amusantes. Les gens ont tendance à les détester. Réservez votre génie créatif pour les domaines du site qui intéressent véritablement les utilisateurs.
Navigation : attention aux attraits de la mode La navigation est un moyen vers une fin : son objectif est d’amener rapidement les utilisateurs là où ils doivent aller. Plus vous êtes efficace, plus les utilisateurs seront concentrés. Les principaux thèmes doivent être statiques et apparaître au moins une fois pour que l’on puisse rapidement se faire une idée des choix. Devoir attendre que les éléments se chargent lentement est une perte de temps. Tous les types de navigation dynamique doivent être simples à manier. Les menus qui sont trop sensibles et changent au moindre mouvement de souris seront plus énervants qu’utiles : ils gâcheront toutes vos chances de faire des affaires avec des seniors, des personnes handicapées et des utilisateurs novices. Les utilisateurs ne veulent pas d’une chasse au trésor, ne masquez donc pas les principaux éléments de navigation. Il est assez désagréable de devoir poursuivre des cibles mouvantes dans l’espoir de trouver quelque chose sur quoi cliquer. Cela est encore plus difficile pour une personne ayant une dextérité manuelle réduite ou une incapacité moteur et qui a du mal à contrôler la souris. Il vaut bien mieux pour tous étudier les options qui sont affichées, tout simplement. En résumé, évitez toutes les navigations fantaisistes ou amusantes. Les gens ont tendance à les détester. Réservez votre génie créatif pour les domaines du site qui intéressent véritablement les utilisateurs.
Les enfants aiment le démineur Dans les tests utilisateurs, nous avons découvert que les enfants âgés de six à douze ans adoraient le jeu de déminage que nous déconseillions précédemment. Ils considèrent souvent les sites Web comme un jeu et apprécient de devoir explorer un environnement pour l’amener à révéler ses secrets. Ils aiment en particulier déplacer la souris sur un graphique bien dessiné pour voir ce qui s’y cache. Arrivés à l’adolescence toutefois, ce jeu ne les intéresse plus. Ils sont impatients et veulent des résultats rapides lorsqu’ils se rendent sur les sites Web.
184
En général, les instructions d’utilisabilité pour les adolescents sont un peu différentes de celles des adultes et celles des jeunes enfants le sont bien plus encore. Il existe bien sûr certaines similarités mais si votre public est constitué de jeunes utilisateurs, nous vous recommandons de mener des études distinctes auprès de personnes de ce groupe d’âge. Sauf mention du contraire, les instructions de cet ouvrage concernent des utilisateurs adultes.
Site Web : priorité à la simplicité
www.wynnlasvegas.com Le menu principal de ce site se déplace automatiquement sur la page à un rythme lent et stable. Si vous voulez cliquer sur Reservations par exemple, vous devez attendre qu’il apparaisse. Vous pourriez augmenter la vitesse en déplaçant le pointeur sur les flèches mais cela représente un effort supplémentaire. Les sites Web doivent conserver un design élégant sans gaspiller le temps des utilisateurs.
6 : Navigation et architecture de l’information
185
www.bathandbodyworks.com Ancienne conception : nos testeurs ont ressenti de la frustration en voyant que les offres de produits de ce site se déplaçaient à mesure qu’ils avançaient la souris sur la page. Certains ne savaient même pas qu’ils contrôlaient le mouvement. En général, les utilisateurs détestent devoir déplacer leur souris sur une zone pour obtenir des informations. Certains n’ont même pas eu la patience de chercher les produits de cette manière et ont abandonné : « Ca bouge trop. Lorsque vous essayez d’approcher un produit, il se déplace. Ca me donne le vertige. Je n’aime pas. » « C’est frustrant quand ça s’en va alors que j’essaye de l’attraper. »
186
Site Web : priorité à la simplicité
www.bathandbodyworks.com Nouvelle conception : la conception du site s’est améliorée et élimine beaucoup de problèmes d’utilisabilité découverts lors du test utilisateur. Des pages statiques ont remplacé le modèle d’interaction dynamique et fantaisiste. Les internautes n’ont plus besoin de déplacer leur pointeur sur les images pour obtenir la description des produits. Nous avons présenté des captures d’écran de la précédente conception car ses erreurs continuent à apparaître sur d’autres sites. Bath & Body Works a retenu la leçon, vous le pouvez, vous aussi. En revanche, vous n’aurez peut-être pas besoin de perdre au préalable des opportunités commerciales !
6 : Navigation et architecture de l’information
187
www.dimewill.com Les intitulés de navigation masqués énervent les utilisateurs. Ici, il est impossible de cliquer sur la page avant d’avoir survolé les intitulés. Certains ne s’en sont pas rendu compte et se sont demandés ce qu’ils devaient faire sur cette page. Les internautes préfèrent des choix visibles au premier regard.
www.atlantis.com
188
Site Web : priorité à la simplicité
(Page de gauche, en bas) Le volet de navigation de ce site n’apparaît que lorsque les utilisateurs déplacent le pointeur sur les zones graphiques au centre. Nos utilisateurs ont regimbé lorsqu’ils ont dû chercher les menus de navigation à chaque fois qu’ils en avaient besoin.
Réduire le fouillis et éviter la redondance Ne proposez qu’une seule zone de navigation pour un même type de liens. Les catégories dupliquées ou peu reconnaissables compliquent l’interface, obligeant les internautes à faire des efforts pour s’y retrouver. Ils doivent alors s’évertuer à trouver la différence entre des liens portant des noms similaires. Lorsqu’ils sont répétés sur une page, les liens risquent de passer inaperçus. En fait, moins il y a d’objets sur la page, plus les utilisateurs les remarquent. Avec une pléthore d’éléments, les articles perdent en importance. Mieux vaut présenter clairement un objet à un seul endroit. La baisse de la redondance réduit l’encombrement et facilite la recherche d’informations.
Ne soyez pas dupes des doublons Les clients nous disent souvent qu’ils aimeraient placer des liens redondants sur leur page d’accueil ou ailleurs sur le site car chacun attire un trafic substantiel. Ils présentent même parfois des statistiques montrant que le trafic vers une page a augmenté lorsque les liens ont été dupliqués. Ces statistiques pouvant paraître intéressantes, elles sont souvent décevantes. Il est vrai que les utilisateurs cliquent sur chaque lien, mais cela ne signifie pas qu’ils n’auraient pas trouvé leur chemin s’il n’y en avait eu qu’un. Imaginons que les mêmes liens se trouvent en haut et en bas d’une page. Les utilisateurs envisagent souvent le lien du haut mais choisissent d’abord de lire le reste de la page avant de cliquer dessus. Arrivés au bas de la page, ils peuvent cliquer sur le second lien. S’il ne s’y était pas trouvé, ils seraient remontés et auraient cliqué sur le premier.
Il est également vrai qu’un double lien peut augmenter le trafic vers un point donné, mais cela est simplement dû au fait que vous insistez plus lourdement dessus et que vous lui laissez plus de place à l’écran. Agrandir le lien ou le placer de manière plus visible sur la page peut donner le même résultat sans créer de confusion. De plus, chaque fois que vous faites la promotion d’un article, il s’ensuit une baisse du trafic vers les autres articles de la page. Les utilisateurs n’ont qu’une quantité limitée d’attention à vous accorder. Si vous en concentrez la majeure partie sur un lien, vous réduisez le temps consacré aux autres. Au final, vous perdez généralement plus que vous ne gagnez en utilisant des doublons. Même si vous augmentez le trafic vers une page spécifique, vous risquez de perdre celui des utilisateurs qui ont été déroutés et n’ont pas trouvé ce qu’ils cherchaient.
6 : Navigation et architecture de l’information
189
www.usps.com
www.sandiego.gov
190
Site Web : priorité à la simplicité
(Page de gauche, en haut) Des liens en doublon compliquent inutilement le site des services postaux américains. Les options en milieu de page sont identiques à celles de la section bleue en haut.
(Page de gauche, en bas) La ville de San Diego répète en haut les onglets qui se trouvent déjà dans la zone du contenu principal. Il vaudrait mieux afficher la navigation dans un endroit évident et réserver le reste à un contenu pertinent ou laisser l’espace vide.
www.escaladesports.com Le site Escalade Sports propose des méthodes de navigation redondantes : une liste de texte et une méthode graphique (avec un cadran circulaire). La plupart des testeurs ont opté pour le texte car il est plus facile à parcourir. En dernier recours, certains ont utilisé le graphique mais ont été déçus de découvrir que les deux méthodes menaient à la même information. Quelle perte de temps !
6 : Navigation et architecture de l’information
191
Aidez les utilisateurs à faire rapidement la différence entre les liens en présentant des noms informatifs. Plutôt que d’afficher un lien « En savoir plus », par exemple, indiquez aux utilisateurs ce qu’ils trouveront précisément.
Liens et intitulés : soyez spécifiques Vérifiez que les utilisateurs comprennent facilement vos intitulés de navigation. Lorsqu’ils naviguent, ils ignorent généralement les gros blocs de contenu et se rapportent aux liens pour se faire une idée du contenu du site. Conservez des liens aussi courts que possible pour optimiser la lecture. Des jeux de mots ou des noms de catégorie inventés posent problème car ils ne sont pas compris par la majorité. Si vous devez employer des mots savants, expliquez toujours leur signification. Les personnes ont tendance à ignorer les mots qu’elles ne comprennent pas. Précisez vos liens en commençant par des mots-clés ou un mot informatif. Otez les mots superflus, comme le nom de votre société sur chaque lien ; ceci complique inutilement l’interface. Ceux qui commencent par des expressions identiques ou redondantes obligent à tout lire attentivement pour déterminer les différences. N’utilisez pas d’instructions génériques comme « Cliquez ici » pour vos liens. Aidez plutôt les utilisateurs à faire rapidement la différence entre les liens en leur donnant des noms informatifs. Plutôt que d’afficher un lien « En savoir plus », par exemple, indiquez spécifiquement aux utilisateurs ce qu’ils trouveront. (Page de droite, en haut) Ancienne conception : les mots vagues et les intitulés de catégorie comme « discover » (découvrir), « learn » (apprendre) et « live » (vivre) ont ennuyé nos testeurs. Certains se sont demandés ce que signifiait « live: with our products » (vivre : avec nos produits). Même avec une description, l’énoncé est banal et peu clair. Un intitulé comme « how to have a healthy lifestyle » (comment vivre une vie saine) apporterait des informations plus utiles. Les noms accrocheurs sont inutiles s’ils n’aident pas à savoir ce qui se trouve derrière le lien : « Les thèmes ne correspondent pas à ce que je pensais, par exemple “Head to Toe Solutions” (Solutions de la tête aux pieds) devrait plutôt s’appeler “Body Wash” (soins du corps) ou quelque chose dans le genre. » « J’ai trouvé l’exercice difficile à faire. Il n’y a pas assez de catégories pour trouver rapidement ce que l’on cherche. » (Page de droite, en bas) Nouvelle conception : après que nous avons réalisé le test décrit à la figure précédente, Bath & Body Works a redessiné son site. Sur cette page d’accueil, les noms de catégorie vagues sont remplacés par des mots plus directs, comme « Face » (visage), « Hair » (cheveux) et « Articles & Advice » (articles et conseils). Voilà qui est bien.
192
Site Web : priorité à la simplicité
www.bathandbodyworks.com
www.bathandbodyworks.com
6 : Navigation et architecture de l’information
193
www.bathandbodyworks.com BBW n’arrête jamais. Alors que nous terminions ce chapitre, la société a lancé un nouveau design, cette fois avec des intitulés de navigation plus descriptifs. Même si l’intitulé « Face » (visage) peut paraître trop obscur sur certains sites, il nous paraît acceptable ici. Pourtant, même sur ce site, le nouvel intitulé plus explicite « Facial skincare » (soins du visage) fournit une indication plus précise et dirige donc mieux les utilisateurs vers les produits qu’ils veulent acheter.
194
Site Web : priorité à la simplicité
www.hmce.gov.uk Ancienne page d’accueil : la page d’accueil du site du gouvernement britannique des douanes propose des informations sur les remboursements de la TVA et autres informations intéressant les voyageurs, grâce à des liens descriptifs tels que « Your customs allowances » (vos réductions douanières) et « VAT refunds for visitors » (remboursements de la TVA pour les voyageurs), qui indiquent exactement aux utilisateurs les informations qu’ils trouveront. Le site place intelligemment les liens les plus employés dans la zone principale de la page, loin de toute source de distraction.
6 : Navigation et architecture de l’information
195
www.hmce.gov.uk Nouvelle page d’accueil : malheureusement, cette page d’accueil nouvelle mouture a été faite au détriment de l’utilisabilité car les titres, les liens et la navigation ne précisent pas exactement leur contenu. Ainsi, que peut bien signifier « eVat Services » (services eTVA) ? Si vous vous êtes rendu au Royaume-Uni pour les vacances, sur quoi cliqueriez-vous pour savoir comment vous faire rembourser la TVA ? On voit de nombreux endroits mentionnant le mot « VAT », mais quel est le meilleur choix ? Dans l’ancienne conception, on trouvait un lien évident mentionnant « VAT refunds for visitors » (remboursements de la TVA pour les voyageurs) qui n’existe plus. Mauvaise pioche. En général, lorsque vous commencez à utiliser des mots commençant par « e » ou « Internet », c’est mauvais signe. Les utilisateurs savent qu’ils sont en ligne lorsqu’ils accèdent à un site Web et il n’est pas nécessaire d’attirer leur attention sur ce fait en cyber-transformant les noms de vos services.
196
Site Web : priorité à la simplicité
www.americanheart.org Les liens génériques « Learn more » (en savoir plus) qui sont répartis partout sur le site de l’American Heart Association ne guident pas les utilisateurs vers les zones d’intérêt. Les internautes ne peuvent pas parcourir rapidement les liens pour en connaître le sens. Au lieu de cela, ils doivent lire la légende, ce qui les ralentit inutilement. Mieux vaut leur expliquer ce qu’ils trouveront plutôt que de les tenter avec des liens ne contenant pas d’informations pertinentes. 6 : Navigation et architecture de l’information
197
www.dimewill.com Les testeurs trouvent souvent difficile de comprendre des noms de catégories non signifiants comme « Club » et « Passbook » (livret). Il est presque impossible de voir les options et de connaître leur signification sans cliquer dessus. Ce type de navigation nécessite trop d’efforts.
(Page de droite, en haut) Ancienne conception : ce site automobile laisse les utilisateurs perplexes car ses véhicules sont classés par noms de modèle, une solution adaptée aux familiers des modèles Honda mais pas aux autres. Nos testeurs se sont interrogés sur ce qu’étaient les différents modèles et n’ont pas su, par exemple, la différence entre une Odyssey et une S2000. On trouve bien un lien « All Models » (tous les modèles) au bas de la liste, mais peu d’entre eux l’ont vu. (Page de droite, en bas) Nouvelle conception : Honda a légèrement amélioré ses catégories de navigation. Notez que le lien précédemment intitulé Odyssey précise maintenant Odyssey Minivan (fourgonnette Odyssey) et S2000 est devenu S2000 Roadster. Ces changements ne sont toutefois que des cautères sur une jambe de bois : ils masquent les blessures sans les soigner. Il aurait mieux valu concevoir un système de navigation expliquant clairement la différence entre les modèles plutôt que d’exiger des utilisateurs qu’ils naviguent en fonction des modèles.
198
Site Web : priorité à la simplicité
www.automobiles.honda.com
www.automobiles.honda.com
6 : Navigation et architecture de l’information
199
www.automobiles.honda.com Cette page décrit mieux les divers modèles en apportant des prix et des photos. Les images donnent une indication du type de véhicule. Elles sont toutefois relativement petites et plusieurs modèles se ressemblent beaucoup : difficile de savoir que la Civic Si est un utilitaire.
(Page de droite, en haut) Ce site classe correctement les véhicules car il fait appel à des termes que les gens comprennent. Plutôt que de supposer que les utilisateurs connaissent les noms des modèles, Ford utilise des termes simples et familiers comme « Pickup Trucks » et « Minivans/Vans », plus utiles que les noms de modèle. (Page de droite, en haut) Les types de sol présentés sur ce site sont organisés par lignes de produits et non par caractéristiques. Cette structure pourrait paraître logique aux employés d’Anderson, mais elle ne l’est pas pour les clients qui recherchent des produits en fonction de leurs types. Des noms comme Appalachian et Biltmore n’auront aucun sens pour les internautes. Lorsqu’il devient nécessaire de fournir des instructions pour naviguer sur un site, c’est signe que la conception ne fonctionne pas. Mieux vaut répondre aux attentes des clients que d’attendre qu’ils s’adaptent aux vôtres.
200
Site Web : priorité à la simplicité
www.ford.com
www.andersonfloors.com
6 : Navigation et architecture de l’information
201
Plus la liste du menu est longue, plus elle est difficile à contrôler. Plus l’utilisateur doit descendre dans la liste, plus il risque de se perdre.
Menus déroulants verticaux : faites court Les menus déroulants verticaux sont devenus un outil de navigation fréquemment utilisé, principalement parce qu’ils permettent de gagner de la place à l’écran avec un encombrement limité. Au fil des années, les utilisateurs ont appris à s’y adapter. Même s’ils présentent des avantages, ces menus peuvent aussi poser problème, en particulier s’ils sont longs. Plus la liste est longue, plus elle est difficile à contrôler. Plus l’utilisateur doit descendre dans la liste, plus il risque de se perdre. Il vaut souvent mieux présenter de longues listes au format hypertexte standard, en laissant plus de place aux descriptions, pour aider les utilisateurs dans leurs choix. Les menus déroulants sont généralement étroits et laissent peu de place pour des noms descriptifs. Plutôt que de risquer que les explications se chevauchent ou aient peu de sens, faites cliquer les utilisateurs sur le titre principal pour les amener à une deuxième page qui recense clairement les choix possibles, avec des descriptions correctes.
Menus multi-niveaux : le mieux est l’ennemi du bien Utilisez avec parcimonie les menus horizontaux déroulants et limitez les niveaux à deux maximum. Un niveau supplémentaire va recouvrir la page et sera difficile à utiliser. Le troisième niveau est généralement signe de problèmes ; quant au quatrième, il empêche souvent d’utiliser le menu. Avec trop de niveaux, la navigation devient problématique. Les internautes supposent souvent que la distance la plus courte entre deux points est la ligne droite. Avec des menus à plusieurs niveaux, ils ont tendance à faire glisser la souris en diagonale pour accéder aux sous-menus, ce qui a pour conséquence de faire disparaître le menu. Frustrés, ils doivent recommencer. Le problème est encore pire sur les ordinateurs portables car le déplacement et le clic sont plus difficiles avec les pavés tactiles. Assurez-vous que les menus dynamiques s’affichent suffisamment longtemps sur la page pour qu’il soit possible de faire un choix. Les menus fantasques, exigeant de la précision, et qui s’ouvrent et se ferment aux moindres mouvements de souris sont difficiles à contrôler. Les utilisateurs expérimentés sauront peut-être les manipuler sans grande difficulté, mais l’utilisateur moyen devra déployer plus d’efforts. 202
Site Web : priorité à la simplicité
www.escaladesports.com Les menus multi-niveaux de ce site ont perturbé les utilisateurs car ils étaient difficiles à contrôler. Déplacer accidentellement le pointeur hors de la zone du menu des produits entraînait l’affichage d’un menu différent sans avertissement.
www.americanheart.org Le site Web de l’American Heart Association emploie judicieusement des menus déroulants, limités à deux niveaux. De même, la conception accepte un déplacement diagonal de la souris. Le menu reste affiché, même si l’utilisateur quitte la zone de menu.
6 : Navigation et architecture de l’information
203
www.blackmountainbicycles.com
www.blackmountainbicycles.com
204
Site Web : priorité à la simplicité
(Page de gauche, en haut) Ancienne conception : voici un exemple d’utilisation excessive des menus déroulants. Ces quatre niveaux recouvrent la majeure partie de la page, ce qui complique le contrôle des mouvements. Les erreurs sont plus probables car ce design demande de la concentration et de la dextérité. Ceux qui lâchent la souris ou sortent du menu doivent tout recommencer.
(Page de gauche, en bas) Nouvelle conception : la nouvelle conception de Black Mountain s’est améliorée : le nombre de niveaux est passé de quatre à trois. Malgré l’amélioration, les menus recouvrent toujours une partie significative de la page et obligent à beaucoup déplacer la souris.
Vérifiez que les utilisateurs sachent facilement sur quoi ils peuvent cliquer. Ne les obligez pas à deviner où sont les liens.
Puis-je cliquer dessus ? Lorsque les utilisateurs ne savent pas ce sur quoi ils peuvent cliquer, ils doivent s’efforcer de le deviner. Ils risquent alors facilement de rater ce qu’ils cherchent, abandonnent prématurément ou pensent avoir exploré toutes les options, alors que ce n’est pas le cas. L’instruction standard (souligner les liens et les afficher en bleu) donne une indication visuelle forte de leur fonction. N’utilisez pas le bleu pour d’autres éléments de texte car cette couleur est toujours fortement associée au clic. Ceci dit, le bleu n’est pas toujours la couleur adaptée aux liens. Pour des raisons de stratégie de marque ou d’esthétique, les liens bleus pourraient ne pas convenir. Dans ce cas, vous pouvez mettre le texte en gras et le surligner lorsque le pointeur le survole (même si ce dernier cas ne doit jamais constituer la seule indication du clic). Les éléments d’interface graphique qui apparaissent en relief ou qui ressortent évoquent aussi la possibilité du clic. Les utilisateurs reconnaissent généralement les formes de bouton standard ainsi que tous les autres éléments sur lesquels il est possible de cliquer dans les principales interfaces utilisateur. En résumé, vérifiez que les utilisateurs sachent facilement sur quoi ils peuvent cliquer. Ne les obligez pas à deviner où sont les liens. Apportez des indices visuels souvent associés au clic : du texte coloré et souligné. Ne vous fiez pas seulement aux curseurs en forme de main pour distinguer les liens. Les utilisateurs expérimentés eux-mêmes ne remarquent pas toujours que le pointeur se transforme en main et, pour les utilisateurs novices, le pointeur et la main reviennent souvent au même.
6 : Navigation et architecture de l’information
205
Affordance « Affordance » était à l’origine un terme de psychologie utilisé pour définir les actions possibles entre une personne ou un animal et le monde. Notre collègue Donald A. Norman a appliqué le terme à l’expérience utilisateur dans son ouvrage The Design of Everyday Things. Pour l’essentiel, en termes de design, l’ « affordance » (ou « capacité cognitive d’action ») concerne tout ce qui peut être fait avec un objet. Ainsi, une chaise permet de s’asseoir, un bouton doit être poussé et une poignée peut permettre de tourner ou de tirer en fonction de son design. L’idée de Don était que les affordances perçues sont encore plus importantes que les affordances réelles en termes de simplicité d’utilisation. Son exemple le plus célèbre est celui de la porte : une porte peut être tirée ou poussée, selon son sens d’ouverture. Lorsqu’une personne sait à l’avance s’il faut tirer ou pousser la porte pour l’ouvrir, l’interface utilisateur fonctionne. Autrement dit, la personne perçoit l’affordance de la porte simplement en la regardant, elle n’a pas à faire d’effort pour découvrir son affordance réelle (et elle n’a pas besoin de manuel pour actionner une porte ; s’il faut des instructions explicites du type « pousser » ou « tirer », c’est que la porte est mal conçue).
Dans les interfaces utilisateur basées sur des écrans, le concept d’affordance doit être adapté. En un sens, il est possible de cliquer sur chaque point à l’écran. Dans la pratique toutefois, on dit qu’il est possible de cliquer sur un élément à l’écran s’il se passe quelque chose en conséquence. Le principal problème est alors de savoir si cet élément possède l’affordance perçue du clic, autrement dit si l’utilisateur peut prévoir, en le regardant, qu’il se passera quelque chose après avoir cliqué. Si c’est le cas, c’est que le design possède une simplicité d’utilisation supérieure. Lorsque nous discutons de ce concept, c’est généralement pour savoir si l’objet présente une affordance perçue de clic pour l’utilisateur. On sait ainsi si l’utilisateur peut facilement faire un choix sur un écran donné. A l’inverse, il faut aussi savoir si un élément non cliquable présente cette affordance perçue de clic. Dans l’affirmative, les utilisateurs risquent de cliquer dessus et d’être déroutés en voyant qu’il ne se passe rien. Pour contourner ce problème, évitez les marqueurs déroutants. Par exemple, n’utilisez pas de symboles graphiques ressemblant à un bouton si l’on ne peut pas cliquer dessus et réservez aux liens le texte bleu ou souligné.
(Page de droite, en haut) Dans notre test, les utilisateurs de ce site se sont plaints qu’il n’existait pas de moyen pour ouvrir un compte en ligne et pensaient qu’ils devaient contacter un représentant de la banque. Ils n’ont pas réalisé que la case rectangulaire orange était un bouton. A cause de son aspect plat, les testeurs ont cru qu’il s’agissait d’un graphique statique, placé là pour attirer l’attention sur le lien Contact. Si l’on compare les deux liens, on voit que le texte en couleur et souligné possède une forte affordance perçue de clic, que n’a pas la case plate, paraissant purement décorative. La plupart des utilisateurs vont ignorer le graphique Apply (demander), même en l’absence du texte souligné à côté. Mais lorsque la case est associée à un élément présentant une forte affordance perçue de clic, leur attention sera presque toujours attirée sur ce dernier.
(Page de droite, en bas) La liste à puces bleue de ce site ressemble à un lien ; nos testeurs étaient perplexes puisqu’il ne s’est rien passé lorsqu’ils ont cliqué dessus. Certains ont même cru que le site ne fonctionnait pas. La couleur bleue véhicule une forte affordance perçue de clic. Ne l’utilisez pas pour des éléments non cliquables.
206
Site Web : priorité à la simplicité
www.bankone.com
www.san-diego-vision.com
6 : Navigation et architecture de l’information
207
www.bk.com Nos testeurs ne savaient pas que les titres de ce site étaient actifs car ils n’avaient pas l’affordance perçue du clic. Ils étaient soulignés, on pouvait donc simplement croire que le texte en gras correspondait à des titres. Les instructions précisent de cliquer sur Search (rechercher) pour obtenir les offres d’emploi ; les internautes ont été désorientés en ne voyant pas de bouton pour activer la requête.
(Page de droite, en haut) Voici un exemple de mauvaise utilisation des métaphores visuelles. Même si les cadres rectangulaires aux bords biseautés ressemblent à des boutons, ce n’en sont pas. Ils demandent de cliquer sur autre chose.
208
Site Web : priorité à la simplicité
www.bk.com
Savez-vous où vous pouvez cliquer ? Vous pariez pour les graphiques ou les titres en gras ? Alors, vous avez tout faux ! Le seul élément actif est le texte « Read more… » (en savoir plus). Le texte cliquable est bleu, très bien, mais qu’en est-il des autres éléments gras en bleu ? Il est important d’utiliser la couleur et les astuces graphiques de manière cohérente pour différentier les éléments. www.hmce.gov.uk
6 : Navigation et architecture de l’information
209
Une longue liste de liens directs peut aller à l’encontre des objectifs de la page d’accueil. Réservez-les pour les tâches les plus importantes.
La semaine où Mozilla a lancé son navigateur Firefox, il était fort probable que la vaste majorité des visiteurs de la page d’accueil s’y rende pour le télécharger. Mozilla a donc sagement inclus un lien direct sur la page d’accueil. Malheureusement, il était impossible de cliquer sur la flèche qui ressemble à une icône de téléchargement. Le problème d’utilisabilité est mineur, car la majeure partie des internautes clique sur le lien en dessous. Le site présente aussi des liens directs vers d’autres tâches prioritaires grâce à ses trois autres produits principaux.
Accès direct par la page d’accueil L’une des stratégies de conception les plus réussies que nous avons rencontrée lors de notre test consiste à placer des liens directs sur la page d’accueil vers un très petit nombre d’opérations prioritaires. Peu importe la qualité de la structure de votre architecture d’information ou la clarté de votre système de navigation, les utilisateurs risquent de se perdre ou de s’impatienter s’ils doivent naviguer dans plusieurs niveaux. Les liens directs permettent de raccourcir et de simplifier les opérations. Malheureusement, vous ne pouvez pas placer sur la page d’accueil des liens directs vers un grand nombre de fonctions. Cela nuit à vos objectifs car les utilisateurs sont plus susceptibles de cliquer sur le mauvais lien. De même, une longue liste de liens directs va à l’encontre des autres objectifs de la page d’accueil. Les détails diluent l’idée générale, donnant paradoxalement moins d’informations aux utilisateurs.
La page d’accueil comprend également un autre élément intéressant : la citation de Walt Mossberg, évaluateur respecté de logiciels. Vous serez bien plus crédible si un tiers extérieur à votre société fait l’apologie de votre produit, et plus encore s’il dénigre la concurrence, comme ici. Enfin, il est très intelligent de placer un lien vers l’article complet de W. Mossberg sur le site Web du Wall Street Journal. Cela montre que Mozilla n’a pas peur de laisser les utilisateurs lire tout l’article. Cette stratégie est efficace, que les utilisateurs suivent ou non le lien.
210
www.mozilla.org
Site Web : priorité à la simplicité
En savoir plus Pour en savoir plus sur les études mentionnées dans ce chapitre, consultez l’adresse www.nngroup. com/reports et cliquez sur « intranet », « children » et « teenagers ».
Réservez les liens directs de la page d’accueil pour un petit nombre des tâches utilisateur les plus importantes. Sur les zones particulières de la page d’accueil, vous devrez restreindre le nombre de liens directs de trois à cinq. Le mieux est de se limiter à trois liens au maximum pointant vers des zones contenant leurs propres liens.
www.mozilla.com Pour la version ultérieure de Firefox, Mozilla a encore plus simplifié sa page d’accueil et mieux mis en valeur l’objectif de la plupart des visiteurs : télécharger la nouvelle version. Eloigner le lien Other Systems and Languages (autres systèmes et langues) du gros bouton de téléchargement de la version principale a été une autre amélioration marquante sur le site. Dans le précédent design, ce lien se trouvait dans une zone ombrée, principalement destinée aux personnes souhaitant la version anglaise pour Windows. Tous ceux voulant une version différente étaient enclins à chercher ailleurs à l’écran.
6 : Navigation et architecture de l’information
211
221 Texte principal : la règle des dix points • Le problème, ce n’est pas l’âge • Prévoir les différences d’équipement • Résolutions d’écran habituelles
227 Spécifications relatives • Concevoir pour les malvoyants 232 Choix des polices • Dans le doute, utiliser le verdana
235 Mélange de polices et de couleurs • Texte et contraste avec l’arrière-plan • Daltonisme 247 Texte sous forme graphique 249 Texte mobile
7
Typographie et lisibilité
Les éléments artistiques comme la typographie et les choix de couleur jouent un rôle important dans la première impression que donne votre site Web. La typographie véhicule l’image de votre société ainsi que des informations sur ce que l’on peut faire sur le site. Des polices différentes peuvent apparaître fantaisistes ou sérieuses, et le corps et la couleur peuvent mettre l’accent sur le contenu. Faire passer des impressions positives sur le site passe par le choix de texte et de couleurs adaptées au Web. Cela vous paraît rudimentaire ? C’est tout le contraire !
L’objectif principal de la conception de communication est de véhiculer des informations. Choisissez une typographie apte à faire passer votre message.
La lisibilité demeure un problème sur les sites Web. Quel que soit la qualité du site, si les utilisateurs ne parviennent pas à lire facilement les textes qu’il contient, il est destiné à l’échec. Dans nos études, nous avons souvent rencontré des testeurs de tous âges et avec différentes capacités visuelles ayant des difficultés à lire du texte sur les sites que nous leur avons présentés. Certains devaient mettre des lunettes, d’autres se rapprocher de l’écran. C’est peu confortable et surtout inutile. Une typographie et des choix de couleurs adaptés sont des éléments essentiels d’une bonne conception visuelle, mais nous avons rencontré des choix réalisés uniquement en fonction de la marque, des préférences personnelles, de l’esthétique ou du simple ego du designer, aux dépens de l’utilisateur. Résultat : ■
le texte est trop petit ou flou ;
■
le texte ne peut pas être facilement redimensionné ;
■
la couleur du texte apporte un contraste inadéquat avec le fond ;
■
le texte est obscurci par les éléments qui l’entourent.
Même si le résultat n’est pas esthétique, nous devons admettre que certains de ces sites sont vraiment agréables et créés par des designers de grand talent. S’ils devaient concourir en qualité d’œuvres d’art, ils auraient du succès. Mais, à la différence d’œuvres exposées dans les musées, les sites Web doivent être utilisés par un grand nombre de personnes. Pour être encore plus efficaces, ils doivent respecter des directives pratiques.
Astuce : l’inconvénient du texte factice Pourquoi tant de sites Web présentent-ils du texte illisible ? C’est à croire que personne ne les a lus lors de leur conception. C’est en fait le cas. Souvent, les sites Web sont conçus sans tenir compte du contenu. Le designer remplit les pages de texte factice, commençant par « Lorem ipsum ». Il est souvent plus pratique pour les concepteurs d’utiliser du texte factice lorsqu’ils travaillent sur des visuels et que le contenu n’a pas encore été finalisé.
214
Ils risquent toutefois de rencontrer des problèmes de lisibilité s’ils se contentent d’afficher « Lorem ipsum ». En analysant des sites comportant un texte sans signification, vous imaginez seulement où il sera placé. Si vous n’essayez pas de le lire, vous ne remarquerez pas qu’il est inintelligible. Notre conseil : si le contenu définitif n’est pas disponible lors de la conception du site Web, insérez au moins du texte représentatif du site, au lieu d’employer un texte factice.
Site Web : priorité à la simplicité
Quatre grandes instructions pour le texte ■
Utilisez des polices traditionnelles, à une taille de 10 points ou plus.
■
Evitez les fonds noirs.
■
Utilisez du texte noir sur fond blanc.
■
Réduisez au minimum les textes graphiques, mobiles, tout en majuscules.
Les utilisateurs manipulent différemment un support papier et le Web ; les concepteurs doivent donc ajuster leurs sites en conséquence. Un écran publicitaire ou une couverture de magazine reste statique ; le lecteur le comprend en les regardant. Mais le Web, bien sûr, est interactif : l’internaute doit faire des choses et la typographie peut les y aider ou les gêner. Le principal objectif d’une conception de communication est de véhiculer de l’information. Choisissez donc une typographie qui fasse passer le message. Les caractères doivent être lisibles et traduire l’atmosphère et le ton du site.
www.sandiego.gov La jolie police et le fort contraste entre les couleurs du texte et du fond de ce site ont permis à tous les publics de notre test de lire confortablement : « J’ai trouvé ça facile à lire. Les mots sont suffisamment gros pour que je les voie. Depuis deux ans, je fais ça de plus en plus [se reculer de l’écran]. J’ai 43 ans et c’est nouveau pour moi. »
7 : Typographie et lisibilité
215
www.pixar.com Le petit texte blanc de cette page a été difficile à lire. Certains ont dû se rapprocher de l’écran pour distinguer les mots. Le principal problème reste les petits caractères mais le faible contraste entre le texte et le fond aggrave encore le problème. « C’est assez difficile à voir, le texte est vraiment petit. »
216
Site Web : priorité à la simplicité
www.hob.com Les publics les plus jeunes eux-mêmes se sont plaints des petits caractères et du manque de contraste sur ce site. Bleu clair sur blanc n’est pas une bonne combinaison de couleurs si vous souhaitez que les personnes lisent le texte : « Il vaudrait mieux que les mots soient plus gros et écrits dans une couleur autre que le bleu. On dirait qu’on essaie de lire du jaune. »
7 : Typographie et lisibilité
217
www.movies.com Faire entrer le plus de contenu possible sur une page en écrasant le texte nuit au résultat car la page est encombrée et difficile à lire. Personne n’a envie de consulter un site Web qui fait mal aux yeux alors que d’autres répondent au même objectif sans problème. « Je n’aime pas les petits caractères. Cela m’énerve. J’ai eu mal à la tête après avoir lu un peu. »
218
Site Web : priorité à la simplicité
www.whistlerblackcomb.com Même si ce site présente un bon contraste général, les utilisateurs se sont tout de même plaints de la taille des caractères. Ils ne comprenaient pas pourquoi il était impossible d’agrandir la page et le texte et pensé que les zones blanches de chaque côté de la page gâchaient de l’espace. En regardant les sites Web sur un écran à 1024 × 768 pixels (la taille la plus commune utilisée dans nos études), l’utilisateur voit environ 570 000 pixels d’informations. Sur cette page, seuls 119 000 pixels sont dédiés au contenu principal de la description du séjour « Spring break escape » (escapade pour Pâques) et aux liens pour lancer la réservation. Autrement dit, seuls 21 % de l’espace visible sert pour le contenu principal et 79 % sont consacrés aux images ou restent inutilisés. Certains de nos utilisateurs en ont été irrités : « Les caractères sont à la taille limite. Cela m’énerve. J’ai une vision normale, c’est donc un minimum. Il y a beaucoup d’espace gâché ici, j’aurais augmenté la taille d’un point ou deux. Si cela ne coûte pas d’argent [au site], c’est une chose à faire. »
7 : Typographie et lisibilité
219
www.dianon.com Ce fichier PDF Adobe ne s’affichait pas correctement à l’écran. Le texte était brouillé, ce qui le rendait difficile à lire, même à un agrandissement de 100 %. La présentation avait un aspect peu professionnel, ce qui a dégoûté les lecteurs. En général, les PDF ressortent mal sur les sites Web car les informations sont conçues pour le papier, et non pour l’écran. « Je trouve que c’est très rempli. Il y a beaucoup de petites choses. Les polices de cette page ne sont pas claires. C’est flou. Je n’utiliserais pas ce site sauf s’il le fallait vraiment car il est difficile à analyser. »
220
Site Web : priorité à la simplicité
Une petite police n’est pas une solution pour faire entrer plus de contenu sur une page. Plus de texte signifie moins de lecture. Le texte dense fait fuir les utilisateurs.
Texte principal : la règle des dix points Il n’est pas toujours nécessaire d’écrire le plus gros possible. Il n’existe pas une taille ou police de caractères qui plaise à tous les publics ou convienne à toutes les situations. Certains préfèrent les petites polices aux grosses et lisent aussi bien dans les deux cas. Pour les personnes rencontrant des difficultés de vision, de grosses lettres sont une nécessité. Lorsque vous choisissez des polices, mieux vaut opter pour les plus grandes pour éviter de vous mettre à dos certains de vos lecteurs. Assurez-vous que le texte principal soit au moins à 10 points. Un texte plus petit réduit rapidement la lisibilité car les lettres ne sont plus aussi distinctes, même pour des personnes ayant une vision normale. Les caractéristiques des minuscules ont tendance à se confondre à l’écran, en particulier en gras ou en italique. Tailles de texte recommandées Type de public
Taille en points
Public général
10 – 12
Seniors et personnes mal voyantes
12 – 14
Jeunes enfants et autres lecteurs apprenants
12 – 14
Adolescents/Jeunes adultes
10 – 12
Une petite police n’est pas une solution pour faire entrer plus de contenu sur une page. Disposer de plus de contenu ne signifie pas que les personnes liront plus. En fait, elles liront probablement moins. Le texte dense fait fuir les lecteurs. C’est une véritable traduction de l’adage « le mieux est l’ennemi du bien » en matière de conception : plus de texte implique souvent moins de lecture. Mieux vaut choisir sagement votre contenu plutôt que d’essayer de tout faire entrer sur une page. Si votre site manque vraiment de place, détournez un peu les règles et utilisez du texte plus petit pour les zones que la plupart des utilisateurs ne lisent pas, comme les conditions générales, le réseau des filiales, les droits d’auteurs et autres notices légales. Pour le reste, adoptez une taille aisément lisible. Confronté à des problèmes d’espace, vous devez d’abord essayer de résumer le texte. Si ce n’est pas possible, reléguez le texte le moins important aux pages secondaires, accessibles par des liens hypertexte. Pour la première page, concentrez-vous sur des informations utiles au plus grand nombre, parfaitement lisibles. 7 : Typographie et lisibilité
221
Astuce : évitez le lissage Le lissage, ou anti-crénelage, permet de lisser les bords découpés des formes et du texte vectoriels. Les concepteurs l’emploient souvent pour affiner les objets, mais cela peut créer de nouveaux problèmes comme du texte flou. Evitez l’anti-crénelage pour un texte de taille inférieure à 12 points. De plus, utilisez-le avec parcimonie, car cela gonfle la taille des fichiers image et augmente le temps de téléchargement, ce qui irrite les utilisateurs.
www.philipmorrisusa.com
Comparez la différence de lisibilité entre ces deux exemples. Remarquez que le texte du premier paraît plus net que celui du second. Cela est dû au fait que la première capture est la version crénelée et la seconde présente un anti-crénelage.
222
Site Web : priorité à la simplicité
Le problème, ce n’est pas l’âge Un texte pâle et de petite taille ne pose pas seulement problème aux personnes d’âge moyen et aux seniors. Dans une récente étude menée auprès d’adolescents, nous avons découvert qu’ils n’apprécient pas plus que leurs parents le texte peu lisible. Les adolescents parcourent rapidement les pages et veulent que les éléments importants attirent leur attention. Même avec une vision parfaite, ils préfèrent balayer la page sans avoir à faire d’efforts. Les lunettes, les lentilles de contact et les facteurs environnementaux, comme les niveaux d’éclairage, peuvent affecter la capacité des utilisateurs à lire le texte, quel que soit l’âge ou le niveau de vision. Afficher un texte lisible dans diverses situations physiques et environnementales assure à votre public qu’il utilisera confortablement votre interface.
www.pg.com Parvenez-vous à lire ceci ? Les adolescents eux-mêmes, avec une vision parfaite, ont eu des difficultés. Les mots en italique bleu clair se confondent avec l’arrière-plan, ce qui ne permet pas de distinguer facilement les mots.
7 : Typographie et lisibilité
223
www.mtv.com Les jeunes gens se sont plaints de la petite police de ce site. L’un d’eux a expliqué en particulier que d’être vu en train d’essayer de déchiffrer du texte portait tort à son image : utiliser le Web relaxé sur sa chaise est très cool, et n’a rien à voir avec être penché sur l’écran pour essayer de lire. « Tu regardes ça et c’est difficile à déchiffrer, ça fait loucher. C’est vraiment petit et on ne voit rien. Il faudrait que ce soit un peu plus gros. » « Les lettres sont trop petites. »
Astuce : différences de tailles selon les polices Testez différents caractères et tenez bien compte de la différence de taille. Le même corps peut paraître plus petit ou plus grand selon les polices. Ainsi, un même texte en 12 points apparaît plus gros en Georgia qu’en Times New Roman.
Voici un texte en Georgia 12. Voici un texte en Times New Roman 12.
224
Site Web : priorité à la simplicité
Prévoir les différences d’équipement A moins que votre public ne soit adepte des matériels récents, vous devez supposer qu’un pourcentage important d’internautes utilise d’anciennes machines avec de mauvais écrans.
Les choix de typographie doivent tenir compte d’une large gamme de systèmes informatiques, des plus modernes aux plus anciens. Les sites Web s’affichent différemment selon le matériel. Un texte pouvant paraître raisonnablement net sur des écrans neufs, dernier cri, risque d’être flou sur des matériels plus anciens, notamment s’ils sont plus petits. Ce n’est pas parce que vous voyez bien le texte sur votre écran qu’il en ira de même pour votre public. Les internautes qui travaillent dans l’informatique disposeront sûrement de systèmes plus récents. D’ailleurs, les sites Web sont souvent créés et testés sur des machines puissantes, avec de grands écrans et une bonne résolution, qui font rapidement oublier le reste du monde, moins bien équipé. A moins que votre public ne soit adepte des matériels récents, supposez qu’un pourcentage important d’internautes utilise d’anciennes machines avec de mauvais écrans. Les seniors, les adolescents et les jeunes enfants emploient souvent des équipements qu’on leur a donnés, avec des écrans peu performants. Les employés de bureau travaillent sur des portables aux écrans de petite taille ou sur des ordinateurs étonnamment anciens. Si vous savez qu’une partie significative de votre public dispose d’un équipement vieillissant, mieux vaut utiliser des polices nettes et visibles, pouvant être facilement déchiffrées.
Résolutions d’écran habituelles Les statistiques montrent que la plupart des écrans possèdent une résolution de 800 × 600 pixels, voire de 1024 × 768 pixels. Cette dernière est la plus populaire et la tendance montre qu’elle deviendra la plus commune à l’avenir. Le tableau qui suit montre la tendance pour les tailles d’écrans utilisées par un large échantillon d’utilisateurs sur une période de sept ans. Même si les petits écrans disparaissent rapidement, les grands écrans ne connaissent pas encore de croissance explosive.Toutefois, des résolutions de 1600 × 1200 pixels ou plus sont déjà courantes dans les entreprises high-tech. Les grands écrans seront de plus en plus fréquents pour les utilisateurs privés car ils permettent d’utiliser plus efficacement le Web et de nombreuses applications courantes.
7 : Typographie et lisibilité
225
Tendances pour les résolutions d’écran Note : les chiffres pour 1999 à 2005 sont des données empiriques tandis que ceux de 2006 à 2009 sont des estimations (source : TheCounter.com (1999-2001), OneStat.com (2002-2005) et W3Schools.com (2002-2005). Tous les sites ont testé une large gamme d’utilisateurs).
£ää¯
À>` jVÀ> nä¯
VÀ> Þi £äÓ{ ✕ ÇÈn Õ ££xÓ✕nÈ{®
Èä¯
{ä¯
*iÌÌ jVÀ> nää✕Èää Õ Ã®
Óä¯
ä¯ £
Óäää
Óää£
ÓääÓ
ÓääÎ
Óää{
Óääx
ÓääÈ
ÓääÇ
Óään
Óää
N’oubliez pas qu’il est toujours avantageux de connaître votre public car ces tendances générales ne le reflètent peut-être pas précisément. Même s’il est impossible de connaître exactement l’équipement utilisé, vous devez vous en faire une idée assez précise. En effet, si votre design est rigide et nécessite une résolution spécifique, certains ne pourront peut-être pas utiliser votre site. L’accessibilité nous concerne tous La conception d’interface peut soit gêner soit responsabiliser les utilisateurs. Les personnes dotées de capacités ordinaires peuvent être gênées par des interfaces encombrées, tout comme les personnes handicapées peuvent se sentir libres sur des sites bien conçus. Pour être accessible, un site doit être utilisable par des publics de divers niveaux. Un site accessible annule les obstacles qui se mettent sur le chemin des internautes ; il permet ainsi de surmonter un handicap. Permettre aux personnes malvoyantes de redimensionner le texte assure une meilleure lisibilité, ce qui élimine le défaut visuel.
226
Ne supposez pas que toutes les personnes malvoyantes emploient une technologie d’assistance. Les handicaps visuels sont variés, allant d’une mauvaise vue à l’absence de perception totale de la lumière. Les personnes les moins touchées ne se feront peutêtre pas aider par la technologie et il leur suffira d’agrandir le texte pour le lire. Les gens qui ont une bonne vue peuvent aussi vouloir agrandir le texte, en particulier sur des écrans de faible résolution. La gravité et le niveau des handicaps visuels augmentent généralement avec l’âge. Notre population vieillissant, le problème sera de plus en plus fréquent dans la conception Web. A un certain moment, nous souffrirons tous plus ou moins d’un handicap visuel.
Site Web : priorité à la simplicité
Spécifications relatives Nous recommandons d’utiliser une taille de texte relative (comme les pourcentages ou les valeurs em) au lieu de faire appel à des tailles fixes. Ainsi, par exemple, ne choisissez pas un texte en 14 points. Précisez plutôt qu’il doit être de 140 % par rapport à la taille du texte principal. Si les utilisateurs agrandissent l’ensemble, le titre restera plus gros que le reste. Un design fluide permet d’échelonner le texte par rapport aux paramètres du navigateur et à la résolution d’écran, offrant aux concepteurs tout loisir pour concevoir la structure de la page. La règle de la taille relative Il est futile de créer des mises en page parfaites au pixel près. Il faut par contre définir l’élément par défaut, mais l’utilisateur doit pouvoir le modifier. Partagez pour mieux
Dans leurs tentatives inadaptées pour tenter de contrôler l’aspect d’une page Web, de nombreux concepteurs emploient des unités de mesure absolues pour le texte. Celles-ci rendent presque impossible de modifier la taille du texte. C’est un gros problème, en particulier pour les utilisateurs malvoyants. Tenter de contrôler ce que voient les utilisateurs en adoptant une taille « unique » n’apporte que des problèmes. Les utilisateurs se plaignent des sites qui leur dictent leur conduite, en les empêchant d’apporter les ajustements nécessaires pour vivre une expérience confortable. Cela revient à posséder une voiture et à ne pas pouvoir en ajuster les sièges. C’est leur écran, laissez-les contrôler ce qu’ils voient. Même s’il existe un moyen pour désactiver les feuilles de style en cascade (CSS), l’utilisateur lambda ne le sait pas ou ne sait pas le faire. Pire encore, Microsoft a ôté le bouton de redimensionnement dans la version 6 d’Internet Explorer. Techniquement, les utilisateurs peuvent le replacer mais l’option est tellement masquée que la plupart ne la trouveront pas.
Concevoir pour les malvoyants Si votre site s’adresse aux seniors et aux personnes malvoyantes, offrez un moyen évident d’ajuster la taille du texte. Ne comptez pas sur vos utilisateurs pour modifier les paramètres de préférence de leur navigateur ; la plupart ont peur de le dérégler. Proposez un bouton bien visible sur vos pages, afin qu’il soit possible d’ajuster facilement la taille du texte.
7 : Typographie et lisibilité
227
Nous déconseillons de mettre ce bouton sur tous les sites importants, car cela augmente la complexité du développement et de l’interface, pour un gain insuffisant. Dans la plupart des cas, il suffit de choisir soigneusement une police qui s’affiche bien et puisse s’agrandir facilement.
www.socialsecurity.gov Le site américain de la sécurité sociale s’adresse à un public d’un certain âge et utilise à dessein de grosses polices ; il permet également d’agrandir la taille du texte.
(Page de droite, en haut) Malheureusement, changer la taille du texte n’est pas simple ici. Au lieu de proposer des commandes à l’écran, le site demande aux utilisateurs de modifier la taille du texte dans le menu de leur navigateur, ce qui est trop compliqué pour de nombreuses personnes âgées.
(Page de droite, en bas) Ancienne conception : ce site propose des options de redimensionnement du texte (Text size) mais les icônes sont si petites et obscures que beaucoup de nos testeurs ne les ont pas remarquées. Mieux vaut proposer une taille plus confortable par défaut que d’amener les personnes à réaliser des ajustements. Les meilleures icônes sont celles qui présentent la lettre « A » dans différentes tailles, selon l’opération souhaitée.
228
Site Web : priorité à la simplicité
www.socialsecurity.gov
www.nestle.gov
7 : Typographie et lisibilité
229
www.nestle.gov Nouvelle conception : la taille par défaut de la police sur le nouveau site de Nestlé s’est améliorée. La police, plus grande, est plus facile à lire.
(Page de droite, en haut) Ce site Web s’adresse à un large public en utilisant des polices relatives. La taille est ajustée pour un utilisateur ordinaire, mais le site propose malgré tout une autre option de redimensionnement. Notez l’utilisation des A de taille croissante. Cette symbolique fonctionne bien pour la plupart des utilisateurs.
(Page de droite, en bas) Ce site utilise des caractères adaptés à son principal public. Le texte lisible fonctionne non seulement pour les seniors mais aussi pour les personnes de tous âges. Il propose même des options de contraste et de lecture pour les personnes présentant des besoins spéciaux.
230
Site Web : priorité à la simplicité
www.wirednews.com
www.nihseniorhealth.org
7 : Typographie et lisibilité
231
Choix des polices Toutes les polices ne se valent pas. Lorsque vous en choisissez une pour votre site Web, optez pour celles qui sont disponibles sur les ordinateurs et les navigateurs de vos clients, faute de quoi leurs systèmes pourraient employer à la place le caractère par défaut, inadapté à votre texte. Ne sachant pas ce que possède chacun de vos utilisateurs, tournez-vous vers un design flexible et conservez un certain contrôle sur l’apparence de vos pages. Proposez toujours une liste de polices alternatives, par ordre de préférence. Les deux familles les plus communes sont serif (avec empattements) et sans serif (bâtons). Les polices serif possèdent des lignes transversales à l’extrémité de chaque lettre ainsi que d’autres embellissements, avec de fines variations. Les polices sans serif sont plus brutes et ne disposent pas de petites décorations. Elles associent traits épais et traits fins. Les polices serif étant ornées de détails fins, elles conviennent pour la typographie de qualité des livres et des magazines. Or, les études de lisibilité ont montré que la plupart des lecteurs déchiffrent le texte serif plus rapidement que le texte sans serif sur papier. Malheureusement, les écrans n’ont pas la qualité de l’impression et les petits détails du serif ne rendent pas aussi bien. Les études de lisibilité à l’écran montre que le texte sans serif est là plus rapide à lire. Ce tableau indique les polices pré-installées sur la plupart des navigateurs. Mieux vaut ne pas s’en éloigner. Polices habituelles et leurs familles
232
Nom de la police
Famille générique
Arial
Sans serif
Arial Black
Sans serif
Comic Sans MS
Cursive
Courier New
Espacement fixe
Georgia
Serif
Impact
Sans serif
Times New Roman
Serif
Trebuchet MS
Sans serif
Verdana
Sans serif
Site Web : priorité à la simplicité
Dans le doute, utiliser le Verdana Même avec la technologie actuelle, la résolution d’écran est bien inférieure à la résolution de l’impression. Les polices ornées ou détaillées peuvent s’imprimer correctement mais ne pas apparaître clairement à l’écran, donnant des lettres découpées et dégradées. Utiliser des polices inappropriées à la lecture en ligne peut porter tort à votre site, en particulier avec les tailles les plus petites. Les polices optimisées pour la lecture en ligne sont généralement dépouillées et nettes, plus faciles à lire à l’écran. Ce tableau décrit les caractéristiques des polices les plus communes.
Caractéristiques des polices habituelles Nom de la police
Lisibilité en ligne
Caractère/tonalité
Arial
Lisible à des tailles raisonnables. Adaptée à 10 points ou plus.
Moderne, basique, sans excentricités. Généralement appréciée par tous les publics.
Comic Sans MS
Lettrage tendance, difficile à lire en ligne, même avec de gros caractères.
Amicale, jeune, amusante et informelle. Ne convient pas pour les sites Web plus sérieux ou professionnels.
Georgia
La meilleure police serif conçue pour la lecture en ligne. Généralement adaptée pour des tailles de 10 points et plus.
Police traditionnelle mais plus moderne et plus lisible que le Times New Roman. Bonne alternative au serif.
Impact
Généralement utilisée pour l’impression. Peu recommandée pour la lecture en ligne. Mauvaise lisibilité, même avec des tailles plus grandes.
Grasse, ne convient pas pour les blocs de texte. Peut être utilisée avec parcimonie pour les titres courts.
Times New Roman
Adaptée pour les documents imprimés. A l’écran, la lisibilité diminue rapidement avec les tailles les plus petites. Uniquement adaptée à une taille de 12 points ou plus.
Traditionnelle, peu recommandée pour une présentation professionnelle. Généralement peu appréciée du public.
Trebuchet MS
Lisible à des tailles raisonnables. Adaptée pour des tailles de 10 points ou plus.
Moderne, simple.
Verdana
La police la plus lisible en ligne, même à de petites tailles.
Moderne, simple, professionnelle. Police recommandée pour le corps du texte, où la lisibilité est essentielle. Préférée des utilisateurs.
7 : Typographie et lisibilité
233
Les familles serif et sans serif possèdent chacune une police conçue pour la lecture en ligne : Georgia et Verdana. En général, les polices sans serif paraissent plus modernes et sont plus lisibles à de très petites tailles. Si vous n’êtes pas certain de celle à utiliser, mieux vaut choisir Verdana. Cette police sans serif est commune à tous les ordinateurs et fonctionne particulièrement bien à de petites tailles, c’est la plus agréable à lire à l’écran. Si vous souhaitez utiliser une police serif, Georgia est une bonne alternative car elle fonctionne aussi pour la consultation en ligne, même si beaucoup préfèrent Verdana, en particulier les plus jeunes, qui semblent penser que Georgia ne répond pas à l’idée qu’ils se font du style. Souvenez-vous que les polices serif sont légèrement moins faciles à lire que les polices serif à l’écran, n’utilisez donc Georgia (ou d’autres polices serif) que si votre style ou votre marque l’exige absolument.
Quand les écrans seront-ils au niveau de l’impression ? Les écrans actuels affichent généralement aux alentours de 80 à 100 points par pouce (ppp) alors que le papier peut afficher de 600 ppp pour une imprimante laser à 3000 ppp pour un magazine sur papier glacé. La valeur en ppp se traduit immédiatement en netteté des caractères. Du fait de leurs résolutions bien plus basses, les écrans d’ordinateur sont de fait plus flous, d’où la nécessité d’éviter les polices serif. Les écrans se sont un peu améliorés depuis la résolution de 72 ppp des premiers Macintosh en 1984. Mais leur évolution n’a pas été aussi rapide que celle d’autres composants du PC. Un PC moyen calcule à une vitesse environ 16 000 fois plus rapide
234
que les premiers Mac et possède environ 8 000 fois plus de mémoire. Mais l’écran moyen n’est que quatre fois plus gros que celui des Mac en 1984 et n’a même pas doublé son nombre de ppp. D’ici 2025, nous devrions finalement utiliser des écrans d’ordinateur décents, approchant la qualité typographique du papier. Les utilisateurs spécialisés seront probablement parmi les premiers à en profiter. Une fois que les écrans d’ordinateur seront au niveau du papier, les recommandations d’utilisabilité de la typographie en ligne devront s’adapter et nous dispenserons les conseils préparés il y a longtemps pour l’impression, notamment le recours aux polices serif de préférence.
Site Web : priorité à la simplicité
Limitez le nombre de styles de police sur votre site et appliquez-les avec cohérence. Les utilisateurs ne font pas confiance aux sites qui ressemblent à des demandes de rançon !
Mélange de polices et de couleurs Limitez le nombre de styles de police sur votre site et appliquez-les avec cohérence. Utilisez-les de manière subtile et efficace pour créer de l’ordre et faire la différence entre les éléments hiérarchiques de votre site. Ceux qui s’affichent de manière graphiquement similaire doivent avoir la même importance. Les différentes polices et les attributs de police peuvent aider les utilisateurs à faire la différence entre l’importance relative des titres et des informations. Affectez différents attributs, comme la graisse, la couleur et la taille, à une police spécifique pour la mettre en valeur. Mais procédez avec parcimonie ; lorsque tout est surligné, plus rien n’est mis en valeur. Cela vaut aussi pour la couleur. Nous recommandons un maximum de quatre couleurs et trois polices dans les principales zones de votre site, faute de quoi il paraîtra peu structuré et peu professionnel. Ne faites pas confiance aux sites qui ressemblent à des demandes de rançon !
Voici un exemple d’utilisation trop intensive des attributs de typographie. Pourquoi certains mots sont-ils en gras et de différentes couleurs ? Les couleurs et les attributs doivent être employés avec parcimonie et à dessein.
www.nestle.com
7 : Typographie et lisibilité
235
www.sandiego.gov Comptez le nombre de caractères différents sur cette page. Avec autant d’effets pour attirer votre attention, difficile de savoir où donner de la tête.
(Page de droite, en haut) Le nombre de couleurs et de styles de polices, associés aux images et éléments graphiques et d’arrière-plan, encombrent trop la page. Utilisez sagement les éléments de conception visuelle qui vont vous permettre de communiquer et de créer de l’ordre, et pas simplement de décorer la page.
(Page de droite, en bas) Les conditions générales de ce site sont écrites en majuscules, ce qui donne l’impression d’un mur de texte. Nous savons que les utilisateurs ont tendance à ignorer les conditions d’utilisation ; les afficher en majuscules les rend encore moins captivants.
236
Site Web : priorité à la simplicité
www.money.cnn.com
www.bedbathandbeyond.com
7 : Typographie et lisibilité
237
www.cendant.com Le texte bleu tout en majuscules forme des blocs de texte compacts, difficiles à parcourir. Le format en trois colonnes aboutit à un placement singulier des mots ; enfin, démarrer un lien par « CLICK HERE FOR » (cliquez ici pour) est superflu. Les utilisateurs savent que l’on clique sur les liens.
Non au tout majuscule ! LE TEXTE ECRIT TOUT EN MAJUSCULES REDUIT LA VITESSE DE LECTURE D’ENVIRON DIX POUR CENT. LES LETTRES MIXTES (MAJUSCULES ET MINUSCULES) PRESENTENT DES VARIATIONS QUI SEPARENT LE TEXTE EN FORMES BIEN RECONNAISSABLES, TANDIS QU’UN PARAGRAPHE
238
TOUT EN MAJUSCULES PRESENTE UNE HAUTEUR ET DES DESSINS UNIFORMES. DE PLUS, LE TOUT MAJUSCULE PEUT SEMBLER INFANTILE ET AMATEUR OU AGRESSIF ET PEU PROFESSIONNEL. RESERVEZ DONC LES MAJUSCULES AUX TITRES COURTS OU POUR DONNER L’IMPRESSION QUE VOUS CRIEZ.
Site Web : priorité à la simplicité
www.homedepot.com Inutile de présenter le titre des communiqués financiers tout en majuscules. Les mots en majuscules et minuscules sont plus simples à lire, en particulier lorsque le texte ne présente pas de vrai contraste ou avec des liens soulignés.
7 : Typographie et lisibilité
239
Texte et contraste avec l’arrière-plan Outre le type et la taille des caractères, la lisibilité de votre site sera aussi assurée par un bon contraste des couleurs. N’oubliez pas que la lecture en ligne est plus difficile que sur papier. Des couleurs de texte et d’arrière-plan très contrastées facilitent la lecture. Un texte noir sur fond blanc est plus facile à lire. En général, les couleurs sombres conviennent mieux pour le texte ; quant à l’arrière-plan, mieux vaut employer de jolies couleurs non saturées. Bien qu’un texte blanc sur un fond noir présente le même contraste que du texte noir sur fond blanc, la lisibilité n’est pas aussi élevée, en particulier pour de petites tailles de caractères. Lorsque les couleurs sont inversées, les bords blancs paraissent flous. Pour résoudre ce problème, vous devez augmenter la taille du texte à au moins 12 points pour certaines polices. S’il est impossible d’éviter les fonds sombres, vous pouvez réduire ce problème en choisissant une couleur foncée, différente du noir. Même si le contraste est moindre, le texte sera moins flou. Les couleurs sombres conviennent mieux pour le texte et des couleurs douces et non saturées conviennent mieux pour l’arrière-plan. Un faible contraste peut faire mal aux yeux et générer un inconfort.
Evitez d’utiliser des couleurs proches, comme du gris clair sur du blanc. Un faible contraste peut faire mal aux yeux et générer un inconfort. Ce problème est intensifié pour les personnes malvoyantes, ayant plus de difficultés à voir les lettres ou les images sur des arrière-plans d’une teinte ou d’une intensité similaire. Soyez prudent en utilisant des combinaisons de couleurs vives, comme le violet et le jaune. Même si ces couleurs présentent techniquement un contraste élevé, les couleurs lumineuses ont un mauvais effet sur le texte informatique, plus difficile à lire. Rien n’effraie autant les novices qu’un arrière-plan encombré. Evitez-les. Non seulement l’effet est désastreux, mais la lisibilité est moindre. Epargnez-vous des maux de tête. Comme l’a si bien dit l’un de nos testeurs : « ils ont choisi la mauvaise couleur pour les mots. L’arrière-plan est lumineux et le texte est vif, il est donc difficile à voir. Parfois, vos yeux mélangent les couleurs, ça détruit la vue. C’est dommage de devoir sélectionner le texte pour le lire.»
240
Site Web : priorité à la simplicité
Niveau de lisibilité des différentes combinaisons de couleur Combinaisons de couleur
Niveau de lisibilité
Texte noir sur fond blanc
Elevée : le meilleur contraste. Différence très perceptible.
Texte bleu sur fond blanc
Elevée : différence très perceptible, à condition d’utiliser un bleu foncé.
Texte noir sur fond gris
Moyenne : différence très à moyennement perceptible selon les combinaisons de couleurs et le niveau de saturation.
Texte blanc sur fond bleu
Faible : difficile à lire car le fond sombre semble surpasser le texte blanc.
Texte gris sur fond blanc
Faible : faible contraste. Différence peu perceptible.
Texte blanc sur fond griS
Faible : faible contraste. Différence peu perceptible.
Texte rouge sur fond bleu
Très faible : certaines combinaisons de couleurs audacieuses créent un effet de couleur vive, fatigant pour les yeux.
Texte rouge sur fond noir
Très faible : certaines combinaisons de couleurs audacieuses créent un effet de couleur vive, fatigant pour les yeux.
www.socialsecurity.gov Cette page d’accueil contient un grand nombre de liens. Toutefois, l’organisation soignée et un design simple facilitent la lecture. Le faible recours à la couleur pour détacher les titres et les liens attire l’œil vers les zones d’intérêt. On voit un fond « en filigrane » derrière le texte, contre quoi nous nous élevons souvent, mais celui-ci est discret et peu distrayant. « Les couleurs sont super car j’ai trouvé facilement les choses. »
7 : Typographie et lisibilité
241
www.staff.amu.edu.pl/~zbzw/ph/sci/msc.htm Les personnes n’ont pas apprécié l’utilisation de texte rouge sur cette page car il est éblouissant et difficile à lire, en particulier sur fond jaune. La difficulté à lire les couleurs lumineuses peut fatiguer les yeux.
(Page de droite, en haut) Ce site est visuellement agréable mais le texte est trop petit et le contraste insuffisant. Le texte blanc sur fond sombre apparaît flou même pour les personnes dotées d’une vision normale.
(Page de droite, en bas) Les testeurs n’ont pas apprécié les zones de navigation car les couleurs du texte et du fond sont trop sombres et trop peu contrastées. La liste déroulante elle-même n’a pas de contraste. Elle est non seulement difficile à lire, mais aussi esthétiquement peu attirante. « Cette couleur sombre est très ennuyeuse. Bleu sur bleu, c’est presque impossible à voir. Cela n’attire pas l’œil. Même le titre « Interest Checking Account » n’est pas mis en valeur. Tout est sombre et triste. »
242
Site Web : priorité à la simplicité
www.atlantis.com
www.dimewill.com
7 : Typographie et lisibilité
243
www.gdarchitect.com Voici un exemple extrême d’un mauvais contraste. Si votre écran présente une faible résolution ou s’il est mal paramétré, vous pourriez bien ne pas voir cette page.
(Page de droite) Les petites lettres associées au texte clair du site de Nestlé rendent la lecture difficile pour certains de nos testeurs : « La typographie ne ressort pas. Du bleu clair sur fond blanc, ça ne se voit pas. Vous devez bien observer l’écran pour voir ce que vous cherchez. »
244
Site Web : priorité à la simplicité
www.nestle.com
Deux méthodes pour faire éclater les couleurs ■
■
A chaque fois que possible, utilisez des combinaisons de noir et de blanc ou utilisez des couleurs dont l’intensité varie beaucoup. Une manière de tester vos choix consiste à utiliser des niveaux de gris. Les éléments importants de votre page doivent alors toujours être visibles. Proposez un deuxième indice, autre que la couleur, pour faire ressortir des informations importantes. C’est particulièrement nécessaire si vous utilisez du vert et du rouge.
Daltonisme N’oubliez pas qu’environ 8 % des hommes et 0,5 % des femmes présentent une forme donnée de daltonisme, qui les empêche de faire la différence entre certaines couleurs. Celui qui concerne le rouge et le vert est le plus fréquent. Ces personnes ne parviennent pas à distinguer les couleurs situées sur la plage des longueurs d’onde moyenne à grande. Les couleurs doivent être perçues telles qu’elles sont présentées, en particulier lorsqu’elles servent à faire passer une idée. Opter pour une mauvaise combinaison, comme du texte rouge sur fond vert, peut totalement empêcher certaines personnes de lire car elles ne feront pas la différence entre la couleur du texte et celle de l’arrière-plan.
7 : Typographie et lisibilité
245
finance.yahoo.com Yahoo! emploie un code couleur pour donner aux utilisateurs un aperçu rapide de la montée ou de la baisse des actions. En haut de la page, le vert signale que le marché des actions a monté lorsque cette capture a été réalisée. Les daltoniens qui ne voient pas le vert pourront toujours l’interpréter grâce au symbole de la flèche. La principale action a baissé ce jour-là, comme l’indique la couleur rouge. Une fois de plus, les daltoniens pourront se fier à la flèche descendante. En principe, nous préférerions une notation cohérente : soit des flèches, soit des signes plus et moins. Mais, dans la pratique, les deux notations sont claires et cette incohérence mineure ne causera probablement pas de problèmes d’utilisabilité.
246
Site Web : priorité à la simplicité
Texte sous forme graphique Les graphiques font gonfler les fichiers. N’oubliez pas que la moitié des internautes utilisent toujours des connexions bas débit. Les utilisateurs quittent souvent les sites avant la fin du chargement.
Les textes construits à l’aide d’images conviennent parfois pour certains éléments (comme des boutons), mais pas pour de gros blocs de texte. Les concepteurs qui aiment utiliser des polices fantaisie, non standard, tentent quelquefois de contourner le problème de compatibilité des navigateurs en réalisant une image du texte. Bien que certaines zones de texte, judicieusement choisies, peuvent être ainsi du meilleur effet, un site Web basé sur les graphiques pose problème pour plusieurs raisons : ■
Les graphiques font gonfler les fichiers. N’oubliez pas que la moitié des internautes utilisent toujours des connexions bas débit et font preuve de peu de patience pour les sites qui se chargent lentement. Ils quittent souvent les sites avant la fin du chargement. Si vous prévoyez d’utiliser des boutons et des titres graphiques, calculez la taille de chacun, multipliée par le nombre de graphiques. Cela pourrait donner un chiffre faramineux. Pour réduire la taille des fichiers, ne sous-estimez pas le pouvoir du HTML brut, également plus facile à modifier.
■
Le texte sous forme graphique ne peut pas faire l’objet d’une recherche et nous entendons souvent des utilisateurs se plaindre lorsque leur recherche ne fonctionne pas. Les documents PDF et les sites possédant un fort contenu graphique sont vides de texte, la recherche est donc presque impossible.
■
Le texte sous forme graphique ne peut pas être sélectionné. Lors d’une recherche, les utilisateurs aiment à sélectionner une zone de contenu et à la coller dans un programme comme Word, pour s’y référer par la suite ou l’imprimer. Ils apprécient aussi de copier-coller une adresse dans des programmes de navigation routière pour obtenir les directions.
■
Le texte sous forme graphique ne peut pas être agrandi ni réduit. Même si le texte de votre site est redimensionnable, les graphiques conservent leur taille.
■
Les lecteurs audio ne lisent pas le texte sous forme graphique. Dans ce cas, vous devez proposer un texte alternatif qui pourra être lu par le système.
7 : Typographie et lisibilité
247
www.bacararesort.com Vérifiez que les zones que les utilisateurs pourraient vouloir copier et coller, comme les adresses, puissent être sélectionnées. La version Flash de ce site ne permet pas de sélectionner le contenu de cette page. On trouve une icône pour accéder à une version imprimable de la page, mais elle est trop peu explicite et trop éloignée de la zone principale. Pire encore, le site prend les rênes du navigateur, empêchant l’utilisateur d’être aux commandes de sa navigation.
248
Site Web : priorité à la simplicité
Texte mobile Les internautes sont ennuyés par le texte clignotant ou mobile. Ils veulent contrôler leur rythme de lecture et le texte dynamique les dépouille de cette liberté.
Les internautes sont ennuyés par le texte clignotant ou mobile car il les distrait de ce qu’ils tentent de faire. Ils l’associent généralement à de la publicité et risquent de l’ignorer. Bizarrement, le texte mobile est l’une des tactiques destinées à attirer l’attention des utilisateurs mais qui finit par les faire fuir car elle est associée à des éléments promotionnels et peu dignes de confiance. Nous l’avons vu dans nos études au Japon, le texte mobile est particulièrement problématique pour les utilisateurs étrangers, qui doivent parfois chercher un mot dans le dictionnaire. Mais le problème vaut pour beaucoup d’autres. Les utilisateurs veulent contrôler leur rythme de lecture et le texte dynamique les prive de cette liberté. Un texte qui se déplace trop lentement pose aussi problème. Les utilisateurs lisent le texte statique plus rapidement que le texte dynamique et détestent devoir attendre qu’un texte réapparaisse. Les internautes malvoyants ou contrôlant mal leur tête, par exemple ceux qui présentent une infirmité motrice cérébrale, ne pourront peut-être pas se concentrer assez pour maintenir un contact visuel suffisant sur des écrans qui bougent ou changent sans cesse.
www.socialsecurity.gov
En savoir plus Pour en savoir plus sur notre test de vingt-quatre sites Web, mené auprès d’adolescents, rendez-vous sur www.nngroup.com/reports et cliquez sur « Teenagers ».
Très peu de testeurs de notre étude ont remarqué le texte mobile placé en haut de la page d’accueil de la sécurité sociale américaine. Ceux qui l’ont vu n’en ont distingué qu’une petite partie. S’ils en ont lu suffisamment, ils ont ensuite dû attendre qu’il réapparaisse. Le texte qui défile peut être efficace sur des sites spécialisés comme des sites d’actualité pour créer un sentiment d’excitation ou annoncer un flash spécial. Mais cela ne convient pas pour le public ciblé par la sécurité sociale, qui attend un contenu direct et ne veut pas être diverti.
7 : Typographie et lisibilité
249
www.pergo.com Nous avons demandé aux testeurs d’utiliser le site Pergo.com pour trouver les fournitures dont ils auraient besoin afin d’installer un nouveau sol de cuisine. Le site comprenait un gros graphique animé avec des expressions clignotantes, comme « room planner » (planificateur de pièces), « set up room size » (paramétrer la taille de la pièce), « length » (longueur) et « width » (largeur) ; il était supposé attirer leur attention sur une fonction qui les aiderait à calculer la taille de leur pièce. Mais personne ne l’a vu. Un pauvre utilisateur jurait en tentant de calculer la taille du sol de sa cuisine à la main. Pour tester l’utilisabilité de cette application, nous avons donc dû les y diriger explicitement.
250
Site Web : priorité à la simplicité
254 Une mauvaise rédaction, facteur d’échec 258 La lecture sur le Web
259 Ecriture adaptée à votre lectorat
275 Mise en forme du texte pour plus de lisibilité
• Utiliser un vocabulaire simple
• Surligner les mots-clés
• Réduire le discours marketing
• Utiliser des titres et des intitulés concis et descriptifs
• Résumer les points principaux et réduire le texte
• Utiliser des listes à puces et à numéros • Conserver des paragraphes courts
8
Ecrire pour le Web
A quelques exceptions près, les internautes se rendent sur le Web pour son utilité, et non pour sa beauté. Proposer un site visuellement agréable est bien entendu conseillé, mais le contenu vaut de l’or. Après tout, lorsque les utilisateurs tapent une requête dans un moteur de recherche, ils ne recherchent pas des qualités esthétiques mais bien des informations. Un texte bien écrit fait une grande différence au niveau des consultations, du temps passé sur un site et des ventes. La règle essentielle de l’utilisabilité vaut pour le contenu écrit autant que pour le design : les clients préfèrent la clarté à la confusion.
Ne sous-estimez pas le rôle d’un discours efficace pour créer un site Web à succès. Préoccupés par leurs objectifs, les utilisateurs du Web souhaitent se rendre à destination, trouver des informations intéressantes ou utiles et passer leur chemin. Ils n’ont ni le temps ni l’envie de s’engager dans un océan de texte qui n’en vient jamais au but. Proposer un contenu clair et solide est une manière d’attirer et de retenir les utilisateurs, et un accès efficace et intuitif à ces informations est un facteur majeur de satisfaction.
Une mauvaise rédaction, facteur d’échec Un contenu mal écrit et désorganisé empêche souvent les utilisateurs de réaliser des tâches de base, par exemple choisir un produit. Dans notre étude, nous avons observé des personnes naviguer à dessein vers la zone adéquate d’un site et malgré tout être déçues par un contenu compliqué. Ils fixaient l’écran, ébahis par le verbiage de l’auteur. Même après plusieurs lectures, ils ne les comprenaient toujours pas. Lorsque les utilisateurs font appel à des sites qui leur apportent rapidement des réponses, ils ont tendance à leur faire confiance et à y revenir. Un bon design se fait discret et répond à leurs besoins. Une attirance visuelle peut générer de la curiosité et de l’intérêt pour le contenu, mais les conceptions ayant peu ou pas de valeur informative ne retiennent pas les clients. En réalité, les études de suivi oculaires menées par l’institut Poynter (www.poynter.org/ eyetrack2000) ont montré que, sur les sites d’actualités, l’utilisateur remarque d’abord les titres et le texte, avant même de voir les images. Le contenu doit être le point de focalisation de votre site Web. (Page de droite, en haut) Un bon texte descriptif se remarque. Les textes de présentation, précis et courts, qui décrivent les activités disponibles dans cette résidence ont impressionné les utilisateurs. Le ton engageant et les descriptions claires ont envoyé de bonnes ondes. Même si l’image est jolie (le texte ne fonctionnerait pas aussi bien sans image), les mots confirment la situation en donnant des informations plus spécifiques sur la résidence. « Dans les descriptions, la grammaire et la ponctuation étaient très bonnes. J’ai eu une bonne impression sur les compétences de la société. Quelqu’un a dû revoir les documents et les corriger. »
254
Site Web : priorité à la simplicité
www.atlantis.com
Les testeurs ont pensé que la mise en page et le vocabulaire utilisés pour décrire ce sujet étaient simples à comprendre. Le texte Extraneous est épuré, il ne reste que l’essentiel. « Ceci est bien et clair. Il y a une photo. Le texte est agréable et audacieux avec de nombreuses puces… [La page utilise] des mots simples, de tous les jours. »
www.americanheart.org
8 : Ecrire pour le Web
255
www.americanheart.org Malheureusement, toutes les pages du site de l’American Heart Association ne sont pas écrites clairement. Ainsi, par exemple, les informations sur l’organisation concernant la recherche sur les cellules souche se répètent. Plutôt que d’aller au but, des informations secondaires sont présentées à plusieurs reprises, comme le règlement de l’organisation et les pratiques de financement. La trop grande insistance portée sur des détails annexes amène les utilisateurs à s’interroger sur les motifs de l’association. Plutôt que de fournir des informations sur le potentiel des thérapies par cellule souche, le site se concentre sur les obstacles politiques à l’expansion de la recherche, ce que les utilisateurs jugent comme un comportement intéressé. En outre, les mots en gras, comme « adult » et « pluripotent » n’aident pas beaucoup car ils sont hors contexte et semblent donc arbitraires. Peu de personnes savent ce que signifie « pluripotent », mais le site ne propose aucune définition. « Ce qui ressort, c’est que l’American Heart Association ne finance pas de recherche impliquant des tissus embryonnaires. Ils l’ont déjà dit au départ. Ils disent aussi que l’American Heart finance une recherche méritoire. Je ne sais pas pourquoi ils me disent ça. C’est de l’auto-satisfaction. » « Après avoir passé quelques minutes sur ce site, je n’ai pas l’impression d’en savoir plus que lorsque j’ai commencé. J’irai ailleurs pour en savoir plus, et plus simplement. Je n’aime plus trop l’American Heart Association du coup. »
256
Site Web : priorité à la simplicité
Les rédacteurs de contenu supposent souvent que les utilisateurs font la différence entre les produits et les services vendus avec insistance sur leurs sites Web, mais c’est une erreur. Ainsi, par exemple, bon nombre des utilisateurs des sites d’investissement sont arrêtés par des termes spécifiques au secteur, comme « courtage », « annuités » et « fonds mutuels », qui vous seront pourtant familiers si vous travaillez dans la finance. Si des investisseurs potentiels atterrissent sur votre site pour en savoir plus mais sont noyés sous un jargon inconnu, sans disposer de manière évidente d’un moyen de trouver des informations, ils risquent d’aller ailleurs.
www.bankone.com Beaucoup ont eu des difficultés à définir la différence entre les diverses options d’investissement de ce site. Le jargon financier combiné à un texte inutile ne permet pas de prendre des décisions en toute confiance sur les produits. Ainsi, par exemple, la description des « Rollover IRAs » n’est qu’une suite de textes inutiles pour tester les divers outils et produits d’investissement mais elle ne dit pas clairement ce à quoi correspond cette option. « Je ne connais pas bien ce sujet. Il faudrait que j’en sache plus et peut-être que je parle à quelqu’un. Le vocabulaire est trop difficile à comprendre. » « Ce site m’apporte beaucoup d’informations. Si je les comprends ? Pas du tout ! »
8 : Ecrire pour le Web
257
Astuce : embauchez un rédacteur pour le Web Sur le Web, n’importe qui peut être propulsé éditeur. Ce formidable facteur d’égalité offre tout un panel d’opportunités. Malheureusement, de nombreuses organisations jettent sur leurs sites de grandes quantités informations sans trop penser à leur utilité. Un bon contenu fait toujours monter le niveau. Si vous ne disposez pas encore d’un rédacteur ou d’un éditeur compétent, trouvez-en un. Le contenu en ligne et les documents sur papier exigent des styles de rédaction différents et tous les rédacteurs ne savent pas faire la différence entre les deux. Outre vérifier la grammaire, la syntaxe et la ponctuation, les rédacteurs du Web peuvent affiner le contenu et apporter des suggestions constructives qui amélioreront considérablement la lisibilité de votre site.
Ecrivez en pensant à la manière dont les personnes lisent sur le Web. Votre contenu doit correspondre au comportement humain et être personnalisé, pour plus de compréhension.
258
La lecture sur le Web Le Web est un support destiné aux utilisateurs, qui adoptent des stratégies de recherche d’informations pour gagner du temps. Ils ne recherchent d’ailleurs généralement pas les informations de manière linéaire. Ils se basent plutôt sur les indices visuels présentés sur le site. Les internautes dirigent leur attention vers ces zones et ignorent les autres. Nous ne suggérons pas que les utilisateurs ne lisent jamais les informations du Web. La quantité de texte lue dépend de leurs objectifs et du niveau d’informations dont ils ont besoin. En général, ils parcourent d’abord la page pour en extraire les points principaux puis, si nécessaire, scrutent le texte pour obtenir des détails. Les utilisateurs nécessitant des informations approfondies (pour des projets de recherche par exemple) continuent à parcourir le texte, mais la lecture se concentre plutôt sur les pages de contenu. Si les utilisateurs reconnaissent rapidement les indices qui les dirigent vers des informations précises, ils suivront le chemin avec bonheur. S’ils ne voient pas immédiatement les aspects importants ou s’ils se sentent dépassés, ils abandonneront le chemin (ou la page) et tenteront autre chose. Parfois, cela nécessite de revenir en arrière et d’opter pour une autre voie sur une page précédente. Si vous décevez trop souvent vos utilisateurs, ils finiront par quitter votre site pour ne jamais y revenir. Quel que soit l’intérêt intrinsèque ou l’importance que vous pouvez imaginer pour votre contenu, si votre site ne permet pas facilement de saisir l’objectif de votre organisation, l’intérêt s’éteint au moment même où des résultats devraient apparaître. Cela implique que vous devez écrire ce qu’aiment lire les internautes. Pour capter et conserver leur attention, votre contenu doit correspondre au comportement humain et être personnalisé, pour plus de compréhension.
Site Web : priorité à la simplicité
Pourquoi les utilisateurs ne font que parcourir les pages La vie serait belle si les utilisateurs lisaient attentivement tout votre contenu. Ne savent-ils pas qu’il est intéressant ? Eh bien non. Même si votre contenu est intéressant et utile, les utilisateurs risquent fort de ne pas le savoir à la première visite. Parcourir la page en diagonale est une manière efficace de découvrir ce contenu utile. Cela nécessite moins d’effort cognitif, les utilisateurs peuvent donc se concentrer sur les zones intéressantes.
La théorie du butinage d’informations (traitée plus en détail au Chapitre 2) précise que les utilisateurs optimisent leurs résultats par rapport au temps passé sur Internet. Pour tout sujet donné, il existera certainement des centaines de sites Web contenant des quantités infinies de texte. Confrontés à une telle masse d’informations, les utilisateurs doivent absolument pouvoir parcourir la page et gérer les priorités. Dans les premières secondes, ils décident s’ils restent et continuent à lire ou s’ils passent au site suivant.
Ecriture adaptée à votre lectorat Vous devez absolument rester en phase avec les intérêts, la culture, les besoins et les limites de vos utilisateurs pour adapter votre contenu. Les informations doivent être filtrées et traduites sous une forme que votre lectorat peut intégrer. Ainsi, par exemple, les médecins doivent pouvoir comprendre les effets physiologiques et psychologiques que peut avoir la cigarette sur leurs patients, afin de pouvoir les traiter. Ils doivent aussi pouvoir expliquer ces effets à leurs patients en termes simples. C’est également ainsi que doit procéder un site de conseil médical destiné aux patients. Quel que soit votre sujet, si vous écrivez pour un public généraliste, évitez les termes techniques ou le jargon. Astuce : connaître votre public Quel est votre public ? Des informaticiens, des adolescents, des parents d’enfants scolarisés ? Identifier un public aide à communiquer efficacement vos idées, à rester concentré sur le sujet et à conserver le ton adéquat. Vos lecteurs veulent un contenu qui réponde à leurs préoccupations et leur parle à leur niveau, sur un ton qui les rassure.
D’autre part, ne faites pas l’erreur de trop vulgariser.Ainsi, par exemple, dans notre étude auprès des adolescents, ceux-ci se plaignaient souvent que les adultes étaient à des kilomètres d’eux et qu’ils ne comprenaient pas leur situation. Ils en voulaient aux sites qui se posaient en arbitres et détestaient particulièrement le manque de sincérité. Lorsque les adultes tentent d’être « cools » ou de parler de manière trop simpliste, les jeunes le détectent en un quart de seconde. Nous avons ainsi pu constater que les adolescents appréciaient les anecdotes auxquelles ils pouvaient s’assimiler. Compléter le texte par des illustrations pertinentes ou des photographies était également essentiel pour faciliter l’apprentissage et retenir leur attention. Leur enthousiasme est toutefois rapidement retombé lorsqu’ils ont été confrontés à de gros blocs de texte et des exemples inefficaces. 8 : Ecrire pour le Web
259
www.theinsite.org TheInsite.org possédait une section indiquant comment résoudre des conflits avec ses pairs. Même si ce sujet a d’abord suscité beaucoup d’intérêt dans un test mené auprès d’adolescents, de nombreux participants sont ensuite devenus sceptiques sur les conseils donnés car le vocabulaire semblait trop clinique. Il était écrit d’une manière très adulte, à laquelle les adolescents ne pouvaient pas s’assimiler. Plusieurs ont gloussé en lisant : « Use ’I feel’ statements » (employez des phrase commençant par ’Je ressens que’ ». Ils ont mieux répondu à des termes comme « cool off » (diminuer la pression) et « listen » (écouter). Les utilisateurs s’attendaient aussi à des exemples concrets, que ne proposait pas le site. « Je pense que c’est plein de mensonges. Personne ne fait ça. Rendezle plus réaliste, plus proche de la réalité. » « Ce site Web n’était pas satisfaisant car il ne montrait pas d’exemples sur la manière de s’entendre avec les autres. »
260
Site Web : priorité à la simplicité
www.whitehouse.gov Les adolescents évitent les sites administratifs, car ils supposent qu’ils ne comprendront pas le contenu. Les utilisateurs ont suggéré que leur intérêt serait accru si les sites utilisaient un vocabulaire plus simple et présentaient des sujets avec lesquels ils pourraient s’identifier. « Nous aimons être traités comme des adultes. Utilisez simplement des mots moins compliqués. Les adolescents traitent l’information différemment des adultes. Au lieu d’utiliser des mots compliqués, allez-y cool. La plupart des gens vont sur un site Web pour chercher quelque chose. Ils veulent comprendre. Les adultes peuvent comprendre les sujets différemment et avoir des avis différents. IIs ont plus d’expérience et pensent différemment ».
8 : Ecrire pour le Web
261
Utiliser un vocabulaire simple Utiliser des mots sophistiqués ne vous fera pas paraître plus intelligent ni gagner des points auprès de votre public. La plupart préfèrent le ton de la conversation.
Trois instructions pour un meilleur style rédactionnel ■
■
■
Evitez le jargon. La terminologie employée par votre organisation ou votre secteur ne fait généralement pas partie du vocabulaire habituel de vos clients. Les termes simples ne seront peut-être ni artistiques ni originaux, mais ils seront compréhensibles. Evitez les acronymes. Les sites de l’administration sont particulièrement réputés pour cela, supposant que leur public les connaisse. Evitez le sarcasme, les jeux de mot subtils et les clichés du type « gai comme un pinson » ou « pris la main dans le sac » qui ne sont pas très efficaces sur le Web. Votre public vient sur votre site pour obtenir un contenu, et non des bons mots. N’oubliez pas que le Web est un support véritablement international et que les expressions ne traversent pas facilement les frontières.
262
Par respect pour le temps et la lecture de vos utilisateurs, employez un vocabulaire simple et concis. Utiliser des mots sophistiqués ne vous fera pas paraître plus intelligent ni gagner des points auprès de votre public. La plupart préfèrent le ton de la conversation aux accents formels car il est plus personnel et plus direct. Faites concorder votre style à leur niveau de lecture pour assurer une meilleure compréhension. N’en faites pas trop. Le verbiage superflu nécessite des efforts inutiles de compréhension ; un vocabulaire ampoulé ou des mots fantaisistes gênent les utilisateurs. Préférez les mots courts. Ainsi, remplacez « carcinogène » par « cause de cancer ».
(Page de droite, en haut) Ce site tente de mettre de l’humour dans la description de ses produits. Malheureusement, certains n’ont pas compris la blague. La référence au fait que la sauce taco est un must des voyages en voiture n’a pas été considérée comme humoristique. « Cela dit que le siège arrière rabattable et amovible permet de configurer l’habitacle pour contenir tous les éléments essentiels d’un voyage en voiture, y compris votre sauce taco préférée. Je ne comprends pas ».
(Page de droite, en bas) Nos testeurs du site Web de l’administration de la sécurité sociale ont eu des difficultés à trouver des réponses à des questions de base, comme l’âge de la retraite et le montant des prestations. Même en inspectant la page qui contenait les réponses, ils se sentaient perdus car ils n’arrivaient pas à interpréter des termes ésotériques comme « Total Reduction » (réduction totale) et « Total % Reduction » (% de réduction totale). C’est un exemple d’utilisation de jargon interne pour expliquer des concepts. « J’ai trouvé que c’était au-dessus de mes capacités. Ils n’utilisaient pas les termes des profanes. C’est comme parler grec au péquenot moyen. »
Site Web : priorité à la simplicité
automobiles.honda.com
www.socialsecurity.gov
8 : Ecrire pour le Web
263
www.san-diego-vision.com Voici un exemple de mots inadaptés qui peuvent amener les personnes à mal interpréter les informations. L’onglet intitulé « Practice Information » doit mener les visiteurs à des informations sur l’organisation. Les membres du secteur médical utilisent souvent le mot « practice » (cabinet) de cette manière, à la différence de la moyenne des gens, qui ne s’attendent pas à y trouver des informations professionnelles. Ils recherchaient plutôt une section ordinaire comme « About Us » (à propos de).
264
Site Web : priorité à la simplicité
S’adapter aux faibles niveaux d’alphabétisation L’IALS (International Adult Literacy Survey), une étude réalisée en collaboration par sept gouvernements et trois organisations intergouvernementales, a mis au jour que même dans les pays industrialisés, un fort pourcentage d’adultes était peu alphabétisé ou lisait mal.
Aux Etats-Unis et au Royaume-Uni, où les niveaux d’alphabétisation sont en deçà de ceux des autres nations développées, le nombre d’utilisateurs du Web peu alphabétisés peut aller jusqu’à 30 %. L’utilisation du Web continuant à grimper, cette proportion va augmenter.
En Suède, le pays où l’alphabétisation générale est la plus élevée, 28 % des participants ont eu la note la plus basse, correspondant à un niveau de lecture de quatrième ou moins. Une étude de 2003 menée aux Etats-Unis par le Centre national pour les statistiques de l’enseignement (National Center for Education Statistics) a montré que 43 % des américains de 16 ans et plus entraient dans la même catégorie.
Faites une priorité des besoins des personnes peu alphabétisées, en particulier si votre site cible un public très général. Nous conseillons d’écrire du texte destiné à un niveau de lecture de sixième, en particulier sur les pages très lues comme la page d’accueil, les pages de catégorie et les pages de produit. Les pages plus avancées dans le site peuvent être écrites pour un niveau de lecture de quatrième. Faites-vous aider d’un bon correcteur, qui s’assurera de la simplicité du contenu, ou utilisez l’un des nombreux outils de lisibilité disponibles. Si le niveau de lecture est trop élevé, réduisez-le en utilisant des mots plus simples, plus courts et des phrases et des paragraphes pas trop longs.
Même si la plupart des utilisateurs préfèrent des mots simples et clairs, les visiteurs ayant de mauvaises capacités de lecture en ont besoin. Et malgré le fait que les personnes peu alphabétisées ont tendance à moins utiliser le Web, elles ont toujours besoin de sites accessibles, ce qui est légitime.
Réduire le discours marketing Ne vous lancez pas un dans un style ampoulé. Proposez des faits et laissez les personnes en venir à leurs propres conclusions. Un bon contenu n’a besoin de rien d’autre pour se vendre.
Ne vous lancez pas un dans un style ampoulé. Les utilisateurs préfèrent un langage factuel et sont découragés par tout ce qui sonne trop promotionnel ou exagéré. La crédibilité est importante sur le Web et les entreprises doivent s’efforcer de la gagner et de la conserver. Les déclarations trop vantardes sont peu appréciées et désagréables pour les utilisateurs. Des affirmations extraordinaires amènent les personnes à s’interroger, à remettre en cause leur véracité et à tenter de séparer le bon grain de l’ivraie. Proposez des faits et laissez les personnes en venir à leurs propres conclusions. Un bon contenu n’a besoin de rien d’autre pour se vendre.
8 : Ecrire pour le Web
265
www.accenture.com Si vous n’avez jamais entendu parler de cette société, cette page d’accueil ne vous aidera pas à comprendre ce qu’elle fait réellement. « High performance. Delivered » (Des performances supérieures. Chez vous) est un slogan que pourrait employer n’importe quelle entreprise. De même, la citation mise en exergue au centre de la page est un autre exemple de jargon marketing sans profondeur ne décrivant pas les services ni les produits de l’entreprise. Réduire les discours marketing et utiliser des expressions plus descriptives pourrait améliorer l’utilisabilité et la crédibilité.
La description de ses services par Accenture n’est pas meilleure. Le discours marketing dilue le message et ne décrit pas clairement les services. Une fois de plus, ce texte pourrait s’appliquer à des centaines d’entreprises. www.accenture.com
266
Site Web : priorité à la simplicité
Astuce : quand et où se faire entendre ? Parfois, une petite auto-promotion trouve sa place, par exemple lorsque vous mettez en valeur des réalisations notables. L’objectif est de se présenter en connaisseur, sans en rajouter. Si vous avez obtenu des récompenses remarquables, mentionnez-en quelques-unes, célèbres pour vos utilisateurs, en particulier si votre entreprise est relativement peu connue. Toutefois, ne parsemez pas votre liste de réalisations obsolètes, sans lien avec votre activité, par exemple avec des récompenses de design si vous n’êtes pas une agence de design.
Prenez bien soin de maintenir la publicité en dehors des zones qui traitent de l’entreprise et des sections où les utilisateurs s’attendent à trouver des mentions authentiques, comme dans les sections « A propos de » et « Relations avec les investisseurs ». Les personnes qui consultent ces zones recherchent plus particulièrement des données concernant l’entreprise. Un discours marketing détourne l’attention, semant le doute sur la crédibilité de l’organisation.
Exemples rédactionnels : avant/après Vous voyez ici que chacun de ces extraits peut être réécrit, de manière à apparaître plus concis et plus compréhensible. Le passage corrigé sur les volcans convient mieux au grand public, qui comprend des adolescents et des enfants. Du site www.health.gov : Consommez diverses nourritures et boissons riches en nutriments parmi les groupes d’aliments basiques, tout en choisissant des aliments qui limitent l’ingestion de graisses saturées et trans, de cholestérol, de sucres ajoutés, de sel et d’alcool. Notre version, plus courte : Mangez diverses nourritures de chaque groupe d’aliments de base. Limitez les graisses saturées et trans, les sucres ajoutés, le sel et l’alcool dans votre régime.
Question : comment se forment les volcans ? Du site www.space.com : Les volcans se forment lorsque des chambres magmatiques, ou roches fondues, bouillent à la surface. Ces chambres magmatiques demeurent souvent closes pendant des centaines d’années avant les éruptions, jusqu’à ce que suffisamment de pression soit accumulée, pour s’échapper par le biais d’un conduit, à savoir une craquelure ou un point faible dans la roche supérieure. Version simplifiée sur www.encarta.msn.com : Les volcans se forment lorsque la planète doit laisser s’échapper la chaleur contenue à l’intérieur. Les roches qui fondent bien en dessous de la surface de la planète se transforment en magma liquide. Ce magma remonte de l’intérieur pour s’échapper à la surface de la terre.
8 : Ecrire pour le Web
267
Cet article vous conviendra si vous recherchez un résumé précis des possibilités de traitement des patients victime d’une attaque. Le contenu est absolument clair, avec des concepts médicaux décrits en langage commun, même s’il est écrit pour un niveau de lecture de terminale, ce qui va malheureusement au-delà des capacités de nombreux élèves de lycée aux Etats-Unis.
www.healthlink.mcw.edu
268
Site Web : priorité à la simplicité
Astuce : le test des deux phrases
Résumer les points principaux et réduire le texte
Posez-vous la question de savoir si une personne lisant les deux premières phrases de votre page retiendra les informations que vous voulez faire passer.
Commencez par la conclusion, puis dévoilez les faits qui vont l’appuyer. Cette convention structurelle est connue des journalistes sous le nom de « pyramide inversée ». Elle offre l’essentiel au lecteur très rapidement, puis permet d’aller fouiller dans les détails pour en savoir plus. Si la première partie de l’article est dépourvue d’intérêt et vague, l’utilisateur cessera immédiatement de lire.
Conservez des informations courtes et agréables Nous ne le dirons jamais assez : un texte long frustre le public. En général, le compte-mot d’un contenu Web doit toujours être de la moitié de celui utilisé dans une rédaction conventionnelle. Réduire un texte est plus facile à dire qu’à faire. Il faut du temps et de la pratique pour ramener votre texte à l’essentiel. Mais réduire le nombre de mots ne signifie pas éliminer les détails importants. Lorsqu’il est bien résumé et facilement lisible, un texte véhicule les mêmes informations et il est plus utile pour le lecteur.
Les internautes ne restent généralement pas longtemps sur la même page et se sentent plus productifs s’ils cliquent sur des liens hypertexte et voyagent de sujet en sujet. Plutôt que de les noyer sous un contenu interminable, répartissez les informations sur différentes pages. Commencez par les points essentiels, puis permettez aux personnes de fouiller plus avant. Cette stratification du contenu répond à la fois aux besoins des visiteurs occasionnels et à ceux des chercheurs plus sérieux, en permettant de parcourir facilement la page et en assurant l’exhaustivité. Ceci dit, ne découpez pas votre contenu de manière telle qu’il paraisse désarticulé. Conservez les informations de même teneur sur une même page plutôt que d’amener vos utilisateurs à passer sans cesse d’une partie à l’autre. Tant qu’une page contient des informations du même ordre, les utilisateurs acceptent de faire défiler la page. Lorsque vous publiez de longs documents, il ne suffit pas de les découper en parties plus petites et d’insérer un lien intitulé « à suivre » au bas de chaque page. Créez plutôt des liens du style « La réponse du vice-président » ou «Troisième jour de la compétition », qui précise quelles sont les informations à venir.
8 : Ecrire pour le Web
269
Si vous souhaitez simplement savoir ce que vous pouvez rapporter chez vous d’un voyage à l’étranger, cette page ne vous aidera pas. Les personnes de l’étude se sont retrouvées face à un contenu ampoulé. Les premiers paragraphes auraient dû répondre à la question mais ils traitent plutôt de situations spécifiques et de conséquences particulières ne concernant qu’un petit nombre d’utilisateurs. Même si ces détails sont importants, ils ne doivent pas figurer au début. Le texte en gras « along with any vehicle used to transport them » (ainsi que tout véhicule utilisé pour les transporter) est peut-être logique pour le rédacteur mais il n’a pas de sens pour le lecteur.
www.hmce.gov.uk
« J’ai reçu trop d’information du premier coup. Il y a beaucoup de choses. Vraiment beaucoup de texte. »
Les testeurs qui ont visité ce site ont eu des difficultés à comprendre ce qu’était un compte IRA car les informations étaient mal organisées et mal expliquées. Le site propose des détails spécifiques avant d’établir les points principaux, ce qui déroute les utilisateurs. La première phrase tente de décrire le compte mais la définition est tellement générique qu’elle pourrait concerner quasiment n’importe quel autre compte. En outre, on ne sait pas bien quelle est la différence entre les comptes « Traditional » et « Roth IRA ». Un jargon bancaire incompréhensible comme « Employer’s Qualified Pension Plan » (plan de pension qualifié de l’employeur) et « mandatory distribution » (distribution obligatoire) complique le choix du bon produit.
270
www.dimewill.com
Site Web : priorité à la simplicité
www.citibank.com Il n’est pas nécessaire d’accueillir littéralement les personnes sur votre site. Même si la critique peut paraître mineure, l’objectif est de réduire les mots inutiles à chaque fois que possible. Un mot ici, un mot là, tous s’ajoutent lentement et augmentent inutilement la complexité du site. Remarquez également l’utilisation de mots peu explicatifs comme « look » (regarder), « apply » (demander) et « find » (rechercher). Ces termes pourraient amener les personnes à s’interroger : regarder quoi ? Demander quoi ? Rechercher quoi ? Mieux vaut utiliser des expressions descriptives.
Astuce : écrire des intitulés descriptifs Nous avons sélectionné quelques intitulés du site Web de Citibank et les avons renommés pour vous montrer comment améliorer la communication. Les intitulés initiaux sont intelligents et courts mais ce ne sont pas les meilleurs pour communiquer un sens. La version révisée permet de connaître le contenu sans avoir à deviner.
Intitulé initial
Suggestion
Regarder
Produits et services
Demander
Ouvrir un compte
Rechercher
Trouver une agence
8 : Ecrire pour le Web
271
www.know-where.com Evitez les titres insignifiants. « Know What ? » (vous savez quoi ?) et « What Now ? » (et maintenant ?) pourraient faire de l’effet, mais ils ne véhiculent aucune idée très utile.
(Page de droite, en haut) La répétition des mots comme « Click here to » (cliquez ici pour) encombre la page et ne gêne la consultation rapide des liens. La plupart des internautes savent maintenant reconnaître les liens, vous pouvez donc enlever cette mention et présenter des liens informatifs.
(Page de droite, en bas) Une utilisation répétée des mots « Palm Beach County » détourne l’attention des principaux termes de ce site, ce qui complique la lecture. Les visiteurs savent déjà qu’ils se trouvent dans une section traitant du Palm Beach County, il ne sert à rien de le répéter.
272
Site Web : priorité à la simplicité
www.bocaraton.com
www.bocaraton.com
8 : Ecrire pour le Web
273
Quel est le terme principal ici ? Les liens semblent être les éléments principaux mais ils ne communiquent que peu d’informations. Mieux vaut simplifier cet écran en les évitant et en permettant de cliquer sur les informations les plus importantes, comme les heures et les dates. Le titre de la page indique déjà que tous les éléments concernent « O » du Cirque du Soleil, inutile de le répéter.
www.bellagio.com
www.socialsecurity.gov
274
Site Web : priorité à la simplicité
Importance de l’utilisabilité En 1998, John Morkes et Jakob Nielsen ont mené une étude montrant en quoi la mise en forme d’informations très techniques selon les directives du Web pouvait considérablement améliorer l’utilisabilité. Ils ont comparé deux versions d’un document publié sur un site Web de B2B (business to business, commerce entre entreprises), l’un sous sa forme original, l’autre utilisant un texte plus concis, convenant mieux au Web. Les résultats ont été étonnants. La version révisée a eu un impact considérablement supérieur à tous les niveaux en termes d’utilisabilité. Par rapport à l’original, la version présentée dans un format optimisé pour le Web permettait aux lecteurs de : ■
réaliser la tâche 80 % plus rapidement ;
■
réaliser 80 % de moins d’erreurs ;
■
se souvenir de 100 % de plus de faits ;
■
dégager une satisfaction 37 % supérieure sur l’ensemble du site.
Mise en forme du texte pour plus de lisibilité Des techniques rodées de mise en forme du Web peuvent constituer des indices visuels, capables de grandement améliorer la lisibilité de votre site et d’aider les personnes à parcourir rapidement les pages et à accéder aux zones qui les intéressent. Les conventions les plus connues et les plus efficaces sont : ■
des mots-clés surlignés ;
■
des titres et intitulés concis et descriptifs ;
■
des listes à puces et des étapes numérotées ;
■
des paragraphes courts ;
■
une page commençant par le point le plus important, sur deux lignes.
Surligner les mots-clés Surligner des mots-clés rigoureusement choisis peut attirer l’attention des lecteurs vers des zones spécifiques de la page. Faire appel à des particularités graphiques comme le gras ou la couleur ajoute un aspect distinctif et met l’accent sur des éléments importants, comme nous l’avons vu en détail au Chapitre 7. En revanche, surligner des phrases entières ou de longues expressions ralentit les lecteurs ; vous devez donc n’isoler que les mots ou les expressions qui communiquent les points essentiels. Mettre en avant trop d’éléments avec de la couleur ou du gras réduit les avantages ; rien ne ressort et la page paraît encombrée.
(Page gauche, bas) Le titre demande de choisir un calculateur mais la page principale ne montre pas clairement les choix et les noms n’aident pas. Des notes et des conseils superflus encombrent la page, tandis que les outils dont ont besoin les assurés sont cachés sous la zone visible dans le navigateur. Les mots en gras comme « retirement » (retraite) et « disability » (handicap) attirent l’attention sur des mots aléatoires qui ne communiquent rien d’utile. « Oh, mon dieu, que de texte ! »
8 : Ecrire pour le Web
275
Les caractéristiques graphiques souvent associées aux liens hypertexte (un texte bleu, souligné et gras) ressortent immédiatement. En fait, dans certains cas, elles sont amplement suffisantes et il n’est pas nécessaire d’en rajouter.
Les mots judicieusement mis en gras attirent l’attention du lecteur vers les zones essentielles, ce qui permet de recevoir facilement le message si l’on parcourt rapidement la page.
www.americanheart.org
Utiliser des titres et des intitulés concis et descriptifs
Nos études de suivi oculaire montrent que, souvent, les utilisateurs ne lisent que les premiers mots des listes ; ne placez donc pas les termes importants en fin de titre.
276
Le titre de la page principale est particulièrement important car il sert de lien dans les résultats des moteurs de recherche. Les utilisateurs parcourent ces listes rapidement, le titre doit donc communiquer votre message en quelques mots. Nos études de suivi oculaire montrent que, souvent, les utilisateurs ne lisent que les premiers mots de ces listes ; ne placez donc pas les termes importants en fin de titre. Dans une page donnée, des titres et sous-titres efficaces attirent l’œil du lecteur et annoncent l’objet du contenu. Ils servent de jalon pour son organisation, en divisant le texte
Site Web : priorité à la simplicité
Trois directives pour la hiérarchie des titres ■
Les principaux titres doivent s’afficher en plus gros et plus gras que le texte principal.
■
Les sous-titres doivent être plus petits que les titres principaux et malgré tout ressortir par rapport au texte principal.
■
Justifiez les titres à gauche et écrivez-les en majuscules et minuscules ; ils sont plus simples à lire que les titres centrés, tout en majuscules.
en tronçons gérables qui facilitent la lecture et la compréhension. Leur principal but est de diriger les lecteurs vers le contenu recherché. Cela signifie qu’ils doivent faire court (60 caractères maximum) et être signifiants. Résistez à la tentation d’écrire des titres amusants ou brillants, mais peu signifiants.
Les titres fantaisistes comme « Go Red For Women » (Rougissez pour les femmes) et « 911 » (numéro des services d’urgence) ne décrivent pas correctement le contenu. Ils font sens dans le contexte mais n’oubliez pas que la plupart des utilisateurs ne prendront pas le temps de le découvrir. Même lorsque les titres sont brillants, gras et graphiques, les utilisateurs les ignorent si leur signification est obscure. Déguiser le texte ne le rendra pas plus attirant.
www.americanheart.org
8 : Ecrire pour le Web
277
www.hmce.gov.uk Difficile de découvrir les informations que contient cette page en lisant le titre « Notice 1: A Customs guide for travelers entering the UK » (Notice 1 : un guide douanier pour les voyageurs entrant au RU). Beaucoup ne savent pas ce que signifie « Notice 1 » ni ce qu’est un guide douanier. Les utilisateurs sont dépassés par les liens trop longs et l’utilisation de dates et de termes obscurs. « C’est déroutant : il y a beaucoup de choses sur les changements de dates et les guides ne concernent pas les sujets importants. Il y a beaucoup d’informations sur le moment où les choses ont changé, mais aucune liste des données que l’on cherche. Il y a trop de détails sur les charters et les dates et pas assez de détails sur les informations dont on a besoin. » « Ce n’est pas convivial. Ce que j’aime, c’est une liste des questions fréquemment posées. Ici, ça parle de documents et de versions. La quantité de texte est assez déroutante. » « Tout ça, c’est du jargon administratif. Pour un site destiné au public, il devrait contenir les informations souvent demandées et non des trucs du gouvernement. J’ai plutôt envie de téléphoner à quelqu’un. »
278
Site Web : priorité à la simplicité
Utiliser des listes à puces et à numéros Les listes verticales sont plus efficaces que les listes enchaînées pour communiquer une suite d’événements ou d’idées. Les études comparant les deux montrent que les listes verticales peuvent améliorer l’utilisabilité de 47 %.
Lorsque vous décrivez des étapes ou des séries d’éléments, utilisez des listes à puces ou des listes numérotées. Les listes à puces servent lorsque les informations ne sont pas présentées dans un ordre particulier et les listes numérotées sont destinées aux instructions par étapes, aux suites d’éléments et aux points référencés par un numéro. Les listes verticales contiennent plus d’espace autour de chaque article, ce qui permet à l’œil de se reposer sur chaque point. Elles sont donc plus efficaces que les listes enchaînées, ce qui permet de référencer et d’intégrer plus facilement les points importants. De même, qu’elles utilisent des puces ou des numéros, les listes verticales sont plus efficaces que les autres pour communiquer une suite d’événements ou d’idées. Les études comparant les deux montrent que les listes verticales peuvent améliorer l’utilisabilité de 47 %.
Comparez ces deux formats et remarquez que les traitements du spa répertoriés dans le second exemple sont plus faciles à lire. Enumérer les offres à la verticale facilite la navigation par rapport aux listes enchaînées.
www.hyatt.com
8 : Ecrire pour le Web
279
www.bankone.com La rédaction ici est meilleure que celle des autres exemples présentés. Les phrases sont généralement courtes et simples et les principaux termes sont affichés en gras, de sorte que les options ressortent bien. Il aurait mieux valu avoir une phrase d’introduction et numéroter chaque option, pour que les utilisateurs sachent clairement que chacune constitue un choix.
Sept principales directives pour présenter les listes ■
Utilisez les listes verticales lorsque vous disposez de quatre articles ou plus à mettre en vigueur. Les listes plus courtes sont généralement inutiles.
■
Introduisez une liste par une phrase courte et descriptive. Cette introduction n’a pas nécessairement à être une phrase complète, à condition que chaque élément termine la phrase d’introduction.
■
Indentez les listes verticales et démarrez les lignes suivantes sous le texte, et non sous la puce.
280
■
Ne laissez pas trop d’espace entre la puce et le début du texte. Insérer trop d’espace entre la puce et le texte complique la lecture ; l’œil doit alors aller plus loin pour faire le lien.
■
Lorsque c’est possible, évitez les articles comme « un » ou « le » et les mots répétitifs en début des listes.
■
Utilisez le même type de mot pour commencer chaque élément de la liste.
■
N’en abusez pas car elles risquent de perdre de leur efficacité.
Site Web : priorité à la simplicité
www.hmce.gov.uk Les listes à puces peuvent être utiles mais ne les utilisez pas trop car vous risquez de diminuer leur efficacité.
Astuce : pensez à la cohérence de l’énoncé Tous les points doivent commencer par un style homogène. Commencer chaque point par des formes différentes est plutôt déroutant pour les lecteurs. Remarquez que, dans l’exemple qui n’est pas cohérent, les trois expressions commencent par des types de mots différents et que seule la première termine la phrase d’introduction. La liste corrigée est plus lisible car chaque expression commence par un type de mot similaire (dans ce cas, un verbe) et termine la phrase d’introduction.
Sans cohérence Les étudiants s’inscrivent à la lettre d’information pour : ■ ■ ■
connaître les nouveautés que font les autres membres de leur groupe d’âge les concours
Cohérence Les étudiants s’inscrivent à la lettre d’information pour : ■ ■
■
connaître les nouveautés voir ce que font les autres membres de leur groupe d’âge participer à des concours
8 : Ecrire pour le Web
281
En savoir plus
Conserver des paragraphes courts
Pour en savoir plus sur les études mentionnées dans ce chapitre, rendez-vous sur www.useit.com/ papers et cliquez sur « webwriting », puis sur www.nngroup.com/reports et cliquez sur « teens ».
Une autre manière d’améliorer la lisibilité consiste à diviser le contenu en petits tronçons. Les paragraphes courts, entourés d’espace, sont plus abordables qu’un gros morceau de texte. Les informations résumées en paragraphes aisés à interpréter facilitent la lecture, en offrant aux utilisateurs des coupures naturelles et une manière plus gérable d’absorber les informations.
Ceci n’est pas vraiment un résumé. Le gros paragraphe de texte intimide les lecteurs. Découper les informations en paragraphes plus petits rendrait le contenu plus abordable.
Il n’existe pas de règle incontournable sur la longueur des paragraphes, même s’il vaut mieux les limiter à cinq phrases. Chaque paragraphe doit faire passer une phrase clé et une idée. Trop d’idées en un seul paragraphe augmente sa complexité et nécessite des lecteurs qu’ils fassent des efforts pour trouver l’idée du texte. Les utilisateurs doivent pouvoir lire la phrase principale et décider s’ils veulent aller à la fin du paragraphe.
www.infocus.com
282
Site Web : priorité à la simplicité
www.nwf.org Le style est agréable : l’écriture est claire, les mots simples et l’utilisation des techniques de mise en forme est adaptée, tout cela facilite la lecture.
8 : Ecrire pour le Web
283
287 Combien ça coûte ?
295 Gagner la confiance du client
• Plus d’excuses
• Décrire le produit
• Mentionner les suppléments
• Proposer des images et des illustrations de produits • Hiérarchiser les pages de produit • Etre de bonne foi
311 Achat par comparaison • Affiner et trier 317 Aider les ventes par la qualité du contenu
9 Fournir un bon contenu informatif Sans exagérer, de nombreuses ventes en ligne sont ratées à cause d’informations peu claires sur les produits. L’achat sur le Web devrait être plus pratique que dans les magasins mais, bien souvent, ce n’est pas le cas car les informations sur les marchandises sont insuffisantes, difficiles à localiser ou simplement inexistantes. Pour vendre ou promouvoir des produits en ligne, vous devez proposer les informations nécessaires aux clients pour qu’ils prennent des décisions en toute confiance. Ce chapitre traite des pièges les plus fréquents dans la présentation des informations et propose des stratégies pour assurer à vos clients l’assistance dont ils ont besoin.
Avec l’achat en ligne, il n’y a pas de produit tangible à manipuler, pas de présentoirs à inspecter, pas de vendeur vers qui se tourner pour obtenir de l’aide. Les sites Web doivent combler ce manque en rendant la procédure de recherche aussi facile que possible.
Il existe de nombreux avantages à l’achat en ligne. Les internautes peuvent rechercher les produits et comparer les prix à leur rythme et selon leur emploi du temps. Ils ne perdent pas de temps à se rendre d’un magasin à l’autre. Mieux encore, ils ne subissent pas de pression commerciale, il n’y a pas de vendeur insistant pour les ennuyer. Pourtant, trop souvent, le commerce électronique n’est ni pratique ni facile. Rechercher les informations sur le produit mène souvent à des impasses et engendre de la frustration. Nous avons observé les testeurs de nos études lorsqu’ils arrivent dans la zone d’achat mais finissent par abandonner car ils n’ont pas trouvé les réponses à leurs questions de base : combien cela coûte-t-il ? A quoi cela ressemble-t-il ? Possède-t-il les caractéristiques dont j’ai besoin ? Fonctionne-t-il avec ce que j’ai déjà ? Une navigation efficace et une bonne procédure d’achat aident les clients à acheter en ligne, mais des informations claires sur les produits sont essentielles pour les y amener. En échange de sa commodité, l’achat en ligne impose aussi des défis aux détaillants qui n’existent pas dans les magasins réels : ici, il n’y a pas de produit tangible à manipuler, pas de présentoirs à inspecter, pas de vendeur vers qui se tourner pour obtenir de l’aide. Les sites Web doivent combler ce fossé en rendant la procédure de recherche aussi facile que possible, anticiper les questions des clients et s’assurer que les réponses soient faciles à trouver. A la différence des acheteurs dans les magasins, les clients en ligne peuvent se déplacer en un seul clic. Ils font rarement appel au commerçant pour obtenir des réponses à leurs questions, en particulier s’il y a d’autres alternatives en ligne. A moins que vous ne disposiez de produits et de services exclusifs, les acheteurs frustrés quitteront votre site pour se rendre chez vos concurrents plutôt que de chercher un numéro de téléphone, attendre dans la file téléphonique ou manipuler des menus étranges. Nous ne traiterons pas ici de tous les aspects de l’utilisabilité du commerce électronique : nous avons produit une série complète de rapports consacrés à ce sujet. Nous préférons vous montrer comment proposer des informations utiles à vos clients, que vous vendiez ou non vos produits directement sur votre site.
286
Site Web : priorité à la simplicité
Combien ça coûte ? A notre époque où les fraudes foisonnent sur Internet, il convient de rassurer les clients sur la crédibilité des entreprises avant qu’ils ne s’engagent dans la vente. Etre direct et précis sur le prix est essentiel pour s’assurer de la transaction.
Les études menées sur les acheteurs montrent que l’une des premières choses qu’ils veulent savoir sur un produit ou un service, c’est son prix. Son image ou sa description peuvent piquer la curiosité de l’utilisateur, mais les informations tarifaires sont prépondérantes dans l’esprit des gens. Soyez honnête : les utilisateurs doivent trouver facilement les prix. Un prix peut indiquer plusieurs choses à la fois : ■
la valeur du produit ;
■
si l’article correspond à leur budget ;
■
s’ils se trouvent dans le bon segment de clientèle.
Lorsque les prix ne sont pas affichés, les personnes supposent, souvent à tort, que le produit est cher. Afficher le prix dès la première apparition du produit confirme aux utilisateurs qu’ils se trouvent dans la bonne catégorie tarifaire.
Astuce : à quel endroit afficher les prix Les prix doivent être clairement affichés sur les listes et les pages de produits. N’obligez pas les utilisateurs à cliquer sur le lien ou l’image d’un produit pour obtenir des informations tarifaires. Devoir cliquer à plusieurs reprises sur les listes de produits, puis sur la page de chacun est peu commode pour les utilisateurs.
Le prix est également un élément essentiel pour comparer les produits. Lorsqu’un utilisateur identifie des produits qu’il pourrait acheter, le tarif est essentiel pour prendre des décisions judicieuses. Pourquoi ces deux produits d’aspect similaire sont-ils tarifés différemment ? Cette fonction supplémentaire vaut-elle le supplément ? Le prix peut aussi guider les acheteurs vers l’endroit qui répond à leurs besoins. Ainsi, si une personne achète des copieurs pour une société de 500 employés, elle s’attend à ce que le prix soit considérablement différent de celui d’une machine destinée à une petite entreprise. Les grosses sociétés ont besoin de machines plus solides, à des prix souvent supérieurs. A l’inverse, si l’utilisateur achète pour une petite entreprise, ne comptant que quelques utilisateurs, le prix sera moindre. Connaître le tarif dès le départ aide à faire le tri parmi les articles convenant à une situation donnée. A notre époque où les fraudes foisonnent sur Internet, il convient de rassurer les clients sur la crédibilité des entreprises avant qu’ils ne s’engagent dans la vente. Etre direct et précis sur le prix est essentiel pour obtenir la transaction. Les personnes considèrent les sociétés qui cachent les prix comme trompeuses et peu dignes de confiance. Imaginez d’entrer dans un magasin de revêtements de sol pour demander le prix de l’installation du carrelage et que le commercial vous réponde qu’il ne pourra vous le dire que lorsque vous lui aurez donné votre carte de crédit.
9 : Fournir un bon contenu informatif
287
Imaginons maintenant un magasin dans lequel le commercial non seulement vous dise le prix mais le scinde ensuite en prix du matériel et prix du service. Avec quelle société préféreriez-vous traiter ?
www.atlantis.com Nos testeurs ont d’abord été attirés par la présentation graphique de cette résidence et ont immédiatement voulu connaître le prix mais rien ne laissait penser qu’il était possible de le trouver. La zone des logements possédait un petit lien appelé « Seasonal Rates » (tarifs saisonniers), mais ils ne l’ont pas remarqué car il était groupé avec d’autres liens parlant des tours (towers). « Je trouve ça assez joli, mais combien cela va-t-il coûter ? » « On ne sait pas combien ça coûte. C’est décevant car je n’ai pas de réponse précise. Je ne sais pas combien ça coûte ni comment faire une réservation. »
(Page de droite, en haut) Les achats sur ce site sont peu agréables car les clients doivent cliquer sur chaque article pour voir son prix. Affichez les prix au niveau de la page des catégories, et non pas simplement au niveau des produits, un niveau plus bas. « Je n’aime pas ne pas voir les prix, on ne sait donc pas à combien ils se montent. »
(Page de droite, en bas) Ce site présente les prix à un autre endroit. Même s’ils varient selon les magasins, une estimation aurait été un élément utile. Le prix peut donner une idée de la sophistication des produits : ainsi, des articles de marque et des vêtements de designers sont souvent plus chers. Les personnes peu au fait de cette marque se demanderont si le prix entre dans leur budget et correspond à leur sensibilité.
288
Site Web : priorité à la simplicité
www.sharperimage.com
www.leefit.com
9 : Fournir un bon contenu informatif
289
Plus d’excuses Les sociétés avancent de nombreuses excuses pour ne pas afficher les prix en ligne : elles ne veulent pas que leurs concurrents connaissent leurs prix, les prix varient selon les clients, les prix fluctuent, etc. Toutes ces excuses peuvent être légitimes mais n’aident pas vos clients. Ne pas afficher les prix va à l’encontre de leurs besoins. Ne trichez pas avec vos clients en ce qui concerne les prix. Leur confiance va aux sociétés qui respectent leurs affirmations.
www.infocus.com Ce site affiche correctement les prix fournisseur de ses produits. Même si les administrations possèdent leurs propres programmes d’achat, voir le prix donne déjà une idée de la gamme tarifaire.
290
Site Web : priorité à la simplicité
Les utilisateurs ont d’abord été attirés par le prix annoncé pour le produit January White Out sur le site de la résidence de ski de Fairmont Chateau Whistler. Plus loin, le prix passe toutefois de 1 049 $ (canadiens) pour cinq nuits à 529 $ par nuit. Ces informations apparemment incohérentes portent tort à la crédibilité de l’entreprise.
www.whistlerblackcomb.com
Astuce : mieux vaut des prix approximatifs que rien du tout Si vous ne pouvez pas donner le prix réel d’un produit en ligne, proposez un prix approximatif ou une gamme de prix. Il existe de nombreux cas dans lesquels les utilisateurs se contenteront de prix approximatifs, sachant que le prix définitif variera. Ainsi, par exemple, dans le secteur du B2B, les gros clients négocient souvent des tarifs spéciaux, qui ne sont pas proposés au grand public.
Les acheteurs de ces sociétés savent qu’ils n’auront pas à payer le prix affiché mais ont tout de même besoin d’obtenir un chiffre approximatif. Les structures tarifaires peuvent aussi varier pour un service spécifique. Ainsi, une société de déménagement ne peut généralement pas proposer de prix fixes sur son site Web. Elle pourrait toutefois donner les prix habituels pour un déménagement, par exemple, pour un appartement de trois chambres dans la même ville ou d’un bout à l’autre du pays.
9 : Fournir un bon contenu informatif
291
Mentionner les suppléments Mentionnez dès que possible les suppléments, par exemple les taxes et les frais de port, et placez-les absolument sur la première page du panier d’achat. Ne pensez pas que l’utilisateur attendra la fin de la transaction pour le savoir. La plupart ne perdront pas de temps à remplir des formulaires ou à donner des informations personnelles s’ils ne savent pas combien ils vont dépenser ; un supplément inattendu est une surprise bien peu agréable. L’une de nos testeuses qui cherchait un vase sur KitchenEtc. com craignait d’acheter le produit à cause des frais de port et d’assurance, non mentionnés. C’était une consommatrice avertie d’Internet et elle se méfiait des coûts cachés. Ne connaissant pas le prix total, elle n’a pas voulu acheter sur le site.
Les clients de ce site n’obtiennent le total définitif que lorsqu’ils se sont enregistrés et ont saisi la totalité des informations de livraison. Placer ce type d’obstacles sur le parcours des clients les déçoit.
« Il n’y avait aucune mention du port », a-t-elle dit. « Généralement, le transport du verre nécessite une assurance et c’est lourd, le port peut être onéreux. Je ne pense pas que je reviendrai sur ce site Web… On ne sait pas à combien se monte le port, c’est donc un problème.» Dans le même ordre d’idée, si vous proposez des frais de port gratuits ou réduits, mentionnez-le. Faites savoir à l’utilisateur s’il doit s’acquitter de taxes. Il n’y a pas à avoir honte d’économiser l’argent des consommateurs. Réduire les frais peut faire pencher la balance en votre faveur.
www.target.com
292
Site Web : priorité à la simplicité
www.overstock.com Ce site annonce clairement ses frais de livraison (un dollar) sur sa page d’accueil, il n’y a donc pas d’ambiguïté, les clients ont toute liberté pour se concentrer sur l’achat.
www.sharperimage.com Si vous proposez des articles gratuits, mettez-les en évidence, même lorsque ce sont des articles généralement gratuits. De nombreuses sociétés distribuent leur catalogue sur leur site Web, sans préciser qu’il est offert. Une participante de notre étude a refusé de s’inscrire pour recevoir le catalogue car le prix n’était pas mentionné, elle a donc supposé qu’il risquait d’être payant.
9 : Fournir un bon contenu informatif
293
www.walmart.com Ce site montre une estimation des frais de port sur la page du panier, avant même que l’utilisateur ait à indiquer ses informations personnelles. Economiser des étapes aux personnes avant qu’elles s’engagent à acheter constitue une stratégie intelligente, qui facilite l’achat. Bien entendu, le coût définitif exact doit être présenté avant que les personnes ne concluent la transaction, de préférence juste après qu’elles ont entré l’adresse de livraison.
294
Site Web : priorité à la simplicité
Gagner la confiance du client Trop souvent, les sites Web se noient sous un discours marketing au lieu d’apporter des descriptions précises des produits et des services vendus. Les clients font confiance aux sites qui expliquent clairement leurs produits ou services et présentent des images.Toutefois, proposer trop de détails dès le départ peut être envahissant. Lorsque les informations sont nombreuses, nous suggérons de les distribuer en plusieurs niveaux. Quelques marques d’approbation soigneusement placées et des études positives aident également à gagner la confiance (et l’argent) des consommateurs.
Décrire le produit Des descriptions de produits peu fournies constituent une autre raison de l’échec de la vente en ligne. Les erreurs fréquentes sont les suivantes : ■ ■
ne pas expliquer suffisamment l’offre ; ne pas présenter d’images adéquates pour décrire les détails.
Les descriptions de produits doivent être suffisamment détaillées pour donner une bonne idée du produit ou du service et aider le consommateur à faire la différence dans les propositions. Des descriptions précises aident les internautes à prendre des décisions d’achat en toute confiance. Les règles de rédaction pour le Web, traitées au Chapitre 8, s’appliquent également à la présentation des produits. Soyez concis. Débarrassez-vous des mots inutiles ou des descriptions emphatiques. Pour le grand public, employez des termes communs et connus de tous. Lors de la lecture en ligne, les utilisateurs sautent les informations qu’ils ne comprennent pas, comme les liens ou les éléments de navigation employant des mots inventés ou du jargon technique. Afficher un contenu que les utilisateurs ne comprendront pas est mauvais signe. Mais c’est pire encore si cela concerne des descriptions de produits : lorsqu’ils ne comprennent pas quelque chose, les internautes supposent parfois le pire. Ainsi, si une banque affirme, dans une description de ses comptes-chèques, qu’elle facture un euro pour un produit appelé « POS » et que les utilisateurs ne savent pas de quoi il s’agit, ils auront peur de devoir payer ces frais très souvent. Ici, POS signifie « point of sale » (point de vente) et a trait aux possibles frais facturés lorsque vous utilisez une carte bancaire pour payer dans un magasin. 9 : Fournir un bon contenu informatif
295
Trouver les différences entre divers comptes-chèques sur le site de cette banque n’est pas chose aisée. La description contient trop de termes spécialisés, ce qui empêche quasiment les possibles clients de comprendre les options. Les termes pourraient être compris par un employé du secteur bancaire mais pas le grand public. Ainsi, les participants n’ont pas su interpréter ATM/MasterCard Check Card (distributeur automatique/carte chèque MasterCard), Relationship balance (équilibre des relations), Telephone Banking accessible (banque par téléphone accessible) ou POS (point de vente). « Je ne suis pas très sûr. Les gens sont déroutés par ATM. Est-ce que cela fonctionne avec une carte de retrait ou une carte de crédit ? C’est un peu trompeur. Si vous pouviez préciser cette ligne, ce serait utile. Qu’est-ce qu’un distributeur à l’étranger (Foreign ATM) ? » www.dimewill.com
www.atlantis.com
296
Site Web : priorité à la simplicité
www.ticketmaster.com Ne pas pouvoir obtenir une description des spectacles à venir est un facteur aggravant. Pour en savoir plus sur le spectacle de Charo, par exemple, vous ne pouvez pas cliquer sur la liste. On dirait qu’il est possible de cliquer sur le texte bleu, mais ce n’est pas le cas. Pourquoi supposer que les personnes savent déjà ce qu’elles veulent avant d’y arriver ? C’est une grosse perte d’opportunités.
(Page de gauche, en bas) Des informations incomplètes ont tempéré l’enthousiasme des utilisateurs pour ce produit. Même si les produits peu chers sont une bonne chose, ce site ne proposait pas suffisamment d’informations pour que les utilisateurs achètent en toute confiance. Ils n’ont pas pu savoir ce qu’ils obtiendraient exactement pour le prix annoncé. Ainsi, que contient un « Modified American Dining Plan » (programme de dîner américain modifié) ? Plus le produit est cher, moins les utilisateurs ont tendance à acheter s’ils ne savent pas ce qu’ils obtiendront. « Je préférerais aller quelque part où je pourrais avoir quelqu’un au téléphone et obtenir des réponses spécifiques plutôt que de lire une vague série d’informations alors que je veux des données précises. »
9 : Fournir un bon contenu informatif
297
Permettez aux utilisateurs d’agrandir les photos pour obtenir un gros plan des produits. Voir un détail spécifique ou évaluer une texture augmente la confiance des acheteurs en ligne.
Conduire le test d’un site automobile Nous avons demandé aux testeurs d’utiliser le site Honda Automobiles (http://automobiles.honda.com) pour trouver une voiture qui conviendrait à une famille avec deux enfants en bas âge. Cette tâche n’était pas aussi simple que vous pourriez le penser. Ses listes de caractéristiques et ses descriptions de produits vagues ont désarçonné les utilisateurs. Des tests utilisateur auraient aidé Honda à identifier les questions communes qu’ont posées nos testeurs. Voici quelques-uns des commentaires des utilisateurs : « Je n’aurais pensé qu’il m’aurait fallu dix minutes pour découvrir que la voiture n’a pas la climatisation. » « Cela ne me dit pas ce qu’on trouve dans le module d’options. » « Le système audio, on ne cite pas sa marque. »
Proposer des images et des illustrations de produits Lorsqu’elles sont présentées correctement, des illustrations et des images signifiantes peuvent compléter les descriptions pour décrire ce à quoi ressemblent les produits. L’espace sur les pages Web est généralement limité, vos images ont donc beaucoup d’importance. Ne gâchez pas une place précieuse avec des images ou des graphiques à seule fin de décorer la page. Facilitez plutôt la navigation en choisissant des images pertinentes, utiles aux utilisateurs. De même, conservez une taille et une résolution d’images aussi basses que possible, mais maintenez suffisamment de détails pour que les clients en retirent les détails importants, en tout confort. Permettez aux utilisateurs d’agrandir les photos pour obtenir un gros plan des produits. Voir un détail spécifique ou évaluer une texture aide à augmenter la confiance des acheteurs en ligne. Il est gratifiant de savoir que la plupart des sites respectent cette instruction et proposent des fonctions de zoom ; elle est toutefois parfois appliquée de manière incorrecte. La pire erreur survient lorsqu’un utilisateur clique sur le bouton « Agrandir la photo » et que le site propose alors la même taille de photo. Des liens et des boutons inefficaces font perdre du temps et augmentent la confusion chez les utilisateurs. Dans le même ordre, certains sites permettent d’agrandir les photos, mais très peu. Lorsque les utilisateurs demandent une grande photo, présentez-leur une grande photo. Ils peuvent même attendre qu’elle se charge. Il vaut souvent mieux proposer un agrandissement qui remplisse l’écran (1024 × 768 pixels en général, à l’heure où nous écrivons). D’autres fois, mieux vaut proposer toute une gamme de gros plans pour donner aux utilisateurs les détails dont ils ont besoin, sans les obliger à faire défiler une très grande photo.
« DX et EX ? je ne connais rien aux Honda. » « Je ne connais rien aux airbags frontaux, mais je ne vois nulle part où je puisse en savoir plus. »
298
Site Web : priorité à la simplicité
Cinq grosses erreurs d’illustration ■
Les images sont trop petites pour afficher les détails adéquats.
■
Les images ne sont pas suffisamment zoomées pour présenter suffisamment de détails.
■
Les images sont trop zoomées pour montrer le contexte.
■
Les images ne montrent pas les comparaisons de taille.
■
Les images ne montrent pas l’article sous des angles importants.
Les premières pages doivent en effet contenir de petites photos pour éviter d’encombrer la bande passante et l’écran. Il faut également indiquer les temps de téléchargement et surveiller le poids des pages. Même à notre époque du haut débit, les délais de réponse ralentis sont toujours légion. Soyez sensibles aux utilisateurs en bas débit, car les gros fichiers peuvent être longs à charger voire pire, bloquer leurs ordinateurs. La volonté d’attendre le chargement des images a des limites ; les utilisateurs n’aiment pas particulièrement attendre longtemps si les résultats ne valent pas les efforts entrepris.
www.crutchfield.com Crutchfield propose deux niveaux d’agrandissements des photos de son site. Voyez que l’image agrandie comprend suffisamment de détails pour se faire une très bonne idée des écouteurs et des commandes de cette radio satellite. Bien entendu, une image de cette taille ne peut pas se trouver sur la page principale du produit pour deux raisons : elle se charge trop lentement et laisserait trop peu de place pour d’autres informations produit. Proposer des photos détaillées facilite toutefois la vente lorsque les utilisateurs les demandent.
9 : Fournir un bon contenu informatif
299
Amazon propose un gros plan clair, montrant les détails de la bague. En outre, le site montre le produit avec d’autres marques pour que les utilisateurs voient sa taille relative. Il aurait mieux valu faire figurer un plan latéral pour connaître l’épaisseur de l’anneau. Et pour les petits objets, il vaut souvent mieux présenter un élément connu, une pièce de monnaie par exemple, pour donner une idée précise de sa taille.
(Ci-dessous) Les photos sont trop petites pour présenter suffisamment de détails, ce qui aurait aidé à discerner rapidement les différences entre les choix sans avoir à cliquer sur chacun. Les photos de la première page doivent être petites, mais elles doivent être suffisamment détaillées pour présenter des informations importantes sur chaque produit.
www.amazon.com
www.kitchenetc.com
300
Site Web : priorité à la simplicité
www.addonics.com L’utilisation de miniatures n’a pas de sens ici car les utilisateurs ne font pas la différence entre les produits. Le texte est illisible et les appareils semblent similaires dans ces petites photos.
www.abercrombie.com Quoi, pas de vue de dos ? Les acheteurs veulent savoir à quoi ressemble l’arrière du pantalon. Y a-t-il des poches, avec des rabats ? Le tissu est-il froncé ?
9 : Fournir un bon contenu informatif
301
Ce site illustre bien le produit, à des angles qui intéressent le public. Montrer les perles à côté d’une règle donne une bonne idée de leur taille. L’idéal aurait été de faire figurer une image d’un mannequin les portant pour les montrer en situation.
www.overstock.com
Qu’est-ce que le tissu Cordura et à quoi ressemble l’intérieur du sac ? Il aurait été appréciable d’obtenir d’autres gros plans du tissu et une vue intérieure. A la décharge du site, on trouve un joli tableau graphique en bas de page, détaillant les dimensions du sac, mais il est trop éloigné du produit et de la zone Select Size (choisissez la taille) pour être remarqué. www.timbuk2.com
302
Site Web : priorité à la simplicité
www.timbuk2.com Un schéma simple peut aider les utilisateurs à choisir une taille de sac. Ce dessin du sac en faible résolution illustre suffisamment sa taille relative.
9 : Fournir un bon contenu informatif
303
Hiérarchiser les pages de produit Ne noyez pas vos clients sous les informations. Hiérarchisez les informations en présentant d’abord les points principaux, puis permettez aux acheteurs d’aller facilement aux particularités.
Proposer des détails et des spécificités sur vos produits n’oblige pas à noyer vos clients sous les informations. Inutile de présenter toutes les données en même temps ; hiérarchisez les informations en présentant d’abord les points principaux, puis permettez aux acheteurs d’aller facilement aux particularités. Les clients ne doivent pas être obligés d’accéder aux informations annexes à des endroits distincts du site Web. Les pages de produits doivent disposer de liens vers tous les autres sujets annexes : ■
les détails du produit ;
■
les photos, les illustrations et les démonstrations ;
■
les foires aux questions ;
■
les avis des clients et des experts ;
■
le dépannage et la maintenance ;
■
les accessoires et les pièces ;
■
les coordonnées du fabricant ;
■
les remises et rabais.
Les sites des fabricants doivent toujours apporter des informations détaillées sur tous leurs produits. Il est fréquent que les utilisateurs les visitent lorsque les informations produit sont absentes ailleurs ; cela peut vous faire gagner une vente si le site du revendeur est défaillant.
304
Site Web : priorité à la simplicité
Voici un exemple de page produit efficace. Une liste à puces apporte une description courte du produit, tandis que les liens guident les clients intéressés vers des informations plus approfondies. Les accessoires constituent aussi une manière intéressante de faire grimper les ventes tout en proposant des outils utiles aux clients. Montrer les prix de chaque accessoire est un plus.
www.sharperimage.com
9 : Fournir un bon contenu informatif
305
Voici une autre page produit très convenable. Les liens pointant vers les informations détaillées sont regroupés et présentés de manière bien visible. Cette page donne juste ce qu’il faut de détails sans être écrasante. La mention des frais de port au début de la procédure d’achat facilite aussi la transaction.
www.potterybarn.com
(Page de droite, en bas) Crutchfield propose des informations détaillées sur des produits électroniques assez complexes. Or, au lieu d’écraser les utilisateurs en présentant toutes les informations sur un seul écran, le site fait un bon usage des liens hypertexte. Le premier écran (affiché ici) propose un aperçu probablement trop détaillé. D’autres informations sont proposées dans les onglets de la zone de description ou si l’on suit des liens comme « request a copy of the manufacturer’s warranty » (demander une copie de la garantie fabricant). Bien entendu, cette stratégie ne fonctionne que si les liens sont clairs, ce qui est le cas sur cette page.
306
Site Web : priorité à la simplicité
Cette page produit ne propose que des informations superficielles et n’offre aucun accès aux détails qui intéressent les clients. Le bref résumé n’indique pas les caractéristiques dont ont besoin les clients pour prendre leur décision d’achat. La page doit aider aussi bien les nouveaux clients que les connaisseurs de la marque, mais il manque les ressources annexes (manuels de maintenance, garanties, pièces détachées). Les utilisateurs s’attendent à ce que la page produit soit le premier endroit à proposer des informations complètes sur un produit ou un service spécifique. Lorsqu’ils ne la voient pas, ils supposent que la page est absente du site.
www.crutchfield.com
www.cummins.com
9 : Fournir un bon contenu informatif
307
www.reserveamerica.com
www.reserveamerica.com
308
Site Web : priorité à la simplicité
(Page de gauche, en haut) Il est quasiment impossible de choisir ici un site de camping en toute confiance. La description générique de chacun ne permet pas de faire facilement la différence entre les propositions. Les détails supplémentaires que l’on obtient avec chaque lien ne valent pas l’effort nécessaire et sont presque totalement incompréhensibles. Le campeur moyen ne saura pas ce que signifient les codes ou des descriptions de site comme Environmental–Large. (Page de gauche, en bas) Si vous cliquez sur les détails de l’un des sites, la page suivante n’apporte quasiment aucune information utile. L’utilisateur continue à être désorienté par des termes comme « Environmental Sites » et « DISP » ou encore par l’aspect des sites. Les informations sur les véhicules sont peu claires. « Maximum number of vehicles: 0 » signifie-t-il qu’ils n’ont pas le droit de circuler sur le camp ? En l’absence d’informations claires et complètes, les utilisateurs vont abandonner la procédure de réservation en ligne. (Ci-dessous) Même si vous cliquez sur le lien « Campground Details » (informations sur le camp), les noms des liens sont peu significatifs. Quelle est la différence entre East Bay et Groups Platform ? Ici, la plupart des internautes abandonnent, quittent le site ou appellent quelqu’un à l’aide.
www.reserveamerica.com
9 : Fournir un bon contenu informatif
309
Etre de bonne foi Présenter les prix et les reconnaissances obtenus par le site pour la qualité de ses produits et services est une manière d’améliorer la crédibilité de l’entreprise et la confiance des utilisateurs. Au lieu de simplement les associer aux communiqués de presse, vous pouvez les faire apparaître directement sur la page du produit concerné. Les grandes récompenses doivent aussi être présentées dans la zone « A propos de… ». Mais inutile de présenter les plus anciennes. Elles ne feront qu’encombrer la page et pourraient porter tort à votre crédibilité, suggérant que vous n’avez rien accompli de notable depuis. Si vos produits ont été favorablement remarqués par la presse ou par des sites Web respectés, mentionnez-le en proposant un lien. Ils améliorent votre crédibilité car ils montrent que vous n’avez pas peur de faire lire l’article à vos utilisateurs. La plupart ne cliqueront pas dessus, mais la présence de ces liens fait toujours des miracles.
http://automobiles.honda.com Honda a manqué l’opportunité de souligner des réussites importantes, qui pourraient faire pencher les consommateurs en sa faveur. Il aurait été utile de mentionner les récompenses obtenues en matière de sécurité sur d’autres pages, comme les pages produit et sécurité.
310
Site Web : priorité à la simplicité
Une fois de plus, le mieux est l’ennemi du bien. Les utilisateurs n’aiment pas se voir confrontés à une longue série de choix.
Achat par comparaison Amener les utilisateurs sur votre site, c’est avoir fait la moitié du chemin. Le défi consiste ensuite à les tenir suffisamment intéressés. Certains concepteurs Web considèrent qu’il vaut mieux proposer autant d’options que possible. Mais c’est tout le contraire : une fois de plus, le mieux est l’ennemi du bien. Proposer quelques choix pertinents vaut généralement mieux que d’encombrer le site d’une multitude d’options semblables qui nécessitent d’être triées. Les utilisateurs n’aiment pas se voir confrontés à une longue série de possibilités. Il est pourtant plus simple de comparer quelques produits que d’en avoir dix ou vingt à démêler. Devoir établir les caractéristiques uniques de chaque produit augmente de manière exponentielle la difficulté à prendre une décision rationnelle.
Cette image ne montre qu’une partie des offres de carte de crédit disponibles. L’écran continue encore et encore, proposant de nombreux produits similaires. Bien qu’avoir le choix puisse être agréable, avoir trop de possibilités intimide les utilisateurs et complique la comparaison. « Je pense qu’ils proposent bien trop de cartes. » « J’ai commencé à me sentir écrasé par le nombre de cartes proposées sur le site. »
www.bankone.com
9 : Fournir un bon contenu informatif
311
Facilitez l’achat des utilisateurs en leur permettant de limiter aisément leurs options et de réaliser des comparaisons, les produits étant en regard l’un de l’autre. N’oubliez pas que les utilisateurs ne veulent pas avoir à errer dans un contenu verbeux, pour faire des allers-retours entre les différents produits. Un bon tableau comparatif est généralement le plus efficace pour comprendre les différences entre les produits.
www.dimewill.com Les testeurs se sont plaints que la comparaison entre les comptes était trop pesante et demandait plus d’efforts que ce qu’ils étaient prêts à réaliser. Le site ne disposait pas d’un tableau comparatif pour les aider à faire la différence entre les options. Ils devaient plutôt sélectionner le type de compte présenté dans la liste à gauche, pour en lire ensuite la description. « Il est dit de trouver le compte-chèque qui me convienne, mais ce site ne me guide pas. Je dois parcourir chacun d’eux tour à tour. Ils pourraient peut-être créer une page qui les rassemble tous. Pour établir les avantages et les inconvénients de chacun. Cela fait beaucoup à lire si je ne cherche que quelques éléments spécifiques. Il vaudrait mieux avoir un tableau. Mon attention se perd. » « Où vais-je trouver ce qui me convient ? Il y a trop à faire pour voir celui qui me convient. Oh mon dieu, blablabla, blablabla, blablabla. » « Ils devraient proposer une brève description des comptes, avec des puces, à un seul endroit, plutôt de vous faire parcourir chaque page, une à une. J’aurais aimé trouver une comparaison. »
312
Site Web : priorité à la simplicité
Ce mauvais exemple est extrait de la page d’accueil du modèle Accord Sedan. Le principal facteur de différenciation est le prix mais que signifient DX, LX et EX ? Ce tableau a laissé les personnes perplexes quant à savoir ce qu’elles achèteraient en échange de leur argent. Elles ne trouveront pas ici de réponse évidente : elles doivent cliquer sur chaque produit, se souvenir des caractéristiques de chacun, puis compiler leurs propres données de comparaison.
Etudions les tableaux comparatifs du site Web de Honda Automobiles. Les clients qui cherchaient le modèle Accord pouvaient s’interroger : « quelles sont les différences entre les différents aspects ? » Les différents tableaux du site offrent des angles de réponse légèrement différents, certains mieux que d’autres.
« J’aimerais avoir une image montrant les différences entre l’EX et la DX. Notamment si je dépense plus d’argent pour une EX, je veux savoir ce que j’aurai en retour. » « En tant que client, je veux que la comparaison soit plus facile. »
http://automobiles.honda.com
http://automobiles.honda.com Voilà qui est mieux. Cette version propose plus de détails sur chaque voiture mais la mise en page est horrible. Le texte est regroupé, il est difficile de dégager des informations et d’en faire ressortir les différences.
9 : Fournir un bon contenu informatif
313
Celui-ci est le meilleur. C’est un bon exemple de tableau comparatif bien conçu : il est simple et permet de naviguer facilement. Il pourrait toutefois être amélioré si des liens hypertexte étaient placés sur les descriptions. Des termes comme « Drive-by-Wire Throttle System » restent très mystérieux et nécessitent quelques explications. Pour de longs tableaux, exigeant de faire défiler beaucoup de texte, n’oubliez pas de répéter les titres en haut de page. N’oubliez pas non plus de répertorier les caractéristiques par ordre de priorité, selon le point de vue de votre client, et non le vôtre.
http://automobiles.honda.com
Affiner et trier Si votre site est plein à craquer de toutes sortes de produits et services, vous devez permettre aux utilisateurs d’affiner leurs choix pour n’afficher que les éléments pertinents et ignorer ceux sans importance. Séparer les produits utiles des produits sans intérêt rend l’achat par comparaison bien moins effrayant.
(Page de droite, en haut) Staples propose divers paramètres de tri pour affiner sa liste de produits, de sorte que les clients puissent se concentrer sur leur recherche. Les petites descriptions de la liste à puces indiquent les principales fonctionnalités pour pouvoir différencier les articles. Il vaut toutefois mieux inclure des options de tri selon d’autres caractéristiques importantes pour les clients, comme les lumens et la résolution, dans le cas des projecteurs. La mobilité du produit est aussi importante pour les voyageurs, le poids doit donc être un autre critère important.
314
Site Web : priorité à la simplicité
www.staples.com
L’achat par comparaison sur ce site est pesant car les options de tri sont limitées. Le prix est évidemment un critère important mais ce n’est pas le seul sur lequel les clients basent leurs décisions. Les utilisateurs doivent parcourir les produits un à un pour lire les caractéristiques et séparer les produits utiles des produits non pertinents. Imaginez de devoir faire cela manuellement pour plus de quarante articles !
www.officedepot.com
9 : Fournir un bon contenu informatif
315
www.parks.ca.gov
www.parks.ca.gov
316
Site Web : priorité à la simplicité
(Page de gauche, en haut) Un tableau comparatif, qui s’étend sur trois pages, est bien peu maniable. Faire correspondre les points avec les colonnes et les lignes correctes se transforme vite en une procédure laborieuse. Les intitulés des icônes sur la première ligne sont trop petits et peu descriptifs. Les utilisateurs peuvent survoler chacune d’elles pour en obtenir une description, mais c’est trop d’effort pour chacun des cinquante qualificatifs. Dans ce cas, l’utilisateur doit pouvoir affiner la liste selon des caractéristiques importantes.
Aider les ventes par la qualité du contenu Les entreprises comprennent peu à peu que le discours marketing et les tactiques de vente agressives repoussent les clients. Certaines ont appris que les clients apprécient un contenu de qualité et publient des articles sur leurs sites allant dans ce sens. A l’évidence, c’est une aide à la vente des produits. Mais les clients les trouvent utiles s’ils sont concis et informatifs, d’une manière adaptée au Web, c’est-à-dire en évitant le style accrocheur des publicités télévisées. Maintenez le discours marketing à son minimum ; laissez le contenu parler pour lui-même. L’un des meilleurs endroits pour informer le public sur vos produits ou services reste les pages d’informations. Les publicités ou les liens qui permettent d’acheter des produits sont utiles lorsqu’ils sont bien intégrés dans le contenu, car ils sont alors disponibles dès que les personnes en ont besoin. Toutefois, certains sites que nous avons rencontrés proposent des articles informatifs mais sans profiter de l’occasion pour vendre le produit ou faire savoir qu’il est disponible.
(Page de gauche, en bas) Ce site propose une méthode pour choisir les sites de camping en fonction de certaines caractéristiques. Malheureusement, elles sont si peu visibles que nombre de nos testeurs ne les ont pas vues. Info : par défaut, il vaut mieux régler les paramètres sur toutes (all) les activités demandées plutôt que sur l’une d’entre elles seulement (any). Les trois boutons Go (aller) sont déroutants car on ne sait pas vraiment si les utilisateurs doivent cliquer sur le bouton associé à chaque catégorie.
N’oubliez pas que les utilisateurs ne se rendent pas toujours sur la page d’accueil de votre site. Les moteurs de recherche les emmènent souvent, par l’intermédiaire de liens profonds, vers des pages spécifiques, d’où le fait qu’ils risquent de ne jamais voir vos offres. Insérez, dans les articles, des mentions du produit ou des liens vers sa page principale pour vous assurer que les utilisateurs comprennent bien que vous vendez ces produits. Ils n’auront plus besoin alors de parcourir le site plus avant si l’article répond à leurs attentes.
Quatre raisons de publier des articles informatifs ■
Ils améliorent la crédibilité en démontrant vos compétences et votre véritable motivation à aider le public.
■
Ils aident les clients à faire la différence entre des produits alternatifs.
■
Ils proposent des informations pour aider les décisions d’achat des clients.
■
Ils contiennent des mots-clés qui améliorent la visibilité dans les moteurs de recherche et augmentent le trafic vers votre site.
9 : Fournir un bon contenu informatif
317
Ils n’ont pas le produit, n’est-ce pas ? Dans l’une de nos études, les testeurs ont cherché sur le site pg.com (le site de Procter & Gamble) des aliments qui conviendraient à un chaton. La plupart n’ont pas réussi à réaliser cet exercice simple. Après avoir exploré le site pendant une période prolongée, ils ont pensé que le site ne conseillait pas de nourriture pour les chatons. Il y avait bien un lien intitulé « May we recommend a product for your cat ? » (pouvons-nous vous conseiller un produit pour votre chat ?) mais il était remisé dans la marge gauche, que les gens associent souvent à des informations peu importantes. Il aurait été plus avantageux d’insérer ce lien dans le corps de l’article pour qu’il soit remarqué. A sa décharge, le site amène rapidement les utilisateurs au bon endroit. Les niveaux supérieurs du site proposaient un lien clair et bien visible vers « Pet Nutrition & Care » (nutrition et soins des animaux domestiques) et les articles de cette section étaient intéressants et informatifs. Le moteur de recherche du site a lui-même affiché des articles pertinents pour « kitten food » (aliments chaton). Mais les liens vers les produits étaient surpassés par d’autres éléments de la page et les utilisateurs sont partis sans réaliser qu’il vendait les produits dont il faisait la promotion. Le site P&G contient des articles bien écrits qui ont attiré l’intérêt de nos testeurs mais beaucoup de ceux qui cherchaient à nourrir leur chaton sont partis en pensant que la société ne vendait rien. Le lien vers « All Pet Nutrition & Care Products » (tous les produits de soin et d’alimentation pour animaux domestiques) se trouvait au bas de la page et ils ne l’ont pas vu. Le titre Feature Products (produits vedette) n’a donné à personne l’idée que la société fabriquait des produits car les titres présents dessous comme « Does Your Cat Have a Sensitive Stomach ? » (votre chat a-t-il l’estomac sensible) semblaient être liés à un article.
www.pg.com
318
Site Web : priorité à la simplicité
www.nestle.com Les utilisateurs ont été déçus par le site Web de Nestlé car il ne proposait aucun conseil sur les produits. La section Baby Foods (aliments pour bébés) n’apporte que des informations superficielles sur les différentes marques. Nestlé manque une occasion en ignorant les questions des consommateurs et en se concentrant principalement sur la stratégie de marque. Par exemple, si l’on clique sur l’aliment de marque Alete, on n’obtient que l’histoire de la marque. Les utilisateurs s’attendaient à trouver les produits, ainsi que des informations sur les bébés auquel il est destiné, mais aussi ses avantages. « Cela parle d’allaitement, mais pas du produit. J’aimerais avoir des choix de formule en fonction de l’âge de l’enfant, des produits laitiers, etc. » « Ils ne donnent pas beaucoup d’informations. » « J’ai juste lu quelques trucs sur leurs aliments pour bébés, mais je ne trouve rien [de plus précis]. Il n’y a rien sur quoi on puisse cliquer. » « Je n’ai pas aimé ces informations ; ça n’explique pas grand-chose pour moi. »
En savoir plus Pour obtenir les 207 instructions de conception relatives à l’utilisabilité du commerce électronique citées dans ce chapitre, accédez à l’adresse www.nngroup. com/reports et cliquez sur « ecommerce ». Pour obtenir des instructions sur la présentation des produits complexes des sites de B2B, cliquez sur « b2b ».
9 : Fournir un bon contenu informatif
319
322 La page doit-elle défiler ? 329 Guider les utilisateurs, pas à pas
333 Ne pas mélanger les torchons et les serviettes
344 Répondre aux attentes des utilisateurs 347 L’espace blanc
10 Présentation des éléments de la page Une société ne dispose que d’une toile de fond, de la taille d’un navigateur, pour présenter son message sur le Web. Les utilisateurs s’en font une impression d’après ce qu’ils voient au premier coup d’œil et il n’existe aucune garantie qu’ils voient tout ce qui se trouve sur le premier écran, notamment lorsqu’il s’y trouve des éléments clignotants ou voyants. Les utilisateurs du Web ont appris à attendre certains éléments dans certaines zones et à en ignorer d’autres. Comprendre leur comportement et leurs attentes peut vous aider à créer des mises en page qui les satisfassent et à faire passer votre message plus sûrement.
Lorsque la règle des « trois clics » fait des ravages La règle des trois clics adoptée par certains indique que toute information d’un site Web doit être accessible depuis la page d’accueil en trois clics maximum. Cela n’a jamais été l’une de nos règles. En réalité, nous avons découvert que la capacité des utilisateurs à trouver des produits sur un site de commerce électronique augmentait de 600 % lorsque la conception avait été modifiée de sorte que les produits se trouvent à quatre clics de la page d’accueil au lieu de trois. Même avec un clic de plus, la nouvelle conception était plus rapide et plus gérable car les utilisateurs n’avaient pas à passer autant de temps à savoir où cliquer. La règle des trois clics semble intuitive (et paraît être une bonne manière de respecter le temps de l’utilisateur) et c’est probablement la raison pour laquelle elle a obtenu tant de succès dans le domaine de l’utilisabilité. Elle ne tient toutefois pas la route lors du test : ce qui amène les utilisateurs à abandonner, c’est la somme de désagrément mise en travers de leur route. Bien sûr, toutes choses étant égales par ailleurs, chaque clic constitue un effort supplémentaire et les chemins les plus longs sont les plus ennuyeux. Or, toutes choses ne sont pas égales : devoir penser davantage à chaque clic et avoir un plus grand risque de cliquer sur le mauvais lien pose problème, généralement plus que d’avoir un lien supplémentaire évident. Les tentatives pour obliger un grand site Web à respecter la règle des trois clics donne souvent des systèmes de navigation obscurs et surchargés.
322
Les concepteurs Web doivent véhiculer une grande quantité d’informations sur une société ou une organisation dans un espace très limité. Mettre en valeur les informations les plus importantes est essentiel pour attirer l’attention. Les tests utilisateur vous aideront à comprendre votre public et à adapter votre conception pour qu’elle réponde à ses besoins. Les erreurs communes de mise en page sont les suivantes : ■ ■
■
■
■ ■
une page ne respectant pas l’ordre des priorités ; des interactions trop complexes et qui ne proposent pas de guidage ; des zones connexes qui ne sont pas affichées à proximité ; des éléments qui ne sont pas correctement alignés pour créer de l’ordre ; des éléments qui ne se trouvent pas là où on les attend ; trop d’éléments sur la page.
Respecter quelques directives de présentation pour vos pages peut vous aider à éviter ces erreurs.
La page doit-elle défiler ? Nous l’avons vu dans notre étude des habitudes de défilement au Chapitre 2, la plupart des utilisateurs ne font généralement pas défiler l’écran. Ceci est dû en partie au fait que la plupart des pages n’en valent pas la peine. Et il est à parier que les utilisateurs ne feront pas défiler le texte à moins que le premier écran n’indique clairement qu’ils se trouvent au bon endroit et que la suite mérite d’être lue. Les utilisateurs ont tendance à regarder tout d’abord au milieu de la page. En cas de besoin, ils regarderont aussi à gauche et en haut pour rechercher les éléments de navigation. Ils parcourront rarement l’ensemble de l’écran jusqu’à la marge droite pour rechercher la barre de défilement, en particulier s’ils ne pensent pas l’utiliser. Ceci explique aussi pourquoi les utilisateurs ne découvrent que rarement qu’une nouvelle fenêtre s’est ouverte, même dans des systèmes comme Microsoft Windows, où cela est clairement indiqué par un nouvel onglet dans la barre des tâches. Les internautes ont aussi tendance à ignorer le bas de l’écran, à moins qu’ils ne pensent y trouver une raison valable. Ils supposent que les éléments placés au bas de longues pages sont peu importants, ils ne vont donc pas très loin. Site Web : priorité à la simplicité
Vous pourriez avancer que les utilisateurs doivent remarquer la barre de défilement : elle est là ! Mais n’oubliez pas que, pour traiter efficacement l’information, ils ne peuvent pas prêter attention à tout ce qui se trouve à l’écran. Ils adoptent des stratégies pour séparer le bon grain de l’ivraie et se diriger vers les zones proposant les plus forts indices informatifs, en ignorant les autres. Moins vous en mettez sur la page, plus les visiteurs le verront.
www.grand-canyon.edu Même si la barre de défilement du navigateur annonce le contraire, l’espace blanc démesuré que l’on trouve au bas de l’écran crée « l’illusion de la fin », un terme établi par notre collègue Bruce Tognazzini pour désigner les pages qui semblent terminées alors que d’autres informations sont disponibles. La plupart des utilisateurs ne remarqueront même pas qu’il y a trois autres écrans d’information sur cette page.
10 : Présentation des éléments de la page
323
La présence de certains éléments sur la page indique s’il est possible ou non de faire défiler.
En général, mieux vaut limiter le défilement à condition de présenter les informations les plus importantes en premier. Certains sites ont toutefois adopté une attitude tout à fait contraire et totalement empêché la page de défiler. Cela peut être ennuyeux et donner des pages sans contenu. Il faut alors apporter les bons indices visuels et un contexte adapté, qui permettent aux utilisateurs de savoir qu’ils doivent faire défiler la page. La présence de certains éléments sur la page indique s’il est possible ou non de faire défiler.
Les quatre règles du défilement ■
Si les utilisateurs s’attendent à ce qu’un élément précis se trouve à un endroit particulier, ils ne le chercheront pas ailleurs et ne feront pas défiler l’écran pour le trouver.
■
S’il y a un espace blanc au bas de la zone visible à l’écran, les utilisateurs supposent que c’est la fin de la page et ne la feront plus défiler, même si la barre de défilement du navigateur indique autre chose.
■
Les utilisateurs considèrent que les éléments qui ressemblent à des publicités, et apparaissent sur la première page-écran, marquent la fin de la page car les publicités sont souvent placées en périphérie.
■
Le placement d’indicateurs, comme des titres ou des contenus, juste au bas de l’écran suggère que les éléments se poursuivent plus bas.
324
(Page de droite, en haut) L’espace blanc et les graphiques alignés horizontalement à l’écran font croire que c’est le bas de la page, même s’il y a d’autres informations importantes dessous. Les personnes qui cherchent des informations sur l’entreprise risquent de les manquer car elles n’apparaissent qu’après la zone visible ; les utilisateurs ont l’impression d’être arrivés à la fin de la page.
(Page de droite, en bas) Où iriez-vous pour trouver le calendrier des événements ? On voit plusieurs liens pour acheter des billets mais pas de liste complète des spectacles à venir. Ces informations existent, mais il faut faire défiler quatre écrans pour y parvenir. Ici, le problème, ce n’est pas l’illusion de la fin de l’écran, car on voit clairement que la page continue, mais plutôt que les informations suivantes ne semblent pas pertinentes. Si vous voulez emmener votre tante à un concert de Mozart la semaine prochaine, vous n’allez pas vous renseigner sur le plan d’abonnement cinq étoiles, ce qui semble être le type d’informations proposées plus bas sur la page.
Site Web : priorité à la simplicité
www.pepsi.com
www.artcenter.org
10 : Présentation des éléments de la page
325
La description de la société (Corporate Overview) de ce site n’est pas vraiment une description. La page extrêmement longue ne fait pas le meilleur usage des liens hypertexte. Ne proposez pas un mur de texte à vos utilisateurs. Séparer le contenu en pages hiérarchiques est une manière plus efficace de présenter des informations détaillées.
www.pixar.com Après que nous avons réalisé la capture d’écran de la figure précédente, Pixar a réaménagé sa page Corporate Overview. Le nouveau design est meilleur mais l’article pourrait être encore amélioré et l’absence de mise en forme complique la lecture. A la décharge du site, les grandes sections ont été réduites par des liens de navigation, ce qui permet de mieux gérer l’information. www.pixar.com
326
Site Web : priorité à la simplicité
Il y a des cas où des pages longues valent mieux que des pages courtes et fragmentées ; il est alors avantageux de regrouper les informations connexes. Présenter un article continu sur une page fait paraître les informations plus cohérentes et réduit le travail inutile. Il faut moins d’efforts pour faire défiler la page que pour cliquer sur Suivant, Suivant, Suivant. Bien entendu, un contenu extrêmement long doit être stratifié et détaillé pour utiliser des liens hypertexte. C’est l’avantage du Web.
www.pcmag.com Le lient Next (suivant) placé au bas de l’écran n’indique pas ce que l’on obtiendra en cliquant dessus. L’article se poursuit-il ou la page passe-t-elle à l’article suivant ? La table des matières en haut à droite de l’écran peut aider les utilisateurs à naviguer vers des sections spécifiques de cet article, mais elle est placée à la périphérie et elle est éloignée du regard.
10 : Présentation des éléments de la page
327
Evitez de faire entrer autant de contenu que possible dans de petites zones défilantes. Obliger les utilisateurs à naviguer dans un petit espace, c’est comme les forcer à lire à travers un trou de serrure. Optimisez la taille de la zone défilante pour réduire la fatigue oculaire et rendre la lecture plus agréable, en particulier s’il y a beaucoup de contenu. Un autre danger avec les petites zones défilantes, c’est que la barre a tendance à avancer trop rapidement, ce qui amène les personnes à manquer des informations importantes.
www.atlantis.com Une petite zone de défilement comme celle présentée ici rend la lecture inconfortable. Nos testeurs ont même essayé d’augmenter la taille du site pour voir plus de contenu.
328
Site Web : priorité à la simplicité
Les utilisateurs ne renâclent pas à cliquer sur plusieurs pages, à condition que chacune les rapproche du résultat souhaité, à un rythme raisonnable. Les personnes qui ont une bonne expérience sur les sites Web pensent que leur tâche prend moins de temps (ou de clics) que ce qu’il faut en réalité.
Guider les utilisateurs, pas à pas Lorsqu’une interaction passe par plusieurs étapes, guidez doucement les utilisateurs dans un processus linéaire intuitif mais ne les noyez pas sous les options.Votre objectif est de créer une expérience satisfaisante ; les utilisateurs ne renâclent pas à cliquer sur plusieurs pages, à condition que chacune les rapproche du résultat souhaité, à un rythme raisonnable. Les interactions répondant aux attentes des utilisateurs sont agréables. En fait, les personnes qui ont une bonne expérience sur les sites Web pensent que leur tâche prend moins de temps (ou de clics) que ce qu’il faut en réalité. N’obligez pas les utilisateurs à résoudre des problèmes complexes pour passer à la page suivante. Proposer une procédure structurée évite les erreurs, par exemple rater des étapes. Lorsqu’une fonction passe par plusieurs étapes, il peut être utile de disposer d’une procédure linéaire dans laquelle les personnes sauront à quoi s’attendre. Les utilisateurs ne rechignent pas à apprendre à utiliser le logiciel qu’ils ont acheté ou qu’ils doivent employer pour leur travail mais ils ne veulent pas faire d’efforts pour les sites Web. Si le site ne répond pas immédiatement à leurs besoins, il en existe des milliers d’autres attendant d’attirer leur attention. Il est plus facile de trouver des réponses sur le site d’un concurrent que d’essayer de tirer au clair une interface complexe. N’oubliez pas : s’il paraît trop difficile à utiliser, les utilisateurs quitteront immédiatement votre site.
Astuce : attention aux chiffres magiques Nos clients nous demandent parfois s’il existe un nombre acceptable d’éléments de navigation ou de clics pour amener des personnes d’un point A à un point B. Sachez qu’il n’existe pas de chiffre magique. Mais parfois, les personnes utilisent à tort les recherches du psychologue cognitif George Miller menées en 1956 sur la mémoire humaine pour insister sur l’existence de ce chiffre. George Miller a
suggéré que les humains pouvaient retenir jusqu’à sept (plus ou moins deux) informations à la fois avec peu d’efforts. Cette règle ne s’applique tout simplement pas à la conception Web. L’étude de George Miller était destinée à étudier les limites de la mémoire à court terme ; la navigation sur les sites Web est généralement liée à la reconnaissance et à l’interprétation, non à la mémorisation.
10 : Présentation des éléments de la page
329
Lorsque nos testeurs sont arrivés sur cette page, ils n’ont pas su quoi faire ensuite. Le modèle d’interaction complexe de ce site les a empêchés de réaliser leur réservation en ligne. Les instructions indiquent : « Set your options, then click ’Search’ » (paramétrez vos options, puis cliquez sur Chercher) mais les utilisateurs ne savaient pas ce que cela signifiait. L’élément sur lequel il était le plus vraisemblable de cliquer était le bouton vert Search, ce qui donne un message d’erreur incompréhensible lorsque l’utilisateur n’a rien sélectionné. Les utilisateurs ne savaient pas qu’ils devaient sélectionner les participants un par un, puis personnaliser chaque module. Disposer d’un flux de travail linéaire plus structuré aurait pu rendre cette interaction possible.
www.whistlerblackcomb.com
Le site Web de la ville de San Diego permet d’envoyer en ligne des demandes pour faire entretenir les rues. Malheureusement, la procédure est tellement embrouillée que nos utilisateurs ont fini par abandonner. Ils n’ont pas su comment contrôler les cartes géographiques et la procédure demandait les mêmes informations deux fois. Les personnes devaient saisir le nom de la rue manuellement, puis l’identifier sur une carte. Cette redondance a entraîné beaucoup de confusion car ils ne comprenaient pas que la carte était liée au formulaire. www.sandiego.gov
Bizarrement, la plupart ont préféré la méthode textuelle, précisant que les cartes fantaisistes avaient tendance à poser problème. Ils ont considéré qu’il était plus efficace de taper du texte, que cela générait un moins grand risque d’erreurs.
330
Site Web : priorité à la simplicité
Les sites Web proposent parfois des instructions pour expliquer l’interface. Un petit coup de coude dans la bonne direction peut aider. Toutefois, l’ajout d’instructions les unes après les autres pour expliquer votre interface est le signe évident qu’un élément de votre design est bancal. Un bon design a rarement besoin d’instructions ; la présentation parle d’elle-même.
www.jcrew.com Cette interface est compliquée par des instructions inutiles. Lorsque les clients trouvent cette page, ils doivent s’arrêter, lire le texte de la zone bleue et découvrir ce qu’il signifie. Ici, il est inutile de dire aux gens ce qu’ils savent déjà : (1) qu’ils doivent cliquer sur une catégorie et (2) que seule leur taille sera affichée. Ils s’y attendent. Pourquoi les ralentir par des instructions inutiles ?
10 : Présentation des éléments de la page
331
www.mccno.com Sur le site Web du Morial Convention Center, les menus de navigation sont totalement masqués. L’interaction du site est tellement obscure qu’elle nécessite des instructions. Il faudrait un peu plus d’espace à l’écran pour que les choix des utilisateurs soient visibles. Il faudrait également reconsidérer les intitulés des boutons, pour les rendre plus explicites. Les utilisateurs n’ont pas le temps de cliquer sur des éléments dans le vague espoir qu’ils seront récompensés.
332
Site Web : priorité à la simplicité
Ne pas mélanger les torchons et les serviettes Grouper des éléments associés permet au public de les remarquer. En effet, on recherche souvent les éléments du même ordre au même endroit. S’ils n’y sont pas, les utilisateurs supposent souvent qu’ils n’existent pas ou que quelque chose manque. Par exemple, si les utilisateurs cherchaient les caractéristiques des produits, ils se rendraient probablement près de la description des produits. Si elle se trouve ailleurs sur la page, ils risquent fort de ne pas la trouver.
www.dianon.com Les zones de navigation sont réparties partout sur la page, sans ordre hiérarchique apparent. Par exemple, des informations professionnelles sont placées à gauche, en bas et en haut de la page. Disperser des éléments identiques à différents endroits amène les personnes à errer sans but. « Je trouve ce site horrible car rien n’est logique pour moi. Sur la page d’accueil, il y a des options à gauche, en bas et en haut. Et leur utilité n’est pas du tout évidente ».
10 : Présentation des éléments de la page
333
www.parks.ca.gov
www.devil.com
334
Site Web : priorité à la simplicité
(Page de gauche, en haut) La principale icône du site Web du California State Parks est trop loin en bas de la page, beaucoup n’ont pas su qu’elle existait. Présenter la légende de l’icône en haut et en bas des pages pourrait apporter davantage d’indices visuels. Toutefois, puisque la signification n’est pas évidente, des liens textuels fonctionneraient mieux.
Dans les applications Web, placez la zone de saisie à proximité de la zone de résultats. Les personnes risquent facilement de rater les résultats visuels lorsque les deux zones sont éloignées l’une de l’autre ou ne se trouvent pas dans le même espace visuel.
(Page de gauche, en bas) Presque tous les utilisateurs de nos tests ont eu des difficultés à se connecter à Devil Mail car le bouton d’inscription était masqué sous la zone visible de la page. La zone d’inscription semblait être le seul endroit manipulable de la page, les utilisateurs ont donc essayé de s’y inscrire. L’ « illusion de la fin de page » a encore frappé.
www.birmingham.regency.hyatt.com Cette petite application en ligne est destinée à aider les planificateurs de réunions à choisir les salles adaptées à leurs besoins événementiels. Lorsque les utilisateurs interagissent avec une liste de caractéristiques (comme le téléphone), le diagramme s’actualise pour présenter les choix. Toutefois, le diagramme du plan au sol est placé trop bas sous la zone de saisie, ce qui fait que les utilisateurs ne remarquent pas s’il s’actualise. Pire encore, les personnes employant une résolution d’écran de 800 × 600 pixels n’ont pas vu le plan au sol car il disparaît sous la première page-écran. L’illusion de la fin de page a fait penser à ces utilisateurs que le petit diagramme était tout ce qui était disponible (essayez de recouvrir la moitié inférieure de la capture d’écran pour vous faire une idée).
10 : Présentation des éléments de la page
335
Les utilisateurs ayant une mauvaise vue et qui utilisent des systèmes de loupe ne disposent pas du contexte complet de l’écran et doivent se déplacer sur les diverses zones pour obtenir des informations. Tout changement ou commentaire apparaissant en dehors de la zone agrandie peut facilement être ignoré. Placer les zones actives les unes près des autres aide tous les utilisateurs, mais particulièrement ceux ayant une mauvaise vision et qui ne voient qu’une partie de l’écran à la fois.
www.nces.ed.gov Remarquez que la description des éléments de navigation à gauche apparaît en haut de la page au lieu de se situer près des éléments. Lorsque des éléments connexes sont trop éloignés les uns des autres, les utilisateurs ne remarquent pas le changement. Cela est encore plus problématique pour des publics qui utilisent les loupes et ne savent pas si des changements ont lieu en dehors de la zone visible.
336
Site Web : priorité à la simplicité
www.nick.com La zone située au-dessus des pointillés correspond à ce que voient les utilisateurs lorsqu’ils ne font pas défiler un écran de 1024 × 768 pixels. Cliquer sur les caractères de la zone verte, la première page-écran, permet d’afficher le résultat, mais les commentaires visuels apparaissent après la première page-écran. Les enfants peuvent facilement rater des spectacles car ils ne voient pas les changements s’ils ne font pas défiler la page. Placez des commentaires visuels et les zones de saisie à proximité et dans le même espace visible, de sorte qu’aucune information ne soit ignorée. 10 : Présentation des éléments de la page
337
Mise en page bâclée des formulaires Une mise en forme peu soignée des formulaires constitue un autre domaine qui désarçonne les utilisateurs. Lorsque les champs paraissent dispersés et désorganisés, il est difficile de relier les intitulés et les cases. Des éléments correctement alignés et des mises en page spacieuses aident à reconnaître des groupes d’informations et à comprendre les relations entre eux.
L’absence de structure de ce formulaire crée un désordre visuel. Des entrées normalement associées comme le numéro de la rue et son nom sont bizarrement séparées ici. Les cases de texte sont tellement éloignées que nos testeurs ont mal compris les relations entre elles. Mieux vaut ne pas séparer les champs de la rue. La mise en page encombrée ne permet pas de relier facilement les cases et les intitulés. L’absence d’indentation et d’espacement correct ont amené les personnes à ignorer les boutons et leur font fait supposer qu’elles devaient taper l’emplacement des deux manières.
www.sandiego.gov
338
Site Web : priorité à la simplicité
www.bagyou.com Les internautes peuvent facilement manquer les boutons radio et la case à cocher à droite car ils sont trop éloignés de la principale zone de saisie.
10 : Présentation des éléments de la page
339
www.active.com La mise en page sur deux colonnes ne correspond pas à la procédure d’inscription à laquelle les utilisateurs sont habitués. Ceux-ci fournissent généralement des informations similaires au même endroit, en avançant de haut en bas. Devoir aller jusqu’au bas du formulaire, puis remonter de nouveau, en se retrouvant confrontés à des questions distrayantes est une procédure discordante, qui amène les personnes à ignorer ou à oublier les choix du panneau de droite.
S’inscrire au mauvais endroit est une erreur fréquente chez les utilisateurs. La plupart des écrans d’inscription possèdent une zone réservée aux nouveaux clients qui, le plus souvent, se rendent de l’autre côté, vers les zones de saisie. Les utilisateurs sont très attirés par les zones de texte qui semblent permettre une interaction. Ils préfèrent faire quelque chose plutôt que lire quelque chose. C’est pourquoi ils gravitent vers les zones ouvertes et ignorent tout le reste sur la page d’inscription.
340
Site Web : priorité à la simplicité
Les nouveaux utilisateurs ont tenté de s’inscrire dans la zone Member Login (identification des membres) de ce site. Les cases de texte sont bien plus évidentes pour les nouveaux arrivants que le bouton Register (s’inscrire), trop éloigné. Les nouveaux membres ont tenté de créer des noms d’utilisateur et des mots de passe dans la zone des membres existants et se sont demandés pourquoi le système refusait leur entrée.
www.ahm-ownerlink.com
www.reserveamerica.com De même, les personnes ont ignoré la zone Not Registered Yet ? (pas encore inscrit ?) de ce site et se sont directement rendues du côté Member Sign In (identification des membres). Une mise en forme plus égale des deux côtés aurait attiré plus de nouveaux utilisateurs. Mieux encore, vous pouvez laisser ces nouveaux arrivants saisir leurs informations du côté des membres, le système informatique gérera le reste.
10 : Présentation des éléments de la page
341
www.amazon.com Voici la meilleure solution pour proposer un écran d’identification qui soit accessible aux personnes qui ne sont pas inscrites. La première question est la même pour tout le monde, la seconde présente clairement deux boutons radio. Le bouton Yes est sélectionné par défaut si l’ordinateur possède un cookie indiquant que l’utilisateur est déjà venu. Cet écran possède un peu trop d’éléments : par exemple, même si la recherche (Search) doit généralement se situer à plusieurs endroits, il n’est pas utile de présenter trois cases pour attirer l’attention de l’utilisateur sur un écran d’identification. Parmi les autres éléments positifs de la page, notons des liens clairs qui résolvent deux problèmes habituels : l’oubli du mot de passe et le changement d’adresse e-mail. L’aide contextuelle vaut généralement mieux que de demander aux utilisateurs de trouver la réponse à un problème dans une vaste documentation en ligne où ils risquent fort de se perdre.
342
Site Web : priorité à la simplicité
www.libean.com Proposer des boutons Save for Later (garder pour plus tard) et Remove (supprimer) peut être agréable mais les outils de modification ne doivent pas être aussi apparents dans la zone de résumé des commandes. De même, l’option Purchase Now (acheter maintenant) est redondante puisque l’on sait que les chariots sont destinés aux achats. Supprimer les options inutiles et placer des éléments dans les zones adaptées donnent une interface plus rangée et améliorent la lecture rapide de la page.
10 : Présentation des éléments de la page
343
Regardez-moi !
Essayer de rendre les objets plus grands, plus gras et plus lumineux pour qu’ils soient remarqués peut avoir un effet contraire car ces caractéristiques sont souvent associées à des publicités ; et nous savons que les personnes veulent s’éloigner autant que possible de tout ce qui ressemble à une publicité.
Répondre aux attentes des utilisateurs A mesure que le Web évolue, des standardisations apparaissent, qui façonnent l’idée que vont se faire les utilisateurs de votre site. Ainsi, par exemple, les liens pointant vers les informations de l’entreprise se trouvent souvent en haut et en bas des pages d’accueil. Les placer ailleurs peut entraîner une confusion inutile. L’avantage, lorsque l’on comprend les attentes des utilisateurs, c’est que l’on peut leur apporter ce dont ils ont besoin, comme ils le veulent. Il n’est pas nécessaire d’opter pour un design trop imposant, par peur qu’il ne soit pas remarqué. Placer simplement les éléments voulus aux endroits voulus permet de s’assurer que les utilisateurs les voient.
www.palm.com
344
Site Web : priorité à la simplicité
www.sharperimage.com Le bouton d’achat se trouve à un endroit étrange. Il est généralement placé au bas du chariot, et non en haut. En effet, les utilisateurs vérifient généralement leurs commandes de haut en bas, pour finir par trouver le bouton d’achat à la fin de la liste. Contrevenir au modèle mental de l’utilisateur entraîne une expérience déroutante, exigeant des personnes qu’elles consultent plus d’éléments que nécessaire.
(Page de gauche) Même si la zone Learn More (en savoir plus) de ce site est mise en valeur par du gras et une zone surlignée, les utilisateurs l’ont ignorée car elle a été placée au mauvais endroit. Ils n’ont pas pensé que ces liens étaient importants car les principaux éléments de navigation sont souvent à gauche de l’écran. De même, la case placée autour des liens les fait paraître secondaires. Les zones encadrées sont souvent associées à de la publicité, en particulier lorsqu’elles sont placées à la périphérie.
10 : Présentation des éléments de la page
345
www.ae.com Placer le bouton Add to Wish List (ajouter à la liste des souhaits) à un endroit où les personnes s’attendent à voir le bouton Add to Shopping Bag (ajouter au sac) soumet cette mise en page à un fort risque d’erreur. De même, le bouton bleu Shopping Bag (sac de courses) se confond avec l’autre texte bleu sur la page, ce qui fait encore plus ressortir le bouton Wish List (liste de souhaits). Ainsi, même s’il est légèrement plus petit et plus clair que le bouton Add to Shopping Bag (ajouter au sac de courses), il est plus évident.
Le positionnement du bouton Add to Shopping Bag (ajouter au sac de courses) est mieux ici. Le bouton Add (ajouter), qui correspond à la principale action ici, est placé juste après la dernière sélection, suivi de boutons moins importants : Add to Wish List (ajouter à la liste de souhaits) et E-Mail a Friend (envoyer par e-mail à un ami). L’ordre et la mise en page des boutons risque moins d’amener les personnes à cliquer sur le mauvais choix.
www.ae.com
346
Site Web : priorité à la simplicité
Présenter un bon espace blanc autour des groupes d’éléments attire l’attention des utilisateurs sur le principal, sans faire mal aux yeux.
L’espace blanc Ce qui est absent de votre site est aussi important que ce qui s’y trouve. « L’espace blanc » d’une page, c’est-à-dire les parties qui ne comportent ni texte ni illustrations, est important pour le contenu et la conception visuelle car il aide les personnes à traiter l’information en unités gérables. Présenter un bon espace blanc autour des groupes d’éléments attire l’attention des utilisateurs sur le principal, sans faire mal aux yeux. Les sites visuellement encombrés sont étouffants, les utilisateurs ont alors du mal à identifier rapidement les points importants et à faire de l’ordre. Fournir suffisamment d’espace autour des groupes d’informations libère la tension. L’idée est d’optimiser la distance entre des groupes tout en réduisant celle entre les éléments d’un groupe.
www.msnbc.com L’utilisation généreuse d’espace blanc autour de chaque grand groupe rapproche les éléments liés. La présentation en compartiments et la mise en page clairsemée créent l’ordre : les informations ne luttent pas pour attirer l’attention de l’utilisateur.
10 : Présentation des éléments de la page
347
Nous savons que l’espace à l’écran est limité ; tenter de faire entrer trop d’informations sur une page a souvent un résultat plutôt négatif. Les écrans débordant de choix, de texte, de liens et de couleurs vives fatiguent les yeux, en particulier si les utilisateurs y évoluent pendant une période prolongée. Augmenter la quantité d’espace blanc sur le site implique de réaliser des compromis. Certains éléments devront peut-être être retirés ou rendus moins visibles. N’oubliez pas que le mieux est l’ennemi du bien.
www.nba.com L’utilisation superflue des traitements graphiques et l’absence d’espace blanc donnent une page très encombrée. Il est difficile de distinguer les titres du contenu car tout se mélange. Avec autant de sollicitations visuelles, où vont se rendre les utilisateurs en premier ?
348
Site Web : priorité à la simplicité
353 Le multimédia au service du public
368 S’en tenir aux conventions d’interface familières
359 Obstacles au multimédia
375 Les excès du multimédia
• S’adapter aux utilisateurs peu équipés • Concevoir en tenant compte de la vitesse de connexion du public • Fournir un indicateur simple et précis de la progression du téléchargement • Sous-estimer les connaissances techniques de vos utilisateurs • Détecter la bande passante des utilisateurs
• Baisser le volume 378 Création de vidéos pour le Web 380 Mise en pratique de la simplicité 390 Vers un design plus élégant
11 Concilier technologie et besoins des utilisateurs Alors que la technologie continue à s’améliorer et que de plus en plus d’utilisateurs possèdent des connexions haut débit, les sites Web multimédia deviennent de plus en plus fréquents. Lorsqu’ils sont bien faits, les vidéos, l’animation et le son peuvent enrichir l’expérience de l’utilisateur et enchanter le public. Mais mis en ligne de manière inappropriée, un contenu multimédia peut vite devenir décourageant et porter préjudice à votre site. Dans ce chapitre, nous traiterons de la stratégie qui vous aidera à éviter la plupart des pièges habituels et à profiter du contenu multimédia à votre avantage.
Au cours des dix années environ qui ont suivi la banalisation de l’outil Internet, ce média s’est transformé en environnement multimédia. Beaucoup d’utilisateurs non techniciens se sont familiarisés avec les liens hypertexte, le défilement du texte, le clic sur les images pour les agrandir, l’animation du texte et des images, voire l’emploi de commandes similaires à celles d’un magnétoscope pour lire le son et la vidéo. A mesure de l’amélioration des technologies multimédia, les concepteurs et développeurs Web sont de plus en plus intéressés par la manière d’enrichir les textes et les images des sites avec du son, de la vidéo et de l’animation. Cependant, le multimédia peut aussi bien être une bénédiction qu’une malédiction. Intégrés intelligemment (dans le bon contexte et correctement installés), le mouvement et le son peuvent améliorer l’utilisabilité, rendre le contenu plus divertissant et « captivant » mais aussi plus accessible. Une utilisation inconsidérée du multimédia peut par contre totalement anéantir l’expérience sensorielle, créer des interactions gênantes et dérouter les visiteurs par un désordre visuel et sonore. Dans leur enthousiasme à utiliser de nouveaux outils tendance, les concepteurs Web peuvent passer outre leur principale responsabilité : résoudre les problèmes de communication en facilitant l’accès à l’information. Retour à l’an 2000 : note de Jakob Nielsen En 2000, j’ai publié un article controversé dans Alertbox intitulé « Flash: 99 % Bad ». J’y affirmais que tant que le multimédia a sa place sur le Web, la technologie de l’animation interactive aurait tendance à dégrader l’utilisabilité au lieu de l’améliorer. Cet état de fait, selon ma thèse, était dû à trois raisons : tout d’abord, le multimédia favorisait les mauvaises conceptions en encourageant l’animation gratuite et les interfaces non standard, mais aussi les actions contrôlées par les créateurs plutôt qu’une réelle interactivité avec l’utilisateur. Deuxièmement, le multimédia déviait de la convention fondamentale d’interactivité du Web. Troisièmement, et c’est peut-être la raison la plus grave, il consommait des ressources (particulièrement du temps, de la matière grise et des efforts) qui auraient été plus utiles pour améliorer les contenus intrinsèques des sites fournissant de l’information.
352
Bien entendu, j’ai forcé le trait pour provoquer la réflexion. Flash n’était pas, et n’est toujours pas mauvais en soi, et peut même souvent être très efficace. La possibilité de créer un site Web très accueillant, présentant d’autres dimensions d’interaction, est attirante. Mais lorsque Macromedia a publié son logiciel Flash, les créateurs et concepteurs Web ont été tellement bluffés par ses possibilités qu’ils l’ont employé à tort et à travers. Depuis, Flash a évolué et, pour une large part, les concepteurs ont eux aussi évolué dans l’art de l’utiliser. Cependant, le problème de base reste le même : une utilisation irraisonnée des dernières avancées technologiques conduit souvent à un effet inverse à celui des attentes des concepteurs Web. Plutôt que d’assister les utilisateurs, il peut les empêcher de s’engager totalement. Le résultat est lourd, encombré et prend trop de temps à se charger, il sature les systèmes des utilisateurs, ne fait pas sens et finit par éloigner les visiteurs.
Site Web : priorité à la simplicité
Le multimédia au service du public L’expression la plus honteuse qui soit apparue avec l’ère des designs superflus est « Passer l’intro ».
L’expression la plus honteuse qui soit apparue avec l’ère des designs superflus est « Passer l’intro ». Criardes, surchargées, les pages d’introduction sont peu pratiques et arrogantes. Faire attendre les utilisateurs pour leur infliger des animations inutiles à télécharger et à regarder revient tout simplement à leur dire : « Nous sommes en train de vous imposer un spectacle dont nous savons pertinemment que vous ne voulez pas mais nous allons quand même le faire.» Les utilisateurs souffrent du fait que leur temps soit pris en otage. Heureusement, l’utilisation des pages d’introduction a récemment diminué. Peut-être l’effet de nouveauté s’est-il étiolé, mais il est plus probable que les sociétés aient entendu les experts en ergonomie (et leurs utilisateurs) et réservent le multimédia pour un meilleur usage. Ceci dit, notre précédente affirmation demeure encore exacte aujourd’hui. Savoir quel degré d’interactivité convient et quel outil utiliser dans les différentes situations est essentiel pour créer un site Web populaire. Nos études récentes montrent que la plupart des contenus multimédia visibles sur le Web aujourd’hui désarçonnent les utilisateurs et génèrent des réactions contraires. Plus le design est tendance, plus il risque de comporter des bogues et plus il est susceptible de causer des problèmes. S’assurer qu’il fonctionne bien requiert plus de temps et d’efforts en termes d’assurance qualité.
11 : Concilier technologie et besoins des utilisateurs
353
(Page de droite, en haut) Gateway propose des fonctions interactives qui permettent d’obtenir des gros plans de ses produits. Déplacez le rectangle orange sur les zones à zoomer. Cliquez sur le texte vert pour vous rendre directement à un élément particulier. Aucune instruction n’est nécessaire car l’interface utilisateur est simple et le modèle d’interaction fonctionne comme prévu.
www.atlantis.com Atlantis.com a réalisé un travail remarquable en intégrant du contenu multimédia sur son site Web afin de créer une design très attirant. Bien qu’il soit très visuel, le site se charge rapidement et les éléments de navigation sont relativement cohérents. La galerie vidéo est efficace car l’interaction est simple. Il suffit de sélectionner une image à gauche pour que la vidéo se lance sur la droite. Le site possède toutefois une page d’introduction ennuyeuse qui se lance à chaque fois qu’un utilisateur revient accidentellement en arrière ou entre de nouveau sur le site Web. Il existe aussi des fonctions cachées sur le site. Par exemple, vous pouvez tourner la page en cliquant sur le coin supérieur du livre. Certains risquent de ne pas le découvrir, mais ce n’est pas très important car l’essentiel de l’information est aisément accessible.
354
Site Web : priorité à la simplicité
www.gateway.com
L’affichage en 3D de la voiture est à la fois amusant et informatif. Les concepteurs se sont adaptés à un large public en proposant plusieurs possibilités de contrôler la voiture, soit en cliquant sur de gros boutons (faciles d’accès pour tous), soit en faisant glisser la souris sur l’image (plus spectaculaire, mais nécessitant un meilleur contrôle de la souris). L’onglet Photos permet de voir la voiture sans avoir à manipuler le modèle 3D. Au final, c’est une bonne mise en pratique du multimédia. Elle pourrait être encore meilleure si les utilisateurs pouvaient zoomer un peu plus et voir ainsi plus de détails, comme par exemple les commandes sur le tableau de bord. http://automobiles.honda.com
11 : Concilier technologie et besoins des utilisateurs
355
www.optibo.se De longues instructions comme celles-ci montrent que l’interaction est trop complexe. Les utilisateurs ne les liront pas. S’ils n’arrivent pas à comprendre comment fonctionne l’application en quelques secondes, ils s’en iront. Mieux vaut simplifier l’interaction que d’ajouter des instructions.
www.in-n-out.com
356
Site Web : priorité à la simplicité
www.miniusa.com La page d’introduction du site Mini USA était interactive. En déplaçant le curseur sur chaque élément graphique, un mouvement et un son étaient générés. Les utilisateurs pouvaient basculer entre les images en cliquant sur les icônes situées en bas à droite de l’écran. Sympa, non ? Pas du tout. Nos testeurs n’ont pas su comment aller au-delà de cet écran. Ils ont cliqué sur les images mais il ne se passait rien. Vous pourriez penser que les mots « Launch MiniUSA.com » sont parfaitement explicites. Or, « Launch » (Lancer) est un terme technique que certains utilisateurs ne reconnaissent pas. Un utilisateur s’est plaint : « S’agit-il d’une voiture ici ? J’essaye d’aller sur le site Web pour voir la voiture. Mais je ne peux pas y entrer. Je n’y arrive pas… Je ne vois pas à quoi servent les baguettes et les tambours. Ni même si cela a quoi que ce soit à voir avec des voitures… C’est étrange. Les abeilles, les baguettes et les tambours n’ont rien à faire avec les voitures. »
(Page de gauche, en bas) A l’origine, le site In-N-Out démarrait avec le thème musical de la société qui se répétait plusieurs fois pendant que les voitures avançaient dans la file d’attente. A l’heure où nous bouclons ce chapitre, la société a modifié la conception : désormais le thème musical n’est plus joué qu’une fois, ce qui est plus que suffisant. La société a sans doute reçu trop de plaintes concernant la conception précédente. Dans tous les cas, cette page d’introduction est inutile. On trouve un bouton Skip Intro, mais pourquoi faire perdre du temps avec cet écran ? Les sites Web qui démarrent par leur page d’accueil sont bien plus efficaces. La page d’accueil du site In-N-Out est d’ailleurs plutôt agréable et serait encore meilleure si elle proposait d’accéder au thème musical par un bouton au lieu d’obliger les utilisateurs à l’écouter via la page d’introduction.
11 : Concilier technologie et besoins des utilisateurs
357
www.pepsiworld.com
www.pepsistreetmotion.com
358
Site Web : priorité à la simplicité
(Page de gauche, en haut) Les concepteurs ne doivent pas supposer que les utilisateurs savent à quoi servent les boutons de commande audio qui sont situés dans le coin supérieur droit. Les utilisateurs de notre étude ont accidentellement cliqué sur la flèche et ont été fortement surpris lorsqu’un son s’est fait entendre. Il eut mieux valu inclure un texte qui aurait indiqué Marche, Arrêt et Pause. Si votre design utilise des icônes de l’ordre de la métaphore, il vaut mieux maximiser la ressemblance en s’assurant que les graphiques ressemblent au système référencé. Ici, ils devraient ressembler à des boutons de commande d’un magnétoscope ou autre appareil électronique, généralement carrés ou rectangulaires.
(Page de gauche, en bas) Le nouveau design du Pepsi Street Motion Tour a ajouté du texte sur les boutons de commande ; les utilisateurs risquent donc moins de commettre une erreur.
Obstacles au multimédia Le multimédia peut être instructif et engageant d’une manière qui est impossible à obtenir avec des pages HTML statiques. Le public apprécie le son sur les sites musicaux, les configurateurs sur les sites automobiles, les vidéos sur les sites de divertissement et les visites virtuelles sur les sites des agences immobilières ou des hôtels. Les sites musicaux ou de films en bénéficient particulièrement, car les utilisateurs peuvent tester des échantillons de leurs produits en ligne. Afin de l’utiliser à bon escient, vous devez prendre en compte les équipements et les besoins de vos utilisateurs.
S’adapter aux utilisateurs peu équipés Dans les études menées sur le terrain, lorsque nous rendions visite aux utilisateurs à leurs domiciles, sur leurs lieux de travail ou dans des environnements scolaires, nous avons découvert que beaucoup travaillaient sur du matériel bricolé ou donné, qui fonctionnait lentement et n’était pas équipé des composants et applications nécessaires pour tirer avantage des fonctionnalités avancées. Plusieurs sites conçus pour des enfants ou des adolescents proposaient par exemple des fonctionnalités multimédia ou interactives mais, les jeunes utilisant majoritairement des ordinateurs obsolètes, ils ne bénéficiaient pas de ces fonctionnalités. Vous devez donc proposer un contenu alternatif à vos utilisateurs n’ayant pas accès au multimédia. De même, utilisez le son pour compléter votre site, et non comme un moyen principal pour délivrer du contenu. Dans la plupart des domiciles d’adolescents que nous avons vus, les jeunes ne possédaient pas de haut-parleurs ou les avaient désactivés pour écouter la radio. Si votre site utilise le son, proposez également une version texte pour que les étudiants puissent poursuivre sans dépendre de cet aspect.
Astuce : garantir l’accessibilité Les incompatibilités des équipements ne sont pas les seules causes de frustration dans le domaine du multimédia. N’oubliez pas que certains de vos utilisateurs peuvent avoir des handicaps dont vous devez tenir compte. L’accessibilité est toujours souhaitable car elle permet d’étendre votre marché ; pour certains sites administratifs ou d’enseignement, l’accessibilité est également une obligation.
Pour ce qui concerne les utilisateurs souffrant d’un handicap auditif, vous devez proposer une alternative textuelle au son et des sous-titres optionnels pour la vidéo. Les utilisateurs malvoyants pourront ainsi utiliser votre site si vous proposez un outil de lecture du contenu.
11 : Concilier technologie et besoins des utilisateurs
359
Sites pour enfants : vive le concret Les adversaires de l’accessibilité objectent parfois que nous ne sommes que de vieux schnocks qui ne comprennent pas que les jeunes aiment avant tout les sites visuellement chargés et à la mode. Admettons, nous avons respectivement la quarantaine et la trentaine, et nos goûts personnels ne nous portent pas naturellement vers le dernier artiste de rap à la mode. Mais cela n’a rien à voir. Les goûts personnels ne jouent aucun rôle en matière d’utilisabilité. Nous avons mené des recherches utilisateur sur des publics ciblés et avons établi ce qui fonctionne de manière empirique. C’est ainsi que nous en tirons nos instructions : en observant de vrais utilisateurs visitant de vrais sites. Nous avons testé un grand nombre de sites pour les jeunes utilisateurs, comprenant des enfants de 6 à 12 ans qui aiment bien les sites plus flashy. Le problème survient lorsque un site de B2B vend, disons, des palettes en bois et utilise pour cela une conception plus adaptée aux enfants qu’à des gestionnaires expérimentés d’entrepôts. Dans nos tests auprès des adolescents, nous avons découvert qu’ils apprécient les environnements graphiques sympas et portent une attention plus soutenue à la signature visuelle d’un site que ne le font les utilisateurs adultes. Pourtant, les sites que nos ados ont le mieux notés en termes de satisfaction subjective étaient ceux ayant un design relativement net et modeste. Ils ont systématiquement mal noté les sites outrageusement tapageurs et donc difficiles d’utilisation. Les adolescents adorent faire des choses sur le Web et les sites qui sont trop lents ou trop branchés l’empêchent. C’est également une erreur de penser que les adolescents connaissent la technologie et qu’ils peuvent surmonter tous leurs problèmes informatiques. Au contraire, nous avons souvent vu des adolescents
360
bloqués par les mêmes types d’obstacles multimédia que les utilisateurs adultes. Voici un florilège des remarques d’utilisateurs âgés de 14 à 17 ans recueillies lors de notre étude sur les adolescents : « Il faut le télécharger. Je vais aller ailleurs parce que je n’ai pas Acrobat Reader sur mon ordinateu.r » « Pourquoi me faut-il Acrobat Reader pour voir cette page ? Tous les programmes Adobe sont difficiles à avoir et très chers. La plupart des gens qui vont venir sur ce site ne l’auront pas. » « Pour certains de ces jeux, vous êtes obligés d’avoir Shockwave. Mon père ne me laisse rien charger du tout… Il faut télécharger Shockwave, surtout si vous voulez télécharger de la musique. Il faut acheter Shockwave pour avoir tout le reste. » « Ca m’énerve parfois lorsque les choses mettent trop longtemps à se charger. Je hais le lecteur Shockwave. C’est ennuyeux. Cela prend un temps infini à charger. Certains [jeux] ont Shockwave, d’autres non. Il vaut mieux trouver ceux qui n’en ont pas besoin et ça ira plus vite. » « Je pense que c’est un jeu et que l’on doit charger le lecteur Shockwave… Je fais autre chose en attendant parce que je ne veux pas rester devant à attendre que ça charge. C’est super ennuyeux. » Ainsi que le montre cette dernière remarque, les adolescents se plaignent souvent des sites qu’ils trouvent ennuyeux. Etre ennuyeux, c’est le pire si vous voulez attirer des jeunes. C’est un stéréotype que nos recherches ont confirmé : les adolescents ne restent pas concentrés longtemps et veulent être stimulés. C’est aussi pour cela qu’ils quittent les sites difficiles à appréhender. Souvenez-vous que le multimédia peut être ennuyeux s’il n’accroche pas les utilisateurs.
Site Web : priorité à la simplicité
Optimisez les tailles des fichiers et réduisez les temps de chargement. Même si vous avez conçu une interface efficace et intuitive, un temps de réponse trop long peut ruiner votre projet.
Concevoir en tenant compte de la vitesse de connexion du public Les statistiques montrent que près de la moitié des utilisateurs du Web possèdent toujours un accès Internet bas débit, surtout à la maison. Même si cette proportion se réduit avec les personnes qui s’équipent de connexions haut débit, ce fait est à garder à l’esprit. Les connexions peuvent être lentes, même en haut débit, par exemple sur les systèmes sans fil ou dans les institutions éducatives, où les temps de réponse peuvent être lents, par exemple à cause du partage de la bande passante, des serveurs et des filtres. De nombreux fichiers multimédia sont volumineux et demandent longtemps à se télécharger. Même équipés de connexions haut débit, certains participants à notre étude se sont plaints des temps de connexion trop lents et ont souvent abandonné un site ou une vidéo car son temps de chargement était trop important. Conclusion : optimisez les tailles des fichiers et réduisez les temps de chargement. Même si vous avez conçu une interface efficace et intuitive, un temps de réponse trop long peut ruiner votre projet.
Fournir un indicateur simple et précis de la progression du téléchargement Vous pouvez souvent limiter l’impatience du public en proposant simplement un indicateur de progression, qui offre un retour visuel. Un indicateur bien conçu réduit considérablement le ressenti du temps de chargement car les utilisateurs savent à quoi s’attendre. Il doit rester simple. Il est aussi plus utile de voir le pourcentage de données transférées (par exemple « 50 % chargés »), les utilisateurs pourront ainsi estimer le temps nécessaire à la fin de l’opération. Les utilisateurs impatients quittent les sites qui n’apportent pas d’informations adéquates, supposant dans ce cas que le site est en panne car la page semble gelée. S’ils avaient su que le site était en chargement, ils auraient pu patienter encore un peu.
11 : Concilier technologie et besoins des utilisateurs
361
www.audi.com Le site Audi offre un compteur adéquat qui fonctionne rapidement et indique aux utilisateurs le pourcentage de données chargées.
L’information contenue dans cette boîte de dialogue est vague et il n’y a ni animation ni indicateur de progression permettant d’informer l’utilisateur que le système fonctionne. Il est impossible de dire le temps que le processus va prendre ou si les images se chargent bien.
www.ebay.com
362
Site Web : priorité à la simplicité
www.travelocity.com Travelocity ne possède pas d’indicateur de progression. Il est difficile de dire combien de temps prendra la procédure, mais les étoiles scintillantes apportent un espoir à l’utilisateur sur le bon fonctionnement du site. Il ne s’agit pas d’un problème majeur si la procédure est rapide. Cependant, pour des temps d’attente plus importants, un indicateur efficace peut permettre de minimiser le temps ressenti et les utilisateurs seront plus enclins à attendre.
11 : Concilier technologie et besoins des utilisateurs
363
Prenez garde à votre langage
Sous-estimer les connaissances techniques de vos utilisateurs
Nos études ont révélé que les utilisateurs sont déconcertés par les termes techniques tels que bande passante, modem 56K, modem par câble, HTML et plug-in. Les informaticiens ou les concepteurs Web peuvent quant à eux considérer ces termes comme tout à fait courants. Or, ce n’est pas le cas. Evitez généralement d’utiliser des termes techniques dans votre interface (sauf si vous vous adressez à des professionnels de l’informatique) ou du jargon (sauf si vous ciblez des concepteurs professionnels). Evitez aussi les expressions marketing telles que liste d’adhésion ou e-mail de permission, et plus généralement toute autre terminologie employée par votre équipe mais pas par le grand public.
Les utilisateurs ont bien plus d’appréhension sur la technologie que vous ne pourriez le croire. La plupart craignent de télécharger des plug-in ou de cliquer sur des éléments inconnus par peur des virus, mais aussi parce qu’ils n’aiment pas les temps de téléchargement trop longs.
Des boîtes de dialogue trompeuses comme celle-ci ne permettent pas de distinguer clairement entre un message de sécurité légitime et un envoi peu scrupuleux. Compte tenu de la crainte croissante des virus, il n’est pas surprenant que les personnes aient de plus en plus peur de télécharger quoi que ce soit sur le Web. Avez-vous noté la subtilité du mot « advertisement » (publicité) en bas à droite ? La plupart des utilisateurs ne l’ont pas vu.
364
Ne comptez pas sur eux pour télécharger de nouveaux plug-in. Les adultes ont peur des virus, des logiciels espion et du spam. Certaines écoles bloquent l’accès au contenu multimédia ou au téléchargement de plug-in pour les étudiants. Les parents mettent en garde leurs enfants et leur interdisent tout téléchargement sur l’ordinateur familial, par peur de la contamination. Certains utilisateurs supposent même que le téléchargement des plug-ins est payant, même quand ce n’est pas le cas. S’il y a une raison valable d’exiger un plug-in ou un programme spécifique, choisissez-en un qui soit commun à la plupart des machines. Il faut du temps pour mettre à niveau un système avec les dernières versions des logiciels. Choisissez donc une version antérieure afin de capter un public plus large. La meilleure solution est de fournir un contenu alternatif, sans multimédia, aux personnes n’ayant pas les bons plug-ins.
(Page de droite, en bas) Le public ne comprend généralement pas ce qu’un message comme celui-ci signifie. Lorsque l’utilisateur clique sur Lecture dans la fenêtre initiale, il s’attend à ce que la vidéo se mette en route automatiquement et non à devoir passer par des étapes supplémentaires. Pour éviter ce genre de messages, il est préférable d’utiliser des formats de fichiers utilisant une ou deux versions antérieures d’un lecteur média populaire.
Site Web : priorité à la simplicité
http://automobiles.honda.com Le public est dérouté par des messages de sécurité comme celui-ci. Ils sont inquiets à l’idée d’installer quoi que ce soit de nuisible mais ne sont pas certains que l’avertissement les concerne. Certains vont l’installer dans l’espoir que rien de mauvais n’arrive, d’autres ne prendront pas le risque et abandonneront l’opération.
www.mtv.com
11 : Concilier technologie et besoins des utilisateurs
365
Détecter la bande passante des utilisateurs Ne demandez pas à vos utilisateurs de mentionner leur bande passante, la plupart ne savent même pas ce que cela signifie ni comment se renseigner à ce sujet, ou bien ils utilisent un ordinateur emprunté et ne connaissent pas la bande passante du système. Si on leur demande de sélectionner le lecteur ou la vitesse de bande passante appropriée pour le média qu’ils veulent lire, beaucoup ne donnent qu’une supposition.
La plupart des utilisateurs ne connaissant pas la différence entre QuickTime et Windows Media Player. Pire encore, ce site utilise des abréviations, qui rendent ces termes encore plus obscurs. Il serait préférable d’enlever ce choix et de laisser les utilisateurs découvrir la vidéo sans avoir à sélectionner de mystérieux paramètres.
Vous pouvez éviter de faire deviner ces paramètres en mesurant la vitesse de connexion de l’utilisateur en arrièreplan et en lui attribuant une valeur de cookie adéquate. Proposez alors aux utilisateurs ayant des connexions bas débit des fonctionnalités calibrées spécifiquement pour eux. Ceux qui profitent de temps de chargement plus rapides s’en trouveront encore avantagés. Malheureusement, la détection automatique de la bande passante est toujours ardue avec les technologies actuelles. Dans la plupart des cas, vous serez plus avisé de proposer un dénominateur commun plus modeste. Cependant, dans deux situations (lorsque les délais de chargement posent un problème majeur pour les utilisateurs bas débit ou si vous escomptez un bénéfice substantiel d’une version « lourde » de l’application pour des utilisateurs haut débit), cela vaut le coup.
www.bellagio.com
366
Site Web : priorité à la simplicité
Les options vidéo de cette page sont écrasantes et trop techniques pour un utilisateur moyen, qui ne sait pas ce que signifient 480p, 720p ou 1080p ni comment utiliser les chiffres associés. Le « p » représente une vidéo à balayage progressif, un système trop technique pour les utilisateurs. L’indicateur de taille du fichier peut donner un indice, mais n’indique pas le format qui fonctionnera le mieux avec un système donné.
www.apple.com
Les utilisateurs s’attendent à ce que les vidéos démarrent sans qu’ils aient à choisir entre des possibilités obscures pour eux. Si vous proposez différentes tailles de vidéo, mieux vaut les identifier par des mots simples comme « grosse » ou « petite » qui se référent à des caractéristiques concrètes. De même, il peut être utile d’indiquer aux utilisateurs que la version la plus légère se téléchargera le plus rapidement.
www.miniusa.com Cette page d’introduction rappelle aux utilisateurs qu’ils doivent posséder une résolution d’écran spécifique et désactiver leurs bloqueurs de pop-up pour pouvoir accéder au site. Ce système est problématique pour plusieurs raisons. Premièrement, la plupart des utilisateurs ne remarqueront pas le message (vu que les instructions sont rédigées en petits caractères et difficiles à lire). Dans le cas où ils le remarqueraient, ils ne comprendront probablement pas sa signification. De plus, beaucoup ne savent pas modifier leurs réglages. Enfin, une majorité de personnes ont installé des bloqueurs de pop-ups et n’auront même pas la possibilité d’accéder au site. Il serait plus efficace de proposer une conception flexible qui fonctionne avec la plupart des réglages habituels.
11 : Concilier technologie et besoins des utilisateurs
367
Les concepteurs ont des explications différentes sur la raison de l’échec d’un élément sur le système de l’utilisateur. Au final, peu importe la raison. Vous ne devez pas défendre votre interface. Vous devez la corriger.
S’en tenir aux conventions d’interface familières Nous l’avons vu, le modèle mental des utilisateurs sur le fonctionnement du Web est défini en fonction de leurs précédentes expériences. Lorsqu’ils sont confrontés à des éléments qui ne fonctionnent pas comme prévu, ils doivent deviner pourquoi. Ainsi, si les utilisateurs cliquent sur un bouton Lecture pour démarrer une vidéo et que rien ne se passe, ils peuvent en conclure que le site ne fonctionne pas ou que le bouton Lecture ne fonctionne pas non plus sur les autres sites. Le concepteur du site peut lui avoir une explication différente sur la raison de l’échec de la vidéo sur le système de l’utilisateur : la connexion Internet est trop lente, le lecteur est incompatible, l’utilisateur doit être plus patient. Au final, peu importe la raison.Vous ne devez pas défendre votre interface.Vous devez la corriger.
Ce site Web d’une agence immobilière propose une « visite virtuelle » pour présenter ses propriétés. Malheureusement, de nombreux utilisateurs ne savent pas qu’il faut cliquer sur le petit symbole situé sur la porte d’entrée et ne vont donc jamais « entrer » dans la maison pour voir les diverses photos de son intérieur. Bien sûr, vous pouvez faire un panoramique sur les photos et voir d’autres pièces, mais c’est très lent et les utilisateurs risquent rapidement de se perdre dans la maison.
www.coldwellbanker.com
368
Site Web : priorité à la simplicité
Astuce : sus aux fenêtres contextuelles Parce que les utilisateurs ont eu des expériences négatives avec les fenêtres contextuelles, les bloqueurs de pop-ups sont de plus en plus populaires et ne sont en fait qu’un composant standard d’Internet Explorer, le navigateur le plus communément utilisé. Chaque fois que vous utilisez autre chose qu’une page HTML pure, nous vous conseillons fortement de la vérifier dans des navigateurs où ce mécanisme de défense est activé. Utilisez la dernière version d’IE, de Firefox et de tout autre navigateur populaire, mais aussi un navigateur amélioré par la barre d’outils de Google et tout autre logiciel complémentaire populaire.
Ne laissez pas la technologie gâcher l’expérience de vos utilisateurs. Les concepteurs à la pointe de la technique sont souvent tentés de créer des sites plus sophistiqués et plus interactifs en proposant des conceptions et des interactions inhabituelles. Ironiquement, les sites qui font appel à une technologie de pointe pour attirer le public courent souvent le risque de les repousser lorsque la technologie ne fonctionne pas parfaitement. Si vous ressentez le besoin de démontrer votre talent en créant quelque chose de révolutionnaire, interrogez-vous : « Si les consommateurs préfèrent des outils simples, pourquoi ne pas les utiliser au maximum de leurs capacités au lieu d’en imposer de nouveaux ? ». Les gens opposent une certaine résistance à l’apprentissage de nouvelles interactions car ils n’aiment pas avoir à faire plus d’efforts que nécessaire. Tenez-vous en à ce que savent déjà les utilisateurs et à ce avec quoi ils sont à l’aise. Plus la technologie utilisée est avancée, moins les conventions d’interaction seront familières aux utilisateurs moyens et plus vous devrez simplifier la conception.
Cette liste de biens immobiliers constitue une manière plus simple de montrer aux utilisateurs des photos d’une maison : présentez des miniatures et laissez les gens cliquer sur celles qu’ils veulent agrandir. Il aurait mieux valu montrer de plus grandes photos qui auraient permis aux utilisateurs de voir plus de détails, mais au moins cette interface respecte les conventions d’interaction avec les photos sur le Web. Souligner les intitulés de chaque miniature améliore l’affordance perçue du clic (voir le Chapitre 6 pour en savoir plus sur cette notion). www.realtor.com
11 : Concilier technologie et besoins des utilisateurs
369
www.atlantis.com Page d’accueil d’Atlantis.com : le panneau de navigation global n’est pas apparent. Il est masqué sous le terme vague de Navigateur et il est remisé dans le coin supérieur gauche de l’écran. Une fois que l’on clique dessus, le menu de navigation se déroule littéralement, ce qui est intelligent et correspond bien au thème du site. Cependant, pour un élément aussi important qu’un menu de navigation, mieux vaut s’en tenir à un standard que les personnes connaissent. Sinon, elles risquent de ne même pas le voir.
www.hummer.com
www.miniusa.com
Voici des exemples d’un bon design de barres de défilement. Elles ressemblent vraiment à des barres de défilement, les utilisateurs les reconnaissent alors aisément.
370
Site Web : priorité à la simplicité
Les utilisateurs de la carte Haribon des Philippines n’ont pas remarqué la barre de défilement car elle ressemblait à un indicateur Nord/Sud. Nous avons remarqué plusieurs éléments non standard dans ce design : la barre de défilement était en dehors de la zone concernée, les flèches haut et bas ressemblaient à un pointeur de boussole sur la carte et il n’y avait pas d’indicateur de défilement.
www.haribon.org.ph
Une utilisatrice n’a pas pu créer son personnage virtuel car elle n’a pas réalisé que les flèches triangulaires situées sur les côtés de chaque élément encadré servaient au défilement.
www.cokemusic.com
Astuce : les barres de défilement doivent être standard Les gens ignorent souvent les barres de défilement fantaisistes dont le design s’éloigne trop de la norme. Les utilisateurs doivent les reconnaître et les comprendre. Elles doivent avoir des flèches haut et bas et un indicateur de défilement. Proposez des barres suffisamment grosses pour être contrôlées facilement. Les petites barres de défilement ne permettent pas de trouver et de cibler aisément les zones de clic. Les barres traditionnelles sont plus fonctionnelles car elles sont plus familières.
11 : Concilier technologie et besoins des utilisateurs
371
Lorsque vous modifiez un composant d’interface utilisateur standard, envisagez ses implications en termes de simplicité d’utilisation car les utilisateurs peuvent éprouver des difficultés à interagir avec un design non standard s’il n’est pas vraiment facile ni intuitive. Etre le premier à proposer un design inhabituel vous fait courir le risque que les utilisateurs ne vous comprennent pas. Plus vous vous éloignez de la norme, plus vous avez de chance de semer la confusion, voire pire, de perdre votre public. Si votre design ralentit les utilisateurs, leur fait commettre des erreurs, vous les perdez. Si vous devez faire quelque chose de non conventionnel, vos raisons doivent être excellentes et vous devez faire tester votre système par des utilisateurs pour être sûr qu’il soit compris de tous.
www.bk.com Un usage excessif du multimédia créé plus d’inconvénients que d’avantages. Le site de Burger King utilise des animations pour présenter les menus. Les utilisateurs doivent attraper des cibles mobiles qui apparaissent et disparaissent pour accéder aux informations détaillées. Cette interaction déçoit les utilisateurs car elle requiert trop de précision et d’efforts. Un utilisateur a signalé : « Quelque chose est bancal… Ca vole partout et on ne peut pas les attraper avec le curseur ou, si on y arrive, ça bouge. C’est fatiguant. Je préfère les avoir tous en haut et pouvoir cliquer dessus. »
372
Site Web : priorité à la simplicité
www.bk.com Depuis que nous avons testé l’image de la figure précédente, le site de Burger King a été modifié pour être en conformité avec les attentes des utilisateurs. Le site présente désormais ses menus dans un style de navigation plus traditionnel. Pour l’utilisateur, c’est une amélioration, il est plus facile de cliquer sur des icônes statiques que sur des éléments mobiles.
11 : Concilier technologie et besoins des utilisateurs
373
www.nestle.com Voici une frise chronologique de la société Nestlé. Cette représentation ésotérique d’une chronologie a dérouté les utilisateurs. Ils ne savaient pas ce que signifiait la représentation graphique ni comment interagir avec elle. Même si ces courbes temporelles fantaisistes pourraient paraître attirantes, elles sont souvent gênantes et limitent l’action des utilisateurs. Ceux-ci peuvent obtenir les mêmes informations plus rapidement sur une simple page HTML. Parcourir une seule page est plus facile que d’avoir à déplacer le curseur sur chaque partie de l’image.
www.nestle.com Après notre étude, le site de Nestlé a remplacé la frise chronologique interactive par celle-ci. Cette version est plus facile à utiliser. Nestlé a fait le bon choix en privilégiant la fonctionnalité par rapport à l’esthétique.
374
Site Web : priorité à la simplicité
Les excès du multimédia Utilisez le multimédia avec raison, et seulement lorsque cela apporte une valeur substantielle à votre site. Créer du contenu multimédia est bien plus coûteux et chronophage que de créer des illustrations statiques. Si vous hésitez entre les deux, optez pour le format le plus économe en temps et le plus efficace, qui illustrera efficacement vos idées. Dans les études menées auprès des adolescents, nous avons constaté qu’ils étaient particulièrement impressionnés par les sites Web qui présentaient des vidéos pour leur donner de meilleures perspectives de problèmes complexes. ChannelOne.com proposait des vidéos de démonstration, que les adolescents ont apprécié car ce format facilitait la visualisation des étapes et leur évitait de lire les instructions. Ainsi, le site de vêtements Wetseal.com présentait son programme de « stylage » dans une vidéo. Les adolescentes ont apprécié qu’une personne réelle leur donne un avis car cela apportait au programme une touche personnelle. « [La vidéo] est plutôt sympa », a indiqué une adolescente de 15 ans. « J’aime bien la section d’explication et les informations qui y sont fournies.» Les visites virtuelles sur le site de la Maison Blanche ont piqué la curiosité des utilisateurs. Les vidéos leur ont permis de voir cette institution comme s’ils la traversaient de long en large, leur donnant ainsi une idée plus réaliste du décor que ne le feraient des photos. Nous pourrions poursuivre encore et encore, mais vous avez saisi l’idée.
Astuce : médias riches ou médias pauvres ? Les niveaux d’interaction avancent le long d’un parcours continu. Choisir entre une technologie riche et un développement en HTML pur n’est pas toujours simple. La meilleure solution dépend du public ciblé et du problème de communication que vous résolvez. S’approcher aussi près que possible des connaissances, des besoins et,
si possible, de la technologie de votre public vous aidera dans vos choix. Le multimédia améliore l’expérience des utilisateurs dans certains cas mais les médias dits pauvres vous seront plus rentables ; les conceptions les plus simples obligent les utilisateurs à se concentrer sur la transaction commerciale.
11 : Concilier technologie et besoins des utilisateurs
375
www.whitehouse.gov Une visite virtuelle de la Maison Blanche a plu à de nombreux utilisateurs. Notez que contrairement à la visite du site de l’agence immobilière présenté plus tôt dans ce chapitre, celle-ci ne requiert pas des utilisateurs qu’ils réfléchissent pour savoir comment se déplacer entre les pièces ou faire un panoramique sur les points de vue. Vous pouvez simplement rester tranquille et laisser le guide vous décrire les éléments intéressants sur lesquels zoome automatiquement la caméra. Note : avec un guide moins célèbre, vous ne pourriez pas vous permettre une vidéo de sept minutes sur votre site.
376
Site Web : priorité à la simplicité
Baisser le volume Réservez les effets qui résonnent et carillonnent aux enfants. Le public peut apprécier quelques éléments amusants, mais une fois la nouveauté disparue, il ne supporte plus d’être interrompu.
Comment on coupe ce truc ? La plupart des utilisateurs ne veulent pas entendre continuellement de la musique en arrière-plan. Donnez-leur un moyen simple et évident de couper le son. Ne vous reposez pas sur les commandes des systèmes d’exploitation ; la plupart des adolescents et des adultes ne savent pas où elles se trouvent. Au lieu de proposer des commandes fantaisie, pensez à intituler les boutons déclencher ou éteindre la musique et des curseurs standard pour le volume.
Sons et animations peuvent être très efficaces pour apporter des informations aux utilisateurs et illustrer des concepts complexes. Ainsi, les sons peuvent être efficacement employés pour confirmer des choix ou signaler une erreur. Une animation peut aider les utilisateurs à visualiser des objets en trois dimensions. Les sons et animations ne servent souvent qu’à attirer l’attention et cela est parfois approprié, comme par exemple pour souligner un titre d’information ou un élément devant être immédiatement traité par l’utilisateur. Cependant, un site rempli d’éléments clignotants ou mobiles fatigue vite l’utilisateur, en l’empêchant de se concentrer sur ses tâches. Trop d’effets sonores, surtout s’ils sont répétitifs et joués de manière inattendue, sont à la fois distrayants et irritants. Les sons qui résonnent et carillonnent ont beaucoup plu aux jeunes enfants lorsque nous avons testé les sites Web avec eux, mais les adolescents et les adultes les ont trouvés ennuyeux. Ils ont perdu patience à cause d’effets intrusifs ou persistants. Le public peut aimer un effet fantaisiste, mais une fois que la nouveauté à disparu, il ne supporte plus d’être interrompu. Evitez le système de lancement du son lors du survol de la souris. Il vaut mieux donner le contrôle aux utilisateurs sur la lecture du son ou de la vidéo. Le son est dérangeant dans un environnement de travail (surtout si un utilisateur veut rester discret sur son utilisation du Web). En outre, les adolescents se plaignent que le son sur les sites Web entre en conflit avec d’autres musiques ou médias qu’ils écoutent. Des sons et animations apparus brusquement sont gênants pour les voisins de bureau. Si votre site propose du son, soyez sûr qu’il démarre doucement et augmente graduellement, et proposez un moyen de l’ajuster. Nous avons vu des utilisateurs sursauter sur leurs sièges et se boucher les oreilles.
11 : Concilier technologie et besoins des utilisateurs
377
Création de vidéos pour le Web Les experts contribuent beaucoup à la « convergence » des médias et au fait que le public utilise de plus en plus les ordinateurs comme des terminaux multimédia. On constate toujours des différences significatives entre les médias traditionnels et le Web, la plus importante étant que le Web est interactif et que les utilisateurs veulent avoir les commandes et se déplacer. Vous devez produire et proposer des vidéos calibrées pour un usage en ligne. Les utilisateurs n’aiment pas rester inactifs devant un long clip vidéo sur le Web, proposez donc des segments plus petits et plus signifiants. Les vidéos créées pour la télévision sont généralement trop longues et contiennent trop d’éléments distrayants pour les petits écrans d’ordinateur. Les utilisateurs ne restent pas assis de manière passive devant leurs ordinateurs, comme ils le feraient devant la télévision ; ils veulent cliquer sur des éléments et se retrouver aux commandes. La plupart des clips audio et vidéo doivent avoir une durée inférieure à la minute ; très rarement, leur durée pourra dépasser cinq minutes. Les données de notre étude de suivi oculaire montrent que l’attention des utilisateurs est distraite par d’autres éléments après 24 petites secondes, surtout si le sujet est ennuyeux. Ainsi, sur un site d’actualités, les yeux des utilisateurs se fixent sur les nouvelles pendant un temps très court, puis se promènent vers des sujets quelconques en arrière-plan. L’attention des utilisateurs s’est même éloignée de la vidéo pour aller vers des gros titres ou des options.
Astuce : à quel moment faire la coupure publicitaire Si vos vidéos incluent des coupures publicitaires, mieux vaut les diffuser après le clip principal qu’avant. Lorsque les publicités sont placées avant le clip principal, les utilisateurs se demandent s’ils ont sélectionné le mauvais lien ou si le site fonctionne. Si vous devez diffuser la publicité avant, mentionnez-le clairement, faute de quoi les utilisateurs risqueraient de fermer la fenêtre avant d’en avoir vu le contenu réel.
378
Site Web : priorité à la simplicité
www.cnn.com Diagramme de suivi oculaire d’un utilisateur qui regarde un clip vidéo sur CNN. Le rouge désigne les parties de l’écran les plus regardées ; le jaune et le bleu indiquent les zones les moins regardées. Même si l’utilisateur n’a consulté ce clip vidéo que pendant 24 secondes, son attention a vite quitté le présentateur pour regarder d’autres parties à l’écran.
11 : Concilier technologie et besoins des utilisateurs
379
Mise en pratique de la simplicité Tout au long de cet ouvrage, nous avons fait l’apologie de la simplicité mais la mise en pratique de cette simplicité n’est pas simple ! On crée facilement un design maladroit en ajoutant des couches de navigation ou de fonctionnalités les unes au-dessus des autres ; il est bien plus difficile de créer des designs simples et gracieux. Dépouiller un site, en lui conservant son élégance et ses fonctionnalités, nécessite du courage et de la discipline. Prenons la décoration d’intérieur, par exemple. Pourquoi certaines pièces sont-elles plus accueillantes que d’autres ? Un décorateur amateur pourrait amonceler dans une salle à manger une foultitude de styles d’ameublement, de motifs et de textures dans l’espoir d’éblouir. Au contraire, un décorateur expérimenté sélectionnera avec soin les objets qui répondent aux attentes de ses clients, en éliminant sans pitié ceux qui ne répondent pas à un but précis. Si un élément ne constitue pas un complément fondamental, il diminue l’impact du décor.
www.nestle.com L’animation de ce site gêne le contenu. L’homme qui tombe, dans le coin supérieur gauche, distrait l’utilisateur du contenu qu’il est venu trouver sur le site. Un utilisateur a indiqué : « J’aime bien ces icônes mais là, c’est un peu trop… On en a vite assez de les voir bouger tout le temps. Les images et les graphiques, c’est bien pendant un moment mais après, vous voulez avancer, sans être gêné par le type qui tombe. »
380
Site Web : priorité à la simplicité
Avant d’ajouter un élément conceptuel à votre site, interrogez-vous : cet élément simplifie-t-il la tâche de l’utilisateur ? Apporte-t-il une valeur ajoutée ? Si la réponse est « non », éliminez-le.
Il en va de même pour les sites Web. Les bons concepteurs exploitent au maximum un espace limité (à la fois en taille d’écran et en bande passante) en dépouillant l’interaction. Les effets, graphiques et photographies gratuits annulent l’effet des éléments importants que vous souhaitez mettre en avant. Lorsque tout clignote pour attirer votre attention, vous ne retenez rien. Portez un regard critique à votre site.Voyez si vous débusquez des éléments superflus qui l’encombrent. Faites tout ce que vous pouvez pour simplifier les interactions.Y a-t-il un élément mobile ou tendance qui soit plus difficile à utiliser qu’un élément statique ? Les icônes, photographies, graphiques ou animations doivent servir un objectif et communiquer un message. Avant d’ajouter des éléments conceptuels à votre site, interrogez-vous : ■
cet élément simplifie-t-il la tâche de l’utilisateur ?
■
cet élément apporte-t-il une valeur ajoutée ?
Si la réponse est « non », éliminez-le.
www.bms.com Qu’a à voir cette photographie de tournesol avec la responsabilité de l’entreprise (sans parler de sa taille et de son temps de téléchargement) ? Cette photographie inutile occupe un espace essentiel à l’écran. Les utilisateurs sont prêts à patienter un petit peu pour recueillir des informations utiles, mais ils refusent d’attendre pour quelque chose d’inutile. Utilisez les photos pour argumenter le contenu, pas pour décorer la page.
11 : Concilier technologie et besoins des utilisateurs
381
Regardez les deux versions du menu de navigation sur le site Web de Tiffany & Co. Dans la première conception, le menu translucide s’ouvre en haut de l’image, rendant sa lecture très difficile. La seconde s’améliore car le texte est plus sombre et n’entre pas en concurrence avec l’arrièreplan. Même si la première conception est élégante, elle est trop difficile à lire et gêne les consommateurs. La seconde fait un compromis entre esthétique et fonctionnalité. Le menu est plus lisible, tout en conservant de son élégance.
www.tiffany.com Une ancienne version du site Web Tiffany & Co. Le site employait des menus transparents, au graphisme intéressant mais difficile à lire.
382
Site Web : priorité à la simplicité
www.tiffany.com Depuis notre étude, Tiffany.com a amélioré la conception du menu de navigation, sans compromettre l’esthétique.
Améliorer votre site : vous y viendrez tôt ou tard Cet ouvrage contient bien des exemples de conceptions défaillantes lors de nos tests utilisateur et qui ont été depuis remplacés par de meilleurs systèmes. Il est à espérer que, d’ici à ce que vous lisiez ce livre, beaucoup d’autres sites auront appliqué nos conseils gratuits. Parfois, en voyant la conception revue et corrigée, vous vous direz peut-être : « c’est bien sûr le chemin à suivre » et ignorerez l’utilisabilité qui se cache dessous. Cependant, créer une bonne conception ne va pas de soi, comme le montre le fait que même les sociétés riches, avec des budgets Web importants, peuvent proposer de mauvais sites qui lèsent leur activité pendant de nombreuses années. Dans une large mesure, l’utilisabilité améliore l’expérience, les avancées sont donc évidentes.
L’un des points principaux que nous espérons vous transmettre est que les sites faciles à utiliser n’apparaissent pas tous seuls. Vous devez employer une méthodologie et tester les choix de conception auprès de vos utilisateurs cibles. Nous avons découvert tous ces problèmes à travers des études rapides et peu onéreuses. Chaque société aurait pu en faire autant de son propre chef, sans avoir à perdre des opportunités commerciales ni subir les réclamations des consommateurs. Les défauts d’utilisabilité referont surface tôt ou tard ; le problème est de les découvrir au début de votre projet, avant d’avoir gâché du temps et de l’argent à développer une mauvaise conception. Le plus tôt est le mieux… et aussi le plus économique.
11 : Concilier technologie et besoins des utilisateurs
383
Trois conseils : simplifier, simplifier, simplifier Vous devez n’apporter que les fonctions qui aideront les utilisateurs à simplifier leurs tâches. Lorsque les interactions sont trop complexes, beaucoup ne trouvent pas les informations qu’ils cherchent et ne peuvent pas tirer parti du site. Les interactions complexes augmentent à la fois le temps d’apprentissage et le sentiment de frustration des utilisateurs. Mieux vaut disposer de quelques fonctions vraiment utiles que de beaucoup d’éléments inutiles.
Etudions maintenant deux approches de la conception cartographique, la première étant interactive et l’autre non. La carte interactive indique les emplacements des restaurants dans la ville. Déplacer le curseur sur chaque balle orange fait apparaître le nom du restaurant. Cliquer dessus fait apparaître les détails. Simple, non ? En fait, non. Si vous n’êtes pas coutumier des restaurants de cette ville, il faudrait cliquer sur chaque balle afin d’en savoir plus. Cliquer sur une balle, sortir, cliquer sur une autre, pfff ! La seconde carte est plus facile à utiliser. Elle montre des informations sur chaque établissement sans obliger l’utilisateur à faire trop d’efforts. Elle apporte des informations utiles en un coup d’œil sans qu’il soit nécessaire de cliquer. Même si la première carte semblait plus claire, elle n’est ni aussi fonctionnelle ni aussi simple.
http://surfcityusa.com Cette carte interactive a probablement demandé plus de temps et de ressources à créer qu’une carte statique et elle est moins ergonomique.
384
Site Web : priorité à la simplicité
www.flagshipresearch.com Ce design avec peu de technologie se suffit à lui-même, offrant rapidement et facilement à l’utilisateur des informations utiles.
Développer moins d’éléments permet d’économiser les ressources et de passer plus de temps à peaufiner celles dont vos utilisateurs ont réellement besoin. Moins d’éléments, cela signifie moins de possibilités de confusion, moins de risques d’erreurs, moins de descriptions et moins de documentation, d’où une rubrique d’aide bien plus simple. N’enlever ne serait-ce qu’un élément augmente automatiquement la simplicité d’utilisation des autres. Dans une étude, nous avons demandé aux participants d’utiliser le site Web de l’opéra de Sydney pour localiser un restaurant spécifique. La plupart ont tenté de trouver la réponse en utilisant l’outil de visite virtuelle car c’était le plus visible.
11 : Concilier technologie et besoins des utilisateurs
385
Les fonctions avancées permettaient aux utilisateurs de réaliser des actions telles que : ■
déplacer les flèches pour voir le bâtiment à partir de plusieurs points de vues ;
■
voir les balles exploser pour révéler le nom des lieux ;
■
afficher d’autres icônes et photographies du bâtiment ;
■
écouter des effets sonores s’activant en fonction des différents clics.
Cette visite virtuelle contenait de nombreuses informations utiles. Or, la plupart des utilisateurs n’ont pas pu trouver comment tout cela fonctionnait et n’ont donc pas vu tous les éléments proposés. De plus, la page était lente à charger, affichait progressivement les renseignements et les effets sonores entravaient les actions des testeurs. Les utilisateurs voulaient obtenir des réponses directes lorsqu’ils cherchaient des informations, or les applications très élaborées sont souvent gênantes car les interactions sont détournées. Voici quelques commentaires proposés par nos testeurs à propos de ce design fantaisiste : « Cette balle qui explose est ennuyeuse… J’essaie de voir si l’une d’entre elles concerne la scène… Il m’a fallu un moment pour la trouver.» « Je n’ai pas vu la petite flèche. Que suis-je censé en faire ? Je ne vois pas à quoi elle sert.» « Je ne veux pas faire la visite complète. Cela prend trop de temps. Et toutes ces choses qui apparaissent : musique, intro (je n’ai pas envie de voir ça).» « Les plans de construction et les panoramas, c’est plus que je ne souhaitais en voir. Je n’ai pas besoin des dessins de l’architecte. Je veux juste savoir où le restaurant se trouve par rapport à l’opéra. J’aurais préféré avoir une liste qui montrerait les structures autour de l’opéra de Sydney, par exemple où trouver un restaurant, mais je ne vois pas. J’aime bien la vue panoramique mais je n’en ai pas besoin maintenant. J’aimerais avoir un champ de recherche dans lequel j’écrirais « scène » et qui m’y conduirait au lieu de me faire passer par tous les niveaux de l’opéra.»
386
Site Web : priorité à la simplicité
« C’est plutôt déroutant, ce truc 3D. C’est un peu too much. C’est comme l’USS Enterprise. Si vous n’êtes jamais monté à bord, vous ne savez pas par où commencer. C’est élégant et dynamique, mais à quoi ça sert ? » Lorsque vous rencontrez des utilisateurs qui comparent votre interface utilisateur à celle d’un vaisseau de Star Trek, ce n’est généralement pas bon signe.
www.sydneyoperahouse.com La visite virtuelle pourrait être amusante pour le peu d’utilisateurs qui ont beaucoup de temps libre et de curiosité et qui souhaitent relever un défi. Toutefois, pour la plupart des visiteurs à la recherche d’informations générales sur l’opéra de Sydney, cette application est excessive. Les utilisateurs n’apprécient pas de devoir déplacer leur souris sur des balles jaunes pour obtenir des informations de base telles que le nom des lieux. Beaucoup n’ont pas vu ou compris les nombreuses icônes comme la flèche jaune (indiquée ici dans le couloir central de la carte du bas) et le « i » (superposé sur la photo du haut).
11 : Concilier technologie et besoins des utilisateurs
387
www.sydneyoperahouse.com Les utilisateurs ont eu plus de succès pour trouver des lieux sur une carte statique bien légendée que sur une carte interactive et complexe. Le schéma simple apporte suffisamment de détails pour donner aux utilisateurs du contexte et une orientation. Disposer d’intitulés pour les zones les plus importantes aide à faire des associations et à comprendre la structure du bâtiment.
(Page de droite, en haut) Voici la première des deux pages d’introduction du site Web Wynn Las Vegas. Non seulement ce processus d’entrée en deux étapes est chronophage, mais les choix de cette page sont axés sur les priorités de la société et non sur celles des utilisateurs finaux. La première chose que les utilisateurs souhaitent, c’est trouver des informations sur cet hôtel, et non acheter des billets (Buy Tickets) ou faire une réservation (Book Now). Demander à l’utilisateur s’il souhaite acheter des billets ou faire une réservation est prématuré. De plus, ces termes sont vagues et leurs sens se rapprochent dans ce contexte. A cette étape, les visiteurs pourraient se demander ce qu’ils peuvent réserver ou pour quoi acheter des billets.
(Page de droite, en bas) Voici la seconde des deux pages d’introduction du site Web Wynn Las Vegas. La page d’accueil se charge lentement, avec une bande sonore de Steve Wynn déclarant : « contrairement aux autres sites Web, nous vous proposons toute une série de surprises. Amusez-vous, cherchez les surprises et profitez-en. » Les utilisateurs qui tentent de comparer les hôtels et d’effectuer des réservations ne veulent pas chercher des surprises, ils veulent juste trouver rapidement l’information.
388
Site Web : priorité à la simplicité
www.wynnlasvegas.com
www.wynnlasvegas.com
11 : Concilier technologie et besoins des utilisateurs
389
Vers un design plus élégant Il y aura toujours de nouvelles technologies, mais il est risqué d’avoir trop d’espoirs. Les premiers utilisateurs d’une nouveauté son peu nombreux. Il faut du temps pour que le public accepte et apprenne de nouvelles interactions.
Il y aura toujours de nouvelles technologies, mais il est risqué d’avoir trop d’espoirs. Les premiers utilisateurs d’une nouveauté sont peu nombreux. Il faut du temps pour que le public accepte et apprenne de nouvelles interactions. Les concepteurs de systèmes efficaces comprennent les capacités cognitives et physiques des utilisateurs et en tiennent compte, ils restent cohérents dans leurs objectifs. La technologie peut changer mais les capacités innées des utilisateurs demeurent constantes. Les designs inefficaces et prétentieux sont à éviter. Les designs sophistiqués sont pensés, organisés et modestes. Les designs Web vraiment élégants sont aussi plaisants que fonctionnels. De plus, les fonctionnalités viennent toujours avant l’esthétique. Quelle est l’utilité d’un site Web d’une grande beauté si les utilisateurs n’y trouvent pas d’intérêt ou s’il n’est pas navigable ? Avant de vous précipiter à construire le site Web le plus à la pointe de la technologie, vous devez en circonscrire les objectifs. Que veulent faire vos utilisateurs ? C’est ce qui vous aidera à décider de ce qui est le mieux pour votre site.
Pour en savoir plus Pour plus de détails sur notre étude concernant les utilisateurs handicapés, rendez- vous sur www.nngroup.com/reports et cliquez sur Disabilities ; pour voir les autres études citées dans ce chapitre, cliquez sur Children, Teenagers et B2B Website Usability.
390
Site Web : priorité à la simplicité
12 Conclusion : Des designs qui fonctionnent Concevez pour les utilisateurs. Voilà une affirmation qui semble évidente, mais qui ne l’est pas toujours. La plupart du temps, lorsque nous rencontrons de mauvais sites Web, c’est qu’ils ont été conçus pour les concepteurs eux-mêmes ou pour leurs clients. Il ne suffit pas de savoir ce que vous aimez, ou ce qu’apprécie votre responsable, voire votre PDG. Il est aussi difficile de renoncer à vos propres préférences, mais la clef d’une expérience utilisateur réussie consiste à concevoir les sites en pensant à eux.
Axez toujours vos projets de design sur les utilisateurs. Soyez humble. Ecoutez-les. Ce sont eux qui feront votre succès.
N’oubliez pas que vous n’êtes pas l’utilisateur lambda et que votre patron n’est pas l’utilisateur lambda.Votre patron et vous êtes sûrement plutôt intelligents, et vous en savez probablement plus sur les ordinateurs et sur Internet que l’utilisateur lambda. Mais même si vous visez un public éduqué, vous demeurez différents d’eux sur un point capital : vous en savez plus sur vos produits et êtes plus impliqué dans votre société. Pour vous, ils sont spéciaux, différents et sûrement meilleurs que ceux de la concurrence. Ce ne sera pas forcément l’avis des prospects, qui évaluent toutes les offres et peuvent ne pas connaître votre ligne de produits ou votre terminologie interne. Dans la mesure où leur point de vue peut différer du vôtre, ils jugeront votre site différemment. Au final, la seule chose qui importe est de savoir de quelle manière ils l’ont apprécié et utilisé. Créer des interfaces élaborées et non conventionnelles parce qu’elles paraissent plus intéressantes n’est pas suffisant. S’intéresser à vos utilisateurs, c’est ce qui vous apportera leur clientèle et leur fidélité. Apprenez à connaître votre public. Il présente des attentes basées sur les expériences qu’il a eues avec d’autres sites. Un site qui rompt avec la tradition déroute les internautes et génère de la confusion. Il est plus difficile d’apprendre quelque chose de nouveau que de répéter les choses familières et les utilisateurs ne sont pas sur votre site pour fournir des efforts avant d’obtenir des réponses. Toute charge cognitive supplémentaire se traduit directement en une perte de chiffre d’affaires. Préférez les fonctionnalités à la forme. Les designs créatifs sont appréciables, mais les utilisateurs ne souhaitent pas systématiquement être stimulés. Le surf sur les sites Web n’est généralement pas cité comme étant la clef du bonheur, c’est un outil qui doit leur permettre de se débarrasser d’une tâche pour aller plus rapidement jouer avec les enfants. Parce qu’ils se moquent de la technologie employée, de l’informatique ou des sites Web, la plupart préfèrent ceux qui équilibrent design et simplicité. Ils apprécient les sites esthétiquement agréables mais détestent les designs déroutants. Associez la créativité et l’ergonomie pour obtenir un design harmonieux et efficace.
394
Site Web : priorité à la simplicité
Testez vos hypothèses La seule manière de savoir ce que les utilisateurs aiment consiste à les écouter. Testez votre système sur un public ciblé. Donnez-lui des tâches à réaliser, observez son comportement et écoutez ses réactions. N’ayez pas peur de modifier votre design et de le tester à nouveau. Personne ne sait créer un design ergonomiquement parfait, surtout du premier coup. Le test utilisateur est la plus simple de toutes les méthodes industrielles pour s’assurer de l’utilisabilité, si rapide et économique qu’il n’existe aucune excuse pour ne pas l’appliquer avant de lancer un site Web. Nous vous encourageons à suivre les conseils prodigués dans ce livre car ils s’appliquent dans la plupart des cas. Nos recommandations sont issues d’années d’expérience et de recherches sur des milliers d’utilisateurs. Nous espérons que cet ouvrage vous aidera à éviter les pièges dans lesquels d’autres sont tombés et vous apportera une meilleure compréhension de l’interaction entre les hommes et les sites Web. Axez toujours vos projets sur les utilisateurs. Soyez humble. Ecoutez-les. Ce sont eux qui feront votre succès.
12 : Conclusion : Des designs qui fonctionnent
395
Index
Index 3D 109 interface utilisateur 109
Avancée, recherche • 140, 150 Avantages de la vente en ligne • 286 A propos de • 115
A
B
Accessibilité • 226, 359 Accès direct par la page d’accueil • 210 Accueil, page • 28, 30, 170, 210 Achat chariot • 19 comparer • 311 description des produits • 295 gagner la confiance • 295 prix en ligne • 287 Adaptation des utilisateurs • 96 Adolescents • 92 matériel • 359 test • 360 Affichage prix • 287 récompenses • 310 Affordance • 206 perçue • 206 réelle • 206 Agrandir fenêtre (bouton) • 69 Agrandissement éléments • 344 photo • 298 Alphabétisation, niveau de • 265 Amélioration recherche • 139 sites • 383 Animations et son • 377 Anti-crénelage Voir Lissage Appareils mobiles • 96 Approximatifs, prix • 291 Architecturale, SEO • 167 Architecture de l’information • 172 intranet • 174 Archives • 15 Attributs de tri • 159 Auto-discipline des concepteurs • 104 Automatisation Voir Traitement par lot
Baisser le volume • 377 Bande passante, détecter • 366 Barre de défilement • 90, 113, 371 des tâches, fenêtres • 68 Blanc, espace • 347 Bleu (couleur des liens) • 100 Blocage des pop-ups • 72, 369 Bouton agrandir • 69 Précédent • 63 Brièveté des textes • 282 Butinage de l’information • 37, 52, 54
398
C Cadres • 87 Carte géographique • 384 Cascade, menu • 103 Chariot • 19 Ciblée publicité • 36, 43, 165 recherche • 150 Classement SERP • 157 Clic convention • 98 incertitude • 97 loi de Fitts • 65 possibilité • 205 règle des trois • 322 SERP • 40 Client en ligne • 286 Cloaking • 161 Cohérence liste • 281 navigation • 178 Commerce électronique • 286 Communication, objectif • 30, 38 Comparaison pour l’achat • 311 Comparatif, tableau • 314 Complexe, URL • 103
Site Web : priorité à la simplicité
Comportemental, niveau • 86 Concepteurs, auto-discipline • 104 Conception carte • 384 conventions • 47 normes • 47 simplicité • 86 standard • 48 Confiance, achat en ligne • 295 Connexion, bas débit • 361 Construction, en • 59 Consultation par page-écran • 32 Contenu design et • 214 importance • 254 informatif • 286 inutile • 80 obsolète • 116 qualité du site • 317 vide • 80 Contextuel, fenêtre • 72, 74 Contraste, texte • 215, 240 Convention clic • 98 conception • 47 d’interface • 368 infraction • 78 Conversion, taux • 43 Coordonnées auteur • 115 demander prématurément • 118 Corps, police • 224 Correction, exemple de • 267 Couleur daltonisme • 245 liens • 60, 62 noms • 106 nuancier • 104 style • 235 Crainte de la technologie • 364
D Daltonisme • 245 Date, SERP • 152 Débit, bas • 361 Défilant, texte • 113
Efficacité • 173 Eléments agrandir • 344 grouper • 333 utilité • 381 Emotionnel, design • 86
Défilement • 45, 100, 322, 324 barres • 90, 113, 371 horizontal • 92 petites zones • 328 Demande d’informations personnelles • 118 Dense, texte • 81 Déroulant, menu • 103 Désagrément gravité • 129 pondération • 130 publicités • 75 Description des produits • 295 Design avenir • 390 carte géographique • 384 conventions • 47 émotionnel • 86 encombré • 111, 347 et contenu • 214 non standard • 113 pour les malvoyants • 227, 336 pour le public • 394 simplicité • 86 Détection de la bande passante • 366 Difficulté de la recherche • 133 Direct, lien • 210 Directives divergentes • 49 Discours marketing • 265 Distribution des ressources • 134 Divergence des directives • 49 Domaine, réaffecter • 161 Doublons, liens • 189, 190
Enchère, publicité ciblée • 42, 43 Enfants jeu de navigation • 184 test • 360 Entreprise • 115 Equipement adolescents • 359 écran • 225 réseau • 366 typographie et • 225 Erreurs de mise en page • 322 Espace blanc • 347 Etalonnage Voir Calibrage Etude déroulement • 5 réflexion à haute voix • 6 sources • 4 Eviter les publicités • 76 Evolution du Web • 84,119 problèmes • 59 technologie • 85 Excès du multimédia • 375 Expérience testeurs • 25 utilisateur • 21 Expression de recherche • 167
E
F
Echec de la navigation • 132 raisons • 132 recherche • 133 Echelle de désagrément • 129 notation • 124 Ecran police • 234 résolution • 225, 226 taille • 234 typographie • 225
Facteur de gravité • 125 Fenêtre agrandir • 69 barre des tâches • 68 contextuelle • 72, 74 multiple • 69 exception • 70 ouvrir une nouvelle • 67 Ferme de liens • 161 Figée, mise en page • 92 Firefox • 95 Fitts, loi • 65, 151
Index
Flash • 88 inconvénients • 90 Formulaire, mise en page • 338 Frais de port • 292 Fréquence des problèmes • 125
G Google • 369 Graphiques mobiles • 113 Gravité désagrément • 129 facteurs • 125 notation • 125 problème • 124 Groupement d’éléments associés • 333 Guidage des utilisateurs • 329 Guillemets, recherche • 150
H Handicapés • 184, 226, 359 navigation • 74 Hiérarchie pages de produits • 304 titres • 277 Horizontal, défilement • 92
I Illisible, texte • 81 Illustrations des produits • 298 Image représentant du texte • 247 Impact des problèmes • 125 Incertitude, clic • 97 Incohérence dans un site • 118 Incompatibilité entre plates-formes • 94 Indicateur de téléchargement • 361 Industriels • 304 Influencer les testeurs • 78 Informatifs, articles • 317 Information architecture • 172 butinage • 52, 54 butiner • 37 trace • 52 vente en ligne • 286
399
Infraction aux conventions • 78 Inscription sites • 102 zone de saisie • 340 Instructions d’interface • 331 d’utilisabilité • 20, 47 pour les listes • 280 Interface 3D • 109 familière • 368 instructions • 331 recherche • 142 Intérieure, page • 33 Internet Explorer • 94 versions • 94 Intitulés, liens • 192 Intranet • 58, 59, 121 architecture • 174 Introduction multimédia • 353 page • 357 Inventés, mots • 116
L Lectorat, s’adapter au • 259 Lecture sur le Web • 258 Lenteur des téléchargements • 361 Liens bleus • 100 couleur • 60, 62 directs • 210 doublons • 189, 190 fermes de • 161 intitulés • 192 organiques • 39 profonds • 27, 29 recherche • 138 redondants • 189 sponsorisés • 39 Linguistique, SEO • 165 Lisibilité • 133 problèmes • 214 typographie • 214 Lissage du texte • 222
400
Listes à puce • 279 cohérence • 281 instructions • 280 numérotées • 279 Logique, navigation • 173 Loi des trois clics • 322 de Fitts • 65 Longueur des critères de recherche • 148 des vidéos • 91 Loupe • 336
M Macintosh • 94 Majuscules, texte tout en • 238 Malvoyants design pour les • 227 utilisateurs • 336 Marketing discours • 265 technique • 80 Médias pauvres • 375 Menu déroulant • 103 en cascade • 103 multi-niveau • 202 rémanence • 202 vertical • 202 Miller, George • 329 Mire couleur Voir Charte couleur Mise à jour des plug-ins • 108 Mise en forme du texte • 275 Mise en page erreurs • 322 figée • 92 Mise en valeur du texte • 276 Mobile graphique • 113 périphérique • 96 texte • 249 Mot-clé • 275 utilisation intensive • 166
Site Web : priorité à la simplicité
Moteurs de recherche • 36, 138 optimisation • 40, 160 page de résultat • 39, 151 réputation • 169 SEO • 40, 81, 154 Mots, recherche • 167 Multimédia • 352 excès • 375 introduction • 353 lourd • 91 obstacles • 359 place sur Internet • 352 Multiplicité des sites • 119
N Navigateur fenêtres multiples • 69 Firefox • 95 nouveau • 95 ouvrir des fenêtres • 67 polices installées • 232 versions • 94 Navigation • 171 cohérente • 178 documents PDF • 70, 72 échec • 132 enfants • 184 intitulés • 192 logique • 173 simplicité • 184 statique • 184 visible • 184 Nécessité des tests • 17 Néologisme • 116 Niveau comportemental • 86 d’alphabétisation • 265 multiple dans les menus • 202 rédaction • 82 réflectif • 86 viscéral • 86 Nom couleurs • 106 donner à un site • 163 Normes de conception • 47
Notation gravité • 125 problèmes • 124 Nouveaux utilisateurs • 340 Nuancier • 104 étiqueter • 104
O Objectif de communication • 30, 38 Observation, test • 62 Opera • 95 Optimisation des moteurs de recherche • 40, 81, 154, 160 Organique, lien • 39 Organisation des sites • 174 Orpheline, page • 119 Orthographe, vérifier • 154
P Page d’accueil • 8, 28, 30 accès direct • 210 texte • 18 défilante • 322 dépouillée • 323 design • 322 de garde • 111 hiérarchiser • 304 intérieure • 33 introduction • 357 orpheline • 119 parcourir • 259 résultats • 39 Page-écran consultation • 32 défilement • 45 Panier d’achat • 19 Paragraphe • 282 PDF • 70, 72 Périphérique mobile • 96 Persistant, problème • 125 Photo agrandir • 298 poids • 299 Plates-formes, incompatibilité • 94
Plug-in • 108 mise à jour • 108 Poche, appareils • 96 Poids photos • 299 sites • 87 Police • 221 choisir • 232 corps • 224 installée • 232 lisible à l’écran • 234 sans serif • 232 serif • 232 style • 235 Verdana • 233 Pop-up blocage • 72 bloquer • 369 Précédent bouton • 63 nouvelle fenêtre • 66 redirections • 66 Prix achat en ligne • 287 afficher • 287 afficher les suppléments • 292 approximatifs • 291 excuses pour ne pas afficher • 290 frais de port • 292 publicité ciblée • 41 Problème d’utilisabilité • 57, 123 évolution • 59 fréquence • 125 gravité • 124 impact • 125 lisibilité • 133, 214 notation • 124 persistance • 125 recherche • 130 Produit décrire • 295 hiérarchiser les pages • 304 illustrations • 298 trier • 314 Profil des testeurs • 5
Index
Profond, lien • 27, 29 Promotion • 267 Publicité ciblée • 36, 43, 165 enchères • 42, 43 désagréments • 75 éviter • 76 prix • 41 texte • 164 vidéo • 378 Public d’un site • 259 Puces, liste à • 279
Q Qualité, contenu du site • 317 QuickTime • 366
R Recherche • 36, 137, 140 améliorer • 139 avancée • 140, 150, 154 case • 138, 147, 148 ciblée • 150 difficulté • 130, 133 échec • 133 expressions • 167 externe • 138 fonctionnement • 140 guillemets • 150 interface • 142 interne • 138 longueur • 148 moteurs • 36 non dirigée • 36 par des liens • 138 simplicité • 143 termes • 167 utilité • 138 Rechercher • 138, 148 Récompenses, présenter • 310 Rédacteur • 258 Rédaction • 254 lectorat • 259 niveau • 82 termes • 257 Redirections • 66
401
Redondance des liens • 189 Réflectif, niveau • 86 Relative, taille • 227 Rémanence des menus • 202 Réputation moteurs • 169 SEO • 169 Requête, reformuler • 154 Résolution, écran • 225, 226 Ressources de développement • 134 Résultats absence • 159 actualiser • 156 meilleurs • 154, 155 page • 39 peu pertinents • 91 SERP (Search Engine Result Page) • 151 uniques • 159 Résumé, texte • 269 Réflexion à haute voix • 6
S Safari • 95 Sans serif • 232 Satisfaction • 26 SEO (Search Engine Optimization) • 40, 81, 154, 160 architecturale • 167 cloaking • 161 linguistique • 165 link farm • 161 pirate • 161 réaffectation de domaine • 161 réputation • 169 spam • 161 Serif • 232 SERP (Search Engine Result Page) • 39, 151 absence de résultats • 159 actualiser les résultats • 156 attributs de tri • 159 classer • 157 clic • 40 dates • 152 meilleurs résultats • 154, 155
402
orthographe • 154 peu pertinents • 91 présentation • 151 recherche avancée • 154 reformuler la requête • 154 un seul résultat • 159 Session de test • 62 Simplicité conception • 86 mise en pratique • 380 recherche • 143 vocabulaire • 262 Simplification • 384 Site affilié • 178 améliorer • 383 de fabricants • 304 efficacité • 173 en construction • 59 incohérences • 118 inscriptions • 102 multiple • 119 nommer • 163 organisation • 174 poids • 87 public • 259 simplifier • 384 standardisation • 344 testé • 7 Son et animations • 377 précautions • 359 Source des données • 4 Spam de commentaire • 161 de recherche • 161 Sponsorisé, lien • 39 Standard conception • 48 design • 113 Standardisation des sites • 344 Statique, navigation • 184 Style couleur • 235 police • 235 Succès, taux • 23, 24, 25 Suppléments de prix • 292
Site Web : priorité à la simplicité
T Tableau comparatif • 314 Taille relative • 227 texte • 221 Taux de conversion • 43 succès • 23, 24, 25 Technique marketing • 80 Technologie crainte des virus • 364 de pointe • 108 termes • 364 utilisabilité et • 56, 84, 351 Téléchargement indicateur • 361 lent • 361 temps • 86 Temps passé sur un site • 27 téléchargement • 86 Termes spécifiques à un secteur • 257 techniques • 364 Test adolescents • 92 enfants • 360 exceptions • 18 nécessité • 17 ne pas influencer • 78 non dirigé • 13, 24 satisfaction • 26 spécifique • 7 versions de navigateur • 95 Testeurs expérience • 25 profils • 5 Texte contraste • 215, 240 corrigé • 267 défilant • 113 dense • 81 graphique • 247 illisible • 81 image • 247 informatif • 317
instructions • 215 lecture sur le Web • 258 lissage • 222 majuscules • 238 mise en forme • 275 mise en valeur • 276 mobile • 249 mots-clés • 275 page d’accueil • 18 police • 221, 232 rédiger • 254, 258 résumer • 269 taille • 221 relative • 227 titre • 276 vision • 223 TinyURL • 103 Titres concis • 276 hiérarchie • 277 Trace des informations • 52 Tri attributs • 159 dans les produits • 314 Typographie écrans • 225 équipement • 225 lisibilité • 214 texte • 215
U URL complexes • 103 TinyURL • 103 Utilisabilité • 3 instructions • 17, 20, 47 intérêt de l’ • 43 mesure • 24 priorités • 123 problèmes • 57 technologie et • 85, 351 tests • 5
Utilisateurs adaptation • 96 équipement • 350, 366 expérience • 21 handicapés • 74, 359 nouveaux • 340 technologie et • 351 tenir compte des • 394 Utilisation couleurs • 213 multimédia • 350, 375 son • 359 typographie • 213 Utilité • 381 multimédia • 359 recherche • 138
Visualisation, loupe • 336 Vocabulaire • 262 Volume baisser • 377 multimédia • 91
W Web écrire pour • 253 évolution • 84 usage • 20, 22, 27 vidéos pour le • 378 Windows Media Player • 366
Z Zone de défilement • 328
V Vente en ligne • 286 Verdana • 233 Version Firefox • 211 Flash • 88, 248 Internet Explorer • 6, 94, 227 Netscape • 88 plug-in • 364 texte • 359 Vertical, menu • 202 Vidéo coupure publicitaire • 378 lourde • 91 pour le Web • 378 visite virtuelle • 375 Virtuelle, visite • 375 Viscéral, niveau • 86 Visibilité de la navigation • 184 Vision, problèmes de • 223 Visite, temps moyen sur un site • 27
Index
403
Site Web : priorité à la simplicité Du nouveau sur l’utilisabilité du Web ! Jacob Nielsen, acteur renommé du domaine du design et de l’ergonomie du Web, auteur de Conception de sites Web : L’art de la simplicité (CampusPress, 2000), la référence internationale qui a changé la manière dont le Web et son utilisation sont perçus, présente aujourd’hui les résultats de ses travaux les plus récents. Epaulé de Hoa Loranger, spécialiste de l’utilisabilité, il revisite les principes de conception qui ont assis les bases de cette discipline. A l’aide de tests utilisateurs menés sur de nombreux sites, représentatifs de la diversité du Web (sites de commerce électronique, d’information, de loisirs, institutionnels, etc.), lisibilité, convivialité, design et autres facteurs d’utilisabilité sont évalués et critiqués ; des suggestions d’amélioration sont proposées. Des auteurs énoncent des directives et des principes qui serviront à tous les acteurs professionnels du Web, pour lesquels simplicité et confort d’utilisation des internautes sont, plus que jamais, une préoccupation constante.
Qualifié de «premier expert au monde de l’utilisabilité du Web» par U.S. News and World Report, Jakob Nielsen est un pilier de Nielsen Norman Group. Ses articles Alertbox sont publiés sur Internet depuis 1995 (www.useit.com). Ancien ingénieur de Sun Microsystems, il est l’auteur de nombreux ouvrages, dont son bestseller mondial Conception de sites Web - L’art de la simplicité (CampusPress, 2000). Hoa Loranger est spécialiste de l’expérience utilisateur chez Nielsen Norman Group, où elle conseille des sociétés réputées de divers secteurs, comme la finance, les divertissements, la technologie, le commerce électronique et les appareils mobiles. Intervenant dans de nombreuses conférences, elle mène des recherches dans ce domaine partout dans le monde et publie des rapports sur divers sujets liés à l’utilisabilité du Web.
Niveau : Tout public. Catégorie : Web design
Pearson Education France 47 bis, rue des Vinaigriers 75010 Paris Tél. : 01 72 74 90 00 Fax : 01 42 05 22 17 www.pearson.fr
ISBN : 978-2-7440-4091-7
