{"id":15123,"date":"2020-12-15T11:10:39","date_gmt":"2020-12-15T09:10:39","guid":{"rendered":"http:\/\/design-toolkit.recursos.uoc.edu\/storyboarding\/"},"modified":"2021-02-09T17:55:47","modified_gmt":"2021-02-09T15:55:47","slug":"storyboarding","status":"publish","type":"post","link":"http:\/\/design-toolkit-test.uoc.edu\/es\/storyboarding\/","title":{"rendered":"<em>Storyboarding<\/em>"},"content":{"rendered":"<h2><strong>Descripci\u00f3n<\/strong><\/h2>\n<p>Para realizar un <em>storyboard<\/em>, primero han de describirse los elementos b\u00e1sicos que hay que incluir y despu\u00e9s se desgrana cada paso que hay que seguir con ejemplos comentados.<\/p>\n<p>Para comenzar, podemos usar una plantilla como la que se muestra a continuaci\u00f3n, o bien dibujarla nosotros mismos en funci\u00f3n de nuestras necesidades. Tambi\u00e9n podemos usar rect\u00e1ngulos de papel sueltos o p\u00f3sits que m\u00e1s tarde permitan modificar el orden o incorporar vi\u00f1etas intermedias.<\/p>\n<div id=\"attachment_12179\" style=\"width: 785px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-12179\" loading=\"lazy\" class=\"my-image wp-image-12179 \" src=\"\/wp-content\/uploads\/2020\/12\/26414_amp92-1024x793-1.jpg\" alt=\"\" width=\"775\" height=\"600\" \/><p id=\"caption-attachment-12179\" class=\"wp-caption-text\">Plantilla para <em>storyboard<\/em>.<br \/>Fuente: <a href=\"https:\/\/www.nngroup.com\/articles\/storyboards-visualize-ideas\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.nngroup.com\/articles\/storyboards-visualize-ideas\/<\/a>.<\/p><\/div>\n<p>Los elementos b\u00e1sicos del <em>storyboard<\/em> son:<\/p>\n<ul>\n<li>Un boceto o dibujo dentro de la caja o vi\u00f1eta, que ser\u00e1 la representaci\u00f3n visual de un momento espec\u00edfico dentro de la narrativa de la historia, servicio o proceso.<\/li>\n<li>Un titular que resume la acci\u00f3n o momento.<\/li>\n<li>Una explicaci\u00f3n m\u00e1s detallada, que ayuda a tener una narrativa m\u00e1s completa y que aporta informaci\u00f3n que no podemos mostrar a primera vista en la representaci\u00f3n visual.<\/li>\n<li>Aparte de los tres primeros elementos b\u00e1sicos, tambi\u00e9n podremos incorporar otros detalles complementarios, como las sensaciones de los usuarios (mediante iconos, emoticonos, etc.).<\/li>\n<\/ul>\n<p>En la imagen inferior vemos c\u00f3mo se puede trabajar el <em>storyboard<\/em> mediante p\u00f3sits. Incluso podemos recurrir al uso de colores para utilizarlos como referencia para momentos espec\u00edficos, indicar aspectos positivos o negativos, etc.<\/p>\n<div id=\"attachment_12177\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-12177\" loading=\"lazy\" class=\"my-image wp-image-12177 size-full\" src=\"\/wp-content\/uploads\/2020\/12\/26414_amp93.jpg\" alt=\"\" width=\"800\" height=\"464\" \/><p id=\"caption-attachment-12177\" class=\"wp-caption-text\">Uso de p\u00f3sits para la elaboraci\u00f3n de un <em>storyboard<\/em>. <br \/>Fuente: <a href=\"https:\/\/www.pinterest.es\/pin\/595178906984502466\/?lp=true\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.pinterest.es\/pin\/595178906984502466\/?lp=true<\/a>.<\/p><\/div>\n<p>El <em>storyboard<\/em> debe estar ejecutado en un formato que permita modificarlo e iterar de manera f\u00e1cil. Por este motivo, el uso de p\u00f3sits o etiquetas removibles es muy recomendable.<\/p>\n<p>Desde un punto de vista esencial, se debe incorporar en cada vi\u00f1eta el titular que describe de manera general el momento descrito. Posteriormente, se har\u00e1 un boceto de c\u00f3mo representar este momento en la vi\u00f1eta y, luego, se refinar\u00e1 el contenido de la parte visual para poder hacer una representaci\u00f3n m\u00e1s clara de lo que est\u00e1 sucediendo. Es importante recordar que no es necesario utilizar dibujos muy detallados o de gran calidad. La clave est\u00e1 en ser capaz de comunicar el proceso y las interacciones que se producen de una manera sencilla y clara.<\/p>\n<p>Es muy pr\u00e1ctico tratar de imaginar c\u00f3mo se desarrolla el proceso definiendo c\u00f3mo es la situaci\u00f3n que se va a describir. Puede servir de gu\u00eda el imaginar un proceso similar que se haya vivido para partir de una situaci\u00f3n real. Si, por ejemplo, se est\u00e1 describiendo un servicio, se debe tener en cuenta todo lo que ha sucedido desde el inicio de este hasta el final, incluyendo posibles reclamaciones o situaciones tras el servicio. Por un lado, para cada paso es interesante tambi\u00e9n tener una visi\u00f3n global de las cosas que fueron bien, fueron mal o simplemente no cumplieron las expectativas. Por otro lado, hay que intentar pensar cu\u00e1les son los momentos clave en el curso de la actividad o cu\u00e1les generaron dudas para representarlos en el <em>storyboard<\/em>.<\/p>\n<p>A partir de este planteamiento inicial, se escribe un guion preliminar con el n\u00famero de momentos suficientes para describir toda la actividad o servicio. El guion puede ser \u00fanicamente textual o indicar ya el flujo entre acciones y otros elementos.<\/p>\n<div id=\"attachment_12175\" style=\"width: 665px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-12175\" loading=\"lazy\" class=\"my-image wp-image-12175 \" src=\"\/wp-content\/uploads\/2020\/12\/26414_amp94.jpg\" alt=\"\" width=\"655\" height=\"476\" \/><p id=\"caption-attachment-12175\" class=\"wp-caption-text\"><br \/>Guion previo y primeras conexiones. <br \/>Fuente: <a href=\"https:\/\/theblog.adobe.com\/storyboarding-in-ux-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/theblog.adobe.com\/storyboarding-in-ux-design\/<\/a>.<\/p><\/div>\n<p>La manera de conectar los pasos y situaciones tambi\u00e9n influye en la manera en la que leeremos el <em>storyboard<\/em>. Los conectores o flechas que se utilicen pueden tener diferentes significados en funci\u00f3n de su representaci\u00f3n (trazos, rectas, curvas, color, grosor, etc.).<\/p>\n<div id=\"attachment_12173\" style=\"width: 765px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-12173\" loading=\"lazy\" class=\"my-image wp-image-12173 \" src=\"\/wp-content\/uploads\/2020\/12\/26414_amp95.jpg\" alt=\"\" width=\"755\" height=\"420\" \/><p id=\"caption-attachment-12173\" class=\"wp-caption-text\">Conexiones y flujo entre vi\u00f1etas. <br \/>Fuente: <a href=\"https:\/\/medium.com\/@MadhavShankar\/wireframing-protocols-and-facts-cecca65cf36e\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/medium.com\/@MadhavShankar\/wireframing-protocols-and-facts-cecca65cf36e<\/a>.<\/p><\/div>\n<p>Es muy importante pensar y definir el escenario donde transcurre la acci\u00f3n. Si un servicio se divide o bifurca en varias casu\u00edsticas en las que el escenario cambia, es muy recomendable utilizar un <em>storyboard<\/em> para cada uno de ellos.<\/p>\n<p>M\u00e1s tarde se pueden a\u00f1adir detalles para cada momento relacionados con lo que los usuarios est\u00e1n pensando, sintiendo y haciendo durante el transcurso de la situaci\u00f3n.<\/p>\n<h3><strong>1. Inicio del bocetado<\/strong><\/h3>\n<p>A partir del guion preliminar se generan bocetos para dibujar las diferentes secuencias. Este primer paso debe ser r\u00e1pido y fluido, no es necesario entrar en todos los detalles ni hay que poner demasiado tiempo ni esfuerzo en hacer que estos primeros bocetos sean \u00abbonitos\u00bb.<\/p>\n<div id=\"attachment_12171\" style=\"width: 675px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-12171\" loading=\"lazy\" class=\"my-image wp-image-12171 \" src=\"\/wp-content\/uploads\/2020\/12\/26414_amp96.jpg\" alt=\"\" width=\"665\" height=\"487\" \/><p id=\"caption-attachment-12171\" class=\"wp-caption-text\">Boceto b\u00e1sico del proceso. <br \/>Fuente: <a href=\"https:\/\/www.ofcourseglobal.com\/blog\/storyboarding\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.ofcourseglobal.com\/blog\/storyboarding<\/a>.<\/p><\/div>\n<p>La audiencia tiende a criticar el trabajo que parece acabado. Un proyecto acabado parece intocable y cuanto m\u00e1s perfecta sea la representaci\u00f3n, m\u00e1s finalizado parecer\u00e1 el <em>storyboard<\/em>. No se debe buscar el hiperrealismo, sino una s\u00edntesis visual para explicar una situaci\u00f3n, o bien una expresi\u00f3n facial como en el ejemplo que aparece m\u00e1s abajo.<\/p>\n<div id=\"attachment_12169\" style=\"width: 616px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-12169\" loading=\"lazy\" class=\"my-image wp-image-12169 size-full\" src=\"\/wp-content\/uploads\/2020\/12\/26414_amp97.jpg\" alt=\"\" width=\"606\" height=\"224\" \/><p id=\"caption-attachment-12169\" class=\"wp-caption-text\">Abstracci\u00f3n en la representaci\u00f3n. <br \/>Fuente: <a href=\"https:\/\/uxdesign.cc\/how-to-storyboard-experiences-fc051e2bc04d\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/uxdesign.cc\/how-to-storyboard-experiences-fc051e2bc04d<\/a>.<\/p><\/div>\n<p>Si se quiere obtener un <em>feedback<\/em> constructivo sobre un <em>storyboard<\/em>, se debe tener cuidado en no refinarlo demasiado pronto. Lo que s\u00ed que es realmente importante es que la representaci\u00f3n que se usa explique suficientemente bien la acci\u00f3n o el paso del proceso con independencia del estilo.<\/p>\n<h3><strong>2. Incorporaci\u00f3n de titulares y descriptores<\/strong><\/h3>\n<p>Aparte de los titulares que acompa\u00f1an cada representaci\u00f3n de la acci\u00f3n, se a\u00f1aden detalles descriptivos en forma de texto que complementan la representaci\u00f3n visual. Sirven para explicar elementos contextuales que no se entienden a primera vista y ayudan a la comprensi\u00f3n de los bocetos utilizados; adem\u00e1s, tambi\u00e9n permiten aportar detalles sin perder la simplicidad de la representaci\u00f3n visual.<\/p>\n<div id=\"attachment_12167\" style=\"width: 647px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-12167\" loading=\"lazy\" class=\"my-image wp-image-12167 size-full\" src=\"\/wp-content\/uploads\/2020\/12\/26414_amp98.jpg\" alt=\"\" width=\"637\" height=\"335\" \/><p id=\"caption-attachment-12167\" class=\"wp-caption-text\">Incorporaci\u00f3n de descriptores y detalles a la vi\u00f1eta. <br \/>Fuente: elaboraci\u00f3n propia.<\/p><\/div>\n<p>Incorporar emoticonos es una manera \u00e1gil y clara de ilustrar los sentimientos que el usuario est\u00e1 experimentando en un momento dado. Se debe repetir este procedimiento para cada momento o paso del proceso.<\/p>\n<p>Al final, se debe comprobar si el trabajo realizado refleja de manera clara el servicio que queremos describir o la propuesta o hip\u00f3tesis que tenemos en la cabeza. Esta revisi\u00f3n ayudar\u00e1 a entender si se necesitan m\u00e1s pasos intermedios o si hace falta aportar m\u00e1s detalles sobre alg\u00fan momento en particular.<\/p>\n<p>Si estamos describiendo una interacci\u00f3n digital y necesitamos incorporar detalles espec\u00edficos sobre el dispositivo o la interfaz, podemos encontrar muchas plantillas de diferentes dispositivos que nos sirvan de base para representar la interfaz y la relaci\u00f3n del usuario con la misma.<\/p>\n<div id=\"attachment_12165\" style=\"width: 904px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-12165\" loading=\"lazy\" class=\"my-image wp-image-12165 size-full\" src=\"\/wp-content\/uploads\/2020\/12\/26414_amp99.jpg\" alt=\"\" width=\"894\" height=\"443\" \/><p id=\"caption-attachment-12165\" class=\"wp-caption-text\">Plantilla tipo para interacci\u00f3n con interfaces digitales. <br \/>Fuente: <a href=\"https:\/\/www.elpublicista.es\/tendencias-marketing-comunicacion-comercial-para-2019\/n-10-tendencias-para-mejorar-experiencia-usuario-marcaran-2019\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.elpublicista.es\/tendencias-marketing-comunicacion-comercial-para-2019\/n-10-tendencias-para-mejorar-experiencia-usuario-marcaran-2019<\/a>.<\/p><\/div>\n<h3><strong>3. <\/strong><strong>Revisi\u00f3n del contenido e iteraci\u00f3n<\/strong><\/h3>\n<p>Cuando el <em>storyboard<\/em> ya se ha revisado e iterado, se distribuye entre los miembros del equipo para recibir el <em>feedback<\/em>.<\/p>\n<div id=\"attachment_12163\" style=\"width: 741px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-12163\" loading=\"lazy\" class=\"my-image wp-image-12163 \" src=\"\/wp-content\/uploads\/2020\/12\/26414_amp100.jpg\" alt=\"\" width=\"731\" height=\"411\" \/><p id=\"caption-attachment-12163\" class=\"wp-caption-text\"><em>Feedback<\/em> equipo sobre el <em>storyboard <\/em>planteado. <br \/>Fuente: http:\/\/bussnova.com\/ux-storyboard-example\/ux-storyboard-creation-a-complete-guide-for-beginners-ux-storyboard-example-3\/(inactivo).<\/p><\/div>\n<p>As\u00ed sabemos r\u00e1pidamente si la historia y sus aspectos m\u00e1s importantes se entienden y podemos recibir sugerencias sobre cada uno de los pasos en la representaci\u00f3n del flujo de la acci\u00f3n, e incluso comentarios o propuestas de mejora.<\/p>\n<p>El equipo puede utilizar p\u00f3sits para incorporar los comentarios. Si hemos utilizado un formato flexible (p\u00f3sits o vi\u00f1etas recortadas), se podr\u00e1 incluso jugar con el orden o la manera de conectar cada uno de los momentos de la secuencia.<\/p>\n<p>A partir de esta iteraci\u00f3n podemos repetir el <em>feedback<\/em> con los <em>stakeholders<\/em> del proyecto para explicar el planteamiento del mismo, hacerles part\u00edcipes y recibir su opini\u00f3n. En este momento, y tras las revisiones previas, podemos proceder a afinar el estilo o la representaci\u00f3n visual que se ha realizado.<\/p>\n<h2><strong>Referencias<\/strong><\/h2>\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> (n\u00fam. 1 (19), p\u00e1gs. 64-69).<\/p>\n<p><strong>Vertelney, L.; Curtis, G.<\/strong> (1990). \u00abStoryboards and Sketch Prototypes for Rapid Interface Visualization\u00bb. <em>CHI Tutorial<\/em>. New York, NY: ACM Press.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Descripci\u00f3n Para realizar un storyboard, primero han de describirse los elementos b\u00e1sicos que hay que incluir y despu\u00e9s se desgrana cada paso que hay que seguir con ejemplos comentados. Para comenzar, podemos usar una plantilla como la que se muestra a continuaci\u00f3n, o bien dibujarla nosotros mismos en funci\u00f3n de nuestras necesidades. Tambi\u00e9n podemos usar [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":18261,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[33,31],"tags":[],"_links":{"self":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15123\/"}],"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=15123"}],"version-history":[{"count":6,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15123\/revisions\/"}],"predecessor-version":[{"id":18024,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15123\/revisions\/18024\/"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/18261\/"}],"wp:attachment":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/?parent=15123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/categories\/?post=15123"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/tags\/?post=15123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}