Archives de catégorie : Notes de lecture

Performance contre préférence

Les designers et les managers associent souvent la maxime d’affaires : « le client a toujours raison » ou « l’utilisateur a toujours raison » avec les choix de design. C’est une confusion dangereuse parce que ce qui aide les gens à bien accomplir leur tâche et ce que les gens aiment ne sont pas toujours identiques. Par exemple, le clavier Dvorak inventé il y a plus de 50 ans est sensé améliorer l’efficacité de dactylographie de 30% mais n’a pas réussi à croitre en popularité car les gens préfèrent continuer à utiliser le clavier qwerty / azerty plus familier. Pourtant si on demandait aux gens s’ils voudraient utiliser un clavier permettant de taper 30% plus vite avec moins d’erreurs, la plupart répondrait par l’affirmative.

Clavier Dvorak

Cet échec est une leçon importante pour les designers : les raisons qui font que les gens préfèrent un design sur un autre est une combinaison de différents facteurs et peut n’avoir aucun rapport avec les performances. Est-ce que le design est plaisant à regarder ? Est-ce qu’il contribue au bien être ou à l’estime personnelle de l’utilisateur ? Le meilleur moyen de balancer performance et préférence est de déterminer précisement l’importance de la performance contre la préférence. Tandis que les sondages, les interviews et les groupes de travail essayent de trouver ce que les gens veulent ou aiment, ce sont des indicateurs peu fiables sur ce que les gens vont faire, en particulier sur les designs nouveaux ou non familiers. De plus, les gens ont des difficultés pour différencier ce qu’ils aiment et ce qui améliore en fait leur performance. Ils pensent même souvent que les designs familiers leur permettent d’avoir les meilleurs performances.

La meilleur méthode pour obtenir les besoins précis de performance vs préférence est d’observer les utilisateurs dans un contexte réel. Quand ce n’est pas possible, des tests utilisant des tâches structurées approchant les aspects clés de l’utilisation du nouveau design pourront être utilisés. C’est important d’obtenir les informations de préférence pendant que la tâche est effectuée et non après.

Texte traduit provenant de Universal Principles of Design

La modularité

La modularité est un principe structurel utilisé pour manager la complexité des systèmes. Cela implique d’identifier les ensembles fonctionnels similaires et ensuite transformer ces ensembles en systèmes autonomes interdépendants (modules). Par exemple, le design modulaire des barrettes de mémoire d’un ordinateur permet à son propriétaire de changer ou d’augmenter la mémoire sans changer d’ordinateur. La possibilité d’améliorer facilement et à moindre coût un système donne au design modulaire un avantage intrinsèque par rapport au design non modulaire.

Les modules devraient être désignés pour cacher leur complexité interne et interagir avec les autres modules grâce à des interfaces simples. Le résultat est une réduction globale de la complexité et une décentralisation de l’architecture système ce qui améliore la fiabilité, la flexibilité et permet une meilleure maintenance. De plus, un design modulaire encourage l’innovation sur chaque module ainsi que la compétition sur leur design et leur fabrication.

La modularité dans un ordinateur

La modularité du PC est un des facteurs de son succès

Le bénéfice d’un design modulaire n’est pas sans coût : celui-ci est plus complexe qu’un design non modulaire. Les designers doivent avoir une connaissance significative du fonctionnement interne du système et de son environnement pour décomposer en modules et faire que ceux-ci fonctionnent comme un tout. La plupart des systèmes modulaires existants n’ont pas commencé ainsi, mais se sont peu à peu transformer pour être modulaire comme la connaissance du système augmente.

En conclusion, il faut considérer la modularité quand on désigne ou modifie des systèmes complexes. Cependant, il ne faut pas tenter un système modulaire complexe sans designer expérimenté et une connaissance approfondie du système.

Texte traduit provenant de Universal Principles of Design

Le modèle mental

Les gens comprennent et interagissent avec les systèmes et l’environnement par l’intermédiaire de représentations mentales développées par l’expérience. Si le résultat de l’interaction correspond à celui du modèle mental, ce dernier est exact et complet. Sinon il est considéré comme inexact et incomplet. Il y a deux types de modèle mental basique : les modèles mentaux du comment le système fonctionne (modèle du système) et ceux du comment les gens interagissent avec les systèmes (modèle d’interaction).

