Archives de l’auteur : Yannick Grenzinger

À propos Yannick Grenzinger

Je m'intéresse à l'ergonomie depuis plus de 6 ans. Mon diplôme d'ingénieur obtenu j'ai décidé d'effectué un Master Recherche avec spécialité technologie de l'information. J'ai pu suivre de nombreux cours sur l'ergonomie qui m'ont offert une vision générale ainsi que des méthodologies. J'ai ensuite travaillé sur différents projets ou j'ai eu l'occasion de voir les lacunes de la vision de l'ergonomie. Avec la révolution du Web 2.0, de l'Iphone, l'arrivée massive de la mobilité, de la réalité augmentée et des interfaces tactiles, j'ai pris conscience de l'importance de cette connaissance et j'ai décidé de lancer le site UX-FR.

Le design par comité

“a camel is a horse designed by committee”
D’après Wikipedia, la conception par comité est un terme faisant référence à un style de design où un groupe d’entités ou de personnes se réunissent pour produire quelque chose (souvent la conception de systèmes technologiques ou des normes), en particulier en la présence d’un mauvais leadership. Les caractéristiques déterminantes du «design par comité» sont une complexité inutile, l’incohérence interne, failles logiques, la banalité et l’absence d’une vision unificatrice. Le terme est particulièrement présent dans le jargon technique, et il légitime la nécessité et l’acceptation générale d’un unique architecte des systèmes. Souvent, lorsque le logiciel est conçu par un comité, la motivation initiale, les spécifications et les critères techniques se retrouvent en arrière plan et des mauvais choix peuvent être faits simplement pour apaiser l’ego de plusieurs membres du comité. Ces produits et les normes finissent par faire trop de choses ou avoir des pièces qui s’emboîtent mal (parce que les entités qui ont produites ces pièces n’étaient pas au courant les unes des autres des conditions requises pour un bon ajustement).

En clair, le design par comité n’a pas une bonne réputation. Il est communément qualifié qu’un bon design est le résultat d’un projet mené par un leader autocratique et les mauvais designs sont menés par des groupes démocratiques. Beaucoup pensent qu’un super design nécessite un tyrannique « Steve Jobs » à la tête du succès.

On peut trouver facilement d’autres articles qui confirment que le design par comité est une erreur :
http://www.bingenuity.com/design-by-committee-vs-design-by-dictator
http://www.smashingmagazine.com/2010/06/29/why-design-by-commitee-should-die/
http://www.codinghorror.com/blog/2005/06/the-pontiac-aztek-and-the-perils-of-design-by-committee.html
http://boagworld.com/business-strategy/design-by-committee/

Pourtant, d’après le livre Universal Principle of Design, ce jugement est au mieux une grosse simplification et dans la plupart des cas tout simplement incorrecte.
Le design par dictateur est préférable quand le projet est limité par le temps, les besoins sont relativement simples et directs, les conséquences des erreurs sont tolérables et l’engagement des intervenants n’est pas important. Il devrait être noté qu’à l’exception des inventeurs, des designers célèbres et des start-up virtuellement tous les designs modernes sont des designs par comité. La croyance que les supers designs viennent normalement des dictateurs est plus un mythe qu’une réalité.
Le design par comité est préférable quand le projet est mené par la qualité, que les besoins sont complexes, les conséquences des erreurs sont sérieuses ou l’engagement des intervenants est important. En pratique chaque aspect d’une mission technologique est un produit du design par comité (par exemple une mission de la Nasa).

Le design par comité est optimal quand :

  • Les membres du comité sont divers
  • Le biais et l’influence des membres du comité sont minimisés
  • L’autorité locale de prise de décisions est encouragée à opérer dans un accord sur la cadre global
  • Les entrées et les contributions des membres sont efficacement collectés et partagés
  • Des tailles de groupes idéals sont employés
  • Un modèle simple de gouvernance est adopté pour facilité la prise de décision et assurer que le processus de design ne peut être retardé ou bloqué

Le design par dictateur tend à manquer de la correction d’erreur et des filets de sécurité organisationnels des approches basées sur des comités. L’autocratie est linéaire et rapide mais risquée et sujette à l’erreur. La démocratie est itérative et lente mais prudente et résistante aux erreurs. Chaque modèle à sa raison en fonction des circonstances.

Cet article donne des astuces pour pouvoir sortir une bonne conception dans le cadre d’un design par comité.
« Malgré les nombreuses connotations négatives, quand on l’approche avec les outils appropriés et les bonnes stratégies, les comités de conception peuvent être une expérience satisfaisante pour toutes les personnes impliquées, la production de projets de qualité et des clients heureux. Cependant, la responsabilité est sur vous, le designer, pour créer un environnement qui produit des résultats. »
Il faut pour cela :

  1. Clarifiez les objectifs
  2. Utilisez les bons outils
  3. Défendez avec la raison
  4. Filtrez les retours
  5. Utilisez des tests dans le monde réel

la profondeur de traitement et la mémorisation

Profondeur de traitement et mémorisationRéfléchir profondément sur une information améliore la probabilité que celle-ci sera mémorisée.

Par exemple, considérons deux tâches qui implique d’interagir avec et se rappeler la même information. Dans la première tâche, on demande à un groupe de personnes de localiser des mots clés dans une liste et de les entourer. Dans la seconde tâche, on demande à un autre groupe de personnes de localiser des mots clés dans une liste, de les entourer et de les définir. Les personnes qui ont effectué la seconde tâche se rappellent plus facilement des mots clés parce qu’ils ont du analyser le mot clé à un niveau plus profond.

Ce phénomène de mémoire est le résultat de deux façons par lesquelles l’information est traitée et mémorisée connus comme la répétition de maintenance et la répétition d’élaboration. La répétition de maintenance répète simplement le même type d’analyse qui a déjà été effectuée. C’est la mémorisation qui est faite lorsqu’on répète un numéro de téléphone pour mieux s’en rappeler : aucune analyse additionnelle n’est effectuée. La répétition d’élaboration implique une analyse plus profonde et pleine de sens de l’information. Par exemple, les gens s’engagent dans une répétition d’élaboration quand ils lisent un texte et doivent ensuite répondre à des questions sur la signification du texte. En général, les résultats de ce type de répétition ont des résultats dans les performances de mémorisation 2 à 3 fois meilleurs que celle de la répétition de maintenance.
Elaborative_vs._maintenance_rehearsal

Les facteurs clés qui déterminent à quel profondeur l’information est traitée sont le coté distinctif de l’information, la pertinence de l’information et le degré avec laquelle l’information est élaborée.
L’aspect distinctif fait référence à l’unicité de l’information par rapport à l’information environnante et des expériences précédentes. La pertinence fait référence au degré avec laquelle l’information est perçu comme importante. Le degré d’élaboration fait référence à combien de réflexion est nécessaire pour interpréter et comprendre l’information. En général, un traitement profond de l’information qui implique ces facteurs vont résulter dans le meilleure rappel et rétention de l’information.

Considérer la profondeur de traitement dans le contexte du design quand le rappel et la rétention de l’information est importante. Utiliser une présentation unique et des activités intéressantes pour impliquer les gens pour traiter profondément l’information. Utiliser les études de cas ou encore les exemples pour rendre l’information pertinente pour l’audience. Notons qu’un traitement profond requiert plus de concentration et d’effort qu’une simple exposition et ainsi des périodes fréquentes de repos doivent être incorporer dans la présentation ou dans les tâches.

Pour compléter le sujet des articles en anglais :
Levels-of-processing_effect
Depth Of Processing Model
Learning and memory

This is service design thinking – 3ème partie

Comment fonctionne le design de service ?

Bien que les processus de design soit en réalité non linéaire, il est possible de définir le plan d’une structure. Il est important de comprendre que cette structure est itérative dans son approche. A chaque étape du processus de design d’un service, il peut être utile de revenir en arrière et même de recommencer depuis zéro. Le point majeur est de s’assurer qu’on a appris des erreurs faites dans les itérations précédentes. Comme le processus de design dépend souvent du contexte du service, la première étape peut être justement de désigner le processus.
Les quatre étapes itératives de l’exploration, la création, la réflexion et l’implémentation sont une approche très basique d’un tel processus de design complexe. Dans le cadre de ce processus, il ne faut pas oublier de faire des sauts entre les détails et une vision globale (holistique).De plus comme il n’est pas possible de prendre en compte chaque aspect, il faut faire des choix en fonction du budget, des ressources et de la vision des clients.

1ère étape : l’exploration.
Design exploration
Bien que le design de service souhaite mettre le client au centre du processus, celui-ci commence rarement avec le client. La première tâche est de comprendre la culture et les buts de la société fournissant le service. Il est important de comprendre le point de vue de la société sur le problème. Le but du design de service est même d’articuler le problème organisationnel du point de vue du client. La seconde tâche n’est pas réellement de trouver une solution mais d’identifier le véritable problème. Gagner une compréhension claire de la situation du point de vue du client actuel ou potentiel est crucial pour le succès du design de service. La troisième tâche est de visualiser ces découvertes et autant que possible la structure des services intangibles précédents.

