2 ‐ Introduction aux concepts de design - domleg45/cls420-411-MV GitHub Wiki

Principes fondamentaux de l’interaction

Principes inspirés du livre The design of everyday things écrit par Don Norman.
Version française: Le Design des objets du quotidien.

Livre disponible en français:
PDF: https://www.renaud-bray.com/Livre_Numerique_Produit.aspx?id=3310466&def=Design+des+objets+du+quotidien(Le)%2CNORMAN%2C+DONALD+A%2C9782212438338
Papier: https://www.amazon.ca/-/fr/DON-NORMAN/dp/2212678835

1. Conception centrée utilisateur (CCU)

La conception centrée utilisateur ou CCU (HCD, Human Centered Design) est une approche qui place en premier les besoins, les capacités et le comportement de l’humain. Une conception intelligente commence par la compréhension de la psychologie et de la technologie. Elle nécessite également une bonne communication, surtout entre la machine et l’homme, par l’indication des actions possibles et de ce qui va se produire.

2. Affordances

L’affordance fait référence à la relation entre un objet physique et une personne (ou, en ce qui nous concerne, n’importe quel agent qui interagit, qu’il s’agisse d’un animal, d’un humain, d’une machine ou d’un robot). L’affordance décrit la relation entre les propriétés d’un objet et les capacités de l’agent à déterminer comment l’objet peut être utilisé.

Pour être efficaces, les affordances et les anti-affordances doivent être « découvrables » et perceptibles.





Un controlleur qui vous invite à le toucher avec votre main.





Exemple anti-affordance - Un cadre sur un mur de Steven Seagal






La perception des affordances aide les gens à découvrir les actions possibles sans qu’il soit nécessaire d’afficher des consignes d’utilisation.


Boutons HTML/CSS




3. Signifiants

Les affordances déterminent les actions possibles tandis que les signifiants indiquent à quel endroit l’action doit être réalisée. Nous avons besoin des deux termes. Les signifiants doivent communiquer correctement la finalité, la structure et le fonctionnement de l’appareil. Les signifiants sont des indications qui prennent la forme d’étiquettes ou de dessins (par exemple avec les instructions « Pousser », « Tirer » ou « Sortie » sur les portes).

Note: La langue des signifiants est importantes. Nous allons étudier l'internationalization (I18N) pour mettre les signifiants dans la langue de l'utilisateur.

Ce terme fait référence à n’importe quelle marque ou son, à n’importe quel indicateur visible qui communique le comportement correct. On trouve aussi des flèches et des dessins indiquant ce qui doit être manœuvré et dans quelle direction.

3.1 Signalisation

  • Son pour traverse piétonnière sur un coin de rue.
  • Lumière rouge pour arrêt sur une route.
  • Flèche pour glisser vers la droite ou la gauche dans un album photo sur une tablette.

3.2 i18n

L'internationalisation (aussi abrégée en "i18n") est l'ensemble des bonnes pratiques permettant à des produits ou des services d'être adaptés pour différents publics, d'une langue, d'une culture ou d'une région différente. La localisation est le processus complémentaire pour adapter un système à un public donné.


Pour résumer :

• les affordances sont les interactions possibles entre des agents (personnes, animaux, machines) et l’environnement. Certaines sont visibles, d’autres non ;
• les affordances visibles servent souvent de signifiants, mais cela peut s’avérer ambigu ;
• les signifiants sont des indications pour préciser quelles sont les actions possibles et comment les réaliser. Ils doivent être visibles, sinon ils sont inutiles.



4. Mapping (correspondances)

Le mapping est un terme technique, emprunté aux mathématiques, qui indique la relation entre deux éléments. Supposons de nombreuses lampes au plafond d’une classe ou d’un auditorium, ainsi qu’une rangée d’interrupteurs sur le mur de la pièce. Le mapping de ces interrupteurs indique quel bouton contrôle quelle lampe.

Le mapping est une notion importante pour la conception et la disposition des commandes et affichages. Lorsqu’il fait correspondre la disposition des commandes et des appareils, il est facile de comprendre comment utiliser ces derniers. Le mapping naturel, c’est-à-dire qui utilise une correspondance spatiale, aide à comprendre immédiatement. Il s’agit par exemple de presser le bouton du haut pour déplacer l’objet vers le haut.
Une manette peut avoir un mapping sur mesure en fonction de la configuration de l'utilisateur.

5. Feedbacks

Le feedback – qui communique le résultat d’une action – est un concept bien connu en science du contrôle et en théorie de l’information. Le feedback doit être pensé. Toutes les actions doivent être confirmées. Une information peu importante doit être discrète ; en revanche, lorsqu’il y a une urgence, même les signaux importants doivent avoir des priorités.

Un mauvais feedback peut être pire qu’aucun feedback, parce que c’est perturbant, désinformant et, dans de nombreux cas, irritant et déclencheur de stress.

Exemple de feedbacks:

  • Bruit d'une action dans un jeu (tir, ouverture de porte, etc.).
  • Ombre lors d'un clique de souris.
  • Lumière sur dispositif lorsque l'on appuie sur celle-ci.




    Exemple d'un objet connecté à un logiciel.

