Como desenvolver um front-end agradável sem ser especialista

Henrique Fernandez
Nov 8, 2018 · 6 min read
Image for post
Image for post

Este artigo foi escrito em nome de todos aqueles amigos back-enders (assim como eu) que acabam tendo que desenvolver as telas do sistema por algum motivo, e de repente saem criando novas tendências / interfaces incrivelmente meu deus que coisa horrivel do cacete bonitas.

Algo que aprendi ao longo da minha carreira é que software bom para o usuário é diferente do software bom para o desenvolvedor. Estamos sempre olhando tecnologias, buscando padrões e boas práticas de código. Por mais que nós sejamos os criadores da parte que “faz funcionar”, um aspecto fundamental e talvez o mais importante na hora de agradar o cliente é a interface e a usabilidade do sistema. Porque funcionar é apenas “obrigação”.

Aqui vão as dicas que sempre sigo para conseguir criar interfaces agradáveis de forma simples:

Dica 1: Procure por um framework CSS / Javascript

Frameworks front-end trazem muitos componentes já prontos. Dessa forma você não precisa sair criando suas abobrinhas de back-end no front. Quanto mais completo for o framework escolhido, melhor.

Aqui vão algumas dicas de frameworks bem completos, que podem te dar responsividade, usabilidade, e HTML semântico de graça (claro que isso também vai depender bastante de você, e das próximas dicas):

Particularmente gosto bastante do Foundation, na minha opinião é um dos frameworks mais completos e fáceis de escrever. Com ele você consegue desde validações de formulários, responsividade até efeitos de transição bem legais.

Dica 2: Mantenha tudo alinhado, não invente moda!

O alinhamento nos trás inconscientemente a sensação de harmonia e organização no design. Procure deixar as margens padronizadas para todos os elementos. O que estou escrevendo não é uma regra universal, mas para elaborar um alinhamento diferente que fique bom, dependemos de um conhecimento mais avançado de grids e estética. Deixe isso para quem é especialista. Faça o simples que da certo!

bom:

ruim:

Dica 3: Faça questão de dizer ao usuário onde ele está, de alguma maneira

Você pode fazer isso utilizando, breadcrumbs, títulos hierárquicos, deixando o botão do menu que leva a rota atual mais escuro, preferencialmente mantendo a URL semântica.

Utilize a combinação de algumas dessas técnicas juntas.

bom:

Image for post
Image for post

ruim:

Image for post
Image for post

Dica 4: SEMPRE dê feedbacks claros para o usuário em suas ações no sistema

O usuário DEVE saber o que ele fez e o que está acontecendo. Invista em boas mensagens de erro, alertas e status, os deixe bem visíveis! Nada de economizar esforços nessa parte.

bom:

Image for post
Image for post
Image for post
Image for post

ruim:

Image for post
Image for post

Obs: Use cores diferentes para tipos de mensagens diferentes (aviso, erro, sucesso)!

Dica 5: Deixe óbvio o que é clicável!

Talvez uma das mais importantes. Nunca deixe um link ou botão com a mesma estrutura visual de elementos não clicáveis, como textos que estão presentes na página.

Estilize-os. Você pode deixar a fonte dos links com cores, underlines e tamanhos diferentes. Mas o importante é mostrar ao usuário que é clicável. Além disso, sempre utilize a propriedade “cursor: pointer” em elementos clicáveis.

bom:

Image for post
Image for post
Image for post
Image for post

ruim:

Image for post
Image for post

Dica 6: Use placeholders e máscaras nos formulários

Placeholders são uma excelente dica para o usuário sobre o que ele deve inserir naquele input do formulário. Isso evita muitas dúvidas que eles poderiam ter, principalmente em campos de email, telefone ou naqueles em que o dado a ser inserido exige uma formatação específica.

bom:

Image for post
Image for post

ruim:

Image for post
Image for post

Dica 7: Organize a interface de forma inteligente

As cores e a proximidade dos elementos da tela são mais importantes do que podemos imaginar.

  • Para a experiência do usuário, se um botão é verde e a sua ação é dar o submit em um formulário, ele não vai esperar que um outro botão verde faça logout do sistema. Coloque cores iguais para ações iguais, assim como no exemplo das mensagens de feedback para o usuário.
  • Organize os componentes da interface por CONTEXTO. Procure agrupar elementos semelhantes. Mantenha distantes elementos que diferem muito. Por exemplo: se o seu sistema é um blog e você tem cadastro de leitores e posts, deixe próximo tudo o que está vinculado a posts e separe de tudo o que estiver vinculado a leitores (pode ser uma simples linha, um espaçamento a mais ou qualquer estrutura que for compatível com o design)

bom:

Image for post
Image for post

ruim:

Image for post
Image for post

Dica 8: Siga o “princípio da experiência passada”

Olhando para esta tela atual do medium, onde você iria procurar uma barrinha de busca nesse momento?

Tenho certeza que 80% das pessoas vão pensar no canto superior esquerdo ou direito. A maioria dos sites seguem este padrão.

Os nossos usuários costumam buscar ações onde eles esperam encontrar, tendo em vista suas experiências passadas.

Imagine um sistema com uma barrinha de busca no canto inferior direito da tela, não da um leve desconforto? Pois é, não fuja do senso comum.

bom:

Image for post
Image for post

ruim:

Image for post
Image for post

Dica 9: Use ícones, com moderação

Alinhando com o princípio da experiência passada, ícones são uma excelente maneira de deixar claro ao usuário o que cada botão ou link faz, além de dar um aspecto melhor as telas. Mas tome muito cuidado para não escolher os ícones errados! Da mesma forma que eles podem ajudar, eles atrapalham se utilizados incorretamente. É importante lembrar que sempre que possível utilize um texto de apoio junto ao ícone.

Você pode tentar o Font Awesome, fonte de ícones grátis e fácil de usar:

Dica 10: Siga religiosamente a regra dos 3 cliques

Se o usuário precisar dar mais de 3 cliques para chegar a uma tela ou conseguir realizar uma ação no seu sistema, provavelmente ele vai achar o seu sistema cansativo, ruim ou difícil. Mantenha isso como foco.

Dica 11: Pegue um final de semana e estude os princípios de GESTALT

Os princípios de Gestalt para mim foram de suma importância no entendimento sobre como desenvolver um bom layout, design e cores. Um final de semana e algumas leituras são o suficiente, não demora muito, aqui vão algumas recomendações:

Espero que tenha gostado!
Abraços!

;)

true |> henrique

/truehenrique.com/ Artigos sobre Elixir, Ruby, carreira e desenvolvimento web.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store