SlideShare ist ein Scribd-Unternehmen logo
1 von 103
Downloaden Sie, um offline zu lesen
UX DESIGNWORKSHOP
Suzi Sarmento • UI/UX Designer •
Trabalha com visual design e experiência do
usuário há mais de 6 anos.
Já passou pelas áreas de publicidade, portal de
notícias, e-commerce, e agora faz parte do time
de UX da startup Youse.
E me conta de você:
● Qual o seu nome?
● O que faz da vida?
● E qual é o seu aplicativo favorito? (Ou
quais)
vamos falar sobre o
Comportamento
humano
Hoje as pessoas estão mais
Conectadas do
que nunca
Pew Research Center, April , 2015
25% das pessoas estão conectadas
em 4 ou mais devices por semana.
Essa campanha foi baseada em
pesquisas que revelaram que 84%
das pessoas não ficam sem celular
um único dia sequer.
Já parou pra
pensar o
porquê?
Facilita,
poupa seu tempo e
melhora sua vida.
De onde veio
esse lance de
UX?
Titio Don
Normam
;P
"I invented the term because I thought Human Interface and
usability were too narrow: I wanted to cover all aspects of
the person's experience with a system, including industrial
design, graphics, the interface, the physical
interaction, and the manual."
Don Normam
Ou talvez bem antes, com:
"If the point of contact between the product and the people
becomes a point of friction, then [the designer] has failed.
If, on the other hand, people are made safer, more
comfortable, more eager to purchase, more efficient-or just
plain happier-the [the designer] has succeeded.
"
Designing for People - Henry Dreyfuss (1904 – 1972)
Henry Dreyfuss
Designer Industrial
Alguns estudos antropométricos feitos por Henry
Sobre interfaces ou
Designers
(ou DAs)
egoístas
E o UX designer
O que faz?
O que você precisa saber para se tornar um bom
UX Designer?
1.Ter empatia
Acima de tudo, bons UX Designers sentem empatia por
outras pessoas.
Empatia é incrivelmente importante quando se desenha
uma interface.
Você precisa entender as necessidades e dores das pessoas,
só assim conseguirá desenvolver soluções adequadas.
2.Questionar
Questione tudo.
Isso abrirá sua mente para novas perspectivas. Novas
soluções. Novas alternativas e novos problemas também.
Questione tudo.
3.Manjar dos paranauê
de princípios de design
& Usabilidade
Esses princípios vão te ajudar a encontrar melhores soluções
e oferecer a melhor experiência para os usuários.
Closure
exemplo aplicado
4.Experiências ≠
Buscar conhecimento em outras áreas ajuda a entender e
conhecer mais sobre o comportamento humano.
Entender os pensamentos e sentimentos dos usuários ajuda
os UX designers a guiar suas decisões de projeto para a
direção certa.
5.Processos de UX
O processo de experiência do usuário normalmente consiste
em cinco fases principais: estratégia, pesquisa, análise,
concepção e produção.
Check list de um projeto de UX
Como podemos
desenhar experiências
que respeitem,
empoderem e melhorem
a vida das pessoas?
partiu
aomozo!
projeto do curso
E-commerce de
esportes
Análise
Heurística
Como e por que?
Uma das técnicas mais importantes para começar a projetar
experiências de usuário (UX).
A Análise Heurística se trata de uma técnica de pesquisa e
avaliação da usabilidade de um determinado projeto ou dos
projetos concorrentes.
Design thinking,
a gourmetização do design?
Design centrado no
usuário
É o processo onde mantemos o foco nas necessidades,
desejos e limitações dos usuários.
Imagine agora que cada grupo faz parte do time de UX
de um e-commerce de produtos esportivos.
A partir dessa ideia vamos realizar as seguintes técnicas:
1 - Planejamento do "the brief"'
2 - Criação de Personas (proto personas)
3 - Jornada do consumidor
4 - Teste de usabilidade.
Exercício 1
The Brief
The design brief
Quais as soluções, os diferenciais do seu produto?
Quais os atributos e a personalidade do seu produto?
Para qual público ele foi desenhado?
Qual o propósito do seu produto?
The design brief
é algo que você cria para o seu time, para os stakeholders,
para qualquer um que esteja envolvido com o projeto. Ele
ajuda a manter todos com a mesma visão e compartilhar a
essência da experiência do usuário.
Visão (Why)
Uma breve história que contextualize
o porquê do produto ser tão
importante para a vida das pessoas.
Requisitos (What)
Quais as características que fazem dele tão
especial?
Princípios do produto (How)
Como esse produto vai interferir na vida das pessoas de maneira positiva.
Exercício 2
Crie Personas
(ou proto personas)
Alan Cooper
"Personas são personagens fictícios de produtos e
serviços que representam as necessidades de um grupo
maior de usuários. Devem ser criadas com base em dados
reais e atuam, nos projetos de design, como
representantes dos usuários reais ajudando a equipe a
tomar decisões sobre funcionalidades e design"
Leah Buley
"Proto Personas é uma versão modificada das personas e
simula o mesmo tipo de empatia e pensamento centrado
no usuário. Porém com muito menos investimento de
tempo. É baseado em insights, em menos dados reais,
mas pode ajudar o time a ter um mindset que atenda às
necessidades dos usuários.
Como criar?
Discuta com o grupo o que eles sabem ou supeitam
sobre os usuários do site e então foque em um tipo em
particular para desenvolver como proto-persona.
Descreva com detalhes a história dessa "pessoa". Onde
vive? O que faz da vida? Quais as suas frustrações. Como
seria a rotina dessa pessoa? Como era a vida dela antes
de usar o produto/site ?
infos importantes
Trate essas proto-personas como hipóteses que podem
ser validadas ou invalidadas.
Não confunda proto-personas com personas de verdade,
esse processo rápido que executamos serve apenas
como oportunidades de investigação, um norte para
você continuar o processo de pesquisa de verdade.
Exercício 3
Jornada do
usuário
Exercício 3
Jornada do
usuário
Por que criar?
● Para mapear possíveis comportamentos dos usuários
dentro do site;
● Para antecipar possíveis melhorias e novas
funcionalidades;
● Ajuda a definir a taxonomia e a interface;
Como criar?
Com base nos dados das personas que você criou, crie um mapa com a
jornada do consumidor.
Post-it verde - para o que motivou a pessoa a entrar no site
Post-it amarelo - para o que fez a pessoa continuar no processo de compra
Post-it rosa - problemas ou atitudes tomadas depois da compra
Ativação Avaliação Compra Pós-compra
Entenda o modelo
mental dos usuários.
Como?
Card Sorting.
Cafézinho?
Exercício 4
Teste de
usabilidade
Um teste de usabilidade é uma técnica de pesquisa muito
utilizada para validar hipóteses, dúvidas e
questionamentos sobre as interfaces.
Essa técnica segue um roteiro que contém tarefas
relacionas com as hipóteses que queremos validar.
testes de
usabiliade
é uma eterna arte de praticar o desapego
Exemplo de cenário e tarefas
Você é uma pessoa que gosta de fazer exercícios físicos e
sua nutricionista indicou whey protein para sua nova
dieta.
Tarefa 1 - O que você faria para comprar esse produto?
Tarefa 2 - Entre no site X e procure esse produto.
Tarefa 3 - Compre o whey de sabor morango.
Ferramentas online que ajudam a
entender os
usuários
Heatmaps
exibem clicks, mapas de calor e até
onde o usuário fez o scroll na
página.
Gravação das
visitas feitas no
site
Funis de conversão
Para desenhar e prototipar interfaces
para os usuários
Cursos
http://arquiteturadeinformacao.com/user-experience/cursos-de-ux-design-no-exterior-e-tambem-
online/
No Brasil eu não encontrei nenhum ainda =,(
Na gringa
http://www.cooper.com/training/
https://www.nngroup.com/training/
Online
http://www.lynda.com/User-Experience-training-tutorials/97-0.html
https://www.udacity.com/course/product-design--ud509
http://www.invisionapp.com/ecourses/principles-of-ux-design
Referências - UX
http://blog.usabilla.com/the-20-best-ux-articles-of-2015-part-1/
http://blog.usabilla.com/the-20-best-ux-articles-of-2015-part-2/
http://arquiteturadeinformacao.com/user-experience/os-vencedores-do-ixda-awards-2016/?
utm_content=buffer0192c&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer
http://www.uxdesign.blog.br/usabilidade/10-licoes-de-usabilidade-de-steve-krug/
http://www.uxdesign.blog.br/user-experience/ux-ecommerce-jornada-do-consumidor/
http://samuraiux.com.br/blog/user-experience-samurai/guia-ux-o-que-e-jornada-do-usuario/
http://www.linhadecodigo.com.br/artigo/2355/abc-da-usabilidade-analise-heuristica.aspx
https://medium.com/ux-ui-design-1/analise-heuristica-o-que-e-fff5b7826ecb#.w049oo4oc
http://www.uxdesign.blog.br/user-experience/ux-por-onde-comecar/
Livros
Livros
Palestras e vídeos
Sobre os princípios de design aplicado a UX
Brigada e
Vlw. Flw.

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

UX - Entregaveis
UX - EntregaveisUX - Entregaveis
UX - Entregaveis
 
Ux design - Conceitos Básicos
Ux design - Conceitos BásicosUx design - Conceitos Básicos
Ux design - Conceitos Básicos
 
Práticas e Processos de UX
Práticas e Processos de UXPráticas e Processos de UX
Práticas e Processos de UX
 
Um quase papo sobre UX Writing
Um quase papo sobre UX WritingUm quase papo sobre UX Writing
Um quase papo sobre UX Writing
 
Curso de design thinking FIAP 2016 - MBA Gestão de Projetos
Curso de design thinking FIAP 2016 - MBA Gestão de ProjetosCurso de design thinking FIAP 2016 - MBA Gestão de Projetos
Curso de design thinking FIAP 2016 - MBA Gestão de Projetos
 
UX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do UsuárioUX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do Usuário
 
Experiência do usuário
Experiência do usuárioExperiência do usuário
Experiência do usuário
 
Experiência do Usuário e Jornada do Usuário
Experiência do Usuário e Jornada do Usuário Experiência do Usuário e Jornada do Usuário
Experiência do Usuário e Jornada do Usuário
 
What is UX?
What is UX?What is UX?
What is UX?
 
A lógica por trás de UX Writing
A lógica por trás de UX WritingA lógica por trás de UX Writing
A lógica por trás de UX Writing
 
Niveis maturidade UX
Niveis maturidade UXNiveis maturidade UX
Niveis maturidade UX
 
Ux design antes do wireframe
Ux design antes do wireframeUx design antes do wireframe
Ux design antes do wireframe
 
style guide ui
style guide uistyle guide ui
style guide ui
 
Ebook ui-design-v2
Ebook ui-design-v2Ebook ui-design-v2
Ebook ui-design-v2
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 
TechTalk 77 UI & UX Presentation
TechTalk 77 UI & UX PresentationTechTalk 77 UI & UX Presentation
TechTalk 77 UI & UX Presentation
 
Palestra MVP - Estudo de Casos
Palestra MVP - Estudo de CasosPalestra MVP - Estudo de Casos
Palestra MVP - Estudo de Casos
 
Mapeamento de jornadas no design de experiências
Mapeamento de jornadas no design de experiênciasMapeamento de jornadas no design de experiências
Mapeamento de jornadas no design de experiências
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 
UX? WTF? - Intro To User Experience Design Pt. 1
UX? WTF? - Intro To User Experience Design Pt. 1UX? WTF? - Intro To User Experience Design Pt. 1
UX? WTF? - Intro To User Experience Design Pt. 1
 

Andere mochten auch

UX Design, Services Design & Design Thinking
UX Design, Services Design & Design ThinkingUX Design, Services Design & Design Thinking
UX Design, Services Design & Design Thinking
Marcelo Negrini
 
Desenvolvimento web com python e django
Desenvolvimento web com python e djangoDesenvolvimento web com python e django
Desenvolvimento web com python e django
Igor Sobreira
 

Andere mochten auch (20)

UI e UX no Material Design
UI e UX no Material DesignUI e UX no Material Design
UI e UX no Material Design
 
UX Design
UX DesignUX Design
UX Design
 
Ux design/Experiência do Usuário - Conexão KingHost 2015
Ux design/Experiência do Usuário - Conexão KingHost 2015Ux design/Experiência do Usuário - Conexão KingHost 2015
Ux design/Experiência do Usuário - Conexão KingHost 2015
 
O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...
O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...
O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...
 
Minicurso de UX Design (Resumo)
Minicurso de UX Design (Resumo)Minicurso de UX Design (Resumo)
Minicurso de UX Design (Resumo)
 
UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....
UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....
UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....
 
UX Design, Services Design & Design Thinking
UX Design, Services Design & Design ThinkingUX Design, Services Design & Design Thinking
UX Design, Services Design & Design Thinking
 
[MANUAL DO MATCHFUNDING YOUSERS]
 [MANUAL DO MATCHFUNDING YOUSERS]  [MANUAL DO MATCHFUNDING YOUSERS]
[MANUAL DO MATCHFUNDING YOUSERS]
 
Desenvolvendo APPs Com Angular.JS + Cordova
Desenvolvendo APPs Com Angular.JS �+ CordovaDesenvolvendo APPs Com Angular.JS �+ Cordova
Desenvolvendo APPs Com Angular.JS + Cordova
 
UI / UX Prototyping Tools
UI / UX Prototyping ToolsUI / UX Prototyping Tools
UI / UX Prototyping Tools
 
Angular js
Angular jsAngular js
Angular js
 
Heurísticas de Jacob Nielsen
Heurísticas de Jacob NielsenHeurísticas de Jacob Nielsen
Heurísticas de Jacob Nielsen
 
UX Design para Desenvolvedores
UX Design para DesenvolvedoresUX Design para Desenvolvedores
UX Design para Desenvolvedores
 
Desenvolvimento web com python e django
Desenvolvimento web com python e djangoDesenvolvimento web com python e django
Desenvolvimento web com python e django
 
Design Thinking - Aula 01
Design Thinking - Aula 01Design Thinking - Aula 01
Design Thinking - Aula 01
 
UX Samsung
UX SamsungUX Samsung
UX Samsung
 
UX Prototyping Tools
UX Prototyping ToolsUX Prototyping Tools
UX Prototyping Tools
 
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDAANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
 
Design Thinking - Aula 02
Design Thinking - Aula 02Design Thinking - Aula 02
Design Thinking - Aula 02
 
Design Thinking - Workshop
Design Thinking - WorkshopDesign Thinking - Workshop
Design Thinking - Workshop
 

Ähnlich wie Workshop • UX design •

Workshop - Service Design
Workshop - Service DesignWorkshop - Service Design
Workshop - Service Design
Erico Fileno
 
Workshop - Service Design
Workshop - Service DesignWorkshop - Service Design
Workshop - Service Design
Erico Fileno
 
UX Research - apresentação de slides para aula
UX Research - apresentação de slides para aulaUX Research - apresentação de slides para aula
UX Research - apresentação de slides para aula
MaruanGosch1
 
Processo inovação
Processo inovaçãoProcesso inovação
Processo inovação
Alaor Bianco
 

Ähnlich wie Workshop • UX design • (20)

UX Culture
UX Culture UX Culture
UX Culture
 
Workshop - Service Design
Workshop - Service DesignWorkshop - Service Design
Workshop - Service Design
 
Workshop - Service Design
Workshop - Service DesignWorkshop - Service Design
Workshop - Service Design
 
O que é UX? Introdução, Ferramentas e Experiências
O que é UX? Introdução, Ferramentas e ExperiênciasO que é UX? Introdução, Ferramentas e Experiências
O que é UX? Introdução, Ferramentas e Experiências
 
Empreendedorismo UFMG - Design Sprint
Empreendedorismo UFMG - Design SprintEmpreendedorismo UFMG - Design Sprint
Empreendedorismo UFMG - Design Sprint
 
Desenvolvimento em tempos de UX - Versão 3.0
Desenvolvimento em tempos de UX - Versão 3.0Desenvolvimento em tempos de UX - Versão 3.0
Desenvolvimento em tempos de UX - Versão 3.0
 
Hack2B - Design Sprint Workshop
Hack2B - Design Sprint WorkshopHack2B - Design Sprint Workshop
Hack2B - Design Sprint Workshop
 
TDC2016SP - Trilha Análise de Negócios
TDC2016SP - Trilha Análise de NegóciosTDC2016SP - Trilha Análise de Negócios
TDC2016SP - Trilha Análise de Negócios
 
Processo de UX no desenvolvimento de produto
Processo de UX no desenvolvimento de produtoProcesso de UX no desenvolvimento de produto
Processo de UX no desenvolvimento de produto
 
Personas: Como conhecer melhor nosso usuário? Em que isso nos ajuda?! - UX Ca...
Personas: Como conhecer melhor nosso usuário? Em que isso nos ajuda?! - UX Ca...Personas: Como conhecer melhor nosso usuário? Em que isso nos ajuda?! - UX Ca...
Personas: Como conhecer melhor nosso usuário? Em que isso nos ajuda?! - UX Ca...
 
UX Research - apresentação de slides para aula
UX Research - apresentação de slides para aulaUX Research - apresentação de slides para aula
UX Research - apresentação de slides para aula
 
User eXperience
User eXperienceUser eXperience
User eXperience
 
Pesquisa com usuários - O que é e por que você deveria estar fazendo
Pesquisa com usuários - O que é e por que você deveria estar fazendoPesquisa com usuários - O que é e por que você deveria estar fazendo
Pesquisa com usuários - O que é e por que você deveria estar fazendo
 
Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
 
Introdução ao Design Sprint - Hackaprothon Aplicativos Cívicos para Android
Introdução ao Design Sprint - Hackaprothon Aplicativos Cívicos para AndroidIntrodução ao Design Sprint - Hackaprothon Aplicativos Cívicos para Android
Introdução ao Design Sprint - Hackaprothon Aplicativos Cívicos para Android
 
[TDC'16] UX para Profissionais de Negócios
[TDC'16] UX para Profissionais de Negócios[TDC'16] UX para Profissionais de Negócios
[TDC'16] UX para Profissionais de Negócios
 
Processo inovação
Processo inovaçãoProcesso inovação
Processo inovação
 
UI Lab Experience - Como Utilizar a Metodologia Google Design Sprint
UI Lab Experience - Como Utilizar a Metodologia Google Design SprintUI Lab Experience - Como Utilizar a Metodologia Google Design Sprint
UI Lab Experience - Como Utilizar a Metodologia Google Design Sprint
 
Weme School | Design Thinking
Weme School | Design ThinkingWeme School | Design Thinking
Weme School | Design Thinking
 

Workshop • UX design •