Transcript Ergonomie du Web

Conception & Ergonomie du Web
[email protected]
contrat Creative Commons Paternité-Pas d'Utilisation CommercialePartage des Conditions Initiales à l'Identique 2.0 France License
Internet
(Intranet et Extranet)

Moyen de communication
–
–
–

Décentralisé
Ouvert
Grand public et professionnel
Sur le web, l’utilisateur contrôle l’usage
Utilisabilité




Possibilité de naviguer
Capacité de se repérer
Impact sur la fréquentation
Site les plus populaires ne pose pas de
problèmes majeurs d’utilisabilité :
1.
2.
Pas de cadres (Frames)
Temps de chargement très court
Client ?

Internaute
–
–
–

Commerce en ligne
Site lourds / compliqués (Ebay)
Problème des formulaires (longs, incompréhension)
Pas de fidélisation, découragement, préjudice à l’image de la
société, etc…
IBM, 1998 : homogénéité, accés rapide,… 120k/1M
+120% en mars 1999
Entreprise
Communiquer
 Echanger (patrimoine)
 Partager (communauté)
 Référentiel
 Culture d’entreprise

Même problème de design : énervement, perte
de temps, stress, gaspillage, etc…
Pourquoi tant de problèmes
potentiels ?
« plateforme de convergence entre
l’informatique, les télécommunications et
l’audiovisuel » (JF Abramatic, INRIA)
+ marketing
+ infographie
+ ergonomie
etc…
Retour en arrière ?


Interfaces des années 70, formulaires, peu de
composants, peu d’interaction directe, pas
d’interactions spécialisées, etc…
Web
–
–
–
–
–
Dynamique
Utilisateur pas propriétaire de l’appli
Utilisateur navigue et parcoure l’information (butine)
Plus gros potentiel d’erreurs
Beaucoup de catégories d’utilisateurs potentielles
Ciblage

Ciblage du site
Cahier des charges
– Enquêtes
– Etudes de marché (analyse de la concurrence)
 Interviews, questionnaires, groupes de travail,etc.
–

Etude utilisateurs
–
–
Attentes, contexte d’utilisation, objectifs
Existant (web ou autres moyens)
Utilisateurs


Tranche d’âge, professions, connaissances,
etc.
Matériel : plateforme, navigateur, bande
passante, etc.
Communication

Fonction des objectifs
Fonction des messages à transmettre

Retour :

–
–
–
Fréquentation
Analyse des visites
Enquêtes
Check-list
(IBM Webdesign guidelines, 1999)












L’objectif du site est-il clair ?
L’audience du site peut-elle clairement s’identifier ?
Le Site est-il utile et pertinent pour ce public ?
Le Site est-il intéressant ?
Le Site permet-il aux visiteurs de réaliser toutes les tâches qu’ils veulent
accomplir ?
Les visiteurs peuvent-ils accomplir facilement ces tâches ?
Le contenu et l’organisation des informations sont-ils cohérents avec
l’objectif du site ?
L’information importante est-elle facile à trouver ?
Toutes les informations sont-elles claires, faciles à comprendre et à lire ?
Le visiteur sait-il toujours où il est et comment faire pour aller où il veut ?
Le graphisme est-il agréable ?
Les pages se chargent-elles suffisamment vite ?
Architecture de communication
Objectifs de communication
Services
Identifier :
- les besoins
- les questions
Construire :
- les réponses
- les services
Décrire l’arborescence du site en incluant pour chaque pages :
les services, la cible et l’objectif.
Cycle de développement simplifié
Analyse du besoin
Architecture de communication
Charte graphique / Protocole de navigation
communication
marketing
utilisabilité
graphique
rédaction
développement
Prototypage
Développement
Référencement / Mise en ligne
Attention à la gestion
de la vie du site
Maintenance / …
Evaluation

Prototype horizontal
le langage, la structuration du dialogue, la charte graphique, etc…

Prototype vertical
les services, la plateforme, les tâches réelles (mise en situation,
verbalisation)

Protocole de navigation
chemin le plus court, repérage, orientation, mémorisation

Mesure de performance (efficacité du site)
temps, taux de réussite, taux d’erreurs, etc.

Compréhension
compréhension de l’information, importance relative
Qualité

Comportement fonctionnel
–
–
–

Rendu cohérent
–
–
–

Liens morts
Liens externes
Cohérence des liens
Plateformes (OS, résolution, écran, etc)
Temps de transfert / chargements (30s – 10s à 8s)
Navigateurs
Syntaxe
–
–
Normes
Complet (texte alternatif aux images, etc)
Vie du site

