Prototipação

Interface Humano-Computador

Prof. MSc. Alexandre R. Lenz

2

Agenda

1. Introdução

– Conceitos

2. Por que prototipar?

3. O que prototipar?

4. Modelos de Ciclo de Vida para Prototipação em IHC

5. Tipos de Protótipos

6. Classificação de Protótipos

7. Técnicas de Prototipação

– Sketch • Modelos Conceituais

– Mapa Mental

– Visual Thinking

– Diagrama de Fluxo de Interfaces

– Protótipos em papel

– Storyboard

– Wireframe

– Mockup

– Protótipo Interativo

8. Ferramentas para Prototipação

9. Prototipação Mobile

3

Introdução

• Protótipo:

– do Latim, \proto\ ORIGINAL e \tipo\ MODELO.

• Um tipo, forma ou exemplar original que serve como base ou padrão para futuros estágios de um projeto ou simplesmente: um exemplar inicial que comunica uma ideia.

4

Introdução

• Prototipação: um processo iterativo, para criação de protótipos que serve para rapidamente testar conceitos, produtos e negócios e trazer respostas a uma pergunta.

5

Introdução

• No design de interação um protótipo pode ser: – Uma série de esboços em papel construídos a mão livre

– Um conjunto de storyboard’s

– Uma apresentação (PowerPoint, Apresntação do OpenOffice, entre outros tipos de documentos)

– Um vídeo simulando o uso de um sistema

– Um pedaço de madeira (PalmPilot) ou uma maquete construída com argila, cartolina, ou outro material

– Algumas telas construídas em uma linguagem de programação

6

Introdução

Comunicar-se como? Visualmente: através de prototipação

7

Prototipação

• Por que prototipar? – Avaliação e retorno rápido são características principais do

design de interação

– Stakeholders podem ver, pegar, interagir com o protótipo mais facilmente que um documento ou rascunho

– A equipe de desenvolvimento pode ser mais efetiva na comunicação com clientes

– Encoraja a reflexão em pontos importantes para o design de interação

– Protótipos respondem perguntas, e fornecem suporte aos designers para escolher entre alternativas

8

Prototipação

• Por que prototipar?

Se manter competitivo, produzir e testar novas ideias

e comunicar-se com dinamismo!

9

Prototipação

• O que prototipar? – Questões técnicas

– Fluxo de trabalho e tarefas de design

– Layout de telas e como a informação será mostrada

– Áreas de interação que aparentemente são difíceis, controversas e críticas de projetar

10

Modelos de Ciclo de Vida para Prototipação em IHC

• Como o sistema pode apoiar os usuários?

• Como os usuários podem interagir com o sistema?

• Como deveria ser a interface para possibilitar tal interação?

11

Modelos de Ciclo de Vida para Prototipação em IHC

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

12

Modelos de Ciclo de Vida para Prototipação em IHC

Modelo de Processo Centrado no Usuário. PREECE, Jenny. A Guide to Usability: Human Factors in Computing. Inglaterra: Addison-Wesley, 1993.

13

Tipos de protótipos

• A prototipação de “interfaces” (Offline prototypes) é a que mais se vê. – Normalmente é representada por telas estáticas,

contendo representações mais ou menos fiéis aos elementos de input e output que o usuário poderá ver e acionar.

• A prototipação de “interação” (Online prototypes) é igualmente importante, embora ela seja por vezes mais difícil de representar. – Como tem uma extensão temporal, precisa de um

suporte tecnológico em que se possa representar “sequências” de ação-reação.

14

Tipos de protótipos

• Offline prototypes – Criação rápida, em geral nas etapas iniciais do design;

– Baratos e descartáveis;

– Técnicas: sketches, storyboards, prototipação em papel, mockups, etc.

• Online prototypes – Executados em um computador;

– Efetivos quando o design básico foi decidido;

– Mais custosos, em geral evolucionários;

– Exemplos: animações, vídeos interativos, interfaces resultantes de linguagens de scripting/programação.

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

15

Tipos de protótipos

• Quão interativo o protótipo é para um usuário

• Níveis de Interação: – Fixed prototypes:

• Não permitem interação com o usuário ou a interação é limitada;

• Usados para ilustrar ou testar cenários.

– Fixed-path prototypes: • Interatividade controlada: mais de uma possiblidade de interação é

