Conception & Ergonomie du Web

Cedric.Dumas@emn.fr contrat Creative Commons Paternit-Pas d'Utilisation CommercialePartage des Conditions Initiales l'Identique 2.0 France License

Internet
(Intranet et Extranet)

Moyen de communication

Dcentralis Ouvert Grand public et professionnel

Sur le web, lutilisateur contrle lusage

Utilisabilit
Possibilit de naviguer Capacit de se reprer Impact sur la frquentation Site les plus populaires ne pose pas de problmes majeurs dutilisabilit :
1. 2.

Pas de cadres (Frames) Temps de chargement trs court

Client ?
Internaute

Commerce en ligne Site lourds / compliqus (Ebay) Problme des formulaires (longs, incomprhension) Pas de fidlisation, dcouragement, prjudice limage de la socit, etc

IBM, 1998 : homognit, accs rapide, 120k/1M +120% en mars 1999

Entreprise
Communiquer Echanger (patrimoine) Partager (communaut) Rfrentiel Culture dentreprise Mme problme de design : nervement, perte de temps, stress, gaspillage, etc

Pourquoi tant de problmes potentiels ?

plateforme de convergence entre linformatique, les tlcommunications et laudiovisuel (JF Abramatic, INRIA) + marketing + infographie + ergonomie etc

Retour en arrire ?
Interfaces des annes 70, formulaires, peu de composants, peu dinteraction directe, pas dinteractions spcialises, etc Web

Dynamique Utilisateur pas propritaire de lappli Utilisateur navigue et parcoure linformation (butine) Plus gros potentiel derreurs Beaucoup de catgories dutilisateurs potentielles

Ciblage
Ciblage du site
Cahier des charges Enqutes Etudes de march (analyse de la concurrence) Interviews, questionnaires, groupes de travail,etc.

Etude utilisateurs

Attentes, contexte dutilisation, objectifs Existant (web ou autres moyens)

Utilisateurs
Tranche dge, professions, connaissances, etc. Matriel : plateforme, navigateur, bande passante, etc.

Communication
Fonction des objectifs Fonction des messages transmettre Retour :

Frquentation Analyse des visites Enqutes

Check-list
(IBM Webdesign guidelines, 1999)
Lobjectif du site est-il clair ? Laudience du site peut-elle clairement sidentifier ? Le Site est-il utile et pertinent pour ce public ? Le Site est-il intressant ? Le Site permet-il aux visiteurs de raliser toutes les tches quils veulent accomplir ? Les visiteurs peuvent-ils accomplir facilement ces tches ? Le contenu et lorganisation des informations sont-ils cohrents avec lobjectif du site ? Linformation 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 agrable ? Les pages se chargent-elles suffisamment vite ?

Architecture de communication

Objectifs de communication Services

Identifier : - les besoins - les questions

Construire : - les rponses - les services

Dcrire larborescence du site en incluant pour chaque pages : les services, la cible et lobjectif.

Cycle de dveloppement simplifi

Analyse du besoin Architecture de communication Charte graphique / Protocole de navigation
communication marketing utilisabilit graphique rdaction dveloppement

Prototypage Dveloppement Rfrencement / Mise en ligne

Attention la gestion de la vie du site

Maintenance /

Evaluation
Prototype horizontal
le langage, la structuration du dialogue, la charte graphique, etc

Prototype vertical
les services, la plateforme, les tches relles (mise en situation, verbalisation)

Protocole de navigation
chemin le plus court, reprage, orientation, mmorisation

Mesure de performance (efficacit du site)

temps, taux de russite, taux derreurs, etc.

Comprhension
comprhension de linformation, importance relative

Qualit
Comportement fonctionnel

Liens morts Liens externes Cohrence des liens Plateformes (OS, rsolution, cran, etc) Temps de transfert / chargements (30s 10s 8s) Navigateurs Normes Complet (texte alternatif aux images, etc)

Rendu cohrent

Syntaxe

Vie du site
Catalyseurs

Nom du site Pub/information/annonce (Internet et autres mdias) Rfrencement (Meta, titre, page accueil, etc)

Mise jour Amlioration de la plateforme

Rideau de construction, liens externes, statistiques, dialogue (questions, rponses, etc)

La page daccueil

Agencement de la page
Disposition rgulire Allger les pages Utiliser une rsolution dcran moyenne Zone protge de 640x480 Eviter les barres de dfilement Eviter les cadres Page courte facilite la lecture (0<x<=50 lignes) Retour en haut de page Navigation locale, rpte

Charte graphique
Une charte pour tout le site Feuille de style (avec et sans) Critre dterminant dadhsion Vecteur de communication important Fonds de page dgrads, clairs Utiliser des images lorsque cest 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 lments cls du texte
gras, puces, liens (attention au texte)

