Prototipação é um processo fundamental no desenvolvimento de interfaces. Existem diferentes tipos de protótipos como cenários, storyboards e protótipos de baixa e alta fidelidade que podem ser usados em diferentes estágios para comunicar ideias, testar funcionalidades e obter feedback dos usuários antes do desenvolvimento final.

1. Prototipação
PROF. OZIEL NETO (OZIEL.NETO@GMAIL.COM)
TWITTER: @OZIELNETO

2. Como interfaces não planejadas
podem afetar o resultado final de um
projeto?

4. Antes da Prototipação
Discutir sobre as possíveis ideias e soluções

5. Protótipo
 Surge como a pedra angular (algo fundamental)
do processo de criação, é graças a ele que
podemos imaginar o dispositivo ou a experiência
que se está tentando criar.
• É muito difícil descrever um
aparelho que não existe.
Como explicar o que é um
iPod a alguém que nunca o
viu?

7. Para que protótipos?
 Quando se constroem protótipos de diversos
tamanhos, com formas e funcionalidades
diferentes, é mais fácil transmitir o que se tem em
mente e tirar conclusões.
 Eles não apenas comunicam idéias, como
também persuadem o cliente e o convence a
aceitar a proposta.

8. Qual o momento da
prototipagem?

9. Conseguimos com um
protótipo
 Obter retorno sobre desenho mais depressa
 Poupar tempo de desenvolvimento e dinheiro
 Experimentar alternativas de desenho
 Resolver problemas antes de escrever o código
 Manter desenho centrado nos usuários

10. Quais tipos de protótipos
iremos estudar?
 Cenários
 Storyboards
 Protótipos de baixa fidelidade e de alta
fidelidade
 Wizard of OZ
 Wireframes

11. Cenários

12. O que é um cenário?
 Um meio de representar, analisar e planejar
como um sistema computacional pode causar
impacto nas atividades e experiências do
usuário.
 É uma descrição em geral narrativa, mas
também em outro formatos (storyboards,
cartoons anotados, maquetes em vídeos,
protótipos em script), que as pessoas fazem e
experimentam conforme elas imaginam ou
tentam fazer uso de sistemas e aplicações.

13. Exemplo de um cenário
João dirigiu-se à máquina de vender bilhetes de metrô,
escolheu o seu destino carregando no botão físico da
máquina correspondente área 1, depois selecionou um
bilhete de ida e volta carregando na opção
correspondente.
Quando lhe apareceu um diálogo para confirmar a
informação introduzida, o João carregou no botão <OK>
e o sistema passou para a tela de pagamento,
selecionando o João a opção de pagar com débito
automático na conta corrente.
O João passou o cartão do banco na ranhura e introduziu
a senha correspondente. Finalmente, o João carregou no
botão <Recibo> para receber um recibo da sua
operação.
ED

14. Componentes de um
cenário
 Nome – um rótulo curto para referência a um cenário
específico.
 Descrição – em geral texto ilustrando uma situação
específica.
 Lógica Essencial – com relação ao usuário,
representações e ações que devem estar disponíveis ao
usuário, independentemente de aspectos relacionas à
implementação, com relação ao sistema, informações
necessárias para que o sistema funcione como requerido.
 Passos Genéricos – sequência de passos que o usuário
realizaria, independentemente de aspectos de
implementação.
 Passos Específicos – sequência de ações do usuários
seguidas de feedback do sistema, considerando
possibilidade de ações erradas do usuário.
ED

15. Exemplo do livro de
Rocha (2003)
 Nome: Iniciando o Jogo da Fábrica: atividade síncrona à
distância baseada em sistema computacional
 Descrição: Funcionários da fábrica X conectam-se via Internet e
iniciam o Jogo da Fábrica: uma simulação de conceitos e
processo de manufatura com objetivo de formação.
 Lógica Essencial:
 (usuário) Cada usuário em seu local de trabalho, ao conectar-se
ao sistema, vê a tela inicial do jogo e informações sobre a
conexão dos demais participantes, cada um ocupando um célula
da linha de manufatura representada no jogo. Cada usuário
saúda os demais que estão conectados a distância, pelo canal
de comunicação, aguardando início do jogo.
 (sistema) Informação necessária para conexão: IP da máquina
servidora.
 Passos Genéricos: Buscar opção de conexão no menu. Entrar
com dados solicitados.
 Passos Específicos: Selecionar “Entrar com IP do servidor”.
ED

16. Analisando o uso de
cenários
 Permitem desenvolver e explorar o espaço de
design com um mínimo de comprometimento.
 Permitem avaliar a interface inicial sem custos de
construir um modelo concreto.
 Como não há interação com dados reais, ele
não permite flexibilidade para o usuário, pois os
usuários não podem se mover livremente pelo
sistema.
ED

17. Em que momento do
processo surgem os
cenários?
ED

18. Storyboards

19. Storyboard no cinema
 Os storyboards surgiram originalmente do
cinema, para se ter uma idéia da cena.
ED

20. Storyboard no cinema
 Neles se combinam imagens e textos para
complementar as informações das cena.
 As setas ajudam a compreender as ações.
ED

21. Os storyboards das
interfaces
 Os storyboards são os desenhos de tela e as
