A propos de Raphaël

Consultant Freelance en ergonomie et UX depuis 1999 ! Je travaille sur de nombreux supports, des interfaces WIMP à la télévision en passant par les mobiles, le web pour le grand public ou les professionnels.

Sûreté ou ergonomie ? Comment perdre un client ?

Petite expérience vécue du week-end, ou comment perdre bêtement des clients. J’ai commandé un nouvel hébergement chez OVH, avec un processus de commande, un peu compliqué, notamment si vous ne souhaitez commander qu’un hébergement sans nom de domaine.

Mais le problème n’est pas là, il se situe au moment de la vérification de l’identité. Un numéro de téléphone est demandé pour envoyer un SMS. La saisie se présente sous la forme suivante (avec un gif animé, la loupe tourne)  :

 

Vérification SMS

 

La vérification du format du numéro est en réalité en temps réel, mais tant que vous n’avez pas saisi le bon format, il ne se passe rien. Si ce n’est la loupe qui tourne, donc vous pouvez attendre, attendre, attendre,…, en pensant qu’il se passe quelque chose, mais non ! Dans mon cas, suivant mes divers essais (4 ou 5 minimum), soit le format n’était pas le bon, soit il manquait un chiffre. Finalement, quand saisie le bon format, Ô miracle, on voit apparaître un bouton « envoyer le code » :

Lire la suite

Analyse de l’activité dans un SAMU, Etude de cas.

L’analyse de l’activité est à la base de l’ergonomie. Je vous propose d’illustrer par une étude de cas cette première phase de la conception d’IHM.

L’analyse de l’activité.

Cette phase est bien souvent négligée ou tout simplement ignorée. Elle est pourtant essentielle pour comprendre les situations de travail. Pour rappel :

L’analyse de l’activité est une méthode fondamentale en ergonomie. Elle consiste à observer in situ des utilisateurs afin d’analyser, de modéliser et de comprendre les tâches qu’ils effectuent réellement dans leurs contextes.

Le but est de formaliser les caractéristiques de l’utilisateur et ses besoins fonctionnels réels. Ces étapes sont souvent négligées dans les projets informatiques ce qui aboutit à des services mal acceptés, peu ou pas utilisés, et même rejetés par les utilisateurs.

L’activité réelle se distingue de l’activité prescrite. L’activité réelle est celle observée en situation. L’activité prescrite est celle qui a été définie dans les procédures, par la hiérarchie ou par l’environnement. Il y a toujours un décalage plus ou moins important entre les deux. L’analyse de l’activité met en évidence ce décalage et les comportements qu’il peut générer.

Outre l’aspect formel de l’analyse de l’activité, la relation avec les utilisateurs est importante. Elle permettra par la suite d’avoir leurs soutiens et de comprendre certaines situations ou le contexte de certaines demandes.

Lire la suite

L’ère Post PC.

Apple, lors de sa dernière keynote, a annoncé de nombreuses nouveautés concernant ces futures systèmes (iOs 5 et Mac Os X Lion). Steve Jobs a aussi présenté iCloud, un service « dans les nuages » (En clair, un gros data-center) centralisant les données. Les divers périphériques, iPhone et iPad, n’ont alors plus besoin de Personnal Computer (PC) pour fonctionner et synchroniser leurs données. La nouvelle était connue depuis un moment et était attendue. Comme le dit Steve Jobs, cela signifie le passage à l’ère Post PC. C’est là, à mon avis, l’annonce majeure de cette keynote, qui va avoir impact fort sur l’informatique dans les dix années à venir. Lire la suite

L’ipad, la presse et la main ?

L’ipad est arrivé sur le marché depuis un peu plus d’un an. Il a eu un impact non négligeable sur la presse traditionnelle ou en ligne qui c’est largement ruée dessus. De nombreux magazines ou journaux proposent donc une application.

