wireframes & prototipos ¿sólo una cuestión de organización? / día de la usabilidad colombia

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


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 Prototipado Evaluación Implementación Monitorización

Las decisiones se ponen a prueba. Métodos cualitativos y/o cuantitativos





Puesta en producción. Producto con calidad





Se estudia el uso que hacen los usuarios del producto, con el fin de identificar oportunidades.




Diseño Prototipado



Wire

fram

es

Prot

otip

os


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.


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/



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


Planos / Diagramas

Definir Vocabulario visual

http://www.nosolousabilidad.com/articulos/diagramacion.htm

Ronda León

Maquetas / Diagramas de presentación (Baja Fidelidad)


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


• StoryBoard• StoryBoard Navegacional• Wireflows• Thumbnail Sketches

Olga Carreras

Maquetas / Diagramas de presentación (Alta Fidelidad)


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

https://vimeo.com/44564507

https://vimeo.com/145164911

Herlency Muñoz GarcíaConsultora en Experiencia de Usuario


@herlency

wireframes & prototipos ¿sólo una cuestión de organización? / día de la usabilidad colombia

Technology