13. Utilisabilit´ e et Web
S´ebastien Roy
D´epartement d’Informatique et de recherche op´erationnelle Universit´e de Montr´eal
10 avril 2007 Universit´e de Montr´eal
L’utilisabilit´e appliqu´ee au Web.
Sources
www.useit.com
Don’t make me think, Steve Krug
L’utilisabilit´e est r´eserv´ee aux logiciels?
Le web est essentiellement bas´e sur l’interaction avec l’usager.
E-commerce
Si on ne peut pas trouver un produit, on ne peut pas l’acheter.
Intranet
utilisabilit´e = productivit´e des employ´es ...
D´epenser 10% du budget en utilisabilit´e double la qualit´e d’un site.
C’est plus que le gain r´ealis´e en g´en´eral par les logiciels.
Double quoi?
Double de transactions dans le mˆeme temps Double des ventes
Double des usagers inscrits Moiti´e de la formation ...
Quelle est la diff´erence entre un site Web et un logiciel?
T´el´eportation: un usager peut quitter `a tout moment Difficile `a utiliser?
L’usager se perd dans le site?
Difficile `a lire? Ne r´epond pas aux attentes de l’usager?
Page d’accueil confuse sur la nature du site et ce qu’on peut y faire?
Pas de manuel usager pour une page web
Peu de tempspour comprendre l’interface d’une page web Bref, si l’usager `a un probl`eme, il peut quitter une page web. Pas un logiciel.
Neilsen
5 principales composantes de l’utilisabilit´e pour le web:
Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
Efficiency: Once users have learned the design, how quickly can they perform tasks?
Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
Satisfaction: How pleasant is it to use the design?
(tir´e directement de www.useit.com, de Jakob Neilsen)
On proc`ede comme pour les logiciels...
Analyse des usagers et des besoins Design en spirale it´erative
Evaluations heuristiques´ Test usagers.
Voici quelques aspects plus sp´ecifiques au web...
Avant de ”refaire le site web”, tester l’ancien design pour identifier les bons et mauvais aspects.
Traiter les sites web similaires (les comp´etiteurs) comme
”prototypes gratuits” aux fonctionalit´es similaires.
Analyse usager approfondie (qui sont les usagers de ce site?) et besoins (que veulent-ils faire?)
Prototype papier (+ ´evaluation heuristique, + it´erations) Tester le r´esultat final
(Important) Ne pas attendre `a la fin pour tester avec des usagers
Voici les pires probl`emes d’utilisabilit´e.
1. Mauvaise recherche
Trop lit´eral? (permettre les erreurs) Priorit´e sur le nombre de mot-cl´e plutˆot que sur l’importance du document (ex: nom d’un produit) La recherche est la bou´ee de sauvetage quand la navigation
´ echoue.
(Jacob Neilsen, www.useit.com)
2. PDF pour du contenu `a lire en ligne
Les fichiers PDF `a lire brise le flˆot de lecture de l’usager.
Ils sont optimis´es pour ˆetre imprimer, pas ˆetre lu `a l’´ecran (scrolling? fonts?)
Bref, r´esever les PDF pour des documents volumineux `a imprimer.
3. Ne pas changer la couleur des liens visit´es Connaˆıtre son pass´e aide `a trouver sa destination.
Les liens sont essentiels `a la navigation web.
Marqu´e un lien visit´e aide l’usager `a ne pas retourner dans des endroits inutiles, ou `a retourner dans des endroits utiles.
4. Le ”mur” de texte
Trop de texte en un seul gros bloc est illisible.
Il faut ´ecrire pour la lecture ”en ligne”. Tr`es diff´erent de l’imprim´e.
L’usager doit pouvoir parcourir le texte. Pour nous aider:
Titres, sous-titres
Listes avec puces (”bullet”) Mots-cl´es en ´evidence paragraphe courts La ”pyramide inverse”
Style d’´ecriture simple, droit au but
L’analyse du regard fait apparaˆıtre un pattern en F.
1. Lecture du haut du contenu, horizontalement
2. Un peu plus bas, seconde lecture horizontale, un peu moins longue.
3. Lecture verticale de la zone gauche du contenu
(Jacob Neilsen, www.useit.com)
Implications:
Les usagers ne lisent que partiellement le contenu.
Les 2 premiers paragraphes sont tr`es importants.
D´ebuter les titres, sous-titres, etc. avec des mots informatifs.
(Jacob Neilsen, www.useit.com)
5. Polices de tailles fixes
On peut imposer, grˆace aux CSS, une taille de police fixe. L’usager doit pouvoir changer la taille selon ses pr´ef´erences.
Vaut mieux sp´ecifier les tailles relativement plutˆot qu’en absolu.
6. Titre de page non descriptif
Le titre d’une page web (HEAD, TITLE, ...) est tr`es important.
Il sert `a indexer les pages dans les engins de recherche Il sert `a d´ecrire la page dans les r´esultats de recherche Il est utilis´e pour nommer les signets (”bookmarks”)
´Evitez les ”bienvenue!”, etc.
7. Tout ce qui ressemble `a de la publicit´e
Les usagers du Web ne portent plus attention aux publicit´es inutiles (sauf peut ˆetre les annonces textes des engins de recherche).
Si un contenu important ressemble `a une publicit´e, il ne sera pas lu (pas vu, en fait).
En particulier, l’usager...
... ne voit plus les banderoles (banners).
... ne prˆete pas attentions aux animations aggressives (texte clignotant, etc...)
... ´elimine les fenˆetres-pub d’entr´ee avant mˆeme qu’elles soient affich´ees au complet.
8. Ne pas respecter les standards
Lacoh´erence avec les standardsest extrˆemement importante.
Quand les choses se passent toujours de la mˆeme facon, l’usager peutpr´evoir l’effet de ses actions, ce qui lui donne un sentiment de contrˆole.
Loi de Jakob sur l’exp´erience de l’usager
”Les usagers passent la majorit´e de leur temps sur d’autres sites que le votre.”
→Un site que ressemble aux autres sites est plus coh´erent et aide l’usager.
9. Ouvrir des nouvelles fenˆetres
Intention: Garder l’usager sur notre site.
Effet: l’usager d´eteste cetteprise de contrˆole de sont ´ecran par le site.
10. Ne pas r´epondre `a la question de l’usager
Les usagers du web sont l`a dans un but pr´ecis (”goal-driven”).
L’erreur ultime est de ne pas fournir l’information recherch´ee.
Exemple type: Ne pas fournir de prix.
Voici des directions pour am´eliorer le design d’un site web pour qu’il soit plus utilisable.
Bulletin envoy´e par courriel
Facon efficace de conserver le ”contact avec l’usager” et d’augmenter l’ind´ependance face aux engins de recherche web.
Pages de produits informatives
C’est la raison de 10% des ´echecs usagers (l’usager abandonne).
Il faut construire des pages selon les besoins des usagers. Ne pas exag´erer: (ex: Dell page de produit ”maison”, ”business”,
”loisir”, ...) Le but est de facilit´e la recherche.
Photos de haute qualit´e
On ne peut pas toucher, donc on doit regarder...
L’id´eal: une petite image qui m`ene vers une grande. Le temps de chargement importe peu, puisque c’est l’usager qu
demande `a voir la grande photo.
Diff´erentiation et comparaison des produits
L’usager a la ”peur d’acheter le mauvais produit”. Ex: Laptop Dell (Inspiron, Latitude, Precision, XPS). Pas clair...
Garder une trace des achats
On peut permettre d’acheter facilement des fournitures (ex:
batterie, etc..) si on sait ce qui a d´ej`a ´et´e achet´e.
Simplifier le texte
Accessibilit´e pour les ain´es
Les ain´es ont une vision, contrˆole moteur, et m´emoire souvent r´eduite.
Les sites sont faits par des jeunes de la ”culture num´erique”.
Les ain´es sont moins mobiles, ont du temps... id´eal pour le web.
Conserver une trace
WishList (liste de ce que j’aimerais acheter), certificats cadeaux, ...
Principe: garder le contact, et contacter de nouveaux usagers Recherche
Les usagers d´ependent de plus en plus de la recherche pour naviguer...
Programmes de loyaut´e
Servir l’usager, pas simplement tenter d’ˆetre ”cool”
Utilisabilit´e d’un site web
Qu’est-ce qui est le plus important?
Don’t make me think Je ne veux pas r´efl´echir
Autrement dit:
Une page web doit ˆetre directement intelligible, auto-explicatif, et ´evident.
On doit pouvoir comprendre le contenu et ce qu’il nous offre, sans r´efl´echir.
Ce principe inclut la plupart des heuristiques d’utilisabilit´e.
Principe de Krug
Il y a un lien direct entre l’utilisabilit´e et le temps qu’on passe `a r´efl´echir `a nos actions.
Cela est particuli`erement vrai pour les sites Web.
Exemples...
Parler la langue de l’usager Bouton Jobs
Bouton Employement opportunities Bouton Job-O-rama
Lequel demande le moins de r´eflexion?
Autre exemple:
Erreur et pr´evention des erreurs, Coh´erence et Standards Bouton emboss´e avec ombre
Bouton dans un simple cadre carr´e Bouton sans aucun cadre
Lequel demande le moins de r´eflexion?
Pourquoi?
Contrairement au logiciel, le web permet de se t´el´eporter d’un site
`a l’autre.
Seconde loi de Krug
Peu importe le nombre de clics `a faire, l’important est que chacun soit automatique, qu’il ne demande aucune r´eflexion.
Une nouvelle dimension de l’analyse usager:
Comment l’usager regarde une page web?
Comment un usager utilise le web
Parcourir sommairement une page plutˆot que de la lire au complet
Choisir le plus rapidement un choix raisonable, pas optimal Le but n’est pas de comprendre comment ¸ca fonctionne.
Le mod`ele de la page web est donc...
La page web est comme un panneau publicitaire vu d’un v´ehicule roulant `a 100km/h.
Troisi`eme loi de Krug
” ´Eliminer la moiti´e des mots de chaque page, puis ´eliminer la moiti´e de ce qui reste.”
Principes incontournables Esth´etique et minimaliste Coh´erence et standards On doit donc porter attention:
titres, sous-titres, texte bien s´epar´e, boutons et liens clairement identifi´es, ...
Pour le texte
Le verbillage jovial doit disparaitre(happy talk) Les instructions et marche `a suivre doivent disparaitre
En g´en´eral, l’usager cherche quelques chose.
Il doit pouvoir trouver ce qu’il cherche.
On utilise pas un site o`u l’on ne peut pas naviguer.
Deux types d’approches pour trouver ce qu’on cherche La recherche (Neilsen: les search-dominant) La navigation (Neilsen: les link-dominant)
Caract´eristiques de la navigation web Aucune id´ee de l’´echelle
(taille du site: 50 pages? 1000 pages? 17000 pages?) Aucun concept de direction
(pas de gauche, droite, haut, bas. Abstrait: g´en´eral vs sp´ecifique)
Aucune id´ee de lalocalisation
(l’espace n’est pas physique. La distance la plus courte entre deux points n’est pas toujours ´evidente)
La navigation doit suivre les conventions.
Donc, les innovations gratuites sont `a proscrire
Trunk test (Krug)
C’est le test ultime de navigation.
Prenons une page au hasard...
Quel est le site?
Sur quelle page est-ce que je me trouve? (nom de page) Quelles sont les principales sections du site? (sections) Quelles sont mes options `a ce niveau-ci? (navigation locale) O`u suis-je par rapport au reste du site? (”vous ˆetes ici”) Comment puis-je chercher?
Page d’acceuil (homepage)
Page d’entr´ee d’un site, tr`es importante. Elle doit indiquer Identit´e et mission du site
Hi´erarchie du site Recherche
Aguiches (teasers) Contenu ”temporel”
Promotions Raccourcis Inscription
On doit montrer clairement comment se rendre `a l’information souhait´ee, et aussi sugg´erer.
C’est souvent le seul endroit o`u l’on peut faire bonne impression sur l’usager.
Don’t make me think
Chapitre 9 : Usability testing on 10 cents a day Chapitre 10 : Usability as common courtesy Les test usager en pratique...
... too little, too late, and for all the wrong reasons
C¸ a commence souvent par “quel th`eme de couleur doit-on choisir?”
LesFocus group ne sont pas des tests usagers
LeFocus groupest une petit groupe de gens (5 `a 8) autour d’une table qui r´eagissent `a des id´ees et des designs qu’on leur lance.
Quelques v´erit´es sur les tests...
Vous voulez un bon site web? Il faut le tester
Celui qui con¸coit un site est trop familier. Il en sait trop.
→ tout le monde ne pense pas comme nous.
Tester sur un usager est 100% mieux qu’aucun test.
Tester fonctionne toujours, mˆeme si ce n’est pas id´eal (usager mal choisi, tˆache mal choisie, ...)
Tester un usager au d´ebut est mieux que 50 `a la fin
Plus on test au d´ebut d’un projet, plus le test est utile et efficace.
L’importance d’avoir l’usager parfait est exag´er´ee
C’est bien d’avoir un usager repr´esentatif des vrais usagers du site, mais c’est plus important de tester au d´ebut et souvent.
Quelques v´erit´es sur les tests...
On ne teste pas pour prouver, mais pour apprendre On pense souvent tester pour prouver que l’interface A est meilleure que l’interface B. Pour cela, il faudrait une exp´erimentation contrˆoll´ee.
L’´evaluation formative va plutˆot consolider notre jugement pour prendre une d´ecision sur l’interface.
Tester est un processus it´eratif
On ne teste pas une seule fois. On teste, on r´epare, on teste, on r´epare, on test, on r´epare...
Rien de mieux que la r´eaction en direct d’un auditoire
La r´eaction des usagers est tellement difficile `a pr´evoir qu’il vaut mieux l’observer.
Les 5 meilleurs excuses pour ne pas faire de test...
“On n’a pas le temps”
“On n’a pas l’argent”
“On n’a pas l’expertise”
“On n’a pas un laboratoire d’utilisabilit´e”
“On ne saurait pas comment interpr´eter les r´esultats”
Un nombre limit´e d’usagers (disons 5) test´e plusieurs fois est plus utile (trouve plus de probl`emes) qu’un plus gros groupe test´e une seule fois.
Les probl`emes d´etect´es au d´epart, une fois corrig´es, laissent la chance de d´etecter les probl`emes r´esiduels.
Le r´eservoir de bonne volont´e Kruh, Chapitre 10
Accessibilit´e Krug, Chapitre 11
