Conception & Ergonomie du Web
Cedric.Dumas@emn.fr
contrat Creative Commons Paternité-Pas d'Utilisation Commerciale-
Partage 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. Pas de cadres (Frames)
2. 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
Identifier :
- les besoins
- les questions
Construire :
- les réponses
- les services
Objectifs de communication
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
Prototypage
Développement
Référencement / Mise en ligne
Maintenance / …
Attention à la gestion
de la vie du site
communication
marketing
utilisabilité
graphique
rédaction
développement

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
– Liens morts
– Liens externes
– Cohérence des liens
 Rendu cohérent
– 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

www.ebay.fr
Lien actif pointant sur elle-même
3 zones de navigation superposées
eBay
Boutons peu cliquables
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)

www.ibm.com
Moteur de recherche dans une zone dégagée
pas d’auto-pointage
pas de lien vers le panier
semble servir de titre
aux rubriques dessous
vocabulaire marketing
(n’aide pas à comprendre)
problème de la segmentation
par marché (vision fournisseur)
majuscule/minuscule
petites images
Pas d’informations précises
(tournures purement marketing
sans fait concret font fuir Glt)
Lien ?
Commencer par des
termes clés

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 w
 you cannot bookmark
 URLs stop working
 Printouts become difficult
 the predictability of user actions

Gratuitous Use of Bleeding-
Edge 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 joe@yahoo.fr ou mickey@mouse.com

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
– Télécommande, 1988
 DSS
– Recepteur satellite, 1994
 Nokia
– 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
– Efficacité (utilisateur peut réaliser sa tâche)
– Efficience (avec un minimum de ressources)
– Satisfaction (agréable à utiliser)
 Contexte proche situation réelle (pas aider ni rien)
 Observation, mesure, questionnaires
– 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