Your SlideShare is downloading. ×
Aula 2 - Técnicas de Prototipação I
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

2,777
views

Published on

Published in: Design

0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,777
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
120
Comments
0
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Disciplina Técnicas de Prototipação 1 Prof.: Paolo Domenico Passeri
  • 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. Equipes do Projeto 1 2 • Lenin • Kallel • Alysson • RodrigoA • Anderson • Rafael Giuliano • Vinicius • Gabriela • Ramon • Raphael • Tiago • PauloB • Jean • Viviane • Pedro • Tiago Pain
  • 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. TÉCNICA D.D.P.
  • 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. “ Desculpe porém não tive tempo de escrever uma carta curta, então mandei uma longa.” - Mark Twain
  • 8. Meetings for iPadPaolo Domenico Passeri
  • 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. INTERAGINDO COM DISPOSITIVOS
  • 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. 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. 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. Diagrama deTÉCNICA Fluxo de Interfaces
  • 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. 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. Exemplo
  • 18. Exemplo
  • 19. Meetings for iPadPaolo Domenico Passeri
  • 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. PROTOTIPOS BAIXA FIDELIDADE e ALTA FIDELIDADE
  • 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. Visão Abstrata Baixa Fidelidade
  • 24. Média Fidelidade Alta Fidelidade
  • 25. PrototiposTÉCNICA em Papel
  • 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. 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. 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. • 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. 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. 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. 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. 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. 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. Exemplos
  • 36. Ponto-i
  • 37. Exemplo: demonstrando a interface
  • 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