10 regras para um bom design de interface do usuário a serem seguidos em todos os projetos de design da Web

Já se foi o tempo dos sites do Geocities com seu HTML codificado e imutável. Sites e aplicativos hoje são dinâmicos e interativos. Nosso trabalho como designers é fazer com que a interface por meio da qual eles interajam com nosso design de IU da web seja o mais próximo possível da ideal. Felizmente, existem algumas regras quase universais que podem ajudar. Reunimos o que consideramos os melhores princípios de design para que você possa aprimorar todos os seus futuros projetos de web design.

10 regras para um bom design de interface do usuário a serem seguidos em todos os projetos de design da Web

Inscreva-se no nosso canal no Youtube

1. Torne tudo o que o usuário precisa prontamente acessível

Quer se trate de uma série de ferramentas de design para aplicativos de web design, o inventário de um personagem em um videogame, uma planilha ou qualquer outra coisa, se o usuário não conseguir encontrar o que deseja, ele salta de seu software. As guias tornam tudo acessível. Atalhos e dicas de ferramentas instantâneas também.

Optamos por usar abas para organizar Divi, por exemplo. Todas as ferramentas de que você precisa estão ali no construtor, separadas por categoria. As barras de ferramentas são acessíveis de forma semelhante. Se você usa o WordPress, a barra de ferramentas do administrador oferece a capacidade de acessar rapidamente o editor de postagem, o personalizador de tema, as configurações do plug-in e assim por diante. As opções estão claramente identificadas e você não precisa pesquisá-las.

Outro exemplo são as opções Ajuda / Suporte / Contato. Ao projetar uma IU, seja para um aplicativo móvel, aplicativos da web, sites WordPress ou qualquer outra coisa, seus usuários sempre precisarão encontrar o botão Ajuda (ou o botão Contactar o Suporte). Eles absolutamente precisarão entrar em contato com você em algum momento . É por isso que você deve sempre colocar os botões de ajuda na frente e no centro. Olhe para Divi. Em cada módulo, temos o botão de suporte à sua disposição, ao seu alcance, sempre que precisar.

Além disso, a janela de ajuda aparece com um tutorial em vídeo sobre qualquer recurso com o qual você está trabalhando. Incluindo este módulo, Divi se torna muito mais acessível e menos frustrante. Além disso, como parte da IU, o local para obter ajuda é consistente em todo o produto. O que nos leva ao próximo ponto ...

2. Seja consistente

Como dissemos há pouco, é importante ser consistente no posicionamento de recursos em sua IU. Mas você também deve se preocupar se sua IU funciona e parece consistente em todo o produto. Não tem o menu no topo de uma página e no final de outra. Não reorganize os itens do menu toda vez que ele for carregado. Certifique-se de que seus usuários saibam onde estão as coisas em seu site. Se você mantiver um formulário de contato abaixo das postagens do seu blog, não decida deixá-lo desativado. Os usuários perceberão e ficarão perplexos.

A consistência também inclui suas fontes e o design deve funcionar de página em página. Não vá trocando fontes de cabeçalho / corpo de uma página para outra.

Há uma ideia interessante chamada princípio da menor surpresa que diz que se você deixar seu usuário surpreso com a forma como algo funciona ... retrabalhe para que fique mais intuitivo.

Além disso, você deve se certificar de que sua IU é adequada para sua plataforma - os aplicativos iOS funcionam de maneira diferente em alguns casos do Android. Os sites para desktop têm necessidades diferentes dos sites para celular para menus, galerias e até mesmo check-out de produtos. Consistência significa que você não frustra seus usuários, obrigando-os a descobrir o que fazer em seu site.

3. Seja claro

Isso pode parecer uma repetição do anterior, mas a clareza e a consistência são diferentes. Clareza significa que você deseja que seus usuários saibam o que fazer o tempo todo. De certa forma, isso também afeta o design de UX porque reduz a frustração dos usuários e aumenta a retenção e reduz a taxa de rejeição.

Clareza é a razão pela qual o design minimalista (e até certo ponto brutalista) da web se tornou tão popular. As pessoas não ficam confusas sobre o propósito de qualquer site ou página porque não há (ou pouca) desordem. Você deseja proporcionar a experiência oposta à do Ling's Cars.

Uma maneira de obter clareza é passar de uma etapa a outra em páginas diferentes. Em vez de um processo de checkout rolar a página para baixo - ou estar contido em uma única seção ou caixa - faça com que seus usuários naveguem de uma página de produto para uma página de carrinho de compras para uma página de checkout para uma página Escolha seu pagamento para uma página de fazer pedido para uma página de confirmação. (Amazon faz isso, como você pode ver na imagem abaixo).

