Design, prototipageme 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 fidelidadealta fidelidade

•Compromissos em prototipagemvertical 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

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

O quê é um protótipo

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

•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

Por quê fazer um protótipo?

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, etcanotações em post-itsstoryboards (histórias em quadrinhos)

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

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

•Fichas (3x5”)

•Cada ficha representa uma tela

•Freqüentemente utilizado em desenvolvimento de websites

Utilizando-se fichas

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 ummodelo conceitual

•Qual o modo de interação?Como os usuários disparam as açõesBaseados 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

•Qual o paradigma de interação? Paradigma do desktop, com interface gráfica (janelas, ícones, menus e cursores),computação ubiquitouscomputação pervasivacomputação vestíveldispositivos móveis

•Há uma metáfora apropriada?

3 perspectivas para ummodelo conceitual

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á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áriosexemplos concretos de tarefasutilizando-se cooperação profissional multidisciplinar

•Cenários que exploram situações extremas

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

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ísicoHeurísticas de NielsenAs 8 regras de ouro de ShneidermanGuias de estilos: comercial, corporativos...

use o seu bom senso

•Diferentes tipos de recursos (caixa de diálogo, barras de ferramentas, ícones, menus, etc)

design de menudesign de íconesdesign de telasapresentação das informações

Design físico: tornando concreto

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?

•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 do menu

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ãoobjetos concretos são mais fáceis de representar do que ações

•Esses objetos do ClipArt o quesignificam para você?

Design de telas

2 aspectos:•Como dividir os espaços na tela

movendo-se dentro e entre telasquanto de interação por tela?estilo serial ou de fluxo de trabalho?

•Design individual de cada teladistribuição dos espaços: o equilíbrio entre a quantidade de informação / interaçãoagrupando itens: separando-os em caixas? com linhas? por cores?

•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

Design de telas

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