Documentos de UX

2,803 views

Published on

Charla: Documentos de UX, los entregables. En el Día Mundial de la Usabilidad. Panamá, 13 de nov., 2008.

Published in: Design, Art & Photos, Technology

Documentos de UX

  1. 1. Documentos de UX “Los Entregables” Por: Elsa Canto W.
  2. 2. Temas • Documentos de UX ¿Para qué sirven? • Tipos de Entregables • Las Audiencias • “Wireframes” ¿cómo documentarlos?
  3. 3. Documentos UX ¿Cuál es el objetivo? • Que faciliten la comunicación. • Que se pueda comprender el por qué de las decisiones y sus implicaciones. • Que puedan mostrar el progreso y que todo quede documentado.
  4. 4. Tipos de Entregables “The Artifacts” Resultado de nuestro proceso de diseño, el cual es utilizado por las diferentes audiencias Otros: Personas, Content inventories, Competitive analysis, Prototypes, Sketches.
  5. 5. Audiencias Cualquiera que utilice los entregables que producen los arquitectos de información
  6. 6. Audiencias y “artifacts”
  7. 7. Wireframes • Representación gráfica de la ubicación del contenido y prioridades • Forma de ilustrar funciones y comportamientos • Responde a ¿Qué veran las personas en esta página?
  8. 8. Wireframes ¿Para que sirven? • Mayor comprensión del proyecto por las partes involucradas. • Mejorar el flujo “work-flow” del proyecto • Promover la colaboración entre el Cliente y el Equipo. • Ayudar a Diseñadores y Desarrolladores.
  9. 9. Wireframes “sketch”
  10. 10. Wireframes “Low-fidelity”
  11. 11. Wireframes “High-fidelity”
  12. 12. Wireframes “Annotated”
  13. 13. Wireframes Algunas preguntas antes de crear wireframes • Propósito: ¿Definir requerimientos o capturar desiciones de diseño? • ¿Que nivel de fidelidad es más apropiado? • ¿Qué nivel de anotaciones debe tener este documento? • ¿Qué formato utilizará para presentar los wireframes? • ¿Qué tanto mantenimiento requeriran? • ¿Son necesarios los wireframes en esta etapa del proyecto?
  14. 14. Wireframes Retos de los wireframes • Audiencia. ¿A quién van dirigidos? • Mantenimiento. Versiones y solicitud de cambios. • Comportamientos complejos de algunas páginas. • Contenido y Data.
  15. 15. Wireframes Algunos elementos utilizados al documentar “markers” 1.0 1.0 Sticky Notes 1.0 1.0 1.0 1.0 Tool tip goes here lorem ipsum dolor sit amet nonummy consectateur A 1 1.1.1 Note box 1.0
  16. 16. Wireframes Utilización de un “marker” al documentar
  17. 17. Herramientas Adobe In Design Adobe Illustrator OmniGraffle Adobe Fireworks Adobe Photoshop
  18. 18. Recomendaciones al crear documentos de UX • Integre a los consumidores en la preparación de la documentación. • Listar, dimensionar y definir las prioridades de la información. • Incluya formato, contexto a los documentos. • Establezca un plan de mantenimiento antes de comenzar. • Los documentos deben hacer 1 ó 2 cosas bien. • Antes de presentarlos, defina los puntos a hablar y las preguntas que tenga. • Establezca un plan de colaboración. • No tenga todo el control. Permita que otras personas lo critiquen.
  19. 19. Gracias EightShapes: UX Deliverables Workshop 2008 August 8, Washington, DC EightShapes: Nathan Curtis & Dan Brown “Audiences & Artifacts” IA Summit 2008, Miami, Fl BootStudio: Jorge Arango Boxes & Arrows: http://www.boxesandarrows.com Information Architecture Institute: http://www.iainstitute.org User Pathways: The what, when and why of wireframes http://www.userpathways.com

×