1. Disciplina Técnicas de Prototipação 1
Prof.: Paolo Domenico Passeri

2. Aula 1
ESTRUTURA
Apresentação da Disciplina | Introdução a Prototipação |
Sketch | Mind Map | Visual Thinking | Lançamento do Projeto
Aula 2
Tipos de Protótipos | Métodos de Interação | Diagrama de
Fluxo | Prototipação em Papel
Aula 3
Modelagem | Prototipação Física
Aula 4
Protótipos Vivos | Desenhando Experiênicias | Storyboarding
| Role-playing
Aula 5
Business Design | Apresentações em Papel | Frameworks |
Infográficos | O “Pitch”
Aula 6
Projeto Final da Disciplina

3. Equipes do Projeto
1 2
• Lenin • Kallel
• Alysson • Rodrigo
A • Anderson • Rafael Giuliano
• Vinicius • Gabriela
• Ramon • Raphael
• Tiago • Paulo
B • Jean • Viviane
• Pedro • Tiago Pain

4. Individual:
•Ir a um restaurante e OBSERVAR as
interações que ocorrem. Tirar fotos e
fazer anotações se possível.
•Compartilhar fotos e anotações com
as suas equipes.
Grupo:
REVISÃO •Após a visita ao restaurante, validar o
que foi feito na aula 1 (levantar mais
problemas, melhorar os desenhos).
•Pensar
em uma solução técnologica
composta por HW e SW que possa
melhorar a experiência no restaurante.
•Criar um “Concept Sketch” da solução.

5. TÉCNICA D.D.P.

6. Refinando a sua Ideia
• Quem é o seu PÚBLICO ALVO?
• O principal usuário será o cliente, garçom ou outra pessoa.
• Jovens, adultos ou idosos
• Homens ou Mulheres
• Vão usar diariamente ou ocasionalmente
• Quais serão as principais FUNCIONALIDADES?
• Cardápio do restaurante?
• Realizar pedidos?
• Chamar o garçom?
“DECLARAÇÃO DE DEFINIÇÃO DO PRODUTO”

7. “ Desculpe porém não tive tempo de escrever
uma carta curta, então mandei uma longa.”
- Mark Twain

8. Meetings for iPad
Paolo Domenico Passeri

9. • DEFINAM quem será o público alvo da sua
solução
• LEVANTEM todas as funcionalidades que o
sistema deverá ter
• CORTEM funcionalidades que não fazem
parte do core (menos importantes)
ATIVIDADE 1
• UNAM o PÚBLICO ALVO e as
FUNCIONALIDADES em uma única frase
• Criem o SCKETCH CONCEITO da solução
(usando técnicas da aula 1)
• Post-It
45 minutos • Papel
• Lápis/Caneta

10. INTERAGINDO COM DISPOSITIVOS

11. Métodos de Interação
• Lembre-se que existem diferentes
meios de interagir com o
dispositivo
• Antes de desenhar/prototipar a UI,
é necessário avaliar quais meios
estão disponíveis e serão utilizados
• Analise se não existe outra maneira
de usuários entrarem com “dados”
e atingir seus objetivos
• Seja criativo e não se limite ao
“tradicional”

12. Padrões de Interação
• Definem alguns CONTROLES e
ELEMENTOS padrões para o design
de interfaces
• É uma maneira de aprendermos com
soluções que foram bem
APLICADAS e DOCUMENTADAS
por outros designers
• Ótimo ponto de PARTIDA para
DESENHARMOS e entendermos
partes específicas de um design

13. Manipulação INDIRETA Manipulação DIRETA/Touch/Haptic
• É necessário aprender o • Não existe mapeamento pois
mapeamento das teclas as teclas são “virtuais”
• Deve ser muito consistente • Difícil aprender todos os meios
• Não são muito flexíveis de entrada
• São muito flexíveis
• Joystick Direcional • Toques curtos e longos
• Botões Alfa-numéricos • Arrastar
• Soft-keys • Deslizar
• Rodas • Girar
• Pinçar e Expandir
Manipulação por GESTOS
• Utilizada através de sensores
• Através do dispositivo por completo
• Inclinando
• Asoprando
• Chacoalhando
• “Se movendo”

14. Diagrama de
TÉCNICA Fluxo de
Interfaces

15. Diagrama de FLUXO
• Um diagrama SIMPLES que mostra como uma TELA é ligada a outra
• Te obriga a pensar na FLUIDEZ da sua interface, sem considerar os seus
detalhes
• Mesmo que pequena, pode ser CRUCIAL para o desenvolvimento de
uma boa NAVEGAÇÃO
TOOLS

16. Por que usar? • Usado principalmente por dois motivos:
• Ter uma VISÃO GERAL, em alto nível, da interface de usuário
(arquitetura visual da UI)
• Modelar as INTERAÇÕES que os usuários terão com seu sistema;
• Como o fluxo oferece uma visão geral, você tem um entendimento
RÁPIDO de como o sistema deve FUNCIONAR.
• É uma maneira simples para avaliar todo o fluxo da INTERFACE DO
USUÁRIO, e responder algumas perguntas:
• Este fluxo faz sentido?
• Por que eu não posso ir da tela “X” para a tela “Y”?
• É um simples método para validar se a interface será USÁVEL. Se tiverem
muitas caixa e muitas ligações entre eles, é um sinal de que seu sistema é
muito grande e complexo para pessoas entenderem.

