SlideShare uma empresa Scribd logo
1 de 68
Baixar para ler offline
UX: Creating
Killer
Experiences
Olá!
Alexandre Tarifa
Camila Mariano
2
“
“Uma boa experiência é
aquela que deixa o
usuário feliz porque ele
consegue cumprir seu
objetivo.”
3
A experiência do seu usuário
depende ...
╺ do que você tem para oferecer para ele
╺ de como ele está se sentindo quando chega até você
╺ das regras do seu negócio (promoção, devolução..)
╺ e da usabilidade do seu produto!
4
1.
Introdução à
Usabilidade e
Arquitetura de
Informação
5
O que é
usabilidade?
6
Funções da usabilidade
╺ aprendizagem
╺ eficiência
╺ memorabilidade
╺ prevenção de erros
╺ satisfação
7
8
O que
acontece
se a usabilidade do projeto está ruim?
9
As 10 heurísticas de
Nielsen
As 10 heurísticas de
Nielsen
1. Mantenha o
status visível
As 10 heurísticas de
Nielsen
2. Tenha
proximidade
com o
mundo real
As 10 heurísticas de
Nielsen
3. Exerça o
controle,
sem tirar
liberdade
As 10 heurísticas de
Nielsen
4. Mantenha
consistência
e padrões
As 10 heurísticas de
Nielsen
5. Previna os
erros
As 10 heurísticas de
Nielsen
6. Crie
reconhecimento
As 10 heurísticas de
Nielsen
7.
Flexibilidade
e eficiência
de uso
As 10 heurísticas de
Nielsen
8. Escolha
um design
minimalista
As 10 heurísticas de
Nielsen
9. Ajude a
diagnosticar
e consertar
erros
As 10 heurísticas de
Nielsen
10. Ofereça
documentação
e ajuda
O que é
arquitetura de
informação?
Etapas da arquitetura
╺ inventário de conteúdo
╺ auditoria de conteúdo
╺ agrupamento de informações
╺ taxonomia
╺ informações descritivas
23
Como detectar problemas na
arquitetura?
- baixo tráfego em determinada categoria
- conversão baixa
- altas taxas de rejeição
- baixo número de entradas
- alto volume de pesquisas
24
Atividade 1
a sala deve se dividir em 10 grupos
cada grupo representa 1 empresa, mas todas do
mesmo ramo de atividade: é um e-commerce de
sapatos
cada empresa deve definir qual será seu tipo de
produto (para mulheres? homens? esportistas?
crianças?) e buscar referências de ecommerce no ramo
(já considerando o que são boas práticas ou não de UX)
2.
Para quem você
está criando sua
UX?
26
Você não é
o seu
usuário
#ficaadica
4 motivos para querer saber
quem é seu usuário
- vai ser mais fácil aprimorar o desenvolvimento do
produto
- o conteúdo vai ser muito melhor
- você vai descobrir quem são seus melhores
clientes
- com certeza você vai ver impacto nos resultados
28
Público Alvo e Persona tem
diferença? Sim!
PÚBLICO ALVO
- É uma definição mais ampla do público que se interessa pelo
seu produto
- Não se refere a alguém específico
- Não aborda os hábitos do usuário
Exemplo: “meu público-alvo é composto por mulheres, entre 18
e 35 anos de idade, classes A e B, solteiras, com nível superior
(cursando ou completo), interessadas em assuntos de amor e
relacionamento.”
Persona
- É a definição de um cliente real, de forma mais humanizada
- Faz referência à uma personagem específica
- Aborda detalhes dos seus hábitos ou comportamento
Exemplo: “Marília tem 31 anos, é formada em Publicidade e é autônoma. Ela é
solteira, gosta muito de viajar e curtir a noite. Está conectada a todas as redes
sociais e tem muitos amigos, mas às vezes se sente sozinha porque ainda não
encontrou a pessoa certa para se relacionar. Ela quer encontrar um companheiro e
sente falta de poder falar mais sobre seus problemas de relacionamento e
aceitação sem ser julgada pelos seus amigos ou familiares.”
Como criar uma persona?
- se baseie em dados de pessoas reais
- se puder, faça em equipe
- agrupe os usuários por características comuns
Finalmente, crie a persona
Exemplos de
personas
Consultoria de
negócios
Ecommerce de
bikes
Casos de uso de
personas
Casos de uso de
personas
Atividade 2
É hora de criar uma persona para sua empresa!
Ela precisa ter:
Nome
Idade
Nível de escolaridade
Ocupação (trabalha fora? cargo? estudante?)
Meios de comunicação que mais usa (redes sociais, jornais, portais, tv)
Objetivos (o que ela pretende? quais são os principais objetivos?)
Desafios (quais dificuldades enfrenta? quais são as dores dela?)
Como sua empresa pode ajudar (como seus produtos e serviços podem ajudar?)
3.
Como usar
pesquisas e
dados para
melhorar seu UX
36
Por que pesquisas e dados
podem melhorar seu UX?
- elimina os projetos desnecessários
- diminui a tomada de decisão baseada em opinião
pessoal
- possibilita levantamento de hipóteses e testes
Função dos dados
QUANTITATIVOS – quem, o que, onde
╺ Apontar os problemas
Audiência, aquisição, comportamento, conversão
╺ Orientar estrategicamente
Necessidade de um projeto, jornada do usuário, dados para criar
personas, investimento certo
╺ Monitorar KPI’s
Ferramentas: Google analytics, Mixpanel, Kissmetrics, Crazyegg, Clicktale
Função dos dados
QUALITATIVOS – por que
╺ Testes de usabilidade
╺ Pesquisas com usuários
Satisfação, intenção, feedback
╺ Focus Group
O que fazer com resultado dos
dados quali e quanti?
╺ levante hipóteses e faça testes A/B
Ferramentas: google optmizer, optimizely,
google analytics e VWO
╺ estabeleça metas
Atividade 3
Considerando este cenário e supondo que a tela de
venda do seu produto seja similar a esta, crie
hipóteses e sugira um teste A/B para solucionar o
problema
A conversão da tela de detalhe do produto para o
carrinho de compra caiu de 15% para 10% depois de
uma atualização
Em pesquisa com os usuários, eles disseram que
não estão concluindo a compra porque há dúvidas
sobre o prazo de entrega e valor do frete. Eles não
querem seguir adiante, sem saber essas
informações.
4.
Protótipos e
design
42
Design persuasivo = credibilidade
╶qualidade do design
╶informação, fotos e vídeos atualizados
╶jogo aberto
╶outras opiniões a seu respeito
Design persuasivo = credibilidade
 
