Tècniques de Disseny Participatiu

Eva Durall

Learning Environments research group

Aalto School of Arts, Design and Architecture

PROTOTIPAT

INDEX

1. Introducció

2. Visualitzacions inicials

3. Prototipat

4. Prototipat de baixa fidelitat

5. Prototipat de fidelitat mitjana - alta

6. Idees clau del prototipatge

1. INTRODUCCIÓ

En funció del nivell de definició d’un concepte, podem distingir entre:

VISUALITZACIONS INICIALS

•  Esbossos / sketches

PROTOTIPS DE BAIXA DEFINICIÓ

•  Wireframes

•  Prototips en paper

•  Storyboards

PROTOTIPS DE DEFINICIÓ MITJANA – ALTA

•  Mockup / maqueta

•  Prototips clicables

2. VISUALITZACIONS INICIALS

Els esbossos responen a idees inicials. L’objectiu inicial és explorar diverses possibilitats de disseny.

Esbossos aplicació Feeler (E. Durall)

Esbós / Sketch

3. PROTOTIPAT

Segons Sanders i Stappers (2008), els prototips:

•  Són manifestacions físiques de les idees o conceptes. Van des de versions bastes fins a acabades (molt semblants al producte final)

•  Serveixen per donar forma a una idea, i per explorar la viabilitat tècnica i social.

•  Es poden fer d'una molt àmplia gamma de materials, incloent argila, escuma, fusta, plàstic, elements digitals i electrònics senzills.

•  Els dissenyadors poden utilitzar els prototips per visualitzar les seves idees i també per rebre feedback per part d’altres parts interessades.

•  Els prototips són eines de disseny. Els usuaris finals poden utilitzar els prototips en sessions de recerca avaluativa.

Wireframe de l’aplicació Ach So!

Un wireframe és un esbós bàsic i de baixa qualitat de la arqitectura de la informació d'una aplicació o el disseny d'una interfície. S’utilitza per mostrar un disseny o esbós ràpid i facilitar la comunicació entre els membres de l’equip i també amb l’usuari/client.

Wireframes

4. PROTOTIPAT DE BAIXA FIDELITAT

Avantatges (Snyder, 2003):

•  Ràpid i econòmic

•  Identifica problemes abans de comencar a programar

•  Evoca més i aporta millor feedback per part dels usuaris

•  Ajuda als desenvolupadors a pensar de forma creativa

•  Permet que els usuaris i altres actors s’involucrin en el procés

•  Fomenta el treball en equip i la comunicació

Prototipat en paper

4. PROTOTIPAT DE BAIXA FIDELITAT

Prototip en paper de Reflex (A. Keune). Prototip en paper de Feeler (E. Durall).

Prototipat en paper

4. PROTOTIPAT DE BAIXA FIDELITAT

Exemple d’un test amb un prototip en paper (usuari de youtube “channy”)

4. PROTOTIPAT DE BAIXA FIDELITAT

Prototipat en paper

A l’hora de preparar un test amb un prototip de paper cal tenir en compte:•  Objectius (què és vol testejar?)•  Tasques (què es demanarà a l’usuari que faci?)•  Organització (facilitació, documentació…)

Storyboard de Social Augmented Reality app (Jana Pejoska)

Un storyboard és una representació de la interfície d’usuari en la que s’implementen un seguit de comportaments. Els storyboards són més conceptuals que els prototips en paper i conserven la major part de la informació de flux.

4. PROTOTIPAT DE BAIXA FIDELITAT

Storyboards

Captures del prototip clicable per a Feeler (E. Durall)

Prototips clicables

5. PROTOTIPAT DE FIDELITAT MITJANA – ALTA

Mockups de l’aplicació Ach So!

Mockups / maquetes

5. PROTOTIPAT DE FIDELITAT MITJANA – ALTA

Visualització estàtica que busca representar l’aspecte “final” del prototip.

6. IDEES CLAU DEL PROTOTIPATGE

Prototips desenvolupats per a Square 1 (A. Keune)

Procés d’iteració contínua

Prototips desenvolupats per a Square 1 (S. Miesner)

Testeig de les solucions des de l’inici

6. IDEES CLAU DEL PROTOTIPATGE

Procés de desenvolupament de SoAR (projecte de tesi de MA de S. Reponen, desenvolupament de software a càrrec de M. Jokitulppo)

Proves amb els prototips desenvolupats per a Feeler (projecte de tesi d’E. Durall, desenvolupament tècnic a càrrec de N. Pöllönen)

Testeig de les solucions des de l’inici

6. IDEES CLAU DEL PROTOTIPATGE

REFERÈNCIES

Aquest material utilitza la llicència de Creative

Commons Reconeixement – Compartir Igual.

Sanders, E. B. N., & Stappers, P. J. (2008). Co-creation and the new landscapes of design. Co-design, 4(1), 5-18.

Snyder, C. (2003). Paper prototyping: The fast and easy way to design and refine user interfaces. Morgan Kaufmann.

Poldoja, H. (2015). User Interface Prototyping Techniques: Low Fidelity Prototyping. http://www.slideshare.net/hanspoldoja/user-interface-prototyping-techniques-low-fidelity-prototyping

ACTIVITAT

ACTIVITAT

Creació i testeig d’un prototip en baixa resolució

•  En grups de 3 persones

•  Dissenyar una aplicació mòbil (wireframes)

•  Crear un prototip en paper amb la

funcionalitat bàsica

•  Dissenyar un test d’usuari (definir tasques)

Durada: 1 hora

•  En gran grup testejarem cada un dels prototips (Un equip fa un test amb un usuari mentre la resta observa. Posada en comú i discussió després de cada test)

Durada: 20 minuts / test