Eles saberão exatamente onde estão no processo, eliminando qualquer ambigüidade. Isso é especialmente importante para usuários móveis, pois o espaço da tela é muito importante .

4. Dê feedback

A última coisa que os usuários desejam é não entender o que está acontecendo. Se eles pressionarem um botão, forneça uma indicação de que o botão foi pressionado. Você pode fazer isso de várias maneiras. Você pode animar o botão, fazendo com que pareça afundar na página. Ícones de carregamento (como a roda do arco-íris do MacOS) fornecem feedback, “Estamos trabalhando em sua solicitação”, sem precisar dizê-lo.

Se você permitir que os usuários carreguem arquivos (como Dropbox ou Google Drive), dê uma indicação do tempo restante. Fornecer um pop-up ou modal informando que sua ação foi um sucesso reduz a frustração e a confusão.

Na verdade, sempre que o usuário realiza alguma ação em sua interface, apenas um pequeno reconhecimento pode fazer a diferença em uma experiência boa e uma sem brilho.

5. Use Reconhecimento, Não Recorde

O oposto de boas habilidades para fazer o teste, você deseja que seus usuários reconheçam tudo sobre o seu site quando o virem. Eles não deveriam ter que pensar sobre isso e relembrar as informações. Mais do que tudo, você está otimizando sua interface para que todas as partes sejam intuitivas e se movam de um ponto a outro. Isso pode ser feito usando ícones reconhecíveis como mencionamos acima. As pessoas reconhecem certos ícones para certas coisas.

Também pode ser feito por meio de tours virtuais para orientar o usuário em um processo, mesmo quando não for a primeira vez. Eles reconhecerão o processo assim que o primeiro modal aparecer e não terão que gastar energia lembrando exatamente como realizar essas ações.

Você também pode conseguir isso por meio de mensagens bem colocadas que lembram seus usuários do que faz no seu site. Fazemos isso no Divi com dicas de ferramentas simples de foco - mesmo que alguém não se lembre do que o ícone faz, nós o conduzimos à sua função. Depois disso, eles devem reconhecer o ícone. Ou pelo menos a dica de ferramenta se eles pairarem novamente. Ou mesmo o processo de pairar para obter as informações.

6. Escolha como as pessoas irão interagir primeiro

crédito da foto John Picklap, cortesia de MarieClaire.com

Você sabe o que é pior? Empurrando uma porta de puxar. Especialmente quando você acabou de empurrar um anterior para chegar a esse. O designer daquele prédio tornou a interface do usuário inconsistente, então você não tinha ideia de como fazer o que precisava fazer. Que tal pressionar algo que parece um botão que não é, mas aguardar uma resposta mesmo assim? Bem, isso é porque esses designers não levaram em consideração como seus usuários interagiriam com seu produto. Então, quando você estiver projetando sua IU, escolha um movimento (talvez dois) e fique com ele.

Em dispositivos móveis, isso tende a ser deslizar. Veja o Snapchat. Praticamente todas as ações são executadas passando o dedo , incluindo acessar suas configurações e perfil. Você pode deslizar para baixo no Snapchat para ver a si mesmo, deslizar para a esquerda para obter as conversas, para as histórias e para cima para obter suas memórias (ou o nome que estão sendo chamados esta semana). Eles escolheram como queriam que seus usuários interagissem com seu produto e projetaram sua IU para acomodar isso. Não o contrário.

Ao projetar sua IU, escolha se você vai usar menus e toques, iconografia, deslizar e gestos ou algo totalmente diferente. Alexa e Siri usam entrada de voz como sua interação de IU primária. A maneira como eles fornecem informações e realizam suas tarefas é projetada em torno dessa entrada específica. E, como usuário, você sabe o que fazer intuitivamente porque essas informações foram definidas para você no início. Os designers disseram a você o que fazer e você o fez . Seus usuários apreciarão se você fizer o mesmo por eles.

7. Siga os padrões de design

O velho ditado se não está quebrado, não conserte se aplica aqui. Realmente não há necessidade de tentar revitalizar algo se o padrão funcionar. Isso vai do uso do ícone ao posicionamento padrão dos elementos. Você não quer ir contra o que seus usuários esperam que as coisas façam. As pessoas sabem que pontos de interrogação (?) Indicam ajuda. Portanto, não use um ponto de exclamação (!) . Se você quiser que os usuários encontrem o menu do seu celular, use o ícone de hambúrguer (as três linhas empilhadas), não uma grade.

