Prototipao

Interface Humano-Computador
Prof. MSc. Alexandre R. Lenz

Agenda
1. Introduo
Conceitos
2. Por que prototipar?
3. O que prototipar?
4. Modelos de Ciclo de Vida
para Prototipao em IHC
5. Tipos de Prottipos
6. Classificao de Prottipos
7. Tcnicas de Prototipao
Sketch

Diagrama de Fluxo de
Interfaces
Prottipos em papel
Storyboard
Wireframe
Mockup
Prottipo Interativo
8. Ferramentas para
Prototipao
9. Prototipao Mobile

Modelos Conceituais
Mapa Mental
Visual Thinking
2

Introduo

Prottipo:
do Latim, \proto\ ORIGINAL e \tipo\ MODELO.

Um tipo, forma ou exemplar original que serve

como base ou padro para futuros estgios de
um projeto ou simplesmente: um exemplar
inicial que comunica uma ideia.

Introduo

Prototipao: um processo iterativo, para

criao de prottipos que serve para
rapidamente testar conceitos, produtos e
negcios e trazer respostas a uma
pergunta.

Introduo
No design de interao um prottipo pode ser:
Uma srie de esboos em papel construdos a mo livre
Um conjunto de storyboards
Uma apresentao (PowerPoint, Apresntao do
OpenOffice, entre outros tipos de documentos)
Um vdeo simulando o uso de um sistema
Um pedao de madeira (PalmPilot) ou uma maquete
construda com argila, cartolina, ou outro material
Algumas telas construdas em uma linguagem de
programao

Introduo

Comunicar-se como?
Visualmente: atravs de prototipao

Prototipao
Por que prototipar?
Avaliao e retorno rpido so caractersticas principais do
design de interao
Stakeholders podem ver, pegar, interagir com o prottipo
mais facilmente que um documento ou rascunho
A equipe de desenvolvimento pode ser mais efetiva na
comunicao com clientes
Encoraja a reflexo em pontos importantes para o design
de interao
Prottipos respondem perguntas, e fornecem suporte aos
designers para escolher entre alternativas

Prototipao
Por que prototipar?

Se manter competitivo,
produzir e testar novas ideias
e comunicar-se com
dinamismo!
8

Prototipao

O que prototipar?
Questes tcnicas
Fluxo de trabalho e tarefas de design
Layout de telas e como a informao ser
mostrada
reas de interao que aparentemente so
difceis, controversas e crticas de projetar

Modelos de Ciclo de Vida para Prototipao em IHC

Como o sistema pode apoiar os usurios?
Como os usurios podem interagir com o sistema?
Como deveria ser a interface para possibilitar tal interao?

10

Modelos de Ciclo de Vida para Prototipao em IHC

(Brown, 1996; da Silva et al., 2005)

11

Modelos de Ciclo de Vida para Prototipao em IHC

Modelo de Processo Centrado no Usurio. PREECE,

Jenny. A Guide to Usability: Human Factors in
Computing. Inglaterra: Addison-Wesley, 1993.

12

Tipos de prottipos
A prototipao de interfaces (Offline prototypes)
a que mais se v.
Normalmente representada por telas estticas,
contendo representaes mais ou menos fiis aos
elementos de input e output que o usurio poder ver
e acionar.

A prototipao de interao (Online prototypes)

igualmente importante, embora ela seja por vezes
mais difcil de representar.
Como tem uma extenso temporal, precisa de um
suporte tecnolgico em que se possa representar
sequncias de ao-reao.
13

Tipos de prottipos
Offline prototypes
Criao rpida, em geral nas etapas iniciais do design;
Baratos e descartveis;
Tcnicas: sketches, storyboards, prototipao em papel,
mockups, etc.

Online prototypes

Executados em um computador;
Efetivos quando o design bsico foi decidido;
Mais custosos, em geral evolucionrios;
Exemplos: animaes, vdeos interativos, interfaces
resultantes de linguagens de scripting/programao.
(Beaudouin-Lafon; Mackay, 2007, ; Preece;
Rogers; Sharp, 2002, Nielsen, 1993)
14

