UX: Creating Killer Experiences - FIAP

UX: CreatingKillerExperiences

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 1a 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 3Considerando 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 Androide 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

finaispara 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 4Cada 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