Posté par jc-Qualitystreet le 7 septembre 2010
Ma liste de critères ergonomiques pour la conception d’interface contient 11 critères. C’est une liste personnelle, établie au départ sur la base des normes & standards existants (ISO 9241, AFNOR Z67 133, Bastien & Scapin, Heuristiques US …), que je m’efforce de partager au quotidien avec les équipes de développement tout en sensibilisant le métier sur la question.
Contrôle Utilisateur : en quoi ça consiste ?
C’est l’art de toujours laisser à l’utilisateur le contrôle sur les actions du système et sur l’interface.
Ce critère concerne la capacité du système à laisser l’initiative à l’utilisateur via l’interface . Aussi l’utilisateur doit-il pouvoir contrôler le déroulement (interruption, reprise) des traitements informatiques en cours ou sortir d’un état dans lequel il est pourquoi pas arrivé par erreur.
L’absence de contrôle est une source d’insatisfaction majeur côté utilisateur.
Quelques exemples de recommandations
- Permettre à l’utilisateur d’interrompre à tout moment une tâche en cours
- Autoriser et faciliter les retours en arrière
- Proposer des points de sortie évidents
- Prévoir une option permettant de revenir aux paramètres par défaut
- Laisser l’internaute contrôler la fréquence des mises à jour
- Permettre à l’utilisateur de se désabonner facilement
Mauvaise pratique
Les mauvaises pratiques sont essentiellement liées à l’absence de contrôle au travers par exemple d’un manque de proposition d’actions sur l’interface, de retour arrière ou de possibilités d’annulation.
Circle K: Une carte très statique et très limitée. Aucun contrôle côté Utilisateur
Quelques bons exemples … so GOOD !
Bonne pratique :
Un retour en arrière hautement facilité sur gmail
Bonne pratique :
Sur facebook, on exerce un contrôle précis sur le paramétrage de ses données !
Bonne pratique :
A vous de décider !
Bonne pratique :
Ferrari : Un configurateur de haute tenue et un contrôle Utilisateur constant et performant
Bonne pratique :
Amazon et son processus d'achat efficace
Bonne pratique :
Flickr : Contrôle Utilisateur omniprésent dans ce dialogue modal (forme lightbox)
Posté par jc-Qualitystreet le 1 septembre 2010
Ma liste de critères ergonomiques pour la conception d’interface contient 11 critères. C’est une liste personnelle, établie au départ sur la base des normes & standards existants (ISO 9241, AFNOR Z67 133, Bastien & Scapin,Heuristiques US …), que je m’efforce de partager au quotidien avec les équipes de développement tout en sensibilisant le métier sur la question.
Feedback Direct : en quoi ça consiste ?
C’est l’art de tenir l’utilisateur, en temps réel, informé de ce qui se passe
Ce critère concerne les réponses du système consécutives aux actions des utilisateurs. Son absence est source d’incompréhension, parfois déstabilisante selon les contextes. Sa présence est un fort élément de réassurance.
Pertinence, compréhension, localisation et rapidité sont les dimensions essentielles du feedback de qualité.
Quelques exemples de recommandations :
- Rendre le feedback immédiat
- Indiquer clairement les traitements en cours
- Proposer un indicateur d’avancement du traitement des tâches par le système (y compris le chargement des pages)
- Adapter le feedback à l’action engagée et s’assurer de sa pertinence
- Utiliser l’autocompletion comme aide à la saisie
- Pour les saisies de formulaire, assurer autant que possible des vérifications directes en sortie de champs
- Toujours faire apparaitre sur l’écran les entrées effectuées par l’utilisateur
- Informer les utilisateurs de leur connectivité
Les mauvaises pratiques sont essentiellement liées à l’absence de feedback.
Quelques bons exemples … so GOOD !
Bonne pratique pour patienter:
Petite message d'attente :)
Petite message d'attente et quelques variations:)
Autre bonne pratique avec le Drag&Drop (le modèle Flickr est très efficace)
Drag&Drop temps 1. Trés bonne incitation au départ
Drag&Drop temps 2: Juste ce qu'il faut de FEEDBACK
Drag& Drop Temps 3: Opération terminée. Le feedback sur la droite
Drag&Drop On supprime le fichier. Quelle belle image !!!
Autre bonne pratique chez Twitter (refresh)
42 nouveaux Tweets. Je dois rafraîchir ma page
Autre bonne pratique (limite de saisie):
Twitter. Nombre de caractère restant Au départ. 140 caractères.
Twitter. Nombre de caractère restant en cours de saisie.
Autre bonne pratique (ajout d’item)
BaseCamp: Nouvel Item. Surlignement jaune pendant 1 seconde
Autre bonne pratique (feedback Téléchargement)
Feedback Indicateur de progrés. Téléchargement Du classique très efficace chez Google
Autre bonne pratique (traitement de l’opération)
Feedback - Traitement de l'opération
Autre bonne pratique Envoi de message (toujours Google)
Envoi de message. Bon feedback de Google
Autre bonne pratique au sein de formulaire (Google encore …)
Vérification en directe du degré de sécurité du mot de passe 1
Vérification en directe du degré de sécurité du mot de passe 2
Autre bonne pratique (plus qu’une aide à la saisie)
Aide à la saisie Temps 1
Aide à la saisie Temps 2
Autre bonne pratique (vérification avec contrôle utilisateur: pas mal)
Last FM Vérifier la disponibilité Temps 1
Last FM Vérifier la disponibilité Temps 2 avec feedback
Posté par jc-Qualitystreet le 5 août 2010
Ma liste de critères ergonomiques pour la conception d’interface contient 11 critères. C’est une liste personnelle, établie au départ sur la base des normes & standards existants (ISO 9241, AFNOR Z67 133, Bastien & Scapin, Heuristiques US …), que je m’efforce de partager au quotidien avec les équipes de développement tout en sensibilisant le métier sur la question.
Groupement - Distinction entre items : en quoi ça consiste ?
C’est l’art de regrouper ce qui va ensemble pour favoriser une meilleure distinction et reconnaissance des éléments. Ce critère concerne l’organisation visuelle des items les uns par rapport aux autres. Le groupement ou la distinction des informations s’appuie sur deux stratégies :
- la localisation (c’est-à-dire par le positionnement)
- le format (c’est-à-dire par les caractéristiques graphiques)
Liens commerciaux Top vs Colonne vs Référencement Naturel: un Layout efficace. Distinction par localisation et format
Le critère s’appuie aussi plus largement sur la théorie de la Gestalt et sur les lois de perception visuelle: proximité, similarité, fermeture, continuité…
Les Lois de la Gestalt
Quelques exemples de recommandations
- Utiliser la couleur pour distinguer les éléments de la barre de navigation, les contrôles actifs / inactifs
- Distinguer graphiquement l’item de navigation secondaire en cours de consultation et le mettre en valeur (ex: une puce, une couleur de typographie, un aplat…)
- Différencier les liens visités des liens non-visités
- Différentier l’item présentant la page en cours de consultation mais le rendre « non cliquable »
- Séparer les éléments du fil d’Ariane par le signe > avec 1 espace avant et après
- Regrouper les fonctions transverses dans une zone située en haut à droite, et les ‘afficher de manière constante sur l’ensemble du site
- …
Des mauvaises pratiques
Des groupements inadaptés - pas de hiérarchisation ... surcharge visuelle !!
Autre mauvais exemple:
L'espace est un élément crucial pour la distinction des items. Ici c'est raté !
Autre mauvais exemple :
Autre mauvais exemple:
Une distinction entre action 1 et 2 aurait été préférable
Quelques bons exemples … so GOOD !
Trés bonne distinction entre les deux actions (bonne prévention des erreurs)
Autre exemple:
Distinction des rubriques par couleurs
Autre exemple:
Zoning. Distinction des zones de l'écran. Extrait Charte ergonomique DGME
Autre exemple:
Trés belle distinction des zones et des items au sein du formulaire Eba
Posté par jc-Qualitystreet le 4 août 2010
Ma liste de critères ergonomiques pour la conception d’interface contient 11 critères qui sont valides pour tous les types d’interface. C’est une liste personnelle, établie au départ sur la base des normes & standards existants (ISO 9241, AFNOR Z67 133, Bastien & Scapin, Heuristiques US …), que je m’efforce de partager au quotidien avec les équipes de développement et les équipes Business.
Lisibilité : en quoi ça consiste ?
C’est faciliter la lecture et favoriser la compréhension de ce qui est affiché à l’écran. Ce critère ergonomique recouvre en effet deux dimensions : le processus physiologique de lecture mais aussi la compréhension de ce qui est lu.
Lisible et incitatif
La lisibilité va donc concerner les caractéristiques de présentation des informations sur l’écran pouvant entraver ou faciliter la lecture de ces informations : luminance des caractères, dimension des lettres, des lignes, espacement entre les mots, interlignes, couleurs et contrastes.
Quelques exemples de recommandations :
- Utiliser une police sans serif (empattement), telles que Verdana, Arial ou Helvetica (ou leur équivalent), conçues pour la lecture à l’écran.
- Assurer la lisibilité du texte en jouant sur le contraste avec l’arrière plan (valeur de contraste au minimum de 80 %)
- Préférer un fond clair à un fond sombre
- Favoriser le mode positif avec Texte noir sur fond blanc / clair
- Sur fond clair (blanc/ gris pâle), éviter le jaune, vert pâle ou cyan, le bleu, rouge, violet
- Assurer un contraste constamment satisfaisant entre la page et la barre de navigation, entre les items de la barre de navigation et leur arrière plan
- …
Deux mauvaises pratiques
Mauvais contraste
Autre exemple
Une lecture très difficile !!!
Quelques bons exemples … so GOOD !
Tout est dit !
Autre exemple:
Contenus lisibles et bien délimités. Bons Contrastes.
Autre exemple:
Dans les deux cas : très lisible mais plus de douceur et moins de fatigue au quotidien avec le Gris
Posté par jc-Qualitystreet le
Ma liste de critères ergonomiques pour la conception d’interface contient 11 critères qui sont valides pour tous les types d’interface. C’est une liste personnelle, affinée, établie au départ sur la base des normes & standards existants (ISO 9241, AFNOR Z67 133, Bastien & Scapin, Heuristiques US …), et que je m’efforce de partager au quotidien avec les équipes de développement et les équipes Business.
Incitation : en quoi ça consiste ?
C’est accompagner l’utilisateur dans sa tâche, le renseigner sur le contexte dans lequel il se trouve, l’orienter, l’amener à effectuer des actions spécifiques tout en prévenant au maximum l’indécision. L’incitation est donc un critère essentiel pour l’utilisateur qui s’est renforcé d’un point de vue business autour des problématiques de marketing digital.
- Tous les leviers de l’Ergonomie Incitative
Éléments d’ergonomie incitative ou d’assistance sur formulaires, architecture de l’information simple et adaptée, fil d’Ariane, indicateur d’étape (pour une navigation guidée), identité visuelle par univers, autant d’éléments qui favorisent une bonne incitation.
Quelques exemple de recommandations …
- Limiter les points d’entrée sur l’interface, les rendre descriptifs et « orientés-tâches »
- Proposer un titre à chaque page, court et signifiant
- Proposer sur chaque page du site des éléments de navigation et de repérage permettant à l’utilisateur de répondre à trois questions : Où suis-je ?, D’où viens-je ?, Où puis-je aller ?
- S’assurer que le système de navigation principal indique visuellement à l’utilisateur dans quel menu ou rubrique il se trouve
- Prévoir un fil d’Ariane sur toutes les pages intérieures, le positionner sous la barre de navigation globale, mais toujours au-dessus du titre de page
- Proposer un indicateur d’étapes en cas de navigation guidée par exemple pour les processus dont la saisie est décomposée en plusieurs pages et / ou nécessite un écran « récapitulatif »
- …
Deux mauvaises pratiques
- Par où commencer ? Comment ça marche ?
- Pas évident !!
Quelques bons exemples … so GOOD !
Rappel et Indicateur d'étapes
Autre exemple :
Aussitôt arrivé, aussitôt guidé !
Autre exemple:
Parfaite incitation
Autre exemple:
Autre exemple :
- Droit au but !
Autre exemple :
- Suivez le guide !
