Um guia completo do UX (User Experience): O que é e como usar?

Um guia completo do UX (User Experience):  O que é e como usar?
29/11/2024 • ...
Vanessa Guedes
Escrito por Vanessa Guedes

Ninguém merece sofrer para usar um site ou aplicativo, certo? Embora muita gente ainda passe por apertos na hora de usar interfaces digitais, esse tipo de problema tem sido superado com a ajuda do UX – do inglês “user experience” ou experiência do usuário. O UX é sobre desenvolver experiências digitais que sejam fáceis de desfrutar.

Neste artigo, vamos discutir o que é UX na prática, apresentar suas principais funções e mostrar como qualquer pessoa pode usar esses conceitos nos projetos da sua empresa.

Diagrama simples mostrando UX como um círculo central em roxo, conectado a três áreas principais: pesquisa, design e estratégia de conteúdo, representadas por círculos em rosa.
Fonte: blog Chief of Design

O que é User Experience?

A experiência do usuário é um campo que mistura tecnologia da informação, marketing e design. De modo prático, o UX é um conjunto de boas práticas e recomendações para desenvolver e construir interfaces digitais focadas nos usuários.

Pode parecer redundante falar sobre desenvolver interfaces focando no usuário, afinal, não é esse o objetivo de qualquer interface? Bom, mais ou menos. Qualquer um pode criar uma interface e não seguir nenhuma lógica ou regra pré-estabelecida em sua organização e design. O que chamamos de UX é uma coleção de estratégias que levam em conta uma apresentação coerente e compreensível do universo proposto para quem vai usar seus recursos, ou desfrutar dessa experiência, cuidando para que o usuário esteja sempre bem situado em um contexto de acordo com seus objetivos.

Por isso o universo de UX é tão vasto, usa-se esse termo para falar de um grande número de possibilidades, métodos e ações relacionadas à experiência de usuário.

UX Vs. UI: Qual é a diferença?

A sigla UI significa “user interface”, interface do usuário. Ela se refere a todos os componentes visuais que formam uma interface. Uma UI pode conter layouts de páginas, anúncios, banners, todo tipo elementos de interação, como botões, formulários, etc. Sua apresentação depende de vários aspectos que foram pesquisados e usados para proporcionar uma certa experiência de quem usa a aplicação. Esses aspectos são levantados e definidos pela experiência de usuário que se espera dessa interface. 

Ou seja, o UX é a estratégia por trás da UI. Usando as duas técnicas em conjunto, há grandes chances de se proporcionar a experiência desejada aos usuários.

Qual é a importância da UX?

A UX é importante para garantir uma experiência consistente do início ao fim de uma jornada de usuário. Ela garante que exista coerência no universo apresentado a esse usuário e que ele possa desfrutar dos recursos oferecidos da melhor forma possível.

Um estudo de UX bem aplicado a um planejamento pode resolver problemas, gerar conexão e potencializar a sensação de satisfação dos clientes.

Os 5 elementos da Experiência do Usuário

Em 2002, o especialista em UX, Jesse James Garrett, listou o que seriam os principais elementos da experiência do usuário no livro The Elements of User Experience: User-Centered Design for the Web Organizados – ou Os elementos da experiência de usuário: design centrado no usuário para organizações web. Como se fossem camadas, esses elementos devem ser explorados em diferentes momentos do processo de desenvolvimento de uma estratégia de UX.

Abaixo, descrevemos brevemente cada um deles.

Estratégia

A estratégia serve para entendermos quais necessidades estamos atendendo ou quais problemas queremos resolver. É nesse ponto que deve-se fazer as perguntas:

  • o que queremos?
  • o que nossos usuários querem?
  • como faremos para melhor atender as expectativas de todos os envolvidos?

Nessa fase você identifica objetivos, necessidades e desejos. A estratégia serve para calibrar a motivação e determinar prioridades. E você pode usar a camada de estratégia tanto para um novo projeto como para um projeto que esteja em andamento. No primeiro caso, você deve começar por uma pequena pesquisa de audiência ou mercado, e dali começar a desenhar soluções. No segundo caso, você analisa a situação atual, determina aonde quer chegar e desenha o plano para chegar de um ponto a outro.

Escopo

Chegou a hora de testar o que desenhamos na fase de estratégia. É no escopo que “damos corpo” ao projeto, definindo elementos tangíveis como resultados. Nessa fase, fazemos a definição dos produtos e serviços que vamos oferecer aos usuários.

  • Faça uma lista das funcionalidades do produto ou serviço;
  • Entenda quais são os requisitos;
  • Estabeleça prioridades.

De um modo bem prático, o escopo vai guiar as fases seguintes. Então, se o seu projeto é um aplicativo de celular, por exemplo, é no escopo que você define os detalhes do que esse aplicativo faz, quais as limitações etc. 

