infographie contre visualisation des données

3 réponses

Le site ReadWriteWeb publie un article court sur la différence entre infographie et visualisation des données en anglais.

Comme il est assez intéressant, je le résume ici :

Une visualisation de données est une représentation graphique de données quantifiables au moyen d’une carte, d’un tableau ou autre diagramme. Bien qu’elle puisse être créée à la main, l’intérêt est de la générer directement par l’application. On peut mettre en oeuvre des techniques d’organisation de l’information.
Une infographie est une représentation graphique qui associe une ou plusieurs visualisations de données avec des éléments (graphiques ou textuels) créés spécialement pour mettre en avant des éléments clés par exemple en soulignant des relations, en montrant un processus ou en racontant une histoire. Ces éléments ne peuvent être automatiquement déterminées d’après les données. Une infographie exige de mettre en oeuvre un processus créatif avec une certaine compréhension des données sous-jacentes et de son contexte.

Cependant, si une infographie offre plus d’explications, elle est statique par définition. Au contraire, la visualisation des données peut être intéractive et permettre à l’utilisateur d’explorer les données /informations de différentes manières.

Apprendre le design d’interaction dans les objets de tous les jours – Bill DeRouchey

Laisser un commentaire

Résumé de cette vidéo : Learning Interaction Design From Everyday Objects par Bill DeRouchey.

L’inspiration est génératrice de design.
On peut ainsi prendre inspiration dans les objets de tous les jours. Il y a des boutons et des affichages partout !
Au cours de cette présentation, Bill DeRouchey s’attache à critiquer de nombreux designs d’objets de notre vie de tous les jours par exemple le distributeur de billets avec une led verte qui nous indique le processus en cours est un exemple réussi de suivi de l’avancement du processus et de guidage de l’utilisateur.

Au contraire, le gamepad ci-dessous est un exemple désastreux avec ses boutons (A, B, X, Y) dont les labels semblent avoir été placés pour perdre l’utilisateur.

Nous faisons des produits pour que les gens les utilisent d’où l’importance de leurs interfaces et de leur utilisabilité.

L’attention aux détails génère le métier de designer.
Il est très utile de mettre le retour d’information à la source du problème : exemple de la connexion d’alimentation d’un mac.

L’interaction a un langage que nous pouvons créer et modifier.
Les designers ont la chance de pouvoir créer de nouvelles conventions et de pouvoir modifier les mauvaises.
D’où l’importance de l’utilisation des affordances !
Comment ? Par l’utilisation de certaines formes, couleurs, tailles, mots, etc.
Pourquoi ? Pour mettre en avant la priorité, le plus important, d’une dans l’interface, sa clarté et son but.

La priorité.
Est-ce que les éléments ont une hiérarchie ? (couleur, taille, zones)
Il prend l’exemple des télécommandes dont le design se révèle souvent mauvais (mauvais organisation ! autant de boutons qu’un portable ??).
Pour lui, un bon exemple de télécommande est celui de Tivo ! Priorité et hiérarchie par zone !

La clarté.
Est ce que l’interface communique clairement ? (Mots, icones, couleurs).
Il montre même qu’on peut faire évoluer ce langage.
Par exemple, le bouton ci-dessous n’a pas besoin de label parce que les symboles sont passées dans la langage courant de l’interaction.

Il faut éviter les confusions liées à ce langage par exemple le bouton pause/annuler avec une icône clairement indiquant l’annulation de l’action.

Analogie du mettre en marche / mettre en pause qui passe des magnétoscope à la machine à laver.
Le bouton ci-dessous n’a pas besoin de label.

Ce langage est parfois différent suivant les produits (manque de consistance) qui peut perturber.
Besoin de conventions !
L’exemple d’une convention très répandu à utiliser intelligemment : Vert = bon, Rouge = problème !

L’usage.
Est ce que le produit maintient ce qu’il est supposé être ou faire ? (Simplicité, perspective, contrainte).

