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

1. Documentos de UX
“Los Entregables”
Por: Elsa Canto W.

2. Temas
• Documentos de UX ¿Para qué sirven?
• Tipos de Entregables
• Las Audiencias
• “Wireframes” ¿cómo documentarlos?

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. 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. Audiencias
Cualquiera que utilice los entregables
que producen los arquitectos de información

6. Audiencias y “artifacts”

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. 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. Wireframes
“sketch”

10. Wireframes
“Low-fidelity”

11. Wireframes
“High-fidelity”

12. Wireframes
“Annotated”

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. 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. 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. Wireframes
Utilización de un “marker” al documentar

17. Herramientas
Adobe In Design
Adobe Illustrator OmniGraffle
Adobe Fireworks
Adobe Photoshop

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. 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