Introducción al prototipado web: beneficios y técnicas

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

http://idesweb.es/

Contacto
PROTOTIPADO

• Blog: http://olgacarreras.blogspot.com
• Web: http://www.usableyaccesible.com
• Twitter: @olgacarreras

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

http://idesweb.es/
PROTOTIPADO

http://idesweb.es/

Planos Sitio web final
PROTOTIPADO

Maquetas

http://idesweb.es/
PROTOTIPADO

Planos
Blueprint, diagramas de contenido o flujo o mapa web

http://idesweb.es/
http://www.nosolousabilidad.com/articulos/diagramacion.htm
PROTOTIPADO

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

http://idesweb.es/
http://www.sccc.premiumdw.com/itc200/interaction-design/
PROTOTIPADO

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

http://idesweb.es/
http://www.boxesandarrows.com/view/yahoo_mail_simplicity_holds_up_over_time/
PROTOTIPADO

http://idesweb.es/
PROTOTIPADO

http://www.jjg.net/ia/visvocab

http://idesweb.es/

Dan Brown
PROTOTIPADO

Communicating Design
Developing Web Site
Documentation for Design
and Planning

Christina Wodtke,
Information Architecture
Blueprint for the web

Peter Morville & Louis Rosenfeld, Information Architecture
for the World Wide Web
http://docstore.mik.ua/orelly/web2/infoarch/ch08_04.htm

http://idesweb.es/

Maquetas
PROTOTIPADO

Prototipado de baja fidelidad y de alta fidelidad
Sketching, wireframes, storyboard, prototipos funcionales

http://idesweb.es/
PROTOTIPADO

Incorrecto Correcto

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

http://idesweb.es/

Sketch Sitio real
PROTOTIPADO

http://idesweb.es/
PROTOTIPADO

http://www.billbuxton.com/

http://idesweb.es/

Wireframes
PROTOTIPADO

http://idesweb.es/

Storyboard
PROTOTIPADO

Secuencia de wireframes

http://www.slideshare.net/nickf/wireframes-for-the-wicked

http://idesweb.es/

Prototipos funcionales
PROTOTIPADO

Prototipos de alta fidelidad

http://idesweb.es/
http://olgacarreras.blogspot.com.es/2011/07/arquitectura-de-informacion-fundamentos.html
PROTOTIPADO

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.

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.

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.

http://idesweb.es/
PROTOTIPADO

Beneficios de prototipar
una aplicación web:

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

• Mayor satisfacción del
cliente y el usuario final

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

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

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

http://idesweb.es/
PROTOTIPADO

Resumen

http://idesweb.es/
http://www.jjg.net/elements/translations/elements_es.pdf
PROTOTIPADO

http://idesweb.es/

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

Sketch
Baja fidelidad
Maquetas Wireframes

Alta fidelidad Prototipo funcional

http://idesweb.es/

http://idesweb.es/
PROTOTIPADO

idw@idesweb.es

http://idesweb.es/

Créditos de imágenes y fotografías
• Planos:
PROTOTIPADO

– 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
– Diapositiva 13: http://docstore.mik.ua/orelly/web2/infoarch/ch08_04.htm
• Maquetas:
– Diapositiva 17:
• 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 22: http://www.slideshare.net/nickf/wireframes-for-the-wicked
• Balanza (diapositiva 29): http://www.sxc.hu/photo/875413
• Los elementos de la experiencia de usuario (diapositiva 34):
http://www.jjg.net/elements/translations/elements_es.pdf

Introducción al prototipado web: beneficios y técnicas

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Introducción al prototipado web: beneficios y técnicas

Semelhante a Introducción al prototipado web: beneficios y técnicas (20)

Último

Último (20)

Introducción al prototipado web: beneficios y técnicas