Le distributeur de boisson est un bon exemple : Insérer la monnaie, sélectionner la boisson (énorme bouton), fini.

Quel intérêt d’avoir à rentrer la date pour un micro-onde ? Programmer une cuisson 2 jours avant ? 🙂

Experience utilisateur et Agilité – Johanna Kollmann

Laisser un commentaire

Résumé de la vidéo suivante : L’importance de l’identité et de la vision pour les designers sur les projets Agile – Johanna Kollmann.

La vidéo présente les résultats d’un sujet de recherche. La méthode Waterfall n’a pas marché pour Johanna Kollmann. Par contre Agilité et Expérience utilisateur semble s’associer parfaitement dus à leurs aspects itératifs et collaboratifs.

Le premier travail est d’intégrer les communautés. Ainsi les designers doivent être des participants actifs ce qui requiert de la flexibilité.

L’étude a été faite avec une approche qualitative autour de deux axes : interviews et observation contextuelle
Il a fallu s’attacher à la compréhension de l’Agilité, des outils utilisés, de l’implication du client ou encore de l’environnement de travail.

Analyse des interviews.

Identité.
Il faut un état d’esprit Agile (flexibilité, simple et efficace).
En Agilité, on part du principe que ce ne sera jamais bon / parfait ce qui n’est pas intuitif dans l’état d’esprit du design.
Malgré les difficultés, les participants pensent que l’approche Agile est la plus intelligente.
Il est important pour les designers de pouvoir parler, faire des retours et trouver des meilleurs moyens de travailler avec les développeurs parce que c’est le nœud du problème.
Il est intéressant d’utiliser esquisses et maquettes pour faciliter la communication
Du à cette collaboration, les rôles ont tendance à se mélanger.
Il est surtout important que chacun comprenne le langage de l’autre.
Le rôle le plus important pour le designer est d’être l’avocat de l’utilisateur final.

Vision
Pour créer une bonne expérience utilisateur, il faut une compréhension du besoin de l’utilisateur final. Cette vision peut être de haut niveau : les valeurs ou les taches principales.
Si cette vision n’est pas correcte, c’est dangereux pour le projet.
Les participants ont trouvé qu’il était difficile d’établir, d’évaluer et développer la vision de l’expérience utilisateur.
Il s’est révélé intéressant voir nécessaire de faire des « interim sprint zeros » afin de s’assurer que le projet est correct du point de vue de l’utilisateur, qu’il avance dans le bon sens et que la liste de priorité est bonne.
Le risque de perdre la vision de l’expérience utilisateur est un des grands désavantages. L’Agilité se concentre sur les livrables et les participants se retrouvent dépassés par manque de temps et perdent la vision d’ensemble au profit des détails. Le risque est de ne plus avoir un produit consistant.
L’Agilité a l’avantage de faciliter la communication et de protéger la vision.
Sous la pression, le plus dur est d’intégrer la perspective de l’utilisateur en faisant une recherche utilisateur.
Différentes stratégies pour inclure cette perspective:

  • travail en amont
  • externalisation avec un designer extérieur
  • faire une recherche légère : tester puis redesigner (ce qui est ressorti comme le plus intéressant)

Intuitions liées à l’observation.

L’identité.
L’importance de l’état d’esprit de l’équipe et de l’organisation à propos de l’agilité et de l’expérience utilisateur.
Les avantages (être un avocat de l’utilisateur) et défauts (beaucoup de temps pour communiquer et peu pour réaliser le travail) d’être un centre de communication

Vision.
L’importance d’une vision claire et partagée par l’équipe
L’Agilité favorise l’utilisation de bons outils de collaboration (par exemple le tableau de questions).

En conclusion, l’attitude des personnes s’occupant de l’expérience utilisateur envers l’Agilité est très important. La collaboration aide beaucoup. Si l’équipe est trop petite ou mal organisée, la partie orientée expérience utilisateur est la première à être compromise. Pour guider les décisions stratégiques et les activités, la recherche utilisateur doit se faire avant que le développement agile démarre.

