Conduire un navire d'exploration océanique ou une navette d'exploration sur Mars est une affaire sérieuse. On espère que le tableau de bord sera de la plus haute qualité. Deux pointes de large, pente de 45 °, une pièce Lego commune "pente décorée 2x2" est l'interface de cet ensemble de jeu, le reliant à l'extérieur.
Ces illustrations légendaires en basse résolution sont l'outil parfait pour apprendre les bases de la conception d'interfaces. Armons-nous de 52 briques et voyons ce qu'elles peuvent nous apprendre sur la conception, la mise en page et l'organisation d'interfaces complexes.
Bienvenue dans le monde de l'expérience personnalisée Lego.
Chaos organisé
À première vue, la variété des images peut prêter à confusion, mais il devient vite clair que certaines interfaces semblent un peu plus chaotiques que d'autres. La plupart des interfaces dans le monde réel sont un mélange d'écrans numériques et de périphériques d'entrée analogiques tels que des commutateurs et des cadrans. Les panneaux Lego suivent le même principe.
Si vous placez les panneaux le long de deux axes, «organisé de manière chaotique» (de bas en haut) et «panneau complet sans écran» (de gauche à droite), vous obtenez plusieurs clusters séparés. En haut à gauche, il y aura des écrans combinés avec une rangée de boutons. En haut à droite se trouve un petit groupe de panneaux de commutation hautement organisés. Le bas du centre est occupé par des concepts inhabituels difficiles à comprendre.
Développer une interface machine complexe consiste à jongler avec de nombreux facteurs différents, de l'ergonomie aux considérations d'ingénierie. Cependant, nous pouvons diviser ce problème en deux questions clés:
- Comment distinguer les fonctions des différents périphériques d'entrée?
- Comment organisez-vous plusieurs périphériques d'entrée et de sortie afin de comprendre leur relation?
Regardons de plus près les réponses à ces questions dans Lego.
Distinction des périphériques d'entrée
Pourquoi 400 pilotes pendant la Seconde Guerre mondiale commenceraient-ils à retirer le train d'atterrissage d'un bombardier B-17 juste avant l'atterrissage? Est-ce une erreur humaine catastrophique ou quelque chose de plus fondamental?
Le psychologue Alfonis Chapanis a été le premier à suggérer qu'un grand nombre d'atterrissages infructueux pourraient être dus à une interface mal conçue. Le train d'atterrissage et les boutons de commande des volets étaient placés côte à côte et avaient la même forme. Les pilotes n'avaient tout simplement aucune chance.
Ventre B-17 et codage de forme des fonctions qui évitaient les problèmes
Sa solution temporaire proposée était de coller des bandes de caoutchouc de différentes formes sur chacune des poignées, ce qui vous permettrait de contrôler l'avion au toucher. En conséquence, l'idée de codage par forme est née, et le système de différenciation est toujours suivi dans la conception des cabines d'avion.
Comparons les trois interfaces ci-dessous pour voir comment cela fonctionne. Ignorez la disposition générale des éléments - pour l'instant, les boutons individuels sont importants pour nous. Imaginez que vous essayez de tâtonner l'un d'eux sans regarder. Lorsque vous travaillez avec le panneau de gauche, "Slope 45 2 x 2 avec 12 boutons", vous aurez besoin d'une coordination œil-main précise. Dans le volet de droite, Aircraft Multiple Flight Controls, une distinction claire est faite entre le manche de commande (mouvement vertical de balayage en ligne droite), les interrupteurs (interrupteurs à bascule verticaux ronds) et les boutons (carrés).
De gauche à droite: différenciation terrible, mauvaise et pas mauvaise entre les contrôles
Une telle différenciation reste un problème sérieux à ce jour. Ford a rappelé 13500 multisegments en 2015Lincoln MKC, car les conducteurs, lorsqu'ils voyagent à grande vitesse sur l'autoroute, coupent constamment le moteur par erreur en essayant d'activer le mode Sport. Pouvez-vous comprendre pourquoi cela s'est produit?
Panneau de commande Ford Lincoln MKC avant que le bouton de démarrage / arrêt du moteur ne soit déplacé.
Coder une fonction par la forme est une approche de la différenciation, mais il y en a d'autres. Dans notre vie de tous les jours, nous n'entendons parler que du code couleur. Mais il y en a d'autres: l'encodage par taille, texture, emplacement et méthode de travail. Tous ces six sont nos alliés dans la conception d'interfaces à l'épreuve des erreurs.
Six méthodes de base pour coder une fonction. Remarquez comment certains des exemples fournis utilisent plusieurs options de codage en même temps.
De gauche à droite, de haut en bas: taille, forme, couleur, texture, emplacement, méthode de travail.
Il est basé sur des méthodes d'encodage de la taille, de la couleur et de la forme - ils vous permettent de résoudre rapidement de nombreux problèmes d'interface. La texture est également idéale pour le travail à l'aveugle - en particulier sur les essoreuses peu profondes pour un réglage fin.
Le codage de mise en page semble être une chose évidente, mais il n'est souvent pas utilisé au maximum. Les appareils avec une forme ergonomique évidente (comme des jumelles ou un contrôleur de jeu) peuvent utiliser la position naturelle des mains pour différencier les actions principales et secondaires.
Enfin, le codage de travail attribue différents types de mouvement à différents périphériques d'entrée (tels que le pivotement ou le glissement vertical). Cette approche peut très bien fonctionner lorsque le type de mouvement du dispositif d'entrée correspond à l'opération qu'il contrôle - par exemple, une grue soulève une charge lorsqu'un levier est soulevé.
Six types de codage différents dans les interfaces Lego (de gauche à droite, de haut en bas): taille, forme, couleur, texture, position, méthode de travail.
La différenciation est une bonne première étape pour éviter de confondre les commutateurs adjacents. Cependant, seule une bonne organisation des périphériques d'entrée nous permettra de transmettre à l'utilisateur des modèles mentaux d'interfaces clairs et précis.
Organisation des périphériques d'entrée
Comparez les trois panneaux suivants. La disposition des commandes est identique, mais la barre bleue semble beaucoup plus claire que la blanche. Les principes de la gestalt fonctionnent ici, combinant des entités liées dans un même domaine.
Différenciation de base par la méthode de regroupement
Assez simple. Mais comment décider quels périphériques d'entrée grouper?
J'aime utiliser les panneaux de contrôle soviétiques comme point de départ . Ces beaux murs de rebondissements insensés prennent vie, organisés en projets d'usine géants. Il serait difficile de penser à une organisation plus littérale de l'information.
J'appellerais ces panneaux une interface consolidée. Tous les éléments d'entrée et de rétroaction sont rassemblés sur un panneau. Cette approchea choisi Dyson pour sa voiture . Imaginez maintenant l'exemple opposé - nous avons déplacé tous ces interrupteurs et lumières vers les emplacements réels des vannes dans l'usine. Cela semble ridicule - cependant, ces grilles de ventilation sur l'Audi TT montrent que l'approche distribuée peut également être excellente pour les utilisateurs. J'ai beaucoup écrit sur les interfaces distribuées l'année dernière.
Panneaux de voiture Lego: interface distribuée (à gauche) et consolidée (à droite)
Revenons aux usines soviétiques. Leurs panneaux d'interface étaient excellents pour répondre à la question «Cette vanne permet-elle à l'eau d'entrer dans le réservoir B? Cependant, ils étaient totalement inadaptés pour trouver une réponse à une question comme "toutes les vannes d'eau sont-elles fermées?" ou "où sont tous les commutateurs dont j'ai besoin pour préparer le transfert d'équipe?"
Lego utilise l'approche soviétique pour des panneaux fantastiques , car le schéma traduit parfaitement le modèle mental du fonctionnement du système de quelqu'un d'autre. Cependant, pour une utilisation quotidienne, il existe plusieurs autres approches plus pratiques.
Interfaces Insectoïde et OVNI de Lego. Je me demande de quoi exactement ces boutons sont-ils responsables?
La philosophie de conception la plus populaire, que l'on peut probablement appeler la philosophie «par défaut», est l'organisation basée sur la fonctionnalité. Regroupez tous les périphériques d'entrée et de sortie pour chaque fonction du produit. Le prochain ventilateur à coronavirus de Cambridge Consultants sera un excellent exemple de cette approche - cependant, nous le voyons souvent aussi dans les voitures lorsque nous regroupons des ensembles de périphériques d'entrée pour contrôler la ventilation et placer toutes les lumières embarquées sur un seul levier.
Ventilateur à coronavirus de Cambridge Consultants avec une organisation fonctionnelle claire.
Une méthode d'organisation des opérations met tous les commutateurs qui fonctionnent d'une certaine manière en un seul endroit. Je n'ai aucune idée à quoi servent toutes ces vannes sur la photo, mais je parie qu'elles n'ouvrent pas toutes des choses liées. Chaque fois que vous voyez une série de commutateurs qui ont la même apparence et fonctionnent de la même manière, mais qui contrôlent des parties disparates du système, vous êtes confronté à un mode d'organisation du travail.
La plupart des interfaces aujourd'hui sont essentiellement des systèmes de contrôle à commande électriquecependant, historiquement, le levier que vous tiriez, par exemple, dans la cabine du tracteur, déplaçait en fait les pistons hydrauliques situés sous le siège. La dissolution de tous ces différents systèmes électriques, mécaniques et hydrauliques peut gravement nuire au regroupement des interfaces et conduire à une organisation technologique.
L'équivalent moderne de cette approche est étonnamment courant. Il est utilisé par n'importe quel écran tactile avec des boutons situés à côté. À l' avenir, SpaceX peut placer ces commandes physiques juste à côté des informations qu'elles affectent, mais pour l'instant, elles se trouvent maladroitement à côté de l'écran, comme si elles le devraient.
Bob et Doug dans la capsule SpaceX Dragon
En Lego, nous rencontrons l'organisation basée sur les fonctionnalités dans le panneau Moniteur avec motif -19 °. Deux groupes de contrôles explicites - peut-être pour le contrôle de la température et pour le suivi des signes vitaux. Je ne sais pas ce que font tous ces commutateurs dans le deuxième panneau, mais ils sont clairement regroupés par méthode de fonctionnement et non par fonctionnalité.
Il existe de nombreux panneaux Lego avec la même séparation technologique que la capsule SpaceX Dragon, mais j'aime imaginer comment cette unité de police du début des années 90 a dû séparer la lecture audio et vidéo car la nouvelle technologie bobine à bobine était incompatible avec une ligne téléphonique analogique. Une organisation technologique travaille ici.
De gauche à droite: organisation par fonctionnalité, mode de fonctionnement, technologie et situations
Jusqu'à présent, toutes nos approches - organisation par fonction, mode de fonctionnement ou technologie - ont été liées aux propriétés du système, et non à l'utilisateur. Une alternative à cela consiste à organiser par cas d'utilisation - regroupement par tâches quotidiennes de l'utilisateur.
Imaginez des ouvriers arrivant chaque matin dans une usine Lego pour scanner les gens. Le regroupement des commandes par tâche (préparation de la voiture, chargement de la carrosserie, démarrage du scan) implique la séparation des boutons d'irradiation et du scanner dans de nombreuses zones du panneau. Ce sera plus difficile pour un ordinateur, mais plus pratique pour un opérateur. Seuls le développeur et les utilisateurs décideront de ce qui fonctionne le mieux pour eux.
Mais quelle interface est la meilleure?
Je dis souvent qu'il ne peut pas y avoir de meilleure interface, mais il existe de nombreux exemples des pires interfaces.
Cependant, j'ai trois exemples préférés. Disposition des commandes agréable et visuellement compréhensible avec une bonne différenciation des périphériques d'entrée et une organisation simple et claire. Je serais fier de m'asseoir sur l'une de ces consoles:
