Design, prototipagem
e construção
Overview
•Prototipagem e construção
•Design conceitual
•Design físico
•Ferramentas de suporte
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
O quê é um protótipo
Em outras áreas do design, um modelo em
escala reduzida de (por exemplo):
-um carro
-edifício ou cidade
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
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
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
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)
Storyboard
s
•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
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
Utilizando-se fichas
•Fichas (3x5”)
•Cada ficha representa uma tela
•Freqüentemente utilizado em
desenvolvimento de websites
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
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
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”
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
3 perspectivas para um
modelo 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
3 perspectivas para um
modelo 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?
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 é?
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?
Usando cenários
no 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
Usando protótipos
em 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
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
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
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?
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)?
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 que
significam para você?
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?
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
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
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
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