unidade 4

// prototipagem, teste e
iteração
SILVA, Leonardo B. O.
SILVA, Leonardo B. O.

unidade 4
// prototipagem, teste e 4.1 Prototipagem
iteração
Prototipagem

Teste

Iteração
 Prototipagem
// processo de design
SILVA, Leonardo B. O.
imagem: giphy.com
Como prototipar uma interface?
// prototipagem, teste e iteração
imagem: giphy.com
// Prototipagem, teste e iteração

O que é um protótipo?
> O Protótipo é uma simulação em vida real de seu
produto, serviço ou solução. Um protótipo pode ser
criado tanto para testes internos prévios quanto
validações iniciais com usuários e mercado.

> O Protótipo, na maioria das vezes, visa o teste de

alguma funcionalidade específica do produto

O protótipo falhar não é

necessariamente RUIM!
Ele é Iterativo.
imagens: giphy.com
// Prototipagem, teste e iteração

Porque fazer um protótipo?

> Para responder perguntas de negócio ou usabilidade. Podemos querer saber:
- Será que fica claro para o usuário o que ele deve fazer entre cada uma de suas ações?
- O encadeamento de nossas ações faz sentido ou tem algum ponto falho?
- A experiência do cliente está agradável?
- Nosso serviço/ aplicativo se adequa aos dispositivos e contexto de uso?
- Entre outras questões...

Receber
Feedback!
// Prototipagem, teste e iteração

Faça TESTES! A razão de existir do

> O Teste do usuário deve permear todo o protótipo é o TESTE e o
processo de design, se destacando nas
etapas de Criar e, principalmente, de Lançar. FEEDBACK!
> Teste ANTES!
> Faça teste com protótipos de baixa
fidelidade, com desenhos no papel, com
marvel, mímica, etc
> Antecipe os ciclos de aprendizado!

imagens: shutterstock
// Prototipagem, teste e iteração

Faça TESTES! A razão de existir do

> O Teste do usuário deve permear todo o protótipo é o TESTE e o
processo de design, se destacando nas
etapas de Criar e, principalmente, de Lançar. FEEDBACK!
> Teste ANTES!
> Faça teste com protótipos de baixa
fidelidade, com desenhos no papel, com
marvel, mímica, etc
> Antecipe os ciclos de aprendizado!
FAÇA ESBOÇOS “DE MERDA”!
Protótipos de
fonte: Stickdorn

baixa fidelidade!
imagens: shutterstock
Passo a passo
// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto será prototipado/ testado

. Quais as principais
funcionalidades?
. Quais as principais dúvidas de
projeto e interação?

imagens: giphy.com
// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto será prototipado/ testado

2) Mapeie as ações do usuário e as interação com o produto/ interface

. Como seu usuário resolveria o problema

sem seu produto/ interface?
. Qual o passo a passo da interação?

imagens: giphy.com
// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto será prototipado/ testado

2) Mapeie as ações do usuário e as interação com o produto/ interface

3) Levante as funcionalidades chave

. O que é mais importante na

interação?
. O que é principal em valor para o
usuário?

imagens: giphy.com
// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto será prototipado/ testado

2) Mapeie as ações do usuário e as interação com o produto/ interface

3) Levante as funcionalidades chave

4) Defina o ciclo de interação auto-contido PRINCIPAL

. Conte histórias de interação.

. Entregue “CUPCAKES” completos,
não “camadas incompletas de
bolo”.

imagens: giphy.com
// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto será prototipado/ testado

2) Mapeie as ações do usuário e as interação com o produto/ interface

3) Levante as funcionalidades chave

4) Defina o ciclo de interação auto-contido PRINCIPAL

5) Monte as telas
. Não precisa ser perfeccionista.
. Não necessita de foco técnico de
viabilização.
. Use ferramentas rápidas (ex.:
papel e caneta, ppt, etc.)
imagens: giphy.com
// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto será prototipado/ testado

2) Mapeie as ações do usuário e as interação com o produto/ interface

3) Levante as funcionalidades chave

4) Defina o ciclo de interação auto-contido PRINCIPAL

. Opcional.
5) Monte as telas
. Foco em ferramentas ágeis (ex.:
6) Crie o protótipo interativo (opcional) MarvellApp)
// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto será prototipado/ testado

2) Mapeie as ações do usuário e as interação com o produto/ interface

3) Levante as funcionalidades chave

