Quem entra no mundo dos aplicativos logo esbarra nas siglas UX e UI, muitas vezes usadas como se fossem sinônimos. Não são. Entender a diferença ajuda a planejar melhor as telas, a conversar com designers e a evitar que o app fique bonito, mas difícil de usar.
UX: a experiência de ponta a ponta
UX vem de User Experience, ou experiência do usuário. Ela cobre tudo o que acontece entre a pessoa e o produto: encontrar o app, entender o que ele faz, criar a conta, realizar a tarefa principal, errar e voltar atrás, pedir ajuda. Perguntas de UX são do tipo:
- A pessoa entende o que fazer na primeira tela?
- Quantos toques ela precisa para concluir a tarefa principal?
- O que acontece se ela errar um dado?
- Ela se sente segura e no controle?
UX é sobre o fluxo, a lógica e o conforto. Um app com ótima UX parece “óbvio”, porque a pessoa chega ao resultado sem pensar muito.
UI: a interface que a pessoa vê e toca
UI vem de User Interface. É a camada visual e interativa: cores, tipografia, ícones, espaçamentos, botões, animações, a aparência de cada componente. Perguntas de UI são do tipo:
- Os botões são fáceis de identificar e de tocar?
- O texto é legível, com tamanho e contraste suficientes?
- As telas seguem o mesmo estilo de ponta a ponta?
- A marca aparece sem atrapalhar a leitura?
Uma analogia simples: numa casa, a UX é a planta e a circulação (se dá para ir da cozinha à sala sem tropeçar) e a UI é o acabamento e a decoração.
Princípios básicos que valem para qualquer app
Você não precisa ser designer para acertar o básico. Estes princípios são estáveis há anos e valem tanto para um app simples quanto para um produto grande:
- Clareza: cada tela tem uma finalidade principal, e ela fica evidente. Um botão de destaque por tela costuma bastar.
- Consistência: o mesmo tipo de ação tem sempre a mesma aparência e o mesmo lugar. Quem aprende uma tela entende as outras.
- Hierarquia visual: o que é mais importante aparece maior, com mais contraste ou mais perto do topo.
- Feedback: quando a pessoa toca em algo, o app responde (botão que muda, indicador de carregamento, mensagem de sucesso).
- Prevenção de erros: em vez de só mostrar um erro depois, ajude a evitá-lo, com teclado numérico para telefone, formato de data sugerido e confirmação antes de apagar algo.
- Simplicidade: menos opções por tela, textos curtos, ações óbvias.
Cuidados que fazem diferença no celular
A tela é pequena e o dedo é grande, então alguns detalhes pesam mais do que no computador:
- Áreas de toque generosas: as diretrizes de design do Android e do iOS indicam alvos de toque de aproximadamente 44 pontos (iOS) e 48 dp (Android), medidas que levam em conta o tamanho do dedo e não a quantidade de pixels da tela. Botões minúsculos geram erros e frustração. Confira os valores atuais nas diretrizes oficiais.
- Contraste de cores: as orientações de acessibilidade da web (WCAG) sugerem uma proporção de contraste mínima de 4,5 para 1 para textos comuns. Texto cinza claro em fundo branco cansa e exclui muita gente.
- Navegação previsível: para três a cinco áreas principais, um menu fixo na parte de baixo da tela costuma funcionar bem, porque fica ao alcance do polegar.
- Formulários curtos: peça só o necessário, use o tipo de teclado adequado ao campo e permita entrar sem cadastro quando possível.
- Estados vazios, de carregamento e de erro: desenhe também o que aparece quando não há dados, enquanto o conteúdo carrega ou quando falta internet. É aí que muitos apps parecem quebrados.
Acessibilidade também é UX
Um app acessível é usado por mais pessoas. Pense em fonte que aumenta quando o usuário configura o sistema, em rótulos que leitores de tela conseguem ler, em não depender só de cor para comunicar um erro e em oferecer alternativas para quem não pode usar gestos complexos. Isso melhora a vida de pessoas com deficiência e de quem usa o celular ao sol, com pressa ou com uma mão ocupada. Também ajuda quem tem visão cansada, uma situação muito comum entre pessoas mais velhas, que são um público grande em vários tipos de app.
Como acertar sem ser designer
- Siga os guias das plataformas: o Android (Material Design) e o iOS (Human Interface Guidelines) publicam orientações gratuitas sobre componentes, espaçamento e navegação.
- Use componentes prontos: os kits de interface e as ferramentas no-code já trazem botões, listas e menus bem resolvidos.
- Desenhe antes de construir: esboce as telas no papel ou em uma ferramenta de design. O guia de Figma para iniciantes mostra como fazer isso.
- Teste com gente de verdade: o olhar de quem criou o app esconde problemas óbvios para os outros. Veja como fazer teste de usabilidade com poucas pessoas.
- Conheça seu usuário: quanto melhor você define o público-alvo e a persona, mais acertadas ficam as decisões de design.
Por onde começar
Escolha a tarefa principal do seu app, conte quantos toques ela exige hoje e tente reduzir esse número. Pergunte-se também se cada tela, cada campo e cada botão realmente precisa existir: no design de apps, quase sempre melhorar é tirar. Depois peça a uma pessoa que nunca viu o app para concluir a tarefa sem ajuda. Onde ela hesitar, há um ajuste de UX ou de UI esperando por você.