2ème étape : la création
Design creation
La création représente l’étape de génération dans le processus itératif et est fortement liée au processus suivant de réflexion. Ce sont les deux étapes dans lesquelles la majorité des itérations prennent places. Le but est de tester et re-tester les idées et concepts. Une des fonctions majeures du design de service est que cette approche n’est pas là pour éviter les erreurs mais au contraire d’explorer le plus d’erreurs possibles, le plus tôt possible. Il ne faut pas hésiter à abuser des post-its à tout moment qui permettent de garder l’historique de cette approche rapide et fortement itérative. Le but est de générer des solutions pour les problèmes identifiés dans la phase d’exploration. Pour atteindre des solutions durables et holistiques, il est crucial d’inclure toutes les principales parties prenantes et de travailler avec des équipes interdisciplinaires qui incluent des clients, des employés, le management mais aussi des designers ou des ingénieurs. Permettre une co-créativité est une des fonctions clés du design de service.

3ème étape : la réflexion.
palm prototype
Les idées et les concepts bâtis lors de l’étape de création doivent être testés notamment à l’aide de prototypes. Cependant si tester des prototypes de produits physiques est relativement simple, appliquer les techniques de prototypage dans le développement de services nécessites des méthodes distinctes. Les clients ont besoin d’un bon modèle mental du concept du futur service. Il faut prendre en considération l’aspect émotionnel du service. Une simple description ne suffit pas. Fournir une histoire à l’aide de dessins, story-boards ou des séquences photos manquent d’interactions utilisateurs significatives. Ainsi il est important de prototyper les concepts du service en réel ou dans des circonstances proche de la réalité. Le service de design utilise différentes approches de type mise en scène et jeux de rôles.

4ème étape : l’implémentation.
Service Implementation
L’implémentation de nouveaux concepts de service demande par nécessité un processus du changement. Le management du changement est en lui-même un art. Une formulation claire des concepts formulés lors des étapes précédentes est essentielle et nécessite d’inclure l’aspect émotionnel du service. La motivation et l’engagement des employés est primordial pour une implémentation durable du service. Pour cette raison, il est important d’inclure les employés dès le début du processus de design de service. Idéalement, les employés devraient contribuer au prototypage de certains moments du service. Au niveau organisationnel, il est important de garder un aperçu des processus et livrables améliorés. L’implémentation du changement se base aussi sur le fait que le management est convaincu des concepts du service.

Devenir AT-ONE avec les clients.
AT-ONE est une approche présentée dans le livre pour aider les équipes projets durant les premières phases du processus de design de service. Cette approche en une série de workshops qui se concentrent sur chacune des lettres représentant une source potentielle d’innovations. Chaque session de travail a trois phases et est basé sur un processus créatif communément utilisé :
• début : établir une base commune de connaissances pour tous les participants.
• Divergence : exploration et génération d’idées et solutions
• convergence : synthèse, priorisation et prise de décision.

AT-ONE combine les meilleurs pratiques du business, du design et de la recherche dans une approche centrée sur le client.

A pour les acteurs, collaborant dans des réseaux de valeur.
La compréhension de la création de valeur a été un des changements majeurs de ces dix dernières années. La valeur est créée de plus en plus dans des réseaux de collaboration que par des silos d’expertise. Il est donc important de chercher qui a besoin de collaborer avec qui pour créer les expériences irrésistibles qui vont satisfaire les utilisateurs. L’iPod et l’iPhone sont des exemples qui montrent l’importance d’intégrer les acteurs ensembles quand on lance un service comme iTunes (paiement, promotion, contenu, administration). La base de la partie Acteurs est un développement récent dans la sphère des réseaux de valeurs comme une alternative à la chaine de valeurs. Les réseaux de valeurs sont plus répandus dans les services. La clé est de voir le potentiel qui réside dans la reconfiguration des rôles et des relations parmi l’ensemble des acteurs. Le but stratégique sous-jacent est de créer un ajustement en constante amélioration entre les compétences du réseau et ces clients. Un des aspects clés est aussi de mettre le client au centre de ce réseau et de considérer comment un ensemble différent d’acteurs peut donner une valeur cliente améliorée.

T faire travailler les points d’interaction (touchpoints) comme un tout
Pensez aux différentes façons dont vous pouvez accéder à votre solde bancaire par exemple un appelant un conseiller à votre banque, en lisant votre dernier relevé bancaire, en utilisant un service internet voir en envoyant un SMS.
Il y a un énorme potentiel d’innovation en portant une considération soigneuse aux points d’interaction. Cependant, dans la majorité des entreprises, différents départements gèrent différents points d’interaction. Qui énonce le relevé bancaire ? Qui désigne et maintient le système en ligne ? Qui est responsable de bâtiment de la banque et du comportement de ses employés ? Il est très probable que ce soit différentes parties de l’organisation qui utilisent différentes terminologies ou encore différents styles d’interaction.
Le design de service porte sur le choix des points d’interaction les plus pertinents et cherche à designer une expérience utilisateur cohérente à travers ceux-ci. Il cherche les opportunités pour introduire de nouveaux points d’interaction plus efficaces, retirer les fragiles et coordonner l’expérience utilisateur en rapport avec le message de la marque et les besoins des utilisateurs.
Un aspect majeur des innovations des points d’interaction est lié à l’expérience totale que le service offre au client à l’issue de son voyage à travers le service. Comme une chaîne qui va casser au maillon le plus faible, l’expérience utilisateur se dégrade au point d’interaction le plus faible.

O l’offre de service est la marque
Les services de marque sont différents des produits de marque. La plupart des cas il y a peu de différentiation au niveau du service. Le service et la marque sont très étroitement liés. Si on considère une banque, même une avec des services financiers significatifs, celle-ci n’offre qu’une diversification limitée des services du point de vue du client. Ce n’est que récemment que les marques de services ont commencés à se diversifier. Virigin et Tesco sont des bons exemples d’organisations qui offrent un large éventail de services sous une marque unique. Pour ces deux compagnie, il y a une compréhension claire de ce qu’offre la compagnie et cette offre tend à être plus lié à une vision qu’associé à des produits physiques.
Quand la marque et les services sont étroitement liés, l’innovation du service va influencer la marque d’une façon ou d’une autre ainsi que la façon dont les clients vous perçoive. La méthode AT-ONE se concentre sur la compréhension de comment l’offre de service est vécu à un niveau fonctionnel et émotionnel. Un processus est mis en place pour comprendre la marque et lui donner une personnalité. Une fois que cette personnalité est décrite, il devient plus facile de designer les points d’interaction.

N comment connaître ce que l’utilisateur veut, a besoin ou désire
Parler avec les utilisateurs est redevenu populaire. Quelques années avant, les organisations se focalisaient sur l’obtention de données quantitatives (les faits) sur comment leurs clients voyaient leurs services. Ceci donne des informations précieuses, un sentiment de contrôle mais ne répond qu’aux réponses qu’on souhaite. On ne peut connaitre ce que les utilisateurs veulent vous dire. En termes d’innovation, les études quantitatives ne donnent pas les réponses dont l’équipe aurait besoin. Parler au client, l’observer et l’écouter peut faire apparaître différents ensembles de besoins, profonds ou cachés.
La partie besoin de l’approche se base sur une perspective centrée sur l’utilisateur qui permet d’explorer les besoins des clients. Elle utilise les personas comme un moyen d’introduire la perspective du client et y ajoute les contributions d’une large sélection de méthodes centrées sur l’utilisateur comme les interviews, les sessions de design collaboratives, l’observation, etc. Comprendre et impliquer les clients ainsi que s’assurer que celui-ci a besoin et désire votre service est probablement une des meilleurs façons d’assurer le succès de votre service en aval.

E Des expériences qui surprennent et charment.
Les expériences définissent ce que les clients ont lorsqu’ils utilisent un service et quand ils y reviennent. La phase d’expérience de l’approche AT-ONE se construit à partir des récents développements dans notre compréhension de la façon dont les gens ressentent le service. Les clients actuels ne sont pas seulement à la recherche de solutions fonctionnelles à leurs problèmes mais désirent aussi des solutions plaisantes pour leurs problèmes de tous les jours. Apple est devenue plus désirable que Microsoft, Nokia plus qu’Ericsson ou encore Starbucks est devenu l’endroit où prendre un café. Pourquoi ? Pas à cause de leur réponse fonctionnelle mais parce qu’ils ont su capter notre plaisir. (Voir the Experience Economy de Pine & Gilmore). Les fonctionnalités et l’utilisabilité ne sont pas assez dans nos vies. Elles en sont maintenant la base. Les clients cherchent maintenant des liens émotionnels et des expériences. Les expériences sont maintenant un différenciateur précieux et offrent non seulement un service très agréable mais permet de créer et exprimer une identité, une marque.
Plusieurs outils ont été développés pour aider à utiliser les expériences comme point de départ du design. Idéalement l’objectif est de désigner l’expérience de service au début puis analyser et repenser l’offre, les points d’interaction, le service et même l’organisation pour être capable de produire l’expérience désirée.

This is service design thinking – 2ème partie