Il est intéressant de regarder les différents choix faits en matière d’interface, de prendre un peu de recul par rapport à des interactions qui se veulent naturelles et d’envisager les pistes de développement.

Petit panorama de la presse sur iPad.

La presse sur iPad est fortement issue de la presse papier. On retrouve donc une structuration proche de celle-ci avec globalement deux approches. Une première approche « papier » qui est clairement la reproduction du format papier sur l’iPad, avec une mise en page reprenant les codes de la PAO classique. La seconde approche « Web Magazine » est plus inspirée des sites Web actuels de journaux comme le NY Times, avec une approche par thème et quelques animations multimédias. Lire la suite

Freebox Connect, respecter le guidelines iOS ?

Free a proposé récemment, Freebox connect, une application pour iPad permettant de se connecter à la Freebox TV Revolution. D’un point de vue fonctionnel, c’est excellent, comme souvent chez Free. Mais il a été fait le choix de reproduire l’interface présente sur la télévision. C’est là que ça commence à clocher.

L’interface de la télévision sur l’iPad ?

L’interface ne suit pas le guidelines iOS, on se retrouve donc avec des incohérences, des éléments qui sont conformes avec le guidelines iOS et d’autres conformes avec la télévision. De plus l’interface ne s’adapte pas au mode vertical. Dans le même temps, l’interface est semblable avec la télévision notamment l’écran d’accueil mais le contenu n’est pas le même.
Lire la suite

Les points clefs de la conception d’une application Windows ou WIMP.

Concevoir une application WIMP nécessite de respecter certaines règles et d’appliquer le guidelines de la plateformes. Nous illustrons ici ces principes avec le Guidelines Windows. Toutes les applications développées pour Windows se doivent de respecter le guide « Windows User Experience Interaction Guidelines ».

Fenêtres primaires, secondaires et menus

Les applications WIMP (Windows, Icone, Menu, Pointing) sont issues des travaux fondamentaux réalisés au Xerox PARC dans les années 1970. Elles sont toutes organisées de manière similaire autour d’une fenêtre primaire qui contient les objets nécessaires à l’interaction (Le document texte dans Word, un contact ou une liste de contact dans un carnet d’adresse). Les actions sur ces objets sont réparties dans les menus. Des fenêtres secondaires permettent d’enrichir le dialogue ou de présenter les propriétés. L’interaction se fait toujours dans le sens « sélection » d’un objet puis « action ».

Une fenêtre primaire se caractérise par :

  • Dans la barre de titre, l’icône et le nom de l’application, les trois boutons (réduire, agrandir, fermer)
  • Le contenu est l’objet de l’interaction.
  • La présence d’un menu.

Barre de titre, fenêtre primaire.

Lire la suite

Quelques bonnes pratiques pour la rédaction d’articles (sous WordPress).

Cet article présente quelques bonnes pratiques pour la rédaction d’un article sur un blog, sous WordPress. Il s’adresse à des novices et reprends les points importants à respecter à fin d’assurer à la fois une bonne lisibilité et un bon référencement.

Je l’ai écris initialement pour un autre blog qui disposent de nombreux rédacteurs par nécessairement au courant des subtilités du web sémantique. Je vous propose donc quelques règles simples qui permettront d’améliorer le référencement et aussi d’améliorer la lisibilité des articles pour vos lecteurs.

Préparation de l’article.

Vous pouvez préparer votre article de divers manières. Pour des articles de fonds un travail préparatoire est souvent nécessaire. Je conseille alors de créer un dossier spécifique, sur votre ordinateur,  pour enregistrer les documents et les images recueillis et qui serviront de sources pour l’article. Cela vous permettra aussi de centraliser les images qui devront être retouchées avant publication.

Pour les articles longs, je vous conseille de le préparer avec Word ou un autre traitement texte. Ne le mettez pas en page dans le traitement de texte, ça ne sert à rien. La version 3.2 de WordPress devrait présente un environnement de rédaction plus favorable, mais à l’usage est traitement texte gère mieux les annuler/rétablir, les copier/coller, les sauvegardes, etc…