oferecida;

• Ideal para uso com cenários;

• Permite ao usuário experimentar como será o sistema.

– Open prototypes: • Possuem diversas formas e possibilidades de interação;

• Em geral, cobrem apenas parte do sistema;

• Funcionam como o sistema real, mas com limitações.

(Beaudouin-Lafon; Mackay, 2007)

16

Tipos de protótipos

• O ciclo de vida do protótipo

– Tempo de vida:

• Evolucionário e Iterativo;

• Interativo;

• Throw-away ou descartável.

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

17

Classificação de protótipos

• Classificação de protótipo de acordo com o nível de fidelidade em relação ao produto final [Mayhew, 1999]

• São quatro as dimensões que definem a fidelidade de um modelo: 1. detalhamento: a quantidade de detalhes que o modelo

suporta.

2. grau de funcionalidade: a extensão na qual os detalhes de operação são completos

3. similaridade de interação: o quão similar as interações como o modelo serão com o produto final

4. refinamento estético: o quão realístico o modelo é.

[Mayhew, 1999]

Baixa Fidelidade Média Fidelidade

Alta Fidelidade

Detalhamento Baixo grau de detalhamento

Detalhamento razoável sem conteúdo

Conter alguma amostra do conteúdo

Grau de funcionalidade

Apresenta visualmente a funcionalidade

Grau de funcionalidade não é fator fundamental

Nível razoável de funcionalidade implementada

Similaridade de interação

Não possui recursos interação

Grau de interação não é fator fundamental

Interação e navegação do usuário como se fosse o produto final

Refinamento estético

Feito em papel e não exibe o seu aspecto visual

Feito no computador e pode apresentar o aspecto visual mais próximo do definitivo

Representa fielmente o produto final em termos de aparência visual 18

Classificação de protótipos

19

Classificação de protótipos

• Note que a classificação não é rígida e dá margem para interpretação. – Exemplo: Um wireframe é considerado de

baixa por alguns autores e de média fidelidade por outros.

(Rudd et al., 1996)

Vantagens Desvantagens

Baixa Fidelidade

• Menor custo de desenvolvimento • Avalia múltiplos conceitos de

design • Comunicação útil • Endereça problemas de layout da

tela • Útil para identificar requisitos de

mercado • Prova de conceito

• Verificação limitada de erros • Detalhamento pobre de

especificação para codificação • Dirigido ao facilitador • Utilidade limitada depois de

estabelecidos os requisitos • Utilidade limitada para testes de

usabilidade • Limitações de navegação e fluxo de

aplicação

Alta Fidelidade

• Funcionalidades completas • Totalmente interativa • Dirigida ao usuário • Define claramente o esquema

navegacional • Útil para exploração e teste • Look & feel do produto final • Serve como uma especificação viva • Ferramenta de vendas e marketing

• Mais caro para desenvolver • Consome tempo para criação • Ineficiente para prova de conceito • Não efetivo para obtenção de

requisitos

20

Classificação de protótipos

21

Classificação de protótipos

Baixa Fidelidade

Média Fidelidade

Alta Fidelidade

Fase do Ciclo de Vida de

Software

Definição de Requisitos

Definição da Arquitetura (Projeto)

Implementação

Tipo de Protótipo

Esquemas feitos à mão

Detalhado Realístico *

Exemplos de Ferramentas

Material de Escritório

Software de Autoria e apresentação: PowerPoint, Visio

Linguagens de programação: HTML, Visual Basic

* Muitas vezes é evolutivo: as interfaces prototipadas evoluem para o sistema propriamente dito.

[Fileno, E.F., 2008] Instituto Faber-Ludens de Design de Interação

22

Classificação de protótipos

• Protótipos de Alta Fidelidade X Baixa Fidelidade – Protótipos de Alta Fidelidade

• Apoiam a avaliação de todos os detalhes de um design

• Necessitam mais tempo e recursos para serem construídos

– Protótipos de Baixa Fidelidade • Não apoiam a avaliação de todos os detalhes do design, como:

– Interações da interface com o usuário

– Layout e formato do produto

– 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

Exemplos: Classificação de protótipos

Baixa Fidelidade

24

Exemplos: Classificação de protótipos

Média Fidelidade

25

Exemplos: Classificação de protótipos

Alta Fidelidade

26

Técnicas de Prototipação

• Técnicas de Prototipação • Prototipação Rápida

• Offline Rapid Prototyping: • Sketch • Diagrama de Fluxo de Interfaces • Protótipos em papel • Storyboard • Wireframe • Mockup

• Online Rapid Prototyping: • Protótipo Interativo

O resultado de cada técnica é visualmente diferente,

comunicam algo diferente e têm finalidades diferentes.

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

27

Sketch

28

Sketch

29

Sketch

Não é simples representar no papel uma imagem mental.

SENSAÇÃO

30

Sketch

31

Sketch

32

Sketch

Não é necessário ser

um desenhista!

33

Sketch

• rápido • barato • direto • pouco detalhado • livre • diálogo • descartável • ambíguo • sugestivo • único

Sketch é:

34

Modelo Conceitual

“Uma descrição 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 usuários da maneira pretendida.”

(Preece, Rogers e Sharp – designers)

35

Modelo Conceitual

A - Modelos conceituais baseados em atividades

B - Modelos conceituais baseados em objetos

C - Modelos conceituais baseados em metáforas

36

Modelo Conceitual

A - Modelos conceituais baseados em atividades • Instrução: Descreve como os usuários realizam suas

tarefas instruindo o sistema sobre o que fazer. • Ex: MS-DOS

37

Modelo Conceitual

A - Modelos conceituais baseados em atividades • Conversação: É baseado na ideia de conversação entre uma

pessoa e um sistema, em que atua como um parceiro em um diálogo. • EX: Voz

38

Modelo Conceitual

A - Modelos conceituais baseados em atividades • Manipulação e navegação: Descreve a atividade de

manipular objetos e navegar por espaços virtuais explorando o conhecimento que os usuários têm de como fazer isto no mundo físico real. • EX: Analogias

Go

Home

Limpar

Lixeira

39

Modelo Conceitual

A - Modelos conceituais baseados em atividades • Exploração e pesquisa: Baseado na ideia de possibilitar às

pessoas explorar e pesquisar informações valendo-se de sua experiência em realizar essas tarefas com mídias já existentes. • EX: Páginas web, jogos e videogames

40

Modelo Conceitual

B - Modelos conceituais baseados em objetos • Baseada em um objeto ou artefato, como um ferramenta, um

livro ou um veículo. • Mais específicos do que modelos baseados em atividades,

enfocando a maneira como um certo objeto é utilizado em um determinado contexto.

• São baseados em um analogia com algo do mundo físico. • Ex: Planilha de cálculo -> Livro Caixa

41

Modelo Conceitual

C - Modelos conceituais baseados em metáforas • Procura a semelhança em aspectos de um entidade

física, mas que também tem seu próprio comportamento e propriedades. • Ex: Buscar -> Lupa

42

Modelo Conceitual: Diagramas

Modelo conceitual [Dan Brown] • Modelo conceitual é um diagrama que mostra as

relações entre diferentes conceitos abstratos. • O modelo conceitual também pode ser nomeado

de diagrama conceitual. 1. Tradicional: baseado nas conexões entre substantivos e

verbos. É a versão mais simplificada. 2. Relacionamento: evidencia as conexões entre os blocos. 3. Semântico: trabalha vários conceitos em um mesmo

diagrama.

43

Modelo Conceitual: Diagramas

1. Tradicional:

44

Modelo Conceitual: Diagramas

2. Relacionamento:

45

Modelo Conceitual: Diagramas

3. Semântico:

Escritório de advocacia: • Processos (círculos) • Documentos (quadrados) • Pessoas (figuras).

46

Modelo Conceitual

• Desenvolver um modelo conceitual implica visualizar o produto proposto, baseando-se nas necessidades do usuário e em outros requisitos identificados.

• Perguntar, observar, conviver, pesquisar.

47

Modelo Conceitual

• Finalidade – Para que servem os modelos conceituais? – Serve para traduzir as ideias através do uso de estruturas de relacionamentos.

• Audiência – Quem usa os modelos conceituais? – É utilizado como documento da estruturação do projeto (experiência do

usuário). Serve na comunicação 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 específicas.

• Contexto – Quando fazer o modelo conceitual? – Simplificar, ao invés de complicar, para estabelecer um vocabulário comum

entre todos os envolvidos no projeto.

• Formato – Com que ele deve se parecer? – Ele representa ideias simples, por isso não deve ter muito detalhamento ou

muitos elementos.

48

Modelo Conceitual

49

Modelo Conceitual

50

Modelo Conceitual

Técnicas: • MAPA MENTAL • VISUAL THINKING

51

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.

52

Mapa Mental

53

Mapa Mental

54

Mapa Mental

• Visualizar ideias • Relacionamentos entre elementos • Brainstorming, Ideação • Tomar decisões a partir de anotações • Quebrar problemas em pedaços • Organizar a mente!

Muito bom para:

55

Mapa Mental

56

Visual Thinking

• Visual Thinking: a prática de usar figuras para resolver problemas, pensar em situações e comunicar-se de maneira clara.

57

Visual Thinking

• Quem? – desafios relacionados a objetos, pessoas e papéis

• 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,

estratégia!

Qu

ais

Pro

ble

mas

?

58

Visual Thinking

Usando...

...em conjunto

59

Visual Thinking

Biblioteca pessoal de objetos:

60

Visual Thinking

Biblioteca pessoal de metáforas:

61

Visual Thinking

62

Visual Thinking

63

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 NAVEGAÇÃO

64

Diagrama de Fluxo de Interfaces

• 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 caixas e muitas ligações entre elas, é um sinal de que seu sistema é muito grande e complexo para as pessoas entenderem.

65

Diagrama de Fluxo de Interfaces

• Para modelar as INTERAÇÕES que os usuários terão com seu sistema. • É necessário um conhecimento aprofundado dos métodos

e padrões de interação.

66

• 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 dos usuários entrarem com “dados” e atingir seus objetivos

– Seja criativo e não se limite ao “tradicional”

Diagrama de Fluxo de Interfaces

67

• 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

Diagrama de Fluxo de Interfaces

68

Diagrama de Fluxo de Interfaces

Padrões de Interação:

69

Diagrama de Fluxo de Interfaces

Exemplo de Diagrama de Fluxo de Interfaces:

70

Exemplo de Diagrama

de Fluxo de Interfaces:

71

• São REPRESENTAÇÕES de um design

• É 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

Protótipos em Papel

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

72

• 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 protótipo

– Validar - determina a eficiência dos elementos de design e do fluxo de navegação

Protótipos em Papel

73

• Quando usar? –Nos primeiros estágios do processo de design:

• É 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

Protótipos em Papel

74

• Vantagens – Exigem MÍNIMOS RECURSOS para serem construídos

– São construídos 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 RAPIDAMENTE

– Ajudam a IDENTIFICAR os maiores PROBLEMAS de usabilidade do projeto

Protótipos em Papel

75

• 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.

Protótipos em Papel

Jacob Nielsen

76

• O que pode ser avaliado? – Funcionalidade

– Navegação e Estrutura

– Arquitetura da Informação

– Fluxo de telas

– Layout e Agrupamento dos

elementos

– Conteúdo

– Terminologia e linguagem

– Rótulos, botões e controles

Protótipos em Papel

77

• Ferramentas Necessárias

Protótipos em Papel

78

• Exemplo

Protótipos em Papel

79

Storyboard

• Storyboards (narrativa gráfica) – Origem nos estúdios Disney

80

Storyboard

• Storyboards (narrativa gráfica) – É uma representação das interações entre os

usuários e o sistema em seu ambiente de trabalho.

– Corresponde ao detalhamento de um cenário de uso especificado para o sistema, consistindo em uma sequência de desenhos representando não só esboços de telas, mas também elementos do contexto (usuário, equipamento, móveis, telefones, pessoas, etc.).

– Assim como para os filmes de Walt Disney, nossos Storyboards precisam de Personagens e Cenas.

81

Storyboard

82

Storyboard

83

Storyboard

• Storyboards (narrativa gráfica) – Personas

• São arquétipos de pessoas que estão/estarão envolvidas com o produto ou serviço.

• É a técnica que dá “cara aos usuários”.

• São criadas através de observações e conversas com os usuários.

• É a união de múltiplas pessoas que têm objetivos, metas, motivações e comportamentos similares.

• Cada detalhe da persona deve estar muito bem embasado em dados reais, não em meras suposições.

84

Storyboard

• Storyboards (narrativa gráfica) – Vantagens (Personas)

• Personas são um meio muito eficaz de comunicação interna da equipe.

