Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

5. Prototipado

2,710 views

Published on

En esta nueva entrega del curso de Interacción Persona-Ordenador se explica una de las fases más características de todo modelo de Diseño Centrado en el Usuario, el prototipado.
Aquí podremos ver el gran abanico de técnicas disponibles así cómo muchos ejemplos prácticos.

Published in: Education
  • Be the first to comment

5. Prototipado

  1. 1. PROTOTIPADO Grau en Enginyeria Informàtica Interacció Persona-Ordinador Toni Granollers Prototyping is a great opportunity to broaden your scope –explore larger issues of site purpose, understanding, and user preferences. Toni Allen Sr. Usability Researcher and Analyst El Curso de Interacción Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 4.0 Internacional License.
  2. 2. Getting creative with your testing strategy in the Prototyping stage of any project can have big payoffs. Even if you think you don’t have anything in-hand that can be tested, could mean . (We’re gunning for great!) http://www.usertesting.com/blog/2014/01/03/creative-ways-to-prototype-your-way-to- success/?utm_source=rss&utm_medium=rss&utm_campaign=creative-ways-to-prototype-your-way-to- success&utm_reader=feedly Técnicas de Prototipado - GEInformàtica, IPO 2 / 83
  3. 3. Breve descripción • En el contexto de la disciplina IPO iterar hacia la consecución de una meta es fundamental • Los prototipos constituyen una herramienta imprescindible para conseguirlo. • En esta asignatura • entenderemos el concepto de prototipado en el contexto del diseño de sistemas interactivos • conoceremos las diferentes técnicas http://www.smashingmagazine.co m/2010/06/16/design-better- faster-with-rapid-prototyping Fail often, fail soon and fail cheap Técnicas de Prototipado - GEInformàtica, IPO 3 / 83
  4. 4. • El objetivo principal de este módulo es que el alumno conozca el concepto, la importancia y la finalidad de realizar prototipos para implementar aplicaciones interactivas. • Conocer, además, las principales técnicas de realización de prototipos y ver ejemplos. Objetivos Técnicas de Prototipado - GEInformàtica, IPO 4 / 83
  5. 5. Modelo de proceso Diseño centrado en el usuario http://www.grihotools.udl.cat/mpiua/fases-mpiua/prototipado Técnicas de Prototipado - GEInformàtica, IPO 5 / 83
  6. 6. Prototipado • No podemos hacer una implementación a gran escala a partir del diseño inicial de la interfaz • Para poder realizar evaluaciones de la usabilidad en las etapas iniciales necesitamos prototipos • Son documentos, diseños o sistemas que simulan o tienen implementadas partes del sistema final • Es una herramienta muy útil para hacer participar al usuario en el desarrollo y poder evaluar el producto ya en las primeras fases del desarrollo http://www.grihotools.udl.cat/mpiua/fases- mpiua/prototipado Técnicas de Prototipado - GEInformàtica, IPO 6 / 83
  7. 7. Prototipado ¿Qué es un prototipo? • Un prototipo es una implementación parcial pero concreta del diseño de un sistema. Los prototipos pueden ser creados para explorar muchas cuestiones acerca del sistema durante el desarrollo del mismo. • Y, un prototipo de una interfaz de usuario es un prototipo realizado con la finalidad de explorar los aspectos interactivos del sistema (Rosson & Carroll, 2002), incluyendo la usabilidad, la accesibilidad y/o la funcionalidad del mismo. http://www.grihotools.udl.cat/mpiua/fases- mpiua/prototipado Técnicas de Prototipado - GEInformàtica, IPO 7 / 83
  8. 8. Prototipos Razones de su uso • En las aproximaciones de DCU los prototipos constituyen mucho más que simples demostraciones del producto; se utilizan para recoger las impresiones del usuario para repercutirlas en el diseño de la interfaz [ISO 13407, Pág. 9] • Los prototipos responden cuestiones y dan soporte a los diseñadores a la hora de escoger entre varias alternativas. • Es más, sirven para una gran variedad de propósitos como por ejemplo para probar la fiabilidad técnica de una idea, clarificar requisitos que quedaron “imprecisos”, ver como responde con el resto de la aplicación, etc. Técnicas de Prototipado - GEInformàtica, IPO 8 / 83
  9. 9. You can learn a lot in a variety of different areas when building out a prototype: • Learning about the PROBLEM • What do we now know about what we’re trying to design for? • How did building the prototype change our perceptions of how to solve the problem? • What parts of the problem are easily solved? • What parts of the problem remain big challenges? • Learning about our USERS • What new things do we now understand about our users? • What new questions do we have about them? • What will be easy for users to do with our design? • What might still be messy for them to accomplish? • Learning about the MATERIALS • What will be easy to implement? • What will be a challenge to pull off well? • What new skills do we have to master to get the best design? • Learning about POTENTIAL SOLUTIONS • What design alternatives are there? • Which of those alternatives provide the best outcomes? • Why do the less appealing outcomes fail the design? • What elements might be useful design patterns going forward? Técnicas de Prototipado - GEInformàtica, IPO 9 / 83
  10. 10. Prototipo Clasificación • Baja-fidelidad • Son rápidos, baratos y diseñados para obtener información del usuario lo mas pronto posible • Alta-fidelidad • Los prototipos de alta fidelidad son más costosos e implican generalmente programación aunque son más aproximados al diseño final http://www.smashingmagazine.com/2010/06/1 6/design-better-faster-with-rapid-prototyping Técnicas de Prototipado - GEInformàtica, IPO 10 / 83
  11. 11. Ventajas Inconvenientes Costes desarrollo bajos Limitado para la corrección de errores Rápida creación Especificaciones poco detalladas (para pasar a codificación) Fácilidad cambios: Cualquiera puede realizar cambios Dirigido por el evaluador Evaluación múltiples conceptos de diseño Su utilidad disminuye cuando los requisitos estan bien establecidos Útil para el diseño general de interfaces Navegación y flujo de aciones limitadas Auto-sensación de prueba Pruebas sin “respuesta real” Funcionalidad de tareas completa Elevados costes de desarrollo Completamente interactivo Requieren mucho tiempo de implementación Dirigido por el usuario Mayor dificultad de cambiar Navegabilidad Cambios solo realizables por el “autor” Aspecto semejante al producto final Crea falsas expectativas de “producto casi finalizado” Puede servir como especificación Menor efectividada para recoger requisitos Puedes servir como herramienta de marketing (demostraciones de ventas) BAJA fidelidad ALTA fidelidad Técnicas de Prototipado - GEInformàtica, IPO 11 / 83
  12. 12. Vertical prototype Scenario Horizontal prototype Full interface Nielsen, J. (1993) Usability Engineering, p93-101, Academic Press. • Prototipos verticales • Incluye una parte de las funcionalidades • Sirve para realizar evaluaciones más verídicas • Prototipos horizontales • Interfaz completa sin funcionalidades subyacentes • Simulación: No se puede realizar trabajo real • Escenarios Prototipo Clasificación Técnicas de Prototipado - GEInformàtica, IPO 12 / 83
  13. 13. Fases: Lifecycle definition Define: bussiness goals, roles and use cases scenarios/low-fi prototypes Key users/stakeholders validate scenarios/low-fi prototypes Hi-fi prototypes (screens, interactions, data behaviour) Key users/stakeholders validate Hi-fi prototypes Técnicas de Prototipado - GEInformàtica, IPO 13 / 83
  14. 14. Bocetos (sketching) • Los bocetos son maneras de representar primeras ideas. • Se usan en la etapas más iniciales del diseño, a menudo antes incluso de determinar muchos aspectos del análisis de requisitos, con la finalidad de recoger las primeras impresiones del espacio de trabajo de la interacción. http://www.grihotools.udl.cat/mpiua/ bocetos-sketching Técnicas de Prototipado - GEInformàtica, IPO 14 / 83
  15. 15. Bocetos (sketching) http://www.grihotools.udl.cat/mpiua/ bocetos-sketching Técnicas de Prototipado - GEInformàtica, IPO 15 / 83
  16. 16. Prototyping toolkit of a UX practitioner http://uxdesign.smashingmagazine.com/2014/03/06/building-clickthrough-prototypes-to-support-participatory-design Técnicas de Prototipado - GEInformàtica, IPO 16 / 83
  17. 17. Bocetos (sketching) http://www.alistapart.com/articles/sketching-the-visual-thinking-power-tool http://www.grihotools.udl.cat/mpiua/ bocetos-sketching Técnicas de Prototipado - GEInformàtica, IPO 17 / 83
  18. 18. Bocetos (sketching) http://www.adaptivepath.com/ideas/d031009 http://www.smashingmagazine.com/2010/03/04/sketch-question http://youtu.be/iVFTBj_BYy0 http://www.grihotools.udl.cat/mpiua/ bocetos-sketching Técnicas de Prototipado - GEInformàtica, IPO 18 / 83
  19. 19. http://taehok.com/night/?page_id=64 Técnicas de Prototipado - GEInformàtica, IPO 19 / 83
  20. 20. Prototipo de papel • Este tipo de prototipo se basa en la utilización de papel, tijeras, lápiz o instrumentos que se puedan utilizar para describir un diseño en un papel. • Este sistema nos permite una gran velocidad y flexibilidad. Objetivo no es probar o verificar la estética del diseño, sino que se trata de verificar las ideas interactivas. http://www.grihotools.udl.cat/mpiua/ prototipos-de-papel-paper- prototyping Técnicas de Prototipado - GEInformàtica, IPO 20 / 83
  21. 21. Prototipo de papel http://www.grihotools.udl.cat/mpiua/ prototipos-de-papel-paper- prototyping Técnicas de Prototipado - GEInformàtica, IPO 21 / 83
  22. 22. www.paperprototyping.com http://blogs.msdn.com/b/jensenh/archive/2006/01/06/510069.aspx book review http://www.uxmatters.com/mt/archives/2 006/05/book-review-paper-prototyping.php we continually iterate and improve based on our usability feedback loop Técnicas de Prototipado - GEInformàtica, IPO 22 / 83
  23. 23. • La técnica del prototipado de papel consiste en dibujar en un papel, a diferentes niveles estéticos, las interfaces que se van a probar y valorar. • Los diferentes estados de la interfaz se van dibujando en hojas separadas y mediante un proceso de ordenación permite que el usuario final interactúe con este material simulando el funcionamiento del sistema. Prototipo de papel. Ejemplo Check-in hotel http://www.grihotools.udl.cat/mpiua/ prototipos-de-papel-paper- prototyping Técnicas de Prototipado - GEInformàtica, IPO 23 / 83
  24. 24. Protipo de papel. Ejemplo Incidències urbanes (IPO 12-13) Técnicas de Prototipado - GEInformàtica, IPO 24 / 83
  25. 25. Windows Phone design process 1 concept 3 interaction structure 2 4 visual 5 http://dev.windowsphone.com/en-us/design/process Técnicas de Prototipado - GEInformàtica, IPO 25 / 83
  26. 26. • Nos situaremos en un escenario de uso de futuro en el que el diseñador actúa como coordinador. • El prototipo será analizado por un posible usuario que intentará realizar algunas de las tareas a diseñar. • En voz alta se irán realizando las interacciones y le iremos cambiando las hojas de papel en función de las interacciones que vaya realizando. Prototipo en papel. Uso Técnicas de Prototipado - GEInformàtica, IPO 26 / 83
  27. 27. Prototipo de papel. Ventajas (1/2) • Los problemas (funcionales y de usabilidad) pueden ser descubiertos en una etapa muy temprana del proceso de diseño, antes de haberlos codificado. • Favorece la comunicación entre equipo de diseño/desarrollo, los usuarios y los implicados. • Favorece también la participación de todos los miembros de los equipos multidisciplinarios proporcionando un soporte comunicativo entre las diferentes disciplinas. • Son muy rápidos de construir y refinar, lo cual permite realizar rápidas iteraciones de diseño. • Los recursos consumidos son mínimos (materiales muy básicos) y económicos. Técnicas de Prototipado - GEInformàtica, IPO 27 / 83
  28. 28. Prototipo de papel. Ventajas (2/2) • Psicológicamente es beneficioso para los usuarios: • Resulta tan familiar para los usuarios que sin dudarlo intervienen en las modificaciones del diseño. • El usuario, que es consciente de la facilidad y el bajo coste del prototipo, no se siente cohibido de proponer cualquier cambio. • Resulta menos intimidante que un ordenador (ayuda a superar el fenómeno conocido como tecnofobia (Weil and Rosen, 1997). • El tiempo dedicado al proceso de codificación es cero. • No están sujetos a restricciones impuestas por la tecnología –arquitectura del sistema, la base de datos, el ancho de banda, el sistema operativo–, y a pesar de ello ayuda al equipo a anticipar problemas y decisiones derivadas de la tecnología Técnicas de Prototipado - GEInformàtica, IPO 28 / 83
  29. 29. Prototipo de papel. Inconvenientes • Por su simplicidad, los prototipos de papel no sirven para realizar evaluaciones detalladas del diseño. • No puede simular la respuesta del sistema. • A la hora de evaluarlo es fácil que se den por supuestas cosas que realmente no están en el prototipo. • La construcción de los prototipos de papel parece tan evidente que a menudo se menosprecian aspectos importantes • como que el prototipo se asemeje al máximo en tamaño y forma al dispositivo para el cual estamos realizando –cuanto más realista resulte el prototipo mejor será el feedback de los usuarios– el prototipo, lo cual suele llevar a rediseños posteriores que inutilizan los ya realizados. Técnicas de Prototipado - GEInformàtica, IPO 29 / 83
  30. 30. Técnicas de Prototipado - GEInformàtica, IPO 30 / 83
  31. 31. Prototipo de papel http://www.alistapart.com/articles/paperprototyping Técnicas de Prototipado - GEInformàtica, IPO 31 / 83
  32. 32. Prototipo de papel. Tools http://www.gridbooks.ca http://konigi.com/tools/overview http://www.raincreativelab.com/paperbrowser • http://www.henkwijnholds.com/files/conce pt7_a4_sketching_paper_v01.pdf • http://fullofdesign.com/uploads/iphone_n otepad_vertical.pdf Técnicas de Prototipado - GEInformàtica, IPO 32 / 83
  33. 33. Prototipo de papel. Uso. Nielsen Norman Group Training Video: Paper Prototyping: A How-To Training Video http://www.nngroup.com/reports/prototyping http://www.grihotools.udl.cat/mpiua/recursos Técnicas de Prototipado - GEInformàtica, IPO 33 / 83
  34. 34. Prototipo de papel. Uso. http://vimeo.com/20179865 Técnicas de Prototipado - GEInformàtica, IPO 34 / 83
  35. 35. Maquetas digitales detailled images • Las maquetas digitales son representaciones de calidad en formato digital que normalmente llenan el espacio que hay entre el prototipo de papel y la versión definitiva de una interfaz o parte ella. http://www.grihotools.udl.cat/mpiua/ maquetas-digitales Técnicas de Prototipado - GEInformàtica, IPO 35 / 83
  36. 36. Maquetas digitales (detailled images) http://taehok.com/night/?page_id=122 Técnicas de Prototipado - GEInformàtica, IPO 36 / 83
  37. 37. Mapa (o storyboard) navegacional Also WHITEBOARDING http://www.grihotools.udl.cat/m piua/mapastoryboard- navegacional-whiteboarding Técnicas de Prototipado - GEInformàtica, IPO 37 / 83
  38. 38. Mapa (o storyboard) navegacional Also WHITEBOARDING http://www.grihotools.udl.cat/m piua/mapastoryboard- navegacional-whiteboarding Técnicas de Prototipado - GEInformàtica, IPO 38 / 83
  39. 39. Font: http://blog.invisionapp.com/how-to-design-your-design-team Técnicas de Prototipado - GEInformàtica, IPO 39 / 83
  40. 40. Técnicas de Prototipado - GEInformàtica, IPO 40 / 83
  41. 41. Wireframes • Wireframes (o blueprints): guía visual que representa el esqueleto de las interfaces del sistema interactivo que estamos diseñando • carece de características de detalle como el estilo tipográfico, el color o los gráficos: • “what a screen does, not what it looks like” • suele iniciarse con un prototipo de baja fidelidad que fácilmente evoluciona hasta prototipos de (casi) alta fidelidad • conecta la estructura de la arquitectura de la información a la superficie, o sea, al diseño visual de la interfaz http://www.grihotools.udl.cat/mpiua/ wireframes Técnicas de Prototipado - GEInformàtica, IPO 41 / 83
  42. 42. Wireframes • Se centran en: • El tipo de información que se muestra • La gama de funciones disponibles • Las prioridades de la información y las funcionalidades • Las forma de visualizar ciertos tipos de información • El efecto de representar diferentes escenarios de interacción en la interfaz • Tienen 3 objetivos simples, la clara presentación de: • Los grupos principales de información • La información del layout/estructura • La visualización principal y la descripción de las interacciones de la UI http://www.grihotools.udl.cat/mpiua/ wireframes Técnicas de Prototipado - GEInformàtica, IPO 42 / 83
  43. 43. Wireframes http://www.grihotools.udl.cat/mpiua/ wireframes Técnicas de Prototipado - GEInformàtica, IPO 43 / 83
  44. 44. Wireframes http://www.grihotools.udl.cat/mpiua/ wireframes Técnicas de Prototipado - GEInformàtica, IPO 44 / 83
  45. 45. Wireframes A detailed web page wireframeA digital skeletal wireframe http://www.grihotools.udl.cat/mpiua/ wireframes Técnicas de Prototipado - GEInformàtica, IPO 45 / 83
  46. 46. Sketching ≠ Wireframing http://uxmovement.com/wireframes/w hy-its-important-to-sketch-before-you- wireframe Técnicas de Prototipado - GEInformàtica, IPO 46 / 83
  47. 47. Wireframes. Links de interés • Three stages of making wireframes • https://medium.com/brandymints- blog/6e3a1c3f00ba • From Wireframes to Code • Part 1: http://www.uxmatters.com/mt/archives/2010/ 12/from-wireframes-to-code-part-i.php • Part 2: http://www.uxmatters.com/mt/archives/2011/ 02/from-wireframes-to-code-part-ii.php • WordPress wireframes: http://wpdotorg.files.wordpress.com/2008/10/wf -dashboard_v002_093008jw.pdf • Web Site Wireframes – Samples, Examples: http://www.fatpurple.com/2010/03/04/web-site- wireframes-samples-examples • http://wireframes.linowski.ca Wireframe toolkit para hacer wireframes con powerpoint en el campus virtual Técnicas de Prototipado - GEInformàtica, IPO 47 / 83
  48. 48. (some) Wireframing tools https://moqups.com http://uxpin.com https://gomockingbird.com http://www.invisionapp.com Técnicas de Prototipado - GEInformàtica, IPO 48 / 83
  49. 49. Mobile wireframing example http://getlaunch.com Técnicas de Prototipado - GEInformàtica, IPO 49 / 83
  50. 50. Mobile wireframing example http://getlaunch.com Técnicas de Prototipado - GEInformàtica, IPO 50 / 83
  51. 51. Técnicas de Prototipado - GEInformàtica, IPO 51 / 83
  52. 52. Responsive Design wireframing FONT: http://support.balsamiq.com/customer/portal/articles/615901 Técnicas de Prototipado - GEInformàtica, IPO 52 / 83
  53. 53. Reflexiones sobre el término “wireframe” • http://www.torresburriel.com/weblog/2012/01/04/wirefram es-y-prototipos • http://olgacarreras.blogspot.com/2007/02/wireframes.html • http://en.wikipedia.org/wiki/Website_wireframe#cite_note- brown_168-3 Técnicas de Prototipado - GEInformàtica, IPO 53 / 83
  54. 54. Prototipado incremental y evolutivo Técnicas de Prototipado - GEInformàtica, IPO 54 / 83
  55. 55. Prototipado incremental y evolutivo Stage 1: Framework Drawing Stage 2: Framework Wireframing Stage 3: Detailed Visual Design http://fireworks.smashingmagazine.com/2013/01/11/ios-prototyping-adobe-fireworks-tap-part1 Stage 4: Extending Fireworks To Create iOS Prototypes http://unitid.nl/2011/03/touch-application-prototypes-tap- for-iphone-and-ipad-using-adobe-fireworks Técnicas de Prototipado - GEInformàtica, IPO 55 / 83
  56. 56. En mi caso, utilizo una tableta (wacom) para operar los distintos softwares por comodidad y precisión, y apenas la uso para dibujar. Pero sin duda, a la hora de hacer los primeros bocetos de cualquier proyecto, nada mejor que el papel. Personalmente, el hecho de abandonar la pantalla por unos momentos, estimula mucho más el flujo de ideas y me siento menos cohibido a la hora de equivocarme. En definitiva, de eso se trata. Equivocarse mucho al principio para después valorar, comparar y encarrilar el buen camino. Mucha gente es incapaz de ponerse en situación con los prototipados. Ellos esperan ver un diseño acabado. Creo que ese es el motivo de por qué en muchos proyectos hay que empezar aportando prototipos que en realidad son propuestas de diseño. He visto esto en muchas ocasiones y siempre me ha sorprendido ver como la reunión de presentación derivaba en comentarios sobre gustos de colores, y demás ... sin dedicar ni un minuto a cuestiones de funcionalidad y usabilidad. Luego, claro está, aparecían los problemas. En mi experiencia personal los prototipos de baja fidelidad me ayudaron mucho en la comunicación y la colaboración entres las diferentes personas del mismo equipo y también de otros equipos como lo de IT (casi siempre un equipo complicado en la comunicación). Con estos prototipos conseguí hacer partícipe estas personas en una fase muy temprana del proyecto, añadiendo los contrastes en una fase posterior y viendo disminuir los cambios en la fase final. Marzo 2015 56 / 83
  57. 57. Prototipo de software http://www.grihotools.udl.cat/mpiua/ prototipos-software Técnicas de Prototipado - GEInformàtica, IPO 57 / 83
  58. 58. Prototipo de software. Vilars R.A. iTunes Barcino 3D Ajuntament de Barcelona, nov-2014 Técnicas de Prototipado - GEInformàtica, IPO 58 / 83
  59. 59. Prototipo de software. Ejemplo Incidències urbanes (IPO 12-13) Técnicas de Prototipado - GEInformàtica, IPO 59 / 83
  60. 60. A mi la herramienta me ha parecido muy útil pues es muy facil prever con ella problemas en la interacción con el usuario y "ver" cuando son necesarias pantallas de soporte (pantallas de error, mensajes después de ejecutar una acción, pantallas que enlazan una función con otra...) Por otro lado, aunque me ha resultado fácil de utilizar, si que creo que no es tan sencilla como invisionapp. Aunque no es necesario saber código, si que lo es saber como funcionan las funciones de lógica básica, por ejemplo para filtrar datos de los data masters. Personalmente, me ha dejado alucinada. He disfrutado mucho aprendiendo el programa y viendo las inmensas posibilidades que tiene. Como inconveniente le veo que al presentarle un prototipo tan "realista" a un cliente es más que probable que piense que el proyecto está prácticamente terminado, y eso puede ser un problema. Aún así... se trata de ir haciendo pedagogía ;) Marzo 2015 Técnicas de Prototipado - GEInformàtica, IPO 60 / 83
  61. 61. Prototipado situacional Escenarios • Los escenarios no son propiamente prototipos, pero pueden considerarse en cuanto a que principalmente describen el contexto de uso • Elementos • Configuración (setting) • Agentes o actores • Diagrama de secuencia de acciones y eventos • Tipos • Escenario de tareas • Es una descripción del mundo del usuario tal como existe ahora • Escenario de futuro • Es una descripción del mundo del usuario en un futuro http://www.grihotools.udl.cat/mpiua/ escenarios Técnicas de Prototipado - GEInformàtica, IPO 61 / 83
  62. 62. Escenarios • Una historia de ficción con representación de personajes, sucesos, productos y entornos • Ayuda al diseñador a explorar ideas y las ramificaciones de decisiones de diseño en situaciones concretas. • Es interesante pensar en diferentes escenarios para reflejar las diferentes situaciones y puntos de vista diferentes. Scenarios good examples: http://www.uiaccess.com/accessucd/scenarios_eg.html Técnicas de Prototipado - GEInformàtica, IPO 62 / 83
  63. 63. http://infodesign.com.au/wp-content/uploads/Scenarios.pdf http://infodesign.com.au/usabilityresources/scenarios Técnicas de Prototipado - GEInformàtica, IPO 63 / 83
  64. 64. Escenario: uso de lenguaje natural • Las descripciones en lenguaje natural se realizan, cómo su nombre indica, mediante una narración escrita de la situación que queremos reflejar. • Este tipo de narraciones suelen ser las que mejor sirven para producir rápidamente escenarios que pueden ser probados por usuarios. • El principal problema es en la forma de describir la situación. • ya vimos que el uso del lenguaje natural puede dar lugar a • interpretaciones erróneas (Sutcliffe, 2002) o • a descripciones demasiado largas que requieren demasiado esfuerzo por parte de los usuarios. Técnicas de Prototipado - GEInformàtica, IPO 64 / 83
  65. 65. Escenarios & Casos de uso • Los casos de uso describen escenarios (de uso del sistema) a partir de secuencias de interacciones entre el sistema y uno o más actores, los cuales obtienen los resultados observables del sistema (el cual es considerado como una caja negra). • En esta notación los actores representan tanto a personas como otros sistemas que interactúan con el sistema que se está describiendo (Scheneider , 1998). Técnicas de Prototipado - GEInformàtica, IPO 65 / 83
  66. 66. Prototipado situacional Storyboarding (un tipo de escenarios) Técnicas de Prototipado - GEInformàtica, IPO 66 / 83 http://www.grihotools.udl.cat/mpiua/ storyboarding Ejemplo de storyboard actual y futuro
  67. 67. Storyboarding http://taehok.com/night/?page_id=64 http://www.grihotools.udl.cat/mpiua/ storyboarding Técnicas de Prototipado - GEInformàtica, IPO 67 / 83
  68. 68. Storyboarding • Storyboarding your ideas helps make them clear to everyone involved in the team. • It lets you see where potential problems may arise and take action early in the process to solve those problems. • It also helps to articulate the story you want to tell early in the project. http://www.grihotools.udl.cat/mpiua/ storyboarding https://www.interaction-design.org/ux- daily/483/ux-consistency-summary- and-a-final-tip Técnicas de Prototipado - GEInformàtica, IPO 68 / 83
  69. 69. Storyboarding (Hypothetical situation: User needs to StopAuto-Refresh functionality ) http://www.grihotools.udl.cat/mpiua/ storyboarding Técnicas de Prototipado - GEInformàtica, IPO 69 / 83
  70. 70. • Rodar o grabar un vídeo permite desarrollar un escenario el cual gracias al uso de técnicas de pre y de post-producción pueden parecer reales funcionalidades y sistemas que solo son ideas, están en fase muy inicial o son imposibles de realizar (tecnología inexistente, lugares inalcanzables, futuro …. Prototipado situacional Videoprototyping http://youtu.be/aL4QOmgzvak http://youtu.be/5WL2CwnYJHY http://www.grihotools.udl.cat/mpiua/ el-video-como-prototipo Técnicas de Prototipado - GEInformàtica, IPO 70 / 83
  71. 71. Videoprototyping • Starfire, Sun Microsystems: • In 1992, Bruce Tognazzini launched a project at Sun Microsystems in an effort to both predict and guide the future of computing. It drew together the talents of more than 100 engineers, designers, futurists, and filmakers. http://www.asktog.com/starfire/index.html http://youtu.be/rESOIqRApFk 2004 future Técnicas de Prototipado - GEInformàtica, IPO 71 / 83
  72. 72. 72 / 83
  73. 73. what level fidelity to use in a project’s design? • The decision should be based on a cost-benefit analysis. • Budget. How much time and money do you have available? • Project Phase. Are you in a project phase that requires detailed communication of a mature design? • UI Interaction Complexity. Does the design have a complex interaction that needs to be shown rather than described? • UI Workflow Complexity. Does the design traverse a complex workflow through which users can get lost? • Responsive Design. Does your design need to respond fluidly to changing form factors? • Audience Sophistication. Will your audience have difficulty understanding your designs? Técnicas de Prototipado - GEInformàtica, IPO 73 / 83
  74. 74. Ejemplos • The Future of Self-Service Banking (BBVA, 2010): http://www.youtube.com/watch?v=x-DLQp9xb20&feature=related • IKEA Concept Kitchen 2025: https://youtu.be/qD60cBQOABY • The Guardian iPad edition: 'Put the newspaper on the iPad‘: • www.guardian.co.uk/media/gallery/2011/oct/13/guardian-ipad-edition-design-evolution • http://www.currybet.net/cbet_blog/2011/10/guardian-ipad-app.php http://www.grihotools.udl.cat/mpiua/ el-video-como-prototipo Técnicas de Prototipado - GEInformàtica, IPO 74 / 83
  75. 75. CONCLUSION: Prototyping pitfalls 1. Focus on the Deliverable, not on the Learning 2. Too Much Converging; Not Enough Diverging 3. Working in the Wrong Fidelity 4. Too Little Evaluating 5. Fixating On A Single Prototyping Tool BY JARED M. SPOOL https://www.uie.com/articles/pitfalls_prototyping Técnicas de Prototipado - GEInformàtica, IPO 75 / 83
  76. 76. CONCLUSION: The goal in prototying is not the artifact; it’s feedbak • I recommend never using a prototype as the final GUI. This is not prototyping. It is development. A prototype is a mockup that serves to demonstrate some subset of the interactive behavior, contextual layout, and visual design. If a project needs to iterate on fully-developed versions of the GUI, then be sure that the team doing so is not UX designers creating “prototypes”, but a development team building the application. [Garett Dworman, senior UX consultant, TecEd User Research and Design with expertise in user research, information architecture, user-centered design and how people disseminate, access, and consume information March 10, 2014 http://usabilitygeek.com/when-to-prototype-when-to-wireframe-fidelity] Artifact: it’s something you make as a way of communicating with other stakeholders (clients, other people on the design team users) Técnicas de Prototipado - GEInformàtica, IPO 76 / 83
  77. 77. Resources • 18 Great Examples of Sketched UI Wireframes and Mockups • 10 Excellent Tools for Creating Web Design Wireframes • Responsive Web Design Templates and Frameworks • Free Wireframing Kits, UI Design Kits, PDFs and Resources • Interface Libraries 3: Wireframe Like a Professional • The iPad Web Design & Development Toolbox • Presentación Prototipado (Cadius, 2009) Técnicas de Prototipado - GEInformàtica, IPO 77 / 83
  78. 78. Herramientas • www.justinmind.com  (http://www.justinmind.com/tutorials) • www.axure.com • http://www.balsamiq.com • http://www.microsoft.com/expression/products/SketchFlow_Overview.aspx • http://www.invisionapp.com • http://wireframes.linowski.ca • MS Visio • http://imar.spaanjaars.com/535/sketch-and-prototype-tools-review-part-3-microsoft-office-visio-2010 • http://www.guuui.com/issues/02_07.php • https://pidoco.com/en • http://ixedit.com • https://cacoo.com • http://www.10screens.com • http://www.mockuptiger.com • http://www.fluidia.org • http://www.omnigroup.com/products/omnigraffle (for Apple) • https://gomockingbird.com/mockingbird (en navegador) • Listados: • http://c2.com/cgi/wiki?GuiPrototypingTools Técnicas de Prototipado - GEInformàtica, IPO 78 / 83
  79. 79. + Herramientas • https://medium.com/@extremelyn/2014-the-year-of- design-tools-3c449d771e62 • FREE • https://marvelapp.com • http://www.invisionapp.com Puede servir para tomar los prototipos de papel (fotos) y añadirles la interactividad Serviría también como sustituto de MS Visio. Se diseñan las pantallas con alguna herramienta, se suben a un proyecto y es configura la interacción • www.proto.io Técnicas de Prototipado - GEInformàtica, IPO 79 / 83
  80. 80. Design Principles for Wireframing (& for prototyping in general) • SET EXPECTATIONS - NOT JUST GOALS • START WITH USERS - AND THEIR NEEDS • THINK HOW, NOT WHAT • START SIMPLE, STAY SIMPLE • DON’T CONFUSE CHANGE WITH IMPROVEMENT • EVERYTHING HAS A MEANING • BE CONSISTENT, NOT UNIFORM • LOW-FIDELITY DOESN’T MEAN UNREALISTIC • EXPERIMENT & COLLABORATE QUICKLY • YOUR DESIGNS WILL GET BUILT (a great design can be a terrible solution) • SHIPPED IS BETTER THAN PERFECT http://www.onextrapixel.com/2014/06/12/design-principles-for-wireframing/ Técnicas de Prototipado - GEInformàtica, IPO 80 / 83
  81. 81. Bibliografía bàsica Sketching User Experiences: Getting the Design Right and the Right Design Bill Buxton (2007) Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces Carolyn Snyder (2003) http://www.effectiveprototyping.com http://www.effectiveprototyping.com/ep_excel.shtml http://www.effectiveprototyping.com/ep_swmakers.shtml Técnicas de Prototipado - GEInformàtica, IPO 81 / 83
  82. 82. Documentos complementarios • Evaluación de herramientas para prototipado de sistemas interactivos. TFC ETIG 2010: • http://www.recercat.cat/handle/2072/209099 • Técnicas de Prototipado (documento complementario.pdf adjunto al final de estas transparencias) • Presentación Olga Carreras • Prototipado: wireframes, mockups y prototipos: • http://www.youtube.com/watch?v=vJrEbO5 0kxA&feature=youtu.be Técnicas de Prototipado - GEInformàtica, IPO 82 / 83
  83. 83. Links • Agile approach to iPhone Design: papper prototyping+user testing • http://www.slideshare.net/ginsburgdesign/an-agile-approach-to- iphone-design-paper-prototyping-user- testing?src=related_normal&rel=2289300 • Visualizing the User Experience: • http://www.slideshare.net/grantrobinson/visualising-the-user- experience-2261349 • http://uxmovement.com/category/wireframes • http://wireframes.linowski.ca Técnicas de Prototipado - GEInformàtica, IPO 83 / 83
  84. 84. El Curso de Interacción Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento- NoComercial 4.0 Internacional License. El Factor Humano - GEInformàtica, IPO 84 / 110

×