Articles taggés Utilisabilité

La charge de la performance

2

Plus l’effort pour accomplir la tâche est grand, moins la tâche a une chance d’être accomplie avec succès.

La charge de la performance est le degré d’activité mentale et physique requis pour accomplir une tâche. Si la charge est importante, le temps et les erreurs de la performance augmentent et la probabilité d’accomplir la tâche avec succès diminue. La charge de la performance se divise en deux types : la charge cognitive et la charge cinétique.

La charge cognitive est la quantité d’activité mentale – perception, mémoire, solution de problème – requise pour accomplir la tâche. Par exemple, les premiers systèmes informatiques demandaient aux utilisateurs de se souvenir d’un grand nombre de commandes et de les entrer dans le système de façon spécifique. Le nombre de commandes qui devaient être mémorisées était une charge cognitive pour la tâche. L’apparition des interfaces graphiques a permis aux utilisateurs de parcourir et sélectionner les commandes grâce aux menus plutôt que de s’en rappeler de mémoire. Cette réduction de la charge cognitive a grandement réduit l’effort mental pour utiliser les ordinateurs. Ces derniers ont ainsi pu devenir un marché de masse. Les stratégies générales pour réduire la charge cognitive incluent minimiser le bruit visuel, découper l’information qui doit être apprise, utiliser des aides mémoires ou encore automatiser les calculs et les tâches demandant beaucoup de mémorisation.

La charge cinétique est le degré d’activité physique – nombre de mouvements ou quantité de force – requis pour accomplir la tâche. Par exemple, le télégraphe permettait aux gens de communiquer des lettres à travers une série de frappes sur une armature métallique. Le nombre de frappes pour communiquer un message était la charge cinétique de la tâche. Samuel Morse a créé le code Morse pour minimiser la charge kinétique en assignant les codes les plus simples aux lettres les plus fréquentes. Cette approche a permis de réduire les temps de transmission et le taux d’erreur. Les stratégies générales pour réduire la charge cinétique incluent réduire le nombre d’étapes requises pour finaliser la tâche, minimiser la gamme de mouvements et les trajets ou encore optimiser les tâches répétitives.

De nombreux exemples peuvent se retrouver dans notre vie de tous les jours : du favoris de votre navigateur permettant d’éviter de vous souvenir ou de noter les sites qui vous intéressent (diminution de la charge cognitive) à la clé de voiture électronique (diminution de la charge cinétique) en passant par le code de barre qui permet d’éviter l’étiquetage manuel, d’entrer le prix à la main pour la caissière et l’inventaire automatique.

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

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

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

Différente technique de mise en évidence

La mise en évidence

0

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.

Différente technique de mise en évidence

Texte traduit provenant de Universal Principles of Design

Organigramme d'une famille royale

hierarchie

0

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

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.

Poupées russes

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.

Sommaire d'un livre

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

Compromis Flexibilité - Utilisability

Le compromis Flexibilité-Utilisabilité

0

Le compromis Flexibilité-Utilisabilité est lié à une maxime bien connue : celui qui sait tout faire, ne sait rien faire.

Un design flexible propose plus de fonctionnalités qu’un design spécialisé, mais il rend ses fonctions moins efficaces. Un design flexible est par définition plus complexe et le résultat est souvent plus difficile à utiliser. Par exemple, le couteau suisse à de nombreux outils attachés qui augmentent sa flexibilité mais chaque élément est plus difficile à utiliser que l’outil unique correspondant. Bien sur il offre une flexibilité que ne peut atteindre aucun des outils individuels (à part peut être la pelle chinoise). Le compromis Flexibilité-Utilisabilité existe car prendre en charge la flexibilité implique de satisfaire un large ensemble de besoins ce qui signifie plus de compromis et de complexité dans le design.

Compromis Flexibilité - Utilisability

L’hypothèse générale est que le design devrait être toujours aussi flexible que possible. Cependant la flexibilité à un cout réel en terme de complexité, utilisabilité, temps et de budget. Généralement elle est uniquement rentable quand les futurs utilisateurs ne peuvent anticiper les besoins possibles. Par exemple, les ordinateurs sont des dispositifs flexibles qui sont difficiles à utiliser, plus difficiles par exemple qu’une console de jeux. Cependant le principal avantage d’un ordinateur c’est qu’il répond à l’incertitude et permet une grande liberté dans son utilisation. On achète un ordinateur pour répondre à une variété de besoin, la plupart n’étant pas connu au moment de l’achat.

La capacité des clients d’anticiper les futurs besoins d’un produit est une des principales indications sur leur intérêt entre la flexibilité et l’utilisabilité. Quand le public sait clairement identifier ses besoins, des designs spécialisés qui visent spécifiquement ces besoins devront être favorisés. Quand les clients ne savent pas définir précisément leurs besoins, des designs plus flexibles permettant de s’adapter devront être favorisés. Le niveau de connaissance des besoins venant à augmenter, il est alors possible de spécialiser petit à petit le design. Ce changement de la flexibilité vers la spécialisation est généralement observé et est à prendre en compte dans le cycle de vie des produits.

Texte traduit provenant de Universal Principles of Design

La loi de Fitts

3

Selon la loi de Fitts, le temps requis pour atteindre une cible est fonction de la distance de cette cible et de sa taille. Plus la cible est éloignée et petite, plus c’est long de bouger d’une position de repos vers cette cible. A cela s’ajoute le fait que le plus mouvement doit être rapide et la cible petite, plus le taux d’erreur augmente à cause du compromis entre la précision et la rapidité.

