ergonomie & ux
DESCRIPTION
Eléments d'introduction à l'ergonomie d'un site web à partir du livre Ergonomie Web d'Amélie BoucherTRANSCRIPT
UX : User Experience Quelques règles d’ergonomie...
mercredi 3 septembre 14
mercredi 3 septembre 14
Introduction et généralités d’usage
mercredi 3 septembre 14
mercredi 3 septembre 14
Différents objets que l’on peut améliorer d’un point de vue ergonomique
mercredi 3 septembre 14
Un site web ergonomique est un site utile et utilisable
mercredi 3 septembre 14
mercredi 3 septembre 14
Règle n°1
mercredi 3 septembre 14
Se méfier des règles !
mercredi 3 septembre 14
La règle des 3 clics ?
mercredi 3 septembre 14
On oublie...
mercredi 3 septembre 14
On retient :
mercredi 3 septembre 14
À chaque clic, je progresse...
mercredi 3 septembre 14
On soigne :
mercredi 3 septembre 14
‣ Le chemin parcouru : fil d’Ariane ou breadcrumb
‣ On met en valeur la localisation de l’internaute : où il se trouve dans le site
‣ On lui indique le chemin à parcourir
mercredi 3 septembre 14
Exemple
mercredi 3 septembre 14
7 clics pour une information
mercredi 3 septembre 14
La loi de MILLER
mercredi 3 septembre 14
Kézako?
mercredi 3 septembre 14
Le nombre magique sept, plus ou moins deux : quelques limites à nos capacités de traitement de l'information (Miller, 1956)Wikipedia
mercredi 3 septembre 14
«Des recherches récentes démontrent que la loi du nombre magique sept est fondée sur une interprétation erronée de l'article de Miller. Le nombre correct de nouveaux éléments pouvant tenir dans la mémoire courante est probablement de trois ou quatre»Wikipédia
mercredi 3 septembre 14
5 entrées par site au minimum + 2 au
maximum
mercredi 3 septembre 14
Règle n°2
mercredi 3 septembre 14
Les internautes ne sont pas...
mercredi 3 septembre 14
mercredi 3 septembre 14
Des débiles...
mercredi 3 septembre 14
IL ne faut ni...
mercredi 3 septembre 14
Le sous-estimerni
Le sur-estimer
mercredi 3 septembre 14
Les personas
mercredi 3 septembre 14
Une personne donnée, dans un contexte précis
mercredi 3 septembre 14
mercredi 3 septembre 14
Règle n°3
mercredi 3 septembre 14
La lecture en F, Z ou E ?
mercredi 3 septembre 14
C’est l’apparence du site qui influe sur le parcours visuel de
l’internaute
mercredi 3 septembre 14
Règle n°4
mercredi 3 septembre 14
Les internautes ne scrollent pas
mercredi 3 septembre 14
FAUX
mercredi 3 septembre 14
On pratique le cut-off design
mercredi 3 septembre 14
On organise sa page
mercredi 3 septembre 14
La théorie de la Gestalt
mercredi 3 septembre 14
WTF ?
mercredi 3 septembre 14
Postulat
‣ Notre cerveau analyse le monde environnant comme un ensemble de formes
‣ Le Tout est plus que la simple somme de ses parties : la conjonction de plusieurs formes peut faire émerger de nouvelles caractéristiques
mercredi 3 septembre 14
‣ Notre cerveau regroupe les choses qui sont proches physiquement.
proximité visuelle = proximité conceptuelle
mercredi 3 septembre 14
Il faut donc...
mercredi 3 septembre 14
‣ Rapprocher les objets qui entretiennent un rapport fonctionnel
‣ Eloigner ceux qui n’ont rien en commun
mercredi 3 septembre 14
mercredi 3 septembre 14
1.Bien organiser la page web
mercredi 3 septembre 14
‣ Supprimer tout ce qui est inutile
‣ Limiter le poids des pages
‣ Créer une hiérarchie de lecture claire
‣ Prévoir quelques gabarits de pages et s’y tenir
‣ Penser à l’espace d’écran réellement disponible
Bien organiser la page web #1
mercredi 3 septembre 14
Bien organiser la page web Les 3 résolutions majoritaires
mercredi 3 septembre 14
Bien organiser la page web #2
‣ Eviter au maximum le scroll horizontal
‣ Le scroll vertical ne doit pas altérer la visibilité des éléments critiques qu’il faut placer au dessus du seuil de scroll
mercredi 3 septembre 14
Espace écran exploitable
mercredi 3 septembre 14
Bien organiser la page web #2
‣ Eviter tout «scroll stopper»
‣ Eviter un design entièrement elastique : Etirer seulement les colonnes de contenu
‣ Aérer la page par des blancs
‣ Bien différencier les types d’espaces de la page
mercredi 3 septembre 14
Mais aussi dans le détail...
mercredi 3 septembre 14
mercredi 3 septembre 14
C’est la loi de proximité
mercredi 3 septembre 14
Mais aussi...
mercredi 3 septembre 14
La loi de FITTS
mercredi 3 septembre 14
«Le temps qu’on met pour atteindre une
cible est proportionnel à la distance à laquelle
elle se trouve mais aussi à sa taille .»
mercredi 3 septembre 14
Les éléments cliquables doivent être gros
mercredi 3 septembre 14
Augmentez la surface des éléments cliquables
mercredi 3 septembre 14
Découvrez et appliquez le concept d’affordance
mercredi 3 septembre 14
Les affordances sont les possibilités d’actions
suggérées par les caractéristiques d’un
objet
mercredi 3 septembre 14
mercredi 3 septembre 14
Optimiser l’affordance :Vous pouvez me cliquer
mercredi 3 septembre 14
Optimiser l’affordance :Vous pouvez interagir
avec moi
mercredi 3 septembre 14
Attention aux fausses affordances
mercredi 3 septembre 14
mercredi 3 septembre 14
2. Des textes lisibles et clairs
mercredi 3 septembre 14
Des textes lisibles et clairs
‣ Présenter les textes pour faciliter la lecture à l’écran :
☞ Préférer le HTML aux images pour du texte ou des informations importantes
☞ Limiter l’usage d’image de fond pour le texte
mercredi 3 septembre 14
Des textes lisibles et clairs
‣ Typographie et couleurs :
☞ Une taille de police jamais en dessous
d’un Arial 10 ou d’un Verdana 9 pour le corps de page
☞ Des contrastes positifs : foncé sur clair
☞Des niveaux de luminosité et de contrastes suffisants : outil
mercredi 3 septembre 14
☞ Limiter le nombre de couleurs différentes
☞ Préferer les casses mixtes
☞ Utiliser les majuscules uniquement pour
attirer l’attention
☞ Limiter l’utilisation des majuscules aux
phrases très courtes
mercredi 3 septembre 14
☞ Augmenter l’espace par défaut entre les
caractères des titres en majuscules
☞ Eviter l’italique
☞ Un texte non cliquable ne doit pas avoir
l’air cliquable
☞ Le format souligné est INTERDIT pour
mettre une idée en relief
mercredi 3 septembre 14
‣ Gestion des blocs et lignes de texte :
☞ Police sans-serif
☞ Eviter de justifier
☞ Alignement à gauche
☞ Un nombre de caractères agréable : 60-100
☞ L’interlignage devrait être d’environ 150%
du corps du texte
Des textes lisibles et clairs
mercredi 3 septembre 14
Des textes lisibles et clairs
‣ Ecrire pour le Web :
☞ Ecrire pour être scanné
☞ Utiliser un langage familier
☞ Faire un effort de concision
☞ Une idée par paragraphe
☞ Faire des phrases courtes
mercredi 3 septembre 14
☞ Faites ressortir les mots clés avec le bold
sans en abuser
☞ Rythmez les longs paragraphes
☞ Pensez liste à puces
☞ Fournir un format imprimable pour le
long
mercredi 3 septembre 14
‣ Titres et libellés : aller à l’essentiel
☞ 1 concept = 1 mot
☞ Créer une hiérarchie de taille de titresTypo : Un titre trop gros sera moins lu qu’untitre moyen ☞ Limiter la longueur des titres et libellés
☞ Commencer par les mots-clés
☞ Donne aux pages des titres explicites
☞ Être le plus précis possible dans la rédaction.
Des textes lisibles et clairs
mercredi 3 septembre 14
2. Liens hypertextes : les clés d’une navigation
réussie
mercredi 3 septembre 14
Des liens visibles et utilisés à bon escient
‣ Un format réservé
‣ Un format les différenciant clairement du texte non cliquable
‣ Un format qui les fasse ressortir de la page
Remarque : Le format bleu souligné n’est pas obligatoire mais le changement de couleur et le souligné sont de bons indices.
mercredi 3 septembre 14
Liens hypertextes : les clés d’une navigation réussie
‣ Eviter d’avoir trop de formats de liens différents
‣ Adapter le niveau de lisibilté de vos liens à leur importance
‣ Prévoir un format spécifique du lien au survol de la souris
‣ Prévoir un format spécial pour les liens déjà visités
mercredi 3 septembre 14
Liens hypertextes : les clés d’une navigation réussie
‣ Lors de sa rédaction, penser à la taille du lien
‣ Lorsque le lien est composé d’un pictogramme ou d’une icône et d’un libellé, la zone cliquable doit englober tous les éléments
‣ Eviter qu’un lien passe sur deux lignes
mercredi 3 septembre 14
Liens hypertextes : les clés d’une navigation réussie
‣ Différencier les liens externes des liens internes
‣ Signaler les liens pointant vers autre chose qu’une page HTML
mercredi 3 septembre 14
3.Des formulaires simples et efficaces
mercredi 3 septembre 14
Des éléments de formulaire adaptés à la tâche
mercredi 3 septembre 14
Faciliter la prise en main du formulaire
‣ Adapter la visibilité des zones de saisie à leur importance
‣ Pour donner plus de visibilté à un champ de saisie, il faut le mettre en blanc sur un fond gris ou de couleur
‣ Eviter de remplir tous les champs avec des données pré-remplies
mercredi 3 septembre 14
Faciliter la prise en main du formulaire
‣ Indiquer dès le départ que certains champs sont obligatoires
‣ Accompagner chaque champ obligatoire d’un élément graphique ou typographique spécifique et facilement repérable
‣ Supprimer les « : » en fin de libellé
‣ En cas de nombreux champs, former des groupes
mercredi 3 septembre 14
Faciliter la prise en main du formulaire
‣ Aligner les libellés à gauche si le nombre de caractères séparant le libellé le plus long du plus court ne dépasse pas 6 à 8 caractères.
‣ La distance entre le libellé et le champ ne doit pas être trop importante
mercredi 3 septembre 14
Faciliter la tâche de renseignement
‣ Ne demander que les données strictement nécessaires
‣ Permettre le passage de champ à champ grâce à la touche TAB
‣ Ordonner les champs selon une logique attendue
‣ Fournir des aides et des légendes
mercredi 3 septembre 14
Faciliter la tâche de renseignement
‣ Si le nombre de caractères acceptés est limité, en informer l’internaute
‣ Le bouton d’action principal doit être visible : fort visuellement et près du formulaire
‣ Eviter de proposer des fonctions d’annulation
mercredi 3 septembre 14
Faciliter la tâche de renseignement
‣ Faire ressortir la ou les actions principales du formulaire
mercredi 3 septembre 14
Aider l’internaute à éviter et à corriger ses erreurs
‣ Indiquer le format de renseignement attendu à l’extérieur du champ
‣ Réserver le renseignement par défaut à des données peu critiques
‣ Certaines données peuvent être validées à la volée
‣ Traiter l’ensemble des erreurs en une seule fois
mercredi 3 septembre 14
Aider l’internaute à éviter et à corriger ses erreurs
‣ Ne pas effacer les informations erronnées
‣ Ne pas effacer les entrées valides
‣ Soigner les messages d’erreur :
- placer un message juste au dessus du formulaire ☞ il doit attirer l’attention
- Eviter d’afficher le message dans une fenêtre Java-Script
mercredi 3 septembre 14
Aider l’internaute à éviter et à corriger ses erreurs
‣ Fournir un message spécifique contextuel
‣ Mettre en valeur visuellement un champ mal renseigné
‣ Le message doit expliquer l’erreur et donner une piste de résolution
mercredi 3 septembre 14
4.Organiser ses listes et ses tableaux
mercredi 3 septembre 14
Organiser ses listes et ses tableaux
‣ N’afficher que des colonnes contenant les informations nécessaires
‣ Prévoir des filets séparateurs entre chaque ligne
‣ Indiquer le critère de classement par défaut
mercredi 3 septembre 14
Organiser ses listes et ses tableaux
mercredi 3 septembre 14
5.Bannières publicitaires :oui, mais...
mercredi 3 septembre 14
Bannières publicitaires : oui, mais...
‣ Bien distinguer les zones de publicité du contenu réel
‣ Limiter la longueur des animations : 15’
‣ Eviter le déclenchement automatique du son
‣ Fournir un moyen de fermer la bannière ou d’accéder directement au site
mercredi 3 septembre 14
6. Des messages d’information pour accompagner votre
internaute
mercredi 3 septembre 14
Des messages d’information pour accompagner votre internaute
‣ S’assurer de la bonne visibilité d’un message :
☞ Utiliser des couleurs qui rompent avec
celles de la page
☞ Accompagner le message d’icônes
☞ Jouer sur la taille
☞Animer le message pour lui donner une
apparence temporaire
mercredi 3 septembre 14
Des messages d’information pour accompagner votre internaute
☞ Présenter le message sous forme d’une
fenêtre de type panneau flottant / Opacifier la page du site située en dessous.
‣ Eviter les messages importants sous forme de pop-up
‣ Eviter les simples informations sous forme de fenêtre d’alerte Javascript
mercredi 3 septembre 14
Des messages d’information pour accompagner votre internaute
‣ Faire confirmer à l’internaute toute demande d’action destructrice
‣ Ne pas présenter trop d’informations en survol
‣ Disséminer l’aide générale de manière contextuelle
‣ Fournir des informations sur le temps et la progression de chargement
mercredi 3 septembre 14
Des messages d’information pour accompagner votre internaute
‣ Personnaliser sa page 404 :
☞ Eviter tout discours technique
☞ Fournir des possibilités de navigation
‣ A retenir : Ecrire en rouge c’est alerter d’un danger ou d’une erreur
mercredi 3 septembre 14
Pour conclure
mercredi 3 septembre 14
Un site ergonomique
‣ Est correctement architecturé
‣ Les pages sont aérées, bien rangées et leur composition réfléchie
‣ Tout est mis en place pour faciliter l’accessibilité
‣ L’internaute doit trouver ce qu’il cherche librement et facilement
mercredi 3 septembre 14
Pour vérifier...
Les tests utilisateurs
mercredi 3 septembre 14