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

Prototipado: Cómo representar la interacción

on

  • 4,751 views

 

Statistics

Views

Total Views
4,751
Views on SlideShare
4,741
Embed Views
10

Actions

Likes
5
Downloads
65
Comments
0

1 Embed 10

http://www.slideshare.net 10

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Prototipado: Cómo representar la interacción Prototipado: Cómo representar la interacción Presentation Transcript

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