Prototipado: Cómo representar la interacción
27
Abril 2009 Prototipado Cómo hacer prototipos interactivos
-
Upload
ricardogil -
Category
Education
-
view
3.405 -
download
4
Transcript of Prototipado: Cómo representar la interacción
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:
http://elclerigo.com
@elclerigo
Ricardo Gil Echávarri
