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/

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