Catalyseurs
–
–
–


Nom du site
Pub/information/annonce (Internet et autres médias)
Référencement (Meta, titre, page accueil, etc)
Mise à jour
Amélioration de la plateforme
Rideau de construction, liens externes, statistiques, dialogue
(questions, réponses, etc)
La page d’accueil
Agencement de la page









Disposition régulière
Alléger les pages
Utiliser une résolution d’écran moyenne
Zone protégée de 640x480
Eviter les barres de défilement
Eviter les cadres
Page courte facilite la lecture (0<x<=50 lignes)
Retour en haut de page
Navigation locale, répétée
Charte graphique










Une charte pour tout le site
Feuille de style (avec et sans)
Critère déterminant d’adhésion
Vecteur de communication important
Fonds de page dégradés, clairs
Utiliser des images lorsque c’est utile
Minimiser leur taille (qualité > taille)
Palette web-safe
Animations avec parcimonie, sans texte à proximité
2 ou 3 polices maximum, taille en relatif
Contenu


Utilisateurs parcourent
Faire ressortir les éléments clés du texte
gras, puces, liens (attention au texte)

Lisibilité
Justifié à gauche, important en haut de page, imprimable

Concision
essentiel, rédiger simplement, être objectifs, paragraphes courts,
conclusion/résumé au début (pyramide inverse)

Netiquette
Communication



Communication
Artistique (œuvre visuelle et sonore)
Interactif
www.ebay.fr




Page accueil très chargée
Trop de zones
Listes redondantes
Liens sans explication
Boutons peu cliquables
eBay
Lien actif pointant sur elle-même
www.ebay.fr
3 zones de navigation superposées
deux zones
de recherche
Signature trop loin du logo (pas intégrée)
Page postérieure à l’étude de Nielsen (55 % des problèmes résolus)
www.ibm.com


Grosse entreprise
Dualité du site
(entreprise + site marchand)



Nombreux points
d’entrée
Navigation par type de
client
Quête de simplicité
(liens succincts, textes minimaux)
semble servir de titre
pas d’auto-pointage
aux rubriques dessous
Moteur de recherche dans une zone dégagée
petites images
www.ibm.com
pas de lien vers le panier
problème de la segmentation
par marché (vision fournisseur)
Pas d’informations précises
(tournures purement marketing
sans fait vocabulaire
concret font fuir
Glt)
marketing
majuscule/minuscule
Commencer par des
(n’aide pas
à comprendre)
termes
clés
Lien ?
Top Ten Mistakes in Web
Design
Jakob Nielsen
Alertbox –
http://www.useit.com
1996
Using Frames





confusing for users since frames break the
fundamental user model of the web page
you cannot bookmark
URLs stop working
Printouts become difficult
the predictability of user actions
Gratuitous Use of BleedingEdge Technology



useful content
good customer service
Versus technology
Scrolling Text, Marquees, and
Constantly Running
Animations



Moving images have an overpowering effect on
the human peripheral vision
peace and quiet to actually read the text
NO BLINK
Complex URLs


a URL should contain human-readable
directory and file names that reflect the nature
of the information space
Navigation, Sens of location => decode !
Orphan Pages




Liens vers la page originale
Info sur la localisation sur le site
Infos sur le contenu du site (liens directs vers
les pages de l’extérieur)
Pas de pages orphelines
Long Scrolling Pages


Only 10% of users scroll beyond the
information that is visible on the screen
1996, mieux maintenant, mais minimisez !
Lack of Navigation Support





Don't assume that users know as much about
your site as you do.
support in the form of a strong sense of
structure and place
communicate this structure explicitly to the
user.
Site map
And a good search feature !
Non-Standard Link Colors



Link not been seen by the user = blue
links to previously seen pages = purple or red
Consistency is key to teaching users what the
link colors mean.
Outdated Information


New content !!!
Mais aussi
–
–
–
Maintenance
Mise à jour
Retirer les pages/informations obsolètes
Overly Long Download Times


Traditional human factors guidelines indicate
10 seconds as the maximum response time
before users lose interest.
. On the web, users have been trained : 15 s
for a few pages
3 ans plus tard… 1999










Frame  navigation (back), print, bookmark mais toujours le
problème des URLs
Bleeding-edge technology 
S. T. & anim  volonté de se différencier, etc.
Complex URLs  amélioration des syst. Nav.
Orphan pages  super user réécrivent les urls
Scrolling navigation pages… mitigé, usable si bien gérée
Lack of navigation support  recommendations et habitudes non
respectées (logo en haut à gauche)
Non-standard link colors  même problème
Outdated information  pire, trust <> credibility
Slow download times  fantasmes sur BP
Top Ten Web-Design
Mistakes of 2002
Jakob Nielsen
Alertbox –
http://www.useit.com
2002
No Prices