Tipos de prottipos
Quo interativo o prottipo para um usurio
Nveis de Interao:
Fixed prototypes:
No permitem interao com o usurio ou a interao limitada;
Usados para ilustrar ou testar cenrios.

Fixed-path prototypes:
Interatividade controlada: mais de uma possiblidade de interao
oferecida;
Ideal para uso com cenrios;
Permite ao usurio experimentar como ser o sistema.

Open prototypes:
Possuem diversas formas e possibilidades de interao;
Em geral, cobrem apenas parte do sistema;
Funcionam como o sistema real, mas com limitaes.
(Beaudouin-Lafon; Mackay, 2007)

15

Tipos de prottipos

O ciclo de vida do prottipo

Tempo de vida:
Evolucionrio e Iterativo;
Interativo;
Throw-away ou descartvel.

(Beaudouin-Lafon; Mackay, 2007; Nielsen, 1993)

16

Classificao de prottipos
Classificao de prottipo de acordo com o nvel de
fidelidade em relao ao produto final [Mayhew, 1999]
So quatro as dimenses que definem a fidelidade de
um modelo:
1. detalhamento: a quantidade de detalhes que o modelo
suporta.
2. grau de funcionalidade: a extenso na qual os detalhes de
operao so completos
3. similaridade de interao: o quo similar as interaes como
o modelo sero com o produto final
4. refinamento esttico: o quo realstico o modelo .

17

Classificao de prottipos
Baixa Fidelidade
[Mayhew, 1999]

Mdia
Fidelidade

Alta Fidelidade

Detalhamento

Baixo grau de
detalhamento

Detalhamento
razovel sem
contedo

Conter alguma
amostra do contedo

Grau de
funcionalidade

Apresenta
visualmente a
funcionalidade

Grau de
funcionalidade no
fator fundamental

Nvel razovel de
funcionalidade
implementada

Similaridade de
interao

No possui recursos
interao

Grau de interao no Interao e navegao

fator fundamental
do usurio como se
fosse o
produto final

Refinamento
esttico

Feito em papel e no
exibe o seu aspecto
visual

Feito no computador
e pode apresentar o
aspecto visual
mais prximo do
definitivo

Representa fielmente
o produto final
em termos de
18
aparncia visual

Classificao de prottipos

Note que a classificao no rgida e d

margem para interpretao.
Exemplo: Um wireframe considerado de
baixa por alguns autores e de mdia fidelidade
por outros.

19

Classificao de prottipos
(Rudd et al.,
1996)

Vantagens

Menor custo de desenvolvimento

Baixa
Fidelidade Avalia mltiplos conceitos de

design
Comunicao til
Enderea problemas de layout da
tela
til para identificar requisitos de
mercado
Prova de conceito

Funcionalidades completas
Alta
Fidelidade Totalmente interativa

Dirigida ao usurio
Define claramente o esquema
navegacional
til para explorao e teste
Look & feel do produto final
Serve como uma especificao viva
Ferramenta de vendas e marketing

Desvantagens
Verificao limitada de erros
Detalhamento pobre de
especificao para codificao
Dirigido ao facilitador
Utilidade limitada depois de
estabelecidos os requisitos
Utilidade limitada para testes de
usabilidade
Limitaes de navegao e fluxo de
aplicao

Mais caro para desenvolver

Consome tempo para criao
Ineficiente para prova de conceito
No efetivo para obteno de
requisitos

20

Classificao de prottipos
[Fileno, E.F., 2008] Instituto Faber-Ludens de Design de Interao

Baixa
Fidelidade
Fase do Ciclo de Definio de
Requisitos
Vida de
Software
Tipo de
Prottipo
Exemplos de
Ferramentas

Mdia
Fidelidade
Definio da
Arquitetura (Projeto)

