54
O UX e Usabilidade RENATO MELO - 2014

UX e usabilidade

Embed Size (px)

DESCRIPTION

Os conceitos e a importância do UX (User Experience) e Usabilidade

Citation preview

Page 1: UX e usabilidade

O UX e UsabilidadeRENATO MELO - 2014

Page 2: UX e usabilidade

“Você deve começar com a experiência do usuário e depois ir para a tecnologia”

Page 3: UX e usabilidade

O USUÁRIO NÃO QUER ESPERAR!

Page 4: UX e usabilidade

A CADA 100 MILISSEGUNDOS DE TEMPO DE CARREGAMENTO DE PÁGINA REDUZ 1% DE VENDAS NA AMAZON.

AMAZON

Page 5: UX e usabilidade

AO AUMENTAR O CARREGAMENTO DO SITE DE 0.4 PARA 0.9 SEGUNDOS, PERDEU 20% DA RECEITA EM PUBLICIDADE,

GOOGLE

Page 6: UX e usabilidade

INTERNET ONTEM

Anúncios Sites Institucionais

Page 7: UX e usabilidade

INTERNET HOJE

Anúncios Sites Institucionais SEO Mobile

RedesSociais

Geo localização ConversãoNo PDV

Logística

Page 8: UX e usabilidade

USUÁRIO TEM QUE POSSUIR UMA EXPERIÊNCIA POSITIVA EM TODOS OS CANAIS

Page 9: UX e usabilidade

O QUE PRECISA SER PENSADO

CONTEXTO

USUÁRIOCONTEÚDO

Page 10: UX e usabilidade

LEMBRE-SE: O FOCO É NAS PESSOAS!

Page 11: UX e usabilidade

CHECKLIST DO UX

TAMANHO DA TELA

CONECTIVIDADE

OBJETIVOS DO USUÁRIO

AMBIENTES DO

USUÁRIO

CAPACIDADE DO

USUÁRIO

Page 12: UX e usabilidade

EXEMPLOS DA CLASSE

Page 13: UX e usabilidade

O site do IMDb apresenta muitos links, poucas imagens e um menu pobre. Assim não

oferece uma navegação adequada com o conteúdo que disponibiliza.

Caso focassem em imagens e vídeos na home, seriam capazes de prender muito mais a

audiência na página de entrada.

Gabriela

Page 14: UX e usabilidade

O grande diferencial desse site é sua organização, fácil usabilidade e

aparência, que o transformam em um site agradável de navegar. Geralmente

sites desse ramo são pouco atrativos esteticamente e complicam na localização do objeto desejado.

Paloma

Page 15: UX e usabilidade

É uma evolução no serviço de táxis, já que, ao invés de precisar ir até o ponto ou gastar

dinheiro ligando para alguma companhia, com apenas alguns cliques é possível solicitar um

carro. Eu já utilizei o Easy Taxi em Santos, São Paulo, Rio de Janeiro e Belo Horizonte e

nenhuma vez precisei esperar por mais de 5 minutos.

Priscilla

Page 16: UX e usabilidade

EXPERIÊNCIA NO CELULAR

Page 17: UX e usabilidade

NÃO ESTAR NO MOBILE É COMO FECHAR SUA LOJA UMA VEZ POR SEMANA.

DETALHES

Page 18: UX e usabilidade

NÃO CONFUNDA O USUÁRIO!!!

Page 19: UX e usabilidade

O QUE PRECISA TER?

PÃOMAIONESETOMATEALFACEMUSSARELACHEDDARCARNEOVOONION RINGSBACONKETCHUPMOSTARDA

O HAMBURGUER

Page 20: UX e usabilidade

O QUE PRECISA TER?

PÃOCARNE

O HAMBURGUER

Page 21: UX e usabilidade

VALIDAÇÃODA IDEIA

Page 22: UX e usabilidade

A ARTE DA VALIDAÇÃO:PIADAS ERAM CONTADAS ATÉ PARA AS FAXINEIRAS

Page 23: UX e usabilidade

A MAIORIA É BURRA

Page 24: UX e usabilidade

FEZ TESTE?

LANÇOU BETA?

FEZ UM PROTÓTIPO?ENTÃO O BURRO É VOCÊ!

Page 25: UX e usabilidade

LEP

O L

EP

O N

O T

WIT

TER

Page 26: UX e usabilidade

MODELO ANTIGO

IDEIADESENVOLVIMENTO

LANÇAMENTO

MAIS CHANCE DE ERROSEM APRENDIZADOSEM CONTINUIDADE

