Como desenvolver um front-end agradável sem ser especialista
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):
- Foundation (https://foundation.zurb.com/)
- Bootstrap (https://getbootstrap.com/)
- Semantic UI (https://semantic-ui.com/)
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:
ruim:
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:
ruim:
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:
ruim:
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:
ruim:
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:
ruim:
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:
ruim:
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!
;)
