{"id":15334,"date":"2020-12-15T16:51:11","date_gmt":"2020-12-15T14:51:11","guid":{"rendered":"http:\/\/design-toolkit.recursos.uoc.edu\/storyboard\/"},"modified":"2021-01-29T10:56:40","modified_gmt":"2021-01-29T08:56:40","slug":"storyboard","status":"publish","type":"post","link":"http:\/\/design-toolkit-test.uoc.edu\/es\/storyboard\/","title":{"rendered":"<em>Storyboard<\/em>"},"content":{"rendered":"<h2>\u00bfQu\u00e9 es?<\/h2>\n<p><em>Storyboard<\/em> es un m\u00e9todo que nos permite representar ideas de forma visual en una serie de paneles gr\u00e1ficos. Representa gr\u00e1ficamente el flujo que va de escena a escena, donde se ilustran los pasos para cumplir un objetivo o completar una tarea. Por lo tanto, se pueden trabajar m\u00e1s f\u00e1cilmente si ya hemos desarrollado el diagrama de flujo.<\/p>\n<p><em>Storyboards<\/em> son documentos colaborativos en los que cualquier miembro del equipo puede colaborar. Su naturaleza informal invita a que los otros se sientan c\u00f3modos participando, promocionando el trabajo en equipo.<\/p>\n<p>El m\u00e9todo de los escenarios es similar, puesto que expresan de forma textual la narrativa. Los escenarios tienen que ser descriptivos por s\u00ed mismos, puesto que no disponen de una representaci\u00f3n gr\u00e1fica, y se suelen centran en los aspectos funcionales clave. A diferencia de los escenarios, los <em>storyboards<\/em> se basan en la representaci\u00f3n gr\u00e1fica y pueden reflejar emociones o sentimientos de los usuarios.<\/p>\n<h2>Materiales<\/h2>\n<p>Plantilla para hacer<em> storyboards<\/em> (las podemos encontrar disponibles en la red: <a href=\"https:\/\/www.printablepaper.net\/category\/storyboard\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.printablepaper.net\/category\/storyboard<\/a>) o bien una hoja en blanco y dibujamos los cuadrados de las vi\u00f1etas nosotros mismos.<\/p>\n<h2>\u00bfCu\u00e1ndo?<\/h2>\n<p>Los <em>storyboards<\/em> se utilizan en la parte de dise\u00f1o de producto una vez que queremos desarrollar el producto y obtener un dise\u00f1o detallado. Se utiliza en esta fase porque el <em>storyboard<\/em> permite experimentar con diferentes secuencias de acci\u00f3n. Es un m\u00e9todo perfecto para empezar a pensar en la experiencia de usuario.<\/p>\n<h2>\u00bfC\u00f3mo?<\/h2>\n<p>Hemos de pensar en el objetivo que hay que completar o en la tarea que queremos describir con el <em>storyboard<\/em>. Una vez tenemos esto claro, para realizar el <em>storyboard<\/em> podemos los pasos siguientes:<\/p>\n<ol>\n<li>Tomaremos la plantilla con los cuadrados para dibujar o la hoja en blanco y haremos nuestros recuadros para dibujar las vi\u00f1etas.<\/li>\n<li>A\u00f1adimos debajo de cada vi\u00f1eta una l\u00ednea explicando la idea general.<\/li>\n<li>Despu\u00e9s haremos un <em>sketch<\/em> de c\u00f3mo se ver\u00e1 visualmente cada vi\u00f1eta.<\/li>\n<li>Iterar la parte visual hasta conseguir que cada vi\u00f1eta d\u00e9 una impresi\u00f3n general de lo que est\u00e1 pasando.<\/li>\n<\/ol>\n<p>Recordad que no hace falta que sean dibujos muy detallados. Es m\u00e1s importante que las interacciones se muestren claramente en este proceso, y que incluyan el problema inicial, las emociones en cada vi\u00f1eta y la resoluci\u00f3n para llegar a cumplir el objetivo o el hito.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-3054 my-image\" src=\"\/wp-content\/uploads\/2020\/12\/storyboard.jpg\" alt=\"\" width=\"784\" height=\"730\" \/><\/p>\n<h2>Ventajas<\/h2>\n<ul>\n<li>Los <em>storyboards<\/em> nos permiten centrarnos en los altibajos emocionales de una experiencia espec\u00edfica.<\/li>\n<li>Nos permiten evaluar ideas y \u00abdebugarlas\u00bb conceptualmente.<\/li>\n<li>Es un m\u00e9todo r\u00e1pido que nos permite representar el flujo de la experiencia antes de construir el prototipo.<\/li>\n<li>Nos permite poner a las personas en acci\u00f3n, teniendo en cuenta diferentes requisitos y contextos.<\/li>\n<\/ul>\n<h2>Inconvenientes<\/h2>\n<ul>\n<li>Construirlos y hacer cambios supone m\u00e1s tiempo que otras aproximaciones debido al tema de hacer los dibujos.<\/li>\n<\/ul>\n<h2>Gu\u00edas<\/h2>\n<p>Este contenido se ampl\u00eda a trav\u00e9s de la siguiente gu\u00eda: \u201c<a href=\"http:\/\/design-toolkit-test.uoc.edu\/es\/guia\/storyboard\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gu\u00eda <em>Storyboard<\/em><\/a>\u201d.<\/p>\n<h2>Referencias<\/h2>\n<p><strong>Caddick, R.; Cable, S.<\/strong> (2011). <em>Communicating the user experience: A practical guide for creating useful UX documentation<\/em>. John Wiley &amp; Sons.<\/p>\n<p><strong>Cooper, A.; Reimann, R.; Cronin, D.; Noessel, C.<\/strong> (2014). <em>About face: the essentials of interaction design<\/em>. John Wiley &amp; Sons.<\/p>\n<p><strong>Greenberg, S.; Carpendale, S.; Marquardt, N.; Buxton, B.<\/strong> (2012). \u00abThe narrative storyboard: telling a story about use and context over time\u00bb. <em>Interactions<\/em> (vol. 19, n\u00fam. 1, p\u00e1gs. 64-69).<\/p>\n<p><strong>Hanington, B.; Martin, B.<\/strong> (2012). <em>Universal methods of design: 100 ways to research complex problems, develop innovative ideas, and design effective solutions<\/em>. Rockport Publishers.<\/p>\n<p><strong>Kalbach, J. <\/strong>(2016). <em>Mapping experiences: A complete guide to creating value through journeys, blueprints, and diagrams<\/em>. O\u2019Reilly Media, Inc.<\/p>\n<p><strong>Vertelney, L.; Curtis, G. <\/strong>(1990). \u00abStoryboards and Sketch Prototypes for Rapid Interface Visualization\u00bb. CHI Tutorial, ACM Press.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfQu\u00e9 es? Storyboard es un m\u00e9todo que nos permite representar ideas de forma visual en una serie de paneles gr\u00e1ficos. Representa gr\u00e1ficamente el flujo que va de escena a escena, donde se ilustran los pasos para cumplir un objetivo o completar una tarea. Por lo tanto, se pueden trabajar m\u00e1s f\u00e1cilmente si ya hemos desarrollado [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":18259,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[21],"tags":[],"_links":{"self":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15334\/"}],"collection":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/"}],"about":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/types\/post\/"}],"author":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/users\/4\/"}],"replies":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/comments\/?post=15334"}],"version-history":[{"count":7,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15334\/revisions\/"}],"predecessor-version":[{"id":17853,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15334\/revisions\/17853\/"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/18259\/"}],"wp:attachment":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/?parent=15334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/categories\/?post=15334"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/tags\/?post=15334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}