Le but du design de service est de mettre en relation les gens et ainsi créer de la valeur. Pour cela, le design de service fait le choix de se concentrer sur l’humain et non l’organisation ainsi que trouver des moyens pour aider les organisations et les parties prenantes pour créer ensemble de la valeur.
De toutes les disciplines qui ont contribué au design de services, le marketing est surement celle qui en est le plus proche. Le but du marketing moderne est de trouver ce que les clients veulent ou ont besoin. Les organisations essayent de différentier leurs produits et services afin d’attirer différents segments du marché. Pour développer des stratégies, le marketing utilise des méthodes quantitatives telles que les sondages et qualitatives telles que l’ethnographie. Le marketing a fait progresser sa vision traditionnelle (produit, prix, promotion, placement) en y ajoutant le facteur humain, les processus et l’évidence physique ou la qualité du service du point de vue du client.
Tout cela a influencé le design notamment le design de services. Le marketing concerne les organisations créant et construisant une relation avec des clients pour co-créer de la valeur. De son côté, le design a pour but de mettre les intervenants au centre du design de service.
Les personnes du marketing définissent qui sont (ou pourraient) être les clients et, dans les grandes lignes, les relations qu’une organisation peut avoir avec eux. Les designers donnent formes et sens à ces idées et peuvent enrichir et challenger les hypothèses en réalisant des visualisations.
Le marketing étudie les clients pour développer la connaissance de leurs pratiques et valeurs. Les designers utilisent ces connaissances comme point de départ et peuvent se concentrer sur l’esthétisme. Le marketing a la vision d’un nouveau service qui est façonné par la résolution de problèmes. Les professionnels du design ont une compréhension d’un processus itératif qui implique d’explorer différentes possibilités et d’être ouvert au hasard et la surprise.
Plutôt que de trouver si le design de service fait partie du marketing ou l’inverse, il est important de comprendre la valeur et la nature des relations entre chaque personnes, entre les personnes et les objets physiques, entre les personnes et les organisations et entre les organisations elle-même dans le cadre du design d’un service.

Qui sont les designers de services ?
Le service design est une approche multidisciplinaire qui inclue et connecte différents champs d’activités et d’études. Le livre présente ainsi un ensemble de disciplines de design et de management et comment celles-ci facilitent le design de service.

Le design de produit : développer des produits ainsi que les services les accompagnants.
Le rôle des designers industriels a changé et c’est diversifié. Ceux-ci doivent maintenant gérer les processus de design, travailler comme chercheurs ainsi que contribuer aux études sur le client. Le but est de trouver les problèmes et les besoins latents dans divers aspects de la vie des gens, de répondre à l’émergence de nouveaux environnements et aux besoins des utilisateurs. Le design de produits se concentre sur l’assemblage de plusieurs perspectives : une approche centrée sur l’utilisateur, différentes méthodes de recherches et de récupérations de données aussi bien quantitatives que qualitatives et un ensemble de techniques de visualisations telles que l’esquisse et le prototypage. Un projet de design de service réussi nécessite d’intégrer les parties prenantes aussi tôt que possible dans le processus de développement.

Le design graphique : fournir des explications visuelles claires.
C’est la tâche du designer graphique que d’enclencher les modèles mentaux de chaque individu ou au moins d’influencer positivement la mise en place de représentations cognitives. Les deux tâches principales sont l’information et le branding. Le branding est là pour aider à établir une identité visuelle et une certaine familiarité aux yeux des clients. L’information de son côté a pour but de rendre les contenus abstraits et complexes accessible de façon plus simple. Le branding soutient le client afin qu’il se rapproche émotionnellement du thème ou du contexte émotionnel de l’expérience. A l’intérieur de ce contexte, le design d’information a pour but d’y associer une expérience utilisateur positive et satisfaisante.

Le design d’interaction : les services comme une série d’interaction.
Le self-service, la co-production et les réseaux sociaux sont différents aspects qui ont récemment placé le centre de l’attention sur les interactions et leur design. Une bonne interface se base sur le fait que celle-ci soit désirable, plaisante, utile et utilisable. L’utilité définit les fonctions qui vont être utilisables et utilisable représente comment les utilisateurs vont pouvoir les utiliser. Un haut niveau de désirabilité requiert un alignement interne fort, une marque forte et une bonne connaissance du management du design. Cependant, c’est un très fort différenciateur et donne une pensée commune entre les clients.

Le design social : livrer un impact social positif.
Le design de service joue un rôle important en changeant les façons de voir, en mettant à bas les notions de créativité préconçues, en illustrant activement une large et significative application du design et en impliquant plus de personne dans le processus de design.
Le design social existe comme une façon de penser à propos de quoi, pourquoi et comment le design (produit et/ou processus) peut ou doit adresser les besoins en constante évolution de la société.

Le management stratégique : pourquoi les corporations font ce qu’elles font.
Les corporations et leurs employés ont leurs propres raisons de faire ce qu’elles font même si cela peut donner un mauvais service. Il faut comprendre les modèles mentaux qui encadrent les décisions faites par les managers à trois niveaux stratégiques : corporate, business et opérationnel. Cependant chacun des modèles de management à chaque niveau ne fournit pas assez d’informations pour une culture du design de service raisonnable. Penser en termes de design permet de mettre en place de nouveaux designs et processus d’organisation qui vont plus loin que les procédures de management traditionnelles.

Le management opérationnel : la quête obstinée pour l’efficacité.
Le management opérationnel est concerné par le design, le management et l’amélioration des processus aux travers desquels les produits et services d’une organisation sont livrés. L’approche considérée comme idéal est celle de la « ligne de production » : l’idée est d’appliquer les principes de la manufacture au service et même au client comme l’a fait McDonalds. Cependant un contact plus important et plus personnalisé remet le client au centre du design de service.

Design ethnographique : prendre inspiration dans la vie de tous les jours.
Le design ethnographique permet à l’équipe de travailler par la perspective de ces utilisateurs sur des nouveaux designs pour les parties pertinentes de leur vie journalière. Cette large compréhension permet de travailler sur la génération d’idée, le développement de concept et l’implémentation. Le design de service est multidisciplinaire où des personnes avec une large compréhension dans différentes disciplines et une connaissance importante dans un domaine précis.

Refonte de l’expérience utilisateur pour Windows 8

Menu de démarrage Windows 8

Menu de démarrage Windows 8

En ce début de semaine Microsoft présentait un peu plus de son prochain système d’exploitation : Windows 8.
Comme Apple et son Mac OS X Lion, Microsoft semble vouloir unifier le monde du mobile et du tactile et le monde du PC de bureau. Windows 8 introduit ainsi le nouveau système Metro (prenant la place d’Aero sous Windows 7) et s’inspirant de l’interface graphique de Windows Phone 7.

Vidéo de présentation de Windows 8

Il y a les nombreuses innovations liées aux modes connectés comme l’utilisation du « Cloud » pour unifier les données entre différents ordinateurs et faciliter la mobilité des utilités ou encore l’ensemble des services Lives.

Il y a la façon de créer des applications avec la possibilité de créer des applications directement en HTML 5, CSS et Javascript même si créer des applications de façon plus classique en C/C++ reste d’actualité. On voit l’apparition du maintenant obligatoire « market ». Quelque chose de plus intéressant du point de vue de l’écosystème d’applications que vous avez installés, celles-ci pourront communiquer entre elles. Si l’application est développé spécifiquement pour Windows 8 et son nouveau système Metro, elle ne se contente pas d’offrir une nouvelle application à l’utilisateur mais aussi un ensemble de services au système ainsi qu’autres applications installées. On y retrouve ici beaucoup de la logique d’Android (voir article présentant Android) avec son écosystème d’applications pouvant être inter-reliées si celle-ci sont conçus pour.

Il y a bien sur l’expérience utilisateur et le design de l’interface utilisateur qui subit de gros changement. On voit que le design a été pensé pour prendre en compte le tactile et les tablettes (ou la révolution du monde post-PC comme certains évènements semblent l’annoncer). Même si l’interface du nouveau système Metro peut être basculé sur la vue classique de Windows (ou plutot celle de windows 7 c’est à dire Aero). L’idée est bien de fusionner les deux mondes et d’intégrer les concepts d’expérience utilisateur propres aux tactiles vers les PCs standard.

D’abord il y a un nouvel écran de login plus fourni qui offre la possibilité de mettre en place un Picture Login : on définit une gestuelle composée de points, lignes et cercles pour s’identifier. On arrive ensuite à l’écran principal qui remplace le menu « Démarer » sous forme d’une mosaïque inspirée de Windows phone 7. Les vignettes remplacent les icônes et représentent les applications avec en plus des informations d’états de l’application (par exemple la musique en cours de lecture, les derniers tweets ..). La logique des widgets est reprise et étendue. On peut facilement naviguer à l’écran soit par les touches du clavier, soit par un geste tactile. On peut mettre sur un même écran plusieurs applications. Si on est dans un champs de saisie, un clavier tactile apparaît pour saisir les données. La question est alors : sera-t-il possible de le cacher dans le cadre d’une utilisation avec un clavier pour garder l’esthétisme ? Il sera possible de faire des recherches rapidement parmi les applications.