Esquemas feitos Detalhado

mo
Material de
Escritrio

Alta
Fidelidade
Implementao

Realstico *

Software de Autoria e Linguagens de

apresentao:
programao:
PowerPoint, Visio
HTML, Visual Basic

* Muitas vezes evolutivo: as interfaces prototipadas

evoluem para o sistema propriamente dito.
21

Classificao de prottipos

Prottipos de Alta Fidelidade X Baixa Fidelidade

Prottipos de Alta Fidelidade
Apoiam a avaliao de todos os detalhes de um design
Necessitam mais tempo e recursos para serem construdos

Prottipos de Baixa Fidelidade

No apoiam a avaliao de todos os detalhes do design, como:
Interaes da interface com o usurio
Layout e formato do produto
Representaes dinmicas
Tempo de resposta do sistema
Apoiam a avaliao do modelo conceitual usado no design
Necessitam de pouco tempo e recursos para
serem construdos
22

Exemplos: Classificao de prottipos

Baixa
Fidelidade

23

Exemplos: Classificao de prottipos

Mdia
Fidelidade

24

Exemplos: Classificao de prottipos

Alta
Fidelidade

25

Tcnicas de Prototipao
Mackay, 2007; Preece;
Tcnicas de Prototipao (Beaudouin-Lafon;
Rogers; Sharp, 2002; Nielsen, 1993)

Prototipao Rpida

Offline Rapid Prototyping:

Sketch
Diagrama de Fluxo de Interfaces
Prottipos em papel
O resultado de cada tcnica
Storyboard
visualmente diferente,
Wireframe
comunicam algo diferente e
Mockup
Online Rapid Prototyping:
tm finalidades diferentes.
Prottipo Interativo
26

Sketch

27

Sketch

28

Sketch

No simples representar no papel

uma imagem mental.

SENSAO
29

Sketch

30

Sketch

31

Sketch

No
necessrio ser
um desenhista!

32

Sketch

Sketch :

rpido
barato
direto
pouco detalhado
livre
dilogo
descartvel
ambguo
sugestivo
nico
33

Modelo Conceitual

Uma descrio do sistema proposto em

termos de um conjunto de ideias e conceitos
integrados a respeito do que ele deve fazer,
de como deve se comportar e com o que
deve se parecer que seja compreendida
pelos usurios da maneira pretendida.
(Preece, Rogers e Sharp designers)

34

Modelo Conceitual

A - Modelos conceituais baseados em atividades

B - Modelos conceituais baseados em objetos
C - Modelos conceituais baseados em metforas

35

Modelo Conceitual

A - Modelos conceituais baseados em atividades

Instruo: Descreve como os usurios realizam suas
tarefas instruindo o sistema sobre o que fazer.
Ex: MS-DOS

36

Modelo Conceitual

A - Modelos conceituais baseados em atividades

Conversao: baseado na ideia de conversao entre uma

pessoa e um sistema, em que atua como um parceiro em um
dilogo.
EX: Voz

37

Modelo Conceitual

A - Modelos conceituais baseados em atividades

Manipulao e navegao: Descreve a atividade de

manipular objetos e navegar por espaos virtuais explorando
o conhecimento que os usurios tm de como fazer isto no
mundo fsico real.
Limpar
EX: Analogias
Lixeira

Go
Home

38

Modelo Conceitual

A - Modelos conceituais baseados em atividades

Explorao e pesquisa: Baseado na ideia de possibilitar s

pessoas explorar e pesquisar informaes valendo-se de sua
experincia em realizar essas tarefas com mdias j
existentes.
EX: Pginas web, jogos e videogames

39

Modelo Conceitual

B - Modelos conceituais baseados em objetos

Baseada em um objeto ou artefato, como um ferramenta, um

livro ou um veculo.
Mais especficos do que modelos baseados em atividades,
enfocando a maneira como um certo objeto utilizado em
um determinado contexto.
So baseados em um analogia com algo do mundo fsico.
Ex: Planilha de clculo -> Livro Caixa

