Taller de Diseño UX & Usabilidad Sesión Nº1 Desde la Estrategia a la Arquitectura de Información

6,392 views

Published on

Taller online de Diseño de Experiencia de Usuarios y Usabilidad realizado en conjunto con AyerViernes U y Mejorando.la

Published in: Education
4 Comments
38 Likes
Statistics
Notes
No Downloads
Views
Total views
6,392
On SlideShare
0
From Embeds
0
Number of Embeds
1,472
Actions
Shares
0
Downloads
32
Comments
4
Likes
38
Embeds 0
No embeds

No notes for slide

Taller de Diseño UX & Usabilidad Sesión Nº1 Desde la Estrategia a la Arquitectura de Información

  1. 1. Taller de UX & Usabilidad Sesión Nº1/3 Desde la Estrategia a la Arquitectura de la Información ! ! ! ! Mejorando.la Sábado 16 de noviembre de 2013
  2. 2. ¿Quién soy? @jorgebarahona @ayerviernes @clerkhotel www.facebook.com/jorgebarahona Diseñador de Experiencia de Usuarios Emprendedor serial ayerviernes.com clerkhotel.com monterilla.cl ead.pucv.cl jbarahona.com jbarahona@ayerviernes.com
  3. 3. Es inventar el futuro ¿Qué es Diseñar la Experiencia de los usuarios? Es construir un conocimiento
  4. 4. Diseñar Experiencica Es inventar el futuro a través de Arquitectura de la Diseño los verbos, relatos quede Interacción Información construyen aprecio y compromiso Diseño de Interfaces Diseño de Front End
  5. 5. Sesión Nº1 Metodología UX Brief Estrategia Propuesta Comercial Benchmark 1 Usabilidad & Comportamiento de las Personas Etnografía Personas & Escenarios Indexación de Contenidos Arquitectura de la Información Card Sorting Mapas de Navegación
  6. 6. Estrategia
  7. 7. Estrategia •Brief •Contrabrief •Propuesta Comercial •Debrief •Benchmark •Brief final Estrategia
  8. 8. Brief •¿Quiénes? •¿Qué? •¿Cuál es el problema? •Presupuesto •¿Por qué? •¿Para qué? •¿Para cuándo? •¿Con quiénes? Estrategia https://www.dropbox.com/s/94ll2b8h7c5djre/BriefAyerViernes2013.pdf
  9. 9. Un buen Brief permite •Diseñar una Propuesta •Diseñar una Estrategia •Una buena Estrategia permite determinar •Metas y Objetivos •Tácticas y plazos •Hacer un balance (de-brief) Estrategia
  10. 10. Propuesta Comercial •Identificador claro •Responsable (ambas empresas) •Contexto (Brief) •Metodología o Visión •Propuesta •Objetivos, tácticas y entregables •Tiempos y Precios •Exclusiones Estrategia Merlin (OSX) projectwizards.net OmniPlan (OSX-iPad) omnigroup.com/omniplan/ Team Gantt (Online) https://teamgantt.com Gantt Project (Linux) http://www.ganttproject.biz
  11. 11. Benchmark •Comparativo •Cualitativo •Competidores: buenas prácticas… o malas :) •Normalmente se hace entre 3 a 5 consultores •Cuantitativo •Consultores construyen parámetros específicos que genere indicadores desde preguntas específicas • Permite generar metas del proyecto Estrategia
  12. 12. Benchmark Estrategia https://www.dropbox.com/s/3oyytodnf0y0j3k/ UXa_International_eBanking_Benchmark_Study_2012.pdf
  13. 13. Estrategia UX •Entrega los recursos necesarios para crear un mapa futuro •Baja las tácticas con objetivos, tiempos, costos y ejecutores para lograr las metas planteadas en la Estrategia •Diseña una Gantt acorde a los escenarios a enfrentar •Avanza sistemáticamente y no por reacción. •Involucra a toda la compañía. Deja de ser una idea de Gerencia para transformarse en una idea de todos •Debe necesariamente involucrar a la alta gerencia Estrategia
  14. 14. ¿Cómo hacer Estrategia UX? Diseño del Servicio Estrategia Service Design Thinking, Marc Stickdorn & Jakob Schneider
  15. 15. PRE-SERVICIO Expectativas Estrategia SERVICIO POST-SERVICIO Experiencias Satisfacción Service Design Thinking, Marc Stickdorn & Jakob Schneider
  16. 16. Sin Estrategia es difícil Diseñar un portal
  17. 17. Investigación
  18. 18. Usabilidad & Comportamiento de las Personas •Usabilidad •Pone a prueba los sistemas •Test Heurísticos •Paseos cognitivos •Comportamiento de las Personas •Personas & escenarios •Etnografía •Conversaciones guiadas Investigación
  19. 19. Personas & Escenarios •Personas = Arquetipos o personajes •Permite ponernos en el lugar de los usuarios finales para los que diseñamos •Observa escenarios reales de uso •Permite tener la descripción de los usuarios para hacer test, etnografía y conversaciones guiadas http://www.amazon.com/ dp/0672316498 •Personifica lo que hacemos www.cooper.com Investigación
  20. 20. Personas •Se describe detalladamente •Pueden ser varios •Hay primarios y secundarios •Usuario v/s personaje •Restringe el objetivo de usuarios •El personaje debe pertenecer a la realidad •Saber a quién le diseñamos (y a quién no) •Los diferenciamos por sus metas Investigación
  21. 21. Tipos de personas •Primario •necesitan interacciones exclusivas •sumar más de 3 puede inducir a replantear la persona •Secundario •puede usar interacciones ajenas •Diseñar para los primarios Investigación
  22. 22. Escenario Investigación
  23. 23. Personas & Escenarios •Busca personificar el diseño en situaciones reales de uso •Conduce el futuro del proyecto. define •Estudios •tests •Wireframes •Interfaces •Front End Investigación http://www.amazon.com/dp/ 0470084111
  24. 24. Etnografía •Observación y participación con grupos específicos de usuarios •Buscamos entender las acciones y conversaciones que tienen cuando usan un determinado servicio •Usamos Notas de Campo para registrar la observación •Notas, Fotos, vídeos y croquis Investigación
  25. 25. Thoughtless Acts?: Observations on Intuitive Design Jane Fulton Suri (IDEO) Investigación
  26. 26. Conversaciones guiadas Investigación
  27. 27. Arquitectura de la Información
  28. 28. Elección 2000 USA Ai
  29. 29. ¿Qué es la Ai? Saul Wurman (1962) Organiza patrones inherentes en los datos, haciendo claro lo complejo. Edward Tufte El diseño de la presentación de la información para facilitar el entendimiento. Ai
  30. 30. ¿Qué es la Ai? Peter Morville & Louis Rosenfeld ! Clarifica la misión y visión del sitio, equilibrando las necesidades del patrocinador y las necesidades de la audiencia ! Determina el contenido y funcionalidad que el sitio va a tener ! Especifica cómo los usuarios van a encontrar la informacion al definir su organización, navegación, etiquetado y sistemas de búsqueda Ai
  31. 31. Herramientas de Ai •Indexación de Contenidos •Taxonomía •Card Sorting •Mapas de Navegación Ai
  32. 32. Indexación de Contenidos •Listar con jerarquías los contenidos •Sin filtros •Usar estructura de indexación científica •Hacer varios •Es la primera aproximación a una organización de contenidos para un sitio servicio digital Ai 1.- Xxxxxxxxx 1.1.- Xxxxx xxxxx 1.2.- Xxxx xxx xx 1.2.1.- Xxxxxx 1.3.- Xxxxx 2.- Xxxxxxx xxxxx 3.- Xxxxxx 3.1.- Xxxxxx xxxx 3.2.- Xxxxxxxxxx 3.2.1.- Xxxxxxx 3.2.2.- Xxxxxxx 3.2.3.- Xxxxxxx 3.3.- Xxxxxxxxx 4.- Xxxxxxxx
  33. 33. www.learnchile.cl Ai
  34. 34. Taxonomía •Jerarquía de conceptos •Orden de los contenidos •Genera una regla de cómo se organizarán y encontrarán los contenidos Ai
  35. 35. Card sorting •Organización de menús por tarjetas •Participan los arquetipos •Todos tenemos una opinión de cómo organizar el contenido •Hay coincidencias críticas que permiten estructurarlo sobre seguro y proyectar una buena jerarquía
  36. 36. Herramientas •http://www.optimalworkshop.com/optimalsort.htm •http://uxpunk.com/websort/ •Lapiz & papel :) Ai
  37. 37. Mapa de Navegación •Es la culminación del proceso de Ai •La materialización de la organización de contenidos •Permite involucrar a los clientes y TI •Visualiza las jerarquías, niveles y pertenencias •Vislumbra elementos Ai
  38. 38. ETAPA 1 (Marzo 2013) Maquetas navegables Librería Contacto (Normal o Logeado) Backoffice AD Fichas publicadas MyAD BackEnd Cliente Crear cuenta Verificación Info Productos Exportación de fichas Ingresar Productos Edición Pares relacionases con AD Cobro Track Tageo de fotos Catálogo Geolocaliza Publicación Ai Teaser API y Conexión Catálogo Embebible
  39. 39. Precios Temporadas Rack Sobreprecio Calculadora No aparecen: • Precio • Descuento No aparecen: • Precio • Descuento Cambio de Tipo de Hab Aplicar Tarifa de Temporada Aplicar descuento libre diario Aplicar Total (plano) SE APLANA LA TARIFA Aparecen: • Precio • Descuento • Precio Final Se reinicia Resumen Ai Columna Tipo de Habitación Aparece: Tarifa Promedio
  40. 40. Lenguaje de Mapas en Ai •Lenguaje de Jesse James Garret (http://www.jjg.net/ia/visvocab/spanish.html) Ai
  41. 41. Sesión Nº2 Mapas de Clases Diseño de Interacción Partituras de Interacción Wireframes 2 Diseño tipográfico y cromático Diseño de Interfaces Dirección de Arte Fotográfico Diseño de Interfaces de Usuarios (UI)
  42. 42. ¿Preguntas, dudas, ideas, ejemplos, etc.? ¡Ahora!

×