Pour les articles courts, moins de 400 mots,  faites le directement dans WordPress.

Pour les images, préparer les sous la forme de fichiers indépendants. Dans la mesure du possible, exporter les en jpg avec une hauteur ou une largeur de 1000 pixels maximum. Je vous conseille de les insérer dans l’article une fois que celui-ci est rédigé.

Petit rappel : Le droit d’auteur est valable aussi sur le web, pour le texte, les photos, les vidéos et tous autres contenus. Le droit à courte citation peut être utilisé. Il faut alors citer les sources, et faire les liens hypertextes. Lire la suite

Concevoir une application WIMP, le processus.

La conception d’une application WIMP suit un processus structuré relativement simple. Ce processus est similaire quel que soit le système, la plateforme finale : Windows, Mac OS X, iOS, Java, RIA…

Il est directement lié aux principes fondamentaux des interfaces WIMP que nous avons vus précédemment.

Le processus de conception d’interface WIMP.

Processus de création d'une application.

Les étapes de conceptions d’une application WIMP sont les suivantes :

  • Les utilisateurs sont à l’origine de la démarche de conception, c’est pour eux que l’on travaille.
  • La première étape est l’analyse de l’activité. Si elle n’est pas possible pour diverses raisons, elle peut être remplacée par une étude des usages ou de la littérature scientifiques sur ces usages. Le but est de comprendre l’activité, les procédures, les tenants et les aboutissant.
  • A partir de l’analyse de l’activité, il est possible de modéliser l’activité et d’écrire des scénarios d’usages.
  • La modélisation permet de dégager le ou les objets de l’interaction. L’objet de l’interaction est ce sur quoi l’utilisateur va travailler. Par exemple, dans Word, l’objet est le document texte, dans photoshop, c’est l’image, dans une messagerie, c’est les emails.
  • L’objet de l’interaction est donc placé dans une fenêtre primaire. Dans une application, il peut y avoir, par exemple, une fenêtre primaire avec la liste des objets et une fenêtre primaire pour chacun des objets, comme dans le cas d’une messagerie.
  • Les actions, les fonctions et les propriétés sont réparties dans les menus. Elles s’appliquent donc généralement à l’objet sélectionné dans la fenêtre primaire.
  • Certaines actions nécessitent des dialogues. Il peut être pertinent de mettre en avant certains outils ou certaines informations dans des fenêtres utilitaires. Il est aussi nécessaire de prévoir des fenêtres de messages de 3 types : Blocage, Alerte à la prudence ou Information.
  • L’ensemble, fenêtre primaire, secondaires et menus, donne la structure de l’application.
  • La structure de l’application combinée aux règles de conception du système concerné (Windows, iOS, Web,…) , permettent de décrire l’ensemble des écrans dans des spécifications détaillées.
  • Ces spécifications détaillées peuvent être validées par un travail avec les utilisateurs ou à l’aide des scénarios d’usages.

Les points importants à respecter.

  • L’application doit permettre de réaliser l’activité observée initialement.
  • L’application ne doit pas être construite comme une somme de fonctions ou sur la base des scénarios d’usage, mais bien à partir des objets à manipuler. Une construction basée sur les scénarios donnerait une application qui permettrait de réaliser essentiellement ces scénarios et pas tous les scénarios que les utilisateurs vont se faire une joie d’inventer.
  • D’une interface cohérente, homogène et respectueuse du standard découle une navigation logique, souple et facile à prendre en mains.

Cela peut paraître relativement simple une fois exprimé comme cela, mais la mise en œuvre demande un peu de pratique. Il faut garder à l’esprit que l’utilisateur va faire les choses dans un ordre que vous n’avez probablement pas prévu.

Un exemple

Prenons un exemple volontairement un peu simplifié pour illustrer ce processus de conception.