4) Defina o ciclo de interação auto-contido PRINCIPAL

. Normalmente, o teste com o
5) Monte as telas
usuário vai te dar mais informação
6) Crie o protótipo interativo (opcional) do que semanas de projeto!
7) Teste com usuários

imagens: giphy.com
// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto será prototipado/ testado

2) Mapeie as ações do usuário e as interação com o produto/ interface

3) Levante as funcionalidades chave

4) Defina o ciclo de interação auto-contido PRINCIPAL

5) Monte as telas

6) Crie o protótipo interativo (opcional) . Iteração.

7) Teste com usuários

8) Tome nota dos aprendizados e implemente as melhorias!

Recomendações
// Prototipagem, teste e iteração

Marvelapp

fonte: marvelapp.com
// Prototipagem, teste e iteração

AdobeXD

fonte: marvelapp.com
// Prototipagem, teste e iteração

Sketch

fonte: sketch.com
// Prototipagem, teste e iteração

"Papel e caneta"

imagens: the noun project

 Teste
// processo de design
SILVA, Leonardo B. O.
imagem: giphy.com
SILVA, Leonardo B. O.

unidade 4
// prototipagem, teste e 4.2 Teste heurístico
iteração 4.3 Teste com usuários

Prototipagem

Teste

Iteração
Teste heurístico
// prototipagem, teste e iteração
imagem: giphy.com
// Prototipagem, teste e iteração

O que é uma heurística?

Heurísticas são “regras gerais”, que generalizam

conhecimentos específicos, de forma a torná-los mais
facilmente utilizáveis para a tomada de decisão.

fonte: Nielsen Norman Group; Gigerenzer; Gaissmaier

// Prototipagem, teste e iteração

O que é um teste heurístico?

É um método de teste baseado em

heurísticas - ou princípios base -
normalmente realizado por
especialistas na área para o julgamento
assertivo de uma interface.

imagens: giphy.com
// Prototipagem, teste e iteração

Quando fazer

Vantagens Desvantagens

> Aplicação rápida. > Maior chance de erros

> Precisão satisfatória > Possível falta de envolvimento
> Bom para aplicar em estágios dos usuários finais
iniciais de desenvolvimento,
antes de testes com usuários
reais (foco e economia de tempo
em testes posteriores). Bom quando precisamos de
respostas rápidas e preliminares
para a continuidade de um projeto.
 Avalie (1-5) seu produto nas
Heurísticas de Nielsen
1 - Visibilidade do estado do sistema 6 - Relembrar ao invés de memorizar
2 - Correspondência entre o sistema e 7 - Flexibilidade e eficiência de uso
o mundo real 8 - Projeto e estética minimalista
3 - Liberdade e controle para o usuário 9 - Ajude o usuário a reconhecer e se
4 - Consistência e padrão recuperar de erros
5 - Prevenção de erro 10 - Ajuda e documentação
// Prototipagem, teste e iteração

Heurísticas de Nielsen Heurísticas de

Nielsen
1 - Visibilidade do estado do sistema

2 - Correspondência entre o sistema e o mundo real

3 - Liberdade e controle para o usuário

4 - Consistência e padrão

5 - Prevenção de erro

6 - Relembrar ao invés de memorizar

7 - Flexibilidade e eficiência de uso

8 - Projeto e estética minimalista

9 - Ajude o usuário a reconhecer e se recuperar de erros

10 -Ajuda e documentação
Passo a passo
// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto será testado - se você está testando TUDO AO
MESMO TEMPO, você não vai saber o que está dando errado.

. Qual funcionalidade?
. Qual tarefa?
. Quais aspectos da interface e
produto?

fonte: Wong (IDF)

// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto será testado - se você está testando TUDO AO
MESMO TEMPO, você não vai saber o que está dando errado.

2) Escolha as heurísticas a serem utilizadas.

. Heurísticas de Nielsen.
. Adapte para suas necessidades.

imagens: giphy.com fonte: Wong (IDF)

// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto será testado - se você está testando TUDO AO
MESMO TEMPO, você não vai saber o que está dando errado.

2) Escolha as heurísticas a serem utilizadas.

3) Escolha (e convide) os especialistas para a avaliação.

. Entre 3 e 5 especialistas.
. Especialistas no segmento, em
interação, etc. (não usuários)
. + diversidade = melhor!

fonte: Wong (IDF)

// Prototipagem, teste e iteração