Je pourrais aller plus loin dans la liste des innovations et leur description mais vous trouverez toutes ces informations sur des sites comme pcinpact.com ou arstechnica.com.

La question qui m’intéresse est plus de savoir si l’idée de faire un système pour les contrôler tous (mobile, tablettes et pcs) est viable ou un mauvais choix de design comme le laisse entendre cette article : http://www.usabilitypost.com/2011/09/14/aero-vs-metro/. Est-ce possible de mélanger l’interface typique d’un pc avec un clavier et une souris et celle de nos nouveaux périphériques tactiles ?
Mon intuition personnelle est que c’est une bonne idée. Si je me fis à mon utilisation de mon PC de bureau et surtout de ce que j’aimerais y voir, cela semble me convenir car j’utilise finalement peu d’applications différentes et qu’une vue holistique d’un ensemble de widgets sociaux est quelque chose qui ne me déplairait pas. Au pire, comme à son habitude, Microsoft permet de revenir sur l’interface classique et ainsi permettre une transition en douceur.

Qu’en pensez vous ?

Edit : Cet éditorial permet de continuer la réflexion.

This is Service Design Thinking – 1ère partie

Penser le design de service.

Le livre “This is Service Design Thinking” introduit une approche interdisciplinaire à la conception de service. Les frontières entre les produits et les services sont en train de se brouiller et il est temps d’utiliser une nouvelle façon de penser : celle du design de service. Le livre en lui-même a été conçu par les mêmes approches co-créatives (23 auteurs internationaux et encore plus de contributeurs en ligne) et centrées sur l’utilisateur qui y sont présentées.
Le livre présente ce qu’est le design de service, qui sont les designers de service, comment cela fonctionne, quels sont les outils, un ensemble de cas pratiques et enfin approfondi quelques points comme le service design et la psychologie motivationnelle ou encore la biophile.

Vous trouverez plus d’informations sur le livre sur le site officiel : http://thisisservicedesignthinking.com/

Ce résumé ne reprend pas tout le livre mais s’applique à reprendre les principales idées présentant le service de design.

Les 5 principes permettant de penser le design de service

1 Centré sur l’utilisateur

Il est nécessaire de se mettre d’accord sur un langage commun et avoir un certain degré de participation du client. Les services sont le fruit d’une interaction entre le fournisseur de service et le client. Même si les descriptions statistiques des utilisateurs sont utiles, une véritable compréhension des habitudes, de la culture, du contexte social et de la motivation des utilisateurs est cruciale. La compréhension et la divulgation de ces différentes mentalités correspond au début de la conception de service. Une approche centrée sur l’utilisateur offre un langage commun : celui de l’utilisateur du service.

2 Co-créatif
Design collaboration
Tout le monde peut être créatif. Il n’y pas qu’un seul groupe type de clients et chaque groupe a des besoins et des attentes différents. Fournir des services demande aussi de prendre en considération les différents intervenants de l’entreprise. Ainsi une seule proposition de service peut impliquer de nombreux acteurs, de nombreux groupes de clients ainsi que différents employés et interfaces. Après s’être mis d’accord sur un langage commun, il est possible d’apporter des idées pour concevoir un nouveau service ou améliorer l’existant. Ces différentes personnes doivent s’impliquer dans le processus et être créatives. Être créatif n’est pas un don mais plutôt le fait d’écouter les idées s’écouler à travers l’esprit et être préparé à les mettre en forme. Être créatif, c’est être prêt à recevoir et mettre en forme beaucoup d’idées. L’avantage est que plus un client ou un intervenant est impliqué dans la proposition de service, plus sa loyauté et son engagement à long terme sont augmentés.

3 Une séquence
Design storyboard
Les services sont des processus dynamiques qui ont lieu au cours d’une certaine période de temps. La chronologie d’un service est donc cruciale quand on conçoit un service car le rythme influence l’humeur de l’utilisateur. Par exemple il va s’ennuyer en attendant l’enregistrement à l’aéroport ou contraire être stressé en se précipitant à travers les contrôles de sécurité de celui-ci.
Les processus d’un service peuvent être vus comme les séquences d’un film. Le design de service utilise cette analogie pour déconstruire les processus d’un service dans des points d’interaction (« touchpoint ») et des interactions uniques. Les points d’interaction peuvent être des interactions entre humain/humain, humain/machine et même machine/machine. Chaque processus de service suit une transition en trois étapes : avant le moment du service (entrer en contact avec le service), le moment du service (quand le client fait l’expérience du service) et après le moment du service. Comme tout bon film ou pièce de théâtre, un service de qualité doit maintenir l’intérêt et une bonne narration. Comme toute pièce de théâtre, le service ne correspond pas uniquement à ce qui se passe sur le devant de la scène mais inclus aussi différents processus en coulisse. Pour atteindre une excellente performance en théâtre, les acteurs doivent répéter de nombreuses fois. C’est de même pour les services. On doit les prototyper et les tester itérativement sur les clients.

4 Révèle l’évidence
Backstage service
Il faut rendre l’intangible tangible. Les services passent souvent inaperçu en fond de tâche. Comment rendre conscient les clients de ces services intangibles ? Rendre un service évident permet de prolonger l’expérience du service loin après le moment qui suit les services. Utiliser efficacement cette méthode a la force d’augmenter la loyauté du client et les clients vont recommander ce service aux autres. Le but est donc d’obtenir une meilleure appréciation du client. En plus, l’évidence peut expliquer certains aspects d’un processus ou d’un point d’interaction. Par exemple, les serviettes pliées représentent le ménage effectué dans une chambre d’hotel. Si le processus d’un service est comme un film, une meilleure compréhension du travail en coulisse peut engendrer une meilleure appréciation du client.

5 Holistique.
Travailler ensemble
Il faut prendre en compte l’ensemble du contexte. Même si les services sont intangibles, ils peuvent prendre place dans un environnement physique en utilisant des objets physiques et génèrent même dans la plupart des cas des résultats physiques. De façon subconsciente, les clients perçoivent cet environnement avec tous leurs sens.
Quels aspects doivent être considérés quand on désigne un service ? Il est impossible de travailler de façon totalement holistique et de considérer chaque aspect unique d’un service. Au niveau d’un point d’interaction individuel ou du moment d’un service, il faut prendre en compte l’environnement qui un impact profond sur la perception du service par le client.
Au niveau de la séquence du service, il faut prendre en compte les parcours alternatifs du client. Il y a de nombreux points d’interaction ou approches possibles.
Le fournisseur du service doit prendre en compte son organisation mais aussi sa culture interne, ses valeurs ou encore ses normes. Il faut promouvoir une pensée du service et l’importance de la motivation des employés.
Penser la conception d’un service met en avant la co-opération de différentes disciplines afin d’assurer le succès de l’entreprise à travers une expérience du client améliorée, la satisfaction de l’employé et l’intégration de processus technologique sophistiqués dans le but d’atteindre les objectifs de l’entreprise.

Utiliser le Design Thinking pour arreter de construire des logiciels sans valeur

C’est le titre de la conférence donnée par Jeff Patton au QCon London 2011 !

Jeff Patton commence par exposer les faits.

  • Typiquement de 50% à 80% des logiciels que nous livrons échouent à atteindre leur objectif.
  • Pour quatre projets qui entrent en développement, seulement un arrive sur le marché.
  • Au lancement, au moins un produit sur trois échoue malgré l’étude et la planification.
  • Selon le Standish Group, 64% des fonctionnalités sont rarement ou jamais utilisées.
  • Ce n’est seulement qu’après la livraison que la valeur d’un produit apparait. Par exemple il compare la différence de valeur entre les backlogs (Ensemble des fonctionnalités d’un produit selon la méthodologie Agile Scrum) de l’iPod et du Zune (un des gros échecs de Microsoft).
  • Délivrer des logiciels stupides rapidement ne fait que donner plus de logiciels stupides. Il faut donner du sens à ce que nous développons.

Ayant connu de nombreux projets, je ne peux qu’approuver ce constat qui est à la fois un problème pour l’entreprise mais aussi pour la motivation du développeur. C’est pour ça que j’ai très vite compris l’intérêt des visions de l’expérience utilisateur et du design thinking.

Pour Jeff Patton, il faut se concentrer sur les fonctionnalités qui ont du sens voire qui vont changer dans le monde quand le logiciel sera livré. Le but est de minimiser la sortie en maximisant les résultats.

Maxmiser les résultats

La recherche et l’analyse donne le sens de l’état actuel des choses. Le design imagine le monde différemment de ce qu’il est actuellement.

Il présente ensuite sa façon d’améliorer ce constat selon une méthode itérative qui se base sur quatre étapes :

  • comprendre le problème
  • identifier des solutions (générer un maximum d’idées !)
  • affiner et valider (itérer !)
  • créer un plan
Etapes de Design Thinking

Etapes de Design Thinking

Comprendre le problème

C’est apprendre et non seulement recueillir des besoins. Il faut demander aux utilisateurs de raconter des histoires, laisser l’utilisateur vous apprendre leur métier et ensuite donner du sens à ce que l’équipe a apprise.

