SlideShare une entreprise Scribd logo
1  sur  56
Conception & Ergonomie du Web
Cedric.Dumas@emn.fr
contrat 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
communication
marketing
utilisabilité
graphique
rédaction
développement
Evaluation
 Prototype horizontal
le langage, la structuration du dialogue, la charte graphique, etc…
 Prototype vertical
les services, la plateforme, les tâches réelles (mise en situation,
verbalisation)
 Protocole de navigation
chemin le plus court, repérage, orientation, mémorisation
 Mesure de performance (efficacité du site)
temps, taux de réussite, taux d’erreurs, etc.
 Compréhension
compré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 zones
de 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ée
pas d’auto-pointage
pas de lien vers le panier
semble servir de titre
aux rubriques dessous
vocabulaire marketing
(n’aide pas à comprendre)
problème de la segmentation
par marché (vision fournisseur)
majuscule/minuscule
petites images
Pas d’informations précises
(tournures purement marketing
sans fait concret font fuir Glt)
Lien ?
Commencer par des
termes clés
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 w
 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 Nielsen
Alertbox –
http://www.useit.com
2002
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 users
Test 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

Contenu connexe

Tendances

Associations & Digital : Faites le tri dans vos outils - Forum National des A...
Associations & Digital : Faites le tri dans vos outils - Forum National des A...Associations & Digital : Faites le tri dans vos outils - Forum National des A...
Associations & Digital : Faites le tri dans vos outils - Forum National des A...
PickAsso
 
Conception et refonte d'un site web : les bonnes pratiques
Conception et refonte d'un site web : les bonnes pratiquesConception et refonte d'un site web : les bonnes pratiques
Conception et refonte d'un site web : les bonnes pratiques
Tarn Tourisme
 
Audit personnalisé Performance Tourisme
Audit personnalisé Performance TourismeAudit personnalisé Performance Tourisme
Audit personnalisé Performance Tourisme
Performance_Tourisme
 

Tendances (19)

Rédaction web et référencement naturel - la Licence Pro de Mulhouse
Rédaction web et référencement naturel - la Licence Pro de MulhouseRédaction web et référencement naturel - la Licence Pro de Mulhouse
Rédaction web et référencement naturel - la Licence Pro de Mulhouse
 
Associations & Digital : Faites le tri dans vos outils - Forum National des A...
Associations & Digital : Faites le tri dans vos outils - Forum National des A...Associations & Digital : Faites le tri dans vos outils - Forum National des A...
Associations & Digital : Faites le tri dans vos outils - Forum National des A...
 
Améliorer la visibilité de votre association sur le web et vous équiper des o...
Améliorer la visibilité de votre association sur le web et vous équiper des o...Améliorer la visibilité de votre association sur le web et vous équiper des o...
Améliorer la visibilité de votre association sur le web et vous équiper des o...
 
Conception et refonte d'un site web : les bonnes pratiques
Conception et refonte d'un site web : les bonnes pratiquesConception et refonte d'un site web : les bonnes pratiques
Conception et refonte d'un site web : les bonnes pratiques
 
Le positionnement d'un site repose sur des contenus accessibles
Le positionnement d'un site repose sur des contenus accessiblesLe positionnement d'un site repose sur des contenus accessibles
Le positionnement d'un site repose sur des contenus accessibles
 
Guide internet
Guide internetGuide internet
Guide internet
 
OT Evreux Normandie : E reputation & avis client
OT Evreux Normandie : E reputation & avis clientOT Evreux Normandie : E reputation & avis client
OT Evreux Normandie : E reputation & avis client
 
Ecrire pour le Web en 2010
Ecrire pour le Web en 2010Ecrire pour le Web en 2010
Ecrire pour le Web en 2010
 
Formation référencement
Formation référencementFormation référencement
Formation référencement
 
Tirer profit du web en 2011
Tirer profit du web en 2011Tirer profit du web en 2011
Tirer profit du web en 2011
 
Audit personnalisé Performance Tourisme
Audit personnalisé Performance TourismeAudit personnalisé Performance Tourisme
Audit personnalisé Performance Tourisme
 