Em resumo, o escopo é o fundamento do projeto. Veja aqui um exemplo que criamos para exemplificar a fase de escopo:

"Resumo de escopo para um aplicativo de lista de tarefas, destacando funcionalidades como adicionar tarefas, categorização por prioridade, alarmes, personalização com cores/ícones e integração com calendários. Interface minimalista com foco em acessibilidade e usabilidade."
Aqui há um exemplo fictício de um escopo resumido para um aplicativo de tarefas

Estrutura

Aqui, nós elaboramos como vamos traduzir e organizar os produtos do nosso escopo. Quais plataformas iremos usar? Por quê? Como é esse ambiente? Como os usuários vão navegar nas diferentes fases, mudanças e novos contexto que podem se apresentar?

É na fase de estrutura que escolhe-se os meios práticos de tornar uma ideia a realidade concreta. Seguindo o exemplo do projeto de aplicativo de criação e organização de tarefas usado na seção acima, na estrutura, você poderia definir:

  • o fluxo de criação e edição de tarefas;
  • interações entre funcionalidades;
  • questões legais sobre armazenamento de dados de usuário;
  • plataforma ou linguagem de programação para fazer o app.

Esqueleto

O elemento do esqueleto é simplesmente a fase de desenhar os primeiros protótipos de uma interface. É aqui que fazemos:

  • Arquitetura da informação. É uma área de estudos gigantesca que descreve como organizar informações. No contexto da UX, a arquitetura da informação define a estrutura do conteúdo de um site, por exemplo; com ela você pode categorizar a importância de certos conteúdos e organizá-los de tal forma que o usuário também entenda essa hierarquia.
  • Wireframe. Os wireframes são rascunhos da aparência de um site, newsletter, aplicativo, etc.
  • Sitemap. O nome é autoexplicativo; mapa do site. Apresenta a estrutura do conteúdo, como eles se conectam entre si dentro de um site ou aplicativo. Muitas vezes o sitemap é desenhado em forma de árvore, como se as páginas fossem galhos e ramificações, distribuídas em níveis conforme a hierarquia da informação do site.
Esboço de um fluxo de telas de um aplicativo ou site, mostrando etapas como login, tela inicial, resultados de busca, visualização detalhada, tela de avaliação e confirmação final com a mensagem 'Saved'
Exemplo de wireframe para um aplicativo, da Mind Consulting

Nessa fase, também vale a pena começar a pensar na sua estratégia de SEO (otimização de busca). Para isso, leia nosso guia “SEO para iniciantes”.

Superfície

A fase de superfície é o último estágio: o desenho final da interface. Neste momento, finalizamos toda a arte da parte visual de nossa estrutura. Os designers criam as telas, elementos como botões, detalhes, fontes, proporções, etc. Toda a parte estética acontece aqui, incluindo o conteúdo. 

Para garantir uma boa UX nessa fase, conte com uma boa estratégia de design. Assim, a produção de conteúdo inicial, que vai preencher os elementos dessa interface e dar mais contexto a ela, também é feita na fase de superfície.

💡 Dica: a essas alturas, você também já pode ter começado a desenhar estratégias de e-mail marketing. Lembre de usar a mesma identidade visual para o design do e-mail marketing.

Como aplicar UX em um site?

Conheça seu público-alvo

Grande parte do trabalho de UX é contínuo, ou seja, ele continua acontecendo mesmo depois do lançamento do produto. Parte desse trabalho contínuo é acompanhar de perto o público-alvo e, como o nome já diz, observar a experiência do usuário ao utilizar seu produto. Para isso, existem recursos como:

  • Entrevistas. A pesquisa é uma grande aliada da UX. Ela permite que você converse com as pessoas e escute o que elas esperam, precisam e desejam. 
  • Pesquisa de opinião. Perguntar sobre a experiência das pessoas usando seu produto é crucial para continuar melhorando. Conduza breves pesquisas de tempos em tempos e acompanhe as mudanças.
  • Análise de dados. A maioria das ferramentas de e-mail marketing, ecommerce e construção de sites tem uma funcionalidade de coleta de dados de uso. Você pode usar esse levantamento demográfico para mapear o comportamento de certos grupos e entender melhor como determinados perfis se comportam.

Defina a Arquitetura da Informação

Organize o conteúdo do site antes de começar o design final. De forma pŕatica:

  1. Faça uma lista de todos os conteúdos que o projeto precisa (páginas, textos, formulários, fluxos, botões, elementos visuais etc);
  2. Crie hierarquias entre esses conteúdos, agrupe-os e categorize-os;
  3. Crie contextos de uso;
  4. Desenhe um mapa, sitemap, mostrando como esse conteúdo está agrupado;
  5. Por fim, desenhe wireframes para representar a arquitetura criada.

Projete a Interação

