Dirigir um navio de exploração do oceano ou um ônibus espacial de exploração de Marte é um negócio sério. Espera-se que o painel seja da mais alta qualidade. Duas pontas de largura, inclinação de 45 °, uma peça de Lego comum "inclinação decorada 2x2" é a interface deste conjunto de jogos, ligando-o ao exterior.
Essa obra de arte icônica e de baixa resolução é a ferramenta perfeita para aprender os conceitos básicos de design de interface. Vamos nos armar com 52 tijolos e ver o que eles podem nos ensinar sobre design, layout e organização de interfaces complexas.
Bem-vindo ao mundo da experiência personalizada Lego.
Caos organizado
À primeira vista, a variedade de imagens pode ser confusa, mas logo fica claro que algumas das interfaces parecem um pouco mais caóticas do que outras. A maioria das interfaces do mundo real é uma mistura de telas digitais e dispositivos de entrada analógica, como interruptores e dials. Os painéis Lego seguem o mesmo princípio.
Se você colocar os painéis ao longo de dois eixos, "caótico-organizado" (de baixo para cima) e "painel completo sem tela" (da esquerda para a direita), você obterá vários clusters separados. No canto superior esquerdo, haverá telas combinadas com uma linha de botões. No canto superior direito está um pequeno cluster de painéis de switch altamente organizados. A parte inferior do centro está ocupada com conceitos incomuns que são difíceis de entender.
O desenvolvimento de uma interface de máquina complexa é um malabarismo de muitos fatores diferentes, da ergonomia às considerações de engenharia. No entanto, podemos dividir esse problema em duas questões principais:
- Como você diferencia as funções de diferentes dispositivos de entrada?
- Como você organiza vários dispositivos de entrada e saída para que possa entender sua relação?
Vamos examinar mais de perto as respostas a essas perguntas no Lego.
Dispositivos de entrada distintos
Por que 400 pilotos durante a Segunda Guerra Mundial começaram a remover o trem de pouso de um bombardeiro B-17 pouco antes de pousar? É um erro humano catastrófico ou algo mais fundamental?
O psicólogo Alfonis Chapanis foi o primeiro a sugerir que um grande número de pousos malsucedidos pode ser devido a uma interface mal projetada. O trem de pouso e os botões de controle dos flaps estavam localizados lado a lado e tinham o mesmo formato. Os pilotos simplesmente não tiveram chance.
Belly B-17 e codificação de funções por forma, o que possibilitou evitar problemas
Sua solução temporária proposta era colar tiras de borracha de formatos diferentes em cada uma das alças, o que permitiria controlar a aeronave pelo toque. Como resultado, nasceu a ideia de codificação por forma, e o sistema de diferenciação ainda é seguido no projeto de cabines de aeronaves.
Vamos comparar as três interfaces mostradas abaixo para ver como isso funciona. Ignore o layout geral dos elementos - por enquanto, os botões individuais são importantes para nós. Imagine que você está tentando apalpar um deles sem olhar. Ao trabalhar com o painel esquerdo, "Slope 45 2 x 2 com 12 botões", você precisará de uma coordenação olho-mão precisa. No painel direito, Aircraft Multiple Flight Controls, uma distinção clara é feita entre manípulos de controle (movimento vertical de varredura em uma linha reta), interruptores (interruptores alternativos verticais redondos) e botões (quadrados).
Da esquerda para a direita: diferenciação terrível, ruim e nada ruim entre os controles
Essa diferenciação continua sendo um problema sério até hoje. Ford recordou 13.500 crossovers em 2015Lincoln MKC, como motoristas, ao viajar em alta velocidade na rodovia, constantemente desligam o motor por engano ao tentar ativar o modo Sport. Você pode entender por que isso aconteceu?
Painel de controle do Ford Lincoln MKC antes de o botão de partida / parada do motor ser movido.
Codificar uma função pela forma é uma abordagem para a diferenciação, mas existem outras. Em nossa vida cotidiana, ouvimos apenas sobre códigos de cores. Mas há outras: codificação por tamanho, textura, localização e método de trabalho. Todos esses seis são nossos aliados no design de interfaces à prova de erros.
Seis métodos básicos para codificar uma função. Observe como alguns dos exemplos fornecidos usam várias opções de codificação ao mesmo tempo.
Da esquerda para a direita, de cima para baixo: tamanho, forma, cor, textura, localização, método de trabalho.
É baseado em métodos de codificação de tamanho, cor e forma - eles permitem que você resolva rapidamente muitos problemas de interface. A textura também é ótima para trabalhos cegos - especialmente em spinners rasos para ajuste fino.
A codificação do layout parece ser uma coisa óbvia, mas geralmente não é usada com força total. Dispositivos com formato ergonômico óbvio (como binóculos ou um controlador de jogo) podem usar a posição natural das mãos para diferenciar entre ações primárias e secundárias.
Finalmente, a codificação de trabalho atribui diferentes tipos de movimento a diferentes dispositivos de entrada (como rotação ou deslizamento vertical). Essa abordagem pode funcionar muito bem quando o tipo de movimento do dispositivo de entrada corresponde à operação que ele controla - por exemplo, um guindaste levanta uma carga quando uma alavanca é levantada.
Seis tipos diferentes de codificação em interfaces Lego (da esquerda para a direita, de cima para baixo): tamanho, forma, cor, textura, posição, método de trabalho.
A diferenciação é um bom primeiro passo para evitar confundir switches adjacentes. No entanto, apenas uma boa organização dos dispositivos de entrada nos permitirá transmitir modelos mentais de interfaces claros e precisos ao usuário.
Organização dos dispositivos de entrada
Compare os três painéis a seguir. O layout dos controles é idêntico, mas a barra azul parece muito mais clara do que a branca. Os princípios da Gestalt funcionam aqui, combinando entidades relacionadas em uma área.
Diferenciação básica pelo método de agrupamento
Muito simples. Mas como decidimos quais dispositivos de entrada agrupar?
Gosto de usar os painéis de controle soviéticos como ponto de partida . Essas belas paredes de voltas e reviravoltas sem sentido ganham vida, organizadas em esquemas de fábricas gigantes. Seria difícil pensar em uma organização mais literal das informações.
Eu chamaria esses painéis de interface consolidada. Todos os elementos de entrada e feedback são coletados em um painel. Esta abordagemescolheu Dyson para seu carro . Agora imagine o exemplo oposto - movemos todos esses interruptores e luzes para os locais reais das válvulas na fábrica. Parece ridículo - no entanto, essas grades de ventilação no Audi TT mostram que a abordagem distribuída também pode ser uma ótima opção para os usuários. I escreveu extensivamente sobre interfaces distribuídos no ano passado.
Painéis de carros Lego: interface distribuída (esquerda) versus consolidada (direita)
Voltemos às fábricas soviéticas. Seus painéis de interface foram excelentes para responder à pergunta "Esta válvula permite que a água entre no reservatório B?" No entanto, eles eram completamente inadequados para encontrar uma resposta a uma pergunta como "todas as válvulas de água estão fechadas?" ou "onde estão todos os interruptores que preciso preparar para a transmissão de mudança?"
A Lego usa a abordagem soviética para painéis fantásticos , porque o esquema transmite perfeitamente um modelo mental de como o sistema de outra pessoa funciona. No entanto, para o uso diário, existem várias outras abordagens mais convenientes. Interfaces insectóide e OVNI da Lego. Eu me pergunto o que exatamente esses botões são responsáveis?
A filosofia de design mais popular, que provavelmente pode ser chamada de filosofia “padrão”, é a organização baseada na funcionalidade. Agrupe todos os dispositivos de entrada e saída para cada recurso do produto. O próximo ventilador de coronavírus da Cambridge Consultants será um grande exemplo dessa abordagem - no entanto, frequentemente vemos isso também em carros, ao agrupar conjuntos de dispositivos de entrada para controle de ventilação e colocar todos os controles nas luzes laterais em uma única alavanca.
Ventilador Coronavirus da Cambridge Consultants com uma organização funcional clara.
Um método de organização operacional coloca todos os interruptores que funcionam de certa maneira em um só lugar. Não tenho ideia para que servem todas essas válvulas na foto, mas aposto que nem todas abrem coisas relacionadas. Cada vez que você vê uma série de interruptores que parecem e funcionam da mesma forma, mas controlam partes díspares do sistema, você se depara com uma forma de organização de trabalho.
A maioria das interfaces hoje são essencialmente sistemas de controle fly-by-wireentretanto, historicamente, a alavanca que você puxou, por exemplo, enquanto estava na cabine do trator, na verdade moveu os pistões hidráulicos localizados sob o assento. Dissolver todos esses diferentes sistemas elétricos, mecânicos e hidráulicos pode prejudicar seriamente o agrupamento de interfaces e levar a uma organização de tecnologia.
O equivalente moderno dessa abordagem é surpreendentemente comum. Ele é usado por qualquer tela de toque com botões localizados ao lado dele. No futuro, a SpaceX pode colocar esses controles físicos ao lado das informações que afetam, mas por enquanto eles ficam desajeitadamente próximos à tela, como se devessem.
Bob e Doug na cápsula SpaceX Dragon
No Lego, nos encontramos com a organização baseada em recursos no Monitor com painel de padrão de -19 °. Dois grupos explícitos de controles - talvez para controle de temperatura e rastreamento de sinais vitais. Eu não sei o que todas essas opções no segundo painel fazem, no entanto, elas estão claramente agrupadas por método de operação, não por funcionalidade.
Existem muitos painéis Lego por aí com essa separação de tecnologia vista na cápsula SpaceX Dragon, mas eu gosto de imaginar como essa unidade policial do início dos anos 90 teve que separar a reprodução de áudio e vídeo porque a nova tecnologia de bobina a bobina era incompatível com uma linha telefônica analógica. Uma organização de tecnologia trabalha aqui.
Da esquerda para a direita: Organização por Funcionalidade, Método de Operação, Tecnologia e Situações
Até agora, todas as nossas abordagens - organização por função, método de operação ou tecnologia - foram vinculadas às propriedades do sistema, não ao usuário. Uma alternativa para isso é organizar por casos de uso - agrupamento pelas tarefas diárias do usuário.
Imagine trabalhadores chegando a uma fábrica de Lego todas as manhãs para escanear pessoas. O agrupamento de controles por tarefa (preparar o carro, carregar a carroceria, iniciar a varredura) implica na separação dos botões de irradiação e do scanner em várias áreas do painel. Será mais difícil para um computador, mas mais conveniente para um operador. Apenas o desenvolvedor e os usuários decidirão o que funciona melhor para eles.
Mas qual interface é melhor?
Costumo dizer que não pode haver uma interface melhor, mas existem muitos exemplos das piores interfaces.
No entanto, tenho três exemplos favoritos. Layout de controles agradável e visualmente compreensível com boa diferenciação de dispositivos de entrada e organização simples e clara. Eu me sentaria orgulhosamente em qualquer um destes consoles:
