• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Prototipação
 

Prototipação

on

  • 5,908 views

Primeira aula de prototipação no curso de Design de Interação no IEC-PUC Minas.

Primeira aula de prototipação no curso de Design de Interação no IEC-PUC Minas.

Statistics

Views

Total Views
5,908
Views on SlideShare
5,235
Embed Views
673

Actions

Likes
10
Downloads
177
Comments
1

15 Embeds 673

http://www.digfordesign.com 572
http://danielbohn.com.br 33
http://danielbohn.tumblr.com 15
http://ruivacombacon.tumblr.com 11
http://tecnologia-de-valor.blogspot.com 11
http://www.danielbohn.com.br 6
http://flavors.me 6
http://www.linkedin.com 6
http://feeds2.feedburner.com 5
https://www.linkedin.com 2
url_unknown 2
http://jp.flavors.me 1
https://flavors.me 1
http://es.flavors.me 1
http://de.flavors.me 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • muito bom mesmo
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • abertura
  • Inede
  • Inede
  • Inede
  • Inede
  • Inede
  • Inede
  • Inede
  • Inede
  • Inede
  • Inede
  • Inede
  • Inede
  • Inede
  • Inede
  • Inede
  • Inede
  • Inede
  • Inede
  • Inede
  • Inede

Prototipação Prototipação Presentation Transcript

  • Design de Interação - Prototipação [PRO] Pós-Graduação em Design de Interação prototipação [PRO] INSTITUTO DE EDUCAÇÃO CONTINUADA Koji Pereira 2010
  • 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
  • Design de Interação - Prototipação [PRO] IDEO
  • Design de Interação - Prototipação [PRO]
  • Design de Interação - Prototipação [PRO] TWITTER
  • 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
  • Design de Interação - Prototipação [PRO] Elaboração (procura de oportunidades de uma para muitas) Ponto de processo de design partida Redução (tomada de decisão de várias para uma específica) processo de design Ponto focal Funil de Buxton processo de design Sketching User Experiences - Bill Buxton
  • Design de Interação - Prototipação [PRO]
  • Design de Interação - Prototipação [PRO] Processo Prototyping – Todd Zaki Warfel
  • Design de Interação - Prototipação [PRO]
  • 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
  • Design de Interação - Prototipação [PRO]
  • Design de Interação - Prototipação [PRO] Prototipação em papel como documentação http://bit.ly/sketchnotation
  • 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 Exige mais esforço que o protótipo em papel próximos do produto final Grande gama de softwares disponíveis. E pode Pode confundir o usuário sobre o design visual também ser feito em qualquer software de desenho. 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
  • Design de Interação - Prototipação [PRO] Wireframing Aplicativos: • Balsamiq / MockingBird • OmniGraffle • PowerPoint / Keynote / Broffice Presentation / Visio • Google Docs Draw • Axure
  • 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.
  • Design de Interação - Prototipação [PRO] Mock ups/Comps Aplicativos: • Fireworks • Photoshop • Gimp • GUI PSDS KITS
  • 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 Exige mais esforço que o protótipo em papel próximos do produto final, Pode confundir o usuário sobre o design visual Permite a realização de testes com redesign Poucos softwares realmente facilitam a criação (greasemonkey) 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.
  • Design de Interação - Prototipação [PRO] Protótipos navegáveis Aplicativos: • Axure • iWeb / Dreamweaver / HTML • Greasemonkey (ótimo para testar redesign) Animados: • Flash • HTML5
  • 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. Protótipo-produto Produto final Prototipação Prototipação
  • 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)
  • Design de Interação - Prototipação [PRO]
  • Design de Interação - Prototipação [PRO]
  • Design de Interação - Prototipação [PRO] Protótipos 3D Virtual: • 3D Studio • Maya • Google Sketch up Físico: • RepRap • Makerbot Cupcake
  • Design de Interação - Prototipação [PRO]
  • Design de Interação - Prototipação [PRO] Técnicas Preparativas: • Storyboard • Fluxos de interação • Mapas estruturais • Cenários Sketching User Experiences - Bill Buxton
  • Design de Interação - Prototipação [PRO] Técnicas Sketching User Experiences - Bill Buxton
  • 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
  • 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
  • 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
  • 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
  • Design de Interação - Prototipação [PRO] Bibliografia 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 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.