Abril 2009

Prototipado

Cómo hacer prototipos interactivos

Diagnóstico de Contenidos y Servicios

2

Sobre mí

•Ricardo Gil |

•Trabajo en Biko | Área de UX |

•Coordino Cadius Pamplona |

Diagnóstico de Contenidos y Servicios

3

¿qué vamos a ver hoy?

•Introducción al prototipado

•Soluciones para representar la interacción

Qué es un prototipo, tipos que hay, qué programas se usan…

Diagnóstico de Contenidos y Servicios

4

Prototipos ¿qué son?

Son la representación mediante diagramas de la estructura, el

funcionamiento y el comportamiento de objetos o procesos.(1)

•Estructura (blueprints): Site Maps, Process Flow, Casos de Uso

•Funcionamiento (wireframes): Prototipos o Maquetas

•Comportamiento: Prototipos interactivos, representación de interacción

(1) NoSoloUsabilidad: Diagramación

Diagnóstico de Contenidos y Servicios

5

Prototipos ¿de dónde vienen?

• Card Sorting

• Personajes y Escenarios

• Focus Groups

• Entrevistas

• Análisis de estadísticas

• Mental Models

• …

Diagnóstico de Contenidos y Servicios

6

Prototipos ¿qué tipos tenemos?

1. Prototipos de baja fidelidad

Prototipado en papel

Mockups

2. Prototipos de fidelidad media

Wireframes

3. Prototipos de alta fidelidad

HTML, Web, PDF’s interactivos.

Diagnóstico de Contenidos y Servicios

7

Prototipos ¿qué pinta tienen?

Diagnóstico de Contenidos y Servicios

8

Prototipos ¿qué pinta tienen?

Diagnóstico de Contenidos y Servicios

9

Prototipos ¿qué pinta tienen?

Diagnóstico de Contenidos y Servicios

10

Prototipos ¿qué programas se usan?• Windows

Microsoft Visio Axure

• Mac Omnigraffle

• Multiplataforma Balsamiq Mockups Adobe Fireworks Pencil Project

• Online fluidIA, Protoshare, LovelyCharts

• Programas no específicos para prototipado Illustrator, Photoshop, Freehand Powerpoint, Excel

Diagnóstico de Contenidos y Servicios

11

Prototipos: Ventajas de usarlos

• Son rápidos, ágiles y pueden, y deben, testearse.

• Nos abstraen del diseño, para centrarnos en el contenido.

• Se pueden tirar a la basura sin dolor.

Un prototipo sólo vale la pena si se puede tirar a la basura (Eduardo Manchón)

Diagnóstico de Contenidos y Servicios

12

¿Cómo trasladamos…• Social Media• AJAX• Rich Internet Applications

…al papel?

Diagnóstico de Contenidos y Servicios

13

Soluciones: PATRONESUn patrón es un modelo que sirve de muestra para sacar otra cosa igual (RAE)

En aplicaciones web hay muchos patrones que se repiten:• Formularios de registro, login, carros de la compra• Carruseles de imágenes, videos embebidos• Comentarios de noticias• …

Librerías de Patrones

UI Patterns: con definición del problema que resuelve y cuándo usarlos.

Welie patterns: igual pero con muchos más patrones, más completo.

MockupsToGo (patrones para la herramienta Balsamiq Mockups)

Wiki Designing Social Interfaces: Wiki con patrones de interfaces Sociales

Diagnóstico de Contenidos y Servicios

14

Soluciones: PATRONES

Diagnóstico de Contenidos y Servicios

15

Soluciones: REPRESENTAR INTERACCIÓNA través de:• Iconos gestuales o que representen acción (flecha ratón, doble click,

mouseover,…)• Símbolos: números, anotaciones,comentarios• Transiciones: Cambios de estado, flujo de interacción

¿Cómo? Con stencils• Touchscreen Stencils: representan gestos táctiles• Konigi Stencils: contienen muchos iconos de anotaciones

Con imaginación

Diagnóstico de Contenidos y Servicios

16

Soluciones: REPRESENTAR INTERACCIÓN

Diagnóstico de Contenidos y Servicios

17

Soluciones: REPRESENTAR INTERACCIÓN

Diagnóstico de Contenidos y Servicios

18

Soluciones: REPRESENTAR INTERACCIÓN

Diagnóstico de Contenidos y Servicios

19

Soluciones: REPRESENTAR INTERACCIÓN

Diagnóstico de Contenidos y Servicios

20

Soluciones: REPRESENTAR INTERACCIÓN

Diagnóstico de Contenidos y Servicios

21

Diagnóstico de Contenidos y Servicios

22

1Estado inicial

usuarioel usuario es tu apodo dentro de odas118, así que piénsalo bien

usuario pepe el usuario es tu apodo dentro de odas118, así que piénsalo bien

El usuario teclea más de 3 caracteres

usuario pepe Buscando si existe el usuario

pepe El usuario PEPE está disponibleusuario

pepe El usuario PEPE no está disponibleusuario

Diagnóstico de Contenidos y Servicios

23

Soluciones: PROTOTIPOS INTERACTIVOSLos prototipos interactivos están entre un prototipo plano en papel y una maqueta dinámica en HTML y, a veces, pueden generarse desde prototipos planos.

Por ejemplo, para Microsoft Visio tenemos VisDynamica que nos genera páginas web interactivas desde nuestro prototipo, o la posibilidad de generar PDF’s dinamicos.Ejemplo de VisDynamica: http://visdynamica.com/live-demo/

También podemos crear un prototipo interactivo con PowerPoint 2007 y un toolkit, o incluso desde Excel.

Diagnóstico de Contenidos y Servicios

24

Soluciones: PROTOTIPADO EN PAPELEste tipo de prototipos están más enfocados a los test de usuario que a convertirse en un entregable para el cliente. Pero nos permiten probar la aplicación desde fases muy tempranas sin a penas esfuerzos en el desarrollo de la interfaz.

Diagnóstico de Contenidos y Servicios

25

Luis Villa, prototipo entregable en papel de alta fidelidad

Diagnóstico de Contenidos y Servicios

26

Prototipado: Más informaciónArtículos•NoSoloUsabilidad: Diagramación•Daniel Torres Burriel

Blogs•Wireframes Magazine•GUUUI•Konigi•Nick Find

Diagnóstico de Contenidos y Servicios

27

Tiempo para preguntas

Y si no queréis preguntar, me tenéis en:

ricardogil@elclerigo.com

http://elclerigo.com

@elclerigo

Ricardo Gil Echávarri