Pense nas barras de pesquisa. Eles tendem a estar em locais semelhantes na maioria dos sites: na parte superior da barra lateral ou no final do menu do cabeçalho. Se não estiver lá, o centro da seção superior da página. Se você decidir incluir o único campo de pesquisa na parte inferior de sua barra lateral, rodapés de página ou abaixo do texto de suas postagens de blog, as pessoas não saberão onde procurar. Mesmo que você o identifique com o ícone de lupa padrão.

Não há nada de errado em pensar fora da caixa e buscar um design novo e inovador, mas isso não deve significar que o design seja difícil de usar.

8. Importa Hierarquia Elemental

Não, não queremos dizer que a Terra, o Vento, a Água ou o Fogo comandam os outros. Queremos dizer que os elementos em sua página precisam ter uma hierarquia clara para a utilidade e a forma como o usuário vê a página. Basicamente, você deseja ter certeza de que as funções mais importantes estão no topo de suas respectivas páginas. Além disso, esse tipo de hierarquia pode levar o usuário para baixo na página de forma orgânica, conduzindo-o por meio de seu serviço.

Elementos grandes que diminuem de tamanho à medida que você avança no processo são indicativos de importância e ordem. O mesmo acontece com a cor e o contraste. O uso de espaços em branco também é importante, pois a desordem pode atrasar o progresso do usuário e desviar a atenção do propósito da página. Linhas limpas, muito espaço e elementos bem definidos podem indicar visualmente aos usuários como se mover pela interface do usuário sem qualquer documentação ou anotação.

Uma regra prática decente é que você deseja manter as coisas fluindo da esquerda para a direita, de cima para baixo.

9. Mantenha as coisas simples

Veja este formulário de contato:

Agora olhe para este:

Ambos são formulários de contato para fazer uma solicitação. Um deles não é problema para preencher, enquanto o outro é um pouco mais uma dor de cabeça. Além de ser um formulário governamental, o design do formulário inferior não é feito para o usuário, mas para o administrador. Esse não é o seu trabalho. Seu trabalho é tornar as coisas o mais simples possível para o usuário . E uma das melhores maneiras de fazer isso é cortar tudo o que não for absolutamente necessário.

10. Mantenha seus usuários livres e sob controle

A última coisa que queremos abordar - e a última coisa que você deseja fazer com sua IU - é assumir o controle do usuário. Ou fazer com que pareçam confinados ou restritos pelo seu projeto. Você deseja capacitá-los e sua IU deve permitir que realizem as ações que desejam. Esta regra tem duas partes: contexto e permissão .

Em primeiro lugar, qualquer ação que o usuário precise realizar deve estar localizada perto do que ele deseja realizar. Se eles precisarem editar uma postagem, o botão editar deve estar próximo aos botões salvar , publicar / enviar e visualizar . Na verdade, a melhor opção são menus contextuais para todas as ações que o usuário pode realizar em qualquer item (ou página) em particular. Se você for consistente em sua IU, como falamos acima, seus usuários entenderão que esses menus de contexto ou barras de ferramentas sempre terão a lista completa de ações para qualquer elemento.

Além disso, sua IU deve sempre fazer o usuário sentir que pode sair ou reverter qualquer ação que realizar. Enquanto você projeta a IU, eles a usarão . Portanto, eles precisam de permissão (ou talvez até de liberdade) para fazer o que precisam para realizar o trabalho. Fazer isso pode ser tão simples quanto adicionar um botão Cancelar a todas as páginas do seu checkout de comércio eletrônico (porque pressionar o botão Voltar do navegador pode causar problemas). Talvez seja um recurso de desfazer para que eles sintam que a experimentação está bem. Ou um histórico de revisão para projetos de grande escala (como no Google Drive, WordPress ou Git).

Quando seus usuários se sentem livres e sem restrições, você obviamente seguiu alguns bons princípios de design de IU.

A IU está pronta?

Trocadilho ruim. Eu sei, desculpe. Mas com essas regras de IU, você estará absolutamente pronto para lançar seu próximo projeto de web design fora do parque. Embora alguns deles possam se aplicar mais a alguns projetos do que a outros, uma boa IU é uma boa IU, e uma boa IU leva a uma boa UX. Mas esse é um tópico para um post totalmente diferente.

Você tem alguma regra para um bom design de IU que sempre segue?

Imagem em destaque do artigo por emojoez / shutterstock.com