Wireframe, protótipo e mockup?
╺ Wireframe
baixa fidelidade
usado para discutir
elementos da tela
Wireframe, protótipo e mockup?
- Protótipo
reprodução mais fiel da tela
pode ser navegável
usado nos testes de
usabilidade
Wireframe, protótipo e mockup?
- Mokup
layout final bem definido
usado para discutir ajustes
finais ou vender projetos
Precisamos falar
sobre mobile
Site mobile, responsivo ou app?
48
😉
Cenários
Site mobile
2ª versão do seu site
desenvolvido
unicamente
pensando no uso
pelo celular
exige atualização e
manutenção
Site responsivo
versão única do seu
site
se adapta aos
diferentes tamanhos
de tela
facilita a atualização
e manutenção
App
tem a função de engajar o usuário
não custa barato desenvolver e manter um app nativo Android
e iOS, seguindo os padrões de cada um deles
tem a vantagem de contar com recursos do celular para
oferecer ferramentas diferentes (como a câmera, por exemplo)
ou comunicação por push notification ou ainda funções offline
49
50
6 dicas para design
mobile
1. Targets
╺ atenção à zona de clique
╺ evite que seu usuário não consiga clicar
ou que ele clique no lugar errado
2. Fácil de ler não significa fácil de clicar
Como os usuários consomem o
conteúdo
Zonas de clique
3. Navegação por barra, menu e ícones
Action bar Tab bar
Menu e lista
3. Navegação por barra, menu e ícones
4. Sugerindo interatividade
links botões
4. Sugerindo interatividade
swipe scroll
5. Performance
carregamento da página e
otimização de imagens
feedback para os usuários
5. Performance
comunicando o progresso
╺0,1 segundo: sensação de
resposta direta
╺0,2 – 1 segundo: sente atraso,
mas ainda no controle
╺1-10 segundos: já se sente
sujeito à boa vontade do site
funcionar, mas ainda tolera uma
espera
╺Mais de 10 segundos: chegou ao
limite de atenção. Pode desistir
agora de esperar ☹
6. Performance do usuário
cadastro ou login formulários
6. Performance do usuário
filtros mapas
4
lembretes
finais
para melhorar sua UX
61
1. Monte uma equipe multidisciplinar
╺pontos de vista diversos
╺profissionais das áreas de marketing, TI,
atendimento, vendas, criação...
╺use processos e ferramentas para que seja
produtivo
2. Entenda seus usuários
╺tem que conhecer bem seu usuário
╺entender suas necessidades e
expectativas
╺seu usuário pode usar seu produto de
forma inesperada 
3. Siga boas práticas de design
╺adotar comunicação, simbologia e
comportamentos comuns
╺procure ser minimalista
╺facilite a vida do seu usuário 
4. Faça testes
╺teste de usabilidade
╺teste A/B
╺sem testes, você pode ter surpresas
Atividade 4
Cada grupo deverá representar o fluxo de
venda de um produto, em um wireframe. O
fluxo deve conter as seguintes etapas:
- Login/cadastro
- Dados de pagamento
- Confirmação de compra
Use sua imaginação e lembre-se de usar
todos os recursos possíveis para facilitar a
vida (e a compra) do seu usuário
Apresentação
dos grupos
67
68
Obrigado!
Perguntas?
Alexandre Tarifa
Camila Mariano