Tap is the new screen – Dan Saffer

2 réponses

Résumé de cette video : Tap is the new screen. – Dan Saffer

Les interfaces tactiles et gestuelles envahissent le marché. C’est le début d’une révolution dans le design de l’interaction. La question est donc : comment designer cette nouvelle interaction ?
Cette interaction est basé sur les gestes : tous mouvements physiques qui peuvent être détectés et répondus par un système numérique sans l’aide d’un périphérique d’entrée traditionnel comme la souris ou le stylet.
Deux types d’interaction gestuelle : écran tactile (simple ou multi-touch) ou formes libres dans l’espace (exemple de la Wii mote).
L’ensemble est basé sur des senseurs communs : pression, lumière, proximité, sonore, inclinaison, mouvement, orientation. C’est les senseurs qui définissent les possibilités de l’interaction gestuelle.

Physiologie : contraintes de la main.
Il faut aussi se rappeler qu’un doigt est moins précis qu’un curseur ou que la main peut cacher les informations. Il faut donc éviter de mettre les fonctionnalités ou des informations essentielles en dessous d’un élément de l’interface qui peut être touché.
Sliders dans une interface tactile

Il faut se rappeler la loi de Fitts : plus la distance est petite ou plus la cible est grande, plus la cible (icône) est atteinte rapidement.
Éviter au maximum au utilisateur de couvrir l’écran avec leur main.
Créer des cibles de tailles raisonnable : pas plus petites qu’un cm² (la taille du bout des des doigts).
Deux astuces pour les éléments touchables :

  • Iceberg : l’icône représentant l’élément touchable est en fait plus petite que cet élément.
  • Adaptatif : créer un iceberg en devinant ce que l’utilisateur va utiliser (le clavier de l’Iphone par exemple).

Les éléments qui suivent deviennent difficile à faire voir disparaît avec les interfaces tactiles : curseur (vous savez ou sont vos mains), MouseOver action, double-clic, clic droit.
Annuler une action devient aussi une question complexe.

Comment documenter les gestes ?
Les « maquettes » (wireframes) marchent toujours.
Utilisation d’images-clés voir de storyboards, de « Swim lanes framework » avec le storyboard du scénario en haut et différentes niveaux (techniques, fonctionnels, etc), animations ou encore films.
Swim Lanes Framework

Transformer le geste en code.

  • Variables : Que mesure-t-on ?
  • Données : récupérer les données du senseurs
  • Calculs : déterminer les différences entre les données
  • Structures : Que signifie la somme ?
  • Action : si la structure correspond, faire quelque chose.

Communiquer les interactions gestuelles ?
Trois zones d’engagement de l’utilisateur : attraction > observation > interaction ( en fonction de la distance).
Les utilisateurs peuvent avoir du mal à se lancer sur une interface gestuelle : peur de le casser ou de paraître stupide en public.
Il faut utiliser des affordances naturelles, des illustrations pour attirer les gens.

Comment déterminer les gestes appropriés ?
C’est une équation en trois parties :

  1. les senseurs et entrées disponibles
  2. la tache qui doit être effectuée
  3. la physiologie du corps humain

Il faut garder en mémoire que plus le geste sera compliqué moins il y aura de personnes pouvant le réaliser. Il faut donc que la complexité du geste soit en rapport avec la complexité de la tache à réaliser.

Les meilleurs designs sont ceux qui font correspondre le comportement du système aux gestes que l’humain fait déjà naturellement pour permettre ce comportement.

Jesse James Garrett – Adaptive Path