Modèle mental d'un système

Les designers ont généralement un modèle du système complet et précis mais un modèle d’interaction faible. Ils savent très bien comme le système fonctionne mais ont peu d’information sur comment les utilisateurs vont se servir du système. A l’inverse, les utilisateurs ont tendance à avoir une vision imprécise du fonctionnement du système mais, à travers l’expérience, ils créent des modèles d’interaction bien plus précis que ceux des designers. Le design optimal n’apparait que quand les designers ont une vision précise et complète du modèle du système et d’interaction et proposent une interface qui reflète une fusion efficace des deux modèles.
Le designer peut obtenir un modèle d’interaction précis et complet à travers une utilisation personnelle du système, des tests en laboratoire (groupe de travail et tests d’utilisabilité) et une observation directe des personnes utilisant le système ou un système proche.

Il faut effectuer un design qui prend en compte le modèle d’interaction des utilisateurs. S’il existe un modèle mental standard du fonctionnement de quelque chose, il faut essayer de le mettre à profit. Quand ce n’est pas possible, il faut créer une expérience d’interaction qui prend source dans des modèles mentaux communs autant que possible, par exemple la métaphore du bureau sur les ordinateurs. Cependant il ne faut pas non plus limiter le design : il est parfois préférable que les gens aient à apprendre un nouveau modèle mental clair et consistant que d’utiliser un modèle mental familier qui ne convient pas.

Universal Principal of Design donne un exemple concret avec l’ABS sur les systèmes de freins de voiture. L’ABS nécessite une utilisation très différente d’un système de freinage plus classique sur surface glissante. Sans ABS, il faut mieux « pomper » sur les freins pour éviter le blocage des roues et ainsi garder le contrôle de la direction. Les bruits et les vibrations sont mauvais signes. Au contraire, avec l’ABS, il ne faut pas hésiter à appuyer fort sur l’ABS tout en contrôlant la direction du véhicule. Les bruits et les vibrations sont signes que le système fonctionne correctement. Le problème vient du fait que les conducteurs vont avoir tendance à utiliser le modèle mental du système sans ABS à l’ABS qui devient alors inutile et même augmente les probabilités d’accident.

Texte traduit provenant de Universal Principles of Design

Le rasoir d’Ockham

Pour ce 50ème article, un sujet qui dépasse le design pour lorgner du coté de la théologie et la philosophie.

Le principe du rasoir d’Ockham affirme que si le choix est possible entre des designs fonctionnellement équivalents, le design le plus simple devrait être sélectionné.

Différentes variations de ce principe existent, chacune est adaptée pour prendre en compte les particularités du domaine ou de la connaissance.
Quelques exemples :
« Une pluralité ne doit pas être posée sans nécessité » – Guillaume d’Ockham
« la nature ne fait rien en vain ni de superflu » – Aristote
« On devrait tout rendre aussi simple que possible, mais pas plus. » – Albert Einstein

L’idée implicite est que les éléments non nécessaires diminuent l’efficacité du design et augmentent les probabilités de situations non prévues. Des lourdeurs non nécessaires que ce soit physiques, visuelles ou cognitives dégradent les performances. De plus des éléments de design non nécessaires ont la possibilités de créer des problèmes. Il y a aussi une esthétique de principe qui associe la « coupe » d’éléments non nécessaires à l’élimination des impuretés d’une solution : le design a un résultat plus propre et plus pur.

Il faut utiliser le principe du rasoir d’Ockham pour évaluer et sélectionner parmi plusieurs designs fonctionnels équivalents. L’équivalence fonctionnelle se réfère ici à des performances comparables d’un design sur des mesures communes. Par exemple, étant donnés deux affichages fonctionnellement équivalents (égaux en contenus et lisibilité), il faut sélectionner l’affichage avec le moins d’éléments visuels.

La page de recherche de Google est un excellent exemple de l’application de ce principe comparé à la concurrence.

Un exemple pratique sur un site web (en anglais).

Texte traduit provenant de Universal Principles of Design

Mapping

Le mapping correspond à la relation entre les contrôles et ses mouvements ou ses effets. Les bons mappings entre les contrôles et leurs effets permettent de faciliter l’utilisation. On parle aussi de relation entre contrôle et affichage ou de compatibilité stimulus-réponse.

