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

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 joe@yahoo.fr ou mickey@mouse.com

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