Design de UX vs. UI. Por onde devo iniciar?

Bem, para começar, não é possível construir um website sem ambos. A sensação da experiência do usuário é tão importante quanto a aparência da interface do usuário.

Portanto, na realidade, todos nós que trabalhamos como designers web utilizamos tanto o design de UI quanto o design de UX ao criar websites. Dito isto, se estivermos discutindo sobre as disciplinas formais de UI e UX, trata-se de uma questão completamente distinta. E, se você está aqui, é possível que esteja ponderando se uma dessas carreiras é adequada para você.

Quanto à escolha de qual seguir, não há uma resposta simples para isso. Qualquer pessoa que esteja considerando tornar-se um designer web precisa determinar isso por si mesma. Portanto, é para isso que serve o guia a seguir.

Como Evitar Armadilhas de UX e Aumentar as Conversões

Índice

Design de UX vs. UI: Qual é a Diferença?

Comecemos com as diferenças fundamentais entre os dois princípios de design:

O que é Design de Experiência do Usuário (UX)?

O design de experiência do usuário está relacionado ao quão bem um website funciona:

  • Como os usuários se sentem em relação ao website?
  • Quão fluida é a navegação dos usuários pelo site?
  • Quão fácil é para os usuários atingirem seus objetivos?

O design de UX é uma abordagem centrada no ser humano para o design web. Por essa razão, os designers de UX dependem fortemente de pesquisa e testes a fim de descobrir o que seu público necessita, o que valoriza e o que lhes causa desconforto — e então projetar uma solução ideal em torno disso.

O objetivo final é criar um website que o usuário considere utilizável, útil e valioso.

O que é Design de Interface do Usuário (UI)?

O design de interface do usuário está relacionado à estética do website:

  • Os usuários o consideram atraente?
  • Os elementos interativos são intuitivos?
  • O design parece natural e provoca uma resposta positiva?

O design de UI é o lado visual do design web. É responsabilidade do designer de UI aperfeiçoar os mínimos detalhes em um website: paletas de cores, combinações de fontes, imagens, formulários, menus, animações ativadas por hover, botões e mais.

Os designers de UI dependem de pesquisas e tendências de design, análise da indústria e princípios de design web para criar uma interface e interações com as quais os usuários se sintam confortáveis e confiantes ao utilizar.

Quais são as Atribuições de um Designer de UX?

Se você deseja construir um website que atraia os tipos corretos de visitantes e os leve a fazer o que você deseja, então ele deve ser construído especificamente para eles.

Obviamente, os objetivos da marca também precisam ser atendidos. No entanto, essas metas jamais serão alcançadas se o website for incapaz de converter visitantes. É por isso que os designers de UX são uma parte inestimável do processo de design web.

Eles aprimoram as chances de sucesso de uma marca ao projetar a partir da perspectiva do usuário.

Objetivos

Os designers de UX têm um objetivo duplo:

  • Projetar experiências de website sem atritos e centradas no usuário
  • Auxiliar seus clientes a atingir seus objetivos de negócio através do website

Responsabilidades Principais

Pode ser mais preciso referir-se aos designers de UX como especialistas em UX. Embora eles tenham participação na concepção de wireframes e protótipos de baixa fidelidade para um website, a maior parte do que fazem envolve pesquisa, teste e validação.

Vamos examinar suas responsabilidades:

Pesquisa

Há diversas maneiras pelas quais os designers de UX coletarão dados a fim de formar hipóteses de trabalho para o website.

A análise de concorrentes é uma parte disso e é especialmente útil se você estiver construindo um website para uma nova marca com pouco ou nenhum dado de cliente para se basear.

Estatísticas do setor é outra métrica útil na fase de pesquisa. Os designers de UX utilizam esses dados para aprender mais sobre o público, identificar tendências do setor e mais.

Dependendo do tamanho do website, alguns designers de UX também conduzirão pesquisa de campo. Através de pesquisas e entrevistas com usuários, os designers aprenderão em primeira mão sobre quem são os usuários-alvo, suas dores e suas motivações.

Personas de Usuário

Uma persona de usuário é um usuário fictício que os pesquisadores de UX criam. Eles utilizam o que aprenderam sobre o público-alvo de seu cliente e usam essas características para construir uma persona de usuário (ou personas, se tiverem vários segmentos de usuários).

Aqui está um exemplo do PersonaGenerator de como uma persona de usuário pode parecer:

1 personagenerator template Design de UX vs. UI: Qual é a Diferença? 1

