Texto cinzento minúsculo sobre um fundo carregado. Os olhos cansam-se antes de acabares a primeira frase. É por isso que UI vs UX importa para a tua marca. Quando o esquema e a cor lutam contra a mensagem, as pessoas vão-se embora sem te dizer porquê.
UI vs UX compara o aspeto da interface com a experiência global e o sucesso nas tarefas. Este capítulo explica o que isso quer dizer em linguagem simples, porque afeta o teu website e o teu marketing, e como aplicar sem te perderes em jargão. Vais ver também como o que é UX design se encaixa no mesmo quadro. Vamos passo a passo.
Perceber UI vs UX
UI vs UX compara o aspeto da interface com a experiência global e o sucesso nas tarefas.
O que é UX design e o que é UI sobrepõem-se em sites pequenos, mas separam-se nas aplicações.
Os bons produtos precisam de fluxos fáceis de usar e de elementos visuais claros.
Como escolher o que combina com a tua marca
Corrige os passos confusos do checkout antes de polires as cores dos botões.
Compara o teu site atual com testes de usabilidade e princípios de design de UI para detetares falhas depressa.
Escreve duas regras que vais seguir em cada página nova, para as decisões ficarem consistentes.
Lista prática para usares hoje
Corrige os passos confusos do checkout antes de polires as cores dos botões.
Quando reveres uma página, pergunta se UI vs UX se nota logo no primeiro scroll no telemóvel. Se não, reordena as secções antes de polires os detalhes.
Guarda capturas de ecrã antes e depois das alterações, para perceberes o que fez diferença em UI vs UX no teu site.
Partilha esta lista com quem atualiza o teu site, para que o que é UX design se mantenha consistente nas páginas novas.
Escolhe uma métrica para acompanhar este mês, como o tempo na página ou os formulários iniciados, para as alterações de design ficarem ligadas aos resultados do negócio e não só ao gosto.
Como este tema se liga ao resto da tua marca
As escolhas visuais raramente ficam numa só página. O que é UX design e o que é UI sobrepõem-se em sites pequenos, mas separam-se nas aplicações.
As tuas publicações nas redes sociais, os emails e os materiais impressos devem repetir a mesma hierarquia, as mesmas cores e as mesmas regras de tipografia que usas na web.
Quando o visual da marca se desvia, os clientes sentem uma pequena dissonância, mesmo que não a saibam explicar.
Usa o design centrado no utilizador para comparar ideias com um capítulo relacionado deste módulo.
Os bons produtos precisam de fluxos fáceis de usar e de elementos visuais claros.
Perguntas comuns que as pessoas esquecem
Termos secundários como o que é UX design e o que é UI ajudam-te a procurar exemplos mais profundos e a comparar o teu trabalho com os padrões comuns.
O que é UX design e o que é UI sobrepõem-se em sites pequenos, mas separam-se nas aplicações.
Escreve uma alteração, com antes e depois, que vais testar numa página real esta semana. Pequenas edições medidas valem mais do que planos vagos.
Ensinar à tua equipa um vocabulário comum sobre UI vs UX reduz as rondas de revisão com designers e agências.
Ferramentas que facilitam as atualizações visuais
Não precisas de código à medida para melhorar muitos problemas de esquema e de estilo. Um editor visual permite ajustar espaçamento, cores e tipografia enquanto vês a pré-visualização em telemóvel e computador.
O WEMASY inclui um criador de websites com edição visual, para publicares alterações sem esperares por um programador em cada pequeno ajuste. Abre o criador de websites quando estiveres pronto para aplicar o que aprendeste.
Quando publicares atualizações, revê testes de usabilidade e princípios de design de UI para o módulo continuar ligado na tua cabeça.
Já tens uma lente de trabalho para UI vs UX. Usa-a quando reveres o teu site, aprovares materiais de marketing ou deres instruções a um designer. Continua com princípios de design de UI e design centrado no utilizador para manteres o ritmo neste módulo.
Aprender UI vs UX é uma competência que se ganha aos poucos. Volta a este capítulo depois de publicares uma melhoria, para as ideias passarem da leitura ao hábito. Pequenas revisões repetidas valem mais do que decorar todas as regras de uma vez. Mantém notas sobre o que funcionou com o teu público, para a próxima atualização ser mais rápida.
Perguntas frequentes
Quanto tempo leva a melhorar UI vs UX?
A maioria das pequenas empresas vê páginas mais claras em poucas sessões focadas, depois de aplicar o essencial deste capítulo. Começa pela página inicial e depois leva as mesmas regras para as páginas de serviços e de contacto.
Precisas de um designer para trabalhar UI vs UX?
Um designer ajuda em redesenhos de marca complexos, mas muitas correções de UI vs UX podem ser feitas por ti, quando sabes o que procurar. Usa testes de usabilidade junto com este capítulo para teres mais orientação.
O WEMASY pode ajudar-te a aplicar UI vs UX no teu website?
O WEMASY inclui um editor visual no criador de websites, para ajustares esquema, cores e tipografia sem código. Abre o criador de websites para atualizares modelos e veres as alterações no telemóvel.
Qual é o erro mais comum com UI vs UX?
As pessoas tentam corrigir tudo de uma vez em vez de uma página de cada vez. Escolhe uma só prioridade, como a legibilidade ou o contraste, e depois consulta os princípios de design de UI para a melhoria seguinte.
Como se liga UI vs UX ao SEO?
Uma hierarquia visual clara e um texto legível mantêm os visitantes mais tempo na página, o que reforça os sinais de envolvimento que os motores de pesquisa observam. Junta as correções de design a uma boa estrutura de conteúdo para teres os melhores resultados.
O que deves aprender a seguir depois de UI vs UX?
Continua com testes de usabilidade e princípios de design de UI neste livro, para construíres um sistema visual completo para a tua marca online.