Rendez-vous du numérique : comment séduire mon touriste connecté ?
Rendez-vous du numérique : comment séduire mon touriste connecté ?Rendez-vous du numérique : comment séduire mon touriste connecté ?
Rendez-vous du numérique : comment séduire mon touriste connecté ?
 
Ergonomie des sites internet touristique
Ergonomie des sites internet touristiqueErgonomie des sites internet touristique
Ergonomie des sites internet touristique
 
Creation de site web et mobile efficace
Creation de site web et mobile efficaceCreation de site web et mobile efficace
Creation de site web et mobile efficace
 
Outils de promotion et d'animation d'un site web
Outils de promotion et d'animation d'un site webOutils de promotion et d'animation d'un site web
Outils de promotion et d'animation d'un site web
 
Ergonomie Design dans le e-tourisme
Ergonomie Design dans le e-tourismeErgonomie Design dans le e-tourisme
Ergonomie Design dans le e-tourisme
 
10 bénéfices d'une bonne architecture d'information - Webinar Yellow Dolphin...
10 bénéfices d'une bonne architecture d'information -  Webinar Yellow Dolphin...10 bénéfices d'une bonne architecture d'information -  Webinar Yellow Dolphin...
10 bénéfices d'une bonne architecture d'information - Webinar Yellow Dolphin...
 
Entrez dans l'E-Tourisme 2012
Entrez dans l'E-Tourisme 2012Entrez dans l'E-Tourisme 2012
Entrez dans l'E-Tourisme 2012
 
Création & refonte de site internet
Création & refonte de site internet Création & refonte de site internet
Création & refonte de site internet
 

En vedette

Programme rencontre nationale de francais 2012
Programme rencontre nationale de francais 2012Programme rencontre nationale de francais 2012
Programme rencontre nationale de francais 2012
Rafael Angel
 
Trabajo practico numero 1 lucila zamora
Trabajo practico numero 1 lucila zamoraTrabajo practico numero 1 lucila zamora
Trabajo practico numero 1 lucila zamora
luly-z
 
Vbscript
VbscriptVbscript
Vbscript
ouedib
 
L'encre électronique entre parenthèses
L'encre électronique entre parenthèsesL'encre électronique entre parenthèses
L'encre électronique entre parenthèses
personalcare
 
La familia como núcleo vital de sociedad
La familia como núcleo vital de sociedadLa familia como núcleo vital de sociedad
La familia como núcleo vital de sociedad
Cristina Armas
 
Votre stratégie d\'épargne-études obtiendrait-elle une bonne note ?
Votre stratégie d\'épargne-études obtiendrait-elle une bonne note ?Votre stratégie d\'épargne-études obtiendrait-elle une bonne note ?
Votre stratégie d\'épargne-études obtiendrait-elle une bonne note ?
OMIRAJ
 
Criterios de evaluación y promoción del alumnado.
Criterios de evaluación y promoción del alumnado.Criterios de evaluación y promoción del alumnado.
Criterios de evaluación y promoción del alumnado.
CEIP CIudad de Belda
 

En vedette (20)

D sa xha.1090
D sa xha.1090D sa xha.1090
D sa xha.1090
 
Rapport d'activité SoFAB 2014-2015
Rapport d'activité SoFAB 2014-2015Rapport d'activité SoFAB 2014-2015
Rapport d'activité SoFAB 2014-2015
 
Programme rencontre nationale de francais 2012
Programme rencontre nationale de francais 2012Programme rencontre nationale de francais 2012
Programme rencontre nationale de francais 2012
 
Introducció a la qualitat
Introducció a la qualitatIntroducció a la qualitat
Introducció a la qualitat
 
Trabajo practico numero 1 lucila zamora
Trabajo practico numero 1 lucila zamoraTrabajo practico numero 1 lucila zamora
Trabajo practico numero 1 lucila zamora
 
Visit london
Visit londonVisit london
Visit london
 
Catalogue ETE 2017
Catalogue ETE 2017Catalogue ETE 2017
Catalogue ETE 2017
 
Computraining replay
Computraining replayComputraining replay
Computraining replay
 
Vbscript
VbscriptVbscript
Vbscript
 
Stratégie de communication salon 100% en ligne
Stratégie de communication salon 100% en ligneStratégie de communication salon 100% en ligne
Stratégie de communication salon 100% en ligne
 