Représenter les idées permet d’être sûr qu’on s’est bien compris. A travers une discussion et la construction itérative de modèles, on arrive à une compréhension forte et commune. L’idée est donc de résoudre le problème ensemble (comme les pratiques Agiles essayent de mettre en avant).

Il faut aussi régler le problème dans son contexte.

Générer un maximum d’idées pour identifier des solutions

Il faut générer un maximum d’idées, les combiner, etc. Utiliser un tableau pour y dessiner des esquisses est une façon collaborative de générer des idées d’interfaces utilisateurs.

On peut aussi travailler des esquisses individuellement puis ensuite partager ces idées.

Partager les idées générer par le Design Thinking

Partager les idées générer par le Design Thinking

Itérer pour affiner et valider les solutions

L’itération pour un Agiliste c’est incrémenter ou construire petit à petit. Pour un designer, cela correspond plus à construire une version simple, la valider puis améliorer lentement la qualité et les fonctionnalités.

Il est utile de valider les concepts avec des prototypes (du papiers, des crayons et des ciseaux suffissent), les tester si possible avec de réels utilisateurs en simulant leurs utilisations.

Prototypage dans le cadre du Design Thinking

Prototypage dans le cadre du Design Thinking

Planifier pour continuer à apprendre pendant que vous livrez.

Votre plan nécessite des livraisons publiques et privées. Chaque livraison est une opportunité d’apprendre et d’identifier la valeur. Utiliser un développement itératif et incrémental permet de réduire le risque.

Planification liée au Design Thinking

Planification liée au Design Thinking

Il fait au passage référence au challenge des marshmallows de TED pour prouver ce concept.

L’outil appellé Story Map raconte l’histoire de votre produit ainsi que son planning de sortie incrémental. Cette Story Map permet d’associer les sorties (la productivité) avec les résultats (la rentabilité).

 

Ma conclusion est que le Design Thinking associe Expérience utilisateur et Agilité. Il va plus loin que l’agilité car il y associe les principes d’expérience utilisateur pour définir les besoins réels : ceux qui vont assurer le succès d’un logiciel.

Mais la question est-ce que le Design Thinking est envisageable dans le contexte d’une grande partie des entreprises ?

 

 

 

 

 

 

 

 

 

L’expérience utilisateur définit le produit – Peter Merholz

Peter Merholz d’Adaptive Path commence sa présentation en prenant l’exemple de la photographie et de la simplification de l’appareil photo. Il s’attache notamment sur le premier appareil photo de chez Kodac qui a grandement simplifié la prise de vue.

Il pose ensuite la question quel est le plus grand compliment qu’on puisse évoquer à propos d’une interface utilisateur ?
Ce n’est pas le fait qu’elle soit hautement profitable ou quelle ne plante jamais mais qu’elle soit cool, fun, qu’elle suscite l’engouement qu’on en parle à ses amis (par exemple l’iphone).

L’évolution d’un produit est représenté par cette pyramide :

On commence par la technologie et justement l’erreur est de se concentrer sur la technologie
La technologie évolue et ne reste pas un avantage sur la compétition. Il faut en faire plus.
Il prend l’exemple de Vi par rapport à la machine à écrire et les premiers magnétoscopes.

On se concentre ensuite sur les fonctions. On en ajoute de plus de plus pour garder l’avantage par rapport à la concurrence. Cela marche pendant un certain temps, les clients achètent en fonction du nombre de fonctions. Le produit devient tellement compliqué que l’utilisateur ne sait plus quels sont les possibilités.
On obtient alors ca :

Enfin on vient à l’expérience utilisateur car la technologie et les fonctions ne sont plus compétitives. Cela permet de se distinguer de la concurrence. Même Microsoft l’a compris.

Il faut savoir jeter des fonctions et réfléchir continuellement au produit pour trouver la solution belle et élégante qui marche (il cite alors un livre de Steve Jobs écrit en 1984).
C’est un état d’esprit. Tout dépend de la façon dont approche les problèmes qu’on essaye de résoudre ou la façon dont on compte vendre notre produit.
Il prend bien sur l’exemple de la Wii.
Donner une personnalité à son produit pour le rendre plus attractif.

Lors du développement d’un produit, l’erreur la plus classique est de construire le produit et l’expérience utilisateur à partir des données : quels données avons nous ? comment interpréter ces données ? C’est la vision de l’ingénieur.

Il faudrait faire l’inverse concevoir de l’extérieur (utilisateur) vers l’intérieur (données).
On a besoin d’une vision de l’expérience, une liste d’objectifs qui répondent à un besoin de l’utilisateur.
Il prend l’exemple de Google Calendar et de son succès. L’équipe de Google a interviewé plus de 800 personnes pour savoir ce qu’elle voulaient et construire une vision.

Il rajoute l’exemple du Palm Pilot.

Il faut aussi valoriser le système : Déplacer la difficulté pour permettre de simplifier l’expérience de l’utilisateur.
Exemple de l’Ipod : toute la complexité a été déplacée dans Itunes et le store.

Il prend aussi un très bon exemple sur les produits pharmaceutiques (aller aux slides à 37:27) ou encore Flickr.

En conclusion : l’experience utilisateur définit le produit que l’on veut créer.

Design d’un formulaire web – Luke Wroblewski

Résumé de la vidéo Web form design par Luke Wroblewski