B2B : oublis fréquent
B2C : oublis dans les listes, les résultats de
recherche, etc…
Inflexible Search Engines

literal search engines reduce usability
unable to handle typos, plurals, hyphens, and
other variants of the query terms

Result = how many query terms they contain

Horizontal Scrolling


Users hate scrolling left to right
Optimized for 805-pixel-wide
Fixed Font Size




Style sheets problem
95% temps = trop petit
Problème plateforme
Problème âge utilisateurs
Blocks of Text


A wall of text is deadly for an interactive experience.
Intimidating. Boring. Painful to read.
Write for online, not print :
–
–
–
–
–
–
–
subheads
bulleted lists
highlighted keywords
short paragraphs
the inverted pyramid
a simple writing style, and
de-fluffed language devoid of marketese.
JavaScript in Links


Users hate unwarranted pop-up windows.
Users deserve to control their own destiny.
Infrequently Asked Questions
in FAQ



Too many websites have FAQs that list
questions the company wished users would
ask.
They must be reserved for frequently asked
questions.
Question of trust.
Collecting Email Addresses
Without a Privacy Policy




Every time a website asks for an email
address, users react negatively in user testing.
Don't assume that people will sign up for a
newsletter just because it's free.
you must provide an explicit privacy statement
or an opt-in checkbox right next to the entry
field
Except [email protected] ou [email protected]
URL > 75 Characters

Long URLs break the Web's social navigation
–
–
–

Impossible à envoyer par mél
À retenir
À copier/coller
Bad way to lose business…
Mailto Links in Unexpected
Locations

Attente sur un lien
–
–


Aller vers une nouvelle page
Ouvrir un programme de mél pour écrire plutôt que
lire
Ancre explicite
Pas sur des noms (pages web perso)
Remarques

Le Mél
–
–
–
3 dernières
Le plus vieux, le plus utilisé
À intégrer avec le web
Pratique de l’utilisabilité
"Quoi faire ?"
Plutôt que
"Comment le faire ?"
Usability = €


Utilisabilité, critère de choix
Dévelopement
–
–
–
–
–



Réduction des coûts
Intégration de l’utilisateur final = consolidation
70 à 80% des coûts sont engagés au début du projet
Éviter les retours arrières (surcoût)
Critère d’acceptation du produit final
48 à 80 % du code internet développé
Pratique = 6% du coût d’un projet (faible / enjeux)
Globalement, améliore la ré-utilisabilité des
composants (enrichissement, cycle d’amélioration)
Difficile à quantifier ?

Thomson Multimédia
–

DSS
–

Recepteur satellite, 1994
Nokia
–

Télécommande, 1988
Téléphone portable, 2000
Amélioration minime = gros gain quand beaucoup
d’employés
 Productivité (entreprise utilisatrice)
 Attractivité (entreprise vendeuse)
Méthodes d’évaluation
ergonomique



Inspection (passage en revue des
composants) : critères ergonomiques + ?
Heuristique (inspection basée sur la
compétence et les connaissances de
l’évaluateur)
Evaluation coopérative : prototype ou +
–
–
Observation
Verbalisation
Méthodes d’évaluation
ergonomique


Test d’utilisabilité
Valider les 3 critères
–
–
–


Contexte proche situation réelle (pas aider ni rien)
Observation, mesure, questionnaires
–
–
–

Efficacité (utilisateur peut réaliser sa tâche)
Efficience (avec un minimum de ressources)
Satisfaction (agréable à utiliser)
Comportement : comment il navigue, les infos qu’il cherche
Performance : temps, erreurs, impasses, évolution,
Analyse à chaud après
Protocole ! (même test pour chacun)
–
Consigne, objectifs, plateforme, conditions, etc
Test ?




Évaluer le logiciel, pas l’utilisateur
Définir des objectifs précis pour les tests
Panel d’utilisateurs représentatifs
Nielsen (Alterbox, 2000)
Why you only need to test with 5 users
Test avec 5 utilisateurs lèvent 80% des problèmes d’utilisabilité…
(pour un groupe donné d’utilisateur, en améliorant à chaque fois)

Attention à vous : développeur <> utilisateur !
(! Compétences, ! Techno, ! PDG)
Conclusion




Objectif :
Comprendre et intégrer les facteurs clés de
l’utilisabilité
Prenez du recul
Sachez anticiper les coûts, les impacts
Faites de la Conception Centrée Utilisateur