1 réponse
Résumé de cette présentation : Jesse James Garrett – Adaptive path
L’expérience utilisateur est une condition acquise pour lesquels il n’existe aucun remède. La question de l’expérience des utilisateurs est partout. Cette expérience est subjective, éphémère et immatérielle. De plus ce que veulent les utilisateurs est variable.
Cependant il y a un moyen de mesurer l’intérêt des utilisateurs : c’est son engagement.
Le design de l’expérience est le design de n’importe quoi indépendamment du médium ou du média avec l’expérience utilisateur en résultat explicite et l’engagement de l’utilisateur comme but explicite.
Le design de l’expérience utilisateur est étudié depuis presque 10 ans et le schéma ci dessous en est la représentation classique.
Schéma de l'expérience utilisateur
Le travail autour de l’expérience utilisateur s’organise actuellement autour des quatre facteurs et engagements suivant :
– Perception: l’engagement des sens (vue mais aussi toucher, odorat, gout). Par exemple le directeur de la photographie fait en sorte que chaque image ait une signification complexe.
– Action: l’engagement du corps (exemple de la Wii)
– Cognition: l’engagement de l’esprit
– Émotion: L’engagement du cœur
On peut alors faire le lien entre ces quatre éléments et le schéma du dessus.
Les quatres éléments de l'expérience utilisateur
Comme on voit l’élément qui est souvent oublié est l’émotion !
Il faut aussi prendre en compte deux limitions :
– les contraintes : les gens ont leurs limites.
– le contexte : comment vous vous engagez avec l’expérience ?
Les quatres composants de l'expérience utilisateur
La subjectivité de la conception est l’intersection entre nos capacités, notre contexte et nos contraintes.

La visibilité

1 réponse

Selon le principe de visibilité, les systèmes sont plus utilisables quand ils indiquent clairement leur status, les actions qui peuvent être effectuées et les conséquences de chaque action. Par exemple, une lumière rouge peut indiquer si un dispositif reçoit ou non de l’électricité; des contrôles allumés pourraient indiquer que ceux ci sont disponibles; des retours d’information auditif ou tactile permettraient de reconnaître qu’une action a bien été accomplie. Le principe de visibilité est basé sur le fait que les utilisateurs ont des facilités pour reconnaitre les solutions en les sélectionnant d’un ensemble d’options plutôt que de s’en souvenir.

On peut prendre l’exemple de deux balladeurs CD affichant ou non le titre des chansons.

Quand on en vient au design de systèmes complexes, le principe de visibilité est peut être le plus important et le moins respecté.
L’accident nucléaire de Three Miles Island vient en partie d’un problème de visibilité du design.

Pour incorporer la visibilité dans un système complexe, on doit considérer le nombre de conditions, le nombre d’options par condition et le nombre de résultats – les combinaisons peuvent être écrasantes. Ainsi la plupart des designers essayent de rendre tout visible tout le temps. Cette approche peut sembler souhaitable mais elle rend les informations pertinentes et les contrôles plus difficiles à accéder à cause d’une surcharge d’information.

Une organisation hiérarchique et une prise en compte du contexte sont des bonnes solutions pour gérer la complexité tout en préservant la visibilité. L’organisation hiérarchique met les contrôles et l’information dans des catégories logiques puis les cache dans un contrôle parent comme les menus de logiciel. La prise en compte du contexte révèle ou cache des contrôles ou information en fonction du contexte du système.

Texte traduit provenant de Universal Principles of Design

Le rapport Signal-Bruit

1 réponse

Toute communication implique la création, transmission et réception d’informations. Durant chaque étape de ce processus, la forme de l’information – le signal – est dégradée et des informations non pertinente – du bruit – sont ajoutées. La dégradation réduit la quantité d’information utile en modifiant sa forme. Le bruit réduit la clarté en diluant l’information utile avec de l’information inutile. La clarté de l’information peut être comprise comme le ratio de signal restant par rapport au bruit ajouté. Par exemple, un graphique élément inutile aura un ratio signal-bruit élevé.

Le but du design est donc de maximiser le signal et de diminuer le bruit, produisant ainsi un ratio signal-bruit élevé.

Mauvais rapport signal - bruit

Mauvais rapport signal - bruit

Bon rapport signal - bruit

Bon rapport signal - bruit