Tourner une roue, enclencher un commutateur ou appuyer sur un bouton et vous attendez certains effets. Quand l’effet correspond au résultat souhaité, le mapping est considéré comme bon ou naturel, autrement il est considéré comme pauvre. Par exemple, le contrôle d’une vitre électrique dans la portière d’une voiture peut être orienté afin que le fait de baisser ou lever la vitre soit évident. Mettez ce contrôle dans l’accoudoir et donnez lui une orientation avant-arrière et la relation entre le contrôle et le fait de lever-baisser la vitre n’est plus du tout évident.

Mapping contrôle - vitre électrique

Les contrôles de cette vitre électrique donnent de très mauvaises indications sur leur mapping

Un bon mapping est principalement fonction d’une similarité de disposition, comportement ou signification. Quand la disposition des contrôles d’une cuisinière correspond à la disposition des plaques de cuisson, on a alors une similarité de disposition. Quand tourner le volant à gauche, fait tourner la voiture à gauche, on parle de similitude de comportement. Quand un bouton d’arrêt est coloré en rouge, on parle de similarité de signification. Dans chaque cas, la similarité rend la relation contrôle-effet prévisible et ainsi plus facile à utiliser.

Il faut positionner les contrôles afin que leur disposition et leur comportement correspondent à la disposition et au comportement du dispositif. Il faut éviter d’utiliser un seul contrôle pour plusieurs fonctions. Si ce n’est pas possible, le mieux est d’utiliser des modes visuels distincts pour indiquer la fonction activée. Il faut faire attention aux conventions car différents groupes de population peuvent interpréter la convention différemment (par exemple en Angleterre, enclencher un interrupteur de lumière vers le haut éteint cette lumière).

Texte traduit provenant de Universal Principles of Design

Typographie : clarté du texte

La clarté visuelle d’un texte est généralement basée sur la taille, la police de caractère, le contraste, le bloc de texte et l’espacement entre les caractères utilisés.

Il y a une certaine confusion dans la recherche sur la typographie. La croissance et l’avancement rapide de l’éditique moderne, des sites web et des présentations multimédias continuent à augmenter la confusion avec la variété de polices, les capacités de mise en page, d’affichage, options d’impression et le besoin de s’intégrer avec d’autres médias. Les conseils suivants adressent les questions communément rencontrées en ce qui concerne la lisibilité.

La taille – Pour du texte imprimé, la taille standard entre 9 et 12 points est considérée comme optimale. Une taille plus petite est acceptable quand elle est limitée aux légendes et aux notes. Il faut utiliser une taille plus importante pour les affichages de basse résolution et pour un public plus agé.

La police de caractère – Il n’y pas de différence de performance entre Serif et Sans Serif ainsi on peut choisir en fonction de critères esthétiques. Sur des affichages de faible résolution, l’antialiasing du texte permet d’améliorer sensiblement la lisibilité mais sert principalement à une amélioration esthétique de la police.

Contraste – Il faut utiliser un texte sombre sur un fond clair ou vice et versa. La performance est optimale quand les niveaux de contraste entre le texte et le fond dépassent 70%. Les combinaisons de couleurs d’avant-plan et d’arrière-plan n’affectent généralement pas la lisibilité tant qu’on observe le niveau de contraste minimum : on peut donc faire des choix esthétiques. Les arrières plans avec des patterns ou des textures peuvent dramatiquement réduire la lisibilité et devraient être évités.

Bloc de texte – Il n’y pas de différences de performance entre le texte justifié et non justifié donc on peut choisir suivant l’esthétisme. Pour un type de 9 à 12 points, une ligne longue de 8 à 13 cm est recommandée, ce qui donne environ 10 à 12 mots par ligne ou 35 à 55 caractères par ligne.

L’espacement – Pour un type de 9 à 12 points, il faut mettre un espacement entre les lignes (leading) de 1 à 4 points. Les polices de caractères avec un espacement variable sont préférées à un espacement fixe.

Lien en anglais : http://www.vanseodesign.com/web-design/legible-readable-typography/

Lisibilité

Texte traduit provenant de Universal Principles of Design

