Posté par jc-Qualitystreet le 25 janvier 2011
Satisfaire le besoin d’un client (tant interne qu’externe) n’est aujourd’hui plus suffisant… non désormais, le challenge grandissant des organisations va au delà de la simple satisfaction, il se joue dans l’art de RAVIR SON CLIENT.
Et tout comme l’Agilité, l’Expérience Utilisateur est un levier fort de ce ravissement…
Expérience Utilisateur ?
“L’expérience Utilisateur englobe tous les aspects de l’interaction de l’utilisateur final avec l’entreprise, ses services et ses produits“
Nielsen Norman Group
De la concision et une grande volonté d’ouverture dans cette définition qui pourtant parvient à mettre l’accent sur les caractéristiques essentielles de cette fameuse Expérience Utilisateur:
- L’interaction
- L’utilisateur final
- La multiplicité des points de contact
- La variabilité des situations
- La complétude et la globalité de l’expérience
Largement associée au plaisir d’usage, l’Expérience Utilisateur ne peut en effet s’envisager que dans sa globalité et ne se vivre que dans un contexte d’usage spécifique, celui du Client.
Ouverture et simplicité: bien souvent les clés de la réussite !
Et mon rôle dans tout cela ? Et bien c’est d’être justement au service de l’Expérience Utilisateur!
Posté par jc-Qualitystreet le 24 janvier 2011
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.
Signifiance : en quoi ça consiste ?
C’est parler le langage de l’utilisateur.
Ce critère concerne la bonne adéquation entre l’objet et son référent, et implique donc de choisir de manière appropriée les mots et les symboles utilisés sur un site ou une application.
Concret - Abstrait
Un regard tout particulier sera donc porté sur le vocabulaire utilisé dans l’interface ou sur le site. Une fine connaissance des cibles et de leur domaine, au travers d’une approche Personas, d’enquêtes contextuelles ou de Tri de cartes est indispensable pour bien appréhender les mots, le langage des utilisateurs.
Dans tous les cas, un vocabulaire simple, précis, concis, explicite, compréhensible et orienté utilisateur doit être privilégié.
L’utilisation d’icônes et d’images présente de multiples avantages (concision et reconnaissance) puisqu’il s’agit d’éléments qui peuvent être interprétés, et donc reconnus plus rapidement que du texte. Toutefois celles-ci doivent être maniées avec précaution : en nombre limité, conventionnelles, sans aucune ambigüités et idéalement associées à un libellé qu’elles représentent.
En bref, les mots et symboles choisi doivent être familiers des utilisateurs.
Quelques exemples de recommandations
- S’assurer que le lien entre l’objet et son référent est le plus direct possible
- S’assurer que les liens et items de navigation ne comportent pas de termes qui risquent de ne pas être compris par la population visée.
- S’assurer que les titres véhiculent ce qu’ils représentent, et sont distincts
- S’assurer que les liens sont explicites dans leur contexte: l’utilisateur doit savoir s’ils renvoient vers une autre page, s’ils ouvrent un document bureautique ou s’ils correspondent à une adresse électronique
- Rendre les règles d’abréviation explicites
- Vérifier la compréhension des icônes avec les utilisateurs cibles
- Utiliser des icônes pour les éléments fréquemment employés
- Accompagner l’icône de son nom
- …
Mauvaise pratique
Exemple (Rowenta)
Des icônes isolées et ambigues sur Rowenta.fr
Quelques bons exemples… So good!
Bonne pratique :
Des libellés concis et explicites
Bonne pratique:
Un choix d'icônes efficace qui respecte les conventions
Bonne pratique:
Association Icône et Libellé: Clair et Explicite
Posté par jc-Qualitystreet le 23 janvier 2011
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.
Cohérence : en quoi ça consiste ?
C’est fournir à l’utilisateur un cadre stable dans des contextes similaires.
Ce critère concerne la façon dont les choix de conception d’interface:
- localisation des éléments,
- libellés,
- format et design graphique,
- menus,
- navigation,
- interactions…)
sont conservés pour des contextes identiques, et sont différentiés pour des contextes différents.
… 
La cohérence est un élément d’apprentissage essentiel et l’un des principaux leviers permettant d’assurer une utilisation efficiente de l’interface. Du point de vue de la navigation, ce critère est tout simplement crucial : un système de navigation cohérent permettra de ne pas perdre l’utilisateur. Celui-ci pourra ainsi se repérer facilement, anticiper et agir avec plus de sérénité.
Eléments de Cohérence au sein d'une fameuse suite applicative
Plus globalement, la cohérence rend le produit PREDICTIBLE.
Quelques exemples de recommandations
- Proposer des formats d’écrans similaires
- Fournir des mécanismes de navigation cohérents
- Proposer les systèmes de navigation de manière constante sur l’ensemble des pages du site
- Prévoir un lien vers la page d’accueil du site ou de l’application dans toutes les pages
- Prévoir un bandeau de navigation principal présent et identique sur toutes les pages pour se déplacer entre les domaines de l’application
- Regrouper les fonctions transverses dans une zone généralement située en haut à droite de l’écran et maintenir cette position constante sur l’ensemble du site
- Homogénéiser les types d’action associées à un même pictogramme dans l’ensemble de l’application
- Dans le cas d’un lien interne, s’assurer que le libellé du lien est idéalement le même que le titre de l’écran cible
- Utiliser toujours le même format pour les tableaux de données
Mauvaise pratique
Exemple (Nu-Tronics)
Aucune cohérence entre la Home et les pages interieures
Quelques bons exemples… So good!
Bonne pratique (IBM) :
Bonne pratique (Amazon):
Bandeau de navigation Cohérent
Bonne pratique (Banque Postale):
Cohérence (couleur): contextes similaires et différents
Posté par jc-Qualitystreet le 29 octobre 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.
Adaptabilité : en quoi ça consiste ?
C’est S’ADAPTER aux caractéristiques des utilisateurs (vues, perspectives, raccourcis…)
Portail personnalisé
Ce critère concerne la capacité du système à réagir selon le contexte, mais aussi selon les besoins, préférences et niveaux d’expertise des utilisateurs.
Proposer plusieurs façons d’arriver à un même résultat, bénéficier d’une application personnalisée ou encore customiser son interface sont des dimensions clés de l’adaptabilité, et de fortes attentes des utilisateurs.
Différentes vues... différents affichages
L’utilisateur a la possibilité de modeler sa page selon ses préférences, et de contrôler (ajouter, retirer, modifier) certains éléments du portail : favoris, raccourcis, thèmes, couleurs, titres et libellés…
Customisation Gadgets
Quelques exemples de recommandations
- Permettre aux utilisateurs de désactiver les affichages et informations inutiles
- Autoriser les utilisateurs expérimentés à contourner une série de sélections par menu en formulant directement des commandes ou par des raccourcis clavier
- Permettre de modifier la séquence des entrées de données pour s’adapter à l’ordre souhaité par les utilisateurs.
- Permettre aux utilisateurs de définir le format d’un document et de le sauvegarder pour une utilisation ultérieure lorsqu’on ne peut le spécifier à l’avance
- …
Quelques bons exemples … so GOOD !
Bonne pratique :
Préférences pour une interface flexible
Bonne pratique :
Customisation quand tu nous tiens !
Bonne pratique :
Personnalisation
Bonne pratique :
Raccourcis clavier ou Menus
Bonne pratique :
Recherche Google : Un conseil "masquable"
Bonne pratique :
Entrée des données : saisie ou slider
Bonne pratique :
Personnalisez vos rapports !
Bonne pratique :
champ de recherche flexible Temps 1
Temps 2
Bonne pratique :
Une recherche trés adaptable
Bonne pratique :
Customisation
Posté par jc-Qualitystreet le 21 octobre 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.
Gestion des erreurs : en quoi ça consiste ?
C’est protéger l’utilisateur des erreurs potentielles et les gérer quand elles se produisent (corriger ou aider à corriger). Prévention et correction vont donc de paire.
Indiquer où se trouve l'erreur ... vous voyez ?
Ce critère concerne la capacité du système à proposer à l’utilisateur tous les éléments nécessaires et suffisants pour lui permettre de ne pas commettre d’erreurs (guidage, assistance, simplicité de l’interface …). Il concerne aussi ses capacités de contrôle (côté client et/ou côté serveur) et de réponse à une erreur détectée :
- Indiquer clairement qu’une erreur s’est produite
- Montrer quels champs sont en erreur
- Conserver les éléments saisis par l’utilisateur
- Afficher un message d’erreur qui permet à l’utilisateur de corriger son erreur ou de revenir sur les bons rails
Trés Bon exemple - Recap & Inline
Quelques exemples de recommandations.
Prévention :
- Distinguer les champs obligatoires des champs facultatifs
- Afficher une demande de confirmation pour les actions potentiellement dangereuses irréversibles (bref fortement impact antes)
- Limiter les options et possibilités de saisie au strict nécessaire
- Indiquer le format de saisie attendu
Gestion des erreurs
- Proposer à la fois un récap. des erreurs en haut de page, et indiquer précisément et visuellement la localisation de l’erreur (indicateur et Tip associé) sur chaque champ concerné au sein du formulaire (RECAP + INLINE)
- Présenter les messages d’erreur INLINE directement sans qu’ils ne nécessitent d’efforts supplémentaires de la part des utilisateurs pour les afficher
- Après avoir vérifié la donnée corrigée (si c’est envisageable), afficher un indicateur positif (Coche verte, Bordure Verte…)
Messages d’erreurs
- Afficher les messages d’erreur les plus concis possible (tout en restant précis)
- Proposer autant que possible des messages d’erreur comportant les actions correctrices que peut engager l’utilisateur
- Rédiger les messages d’erreur dans le langage (et la langue !) de l’utilisateur,
- Indiquer le plus précisément possible la cause de l’erreur (ex : « Votre adresse email est incomplète » ; « Votre adresse email comporte un caractère non autorisé » ; « Votre adresse email doit inclure le signe @ »)
- Proposer des messages d’erreur simples et compréhensibles, directifs mais non agressifs ni autoritaires
- Eviter les fautes d’orthographe dans vos propres messages d’erreur
Mauvaises pratiques
Exemple 1 :
A priori on en trouve de moins en moins... et HEUREUSEMENT !
Exemple 2 :
Un long Recap peu lisible et PAS d'INDICATION INLINE
Exemple 3:
Toutes les qualités d'un MAUVAIS message d'erreur :)
Exemple 4:
Compliqué
Quelques bons exemples … so GOOD !
Bonne pratique (Wishlistr) :
Sobre et efficace: la cause de l'erreur et des possibilités de correction. Le critère "Distinction entre items" est bien exploité.
Bonne pratique (TypePad) :
Temps 1
Temps2
Temps 3
Temps 4 - Les 4 temps de la gestion des erreurs. Un accompagnement au TOP !
Bonne pratique (Ticket Trunck) :
Prévention : ? tip accessible par l'utilisateur
Bonne pratique (Pages jaunes):
En terme de prévention et d'accompagnement c'est pas mal !
Bonne pratique :
Une page 404 informative et efficace
Bonne pratique (Microsoft Office) :
Toujours la possibilité d'annuler... pour corriger l'erreur !
Bonne pratique (Apple Store) :
Apple c'est élégant !
Bonne pratique (Ebay) :
Inline : Signes et textes visibles
Bonne pratique (Remember the Milk) :
Picnik et ses contrôles en Ajax: Efficace !
Et le meilleur pour la fin … Bonne pratique (live from Berlin):
Et pour terminer ! Prévention et Incitation. Trop forts ces Berlinois, ils savent vous motiver 
- Neue Museum
