6 1-ergonomie du web
Transcript of 6 1-ergonomie du web
![Page 1: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/1.jpg)
Conception & Ergonomie du Web
[email protected] Creative Commons Paternité-Pas d'Utilisation Commerciale-
Partage des Conditions Initiales à l'Identique 2.0 France License
![Page 2: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/2.jpg)
Internet (Intranet et Extranet)
Moyen de communication– Décentralisé– Ouvert– Grand public et professionnel
Sur le web, l’utilisateur contrôle l’usage
![Page 3: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/3.jpg)
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
![Page 4: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/4.jpg)
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
![Page 5: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/5.jpg)
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…
![Page 6: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/6.jpg)
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…
![Page 7: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/7.jpg)
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
![Page 8: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/8.jpg)
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)
![Page 9: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/9.jpg)
Utilisateurs
Tranche d’âge, professions, connaissances, etc.
Matériel : plateforme, navigateur, bande passante, etc.
![Page 10: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/10.jpg)
Communication
Fonction des objectifs Fonction des messages à transmettre
Retour :– Fréquentation– Analyse des visites– Enquêtes
![Page 11: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/11.jpg)
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 ?
![Page 12: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/12.jpg)
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.
![Page 13: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/13.jpg)
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
communicationmarketingutilisabilitégraphiquerédaction
développement
![Page 14: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/14.jpg)
Evaluation
Prototype horizontalle langage, la structuration du dialogue, la charte graphique, etc…
Prototype verticalles services, la plateforme, les tâches réelles (mise en situation, verbalisation)
Protocole de navigationchemin le plus court, repérage, orientation, mémorisation
Mesure de performance (efficacité du site)temps, taux de réussite, taux d’erreurs, etc.
Compréhensioncompréhension de l’information, importance relative
![Page 15: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/15.jpg)
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)
![Page 16: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/16.jpg)
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)
![Page 17: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/17.jpg)
La page d’accueil
![Page 18: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/18.jpg)
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
![Page 19: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/19.jpg)
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
![Page 20: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/20.jpg)
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
![Page 21: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/21.jpg)
Communication
Communication Artistique (œuvre visuelle et sonore) Interactif
![Page 22: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/22.jpg)
www.ebay.fr
Page accueil très chargée Trop de zones Listes redondantes Liens sans explication
![Page 23: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/23.jpg)
www.ebay.fr
Lien actif pointant sur elle-même
3 zones de navigation superposées
eBay
Boutons peu cliquables
deux zonesde recherche
Signature trop loin du logo (pas intégrée)
Page postérieure à l’étude de Nielsen (55 % des problèmes résolus)
![Page 24: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/24.jpg)
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)
![Page 25: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/25.jpg)
www.ibm.com
Moteur de recherche dans une zone dégagéepas d’auto-pointage
pas de lien vers le panier
semble servir de titreaux rubriques dessous
vocabulaire marketing(n’aide pas à comprendre)
problème de la segmentationpar marché (vision fournisseur)
majuscule/minuscule
petites images
Pas d’informations précises(tournures purement marketingsans fait concret font fuir Glt)
Lien ?
Commencer par destermes clés
![Page 26: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/26.jpg)
Top Ten Mistakes in Web Design
Jakob NielsenAlertbox – http://www.useit.com1996
![Page 27: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/27.jpg)
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
![Page 28: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/28.jpg)
Gratuitous Use of Bleeding-Edge Technology
useful content good customer service Versus technology
![Page 29: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/29.jpg)
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
![Page 30: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/30.jpg)
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 !
![Page 31: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/31.jpg)
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
![Page 32: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/32.jpg)
Long Scrolling Pages
Only 10% of users scroll beyond the information that is visible on the screen
1996, mieux maintenant, mais minimisez !
![Page 33: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/33.jpg)
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 !
![Page 34: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/34.jpg)
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.
![Page 35: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/35.jpg)
Outdated Information
New content !!! Mais aussi
– Maintenance– Mise à jour– Retirer les pages/informations obsolètes
![Page 36: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/36.jpg)
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
![Page 37: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/37.jpg)
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
![Page 38: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/38.jpg)
Top Ten Web-Design Mistakes of 2002
Jakob NielsenAlertbox – http://www.useit.com2002
![Page 39: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/39.jpg)
No Prices
B2B : oublis fréquent B2C : oublis dans les listes, les résultats de
recherche, etc…
![Page 40: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/40.jpg)
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
![Page 41: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/41.jpg)
Horizontal Scrolling
Users hate scrolling left to right Optimized for 805-pixel-wide
![Page 42: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/42.jpg)
Fixed Font Size
Style sheets problem 95% temps = trop petit Problème plateforme Problème âge utilisateurs
![Page 43: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/43.jpg)
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.
![Page 44: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/44.jpg)
JavaScript in Links
Users hate unwarranted pop-up windows. Users deserve to control their own destiny.
![Page 45: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/45.jpg)
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.
![Page 46: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/46.jpg)
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]
![Page 47: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/47.jpg)
URL > 75 Characters
Long URLs break the Web's social navigation– Impossible à envoyer par mél– À retenir– À copier/coller
Bad way to lose business…
![Page 48: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/48.jpg)
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)
![Page 49: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/49.jpg)
Remarques
Le Mél– 3 dernières– Le plus vieux, le plus utilisé– À intégrer avec le web
![Page 50: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/50.jpg)
Pratique de l’utilisabilité
"Quoi faire ?" Plutôt que"Comment le faire ?"
![Page 51: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/51.jpg)
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)
![Page 52: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/52.jpg)
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)
![Page 53: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/53.jpg)
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
![Page 54: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/54.jpg)
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
![Page 55: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/55.jpg)
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 usersTest 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)
![Page 56: 6 1-ergonomie du web](https://reader035.fdocument.pub/reader035/viewer/2022062312/555df817d8b42a3f618b4cbb/html5/thumbnails/56.jpg)
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