Design prototipagem e construo Overview Prototipagem e construo

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 (Power. Point) • 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)

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

Utilizando-se fichas • Fichas (3 x 5”) • 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. . . • 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 Clip. Art 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 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