Cette présentation est passionnante, bien riche et remplie d’exemples concrets. Je conseille fortement de la voir pour tout ceux qui veulent améliorer l’expérience utilisateur et l’ergonomie de leur formulaire web (et clairement je pense que je vais essayer d’acheter le livre
Première constatation : les formulaires sont souvent mal faits.
Pourtant ils sont une part très importante du net aussi bien pour le client que l’entreprise. Énormément d’actions passent par un formulaire. Ils représentent même le dialogue du client avec l’entreprise.

Ils ont leur role dans :

  • le commerce car ils permettent à l’utilisateur d’acheter en ligne et à l’entreprise de maximiser ces ventes
  • l’engagement car ils permettent à l’utilisateur d’entrer et de manipuler des informations et à l’entreprise d’accumuler des données et du contenu
  • l’adhésion car ils permettent la participation de l’utilisateur et pour l’entreprise d’augmenter le nombre de client et de faire grandir des communautés

Par exemple, le formulaire d’upload des videos de Youtube a été redessiné de nombreuses fois vu sa fonction centrale.

Comment faire de meilleurs formulaires web ? Les dix meilleures pratiques

1 – chemin vers la complétion
Le but premier d’un formulaire est sa complétion en offrant une ligne de visualisation claire.

Ligne de visualisation non claire du formulaire

Ligne de visualisation non claire du formulaire

Ligne de visualisation claire du formulaire

Ligne de visualisation claire du formulaire

L’exemple ci dessus montre clairement l’importance de l’alignement et de la cohérence pour que l’utilisateur ne se « perdent » pas.
Il faut créer un flux visuel clair.

Il faut montrer à l’utilisateur son avancement par la portée, le progrès ou le statut.

Indicateur de progression pour l'utilisateur

Indicateur de progression pour l'utilisateur

En conclusion, il faut :

  • mettre en avant un chemin clair vers la complétion du formulaire
  • utiliser des barres de progression pour communiquer la portée, l’état et la position dans le formulaire
  • Si besoin de plus de temps ou d’une recherche d’information, fournir une page de départ
  • utiliser des indicateurs de progression plus généraux pour les formulaires avec des séquences variables suivant les besoins

2 – l’alignement
Il explique l’alignement des labels : au-dessus, a droite ou encore a gauche.
Le titre au-dessus se révèle le plus rapide pour les données familières mais demande plus d’espace vertical. Il permet aussi plus de flexibilité pour la localisation et les entrées complexes.
L’alignement à droite permet une bonne association entre le label et la zone de saisie, requiert moins d’espace vertical et a une complétion rapide mais il se révèle plus difficile à lire.
L’alignement a gauche est plus pratique pour les données non familières et permet de parcourir rapidement les labels par contre changer la longueur des labels peut invalider l’alignement du formulaire et la complétion est plus lente.
Mixer plusieurs alignement n’est pas bon.

Les labels dans la zone de saisie sont pratiques mais il faut être sur que l’utilisateur se rappellera de la question.
Il faut aussi les utiliser avec modération (formulaire avec uniquement des réponses mais pas de questions ?)

En conclusion, il faut :

  • utiliser l’alignement au dessus pour réduire les temps de complétion d’un formulaire avec des données familières
  • utiliser l’alignement à droite quand l’espace vertical est limité
  • utiliser l’alignement à gauche quand les données ne sont pas familières ou complexes

3 – Les aides et astuces
Elles sont utiles quand :

  • le formulaire demandent des données non familière
  • l’utilisateur peut se demander pour quel raison cette donnée est demandée
  • une manière recommandée de fournir la donnée
  • certaines données sont optionnelles

Cependant, les aides et astuces ne doivent pas envahir le formulaire.
Si c’est obligatoire, il faut peut être passer à une solution dynamique.
Par exemple quand l’utilisateur arrive dans le champs, une aide apparait. On peut aussi utiliser un bouton d’aide ou encore faire apparaitre une section d’aide.

Section d'aide à droite dans un formulaire

Section d'aide à droite dans un formulaire

En conclusion, il faut :

  • minimiser le besoin d’aide et astuces pour remplir un formulaire
  • favoriser une aide visible et proche qui est plus utile
  • utiliser un système activé par l’utilisateur pour formulaire complexe et souvent réutilisé
  • utiliser une aide directement inclue dans le champs de saisie à moins que vous ayez beaucoup de contenu (texte, graphique, tableau)
  • utiliser un système cohérente si vous avez beaucoup d’aide

4 – validation en ligne
Il faut fournir une validation directement à l’insertion des données, suggérer des données valides ou encore aider l’utilisateur à rester dans les limites.
Il faut aussi bien faire en sorte que les validations soient cohérentes (exemple du « confirm » qui vérifie juste l’égalité des deux champs ou encore ne refait pas la vérification quand la valeur initiale change).
Il compare énormément la qualité d’enregistrement entre Yahoo et Twitter.

Validation du formulaire sur Twitter

Validation du formulaire sur Twitter

Validation du formulaire sur Yahoo

Validation du formulaire sur Yahoo

En conclusion, il faut :

  • utiliser une validation directement dans le champs de saisie pour les champs de saisie où il y a potentiellement beaucoup d’erreurs
  • utiliser des suggestions d’entrées pour lever des ambiguïtés
  • communiquer les limites

5 – Actions
Toutes les actions sur un formulaire (bouton) ne sont pas équivalentes.
Par exemple « Effacer tout », « Annuler » et « Retour en arrière » sont des actions secondaires rarement utilisées. « Sauver », « Continuer » et « Soumettre » sont des actions primaires directement responsables de la complétion du formulaire.

Différentier les actions primaires et secondaires dans un formulaire

Différentier les actions primaires et secondaires dans un formulaire

Il faut les différentier (Gras, taille, couleur, etc..).

En conclusion, il faut :

  • éviter les actions secondaires si possible
  • faire une distinction visuelle claire entre les actions primaires et secondaires
  • aligner les actions primaires avec les champs de saisie pour un chemin de complétion clair

6 – Actions en attente
Certaines actions nécessitent du temps de traitement (soumission de formulaires, calculs, uploads).
Il faut fournir un retour d’informations par exemple désactiver le bouton de soumission le temps du traitement.
On peut profiter du temps d’attente pour afficher des informations.

7 – Erreurs
Quand une erreur se produit, c’est l’information la plus importante du formulaire car elle vous empêche d’aller plus loin.

Indiquer clairement les erreurs et les associer avec le champs responsable.

Indiquer clairement les erreurs et les associer avec le champs responsable.

En conclusion, il faut :

  • indiquer clairement qu’une erreur à eu lieu : placement au dessus et contraste visuel
  • fournir des actions de correction
  • associer le champ erroné avec le message d’erreur
  • ne pas hésiter à « doubler » les informations où l’erreur a eu lieue

8 – Les entrées non nécessaires
Chaque question demande aux utilisateurs de la comprendre, de formuler une réponse et d’entrer cette réponse.
Soyez vigilant sur chaque question en se posant ces trois questions :

  • Peut elle être enlevée ?
  • Peut elle être remise à plus tard ?
  • Peut elle être devinée ?

Enlever des informations peut avoir un grand impact sur la complétion d’un formulaire par exemple le type de carte de paiement n’est pas nécessaire.
Utiliser le code postal pour renseigner directement la ville et l’état.
Il ne faut pas non plus compliquer le traitement dans le seul but d’enlever question.

9 – l’organisation du formulaire
Cela dépend. Il faut essayer d’avoir une conversation, de parler d’une seul voix ou encore d’utiliser les coupures naturelles.
Luke montre un superbe exemple d’un « simple » formulaire de contact qui au fil des besoins (ingénieurs, marketing, légal…) devient très complexe et inutilisable.

Exemple d'un formulaire sous forme d'une conversation.

Exemple d'un formulaire sous forme d'une conversation.

En conclusion, il faut :

  • prendre le temps d’évaluer chaque question que l’on pose
  • assurer la cohérence
  • se forcer à être succinct
  • utiliser une seule page web si le formulaire peut se diviser en plusieurs sujets courts
  • utiliser une seule longue page quand il y a de nombreuses questions mais sur un seul sujet
  • au contraire utiliser plusieurs pages quand un formulaire contient de nombreuses questions avec peu de sujets

10 – L’engagement graduel
Un bouton de soumission avec un label en rapport avec le titre de la page.
D’après Luke, les formulaires d’inscription doivent disparaître.
Les services web devraient provoquer l’engagement :

  • expliquer ce que fait le service
  • permettre aux personnes de l’utiliser
  • avoir l’inscription comme résultat

En conclusion, il faut :

  • essayer d’éviter les formulaires
  • mettre en avant le cœur de votre service avec le moins d’interaction possible
  • faire en sorte que l’utilisateur réussisse du premier coups
  • , si vous générer des comptes automatiquement, faire en sorte que l’utilisateur puisse y accéder des façon claire
  • utiliser une seule longue page quand il y a de nombreuses questions mais sur un seul sujet
  • ne pas distribuer divers champs de saisie dans des formulaires sans prendre en compte l’engagement

Principes de design d’une interface graphique

Enfin ! Cette article aura eu du mal à sortir du mode brouillon et d’ailleurs certaines parties sont encore à retravailler (n’hésitez pas à laisser des commentaires).

L’année dernière, alors que je demandais des conseils de lecture à un ami Ergonome, celui-ci me conseille fortement GUI Bloppers. Je me le commande et je reçois un livre très sommaire dans sa mise en page et pas très sexy.

La grande majorité du livre concerne des « meilleurs pratiques » très précises pour la réalisation d’une interface graphique (jusqu’au nom de la barre de titre des fenêtres !). Si l’ensemble regorge de détails pratiques très intéressants, c’est surtout l’introduction qui m’attire le plus et que j’ai décidé de résumer ici !

Jeff Johnson y présente 9 principes de design d’une interface graphique. Travaillant actuellement sur l’expérience utilisateur d’un des plus gros site d’eCommerce français, ces principes à la fois simple, très pragmatique et tellement efficace révèlent une importance toute particulière. Je pense sincérement qu’ils meritent d’etre connus et appliqués pour créer une meilleure expérience utilisateur et pour faciliter la réalisation d’une interface graphique.

1er principe : Se concentrer sur l’utilisateur et sur ses tâches non sur la technologie
Pour pouvoir appréhender l’utilisateur et ses tâches, il faut d’abord se poser les questions suivantes :
– Quels sont les utilisateurs ?
– Quel est l’intérêt du programme ? Quels problèmes va-t-il résoudre ?
– Quels sont les problèmes de l’utilisateur ? Qu’aime-t-il ou pas dans sa façon de travailler actuellement ?
– Quels sont les compétences de l’utilisateur ? Sont-ils prêts à apprendre ? Y a-t-il différents types d’utilisateurs ?
– comment les utilisateurs se représentent les données que le programme va gérer ?
– Quelles sont les façons préférées de travailler ? Comment le programme va s’adapter ou les changer ?

Le but de ces questions est d’abord de comprendre l’utilisateur. La réponse se construit autour de trois composants : décisions d’entreprise, investigation empirique et collaboration.

Décisions d’entreprise : l’entreprise doit décider quels seront les principaux utilisateurs pour son produit. On parle de choisir une cible primaire. Attention le client (département des ventes ou marketing) ne représente pas toujours les utilisateurs.

Investigation empirique : il faut connaître les caractéristiques de cette cible primaire.. Comment ? En parlant avec eux, en les observant, avec mettant en place des groupes de travail, en parlant avec leur managers.
En ce qui concerne les utilisateurs, il faut savoir qu’il n’y pas une séparation nette entre débutants et experts. Il faut plutôt considérer 3 dimensions :

  • la personne calée en informatique de façon générale
  • l’expert de la tâche
  • la connaissance du système ou du produit

Il faut aussi se poser la question pourquoi l’utilisateur veut utiliser votre produit ? travail ? personnel ?

Collaboration : amener les utilisateurs cibles dans votre équipe pour mieux les connaître, traiter les comme des experts.

Créer des Personnas

Le but de ces trois étapes est de créer un ou des profils avec des informations plus générales. On peut aller plus loin en créant des “personnas”.

Comprendre la tâche s’articule aussi autour de trois composantes.


Décision business : décider l’ensemble des tâches que l’on souhaite gérer dans le produit. Cette décision est influencée par les buts stratégiques de l’entreprise, l’expertise de ces employés, son influence passée, son histoire, ses processus, son infrastructure, sa perception des opportunités du marché, des niches ou encore les nouvelles technologies venant de la recherche.
Investigation empirique : analyser les tâches visées. Cette analyse des tâches a pour but d’apprendre comment les utilisateurs réalisent les tâches que le programme va gérer. La meilleure façon de faire cette analyse est d’observer les utilisateurs, faire des interviews, comprendre avant l’introduction du nouveau produit, faire des spéculations sur l’utilisation future.
L’interview et l’observation sont complémentaires. L’interview peut introduire une désinformation en mettant en avant comment le produit pourrait marcher. Lors de l’observation, on interprète ce que l’on voit.
Collaboration : discuter avec l’utilisateur de vos premières analyses et conclusion permet d’aller plus loin. Le retour d’information est dans les deux sens : les utilisateurs apprennent aussi comment il travaille et découvre les technologies qui pourraient les aider.
L’ensemble de ce processus permet de répondre à des questions précises :

  • Quelles tâches concernent la zone d’application du programme ?
  • Quelles sont les tâches communes et les rares ?
  • Quelles sont les étapes de chaque tâche ?
  • Quel est le résultat et la sorte de chaque tâche ?
  • D’où proviennent les informations pour chaque tâche et comment l’information résultant de chaque tâche est utilisée ?
  • Quelles personnes font quelles tâches ?
  • Quels sont les problèmes rencontrés lors de la réalisation de la tâche ? Quelles sont les erreurs les plus communes ? Quelles en sont les causes ? Quelles sont les conséquences ?
  • Quelles sont les terminologies utilisées ?
  • Comment sont reliées entre elles les différentes tâches ?
  • Quelle communication est nécessaire entre les personnes pour réaliser les tâches ?

Enfin il faut prendre en compte le contexte, par exemple que les données peuvent venir d’un autre programme, et ne pas avoir une vision centrée sur la technologie .

Principe 2 : Considérer la fonction en premier, la présentation ensuite.

L’erreur est souvent de décider à quoi va ressembler l’interface avant de définir ces fonctionnalités. Certains utilisent des outils de maquettage, d’autres des outils de création de GUI interactif, certains se lancent directement dans l’implémentation. Le point commun est de commencer par travailler sur la présentation directement. Cependant l’interface utilisateur d’un programme n’est pas seulement une question de présentation. Une décision de design concerne l’ensemble de l’architecture : Quels concepts montrer aux utilisateurs ? Comment structurer l’information ? Quels traitement en arrière plan ? Quelle customisation possible ?
Considérer la fonction en premier signifie que le designer doit clairement définir les concepts du logiciel et les relations entre ces concepts. On ne peut sauter directement sur la disposition de l’interface sans d’abord répondre aux questions liées aux tâches.

Le modèle conceptuel.


A partir des questions ci-dessus, il est important d’enregistrer et d’organiser la connaissance qui en résulte de façon à aider le design d’une interface graphique. La plus utile est de développer un modèle conceptuel : le modèle que le designer veut que les utilisateurs comprennent.

En utilisant le logiciel ou en lisant la documentation, les utilisateur se construisent un modèle de son fonctionnement ou modèle d’interaction. Si le modèle du designer et de l’utilisateur sont les mêmes alors le design est bon. Un modèle n’est pas exprimé en terme de concepts d’interface graphique mais autour :

  • des données que l’utilisateur manipule
  • de l’organisation de ces données
  • de ce que l’utilisateur fait avec ces données

Développer un modèle conceptuel est difficile car on est tenté de le définir directement en terme d’interface utilisateur notamment à cause de la tendance du marketing de voir les besoins fonctionnels en terme de disposition de l’interface et de clics de souris.
L’idée est en qu’en construisant avec attention un modèle conceptuel explicite et ensuite en créant l’interface graphique à partir de ce modèle, le logiciel en résultant sera plus propre, plus simple et plus facile à comprendre.
“As simple as possible, but no simpler” Albert Einstein

Se concentrer sur la tâche.
Le modèle conceptuel doit être aussi simple que possible. Il faut se concentrer sur les tâches avec des concepts familiers pour l’utilisateur. Par exemple, pour designer un logiciel de création et de management d’organigramme d’entreprise, il faut mieux utiliser un ensemble d’organisations, sous-organisations et employés plutôt qu’un ensemble de boites, labels et de connecteurs.
Il faut résister à la tentation d’ajouter de nouveaux concepts (“less is more” – Mies van der Rohe). L’ajout d’un nouveau concept est couteux pour deux raisons :
– l’expert de la tâche ne le reconnaîtra pas et devra donc l’apprendre
– il interagit potentiellement avec tous les autres concepts du système. L’ajout d’un concept ne fait pas augmenter la complexité globale de façon linéaire mais de façon exponentielle.

Faire une analyse des objets et des actions.
L’élément le plus important d’un modèle conceptuel est l’analyse des objets / actions. C’est à dire spécifier tous les objets conceptuels qu’une application va exposer à ces utilisateurs, les actions possibles sur chaque objet, les actions possibles sur chaque type d’objets et leurs relations. L’application peut introduire d’autres objets mais ils ne doivent pas être visible. L’analyse des objets / actions est donc une déclaration des concepts exposés à l’utilisateur.
Exemple pour la fonctionnalité “gérer un compte” les objets sont “virement” et “compte” et les actions possibles : écriture, déposer ou retirer de l’argent.

Relation entre objets.
Un des rôles importants de l’analyse des objets / actions est de définir et représenter les relations entre les objets. Les objets du domaine forment habituellement une hiérarchie de type par exemple un compte courant est un type de compte bancaire. Faire en sorte que cette hiérarchie soit claire dans le modèle conceptuel permet de mieux la comprendre et de mieux la présenter aux utilisateurs. Cela permet aussi de déterminer des actions génériques et donc de rendre l’interface plus facile à apprendre. Plutôt que d’avoir une longue liste de commandes spécifiques, on peut avoir un petit nombre de commandes qu’on peut appliquer à travers les objets. Suivant les applications, les objets peuvent être aussi mis en relation par des hiérarchies d’éléments et d’ensemble : par un exemple un document possède un en-tête ou un album photos contient des photos. Enfin les objets peuvent être mis en relation en fonction de leur importance.
Plus la relation entre les opérations du système et la tâche qu’ils servent est directe, plus votre modèle conceptuel à des chances d’être adopté par les utilisateurs.

Développer un lexique.
Après l’analyse des objets / actions, le plus important dans un modèle conceptuel est le lexique qui nomme chaque concept que l’utilisateur peut rencontrer. Une fois que l’équipe est d’accord sur les concepts visibles, il faut se mettre d’accord sur la dénomination de ces concepts afin de maintenir la cohérence.

Écrire des scénarios de taches.
Il est utile de définir des scénarios de tâche ou cas d’utilisation. Ces scénarios peuvent être utilisés dans la documentation du produit, dans les revues fonctionnelles ou pour les tests.

Une fois le modèle conceptuel défini, on peut alors construire le design graphique de l’interface utilisateur. Les concepts abstraits sont alors traduits par une présentation concrète et des actions utilisateurs.
On peut aussi remarquer la similarité flagrante entre l’analyse des objets/actions et l’analyse orientée objet en programmation. Le modèle conceptuel défini lors du design de l’interface peut donc tout à fait servir pour le développement du logiciel. Ce n’est donc pas un coût supplémentaire pour le projet … au contraire !

Principe 3 : se conformer à la vision de la tâche par l’utilisateur.

Les interfaces utilisateurs devraient être désignées suivant le point de vue de l’utilisateur. Pour connaître celui-ci le mieux est justement de discuter avec l’utilisateur, de l’observer et de collaborer (comme expliqué dans le 1er principe). Se conformer à la vision de l’utilisateur a plusieurs sous principes.

Faire en sorte que ce soit naturel.
Les actes non naturels sont des étapes que l’utilisateur doit réaliser alors qu’elles n’ont pas de connexion directe avec sa tâche. Ces actions sont considérées difficiles à apprendre, facile à oublier, consommatrice en temps et ennuyeuses.
On peut prendre l’exemple d’un jeu d’échec. L’utilisateur n’a besoin que de sélectionner la pièce et indiquer la destination. Les actes non naturels pouvant s’intercaler sont nombreux : passer à un mode de mouvement, donner un nom ou une raison à ce mouvement dans le cadre d’un historique ou une analyse à posteriori, spécifier quel jeu dans le cadre de plusieurs plateaux. Déplacer une pièce au échec est une tâche simple mais un logiciel peut facilement la rendre complexe en y ajoutant des étapes supplémentaires non naturelles.

Ne pas imposer des restrictions arbitraires.
se conformer à la vision de la tâche par l’utilisateur implique de ne pas imposer des restrictions arbitraires comme limiter le nom d’une personne, limiter le trie des lignes d’une table à maximum trois colonnes ou encore fournir un retour en arrière pour seulement trois opérations.

Utiliser le vocabulaire de l’utilisateur non le sien.
Il faut garder les concepts relatifs au fonctionnement du programme à l’intérieur de celui-ci et ne pas les exposer à l’utilisateur. L’utilisateur n’est pas intéressé par le fonctionnement du programme.

Il faut aussi trouver le bon point entre complexité et puissance.
L’erreur est de penser que plus il y a d’options, des contrôles, de puissance mieux c’est ! Les utilisateurs se concentrent sur les fonctions utiles pour atteindre leur objectif. Plus il y a des fonctionnalités avec une faible importance, plus les fonctionnalités réellement importantes ont moins de chance d’être apprises et utilisées.
Les solutions sont d’utiliser :

  • des valeurs par défaut
  • des modèles ou des solutions clé en main
  • des wizards avec un chemin
  • une divulgation progressive afin de cacher les détails tant que l’utilisateur n’en a pas besoin
  • des commandes génériques
  • un design spécifique au tâche (supporter un petit nombre de tâche extrêmement bien)
  • customisation

Principe de base 4 : gérer l’accès et la visibilité des fonctions.
Quelque soit le domaine de la tâche, les utilisateurs ont des buts allant du commun au rare. Il faut faire en sorte que les buts communs soient faciles à atteindre. La somme de travail nécessaire à une tâche ne doit pas être proportionnel à la complexité de celle ci. Celle ci doit être proportionnel au fait quelle soit commune ou non, par exemple dans un restaurant on peut demander d’être servi “comme d’habitude”. L’objectif est donc de réduire la complexité pour les tâches communes (en utilisant les solutions évoqués dans le troisième principe).
Il y a deux aspects définissant une tâche commune : le nombre d’utilisateurs contre la fréquence d’utilisation.
Plus une fonction est utilisée, moins elle doit nécessiter de clic. Par exemple, l’installation peut se permettre d’avoir beaucoup d’étapes. Plus il y a d’utilisateurs, plus la fonction doit être visible. Une fonction peu utilisée par peu de personnes ne doit prendre du temps à la conception.

Fréquence d’utilisation / nombre d’utilisateurs Par la majorité Par quelques uns
Fréquemment Hautement visible et peu de clics A peine visible et peu de clics
Rarement A peine visible et plus de clics OK Caché / plus de clics Ok

Principe de base 5 : Ne pas distraire les utilisateurs de leur tâche.

Notre capacité a être multitâche est limitée. Une activité complexe et surtout qu’on ne maîtrise pas nécessite concentration et attention. C’est pour cette raison qu’il ne faut pas contraindre l’utilisateur à s’occuper du logiciel. Ce dernier doit se trouver en arrière plan derrière la tâche fonctionnelle. Il faut aider à l’exécution de la tâche ou la résolution de problèmes liés à celle ci tout en minimisant le temps que l’utilisateur passe à résoudre des problèmes liés à l’informatique.
Il ne faut pas forcer l’utilisateur à résonner par élimination. Par exemple un service bancaire demandant un PIN alors que l’utilisateur a un mot de passe.

Principe de Base 6 : faciliter l’apprentissage.


La pensée classique est “inside-out” : le designer pense que l’utilisateur va obligatoirement comprendre qu’elle est le but d’une fonction. La plupart des designers assument que les utilisateurs perçoivent et comprennent tout de l’intention du designer (exemple du do it bouton sur les stations de travail Lisp ou le verre de martini / antenne).
La bonne façon est de penser “outside-in”. Il faut designer en faisant en sorte que l’interface utilisateur est un sens pour la personne qui ne connaît pas tout.
L’utilisateur ne connaît pas vos intentions, ne connaît pas les différentes significations de chaque élément de l’interface. L’interface utilisateur doit avoir un sens pour l’utilisateur, non pour le designer.
Le designer doit favoriser la cohérence. Les incohérences forcent l’utilisateur à penser au système et le détourne de sa tâche. Il faut essayer de mettre en place des commandes génériques ou développer une interface utilisateur similaire en réutilisant des éléments pour différentes fonctions (notamment grâce au développement du modèle conceptuel).

La cohérence est un sujet difficile, plus qu’on ne le pense :

  • difficile à définir
  • multidimensionnel : un élément cohérent dans une dimension (ex. la fonction) peut être incohérent dans une dimension (ex. la localisation)
  • sujette à interprétation : l’idée de la cohérence peut être différente suivant les utilisateurs.

Cependant elle ne doit pas être laissé de coté. Les utilisateurs sont prêt à dépenser de l’energie physique afin de réserver l’effort mental pour leur tâche (“j’étais pressé donc j’ai pris la méthode la plus longue”).
Il faut que la cohérence soit centrée sur l’utilisateur (interview, observation, prototypage).
Il faut fournir un environnement avec peu de risques afin de favoriser l’exploration et l’apprentissage. les erreurs doivent être difficile à faire et facile à corriger afin de réduire le stress.

Principe 7 : fournir de l’information, pas simplement de la donnée.


L’important est de se concentrer sur les données importantes et en extraire l’information (ex. si on veut savoir si le collègue est dans le bureau d’à coté .. la seul information importante est le oui ou non quelque soit la méthode utilisée).
Il faut aussi designer l’écran avec attention et précaution (et si besoin avoir recours à une aide extérieure). Les points importants sont :

  • l’ordre visuel et aider à la concentration de l’utilisateur
  • la possibilité de parcourir des yeux
  • correspondre au média utilisé
  • faire attention aux détails

L’écran appartient à l’utilisateur. Quand le logiciel change trop tout seul, les utilisateurs sont perdus et ennuyés. Il faut préserver l’inertie de l’affichage. Quand le logiciel change l’affichage pour montrer les effets d’un action, il faut essayer de minimiser ce qu’il change.

Principe 8 : Designer pour la réactivité
Depuis plusieurs décennies, les études ont prouvées que la réactivité – la capacité de suivre l’utilisateur et de ne pas le faire attendre – est le facteur le plus important déterminant la satisfaction de l’utilisateur. Lors de l’utilisation d’un ordinateur, les utilisateurs détestent attendre. Cependant on parle de vitesse perçue et non de vitesse réelle. Par exemple, un programme de rendu 3D n’affichant pas la progression pour gagner en vitesse sera perçu comme moins rapide qu’un autre affichant l’image petit à petit. Une interface réactive reste en contact avec l’utilisateur même si elle ne peut répondre immédiatement à sa demande. Elle fournit alors un retour d’information sur ce que le logiciel est en train de faire.
Quelques exemples d’une mauvaise réactivité :

  • un retour d’information en retard lors du clic sur un bouton, de l’utilisation des ascenseurs ou de la manipulation d’objets
  • Une opération longue qui bloque l’interface et ne peut être arrêtée
  • Ne fournir aucun indice sur le temps d’une opération longue
  • Des animations saccadées et dures à suivre
  • Ignorer une entrée utilisateur en effectuant des tâches de maintenance que l’utilisateur n’a pas demandé.

Ces problèmes affectent la productivité des utilisateurs et les frustrent.
L’arrivée du web a été un retour en arrière au niveau de la réactivité en particulier à cause des temps de communication entre les serveurs et le navigateur web ainsi que la limitation de la norme HTML de ne gérer qu’une page. L’arrivée du javascript « asynchrone » ou AJAX ainsi que l’amélioration des performances du coté serveur mais surtout du coté navigateur ont permis de grandement améliorer les choses.

Pour être perçu comme réactif, un logiciel interactif doit :

  • reconnaître une action de l’utilisateur directement même si la réponse prend du temps
  • faire savoir à l’utilisateur si le programme est en cours de travail ou non
  • permettre à l’utilisateur de faire autre chose en attendant qu’une fonction se termine
  • animer un mouvement clairement et de façon fluide
  • permettre à un utilisateur d’arrêter une opération longue qu’il ne veut pas
  • permettre à un utilisateur de juger combien de temps prend une opération
  • faire en sorte que l’utilisateur puisse mettre en place son propre environnement de travail

Principe 9 : Essayer avec l’utilisateur et corriger ensuite !
Il faut tester un produit ou un service avec les personnes qui sont susceptibles de l’utiliser le plus rapidement et le plus fréquemment possible. Ces tests d’utilisabilité sont extrêmement importants pour savoir si le design est réussi, si l’interface aide plus l’utilisateur qu’elle ne le gêne. Les résultats peuvent surprendre même les designers expérimentés et révèlent souvent des problèmes d’utilisabilité non anticipés. Il faut bien sur réserver du temps pour corriger les problèmes remontés par ces tests.
Les tests d’utilisabilité ont en fait deux buts :

– un but d’information qui permet de trouver les aspects de l’interface qui causent des problèmes à l’utilisateur et utiliser la nature exacte de ces problèmes pour suggérer des améliorations.

– Un but social afin de convaincre les développeurs qu’il y a un problème dans le design qui doit être corrigé. Les développeurs résistent souvent au changement en partie du au temps et à l’effort requis mais aussi parce que cela suggère que le design a été mal fait. C’est pour cette raison qu’il est intéressant qu’ils assistent aux tests mais il faut aussi les contraindre à observer passivement et ne pas interférer dans le processus.
Beaucoup pense que les tests d’utilisabilité sont fait juste avant que le produit soit livré. En fait il y a des tests pour chaque étape du développement d’un produit. Ils peuvent être catégorisés en fonction de deux dimensions :
1 l’étape du développement à laquelle le test se produit
2 l’aspect formel de la méthode de tests
Les tests peuvent être effectués avant l’écriture d’une ligne de code, pendant l’implémentation ou quand le produit est pratiquement finalisé. Les tests peuvent être informel comme les sondages, les interviews ou l’observation, quasi-formel quand l’utilisateur doit effectuer une tâche et qu’on collecte des données qualitatives et quantitatives ou formel lorsqu’il y a une étude mesurant principalement des données quantitatives et nécessitant une analyse statistique (en comparant très souvent deux designs).