Mais conteúdo relacionado

Mais procurados

UX UI para Programadores
UX UI para Programadores UX UI para Programadores
UX UI para Programadores Monica Mesquita
 
Interaction South America 2015 - Concepção de um framework para definição em ...
Interaction South America 2015 - Concepção de um framework para definição em ...Interaction South America 2015 - Concepção de um framework para definição em ...
Interaction South America 2015 - Concepção de um framework para definição em ...Catarinas Design de Interação
 
[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óciosFlavio Nazario
 
UX para agências de publicidade
UX para agências de publicidadeUX para agências de publicidade
UX para agências de publicidadeRichard Jesus
 
Pesquisa com usuários aplicada em projetos lean de startups concepção de um f...
Pesquisa com usuários aplicada em projetos lean de startups concepção de um f...Pesquisa com usuários aplicada em projetos lean de startups concepção de um f...
Pesquisa com usuários aplicada em projetos lean de startups concepção de um f...Catarinas Design de Interação
 
Service Design para startups - Melhorando a experiência do usuário do começo ...
Service Design para startups - Melhorando a experiência do usuário do começo ...Service Design para startups - Melhorando a experiência do usuário do começo ...
Service Design para startups - Melhorando a experiência do usuário do começo ...Catarinas Design de Interação
 
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 2015Luisa Ambros
 
UX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negóciosUX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negóciosPriscilla Albuquerque
 
Ux design antes do wireframe
Ux design antes do wireframeUx design antes do wireframe
Ux design antes do wireframeFabricio Teixeira
 
Práticas e Processos de UX
Práticas e Processos de UXPráticas e Processos de UX
Práticas e Processos de UXBruno Polidoro
 
User Experience: O que sua empresa pode ganhar com isso.
User Experience: O que sua empresa pode ganhar com isso.User Experience: O que sua empresa pode ganhar com isso.
User Experience: O que sua empresa pode ganhar com isso.Catarinas Design de Interação
 
apresentação 21212 Aceleradora — Lean UX Workshop
apresentação 21212 Aceleradora — Lean UX Workshopapresentação 21212 Aceleradora — Lean UX Workshop
apresentação 21212 Aceleradora — Lean UX WorkshopPaulo Floriano
 
Design Sprint: seu MLP em até 5 dias.
Design Sprint: seu MLP em até 5 dias.Design Sprint: seu MLP em até 5 dias.
Design Sprint: seu MLP em até 5 dias.Ana Paula Batista
 
A agência Nuve e o processo de projetos
A agência Nuve e o processo de projetosA agência Nuve e o processo de projetos
A agência Nuve e o processo de projetosAgência Nuve
 
UX Design para Desenvolvedores
UX Design para DesenvolvedoresUX Design para Desenvolvedores
UX Design para DesenvolvedoresAnderson Façanha
 
Workshop • UX design •
Workshop • UX design •  Workshop • UX design •
Workshop • UX design • Suzi Sarmento
 

Mais procurados (20)

UX UI para Programadores
UX UI para Programadores UX UI para Programadores
UX UI para Programadores
 
Interaction South America 2015 - Concepção de um framework para definição em ...
Interaction South America 2015 - Concepção de um framework para definição em ...Interaction South America 2015 - Concepção de um framework para definição em ...
Interaction South America 2015 - Concepção de um framework para definição em ...
 
[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
 
UX para agências de publicidade
UX para agências de publicidadeUX para agências de publicidade
UX para agências de publicidade
 
Como viabilizar o UX em pequenas empresas e startups?
Como viabilizar o UX em pequenas empresas e startups?Como viabilizar o UX em pequenas empresas e startups?
Como viabilizar o UX em pequenas empresas e startups?
 
Pesquisa com usuários aplicada em projetos lean de startups concepção de um f...
Pesquisa com usuários aplicada em projetos lean de startups concepção de um f...Pesquisa com usuários aplicada em projetos lean de startups concepção de um f...
Pesquisa com usuários aplicada em projetos lean de startups concepção de um f...
 
User Experience: Um aliado do Marketing Digital
User Experience: Um aliado do Marketing DigitalUser Experience: Um aliado do Marketing Digital
User Experience: Um aliado do Marketing Digital
 
Service Design para startups - Melhorando a experiência do usuário do começo ...
Service Design para startups - Melhorando a experiência do usuário do começo ...Service Design para startups - Melhorando a experiência do usuário do começo ...
Service Design para startups - Melhorando a experiência do usuário do começo ...
 
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
 
UX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negóciosUX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negócios
 
Ux design antes do wireframe
Ux design antes do wireframeUx design antes do wireframe
Ux design antes do wireframe
 
UX Culture
UX Culture UX Culture
UX Culture
 
Práticas e Processos de UX
Práticas e Processos de UXPráticas e Processos de UX
Práticas e Processos de UX
 
User Experience: O que sua empresa pode ganhar com isso.
User Experience: O que sua empresa pode ganhar com isso.User Experience: O que sua empresa pode ganhar com isso.
User Experience: O que sua empresa pode ganhar com isso.
 
apresentação 21212 Aceleradora — Lean UX Workshop
apresentação 21212 Aceleradora — Lean UX Workshopapresentação 21212 Aceleradora — Lean UX Workshop
apresentação 21212 Aceleradora — Lean UX Workshop
 
Design Sprint: seu MLP em até 5 dias.
Design Sprint: seu MLP em até 5 dias.Design Sprint: seu MLP em até 5 dias.
Design Sprint: seu MLP em até 5 dias.
 
A agência Nuve e o processo de projetos
A agência Nuve e o processo de projetosA agência Nuve e o processo de projetos
A agência Nuve e o processo de projetos
 
UX Design para Desenvolvedores
UX Design para DesenvolvedoresUX Design para Desenvolvedores
UX Design para Desenvolvedores
 
Design para empreendedores
Design para empreendedoresDesign para empreendedores
Design para empreendedores
 
Workshop • UX design •
Workshop • UX design •  Workshop • UX design •
Workshop • UX design •
 

Semelhante a UX: Creating Killer Experiences - FIAP

Empreendedorismo UFMG - Design Sprint
Empreendedorismo UFMG - Design SprintEmpreendedorismo UFMG - Design Sprint
Empreendedorismo UFMG - Design SprintAna Paula Batista
 
Transformational Design Thinking - Aula 7
Transformational Design Thinking - Aula 7Transformational Design Thinking - Aula 7
Transformational Design Thinking - Aula 7Lu Terceiro
 
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 aulaMaruanGosch1
 
TDC2016SP - Trilha UX Design
TDC2016SP - Trilha UX DesignTDC2016SP - Trilha UX Design
TDC2016SP - Trilha UX Designtdc-globalcode
 
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 Raiana Comiran
 
CRP- 0420: Comunicação Digital - Aula 8: Trabalho Final e Ferramentas Digitais
CRP- 0420: Comunicação Digital - Aula 8: Trabalho Final e Ferramentas DigitaisCRP- 0420: Comunicação Digital - Aula 8: Trabalho Final e Ferramentas Digitais
CRP- 0420: Comunicação Digital - Aula 8: Trabalho Final e Ferramentas DigitaisCauê de Souza
 
Pitacos sobre usabilidade
Pitacos sobre usabilidadePitacos sobre usabilidade
Pitacos sobre usabilidadeDarcio Vilela
 
2010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 032010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 03Neca Boullosa
 
Inteligência mercado
Inteligência mercadoInteligência mercado
Inteligência mercadoWilson Diniz
 
Hack2B - Design Sprint Workshop
Hack2B - Design Sprint WorkshopHack2B - Design Sprint Workshop
Hack2B - Design Sprint WorkshopAna Paula Batista
 
Condução de pesquisa em Branding - passo-a-passo
Condução de pesquisa em Branding - passo-a-passoCondução de pesquisa em Branding - passo-a-passo
Condução de pesquisa em Branding - passo-a-passoBrav Design
 
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.Jane Vita
 
Evento Comportamento do Consumidor e Estratégias Digitais para E-commerce
Evento Comportamento do Consumidor e Estratégias Digitais para E-commerceEvento Comportamento do Consumidor e Estratégias Digitais para E-commerce
Evento Comportamento do Consumidor e Estratégias Digitais para E-commerceImpacta Eventos
 
Bombando suas conversões com dados
Bombando suas conversões com dadosBombando suas conversões com dados
Bombando suas conversões com dadosWilliam Rufino
 
Seminario Lep Ibge Slideshare
Seminario Lep Ibge SlideshareSeminario Lep Ibge Slideshare
Seminario Lep Ibge Slideshareguest5ccda
 
Usabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGEUsabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGELuiz Agner
 

Semelhante a UX: Creating Killer Experiences - FIAP (20)

Cd - aulas 06 e 07
Cd - aulas 06 e 07Cd - aulas 06 e 07
Cd - aulas 06 e 07
 
Empreendedorismo UFMG - Design Sprint
Empreendedorismo UFMG - Design SprintEmpreendedorismo UFMG - Design Sprint
Empreendedorismo UFMG - Design Sprint
 
Transformational Design Thinking - Aula 7
Transformational Design Thinking - Aula 7Transformational Design Thinking - Aula 7
Transformational Design Thinking - Aula 7
 
CRP-5215-0420-2014-07
CRP-5215-0420-2014-07CRP-5215-0420-2014-07
CRP-5215-0420-2014-07
 
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
 
TDC2016SP - Trilha UX Design
TDC2016SP - Trilha UX DesignTDC2016SP - Trilha UX Design
TDC2016SP - Trilha UX Design
 
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
 
CRP- 0420: Comunicação Digital - Aula 8: Trabalho Final e Ferramentas Digitais
CRP- 0420: Comunicação Digital - Aula 8: Trabalho Final e Ferramentas DigitaisCRP- 0420: Comunicação Digital - Aula 8: Trabalho Final e Ferramentas Digitais
CRP- 0420: Comunicação Digital - Aula 8: Trabalho Final e Ferramentas Digitais
 
Pitacos sobre usabilidade
Pitacos sobre usabilidadePitacos sobre usabilidade
Pitacos sobre usabilidade
 
2010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 032010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 03
 
Inteligência mercado
Inteligência mercadoInteligência mercado
Inteligência mercado
 
Hack2B - Design Sprint Workshop
Hack2B - Design Sprint WorkshopHack2B - Design Sprint Workshop
Hack2B - Design Sprint Workshop
 
Condução de pesquisa em Branding - passo-a-passo
Condução de pesquisa em Branding - passo-a-passoCondução de pesquisa em Branding - passo-a-passo
Condução de pesquisa em Branding - passo-a-passo
 
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
 
Evento Comportamento do Consumidor e Estratégias Digitais para E-commerce
Evento Comportamento do Consumidor e Estratégias Digitais para E-commerceEvento Comportamento do Consumidor e Estratégias Digitais para E-commerce
Evento Comportamento do Consumidor e Estratégias Digitais para E-commerce
 
O que é user experience
O que é user experienceO que é user experience
O que é user experience
 
Bombando suas conversões com dados
Bombando suas conversões com dadosBombando suas conversões com dados
Bombando suas conversões com dados
 
Seminario Lep Ibge Slideshare
Seminario Lep Ibge SlideshareSeminario Lep Ibge Slideshare
Seminario Lep Ibge Slideshare
 
Usabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGEUsabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGE
 

Mais de Alexandre Tarifa

Qual será o SEU software no futuro?
Qual será o SEU software no futuro?Qual será o SEU software no futuro?
Qual será o SEU software no futuro?Alexandre Tarifa
 
Cultura Ágil: Como startups de tecnologia criam produtos
Cultura Ágil: Como startups de tecnologia criam produtosCultura Ágil: Como startups de tecnologia criam produtos
Cultura Ágil: Como startups de tecnologia criam produtosAlexandre Tarifa
 
Ecossistema Microsoft por trás dos maiores apps de saúde do Brasil
Ecossistema Microsoft por trás dos maiores apps de saúde do BrasilEcossistema Microsoft por trás dos maiores apps de saúde do Brasil
Ecossistema Microsoft por trás dos maiores apps de saúde do BrasilAlexandre Tarifa
 
Como escalar 20 milhões de usuários por mês utilizando ASP.NET
Como escalar 20 milhões de usuários por mês utilizando ASP.NETComo escalar 20 milhões de usuários por mês utilizando ASP.NET
Como escalar 20 milhões de usuários por mês utilizando ASP.NETAlexandre Tarifa
 
Minha Vida: +20 milhões de usuários mensais na Web e Mobile
Minha Vida: +20 milhões de usuários mensais na Web e MobileMinha Vida: +20 milhões de usuários mensais na Web e Mobile
Minha Vida: +20 milhões de usuários mensais na Web e MobileAlexandre Tarifa
 
Performance e escalabilidade de aplicações ASP.NET - Visual Studio Summit
Performance e escalabilidade de aplicações ASP.NET - Visual Studio SummitPerformance e escalabilidade de aplicações ASP.NET - Visual Studio Summit
Performance e escalabilidade de aplicações ASP.NET - Visual Studio SummitAlexandre Tarifa
 
Performance na Web - GDG DevFest SP 2014
Performance na Web - GDG DevFest SP 2014Performance na Web - GDG DevFest SP 2014
Performance na Web - GDG DevFest SP 2014Alexandre Tarifa
 
Melhorando a performance do seu banco de dados, não acessando ele!
Melhorando a performance do seu banco de dados, não acessando ele!Melhorando a performance do seu banco de dados, não acessando ele!
Melhorando a performance do seu banco de dados, não acessando ele!Alexandre Tarifa
 
Performance ao extremo para aplicações Web Mobile
Performance ao extremo para aplicações Web MobilePerformance ao extremo para aplicações Web Mobile
Performance ao extremo para aplicações Web MobileAlexandre Tarifa
 
Aplicações Windows Store Conectadas
Aplicações Windows Store ConectadasAplicações Windows Store Conectadas
Aplicações Windows Store ConectadasAlexandre Tarifa
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaAlexandre Tarifa
 

Mais de Alexandre Tarifa (16)

Qual será o SEU software no futuro?
Qual será o SEU software no futuro?Qual será o SEU software no futuro?
Qual será o SEU software no futuro?
 
Cultura Ágil: Como startups de tecnologia criam produtos
Cultura Ágil: Como startups de tecnologia criam produtosCultura Ágil: Como startups de tecnologia criam produtos
Cultura Ágil: Como startups de tecnologia criam produtos
 
Mobile e a Vida Real
Mobile e a Vida RealMobile e a Vida Real
Mobile e a Vida Real
 
Ecossistema Microsoft por trás dos maiores apps de saúde do Brasil
Ecossistema Microsoft por trás dos maiores apps de saúde do BrasilEcossistema Microsoft por trás dos maiores apps de saúde do Brasil
Ecossistema Microsoft por trás dos maiores apps de saúde do Brasil
 
ARQ: Performance na Web
ARQ: Performance na WebARQ: Performance na Web
ARQ: Performance na Web
 
Mobile e a vida real
Mobile e a vida realMobile e a vida real
Mobile e a vida real
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Como escalar 20 milhões de usuários por mês utilizando ASP.NET
Como escalar 20 milhões de usuários por mês utilizando ASP.NETComo escalar 20 milhões de usuários por mês utilizando ASP.NET
Como escalar 20 milhões de usuários por mês utilizando ASP.NET
 
Minha Vida: +20 milhões de usuários mensais na Web e Mobile
Minha Vida: +20 milhões de usuários mensais na Web e MobileMinha Vida: +20 milhões de usuários mensais na Web e Mobile
Minha Vida: +20 milhões de usuários mensais na Web e Mobile
 
Performance e escalabilidade de aplicações ASP.NET - Visual Studio Summit
Performance e escalabilidade de aplicações ASP.NET - Visual Studio SummitPerformance e escalabilidade de aplicações ASP.NET - Visual Studio Summit
Performance e escalabilidade de aplicações ASP.NET - Visual Studio Summit
 
Performance no ASP.NET 5
Performance no ASP.NET 5Performance no ASP.NET 5
Performance no ASP.NET 5
 
Performance na Web - GDG DevFest SP 2014
Performance na Web - GDG DevFest SP 2014Performance na Web - GDG DevFest SP 2014
Performance na Web - GDG DevFest SP 2014
 
Melhorando a performance do seu banco de dados, não acessando ele!
Melhorando a performance do seu banco de dados, não acessando ele!Melhorando a performance do seu banco de dados, não acessando ele!
Melhorando a performance do seu banco de dados, não acessando ele!
 
Performance ao extremo para aplicações Web Mobile
Performance ao extremo para aplicações Web MobilePerformance ao extremo para aplicações Web Mobile
Performance ao extremo para aplicações Web Mobile
 
Aplicações Windows Store Conectadas
Aplicações Windows Store ConectadasAplicações Windows Store Conectadas
Aplicações Windows Store Conectadas
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
 

Último

Certificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfCertificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfLarissa Souza
 
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdf
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdfConcurso Caixa TI - Imersão Final - Rogério Araújo.pdf
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdfGuilhermeRodrigues896381
 
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)Alessandro Almeida
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfRodolpho Concurde
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Dirceu Resende
 
Apresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfApresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfCarlos Gomes
 

Último (6)

Certificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfCertificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdf
 
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdf
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdfConcurso Caixa TI - Imersão Final - Rogério Araújo.pdf
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdf
 
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 
Apresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfApresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdf
 

UX: Creating Killer Experiences - FIAP

  • 3. “ “Uma boa experiência é aquela que deixa o usuário feliz porque ele consegue cumprir seu objetivo.” 3
  • 4. A experiência do seu usuário depende ... ╺ do que você tem para oferecer para ele ╺ de como ele está se sentindo quando chega até você ╺ das regras do seu negócio (promoção, devolução..) ╺ e da usabilidade do seu produto! 4
  • 7. Funções da usabilidade ╺ aprendizagem ╺ eficiência ╺ memorabilidade ╺ prevenção de erros ╺ satisfação 7
  • 8. 8
  • 9. O que acontece se a usabilidade do projeto está ruim? 9
  • 10.
  • 11. As 10 heurísticas de Nielsen
  • 12. As 10 heurísticas de Nielsen 1. Mantenha o status visível
  • 13. As 10 heurísticas de Nielsen 2. Tenha proximidade com o mundo real
  • 14. As 10 heurísticas de Nielsen 3. Exerça o controle, sem tirar liberdade
  • 15. As 10 heurísticas de Nielsen 4. Mantenha consistência e padrões
  • 16. As 10 heurísticas de Nielsen 5. Previna os erros
  • 17. As 10 heurísticas de Nielsen 6. Crie reconhecimento
  • 18. As 10 heurísticas de Nielsen 7. Flexibilidade e eficiência de uso
  • 19. As 10 heurísticas de Nielsen 8. Escolha um design minimalista
  • 20. As 10 heurísticas de Nielsen 9. Ajude a diagnosticar e consertar erros
  • 21. As 10 heurísticas de Nielsen 10. Ofereça documentação e ajuda
  • 22. O que é arquitetura de informação?
  • 23. Etapas da arquitetura ╺ inventário de conteúdo ╺ auditoria de conteúdo ╺ agrupamento de informações ╺ taxonomia ╺ informações descritivas 23
  • 24. Como detectar problemas na arquitetura? - baixo tráfego em determinada categoria - conversão baixa - altas taxas de rejeição - baixo número de entradas - alto volume de pesquisas 24
  • 25. Atividade 1 a sala deve se dividir em 10 grupos cada grupo representa 1 empresa, mas todas do mesmo ramo de atividade: é um e-commerce de sapatos cada empresa deve definir qual será seu tipo de produto (para mulheres? homens? esportistas? crianças?) e buscar referências de ecommerce no ramo (já considerando o que são boas práticas ou não de UX)
  • 26. 2. Para quem você está criando sua UX? 26
  • 27. Você não é o seu usuário #ficaadica
  • 28. 4 motivos para querer saber quem é seu usuário - vai ser mais fácil aprimorar o desenvolvimento do produto - o conteúdo vai ser muito melhor - você vai descobrir quem são seus melhores clientes - com certeza você vai ver impacto nos resultados 28
  • 29. Público Alvo e Persona tem diferença? Sim! PÚBLICO ALVO - É uma definição mais ampla do público que se interessa pelo seu produto - Não se refere a alguém específico - Não aborda os hábitos do usuário Exemplo: “meu público-alvo é composto por mulheres, entre 18 e 35 anos de idade, classes A e B, solteiras, com nível superior (cursando ou completo), interessadas em assuntos de amor e relacionamento.”
  • 30. Persona - É a definição de um cliente real, de forma mais humanizada - Faz referência à uma personagem específica - Aborda detalhes dos seus hábitos ou comportamento Exemplo: “Marília tem 31 anos, é formada em Publicidade e é autônoma. Ela é solteira, gosta muito de viajar e curtir a noite. Está conectada a todas as redes sociais e tem muitos amigos, mas às vezes se sente sozinha porque ainda não encontrou a pessoa certa para se relacionar. Ela quer encontrar um companheiro e sente falta de poder falar mais sobre seus problemas de relacionamento e aceitação sem ser julgada pelos seus amigos ou familiares.”
  • 31. Como criar uma persona? - se baseie em dados de pessoas reais - se puder, faça em equipe - agrupe os usuários por características comuns Finalmente, crie a persona
  • 33. Casos de uso de personas
  • 34. Casos de uso de personas
  • 35. Atividade 2 É hora de criar uma persona para sua empresa! Ela precisa ter: Nome Idade Nível de escolaridade Ocupação (trabalha fora? cargo? estudante?) Meios de comunicação que mais usa (redes sociais, jornais, portais, tv) Objetivos (o que ela pretende? quais são os principais objetivos?) Desafios (quais dificuldades enfrenta? quais são as dores dela?) Como sua empresa pode ajudar (como seus produtos e serviços podem ajudar?)
  • 36. 3. Como usar pesquisas e dados para melhorar seu UX 36
  • 37. Por que pesquisas e dados podem melhorar seu UX? - elimina os projetos desnecessários - diminui a tomada de decisão baseada em opinião pessoal - possibilita levantamento de hipóteses e testes
  • 38. Função dos dados QUANTITATIVOS – quem, o que, onde ╺ Apontar os problemas Audiência, aquisição, comportamento, conversão ╺ Orientar estrategicamente Necessidade de um projeto, jornada do usuário, dados para criar personas, investimento certo ╺ Monitorar KPI’s Ferramentas: Google analytics, Mixpanel, Kissmetrics, Crazyegg, Clicktale
  • 39. Função dos dados QUALITATIVOS – por que ╺ Testes de usabilidade ╺ Pesquisas com usuários Satisfação, intenção, feedback ╺ Focus Group
  • 40. O que fazer com resultado dos dados quali e quanti? ╺ levante hipóteses e faça testes A/B Ferramentas: google optmizer, optimizely, google analytics e VWO ╺ estabeleça metas
  • 41. Atividade 3 Considerando este cenário e supondo que a tela de venda do seu produto seja similar a esta, crie hipóteses e sugira um teste A/B para solucionar o problema A conversão da tela de detalhe do produto para o carrinho de compra caiu de 15% para 10% depois de uma atualização Em pesquisa com os usuários, eles disseram que não estão concluindo a compra porque há dúvidas sobre o prazo de entrega e valor do frete. Eles não querem seguir adiante, sem saber essas informações.
  • 43. Design persuasivo = credibilidade ╶qualidade do design ╶informação, fotos e vídeos atualizados ╶jogo aberto ╶outras opiniões a seu respeito
  • 44. Design persuasivo = credibilidade  
  • 45. Wireframe, protótipo e mockup? ╺ Wireframe baixa fidelidade usado para discutir elementos da tela
  • 46. Wireframe, protótipo e mockup? - Protótipo reprodução mais fiel da tela pode ser navegável usado nos testes de usabilidade
  • 47. Wireframe, protótipo e mockup? - Mokup layout final bem definido usado para discutir ajustes finais ou vender projetos
  • 48. Precisamos falar sobre mobile Site mobile, responsivo ou app? 48 😉
  • 49. Cenários Site mobile 2ª versão do seu site desenvolvido unicamente pensando no uso pelo celular exige atualização e manutenção Site responsivo versão única do seu site se adapta aos diferentes tamanhos de tela facilita a atualização e manutenção App tem a função de engajar o usuário não custa barato desenvolver e manter um app nativo Android e iOS, seguindo os padrões de cada um deles tem a vantagem de contar com recursos do celular para oferecer ferramentas diferentes (como a câmera, por exemplo) ou comunicação por push notification ou ainda funções offline 49
  • 50. 50 6 dicas para design mobile
  • 51. 1. Targets ╺ atenção à zona de clique ╺ evite que seu usuário não consiga clicar ou que ele clique no lugar errado
  • 52. 2. Fácil de ler não significa fácil de clicar Como os usuários consomem o conteúdo Zonas de clique
  • 53. 3. Navegação por barra, menu e ícones Action bar Tab bar
  • 54. Menu e lista 3. Navegação por barra, menu e ícones
  • 57. 5. Performance carregamento da página e otimização de imagens feedback para os usuários
  • 58. 5. Performance comunicando o progresso ╺0,1 segundo: sensação de resposta direta ╺0,2 – 1 segundo: sente atraso, mas ainda no controle ╺1-10 segundos: já se sente sujeito à boa vontade do site funcionar, mas ainda tolera uma espera ╺Mais de 10 segundos: chegou ao limite de atenção. Pode desistir agora de esperar ☹
  • 59. 6. Performance do usuário cadastro ou login formulários
  • 60. 6. Performance do usuário filtros mapas
  • 62. 1. Monte uma equipe multidisciplinar ╺pontos de vista diversos ╺profissionais das áreas de marketing, TI, atendimento, vendas, criação... ╺use processos e ferramentas para que seja produtivo
  • 63. 2. Entenda seus usuários ╺tem que conhecer bem seu usuário ╺entender suas necessidades e expectativas ╺seu usuário pode usar seu produto de forma inesperada 
  • 64. 3. Siga boas práticas de design ╺adotar comunicação, simbologia e comportamentos comuns ╺procure ser minimalista ╺facilite a vida do seu usuário 
  • 65. 4. Faça testes ╺teste de usabilidade ╺teste A/B ╺sem testes, você pode ter surpresas
  • 66. Atividade 4 Cada grupo deverá representar o fluxo de venda de um produto, em um wireframe. O fluxo deve conter as seguintes etapas: - Login/cadastro - Dados de pagamento - Confirmação de compra Use sua imaginação e lembre-se de usar todos os recursos possíveis para facilitar a vida (e a compra) do seu usuário