19 May 2013

Inscrivez-vous au Flux RSS

Tri de cartes Fermé et En Groupe: une belle technique UX…

Posté par jc-Qualitystreet le 13 avril 2012

…rapide et efficace pour tester vos hypothèses sur l’architecture d’information de vos sites et applications…

Personnellement, j’ai une préférence pour plusieurs groupes de 3 ou 4 participants (experts, utilisateurs…). Si vous cherchez à vous assurer de la bonne compréhension de vos catégories et de la bonne organisation des éléments qui les composent: le tri de cartes est fait pour vous.

un peu d'organisation, que diable!

un peu d'organisation, que diable!

Simple et rapide, la technique peut facilement être mise en oeuvre, par le praticien AGILE UX, dans une dynamique de projet Agile, au cours des premiers sprints…

une session Tri de Cartes... ça se passe comme ça...

Et concrètement?

Disons que les consignes que vous autre spécialiste UX pourriez adresser à votre petit panel d’utilisateurs pourraient ressembler à cela:

“Devant vous des catégories et une série de plus petites cartes représentant des contenus.  Nous allons vous demander de ranger ENSEMBLE les cartes dans la catégorie à laquelle vous pensez qu’elles appartiennent”

  • ” Si des cartes ne vous semblent pas explicites, nous pouvons si besoin vous donner une description mais le but c’est quand même d’aller vite…
  • Le cas échéant, si vous pensez que des cartes peuvent aller dans plusieurs catégories, écrivez une nouvelle carte…
  • Travaillez ensemble, Décidez ensemble, recherchez le consensus, et si nécessaire votez en vous référant à ce poster (vote à 5 doigts)
  • N’oubliez pas rien n’est figé…”

“Ensuite nous vous demanderons de nous indiquer individuellement, par catégories, les 3 cartes que vous mettriez en avant”

Vous l’aurez compris, l’interêt de ce type de protocole est que vous pouvez tester plusieurs choses en 1 session, et recueillir un précieux feedback. Les interactions entre participants sont selon moi source de valeur supplémentaire!

Essayez donc, juste pour voir :)

Design d’interface et critère ergonomique 11: Compatibilité

Posté par jc-Qualitystreet le 23 février 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.

Compatibilité : en quoi ça consiste ?

C’est s’adapter aux modes opératoires de l’utilisateur (mais aussi tenir compte des contextes et situations similaires).

Ce 11ème et dernier critère se réfère en premier lieu à l’accord existant entre les caractéristiques des utilisateurs (caractéristiques physiques, psychologiques, démographiques, expérience, compétences, attentes, besoins…), les tâches et les éléments d’interface et d’interactions.

La compatibilité concerne aussi la capacité de l’application à s’inscrire dans des standards établis pour des contextes similaires. On parlais beaucoup des standards Windows; on parle toujours des standards Web…Les standards d’accessibilité relèvent donc en partie de critère.

Des standards pour les interfaces mobiles... qui vont nous suivre

Des standards pour les interfaces mobiles... qui vont nous suivre longtemps

La compatibilité est un critère ergonomique majeur en conception d’interface, avec entre autres, à la clé plus d’efficience et d‘efficacité dans l’utilisation de l’outil et une réduction du temps d’apprentissage

Mauvaise pratique

Exemple 1 :

Bouh... le bouton radio pour déclencher une action!!

Bouh... le bouton radio pour déclencher une action!!

Exemple 2

Ok mais le fil d'Ariane et les éléments de navigation, on les attend... en haut!

Ok mais le fil d'Ariane et les éléments de navigation, on les attend... en haut!

Quelques bons exemples … so GOOD !

Bonne pratique :

Bonne métaphore

Bonne métaphore

Bonne pratique :

Un élément que chacun d'entre nous connait

Un élément que chacun d'entre nous connait

Bonne pratique :

Une fiche produit efficace chez Gap avec tout ce que l'utilisateur peut avoir besoin pour faire son choix

Une fiche produit efficace chez Gap avec tout ce que l'utilisateur peut avoir besoin pour faire son choix

