“Desenhar é muito mais do que simplesmente montar, ordenar ou até mesmo editar; é agregar valor e significado, iluminar, simplificar, esclarecer, modificar, dignificar, dramatizar, persuadir e talvez até divertir.” – Paul Rand
Design de Interface é, certamente, uma das mais fascinantes (e divertidas) áreas para se trabalhar. Mas não se trata de somente projetar telas de qualquer maneira, de forma negligente… Por isso, veja neste artigo 19 princípios de Design de Interface de Usuário (User Interface Design) e aprimore suas habilidades em UX.
1. Em design de interface, clareza é o trabalho nº 1
Clareza é o primeiro e mais importante princípio de qualquer user interface design. Para usar eficazmente uma interface projetada, as pessoas devem ser capazes de reconhecer o que é, preocuparem-se com o porquê de usá-la, entender o que a interface está ajudando a interagir, prever o que acontecerá quando a usarem e depois interagir com sucesso com ela.
Embora haja espaço para mistério e atraso na gratificação (delayed gratification) em interfaces, não há espaço para confusão. A clareza inspira confiança e leva a um uso posterior. Cem telas perfeitamente claras e objetivas são preferíveis a uma única desordenada.
2. Interfaces existem para serem interativas
Interfaces existem para permitir a interação entre os seres humanos e o nosso mundo. Elas podem ajudar a esclarecer, iluminar, capacitar, mostrar relacionamentos, unir, separar, gerenciar expectativas e dar acesso a serviços. Interfaces fazem um trabalho e sua eficácia pode ser medida.
Entretanto, elas não são apenas utilitárias. As melhores interfaces podem inspirar, evocar, mistificar e intensificar nosso relacionamento com o mundo!
3. Conserve a atenção a todo custo
Nós vivemos em um mundo de interrupção. É difícil ler em paz sem algo que tente nos distrair e direcionar nossa atenção para outro lugar. Se alguém estiver lendo, deixe-o terminar de ler antes de mostrar aquele anúncio (se for necessário). Honre a atenção e seus leitores não apenas serão mais felizes, mas seus resultados serão melhores.
Quando o uso é o objetivo principal, a atenção se torna o pré-requisito. Conserve a todo custo.
4. Mantenha os usuários no controle
Os seres humanos se sentem mais confortáveis quando nos sentimos no controle de nós mesmos e do nosso ambiente. O software impensado tira o conforto, forçando as pessoas a interações não planejadas, caminhos confusos e resultados surpreendentes. Que seu design de interface mantenha as pessoas “sob controle”, divulgando regularmente o status do sistema, descrevendo a causalidade (“se você fizer isso, aquilo acontecer”) e dando uma ideia do que esperar em cada turno.
Não se preocupe em afirmar o óbvio… O óbvio quase nunca é.
5. A manipulação direta é melhor
A melhor interface é nenhuma (ou a “não interface“), quando somos capazes de manipular diretamente os objetos físicos em nosso mundo. Como isso nem sempre é possível, e os objetos são cada vez mais informativos, criamos interfaces para nos ajudar a interagir com eles.
É fácil adicionar mais “camadas” do que o necessário a uma interface em nosso design, criando botões, gráficos, opções, preferências, janelas, anexos e outros materiais excessivamente trabalhados, de modo que se acabe manipulando elementos da interface do usuário em vez do que é importante. Em vez disso, busque o objetivo original de manipulação direta… Crie uma interface com o mínimo rastro possível, reconhecendo o máximo possível de gestos humanos naturais.
Idealmente, a interface deve ser tão sutil que a pessoa tenha uma sensação de manipulação direta com o objeto de seu foco.
6. Uma ação principal por tela
Esse princípio de design de interface apregoa que cada tela projetada deve prover uma única ação de valor real para a pessoa que a utiliza. Isso facilita o aprendizado, o uso e o acréscimo ou aprimoramento quando necessário.
Telas que proveem 2 ou mais ações primárias tornam-se confusas rapidamente. Assim como um artigo escrito deveria ter uma única e forte tese, toda tela projetada deveria apoiar uma ação única, sua razão de ser/existir.
7. Mantenha ações secundárias… Secundárias!
Telas com uma única ação primária podem ter várias ações secundárias, mas elas precisam ser mantidas secundárias! A razão pela qual um artigo existe não é para que as pessoas possam compartilhá-lo no Twitter… Existe para as pessoas lerem e entenderem.
Mantenha ações secundárias, secundárias, tornando-as mais leves visualmente ou mostradas após a ação primária ter sido alcançada.
8. Fornecer um próximo passo natural
Em design de interface, poucas interações devem ser as últimas, então planeje cuidadosamente um próximo passo para cada interação que uma pessoa tenha com a interface. Antecipe qual deve ser a próxima interação e o design para suportá-la.
Assim como gostamos na conversa humana, ofereça uma abertura para interação posterior. Não deixe uma pessoa “encurralada” porque ela fez o que a interface projetada permitiu que ela fizesse; dê a ela um próximo passo natural que a ajude a alcançar seus objetivos.
9. Aparência segue comportamento
Os humanos sentimo-nos mais confortáveis com as coisas que se comportam da maneira que esperamos — outras pessoas, animais, objetos, software… Quando alguém ou algo se comporta de forma consistente com nossas expectativas, sentimos que temos um bom relacionamento com esse alguém. Para esse fim, os elementos do design de interface devem se parecer com o modo como eles se comportam.
A forma segue a função.
Na prática, isso significa que alguém deve ser capaz de prever como um elemento de interface se comportará apenas olhando para ele. Se se parece com um botão, deve se comportar como um botão. Simples assim.
10. Assuntos de consistência
Seguindo o princípio de interface de usuário anterior, os elementos da tela não devem parecer consistentes uns com os outros, a menos que se comportem consistentemente uns com os outros. Deixando mais claro: elementos que se comportam da mesma forma devem parecer iguais; devem possuir semelhança.
Mas é igualmente importante que elementos diferentes pareçam diferentes; não guardem traços de semelhança entre si. Em um esforço para ser consistente, designers novatos muitas vezes obscurecem diferenças importantes usando o mesmo tratamento visual (geralmente para reutilizar código) quando diferentes tratamentos visuais são apropriados.
11. Hierarquias visuais fortes funcionam melhor
Em design de interfaces, uma forte hierarquia visual é obtida quando há uma clara ordem de visualização dos elementos em uma tela, ou seja, quando é possível visualizar os mesmos itens na mesma ordem todas as vezes.
Hierarquias visuais fracas dão pouca pista sobre onde descansar o olhar e acabam ensejando sentimentos/percepções de desordem e confusão. Em ambientes de grandes mudanças, é difícil manter uma forte hierarquia visual porque o peso visual é relativo: quando tudo é ousado, nada é ousado. Se um único elemento visualmente pesado for adicionado a uma tela, o designer de interface pode precisar redefinir o peso visual de todos os elementos para alcançar novamente uma hierarquia forte.
A maioria das pessoas não percebe a hierarquia visual, mas é uma das maneiras mais fáceis de fortalecer (ou enfraquecer) um projeto.
12. Organização inteligente reduz a carga cognitiva
A organização inteligente de elementos de tela pode fazer com que muitos pareçam como poucos. Isso ajuda as pessoas a entender a interface de maneira mais fácil e mais rápida, conforme demonstrados os relacionamentos inerentes ao conteúdo do design.
Agrupar como elementos, mostrar relações naturais por posicionamento e orientação. Ao organizar o conteúdo de maneira inteligente, você torna menos penosa a carga cognitiva para os usuários, que não precisa pensar em como os elementos são relacionados — já que você fez isso isso por eles.
Não force o usuário a descobrir as coisas. Mostre-as projetando essas relações em suas telas.
13. Destaque, não determine, com cor
A cor das coisas físicas muda à medida que a luz muda. Na plena luz do dia, vemos uma árvore muito diferente daquela delineada contra um pôr do sol. Como no mundo físico, onde a cor é algo muito sombreado, a cor não deve determinar muito em uma interface. Pode ajudar, ser usado para destacar, ser usado para guiar a atenção, mas não deve ser o único diferenciador das coisas.
Para leitura prolongada ou horas prolongadas na tela, use cores de fundo claras ou suaves, economizando cores mais brilhantes para suas cores de destaque. É claro que também há tempo para cores de fundo vibrantes, apenas certifique-se de que é apropriado para o seu público.
14. Divulgação progressiva
Mostre apenas o que é necessário em cada tela. Se as pessoas estiverem fazendo uma escolha, mostre informações suficientes para permitir a escolha e, em seguida, preocupe-se com os detalhes em uma tela subsequente.
Evite a tendência de explicar demais ou mostrar tudo de uma vez. Quando possível, adie as decisões para telas subsequentes divulgando informações progressivamente, conforme necessário. Isso manterá suas interações mais claras.
15. Ajude as pessoas de maneira “inline”
Em interfaces ideais, a ajuda não é necessária porque a interface é aprendida e utilizável. Um passo anterior a este cenário ideal é aquele em que a ajuda é inline e contextual, disponível apenas quando e onde for necessária, não sendo mostrada em todos os outros momentos.
Pedir para as pessoas ajudarem a encontrar uma resposta para suas perguntas põe o ônus de saber do quê precisam nelas próprias. Em vez disso, crie ajuda onde for necessário.
Apenas certifique-se de que esteja fora do caminho das pessoas que já sabem como usar a interface.
16. Um momento crucial: o estado zero
A primeira experiência com uma interface de usuário é crucial, mas muitas vezes negligenciada pelos designers. Para melhor ajudar as pessoas a se adaptarem, é melhor projetar para o “estado zero“, o estado em que nada ocorreu ainda.
Este estado não deve ser simplesmente uma tela em branco; deve fornecer orientação e instrução. Grande parte do atrito da interação está nesse contexto inicial, uma vez que as pessoas entendam as regras, elas têm uma probabilidade muito maior de sucesso.
17. O ótimo design é invisível
Uma propriedade curiosa de um ótimo design é que ela geralmente passa despercebido pelas pessoas que o usam…
Uma razão para isso é que, se o design é bem-sucedido, o usuário pode se concentrar em seus próprios objetivos, ao invés de preocupar com a interface. Quando concluem sua meta, ficam satisfeitos e não precisam refletir sobre a situação.
18. Outras disciplinas de design
Design visual e gráfico, tipografia, copywriting, arquitetura de informação… Todas essas disciplinas fazem parte do design de interfaces. Eles podem ser tratadas mais genericamente ou de forma especializa.
Não entre em guerras territoriais em outras disciplinas: retire deles os aspectos que o ajudam a fazer do seu trabalho melhor e prossiga. Usar insights de disciplinas aparentemente não relacionadas também é uma ótica dica para design de interfaces.
19. Interfaces existem para serem usadas
Como na maioria das disciplinas de design, o design da interface é bem-sucedido quando as pessoas o usam da maneira como foi projetado.
Como uma cadeira bonita que é desconfortável para sentar, o design de interfaces falhou quando as pessoas optaram por não usá-lo. Portanto, o design da interface pode ser tanto sobre a criação de um ambiente para uso, quanto a criação de um artefato que vale a pena usar.
Não é suficiente para uma interface satisfazer o ego do seu criador: ela deve ser eficientemente usada!
Conclusão
A área de design de interfaces de usuário (User Interface Design) é fascinante e divertida, mas isso não significa que seja bastante difícil de se fazer com qualidade e maestria.
O que separa bons designs de interface de maus designs de interface é a qualificação do designer que as projetou, e uma melhoria neste quesito, através do aprimoramento das técnicas e percepções, certamente pode ser alcançada ao se seguir estes 19 princípios de user interface.