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, 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.
Critère n°1 : Incitation
Critère n°2 : Lisibilité
Critère n°3 : Groupement-Distinction entre items
Critère n°4 : Feedback Direct
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 !
Posté par jc-Qualitystreet le 19 septembre 2009
Je suis convaincu depuis longtemps des bienfaits de la méthode des Personas (utilisateur-type, représentation fictive des utilisateurs cibles, qu’on peut utiliser pour fixer des priorités et guider nos choix de conception) …
Je suis convaincu aussi de la nécessité pour une organisation de construire une Vision partagée que celle-ci porte sur un produit, une gamme, ou qu’elle soit à plus grande echelle …
Et bien, jugez plutôt du résultat quand on associe les deux !
ERICSSON Life in 2020
Comment le monde va -t-il évoluer ?
Quelles seront les habitudes et besoins des personnes ?
Quelles technologies vont ils utiliser pour le faciliter la vie ?
Ericsson a fait un travail remarquable, sans négliger le 3eme temps de la démarche Persona (« Utiliser et communiquer ») : section sur le site corpo et module de visite virtuelle du Monde en 2020.
450 experts d’Ericsson (et d’ailleurs) ont travaillé sur ce colossal, « Ericsson Life in 2020 project » et construire ces 15 personas pour illustrer la façon dont ces personnes utiliseront les produits IT (77 imaginés) dans leur vie de tous les jours en 2020.
Tout y passe : Day in life, une approche orientée buts, comportement, usages qui en plus de critères socio - demo permettent de distinguer ces personas, le storytelling, le réalisme, les connexions entre Personas, des visuels sympas …
Quel boulot !!
Le tout dans une belle interface riche qui nous porte d’histoires en histoires…
Pour les technophiles et passionnés d’Ubimedia, visitez le volet « Devices », ça vaut le détour …
Quelques images:
Michel:
Posté par jc-Qualitystreet le 29 août 2009
Tout nouveau, tout chaud en cette fin de mois d’aout, les Guidelines User Experience Microsoft Windows 7 sont disponibles (toujours pertinents pour nous autres concepteurs d’interface).
UX Guide for Windows 7 and Windows Vista (le PDF est disponible)
Toujours en stocks, les règles d’ergonomie et Guidelines Interface Utilisateur Apple:
APPLE Human Interface Guidelines
Bonne lecture !
Posté par jc-Qualitystreet le 7 avril 2009
Ou quelques éléments
d’ergonomie et marketing web bien pensés proposés sur
Smashing Magazine par Dmitry Fadeyev (
Usability Post), conseils que je me suis permis de traduire et de commenter.
Inutile de vous dire que je bien en phase avec ces 8 conseils même si selon moi la combinaison
Personas - Ergonomie incitative est trés largement facilitatrice et tout aussi déterminante.
Conseil 1 : Avant tout suggérer
L’art de la suggestion, du subliminal est depuis toujours une clé du marketing. Sur le web (comme dans d’autres contextes), il s’agit de véhiculer des valeurs, un message, des sensations, un sentiment par des images et par un ensemble de visuels. Peu d’espace, peu de temps: chez nous c’est le subtil boulot du DA (Directeur Artistique).
Conseil 2 : Prévenir l’indécision
C’est éviter de multiplier les options pour ne pas réveiller cette fameuse “paralysie du choix” qui nous guette tous ! Faciliter la vie du visiteur en réduisant donc le nombre d’options mais aussi en l’accompagnant, en le guidant dans son choix est plus que jamais nécessaire. D’autres formes sont possibles : mettre en avant les éléments les plus populaires, la recommandation ou encore un choix par défaut.
Ce conseil rejoint une loi que j’applique tous les jours en conception d’interface : la loi de Hick (”il est plus facile de décider parmi un nombre réduit d’éléments”)…
La concurrence est rude et l’internaute n’a pas de temps à perdre : allez à l’essentiel et simplifiez lui la vie !
Conseil 3 : Montrer le produit
Une image vaut plus que 10000 mots, cela semble évident mais ce n’est pas encore acquis… et pourtant l’apparence et le look restent toujours d’énormes critères de choix chez les acheteurs. Des boites comme
37 signals l’ont compris depuis longtemps … screenshots, demo feedback et bouche à oreille !
Conseil 4 : Laisser les gens essayer
Dans d’autres contextes que le web, c’est aussi une évidence. Essayer un produit, c’est engageant, au moins un minimum, et parfois l’essayer c’est l’adopter
Conseil 5 : AIDA
A…I…D…A, c’est à dire capturer l’attention (levier incitatif), gagner son intérêt (explication, description) , générer un désir (les gains) et pousser à l’action (call to action).
AIDA c’est donc jouer sur toute une somme de leviers incitatifs (positionnement, orientation, visuels, forme, accroche, couleur, typo …), mis en scène, orchestrés dans un seul objectif : L’ACTION
Conseil 6 : Guider l’attention
Dans le prolongement du point précédent: c’est capturer l’attention puis la guider jusqu’à l’objectif final : la vente ! Cela se joue sur une page ou sur un enchaînement de pages par la définition de parcours clients ultra scénarisés.
Conseil 7 : Toujours proposer une suite, des moyens d’actions complémentaires
C’est tout simplement ne pas abandonner l’utilisateur au beau milieu du site, toujours travailler le flux pour ne jamis pas perdre son attention. L’idée est bien évidemment de lui proposer des actions à haute valeur ajoutée, en lien avec vos objectifs Business : S’inscrire, Commander, Avoir de l’info + poussée…
Conseil 8 : Guider le regard en exploitant le diagramme Gutenberg
Il y a bien une tendance de lecture (du haut à gauche en bas à droite) : c’est très occidental, mais trés juste : on lit de gauche à droite et de haut en bas. Alors certes il y a des zones d’accroche plus importantes que d’autres (cf Eye Tracking) mais il existe surtout un flux de lecture auquel on ne peut échapper.
Toute une mise en scène est donc à travailler en fonction de ce flux, avec un point de départ en haut à gauche, des points d’accroche intermédiaires dans la diagonale et une terminaison en fin de diagonale (l’action recherchée). L’exemple ci-dessous en est une parfaite illustration:
