Le document traite de la conception et de l'ergonomie des sites web, en soulignant l'importance de l'utilisabilité pour fidéliser les utilisateurs et améliorer la perception des entreprises. Il aborde des problématiques comme la navigation, l'interaction et les attentes des utilisateurs, ainsi que des recommandations pour optimiser l'expérience utilisateur à travers la conception graphique et le contenu. En utilisant des exemples de sites web, le document souligne également les erreurs fréquentes en matière de design et leur impact sur la performance des sites.

1. 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

2. Internet
(Intranet et Extranet)
 Moyen de communication
– Décentralisé
– Ouvert
– Grand public et professionnel
 Sur le web, l’utilisateur contrôle l’usage

3. 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

4. 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

5. 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…

6. 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…

7. 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

8. 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)

9. Utilisateurs
 Tranche d’âge, professions, connaissances,
etc.
 Matériel : plateforme, navigateur, bande
passante, etc.

10. Communication
 Fonction des objectifs
 Fonction des messages à transmettre
 Retour :
– Fréquentation
– Analyse des visites
– Enquêtes

11. 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 ?

12. 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.

13. 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

14. 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

15. 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)

16. 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)

17. La page d’accueil

18. 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

19. 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

20. 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

21. Communication
 Communication
 Artistique (œuvre visuelle et sonore)
 Interactif

22. www.ebay.fr
 Page accueil très chargée
 Trop de zones
 Listes redondantes
 Liens sans explication

23. 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)

24. 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)

25. 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

26. Top Ten Mistakes in Web
Design
Jakob Nielsen
Alertbox –
http://www.useit.com
1996

27. 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

28. Gratuitous Use of Bleeding-
Edge Technology
 useful content
 good customer service
 Versus technology

29. 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

30. 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 !

31. 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

32. Long Scrolling Pages
 Only 10% of users scroll beyond the
information that is visible on the screen
 1996, mieux maintenant, mais minimisez !

33. 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 !

34. 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.

35. Outdated Information
 New content !!!
 Mais aussi
– Maintenance
– Mise à jour
– Retirer les pages/informations obsolètes

36. 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

37. 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

38. Top Ten Web-Design
Mistakes of 2002
Jakob Nielsen
Alertbox –
http://www.useit.com
2002

39. No Prices
 B2B : oublis fréquent
 B2C : oublis dans les listes, les résultats de
recherche, etc…

40. 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

41. Horizontal Scrolling
 Users hate scrolling left to right
 Optimized for 805-pixel-wide

42. Fixed Font Size
 Style sheets problem
 95% temps = trop petit
 Problème plateforme
 Problème âge utilisateurs

43. 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.

44. JavaScript in Links
 Users hate unwarranted pop-up windows.
 Users deserve to control their own destiny.

45. 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.

46. 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

47. URL > 75 Characters
 Long URLs break the Web's social navigation
– Impossible à envoyer par mél
– À retenir
– À copier/coller
 Bad way to lose business…

48. 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)

49. Remarques
 Le Mél
– 3 dernières
– Le plus vieux, le plus utilisé
– À intégrer avec le web

50. Pratique de l’utilisabilité
"Quoi faire ?"
Plutôt que
"Comment le faire ?"

51. 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)

52. 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)

53. 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

54. 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

55. 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)

56. 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