prototipacao engenharia requisitos
DESCRIPTION
Fase de prototipação de Eng. RequisitosTRANSCRIPT
![Page 1: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/1.jpg)
Prototipação
Interface Humano-Computador
Prof. MSc. Alexandre R. Lenz
![Page 2: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/2.jpg)
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
![Page 3: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/3.jpg)
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.
![Page 4: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/4.jpg)
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.
![Page 5: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/5.jpg)
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
![Page 6: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/6.jpg)
6
Introdução
Comunicar-se como? Visualmente: através de prototipação
![Page 7: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/7.jpg)
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
![Page 8: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/8.jpg)
8
Prototipação
• Por que prototipar?
Se manter competitivo, produzir e testar novas ideias
e comunicar-se com dinamismo!
![Page 9: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/9.jpg)
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
![Page 10: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/10.jpg)
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?
![Page 11: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/11.jpg)
11
Modelos de Ciclo de Vida para Prototipação em IHC
(Brown, 1996; da Silva et al., 2005)
![Page 12: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/12.jpg)
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.
![Page 13: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/13.jpg)
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.
![Page 14: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/14.jpg)
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)
![Page 15: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/15.jpg)
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)
![Page 16: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/16.jpg)
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)
![Page 17: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/17.jpg)
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 é.
![Page 18: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/18.jpg)
[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
![Page 19: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/19.jpg)
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.
![Page 20: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/20.jpg)
(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
![Page 21: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/21.jpg)
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
![Page 22: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/22.jpg)
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
![Page 23: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/23.jpg)
23
Exemplos: Classificação de protótipos
Baixa Fidelidade
![Page 24: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/24.jpg)
24
Exemplos: Classificação de protótipos
Média Fidelidade
![Page 25: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/25.jpg)
25
Exemplos: Classificação de protótipos
Alta Fidelidade
![Page 26: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/26.jpg)
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)
![Page 27: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/27.jpg)
27
Sketch
![Page 28: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/28.jpg)
28
Sketch
![Page 29: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/29.jpg)
29
Sketch
Não é simples representar no papel uma imagem mental.
SENSAÇÃO
![Page 30: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/30.jpg)
30
Sketch
![Page 31: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/31.jpg)
31
Sketch
![Page 32: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/32.jpg)
32
Sketch
Não é necessário ser
um desenhista!
![Page 33: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/33.jpg)
33
Sketch
• rápido • barato • direto • pouco detalhado • livre • diálogo • descartável • ambíguo • sugestivo • único
Sketch é:
![Page 34: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/34.jpg)
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)
![Page 35: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/35.jpg)
35
Modelo Conceitual
A - Modelos conceituais baseados em atividades
B - Modelos conceituais baseados em objetos
C - Modelos conceituais baseados em metáforas
![Page 36: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/36.jpg)
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
![Page 37: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/37.jpg)
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
![Page 38: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/38.jpg)
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
![Page 39: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/39.jpg)
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
![Page 40: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/40.jpg)
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
![Page 41: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/41.jpg)
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
![Page 42: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/42.jpg)
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.
![Page 43: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/43.jpg)
43
Modelo Conceitual: Diagramas
1. Tradicional:
![Page 44: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/44.jpg)
44
Modelo Conceitual: Diagramas
2. Relacionamento:
![Page 45: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/45.jpg)
45
Modelo Conceitual: Diagramas
3. Semântico:
Escritório de advocacia: • Processos (círculos) • Documentos (quadrados) • Pessoas (figuras).
![Page 46: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/46.jpg)
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.
![Page 47: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/47.jpg)
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.
![Page 48: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/48.jpg)
48
Modelo Conceitual
![Page 49: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/49.jpg)
49
Modelo Conceitual
![Page 50: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/50.jpg)
50
Modelo Conceitual
Técnicas: • MAPA MENTAL • VISUAL THINKING
![Page 51: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/51.jpg)
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.
![Page 52: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/52.jpg)
52
Mapa Mental
![Page 53: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/53.jpg)
53
Mapa Mental
![Page 54: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/54.jpg)
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:
![Page 55: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/55.jpg)
55
Mapa Mental
![Page 56: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/56.jpg)
56
Visual Thinking
• Visual Thinking: a prática de usar figuras para resolver problemas, pensar em situações e comunicar-se de maneira clara.
![Page 57: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/57.jpg)
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
?
![Page 58: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/58.jpg)
58
Visual Thinking
Usando...
...em conjunto
![Page 59: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/59.jpg)
59
Visual Thinking
Biblioteca pessoal de objetos:
![Page 60: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/60.jpg)
60
Visual Thinking
Biblioteca pessoal de metáforas:
![Page 61: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/61.jpg)
61
Visual Thinking
![Page 62: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/62.jpg)
62
Visual Thinking
![Page 63: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/63.jpg)
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
![Page 64: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/64.jpg)
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.
![Page 65: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/65.jpg)
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.
![Page 66: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/66.jpg)
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
![Page 67: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/67.jpg)
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
![Page 68: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/68.jpg)
68
Diagrama de Fluxo de Interfaces
Padrões de Interação:
![Page 69: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/69.jpg)
69
Diagrama de Fluxo de Interfaces
Exemplo de Diagrama de Fluxo de Interfaces:
![Page 70: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/70.jpg)
70
Exemplo de Diagrama
de Fluxo de Interfaces:
![Page 71: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/71.jpg)
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
![Page 72: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/72.jpg)
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
![Page 73: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/73.jpg)
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
![Page 74: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/74.jpg)
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
![Page 75: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/75.jpg)
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
![Page 76: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/76.jpg)
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
![Page 77: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/77.jpg)
77
• Ferramentas Necessárias
Protótipos em Papel
![Page 78: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/78.jpg)
78
• Exemplo
Protótipos em Papel
![Page 79: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/79.jpg)
79
Storyboard
• Storyboards (narrativa gráfica) – Origem nos estúdios Disney
![Page 80: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/80.jpg)
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.
![Page 81: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/81.jpg)
81
Storyboard
![Page 82: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/82.jpg)
82
Storyboard
![Page 83: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/83.jpg)
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.
![Page 84: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/84.jpg)
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.
![Page 85: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/85.jpg)
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;
![Page 86: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/86.jpg)
86
Storyboard
Exemplo (Personas)
![Page 87: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/87.jpg)
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.
![Page 88: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/88.jpg)
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.
![Page 89: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/89.jpg)
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? )
![Page 90: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/90.jpg)
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.
![Page 91: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/91.jpg)
91
Wireframe
![Page 92: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/92.jpg)
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).
![Page 93: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/93.jpg)
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.
![Page 94: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/94.jpg)
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).
![Page 95: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/95.jpg)
95
Wireframe
![Page 96: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/96.jpg)
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.
![Page 97: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/97.jpg)
97
Mockup
![Page 98: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/98.jpg)
98
Mockup
![Page 99: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/99.jpg)
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.
![Page 100: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/100.jpg)
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
![Page 101: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/101.jpg)
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
![Page 102: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/102.jpg)
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
![Page 103: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/103.jpg)
103
Protótipo Interativo
103
![Page 104: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/104.jpg)
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
![Page 105: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/105.jpg)
Ferramentas para Prototipação
• Baixa-fidelidade
– Lápis e papel
– SketchFlow (Microsoft Blend)
– Microsoft PowerPoint e Visio
– WOZ Pro
– DENIM
105
![Page 106: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/106.jpg)
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
![Page 107: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/107.jpg)
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
![Page 108: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/108.jpg)
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
![Page 109: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/109.jpg)
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
![Page 110: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/110.jpg)
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
![Page 111: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/111.jpg)
Prototipação Mobile
111
![Page 112: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/112.jpg)
Prototipação Mobile
112
![Page 113: Prototipacao Engenharia Requisitos](https://reader030.vdocuments.net/reader030/viewer/2022033104/55cf8ce95503462b13907d29/html5/thumbnails/113.jpg)
Prototipação Mobile
113