Conception & Ergonomie du Web
Cedric.Dumas@emn.fr
contrat Creative Commons Paternité-Pas d'Utilisation Commerciale-
Partag...
Internet
(Intranet et Extranet)
 Moyen de communication
– Décentralisé
– Ouvert
– Grand public et professionnel
 Sur le ...
Utilisabilité
 Possibilité de naviguer
 Capacité de se repérer
 Impact sur la fréquentation
 Site les plus populaires ...
Client ?
 Internaute
– Commerce en ligne
– Site lourds / compliqués (Ebay)
– Problème des formulaires (longs, incompréhen...
Entreprise
 Communiquer
 Echanger (patrimoine)
 Partager (communauté)
 Référentiel
→ Culture d’entreprise
Même problèm...
Pourquoi tant de problèmes
potentiels ?
« plateforme de convergence entre
l’informatique, les télécommunications et
l’audi...
Retour en arrière ?
 Interfaces des années 70, formulaires, peu de
composants, peu d’interaction directe, pas
d’interacti...
Ciblage
 Ciblage du site
– Cahier des charges
– Enquêtes
– Etudes de marché (analyse de la concurrence)
→ Interviews, que...
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 visi...
Check-list
(IBM Webdesign guidelines, 1999)
 L’objectif du site est-il clair ?
 L’audience du site peut-elle clairement ...
Architecture de communication
Identifier :
- les besoins
- les questions
Construire :
- les réponses
- les services
Object...
Cycle de développement simplifié
Analyse du besoin
Architecture de communication
Charte graphique / Protocole de navigatio...
Evaluation
 Prototype horizontal
le langage, la structuration du dialogue, la charte graphique, etc…
 Prototype vertical...
Qualité
 Comportement fonctionnel
– Liens morts
– Liens externes
– Cohérence des liens
 Rendu cohérent
– Plateformes (OS...
Vie du site
 Catalyseurs
– Nom du site
– Pub/information/annonce (Internet et autres médias)
– Référencement (Meta, titre...
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é...
Charte graphique
 Une charte pour tout le site
 Feuille de style (avec et sans)
 Critère déterminant d’adhésion
 Vecte...
Contenu
 Utilisateurs parcourent
 Faire ressortir les éléments clés du texte
gras, puces, liens (attention au texte)
 L...
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 ...
www.ibm.com
 Grosse entreprise
 Dualité du site
(entreprise + site marchand)
 Nombreux points
d’entrée
 Navigation par...
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 titr...
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 sto...
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 perip...
Complex URLs
 a URL should contain human-readable
directory and file names that reflect the nature
of the information spa...
Orphan Pages
 Liens vers la page originale
 Info sur la localisation sur le site
 Infos sur le contenu du site (liens d...
Long Scrolling Pages
 Only 10% of users scroll beyond the
information that is visible on the screen
 1996, mieux mainten...
Lack of Navigation Support
 Don't assume that users know as much about
your site as you do.
 support in the form of a st...
Non-Standard Link Colors
 Link not been seen by the user = blue
 links to previously seen pages = purple or red
 Consis...
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 ...
3 ans plus tard… 1999
 Frame  navigation (back), print, bookmark mais toujours le
problème des URLs
 Bleeding-edge tech...
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 ...
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 fo...
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.
...
Collecting Email Addresses
Without a Privacy Policy
 Every time a website asks for an email
address, users react negative...
URL > 75 Characters
 Long URLs break the Web's social navigation
– Impossible à envoyer par mél
– À retenir
– À copier/co...
Mailto Links in Unexpected
Locations
 Attente sur un lien
– Aller vers une nouvelle page
– Ouvrir un programme de mél pou...
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 ...
Difficile à quantifier ?
 Thomson Multimédia
– Télécommande, 1988
 DSS
– Recepteur satellite, 1994
 Nokia
– Téléphone p...
Méthodes d’évaluation
ergonomique
 Inspection (passage en revue des
composants) : critères ergonomiques + ?
 Heuristique...
Méthodes d’évaluation
ergonomique
 Test d’utilisabilité
 Valider les 3 critères
– Efficacité (utilisateur peut réaliser ...
Test ?
 Évaluer le logiciel, pas l’utilisateur
 Définir des objectifs précis pour les tests
 Panel d’utilisateurs repré...
Conclusion
 Objectif :
Comprendre et intégrer les facteurs clés de
l’utilisabilité
 Prenez du recul
 Sachez anticiper l...
Prochain SlideShare
Chargement dans…5
×

6 1-ergonomie du web

782 vues

Publié le

Publié dans : Formation
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
782
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
12
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

6 1-ergonomie du web

  1. 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. 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. 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. 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. 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. 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. 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. 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. 9. Utilisateurs  Tranche d’âge, professions, connaissances, etc.  Matériel : plateforme, navigateur, bande passante, etc.
  10. 10. Communication  Fonction des objectifs  Fonction des messages à transmettre  Retour : – Fréquentation – Analyse des visites – Enquêtes
  11. 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. 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. 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. 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. 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. 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. 17. La page d’accueil
  18. 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. 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. 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. 21. Communication  Communication  Artistique (œuvre visuelle et sonore)  Interactif
  22. 22. www.ebay.fr  Page accueil très chargée  Trop de zones  Listes redondantes  Liens sans explication
  23. 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. 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. 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. 26. Top Ten Mistakes in Web Design Jakob Nielsen Alertbox – http://www.useit.com 1996
  27. 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. 28. Gratuitous Use of Bleeding- Edge Technology  useful content  good customer service  Versus technology
  29. 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. 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. 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. 32. Long Scrolling Pages  Only 10% of users scroll beyond the information that is visible on the screen  1996, mieux maintenant, mais minimisez !
  33. 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. 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. 35. Outdated Information  New content !!!  Mais aussi – Maintenance – Mise à jour – Retirer les pages/informations obsolètes
  36. 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. 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. 38. Top Ten Web-Design Mistakes of 2002 Jakob Nielsen Alertbox – http://www.useit.com 2002
  39. 39. No Prices  B2B : oublis fréquent  B2C : oublis dans les listes, les résultats de recherche, etc…
  40. 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. 41. Horizontal Scrolling  Users hate scrolling left to right  Optimized for 805-pixel-wide
  42. 42. Fixed Font Size  Style sheets problem  95% temps = trop petit  Problème plateforme  Problème âge utilisateurs
  43. 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. 44. JavaScript in Links  Users hate unwarranted pop-up windows.  Users deserve to control their own destiny.
  45. 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. 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. 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. 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. 49. Remarques  Le Mél – 3 dernières – Le plus vieux, le plus utilisé – À intégrer avec le web
  50. 50. Pratique de l’utilisabilité "Quoi faire ?" Plutôt que "Comment le faire ?"
  51. 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. 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. 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. 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. 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. 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

×