Your SlideShare is downloading. ×
Prototipado: Cómo representar la interacción
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Prototipado: Cómo representar la interacción

3,356
views

Published on

Published in: Education, Technology

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,356
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
68
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Prototipado Cómo hacer prototipos interactivos Abril 2009
  • 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
  • 7. Diagnóstico de Contenidos y Servicios Prototipos ¿qué pinta tienen? 7
  • 8. Diagnóstico de Contenidos y Servicios Prototipos ¿qué pinta tienen? 8
  • 9. Diagnóstico de Contenidos y Servicios Prototipos ¿qué pinta tienen? 9
  • 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
  • 14. Diagnóstico de Contenidos y Servicios Soluciones: PATRONES 14
  • 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. Diagnóstico de Contenidos y Servicios Soluciones: REPRESENTAR INTERACCIÓN 16
  • 17. Diagnóstico de Contenidos y Servicios Soluciones: REPRESENTAR INTERACCIÓN 17
  • 18. Diagnóstico de Contenidos y Servicios Soluciones: REPRESENTAR INTERACCIÓN 18
  • 19. Diagnóstico de Contenidos y Servicios Soluciones: REPRESENTAR INTERACCIÓN 19
  • 20. Diagnóstico de Contenidos y Servicios Soluciones: REPRESENTAR INTERACCIÓN 20
  • 21. Diagnóstico de Contenidos y Servicios 21
  • 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

×