Usabilidad en Proyectos Digitales

  • Published on
    18-Nov-2014

  • View
    247

  • Download
    1

DESCRIPTION

Presentacin sobre los elementos presentes en proyectos digitales, desde la estructuracin y estudio hasta la experiencia de usuario.

Transcript

  • 1. Usabilidad en Proyectos Digitales UCD UX IA Sofa Savoy Anguita | Arquitecto de Informacin
  • 2. 1Usabilidad
  • 3. Usabilidad QU ES LA USABILIDAD? La usabilidad es la facilidad de uso de sistemas, productos o servicios con los que interacta un usuario
  • 4. Usabilidad Diseo centrado Usabilidad Diseo en el usuario
  • 5. Diseo Centrado en el Usuario (UCD) QU ES EL DISEO CENTRADO EN EL USUARIO? Es el diseo de productos, servicios o dispositivos enfocados a las necesidades de los usuarios, a brindarles satisfaccin y cumplir sus expectativas
  • 6. Diseo Centrado en el Usuario (UCD) Usabilidad Experiencia de Usuario accesibles amigables atractivos
  • 7. Experiencia de Usuario (UX) QU ES LA EXPERIENCIA DE USUARIO? Es el nivel de satisfaccin que experimenta un usuario al interactuar con cualquier servicio, dispositivo o producto
  • 8. Experiencia de Usuario (UX) Wireframes (WF) Arquitectura de Informacin (AI) Diseo de Interaccin (IxD) Diseo de Interfaz UX (UI) Anlisis y Contenido Ingeniera y Desarrollo
  • 9. Experiencia de Usuario (UX) Producto Diseo Funcional Diseo estructural Contenido Investigacin
  • 10. Arquitectura 2de Informacin
  • 11. Arquitectura de Informacin (IA) QU ES LA ARQUITECTURA DE INFORMACIN? Es la disciplina encargada de estudiar, analizar, organizar y estructurar la informacin de un sistema, logrando que el acceso a ella sea eficiente
  • 12. Arquitectura de Informacin (IA) PARA QU SIRVE? Sirve para que cualquier espacio de informacin, ya sea simple o complejo, permita al usuario: Acceder sin dificultades y de manera amigable Encontrar lo que busca o utilizar el sistema sin complicaciones Obtener una grata experiencia
  • 13. Metodologas: Card Sorting CARD SORTING Es una tcnica que permite definir la organizacin y distribucin de las categoras o contenidos
  • 14. Metodologas: Mapa de Navegacin y Etiquetado MAPA DE NAVEGACIN Y ETIQUETADO Es la jerarquizacin del contenidos y nombramiento adecuado de las secciones segn los criterios de bsqueda
  • 15. Metodologas: Personas y Escenarios PERSONAS Y ESCENARIOS Tcninca que se basa en pensar en los potenciales usuarios e identificar casos de uso para cada uno de ellos.
  • 16. Metodologas: Wireframes WIREFRAMES Los wireframes son la jerarquizacin visual de los contenidos; son la estructura o esqueleto de nuestro diseo
  • 17. Metodologas: Wireframes
  • 18. Arquitectura de Informacin (IA) usuarios contenido IA contexto
  • 19. Estrategia de Contenido: Mapa de Navegacin Elementos visuales Pgina(s) Documento(s) Enlace externo
  • 20. Estrategia de Contenido: Mapa de Navegacin HOME Greenpeace Acerca de nosotros Qu hacemos Noticias/Blog Multimedia Involcrate Donar Kumi Naidoo Victorias de Greenpeace Historia y xito Organizacin Preguntas frecuentes Cambio climtico rtico Haciendo holas Reaccin nuclear Soluciones Bosques Mar Redes Sociales Centro de Prensa Tierra Login / Registro Contacto Suscripcin a Newsletter Registro Activista Buscador Selector Pases HOME CONTENIDO AUXILIAR 1 NIVEL DE NAVEGACIN 2 NIVEL DE NAVEGACIN FUNC. GENERALES
  • 21. Estrategia de Contenido: Mapa de Navegacin
  • 22. Conclusiones BENEFICIOS DE SER METODOLGICOS Evitar correcciones sobre la marcha Reducir tiempos en la produccin final Claridad del proyecto para todas las reas Motivar el trabajo multidisciplinario
  • 23. 3Wireframes
  • 24. Wireframes QU SON LOS WIREFRAMES? Los wireframes son la jerarquizacin visual de los contenidos; son la estructura o esqueleto de nuestro diseo, de cualquier tipo de interfaz digital
  • 25. Wireframes PARA QU SIRVEN? Sirven para mostrar el contenido, definir las funcionalidades, conectar lo conceptual con lo visual, organizando: La informacin que ser mostrada Las funciones disponibles Las reglas para mostrar cierto tipo de informacin
  • 26. Wireframes LOS WIREFRAMES DEBEN Ser simples, pero no descuidados Representar los elementos grficos esquemticamente Utilizar escala de grises Evitar utilizar ms de una tipografa Usar contenido real siempre que sea posible
  • 27. Wireframes Comenzar desde el papel...
  • 28. Construccin de los Wireframes: Plantillas principales DEFINIR PLANTILLAS PRINCIPALES Home Categora principal Interior tipo Pgina de accin
  • 29. Plantillas Listado de plantillas PLANTILLA TIPO COMENTARIOS Home Home Men Contenido Se presenta un submen con cada categora. Se mantiene fijo en el borde superior de la pantalla cuando se hace scroll Historia Contenido Presencia de imgenes Blog Artculos Repositorio de artculos Contacto Formulario Informacin ms formulario de contacto simple
  • 30. Construccin de los Wireframes PARA COMENZAR Revisar los contenidos a destacar o reforzar Definir qu plus, innovacin o tecnologa aplicaremos Considerar las distintas resoluciones de pantalla
  • 31. Construccin de los Wireframes: Sitio de ejemplo Ejemplo de sitio web: http://www.agra-culture.com
  • 32. Construccin de los Wireframes: Mapa de navegacin Ejemplo modificado desde: http://www.agra-culture.com HOME CONTENIDO AUXILIAR 1 NIVEL DE NAVEGACIN 2 NIVEL DE NAVEGACIN FUNCIONALIDADES GENERALES HOME Blog Men Historia Detox Catering Delivering Desayuno Almuerzo/Cena Grab & Go Tragos Contacto Informacin Nutricional Solicitud de Empleo Locaciones Articulos RRSS (fb, pinterest, instagram, tw, Artculos por categora Artculos por mes/ao Compartir por FB, TW y mail Newsletter
  • 33. Construccin de los Wireframes: Home HOME Blog Men Historia Detox Catering Delivering Desayuno Almuerzo/Cena Grab & Go Tragos Contacto Informacin Nutricional Solicitud de Empleo Locaciones Articulos RRSS (fb, pinterest, instagram, tw, Artculos por categora Artculos por mes/ao Compartir por FB, TW y mail Newsletter < Catering Menu | Story | Detox | Locations | Contact Delivery > Welcome to Agra Culture. Now open in uptown. Learn more > Want to see what were cooking up? View our menu > What we believe Eating is an agricultural act. Wendell Berry, Agricultural Philosopher Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Join our eat well, be well culture. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Enter your email address Sign me up! Home | Menu | Story | Detox | Locations Contact Blog Catering Delivery Healthy fast-casual food, crafted with love in minnieapolis Agra Culture Kitchen & Press | All Rights Reserved
  • 34. Construccin de los Wireframes: Home < Catering Menu | Story | Detox | Locations | Contact Delivery > Welcome to Agra Culture. Now open in uptown. Learn more > Want to see what were cooking up? View our menu > What we believe Eating is an agricultural act. Wendell Berry, Agricultural Philosopher Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Join our eat well, be well culture. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Enter your email address Sign me up! Home | Menu | Story | Detox | Locations Contact Blog Catering Delivery Healthy fast-casual food, crafted with love in minnieapolis Agra Culture Kitchen & Press | All Rights Reserved
  • 35. Construccin de los Wireframes: Categora Principal HOME Blog Men Historia Detox Catering Delivering Desayuno Almuerzo/Cena Grab & Go Tragos Contacto Informacin Nutricional Solicitud de Empleo Locaciones Articulos RRSS (fb, pinterest, instagram, tw, Artculos por categora Artculos por mes/ao Compartir por FB, TW y mail Newsletter < Catering Menu | Story | Detox | Locations | Contact Delivery > Our menu Vegetarian Diary free Paleo Gluten free Vegan Favorite Download nutritional info Breakfast Lunch/Dinner Grab & Go Drinks organic eggs, organic egg whites or seasoned tofu, served over quinoa, in 2 corn tortillas, wrapped in a flour tortilla or with toast Breakfast Served 7-10:30am daily Farm Scrambles Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy Simple Salads The American Applewood smoked bacon, spinach, truffled wild mushrooms, onion, white cheddar, fresh parsley (nutrition facts shown for eggs) Cal: 340 Fat: 26g Carbs: 5g Protein: 20g The Mediterranean asparagus, roasted red peppers, kalamata olives, grape tomatoes, arugula, feta cheese (nutrition facts shown for eggs) Cal: 270 Fat: 20g Carbs: 6g Protein: 15g El Granjero Chorizo sausage, roasted poblano peppers, black beans, queso fresco, fresh cilantro, pico de gallo (nutrition facts shown for eggs) Cal: 490 Fat: 38g Carbs: 7g Protein: 29g Breakfast sandwiches & non. wiches Arugula & bacon Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat. Cal: 340 Fat: 26g Carbs: 5g Protein: 20g Wilted greens Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Cal: 270 Fat: 20g Carbs: 6g Protein: 15g Kale pesto & prosciutto Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat. Cal: 490 Fat: 38g Carbs: 7g Protein: 29g Trimmings Seasonal hash Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Granola parfait Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. Roasted apple sauce Lorem ipsum dolor sit amet. Lorem Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. Dolor sit Lorem ipsum dolor sit amet. Elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Set diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. Sit amet Lorem ipsum dolor sit amet. Lunch & Dinner Porridges Muesli Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat. Cal: 340 Fat: 26g Carbs: 5g Protein: 20g Quinoa (hot) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Cal: 270 Fat: 20g Carbs: 6g Protein: 15g Oatmeal Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat. Cal: 490 Fat: 38g Carbs: 7g Protein: 29g
  • 36. Construccin de los Wireframes: Categora Principal < Catering Menu | Story | Detox | Locations | Contact Delivery > Our menu Vegetarian Diary free Paleo Gluten free Vegan Favorite Download nutritional info Breakfast Lunch/Dinner Grab & Go Drinks organic eggs, organic egg whites or seasoned tofu, served over quinoa, in 2 corn tortillas, wrapped in a flour tortilla or with toast Breakfast Served 7-10:30am daily Farm Scrambles Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy Simple Salads The American Applewood smoked bacon, spinach, truffled wild mushrooms, onion, white cheddar, fresh parsley (nutrition facts shown for eggs) Cal: 340 Fat: 26g Carbs: 5g Protein: 20g The Mediterranean asparagus, roasted red peppers, kalamata olives, grape tomatoes, arugula, feta cheese (nutrition facts shown for eggs) Cal: 270 Fat: 20g Carbs: 6g Protein: 15g El Granjero Chorizo sausage, roasted poblano peppers, black beans, queso fresco, fresh cilantro, pico de gallo (nutrition facts shown for eggs) Cal: 490 Fat: 38g Carbs: 7g Protein: 29g Breakfast sandwiches & non. wiches Arugula & bacon Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat. Cal: 340 Fat: 26g Carbs: 5g Protein: 20g Wilted greens Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Cal: 270 Fat: 20g Carbs: 6g Protein: 15g Kale pesto & prosciutto Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat. Cal: 490 Fat: 38g Carbs: 7g Protein: 29g Trimmings Seasonal hash Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Granola parfait Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. Roasted apple sauce Lorem ipsum dolor sit amet. Lorem Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. Dolor sit Lorem ipsum dolor sit amet. Elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Set diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. Sit amet Lorem ipsum dolor sit amet. Lunch & Dinner Porridges Muesli Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat. Cal: 340 Fat: 26g Carbs: 5g Protein: 20g Quinoa (hot) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Cal: 270 Fat: 20g Carbs: 6g Protein: 15g Oatmeal Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat. Cal: 490 Fat: 38g Carbs: 7g Protein: 29g
  • 37. Construccin de los Wireframes: Interior Tipo HOME Blog Men Historia Detox Catering Delivering Desayuno Almuerzo/Cena Grab & Go Tragos Contacto Informacin Nutricional Solicitud de Empleo Locaciones Articulos RRSS (fb, pinterest, instagram, tw, Artculos por categora Artculos por mes/ao Compartir por FB, TW y mail Newsletter < Catering Menu | Story | Detox | Locations | Contact Delivery > Whats fresh at agra? Thank you to our partners 05/07/2014 Now that we are close to opening the Agra doors, heres a little glimpse into our backstory and what weve been up to for the past few months. A huge thanks to our local vendors whove helped us get to this point. We developed relationships with Prescribe Nutrition and Everyday Table, and both were essential to the development of our meal plans and have given us tons of guidance on nutrition, dietary lifestyles, and food sensitivities. SO grateful for their mastery of our menu! Our physical space is almost ready, and weve loved getting to work with such talented artists. Their crafts have added dimension and authenticity to our interior. Check out Menomin Resawn Timbers and Hans Thorkelson of Lux Architectural Finishing! Post categories All categories Press & media Store opening Tweets Archives May 2014 Follow us And where would we be without our brand?! Our ideas were perfectly styled and executed through our logo design by Studio Prow and Betsy Baldwin Design, in addition to bringing the Agra brand experience to life through the design and build of our website by PH Digital Labs Agra Culture is because of them. A special shout out to our fabulous photographer, Isabel Subtil and her gorgeous food photos too! Category: Press & media Store opennings Share this article
  • 38. Construccin de los Wireframes: Interior Tipo < Catering Menu | Story | Detox | Locations | Contact Delivery > Whats fresh at agra? Thank you to our partners 05/07/2014 Now that we are close to opening the Agra doors, heres a little glimpse into our backstory and what weve been up to for the past few months. A huge thanks to our local vendors whove helped us get to this point. We developed relationships with Prescribe Nutrition and Everyday Table, and both were essential to the development of our meal plans and have given us tons of guidance on nutrition, dietary lifestyles, and food sensitivities. SO grateful for their mastery of our menu! Our physical space is almost ready, and weve loved getting to work with such talented artists. Their crafts have added dimension and authenticity to our interior. Check out Menomin Resawn Timbers and Hans Thorkelson of Lux Architectural Finishing! Post categories All categories Press & media Store opening Tweets Archives May 2014 Follow us And where would we be without our brand?! Our ideas were perfectly styled and executed through our logo design by Studio Prow and Betsy Baldwin Design, in addition to bringing the Agra brand experience to life through the design and build of our website by PH Digital Labs Agra Culture is because of them. A special shout out to our fabulous photographer, Isabel Subtil and her gorgeous food photos too! Category: Press & media Store opennings Share this article
  • 39. Wireframes Navegables MOSTRAR UN FLUJO Lo ideal es hacer maquetas navegables para que exista un seguimiento de los pasos mientras los usuarios realizan la interaccin, para as tener feedback de lo que funciona y lo que no
  • 40. Wireframes Navegables: Mockups MOCKUPS Los mockups son similares a los wireframes, pero llevan color y se enfocan en mostrar y detallar la interaccin del producto para que la persona intuya qu debe hacer
  • 41. Wireframes Navegables: Mockups
  • 42. Documento 4Entregable
  • 43. Documentos Entregables QU ES UN ENTREGABLE? Es un documento que explica el contexto del proyecto, la Arquitectura de Informacin y los wireframes fundamentales con sus funcionalidades y comentarios
  • 44. Documentos Entregables PARA QU SIRVE? Sirve para generar un discurso coherente que pueda ser comprendido por los involucrados en el proyecto y por el cliente
  • 45. Documentos Entregables CMO SE ESTRUCTURA? Consta de una parte visual y otra escrita, mostrando sobre lo que vamos a hablar y explicando en qu consiste
  • 46. Documentos Entregables: Mapa
  • 47. Documentos Entregables: Wireframes
  • 48. Diseo 5Responsivo
  • 49. Diseo responsivo El diseo responsivo permite que un sitio web se adapte a la resolucin de cualquier dispositivo, visualizndose perfectamente.
  • 50. Diseo responsivo Utiliza una grilla fluda y media queries para controlar el diseo y su contenido al ser visualizado en los distintos dispositivos, creando una mejor experiencia de navegacin.
  • 51. Diseo responsivo Un diseo limpio, estructurado y bien pensado ser todo un xito, pero es clave pensar adems en la interaccin de cada proceso.
  • 52. Diseo Responsivo CUALES SON SUS VENTAJAS? Mejora la experiencia de navegacin de los usuarios Favorece el posicionamiento en buscadores Ahorra costos de mantencin al ser una sola web Ayuda a la accesibilidad del contenido
  • 53. Diseo Responsivo: Liquid & Responsive Diseo Lquido: Utiliza porcentajes para los anchos, permitiendo que las columnas sean relativas unas a otras y que el diseo se escale fludamente Diseo Responsivo: Utiliza una grilla fluda y media queries para controlar el diseo y su contenido al ser visualizado en distintos dispositivos
  • 54. Diseo Responsivo: Liquid & Responsive Liquid 1440px
  • 55. Diseo Responsivo: Liquid & Responsive Liquid 1024px
  • 56. Diseo Responsivo: Liquid & Responsive Liquid 768px Liquid 320px
  • 57. Diseo Responsivo: Liquid & Responsive Responsive 1440px
  • 58. Diseo Responsivo: Liquid & Responsive Responsive 1024px
  • 59. Diseo Responsivo: Liquid & Responsive Responsive 768px Responsive 320px
  • 60. Grilla Responsiva
  • 61. Grilla Responsiva
  • 62. Diseo Responsivo: Contenido
  • 63. Diseo Responsivo: Contenido 1440px 1024px 960px 768px 320px
  • 64. Diseo Responsivo: Imgenes
  • 65. Diseo Responsivo: Imgenes Desktop
  • 66. Diseo Responsivo: Imgenes Laptop
  • 67. Diseo Responsivo: Imgenes Tablet (landscape)
  • 68. Diseo Responsivo: Imgenes Tablet (portrait) Mobile
  • 69. Diseo Responsivo: Tipografa
  • 70. Diseo Responsivo: Tipografa (36px) (Desktop) (Mobile) (48px) (32px) (26px) (28px) (22px) (16px) (12px)
  • 71. Diseo Responsivo: Interaccin
  • 72. Diseo Responsivo: Interaccin
  • 73. Diseo Responsivo: Interaccin
  • 74. Diseo de 6Interaccin
  • 75. Diseo de Interaccin QU ES EL DISEO DE INTERACCIN? Es el modo de definir el comportamiento de nuestro producto respecto al usuario, hacindolo parte fundamental de las acciones en el proceso
  • 76. Diseo de Interaccin PARA QU SIRVE? Es necesario para determinar y desarrollar las interacciones de un espacio digital, dejando en claro cada paso o etapa presente en el flujo, creando as una mejor experiencia.
  • 77. Diseo de Interaccin: Esquemas QU ASPECTOS BSICOS DEBEMOS CONSIDERAR? Las tareas se le darn al usuario Sus acciones respecto a las tareas La respuesta del sistema a partir de la accin
  • 78. Diseo de Interaccin: Esquemas Supongamos que tenemos una campaa... USUARIO (FB o TW connect) PREGUNTA 1 (1 de 3 opciomes ) PREGUNTA 2 (1 de 3 opciomes ) PREGUNTA 3 (1 de 3 opciomes ) responder trivias Mensaje de felicitaciones ya ests participando y compartir automticamente en FB o TW
  • 79. Diseo de Interaccin: Diagrama de flujo QU ES UN DIAGRAMA DE FLUJO? Es un esquema que representa un proceso, mostrando el flujo de trabajo paso a paso. Se utiliza generalmente en programacin
  • 80. Diseo de Interaccin: Diagrama de flujo QUINES LOS UTILIZAN? Se utiliza generalmente en programacin, economa, procesos industriales y psicologa cognitiva
  • 81. Diseo de Interaccin: Diagrama de flujo Simbologa Terminal Proceso Base de Datos Punto de Decisin Lnea de flujo
  • 82. PARTICIPAR FB Connect TW Connect Permisos propios de la red seleccionada Acepta los permisos? NO S Formulario Datos bsicos Diseo de Interaccin: Diagrama de flujo Se guarda la info PARTICIPAR FB Connect TW Connect Permisos propios de la red seleccionada Acepta los permisos? NO S Formulario Datos bsicos Pregunta NX NO S Respuesta correcta? Mensaje fallaste Mensaje acertaste Siguiente / Aceptar Una vez contestadas las 3 preguntas Mensaje felicitaciones Mensaje felicitaciones
  • 83. Se guarda la info FB Connect TW Connect Permisos propios de la red seleccionada Acepta los permisos? NO S Formulario Datos bsicos Pregunta NX NO S Respuesta correcta? Diseo de Interaccin: Diagrama de flujo Se guarda la info PARTICIPAR FB Connect TW Connect Permisos propios de la red seleccionada Acepta los permisos? NO S Formulario Datos bsicos Pregunta NX NO S Respuesta correcta? Mensaje fallaste Mensaje acertaste Siguiente / Aceptar Una vez contestadas las 3 preguntas Mensaje felicitaciones Mensaje felicitaciones
  • 84. Se guarda la info Pregunta NX NO S Respuesta correcta? Mensaje fallaste Mensaje acertaste Siguiente / Aceptar Una vez contestadas las 3 preguntas Diseo de Interaccin: Diagrama de flujo Se guarda la info PARTICIPAR FB Connect TW Connect Permisos propios de la red seleccionada Acepta los permisos? NO S Formulario Datos bsicos Pregunta NX NO S Respuesta correcta? Mensaje fallaste Mensaje acertaste Siguiente / Aceptar Una vez contestadas las 3 preguntas Mensaje felicitaciones Mensaje felicitaciones Mensaje felicitaciones
  • 85. Diseo de Interaccin: Partituras de Interaccin QU ES UNA PARTITURA DE INTERACCIN? Es un lenguaje visual que permite graficar de forma prctica, precisa y amigable, un flujo detallado de interaccin
  • 86. Diseo de Interaccin: Partituras de Interaccin CUALES SON SUS BENEFICIOS? Es ideal para estructurar lo que ser la experiencia del usuario al navegar por el sitio, aplicacin o campaa, y todas las reas involucradas tendrn conocimiento de ello, para aportar y corregir
  • 87. Diseo de Interaccin: Partituras de Interaccin Se guarda la info PARTICIPAR FB Connect TW Connect Permisos propios de la red seleccionada Acepta los permisos? NO S Formulario Datos bsicos Pregunta NX NO S Respuesta correcta? Mensaje fallaste Mensaje acertaste Siguiente / Aceptar Una vez contestadas las 3 preguntas Mensaje felicitaciones USUARIO (FB o TW connect) responder trivias PREGUNTA 1 (1 de 3 opciomes ) PREGUNTA 2 (1 de 3 opciomes ) PREGUNTA 3 (1 de 3 opciomes ) Mensaje de felicitaciones ya ests participando y compartir automticamente en FB o TW Mensaje felicitaciones
  • 88. Diseo de Interaccin: Partituras de Interaccin Estructura de las partituras LANDING TRIVIA 1 TRIVIA Ingresar a la campaa CONTACTO DIRECTO Ingresar con FB Ingresar con TW Se rescatan los datos (nombre) Completar Formulario Enviar datos Se guardan los datos (BBDD) Participar Seleccionar una respuesta Verificar opcin seleccionada ! Respuesta incorrecta Respuesta correcta ACCIONES DEL USUARIO lnea de interaccin lnea de visibilidad PROCESO INTERNO
  • 89. Diseo de Interaccin: Partituras de Interaccin Estructura de las partituras TRIVIA 1 Participar ACCIONES DEL USUARIO lnea de interaccin CONTACTO Seleccionar una respuesta Verificar y guardar Verificar opcin seleccionada ! Respuesta incorrecta Respuesta correcta TRIVIA 2 Participar Seleccionar una respuesta Verificar opcin seleccionada ! Respuesta incorrecta Respuesta correcta TRIVIA 3 Participar Seleccionar una respuesta Verificar opcin seleccionada ! Respuesta incorrecta Respuesta correcta DIRECTO lnea de visibilidad PROCESO INTERNO
  • 90. Diseo de Interaccin: Partituras de Interaccin Estructura de las partituras TRIVIA 2 Participar ACCIONES DEL USUARIO lnea de interaccin Seleccionar una respuesta Verificar opcin seleccionada ! Respuesta incorrecta Respuesta correcta TRIVIA 3 Participar Seleccionar una respuesta Verificar opcin seleccionada ! Respuesta incorrecta Respuesta correcta Verificar puntaje y guardar info Mensaje Perdedor Mensaje Ganador Se comparte automticamente en FB o TW CONTACTO DIRECTO lnea de visibilidad PROCESO INTERNO
  • 91. Resumen Recordemos que en un proyecto: 1. El anlisis y contenido sern la base estratgica del corazn de nuestro servicio 2. La arquitectura de informacin permitir validar y organizar estos contenidos 3. Los wireframes modelarn la estructura visual y jerrquica del contenido 4. El diseo de interaccin definir el comportamiento del servicio y las acciones del usuario 5. El diseo de interfaz otorgar la capa visual emocional del producto 6. Desarrollo e ingeniera sern quienes materialicen todo el proceso anterior
  • 92. Exponentes Richard Saul Wurman Crea el trmino de Arquitecto de Informacin y lo define como la persona que organiza los patrones inherentes a la informacin, haciendo entendible lo complejo Louis Rosenfeld Peter Morville Aportan a la definicin y al contenido referente a la arquitectura de informacin Jesse James Garrett Crea el lenguaje visual para la estructuracin del contenido Jakob Nielsen Steve Krug Desarrollan el mbito de la usabilidad
  • 93. Referencias Sergio Nouvel: Lean UX Maximiliano Martin: Diseo con sentido de negocios Casos de estudio de Fantasy Interactive Wireframes Magazine (documentacin) UX Magazine (documentacin) Smashing Magazine (documentacin)
  • 94. Referencias Sitios responsive Una escala de tipografa web ms moderna Tipografa responsiva: lo bsico Generador de grillas responsivas Sistema de grillas responsivas Golden grid system (grillas responsivas) CSSWizardry (grillas responsivas)
  • 95. Referencias Diseo de Interaccin Partituras de Interaccin Recursos e Informacin Mapa de la experiencia del cliente Mapa del viaje del cliente The anatomy of an experience map
  • 96. ... gracias ! Sofa Savoy Anguita | Arquitecto de Informacin