6. Contraintes

Figure Moto Lego. Le jouet est montré assemblé (A) et en pièces détachées (B). Il comporte quinze pièces si intelligemment construites que même un adulte peut les assembler. La conception exploite les contraintes pour spécifier les pièces qui conviennent. Les contraintes physiques empêchent les placements aux mauvais endroits. Les contraintes culturelles et sémantiques fournissent les indices nécessaires pour prendre des décisions. Par exemple, des contraintes culturelles dictent l’emplacement des trois lumières (rouge, bleu et jaune) et des contraintes sémantiques empêchent l’utilisateur de placer la tête en arrière sur le corps ou de mettre à l’envers les éléments marqués « Police ».

6.1 Contraintes naturelles et physiques

Le monde a beaucoup de contraintes naturelles et physiques qui restreignent le comportement possible : l’ordre dans lequel les pièces s’emboîtent tout comme les directions dans lesquelles un objet peut bouger ou être manipulé. Ceci est le savoir extérieur. Chaque objet a des caractéristiques physiques (bosses, creux, vis, parties supplémentaires) qui limitent ses interactions avec d’autres objets, ce qu’il est possible de faire avec, à quoi il peut être attaché, etc.

6.2 Contraintes artificielles et culturelles

Le savoir des contraintes culturelles et des conventions existe dans la tête. Les contraintes culturelles et les conventions sont des restrictions artificielles du comportement que l’on apprend et qui réduisent le nombre d’actions possibles, ne laissant dans la plupart des cas qu’une possibilité ou deux. Ceci est le savoir intérieur. Une fois apprises, ces contraintes s’appliquent à un grand nombre de circonstances.

6.3 Contraintes sémantiques

La sémantique étudie la signification. Les contraintes sémantiques sont celles qui se fondent sur la signification d’une situation pour contrôler l’ensemble des actions possibles. Dans le cas de la moto, il n’y a qu’un seul endroit où cela fait sens d’installer le pilote, qui doit être assis et dirigé vers l’avant. Le pare-brise est là pour protéger le visage du pilote ; il doit donc se trouver devant lui. Les contraintes sémantiques reposent sur notre connaissance de la situation, mais aussi du monde.

6.4 Contraintes logiques

La lumière bleue sur la moto Lego pose un problème particulier. De nombreuses personnes n’ont pas la connaissance qui les aiderait. Toutefois, après avoir monté toutes les autres pièces de la moto, il ne reste qu’une seule pièce et un seul endroit pour l’installer. La lumière bleue a été logiquement contrainte.


Les contraintes sont de puissantes clés qui limitent les actions possibles. Une utilisation bien pensée des contraintes dans la conception permet de déterminer le bon fonctionnement, même dans une nouvelle situation.

Si une contrainte n'est pas respectée lors d'une opération de modification ou de création, un message d'erreur approprié s'affiche. Par exemple, si une contrainte est créée pour limiter la valeur d'un champ dans une plage, un message d'erreur s'affiche si une valeur est spécifiée en dehors de la plage.

7. Modèles conceptuels

Un modèle conceptuel explique, généralement de façon très simplifiée, le fonctionnement de quelque chose. Cela n’a besoin d’être ni long, ni précis dès lors que c’est utile. Les modèles conceptuels servent à comprendre comment les éléments vont se comporter et à savoir ce qu’il faut faire quand les choses ne se passent pas comme prévu. Un bon modèle conceptuel prévoit le résultat des actions.

8. Les sept principes fondamentaux de la conception

1 Qu’est-ce que je souhaite réaliser ?
2 Quelles sont les alternatives aux séquences de l’action ?
3 Quelle est l’action que je peux réaliser ?
4 Comment dois-je m’y prendre ?
5 Que s’est-il passé ?
6 Qu’est-ce que cela signifie ?
7 Est-ce bon ? Ai-je atteint mon objectif ?

1 « Découvrabilité ». On peut déterminer les actions possibles et l’état actuel de l’appareil.

2 Feedback. Le système renvoie des informations complètes et continue sur le résultat des actions ainsi que sur son état actuel.

3 Modèle conceptuel. La conception projette toute l’information nécessaire pour la création d’un bon modèle conceptuel du système, ce qui conduit à la compréhension des commandes. Le modèle conceptuel améliore la « découvrabilité » et l’évaluation des résultats.

4 Affordances. Les affordances correctes sont présentes pour rendre possible la réalisation de l’action souhaitée.

5 Signifiants. Une utilisation correcte des signifiants améliore la « découvrabilité » et assure que l’information en retour est correctement transmise.

6 Mapping. La relation entre les commandes et les actions qu’elles déclenchent suit les principes d’un bon mapping, amélioré, si possible, par une spatialisation.

7 Contraintes. On fournit des contraintes physiques, logiques, sémantiques et culturelles pour guider les actions et faciliter l’interprétation.



Référence

Don Norman, The design of everyday things, 2013

⚠️ **GitHub.com Fallback** ⚠️