documentos de ux
Post on 21-Oct-2014
3.273 views
DESCRIPTION
Charla: Documentos de UX, los entregables. En el Día Mundial de la Usabilidad. Panamá, 13 de nov., 2008.TRANSCRIPT
![Page 1: Documentos de UX](https://reader034.vdocuments.mx/reader034/viewer/2022051411/54456adbafaf9f31088b456f/html5/thumbnails/1.jpg)
Documentos de UX“Los Entregables”
Por: Elsa Canto W.
![Page 2: Documentos de UX](https://reader034.vdocuments.mx/reader034/viewer/2022051411/54456adbafaf9f31088b456f/html5/thumbnails/2.jpg)
Temas
• Documentos de UX ¿Para qué sirven?
• Tipos de Entregables
• Las Audiencias
• “Wireframes” ¿cómo documentarlos?
![Page 3: Documentos de UX](https://reader034.vdocuments.mx/reader034/viewer/2022051411/54456adbafaf9f31088b456f/html5/thumbnails/3.jpg)
Documentos UX
• 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.
¿Cuál es el objetivo?
![Page 4: Documentos de UX](https://reader034.vdocuments.mx/reader034/viewer/2022051411/54456adbafaf9f31088b456f/html5/thumbnails/4.jpg)
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.
![Page 5: Documentos de UX](https://reader034.vdocuments.mx/reader034/viewer/2022051411/54456adbafaf9f31088b456f/html5/thumbnails/5.jpg)
Audiencias
Cualquiera que utilice los entregables que producen los arquitectos de información
![Page 6: Documentos de UX](https://reader034.vdocuments.mx/reader034/viewer/2022051411/54456adbafaf9f31088b456f/html5/thumbnails/6.jpg)
Audiencias y “artifacts”
![Page 7: Documentos de UX](https://reader034.vdocuments.mx/reader034/viewer/2022051411/54456adbafaf9f31088b456f/html5/thumbnails/7.jpg)
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?
![Page 8: Documentos de UX](https://reader034.vdocuments.mx/reader034/viewer/2022051411/54456adbafaf9f31088b456f/html5/thumbnails/8.jpg)
• 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.
Wireframes¿Para que sirven?
![Page 9: Documentos de UX](https://reader034.vdocuments.mx/reader034/viewer/2022051411/54456adbafaf9f31088b456f/html5/thumbnails/9.jpg)
Wireframes“sketch”
![Page 10: Documentos de UX](https://reader034.vdocuments.mx/reader034/viewer/2022051411/54456adbafaf9f31088b456f/html5/thumbnails/10.jpg)
Wireframes“Low-fidelity”
![Page 11: Documentos de UX](https://reader034.vdocuments.mx/reader034/viewer/2022051411/54456adbafaf9f31088b456f/html5/thumbnails/11.jpg)
Wireframes“High-fidelity”
![Page 12: Documentos de UX](https://reader034.vdocuments.mx/reader034/viewer/2022051411/54456adbafaf9f31088b456f/html5/thumbnails/12.jpg)
Wireframes“Annotated”
![Page 13: Documentos de UX](https://reader034.vdocuments.mx/reader034/viewer/2022051411/54456adbafaf9f31088b456f/html5/thumbnails/13.jpg)
• 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?
WireframesAlgunas preguntas antes de crear wireframes
![Page 14: Documentos de UX](https://reader034.vdocuments.mx/reader034/viewer/2022051411/54456adbafaf9f31088b456f/html5/thumbnails/14.jpg)
Wireframes
• Audiencia. ¿A quién van dirigidos?
• Mantenimiento. Versiones y solicitud de cambios.
• Comportamientos complejos de algunas páginas.
• Contenido y Data.
Retos de los wireframes
![Page 15: Documentos de UX](https://reader034.vdocuments.mx/reader034/viewer/2022051411/54456adbafaf9f31088b456f/html5/thumbnails/15.jpg)
WireframesAlgunos elementos utilizados al documentar
“markers”
Sticky
Notes
Tool tip goes here
lorem ipsum dolor sit
amet nonummy
consectateur
1.1.1
1.0
Note box
1.0
A 1
1.01.0 1.0
1.0 1.0
![Page 16: Documentos de UX](https://reader034.vdocuments.mx/reader034/viewer/2022051411/54456adbafaf9f31088b456f/html5/thumbnails/16.jpg)
WireframesUtilización de un “marker” al documentar
![Page 17: Documentos de UX](https://reader034.vdocuments.mx/reader034/viewer/2022051411/54456adbafaf9f31088b456f/html5/thumbnails/17.jpg)
Herramientas
Adobe Illustrator
Adobe Photoshop
OmniGraffle
Adobe Fireworks
Adobe In Design
![Page 18: Documentos de UX](https://reader034.vdocuments.mx/reader034/viewer/2022051411/54456adbafaf9f31088b456f/html5/thumbnails/18.jpg)
Recomendacionesal 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.
![Page 19: Documentos de UX](https://reader034.vdocuments.mx/reader034/viewer/2022051411/54456adbafaf9f31088b456f/html5/thumbnails/19.jpg)
Gracias
EightShapes: Nathan Curtis & Dan Brown“Audiences & Artifacts” IA Summit 2008, Miami, Fl
Boxes & Arrows: http://www.boxesandarrows.com
Information Architecture Institute: http://www.iainstitute.org
User Pathways: The what, when and why of wireframeshttp://www.userpathways.com
EightShapes: UX Deliverables Workshop 2008August 8, Washington, DC
BootStudio: Jorge Arango