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 !
Posté par jc-Qualitystreet le 13 mars 2010
L’architecture de l’information, c’est une composante essentielle de l’Expérience Utilisateur, c’est surtout une activité incontournable de tout projet IT… à dimension variable selon la nature de ces mêmes projets : logiciels, applications métiers ou au contraire sites eCommerce et portails Intranet, des contextes dans lesquels la dimension contenu est beaucoup plus importante.
Architecture de l'information : un élément d'UX
Architecture de l’information : de quoi s’agit-il ?
L’architecture de l’information se définit comme l’organisation du contenu et des fonctionnalités d’un point de vue cognitif et graphique pour répondre aux besoins et attentes des utilisateurs finaux.
Plus simplement, cette activité généralement prise en charge par l’ergonome IHM ou d’autres métiers du web, côté Scrum Product Owner ou côté Equipe Scrum à vous de voir pour les projets agiles, consiste à aider les gens à trouver et à gérer l’information plus efficacement.
La bonne information à la bonne place…
L’architecture de l’information est donc une activité avant tout conceptuelle, tout en étant fortement structurante pour le projet. D’où la nécessité d’initier le travail au plus tôt. Dans des contextes AGILE, les premiers éléments, dits « High level » devront donc être maîtrisés en sprint 0/1, parfois sur la base de données recueillies avant le démarrage officiel du projet.
Dans les grandes lignes, travailler sur l’architecture de l’information va ainsi consister à :
- Classifier, catégoriser l’information et attribuer les libellés les plus signifiants (sur la base d’inventaires de contenu et de tri de carte)
- Distinguer et prioriser les fonctionnalités et contenus en fonction des besoins utilisateurs et exigences Business (sur la base d’interviews, d’enquêtes, d’études utilisateurs comme le modèle de Kano)
Modèle de Kano
- Construire et décrire une structure d’information efficace (Arborescence ; « Concept model »)
Workshop Arborescence
Arborescence
Concept Model par Daniel M. Brown
- Déterminer le système de navigation le plus performant (modèle global, local et contextuel en tenant compte des fonctions de recherche) (cinématiques - zoning)
Système de navigation - Pages intérieures
- Faire les premiers zoning illustrant le système de navigation envisagé
Bref dites-vous bien que tout ce temps passé sur l’architecture de l’information (”Juste ce qu’il faut” et dans un mode collaboratif), c’est du temps gagné à court terme pour l’équipe qui développe et à moyen terme pour les futurs utilisateurs.
Posté par jc-Qualitystreet le 28 septembre 2009
Il est temps de passer à l’offensive…. Soyez actifs, soyez réactifs…
D’un côté, 33 millions d’internautes en France dont 22,5 millions qui ont déjà acheté en ligne selon les dernières statistiques de la FEVAD ; des chiffres en constante augmentation. De l’autre, les ténors du E-Commerce évidemment, maisaussi et surtout un nombre impressionnant d’acteurs de toute taille (on parle de plus de 50000 sites E-Commerce) avec chaque jour de nouveaux entrants…
Dans ce contexte ultra concurrentiel, adopter une approche centrée consommateur, améliorer sa connaissance clients, optimiser ses parcours clients est indispensable pour survivre et se différentier. On est d’accord.
Mais …
Qu’importe le prix ? Qu’importe les délais ?
Pas vraiment !
La réalité d’aujourd’hui …
- Avez-vous réellement besoin de toute cette artillerie méthodologique, de tous ces protocoles de tests qu’on vous propose ?
- Etes-vous prêt à attendre un mois les conclusions d’une étude ergonomique et marketing coûteuse ne portant que sur une douzaine d’utilisateurs et quelques pages clés de votre site ?
- Allez vous réellement exploiter la cinquantaine de pages du magnifique rapport d’étude qu’on vous a transmis et trop rapidement présenté ?
Euh …. Alors, osez la GUERILLA USABILITY
Visez les Quick wins !
Allez vite !
Lancez vous une démarche d’amélioration continue, et affinez progressivement !
AU PROGRAMME :
- Plus de FEEDBACK, plus de VALEUR; plus de concret
- Moins de formel, moins de budget; moins de vent
Guerilla Usability : QUI?
Vous, aidés ou non de spécialistes en expérience Utilisateur (facilitation et choix des techniques)
Guerilla Usability : QUOI?
Tout .
Pages d’accueil, Parcours clients et tunnels de conversion, Fiches produit, Argumentaires, Services Clients, Design… Tester tout, Tester des hypothèses et sous n’importe quel format : la version actuelle, des concepts, des esquisses, des pistes, dynamiques ou pas, des prototypes haute fidélité ou pas, du papier …
En phase de conception, inutile de peaufiner le support, l’important c’est le FEEDBACK !
Guerilla Usability : QUAND?
A tout moment.
Ayez l’esprit Kaizen : entrez dans un processus d’amélioration continue…
Les cycles itératifs avec livraisons incrémentales (on enrichit au fur et à mesure) toutes les 2, 3 ou 4 semaines sont très appropriés. Le RITE (Rapid Iterative Testing and Evaluation) est une technique de plus en populaire qui fait merveille dans des process agiles (mais qui nécessite la présence d’un spécialiste de l’interface utilisateur auprés des équipes de développement).
Guerilla Usability : OU?
Partout mais sur le terrain avant tout !
Sortez des situations de laboratoires (presque trop confortables) et allez au devant de vos clients… chez vous, chez les autres, dehors, au café … profitez de toutes les situations.
N’oubliez pas que la mobilité gagne du terrain et que les contextes et situations d’usage évoluent. Internet est omniprésent; nous entrons dans l’ère de l’Ubimedia.
Guerilla Usability : COMMENT?
Augmenter la fréquence des tests, multiplier les FEEDBACKS :
moins de participants, moins de tâches mais plus de tests, toujours plus de tests, à votre rythme et à celui de vos équipes.
Variez les techniques et choisissez celles qui vous correspondent le mieux. Certaines techniques du Guerilla Usability nécessitent des participants, d’autres non (comme les Benchmark ou évaluations expertes).
Les plus précieuses sont celles qui impliquent des utilisateurs potentiels. Entretiens Timeboxés (30 minutes Max), Tests utilisateurs courts , Tests des 5 secondes, Tri de cartes fermés, Product Box (la représentation de la vision Client réalisée en 45 minutes par des groupes de 6 … ).
Justement, côté tests, allez à l’essentiel mais faites le plus tôt et plus souvent. Découpez ce que vous voulez tester ; scénariser 4 ou 5 tâches, et faites régulièrement des campagnes de 5 utilisateurs. Personnellement, je préfère le face à face mais de plus en plus d’outils vous permettent de faire des tests à distance, modérés ou non (UserVue, Silverback, Chalkmark…).
Jetez un coup d’œil à ce document pour liste complète.
Côté rapport, pensez “Action” et “Juste ce qu’il faut“. Passez plutôt du temps avec les équipes (workshops, pair designing) puis tester ; mesurer et tester et tester encore !….
Guerilla Usability : AUPRES DE QUI?
Vous pouvez commencer en interne mais orientez-vous très vite vers votre cible. Faites au plus simple mais toujours ciblé. Plus les participants à vos recherches et tests seront semblables à votre population cible, à vos clients, mieux ce sera.
Pour recruter : Descendez dans la RUE 
Utilisez vos contacts clients, Amis, Entourage pro, Réseaux sociaux, Mailing list, placez des formulaires sur votre site…Profitez de toutes ces occasions au cours desquelles vous croisez vos clients , des salons pro … L’événementiel est une bonne opportunité
Côté indemnisation. C’est vous qui choisissez, ne vous en faites pas: les chèques cadeaux fonctionnent plutôt bien mais d’autres modes (y compris rien du tout) sont envisageables.
Guerilla Usability : POURQUOI?
- LE FEEDBACK et la REACTIVITE
- LES ECONOMIES DE TEMPS et D’ARGENT
- mais aussi :
- S’améliorer
- Se différentier
- Réduire la distance
- Réduire les risques
- Démystifier (c’est rapide, c’est facile à mettre en œuvre)
GUERILLA USABILITY, c’est tout simplement le message porté par Jakob Nielsen depuis 20 ans, avec son Discount usability …
D’autres conseils E-Commerce sur QualityStreet:
