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
Top Related