2. 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
4. “Experiencias de usuario
plenas y satisfactorias”
Objetivo
Experiencia de Usuario, Principios y Métodos (Yusef Hassan Montero)
5. Diseño Centrado en el Usuario
Wireframes y Prototipos
Planeación
Investigación
Diseño
Prototipado
Evaluación Implementación Monitorización
6. 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.
7. 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-interacciones
Decisiones documentadas con objetivos de evaluación.
8. 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
9. 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
10. 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.
11. Diseño Centrado en el Usuario
Wireframes y Prototipos
Planeación
Investigación
Diseño
Prototipado
Evaluación Implementación Monitorización
13. 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
• Prototipa
Jesse James Garrett
15. ¿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
16. 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
17. Wireframes y Prototipos
Planos / Diagramas
Definir Vocabulario visual
http://www.jjg.net/ia/visvocab/spanish.html
horizontal gluedot
is attached to the end of this arrow
vertical gluedot
is attached to the end of this arrow
Jesse James Garrett
21. Maquetas / Diagramas de presentación
Wireframes y Prototipos
• StoryBoard
• StoryBoard Navegacional
• Wireflows
• Thumbnail Sketches
Olga Carreras
22. 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