Articles taggés Principe de design

Modèle mental d'un système

Le modèle mental

4

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

3

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 contrôle - vitre électrique

Mapping

2

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

Typographie : clarté du texte

0

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

Google Map

Stratification

0

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

Cycle de vie

Le cycle de vie

0

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

Design itératif

Itération

1

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

Vitrine chez Dior

Horror Vacui

0

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

Les effets d’interférence

0

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

Representation Iconique

Représentation par icône

0

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.

Representation Iconique

Texte traduit provenant de Universal Principles of Design

Haut de page