40

Modelo Conceitual

C - Modelos conceituais baseados em metforas

Procura a semelhana em aspectos de um entidade
fsica, mas que tambm tem seu prprio
comportamento e propriedades.

Ex: Buscar -> Lupa

41

Modelo Conceitual: Diagramas

Modelo conceitual [Dan Brown]

Modelo conceitual um diagrama que mostra as

relaes entre diferentes conceitos abstratos.
O modelo conceitual tambm pode ser nomeado
de diagrama conceitual.
1.
2.
3.

Tradicional: baseado nas conexes entre substantivos e

verbos. a verso mais simplificada.
Relacionamento: evidencia as conexes entre os blocos.
Semntico: trabalha vrios conceitos em um mesmo
diagrama.

42

Modelo Conceitual: Diagramas

1. Tradicional:

43

Modelo Conceitual: Diagramas

2. Relacionamento:

44

Modelo Conceitual: Diagramas

3. Semntico:

Escritrio de advocacia:
Processos (crculos)
Documentos (quadrados)
Pessoas (figuras).

45

Modelo Conceitual

Desenvolver um modelo conceitual implica

visualizar o produto proposto, baseando-se nas
necessidades do usurio e em outros
requisitos identificados.

Perguntar, observar, conviver, pesquisar.

46

Modelo Conceitual
Finalidade Para que servem os modelos conceituais?
Serve para traduzir as ideias atravs do uso de estruturas de relacionamentos.

Audincia Quem usa os modelos conceituais?

utilizado como documento da estruturao do projeto (experincia do
usurio). Serve na comunicao entre a equipe do projeto e os parceiros.

Escala Qual o tamanho do trabalho?

O tamanho sempre limitado, por isso deve-se sempre focar em assuntos
chaves ou ideias especficas.

Contexto Quando fazer o modelo conceitual?

Simplificar, ao invs de complicar, para estabelecer um vocabulrio comum
entre todos os envolvidos no projeto.

Formato Com que ele deve se parecer?

Ele representa ideias simples, por isso no deve ter muito detalhamento ou
muitos elementos.

47

Modelo Conceitual

48

Modelo Conceitual

49

Modelo Conceitual

Tcnicas:
MAPA MENTAL
VISUAL THINKING

50

Mapa Mental

Mapa Mental: um diagrama usado para

representar palavras, ideias, tarefas e
outros itens ligados e dispostos ao redor
de uma palavra ou ideia central.

51

Mapa Mental

52

Mapa Mental

53

Mapa Mental

Muito
bom
para:

Visualizar ideias
Relacionamentos entre elementos
Brainstorming, Ideao
Tomar decises a partir de anotaes
Quebrar problemas em pedaos
Organizar a mente!

54

Mapa Mental

55

Visual Thinking

Visual Thinking: a prtica de usar figuras

para resolver problemas, pensar em
situaes e comunicar-se de maneira
clara.

56

Quais Problemas?

Visual Thinking
Quem?
desafios relacionados a objetos, pessoas e papis

Quanto?
desafios que envolvem medidas e contagens

Quando?
desafios relacionados a agendamentos e cronogramas

Onde?
desafios relacionados a direcionamento e como as
objetos se encaixam

Como?
desafios relacionados a como coisas influenciam umas
as outras

Por qu?
desafios relacionados a ver o grande esquema,
estratgia!
57

Visual Thinking
Usando...

...em conjunto

58

Visual Thinking
Biblioteca pessoal de objetos:

59

Visual Thinking
Biblioteca pessoal de metforas:

60

Visual Thinking

61

Visual Thinking

62

Diagrama de Fluxo de Interfaces

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 NAVEGAO

63

Diagrama de Fluxo de Interfaces

Usado principalmente por dois motivos:
Ter uma VISO GERAL, em alto nvel, da interface de usurio
(arquitetura visual da UI)
Modelar as INTERAES que os usurios tero com seu sistema;

