Download - Prototipação
![Page 1: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/1.jpg)
Design de Interação - Prototipação [PRO]
[PRO]
prototipação
INSTITUTO DE
EDUCAÇÃO CONTINUADA
Koji Pereira2010
Pós-Graduação em Design de Interação
![Page 2: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/2.jpg)
Design de Interação - Prototipação [PRO]
O que é prototipar?
• Dar vida a uma idéia
• Não apenas aquela visão de uma maquete/miniatura
• Testar a realidade física e digital de um artefato:
Será que funciona?
Será que realmente será útil?
Será que é confortável e ergonômico?
Cooper.com
![Page 3: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/3.jpg)
Design de Interação - Prototipação [PRO]
IDEO
![Page 4: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/4.jpg)
Design de Interação - Prototipação [PRO]
![Page 5: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/5.jpg)
Design de Interação - Prototipação [PRO]
![Page 6: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/6.jpg)
Design de Interação - Prototipação [PRO]
Benefícios
Usuários:
• Menos intimidador que um computador
• Sem picuinhas
• Mais feedback criativo
Stakeholders:
• Minimiza o investimento
• Torna o produto mais criativo e participativo
• Permite disciplinas/times diferentes participem
• Evita guerra de opiniões
• Serve como documentação
• Reduz lixo
![Page 7: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/7.jpg)
Design de Interação - Prototipação [PRO]
processo de designPonto de
partida
Elaboração(procura de oportunidades
de uma para muitas)
Redução(tomada de decisão
de várias para uma específica)
processo de design
processo de design
Ponto
focal
Sketching User Experiences - Bill BuxtonFu
nil
de
Buxto
n
![Page 8: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/8.jpg)
Design de Interação - Prototipação [PRO]
![Page 9: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/9.jpg)
Design de Interação - Prototipação [PRO]P
roce
sso
Prototyping – Todd Zaki Warfel
![Page 10: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/10.jpg)
Design de Interação - Prototipação [PRO]
![Page 11: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/11.jpg)
Design de Interação - Prototipação [PRO]
Prototipação em papel
É uma representação de baixa
fidelidade de um artefato interativo.
Prós Contras
Exige pouco esforço Tem baixa fidelidade com o produto final
Deixa o usuário relaxado quanto a interação Tem baixo nível de detalhe
Os usuários tendem a sugerir mais Não é possível medir desempenho nas tarefas
É uma “obra aberta”, passível de modificação
Pode ser realizada várias baterias de iteração
em um único dia
Não exige especialista para operação de
programas específicos ou desenvolvimento
![Page 12: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/12.jpg)
Design de Interação - Prototipação [PRO]
![Page 13: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/13.jpg)
Design de Interação - Prototipação [PRO]
Prototipação em papel como documentação
http://bit.ly/sketchnotation
![Page 14: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/14.jpg)
Design de Interação - Prototipação [PRO]
Wireframing
É uma representação que pode variar de baixa a média
fidelidade, dependendo do software e técnica utilizada. É
também bastante utilizada para documentação de softwares
e aplicações web.
Prós Contras
Os testes podem levar a resultados mais
próximos do produto final
Exige mais esforço que o protótipo em papel
Grande gama de softwares disponíveis. E pode
também ser feito em qualquer software de
desenho.
Pode confundir o usuário sobre o design visual
Pode ter baixo nível de detalhamento em
interações que exigem Ajax ou comportamentos
inline
Pode ser difícil de ser realizado testes em
aparelhos finais
Não funciona para algumas interfaces fluídas
![Page 15: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/15.jpg)
Design de Interação - Prototipação [PRO]
Wireframing
Aplicativos:
• Balsamiq / MockingBird
• OmniGraffle
• PowerPoint / Keynote / Broffice Presentation / Visio
• Google Docs Draw
• Axure
![Page 16: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/16.jpg)
Design de Interação - Prototipação [PRO]
Mock ups/Comps
Layouts finalizados com “render” final.
Prós Contras
Bom para avaliar a legibilidade Exige mais esforço que o protótipo em papel
Bom para avaliar aceitação visual Conduz o usuário a focar em problemas visuais
e esquecer as questões de usabilidade e
interação
As baterias de testes são mais lentas, assim
como as iterações.
![Page 17: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/17.jpg)
Design de Interação - Prototipação [PRO]
Mock ups/Comps
Aplicativos:
• Fireworks
• Photoshop
• Gimp
• GUI PSDS KITS
![Page 18: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/18.jpg)
Design de Interação - Prototipação [PRO]
Protótipos navegáveis
São protótipos com interatividade pré-definida, simula a
interação final com um artefato/sistema.
Prós Contras
Os testes podem levar a resultados mais
próximos do produto final,
Exige mais esforço que o protótipo em papel
Pode confundir o usuário sobre o design visual
Permite a realização de testes com redesign
(greasemonkey)
Poucos softwares realmente facilitam a criação
de protótipos navegáveis de forma rápida.
Pode ser difícil de ser realizado testes em
aparelhos finais
Exige especialista que possa programar para
protótipos mais complexos.
As baterias de testes são mais lentas, assim
como as iterações.
O artefato/sistema aparenta ser mais final,
portanto os usuários costumam indicar menos
problemas.
![Page 19: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/19.jpg)
Design de Interação - Prototipação [PRO]
Protótipos navegáveis
Aplicativos:
• Axure
• iWeb / Dreamweaver / HTML
• Greasemonkey (ótimo para testar redesign)
Animados:
• Flash
• HTML5
![Page 20: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/20.jpg)
Design de Interação - Prototipação [PRO]
Prototipação para interfaces fluídas
É necessário a visão de “designeer”, onde há a quebra de
divisão entre designer e engenheiro. A prototipação em
interfaces fluídas é mais gradual e pode ser constante.
Prototipação
Produto final
Prototipação
Protótipo-produto
![Page 21: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/21.jpg)
Design de Interação - Prototipação [PRO]
Prototipação para interfaces fluídas
Ferramentas/aplicativos:
• Lego Mindstorms NXT
• Arduino
• Processing
• Open Frameworks
• CCV
• Reactivision
• Pure data
• Hacking (hackaday.com, makezine.com,
instructables.com)
![Page 22: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/22.jpg)
Design de Interação - Prototipação [PRO]
![Page 23: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/23.jpg)
Design de Interação - Prototipação [PRO]
![Page 24: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/24.jpg)
Design de Interação - Prototipação [PRO]
Protótipos 3D
Virtual:
• 3D Studio
• Maya
• Google Sketch up
Físico:
• RepRap
• Makerbot Cupcake
![Page 25: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/25.jpg)
Design de Interação - Prototipação [PRO]
![Page 26: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/26.jpg)
Design de Interação - Prototipação [PRO]
Técnicas
Preparativas:
• Storyboard
• Fluxos de interação
• Mapas estruturais
• Cenários
Sketching User Experiences - Bill Buxton
![Page 27: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/27.jpg)
Design de Interação - Prototipação [PRO]
Técnicas
Sketching User Experiences - Bill Buxton
![Page 28: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/28.jpg)
Design de Interação - Prototipação [PRO]
Técnicas
Durante:
• Patterns
Web: http://www.welie.com/patterns/
http://www.patternry.com/
http://ui-patterns.com/
http://developer.yahoo.com/ypatterns/
Gestual: livro Designing Gestural Interfaces.
• Aprenda como as pessoas fazem hoje e as gambiarras
que criam
![Page 29: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/29.jpg)
Design de Interação - Prototipação [PRO]
Técnicas
Teste com usuários:
• Wizard of OZ
• Paper in screen
• Design participativo
• Teste de usabilidade remoto (http://remoteusability.com)
Sketching User Experiences - Bill Buxton
![Page 30: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/30.jpg)
Design de Interação - Prototipação [PRO]
Técnicas
Apresentação:
• Vídeos
• Wordle - http://www.wordle.net/
• Many Eyes - http://manyeyes.alphaworks.ibm.com
• Frases
![Page 31: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/31.jpg)
Design de Interação - Prototipação [PRO]
Para as próximas aulas
Básico:
Papel sulfite
Tesoura
Cola
Durex
Canetas
Canetinhas pontas finas e grossas
Específicos e 3D:
Marcador de texto
Lápis 2H, HB, 2B
Papel cartão
Papelão
Isopor
Laptop
Webcam
Arduino
Wiimote
![Page 32: Prototipação](https://reader034.vdocuments.com.br/reader034/viewer/2022052214/555b3101d8b42afc348b4bec/html5/thumbnails/32.jpg)
Design de Interação - Prototipação [PRO]
Bibliografia
COMPLEMENTAR:
BANZI, Massimo. Getting Started with Arduino. O'Reilly Media, Inc., 2008.
BUXTON, Bill. Sketching User Experiences: Getting the Design Right and the Right Design. Morgan
Kaufmann Publishers, 2007.
SNYDER, Carolyn. Paper Prototyping. Morgan Kaufmann Publishers, 1ª Edição – 2003.
WARFEL, Zaki Warfel. Prototyping: A Practitioner's Guide. New York: Rosenfeld Media, 2009.
BÁSICA:
PREECE, Jennifer et. al., Design de Interação: além da interação homem-
computador. Cáp. 8. Porto Alegre: Bookman, 2005. ISBN: 8536304944