La experiencia de usuario de los paneles de interfaz de LEGO

Agosto de 2020

Pilotar un barco de exploración oceánica o una lanzadera de investigación marciana es un asunto serio. Esperemos que el panel de control esté a la altura. Con dos pines de ancho y angulados a 45°, la ubicua “pendiente decorada de 2×2” es la interfaz de un minifigura de LEGO al mundo.

Estos diseños icónicos de baja resolución son la herramienta perfecta para aprender los conceptos básicos de diseño de interfaces físicas. Armados con 52 ladrillos diferentes, veamos qué podemos aprender sobre el diseño, la disposición y la organización de interfaces complejas.

Bienvenidos al mundo del diseño de UX de LEGO.

Caos organizado

A simple vista, la variedad de estos diseños puede ser abrumadora, pero está claro que algunas de estas interfaces parecen mucho más caóticas que otras. La mayoría de las interfaces en nuestro mundo contienen una combinación de pantallas digitales y entradas analógicas como interruptores y diales. Estos paneles de LEGO no son diferentes.

Al trazar los paneles a lo largo de estos dos ejes, se revelan varios grupos diferentes. Las pantallas con una fila de botones continuos se encuentran en la parte superior izquierda. Un pequeño grupo de paneles de interruptores muy organizados se encuentra en el extremo derecho. El centro inferior está ocupado por algunos conceptos salvajes que son difíciles de entender, incluso después de varias miradas.

Posicionamiento de diseño con LEGO, en LEGO

Diseñar una interfaz de máquina compleja es un acto de equilibrio de muchos factores diferentes, desde la ergonomía hasta la ingeniería. Pero podemos desglosar el problema en dos preguntas clave:

¿Cómo podemos diferenciar entre la función de diferentes entradas?
¿Cómo podemos organizar las muchas entradas y salidas para entender cómo se relacionan entre sí?

Veamos más a fondo cómo abordar estos dos desafíos en LEGO.

Diferenciación de entradas

¿Qué podría hacer que 400 pilotos de la Segunda Guerra Mundial subieran el tren de aterrizaje de su bombardero B-17 justo antes de aterrizar? ¿Error catastrófico del piloto, o algo más fundamental?

Fue el psicólogo Alphonse Chapanis quien sugirió por primera vez que la alta tasa de aterrizajes forzosos podría ser culpa de un diseño de interfaz deficiente. Los botones de control adyacentes del tren de aterrizaje y los flaps tenían la misma forma. Los pilotos nunca tuvieron oportunidad.

Aterrizaje forzoso del B-17, y el código de forma que ayudó a erradicar el problema. Fuente: Wikipedia

Su solución temporal fue pegar tiras de goma de formas diferentes a cada interruptor, permitiendo así la operación a ciegas por el tacto solo. Esto dio origen a la idea de código de forma y un sistema de diferenciación que todavía se sigue en las cabinas de aviones hoy en día.

Podemos comparar las tres interfaces a continuación para ver esto en acción. Ignora el diseño general, lo que importa aquí son las diferencias entre los interruptores individuales. Imagina tratar de encontrar uno de estos botones sin mirar. El panel izquierdo (“Pendiente 45 2 x 2 con 12 botones”) requeriría una cuidadosa coordinación mano-ojo. El panel derecho (“Controles de vuelo múltiples de aeronaves”) claramente diferencia entre el acelerador (gran movimiento vertical lineal), interruptores de palanca (acción de clic vertical redondo) y los botones de presión (botón cuadrado).

LEAR  Hombres armados matan a un contraalmirante de la marina en México, uno de los oficiales de más alto rango asesinado en una década.

De izquierda a derecha: pésima, mala y mejor diferenciación de entradas

La diferenciación como esta es aún un problema muy real hoy en día. En 2015, Ford llamó a revisión 13,500 Lincoln SUV porque los conductores que iban a toda velocidad por la autopista estaban apagando el motor por error al intentar activar el modo deportivo. Mira si puedes ver por qué:

Lincoln MKC de Ford antes de que el botón de encendido/apagado del motor fuera movido. Fuente: CNN

El código de forma es un enfoque para la diferenciación, pero hay muchos otros. La codificación por colores es quizás el único que ha entrado en nuestro vocabulario cotidiano, pero podemos añadirle otros cuatro: tamaño, textura, posición y codificación de operación. Juntos, estos seis son nuestros aliados en el diseño de interfaces a prueba de errores.

Los 6 codigos básicos. Observa que muchos de estos ejemplos combinan múltiples codificaciones en uno solo.

El tamaño, la forma y la codificación por colores son los fundamentos: soluciones rápidas que pueden solucionar muchos problemas de interfaz. La textura también es un gran diferenciador para la operación a ciegas, especialmente en diales pequeños que requieren un control preciso.

La codificación de posición es aparentemente sencilla pero a menudo subutilizada. Los productos con una posición ergonómica por defecto clara (como unos binoculares o una consola de videojuegos) pueden aprovechar la posición natural de la mano para diferenciar entre acciones principales y secundarias.

Finalmente, la codificación de operación asigna distintos tipos de movimientos (como un giro o un deslizamiento vertical) a diferentes entradas. Esto puede ser inmensamente poderoso cuando el movimiento del interruptor refuerza la operación detrás de él, por ejemplo, una palanca de grúa que levanta la grúa cuando se levanta la palanca.

Los seis tipos de codificación en uso en las interfaces de LEGO: tamaño, forma, color, textura, posición, operación

La diferenciación es un buen primer paso para evitar la confusión entre interruptores adyacentes. Pero es solo con la organización que podemos crear un modelo mental claro y preciso de la interfaz para el usuario.

Organización de entradas

