UX e usabilidade

O UX e UsabilidadeRENATO MELO - 2014

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

O USUÁRIO NÃO QUER ESPERAR!

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

AMAZON

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

GOOGLE

INTERNET ONTEM

Anúncios Sites Institucionais

INTERNET HOJE

Anúncios Sites Institucionais SEO Mobile

RedesSociais

Geo localização ConversãoNo PDV

Logística

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

O QUE PRECISA SER PENSADO

CONTEXTO

USUÁRIOCONTEÚDO

LEMBRE-SE: O FOCO É NAS PESSOAS!

CHECKLIST DO UX

TAMANHO DA TELA

CONECTIVIDADE

OBJETIVOS DO USUÁRIO

AMBIENTES DO

USUÁRIO

CAPACIDADE DO

USUÁRIO

EXEMPLOS DA CLASSE

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

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

É 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

EXPERIÊNCIA NO CELULAR

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

DETALHES

NÃO CONFUNDA O USUÁRIO!!!

O QUE PRECISA TER?

PÃOMAIONESETOMATEALFACEMUSSARELACHEDDARCARNEOVOONION RINGSBACONKETCHUPMOSTARDA

O HAMBURGUER

O QUE PRECISA TER?

PÃOCARNE

O HAMBURGUER

VALIDAÇÃODA IDEIA

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

A MAIORIA É BURRA

FEZ TESTE?

LANÇOU BETA?

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

LEP

O L

EP

O N

O T

WIT

TER

MODELO ANTIGO

IDEIADESENVOLVIMENTO

LANÇAMENTO

MAIS CHANCE DE ERROSEM APRENDIZADOSEM CONTINUIDADE

MODELO NOVO

IDEIADESENVOLVIMENTO

LANÇAMENTO

VALIDAÇÃO

ITERAÇÃO

MENOS CHANCE DE ERROAPRENDIZADOCONTINUIDADE

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

TESTES

1) FEEDBACK

até 0,1s: ideia de continuidade

até 1s: delay percebido, mas ok

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

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.

Nome:

Endereço:

Telefone 1:

Celular:

Telefone da Mãe:

CPF:

RG:

Nome do Cachorro:

Estado Civil:

3) FORMULÁRIO

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

4) CAIXA DE BUSCA

5) ETAPAS DO SEU SITE

1. Escolhas dos produtos

2. Cadastro ou login

3. Entrega e embalagem

4. Pagamento

CASES

EFICÁCIA:

Novo Design e Disposição:Passou de

500 inscrições para 1200 por

mês

EFICIÊNCIA:

35% da operação do Call Center

existia apenas para responder uma demanda: Onde encontrar

a 2ª via do boleto.

Testes de 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

MELHORANDOA

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

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

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

7 - DICAS MATADORAS

1 – SABER DO QUE SE TRATA O SITE

2 – FONTE BACANA, MAS

LEGÍVEL

3 – NÃO USE POP-UP

4 – NÃO USE URLS DISCONEXAS OU DESPROTEGIDAS

5 – NÃO TOQUE

MÚSICA

6 – BOTÃO VOLTAR SEMPRE

FUNCIONANDO!

7 – LINKS COM COR E QUE TROQUEM DE COR

FACEBOOK.COM/RENATOMELOMKT

renato@iskadigital.com.br