Design, prototipagem e constru

1
Design, prototipageme construção
2
Overview

• Prototipagem e construção
• Design conceitual
• Design físico
• Ferramentas de suporte

3
Prototipagem e construção

• O que é um protótipo?
• Por quê fazer um protótipo?
• Diferentes tipos de prototipagem baixa
  fidelidade alta fidelidade
• Compromissos em prototipagem vertical
  horizontal
• Construção

4
O quê é um protótipo
Em outras áreas do design, um modelo em escala
reduzida de (por exemplo) -um carro-edifício ou
cidade
5
O quê é um protótipo

• Em design de interação pode ser (entre outras
  coisas)
• uma série de rascunhos de tela
• um storyboard, como uma história em quadrinhos
• um slide show de apresentação (PowerPoint)
• uma simulação em vídeo da utilização de um
  sistema
• uma implementação de software com limitações ou
  escrito em outra liguagem de implementação mais
  fácil que não será usada na versão final

6
Por quê fazer um protótipo?

• Avaliação e feedback é a essência do design de
  interação
• Os stakeholders podem ver, manipular e interagir
  mais facilmente do que através de um documento ou
  desenho
• Os membros da equipe de desenvolvimento podem se
  comunicar mais eficientemente
• É possível explicitar e testar idéias
• Encoraja a reflexão um aspecto extremamante
  importante do design
• Os protótipos geralmente esclarecem dúvidas e dão
  suporte aos designers na decisão entre as
  alternativas existentes

7
Por quê fazer um protótipo?

• Questões técnicas
• Fluxo de trabalho e operação
• Layouts de telas e display de informações
• Avaliar dificuldades, controvérsias e áreas
  críticas

8
Protótipos de baixa fidelidade

• Utilizam um meio que não é exatamente o que será
  utilizado no produto final (papel, fichários,
  etc)
• É rápido, fácil, barato e pode ser facilmente
  modificado
• Exemplos conjunto de telas, seqüência de
  tarefas, etc anotações em post-its storyboards
  (histórias em quadrinhos)

9
Storyboards

• Freqüentemente utilizadas com cenários, trazendo
  mais detalhes, e a possibilidade de representar
  no papel as tarefas
• É uma série de esboços mostrando como o usuário
  progride na execução da tarefa durante a
  navegação no sistema ou utilização de dispositivo
  
• Utilizado no início do design

10
Esboços

• Esboços são importantes protótipos de baixa
  fidelidade
• Não fique inibido caso tenha pouca habilidade em
  desenhar utilize símbolos simples

11
Utilizando-se fichas

• Fichas (3x5)
• Cada ficha representa uma tela
• Freqüentemente utilizado em desenvolvimento de
  websites

12
Protótipos de alta fidelidade

• Usam materiais, softwares e tecnologias que serão
  realmente utilizados no produto final
• O protótipo é mais parecido com o produto final
  do que um protótipo de baixa fidelidade
• Em protótipos de software de alta fidelidade é
  comum a utilização de ferramentas WYSWYG (What
  You See is What You Get).
• O perigo reside em o usuário achar que o
  protótipo já é o sistema atenção aos
  compromissos assumidos

13
Compromissos em prototipagem

• Todos os protótipos envolvem compromissos
• O protótipo de software pode ter uma resposta
  mais lenta do que terá o produto final? Ícones
  estão esboçados? Há limitações na funcionalidade?
  
• 2 tipos de compromissos comuns
• horizontal disponibiliza uma grande quantidade
  de funções, porém com poucos detalhes ou opções
• vertical disponibiliza uma grande quantidade de
  opções para poucas funções
• Compromissos em prototipos não devem ser
  ignorados os produtos necessitam de engenharia

14
Construção

• Evolua os protótipos (ou aprenda com eles) e crie
  um produto completo (versão final)
• A qualidade deve ser atendida usabilidade (é
  claro), confiabilidade, robusteza,
  manutencibilidade, integridade, portabilidade,
  eficiência, etc
• O produto deve ser projetado
• Protótipo evolucionário
• Prototipagem lançada

15
Design conceitual dos requisitos ao design

• Transformar as necessidades e requisitos do
  usuário em um m odelo conceitual
• a descrição de um sistema proposto em termos de
  um conjunto integrado de idéias e conceitos sobre
  o que ele deve fazer, como ele deve se parecer e
  se comportar, e que será compreendido pelo
  usuário da forma pretendida
• Não defina uma solução como definitiva tão
  rapidamente interaja, interaja, interaja...
• Considere as alternativas os protótipos ajudam

16
3 perspectivas para ummodelo conceitual

• Qual o modo de interação?
• Como os usuários disparam as ações
• Baseados em atividades instrução, conversação,
  manipulação e navegação, explorando e pesquisando
  
• Baseados em objetos estruturados em torno dos
  objetos do mundo real

17
3 perspectivas para ummodelo conceitual