La loi de Fitts s’applique au design des contrôles, de leur disposition ou encore n’importe quel dispositif qui facilite le mouvement vers une destination.

Elle s’applique plus particulièrement au mouvement de type pointage (et non au mouvement plus continu) par exemple le temps nécessaire pour atteindre la pédale de frein dans un véhicule et bien sur l’utilisation du pointeur dans une interface graphique.Un mouvement de pointage consiste typiquement en un large et rapide mouvement vers la cible (mouvement balistique) suivi par de fins ajustements (mouvement de guidage) sur une position stable au dessus de la cible (acquisition). Le mouvement de guidage est généralement responsable de la grande partie du temps nécessaire et de la plupart des erreurs.

Comprendre cette loi permet de réduire les erreurs et d’augmenter l’utilisabilité d’un design. Par exemple, dans le cadre d’une interface graphique, contraindre le mouvement du pointeur permet d’augmenter fortement la précision avec laquelle les éléments peuvent être pointés. Ce type de contrainte est typiquement appliqué aux contrôles tels que les barres d’ascenseur ou encore les cotés de l’écran. Placer un bouton sur le coté d’un écran permet de faciliter son ciblage.

Il faut prendre en considération la loi de Fitts dans le design de système nécessitant un pointage. L’idée est de rendre les contrôles proches et assez large surtout quand les mouvements doivent être rapide et que la précision est importante. A l’inverse, on peut mettre les contrôles qui ne doivent pas être utilisés fréquemment distants et petits. Enfin, on peut utiliser les contraintes pour améliorer la performance et réduire les erreurs.

Des liens pour compléter l’information :
http://particletree.com/features/visualizing-fittss-law/
http://pii.tls.cena.fr/docs/NR97-621.pdf

Texte traduit provenant de Universal Principles of Design

Le point d’entrée

0

Nous jugeons les livres par leur couverture, les sites internet par leur page d’accueil et les bâtiments par leur hall d’entrée. Cette première impression influence fortement notre attitude et nos perceptions pour reste de l’interaction. Cette impression est largement produite par le point d’entrée d’un système ou d’un environnement.
Par exemple, arriver sur un site avec un long chargement d’une image d’accueil, puis sur une page principale lente avec de nombreuses pubs ne vas pas aider l’utilisateur à vouloir découvrir le site.
Les éléments clés d’un bon point d’entrée dans un design sont des barrières minimales, des points de perspective et des leurres progressifs.

Des barrières minimales.
Un point d’entrée ne devrait pas être encombré par des barrières. Les exemples de barrières sont des écrans surchargés avec de nombreux éléments non nécessaires, les vendeurs restant sur le pas de la porte d’une boutique ou tout simplement toute chose qui empêche de rentrer et de se déplacer dans un point d’entrée.

Points de perspective.
Un point d’entrée doit permettre au visiteur de s’orienter et de rapidement voir les différentes possibilités. Les points de perspective incluent les entrées de magasin qui offrent une vision claire de son agencement ou une page internet qui fournie de bons repères d’orientation et options de navigation. Les points de perspective doivent offrir suffisamment de temps et d’espace pour le visiteur pour considérer les différentes options avec une distraction et un dérangement minimal.

Leurres progressifs.
Les leurres devraient être utilisé pour attirer les visiteurs à travers le point d’entrée. Cela peut être par exemple les titres des articles d’un journal ou des offres commerciales visibles.

Il faut donc maximiser l’efficacité d’un point d’entrée en diminuant les barrières, en mettant en place des points de perspective et en utilisant des leurres progressifs. Il faut aussi offrir assez de temps et d’espace pour que le visiteur puisse évaluer ces opportunités d’interaction à partir du point d’entrée.

Point d'entrée du New York Times

Point d'entrée du New York Times

Texte traduit provenant de Universal Principles of Design

La consistance

1

L’utilisabilité d’un système est améliorée quand les différentes parties sont exprimées de façon similaire. Les systèmes consistants sont plus facilement utilisables et voient leur apprentissage facilité. Elle permet aux utilisateurs de transférer efficacement leur connaissance dans de nouveaux contextes, d’apprendre rapidement et de se concentrer sur les éléments importants de la tâche.
Il y a quatre genres de consistance: esthétique, fonctionnelle, interne et externe.
La consistance esthétique concerne le style et l’apparence. Cela permet d’améliorer la reconnaissance, communiquer l’appartenance et mettre en place des attentes émotionnelles. Le meilleur exemple est l’utilisation du logo courant dans les grandes marques.
La consistance fonctionnelle concerne le sens et les actions (par exemple le feu de circulation orange avant de devenir rouge). Cela facilite l’utilisabilité et l’apprentissage en permettant de réutiliser des connaissances acquises par exemple tout le monde sait rapidement utiliser un magnétoscope ou un lecteur de MP3 grâce aux symboles communs (jouer, arrêter, avancer, reculer).
La consistance interne concerne les éléments entre eux dans un système. Les éléments groupés de façon logique devraient être esthétiquement et fonctionnellement constant entre eux. C’est un indicateur que le système a été designé et pas assemblé pêle-mêle.
La consistance externe concerne différents éléments d’un même environnement qui étend la consistance interne à travers de multiple systèmes indépendants. On peut prendre en exemple les barres de menus des systèmes d’opérations (Windows et surtout Mac OSX).

MacOS et consistance de l'interface

MacOS et consistance de l'interface

Enfin, quand un design standard existe, il est préférable de l’utiliser.

Texte traduit provenant de Universal Principles of Design

Yannick Grenzinger

Haut de page