Todos os tipos de detalhes precisam ser definidos. Por exemplo:

  • Demografia
  • Necessidades (em relação ao website sendo construído)
  • Desejos
  • Valores
  • Temores
  • Perfil tecnológico
  • Citações que resumem como se sentem e como soam

O propósito é criar uma representação realista do usuário para que o designer possa comercializar e vender para eles de forma mais eficaz.

Arquitetura da Informação

Os designers de UX adotam uma abordagem cuidadosamente mensurada e incremental para projetar um website. Assim, uma vez concluída a pesquisa, a arquitetura da informação será planejada.

Embora você pudesse simplesmente desconsiderar isso como planejamento do mapa do site, é muito mais do que isso.

Os designers de UX utilizam algo chamado card sorting para desenvolver a estrutura, fluxos de trabalho e organização de conteúdo ideais para o website. Esta parte do design de UX requer entrada direta dos usuários.

Wireframes

Wireframes são protótipos de baixa fidelidade de um website. Eles permitem que os designers de UX aperfeiçoem a estrutura, o layout e os fluxos de usuário do website sem se preocuparem com os detalhes.

Aqui está um exemplo de como um wireframe versus um mockup se parece:

low fidelity vs high fidelity wireframes just in mind Design de UX vs. UI: Qual é a Diferença? 2

Wireframes são tipicamente apenas estrutura básica. Em outras palavras, você vê o layout bem como os espaços reservados para onde imagens, texto e outros elementos vão na página. E é isso. Ao esboçar a fundação da página, é muito mais fácil focar em fazer escolhas de design estratégicas e criativas na fase de mockup.

Wireframes podem ser esboçados à mão, feitos usando software de wireframing ou você pode construir seus wireframes diretamente no Elementor.

Análise, Teste de Usabilidade e Iteração

Os designers de UX trabalham em um ciclo fechado. Portanto, eles não apenas formulam hipóteses sobre o que funcionará no website. Eles realmente as colocam à prova.

Há uma variedade de maneiras pelas quais os designers de UX conduzem testes de usabilidade:

  • Entrevistas presenciais
  • Pesquisas
  • Formulários de feedback do website
  • Mapas de calor
  • Gravações de sessão

À medida que coletam feedback real dos usuários e estudam as análises do website ao vivo, eles ajustam o website de acordo. O design de UX é um processo iterativo — um que visa sempre melhorar a experiência do usuário e ajudar a marca a exceder seus objetivos ao longo do tempo.

Ferramentas de Design de UX

Aqui estão algumas das ferramentas comuns que um designer de UX utilizará:

  • Ferramentas de pesquisa competitiva como SEMrush
  • Ferramentas de pesquisa do setor como SimilarWeb
  • Ferramentas de pesquisa de usuários e recrutamento de testadores como User Interviews
  • Ferramentas de wireframing e prototipagem como Figma
  • Ferramentas de teste de websites como Hotjar
  • Ferramentas de teste de usabilidade como UserZoom
  • Ferramentas de análise de websites como Kissmetrics

Como se pode imaginar com um processo tão extenso e intensivo, os designers de UX não podem realizar tudo isso por conta própria. Ou, pelo menos, não seria eficiente fazê-lo. Ter um conjunto de ferramentas de UX pode ser um verdadeiro divisor de águas nesta linha de trabalho.

O Que Faz um Designer de UI?

Não há dúvida de que a usabilidade e a utilidade de um website são importantes para os seus usuários. Mas não é apenas a experiência de navegar ou utilizar um website que tem impacto nas taxas de conversão e abandono do site.

A aparência também é um fator.

Isso é comprovado por um princípio de design web chamado Efeito Estético-Usabilidade. Basicamente, os usuários acreditam que interfaces atraentes funcionam melhor do que aquelas que não são.

Portanto, o design de UI desempenha um papel importante na solidificação dessa primeira impressão e em conduzir os usuários à experiência real que o designer de UX trabalhou tão incansavelmente para criar.

Objetivos

Os designers de UI têm uma série de objetivos:

  • Criar interfaces que capturem com precisão a personalidade, a voz e os valores da marca
  • Criar interfaces esteticamente agradáveis que provoquem uma resposta positiva do usuário
  • Projetar interfaces e interações que maximizem as conversões

Responsabilidades Principais

Os designers de UI concentram-se no que o visitante vê em um website — até os mínimos detalhes. Eles também são responsáveis por projetar as interações que mantêm os usuários engajados com o conteúdo e fluindo sem esforço de página em página.

Vamos dar uma olhada em suas responsabilidades:

Pesquisa

Os designers de UI começam com uma robusta rodada de pesquisa. Embora parte dela envolva análise do usuário (se o cliente tiver um website existente), há outras pesquisas envolvidas.

