View
686
Download
0
Category
Preview:
Citation preview
Wireframes & Prototipos¿Solo una cuestión de organización?
20 de noviembre de 2015 Medellín Colombia
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
¿Quién usa tus aplicaciones?
El inicio
“Experiencias de usuario plenas y satisfactorias”
Objetivo
Experiencia de Usuario, Principios y Métodos (Yusef Hassan Montero)
Diseño Centrado en el Usuario
Wireframes y Prototipos
Planeación Investigación
Diseño Prototipado
Evaluación Implementación Monitorización
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.
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.
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
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
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.
Diseño Centrado en el Usuario
Wireframes y Prototipos
Planeación Investigación
Diseño Prototipado
Evaluación Implementación Monitorización
Wireframes y Prototipos
Wire
fram
es
Prot
otip
os
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
Por dónde empezar
¿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
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
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
Wireframes y Prototipos
Planos / Diagramas
Definir Vocabulario visual
http://www.nosolousabilidad.com/articulos/diagramacion.htm
Ronda León
Maquetas / Diagramas de presentación (Baja Fidelidad)
Wireframes y Prototipos
Prototipos de baja fidelidadOlga Carreras
Wireframe
Wireframes y Prototiposhttps://paulvb69.wordpress.com/2009/10/20/hotelclub-%E2%80%93-working-with-wire-frames/
Wire
fram
es
Maquetas / Diagramas de presentación
Wireframes y Prototipos
• StoryBoard• StoryBoard Navegacional• Wireflows• Thumbnail Sketches
Olga Carreras
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
Prototipos
Locomote—next level paper prototyping.https://vimeo.com/44564507
TeamArasunu_Healty Checkhttps://vimeo.com/145164911
Herlency Muñoz GarcíaConsultora en Experiencia de Usuario
Wireframes y Prototipos
@herlency
Recommended