Maximiser le signal signifie clairement communiquer de l’information avec une dégradation minimale. La dégradation du signal apparait quand l’information est présentée de façon inefficace : écriture non claire, graphique inapproprié ou des labels et icônes ambigus. La clarté du signal est améliorée à travers une présentation simple et concise. Un design simple nécessite une charge de performance (voir article) minimale, permettant aux gens de se concentrer sur l’information. Par exemple, l’utilisation du mauvais type de graphique pour présenter certains types données peut modifier le sens de l’information. Mettre en avant les aspects clés de l’information peut aussi réduire la dégradation du signal : par exemple mettre en surbrilliance ou la répétition des éléments importants d’un design.

Minimiser le bruit signifie enlever les éléments non nécessaires. Il est important de réaliser que chaque élément non nécessaire (graphiques, textes, lignes, symboles …) détourne l’attention des éléments pertinents. Les éléments nécessaires devrait être eux aussi réduit au strict minimum tout en conservant leur fonction ou leur message pour accentuer leur efficacité. Par exemple, les lignes de séparation des cellules d’une table devraient être amoindries, éclaircies voir supprimées. L’excès crée du bruit.

En conclusion, il faut maximiser le ratio signal-bruit, augmenter le signal en gardant un design simple et sélectionner les stratégies de design avec soin. Il ne faut pas hésiter à utiliser des standards et des règles bien répandus pour créer un effet levier sur les conventions et promouvoir une implémentation cohérente.

Texte traduit provenant de Universal Principles of Design

La proximité

Laisser un commentaire

La proximité est un des nombreux principes Gestalt de perception. Les éléments proches sont considérés comme un seul groupe et étant plus liés entre eux que des éléments éloignés.

Principe Gestalt de proximité

Les groupes résultant de cette proximité réduisent la complexité du design et renforcent les relations entre éléments. Au contraire, un manque de proximité crée la perception de groupes multiples et disparates et renforcent les différences entre éléments. Certaines dispositions proches impliquent des types de relations spécifiques et devraient être prises en considération. Par exemple, des éléments connectés ou se super posant sont communément interprétés comme partageant un ou plusieurs attributs alors que des éléments proches mais non connectés sont considérés comme apparentés mais indépendant.

La proximité est un des moyens le plus puissant pour indiquer la parenté dans le design et surpasse généralement des indices visuels concurrents (ex. la similarité). Il faut donc faire en sorte d’organiser les éléments pour que leur proximité corresponde à leur parenté. Par exemple, il faut favoriser un étiquetage direct sur les graphes plutôt qu’une légende sur les cotés de celui-ci.

Texte traduit provenant de Universal Principles of Design

L’expérience utilisateur de Google Instant

Laisser un commentaire

Pourquoi parler de Google Instant sur un blog sur l’expérience utilisateur ?
Finalement il n’y a pas de boutons partout, pas de superbes feuilles de style, pas d’interaction tactile révolutionnaire.

Et c’est pourtant un vrai travail sur l’expérience utilisateur qui a été fait comme le présente l’article du blog officiel de Google.

La principale question a bien été de trouver le bon design ! Bien sur il a fallu travailler la performance, la rapidité d’affichage et de recherche mais le défi de l’infrastructure est arrivé après avoir déterminé la bonne expérience utilisateur. Déterminer le besoin de l’utilisateur et la meilleur façon d’y répondre passe avant le défi technique.
Pour cela, l’équipe de Google Instant à utiliser les techniques classiques de prototypage et un grand nombre d’essais avec des gens de la communauté, avec les employés de Google et avec un petit pourcentage de utilisateurs de Google. L’ergonomie a été considéré comme abouti quand l’interaction et le changement est devenu presque invisible et naturel.

Autre remarque on voit dans un exemple une recherche sur la loi de Fitts. Simple clin d’œil ? 🙂

Mise à jour : Un contre avis sur la méthodologie de Google. Bien sur on est chez un concurrent (Apple) mais le point de vue est aussi intéressant : la vision du design plus que les chiffres et les tests utilisateurs.