Prototipado
Cómo hacer prototipos interactivos
Abril 2009

Diagnóstico de Contenidos y Servicios
Sobre mí
• Ricardo Gil |
• Trabajo en Biko | Área de UX |
• Coordino Cadius Pamplona |
2

Diagnóstico de Contenidos y Servicios
¿qué vamos a ver hoy?
• Introducción al prototipado
Qué es un prototipo, tipos que hay, qué programas se usan…
• Soluciones para representar la interacción
3

Diagnóstico de Contenidos y Servicios
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 4

Diagnóstico de Contenidos y Servicios
Prototipos ¿de dónde vienen?
• Card Sorting
• Personajes y Escenarios
• Focus Groups
• Entrevistas
• Análisis de estadísticas
• Mental Models
• …
5

Diagnóstico de Contenidos y Servicios
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.

6

Diagnóstico de Contenidos y Servicios
Prototipos ¿qué pinta tienen?
7

Diagnóstico de Contenidos y Servicios
Prototipos ¿qué pinta tienen?
8

Diagnóstico de Contenidos y Servicios
Prototipos ¿qué pinta tienen?
9

Diagnóstico de Contenidos y Servicios
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
10

Diagnóstico de Contenidos y Servicios
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)
11

Diagnóstico de Contenidos y Servicios
¿Cómo trasladamos…
• Social Media
• AJAX
• Rich Internet Applications
…al papel?
12

Diagnóstico de Contenidos y Servicios
Soluciones: PATRONES
Un 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
13

Diagnóstico de Contenidos y Servicios
Soluciones: PATRONES
14

Diagnóstico de Contenidos y Servicios
Soluciones: REPRESENTAR INTERACCIÓN
A 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
15

Diagnóstico de Contenidos y Servicios
Soluciones: REPRESENTAR INTERACCIÓN
16

Diagnóstico de Contenidos y Servicios
Soluciones: REPRESENTAR INTERACCIÓN
17

Diagnóstico de Contenidos y Servicios
Soluciones: REPRESENTAR INTERACCIÓN
18

Diagnóstico de Contenidos y Servicios
Soluciones: REPRESENTAR INTERACCIÓN
19

Diagnóstico de Contenidos y Servicios
Soluciones: REPRESENTAR INTERACCIÓN
20

Diagnóstico de Contenidos y Servicios
21

Diagnóstico de Contenidos y Servicios
1 Estado inicial
el usuario es tu apodo dentro de odas118,
usuario así que piénsalo bien
El usuario
teclea más de 3
caracteres
el usuario es tu apodo dentro de odas118,
pepe
usuario así que piénsalo bien
pepe
usuario Buscando si existe el usuario
El usuario PEPE está disponible
usuario pepe
El usuario PEPE no está disponible
usuario pepe
22

Diagnóstico de Contenidos y Servicios
Soluciones: PROTOTIPOS INTERACTIVOS
Los 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.
23

Diagnóstico de Contenidos y Servicios
Soluciones: PROTOTIPADO EN PAPEL
Este 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.
24

Diagnóstico de Contenidos y Servicios
Luis Villa, prototipo entregable en papel de alta fidelidad
25

Diagnóstico de Contenidos y Servicios
Prototipado: Más información
Artículos
• NoSoloUsabilidad: Diagramación
• Daniel Torres Burriel
Blogs
• Wireframes Magazine
• GUUUI
• Konigi
• Nick Find
26

Diagnóstico de Contenidos y Servicios
Tiempo para preguntas
Y si no queréis preguntar, me tenéis en:
ricardogil@elclerigo.com @elclerigo
Ricardo Gil Echávarri
http://elclerigo.com
27