{"id":15131,"date":"2020-12-15T11:13:12","date_gmt":"2020-12-15T09:13:12","guid":{"rendered":"http:\/\/design-toolkit.recursos.uoc.edu\/visual-storytelling\/"},"modified":"2021-01-29T15:00:02","modified_gmt":"2021-01-29T13:00:02","slug":"visual-storytelling","status":"publish","type":"post","link":"http:\/\/design-toolkit-test.uoc.edu\/es\/visual-storytelling\/","title":{"rendered":"<em>Visual storytelling<\/em>"},"content":{"rendered":"<h2><strong>Descripci\u00f3n<\/strong><\/h2>\n<p>El <em>visual storytelling<\/em> puede definirse como el arte de expresar una narrativa en una forma visual.<\/p>\n<p>En los proyectos UX normalmente se muestra mucha informaci\u00f3n sobre el proceso, los usuarios y los datos obtenidos. El <em>visual storytelling<\/em> ayuda a enfatizar diferentes perspectivas, manejar la informaci\u00f3n en piezas m\u00e1s f\u00e1cilmente interpretables y gestionables y establecer prioridades de acci\u00f3n. Adem\u00e1s, es una herramienta muy \u00fatil para el dise\u00f1ador UX, ya que le permite establecer una conexi\u00f3n emocional con la audiencia debido a la forma en la que el cerebro humano procesa im\u00e1genes.<\/p>\n<p>El cerebro humano dedica un 30 % del c\u00f3rtex a procesar informaci\u00f3n visual en comparaci\u00f3n con el 8 % que dedica a la informaci\u00f3n t\u00e1ctil o el 3 % a la auditiva. Asimismo, el cerebro es capaz de identificar im\u00e1genes mucho m\u00e1s r\u00e1pido que interpretar elementos verbales. Adem\u00e1s, los humanos tenemos una gran capacidad para recordar im\u00e1genes.<\/p>\n<p>El <em>visual<\/em> <em>storytelling<\/em> utiliza todo tipo de elementos visuales, tales como ilustraciones, fotograf\u00edas, diagramas, esquemas o audiovisuales para generar una historia en la mente y el recuerdo de la audiencia. Es una t\u00e9cnica que crea experiencias emocionales duraderas en el p\u00fablico.<\/p>\n<p>El ojo lee siguiendo patrones en forma de \u00abF\u00bb y de \u00abZ\u00bb (imagen siguiente). Los dise\u00f1adores de UX deben tener en cuenta estos patrones a la hora de planificar el contenido de una imagen, un <em>slide<\/em> o un <em>frame<\/em> de una p\u00e1gina web para que la narrativa construida se adapte al modo en que las personas descifran la informaci\u00f3n visual.<\/p>\n<div id=\"attachment_12153\" style=\"width: 814px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-12153\" loading=\"lazy\" class=\"my-image wp-image-12153 size-full\" src=\"\/wp-content\/uploads\/2020\/12\/26414_amp105.jpg\" alt=\"\" width=\"804\" height=\"551\" \/><p id=\"caption-attachment-12153\" class=\"wp-caption-text\">Patrones de escaneo de im\u00e1genes del ojo humano. <br \/>Fuente: <a href=\"https:\/\/www.justinmind.com\/blog\/guide-to-visual-storytelling-for-ux\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.justinmind.com\/blog\/guide-to-visual-storytelling-for-ux\/<\/a>.<\/p><\/div>\n<p>A partir de estos patrones, se presentan a continuaci\u00f3n una serie de consejos para ofrecer un <em>visual<\/em> <em>storytelling<\/em> efectivo:<\/p>\n<ul>\n<li>Mantener el texto en la parte central o ligeramente hacia la izquierda permite al ojo encontrarlo c\u00f3modamente.<\/li>\n<li>Limitar la longitud del texto mejora la comodidad a la hora de leer, de manera que invita al lector a continuar.<\/li>\n<li>Acompa\u00f1ar siempre el texto con im\u00e1genes explicativas, titulares que ofrezcan un mensaje directo y otros elementos visuales ayuda a dar ritmo a la diapositiva e invita al lector a explorar todo el contenido.<\/li>\n<\/ul>\n<div id=\"attachment_12151\" style=\"width: 814px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-12151\" loading=\"lazy\" class=\"my-image wp-image-12151 size-full\" src=\"\/wp-content\/uploads\/2020\/12\/26414_amp106.jpg\" alt=\"\" width=\"804\" height=\"551\" \/><p id=\"caption-attachment-12151\" class=\"wp-caption-text\">Sentido de lectura de una pantalla en una p\u00e1gina web. <br \/>Fuente:<a href=\"https:\/\/www.justinmind.com\/blog\/guide-to-visual-storytelling-for-ux\/\" target=\"_blank\" rel=\"noopener noreferrer\"> https:\/\/www.justinmind.com\/blog\/guide-to-visual-storytelling-for-ux\/<\/a>.<\/p><\/div>\n<p>En el art\u00edculo \u00ab<a href=\"https:\/\/www.justinmind.com\/blog\/guide-to-visual-storytelling-for-ux\" target=\"_blank\" rel=\"noopener noreferrer\">Guide to Visual Storytelling for UX<\/a><u>\u00bb,<\/u> de Tom Clarke, podemos encontrar algunos ejemplos interesantes sobre <em>visual storytelling<\/em> aplicados a p\u00e1ginas web y <em>landing pages<\/em>.<\/p>\n<h2><strong>Referencias<\/strong><\/h2>\n<p><strong>Brooks, K.; Quesenbery, W.<\/strong> (2009). <em>Storytelling for User Experience Design<\/em>. Nueva York: Rosenfeld Media.<\/p>\n<p><strong>Jursa, J.; K\u00f6ver, S.; Gr\u00fcnewald, J. y otros<\/strong> (2010). <em>UX Storytellers: Connecting the dots<\/em>. [eBook].<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Descripci\u00f3n El visual storytelling puede definirse como el arte de expresar una narrativa en una forma visual. En los proyectos UX normalmente se muestra mucha informaci\u00f3n sobre el proceso, los usuarios y los datos obtenidos. El visual storytelling ayuda a enfatizar diferentes perspectivas, manejar la informaci\u00f3n en piezas m\u00e1s f\u00e1cilmente interpretables y gestionables y establecer [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":18285,"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\/15131\/"}],"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=15131"}],"version-history":[{"count":2,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15131\/revisions\/"}],"predecessor-version":[{"id":17162,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15131\/revisions\/17162\/"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/18285\/"}],"wp:attachment":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/?parent=15131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/categories\/?post=15131"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/tags\/?post=15131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}