I&e marques et blogueurs
I&e marques et blogueursI&e marques et blogueurs
I&e marques et blogueurs
 
ça marchait pourtant en dev
ça marchait pourtant en devça marchait pourtant en dev
ça marchait pourtant en dev
 
L'encre électronique entre parenthèses
L'encre électronique entre parenthèsesL'encre électronique entre parenthèses
L'encre électronique entre parenthèses
 
2015
20152015
2015
 
La familia como núcleo vital de sociedad
La familia como núcleo vital de sociedadLa familia como núcleo vital de sociedad
La familia como núcleo vital de sociedad
 
Devoirs semaine 1 - 6e
Devoirs semaine 1 - 6eDevoirs semaine 1 - 6e
Devoirs semaine 1 - 6e
 
Votre stratégie d\'épargne-études obtiendrait-elle une bonne note ?
Votre stratégie d\'épargne-études obtiendrait-elle une bonne note ?Votre stratégie d\'épargne-études obtiendrait-elle une bonne note ?
Votre stratégie d\'épargne-études obtiendrait-elle une bonne note ?
 
Binder1
Binder1Binder1
Binder1
 
2choix rl
2choix rl2choix rl
2choix rl
 
Criterios de evaluación y promoción del alumnado.
Criterios de evaluación y promoción del alumnado.Criterios de evaluación y promoción del alumnado.
Criterios de evaluación y promoción del alumnado.
 

Similaire à 6 1-ergonomie du web

Competitic ergonomie site web - numerique en entreprise
Competitic   ergonomie site web - numerique en entrepriseCompetitic   ergonomie site web - numerique en entreprise
Competitic ergonomie site web - numerique en entreprise
COMPETITIC
 
Hec Ergonomie
Hec ErgonomieHec Ergonomie
Hec Ergonomie
mastertic
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
Khaled Djebloun
 

Similaire à 6 1-ergonomie du web (20)

Optimiser site Internet
Optimiser site InternetOptimiser site Internet
Optimiser site Internet
 
Les nouveaux contenus sur internet
Les nouveaux contenus sur internetLes nouveaux contenus sur internet
Les nouveaux contenus sur internet
 
Site Internet, les tendances en 2014
Site Internet, les tendances en 2014Site Internet, les tendances en 2014
Site Internet, les tendances en 2014
 
Site internet : les tendances pour 2014
Site internet : les tendances pour 2014Site internet : les tendances pour 2014
Site internet : les tendances pour 2014
 
Compil Atelier 12 - Ergonomie VEM 2009.ppt
Compil Atelier 12 - Ergonomie VEM 2009.pptCompil Atelier 12 - Ergonomie VEM 2009.ppt
Compil Atelier 12 - Ergonomie VEM 2009.ppt
 
Atelier 12 Ergonomie Voyage en Multimédia 2009
Atelier 12   Ergonomie Voyage en Multimédia 2009Atelier 12   Ergonomie Voyage en Multimédia 2009
Atelier 12 Ergonomie Voyage en Multimédia 2009
 
Competitic ergonomie site web - numerique en entreprise
Competitic   ergonomie site web - numerique en entrepriseCompetitic   ergonomie site web - numerique en entreprise
Competitic ergonomie site web - numerique en entreprise
 
Un site Web de qualité
Un site Web de qualitéUn site Web de qualité
Un site Web de qualité
 
Conf croix
Conf croixConf croix
Conf croix
 
Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"
 
Hec Ergonomie
Hec ErgonomieHec Ergonomie
Hec Ergonomie
 
Cours e-marketing
Cours e-marketingCours e-marketing
Cours e-marketing
 
20 bons tuyaux etourisme pour les pros
20 bons tuyaux etourisme pour les pros20 bons tuyaux etourisme pour les pros
20 bons tuyaux etourisme pour les pros
 
PickAsso - Exemple d'Audit Digital anonyme
PickAsso -  Exemple d'Audit Digital anonymePickAsso -  Exemple d'Audit Digital anonyme
PickAsso - Exemple d'Audit Digital anonyme
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 
2016 Création Refonte Site
2016 Création Refonte Site2016 Création Refonte Site
2016 Création Refonte Site
 
