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