No mundo, existem muitos artigos sobre como fazer a interface. Todos eles são preenchidos com dicas úteis para várias situações: aqui você precisa de um botão vermelho, deve haver uma animação assim e assim por diante. Todas as situações não podem ser descritas; há simplesmente um número infinito delas. No entanto, se você entender os princípios básicos do design de interface, essas dicas não serão mais necessárias. O principal é entender por que essas dicas funcionam e como o usuário final funciona. E o usuário é uma pessoa com todos os seus recursos.

Neste artigo, tentarei descrever como o cérebro humano funciona e como usá-lo no design de interfaces.

Um padrão é um padrão repetitivo que pode ocorrer em várias áreas da vida.

Em nosso mundo moderno, cheio de tecnologia, o homem ainda permanece muito semelhante a um homem das cavernas. A evolução não acompanha o processo tecnológico, e nós, pessoas, somos forçados a viver no mundo moderno com um conjunto de hábitos e reflexos que deixamos desde os tempos antigos. Tudo isso às vezes interfere, mas, com uma compreensão adequada de nós mesmos, isso pode ser transformado em favor.



Portanto, considere a tarefa: tornar a interface mais conveniente para uma pessoa. O que significa o mais conveniente? Isso significa que uma pessoa que usa essa interface resolve suas tarefas da maneira mais eficiente possível. Quanto mais uma pessoa consegue fazer em uma unidade de tempo e quanto melhor seu trabalho, melhor. Você pode considerar esse processo como a troca de energia humana por um trabalho útil.

O ponto chave aqui são os custos de energia. E aqui ainda vale a pena considerar as especificidades de uma pessoa e seu cérebro. Nosso cérebro consome muita energia e, como todas as outras partes do corpo, economiza. Considere brevemente o trabalho do cérebro.

Cérebro humano

Já sabemos bastante sobre o cérebro, mas longe de tudo. No entanto, o conhecimento atual é suficiente para melhorar a abordagem do design de interface. Assim, o cérebro humano consiste em muitos neurônios e nas conexões entre eles. Nossos pensamentos, memória, reflexos - todos esses são processos eletroquímicos entre os neurônios. Para ver alguma coisa, primeiro obtemos um sinal da retina do olho, depois esse sinal é transmitido para uma determinada área do cérebro, dependendo do sinal, certos neurônios são excitados, o que excita o seguinte e o próximo e, finalmente, as zonas dos neurônios que correspondem ao que vêem se tornam ativas no cérebro imagem. Como pode ser visto nesta longa frase, o processo é muito complexo e consome muita energia.

Todos os nossos pensamentos, apelos à memória são todos gastos de energia. Ou seja, precisamos que o usuário use a interface para pensar o mínimo possível. Aqui seria possível terminar. Essa é uma métrica básica do desempenho da interface. Mas, no entanto, esse conselho é bastante difícil de interpretar. Portanto, nos aprofundamos mais. Como fazer as pessoas pensarem menos ao usar a interface? Quais recursos do cérebro usar?

Força do hábito

Existe uma expressão assim: uma pessoa é um monte de hábitos. Há muita verdade nisso. Como mencionado anteriormente, o cérebro é uma coleção de neurônios. Rede neural, basta colocar. E essa rede neural está sendo constantemente ajustada e treinada. A princípio, uma nova tarefa requer uma grande quantidade de energia, porque as conexões necessárias ainda não se formaram e nosso cérebro não está treinado. Mas cada vez que se ajusta cada vez mais, cada vez menos energia é gasta. Por fim, os relacionamentos mais ideais para esta tarefa aparecem. Este é um hábito ou habilidade.

Isso pode ser usado ao projetar interfaces. Provavelmente não é a primeira vez que um usuário visualiza um computador e pode já ter visto algo semelhante ao seu programa ou partes dele. Mas, muitas vezes acontece que os desenvolvedores começam a reinventar a roda - reinventam padrões de interface prontos. Todo mundo quer investir um pedaço de si e mostrar seu potencial criativo, mas, como dizem, o principal é não exagerar.

Portanto, aqui está um princípio muito importante: use soluções comuns anteriormente inventadas. Funciona de maneira muito simples, o usuário vê a interface, reconhece nela algo semelhante ao usado anteriormente e já pode adivinhar o que fazer a seguir.