Os designers de UI conduzem pesquisa competitiva para descobrir o que as empresas líderes no setor estão fazendo com seus websites, bem como para ver como eles se parecem e como funcionam.

Eles também fazem pesquisa de design. Embora originalidade e memorabilidade sejam importantes no design de UI, a confiança dos usuários com a interface também é. E desviar-se muito das normas pode ser extremamente problemático para muitos websites.

Muito disso eles saberão de cabeça, como quais são as últimas tendências em design web e o que os padrões web atuais ditam para coisas como design responsivo, acessibilidade e padrões de codificação. Mas eles também podem precisar se atualizar sobre o que está em tendência dentro de sua indústria ou nicho.

A psicologia também é um fator importante no design de UI, então os designers de UI precisarão se atualizar sobre os princípios do design de websites, bem como sobre psicologia do usuário para garantir que seus designs acionem os botões emocionais corretos.

Identidade da Marca

O desenvolvimento da identidade da marca não se trata apenas de design de logo, embora os designers de UI também possam precisar ajudar os clientes com isso.

O processo de desenvolvimento da identidade visual de uma marca consiste em estrategizar como a marca de um website se parecerá e garantir que ela envie os sinais corretos para seu público-alvo.

Portanto, os designers de UI primeiro precisarão descobrir qual é a personalidade e o estilo visual da marca. Eles então definirão as imagens da marca que as acompanham: elementos como a paleta de cores, tipografia, imagens, iconografia, padrões e mais.

Guias de Estilo/Sistemas de Design

Uma vez que a identidade visual tenha sido definida, os designers de UI criam um guia de estilo e/ou sistema de design para documentar a estratégia.

Um guia de estilo é imprescindível, independentemente do tipo de website que você constrói. Um sistema de design, por outro lado, é melhor para websites maiores e aqueles que requerem manutenção e atualizações contínuas.

Não importa se você está trabalhando como um designer de UX/UI solo. Um guia de estilo é útil por várias razões:

  • É um plano de ação documentado que o ajudará a manter-se no caminho certo com o website que você está construindo
  • Pode ser compartilhado com outros colaboradores para garantir que estejam consistentes com os estilos que você estabeleceu
  • Isso fará com que futuras atualizações ou redesenhos do site ocorram de maneira mais suave, pois você não precisará reinventar a roda

Aqui está um exemplo de como um guia de estilo se parece:

spotify-style-guide
Guia de estilo do Spotify

Um sistema de design levará as coisas mais adiante. Dentro do seu sistema de design, um designer de UI definirá todos esses estilos, mas também salvará seus componentes em uma biblioteca — novamente, o que reduz o tempo de design/re-design futuro. Os sistemas de design também resumem os objetivos do projeto, os valores da marca e como o site os executará.

Baixe seu modelo de guia de estilo gratuito aqui

Mockups

O designer de UI pegará toda a sua pesquisa e planejamento e combinará com a base que o designer de UX estabeleceu.

Os mockups do site serão representações em escala real, em cores completas e completas de como cada página da web parecerá no produto final.

Os designers de UI não estão apenas preenchendo os detalhes visuais. Eles também precisam lidar com coisas como:

  • Espaço em branco e como vão usá-lo para melhorar a usabilidade e legibilidade
  • Hierarquia para que possam criar áreas de foco óbvias enquanto guiam efetivamente os visitantes pelo conteúdo
  • Design responsivo e como as páginas da web parecerão em diferentes dispositivos e navegadores
  • Interações e animações em áreas críticas de cada página da web
  • Acessibilidade para que todos os visitantes possam visualizar e acessar o conteúdo sem problemas

Os designers de UI têm a opção de como projetar esses mockups.

Eles podem construí-los usando software de design ou mockup da mesma forma que os designers de UX fazem com wireframes. Ou eles podem projetar seus mockups diretamente no Elementor, o que será fácil de fazer se os wireframes já estiverem lá. Isso também fará com que o desenvolvimento ocorra de maneira mais suave.

Teste A/B

Assim como o trabalho de um designer de UX nunca termina, o mesmo vale para os designers de UI.

Uma vez que o site esteja no ar, os designers de UI precisam ficar de olho nas análises de tráfego do site para ver se há algum atrito potencial impedindo os visitantes de converter. Eles também podem colaborar com designers de UX para executar mapas de calor e gravações de sessão no site para ver se conseguem identificar obstáculos de UI em tempo real.

Mas, em vez de implementar uma solução permanente com base nessas observações. Um designer de UI formará uma hipótese sobre o problema — como “o botão CTA está muito abaixo na página” — e então executará um teste A (controle) e B (variável) para ver se um design alternativo tem um desempenho melhor.