• Qual o paradigma de interação?
• Paradigma do desktop, com interface gráfica
  (janelas, ícones, menus e cursores),
• computação ubiquitous
• computação pervasiva
• computação vestível
• dispositivos móveis
• Há uma metáfora apropriada?

18
Existe uma metáfora apropriada?

• A metáfora de interface deve combinar o
  conhecimento que é familiar com o conhecimento
  novo, de forma que ajude o usuário a compreender
  o produto
• 3 passos entender a funcionalidade, identificar
  as potenciais áreas-problema, gerar metáforas
• Avaliar metáforas
• Quão estruturada ela é?
• Qual a sua relevância para a interface?
• É fácil de ser representada?
• Os usuários vão compreendê-las?
• Quão extensiva ela é?

19
Expandindo o modelo conceitual

• Quais funções o produto desempenha?
• Quais funções o produto executa e quais funções o
  usuário desempenha?
• Como as funções estão relacionadas?
• seqüenciais ou paralelas?
• há categorias de funções
• Quais as informações que devem estar disponíveis?
• que tipos de dados são necessários para se
  executar as tarefas?
• como esses dados são trabalhados pelo sistema?

20
Usando cenáriosno design conceitual

• Expresse situações possíveis ou imaginadas
• Usado durante todo o projeto de várias maneiras
• scripts para a avaliação de protótipos pelos
  usuários
• exemplos concretos de tarefas
• utilizando-se cooperação profissional
  multidisciplinar
• Cenários que exploram situações extremas

21
Usando protótiposem um design conceitual

• Permite a avaliação de idéias novas
• Protótipos de baixa fidelidade utilizados no
  início e de alta fidelidade utilizados em etapas
  posteriores no projeto

22
Design físico tornando concreto

• Considerando questões realistas detalhando o
  design da interface
• Interação entre o design conceitual e o design
  físico
• Diretrizes para um design físico
• Heurísticas de Nielsen
• As 8 regras de ouro de Shneiderman
• Guias de estilos comercial, corporativos...
• use o seu bom senso

23
Design físico tornando concreto

• Diferentes tipos de recursos (caixa de diálogo,
  barras de ferramentas, ícones, menus, etc)
• design de menu
• design de ícones
• design de telas
• apresentação das informações

24
Design do menu

• Quantos itens o menu deve ter?
• E em que ordem eles devem estar?
• De que forma o menu deve ser estruturado, isto é,
  quando deve ser utilizado sub-menus, caixas de
  combinação (combo)?
• Quantas categorias devem ser utilizadas para
  agrupar itens de menu?

25
Design do menu

• Como a divisão em grupos será denotada, isto é,
  com cores diferentes, linhas divisórias?
• Quantos menus deverão haver?
• Qual a terminologia a ser utilizada? (as
  atividades para determinar os requisitos
  fornecerão esta reposta)
• Como as restrições físicas podem ser compensadas
  (por exemplo, um telefone celular)?

26
Design de ícones

• Um bom design de ícones é difícil
• O significado dos ícones é muitas vezes cultural
  e sensitivo ao contexto
• Algumas considerações
• sempre utilize símbolos tradicionais quando já
  existe um padrão
• objetos concretos são mais fáceis de representar
  do que ações
• Esses objetos do ClipArt o quesignificam para
  você?

27
Design de telas

• 2 aspectos
• Como dividir os espaços na tela
• movendo-se dentro e entre telas
• quanto de interação por tela?
• estilo serial ou de fluxo de trabalho?
• Design individual de cada tela
• distribuição dos espaços o equilíbrio entre a
  quantidade de informação / interação
• agrupando itens separando-os em caixas? com
  linhas? por cores?

28
Design de telas

• A análise de tarefas como ponto de partida
• Cada tela contém uma única etapa simples?
• Frustração para o usuário se houverem muitas
  telas simples
• Mantenha a informação disponível múltiplas telas
  podem abrir simultaneamente

29
Design de telas

• Capture a atenção do usuário para um ponto de
  destaque utilizando cores, movimento, molduras
• Animação é muito poderosa mas pode distrair o
  usuário
• Uma boa organização ajuda agrupando, aproximando
  fisicamente
• Procure o equilíbrio entre uma tela com itens
  muito dispersos e uma tela sobrecarregada de itens

30
Apresentação da informação

• As informações mais relevantes devem estar
  disponíveis todo o tempo
• Diferentes tipos de informações implicam em
  diferentes tipos de apresentação
• Consistência entre dados impressos e os exibidos
  apenas na tela

31
Sumário

• Diferentes tipos de protótipos são utilizados
  para diferentes propósitos e em diferentes
  estágios
• Protótipos esclarecem, então construa-o de forma
  apropriada
• Construção o produto final deve ser projetado de
  forma apropriada
• Design conceitual (o primeiro passo para o
  design)
• Design físico menus, ícones, design de telas,
  apresentação da informação
• Protótipos e cenários são utilizados em todo o
  processo de design