Création de son site Internet
Création de son site InternetCréation de son site Internet
Création de son site Internet
 
Comment rédiger un cahier des charges de site web
Comment rédiger un cahier des charges de site webComment rédiger un cahier des charges de site web
Comment rédiger un cahier des charges de site web
 
Atelier Frotsi après-midi
Atelier Frotsi après-midiAtelier Frotsi après-midi
Atelier Frotsi après-midi
 
Atelier umen - Introduction au marketing en ligne
Atelier umen - Introduction au marketing en ligneAtelier umen - Introduction au marketing en ligne
Atelier umen - Introduction au marketing en ligne
 

Plus de RYMAA (14)

Cours referencement web_analytics
Cours referencement web_analyticsCours referencement web_analytics
Cours referencement web_analytics
 
Atelier HTML
Atelier HTMLAtelier HTML
Atelier HTML
 
E marketing
E marketingE marketing
E marketing
 
Ajax intro 2pp
Ajax intro 2ppAjax intro 2pp
Ajax intro 2pp
 
Concevoir un jeu-concours
Concevoir un jeu-concoursConcevoir un jeu-concours
Concevoir un jeu-concours
 
Analyseur sax
Analyseur saxAnalyseur sax
Analyseur sax
 
Les clés du e marketing et e-commerce
Les clés du e marketing et e-commerceLes clés du e marketing et e-commerce
Les clés du e marketing et e-commerce
 
Angluars js
Angluars jsAngluars js
Angluars js
 
Ch 1-la-révolution-des-tic-2010
Ch 1-la-révolution-des-tic-2010Ch 1-la-révolution-des-tic-2010
Ch 1-la-révolution-des-tic-2010
 
Programme MOOC
Programme MOOCProgramme MOOC
Programme MOOC
 
Programme officiel-journée-des-mooc
Programme officiel-journée-des-moocProgramme officiel-journée-des-mooc
Programme officiel-journée-des-mooc
 
C2 écrire en français (formules)
C2   écrire en français (formules)C2   écrire en français (formules)
C2 écrire en français (formules)
 
Formation joomla 1ere_session
Formation joomla 1ere_sessionFormation joomla 1ere_session
Formation joomla 1ere_session
 
Interface collectionsinter
Interface collectionsinterInterface collectionsinter
Interface collectionsinter
 

Dernier

ilide.info-cours-recherche-d-emploi-pr_aa839df7439dd234c803551c86e0197c.pdf
ilide.info-cours-recherche-d-emploi-pr_aa839df7439dd234c803551c86e0197c.pdfilide.info-cours-recherche-d-emploi-pr_aa839df7439dd234c803551c86e0197c.pdf
ilide.info-cours-recherche-d-emploi-pr_aa839df7439dd234c803551c86e0197c.pdf
ssuser6041d32
 

Dernier (14)

Saint Damien, missionnaire auprès des lépreux de Molokai, Hawaï.pptx
Saint Damien, missionnaire auprès des lépreux de Molokai, Hawaï.pptxSaint Damien, missionnaire auprès des lépreux de Molokai, Hawaï.pptx
Saint Damien, missionnaire auprès des lépreux de Molokai, Hawaï.pptx
 
Fiche de vocabulaire pour faire une appréciation
Fiche de vocabulaire pour faire une appréciationFiche de vocabulaire pour faire une appréciation
Fiche de vocabulaire pour faire une appréciation
 
Réunion des directeurs de Jonzac - 15 mai 2024
Réunion des directeurs de Jonzac - 15 mai 2024Réunion des directeurs de Jonzac - 15 mai 2024
Réunion des directeurs de Jonzac - 15 mai 2024
 
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptxGHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
 
GHASSOUB _Seance 3_ measurement and evaluation in education.pptx
GHASSOUB _Seance 3_ measurement and evaluation in education.pptxGHASSOUB _Seance 3_ measurement and evaluation in education.pptx
GHASSOUB _Seance 3_ measurement and evaluation in education.pptx
 
Texte avec différentes critiques positives, négatives ou mitigées
Texte avec différentes critiques positives, négatives ou mitigéesTexte avec différentes critiques positives, négatives ou mitigées
Texte avec différentes critiques positives, négatives ou mitigées
 