• Engaja e conscientiza a equipe de projeto

• Obter um consenso dos interesses do usuário.

• Mantém o foco no usuário durante todo o projeto

• Agiliza a tomada de decisões porque não é preciso consultar usuários reais a cada etapa do projeto

Não é porque a persona é fictícia que deixamos de tratá-la como

um ser humano de verdade.

85

Storyboard

• Storyboards (narrativa gráfica) – Dicas (Personas)

• Identifique o fluxo de trabalho e os padrões de comportamento da persona em detalhes;

• Especifique suas habilidades com as tecnologias;

• Inclua detalhes sobre a vida da pessoa para torná-la mais fácil de memorizar. Escolha alguns detalhes bem pessoais, só para torná-la mais interessante;

• Não use uma pessoa conhecida como uma persona. Além de expor a pessoa, acorrenta as características da persona à pessoa real. Crie um arquétipo baseado em pesquisas e dados, mas seja realista;

• Mantenha o número de personas pequeno, entre 3 e 7, dependendo da variedade do público.

• Não recicle as personas para novos projetos;

86

Storyboard

Exemplo (Personas)

87

Storyboard

• Storyboards (narrativa gráfica) – Cenários

• Uma técnica simples e eficaz para analisar e comunicar uma parte de especificações de requisitos produzidas para a interação com os produtos e/ou serviços.

• São um rápido e efetivo meio de imaginar os protótipos em uso.

• São protótipos construídos com palavras ou diagramas.

• São histórias de como os produtos ou serviços estarão sendo usados.

• Podem ser escritos formalmente, servindo como documentação de projeto, ou criados enquanto se discute questões do projeto.

88

Storyboard

• Storyboards (narrativa gráfica) – Cenários

• Cenários se baseiam em uma pequena dose de dados reais mas são imaginados (até sonhados).

• No entanto, se criados para dar vida às personas, eles não levarão a concepções errôneas. Se a persona estiver bem baseada na realidade, o cenário também estará e, consequentemente, a situação prevista terá alta probabilidade de se realizar.

• Colocando as personas dentro de um cenário estamos criando um contexto: CONTEXTO DE USO.

89

Wireframe

• Um wireframe é uma representação de baixa fidelidade de um design.

• Ele deve mostrar claramente: – Os principais grupos de conteúdo ( O que? )

– A estrutura da informação ( Onde? )

– Uma descrição e visualização básica da interação do usuário com a interface ( como? )

90

Wireframe

• Wireframes não são 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 representação de cada peça importante do produto final.

91

Wireframe

92

Wireframe

• "Representação" é um termo crucial aqui, que irá ajudá-lo a encontrar o equilíbrio entre fidelidade e velocidade.

• Você não pode entrar em muitos detalhes, mas por outro lado você precisa criar uma representação sólida do projeto final sem perder alguma peça importante.

• Você está definindo um caminho para todo o projeto e para as pessoas que estão trabalhando com você (desenvolvedores, designers visuais, gerentes de projeto - todos eles precisam de wireframes bem- criados).

93

Wireframe

• Wireframes devem ser criado de forma rápida e quase todo o tempo deve ser gasto para se comunicar com os membros da equipe e ... pensando.

• A visualização deve ser estética, mas é muito simplificado. Preto - Cinza - Branco são as cores típicas 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.

94

Wireframe

• Quando usar Wireframes – São normalmente usados nas fases iniciais do projeto.

– São estáticos e com interação fixa em um ponto específico no tempo, eles devem ser acompanhados por texto (notas curtas explicando a interação).

– Eles podem ser utilizados de uma forma menos formal. Uma vez que eles são rápidos e simples na forma, eles servem bem como esboços claros para a comunicação interna na equipe. • Se os desenvolvedores perguntarem como algo deve ser feito - a

resposta pode ser fornecido como um wireframe rapidamente criado.

– Normalmente não são usados para validação com usuários. Mas podem ser úteis para obter algumas informações rápidas (feedback de entendimento).

95

Wireframe

96

Mockup

• Mockup é uma representação de média para alta fidelidade.

• É uma representação estática.

• Muitas vezes, um mockup é um projeto de design visual, ou até mesmo o design visual real.

• Um mockup bem criado: – Representa a estrutura de informação , visualiza o conteúdo e

demonstra as funcionalidades básicas de uma maneira estática.

