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
Posté par jc-Qualitystreet le 21 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.
Concision : en quoi ça consiste ?
C’est l’art d’aller à l’essentiel, de garantir la simplicité de l’interface et la pertinence des fonctionnalités. Concision et simplicité sont intimement liées…
Ce critère concerne la capacité du système à limiter les efforts de l’utilisateur en termes d’action, de perception ou encore de mémorisation. L’efficience, dont il s’agit ici, est un enjeu fort et une dimension clé de l‘utilisabilité : l’interface doit en effet permettre à l’utilisateur d’atteindre les buts qu’il se fixe en un minimum de temps, avec un minimum d’efforts …
Passionate Users - http://headrush.typepad.com/
La concision et la simplicité vont donc se jouer tant au niveau des fonctionnalités qu’en terme de design d’interface : « LESS IS MORE !»
Quelques exemples de recommandations
- Limiter les étapes par lesquelles doivent passer les utilisateurs pour effectuer leur tâche
- Hiérarchiser l’importance de chaque élément présent afin de rendre accessible en haut de page les informations et liens les plus important
- Limiter le nombre d’éléments de la barre de navigation
- Proposer des valeurs par défaut quand c’est possible
- Éliminer les éléments inutiles et tout bruit visuel
- Utiliser des libellés clairs, concis et non tronqués dans les formulaires
- Ne pas dépasser 100 éléments contenus dans la liste (50 est une borne plus réaliste). Au delà de 100 éléments, concevoir une page de recherche intermédiaire
- Éviter les textes qui clignotent ou qui défilent
- Limiter la taille des pages à trois écrans en résolution 1024×768
- N’afficher un texte d’instructions que si c’est nécessaire. S’il est affiché, utiliser un format court (sur 1 ou 2 lignes) afin d’en faciliter sa lecture et sa compréhension
Mauvaises pratiques
Exemple 1 :
Longues longues les instructions !
Exemple 2 :
Exemple 3:
Pourquoi ne pas simplifier dans un premier temps ?
Exemple 4:
Long le lien ! (source : Ergolab)
Quelques bons exemples … so GOOD !
Bonne pratique (Zara) :
Nouvelle boutique: une fiche produit sobre, efficace et des fonctions d'Ajout au panier et de commandes bien pensées (actions minimales)
"Passer commande" apparait aussitôt à proximité: facile et incitatif
Bonne pratique (Google, évidemment !) :
Google Chrome & Google Search : un navigateur, un moteur et des interfaces au service de la simplicité
Le plus simple ?
Bonne pratique (Amazon) :
Achart en 1 clic: Actions minimales...
Bonne pratique (Flickr):
Sobre et efficace
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 3 décembre 2009
Le rôle d’un portail d’entreprise est de fournir un point d’interaction unique et homogène à toutes les applications du Système d’information.
Aujourd’hui le portail d’entreprise doit répondre à de nouvelles exigences … mais seule une conception modulaire peut les satisfaire et garantir une expérience utilisateur riche et réussie.
La modularité se mesure dans la capacité qu’ont les composants du portail d’entreprise d’être séparés et recombinés, tant d’un point de vue fonctionnel qu’ergonomique. Elle confère au portail à la fois simplicité, cohérence, flexibilité et évolutivité, attributs attendus des portails nouvelle génération.
Certes, la conception ergonomique et fonctionnelle d’un portail d’entreprise reste avant tout centrée sur l’activité des utilisateurs finaux, mais se transforme, dans une approche hautement modulaire, en un véritable jeu de construction hiérarchisé et fondé à la fois sur un système de BLOCS et de CONNECTEURS.
- Portail d’entreprise et conception modulaire
DES BLOCS …
Les blocs sont de taille différente et intègrent en leur sein contenus et fonctionnalités.
Unité de base du système et intégré à la page Web, le bloc simple est l’élément dont l’utilisateur final est le plus familier. De hauteur et de largeurs variées, il se découpe en trois zones et possède :
- une zone d’en tête «Header» laissant apparaître un titre et diverses fonctionnalités, le plus souvent de contrôle du bloc (maximiser, réduire, fermer, afficher, masquer …)
- une zone centrale composée d’une grande variété de contenus (texte, tableaux, graphiques, vidéos, cartes interactive, et widgets en tout genre)
- une zone Footer, facultative, dont le traitement visuel et fonctionnel diffère très largement selon les contextes.
Les blocs simples peuvent être ou non regroupés (en Vue et/ ou en Groupe de blocs ).
Leur association donnera ensuite naissance aux pages web, qui elles-mêmes associées, constitueront les rubriques qui au final formeront le PORTAIL D’ENTREPRISE (BLOC le plus élaboré).
ET DES CONNECTEURS
Les connecteurs permettent quant à eux d’agir et de lier les blocs entre eux. On peut les regrouper pour l’essentiel en trois catégories:
- Éléments de contrôle et d’interface : Il s’agit d’actions portant sur le bloc lui même (maximiser, réduire, fermer, désactiver et d’autres actions plus évoluées relatives à l’apparence et au positionnement), de fonctionnalités de confort (imprimer, télécharger, envoyer à un ami, créer un PDF…), de paramètres d’affichage du contenu, depuis le nombre d’items à afficher jusqu’au sélecteur de date et de produits
- Éléments de navigation : Il s’agit essentiellement des barres de navigation principale et secondaire permettant de naviguer de rubriques en rubriques et de pages en page au sein de l’arborescence. Les items de la zone « utilitaires » (affichés le plus souvent en haut de page) relèvent de cette catégorie, tout comme la navigation contextuelle (entre pages et / ou blocs), les onglets intrapage, et les différentes vues d’une même page…
- Éléments sociaux et collaboratifs : Il s’agit de fonctionnalités permettant d’engager des utilisateurs avec d’autres autour d’une thématique donnée affichée par exemple sur un bloc simple (annoter, commenter, tagger, voter, recommander…)
Bref, choisissez, déclinez et arrangez vos blocs, liez-les par les connecteurs les plus appropriés, et surtout AMUSEZ-VOUS !