Como o fluxo oferece uma viso geral, voc tem um

entendimento RPIDO de como o sistema deve FUNCIONAR.
uma maneira simples para avaliar todo o fluxo da
INTERFACE DO USURIO, e responder algumas perguntas:
Este fluxo faz sentido?
Por que eu no posso ir da tela X para a tela Y?

um simples mtodo para validar se a interface ser USVEL.

Se tiverem muitas caixas e muitas ligaes entre elas, um
sinal de que seu sistema muito grande e complexo para as
pessoas entenderem.
64

Diagrama de Fluxo de Interfaces

Para modelar as INTERAES que os usurios tero com seu
sistema.
necessrio um conhecimento aprofundado dos mtodos
e padres de interao.

65

Diagrama de Fluxo de Interfaces

Mtodos de Interao
Lembre-se que existem diferentes meios de
interagir com o dispositivo
Antes de desenhar/prototipar a UI, necessrio
avaliar quais meios esto disponveis e sero
utilizados
Analise se no existe outra maneira dos usurios
entrarem com dados e atingir seus objetivos
Seja criativo e no se limite ao tradicional

66

Diagrama de Fluxo de Interfaces

Padres de Interao
Definem alguns CONTROLES e ELEMENTOS padres
para o design de interfaces
uma maneira de aprendermos com solues que
foram bem APLICADAS e DOCUMENTADAS por
outros designers
timo ponto de PARTIDA para DESENHARMOS e
entendermos partes especficas de um design

67

Diagrama de Fluxo de Interfaces

Padres de Interao:

68

Diagrama de Fluxo de Interfaces

Exemplo de Diagrama de Fluxo de Interfaces:

69

Exemplo de
Diagrama
de Fluxo de
Interfaces:

70

Prottipos em Papel
So REPRESENTAES de um design
uma maneira para AVALIAR um design atravs de
um teste com usurios
Ferramenta de comunicao para facilitar o
ENTENDIMENTO de um design
So FEITOS de:
1. Esquemas feitos a mo
2. Fotocpias
3. Recortes de pedaes de
papel
4. Uma combinao criativa
de qualquer um dos itens
acima

71

Prottipos em Papel

Por que usar?

Explorar - permite testar facilmente diferentes ideias
Comunicar - apresenta as ideias de uma forma que
pode ser entendida facilmente
Colaborar - facilita que todo o time de design
contribua e avalie o prottipo
Validar - determina a eficincia dos elementos de
design e do fluxo de navegao

72

Prottipos em Papel

Quando usar?
Nos primeiros estgios do processo de design:
quando as pessoas so menos resistentes a
mudanas
Foi investido pouco tempo e recursos no projeto
Ainda no se tem clareza de qual a melhor
soluo

73

Prottipos em Papel

Vantagens
Exigem MNIMOS RECURSOS para serem construdos
So construdos com FERRAMENTAS SIMPLES, que
no requerem habilidades especficas
Permitem que as IDEIAS SEJAM TESTADAS nos
primeiros estgios do processo de design
Facilitam a COLABORAO entre os membros do
time
Os prottipos so construdos RAPIDAMENTE
Ajudam a IDENTIFICAR os maiores PROBLEMAS de
usabilidade do projeto
74

Prottipos em Papel

Poupar dinheiro usando prottipos

As maiores melhorias na interface de um produto so obtidas
atravs da recolha de dados de usabilidade nas fases iniciais
do seu desenvolvimento
Os benefcios da aplicao de metodologias de usabilidade
nas fases iniciais 10 vezes maior do que se for apenas
utilizada numa fase posterior (para correo de erros e
alterao de elementos na interface)
mais barato alterar um produto na sua fase inicial do que
fazer alteraes a um produto acabado. Estima-se que seja
100 vezes mais barato efetuar alteraes antes de se comear
a programar do que esperar que todo o desenvolvimento
tenha sido efetuado.
Jacob Nielsen
75