Por exemplo, salvando arquivos. Parece brega, mas às vezes os desenvolvedores criam suas próprias maneiras de salvar arquivos. Embora por muito tempo haja padrões de comportamento geralmente aceitos em uma tarefa como essa. Se alguém já resolveu seu problema e essa solução também é usada em outras interfaces, você deve examinar mais de perto essa solução e fazer algo semelhante.

Instintos antigos

Além dos hábitos adquiridos, uma pessoa tem hábitos congênitos. Mais frequentemente, eles são chamados de instintos. Essas são reações instantâneas do sistema nervoso a alguns patógenos externos. Durante a evolução, eles apareceram e entrincheiraram-se porque ajudam a sobreviver. Vi um arbusto em movimento repentino - talvez haja um tigre sentado lá que queira te matar - há medo, você precisa tirar suas pernas com urgência. Vi um sapo artificialmente brilhante - é melhor não tocá-lo. E assim por diante

Obviamente, o tigre não fica no seu programa e, quando o diálogo aparece repentinamente, o usuário não pula e corre. No entanto, isso afeta a estabilidade emocional. Em suma, todos os tipos de estímulos externos na forma de colegas que falam alto, pouco café saboroso e assim por diante, reduzem a estabilidade emocional. Por isso, começamos a pensar pior. Saímos do estado de fluxo, temos que nos concentrar cada vez mais na tarefa. A tudo isso é adicionado e como a interface se parece e se comporta.

Se a interface não parece muito atraente, alguns elementos irritantes aparecem constantemente e, em geral, se “algo der errado”, nós a percebemos instintivamente, e isso afeta nossa produtividade. O que podemos fazer sobre isso? Esses irritantes devem ser evitados.

Primeiro, use a teoria da harmonia de cores . As cores certas dão uma sensação de calma. Existem muitos artigos sobre como escolher a paleta certa para os olhos. Todos eles são construídos sobre a teoria da roda de cores. De acordo com certos padrões, são calculadas cores harmonizadoras que são agradáveis ​​para a pessoa e não causam irritação.

Em segundo lugar, use animações suaves e realistas . Nós realmente não gostamos quando algo de repente aparece ou desaparece. E sempre observe movimentos não naturais. Quando abrimos a porta, ela acelera primeiro e depois diminui a velocidade. Use funções de movimento realistas, com funções não lineares.

RAM do cérebro

Nosso cérebro não é onipotente e não podemos pensar em tudo ao mesmo tempo. A quantidade de coisas que podemos ter em mente ao mesmo tempo varia entre 5 e 7. Isso é chamado de quantidade operacional de memória cerebral. Muito semelhante à RAM do computador, em princípio. Para pensar em algo, você precisa extraí-lo da memória de longo prazo para o trabalho, operá-lo e devolvê-lo à memória de longo prazo. Obviamente, esse processo é realmente muito mais complicado, mas, por simplicidade, o consideraremos dessa maneira. O mais importante é que o volume de trabalho é limitado. E ele é muito pequeno. Não podemos pensar em dez entidades ao mesmo tempo. E quanto menos precisamos ter em mente, menos energia é gasta no processo de pensamento.

Ainda é necessário levar em consideração o fato de que energia e tempo são gastos na mudança de contexto. Se você primeiro precisar pensar em uma coisa, depois em outra, novamente na primeira e em outra coisa, muita energia será gasta em uma reinicialização permanente da memória de trabalho.

O que fazer sobre isso? Basicamente, é claro, depende das especificidades do programa. É necessário monitorar o foco do usuário . A tarefa deve ser linear. Por exemplo, se algum item for raramente usado, você poderá torná-lo o padrão, com a possibilidade de configurações adicionais. Tudo precisa ser feito para que você não precise mudar constantemente de atenção.

Mas há conselhos mais gerais sobre como manter a atenção de uma pessoa na mesma coisa: esses são padrões geométricos . Por exemplo, pegue uma tabela ou lista. Por que eles são fáceis de ler? Porque primeiro carregamos o "modelo" de dados na memória. Sabemos que nessa coluna esses valores e nisso. E a percepção subsequente dos dados é bastante fácil, pois sabemos onde o que acontecerá a seguir.

