User Experience (UX) e User Interface (UI)

É bem comum leigos e iniciantes acreditarem que projetar telas e desenvolver layouts é a parte fácil do processo completo de desenvolvimento de software. Porém, desde que os sistemas têm evoluido na sua capacidade gráfica, os seres humanos ganharam tantas opções para tomar decisão que pensar a interface se tornou algo que pode aproximar ou afastar o cliente do seu produto digital.

Antigamente, quando as opções de interface eram limitadas a terminais e a informações dispostas em modo majoritariamente textual, era possível focar apenas na estrutura hierárquica da informação dentro de um retângulo “simples”.

Dos anos 80/90 em diante, entretanto, os usuários ganharam opções visuais de informação (ícones), cores, movimentações, gestos, além de serem bobardeados por essas opções constantemente em desktops, notebook, celulares, TVs, videogames, dentre outros. Dessa forma, interagimos e experienciamos produtos e serviços de uma marca com muito mais frequência e consistência do que antes.

A partir de então, pensar como ocorre a experiência do usuário para definir e construir interfaces que “dialoguem” com o usuário se tornou parte importante de um processo amplo que busca a conversão deste usuário em um cliente efetivo. Surgem, então, as áreas de user experience (UX) e user interface (UI).

O que significa o termo UX?

User Experience (UX) é o campo que trata da experiência global de uma pessoa ao interagir com um produto, serviço ou sistema. Em uma formulação clássica, Nielsen e Norman definem UX como tudo aquilo que envolve a interação do usuário final com a empresa, seus serviços e seus produtos (Nielsen; Norman, 1998). Essa definição é importante porque mostra que UX não se limita à tela: inclui percepção de valor, facilidade de uso, clareza, confiança, emoção, acessibilidade, fluidez do fluxo e até a coerência entre canais.

O que a área de UX engloba?

Na literatura de Interação Humano-Computador (IHC) e Design de Interação, UX é um campo interdisciplinar. Preece, Rogers e Sharp (2023) mostram que o design de interação não trata apenas da aparência do artefato, mas do comportamento do sistema, das metas do usuário, do contexto de uso e da avaliação contínua da solução.

Garrett (2011), ao propor os “elementos da experiência do usuário”, organiza UX em camadas que vão da estratégia e escopo até a estrutura, esqueleto e superfície, mostrando que a experiência emerge de decisões articuladas, e não apenas de escolhas visuais. A Figura 1 representa alguns dos campos de atuação dos profissionais de UX.

Dessa maneira, podemos dizer que o campo de UX costuma englobar pesquisa com usuários, levantamento de necessidades, definição de personas, mapeamento de jornadas, arquitetura da informação, fluxos de navegação, modelagem de tarefas, prototipação, testes de usabilidade, acessibilidade, análise de conteúdo e avaliação da experiência real em uso. Neusesser (2023), da Nielsen Norman Group, trata UX como um campo que envolve pesquisa, design, conteúdo, avaliação e melhoria contínua da experiência, e não apenas desenho de telas.

Essa característica multivariada da área de UX é defendida por Norman (2019), que argumenta que o design deve ser centrado nas pessoas e nos problemas reais que elas enfrentam, adotando uma visão sistêmica e não apenas local. Em outras palavras, a UX é uma área que exige compreender necessidades humanas, objetivos de negócio e efeitos do sistema no ecossistema mais amplo.

O que significa o termo UI?

User Interface (UI) diz respeito à interface com a qual o usuário entra em contato direto. Em termos de IHC, trata-se do conjunto de elementos visuais e interativos que mediam a comunicação entre pessoa e sistema: botões, campos, menus, navegação, tipografia, cores, ícones, estados de feedback e padrões de interação. Shneiderman e Plaisant (2010) tratam a interface como a camada prática por meio da qual o sistema deve ser compreensível, previsível e controlável pelo usuário. Nielsen (2012), ao discutir usabilidade, reforça que a interface precisa ser fácil de aprender, eficiente, memorável, segura contra erros e satisfatória no uso.

O que a área de UI engloba?

Se UX é a experiência global, UI é a materialização operacional dessa experiência na interface. A UI engloba composição visual, hierarquia da informação, consistência entre componentes, padrões de navegação, microinterações, feedback ao usuário, estados de erro, responsividade e legibilidade. Estes elementos podem ser vistos representados na Figura 2.

As heurísticas de Nielsen são ideias muito relevantes aqui, sobretudo as que tratam da visibilidade do estado do sistema, da correspondência entre sistema e mundo real, da consistência, da prevenção de erros e do controle do usuário (Nielsen, 1994).

Em ambientes contemporâneos, o campo de trabalho de UI se conecta fortemente Design Systems (obs: não confundir com System Design, que é outra coisa). Fessenden (2021) define design system como um conjunto de padrões para gerir design em escala, reduzindo redundância e criando linguagem compartilhada e consistência visual entre páginas, plataformas e canais.

Como UX e UI se relacionam?

UX e UI não são campos teóricos rivais, mas níveis intercalados de uma mesma área. Uma UX bem pensada sem uma UI clara tende a fracassar na execução. Uma UI visualmente refinada sem uma UX coerente tende a gerar frustração, porque o usuário pode até achar a tela agradável, mas não consegue concluir tarefas com eficiência, segurança ou confiança.

Em termos simples, UX responde mais diretamente à pergunta “como a experiência funciona e é percebida?”, enquanto UI responde mais diretamente à pergunta “como a interação aparece e se materializa na interface?”.

