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 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
Posté par jc-Qualitystreet le 24 septembre 2009
Mais pas seulement…
Entre 1994 et 2009, le taux de réussite des projets IT est passé de 16% à 32 % (selon les dernières statistiques, et le dernier Chaos report).
Ok c’est mieux, mais toujours et vraiment pas terrible…
Petit retour en arrière, en 2006, le Standish Group revenait sur ces projets qui marchent en analysant les facteurs de réussite. Pour la première fois, l’agilité était citée … d’ailleurs Jim Johnson (Standish Group) en faisait l’éloge dans une interview sur InfoQ
TOP 5 des Facteurs de Succès (2006)
- IMPLICATION DES UTILISATEURS FINAUX
- Soutien de la direction
- Objectifs Business clairs
- Périmètre de projet optimal
- PROCESS AGILE
Chaque élément est important, et je suis ravi (comme tant d’autres qui prêchent pour leur paroisse…) de retrouver aussi bien placés dans la liste des éléments qui me tiennent à cœur. Mais la richesse d’un projet IT, et surtout les clés de sa réussite résident avant tout dans la juste association, l’habile combinaison, des bonnes pratiques et des méthodes. Combiner pour voir les choses différemment, combiner pour faire la différence et donner plus de valeur, combiner pour déclencher l’étincelle… et FAIRE QUE CELA MARCHE VRAIMENT.
Ma conviction est simple :
un cadre Scrum + le Lean Thinking et ses outils + des pratiques XP (toujours extrêmes en 2009 ? ) + l’Experience Utilisateur en fil rouge + une stratégie de Testing appropriée (Agile testing quadrants de Brian Marick) … Le TOUT EN CONTEXTE, AVEC DES EQUIPES MOTIVEES
= SUCCES !
