¿Son los guiones gráficos el eslabón perdido en el proceso de diseño de su experiencia de usuario?
Publicado: 2017-05-09Guiones gráficos ... eso es lo que los escritores de guiones usan para crear películas y programas de televisión, ¿verdad? Sí, eso es cierto, pero los guiones gráficos no se limitan al mundo del entretenimiento ficticio. También pueden desempeñar un papel importante en el proceso de diseño de la experiencia del usuario.
En esta publicación, voy a entrar en todos los guiones gráficos. Comenzaré con una definición simple y trabajaré sobre cómo puede usar guiones gráficos para crear los viajes de sus usuarios en su proyecto y, en consecuencia, diseñar una mejor experiencia de usuario.
¿Qué son los guiones gráficos?
Los guiones gráficos son un concepto bastante simple. Básicamente, son ilustraciones simples que se mueven secuencialmente a lo largo de una historia. Como mencioné, son más conocidos por su uso como herramienta para desarrollar las líneas argumentales de películas y obras de teatro.
Para una visualización divertida de cómo funcionan los guiones gráficos cuando se aplican a las películas, Flavorwire armó una lista de guiones gráficos de algunas películas famosas. ¿Recuerdas esa famosa escena de la cortina de baño de Psycho? Así es como se veía en forma de guión gráfico:

Pero los guiones gráficos no solo son útiles para diseñar tramas ficticias. También se han convertido en un método popular para visualizar cómo un ser humano real experimenta un sitio web o una aplicación.
Cuando se trata de su sitio web o aplicación, un guión gráfico básicamente sigue el viaje completo de una persona de usuario específica, comenzando con ellos luchando con un problema y terminando con ellos interactuando con su creación y experimentando una resolución positiva.
Lo importante es que su guión gráfico represente a una persona real con un problema real en un entorno real . Los guiones gráficos siempre deben sentirse auténticos y basados en la realidad.
Entonces, ¿cómo se vería esto en realidad? Aquí hay un ejemplo de Chelsea Hostetter en el Austin Center for Design:

¿Observa cómo el guión gráfico de Chelsea representa una historia completa de principio a fin? No solo se centra en el uso que hace Susan de la aplicación Heartline. Comienza con una situación de la vida real, llega a su punto máximo cuando Susan usa la aplicación para conectarse con Tom y termina con la resolución del problema en la vida real.
¿Cómo ayudan los guiones gráficos a mejorar el diseño de la experiencia del usuario?
Hoy en día, hay un gran enfoque en big data. Y aunque los datos duros y fríos son ciertamente valiosos, eliminan por completo al ser humano del proceso de diseño. El guión gráfico puede ayudar a recuperar ese elemento humano en el diseño.
Con el guión gráfico, tiene humanos reales que realizan acciones reales, en lugar de descripciones de características abstractas o datos analíticos.
Más allá del elemento humano, el guión gráfico también le facilita la revisión e iteración de sus ideas rápidamente. Debido a que todo lo que está haciendo es esbozar el proceso, necesita invertir mucho menos tiempo del que necesitaría para crear un prototipo funcional de la misma funcionalidad.
Eso significa que puede implementar cambios más rápidamente de lo que sería posible con un prototipo.
Consejos para ayudar a crear su primer guión gráfico
No necesita ser un ilustrador profesional para crear un guión gráfico, pero hay algunas estrategias que debe seguir para crear guiones gráficos que sean realmente útiles para su proceso de diseño.
Recuerde, su objetivo es crear algo que sea auténtico y convincente. Si es necesario, regrese y eche un vistazo al ejemplo de Heartline nuevamente. Observe cómo la historia:
- Está repleto de emociones humanas
- Se enfoca en todo el escenario, no solo en la parte donde los personajes usan tu producto.
- Tiene una resolución clara
Si bien el producto final de Chelsea es un buen ejemplo, no sienta que necesita pasar directamente de la página en blanco al guión gráfico completo.
En cambio, ayuda a construir lentamente ese producto final.
Primero, recuerde que su objetivo es tener:

