ado prototipado - rua: principal · 2016-04-27 · ado introducción al desarrollo web prototipado...
TRANSCRIPT
![Page 1: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/1.jpg)
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
![Page 2: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/2.jpg)
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
![Page 3: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/3.jpg)
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
![Page 4: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/4.jpg)
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
![Page 5: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/5.jpg)
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Planos
Maquetas
Sitio web final
![Page 6: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/6.jpg)
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Planos Blueprint, diagramas de contenido o flujo o mapa web
![Page 7: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/7.jpg)
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
http://www.nosolousabilidad.com/articulos/diagramacion.htm
![Page 8: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/8.jpg)
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/
![Page 9: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/9.jpg)
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
http://www.sccc.premiumdw.com/itc200/interaction-design/
![Page 10: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/10.jpg)
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
![Page 11: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/11.jpg)
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
http://www.boxesandarrows.com/view/yahoo_mail_simplicity_holds_up_over_time/
![Page 12: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/12.jpg)
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
http://www.jjg.net/ia/visvocab
![Page 13: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/13.jpg)
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
http://www.nosolousabilidad.com/articulos/diagramacion.htm
![Page 14: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/14.jpg)
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
![Page 15: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/15.jpg)
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Incorrecto Correcto
![Page 16: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/16.jpg)
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
![Page 17: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/17.jpg)
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Sketch Sitio real
![Page 18: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/18.jpg)
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
http://www.billbuxton.com/
![Page 19: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/19.jpg)
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Wireframes
![Page 20: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/20.jpg)
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
![Page 21: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/21.jpg)
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
![Page 22: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/22.jpg)
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Prototipos funcionales Prototipos de alta fidelidad
![Page 23: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/23.jpg)
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
http://olgacarreras.blogspot.com.es/2011/07/arquitectura-de-informacion-fundamentos.html
![Page 24: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/24.jpg)
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
![Page 25: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/25.jpg)
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.
![Page 26: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/26.jpg)
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.
![Page 27: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/27.jpg)
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.
![Page 28: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/28.jpg)
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
![Page 29: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/29.jpg)
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
![Page 30: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/30.jpg)
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
![Page 31: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/31.jpg)
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
![Page 32: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/32.jpg)
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
Resumen
![Page 33: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/33.jpg)
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
![Page 34: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/34.jpg)
PR
OTO
TIPA
DO
Introducción al desarrollo web http://idesweb.es/
http://idesweb.es/
![Page 35: ADO Prototipado - RUA: Principal · 2016-04-27 · ADO Introducción al desarrollo web Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España)](https://reader033.vdocuments.co/reader033/viewer/2022043018/5f3a23fc993f5733fc557c5b/html5/thumbnails/35.jpg)
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