UX - Dicas para um bom layout

#ux

Sempre enxerguei a experiência do usuário como algo de extrema importância. Não importando o meio em qual ele esteja sendo inserido.

Pois mesmo sendo desenvolvedora em outros contextos também sou usuária. E cá para nós, não existe nada mais desconfortável que ter uma má experiência de usabilidade. Ás vezes mínimos detalhes fazem toda a diferença.

Quando engatei na área de desenvolvimento Front-End uma das minhas preocupações não era apenas entregar algo bonito visualmente falando mas que fosse intuitivo, fácil e agradável de ser utilizado.

E pensando nisso fiz alguns cursos que por mais que fossem básicos na área de UX me ajudassem ter um outro tipo de visão na hora de entregar um bom trabalho para o usuário final.

Então seguem algumas dicas que eu aprendi durante alguns estudos para que você possa aplicar em seus projetos.

Hierarquia visual

A hierarquia visual está focada em guiar os olhos do usuário pela tela mostrando exatamente o que ele precisa fazer, sem precisar mostrar de forma descritiva.

Hierarquia por proximidade

A hierarquia pro proximidade fará com que seus olhos naturalmente siga uma ordem na hora de visualizar o layout como um todo. Logicamente precisamos levar em consideração que aqui no ocidente, nossa leitura parte da esquerda para direita e isso irá ditar como iremos posicionar nossos componentes.

Hierarquia por repetição

Posiciona elementos na página de forma repetida formando assim um padrão agradável para o usuário. Perceba que este padrão irá se extender por todo o site deixando não apenas agradável visualmente mas também intuitivo.

Como podemos ver no exemplo a cima este padrão também foi aplicado nos ícones que acompanham o nome das cidades.

Hierarquia por cor ou Chamada de ação

Como o nome sugere, o layout chamará a atenção do usuário diretamente para o que a marca quer destacar. Inconscientemente nossos olhos "saltam" diretamente para o elemento em questão. Muito comum ser utilizado para botões.

Além da Netflix ter usado a cor de sua paleta ela faz com que o nosso olhar vá diretamente para o botão, que acaba se destacando não só pela cor chamativa, mas pelo texto em caixa alta e o seu sombreamento faz parecer que o mesmo se sobressaia na tela.

O Prime Vídeo também utilizou deste método para chamar atenção, deixando tudo clean e apenas o botão de inscrever-se na cor em destaque. Atraindo a atenção dos nossos olhos diretamente para ele, por mais que tenha o banner a cima.

Hierarquia por fonte

Algumas pessoas não dão atenção, porém a fonte que usamos é muito importante para que possamos passar não só mensagem velada mas também conforto na hora da leitura.

Logo a cima utilizamos a mesma frase porém com fontes diferentes.

Hierarquia por leiturabilidade

O espaçamento e a quantidade de palavras em um parágrafo e seu alinhamento entre texto e imagem também ditam muito no conforto de leitura do usuário.

Mas esta dica não é só focada no conforto visual, ela também ajuda a "dizer" o quão interessante o texto é e quão "rápido" seu leitor irá se cansar da leitura.

O exemplo a seguir faz com que a leitura seja agradável e ao mesmo tempo não seja cansativa para o leitor.

Ao contrário do exemplo a seguir:

Hierarquia por scaneamento

Basicamente é dividida entre dois tipos, e que tem seus objetivos específicos. Porém ambas dividem o mesmo propósito: Ditar por onde os olhos do leitor irá passar.

Escaneamento Z

Os padrões “Z” se aplicam em anúncios ou sites. Em que as informações não são necessariamente apresentadas em parágrafos por blocos.

O olho de um leitor primeiro escaneia a parte superior da página, onde é possível encontrar informações importantes, depois dispara para o canto oposto na diagonal e faz a mesma coisa na parte inferior da página.

Escaneamento F

Os padrões “F” se aplicam as páginas tradicionais com muitos textos, como artigos ou postagens em blogs.

Um leitor “escaneia” o lado esquerdo da página, procurando por palavras-chave interessantes em cabeçalhos alinhados à esquerda ou frases de tópicos iniciais, depois para em um ponto e segue lendo em linha à direita, parando quando encontra algo interessante.

O resultado se parece com um “F” (ou “E,” ou algo com ainda mais barras horizontais; mas o termo “F” ficou mais popular).

Como você pode utilizar a dica a cima?
Alinhe as informações importantes à esquerda e use títulos curtos em negrito. Também use marcadores e outros itens que atraiam a atenção para quebrar os blocos de parágrafos.

Espaço em branco

Apesar de muitos não acharem algo relevante ou não darem atenção para este elemento o espaço em branco muitas vezes ignorado é um dos pontos mais importante na hora de pensar em idealizar um layout. Pois é ele que será responsável pela área de "respiro"visual. E não necessariamente o mesmo precisa estar na cor branca, ele apenas será um espaço "vazio" que irá dar um alívio visual.