6 1-ergonomie du web
TRANSCRIPT
Conception & Ergonomie du Web
[email protected] 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
communicationmarketingutilisabilitégraphiquerédaction
développement
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
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 zonesde 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é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
Top Ten Mistakes in Web Design
Jakob NielsenAlertbox – http://www.useit.com1996
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 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 NielsenAlertbox – http://www.useit.com2002
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– 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 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)
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