Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia
-
Upload
herlency-munoz-garcia -
Category
Technology
-
view
691 -
download
0
Transcript of Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia
![Page 1: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/1.jpg)
Wireframes & Prototipos¿Solo una cuestión de organización?
20 de noviembre de 2015 Medellín Colombia
![Page 2: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/2.jpg)
Herlency Muñoz García@herlency
• Analista Desarrolladora• Diseñadora Gráfica
• Consultora en Experiencia de Usuario• Líder del área de Diseño Gráfico de Ceiba Software
![Page 3: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/3.jpg)
¿Quién usa tus aplicaciones?
El inicio
![Page 4: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/4.jpg)
“Experiencias de usuario plenas y satisfactorias”
Objetivo
Experiencia de Usuario, Principios y Métodos (Yusef Hassan Montero)
![Page 5: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/5.jpg)
Diseño Centrado en el Usuario
Wireframes y Prototipos
Planeación Investigación
Diseño Prototipado
Evaluación Implementación Monitorización
![Page 6: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/6.jpg)
Diseño Centrado en el Usuario
Wireframes y Prototipos
Planeación Investigación
Diseño Prototipo Evaluación Implementación Monitorización
Necesidades, motivaciones, características, hábitos, modelo mental, actividades…Personas objetivo. Análisis competitivo, productos similares con audiencias similares.
![Page 7: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/7.jpg)
Diseño Centrado en el Usuario
Wireframes y Prototipos
Planeación Investigación
Diseño Prototipado
Evaluación Implementación Monitorización
Decisiones de diseño a partir de lo general arquitectura de información y diseño de interacción. Dimensiones más específicas. Diseño gráfico en detalle y micro-interaccionesDecisiones documentadas con objetivos de evaluación.
![Page 8: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/8.jpg)
Diseño Centrado en el Usuario
Wireframes y Prototipos
Planeación Investigación
Diseño Prototipado Evaluación Implementación Monitorización
Las decisiones se ponen a prueba. Métodos cualitativos y/o cuantitativos
![Page 9: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/9.jpg)
Diseño Centrado en el Usuario
Wireframes y Prototipos
Planeación Investigación
Diseño Prototipado Evaluación Implementación Monitorización
Puesta en producción. Producto con calidad
![Page 10: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/10.jpg)
Diseño Centrado en el Usuario
Wireframes y Prototipos
Planeación Investigación
Diseño Prototipado Evaluación Implementación Monitorización
Se estudia el uso que hacen los usuarios del producto, con el fin de identificar oportunidades.
![Page 11: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/11.jpg)
Diseño Centrado en el Usuario
Wireframes y Prototipos
Planeación Investigación
Diseño Prototipado
Evaluación Implementación Monitorización
![Page 12: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/12.jpg)
Wireframes y Prototipos
Wire
fram
es
Prot
otip
os
![Page 13: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/13.jpg)
Wireframes y Prototipos
Arquitecto de información
• Identifica los objetivos del proyecto
• Identifica las necesidades de los usuarios
• Especifica las funcionalidades y requerimientos de la aplicación web
• Define y diseña los sistemas de navegación, organización, etiquetado y búsqueda
• PrototipaJesse James Garrett
![Page 14: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/14.jpg)
Por dónde empezar
![Page 15: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/15.jpg)
¿Protipar?
1. Equipo centrado en contenido y diseño de interacción.
2. Complemento valioso para aterrizar ideas, hablar el mismo idioma.
3. Es mejor que tener un documento.
4. Modificación rápida, menos costosa.
5. Permite validación temprana, pruebas con usuarios.
Wireframes y Prototipos
http://www.sidar.org/recur/desdi/traduc/es/visitable/maner/Prototipado.htm
![Page 16: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/16.jpg)
Planos / Diagramas
Los planos, son diagramas de organización y funcionamiento, que se suelen denominar blueprint, diagramas de contenido o flujo, o mapa web.
“A la hora de realizar la diagramación de una aplicación web lo más importante es que sea
comprensible y refleje con claridad la estructura, el flujo de navegación y la relación entre los
elementos.”Olga Carreras
http://olgacarreras.blogspot.com.co/
Wireframes y Prototipos
![Page 17: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/17.jpg)
Wireframes y Prototipos
Planos / Diagramas
Definir Vocabulario visual
http://www.jjg.net/ia/visvocab/spanish.html
horizontal gluedotis attached to the end of this arrow
vertical gluedotis attached to the end of this arrow
Jesse James Garrett
![Page 18: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/18.jpg)
Wireframes y Prototipos
Planos / Diagramas
Definir Vocabulario visual
http://www.nosolousabilidad.com/articulos/diagramacion.htm
Ronda León
![Page 19: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/19.jpg)
Maquetas / Diagramas de presentación (Baja Fidelidad)
Wireframes y Prototipos
Prototipos de baja fidelidadOlga Carreras
Wireframe
![Page 20: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/20.jpg)
Wireframes y Prototiposhttps://paulvb69.wordpress.com/2009/10/20/hotelclub-%E2%80%93-working-with-wire-frames/
Wire
fram
es
![Page 21: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/21.jpg)
Maquetas / Diagramas de presentación
Wireframes y Prototipos
• StoryBoard• StoryBoard Navegacional• Wireflows• Thumbnail Sketches
Olga Carreras
![Page 22: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/22.jpg)
Maquetas / Diagramas de presentación (Alta Fidelidad)
Wireframes y Prototipos
Prototipo de Alta Fidelidad (también llamados maqueta, mockUp o prototipo funcional), con los que se representan aspectos más precisos. Sirven, por ejemplo, para detallar
el proceso interactivo global de una o varias tareas concretas. Son prototipos o maquetas dinámicas,
normalmente en (X)HTML, que simulan o tienen implementadas partes del sistema final a desarrollar.
Olga Carreras
![Page 23: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/23.jpg)
Prototipos
Locomote—next level paper prototyping.https://vimeo.com/44564507
TeamArasunu_Healty Checkhttps://vimeo.com/145164911
![Page 24: Wireframes & Prototipos ¿Sólo una cuestión de organización? / Día de la Usabilidad Colombia](https://reader031.fdocuments.es/reader031/viewer/2022022122/589beef51a28ab40348b4e3b/html5/thumbnails/24.jpg)
Herlency Muñoz GarcíaConsultora en Experiencia de Usuario
Wireframes y Prototipos
@herlency