– Incentiva as pessoas a avaliar realmente o lado visual do projeto

– Mockups são muitas vezes confundidas com wireframes, devido aos nomes de algumas empresas de software.

97

Mockup

98

Mockup

99

Mockup

• Quando usar? – Mockups são particularmente úteis se você quiser

“vender seu peixe” para um dos stakeholders.

– Graças a sua natureza visual, mockups não têm a resistência das entregas de baixa fidelidade e são muito mais rápidos e baratos do que criar protótipos interativos.

– São bons coletores de feedback.

100

Protótipo Interativo

• Um protótipo interativo é uma representação do produto de média para alta fidelidade que simula a interação com do usuário com a interface.

• Ele deve permitir ao usuário: – Uma experiência com o conteúdo e interações com a

interface

– O teste das principais interações de modo similar ao produto final

Protótipo Interativo

• Pode não parecer exatamente como o produto final, mas deve ser muito semelhante – Com certeza não pode ser um esboço acinzentado.

• Interações devem ser modeladas com cuidado e ter uma semelhança significativa com a experiência final.

• Interdependência entre os mecanismos de interface e de back-end é frequentemente omitida para reduzir custos e acelerar os ciclos de desenvolvimento.

101

Protótipo Interativo

• Quando usar? – Protótipos interativos são usados para o seu pleno potencial

em testes com usuários. A simulação das interações finais forma um ótimo material para verificar a usabilidade da interface, antes do desenvolvimento realmente começar.

– Um protótipo interativo é a forma mais envolvente de documentação do projeto visto que a interface é tangível e direta.

– Esse tipo de protótipo é sim uma forma cara e demorada de comunicação. Sugere-se a criação de protótipos que podem ser reutilizados em desenvolvimento (sim, isso significa que você precisa de código. Ex.: HTML, CSS, Javascript).

– Feito corretamente e combinado com testes com usuários, este tipo de prototipagem pode pagar por si mesma.

102

103

Protótipo Interativo

103

104

Comparação das Técnicas de Prototipação

Fidelidade Custo Uso Características Principais

Wireframe Baixa Fidelidade $ Documentação e comunicação rápida

Sketchy, representação da interface em preto, branco e cinza

Mockup Média para Alta Fidelidade

$$ Obter feedback e vender o peixe para stakeholders

Visualização Estática

Protótipo Interativo

Média para Alta Fidelidade

$$$ Testes com usuários e protótipos evolutivos

Interatividade

104

Ferramentas para Prototipação

• Baixa-fidelidade

– Lápis e papel

– SketchFlow (Microsoft Blend)

– Microsoft PowerPoint e Visio

– WOZ Pro

– DENIM

105

Ferramentas para Prototipação

• Média 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 Prototipação

• 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 começar?

• Antes de escolher um meio de comunicação no processo de design você precisa: – Especificar o problema que você está tentando

resolver

– Conhecer o seu público-alvo

– Analisar o que os concorrentes têm feito nesta área

– Estabelecer os requisitos gerais do produto

• Isso é um mínimo. Agora escolha a(s) técnica(s) mais adequada(s) para você.

108

Por onde começar?

• Considere o seu produto e equipe. O que vai funcionar melhor para todos vocês? – Documentação Formal ou esboços rápidos e informais para

discussões?

– Você tem tempo e dinheiro para uma pesquisa sólida com o usuário, ou você está indo só para tomar um café e entregar uns esboços para seus clientes?

– Que habilidades você possui? Você pode codificar?

– Ter um olhar para si mesmo, sua equipe e seu projeto devem guiá-lo através do processo de escolha das técnicas.

– Você pode, é claro, criar todos eles e... em muitos casos, você vai! Não tenha medo de dar esse passo. Todas as técnicas fazem sentido e, bem utilizadas, podem aproximá-lo de um projeto bem sucedido.

109

Prototipação Mobile

• Baixa Fidelidade

– Prototipação em papel

– http://mashable.com/2013/04/02/wireframing-tools-mobile/

• Média Fidelidade

– http://www.justinmind.com/

– Flair Builder - http://www.flairbuilder.com/download-flairbuilder/

• Alta Fidelidade

– Utilização de bibliotecas para a construção 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

Prototipação Mobile

111

Prototipação Mobile

112

Prototipação Mobile

113