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 7 juillet 2010
Voilà tout ce qu’il vous faut pour travailler efficacement !
L’activité de maquettage (ou prototypage) fait partie intégrante d’une démarche de conception centrée utilisateur. Et le « Wireframe » est devenu au fil des années l’un des outils préférés des spécialistes de l’Expérience Utilisateur pour communiquer un concept, tester des propositions ergonomiques ou prendre des décisions de conception…
Balsamiq: Qualitystreet
Wireframe : les vrais enjeux
Le wireframe est un prototype dit “basse fidélité“.
Cet artefact non graphique représentant la structure et la mise en page des écrans à développer est selon moi INDISPENSABLE à tout projet de développement informatique. Vont y être représentés et localisés les fonctionnalités, les outils de navigation, les interactions et les moyens d’actions dont dispose l’utilisateur dans l’écran.
Le wireframe est généralement accompagné de quelques annotations pour décrire le mode de fonctionnement des éléments qu’il contient, et mis en contexte dans un scénario (enchaînement d’écrans selon un scénario clé, appelé storyboard). Les outils du marché pour créer des wireframes sont désormais nombreux, du plus simple au plus sophistiqué, du gratuit au très cher.
Pourtant inutile d’aller chercher très loin…
Juste ce qu’il faut …
Attention aux excès. J’ai vu trop de projets (menés selon des méthodes de développement traditionnelles) dans lesquels le wireframe n’était qu’une documentation supplémentaire, un simple livrable produit dans son coin par un consultant spécialiste ou non, motivé ou non et se substituant à tout dialogue entre les acteurs des projets. Quel gaspillage…
A l’inverse, et même si l’Agilité change radicalement les règles du jeu, je suis toujours stupéfait lorsque je débarque sur un projet Scrum en tant que coach Agile, de constater que le « wireframe » n’est que peu, voire pas du tout utilisé. Des ateliers de travail “Conception”, au tableau blanc, entre Product Owner et Equipe ne sont pas non plus, toujours organisés. Quel gaspillage…
Le TRIO GAGNANT
La force du wireframe (la représentation visuelle d’un écran) tient dans sa capacité à se faire dans un mode collaboratif, à susciter le feedback, à communiquer la Vision ergonomique et interactive, et enfin à soutenir les activités des acteurs métier, développement et test impliqués dans le projet.
Voilà sa raison d’être, et à ce petit jeu, le maquettage papier, le travail en équipe médiatisé autour d’un tableau ou sur la base des éléments crées en un clin d’œil à l’aide d’un outil comme balsamiq, sont de loin les plus efficaces.
Ce constat est encore plus vrai, sur les projets agiles, des projets découpés en sprints courts se terminant par la livraison systématique, toutes les 2 ou 3 semaines, d’incréments de produit. Dans ces projets où la dimension collaborative est encore plus forte, l’activité de maquettage, pourtant nécessaire, n’aura de valeur escomptée que si elle s’exerce au plus juste (en terme de timing, de périmètre et de niveau de détail), avec l’implication de tous dans l’objectif d’explorer, d’illustrer et de comprendre. C’est aussi pourquoi je suis revenu d’outils comme Visio, Axure ou PowerPoint qui ont longtemps eu ma préférence mais qui s’avérent la plupart du temps inappropriés dans ces nouveaux contextes…
Le Maquettage Papier
Le maquettage papier constitue la forme de maquettage la plus simple mais pas la moins efficace. Plus de visuel pour plus de feedback, de la collaboration et de la proximité avant tout.
Papier : le plus simple !
La complexité du format varie d’un contexte à l’autre puisque des prototypes papier très évolués peuvent être crées avec le matériel adéquat : manipulation directe, interactivité, esprit ludique et créativité sont alors au RDV.
Prototypage Papier
Les quelques sessions de travail de groupe orientées prototypage que j’ai pu animées ont toujours été très fructueuses tant pour la conception que pour le test.
Workshop de conception : Prototypage Papier avec sous groupes de travail
La simplicité est à la fois une valeur et un principe fort de l’agilité.
Maquettage Tableau Blanc
La forme de communication la plus efficace, à privilégier au maximum.
Communication Modes Effectiveness - Scott Ambler
Les ateliers de conception collaboratifs sont des moments intenses avec de vrais bénéfices :
- ils créent une dynamique collective, impliquent, et aboutissent à une décision collective plus solide
- ils sont source de valeur non seulement dans une dimension d’échanges, mais aussi et surtout en termes de découverte et de création de contenus
- ils sont interactifs, parfois même ludiques, jamais ennuyeux
- ils mettent l’accent sur des sens essentiels : le visuel et le toucher au travers de la manipulation directe: on découpe, dessine, on pose, regroupe, déplace toute sorte d’éléments : post it, papier, posters, on habille les murs
En terme de timing, je demande aux équipes agiles d’organiser ce type de workshop, soit l’après midi du dernier jour du sprint (de préférence), soit le matin du 1er jour avant la réunion de planification.
Le but est de décortiquer, explorer, modéliser collectivement avec le Product Owner, les experts UX et l’équipe le contenu potentiel du sprint qui va démarrer.
Maquettage : PaperBoard
Ces Ateliers spécifications / conception donnent du contexte et des éléments de conversation cruciaux aux User Stories. Ils permettent d’illustrer et de préciser les conditions de satisfaction tout en délivrant de précieux exemples. L’appareil photo est de mise : les photos associées à chaque User story peuvent par exemple enrichir le wiki du projet
Maquettage Balsamiq
Un outil que je conseille de plus en plus notamment aux équipes agiles. Une large librairie de composants, de nombreux template et surtout une grande facilité d’utilisation font de Balsamiq Mockups l’outil de PROTOTYPAGE RAPIDE le plus efficace du moment.
Balsamiq: exemple de wireframe
Je l’ai utilisé récemment dans des contextes d’équipe colocalisée (avec videoprojecteur) et dans un contexte agile offshore (avec partage d’écran) : dans les deux cas son apport fut salué par les équipes durant la réunion de rétrospective en fin de sprint.
Le format Sketch a aussi son intérêt. On ne perd pas de vue que l’avancement du projet (LE VRAI) ne se mesure pas dans le niveau de détail de ce qui n’est au fond qu’une maquette mais dans les livraisons régulières de notre vrai produit, et la valeur qui va s’en dégager.
Balsamiq Mockups peut être utilisé pour modéliser tout type d’interface: du portail web à l’application métier, du logiciel aux interfaces mobiles.
L’outil est payant mais le rapport qualité /prix est excellent.
Posté par jc-Qualitystreet le 9 avril 2010
Le lien vers l’interview que j’ai donnée à Gautier d’AlterErgo.
Le thème vous est sans doute familier : Ergonomie et Experience Utilisateur Agile:
Un extrait :
“En quoi la démarche ergonomique et les méthodes Agile sont-elles liées ?
Dans les deux cas, l’accent est mis sur le facteur humain, c’est selon moi l’élément déterminant. Pour le reste, la recherche permanente du feed-back, au travers notamment des tests et de la défense de la simplicité, est commune aux méthodes Agile et à la démarche ergonomique.
Qu’est-ce que les méthodes Agile peuvent apporter à la démarche ergonomique ?
La démarche ergonomique peut bénéficier de conditions très favorables offertes par l’agilité (des conditions rarement présentes dans les cycles de développement traditionnels). Ces leviers forts sur lesquels l’ergonome va pouvoir asseoir son action sont les suivants :
des livraisons fréquentes (toutes les deux ou trois semaines) ;
une activité de validation en continu ;
un travail collaboratif ;
la coopération et l’implication forte des clients et utilisateurs tout au long du projet ;
l’accent mis sur la simplicité.”
La suite de l’interview
