6 conceitos de interface do usuário que farão de você um ninja frontal

32

Conceitos essenciais para construir aplicativos com interface do usuário incrível

1. Hierarquia é Tudo

Ao desenvolver a parte frontal do aplicativo sempre certifique-se de que você está aderindo a uma hierarquia, seja as cores,peso da fonte, estilo de fonte,etc. Ter uma boa hierarquia visual faz com que seu aplicativo pareça menos barulhento e em vez de tudo na sua interface competindo pela máxima atenção e não está claro o que mais importa.

por exemplo:

  • Como você pode observar a quantidade de ruído que temos na página do painel abaixo, tudo parece misturado em uma única página, e não está claro onde o usuário deve se concentrar na primeira visita.
  • Esse problema pode ser facilmente corrigido usando um conjunto de pesos de fonte,hierarquia de cores e dando raio de borda aos elementos mais anteriores.
  • Além disso, quando você constrói aplicações com a regra de informações secundárias e terciárias resulta em resultados mais agradáveis sem mudar muitas coisas.

2. Pare de usar texto cinza em todos os lugares

Há momentos em que temos que usar diferentes cores de texto para rótulos primários e secundários, e na maioria das vezes as pessoas acabam usando um texto cinza regular como um rótulo de texto secundário.

O problema com essa abordagem é que o uso de cinza é fino com fundos brancos onde estamos observando o cinza como contraste reduzido de branco, mas o mesmo deve ser feito para outras cores.

Para criar uma hierarquia do que mais importa no seu texto, você só deve usar a cor com a mesma tonalidade e ajustar a saturação até que corresponda às suas necessidades.

3. Utilização de etiquetas

Os rótulos estão em quase todos os lugares na aplicação, mas você pode nem precisar de tantos rótulos.

A maioria dos desenvolvedores front-end do tempo dão a mesma quantidade de atenção a todos os rótulos, o que torna mais demorado para os usuários, pois um pedaço de dados é dada igual importância.

Em vez disso, tente dar rótulos classificados para diferentes partes da sua aplicação.

por exemplo:

Publicações Relacionadas
  • Em um aplicativo de e-commerce, se o inventário de itens for mostrado como números brutos, seus usuários têm que ter tempo para calcular do que esses números realmente se tratam.
  • Não faça isso, se você simplesmente dizer aos seus usuários o que esses números estão relacionados a eles serão mais felizes.

4. A semântica é secundária

Há momentos em que temos múltiplas ações em uma única página, em tal situação, é fácil cair na armadilha de projetar essas ações de acordo com a semântica.

Na maioria das vezes as pessoas acabam ignorando sua hierarquia para a semântica. Especialmente enquanto projeta botões, a semântica desempenha um papel vital, pois a maioria das páginas tem uma verdadeira ação primária, ações secundárias menos importantes e poucas ações terciárias.

Ao projetar esses botões de ação, certifique-se dos seguintes pontos.

  • As ações primárias devem ser óbvias: Use cores de fundo de contraste sólidas e mais altas.
  • Ações secundárias devem ser claras: Tente não torná-los muito proeminentes, estilos de contorno e cores de fundo de contraste inferior funcionam muito bem neste caso.
  • Ações terciárias não devem ser discretas: Estilizar essas ações como links funciona melhor.

Nota: Sempre dê à hierarquia uma prioridade para projetar ações em páginas, resulta em uma interface do usuário muito menos ruiva que se comunica mais claramente.

5. Elementos sobrepostos

Uma ótima dica para tornar os aplicativos web suaves para os usuários é sobrepor elementos, isso pode ser feito facilmente exibindo elementos sobre outros elementos para fazê-los parecer mais conectados a todos os elementos próximos.

por exemplo:

  • Você deve ter observado essa tendência de interface do usuário em muitos aplicativos nos dias de hoje, onde você tem elementos camada uns sobre os outros na primeira visita da página.

6. Utilização de Espaços Vazios

Ao desenvolver aplicativos, às vezes recursos recém-adicionados não oferecem o design real e há várias razões para isso, um deles está deixando espaços vazios.

Não ignore esses espaços vazios em seu aplicativo, pois o usuário passará por isso em algum momento e é mais provável que eles se confundam.

Tente adicionar alguns ícones ou imagens descritivas nesses espaços vazios para torná-los mais naturais com outras partes do seu aplicativo.