Lisibilit
Justifi gauche, important en haut de page, imprimable

Concision
essentiel, rdiger simplement, tre objectifs, paragraphes courts, conclusion/rsum au dbut (pyramide inverse)

Netiquette

Communication
Communication Artistique (uvre visuelle et sonore) Interactif

www.ebay.fr
Page accueil trs charge Trop de zones Listes redondantes Liens sans explication

Boutons peu cliquables eBay Lien actif pointant sur elle-mme

www.ebay.fr

3 zones de navigation superposes

deux zones de recherche Signature trop loin du logo (pas intgre)

Page postrieure ltude de Nielsen (55 % des problmes rsolus)

www.ibm.com
Grosse entreprise Dualit du site
(entreprise + site marchand)

Nombreux points dentre Navigation par type de client Qute de simplicit

(liens succincts, textes minimaux)

semble servir de titre pas dauto-pointage aux rubriques dessous

Moteur de recherche dans une zone dgage petites images

www.ibm.com
pas de lien vers le panier problme de la segmentation par march (vision fournisseur) Pas dinformations prcises
(tournures purement marketing sans fait vocabulaire concret font fuir Glt) marketing

majuscule/minuscule

Lien ?

Commencer par des (naide pas comprendre) termes cls

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 web page you cannot bookmark URLs stop working Printouts become difficult the predictability of user actions

Gratuitous Use of BleedingEdge 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 lextrieur) 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 obsoltes

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 problme des URLs Bleeding-edge technology S. T. & anim volont de se diffrencier, etc. Complex URLs amlioration des syst. Nav. Orphan pages super user rcrivent les urls Scrolling navigation pages mitig, usable si bien gre Lack of navigation support recommendations et habitudes non respectes (logo en haut gauche) Non-standard link colors mme problme Outdated information pire, trust <> credibility Slow download times fantasmes sur BP

Top Ten Web-Design Mistakes of 2002

Jakob Nielsen
Alertbox http://www.useit.com 2002

No Prices
B2B : oublis frquent B2C : oublis dans les listes, les rsultats 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 Problme plateforme Problme 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 ml 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 ml pour crire plutt que lire

Ancre explicite Pas sur des noms (pages web perso)

Remarques
Le Ml

3 dernires Le plus vieux, le plus utilis intgrer avec le web

Pratique de lutilisabilit

"Quoi faire ?" Plutt que "Comment le faire ?"

Usability =
Utilisabilit, critre de choix Dvelopement

Rduction des cots Intgration de lutilisateur final = consolidation 70 80% des cots sont engags au dbut du projet viter les retours arrires (surcot) Critre dacceptation du produit final

48 80 % du code internet dvelopp Pratique = 6% du cot dun projet (faible / enjeux) Globalement, amliore la r-utilisabilit des composants (enrichissement, cycle damlioration)

Difficile quantifier ?
Thomson Multimdia

Tlcommande, 1988 Recepteur satellite, 1994 Tlphone portable, 2000

DSS

Nokia

Amlioration minime = gros gain quand beaucoup demploys Productivit (entreprise utilisatrice) Attractivit (entreprise vendeuse)

Mthodes dvaluation ergonomique

Inspection (passage en revue des composants) : critres ergonomiques + ? Heuristique (inspection base sur la comptence et les connaissances de lvaluateur) Evaluation cooprative : prototype ou +

Observation Verbalisation

Mthodes dvaluation ergonomique

Test dutilisabilit Valider les 3 critres

Efficacit (utilisateur peut raliser sa tche) Efficience (avec un minimum de ressources) Satisfaction (agrable utiliser)

Contexte proche situation relle (pas aider ni rien) Observation, mesure, questionnaires

Comportement : comment il navigue, les infos quil cherche Performance : temps, erreurs, impasses, volution, Analyse chaud aprs Consigne, objectifs, plateforme, conditions, etc

Protocole ! (mme test pour chacun)

Test ?
valuer le logiciel, pas lutilisateur Dfinir des objectifs prcis pour les tests Panel dutilisateurs reprsentatifs Nielsen (Alterbox, 2000) Why you only need to test with 5 users
Test avec 5 utilisateurs lvent 80% des problmes dutilisabilit (pour un groupe donn dutilisateur, en amliorant chaque fois)

Attention vous : dveloppeur <> utilisateur ! (! Comptences, ! Techno, ! PDG)

Conclusion
Objectif : Comprendre et intgrer les facteurs cls de lutilisabilit Prenez du recul Sachez anticiper les cots, les impacts Faites de la Conception Centre Utilisateur