PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Prototipado
Olga Carreras Montoto
Consultora en experiencia de usuario
Usable y accesible (España)
IDW-PRO-1
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Contacto
• Blog: http://olgacarreras.blogspot.com
• Web: http://www.usableyaccesible.com
• Twitter: @olgacarreras
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
• 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 la aplicación web
Arquitecto de información
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Planos
Maquetas
Sitio web final
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Planos Blueprint, diagramas de contenido o flujo o mapa web
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
http://www.nosolousabilidad.com/articulos/diagramacion.htm
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
http://www.jmcquarrie.co.uk/2007/08/09/documenting-the-design-of-a-web-application-part-one-using-garretts-visual-vocabulary-to-document-the-information-architecture-2/
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
http://www.sccc.premiumdw.com/itc200/interaction-design/
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Jesse James Garret “Vocabulario visual para describir arquitectura de información y diseño de interacción” http://www.jjg.net/ia/visvocab/spanish.html
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
http://www.boxesandarrows.com/view/yahoo_mail_simplicity_holds_up_over_time/
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
http://www.jjg.net/ia/visvocab
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
http://www.nosolousabilidad.com/articulos/diagramacion.htm
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Maquetas Prototipado de baja fidelidad y de alta fidelidad Sketching, wireframes, storyboard, prototipos funcionales
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Incorrecto Correcto
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Sketching Prototipos de baja fidelidad
http://stopdesign.com/archive/2003/06/02/design-process.html
http://www.developertutorials.com/tutorials/php/designing-and-coding-a-wordpress-theme-from-scratch-part-2-144
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Sketch Sitio real
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
http://www.billbuxton.com/
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Wireframes
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Storyboard Secuencia de wireframes
http://www.slideshare.net/nickf/wireframes-for-the-wicked
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Prototipos funcionales Prototipos de alta fidelidad
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
http://olgacarreras.blogspot.com.es/2011/07/arquitectura-de-informacion-fundamentos.html
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
1 • El equipo y el cliente se centran en el diseño de contenidos
e interacción y no en el diseño visual.
• El cliente ve y comprende cómo será la aplicación, mucho mejor que si se ofrece descrita en un documento.
• Evita malentendidos entre el proveedor y el cliente e incluso entre los propios miembros del equipo.
• Ayuda a especificar los requerimientos y a detectar inconsistencias o falta de funcionalidad.
• Es un complemento de gran valor en el análisis.
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
2 • El prototipo se modifica con facilidad y rapidez.
• Se evitan modificaciones posteriores mucho más costosas
cuando la aplicación ya se está implementando.
• Se reducen costes y tiempos.
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
3 • Permite realizar pruebas de usabilidad, como test con
usuarios, en etapas tempranas del proyecto.
• Se detectan y solucionan los problemas antes de comenzar su implementación.
• El resultado son aplicación web más fáciles de entender, de usar y que se ajustan mejor a las necesidades de los usuarios.
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Beneficios de prototipar una aplicación web: • Menor tiempo de
desarrollo posterior
• Mayor calidad del resultado final
• Mayor satisfacción del cliente y el usuario final
Tiempo/coste de realizar el prototipo
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Otras referencias de interés
• Artículo “Wireframes” de Olga Carreras: http://olgacarreras.blogspot.com.es/2007/02/wireframes.html
• Artículo “Prototipado” de Fundación Sidar: http://www.sidar.org/recur/desdi/traduc/es/visitable/maner/Prototipado.htm
• Blog “Wireframes” http://wireframes.linowski.ca/
• Glosario de usabilidad y accesibilidad http://www.usableyaccesible.com/recurso_glosario.html
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Otras referencias de interés
• Presentación “Wireframes for the witcked” http://www.slideshare.net/nickf/wireframes-for-the-wicked
• Presentación “Importance of Wireframes in Web Design” http://www.slideshare.net/hiteshmehta/importance-of-wireframe-in-web-design
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
• Sencillez y claridad
• Hazlo en blanco y negro
• Representa los tamaños y proporciones de los bloques de contenido
• Ten en cuenta las pautas de accesibilidad y usabilidad
• Y sobre todo, diseña para tus usuarios
Consejos para realizar un buen prototipo
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Resumen
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Baja fidelidad
Alta fidelidad
Sketch
Wireframes
Prototipo funcional
Planos Blueprint, diagramas de contenido o flujo, o mapa web
Maquetas
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
http://idesweb.es/
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
• Planos: – Diapositiva 7: http://www.nosolousabilidad.com/articulos/diagramacion.htm
– Diapositiva 8: http://www.jmcquarrie.co.uk/2007/08/09/documenting-the-design-of-a-web-application-part-one-using-garretts-visual-vocabulary-to-document-the-information-architecture-2/
– Diapositiva 9: http://www.sccc.premiumdw.com/itc200/interaction-design/
– Diapositiva 11: http://www.boxesandarrows.com/view/yahoo_mail_simplicity_holds_up_over_time/
– Diapositiva 12: http://www.jjg.net/ia/visvocab
• Maquetas: – Diapositiva 16:
• http://www.developertutorials.com/tutorials/php/designing-and-coding-a-wordpress-theme-from-scratch-part-2-144
• http://stopdesign.com/archive/2003/06/02/design-process.html
– Diapositiva 21: http://www.slideshare.net/nickf/wireframes-for-the-wicked
Créditos de imágenes y fotografías