Passo a passo
. Quais problemas o produto deveria
1) Definir qual aspecto específico do produto será testado - se você está testando TUDO AO
resolver?
MESMO TEMPO, você não vai saber o que está dando errado.
. Quem vai usar?
2) Escolha as heurísticas a serem utilizadas.. Qual a história de utilização?

3) Escolha (e convide) os especialistas para a avaliação.

4) Briefing/ Contextualização dos avaliadores.

imagens: giphy.com fonte: Wong (IDF)

// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto será testado - se você está testando TUDO AO
MESMO TEMPO, você não vai saber o que. está
Deixe livre
dando para entendimento e
errado.
exploração!
2) Escolha as heurísticas a serem utilizadas.
. Pode durar até 2h
3) Escolha (e convide) os especialistas para a avaliação.

4) Briefing/ Contextualização dos avaliadores.

5) Sessão 1: Familiaridade e exploração

fonte: Wong (IDF)

// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto. Foco
será testado - se você está
no problema e testando TUDO AO
MESMO TEMPO, você não vai saber o quefuncionalidades
está dando errado. a serem testadas.

2) Escolha as heurísticas a serem utilizadas.. Determine o método de avaliação e

3)
registro.
Escolha (e convide) os especialistas para a avaliação.

4) Briefing/ Contextualização dos avaliadores.

5) Sessão 1: Familiaridade e exploração

6) Sessão 2: Avaliação e detalhamento

fonte: Wong (IDF)

// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto será testado - se você está testando TUDO AO
. Registre!
MESMO TEMPO, você não vai saber o que está dando errado.
. Vídeo, áudio, escrita, etc. (se
possível,
2) Escolha as heurísticas a serem prefira vídeo).
utilizadas.
. Peça para
3) Escolha (e convide) os especialistas para aoavaliação.
especialista ser
específico e detalhado nas
4) Briefing/ Contextualização dos avaliadores.
observações.
5) Sessão 1: Familiaridade e exploração

6) Sessão 2: Avaliação e detalhamento

7) Registro de problemas/ observações

imagens: giphy.com fonte: Wong (IDF)

// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto será testado - se você está testando TUDO AO
MESMO TEMPO, você não vai saber o que está dando errado.

2) Escolha as heurísticas a serem utilizadas.

3) Escolha (e convide) os especialistas para a avaliação.

. Junte os especialistas para uma
discussão final e geração de mais
4) Briefing/ Contextualização dos avaliadores.
insights.
5) Sessão 1: Familiaridade e exploração
. Registre!
6) Sessão 2: Avaliação e detalhamento

7) Registro de problemas/ observações

8) Discussão em grupo
fonte: Wong (IDF)
// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto será testado - se você está testando TUDO AO
MESMO TEMPO, você não vai saber o que está dando errado.

2) Escolha as heurísticas a serem utilizadas.

3) Escolha (e convide) os especialistas para a avaliação.

4) Briefing/ Contextualização dos avaliadores.

5) . Processe o registro de forma

Sessão 1: Familiaridade e exploração
compartilhável.
6) Sessão 2: Avaliação e detalhamento
. Defina foco e escopo das
alterações a serem feitas.
7) Registro de problemas/ observações

8) Discussão em grupo
fonte: Wong (IDF)

9) Processamento e implementação das melhorias!

Teste com especialistas,
mas não deixe de testar
com usuários reais!
Teste com usuários
// prototipagem, teste e iteração
imagem: giphy.com
// Prototipagem, teste e iteração

O que é um teste com usuários?

> O teste com o usuário é o simples ato de testar as soluções de seu projeto junto a um ou
mais usuários, buscando reconhecer padrões de uso, falhas de projeto e insights para novas
melhorias.

> O Teste do usuário, idealmente, deve permear todo o processo de design, se destacando
nas etapas de Criar e, principalmente, de Lançar.

Teste ANTES de lançar sua solução!

// Prototipagem, teste e iteração

Quando fazer

Vantagens Desvantagens

> Maior precisão > Maior tempo necessário para

> Obtenção de insights mais realização.
relevantes. > Maior custo para realização.
> Quebra de pressupostos da
equipe de desenvolvimento.
> Menor chance de vieses de
pesquisa e implementação. Faça teste com usuários SEMPRE
> Maior proximidade do uso real
final de mercado.
QUE POSSÍVEL!
> Maior envolvimento com
potenciais usuários promotores.
// Prototipagem, teste e iteração

