Ergonomie, Expérience Utilisateur, Design Thinking
Articles par Yannick Grenzinger
Itération
1Il y a 13 ans
par Yannick Grenzinger
dans Notes de lecture
L’itération correspond au processus de répéter un ensemble d’opérations jusqu’à ce qu’un résultat spécifique soit atteint.
Dans la nature, les itérations permettent à des structures complexes de se former en se construisant progressivement sur des structures plus simples. Dans le design, les itérations permettent à des structures complexes de se former en explorant, testant et mettant au point différents designs. Par exemple, une interface utilisateur de qualité est développée grâce à une série d’itérations. Chaque version est revue et testée et le design subit alors une itération en fonction du retour d’information. A chaque itération, on en apprend plus à propos de l’interface et de son utilisation.
Les itérations apparaissent à chaque cycle de développement en deux formes basiques : itération du design et itération du développement.
L’itération du design intervient lorsqu’on explore, teste et affine les concepts de design. Chaque cycle dans le design restreint la large gamme de possibilités jusqu’à ce que le design soit conforme aux besoins. Des prototypes d’une fidélité en progression sont utilisés pour tester les concepts et identifier les variables inconnues (qui servent aussi dans le coefficient de sécurité). Des membres du public visé devraient être mis à contribution sur différentes étapes des itérations pour participer aux tests et valider les besoins. Les échecs aussi bien que les succès fournissent d’importantes informations à propos de ce qui marche et ce qui ne marche pas. En fait, il y a même souvent plus de valeurs et de leçons intéressantes dans les zones d’échec. Le résultat des itérations de design est une spécification détaillée et bien testée qui peut être développée en un produit final.
L’itération du développement est l’itération non prévue qui intervient lors de la construction du produit. C’est une refonte ou encore un gaspillage dans le cycle de développement. Cette itération est couteuse, non désirée et très généralement la cause de spécifications incorrectes, non adéquates, ou encore de problème de management ou de planning.
Il faut prévoir et utiliser des itérations de design. Il faut établir des critères clairs définissant le degré auquel les besoins doivent être atteints pour que le design soit considéré comme finalisé. Une des méthodes les plus efficaces pour réduire l’itération de développement est d’assurer que tous les membres de l’équipe de développement ont une vision claire et de haut niveau du produit final. Ceci est souvent accompli grâce des spécifications bien écrites, accompagnées de modèles et prototypes de haute fidélité.
Pour compléter le sujet des articles en anglais :
http://en.wikipedia.org/wiki/Iterative_design
http://www.useit.com/papers/iterative_design/
En complèment, on peut aussi évoquer l’association naturelle entre le design itératif et l’agilité.
Texte traduit provenant de Universal Principles of Design
Horror Vacui
0Il y a 13 ans
par Yannick Grenzinger
dans Notes de lecture
L’expression latine « Horror Vacui » définit la peur du vide et le désir de remplir les zones vides avec des objets ou de l’information. En terme de style, c’est l’opposée du minimalisme.
Les recherches récentes sur la perception de l’Horror Vacui suggère une relation inverse entre celle-ci et la perception de la valeur. Lorsque l’horror vacui augmente, la valeur perçue diminue. Par exemple sur enquête menée sur plus de 100 boutiques de vêtements qui affichent leur marchandise sur une devanture, le dégrée avec laquelle la devanture est remplie de mannequins, vêtements ou étiquettes de prix est inversement relié avec le prix moyen et le prestige de la marque. Si les passants doivent connaitre le prix, ils ne peuvent généralement pas s’offrir ce qui est vendu.
Vitrine minimaliste chez Dior
Vitrine bien remplie chez Tati
On peut relier ce principe à celui couramment cité du « less is more ».
Il faut penser à utiliser ce principe dans le design des devantures commerciales ou dans la publicité. Pour promouvoir une association de haute valeur, il faut favoriser le minimalisme pour un public riche et bien éduqué et l’horror vacui pour un public plus pauvre et moins éduqué. Pour des médias riches en information tel que les journaux ou les sites internet, il faut employer des principes d’organisation de l’information comme l’alignement ou le découpage en bloc pour garder les bénéfices des pages riche en information tout en atténuant l’horror vacui.
Texte traduit provenant de Universal Principles of Design
Les effets d’interférence
0Il y a 13 ans
par Yannick Grenzinger
dans Principe de design
Les effets d’interférence apparaissent lorsque deux ou plus processus perceptifs ou cognitifs sont en conflit. La perception et la cognition humaine impliquent de nombreux processus mentaux qui analysent et traitent l’information de façon indépendante. Les résultats de ces systèmes sont communiqués à la mémoire à court terme où ils sont traités indépendamment les uns des autres. Quand les sorties sont congruentes, le processus d’interprétation se produit rapidement et de façon optimale. Quand les sorties ne sont pas congruentes, des interférences se produisent et des traitements supplémentaires sont nécessaires pour résoudre le conflit. Ce temps supplémentaire a un impact négatif sur les performances.
Quelques exemples d’effets d’interférence :
Interférence de Stroop : un aspect sans rapport avec le sujet du stimulus déclenche un processus mental qui interfère avec le processus impliquant un aspect pertinent du processus. Par exemple, le temps nécessaire pour nommer la couleur des mots est plus grand quand la signification et la couleur sont en conflit.
Interférence de Garner : une variation hors sujet du stimulus déclenche un processus mental qui interfère avec le processus pertinent. Par exemple, le temps nécessaire pour nommer des formes est plus grand quand elles sont présentées à coté de formes qui changent à chaque présentation.
Interférence proactive : la mémoire existante interfère avec l’apprentissage. Par exemple, lors de l’apprentissage d’un nouveau langage, l’erreur fréquente est de vouloir appliquer la grammaire de leur langage naturel à la nouvelle langue.
Interférence retroactive : l’apprentissage interfère avec la mémoire existante. Par exemple, apprendre un nouveau numéro de téléphone peut interférer avec les numéros de téléphone déjà en mémoire.
Il faut prévenir ces interférences en évitant les designs qui créent des processus mentaux conflictuels. Les interférence liées à la perception (Stroop et Garner) sont souvent le résultat de combinaisons contradictoires (par exemple un bouton démarrer rouge et un bouton arrêter vert) ou d’éléments trop proches qui interagissent entre eux (par exemple des icônes qui se confondent à cause de leur forme et de leur proximité).
Pour éviter les interférences liées à la mémoire, il faut mixer les modes d’instruction (lecture, video, audio, activités … ), employer des concepts intégrateurs ou encore incorporer des périodes de repos toutes les 30 à 45 minutes.
Texte traduit provenant de Universal Principles of Design
La beauté de la visualisation des données
0Il y a 13 ans
par Yannick Grenzinger
dans General
Toujours dans les présentations TED, David McCandless nous offre sa vision de la représentation des données.
On retrouve ce mélange de beauté, de design, d’ergonomie, de simplification que l’on évoque tout au long de ce blog.
Il y a surtout l’importance de la représentation graphique pour la compréhension de l’information et des systèmes, mais aussi pour partager une vision, une cause, une histoire !
David McCandless fait d’ailleurs cette citation « Data is the new oil » (l’information est le nouveau pétrole). Il va donc maintenant falloir créer les raffineries efficaces.
Quelques articles déjà publiés sur des principes de représentation de l’information : hiérarchie, « Five hat racks » ou encore le découpage par bloc.
Représentation par icône
0Il y a 13 ans
par Yannick Grenzinger
dans Notes de lecture
La représentation par icône est l’utilisation d’images picturales pour rendre les actions, les objets et les concepts dans un affichage plus facile à trouver, à reconnaitre, à apprendre et à mémoriser. Les icônes est utilisée dans la signalisation, l’affichage des ordinateurs et les panneaux de contrôle. Elles peuvent être utilisé pour l’identification (le logo d’une société), servir d’une alternative efficace en terme d’espace utilisé par rapport au texte (signaux routier) ou pour attirer l’attention sur un élément à l’intérieur d’un affichage d’information (icône d’erreur apparaissant à coté d’un élément d’une liste).
Il y a quatre types de représentation iconique : similaire, exemple, symbolique et arbitraire.
Les icônes similaires utilisent des images qui sont visuellement analogue a une action, un objet ou un concept. Elles sont plus efficaces pour représenter des actions, des objets ou des concepts simples et moins efficaces quand la complexité augmente. Par exemple, un virage serré sur la route sera facilement représenté par un signe similaire mais l’action de réduire sa vitesse sera difficilement représenté par un signe similaire.
Les icônes exemples utilisent des images de choses qui illustrent ou sont communément associées avec des actions, des objets ou des concepts. Elles sont particulièrement efficaces pour représenter les éléments complexes. Par exemple un signe représentant un avion indique la présence d’un aéroport et une image représentant l’aéroport.
Les icônes symboliques utilisent des images qui représente une action, un objet ou un concept à un plus haut niveau d’abstraction. Elles sont efficaces quand les actions, les objets ou les concepts impliquent des objets facilement reconnaissables et bien établis. Par exemple, l’image d’un éclair pour indiquer la présence d’un danger lié à l’électricité.
Les icônes arbitraires utilisent des images qui ont peu ou pas de relations avec l’action, l’objet ou le concept qu’on veut représenter : en clair, la relation doit être apprise. Généralement, les icônes arbitraires devraient être uniquement utilisées pour développer des standards industriels ou cross culturel qui seront utilisé sur de longue période de temps. Par exemple, l’icône pour indiquer les radiations doit être connue mais le symbole est reconnaissable partout dans le monde.
En résumé, il faut utiliser des icônes similaires quand les représentations sont simples et concrètes, des icônes exemples quand les représentations sont complexes, des icônes symboliques quand les représentations impliquent des symboles déjà bien reconnus et des icônes arbitraires quand les représentations doivent être utilisées comme standard.
Texte traduit provenant de Universal Principles of Design
La mise en évidence
0Il y a 13 ans
par Yannick Grenzinger
dans Notes de lecture
La mise en évidence ou surbrillance est une technique efficace pour attirer l’attention vers un élément du design. Cependant, mal utilisée, elle peut se révéler inefficace et même réduire les performances. Les conseils suivants abordent les bénéfices et les responsabilités des techniques de mise en évidence classiques.
Dans un cadre général, il ne faut pas mettre en évidence plus de 10% du design visible. Il faut utiliser un petit nombre de techniques de façon constance sur l’ensemble du design.
Il faut utiliser le gras, l’italique ou le soulignement pour les titres, les labels, les légendes ou des courtes suites de mots quand ceux ci doivent être différenciés du reste du texte. Le gras a souvent la préférence car il ajoute peu de bruit et met clairement en évidence les éléments visés. L’italique ajoute aussi peu de bruite mais est moins lisible et détectable. Le soulignement ajoute beaucoup de bruit et est peu lisible et doit donc être peu utilisé voir pas du tout.
L’utilisation des majuscules sur une courte séquence de mots est facilement détectable et donc peut être avantageusement employé sur les labels et mots clés. Par contre, il faut éviter d’utiliser une police de caractères différente car cela a tendance à perturber l’esthétisme de la typographie.
L’utilisation des couleurs est une technique potentiellement efficace mais doit être utilisée avec modération et seulement de concert avec d’autres techniques. Il faut utiliser seulement quelques couleurs dé-saturées qui sont clairement distinctes les unes des autres.
L’inversion est une technique efficace avec les éléments textuels (un peu moins avec les images). Cependant elle ajoute beaucoup de bruits et doit donc être utilisé avec modération.
Le clignotement est une technique si performante pour attirer l’attention qu’elle doit être utilisée uniquement pour des éléments critiques qui nécessitent une réponse immédiate. Lorsque l’information est prise en compte, il doit être possible d’arrêter ce clignotement car il déconcentre fortement l’utilisateur.
Texte traduit provenant de Universal Principles of Design
La hiérarchie des besoins
0Il y a 13 ans
par Yannick Grenzinger
dans Notes de lecture
Le principe de hiérarchie de besoin précise que le design doit répondre au besoin de bas niveau (cela doit fonctionner) avant que les besoins de haut niveau, tel que la créativité, soient adressés. Un mauvais design va tenter de répondre à plusieurs niveaux de besoin sans construire en premier sur les besoins primordiaux. Les cinq niveaux clés de besoin sont les suivants :
- Le besoin fonctionnel correspond aux exigences de base du design. Par exemple, un magnétoscope doit au minimum pouvoir enregistrer, jouer et rejouer une vidéo enregistrée.
- Le besoin de fiabilité correspond au besoin d’établir une performance stable et consistante. Par exemple, le magnétoscope doit pouvoir rejouer les vidéos avec un niveau de qualité acceptable. Si le design a des performances variables ou de fréquents problèmes, le besoin de fiabilité n’est pas atteint.
- Le besoin d’utilisabilité définit si le design est facile à utiliser et tolérant. Par exemple le magnétoscope doit rendre facile la programmation d’un enregistrement et doit être tolérant aux erreurs.
- Le besoin de maîtrise qui permet aux utilisateurs de mieux faire les choses qu’avant. Par exemple, le magnétoscope peut aller chercher des programmes et les enregistrer en fonction de mots clés ce qui n’est pas possible avec un magnétoscope basique.
- La créativité correspond au niveau où tous les besoins ont été satisfait et que les utilisateurs trouvent des nouvelles utilisations ! Les designs à ce niveau ont la plus forte valeur ajoutée et atteignent même une relation de culte par leurs utilisateurs.
Il faut prendre en compte cette hiérarchie de besoin dans le design et faire en sorte que les besoins de bas niveau sont satisfaisant avant de vouloir répondre aux besoins de plus haut niveau.
Article en anglais chez Smashing Magazine.
Texte traduit provenant de Universal Principles of Design
hierarchie
0Il y a 13 ans
par Yannick Grenzinger
dans Notes de lecture
Augmenter la visibilité des relations hiérarchiques dans un système est une des façons les plus efficaces d’améliorer la connaissance du système et donc son utilisabilité.
Les exemples des hiérarchies visibles sont la structure d’un livre, les menus d’application à plusieurs niveaux et les diagrammes de classification. La perception des relations hiérarchiques à travers les éléments est principalement dû à leur position relative gauche-droite et haut-bas mais est aussi influencé par leur proximité, leur taille et la présence de ligne de raccord. Les éléments supérieurs sont référencés comme les éléments parents et les éléments inférieurs comme les enfants.
Il y a trois façons possibles de représenter une hiérarchie : les arbres, les nids et les escaliers.
Les structures en arbre illustrent les relations hiérarchiques en plaçant les enfants en dessous ou a droite de l’élément parent ou par l’utilisation d’autres stratégies indiquant la hiérarchie par exemple les lignes de connexion. Les arbres sont des stratégies efficaces pour représenter des hiérarchies d’une complexité modérée mais grossit très rapidement et devient un enchevêtrement quand plusieurs parents partagent des enfants communs.
Organigramme d'une famille royale est un exemple de structure en arbre
Les structures en nid illustrent les relations hiérarchiques en faisant contenir visuellement les éléments enfants dans les éléments parents comme dans un diagramme de Venn. Les structure en nid sont efficaces pour représenter des hiérarchies simples. Quand les relations deviennent trop denses ou complexes, les nids sont moins efficaces. Ceux-ci sont le plus généralement utilisés pour grouper des informations ou des fonctions et pour représenter des relations logiques simples.
Les poupées russes sont un très bon exemple de structure en nid
Les structures en escalier illustrent les relations hiérarchiques en empilant les éléments enfants en bas et à droite des éléments parents comme dans un sommaire de livre. Les structures en escalier sont efficaces pour représenter des hiérarchies complexes mais sont difficilement navigable et impliquent de façon erroné une relation séquentielle entre les enfants empilés. Les escaliers interactifs qu’on trouve dans les logiciels résolvent le problème précédent en cachant les éléments enfants tant que le parent n’est pas sélectionné. Les structures en escalier sont généralement utilisées pour représenter pour représenter de larges structures qui change à travers le temps.
Le sommaire d'un livre est un bon exemple de structure en escalier
Il est utile d’explorer différentes façons de révéler et cacher la complexité d’une structure hiérarchique pour augmenter leur clarté et leur efficacité.
Texte traduit provenant de Universal Principles of Design
Garbage In, Garbage Out
0Il y a 13 ans
par Yannick Grenzinger
dans Notes de lecture
L’observation générale est que la qualité des entrées fait la qualité des sorties et, à moins d’une intervention du design, les mauvaises entrées donnent généralement des mauvaises sorties. Ce principe a été étendu à de nombreux domaines comme le business, l’éducation, la nutrition ou l’ingénieurie. La métaphore des « déchets entrants » fait référence à deux types de problèmes d’entrée : les problèmes de type et les problèmes de qualité.
Les problèmes de type apparaissent quand le système est alimenté par le mauvais type d’entrée par exemple indiquer un numéro de téléphone dans le champ lié à la carte de crédit. Les problèmes de type sont graves car l’entrée fournie peut être complètement différente de l’entrée attendue. L’avantage c’est que ces problèmes sont facilement détectable. Les problèmes de type sont généralement causés par des erreurs de but, une action incorrecte causée par une action consciente. La stratégie principale pour minimiser ces problèmes sont les affordances et les contraintes.
Les problèmes de qualité apparaissent quand le type d’entrée est correct mais comporte des erreurs par exemple bien entrer un numéro de téléphone dans le champ téléphone mais un mauvais numéro. En fonction de la fréquence et de la sévérité des erreurs, le problème de qualité peuvent être plus ou moins sérieux. Faire une faute de frappe dans un champs de recherche n’est pas grave, par contre demander le téléchargement de 5000 éléments au lieu de 50 peut bloquer le système. Les problèmes de qualité sont généralement causés par des erreurs d’inattention, action incorrecte causée par une action accidentelle ou inconsciente. Les premières stratégies pour minimiser les problèmes de qualité sont les pré-visualisations et les confirmations. Ces stratégies permettent de vérifier les conséquences d’une action avant l’entrée dans le système.
Le meilleur moyen d’éviter les « déchets sortants » est d’empêcher les « déchets entrants ». Il faut utiliser les affordances et les contraintes pour minimiser les problèmes de type. il faut utiliser la pré-visualisation et les confirmations pour minimiser les problèmes de qualité. Quand l’intégrité des entrées est critique, il faut utiliser des tests de validation pour vérifier l’intégrité avant l’entrée et considérer des étapes de validation qui exigent la vérification indépendante de multiples personnes. Il faut aussi considérer l’utilisation de mécanismes pour signaler et, dans certains cas, corriger automatiquement les mauvaises entrées (par exemple la correction orthographique).
Texte traduit provenant de Universal Principles of Design
La loi de Hick
2Il y a 13 ans
par Yannick Grenzinger
dans Notes de lecture
La loi de Hick déclare que le temps requis pour prendre une décision est une fonction du nombre d’alternatives possibles. Par exemple, quand un pilote doit appuyer sur un bouton particulier en réponse à un événement, comme une alarme, la loi de hick prédit que le plus le nombre de boutons possibles est important, plus cela prend du temps pour prendre une décision et choisir le bon bouton. la loi de Hick a des conséquences sur le design de n’importe quel système ou processus qui requiert la prise de décision simple basée sur de multiples options.
Toutes les taches sont constituées de quatre étapes :
1 – identifier le problème ou le but 2 – évaluer les options disponibles 3 – décider une option 4 – implémenter l’option
La loi de Hick s’applique à la troisième étape. Cependant la loi ne s’applique pas aux décisions qui nécessitent des niveaux significatifs de recherche, de lecture et pour les problèmes complexes. Par exemple, une tâche nécessitant de lire des phrases et une concentration intense avec trois options peut prendre largement plus de temps qu’un simple stimuli-réponse avec six options. Plus la tâche est complexe, moins la loi de Hick s’applique.La loi de Hick s’applique très bien dans le cadre du design des applications par exemple les menus, les affichages de contrôle, l’agencement et la signalisation pour s’orienter et l’entrainement pour les interventions d’urgence.
Il faut considérer la loi de Hick quand on désigne un système qui implique des décisions basées sur un ensemble d’options. Pour les tâches en temps critique, il faut minimiser le nombre d’options impliquées dans une décision pour réduire les temps de réponse et minimiser les erreurs. Cependant, quand la tâche requiert des intéractions complexes, il ne faut pas se baser sur la loi de Hick mais plutot tester le design sur la population visée avec des scénarios réalistes. Lors de l’entrainement de personnes à effectuer des procédures en temps critique, il faut les entrainer au minimum de réponses possibles pour un scénario donné afin de limiter les temps de réponse, le taux d’erreurs et le coût de la formation.
Texte traduit provenant de Universal Principles of Design
