# UX e UI design: o que são e como afetam vendas e operação URL: https://truefiction.com.br/blog/ux-ui-design-o-que-e/ Atualizado em: 2026-10-30 Publicado em: 2026-10-30 Autor: Equipe True Fiction Categoria: Marca e design (https://truefiction.com.br/blog/categoria/marca-e-design/) Resposta rápida: UX e UI design são disciplinas complementares: UX (experiência do usuário) cuida de entender, encontrar e concluir a tarefa, e UI (interface do usuário) cuida das telas. Juntos, afetam a conversão em canais de venda e reduzem erros, retrabalho e treinamento em sistemas internos. UX e UI design são duas disciplinas complementares: [UX](https://truefiction.com.br/glossario/#ux) (experiência do usuário) define se a pessoa consegue entender, encontrar e concluir o que precisa; [UI](https://truefiction.com.br/glossario/#ui) (interface do usuário) define como cada tela se apresenta e responde. Para quem vai contratar um site, um sistema ou um aplicativo, a diferença prática é esta: o visual chama atenção, mas é a experiência que determina se o cliente compra e se a equipe trabalha sem erro. ## O que é UX design e o que é UI design? UX design é o trabalho de desenhar a experiência completa de uma pessoa com um produto ou serviço; UI design é o trabalho de desenhar a interface visível com a qual ela interage. O primeiro responde "o que a pessoa precisa fazer e qual o caminho mais simples"; o segundo responde "como esse caminho aparece na tela". A [Nielsen Norman Group](https://www.nngroup.com/articles/definition-user-experience/), referência em pesquisa de usabilidade, define: "User experience encompasses all aspects of the end-user's interaction with the company, its services, and its products" (a experiência do usuário abrange todos os aspectos da interação do usuário final com a empresa, seus serviços e seus produtos). O mesmo texto dá um exemplo: um site de resenhas de filmes pode ter uma busca impecável e ainda oferecer uma experiência ruim se o acervo não tiver o filme procurado. A interface é parte importante da experiência, mas não é a experiência inteira. ### Com o que o UX design e o UI design trabalham? Cada disciplina tem seu próprio material de trabalho. Na prática, o UX design trabalha com: - **Pesquisa:** quem usa, em que contexto, com quais dúvidas e restrições. - **Arquitetura de informação:** como o conteúdo e as funções se organizam e se nomeiam. - **Fluxos:** a sequência de passos para concluir cada tarefa importante. - **Protótipo e teste:** simulações que permitem validar antes de construir. O UI design, ou design de interfaces, trabalha com: - **Layout e hierarquia visual:** o que aparece primeiro e o que fica em segundo plano. - **Componentes:** botões, campos, tabelas, filtros, mensagens, com regras de uso consistentes. - **Tipografia, cor e espaçamento:** legibilidade, contraste e coerência com a marca. - **Estados e feedbacks:** carregando, vazio, erro, sucesso, desabilitado. ### O que é usabilidade? Usabilidade é outro termo que aparece junto com UX e UI. Segundo a [Nielsen Norman Group](https://www.nngroup.com/articles/usability-101-introduction-to-usability/), usabilidade é um atributo de qualidade que mede quão fácil é usar uma interface, com cinco componentes: facilidade de aprendizado, eficiência, memorização, erros e satisfação. ## Qual a diferença entre UX e UI? **A diferença entre UX e UI é de escopo.** UX cuida do caminho e do resultado da tarefa, e UI cuida da aparência e do comportamento de cada elemento nesse caminho. Em projetos pequenos e médios, os dois costumam ser feitos pela mesma equipe. ### Comparativo: UX design e UI design | Aspecto | UX design | UI design | | --- | --- | --- | | Pergunta central | A pessoa consegue concluir o que precisa? | A tela é clara, legível e consistente? | | Foco | Fluxos, tarefas, arquitetura de informação | Layout, componentes, tipografia, cores, estados | | Entregáveis típicos | Mapa de jornada, fluxos, wireframes, protótipo navegável, relatório de teste | Telas finais, biblioteca de componentes, guia de estilo, especificações para desenvolvimento | | Quando entra | Antes e durante: define o que será construído | Depois dos fluxos validados: define como será construído visualmente | | Erro comum quando falta | Telas bonitas que levam a pessoa ao lugar errado | Fluxo lógico, mas confuso de ler e inconsistente entre telas | | Como avaliar | Taxa de conclusão, tempo por tarefa, erros | Consistência, contraste, legibilidade, aderência à marca | Um ponto de atenção para quem contrata: UI não é sinônimo de identidade visual. A identidade define a marca (logotipo, cores, tipografia institucional); o UI aplica essa base a telas funcionais, com regras para tabelas, formulários e mensagens de erro que a identidade não cobre. Se a sua empresa ainda não tem essa base, vale ler nosso guia sobre [o que é identidade visual](https://truefiction.com.br/blog/o-que-e-identidade-visual/). ## Por que UX e UI design importam para receita e para custo operacional? **UX e UI design afetam receita porque reduzem o atrito entre a intenção do cliente e a compra, e afetam custo porque reduzem erro, retrabalho e tempo de treinamento.** Cada passo confuso tem um preço, seja uma venda perdida, seja uma hora de trabalho desperdiçada. ### Como a experiência afeta conversão e confiança em sites e lojas? Em canais de venda, a experiência do usuário pesa em dois momentos: quando a pessoa decide se confia na empresa e quando tenta concluir a ação (pedir orçamento, agendar, comprar). O [Baymard Institute](https://baymard.com/lists/cart-abandonment-rate), que pesquisa usabilidade de e-commerce há mais de uma década, calculava em setembro de 2025 uma taxa média de abandono de carrinho de 70,22%, com base em 50 estudos. Na [mesma compilação de 2025 do Baymard](https://baymard.com/lists/cart-abandonment-rate), 18% dos compradores dos Estados Unidos desistiram porque o site exigia criar conta, e 17% por um checkout longo ou complicado. Na mesma atualização de setembro de 2025, o [Baymard estima](https://baymard.com/lists/cart-abandonment-rate) que um checkout melhor desenhado pode elevar a taxa de conversão de grandes lojas em 35,26%. É uma estimativa para lojas grandes, não uma promessa para qualquer negócio, mas mostra o que se perde com formulários longos, custos que aparecem tarde e mensagens de erro pouco claras. Para sites institucionais e páginas de captação, os pontos de atrito costumam ser outros: - Proposta de valor que não fica clara nos primeiros segundos. - Formulário de contato com campos demais ou sem explicação do que acontece depois. - Navegação organizada pela estrutura interna da empresa, e não pelas dúvidas do cliente. - Experiência no celular tratada como versão reduzida do desktop. Se o seu projeto é um site, o guia sobre [quanto custa um site profissional](https://truefiction.com.br/blog/quanto-custa-um-site/) detalha como o escopo de UX entra no investimento, e o comparativo entre [landing page ou site](https://truefiction.com.br/blog/landing-page-ou-site/) ajuda a decidir o formato antes de desenhar as telas. ### Como a experiência reduz erros e treinamento em sistemas internos? O design de sistemas internos costuma ser esquecido porque "o funcionário é obrigado a usar". É justamente o motivo para investir: a equipe repete as mesmas telas dezenas de vezes por dia, e qualquer ineficiência se multiplica. A [Nielsen Norman Group](https://www.nngroup.com/articles/usability-101-introduction-to-usability/) trata a usabilidade de intranets como questão de produtividade: o tempo que o funcionário passa perdido ou decifrando instruções é folha de pagamento desperdiçada. O artigo argumenta que dobrar a usabilidade de um sistema interno equivale, em efeito, a reduzir pela metade o custo de treinamento ou dobrar as transações concluídas por hora. Os sintomas de um sistema interno com problema de UX são fáceis de reconhecer: - Planilhas paralelas porque "no sistema é mais demorado". - Erros recorrentes nos mesmos campos (CPF, código de produto, data de entrega). - Novo colaborador que depende de um colega experiente por semanas. - Chamados de suporte que, na verdade, são dúvidas sobre onde clicar. - Telas com todos os campos visíveis ao mesmo tempo, mesmo os raramente usados. Esse é um dos argumentos centrais quando a empresa avalia [sistema sob medida ou software pronto](https://truefiction.com.br/blog/sistema-sob-medida-ou-software-pronto/): um sistema próprio permite desenhar a interface em torno do processo real da equipe, e não o contrário. ## Quais heurísticas de usabilidade todo gestor deveria conhecer? **As heurísticas de usabilidade são dez princípios gerais, publicados por Jakob Nielsen em 1994 com base em trabalho com Rolf Molich, que servem para avaliar qualquer interface sem precisar ser designer.** São regras práticas, não normas rígidas. A lista abaixo segue as [10 heurísticas da Nielsen Norman Group](https://www.nngroup.com/articles/ten-usability-heuristics/), com uma pergunta que o gestor pode fazer ao revisar qualquer tela: 1. **Visibilidade do status do sistema:** a pessoa sabe o que está acontecendo? O pedido foi salvo, está processando, deu erro? 2. **Correspondência entre o sistema e o mundo real:** a tela usa as palavras do cliente e da equipe, ou o jargão do fornecedor do software? 3. **Controle e liberdade do usuário:** dá para desfazer, voltar ou cancelar sem perder o trabalho? 4. **Consistência e padrões:** o mesmo botão tem o mesmo nome e lugar em todas as telas? 5. **Prevenção de erros:** o sistema impede o erro antes de ele acontecer, por exemplo com máscaras de campo e confirmação antes de excluir? 6. **Reconhecer em vez de lembrar:** as opções estão visíveis, ou a pessoa precisa decorar códigos? 7. **Flexibilidade e eficiência de uso:** usuários frequentes têm atalhos, filtros salvos, ações em lote? 8. **Design estético e minimalista:** cada elemento na tela é necessário para a tarefa daquele momento? 9. **Ajudar a reconhecer, diagnosticar e corrigir erros:** a mensagem diz o que deu errado e como resolver, em linguagem simples? 10. **Ajuda e documentação:** quando a pessoa precisa de ajuda, ela encontra no contexto da tarefa? Uma revisão heurística não substitui teste com usuários, mas é um bom primeiro filtro: pode ser feita em poucas horas e revela problemas que a equipe deixou de enxergar por hábito. ## Como funciona um projeto de UX/UI? **Um projeto de UX/UI segue cinco etapas: entender quem usa e o que precisa fazer, desenhar os fluxos, prototipar as telas, testar com pessoas reais e só então especificar a interface final.** A profundidade varia com o tamanho do projeto, mas pular etapas costuma sair mais caro depois. **1. Pesquisa e entendimento.** Entrevistas com usuários e com quem opera o processo, análise de dados existentes ([analytics](https://truefiction.com.br/glossario/#analytics), chamados de suporte, reclamações) e revisão do que já existe. Em um sistema interno, observar a equipe trabalhando por algumas horas ensina mais do que qualquer reunião. **2. Fluxos e arquitetura de informação.** Mapeamento das tarefas críticas, passo a passo, e definição de como o conteúdo e as funções se organizam. Aqui se decide o que fica em cada tela e o que pode ser eliminado. **3. Wireframes e protótipo de interface.** Primeiro, esboços de baixa fidelidade para validar estrutura; depois, um protótipo navegável, ou seja, uma simulação clicável das telas. Mudar uma tela nessa fase é muito mais barato do que mudar código em produção. **4. Teste de usabilidade.** Pessoas reais tentam cumprir tarefas no protótipo enquanto alguém observa onde elas hesitam, erram ou desistem. Jakob Nielsen mostrou, em [Why You Only Need to Test with 5 Users (2000)](https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/), que cinco usuários encontravam cerca de 85% dos problemas de usabilidade. Ele recomenda vários testes pequenos, com ajustes entre eles. **5. Interface final e especificação.** Telas em alta fidelidade, biblioteca de componentes e estados (vazio, carregando, erro), com especificações claras para quem vai desenvolver. Para produtos novos, essa etapa conversa com a definição de um MVP (produto mínimo viável), que limita a primeira versão ao essencial (veja [o que é MVP](https://truefiction.com.br/blog/mvp-produto-digital/)). ### O que exigir de um projeto de UX/UI? Exija tarefas priorizadas, teste com usuários reais antes do desenvolvimento e arquivos em nome da empresa. Use esta lista ao avaliar uma proposta ou acompanhar o projeto: - [ ] As tarefas críticas estão listadas e priorizadas por escrito. - [ ] Houve conversa ou observação com quem realmente usa (cliente ou equipe), não só com a diretoria. - [ ] Existe um fluxo desenhado para cada tarefa crítica, incluindo caminhos de erro. - [ ] O protótipo é navegável e foi testado com usuários reais antes do desenvolvimento. - [ ] As telas incluem estados de vazio, carregamento, erro e sucesso. - [ ] Há uma biblioteca de componentes reutilizável, não telas soltas. - [ ] Contraste, tamanho de fonte e navegação por teclado foram verificados. - [ ] Os arquivos de design ficam em conta da sua empresa, com acesso garantido. - [ ] Foram definidas métricas e uma linha de base para comparar depois. Se você está escolhendo um fornecedor, o guia sobre [como escolher uma agência de criação de sites](https://truefiction.com.br/blog/como-escolher-agencia-de-sites/) complementa esta lista. ## O que a acessibilidade exige? O básico das WCAG Acessibilidade digital é garantir que pessoas com deficiência visual, auditiva, motora ou cognitiva consigam usar o site ou sistema. No Brasil, ela é obrigatória para sites de empresas com sede ou representação comercial no país. A exigência está no artigo 63 da [Lei Brasileira de Inclusão (Lei nº 13.146/2015)](https://www.planalto.gov.br/ccivil_03/_ato2015-2018/2015/lei/l13146.htm), que remete às boas práticas e diretrizes de acessibilidade adotadas internacionalmente. A principal referência internacional é a [WCAG 2.2](https://www.w3.org/TR/WCAG22/), publicada pelo W3C. Ela organiza os requisitos em quatro princípios: o conteúdo precisa ser perceptível, operável, compreensível e robusto. Cada critério tem um nível de conformidade (A, AA ou AAA), e o nível AA costuma ser o alvo em projetos comerciais. Alguns pontos básicos que qualquer projeto de UX e UI design deveria cobrir: - **Contraste de texto:** a [WCAG 2.2](https://www.w3.org/TR/WCAG22/) pede, no nível AA, contraste mínimo de 4,5:1 para texto normal e 3:1 para texto grande (18 pontos ou mais, ou 14 pontos em negrito). - **Texto alternativo:** imagens que transmitem informação precisam de descrição. - **Navegação por teclado:** todas as funções precisam ser acessíveis sem mouse, com foco visível. - **Formulários com rótulos:** cada campo com nome claro e mensagens de erro que indiquem como corrigir. - **Não depender só de cor:** status como "atrasado" ou "aprovado" precisam de texto ou ícone, não apenas de vermelho e verde. Acessibilidade também melhora a experiência de todos: contraste adequado ajuda quem usa o celular no sol. ## Como seria o redesenho de uma tela de pedidos? Exemplo ilustrativo O exemplo a seguir é hipotético e mostra como o processo funciona, sem descrever cliente real nem resultados reais. Imagine uma distribuidora de materiais de construção com doze vendedores internos que registram pedidos por telefone e WhatsApp em um sistema antigo. A tela de pedidos tem quarenta campos visíveis, a busca de produto exige o código interno e o desconto é digitado em um campo livre. O gestor percebe três problemas: pedidos com produto errado, descontos acima da política e um tempo longo até um vendedor novo trabalhar sem ajuda. O projeto de UX/UI poderia seguir estes passos: 1. **Observação:** acompanhar alguns vendedores durante uma manhã e registrar onde eles hesitam e quais campos realmente preenchem. 2. **Revisão heurística:** a tela falha em "reconhecer em vez de lembrar" (exige código decorado), "prevenção de erros" (desconto livre) e "design minimalista" (campos raros sempre visíveis). 3. **Novo fluxo:** busca de produto por nome ou foto com sugestão automática e cliente recorrente com último pedido pré-carregado. O desconto passa a ser escolhido dentro da faixa permitida pela política, e os campos raros ficam recolhidos em "mais opções". 4. **Protótipo navegável:** testado com cinco vendedores, incluindo dois recém-contratados, com a tarefa de registrar pedidos típicos. 5. **Ajustes:** o teste mostra que os vendedores querem ver o estoque na própria busca, o que entra na versão final. O que medir nesse cenário: tempo médio por pedido, pedidos corrigidos depois, descontos fora da política e dias até um vendedor novo trabalhar sem ajuda. Para integrar esse fluxo ao atendimento, o guia de [funil de vendas no WhatsApp](https://truefiction.com.br/blog/funil-de-vendas-whatsapp/) mostra como organizar a etapa anterior ao pedido. ## Como medir se a experiência melhorou? **Para medir se a experiência do usuário melhorou, escolha poucas tarefas críticas, registre os números antes da mudança e compare depois com os mesmos critérios.** Sem linha de base, qualquer avaliação vira opinião. ### Indicadores: métricas de experiência e onde se aplicam | Métrica | O que mostra | Onde se aplica | | --- | --- | --- | | Taxa de conclusão da tarefa | Se a pessoa consegue terminar o que começou | Sites, lojas, sistemas internos | | Tempo por tarefa | Eficiência para usuários que já conhecem a interface | Principalmente sistemas internos | | Taxa de erro | Quantos registros precisam ser corrigidos | Sistemas internos, formulários | | Conversão por etapa | Em que passo as pessoas desistem | Sites, landing pages, checkout | | Chamados de suporte por tema | Dúvidas que a interface deveria responder | Sistemas, portais, lojas | | Tempo até autonomia | Quanto tempo um novo usuário leva para trabalhar sozinho | Sistemas internos | | Satisfação declarada | Percepção de facilidade após a tarefa | Todos | Algumas recomendações práticas: - **Combine números e observação.** As métricas dizem onde há problema; o teste com usuários explica por quê. - **Meça por tarefa, não por tela.** Uma tela pode estar ótima e o fluxo completo continuar ruim. - **Separe o efeito do design de outros fatores.** Uma campanha nova ou uma mudança de preço também mexem na conversão. Por isso, a True Fiction não promete aumento de vendas: acompanhamos as métricas combinadas sem garantias inventadas. - **Repita em ciclos.** Usabilidade melhora com ajustes sucessivos, não com um único redesenho. ## Como a True Fiction pode ajudar? **A True Fiction desenha e coloca em uso interfaces para sites, lojas, produtos digitais e sistemas internos, tratando design como parte da operação, e não como acabamento.** Começamos pelas tarefas que mais pesam no seu resultado e entregamos protótipos testados, telas prontas para desenvolvimento e métricas de referência. - **[Serviço de design de interfaces (UX/UI)](https://truefiction.com.br/servicos/marca-design-e-experiencia/ux-ui-design/):** pesquisa, fluxos, protótipo navegável, teste de usabilidade e biblioteca de componentes para um site, loja ou sistema existente ou novo. - **[Desenvolvimento de produtos digitais (aplicações web)](https://truefiction.com.br/servicos/marca-design-e-experiencia/produtos-digitais/):** quando, além do design, você precisa construir uma aplicação com uma jornada central, painel administrativo e integrações avaliadas. - **[Desenvolvimento de sistemas internos e portais](https://truefiction.com.br/servicos/operacoes/sistemas-internos-e-portais/):** sistemas e portais desenhados em torno do processo real da equipe, para reduzir erros, retrabalho e tempo de treinamento. Os arquivos de design, as contas e a documentação ficam em nome da sua empresa, com escopo, exclusões e critérios de aceite definidos por escrito. Se você ainda está decidindo por onde começar, o guia sobre [transformação digital na pequena empresa](https://truefiction.com.br/blog/transformacao-digital-pequena-empresa/) ajuda a ordenar as prioridades. Prazos, escopo e investimento são detalhados em reunião, depois de entender seu objetivo e o contexto da operação. Para começar, o próximo passo é [agendar uma conversa](https://truefiction.com.br/contato/). ## Perguntas frequentes **UX e UI são a mesma coisa?** Não. UX (user experience) é a experiência completa da pessoa com o produto: se ela entende o que fazer, encontra a informação e conclui a tarefa sem esforço desnecessário. UI (user interface) é a camada visível e interativa: layout, componentes, tipografia, cores e feedbacks. UX define o caminho; UI define como esse caminho aparece e responde na tela. Um projeto bom precisa dos dois. **O que faz um designer de UX/UI?** Um designer de UX/UI entende quem usa o produto e quais tarefas essa pessoa precisa cumprir, desenha os fluxos e a arquitetura de informação, cria protótipos, testa com usuários reais e entrega telas e componentes prontos para desenvolvimento. Em equipes pequenas, a mesma pessoa cobre pesquisa, fluxo e interface; em equipes maiores, essas funções se dividem. **Por que UX é importante para empresas?** UX é importante porque cada obstáculo na interface custa dinheiro: em canais de venda, vira abandono e perda de confiança; em sistemas internos, vira erro de digitação, retrabalho, chamados de suporte e treinamento mais longo. Um bom projeto de UX reduz esses atritos e torna o resultado mais previsível, sem depender de explicações verbais a cada novo usuário. **Sistemas internos também precisam de UX?** Sim. Em sistemas internos, a equipe usa as mesmas telas dezenas de vezes por dia, então cada segundo perdido e cada erro evitável se multiplicam. A Nielsen Norman Group trata a usabilidade de intranets como questão de produtividade dos funcionários. Uma interface clara diminui erros de cadastro, acelera o atendimento e encurta o tempo até um novo colaborador trabalhar sozinho. **O que é um protótipo navegável?** Protótipo navegável é uma simulação clicável das telas de um produto, feita antes do desenvolvimento. Ele permite percorrer o fluxo como se o sistema já existisse, validar com usuários e decisores e corrigir problemas quando ainda é barato mudar. Não tem banco de dados nem regras reais, mas mostra com clareza o que será construído. **Como medir se a experiência do usuário melhorou?** Defina tarefas críticas e meça antes e depois: taxa de conclusão, tempo por tarefa, número de erros, chamados de suporte relacionados e, em canais de venda, taxa de conversão por etapa. Complemente com testes de usabilidade com poucos usuários e uma pergunta simples de satisfação. O importante é ter uma linha de base antes da mudança. **UX/UI design é só deixar o site bonito?** Não. A estética faz parte, porque influencia confiança e leitura, mas o centro do trabalho é fazer a pessoa concluir a tarefa com menos esforço e menos erro. Uma tela bonita com fluxo confuso continua perdendo vendas e gerando retrabalho. ## Fontes - [Nielsen Norman Group — 10 Usability Heuristics for User Interface Design](https://www.nngroup.com/articles/ten-usability-heuristics/) - [Nielsen Norman Group — The Definition of User Experience (UX)](https://www.nngroup.com/articles/definition-user-experience/) - [Nielsen Norman Group — Usability 101: Introduction to Usability](https://www.nngroup.com/articles/usability-101-introduction-to-usability/) - [Nielsen Norman Group — Why You Only Need to Test with 5 Users](https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/) - [Baymard Institute — Cart Abandonment Rate Statistics (atualizado em setembro de 2025)](https://baymard.com/lists/cart-abandonment-rate) - [W3C — Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/) - [Lei nº 13.146/2015 — Lei Brasileira de Inclusão da Pessoa com Deficiência](https://www.planalto.gov.br/ccivil_03/_ato2015-2018/2015/lei/l13146.htm)