Prottipos em Papel

O que pode ser avaliado?

Funcionalidade
Navegao e Estrutura
Arquitetura da Informao
Fluxo de telas
Layout e Agrupamento dos
elementos
Contedo
Terminologia e linguagem
Rtulos, botes e controles

76

Prottipos em Papel

Ferramentas Necessrias

77

Prottipos em Papel

Exemplo

78

Storyboard

Storyboards (narrativa grfica)

Origem nos estdios Disney

79

Storyboard

Storyboards (narrativa grfica)

uma representao das interaes entre os
usurios e o sistema em seu ambiente de trabalho.
Corresponde ao detalhamento de um cenrio de uso
especificado para o sistema, consistindo em uma
sequncia de desenhos representando no s
esboos de telas, mas tambm elementos do
contexto (usurio, equipamento, mveis, telefones,
pessoas, etc.).
Assim como para os filmes de Walt Disney, nossos
Storyboards precisam de Personagens e Cenas.
80

Storyboard

81

Storyboard

82

Storyboard

Storyboards (narrativa grfica)

Personas
So arqutipos de pessoas que esto/estaro
envolvidas com o produto ou servio.
a tcnica que d cara aos usurios.
So criadas atravs de observaes e conversas
com os usurios.
a unio de mltiplas pessoas que tm objetivos,
metas, motivaes e comportamentos similares.
Cada detalhe da persona deve estar muito bem
embasado em dados reais, no em meras
suposies.
83

Storyboard

Storyboards (narrativa grfica)

Vantagens (Personas)
Personas so um meio muito eficaz de
comunicao interna da equipe.
Engaja e conscientiza a equipe de projeto
Obter um consenso dos interesses do usurio.
Mantm o foco no usurio durante todo o projeto
Agiliza a tomada de decises porque no preciso
consultar usurios reais a cada etapa do projeto
No porque a persona fictcia
que deixamos de trat-la como
um ser humano de verdade.
84

Storyboard

Storyboards (narrativa grfica)

Dicas (Personas)
Identifique o fluxo de trabalho e os padres de comportamento da
persona em detalhes;
Especifique suas habilidades com as tecnologias;
Inclua detalhes sobre a vida da pessoa para torn-la mais fcil de
memorizar. Escolha alguns detalhes bem pessoais, s para torn-la
mais interessante;
No use uma pessoa conhecida como uma persona. Alm de expor a
pessoa, acorrenta as caractersticas da persona pessoa real. Crie um
arqutipo baseado em pesquisas e dados, mas seja realista;
Mantenha o nmero de personas pequeno, entre 3 e 7, dependendo
da variedade do pblico.
No recicle as personas para novos projetos;

85

Storyboard

Exemplo (Personas)

86

Storyboard

Storyboards (narrativa grfica)

Cenrios
Uma tcnica simples e eficaz para analisar e comunicar
uma parte de especificaes de requisitos produzidas para
a interao com os produtos e/ou servios.
So um rpido e efetivo meio de imaginar os prottipos
em uso.
So prottipos construdos com palavras ou diagramas.
So histrias de como os produtos ou servios estaro
sendo usados.
Podem ser escritos formalmente, servindo como
documentao de projeto, ou criados enquanto se discute
questes do projeto.
87

Storyboard

Storyboards (narrativa grfica)

Cenrios
Cenrios se baseiam em uma pequena dose de dados reais
mas so imaginados (at sonhados).
No entanto, se criados para dar vida s personas, eles no
levaro a concepes errneas. Se a persona estiver bem
baseada na realidade, o cenrio tambm estar e,
consequentemente, a situao prevista ter alta
probabilidade de se realizar.
Colocando as personas dentro de um cenrio estamos
criando um contexto: CONTEXTO DE USO.

88

Wireframe

Um wireframe uma representao de baixa