Vários tipos de testes

> Teste de usabilidade - entrega para
o usuário o protótipo enquanto se
observa e registra o seu uso
> Observação direta, uso de
ferramentas como Hotjar
> Teste AB - tentar efetividade de
uma opção A comparada a uma
opção B para ver qual performa
melhor
> Teste com pessoas REAIS
> Indicado realizar o teste
qualitativos com 5 pessoas
Passo a passo
// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto será testado - se você está testando TUDO AO
MESMO TEMPO, você não vai saber o que está dando errado.

. Qual funcionalidade?
. Qual tarefa?
. Quais aspectos da interface e
produto?
// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto será testado - se você está testando TUDO AO
MESMO TEMPO, você não vai saber o que está dando errado.

2) Definir perfil dos usuários a serem convidados para o teste

. Defina perfil e variedade desejável.

. Priorize “Early adopters”
. Defina quais indivíduos e convide-os!
. Entre em contato e agende os testes!

imagens: giphy.com
// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto será testado - se você está testando TUDO AO
MESMO TEMPO, você não vai saber o que está dando errado.

2) Definir perfil dos usuários a serem convidados para o teste

3) Definir situação de uso e teste da solução com o usuário

. No escritório?
. No contexto de uso?
. Quais dispositivos?
. Quanto tempo de duração?
// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto será testado - se você está testando TUDO AO
MESMO TEMPO, você não vai saber o que está dando errado.

2) Definir perfil dos usuários a serem convidados para o teste

3) Definir situação de uso e teste da solução com o usuário

4) Realização de teste pelo usuário

. Conte histórias de interação e simule

cenários.
. Não interfira!
// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto será testado - se você está testando TUDO AO
MESMO TEMPO, você não vai saber o que está dando errado.
. Sempre tenha registrado!
2) Definir perfil dos usuários a serem convidados para o teste
. Prefira vídeo, se possível.
. Peça
3) Definir consentimento
situação (TCLE).
de uso e teste da solução com o usuário

4) Realização de teste pelo usuário

5) Registro do teste (gravação em vídeo, captura de tela, registro escrito, etc.)

imagens: giphy.com
// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto será testado - se você está testando TUDO AO
MESMO TEMPO, você não vai saber o que está dando errado.
. Processe e anote de maneira
2) Definir perfil dos usuários a serem convidados para o teste
compartilhável e auto-explicativa (facilita
retorno
3) Definir situação de uso e teste da solução com oeusuário
trabalho posterior).
4) Realização de teste pelo usuário

5) Registro do teste (gravação em vídeo, captura de tela, registro escrito, etc.)

6) Processamento do teste, com anotação de insights e pontos de melhoria

// Prototipagem, teste e iteração

Passo a passo
1) Definir qual aspecto específico do produto será testado - se você está testando TUDO AO
MESMO TEMPO, você não vai saber o que está dando errado.
. Saiba priorizar funcionalidades e
2) Definir perfil dos usuários a serem convidados para o teste
melhorias.
. Foco
3) Definir situação de uso e teste da solução noo usuário
com valor!
4) Realização de teste pelo usuário

5) Registro do teste (gravação em vídeo, captura de tela, registro escrito, etc.)

6) Processamento do teste, com anotação de insights e pontos de melhoria

7) Implementação das melhorias mais pertinentes.

Recomendações
// Prototipagem, teste e iteração

Hotjar

fonte: hotjar.com
// Prototipagem, teste e iteração

Google Analytics

fonte: analytics.google.com
 Está em dúvida sobre qual
caminho tomar?
TESTE COM SEUS USUÁRIOS!
Teste sua solução ANTES, DURANTE e
DEPOIS da implementação!
 Iteração
// processo de design
SILVA, Leonardo B. O.
imagem: giphy.com
SILVA, Leonardo B. O.

unidade 4
// prototipagem, teste e 4.4 Análise dos resultados
iteração 4.5 Iteração

Prototipagem

Teste

Iteração
Análise dos resultados
// prototipagem, teste e iteração
imagem: giphy.com
// Prototipagem, teste e iteração

Transcrição/ processamento
> Registro das percepções.
> Busque realizar o registro o mais próximo da
realização dos testes, de maneira a evitar a perda de
insights.

> Resumo das principais percepções.

> Tenha clareza e se lembre das perguntas que
estava buscando responder com os testes.

Descreva a percepção das