Page 27: UX e usabilidade

MODELO NOVO

IDEIADESENVOLVIMENTO

LANÇAMENTO

VALIDAÇÃO

ITERAÇÃO

MENOS CHANCE DE ERROAPRENDIZADOCONTINUIDADE

Page 28: UX e usabilidade

NÃO SE PODE MELHORAR O QUE NÃO SE MEDE

Page 29: UX e usabilidade

TESTES

Page 30: UX e usabilidade

1) FEEDBACK

até 0,1s: ideia de continuidade

até 1s: delay percebido, mas ok

depois de 10s: o usuário muda de tarefa.

Page 31: UX e usabilidade

2) PÁGINAS DE ERRO

O usuário deve saber o que está acontecendo em uma linguagem fácil.

O usuário deve saber que a culpa não foi dele.

O usuário deve conseguir voltar para o site.

Page 32: UX e usabilidade

Nome:

Endereço:

Telefone 1:

Celular:

Telefone da Mãe:

CPF:

RG:

Nome do Cachorro:

Estado Civil:

3) FORMULÁRIO

Page 33: UX e usabilidade

3) FORMULÁRIO

Nome:

Endereço:

CEP:

CPF:

Telefone:

Renato Melo

Rua dos Bobos, número zero

01234-000

12345678900

48 6666-6666

Houve um erro no preenchimento do formulário.

Onde?Não use espaços ou hifens no telefone. Utilize somente números.

13 6666-6666

Page 34: UX e usabilidade

4) CAIXA DE BUSCA

Page 35: UX e usabilidade

5) ETAPAS DO SEU SITE

1. Escolhas dos produtos

2. Cadastro ou login

3. Entrega e embalagem

4. Pagamento

Page 36: UX e usabilidade

CASES

Page 37: UX e usabilidade

EFICÁCIA:

Novo Design e Disposição:Passou de

500 inscrições para 1200 por

mês

Page 38: UX e usabilidade

EFICIÊNCIA:

35% da operação do Call Center

existia apenas para responder uma demanda: Onde encontrar

a 2ª via do boleto.

Page 39: UX e usabilidade

Testes de Usabilidade

Page 40: UX e usabilidade

Laboratório

Medir performance (tempo, número de

erros)

Produção acadêmica (maior “aceitação”

científica para teses, artigos e dissertações)

Estudos permanentes com equipe dedicada

(Globo, Nokia)

Ambiente do Usuário

Obter feedback rápido

Projetos com recursos reduzidos

Testar conceitos e interfaces em fases iniciais de design

Page 41: UX e usabilidade

MELHORANDOA

USABILIDADE

Page 42: UX e usabilidade

WHATSAPP:1 – Adicione uma amiga que você não tem na agenda

2 – Criar um grupo de amigos para combinar um encontro

3 – Enviar uma foto para este grupo de amigos

4 – Alterar seu status

Page 43: UX e usabilidade

WHATSAPP:1 – Adicione uma amiga que você não tem na agenda

1min20s

2 – Criar um grupo de amigos para combinar um encontro

1min14s

3 – Enviar uma foto para este grupo de amigos

42s

4 – Alterar seu status

37s

Page 44: UX e usabilidade

WHATSAPP:1 – Adicione uma amiga que você não tem na agenda

Você não consegue adicionar pelo Whatsapp, tem que ir até a agenda e adicionar a pessoa

2 – Criar um grupo de amigos para combinar um encontro

Apenas o admin pode incluir novas pessoas no grupo

3 – Enviar uma foto para este grupo de amigos

Botão de anexo é representado apenas por um ícone

4 – Alterar seu status

Alguns usuários não sabem que isso é possível

Page 45: UX e usabilidade

7 - DICAS MATADORAS

Page 46: UX e usabilidade

1 – SABER DO QUE SE TRATA O SITE

Page 47: UX e usabilidade

2 – FONTE BACANA, MAS

LEGÍVEL

Page 48: UX e usabilidade

3 – NÃO USE POP-UP

Page 49: UX e usabilidade

4 – NÃO USE URLS DISCONEXAS OU DESPROTEGIDAS

Page 50: UX e usabilidade
Page 51: UX e usabilidade

5 – NÃO TOQUE

MÚSICA

Page 52: UX e usabilidade

6 – BOTÃO VOLTAR SEMPRE

FUNCIONANDO!

Page 53: UX e usabilidade

7 – LINKS COM COR E QUE TROQUEM DE COR

Page 54: UX e usabilidade

FACEBOOK.COM/RENATOMELOMKT

[email protected]