fidelidade de um design.
Ele deve mostrar claramente:
Os principais grupos de contedo ( O que? )
A estrutura da informao ( Onde? )
Uma descrio e visualizao bsica da interao do
usurio com a interface ( como? )

89

Wireframe

Wireframes no so apenas conjuntos de caixas

cinzentas sem sentido, embora possam parecer
exatamente isso.
Considere-os como a espinha dorsal de seu
design e lembre-se que wireframes devem
conter uma representao de cada pea
importante do produto final.

90

Wireframe

91

Wireframe
"Representao" um termo crucial aqui, que ir
ajud-lo a encontrar o equilbrio entre fidelidade
e velocidade.
Voc no pode entrar em muitos detalhes, mas
por outro lado voc precisa criar uma
representao slida do projeto final sem perder
alguma pea importante.
Voc est definindo um caminho para todo o
projeto e para as pessoas que esto trabalhando
com voc (desenvolvedores, designers visuais,
gerentes de projeto - todos eles precisam de
wireframes bem- criados).
92

Wireframe
Wireframes devem ser criado de forma rpida e
quase todo o tempo deve ser gasto para se
comunicar com os membros da equipe e ...
pensando.
A visualizao deve ser esttica, mas muito
simplificado. Preto - Cinza - Branco so as cores
tpicas que voc vai usar (voc pode adicionar
azul para especificar links).
Um wireframe bem criado comunica o design de
forma muito clara e define um caminho para toda
a equipe.
93

Wireframe
Quando usar Wireframes
So normalmente usados nas fases iniciais do projeto.
So estticos e com interao fixa em um ponto especfico no
tempo, eles devem ser acompanhados por texto (notas curtas
explicando a interao).
Eles podem ser utilizados de uma forma menos formal. Uma
vez que eles so rpidos e simples na forma, eles servem bem
como esboos claros para a comunicao interna na equipe.
Se os desenvolvedores perguntarem como algo deve ser feito - a
resposta pode ser fornecido como um wireframe rapidamente criado.

Normalmente no so usados para validao com usurios.

Mas podem ser teis para obter algumas informaes rpidas
(feedback de entendimento).
94

Wireframe

95

Mockup
Mockup uma representao de mdia para alta
fidelidade.
uma representao esttica.
Muitas vezes, um mockup um projeto de design visual,
ou at mesmo o design visual real.
Um mockup bem criado:
Representa a estrutura de informao , visualiza o contedo e
demonstra as funcionalidades bsicas de uma maneira esttica.
Incentiva as pessoas a avaliar realmente o lado visual do
projeto
Mockups so muitas vezes confundidas com wireframes,
devido aos nomes de algumas empresas de software.
96

Mockup

97

Mockup

98

Mockup

Quando usar?
Mockups so particularmente teis se voc quiser
vender seu peixe para um dos stakeholders.
Graas a sua natureza visual, mockups no tm a
resistncia das entregas de baixa fidelidade e so
muito mais rpidos e baratos do que criar
prottipos interativos.
So bons coletores de feedback.

99

Prottipo Interativo
Um prottipo interativo uma representao do
produto de mdia para alta fidelidade que simula a
interao com do usurio com a interface.
Ele deve permitir ao usurio:
Uma experincia com o contedo e interaes com a
interface
O teste das principais interaes de modo similar ao produto
final

100

Prottipo Interativo
Pode no parecer exatamente como o produto final,
mas deve ser muito semelhante
Com certeza no pode ser um esboo acinzentado.

Interaes devem ser modeladas com

cuidado e ter uma semelhana significativa
com a experincia final.
Interdependncia entre os mecanismos de
interface e de back-end frequentemente
omitida para reduzir custos e acelerar os
ciclos de desenvolvimento.
101

