Introducción al desarrollo web

http://idesweb.es/
PROTOTIPADO

Prototipado
Olga Carreras Montoto
Consultora en experiencia de usuario
Usable y accesible (España)

IDW-PRO-1
 Introducción al desarrollo web
http://idesweb.es/

Contacto
PROTOTIPADO

• Blog: http://olgacarreras.blogspot.com
• Web: http://www.usableyaccesible.com
• Twitter: @olgacarreras
 Introducción al desarrollo web
http://idesweb.es/

Arquitecto de información
PROTOTIPADO

• 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

 Introducción al desarrollo web
http://idesweb.es/
PROTOTIPADO
 Introducción al desarrollo web
http://idesweb.es/

Planos Sitio web final

PROTOTIPADO

Maquetas
 Introducción al desarrollo web
http://idesweb.es/
PROTOTIPADO

Planos
Blueprint, diagramas de contenido o flujo o mapa web
 Introducción al desarrollo web
http://idesweb.es/
PROTOTIPADO

http://www.nosolousabilidad.com/articulos/diagramacion.htm
 Introducción al desarrollo web
http://idesweb.es/
PROTOTIPADO

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/
 Introducción al desarrollo web
http://idesweb.es/
PROTOTIPADO

http://www.sccc.premiumdw.com/itc200/interaction-design/
 Introducción al desarrollo web
http://idesweb.es/
PROTOTIPADO

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
 Introducción al desarrollo web
http://idesweb.es/
PROTOTIPADO

http://www.boxesandarrows.com/view/yahoo_mail_simplicity_holds_up_over_time/
 Introducción al desarrollo web
http://idesweb.es/
PROTOTIPADO

http://www.jjg.net/ia/visvocab
 Introducción al desarrollo web
http://idesweb.es/
PROTOTIPADO

http://www.nosolousabilidad.com/articulos/diagramacion.htm
 Introducción al desarrollo web
http://idesweb.es/

Maquetas
PROTOTIPADO

Prototipado de baja fidelidad y de alta fidelidad

Sketching, wireframes, storyboard, prototipos funcionales
 Introducción al desarrollo web
http://idesweb.es/
PROTOTIPADO

Incorrecto Correcto
 Introducción al desarrollo web
http://idesweb.es/

Sketching
PROTOTIPADO

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
 Introducción al desarrollo web
http://idesweb.es/

Sketch Sitio real

PROTOTIPADO
 Introducción al desarrollo web
http://idesweb.es/
PROTOTIPADO

http://www.billbuxton.com/
 Introducción al desarrollo web
http://idesweb.es/

Wireframes
PROTOTIPADO
 Introducción al desarrollo web
http://idesweb.es/
PROTOTIPADO
 Introducción al desarrollo web
http://idesweb.es/

Storyboard
PROTOTIPADO

Secuencia de wireframes

http://www.slideshare.net/nickf/wireframes-for-the-wicked
 Introducción al desarrollo web
http://idesweb.es/

Prototipos funcionales
PROTOTIPADO

Prototipos de alta fidelidad

 Introducción al desarrollo web
http://idesweb.es/
PROTOTIPADO

http://olgacarreras.blogspot.com.es/2011/07/arquitectura-de-informacion-fundamentos.html
 Introducción al desarrollo web
http://idesweb.es/
PROTOTIPADO
 Introducción al desarrollo web
http://idesweb.es/

• El equipo y el cliente se centran en el diseño de contenidos

e interacción y no en el diseño visual.

1
PROTOTIPADO

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

 Introducción al desarrollo web
http://idesweb.es/

• El prototipo se modifica con facilidad y rapidez.

2
PROTOTIPADO

• Se evitan modificaciones posteriores mucho más costosas

cuando la aplicación ya se está implementando.

• Se reducen costes y tiempos.

 Introducción al desarrollo web
http://idesweb.es/

• Permite realizar pruebas de usabilidad, como test con

usuarios, en etapas tempranas del proyecto.

3
PROTOTIPADO

• 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.
 Introducción al desarrollo web
http://idesweb.es/
PROTOTIPADO

Beneficios de prototipar
una aplicación web:

• Menor tiempo de
Tiempo/coste de realizar desarrollo posterior
el prototipo
• Mayor calidad del
resultado final

• Mayor satisfacción del

cliente y el usuario final
 Introducción al desarrollo web
http://idesweb.es/

Otras referencias de interés

PROTOTIPADO

• 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
 Introducción al desarrollo web
http://idesweb.es/

Otras referencias de interés

PROTOTIPADO

• 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
 Introducción al desarrollo web
http://idesweb.es/

Consejos para realizar un buen prototipo

PROTOTIPADO

• 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

 Introducción al desarrollo web
http://idesweb.es/
PROTOTIPADO

Resumen
 Introducción al desarrollo web
http://idesweb.es/

Planos
Blueprint, diagramas de contenido o flujo, o mapa web
PROTOTIPADO

Sketch
Baja fidelidad
Maquetas Wireframes

Alta fidelidad Prototipo funcional

 Introducción al desarrollo web
http://idesweb.es/

http://idesweb.es/
PROTOTIPADO

idw@idesweb.es
 Introducción al desarrollo web
http://idesweb.es/

Créditos de imágenes y fotografías

PROTOTIPADO

• 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