Stratification

La stratification (ou layering) implique d’organiser l’information dans des groupes connexes, apparentés et ensuite présenter ou rendre visible seulement certain groupe au même moment. Cette technique est principalement utilisée pour gérer la complexité mais permet aussi d’accentuer les relations dans les informations. Il y a deux sortes basiques de stratification : en deux dimensions et en trois dimensions.

La stratification en deux dimensions implique la séparation de l’information en strates afin qu’une seule strate soit visible à un moment donné. Les strates en deux dimensions peuvent être révéler de façon linéaire ou non linéaire. Les strates linéaires sont utiles quand l’information à un début, un milieu et une fin claire (par exemple une histoire ou une succession d’évènements) et sont révélées successivement comme les pages d’une histoire. Les strates non linéaires sont utiles pour renforcer les relations entre les strates. Les strates non linéaires peuvent être hiérarchique, parallèle ou en toile d’araignée. Les strates hiérarchiques sont utiles quand les strates ont des relations de types parent-enfants (par exemple un diagramme d’organisation). Les strates parallèles sont utiles quand l’information est basé sur l’organisation d’autres informations (ex. un dictionnaire de synonymes) et sont révélés par les correspondances de cette organisation. Les strates en toile d’araignée sont utiles quand les informations ont de nombreux types de relations entre elles (exemple de l’hypertexte) et sont révélés par n’importe quel nombre de liens avec les autres strates.

Les stratification en trois dimensions impliquent de séparer les informations en différentes strates afin que plusieurs strates puissent être visible à un moment donné. Les strates en trois dimensions sont révélées grâce à des plans d’information opaques ou transparents qui se placent l’un au dessus de l’autre. Les strates opaques sont utiles quand des informations supplémentaires à propos d’un éléments particulier doivent être affichées sans changer de contexte (par exemple les fenêtre de pop-up dans un logiciel). Les strates transparentes sont utiles quand des superpositions d’information se combinent pour illustrer des concepts ou mettre en avant des relations (exemple d’une carte météo).

Google Map

Stratification des données (rue, traffic..) sur une carte Google Map

Texte traduit provenant de Universal Principles of Design

Le cycle de vie

Tous les produits progressent séquentiellement à travers quatre étapes d’existence : introduction, croissance, maturité et déclin. Par exemple, un nouveau type de dispositif electronique est envisagé et développé; sa popularité grandit; après un certain temps, il atteint ses ventes optimales; puis finalement les ventes déclinent.

Cycle de vie

L’étape d’introduction est la naissance officielle du produit. Elle va parfois chevaucher les dernières étapes de tests du cycle de développement. L’objectif premier est de surveiller l’utilisation précoce du dispositif pour s’assurer des performances correctes en travaillant étroitement avec les clients pour régler ou corriger le design si nécessaire.

L’étape de croissance est la plus délicate, celle où la plupart des produits échouent. L’objectif premier est d’échelonner la production et la performance du produit pour répondre à la demande croissante ainsi que de fournir le niveau de support nécessaire à maintenir la croissance des clients et leur satisfaction. Il faut aussi commencer à rassembler les besoins pour la prochaine génération du produit.

L’étape de maturité est le sommet de cycle de vie du produit. Les ventes du produit ont commencé à faiblir et la compétition des concurrents est forte. L’objectif premier est d’améliorer et d’affiner le produit pour maximiser la satisfaction et le maintient de la clientèle. A ce moment, le design et le développement du prochain produit devraient être en cours.

L’étape de déclin correspond à la fin du cycle de vie. Les ventes du produit continuent de décliner et le coeur du marché est en danger. Il faut faire en sorte de minimiser les coûts de maintenance et développer des stratégies de migration des clients vers le nouveau produit. Le nouveau produit doit alors commencer à être tester.

Il faut prendre en considération le cycle de vie du produit quand on planifie et prévoit le futur. Il faut aussi noter que le cycle de développement pour le prochain produit commence lors de l’étape de croissance de la génération courante du produit.

Texte traduit provenant de Universal Principles of Design

Itération

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.

Design itératif

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é.

Une video du Paris Web 2009.

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

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 chez Dior

Vitrine minimaliste chez Dior

Vitrine chez Tati

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