Realisticamente, o designer de UI poderia executar testes A/B durante toda a vida útil de um site. Eles não são apenas úteis para resolver problemas de design visual, mas também para melhorar a aparência e a sensação geral do site.

Ferramentas de Design de UI

Aqui estão algumas das ferramentas comuns que um designer de UI usará:

Os designers de UI são práticos quando se trata de design, então a maioria de suas ferramentas precisa consistir em ferramentas de design que eles conhecem bem e confiam.

Como o Design UX e o Design UI Trabalham Juntos?

Olhando para as diferenças entre UI e UX, você pode pensar que não há muita sobreposição entre os dois papéis. Mas há.

Os designers de UX não podem simplesmente trabalhar isolados e depois entregar seus sitemaps e wireframes ao designer de UI ou desenvolvedor quando terminarem. Ou vice-versa.

Mesmo que cada função — designer de UX, designer de UI e até mesmo o desenvolvedor web — trabalhe em aspectos distintos e em diferentes etapas do projeto, é necessário que haja colaboração ao longo de todo o processo.

Primeiramente, isto assegura a consistência na forma como o website é projetado, o conteúdo é redigido e, em última instância, como tudo é executado ao final.

Há também a questão da coleta de informações. O que o designer de UX aprende sobre os usuários, a concorrência e o setor não deve permanecer como um segredo comercial. O mesmo se aplica ao que o designer de UI compreende sobre as tendências e padrões de design web. Ou, nesse sentido, o que o desenvolvedor web conhece sobre as capacidades de codificação.

O que um designer tem em mente para o website pode não estar alinhado com os princípios comprovados de design web, ou o desenvolvedor pode não ser capaz de executar impecavelmente o que foi idealizado. Uma colaboração estreita garantirá que nunca seja necessário recomeçar do zero.

Também é preciso considerar a transferência.

Geralmente, o designer de UX transmite sua pesquisa e trabalho para o designer de UI e o desenvolvedor web. E o designer de UI transmite seus mockups para o desenvolvedor web. Todos esses três profissionais trabalham com ferramentas diferentes e utilizam uma ‘linguagem’ de design distinta.

Sem uma colaboração próxima, boa comunicação e um sistema sólido de transferência, as coisas podem se complicar à medida que o website muda de mãos.

Como Iniciar como Designer de UI ou UX

Eis o que você precisa saber para começar como designer de UI vs. UX:

Habilidades

Haverá alguma sobreposição entre designers de UI e UX no que diz respeito às habilidades interpessoais. Aspectos como:

  • Criatividade
  • Organização
  • Colaboração
  • Resolução de problemas
  • Adaptabilidade

No entanto, devido às diferentes tarefas que realizam e aos objetivos que perseguem, os designers de UI e UX necessitarão, em sua maioria, de conjuntos de habilidades distintos.

Designers UX

Designers UI

Pensamento crítico

Pensamento criativo

Pesquisa de usuário, indústria e concorrência

Princípios e padrões de design web

Coordenação de projetos

Psicologia humana

Análise

Design visual

Estratégia e planejamento

Design responsivo

Wireframing

Marca

Arquitetura da informação

Design de interação

Testes e iteração

HTML5 e CSS3

Educação

Uma educação formal em design não é requisito para se tornar um designer de UX ou UI. Dito isto, visto que estas são áreas altamente especializadas do design web e é provável que você receba uma remuneração superior à de alguém que se intitula ‘web designer’, é aconselhável obter uma certificação.

A boa notícia é que há inúmeros recursos online onde você pode realizar seu treinamento certificado (e não certificado) em UX ou UI:

A Interaction Design Foundation é um bom recurso para começar. Também podemos recomendar esta lista dos Melhores recursos de UX para aprender mais sobre o assunto.

4 interaction design foundation courses Design de UX vs. UI: Qual é a Diferença? 3

Embora eles classifiquem seus cursos como ‘Cursos de Experiência do Usuário’, eles abrangem uma ampla gama de tópicos. Psicologia Gestalt e design de interação, por exemplo, são boas escolhas para designers de UI em formação.

Coursera é outro excelente recurso de treinamento. Diferentemente da IDF, você pode fazer cursos e obter certificações de diversos provedores. Como o Google:

5 coursera google uxdesign course Design de UX vs. UI: Qual é a Diferença? 4

Nielsen Norman Group e Springboard também oferecem programas de certificação em design de UX. E CareerFoundry e General Assembly oferecem programas de certificação em design de UI.

Você não apenas sairá desses programas com um certificado em mãos, mas também terá treinamento prático e alguns exemplos impressionantes para preencher seu portfólio profissional. Não demorará muito para que você comece a obter clientes de web design implorando para trabalhar com você.

Apenas lembre-se de manter-se atualizado em sua educação em design — tanto dentro de sua especialidade quanto além dela. Livros de web design e cursos online (gratuitos e pagos) o ajudarão a manter suas habilidades atualizadas e competitivas.

Perspectivas de Emprego

Designers de UI e UX estão em alta demanda.

De acordo com o Relatório de Contratação de Design de Produto de 2019 da InVision:

“Não há dúvida alguma: os designers de produtos estão mais requisitados do que nunca no momento atual, sendo o designer de UI/UX classificado como o título de design de produto mais demandado. De fato, quatro em cada cinco (81%) designers de produtos são contatados por recrutadores pelo menos mensalmente, enquanto um em cada três (34%) são contatados por recrutadores semanalmente.”

O relatório também revela que estas são as posições mais demandadas nos campos de UI e UX. Concentre-se na coluna “Designers de Produtos”:

6 ui vs ux designer roles in demand Design de UX vs. UI: Qual é a Diferença? 5

Como pode-se observar, designers de UI e UX de todos os níveis de experiência e em diversos tipos de especialidades são necessários.

Um aspecto a ser considerado, no entanto, é que a crescente demanda por especialistas em UI e UX resultou em um aumento significativo de estudantes e candidatos a vagas. De acordo com Colman Walsh, o Diretor Executivo do UX Design Institute:

“O UX Design Institute testemunhou um aumento de 220% no número de estudantes de abril de 2019 a abril de 2020, indicativo do crescimento mais amplo da indústria de UX.”

A boa notícia é que há uma necessidade crescente de designers digitais à medida que mais e mais organizações se comprometem com um modelo 100% digital ou híbrido após a pandemia.

No entanto, a competição será acirrada com novos designers de UX e UI entrando no campo diariamente. Portanto, é absolutamente crucial que você encontre uma maneira de se diferenciar.

Expectativas Salariais

Independentemente de qual nicho de design web você escolher — UI, UX, ou uma função híbrida — o potencial para ganhar mais do que designers web não especializados é imenso. Enquanto os salários médios de designers web são em torno de $24/hora ou $51.564/ano, os especialistas tendem a ganhar mais:

Aqui estão o que as principais fontes de empregos relatam como os ganhos médios para designers de UI, designers de UX e designers seniores de UX nos Estados Unidos:

Shani 08 Design de UX vs. UI: Qual é a Diferença? 6

Estes parâmetros salariais não são uma garantia do que seus rendimentos serão como designer de UI ou UX. Há muitos fatores que podem afetar sua renda anual:

  • Sua área de especialização em design
  • Sua indústria/nicho
  • Onde você reside
  • Há quanto tempo você trabalha como designer
  • Quem são seus empregadores ou clientes
  • O tamanho e a complexidade dos websites que você constrói

Novamente, o campo do design está se tornando cada vez mais competitivo devido ao influxo de talentos nos últimos anos. Se você deseja que seus rendimentos estejam na faixa superior dessas estimativas, certificação e treinamento e educação contínuos são imprescindíveis.

Qual Caminho de Carreira Você Deve Escolher?

Agora você tem uma decisão a tomar. Você deseja se tornar um:

  • Designer de UX?
  • Designer de UI?
  • Designer de UX/UI?

Exatamente. Você não precisa escolher um em detrimento do outro se não quiser. Há muitos empregadores atualmente que desejam designers que possam fazer tudo. Basta fazer uma pesquisa em um portal de empregos como o Indeed por “designer de UI” ou “designer de UX” e você verá o que quero dizer:

7 indeed ui ux jobs Design de UX vs. UI: Qual é a Diferença? 7

Mas a popularidade do emprego não é a única coisa a se considerar ao escolher sua especialidade. Uma boa regra geral é encontrar algo que se encaixe no seu ponto ideal:

Shani 09 Design de UX vs. UI: Qual é a Diferença? 8

Se você ainda não tem certeza absoluta em qual área você é mais habilidoso ou apaixonado, tudo bem. É para isso que servem os cursos online e tutoriais. Experimente algumas tarefas de UX e UI e veja qual parece mais natural e gratificante.

Você também pode dar um passo atrás e considerar como aborda a web como consumidor. O que você nota primeiro? Quão boa é a aparência de um website… ou quão fácil é de usar? Isso pode ser um bom indicador do que mais o empolga sobre design web e no que você mais se destacará.