Prottipo Interativo
Quando usar?
Prottipos interativos so usados para o seu pleno potencial
em testes com usurios. A simulao das interaes finais
forma um timo material para verificar a usabilidade da
interface, antes do desenvolvimento realmente comear.
Um prottipo interativo a forma mais envolvente de
documentao do projeto visto que a interface tangvel e
direta.
Esse tipo de prottipo sim uma forma cara e demorada de
comunicao. Sugere-se a criao de prottipos que podem ser
reutilizados em desenvolvimento (sim, isso significa que voc
precisa de cdigo. Ex.: HTML, CSS, Javascript).
Feito corretamente e combinado com testes com usurios, este
tipo de prototipagem pode pagar por si mesma.
102

Prottipo Interativo

10
103
3

Comparao das Tcnicas de Prototipao

Fidelidade

Custo

Uso

Caractersticas
Principais

Wireframe

Baixa Fidelidade

Documentao e
comunicao
rpida

Sketchy,
representao da
interface em preto,
branco e cinza

Mockup

Mdia para Alta

Fidelidade

$$

Obter feedback e
Visualizao
vender o peixe para Esttica
stakeholders

Prottipo
Interativo

Mdia para Alta

Fidelidade

$$$

Testes com
usurios e
prottipos
evolutivos

Interatividade
10
104
4

Ferramentas para Prototipao

Baixa-fidelidade
Lpis e papel
SketchFlow (Microsoft Blend)
Microsoft PowerPoint e Visio
WOZ Pro
DENIM

105

Ferramentas para Prototipao

Mdia fidelidade

SketchFlow (Microsoft Blend)

Mockinbird
BalsamiqMockups
Cacoo
Mockflow
Microsoft Office PowerPoint e Visio
OmniGraffle
Axure
HTML+CSS+JS
Flair Builder
Outros recursos: stencils kit (ex.: Yahoo! Stencils Kit for UI) para diversas
ferramentas

106

Ferramentas para Prototipao

Alta fidelidade
Window Managers and Toolkits
Event languages
Interactive graphical tools ou interface
builders
Component systems
Scripting languages
HTML+CSS+JS
Linguagens orientadas a objetos
User Interface Management tools
(UIMS)
Formal language based tools
Constraints
Model-based and automatic techniques
PICTIVE
107

Por onde comear?

Antes de escolher um meio de comunicao no

processo de design voc precisa:
Especificar o problema que voc est tentando
resolver
Conhecer o seu pblico-alvo
Analisar o que os concorrentes tm feito nesta rea
Estabelecer os requisitos gerais do produto

Isso um mnimo. Agora escolha a(s) tcnica(s)

mais adequada(s) para voc.

108

Por onde comear?

Considere o seu produto e equipe. O que vai funcionar
melhor para todos vocs?
Documentao Formal ou esboos rpidos e informais para
discusses?
Voc tem tempo e dinheiro para uma pesquisa slida com o
usurio, ou voc est indo s para tomar um caf e entregar
uns esboos para seus clientes?
Que habilidades voc possui? Voc pode codificar?
Ter um olhar para si mesmo, sua equipe e seu projeto devem
gui-lo atravs do processo de escolha das tcnicas.
Voc pode, claro, criar todos eles e... em muitos casos,
voc vai! No tenha medo de dar esse passo. Todas as
tcnicas fazem sentido e, bem utilizadas, podem aproxim-lo
de um projeto bem sucedido.
109

Prototipao Mobile
Baixa Fidelidade
Prototipao em papel
http://mashable.com/2013/04/02/wireframing-tools-mobile/

Mdia Fidelidade
http://www.justinmind.com/
Flair Builder - http://www.flairbuilder.com/download-flairbuilder/

Alta Fidelidade
Utilizao de bibliotecas para a construo de uma interface
http://jqtouch.com/
http://code.google.com/p/iui/
https://www.fluidui.com/
http://www.invisionapp.com/
https://www.flinto.com/
https://marvelapp.com/
https://proto.io/
https://codiqa.com/
110

Prototipao Mobile

111

Prototipao Mobile

112

Prototipao Mobile

113