Prof.

Dino Lincoln Figueirôa, MSc

Programa da disciplina
Protótipo Storyboard
Por que fazer protótipos? Fichas
Categorias de prototipagem Simulação em vídeo
Prototipagem de baixa-fidelidade Softwares de prototipagem de
baixa-fidelidade
Prototipagem de alta-fidelidade
Complexidade de prototipagem
Prototipagem horizontal
Prototipagem vertical
Sketch/Esboço/Wireframes
Protótipo

prəʊtəˈtɪpɪ
“Primeiro exemplar, primeiro modelo,
original.”

PROTO + TIPO
Protótipo

prəʊtəˈtɪpɪ
“O protótipo é uma representação
limitada de um design que permite
aos usuários interagir com ele e
explorar sua conveniência”

Ex: Jeff Hawking

Protótipo

prəʊtəˈtɪpɪ
-Modelo em escala reduzida
-Uma parte de um software
-Uma tela ou conjunto de telas
-Blueprints
-Storyboard
Por que fazer protótipos?

 Testar a viabilidade técnica de uma idéia

ISSO IRÁ DETERMINAR QUE
TIPO DE PROTÓTIPOS VOCÊ

“Na prática a teoria é diferente”

 Esclarecer requisitos vagos
IRÁ CONSTRUIR

“É difícil saber o que o cliente quer, mas basta

ele experimentar um protótipo pra achar o que
não quer”
 Realizar testes e avaliações, resolvendo problemas
antes de escrever o código (tempo = dinheiro)
Ex: heurísticas de baixo custo
 Verificar se um certo rumo que tomou o design é
compatível com o resto do desenvolvimento do sistema
Categorias de prototipagem
Prototipagem de baixa-fidelidade
 Associada a prototipagem rápida
 Prototipando interfaces normalmente usa-se papel
 Não tem bugs ou código a ser corrigido

Prototipagem de alta-fidelidade
 Associada a prototipagem digital, assemelha-se ao produto
final
Prototipando interfaces normalmente constrói-se um software
inacabado
Prototipagem de baixa-fidelidade

vídeo
Prototipagem de baixa-fidelidade
Prototipagem de alta-fidelidade

Vídeo
(impressora 3d)

2/3
Prototipagem de alta-fidelidade
Complexidade de prototipagem
Prototipagem vertical
 Permite testar apenas uma pequena parte do produto
 Poucas tarefas funcionando muito bem
Prototipagem horizontal
 Expõe todo o produto, mas sem funcionalidades
plenamente operacionais
Sketch/Esboço/Wireframe
Desenho livre ilustrando o design visando expor:
 Descrições gerais
 Idéias associadas
 Particularidades
Sketch/Esboço/Wireframe
EXEMPLO
Sketch/Esboço/Wireframe
Exercício 01
Esboçe o produto criado pela sua equipe destacando seus
detalhes, vantagens e particularidades. Siga o padrão ilustrado
nesta forma de prototipagem rápida.

DICAS
Não se preocupe com a qualidade dos desenhos
Seja claro com as descrições
Storyboard
A técnica de storyboarding é utilizada para ilustrar o desing
inserindo-o num cenário, permitindo visualizar sua interação
com o usuário e as situações que o mesmo faria estas
interações.
 Pode ilustrar o design através de duas frentes:
 Solução
 Interação
 Principais características:
 Não é uma estória em quadrinhos
 Ênfase na ilustração das ações e/ou movimentos
 Não precisa ser bonito!
Storyboard
EXEMPLO
Storyboard
EXEMPLO
Storyboard
Exercício 02
Prototipe o produto projetado pela sua equipe através de
storyboarding. Para isso, inclua um usuário fictício numa
situação de uso do produto. Isso permitirá ilustrar o manuseio
do mesmo dentro de um contexto.