Compara los tres paneles a continuación. Diseños idénticos, pero el azul es mucho más claro que el blanco. Aquí entran en juego los principios de la Gestalt, identificando elementos relacionados con una región común.

LEAR  IA en los servicios sociales: racionalización del apoyo a las poblaciones vulnerables

Diferenciación básica por agrupación

Fácil. Pero, ¿cómo vas a decidir qué entradas agrupar juntas?

Me gusta utilizar los paneles de control soviéticos como punto de partida. Estas hermosas paredes de diales y palancas sin sentido cobran vida cuando se organizan en un esquema de fábrica gigante. Sería difícil encontrar una organización de la información más literal.

Paneles de control soviéticos en acción. Fuente: Present and Correct

Estos paneles son lo que yo llamaría una interfaz consolidada. Cada entrada y retroalimentación ha sido trasladada al mismo panel. Este es el enfoque que Dyson tomó con su coche. Ahora imagina lo opuesto, trasladar todas esas luces e interruptores a la ubicación real de esa válvula en la fábrica. Suena absurdo, pero estas rejillas de aire en el Audi TT muestran que este enfoque distribuido también puede ser una gran victoria para la experiencia del usuario. Escribí mucho más sobre estas interfaces distribuidas el año pasado.

Panel de instrumentos de vehículo LEGO: distribuido (izquierda) vs. consolidado (derecha)

Volviendo a las fábricas soviéticas. Esos paneles de interfaz eran ideales para responder a la pregunta “¿esta válvula deja entrar agua en el tanque Б?”. Pero son muy deficientes para responder a “¿están todas las válvulas de agua cerradas?” o “¿dónde están todos los interruptores que necesito para prepararme para el cambio de turno?”.

LEGO utiliza el enfoque de esquema soviético para sus diseños orientados a la fantasía, porque los esquemas son excelentes para proporcionar un modelo mental de los mecanismos internos de un sistema ajeno. Sin embargo, para el uso diario, hay algunos otros enfoques que funcionan mejor.

Interfaz de Insectoid y OVNI LEGO. Me pregunto qué hacen realmente estos botones.

La organización basada en características es la más común, quizás incluso la filosofía de diseño “predeterminada”. Agrupe todas las entradas y salidas para cada característica del producto. Este ventilador de COVID-19 de Cambridge Consultants es un maravilloso ejemplo, pero también lo vemos mucho en los coches, con un grupo de interruptores para el control del flujo de aire y todas las luces en un solo mando.

Ventilador de COVID-19 de Cambridge Consultants con organización clara basada en características. Fuente: Cambridge Consultants

Organizar por operación significa poner todos los interruptores que funcionan de cierta manera en el mismo lugar. No tengo idea de lo que hacen todas las válvulas en la imagen a continuación, pero apuesto a que no abren cosas relacionadas entre sí. Cada vez que veas una fila de interruptores que se ven y funcionan de la misma manera, pero controlan partes dispares del sistema, te has encontrado con la organización por operación.

LEAR  Larry David y Jamie Lee Curtis rinden homenaje

Fuente: Twitter @aglushko

Hoy en día la mayoría de las interfaces son efectivamente controladas por cable, pero históricamente, las palancas que se tiraban, digamos, en una cabina de tractor movían literalmente los pistones hidráulicos debajo del asiento a una nueva posición. Enrutando todos estos diferentes sistemas eléctricos, mecánicos e hidráulicos de manera eficiente puede comprometer seriamente su agrupación de interfaz, llevando a la organización por tecnología.

El equivalente moderno de esto es sorprendentemente común. Cualquier pantalla táctil con botones a los lados demuestra esta división basada en tecnología. En un mundo futuro, SpaceX podría incrustar estos controles físicos justo dentro de la pantalla al lado de la información que afectan, pero por ahora se sientan incómodamente a un lado como si nada estuviera mal.

Bob y Doug en la cápsula Dragon de SpaceX. Fuente: SpaceX

En LEGO encontramos la organización basada en características en el “Monitor con patrón de -19°”. Dos grupos claros, quizás uno para el control de la temperatura y otro para la monitorización de signos vitales. En el segundo panel a continuación, no sé qué hacen todos esos interruptores, pero parecen estar agrupados por su operación, no por lo que operarán.

Hay muchos paneles de LEGO con una división tecnológica como la cápsula Dragon de SpaceX, pero me gusta imaginar que esta unidad de control policial de principios de los 90 se vio obligada a dividir el audio y la reproducción de video porque la nueva tecnología de bobina de cinta no era compatible con el sistema más antiguo de línea telefónica analógica. Esto es la organización por tecnología en acción.

De Iquierda a Derecha: organización por características, operación, tecnología y caso de uso

Todo lo que hemos abordado hasta ahora: organización por características, operación o tecnología, se basa en propiedades del sistema, no del usuario. La organización por caso de uso es el antídoto, un agrupamiento basado en las rutinas diarias y tareas del usuario.

Imagina llegar a trabajar cada día a la fábrica de escáner corporal de LEGO. Agrupar los interruptores por tarea (preparar la máquina, cargar el cuerpo, procesar el escaneo…) significaría dividir los botones de radiación y escáner en muchas regiones diferentes. Más complejo para la computadora, pero más simplificado para el operador. Como diseñador, solo tú y tus usuarios serán los jueces de lo que funcione mejor.

Pero George, ¿cuál es la mejor interfaz?

A menudo digo que no hay tal cosa como la mejor interfaz, pero hay muchas ejemplos de las peores interfaces.

Sin embargo, tengo tres favoritos. Diseños visualmente hermosos, con entradas claramente diferenciadas y una organización simple y limpia. Estaría orgulloso de sentarme detrás del panel de control de cualquiera de ellos.

Paneles de interfaz hermosos