La demande porte sur la conception d’une interface pour une application d’inventaire d’un parc informatique. L’inventaire est donc une base de données contenant l’ensemble des postes à administrer.

Les fonctions envisagées sont :

  • Consultation : accès en lecture à la base de données, avec moteur de recherche, navigation dans le parc, possibilité de sélectionner un ensemble de fiches pour effectuer une opération groupée.
  • Gestion : cette partie est plutôt orientée action : entrée et sortie de matériel, installations, interventions, suivi de réparation, déménagement…

Quel est le but de l’application ?

Gérer un stock de stations de travail composé de matériels, de logiciels et d’informations.

Quel est l’objet à manipuler dans l’application ?

La station de travail, et plus globalement la liste des stations.

Quelle structure pour l’application ?

La fenêtre primaire contiendra donc la liste des stations de travail. Une deuxième fenêtre primaire présentera une station de travail.

A partir de là, on pourra établir les menus avec les fonctions suivantes :

  • Créer, supprimer une station de travail
  • Associer à une station du matériel, des logiciels, des informations
  • Rechercher des stations.
  • Organiser les stations.
  • Modifier plusieurs stations à la fois.
  • Importer/exporter une liste de stations.

Les matériels, les logiciels et les informations vont donc constituer une ou plusieurs fenêtres secondaires permettant de compléter les informations et de choisir parmi des listes existantes ou à créer.

Structure de l'application.

Les menus sont organisés par fréquences d’usages, regroupements sémantiques et à défaut par ordre alphabétique. La barre de raccourcis reprend les commandes les plus fréquentes pour les rendre facilement accessibles.

La fenêtre primaire pourrait être la suivante :

Exemple de fenêtre primaire.

L’illustration est donnée pour une application pour Windows, mais il est possible d’appliquer la même démarche pour un autre système ou même simplement un service avec une interface Web ou RIA.

Les critères Heuristiques de Bastien et Scapin.

Les critères heuristiques sont des règles à respecter dans le cadre de la conception des interfaces. Ces critères permettent de catégoriser les défauts d’ergonomie, de juger de leur importance et de trouver des solutions pour les résoudre. Ces critères doivent être gardés à l’esprit lors de la conception afin de prendre en compte l’ensemble des facteurs favorisant l’ergonomie d’une application, d’un service ou d’un site web.

Je me permet de les rappeler, car ils sont souvent cités mais encore trop souvent méconnus, même par ceux qui les citent.

Référence : Critères Ergonomiques pour l’Évaluation d’Interfaces Utilisateurs (version 2.1), J. M. Christian Bastien and Dominique L. Scapin, INRIA, Technical report N° 156 Mai 1993.

Ce document est accessible sur la bibliothèque de l’INRIA, mais comme je le retrouve jamais, une copie est disponible sur mon site.

1. Guidage

Définition : Le Guidage est l’ensemble des moyens mis en œuvre pour conseiller, orienter, informer, et conduire l’utilisateur lors de ses interactions avec l’ordinateur (messages, alarmes, labels, etc.), y compris dans ses aspects lexicaux. Quatre sous-critères participent au Guidage : Incitation, Groupement/Distinction entre Items, Feedback Immédiat et Lisibilité. Lire la suite

Concevoir une application WIMP ; Les débuts.

Les interfaces WIMP (Windows, Icônes, Menus, Pointing) sont les interfaces les plus performantes. Pourtant elles ont déjà une histoire et ont connu certaines évolutions pour s’adapter aux besoins.

Le contexte historique.

Les interfaces WIMP sont le fruit de 30 ans de recherches et d’expérimentations. Elles s’appuient sur les travaux de grands psychologues et sur une démarche expérimentale. Par conséquent, elles suivent des règles assez strictes.

En 1970, Xerox fonde le Xerox Palo Alto Research Center. Xerox donne 10 ans à de jeunes chercheurs pour concevoir l’ordinateur du futur.

Ces chercheurs abordent le problème en s’appuyant sur les travaux des psychologues s’intéressant au développement de l’enfant : Jean Piaget et Jérôme Bruner. Le modèle de développement de Bruner parle d’une combinaison de capacités de représentation (orientation spatiale, manipulation d’objets), capacités « iconiques » (reconnaissance visuelle, comparaison) et de capacités « symboliques » (comprendre des notions abstraites).

Le Xerox PARC s’oriente donc vers une interface représentant les objets à manipuler. Pour la manipulation, ils introduisent l’utilisation de la souris. La métaphore du bureau favorise la compréhension du système. Ce qui aboutit à la conception de l’alto et du star. Lire la suite

2 livres ; Design thinking, CSS3 & HTML5

Pour ce vendredi, deux ouvrages qui m’ont paru intéressant ces derniers temps.

This is service design thinking

Un trés belle ouvrage sur la conception de service, c’est d’ailleurs le prochain sujet de l’UX Book club qui aura lieu sous peu ! Vous pouvez retrouver un aperçu sur le site du livre.

Illustration de "This is service design thinking"

CSS avancées Vers HTML 5 et CSS 3

Un peu de technique avec cet ouvrage qui présente le présent et l’avenir du web. C’est donc parfaitement indispensable pour mettre les mains dans les CSS.

La présentation faites l’auteur Raphaël Goetter (avec prénom comme ça c’est que du bon !) :

Vous croyiez tout savoir sur les CSS ?
J’ai une bonne et une mauvaise nouvelle pour vous…

Grâce à ce livre, vous irez encore plus loin en apprenant à faire usage des pratiques CSS2.1 avancées, mal connues mais pourtant déjà utilisables en production, et ce, pour l’ensemble des médias reconnus par les styles CSS (écrans de bureau ou mobiles, messageries, mais aussi impression, médias de restitution vocale, projection et télévision).

Maîtrisez tous les rouages des positionnements classiques et avant-gardistes, des apports technologiques de HTML5, exploitez les microformats, optimisez les performances d’un site, gérez efficacement vos projets, ou contournez les bogues des navigateurs (hacks, commentaires conditionnels, HasLayout…).

Enfin, profitez dès aujourd’hui des nouveautés de CSS3 : typographie, gestion des césures, colonnes, arrière-plans, dégradés, ombres portées, redimensionnement, rotations, transitions et autres effets animés, sans oublier les Media Queries, qui permettent d’adapter le site à son support de consultation.

Pour cette semaine ça devrait suffire à vous occupez !

Même mon chien peut être ergonome !

Sous ce titre un peu provocateur, il se pose la question de la diversité des compétences, des formations et des appellations des métiers tournants autour de la conception de l’IHM et de l’expérience utilisateur.

Le titre d’ergonome n’est pas protégé au contraire de certains titres comme « psychologue » qui nécessite d’avoir un Bac +5 en psychologie et un an d’expérience dans le domaine. Donc tout le monde peut se dire « ergonome », même mon chien. (Si j’en avais un ! Je vais en parler à mon cheval.) Lire la suite

L’eye-tracking est mort, vive le wet-finger-tracking !

L’eye-tracking est une méthode d’analyse des comportements présentant trop de biais. Une méthode récente, le wet-finger-tracking, permet de mieux appréhender les comportements et les processus cognitifs à l’œuvre lors de l’utilisation de paradigme d’interface innovante ou non.

En effet l’eye-tracking va faire porter les mesures sur les informations disponibles en amont des processus cognitifs, à savoir la perception visuelle. A l’inverse, le wet-finger-tracking mesure précisément les informations en aval des processus cognitifs. Pour dire simplement les choses, le wet-finger-tracking est le résultat constaté des représentations mentales de l’utilisateur. Nous nous plaçons donc dans le « faire » et non plus dans « l’apercevoir ». Lire la suite