Bonne pratique :

Yahoo mail, quelque chose de connu pour les utilisateurs d'outlook...

Yahoo mail, quelque chose de connu pour les utilisateurs d'outlook...

Bonne pratique :

Regroupement par continent puis pays

Regroupement par continent puis pays... vous avez dit modèle mental

Bonne pratique :

La cible des utilisateurs est US...

La cible des utilisateurs est US...

Bonne pratique :

Shazam: une application mobile qui répond efficacement aux besoins des utilisateurs!

Shazam: une application mobile qui répond efficacement aux besoins des utilisateurs!

Bonne pratique :

Du déjà vu remasterisé !

Du déjà vu, cette fois-ci remasterisé !

Bonne pratique :

Trés bonne compatibilité avec l'univers de la facturation...

Trés bonne compatibilité avec l'univers de la facturation...

Quelques exemples de recommandations

  • Adopter le point de vue de l’utilisateur
  • Proposer un contenu engageant, pertinent et attendu par les utilisateurs
  • S’assurer que la logique applicative correspond bien à la logique (modèle mental) de l’utilisateur
  • Permettre aux utilisateurs de recevoir des documents conformes à  leurs préférences
  • Adapter l’ordre des menus à la façon dont l’utilisateur exécute ses actions
  • Placer les éléments les plus importants pour l’utilisateur en haut de la liste
  • Conserver l”organisation du formulaire papier pour les pages formulaires remplies par les opérateurs
  • Proposer une séquence de saisie adaptée à l’ordre souhaité par les utilisateurs
  • Proposer un moyen facile et évident de revenir à la page d’accueil du site
  • Respecter les standards de conception d’interface Windows
  • Proposer des valeurs par défaut quand c’est possible
  • Utiliser le langage de l’utilisateur
  • Doter chaque image d’une alternative textuelle
  • Réserver les textes soulignés aux liens hypertextes
  • Identifier la destination des liens
  • Proposer un plan de site disponible depuis chaque page
  • Indiquer à la fois sur une page de résultats le nombre de résultats, le nombre de pages de résultats ainsi que le nombre de résultats par page
  • Proposer sur la page d’accueil du site web au moins un moyen de contact
  • Laisser à l’utilisateur suffisamment de temps pour lire et utiliser le contenu.
  • Réserver les couleurs vives pour attirer et capter l’attention
  • Identifier chaque page du site par un titre de page
  • S’assurer de la compatibilité du site avec les principaux navigateurs du marché
  • Optimiser les pages de l’application pour qu’elles s’affichent sans ascenseur horizontal en résolution 1024×768
  • Ne pas construire entièrement un site public sur  une technologie telle que Flash, Flex, Ajax
  • Assurer l’accessibilité des contenus dynamiques
  • Construire la fonction de recherche à partir des termes et expressions utilisateurs

Design d’interface et critère ergonomique 10: Signifiance

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 - Abastrait

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

Des icônes isolées et ambigues sur Rowenta.fr

Quelques bons exemples… So good!

Bonne pratique :

Des libellés concis et explicites

Des libellés concis et explicites

Bonne pratique:

Un choix d'icônes efficace qui respecte les conventions

Un choix d'icônes efficace qui respecte les conventions

Bonne pratique:

Association Icône et Libellé: Clair et Explicite

Association Icône et Libellé: Clair et Explicite

Situation de travail informatisée: Processus, activité et ergonomie

Posté par jc-Qualitystreet le 22 septembre 2009

La situation de travail se définit comme le contexte concret où les hommes réalisent une production matérielle ou immatérielle, dans des conditions de travail et de sécurité données. Manuelles, outillées, désormais informatisées et mobiles, les situations de travail n’ont cessé d’évoluer …

Dernier stade de cette évolution, les situations de travail informatisées, mettent en relation l’individu et un système informatique (ordinateur) pour la réalisation d’une tâche. .

Comment comprendre les situations de travail informatisées ?

Appuyez-vous sur ce modèle …