- Personajes auténticos
- Un problema de la vida real
- Una forma lógica y auténtica de resolver ese problema a través de su producto
- Una resolución real al final del guión gráfico.
Para asegurarse de tener en cuenta todos esos elementos, es más fácil comenzar con descripciones de texto sin formato que bosquejen los conceptos básicos de la historia. Conéctelos en un arco narrativo, pero no se preocupe por profundizar demasiado todavía.
Luego, regrese y reescriba su historia incorporando emociones más detalladas. ¿Qué sienten tus personajes en cada etapa del viaje? ¿Estan felices? ¿Triste? ¿Indiferente?
Una vez que haya esbozado la narrativa y las emociones en texto sin formato, estará listo para traducir eso en un guión gráfico real. Para hacer eso, divida cada acción de la historia en un marco individual y esboce usando ilustraciones reales.
Si tiene las habilidades artísticas, intente realmente traer emoción a sus ilustraciones al dibujar su guión gráfico.
Herramientas para ayudarlo a crear guiones gráficos
Antes de profundizar demasiado en algunas herramientas para ayudarlo a crear guiones gráficos de experiencia de usuario, debería comenzar con el hecho de que probablemente ya tenga suficientes herramientas en un armario en alguna parte.
Es decir, no necesitas necesariamente nada sofisticado para crear un guión gráfico. Ir de baja fidelidad con lápiz y papel está totalmente bien si vas a ser el único que mira tu guión gráfico. O bien, siempre puede optar por un enfoque digital utilizando algo como PowerPoint para armar una historia coherente.
Pero si va a colaborar con otros miembros del equipo, es posible que desee crear guiones gráficos que se vean un poco más pulidos y profesionales de lo que permiten el lápiz y el papel o PowerPoint. En esas situaciones, las siguientes herramientas pueden ayudar ...
Storyboard That
En lugar de dibujar a mano, Storyboard That le permite crear guiones gráficos fotograma a fotograma utilizando elementos prefabricados de arrastrar y soltar. Una vez que haya esbozado su historia con texto sin formato, puede usar estos elementos para construir un producto final más pulido.
La herramienta es bastante sencilla de usar. Todo lo que necesitas hacer es:
- Elige un fondo para tu escena
- Agregar personajes
- Traiga texto o elementos
Por ejemplo, pude crear este guión gráfico básico en solo un par de minutos:

Si bien dudo que gane una competencia de guiones gráficos, es mucho más rápido que dibujar a mano (al menos para mí). El único inconveniente es que pierde la capacidad de expresar emociones con las expresiones faciales de sus personajes.
La herramienta básica Storyboard That es gratuita, aunque también tienen planes premium que ofrecen más funciones.
Boords
Boords es una herramienta más hábil y de alta tecnología que te ayuda a crear guiones gráficos a partir de ilustraciones existentes.
Si bien no lo ayudará a crear esas ilustraciones, sí lo ayudará a organizarlas, agregar notas y compartir sus guiones gráficos a través de Internet o PDF:

Entonces, si planea colaborar con otros en su guión gráfico, Boords hace que sea mucho más fácil de ajustar sobre la marcha.
Hay un plan básico gratuito que le permite tener hasta dos guiones gráficos gratis. Pero después de eso, tendrás que pagar por Pro.
Terminando
Los guiones gráficos no son solo para películas y obras de teatro. Le ayudan a iterar más rápido, comprender mejor a sus usuarios y poner un rostro humano en todo su proceso de diseño.
Solo recuerde: sus guiones gráficos deben ser auténticos y convincentes. Esbozar una situación descabellada en la que su producto salve al mundo puede sentirse bien, pero ese no es el objetivo del guión gráfico. Sea realista y concéntrese en contar la historia completa de principio a fin.
Ahora le toca a usted: ¿utiliza guiones gráficos en su proceso de diseño? Si es así, ¿crees que valen la pena el tiempo que tardan en fabricar?
Imagen en miniatura del artículo de CharacterFamily / shutterstock.com