conexões entre elas.
 Eles podem ser apresentados a usuários
potenciais que tentam explicar o que pensam ser
possível fazer e efeitos esperados de suas ações.
 Desta maneira, eles complementam os cenários.

22. Os storyboards das
interfaces
 São usados para
especificar as ações
que os usuários podem
efetuar para resolver
cenários de utilização.
 Desta maneira, eles
complementam os
cenários.

23. Projeto IBIMM

24. Storyboard para interface
 Elementos do sistema e suas ligações começam
a ser organizados
 Usuários conseguem avaliar rapidamente se os
passos estão levando ao lugar desejado.

25. Storyboard para interface
 Oferecem uma série de
esboços que ilustram os
detalhes e as interações
importantes. Os detalhes
irrelevantes são suprimidos.

26. Ex. de storyboard (mais
elaborado)
ED

27. Protótipos de
baixa
fidelidade

28. Protótipos de Baixa
Fidelidade
 Fidelidade refere-se ao nível de detalhe.
 É uma representação ‘artística’, um esboço, com
muitos detalhes omissos
 Vantagem: não tomam muito tempo para seu
desenvolvimento e não requer equipamento
dispendioso.

29. Protótipos de Baixa
Fidelidade
 são construídos, na maioria
das vezes, em papel e
podem ser testados com
usuários reais, assim,
permitem demonstrar o
comportamento da
interface muito cedo no
desenvolvimento

30. Protótipos de Baixa
Fidelidade
 Seu uso pode aumentar a qualidade das
interfaces, pois permitem várias avaliações pelo
usuário em pouco tempo e o retorno imediato.

31. Protótipos de Baixa
Fidelidade
 Com eles, os usuários são obrigados a pensar no
conteúdo em vez da aparência, uma vez que
somente são realizados esboços que servem
como protótipos

32. Protótipos Físicos de Baixa
Fidelidade (Gadgets)
 Neste tipo de protótipo, as dimensões e o
aspecto são importantes, embora ainda possam
ser feitos com materiais simples como cartolina e
massa de modelar.

33. Protótipos Físicos de Baixa
Fidelidade (Gadgets)

34. Protótipos de
Alta
Fidelidade

35. Protótipos de Alta
Fidelidade
 Assemelham-se ao produto final. Neles os
detalhes são importantes, pois simulam todas as
funcionalidades do sistema.
Wearable computer - Eurotech

36. Protótipos de Alta
Fidelidade
 A apresentação formal
sugere um “produto
acabado”. Além de
visualizar as conexões,
conseguimos visualizar o
design: o arranjo gráfico,
o uso das cores, os tipos,
etc.
Soft-shell mobile phone –
http://www.nec-design.co.jp/showcase/

37. Protótipos de Alta
Fidelidade
 Acarreta mais
tempo e dinheiro
investido em sua
confecção do
que no protótipo
de baixa
fidelidade
P-ISM :
Pen-style Personal Networking Gadget Package
http://www.nec-design.co.jp/showcase/

38. Wizard of Oz

39. Wizard of Oz
 Permite que tecnologias que ainda não existem
sejam avaliadas por meio do uso de uma pessoa
que simula a resposta de um sistema.
 Muitas vezes, o usuário não sabe que as respostas
estão sendo geradas por uma pessoa e não um
computador.
 Com isto, esta técnica permite testar conceitos
difíceis de interfaces e sugerir funcionalidades
antes que o sistema seja implementado.
ED

40. Como funciona o método
Wizard of Oz?
 Uma pessoa – que será o “wizard” – senta em um
ambiente separado e observa as ações dos
usuários e, então, simula as respostas do sistema
em tempo real.

41. O uso do Wizard of Oz
pode
 Buscar informações sobre a natureza da interação.
 Testar quais comandos e mecanismos melhor
representam a interação, de maneira que os
esforços subsequentes de desenvolvimento sejam
direcionados apropriadamente.
 Testar a interação de um dispositivo antes de
construir um modelo funcional.
 Descobrir os problemas que as pessoas terão com
esta interface.
 Investigar aspectos visuais dos produtos.
ED

42. Wireframes

43. Projeto IBIMM
Wireframe de Baixa
Fidelidade

44. Projeto IBIMM
Wireframe de Alta
Fidelidade

45. Wireframe e Design da
Página
 O wireframe não limita o trabalho de um
designer, mas apenas orienta quanto as
informações e proposta de peso de importância
ou relevância de cada item.
 Veja alguns exemplos de wireframes e design da
página.

46. Projeto Concurso Quiz Terra Sonora
Wireframe

47. Projeto Concurso Quiz Terra Sonora
Design

48. Projeto Concurso Quiz Terra Sonora
Wireframe

49. Projeto Concurso Quiz Terra Sonora
Design

50. Projeto Hatalé (www.hatale.ca)
Wireframe

51. Projeto Hatalé (www.hatale.ca)
Design

52. Projeto Como en Casa (www.comoencasa.ca)
Wireframe

53. Projeto Como en Casa (www.comoencasa.ca)
Design

54. Tools
 Cloud Wirefrme.cc
https://wireframe.cc/

55. Prototipação
PROF. OZIEL NETO (OZIEL.NETO@GMAIL.COM)
TWITTER: @OZIELNETO