Design, prototipagem e construção

Apresentação em tema: "Design, prototipagem e construção"— Transcrição da apresentação:

1 Design, prototipagem e 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 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

17 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?

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á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

21 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

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 que significam 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