17. Exemplo

18. Exemplo

19. Meetings for iPad
Paolo Domenico Passeri

20. • LEIAM novamente a “Declaração de Definição
do Produto” (DDP)
• LISTEM as principais TELAS do sistema
• CONSIDEREM as interações que usadas para
navegação entre as telas (toque, arrasto, click)
ATIVIDADE 2 • TRACEM o seu DIAGRAMA usando post-its
coloridos (uma cor para telas e outra para
interações).
• DESAFIO: tentem REMOVER 1 à 2 das telas e
MANTER a mesma funcionalidade
• Post-It
45 minutos • Papel
• Lápis/Caneta

21. PROTOTIPOS BAIXA FIDELIDADE e ALTA FIDELIDADE

22. BAIXA FIDELIDADE ALTA FIDELIDADE
• Não apoiam a avaliação de todos os • Apoiam a avaliação de todos os
detalhes de um design, como: detalhes de um design
• Interações da interface com o usuário • Necessitam mais tempo e
• Layout e formato do produto recursos para serem construídos
• Representações dinâmicas
• Tempo de resposta do sistema
• Apoiam a avaliação do modelo
conceitual usado no design
• Necessitam de pouco tempo e recursos
para serem construídos

23. Visão Abstrata Baixa Fidelidade

24. Média Fidelidade Alta Fidelidade

25. Prototipos
TÉCNICA
em Papel

26. • Mock-ups ou REPRESENTAÇÕES de um design
O que são?
• É uma maneira para AVALIAR um design através de um teste
com usuários
• Ferramenta de comunicação para facilitar o ENTENDIMENTO
de um design
• São FEITOS de:
1.Esquemas feitos a mão
2.Fotocópias
3.Recortes de pedações de papel
4.Uma combinação criativa de qualquer um dos itens acima

27. Por que usar?
• Explorar - permite testar facilmente diferentes idéias
• Comunicar - apresenta as idéias de uma forma que pode
ser entendida facilmente
• Colaborar - facilita que todo o time de design contribua e
avalie o protótipo
• Validar - determina a eficiência dos elementos de design
e do fluxo de navegação

28. Quando usar?
• Nos primeiros estágios do processo de design, pois:
• É quando as pessoas são menos resistentes a mudanças
• Foi investido pouco tempo e recursos no projeto
• Ainda não se tem clareza de qual a melhor solução

29. • Exigem MÍNIMOS RECURSOS para serem contruidos
Vantagens
• São contruidos com FERRAMENTAS SIMPLES, que
não requerem habilidades específicas
• Permitem que as IDEIAS SEJAM TESTADAS nos
primeiros estágios do processo de design
• Facilitam a COLABORAÇÃO entre os membros do time
• Os protótipos são construídos RAPIDAMETE
• Ajudam a IDENTIFICAR os maiores PROBLEMAS de
usabilidade do projeto

30. Poupar dinheiro usando protótipos
• As maiores melhorias na interface de um produto são obtidas através
da recolha de dados de usabilidade nas fases iniciais do seu
desenvolvimento
• Os benefícios da aplicação de metodologias de usabilidade nas fases
iniciais é 10 vezes maior do que se for apenas utilizada numa fase
posterior (para correção de erros e alteração de elementos na interface)
• É mais barato alterar um produto na sua fase inicial do que fazer
alterações a um produto acabado. Estima-se que seja 100 vezes mais
barato efetuar alterações antes de se começar a programar do que
esperar que todo o desenvolvimento tenha sido efetuado.
Jacob Nielsen

31. O que pode ser avaliado?
Usabilidade Arq. Inform. Design
• Funcionalidade
• Navegação e Estrutura
• Arquiterura da Informação
• Fluxo de telas
• Layout e Agrupamento dos elementos
• Conteúdo
• Terminologia e linguágem
• Rótulos, botões e controles

32. Passos para criar um Protótipo em Papel
1.Identificar o que prototipar
2.Criar o(s) protótipo(s)
3.Planejar o teste
4.Conduzir o teste com o usuário
5.Analisar os resultados
6.Modificar o design
7.Refazer o teste

33. Quais elementos incluir no Protótipo em Papel?
• O protótipo geralmente não precisa ser completo
• Considere as 3 ou 4 principais tarefas do projeto (mais utilizadas
pelo usuário) e faça um protótipo para testá-las
• Comece com conceitos simples e depois evolua para protótipos
mais abrangentes ou profundos

35. Ferramentas necessárias
•P
•P ap
•C os el
•T e t an t-i
• F eso tinh
• C ita ura a m
• T ola ades éd
ia
ra ba iva
ns s
ção e pa tã
Organiza rê o
nc
v idade! ias
Criati

37. Exemplos

38. Ponto-i

39. Exemplo: demonstrando a interface

40. 1. Baseado no diagrama de fluxo, criar um
protótipo do sistema usando a técnica de
prototipação no papel
2. Escolher os principais componentes (3 a 4
telas) e desenha-los.
ATIVIDADE 3. Simular a interação e filmar o resultado
PROJETO Entregáveis desta aula: post no blog da
Faber-Ludens, com DDP, diagrama de fluxo, e
vídeo do protótipo que demonstra o uso do
sistema.
• Papel • Tesoura
2 horas • Post-it • Cola
• Canetinha • Revistas