webdesign: conversao, ux e usabilidade

38
Conversão UX e Usabilidade RENATO MELO - 2015

Upload: renato-melo

Post on 19-Jul-2015

217 views

Category:

Design


1 download

TRANSCRIPT

Page 1: Webdesign: Conversao, UX e Usabilidade

ConversãoUX e Usabilidade

RENATO MELO - 2015

Page 2: Webdesign: Conversao, UX e Usabilidade

O BÁSICO: O QUE FAZER E O

QUE NÃO FAZER

Page 3: Webdesign: Conversao, UX e Usabilidade

1 – DEIXAR CLARO DOQUE SE TRATA O SITE

Page 4: Webdesign: Conversao, UX e Usabilidade

2 – FONTE BACANA, MAS

LEGÍVEL

Page 5: Webdesign: Conversao, UX e Usabilidade

3 – NÃO USE POP-UP

Page 6: Webdesign: Conversao, UX e Usabilidade

4 – NÃO USE URLS DISCONEXAS OU DESPROTEGIDAS

Page 7: Webdesign: Conversao, UX e Usabilidade
Page 8: Webdesign: Conversao, UX e Usabilidade

5 – NÃO TOQUE

MÚSICA

Page 9: Webdesign: Conversao, UX e Usabilidade

6 – BOTÃO VOLTAR SEMPRE FUNCIONANDO E

NAVEGAÇÃO FACILITADA

Page 10: Webdesign: Conversao, UX e Usabilidade

7 – LINKS COM COR E QUE TROQUEM DE COR DEPOIS

QUE SÃO VISITADOS

Page 11: Webdesign: Conversao, UX e Usabilidade

TESTES

Page 12: Webdesign: Conversao, 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 13: Webdesign: Conversao, 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 14: Webdesign: Conversao, UX e Usabilidade

Nome:

Endereço:

Telefone 1:

Celular:

Telefone da Mãe:

CPF:

RG:

Nome do Cachorro:

Estado Civil:

3) FORMULÁRIO

Page 15: Webdesign: Conversao, 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 16: Webdesign: Conversao, UX e Usabilidade

4) CAIXA DE BUSCA

Page 17: Webdesign: Conversao, UX e Usabilidade

5) ETAPAS DO SEU SITE

1. Escolhas dos produtos

2. Cadastro ou login

3. Entrega e embalagem

4. Pagamento

Page 18: Webdesign: Conversao, UX e Usabilidade

Testes de Usabilidade

Page 19: Webdesign: Conversao, UX e Usabilidade

TESTE COM USUÁRIOS!Nunca mencione a palavra teste, ela assusta as pessoas.

Page 20: Webdesign: Conversao, UX e Usabilidade

Maior controle de dados e variáveis;

Mais fácil de envolver o cliente;

Maior custo

Usuário pode se sentir desconfortável

Comportamento distante do seu universo real

LABORATÓRIO

Page 21: Webdesign: Conversao, UX e Usabilidade

Mais barato;

Usuário se sente mais a vontade;

Mais próximo de seu uso real;

Menor controle dos dados e variáveis

Dificuldade de envolver o cliente (quem contrata)

AMBIENTE DO USUÁRIO

Page 22: Webdesign: Conversao, 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 23: Webdesign: Conversao, UX e Usabilidade

SÉRIES AMERICANAS

NOVELAS BRASILEIRAS

Page 24: Webdesign: Conversao, UX e Usabilidade
Page 25: Webdesign: Conversao, UX e Usabilidade

CASES

Page 26: Webdesign: Conversao, UX e Usabilidade

EFICÁCIA:

Novo Design e Disposição:

Passou de 500 inscrições para 1200 por mês

Page 27: Webdesign: Conversao, 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 28: Webdesign: Conversao, UX e Usabilidade

ConversãoFazer seu usuário agir da forma

desejada e mensurável

Page 29: Webdesign: Conversao, UX e Usabilidade
Page 30: Webdesign: Conversao, UX e Usabilidade

1º Teste: Opções claras = + cadastros?

Page 31: Webdesign: Conversao, UX e Usabilidade

+55% de conversão!Por que o dropdown

ganhou?

Page 32: Webdesign: Conversao, UX e Usabilidade

- Visão clara da ação- Fazer várias combinações de

apartamentos

Page 33: Webdesign: Conversao, UX e Usabilidade

TESTANDOA USABILIDADE

Page 34: Webdesign: Conversao, 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 35: Webdesign: Conversao, 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 36: Webdesign: Conversao, 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 37: Webdesign: Conversao, UX e Usabilidade

DIRETRIZES PARA O TRABALHO

Entrega dia 14.04 até às 18h30 via e-mail:•Site pronto e programado, compactado via zip;•Alterar o título e colocar as suas imagens ;•Relatório (1 a 2 páginas) descrevendo a pré-produção;•Vídeo de até 1 minuto com making off da produção;

•Arquivo fonte:renatomelo.com.br/esamc/webdesign/sustentabilidade.zip

Page 38: Webdesign: Conversao, UX e Usabilidade

FACEBOOK.COM/RENATOMELOMKT

[email protected]