Conception & Ergonomie du Web

1. Conception & Ergonomie du Web Cedric.Dumas@emn.frcontrat 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é : • Pas de cadres (Frames) • 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 Construire :- les réponses- les services Objectifs de communication Services • Identifier :- les besoins- les questions 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 communicationmarketingutilisabilitégraphiquerédactiondéveloppement Développement Référencement / Mise en ligne Attention à la gestion de la vie du site Maintenance / …

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

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 plateformeRideau 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 textegras, puces, liens (attention au texte) • LisibilitéJustifié à gauche, important en haut de page, imprimable • Concisionessentiel, 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. Boutons peu cliquables eBay Lien actif pointant sur elle-même 3 zones de navigation superposées deux zonesde recherche Signature trop loin du logo (pas intégrée) www.ebay.fr 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. Moteur de recherche dans une zone dégagée semble servir de titreaux rubriques dessous Commencer par destermes clés pas d’auto-pointage petites images pas de lien vers le panier problème de la segmentationpar marché (vision fournisseur) Pas d’informations précises(tournures purement marketingsans fait concret font fuir Glt) majuscule/minuscule Lien ? vocabulaire marketing(n’aide pas à comprendre) www.ibm.com

26. Top Ten Mistakes in Web Design Jakob NielsenAlertbox – http://www.useit.com1996

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

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 NielsenAlertbox – http://www.useit.com2002

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 ?"