Em geral, isso pode ser chamado de correção geométrica da interface. As coisas comuns são agrupadas em um bloco, os blocos principais estão localizados na parte superior e esquerda, são ordenados para a direita e para baixo à medida que se tornam importantes ou à medida que a tarefa avança. É importante considerar a simetria para que o cérebro possa detectar com mais facilidade os bloqueios. Também é importante levar em consideração a experiência anterior: partes semelhantes da funcionalidade do programa devem ter padrões geométricos semelhantes em termos de interface, para que o usuário já tenha uma idéia do que trabalhar.

Reconhecimento de padrões

Trabalhar com uma interface gráfica envolve reconhecimento de padrões. E também se pode ajudar uma pessoa nisso. Considere um algoritmo simplificado de como entendemos o que vemos. Esse processo é um pouco semelhante ao modo como as redes neurais de computadores reconhecem, por exemplo, letras.

Primeiro, dos olhos obtemos um sinal sobre quais cones na retina são excitados por um espectro de cores específico. Grosso modo, que pixels, que cor. A partir desse conjunto de informações, a cor é alocada primeiro. Preto é diferente de branco. Isso é feito por um grupo de neurônios. Pela diferença de cor, podemos determinar imagens simples: linha, ponto e assim por diante. Isso já está envolvido em outro grupo de neurônios associados ao primeiro. Em seguida, essas informações são transferidas para a próxima camada, onde essas imagens são generalizadas e assim por diante, em cada nível, os neurônios estão cada vez mais associados aos neurônios que já armazenam nossa experiência sobre imagens vistas anteriormente. Vimos a letra A em um fundo branco, primeiro realçamos sua cor no fundo, depois reconhecemos imagens simples - as linhas em que consiste e depois a comparamos com todas as minhas experiências anteriores, e a letra A. era a correspondência máxima. À nossa frente está a letra A.

Esse processo é complexo e dividido em várias etapas. Isso pode ser usado. Você pode usar essa sequência de reconhecimento de padrões para simplificar a percepção da interface. Então, novamente: primeiro a cor é destacada, depois o formulário e, em seguida, o conteúdo do formulário .


Esta sequência mostra que a maneira mais fácil de influenciar o reconhecimento da imagem através das cores. É isso que os seres vivos da terra usam para reivindicar quem são. Fica imediatamente claro que a cobra vermelha é perigosa. Isso é muito mais fácil de entender do que se estivesse escrito nela "cobra perigosa".

Use cores para acentuar a interface. Use-o para transmitir informações simples: vermelho - cancelar, verde e azul - positivamente, branco - vazio e calma e assim por diante. Mas lembre-se, o principal é não exagerar. Use uma paleta de apenas algumas cores.

Após a cor vem a seleção de imagens simples, somente então o seu conteúdo. Primeiro, entendemos que este é um círculo e depois entendemos que é um zero ou a letra O. Portanto, os ícones são melhores que o texto. Além disso, eles ocupam menos espaço.

Motilidade

A interface possui feedback humano através de dispositivos de entrada: teclado, mouse ou tela sensível ao toque. Esse recurso também é importante a considerar. Tudo é simples aqui e é baseado nas leis da física. Quanto menos movimentos, melhor. Quanto menos movimento dos olhos, mais rápida é a percepção da informação. Quanto menos você precisar mover o mouse, alternar do mouse para o teclado, melhor.

No entanto, aqui você ainda precisa levar em consideração os recursos do usuário. Por exemplo, os programadores estão sentados com as mãos no teclado, portanto, mudar para o mouse é uma carga extra para eles. O usuário médio segura uma mão no teclado e a outra no mouse. O designer segura a caneta com a segunda mão. E assim por diante É importante considerar essa especificidade.

No automobilismo, as dicas descritas acima também ajudam. Os padrões geométricos reduzem o número de cliques e movimentos, reduzem o movimento dos olhos. A repetição desses padrões forma hábitos, e o usuário está literalmente na máquina automaticamente move o cursor para o lugar certo.

Sumário

Neste artigo, tentei descrever os recursos básicos dos usuários que devem ser considerados ao projetar uma interface. Esta lista pode ser melhorada e complementada com detalhes. Afinal, quanto mais nos entendemos, melhor interagimos um com o outro