DICAS
Desenhe setas para descrever ações e movimentos
O desenho não precisa ser bonito, mas os quadros e as
descrições devem ser organizados.
Fichas
Uma técnica simples de prototipar interação comumente utilizada
na prototipagem de websites e também nos testes de usabilidade
com protótipos de baixa-fidelidade.
 Principais características
 Uma ficha maior, posicionada de background representa o
dispositivo onde o software está sendo apresentado ao usuário
 Cada ficha representa uma tela ou elemento da tarefa (Ex:
Dropdown menu ao clicar)
 Durante o uso do protótipo, um facilitador troca as fichas
sobre o “dispositivo” conforme o usuário interage com a
interface
Fichas
Fichas
Fichas
Exercício 03
Prototipe e manuseie um aplicativo para celular, conforme
sorteio, com a técnica de Fichas.

DICAS
Uma ficha maior deve ser o dispositivo (celular) inteiro
“colado” na mesa. Sobre ele, na área da tela, posicionaram
fichas que simulam as telas.
O desenho não precisa ser bonito, mas as telas e elementos
precisam ser entendidos.
Botões, barras de rolagem e demais elementos de interação
podem ser recortados em cores diferentes para destaque de
interação.
Simulação em vídeo
Normalmente uma continuação da prototipagem com fichas, a
simulação em vídeo é uma reprodução da mecânica principal da
interface.
 Vantagens
 Ter um registro prático do manuseio da interface para
apresentação aos superiores ou ao cliente, sem precisar
“armar” as fichas e ter um facilitador que entende o sistema
disponível para “operá-lo”.
 Caso o som seja uma interface importante no manuseio do
software, esta prototipagem permite simular o som integrando-o
a linha de tempo do filme com programas simples de edição.
Simulação em vídeo
Exercício 04
Produza um vídeo demonstrando a interação com as principais
funcionalidades do aplicativo projetado pela sua equipe.

DICAS
A filmagem pode ter uma tomada única ou várias tomadas
posteriormente editadas num software para este fim (Ex:
Windows Movie Maker)
O cliente e os superiores da equipe de desenvolvimento
precisam entender PERFEITAMENTE o funcionamento da
interface. Sejam claros e criativos!
Não é um longa-metragem! O cliente não tem tempo para
avaliar arte
Softwares de prototipagem de baixa-fidelidade
Fore UI Omnigraffle
http://www.foreui.com/ http://www.omnigroup.com/applications/OmniGraffle/

Axure Balsamic
http://www.axure.com/ http://www.balsamiq.com/

IRise Justproto
http://www.irise.com/ http://www.justproto.com/en/

 Vantagens
 Definir um concenso na mecânica de funcionamento das
interfaces
 Propriciar a toda a equipe uma visualização mais clara das
correções no funcionamento da interface
Exercício principal
Exponha o protótipo de fichas de seu aplicativo para, pelo
menos, 8 usuários e peça para que eles executem uma tarefa
padrão do seu produto.
Durante a observação, anote os defeitos e demais
informações relevantes encontrados e quais problemas você
julga críticos para o sucesso ou fracasso do produto.
Não induza o usuário durante o manuseio do aplicativo,
apenas intrua-o a executar uma funcionalidade padrão do
produto. Caso ele tenha dúvida sobre o manuseio, responda
mas anote a dúvida.
Faça uma apresentação final com a prototipagem em video
da interface, storyboard e sketch, bem como o processo de
investigação e criação do produto.
Metodologia
Utilize análise de similares para investigar o problema e o
método 635 para gerar e amadurecer alternativas para os
projetos abaixo.

OBS: Todos tratam-se de aplicativos para aparelhos celulares

com tela touchscreen.
1 – Aplicativo que escolhe uma pessoa aleatoreamente,
substituindo o tradicional “zerinho ou um”.
2 – Aplicativo que serve de jogo da memória educacional
para crianças, ensinando sobre cores, nomes de animais,
cidades e etc.
3 – Aplicativo que mostra o saldo de uma ou múltiplas
contas bancárias de uma mesma pessoa simultaneamente.