Aula 2 - Técnicas de Prototipação I

4.473 visualizações

Publicada em

Publicada em: Design

Aula 2 - Técnicas de Prototipação I

  1. 1. Disciplina Técnicas de Prototipação 1 Prof.: Paolo Domenico Passeri
  2. 2. Aula 1ESTRUTURA Apresentação da Disciplina | Introdução a Prototipação | Sketch | Mind Map | Visual Thinking | Lançamento do Projeto Aula 2 Tipos de Protótipos | Métodos de Interação | Diagrama de Fluxo | Prototipação em Papel Aula 3 Modelagem | Prototipação Física Aula 4 Protótipos Vivos | Desenhando Experiênicias | Storyboarding | Role-playing Aula 5 Business Design | Apresentações em Papel | Frameworks | Infográficos | O “Pitch” Aula 6 Projeto Final da Disciplina
  3. 3. Equipes do Projeto 1 2 • Lenin • Kallel • Alysson • RodrigoA • Anderson • Rafael Giuliano • Vinicius • Gabriela • Ramon • Raphael • Tiago • PauloB • Jean • Viviane • Pedro • Tiago Pain
  4. 4. Individual: •Ir a um restaurante e OBSERVAR as interações que ocorrem. Tirar fotos e fazer anotações se possível. •Compartilhar fotos e anotações com as suas equipes. Grupo:REVISÃO •Após a visita ao restaurante, validar o que foi feito na aula 1 (levantar mais problemas, melhorar os desenhos). •Pensar em uma solução técnologica composta por HW e SW que possa melhorar a experiência no restaurante. •Criar um “Concept Sketch” da solução.
  5. 5. TÉCNICA D.D.P.
  6. 6. Refinando a sua Ideia• Quem é o seu PÚBLICO ALVO? • O principal usuário será o cliente, garçom ou outra pessoa. • Jovens, adultos ou idosos • Homens ou Mulheres • Vão usar diariamente ou ocasionalmente• Quais serão as principais FUNCIONALIDADES? • Cardápio do restaurante? • Realizar pedidos? • Chamar o garçom? “DECLARAÇÃO DE DEFINIÇÃO DO PRODUTO”
  7. 7. “ Desculpe porém não tive tempo de escrever uma carta curta, então mandei uma longa.” - Mark Twain
  8. 8. Meetings for iPadPaolo Domenico Passeri
  9. 9. • DEFINAM quem será o público alvo da sua solução • LEVANTEM todas as funcionalidades que o sistema deverá ter • CORTEM funcionalidades que não fazem parte do core (menos importantes)ATIVIDADE 1 • UNAM o PÚBLICO ALVO e as FUNCIONALIDADES em uma única frase • Criem o SCKETCH CONCEITO da solução (usando técnicas da aula 1) • Post-It 45 minutos • Papel • Lápis/Caneta
  10. 10. INTERAGINDO COM DISPOSITIVOS
  11. 11. Métodos de Interação• Lembre-se que existem diferentes meios de interagir com o dispositivo• Antes de desenhar/prototipar a UI, é necessário avaliar quais meios estão disponíveis e serão utilizados• Analise se não existe outra maneira de usuários entrarem com “dados” e atingir seus objetivos• Seja criativo e não se limite ao “tradicional”
  12. 12. Padrões de Interação• Definem alguns CONTROLES e ELEMENTOS padrões para o design de interfaces• É uma maneira de aprendermos com soluções que foram bem APLICADAS e DOCUMENTADAS por outros designers• Ótimo ponto de PARTIDA para DESENHARMOS e entendermos partes específicas de um design
  13. 13. Manipulação INDIRETA Manipulação DIRETA/Touch/Haptic • É necessário aprender o • Não existe mapeamento pois mapeamento das teclas as teclas são “virtuais” • Deve ser muito consistente • Difícil aprender todos os meios • Não são muito flexíveis de entrada • São muito flexíveis • Joystick Direcional • Toques curtos e longos • Botões Alfa-numéricos • Arrastar • Soft-keys • Deslizar • Rodas • Girar • Pinçar e ExpandirManipulação por GESTOS• Utilizada através de sensores• Através do dispositivo por completo • Inclinando • Asoprando • Chacoalhando • “Se movendo”
  14. 14. Diagrama deTÉCNICA Fluxo de Interfaces
  15. 15. Diagrama de FLUXO• Um diagrama SIMPLES que mostra como uma TELA é ligada a outra• Te obriga a pensar na FLUIDEZ da sua interface, sem considerar os seus detalhes• Mesmo que pequena, pode ser CRUCIAL para o desenvolvimento de uma boa NAVEGAÇÃOTOOLS
  16. 16. Por que usar? • Usado principalmente por dois motivos: • Ter uma VISÃO GERAL, em alto nível, da interface de usuário (arquitetura visual da UI) • Modelar as INTERAÇÕES que os usuários terão com seu sistema; • Como o fluxo oferece uma visão geral, você tem um entendimento RÁPIDO de como o sistema deve FUNCIONAR. • É uma maneira simples para avaliar todo o fluxo da INTERFACE DO USUÁRIO, e responder algumas perguntas: • Este fluxo faz sentido? • Por que eu não posso ir da tela “X” para a tela “Y”? • É um simples método para validar se a interface será USÁVEL. Se tiverem muitas caixa e muitas ligações entre eles, é um sinal de que seu sistema é muito grande e complexo para pessoas entenderem.
  17. 17. Exemplo
  18. 18. Exemplo
  19. 19. Meetings for iPadPaolo Domenico Passeri
  20. 20. • LEIAM novamente a “Declaração de Definição do Produto” (DDP) • LISTEM as principais TELAS do sistema • CONSIDEREM as interações que usadas para navegação entre as telas (toque, arrasto, click)ATIVIDADE 2 • TRACEM o seu DIAGRAMA usando post-its coloridos (uma cor para telas e outra para interações). • DESAFIO: tentem REMOVER 1 à 2 das telas e MANTER a mesma funcionalidade • Post-It 45 minutos • Papel • Lápis/Caneta
  21. 21. PROTOTIPOS BAIXA FIDELIDADE e ALTA FIDELIDADE
  22. 22. BAIXA FIDELIDADE ALTA FIDELIDADE• Não apoiam a avaliação de todos os • Apoiam a avaliação de todos os detalhes de um design, como: detalhes de um design • Interações da interface com o usuário • Necessitam mais tempo e • Layout e formato do produto recursos para serem construídos • Representações dinâmicas • Tempo de resposta do sistema • Apoiam a avaliação do modelo conceitual usado no design • Necessitam de pouco tempo e recursos para serem construídos
  23. 23. Visão Abstrata Baixa Fidelidade
  24. 24. Média Fidelidade Alta Fidelidade
  25. 25. PrototiposTÉCNICA em Papel
  26. 26. • Mock-ups ou REPRESENTAÇÕES de um designO que são? • É uma maneira para AVALIAR um design através de um teste com usuários • Ferramenta de comunicação para facilitar o ENTENDIMENTO de um design • São FEITOS de: 1.Esquemas feitos a mão 2.Fotocópias 3.Recortes de pedações de papel 4.Uma combinação criativa de qualquer um dos itens acima
  27. 27. Por que usar? • Explorar - permite testar facilmente diferentes idéias • Comunicar - apresenta as idéias de uma forma que pode ser entendida facilmente • Colaborar - facilita que todo o time de design contribua e avalie o protótipo • Validar - determina a eficiência dos elementos de design e do fluxo de navegação
  28. 28. Quando usar? • Nos primeiros estágios do processo de design, pois: • É quando as pessoas são menos resistentes a mudanças • Foi investido pouco tempo e recursos no projeto • Ainda não se tem clareza de qual a melhor solução
  29. 29. • Exigem MÍNIMOS RECURSOS para serem contruidosVantagens • São contruidos com FERRAMENTAS SIMPLES, que não requerem habilidades específicas • Permitem que as IDEIAS SEJAM TESTADAS nos primeiros estágios do processo de design • Facilitam a COLABORAÇÃO entre os membros do time • Os protótipos são construídos RAPIDAMETE • Ajudam a IDENTIFICAR os maiores PROBLEMAS de usabilidade do projeto
  30. 30. Poupar dinheiro usando protótipos• As maiores melhorias na interface de um produto são obtidas através da recolha de dados de usabilidade nas fases iniciais do seu desenvolvimento• Os benefícios da aplicação de metodologias de usabilidade nas fases iniciais é 10 vezes maior do que se for apenas utilizada numa fase posterior (para correção de erros e alteração de elementos na interface)• É mais barato alterar um produto na sua fase inicial do que fazer alterações a um produto acabado. Estima-se que seja 100 vezes mais barato efetuar alterações antes de se começar a programar do que esperar que todo o desenvolvimento tenha sido efetuado. Jacob Nielsen
  31. 31. O que pode ser avaliado? Usabilidade Arq. Inform. Design• Funcionalidade• Navegação e Estrutura• Arquiterura da Informação• Fluxo de telas• Layout e Agrupamento dos elementos• Conteúdo• Terminologia e linguágem• Rótulos, botões e controles
  32. 32. Passos para criar um Protótipo em Papel1.Identificar o que prototipar2.Criar o(s) protótipo(s)3.Planejar o teste4.Conduzir o teste com o usuário5.Analisar os resultados6.Modificar o design7.Refazer o teste
  33. 33. Quais elementos incluir no Protótipo em Papel? • O protótipo geralmente não precisa ser completo • Considere as 3 ou 4 principais tarefas do projeto (mais utilizadas pelo usuário) e faça um protótipo para testá-las • Comece com conceitos simples e depois evolua para protótipos mais abrangentes ou profundos
  34. 34. Ferramentas necessárias •P •P ap •C os el •T e t an t-i • F eso tinh • C ita ura a m • T ola ades éd ia ra ba iva ns s ção e pa tã Organiza rê o nc v idade! ias Criati
  35. 35. Exemplos
  36. 36. Ponto-i
  37. 37. Exemplo: demonstrando a interface
  38. 38. 1. Baseado no diagrama de fluxo, criar um protótipo do sistema usando a técnica de prototipação no papel 2. Escolher os principais componentes (3 a 4 telas) e desenha-los.ATIVIDADE 3. Simular a interação e filmar o resultadoPROJETO Entregáveis desta aula: post no blog da Faber-Ludens, com DDP, diagrama de fluxo, e vídeo do protótipo que demonstra o uso do sistema. • Papel • Tesoura 2 horas • Post-it • Cola • Canetinha • Revistas

×