Você pode projetar os tipos de interação que os usuários vão ter com o site. Para isso, use o material da arquitetura de informação para entender essas interações e projete-as de maneira intencional.

Acessibilidade web

Acessibilidade web é o conjunto de práticas que torna um site disponível e prático para todas as pessoas. Pense na acessibilidade do site desde o início: um dos princípios da UX é maximizar o acesso para o maior número de pessoas, por isso é sempre necessário levar em conta o nível de acessibilidade de um site.

WCAG

A W3C, consórcio global que define os padrões da web, criou o WCAG para ajudar designers e desenvolvedores web a produzirem sites acessíveis. O WCAG é uma sigla em inglês que quer dizer “guia de acessibilidade para conteúdo web”. 

A W3C Brasil criou uma cartilha com orientações do WCAG em português.

E para entender melhor a acessibilidade no contexto da UX, recomendamos a leitura do material do UX Collective: Guia básico de acessibilidade digital.

Garanta Responsividade

Um site responsivo é um site que funciona bem em vários tipos de tela. Para desenvolver um site responsivo, é necessário testar as interfaces no maior número de telas possíveis.

Hoje em dia, a maioria dos navegadores de internet contêm uma funcionalidade de “inspecionar” a página atual, onde você pode emular diferentes tipos de telas. 

Observe:

Gif animado de um site com design em tons de roxo, apresentando o 'Blog da Selzy'. O cabeçalho inclui opções de navegação como Plataforma, Preços, Soluções e Recursos. O site tem suas dimensões reduzidas e aumentadas conforme mudam as opções no campo de redimensionamento da tela."
Veja o blog da Selzy redimensionado no inspetor de código do navegador

Optimize o Tempo de Carregamento

Quando o usuário abre uma nova página, ele espera que o conteúdo esteja disponível quase instantaneamente. Mas, mesmo no espaço de menos de 1 segundo, um site tem uma certa ordem de carregamento de elementos. Para proporcionar uma experiência mais eficiente, gerencie esse tempo de carregamento com técnicas de otimização:

  • Minificar arquivos de base, como CSS, HTML, Javascript. Mais informações sobre como fazer isso neste artigo.
  • Comprimir imagens. Entenda mais sobre compressão de imagens aqui.
  • Carregar scripts no final da página. Assim, você prioriza elementos visuais, que causam mais impacto no usuário e vão abrir primeiro. 

Use bem os elementos visuais

Na hora de elaborar o design final do site, leve em consideração todos os dados que você levantou nas fases de estratégia e escopo da UX. Leve em conta:

  • A hierarquia visual. Use a arquitetura da informação para entender a hierarquia mais adequada para os usuários.
  • Uma paleta de cores que condiz com o projeto.
  • A escolha de fontes tipográficas.
  • Fluxo de informação na tela.
  • Um design consistente.

Uma dica extra: landing pages são ótimos exemplos sobre como aplicar bem a hierarquia visual de um produto. Elas geralmente são mais simples do que um website e tem uma aplicação de bons princípios de design.

Implemente feedback visual

Existem inúmeras formas de dar feedback e orientar usuários sobre como interagir com a plataforma. Em UX, proporcionar contexto é crucial. Em termos de interface, esse contexto pode ser dado de várias formas, seguindo diferentes princípios e práticas de UI. 

Uma delas é o feedback visual, isto é, elementos que aparecem na tela conforme ações do usuário. Exemplo: em um formulário, quando um campo obrigatório não é preenchido, uma linha vermelha aparece em torno da caixa de preenchimento, alertando uma informação incompleta. 

Esse tipo de feedback visual ajuda as pessoas navegarem pelas interfaces.

Realize Testes de Usabilidade

Testar como um produto vai ser usado por um usuário final é etapa indispensável de qualquer projeto UX. No caso de interfaces digitais, convém:

  • Testar com vários perfis diferentes de usuários.
  • Observar pessoas diferentes usando a mesma interface, sem interrompê-las.
  • Criar cenários e tarefas específicos para testes.
  • Listar o feedback das pessoas durante e após o teste.

Testes de usabilidade são ajustáveis, tente adaptar os cenários e escute os feedbacks. 

Próximos passos com UX

Pronto, agora você tem um panorama básico do que se trata UX. Espero que tenha sido uma boa entrada para conhecer as técnicas 🙂

Existem muitos profissionais de UX no Brasil e alguns deles estão no UX Collective Brasil. Um jeito de continuar usando estratégias focadas no usuário é acompanhar as reflexões desse pessoal e descobrir mais ferramentas que o mundo do UX dispõe.

Boa sorte nos projetos!

Artigo escrito por
Vanessa Guedes
Vanessa Guedes escreve a newsletter Segredos em Órbita. É programadora, podcaster no Incêndio na Escrivaninha e editora na Eita! Magazine. Também escreve ficção especulativa.
Saiba mais Vanessa
Artigos mais recentes