imagens: giphy.com
pessoas sem julgamentos!
// Prototipagem, teste e iteração

Síntese das percepções

> Tome nota dos comportamentos mais frequentes (teste com usuários)
> Anote quais hipóteses foram confirmadas e quais foram negadas.

> Sintetize da maneira mais visual possível, facilitando a consulta e compartilhamento.

// Prototipagem, teste e iteração

Geração de ideias e insights

> Gera ideias por meio da frase “Como poderíamos…”
> Gere ideias a partir dos principais problemas e achados.
~ Ex.: Como poderíamos... reduzir a angústia no momento do pagamento?
Como poderíamos… deixar mais claro o caminho a ser seguido na interface?
Como poderíamos… fazer com que os usuários acessem mais determinada área da interface?

Problemas sozinhos paralizam.

Ideias e insights puxam para a ação e
solução.
imagens: giphy.com
// Prototipagem, teste e iteração

Resumo em uma tela compartilhável

> Sintetize as principais ideias e descobertas em uma tela simples, visual e facilmente
compartilhável.
> Foque nos achados que mais impactam no desenvolvimento e objetivos do negócio
> Coloque o link/ espaço para “mais informações” e aprofundamento para aqueles que se
interessaram e querem entender melhor os achados.
> Compartilhe em local que todos possam ver (prefira fazer uma apresentação antes de
“mandar um e-mail”).
. Use ferramentas de compartilhamento que todos usam!
. Apresentações tem mais impacto que um e-mail.
. Verifique periodicamente o que as equipes fizeram com
os achados.
Compartilhe seus achados
e parta para a ação!
Iteração
// prototipagem, teste e iteração
imagem: giphy.com
// Prototipagem, teste e iteração

O que é iteração
> Entendermos o que deu certo e o que deu errado para recomeçarmos o ciclo todo
novamente, melhorando continuamente a nossa solução.

> Você tem de passar pelo processo inteiro QUANTAS VEZES FOR NECESSÁRIO, até ter o
sucesso desejado.

> Mesmo alcançado o sucesso, é interessante manter-se o ciclo de melhoria contínua para
que sua inovação sempre acompanhe as mudanças contínuas do seu contexto, do mundo e
das necessidades das pessoas.
// Prototipagem, teste e iteração

O processo de design

Entender Definir
(understand) (define)

Iterar!
Lançar Criar
(release) (make)
// Prototipagem, teste e iteração

ENTENDER
Iteração

. Coletar das informações a

Entender Definir
respeito de seu último
(understand)
lançamento.
(define)

Iterar!
Lançar Criar
(release) (make)

imagens: giphy.com
// Prototipagem, teste e iteração

DEFINIR
Iteração

Entender Definir
(understand) (define)
. Selecionar principais problemas e
pontos positivos
Iterar!
. Decidir o que melhorar, o que parar
de fazer e o que potencializar.
Lançar Criar
(release) (make)
// Prototipagem, teste e iteração

CRIAR
Iteração

Entender
. Gerar insights a partir de Definir
(understand) (define)
lançamento anterior.
. Elaboração de soluções para os
Iterar!
problemas definidos para
lançamentoLançar Criar
(release) (make)

imagens: giphy.com
// Prototipagem, teste e iteração

LANÇAR
Iteração

Entender Definir
(understand) (define)
. Viabilização e lançamento de mercado
da nova versão iterada do seu produto,
Iterar!
serviço ou inovação.
Lançar Criar
(release) (make)
// Prototipagem, teste e iteração

ITERAR
Iteração

Entender Definir
(understand) (define)

Iterar!
Lançar Criar
(release) (make)

imagens: giphy.com
// Prototipagem, teste e iteração

O processo de design

Entender Definir
(understand) (define)

Iterar!
Lançar Criar
(release) (make)
// Prototipagem, teste e iteração

Criação de plano de ação e roadmap de

desenvolvimento
DEFINA OBJETIVOS - MÉDIO/LONGO PRAZO

DEFINA OBJETIVOS - CURTOS E ALCANÇÁVEIS

1 3 . Valide o escopo, responsáveis,

5
2 4 objetivos e deadlines com SUA EQUIPE!
Repita até ficar bom!
 Um bom design não acaba quando
"o processo chega ao fim", mas
quando chegamos a uma solução que
impacta pessoas.
 ~ obrigado! ~

unidade 4
// prototipagem, teste e
iteração
SILVA, Leonardo B. O.