Neuvaine de la Pentecôte avec des textes de saint Jean Eudes
Neuvaine de la Pentecôte avec des textes de saint Jean EudesNeuvaine de la Pentecôte avec des textes de saint Jean Eudes
Neuvaine de la Pentecôte avec des textes de saint Jean Eudes
 
Nathanaëlle Herbelin.pptx Peintre française
Nathanaëlle Herbelin.pptx Peintre françaiseNathanaëlle Herbelin.pptx Peintre française
Nathanaëlle Herbelin.pptx Peintre française
 
CALENDRIER ET COMPTE RENDU REUNION DIRECTION
CALENDRIER ET COMPTE RENDU REUNION DIRECTIONCALENDRIER ET COMPTE RENDU REUNION DIRECTION
CALENDRIER ET COMPTE RENDU REUNION DIRECTION
 
Un petit coin etwinning- Au fil des cultures urbaines
Un petit coin  etwinning- Au fil des cultures urbainesUn petit coin  etwinning- Au fil des cultures urbaines
Un petit coin etwinning- Au fil des cultures urbaines
 
Àma Gloria.pptx Un film tourné au Cap Vert et en France
Àma Gloria.pptx   Un film tourné au Cap Vert et en FranceÀma Gloria.pptx   Un film tourné au Cap Vert et en France
Àma Gloria.pptx Un film tourné au Cap Vert et en France
 
Chapitre3-Classififcation des structures de chaussu00E9e.pptx
Chapitre3-Classififcation des structures de  chaussu00E9e.pptxChapitre3-Classififcation des structures de  chaussu00E9e.pptx
Chapitre3-Classififcation des structures de chaussu00E9e.pptx
 
complement de agri cours irrigation.pptx
complement de agri cours irrigation.pptxcomplement de agri cours irrigation.pptx
complement de agri cours irrigation.pptx
 
ilide.info-cours-recherche-d-emploi-pr_aa839df7439dd234c803551c86e0197c.pdf
ilide.info-cours-recherche-d-emploi-pr_aa839df7439dd234c803551c86e0197c.pdfilide.info-cours-recherche-d-emploi-pr_aa839df7439dd234c803551c86e0197c.pdf
ilide.info-cours-recherche-d-emploi-pr_aa839df7439dd234c803551c86e0197c.pdf
 

6 1-ergonomie du web

  • 1. Conception & Ergonomie du Web Cedric.Dumas@emn.fr contrat 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é : 1. Pas de cadres (Frames) 2. 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 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.
  • 13. 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 communication marketing utilisabilité graphique rédaction développement
  • 14. Evaluation  Prototype horizontal le langage, la structuration du dialogue, la charte graphique, etc…  Prototype vertical les services, la plateforme, les tâches réelles (mise en situation, verbalisation)  Protocole de navigation chemin le plus court, repérage, orientation, mémorisation  Mesure de performance (efficacité du site) temps, taux de réussite, taux d’erreurs, etc.  Compréhension compré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 plateforme Rideau de construction, liens externes, statistiques, dialogue (questions, réponses, etc)
  • 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 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
  • 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. www.ebay.fr Lien actif pointant sur elle-même 3 zones de navigation superposées eBay Boutons peu cliquables deux zones de recherche Signature trop loin du logo (pas intégrée) 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. www.ibm.com Moteur de recherche dans une zone dégagée pas d’auto-pointage pas de lien vers le panier semble servir de titre aux rubriques dessous vocabulaire marketing (n’aide pas à comprendre) problème de la segmentation par marché (vision fournisseur) majuscule/minuscule petites images Pas d’informations précises (tournures purement marketing sans fait concret font fuir Glt) Lien ? Commencer par des termes clés
  • 26. Top Ten Mistakes in Web Design Jakob Nielsen Alertbox – http://www.useit.com 1996
  • 27. Using Frames  confusing for users since frames break the fundamental user model of the w  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 Nielsen Alertbox – http://www.useit.com 2002
  • 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 ?"
  • 51. 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)
  • 52. 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)
  • 53. 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
  • 54. 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
  • 55. 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 users Test 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)
  • 56. 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