Prototipado: Cómo representar la interacción

3,822 views
3,671 views

Published on

Published in: Education, Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,822
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
74
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Prototipado: Cómo representar la interacción

  1. 1. Prototipado Cómo hacer prototipos interactivos Abril 2009
  2. 2. Diagnóstico de Contenidos y Servicios Sobre mí • Ricardo Gil | • Trabajo en Biko | Área de UX | • Coordino Cadius Pamplona | 2
  3. 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. 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. 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. 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
  7. 7. Diagnóstico de Contenidos y Servicios Prototipos ¿qué pinta tienen? 7
  8. 8. Diagnóstico de Contenidos y Servicios Prototipos ¿qué pinta tienen? 8
  9. 9. Diagnóstico de Contenidos y Servicios Prototipos ¿qué pinta tienen? 9
  10. 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. 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. 12. Diagnóstico de Contenidos y Servicios ¿Cómo trasladamos… • Social Media • AJAX • Rich Internet Applications …al papel? 12
  13. 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
  14. 14. Diagnóstico de Contenidos y Servicios Soluciones: PATRONES 14
  15. 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
  16. 16. Diagnóstico de Contenidos y Servicios Soluciones: REPRESENTAR INTERACCIÓN 16
  17. 17. Diagnóstico de Contenidos y Servicios Soluciones: REPRESENTAR INTERACCIÓN 17
  18. 18. Diagnóstico de Contenidos y Servicios Soluciones: REPRESENTAR INTERACCIÓN 18
  19. 19. Diagnóstico de Contenidos y Servicios Soluciones: REPRESENTAR INTERACCIÓN 19
  20. 20. Diagnóstico de Contenidos y Servicios Soluciones: REPRESENTAR INTERACCIÓN 20
  21. 21. Diagnóstico de Contenidos y Servicios 21
  22. 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. 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. 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. 25. Diagnóstico de Contenidos y Servicios Luis Villa, prototipo entregable en papel de alta fidelidad 25
  26. 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. 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

×