Design Digital: Agatha Araújo Trindade, MSC

Design
UX
Digital
Agatha Araújo Trindade, Msc.

UX Design | O que é?
O que é Experiência do
Usuário?
É preciso entender
os usuários, suas
necessidades e
motivações.
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.
“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
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
É além
da usabi-
lidade
Quem
aqui gosta
de esperar
em filas?
+120 mil +2h de

pessoas espera na
por dia fila
“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!
Performance é
user experience,
mas depende do
desenvolvimento!
Temos os
mesmos
objetivos
Antes designers e
desenvolvedores trabalhavam
totalmente separados
Design em cascata
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
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.
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
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

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.
Técnicas de ideação
● Brainstorming
● Bodystorming
● Mindmapping
● Pior ideia possível
“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

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.
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.
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.
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
Sitemap
Prototipar UX Design | Idear e Prototipar
Por que prototipar?
● Encorajar novas ideias;

● Obter feedbacks;
● Reduzir riscos;
● Antecipar reações da vida real.
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

Design Digital: Agatha Araújo Trindade, MSC

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Design Digital: Agatha Araújo Trindade, MSC

Enviado por

Direitos autorais:

Formatos disponíveis

Design

Agatha Araújo Trindade, Msc.

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

Isso envolve o design de todo o processo de adquirir e

Interaction Design Foundation

Design Centrado no Usuário

+120 mil +2h de

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

● Não é apenas um passo do processo;

O que ● Não é apenas usabilidade;

E o que vocês têm a

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

2 Feedbacks são necessários;

3 Estejamos vulneráveis para aprender;

● O primeiro passo para entender o

● Fala com especialistas, se coloca

● Síntese das informações

● Por que se sentem da maneira

● Hora de pensar fora da caixa e

● Quantidade é mais importante do

● Não existe ideia ruim;

● Os protótipos permitem validar a

● Não precisam ser apenas digitais;

● Os protótipos permitem validar a

● Não precisam ser apenas digitais;

● Funciona? O que precisa ser

Secundária: baseada em pesquisas

Coletar dados que aprofundem o seu

Indireta: Melhor quando for tratar de

Contextual: Conduzida durante ou

Quebrar os conceitos e Juntar criativamente

● Centrada no usuário (de acordo

● Ampla o suficiente para dar

● Restrições suficiente para tornar

● How Might We? uma maneira de

Might (Podemos): Nossas ideias são

We(Nós): Esforço colaborativo

● É uma ferramenta comum

● Ajudam a criar seu produto com

● Nome, foto, dados demográficos

Como estudante e profissional

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

● Geralmente é representado visualmente como uma linha do tempo com

Antes de começar a idear,

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

Instituto de Arquitetura da Informação

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

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

1. Deﬁna seu conteúdo

Por que prototipar?

● Encorajar novas ideias;

Por que realizar testes

● Identiﬁcar problemas de design

● Descobrir oportunidades para

Escolher um projeto e a partir dele:

Grupo 6: Aplicativo para comprar tickets no RU

Você também pode gostar