Prototipação

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


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


IDEO



TWITTER


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


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


Design de Interação - Prototipação [PRO]P

roce

sso

Prototyping – Todd Zaki Warfel



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



Prototipação em papel como documentação

http://bit.ly/sketchnotation


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


Wireframing

Aplicativos:

• Balsamiq / MockingBird

• OmniGraffle

• PowerPoint / Keynote / Broffice Presentation / Visio

• Google Docs Draw

• Axure


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.


Mock ups/Comps

Aplicativos:

• Fireworks

• Photoshop

• Gimp

• GUI PSDS KITS


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.


Protótipos navegáveis

Aplicativos:

• Axure

• iWeb / Dreamweaver / HTML

• Greasemonkey (ótimo para testar redesign)

Animados:

• Flash

• HTML5


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


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)




Protótipos 3D

Virtual:

• 3D Studio

• Maya

• Google Sketch up

Físico:

• RepRap

• Makerbot Cupcake



Técnicas

Preparativas:

• Storyboard

• Fluxos de interação

• Mapas estruturais

• Cenários

Sketching User Experiences - Bill Buxton


Técnicas



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


Técnicas

Teste com usuários:

• Wizard of OZ

• Paper in screen

• Design participativo

• Teste de usabilidade remoto (http://remoteusability.com)



Técnicas

Apresentação:

• Vídeos

• Wordle - http://www.wordle.net/

• Many Eyes - http://manyeyes.alphaworks.ibm.com

• Frases


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


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