situation-de-travail-informatisee

Et concrétement:

  • Etudier de manière approfondie l’activité des utilisateurs (le cœur de la situation de travail) et les processus métiers dans laquelle elle s’exécute
  • Etudier précisément chaque déterminant de l’activité, avec une attention toute particulière sur les Interfaces Utilisateurs
  • Mesurer les effets de la situation de travail à la fois sur l’utilisateur et l’entreprise

Le modèle décortiqué

L’activité de l’utilisateur a trois composantes :

  • Physiques (vision, audition, mobilité)
  • Intellectuelles (mettant en jeu divers processus cognitifs: résolution de problème, prise de décision, mémorisation, apprentissage…)
  • Sociales et de coopération (communication, collaboration, coordination …)

Elle a aussi plusieurs déterminants :

  • Le poste de travail et interfaces Utilisateur (dans un contexte Business to Employee, c’est par exemple le Portail d’entreprise dont le rôle est d’instrumenter l’activité de l’utilisateur autour des processus métier de l’entreprise)
  • L’organisation du travail (situation socio-économique de l’entreprise, durée du travail, horaires, rythmes et cadences de travail, organisation des équipes, hiérarchie …)
  • L’environnement de travail (espace de travail, ambiances physiques comme l’éclairement, le bruit, flux de personnes…)
  • Les contenus et objectifs du travail («la tâche» à réaliser et ses attributs, services à assurer, contrôles à effectuer, consignes, modes opératoires…)
  • Les caractéristiques de l’utilisateur (âge, sexe, qualification, formation, expérience, savoirs, savoir-faire, savoir-être, ancienneté, statut, handicaps, motivation …)

Une fois réalisée, l’activité aura des effets à la fois sur :

  • l’utilisateur (notamment en termes de charge de travail, de connaissances, compétences, de satisfaction …)
  • l’entreprise, principalement en terme de productivité.

User Experience Guidelines Windows 7

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 !

Prototypage Papier en atelier de travail : Encore !

Posté par jc-QualityStreet le 21 mars 2009

Mais toujours avec de la préparation (beaucoup de découpage) et plutôt en petits groupes, c’est en effet beaucoup plus riche et beaucoup plus sympa !

A l’heure ou d’autres cherchent encore et toujours l’outil magique qui révolutionnera l’ère du prototypage ou de la conception ergonomique de Wireframes, le prototypage papier met délibérément l’accent sur l’humain, la collaboration et la proximité … des valeurs trés agiles.

Car selon moi, la vraie force du format Wireframe (livrable essentiel de conception) réside avant tout dans sa capacité à :

  • se faire dans un mode collaboratif,
  • susciter le feedback,
  • communiquer la vision ergonomique
  • soutenir les activités à la fois des acteurs métier / MOA et des acteurs Développement & Test.

Le tout en restant dans le JUSTE CE QU’IL FAUT

Et le prototypage papier va bien dans ce sens… Les possibilités de mise en oeuvre sont nombreuses et les bénéfices de ce format en workshop conception sont très réels. Voilà ce que j’ai pu observer dans quelques séances de groupes:

  • C’est ultra collaboratif, ça suscite les échanges et ça permet d’obtenir une vision commune, y compris avec des équipes pluri disciplinaires ou qui n’ont pas forcément les mêmes objectifs (des groupes hétérogènes c’est encore mieux !)
  • Cela réduit les problèmes de communication: on est en direct !
  • C’est plus ouvert et ça nous libère de pas mal de contraintes en donnant l’impression que rien n’est figé, qu’on peut modifier les choses aisément sans gros impact
  • C’est source de créativité (faites confiance à l’intelligence collective)
  • C’est interactif, c’est de la manipulation directe, c’est ludique et en rupture avec la passivité des réunions classiques
  • C’est adaptatif et évolutif avec multiples modes d’intervention et d’animation selon les contextes

Pour conclure, une petire illustration en images d’une séance Prototypage Papier:

Get Adobe Flash playerPlugin by wpburn.com wordpress themes