Este documento describe los prototipos interactivos y cómo crearlos. Explica que los prototipos representan la estructura, funcionamiento y comportamiento de objetos o procesos, y que existen prototipos de baja, media y alta fidelidad. También cubre soluciones como usar patrones, iconos de interacción y herramientas como Visio para crear prototipos interactivos que puedan probarse con usuarios. El objetivo final es mostrar formas de prototipar aplicaciones web y de movil de manera rápida y económica.
2. Diagnóstico de Contenidos y Servicios
Sobre mí
• Ricardo Gil |
• Trabajo en Biko | Área de UX |
• Coordino Cadius Pamplona |
2
3. 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
4. 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
5. 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
6. 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
10. 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
11. 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
12. Diagnóstico de Contenidos y Servicios
¿Cómo trasladamos…
• Social Media
• AJAX
• Rich Internet Applications
…al papel?
12
13. 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
15. 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
22. 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
23. 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
24. 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
25. Diagnóstico de Contenidos y Servicios
Luis Villa, prototipo entregable en papel de alta fidelidad
25
26. 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
27. 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
