Conducir un barco de exploración oceánica o un transbordador de exploración de Marte es un asunto serio. Se espera que el tablero sea de la más alta calidad. Dos picos de ancho, pendiente de 45 °, una pieza común de Lego "pendiente decorada de 2x2" es la interfaz de este juego, que lo une al exterior.
Estas ilustraciones icónicas de baja resolución son la herramienta perfecta para aprender los conceptos básicos del diseño de interfaces. Armemos con 52 ladrillos y veamos qué pueden enseñarnos sobre el diseño, la distribución y la organización de interfaces complejas.
Bienvenido al mundo de la experiencia personalizada de Lego.
Caos organizado
A primera vista, la variedad de imágenes puede resultar confusa, pero pronto queda claro que algunas de las interfaces se ven un poco más caóticas que otras. La mayoría de las interfaces en el mundo real son una mezcla de pantallas digitales y dispositivos de entrada analógica como interruptores y diales. Los paneles de Lego siguen el mismo principio.
Si coloca los paneles a lo largo de dos ejes, "caótico organizado" (de abajo hacia arriba) y "panel completo sin pantalla" (de izquierda a derecha), obtendrá varios grupos separados. En la parte superior izquierda, habrá pantallas combinadas con una fila de botones. En la parte superior derecha hay un pequeño grupo de paneles de interruptores altamente organizados. La parte inferior del centro está ocupada por conceptos inusuales que son difíciles de entender.
El desarrollo de una interfaz de máquina compleja es una combinación de muchos factores diferentes, desde la ergonomía hasta las consideraciones de ingeniería. Sin embargo, podemos dividir este problema en dos preguntas clave:
- ¿Cómo diferencia entre las funciones de diferentes dispositivos de entrada?
- ¿Cómo organiza múltiples dispositivos de entrada y salida para que pueda comprender su relación?
Echemos un vistazo más de cerca a las respuestas a estas preguntas en Lego.
Distinguir los dispositivos de entrada
¿Por qué 400 pilotos durante la Segunda Guerra Mundial comenzarían a quitar el tren de aterrizaje en un bombardero B-17 justo antes de aterrizar? ¿Es un error humano catastrófico o algo más fundamental?
El psicólogo Alfonis Chapanis fue el primero en sugerir que una gran cantidad de aterrizajes fallidos puede deberse a una interfaz mal diseñada. Las perillas de control del tren de aterrizaje y los flaps estaban ubicadas una al lado de la otra y tenían la misma forma. Los pilotos simplemente no tenían ninguna posibilidad.
Belly B-17 y codificación de funciones por formulario, lo que permitió evitar problemas
Su solución temporal propuesta fue pegar tiras de goma de diferentes formas a cada una de las empuñaduras, lo que te permitiría controlar la aeronave al tacto. Como resultado, nació la idea de codificar por forma, y el sistema de diferenciación todavía se sigue en el diseño de cabinas de aviones.
Comparemos las tres interfaces que se muestran a continuación para ver cómo funciona. Ignore el diseño general de los elementos; por ahora, los botones individuales son importantes para nosotros. Imagina que estás tratando de tocar a uno de ellos sin mirar. Cuando trabaje con el panel izquierdo, "Pendiente 45 2 x 2 con 12 botones", necesitará una coordinación ojo-mano precisa. En el panel derecho, Aircraft Multiple Flight Controls, se hace una clara distinción entre palancas de control (movimiento vertical de barrido en línea recta), interruptores (interruptores de palanca verticales redondos) y botones (cuadrados).
De izquierda a derecha: diferenciación terrible, mala y no mala entre los controles
Esta diferenciación sigue siendo un problema grave hasta el día de hoy. Ford retiró 13,500 crossovers en 2015Lincoln MKC, como conductores, cuando viaja a alta velocidad en la carretera, apaga constantemente el motor por error al intentar activar el modo Sport. ¿Puedes entender por qué sucedió esto?
Panel de control del Ford Lincoln MKC antes de que se moviera el botón de arranque / parada del motor.
Codificar una función por forma es un enfoque de diferenciación, pero hay otros. En nuestra vida cotidiana, solo escuchamos acerca de la codificación de colores. Pero hay otros: codificación por tamaño, textura, ubicación y método de trabajo. Los seis son nuestros aliados en el diseño de interfaces a prueba de errores.
Seis métodos básicos para codificar una función. Observe cómo algunos de los ejemplos proporcionados utilizan varias opciones de codificación al mismo tiempo.
De izquierda a derecha, de arriba a abajo: tamaño, forma, color, textura, ubicación, método de trabajo.
Se basa en métodos de codificación de tamaño, color y forma, que le permiten resolver rápidamente muchos problemas de interfaz. La textura también es ideal para trabajos a ciegas, especialmente en hilanderos poco profundos para un ajuste fino.
La codificación de diseño parece algo obvio, pero a menudo no se usa al máximo. Los dispositivos con una forma ergonómica obvia (como binoculares o un controlador de juego) pueden usar la posición natural de las manos para diferenciar entre acciones primarias y secundarias.
Finalmente, la codificación de trabajo asigna diferentes tipos de movimiento a diferentes dispositivos de entrada (como pivote o deslizamiento vertical). Este enfoque puede funcionar muy bien cuando el tipo de movimiento del dispositivo de entrada coincide con la operación que controla; por ejemplo, una grúa levanta una carga cuando se levanta una palanca.
Seis tipos diferentes de codificación en interfaces Lego (de izquierda a derecha, de arriba a abajo): tamaño, forma, color, textura, posición, método de trabajo.
La diferenciación es un buen primer paso para evitar confundir los interruptores adyacentes. Sin embargo, solo una buena organización de los dispositivos de entrada nos permitirá transmitir modelos mentales claros y precisos de interfaces al usuario.
Organización de dispositivos de entrada
Compare los siguientes tres paneles. El diseño de los controles es idéntico, pero la barra azul parece mucho más clara que la blanca. Los principios de Gestalt funcionan aquí, combinando entidades relacionadas en un área.
Diferenciación básica por el método de agrupación
Bastante simple. Pero, ¿cómo decidimos qué dispositivos de entrada agrupar?
Me gusta usar los paneles de control soviéticos como punto de partida . Estas hermosas paredes de giros y vueltas sin sentido cobran vida, organizadas en esquemas de fábrica gigantes. Sería difícil pensar en una organización de la información más literal.
Yo llamaría a estos paneles una interfaz consolidada. Todos los elementos de entrada y retroalimentación se recopilan en un panel. Este enfoqueeligió a Dyson para su automóvil . Ahora imagine el ejemplo opuesto: trasladamos todos estos interruptores y luces a las ubicaciones reales de las válvulas en la fábrica. Suena ridículo, sin embargo, estas rejillas de ventilación en el Audi TT muestran que el enfoque distribuido también puede ser excelente para los usuarios. Me escribió extensamente acerca de las interfaces distribuidos el año pasado.
Paneles de automóviles Lego: interfaz distribuida (izquierda) versus consolidada (derecha)
Volvamos a las fábricas soviéticas. Sus paneles de interfaz fueron excelentes para responder a la pregunta "¿Esta válvula permite que el agua ingrese al depósito B?" Sin embargo, eran completamente inadecuados para encontrar una respuesta a una pregunta como "¿Están todas las válvulas de agua cerradas?" o "¿dónde están todos los interruptores que necesito para prepararme para la transferencia de turno?"
Lego usa el enfoque soviético para paneles fantásticos , porque el esquema transmite perfectamente un modelo mental de cómo funciona el sistema de otra persona. Sin embargo, para el uso diario, existen otros enfoques más convenientes. Interfaces insectoide y ovni de Lego. Me pregunto de qué son exactamente responsables estos botones.
La filosofía de diseño más popular, que probablemente se puede llamar la filosofía "predeterminada", es la organización basada en la funcionalidad. Agrupe todos los dispositivos de entrada y salida para cada característica del producto. El próximo ventilador de coronavirus de Cambridge Consultants será un gran ejemplo de este enfoque; sin embargo, a menudo también lo vemos en los automóviles, cuando agrupamos conjuntos de dispositivos de entrada para el control de la ventilación y colocamos todos los controles de las luces laterales en una sola palanca.
Ventilador de coronavirus de Cambridge Consultants con una clara organización funcional.
Un método de organización de la operación coloca todos los interruptores que funcionan de cierta manera en un solo lugar. No tengo idea de para qué sirven todas estas válvulas en la foto, pero apuesto a que no todas abren cosas relacionadas. Cada vez que ve una serie de interruptores que tienen el mismo aspecto y funcionan igual, pero controlan partes dispares del sistema, se enfrenta a una forma de organización de trabajo.
La mayoría de las interfaces de hoy son esencialmente sistemas de control fly-by-wiresin embargo, históricamente, la palanca que tiraba, por ejemplo, mientras estaba en la cabina del tractor, en realidad movía los pistones hidráulicos ubicados debajo del asiento. La disolución de todos estos diferentes sistemas eléctricos, mecánicos e hidráulicos puede dañar seriamente la agrupación de interfaces y conducir a una organización tecnológica.
El equivalente moderno de este enfoque es sorprendentemente común. Es utilizado por cualquier pantalla táctil con botones ubicados a su lado. En el futuro, SpaceX puede colocar estos controles físicos justo al lado de la información que afectan, pero por ahora se sientan incómodos al lado de la pantalla, como si debieran.
Bob y Doug en la cápsula SpaceX Dragon
En Lego, nos reunimos con la organización basada en características en el Monitor con un panel de patrón de -19 °. Dos grupos explícitos de controles, quizás para el control de la temperatura y para el seguimiento de los signos vitales. No sé qué hacen todos estos interruptores en el segundo panel, sin embargo, están claramente agrupados por método de operación, no por funcionalidad.
Hay muchos paneles de Lego con la misma separación tecnológica que se ve en la cápsula SpaceX Dragon, pero me gusta imaginar cómo esta unidad policial de principios de los 90 tuvo que separar la reproducción de audio y video porque la nueva tecnología de carrete a carrete era incompatible con una línea telefónica analógica. Aquí trabaja una organización tecnológica.
De izquierda a derecha: organización por funcionalidad, método de operación, tecnología y situaciones
Hasta ahora, todos nuestros enfoques (organización por función, método de operación o tecnología) se han vinculado a las propiedades del sistema, no al usuario. Una alternativa a esto es organizar por casos de uso, agrupando por las tareas diarias del usuario.
Imagine trabajadores que llegan a una fábrica de Lego todas las mañanas para escanear personas. Agrupar los controles por tarea (preparar el automóvil, cargar la carrocería, iniciar el escaneo) implica la separación de los botones de irradiación y escáner en muchas áreas del panel. Será más difícil para una computadora, pero más conveniente para un operador. Solo el desarrollador y los usuarios decidirán qué funciona mejor para ellos.
Pero, ¿qué interfaz es mejor?
A menudo digo que no puede haber una mejor interfaz, pero hay muchos ejemplos de las peores interfaces.
Sin embargo, tengo tres ejemplos favoritos. Diseño de controles agradable y visualmente comprensible con una buena diferenciación de los dispositivos de entrada y una organización simple y clara. Con orgullo me sentaría en cualquiera de estas consolas:
