Design

UX
Digital

Agatha Araújo Trindade, Msc.

 UX Design | O que é?

O que é Experiência do
Usuário?
 UX Design | O que é?

É preciso entender
os usuários, suas
necessidades e
motivações.
 UX Design | O que é?

Doug Dietz
Famoso designer industrial que
trabalhava na General
Famoso designer Eletric e
industrial estava
que
produzindo
trabalhava na uma máquina
General Eletric e de
estava
ressonância magnética.
produzindo uma máquina de
ressonância magnética.
UX Design | O que é?
UX Design | O que é?
 UX Design | O que é?

“O design da experiência do usuário (UX) é o processo que as

equipes usam para criar produtos que fornecem experiências
significativas e relevantes aos usuários.

Isso envolve o design de todo o processo de adquirir e

integrar o produto, incluindo os aspectos de branding,
design, usabilidade e função”

Interaction Design Foundation

“Eu inventei o termo porque pensei
que o conceito de interface e a
usabilidade eram muito estreitos.
Eu queria cobrir todos os
aspectos da experiência de uma
pessoa com o sistema, incluindo o
design industrial, gráfico, interface,
emocional, de interação...”

Don Norman
 UX Design | O que é?

Experiência do
Usuário
 Métricas
Prototipação
Mobile First
Arquitetura da Informação

Design Centrado no Usuário

Design Thinking
Experiência do
Usuário Design Responsivo
Pesquisas com usuários

Design Visual
Conteúdo Design Emocional
 UX Design | O que é?

É além
da usabi-
lidade
 UX Design | O que é?

Quem
aqui gosta
de esperar
em filas?
 UX Design | O que é?

+120 mil +2h de

pessoas espera na
por dia fila
UX Design | O que é?
 UX Design | O que é?

“A maioria das pessoas acredita que a Experiência do

Usuário é somente encontrar a melhor solução para os
seus usuários - mas não é. UX trata sobre definir o
problema que precisa ser resolvido (porquê), definir para
quem esse problema precisa ser resolvido (quem) e
definir o caminho que deve ser percorrido para resolvê-lo
(como)”

Whitney Hess
 UX Design | O que não é?

● Não é apenas um passo do processo;

O que ● Não é apenas usabilidade;

Não é apenas deixar as coisas
não é?
●
bonitinhas;
● Não é apenas confiar em intuições;
● Não é uma escolha.
 UX Design | UX para desenvolvedores

E o que vocês têm a

ver com isso? TUDO!
 UX Design | UX para desenvolvedores

Performance é
user experience,
mas depende do
desenvolvimento!
 UX Design | UX para desenvolvedores

Temos os
mesmos
objetivos
 UX Design | UX para desenvolvedores

Antes designers e
desenvolvedores trabalhavam
totalmente separados
UX Design | UX para desenvolvedores
 UX Design | UX para desenvolvedores

Design em cascata
UX Design | UX para desenvolvedores
UX Design | UX para desenvolvedores
UX Design | UX para desenvolvedores
 UX Design | UX para desenvolvedores

1 Trabalhar juntos não é apenas sentar na mesma mesa;

2 Feedbacks são necessários;

3 Estejamos vulneráveis para aprender;

Introdução ao processo UX Design | Introdução ao processo
Empatia UX Design | Introdução ao processo

● O primeiro passo para entender o

problema que você está tentando
resolver;

● Fala com especialistas, se coloca

no lugar do usuário;

● Desenvolve pesquisas,
entrevistas, grupos focais,
enquetes;

● Entende as frustrações do
usuário, seus desejos, seus
objetivos, suas aspirações para
realmente criar algo para eles.
Você não é seu
usuário!
Definição UX Design | Introdução ao processo

● Síntese das informações

coletadas identificando os
principais problemas que os
usuários estão enfrentando;

● Por que se sentem da maneira

que sentem? Por que agem da
maneira que agem?
Ideação UX Design | Introdução ao processo

● Hora de pensar fora da caixa e

começar a idear;

● Quantidade é mais importante do

que qualidade;

● Não existe ideia ruim;

Protótipo UX Design | Introdução ao processo

● Os protótipos permitem validar a

sua solução, são uma
representação tangível da sua
ideia;

● Não precisam ser apenas digitais;

Teste UX Design | Introdução ao processo

● Os protótipos permitem validar a

sua solução, são uma
representação tangível da sua
ideia;

● Não precisam ser apenas digitais;

Implementação UX Design | Introdução ao processo

● Funciona? O que precisa ser

mudado? Como deixar ainda
melhor e entregar uma
experiência melhor?

● Melhorar e repetir.
 UX Design | Empatizar e Definir

Empatizar e
Definir
UX Research UX Design | Empatizar e Definir

Observação

Compreensão

Análise
Tipos de pesquisa UX Design | Empatizar e Definir

Desk Research
Primária: quando você conduz a
pesquisa em primeira mão (entrevistas,
diários de observação, enquetes)

Secundária: baseada em pesquisas

que outras pessoas já fizeram (estudos
governamentais, artigos, vídeos, livros)

Coletar dados que aprofundem o seu

conhecimento do problema
Tipos de pesquisa UX Design | Empatizar e Definir

Entrevistas
Direta: Pergunta e resposta;

Indireta: Melhor quando for tratar de

assuntos mais “delicados”, o
entrevistador guia a conversa;

Contextual: Conduzida durante ou

depois da observação ou quando o
usuário estiver utilizando o produto.
Tipos de pesquisa UX Design | Empatizar e Definir
Análise vs. Síntese UX Design | Empatizar e Definir

Análise Síntese

Quebrar os conceitos e Juntar criativamente

problemas complexos esse quebra-cabeça
em pedaços menores e para formar ideias.
mais fáceis de entender
Etapa de definição, ao
Etapa de empatia organizar, interpretar e
quando analisamos as dar sentido aos dados
entrevistas e coletados.
documentos.
Declaração do problema UX Design | Empatizar e Definir

● Centrada no usuário (de acordo

com os usuários específicos,
suas necessidades e percepções
analisadas da etapa de empatia);

● Ampla o suficiente para dar

liberdade criativa;

● Restrições suficiente para tornar

o projeto gerenciável.
Definição do problema UX Design | Empatizar e Definir

● How Might We? uma maneira de

formular o problema

● Diagramas de afinidade
Definição do problema UX Design | Empatizar e Definir

How Might We
How (Como): Explorar várias ideias

Might (Podemos): Nossas ideias são

soluções possíveis e não uma única
solução

We(Nós): Esforço colaborativo

Definição do problema UX Design | Empatizar e Definir
Definição do problema UX Design | Empatizar e Definir
Definição do problema UX Design | Empatizar e Definir
Personas UX Design | Empatizar e Definir

● É uma ferramenta comum

utilizada no UX Design;

● Ajudam a criar seu produto com

um objetivo específico em mente;

● É representativo de um grupo
maior de usuários;

● Nome, foto, dados demográficos

(idade, gênero, formação, etc),
objetivos e necessidades,
frustrações;
Personas UX Design | Empatizar e Definir
Histórias dos usuários UX Design | Empatizar e Definir

Como estudante e profissional

com uma vida corrida, quero
poder fazer compras online
como uma recompensa rápida
pelo meu trabalho duro
Mapas de Empatia UX Design | Empatizar e Definir
Mapeamento da jornada UX Design | Empatizar e Definir

● A visualização da relação do usuário com o produto/serviço ao longo do

tempo em diferentes canais;

● Geralmente é representado visualmente como uma linha do tempo com

todos os pontos de contato entre o usuário e o produto/serviço.
Mapeamento da jornada UX Design | Empatizar e Definir
 UX Design | Idear e Prototipar

Idear e
Prototipar
Idear UX Design | Idear e Prototipar

Antes de começar a idear,

você precisa ter definido o
problema certo.
Idear UX Design | Idear e Prototipar

Técnicas de ideação

● Brainstorming
● Bodystorming
● Mindmapping
● Pior ideia possível
Idear UX Design | Idear e Prototipar

“A arquitetura da informação é a prática de

decidir como organizar as partes de algo para se
tornar compreensível”

Instituto de Arquitetura da Informação

Idear UX Design | Idear e Prototipar
Idear UX Design | Idear e Prototipar

Arquitetura da Informação

1. Objeto: Ver o conteúdo como um ser vivo, com seu próprio ciclo de vida e apresentando
comportamentos e atributos. O arquiteto precisa definir e compreender a natureza destes ao
embarcar em uma estrutura.

2. Escolhas: Criar páginas que ofereçam escolhas significativas aos usuários, mantendo o leque
de escolhas disponíveis concentrado em uma determinada tarefa e, portanto, relevante para o
usuário. Muitas opções podem ser piores do que poucas, pois os usuários podem ficar atolados, e
até mesmo paralisados pela indecisão é sobrecarregada com escolhas.

3. Divulgação: Mostrar apenas aos usuários o que eles precisam para decidir se querem
aprofundar. Uma vez que eles apreciem a natureza da opção, eles podem ou não persegui-la
como desejado.
Idear UX Design | Idear e Prototipar

4. Exemplos: Se algumas das opções da categoria não forem auto-explicativas, use alguns
exemplos do conteúdo para mostrar aos usuários o que eles estarão acessando. As imagens
podem ser especialmente úteis e expressivas neste contexto.

5. Portas da frente: Nem todos os usuários entrarão no seu site pela página inicial, portanto, não
construa seu site apenas para aqueles que entrarem. Dê às pessoas que chegam a outras
páginas a chance de visualizar informações úteis e auxílios à navegação de onde quer que elas
entrem e tente tornar seu site acessível de onde quer que elas cheguem.

6. Classificação múltipla: Fornecer diferentes maneiras para os usuários pesquisarem o

conteúdo em seu site. Usar os menus de busca e de nível superior são duas maneiras de fazer
isso, mas alguns usuários podem desejar navegar ou mover-se através da hierarquia, portanto,
certifique-se de que sua arquitetura de informação atenda às suas necessidades.
Idear UX Design | Idear e Prototipar

7. Navegação Focalizada: Mantenha seus auxílios de navegação consistentes. Certifique-se de

que seus menus estejam relacionados às mesmas áreas e não misturem assuntos e confundam o
usuário. Se estiver produzindo um menu de tipos de produtos, não inclua outros serviços nele ou,
se o menu for para fins de navegação, não inclua itens funcionais ou de marketing.

8. Crescimento: O conteúdo com o qual você começa será apenas uma pequena fração do
conteúdo que você adquirirá, portanto seu site precisa ser escalável. Dê-lhe espaço para crescer
e se desenvolver organicamente e por adição.
Idear UX Design | Idear e Prototipar

Card sorting

Arquitetura da informação

1. Defina seu conteúdo

2. Agrupar e rotular esse conteúdo
3. Defina a navegação e crie o sitemap
Idear UX Design | Idear e Prototipar

Sitemap
Prototipar UX Design | Idear e Prototipar

Por que prototipar?

● Encorajar novas ideias;

● Obter feedbacks;
● Reduzir riscos;
● Antecipar reações da vida real.
Prototipar UX Design | Idear e Prototipar
Prototipar UX Design | Idear e Prototipar
Prototipar UX Design | Idear e Prototipar
Prototipar UX Design | Idear e Prototipar
 UX Design | Testar e Implementar

Testar e
Implementar
Testar e Implementar UX Design | Testar e Implementar

Por que realizar testes

com usuários?

● Identificar problemas de design

no produto ou serviço;

● Descobrir oportunidades para

melhorar;

● Aprender sobre os
comportamentos dos usuários e
suas preferências.
Atividade
 Grupo 1: Aplicativo para encontrar e visualizar
tutoriais de culinária do Diogo Defante;

Escolher um projeto e a partir dele:

Grupo 2: Aplicativo para encontrar e visualizar
tutoriais de maquiagem da We Pink;
- Definir problema
- Persona
Grupo 3: Aplicativo de tinder para cachorros;
- Histórias dos usuários
- Mapa de empatia
Grupo 4: Aplicativo de compra de ingressos do
- Card sorting
show do Wanderley Andrade;
- Sitemap
- Wireframes de baixa
Grupo 5: Aplicativo de apostas de futebol;

Grupo 6: Aplicativo para comprar tickets no RU

da EST.
Escolher um projeto e a partir dele:

- Definir problema
- Persona
- Histórias dos usuários
- Mapa de empatia
- Card sorting
- Sitemap
- Wireframes de baixa