Download - Prototipado: Cómo representar la interacción
![Page 1: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/1.jpg)
Abril 2009
Prototipado
Cómo hacer prototipos interactivos
![Page 2: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/2.jpg)
Diagnóstico de Contenidos y Servicios
2
Sobre mí
•Ricardo Gil |
•Trabajo en Biko | Área de UX |
•Coordino Cadius Pamplona |
![Page 3: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/3.jpg)
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…
![Page 4: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/4.jpg)
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
![Page 5: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/5.jpg)
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
• …
![Page 6: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/6.jpg)
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.
![Page 7: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/7.jpg)
Diagnóstico de Contenidos y Servicios
7
Prototipos ¿qué pinta tienen?
![Page 8: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/8.jpg)
Diagnóstico de Contenidos y Servicios
8
Prototipos ¿qué pinta tienen?
![Page 9: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/9.jpg)
Diagnóstico de Contenidos y Servicios
9
Prototipos ¿qué pinta tienen?
![Page 10: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/10.jpg)
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
![Page 11: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/11.jpg)
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)
![Page 12: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/12.jpg)
Diagnóstico de Contenidos y Servicios
12
¿Cómo trasladamos…• Social Media• AJAX• Rich Internet Applications
…al papel?
![Page 13: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/13.jpg)
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
![Page 14: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/14.jpg)
Diagnóstico de Contenidos y Servicios
14
Soluciones: PATRONES
![Page 15: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/15.jpg)
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
![Page 16: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/16.jpg)
Diagnóstico de Contenidos y Servicios
16
Soluciones: REPRESENTAR INTERACCIÓN
![Page 17: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/17.jpg)
Diagnóstico de Contenidos y Servicios
17
Soluciones: REPRESENTAR INTERACCIÓN
![Page 18: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/18.jpg)
Diagnóstico de Contenidos y Servicios
18
Soluciones: REPRESENTAR INTERACCIÓN
![Page 19: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/19.jpg)
Diagnóstico de Contenidos y Servicios
19
Soluciones: REPRESENTAR INTERACCIÓN
![Page 20: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/20.jpg)
Diagnóstico de Contenidos y Servicios
20
Soluciones: REPRESENTAR INTERACCIÓN
![Page 21: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/21.jpg)
Diagnóstico de Contenidos y Servicios
21
![Page 22: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/22.jpg)
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
![Page 23: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/23.jpg)
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.
![Page 24: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/24.jpg)
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.
![Page 25: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/25.jpg)
Diagnóstico de Contenidos y Servicios
25
Luis Villa, prototipo entregable en papel de alta fidelidad
![Page 26: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/26.jpg)
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
![Page 27: Prototipado: Cómo representar la interacción](https://reader038.vdocumento.com/reader038/viewer/2022102610/55621ab7d8b42af2128b56f3/html5/thumbnails/27.jpg)
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