Por isso, podemos compreender a área de UI como a expressão tangível de decisões da área de UX. Enquanto os profissionais de UX definem o que deve ser sentido, compreendido e alcançado, os profissionais de UI concretizam isso em componentes, telas, padrões e interações.

Quais artefatos esses profissionais produzem?

No campo de UX, são comuns entregáveis como relatórios de pesquisa com usuários, personas, mapas de empatia, jornadas do usuário, service blueprints, fluxos de tarefa, fluxos de usuário, arquitetura da informação, mapas do site, hipóteses de problema, critérios de sucesso, roteiros de entrevista e relatórios de testes de usabilidade.

No campo de UI, os entregáveis tendem a se concentrar mais na concretização visual e interativa da solução. São frequentes os wireframes de baixa ou média fidelidade, mockups de alta fidelidade, protótipos navegáveis, bibliotecas de componentes, style guides, especificações de interface, tokens de design e design systems.

Na Figura 3 estão representadas os elementos que precisam compor os artefatos de cada área de atuação.

É válido salientarmos que na literatura recente os wireframes e protótipos seguem entre os entregáveis mais comuns no cotidiano de profissionais, tanto de UX quanto de UI, justamente por permitirem testar rapidamente alternativas antes da implementação definitiva. Ou seja, mesmo que os artefatos sejam considerados de “uma determinada área”, ela frequentemente aparece no dia a dia de outros profissionais, conforme a Figura 4.

Qual a importância dessas áreas para o system design na engenharia de software?

No contexto da engenharia de software, o system design não trata apenas de banco de dados, serviços, filas, escalabilidade e infraestrutura. Ele também precisa traduzir requisitos humanos em comportamento sistêmico. Um sistema tecnicamente robusto pode falhar se não respeitar modelos mentais, tempos de resposta aceitáveis, acessibilidade, consistência de navegação ou clareza de feedback.

Na prática, UX e UI influenciam decisões arquiteturais relevantes. Se a jornada exige resposta imediata, o system design precisa considerar latência, cache e pré-carregamento. Se a interface depende de atualização em tempo real, a arquitetura talvez precise de eventos, websockets ou polling eficiente. Se o fluxo exige consistência entre dispositivos, o domínio, a API e o design system precisam sustentar esse comportamento.

Além disso, os artefatos de UX e UI são bons para reduzir os riscos no projeto. Muitas falhas custosas surgem quando o time implementa cedo demais uma solução técnica sem validar bem tarefas, fluxos e necessidades reais. Dessa maneira, a prototipação e os testes de usabilidade funcionam como mecanismos de validação antecipada. Eles ajudam a evitar desperdício arquitetural, retrabalho e funcionalidades tecnicamente sofisticadas, porém irrelevantes para o usuário.

Considerações finais

UX e UI são conceitos distintos, porém inseparáveis. UX possui escopo mais amplo e trata da experiência total da pessoa com o sistema. UI concentra-se na interface visível e interativa que torna essa experiência concreta.

Quando UX e UI são tratadas como parte do desenho do sistema e não como acabamento tardio, o software tende a ser mais útil, mais utilizável, mais sustentável e mais aderente aos objetivos do negócio e às necessidades reais das pessoas.

Obrigado pela leitura e bons estudos!

Referências

FESSENDEN, Therese. Design Systems 101. Nielsen Norman Group, 2021. Disponível em: <https://www.nngroup.com/articles/design-systems-101/>. Acesso em: 19 abr. 2026.

GARRETT, Jesse James. The Elements of User Experience: User-Centered Design for the Web and Beyond. 2. ed. Berkeley: New Riders, 2011. Disponível em: <https://ptgmedia.pearsoncmg.com/images/9780321683687/samplepages/0321683684.pdf>. Acesso em: 19 abr. 2026.

NIELSEN, Jakob. 10 Usability Heuristics for User Interface Design. Nielsen Norman Group, 1994, atual. 2024. Disponível em: <https://www.nngroup.com/articles/ten-usability-heuristics/>. Acesso em: 19 abr. 2026.

NIELSEN, Jakob. Usability 101: Introduction to Usability. Nielsen Norman Group, 2012. Disponível em: <https://www.nngroup.com/articles/usability-101-introduction-to-usability/>. Acesso em: 19 abr. 2026.

NIELSEN, Jakob; NORMAN, Don. The Definition of User Experience (UX). Nielsen Norman Group, 1998. Disponível em: <https://www.nngroup.com/articles/definition-user-experience/>. Acesso em: 19 abr. 2026.

NORMAN, Don. The Four Fundamental Principles of Human-Centered Design and Application. JND.org, 2019. Disponível em: <https://jnd.org/the-four-fundamental-principles-ofhuman-centered-design-and-application/>. Acesso em: 19 abr. 2026.

PREECE, Jennifer; ROGERS, Yvonne; SHARP, Helen. Interaction Design: Beyond Human-Computer Interaction. 6. ed. Hoboken: Wiley, 2023.

SHNEIDERMAN, Ben; PLAISANT, Catherine. Designing the User Interface. 4 ed. Boston: Pearson. Disponível em: <http://seu1.org/files/level5/IT201/Book%20-%20Ben%20Shneiderman-Designing%20the%20User%20Interface-4th%20Edition.pdf>. Acesso em: 19 abr. 2026.