El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa
Abstract
Este estudio explora el impacto emocional que una interfaz gráfica de usuario (GUI) bien diseñada puede tener en los jugadores al mejorar el contexto narrativo y manipular la percepción del entorno del juego. La investigación se centra en cómo el diseño de la GUI puede influir en las emociones y los procesos de toma de decisiones de los jugadores, alineando sus acciones con los objetivos previstos por el desarrollador. Mediante un análisis en profundidad de videojuegos clave con diseños de interfaz gráfica de usuario de los que aprender, el estudio pretende desarrollar un modelo que integre los factores emocionales en la interfaz. El resultado práctico incluye un prototipo jugable diseñado para demostrar estas conclusiones, en el que la interfaz gráfica se adapta activamente tanto a la narrativa como a las decisiones del jugador para crear una experiencia emocional inmersiva. Entre los principales retos que se plantean figura el estudio de la influencia de las interfaces gráficas en la inmersión emocional y el comportamiento en situaciones de toma de decisiones. La investigación contribuye al campo proponiendo un marco integral para el diseño de interacciones emocionales, aplicable a diversos géneros de juegos. Las conclusiones tienen implicaciones potenciales para el desarrollo de juegos en el futuro, sobre todo en los géneros que hacen hincapié en un profundo compromiso emocional, como el terror, los juegos de acción y los dramas interactivos.
Full text
Universidad San Jorge Escuela de Arquitectura y Tecnología Grado en Diseño y Desarrollo de Videojuegos Proyecto Final El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa Autor del proyecto: Pablo Ramos Gonzalo Director del proyecto: Dan Tarodo Cortes Villanueva de Gallego, 10 de septiembre de 2024
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 2 Este trabajo constituye parte de mi candidatura para la obtención del título de Graduado en Diseño y Desarrollo de Videojuegos por la Universidad San Jorge y no ha sido entregado previamente (o simultáneamente) para la obtención de cualquier otro título. Este documento es el resultado de mi propio trabajo, excepto donde de otra manera esté indicado y referido. Doy mi consentimiento para que se archive este trabajo en la biblioteca universitaria de Universidad San Jorge, donde se puede facilitar su consulta. Firma Fecha 10-Septiembre-24
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 3 Agradecimientos: Dan Tarodo Cortes
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 4 Índice Contents Índice.................................................................................................................................................4 Glosario ..............................................................................................................................................8 Resumen ............................................................................................................................................9 Abstract..............................................................................................................................................9 1. Introducción ................................................................................................................................. 11 Problema a resolver.................................................................................................................... 11 Motivación/Justificación .............................................................................................................. 11 Estructura .................................................................................................................................. 12 2. Contexto....................................................................................................................................... 13 Ludonarrativa ................................................................................................................................ 13 Teoría de las emociones de Cannon-Bard y cómo puede verse reflejada in-game: ............................. 13 3. Puntos clave para el diseño de una buena GUI................................................................................ 18 La Jerarquía/Composición ........................................................................................................... 19 El texto ...................................................................................................................................... 21 El color ...................................................................................................................................... 22 Los marcos y las formas ............................................................................................................. 25 El cursor .................................................................................................................................... 28 4. El estado actual de la GUI en los videojuegos relevantes seleccionados ............................................ 31 God of War: Ragnarok ................................................................................................................... 31 Atlus: Los reyes de la UI ................................................................................................................ 33 Los inicios ( Catherine ) ................................................................................................................ 33 La evolución (Desde Catherine hasta Persona 3 Reload ) ............................................................... 35 El Peak ludonarrativo ( Persona 3 Reload )..................................................................................... 41 Stardew Valley ............................................................................................................................... 47
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 5 Cyberpunk 2077 ............................................................................................................................ 49 5. Objetivos ...................................................................................................................................... 55 6. Metodología .................................................................................................................................. 56 7. Diseño del modelo......................................................................................................................... 58 8. Estudio económico ........................................................................................................................ 71 Coste de personal y material .......................................................................................................... 71 Coste Energético............................................................................................................................ 71 9. Resultados .................................................................................................................................... 72 10. Conclusiones ............................................................................................................................... 78 Proyección a futuro ........................................................................................................................ 80 Bibliografía ....................................................................................................................................... 81 Anexo I ............................................................................................................................................ 84
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 6 Indice de figuras Figure 1 UI reflejando un QTE [43] .................................................................................................... 15 Figure 2 QTE de Heavy Rain con multiples elecciones [42] .................................................................. 16 Figure 3 Atmósfera de Silent Hill [41] ................................................................................................. 17 Figure 4 Análogos [11] ...................................................................................................................... 23 Figure 5 Monocromáticos [11] .......................................................................................................... 23 Figure 6 Tríada [11] .......................................................................................................................... 23 Figure 7 Complementarios [11] .......................................................................................................... 24 Figure 8 Separación complementaria [11]........................................................................................... 24 Figure 9 Cuadrados [11] .................................................................................................................... 24 Figure 10 Compuestos [11]................................................................................................................ 25 Figure 11 Tonos [11]......................................................................................................................... 25 Figure 12 Representación de las formas[12] ....................................................................................... 27 Figure 13 Inventario de Destiny, junto al personaje, el cursor [40]....................................................... 29 Figure 14 Cursor moviéndose por una rejilla predefinida [39] .............................................................. 30 Figure 15 Cursores según acción [38]................................................................................................. 30 Figure 16 Menú de equipamiento [37] ................................................................................................ 32 Figure 17 Iconos genéricos sin tematizar [37] ..................................................................................... 32 Figure 18 Menú de equipamiento con una mejor composición [36] ...................................................... 33 Figure 19 Muestra de la UI de Catherine [35] ..................................................................................... 34 Figure 20 Modelo visible en menú [35] ............................................................................................... 35 Figure 21 Colores principales [13] ...................................................................................................... 36 Figure 22 Menú de pausa [33] ........................................................................................................... 37 Figure 23 UI de combate [34] ............................................................................................................ 38 Figure 24 Tienda reflejando la temática del personaje [33] .................................................................. 39 Figure 25 UI de tienda de Persona 4 [32] ........................................................................................... 40 Figure 26 UI de tienda de Persona 3 [31] ........................................................................................... 41 Figure 27 Menú de pausa de Persona 3 Reload [30] ............................................................................ 42 Figure 28 UI de combate [30]........................................................................................................... 43 Figure 29 Transición tematizada [30] ................................................................................................. 44 Figure 30 Menú de selección de personajes [30] ................................................................................. 45 Figure 31 UI de combate, selección de habilidad [30].......................................................................... 46 Figure 32 UI de visual novel [30] ..................................................................................................... 47 Figure 33 Menú tematizado [29] ........................................................................................................ 48 Figure 34 HUD ingame [29] ............................................................................................................... 49 Figure 35 Menú de implantes equipados [28]...................................................................................... 50 Figure 36 HUD durante una conversación ingame [28] ....................................................................... 51 Figure 37 El gameplay se ve obstruido por un glitch visual [28] ........................................................... 52 Figure 38 HUD durante un combate [28] ............................................................................................ 53 Figure 39 UI ambiental apareciendo en el HUD durante una conversación tranquila [28] ....................... 54 Figure 40 Prototipo inicial [21] ........................................................................................................... 59
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 7 Figure 41 Visual Novel típica [20] ....................................................................................................... 60 Figure 42 Imitación el estilo de una aplicación de mensajería [27] ....................................................... 61 Figure 43 La munición sobre el arma equipada, de forma que no obstaculizala visión en exceso [26] ..... 62 Figure 44 Indicador direccional de daño [20] ...................................................................................... 63 Figure 45 Indicadores de aguante contextuales [25] ........................................................................... 64 Figure 46 Prototipo más avanzado [21] .............................................................................................. 65 Figure 47 Ejemplo de menú en sistemas de escritura RTL (árabe) y LTR (inglés) [16] ........................... 66 Figure 48 Ejemplo de densidad visual [16].......................................................................................... 67 Figure 49 Alerta visual sobre el objetivo al que se quiere dirigir al jugador [22] .................................... 68 Figure 50 Ejemplo de fuente estilizada [24] ........................................................................................ 69 Figure 51 Ejemplo de cursor icónico y reconocible [23] ....................................................................... 70 Figure 52 Interfaz no final adaptada a un momento de calma [21]....................................................... 72 Figure 53 Interfaz durante un momento con tensión moderada [21] .................................................... 73 Figure 54 Interfaz con la tensión máxima emocional [21] .................................................................... 74 Figure 55 Muestra del código de establecer color [21] ......................................................................... 75 Figure 56 Muestra del método usado para transicionar desde el color actual [21] ................................. 75 Figure 57 Muestra del código que adapta morfológicamente los paneles de la UI [21]........................... 76 Figure 58 Código simple para probar diálogos [21].............................................................................. 77
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 8 Glosario Combo: Forma corta de Combinación, usada en videojuegos. GUI: Interfaz de usuario gráfica (Graphical User Interface) UI: Interfaz de usuario (User Interface) HUD: Head-Up Display, información que se muestra en la pantalla de juego mientras ocurre la acción en forma de iconos y números (también conocida como barra de estado) in-game: Dentro del juego LTR: Izquierda a derecha (Left-to-Right) Peak: Pico, culmen, se dice cuando algo ha llegado a su máximo esplendor. QTE: Quick Time Event, eventos muy breves que implican al jugador en la acción como si de un minijuego se tratase RTL: Derecha a izquierda (Right-to-left) Test: Pruebas UX: Experiencia de usuario (User eXperience)
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 9 Resumen Este estudio explora el impacto emocional que una interfaz gráfica de usuario (GUI) bien diseñada puede tener en los jugadores al mejorar el contexto narrativo y manipular la percepción del entorno del juego. La investigación se centra en cómo el diseño de la GUI puede influir en las emociones y los procesos de toma de decisiones de los jugadores, alineando sus acciones con los objetivos previstos por el desarrollador. Mediante un análisis en profundidad de videojuegos clave con diseños de interfaz gráfica de usuario de los que aprender, el estudio pretende desarrollar un modelo que integre los factores emocionales en la interfaz. El resultado práctico incluye un prototipo jugable diseñado para demostrar estas conclusiones, en el que la interfaz gráfica se adapta activamente tanto a la narrativa como a las decisiones del jugador para crear una experiencia emocional inmersiva. Entre los principales retos que se plantean figura el estudio de la influencia de las interfaces gráficas en la inmersión emocional y el comportamiento en situaciones de toma de decisiones. La investigación contribuye al campo proponiendo un marco integral para el diseño de interacciones emocionales, aplicable a diversos géneros de juegos. Las conclusiones tienen implicaciones potenciales para el desarrollo de juegos en el futuro, sobre todo en los géneros que hacen hincapié en un profundo compromiso emocional, como el terror, los juegos de acción y los dramas interactivos. Palabras clave: Interfaz de Usuario (UI), Teoría de las Emociones, Interfaz gráfica, Videojuegos, Diseño Ludonarrativo Abstract This study explores the emotional impact that a well-designed graphical user interface (GUI) can have on players by enhancing the narrative context and manipulating the perception of the in-game environment. The research focuses on how GUI design can influence players’ emotions and decision-making processes, aligning their actions with the developer's intended goals. Through an in-depth analysis of key video games with GUI designs to learn from, the study aims to develop a model that integrates emotional factors into the interface. The practical outcome includes a playable prototype designed to demonstrate
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 16 Figure 2 QTE de Heavy Rain con multiples elecciones [42] Otro tipo de aplicación, estas no tan relacionadas con una aplicación directa en la misma interfaz de usuario, podemos verla presente en títulos como Outlast [44] . El diseño de sonido y la música dinámica juegan un papel crucial en la generación de emociones. La música y los efectos de sonido responden en tiempo real a las acciones del jugador y a los eventos del juego. Durante una situación intensa, la música puede volverse más rápida y disonante, lo que provoca simultáneamente una respuesta fisiológica (aumento del ritmo cardíaco, tensión muscular) y una respuesta emocional (miedo, ansiedad). O en Silent Hill [41], el diseño del ambiente y la atmósfera del juego están cuidadosamente elaborados para inducir miedo y ansiedad. Los entornos oscuros, la niebla persistente y los sonidos inquietantes crean una atmósfera que provoca una respuesta fisiológica de miedo (sudoración, tensión) y una respuesta emocional consciente de terror y aprensión.
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 17 Figure 3 Atmósfera de Silent Hill [41]
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 18 3. Puntos clave para el diseño de una buena GUI Para tener claro lo que compone una buena interfaz básica veremos cómo ha actuado la industria y sus expertos en este campo. En primer lugar, tenemos que definir el concepto y el diseño de la interfaz de usuario y determinar qué componentes deben reaccionar y de qué manera. [4] Es decir, un primer paso para el desarrollo de una buena UI, la necesidad fundamental de conceptualizar y planificar la UI antes de cualquier desarrollo para garantizar que todos los elementos funcionen a futuro en armonía y facilitar la navegación y la interacción del usuario. Importando consejo de un campo adyacente como es el diseño de aplicaciones: Cuando inicias el diseño para una nueva idea de aplicación, ¿qué diseñas primero? Si es la barra de navegación en la parte superior de la página, estás cometiendo un error. La manera más fácil de encontrarte frustrado y atascado al trabajar en un nuevo diseño es comenzar tratando de 'diseñar la aplicación'. En lugar de comenzar con la cáscara, comienza con una pieza de funcionalidad real [5] Esto entra dentro de lo que se conoce por UX, hay que tener claro en todo momento que cualquier beneficio que aportemos en el diseño de UI se hace por el único motivo de mejorar la experiencia del usuario, así que comenzar por establecer que debe haber en cada sitio es el procedimiento lógico antes de introducirse en profundidad. 1. ¿Me dice esta interfaz lo que necesito saber en este momento? 2. ¿Es fácil encontrar la información que busco o tengo que buscarla por todas partes? (¿Están los menús anidados tan profundamente que ocultan información al jugador?) 3. ¿Puedo utilizar esta interfaz sin tener que leer las instrucciones en otro sitio? 4. ¿Son obvias las cosas que puedo hacer en esta pantalla? 5. ¿Necesito esperar a que se cargue la interfaz o a que se reproduzca una animación? 6. ¿Hay alguna tarea tediosa o repetitiva que pueda acortar (con un atajo de teclado, por ejemplo) o eliminar por completo? [6] El objetivo de esas preguntas no es otro que asegurarse de que se cumplan las siguientes condiciones:
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 19 1. La interfaz proporciona información relevante y contextual en cada momento, centrándose en la claridad y la utilidad inmediata de la UI, evitando la sobrecarga de información. 2. La UI permite al usuario encontrar rápidamente la información que necesita sin necesidad de invertir tiempo extra en memorizar menús. 3. La interfaz es intuitiva y no requiere documentación externa para ser entendida. La autoexplicación de la UI es clave para una buena experiencia. 4. La interfaz muestra claridad en las opciones y acciones disponibles para el usuario. Las opciones deben ser evidentes para evitar confusión. 5. La interfaz debe evitar tiempos muertos, el interés del usuario se pierde si espera sin ningún estímulo. 6. La interfaz tiene medidas para eliminar tareas innecesarias o repetitivas. Dentro de los fundamentos artísticos básicos se ha hecho una selección de los que se considera que tienen un papel más crucial en una interfaz. Aunque es cierto que cosas como la luz o el material/textura utilizados pueden tener un efecto en la experiencia narrativa y emocional, rara vez logran determinar la diferencia entre algo efectivo y algo no efectivo. La Jerarquía/Composición La jerarquía en una interfaz de usuario es vital, en otros campos también llamada composición o distribución: “Si tu imagen tiene una buena distribución de formas grandes (primarias), medianas (secundarias) y pequeñas (terciarias), la imagen resultante tenderá a ser más placentera a la vista” [12] Este principio se aplica directamente al diseño de UI en videojuegos, donde las formas primarias pueden representar elementos de navegación principales, las formas secundarias pueden ser botones y menús, y las formas terciarias detalles y elementos decorativos. Mantener una proporción adecuada entre estos diferentes tamaños no solo mejora la estética, sino que también facilita la navegación y la comprensión de la interfaz siempre y cuando haya cierto “hueco para respirar” entre los elementos y no sobresaturen los sentidos.
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 20 “Nuestro sistema visual disfruta agrupando objetos en otros más grandes y manejables. Así que las agrupaciones pueden hacer que una imagen sea más amigable para nuestro cerebro, y por lo tanto, más placentera a nivel estético” [12] Agrupar elementos relacionados, como botones de acción en un menú, no solo mejora la claridad y la usabilidad, sino que también contribuye a una experiencia visual más agradable, como podremos comprobar en los ejemplos seleccionados. En casi todas las obras de arte existe un fenómeno llamado "equilibrio". Uno de los principales factores que contribuyen al atractivo de una obra de arte, el equilibrio es el estado en el que las diversas fuerzas (pesos visuales) que actúan sobre el cuerpo se compensan entre sí y cada patrón visual finito tiene un centro de gravedad (punto focal) identificable de gravedad identificable (punto focal). El ejemplo más básico de equilibrio en pintura es la simetría, en la que los objetos situados a ambos lados de un punto focal coinciden en tamaño, forma o composición (sin embargo, esto no quiere decir que las obras de arte que carecen de simetría no sean intrínsecamente equilibradas). Como ya se ha mencionado, el peso visual es similar al peso en el mundo real, que se describe como la fuerza de gravedad que tira hacia abajo. Sin embargo, en las obras de arte, el peso visual es la fuerza psicológica que tira en cualquier dirección en función de la ubicación de las imágenes o los objetos en la composición. Aunque muchos factores contribuyen al peso visual, como la ubicación relativa, la forma y el tamaño, el objetivo principal de este experimento es el papel que desempeña el color en el equilibrio en las obras de arte abstracto. Según Rudolf Arnheim, autor del aclamado libro Art Arte y Percepción Visual , el equilibrio entre los colores se encuentra directamente en las proporciones de un área de color con respecto a otra. [7] Los principios de la Gestalt Ley de figura y fondo El principio de organización perceptual denominado "figura-fondo", propuesto por los psicólogos de la Gestalt y descubierto por Rubin alrededor de 1921, postula que la percepción tiende a estructurarse en función de bordes y contrastes. En este proceso, se destaca una figura que se percibe como dominante dentro de un campo perceptual, la cual se contrapone a un fondo menos prominente.
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 21 Ley de pregnancia o buena forma Este principio sostiene que la experiencia perceptiva tiende a adoptar las formas más simples y organizadas posibles. Las partes de una figura que presentan una "buena forma" o que sugieren una dirección o destino común se perciben como unidades autónomas dentro del conjunto. Esta ley facilita la identificación de figuras, incluso cuando estas aparecen levemente transformadas o desde diferentes ángulos, y permite desentrañar figuras complejas que podrían resultar confusas, manteniendo la percepción de las propiedades esenciales de "buena forma" o destino común. La ley de la buena forma incluye varios subprincipios, como las leyes de cierre, contraste, proximidad, similitud, continuidad y movimiento común, que guían la mente en la atribución de la forma más adecuada. Sin embargo, en el caso de ilusiones ópticas paradójicas, la mente puede intentar asignar formas conocidas a partes de una figura desconocida, lo que a veces resulta en errores perceptuales cuando se intenta integrar la totalidad. [8] El texto Los formatos de texto utilizados para lectura llevan años siendo estudiados, en el caso de videojuegos, para maximizar la legibilidad de la UI, es recomendable usar el estilo de texto tipo "billboard" debido a su desempeño superior en términos de velocidad y precisión de lectura. También se menciona que la presentación negativa (texto claro sobre fondo oscuro) es más efectiva que la positiva (texto oscuro sobre fondo claro). [9] Este tipo de texto es grande, claro y con presentación negativa, es decir, texto claro sobre fondo oscuro, lo que lo hace ideal para interfaces de videojuegos donde los jugadores necesitan procesar información rápidamente. Como todo en el diseño de UI es muy dependiente del tipo de juego en desarrollo, y este campo en concreto es relativamente flexible en todo lo que no quiera la rápida interacción. La tipografía también es un factor a considerar, ya que de por sí permiten una amplia gama de expresión mediante la misma. Si deseas un aspecto elegante o clásico, puedes incorporar un tipo de letra con serifa en su diseño. Si quieres un aspecto más juguetón, puedes utilizar una sin serifa redondeada, si prefieres un aspecto más sencillo, o quieres que otros elementos le aporten personalidad, una fuente sin serifa neutra puede ser la mejor opción. [5]
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 22 Elegir la tipografía adecuada según el contexto y la audiencia del videojuego puede ser la diferencia clave que determine la inmersión y del usuario. El color El color juega un papel expresivo fundamental en el diseño de UI, no solo por su impacto visual, sino también por sus connotaciones culturales y emocionales. La significancia del color varía considerablemente entre culturas. Por ejemplo, en la cultura occidental, el rojo suele tener connotaciones negativas, como peligro o advertencia, mientras que en la cultura oriental, el mismo color puede tener asociaciones mucho más positivas, simbolizando buena fortuna y celebración. Esta variabilidad cultural implica que los diseñadores deben ser muy conscientes del contexto cultural de su audiencia al seleccionar paletas de colores para asegurar que los mensajes visuales sean interpretados de manera adecuada y efectiva. Chevreul, en su obra de 1839, proporciona una profunda comprensión de cómo los colores interactúan a través del contraste. ● Contraste simultáneo, que aparece en dos colores vistos uno al lado del otro. La luz y el fondo alteran la percepción del color, creando efectos de relieve. Cuando dos colores se ven juntos, cada uno influye en la percepción del otro, lo que es evidente en la contemplación de fenómenos naturales. ● Contraste sucesivo, las sombras proyectadas por un objeto bajo la luz anaranjada del sol al atardecer pueden parecer azules. Esto ocurre porque después de observar la luz anaranjada, el ojo tiende a ver el color complementario (azul) en las sombras. ● Contraste mixto, implica la interacción entre el contraste simultáneo y el sucesivo. Chevreul menciona que cuando observamos dos colores simultáneamente, especialmente si son complementarios, puede ser difícil apreciar correctamente sus tonos individuales sin verlos por separado. Si un color es más fuerte que el otro, la percepción del color más débil puede estar influenciada o modificada por el más fuerte. [10] También es importante destacar la intención de uso de las armonías de colores de cara a su selección, ya que es un tema muy complejo en sí mismo tomaré por referencia su estándar actual. Adobe como mayor
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 23 representativo de la industria del color de cara al consumidor actual muestra en su web [11] las siguientes armonías: Figure 4 Análogos [11] Figure 5 Monocromáticos [11] Figure 6 Tríada [11]
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 24 Figure 7 Complementarios [11] Figure 8 Separación complementaria [11] Figure 9 Cuadrados [11]
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 25 Figure 10 Compuestos [11] Figure 11 Tonos [11] Los marcos y las formas El diseño de GUI no solo se basa en colores y tipografías, sino también en el uso efectivo de formas geométricas para comunicar ideas y emociones. Las formas tienen asociaciones psicológicas que afectan cómo los usuarios perciben y responden a los elementos visuales en la interfaz. Como estudié en clase podemos encontrar tres formas predominantes: Círculos Los círculos están asociados con cualidades positivas y amistosas. Son percibidos como suaves y accesibles. En una UI, el uso de círculos puede transmitir: ● Amabilidad
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 32 Figure 16 Menú de equipamiento [37] En God of War: Ragnarok , se observa una falta de cuidado en la integración estética y temática de la GUI con el ambiente nórdico del juego. Los menús y los iconos carecen de una tematización adecuada. Esta falta de cohesión estética reduce la inmersión del jugador, ya que los elementos de la interfaz no reflejan el ambiente ni la narrativa del juego.Es especialmente notable que algunos iconos ni siquiera han sido mínimamente tematizados, son representaciones universales inalteradas, como el caso de los dos siguientes: Figure 17 Iconos genéricos sin tematizar [37]
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 33 Para comparar aquí tenemos una figura de la UI de God of War (2018) [36] Figure 18 Menú de equipamiento con una mejor composición [36] Comparando con la interfaz de God of War (2018), se puede notar una gran diferencia en cómo se presenta la información y la atención al detalle estético. En el menú de la precuela, el diseño permite un espacio suficiente entre los elementos, lo que facilita la navegación y evita la sensación de sobrecarga visual. Además, la interfaz se integra mejor con el ambiente temático del juego, reflejando la personalidad y el entorno personal de Kratos. Atlus: Los reyes de la UI Los inicios ( Catherine ) Atlus ha demostrado un dominio excepcional en el diseño de interfaces de usuario, comenzando con juegos como Catherine [35]. Catherine es un título que se destaca por su estilo visual único y su primera integración entre la interfaz y la narrativa del juego en la corriente más moderna de diseño de la empresa. Los menús y HUD no solo son funcionales, sino que también refuerzan el tono surrealista y psicológico del juego, utilizando un rosa muy prominente y tipografías distintivas que se alinean con la experiencia onírica
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 34 y perturbadora que ofrece. En este sentido, los elementos de la UI en Catherine son diseñados para provocar reacciones emocionales que refuercen la narrativa y la experiencia del juego. Figure 19 Muestra de la UI de Catherine [35] Según Masayoshi Sutou: Catherine fue la primera vez que experimentamos y, por supuesto, creamos un modelo CG animado dentro de la GUI y disfruté mucho haciéndolo. [4]
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 35 Figure 20 Modelo visible en menú [35] Este concepto de utilizar un modelo de CG animado así como un color dominante se convertiría en la base de los posteriores diseños. Ya que el color dominante siempre va a tener un impacto visual notable, además de aportar contexto, aunque generalmente dependiente de la cultura, en base al entendimiento de ese mismo color en relación a los temas de los juegos. Por ejemplo, el uso del color rosa puede tener diversas connotaciones emocionales. En Catherine, este color se utiliza no solo por su impacto visual sino también para crear una atmósfera que refleja la confusión y la tensión emocional del protagonista. El rosa, siendo un color que puede evocar tanto la dulzura como la inquietud, complementa perfectamente la dualidad emocional del juego. La evolución (Desde Catherine hasta Persona 3 Reload ) Desde Catherine , Atlus ha continuado refinando su enfoque en la UI, alcanzando nuevas alturas con la serie Persona . Persona 5 [33], en particular, ha sido ampliamente elogiado por su interfaz estilizada y dinámica. Cada menú, transición y elemento de HUD está diseñado con una atención meticulosa al detalle,
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 36 utilizando una paleta de colores audaz y animaciones fluidas que hacen que navegar por la interfaz sea una experiencia placentera y coherente con el tema del juego que determine su identidad visual. Su uso de animaciones profesionales con interés visual y valor de entretenimiento en las mismas también se encargan de asegurarse de que mantienen al jugador involucrado, incluso durante las transiciones de menú. La evolución continúa con Persona 3 Reload [30], que promete llevar estos principios aún más lejos, combinando la nostalgia del original con mejoras modernas en la usabilidad y el diseño visual. La UI de la serie Persona tiene la función de construir un diseño gráfico que guíe el proyecto, manteniendo al mismo tiempo la función original de la IU para la transmisión de información. Sutoh declaró que tiene la importante misión de «crear el paquete para el título». En primer lugar, el «color» es importante para crear la IU. Un aspecto que sigue siendo fuerte como primera impresión para la gente es el color, por lo que primero se decide el color principal. Una vez decidido el color principal, se hace el logotipo del título y se decide el tipo de letra clave. Figure 21 Colores principales [13]
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 37 Persona 3 era azul, Persona 4 era amarillo, Persona 5 era rojo, y el color principal de Cathrine era un rosa chocante. Combinando colores y formas que se ven a menudo en la vida cotidiana, es más fácil conseguir algo que destaque. [13] Figure 22 Menú de pausa [33] Persona 5 incorporó un gran dinamismo para mantener interesante la interfaz y convertir tiempos muertos en entrenamiento directo.En Persona 5 , el rojo no solo es un color principal, sino que también se usa para transmitir urgencia y dinamismo, aspectos que se alinean con la narrativa del juego. La tipografía, particularmente importante a partir de este título, refuerza esta identidad visual con el estilo Pop-Punk incluyendo letras que parecen recortes de periódicos
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 38 Figure 23 UI de combate [34] También desde Persona 3 comenzaron a incorporar interfaces específicas de vendedores, que ayuden a reforzar la experiencia emocional en cada local. En el caso del 5 una de las más destacadas es la tienda de de armas Iwai
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 39 Figure 24 Tienda reflejando la temática del personaje [33] Que está considerablemente más refinada que versiones de tiendas en anteriores entregas pero no implica que esta tienda de Persona 4 no te haga sentir que estás en un restaurante
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 40 Figure 25 UI de tienda de Persona 4 [32] En el Persona 3 original las tiendas no tenían tanta variación de color o elementos reconocibles pero aun asi eran visualmente distintas.
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 41 Figure 26 UI de tienda de Persona 3 [31] El Peak ludonarrativo ( Persona 3 Reload ) Persona 3 Reload representa el punto culminante del enfoque de Atlus hacia una UI ludonarrativa. La interfaz no solo facilita la interacción del jugador, sino que también sirve como una extensión de la narrativa. Los menús de gestión de tiempo, las interfaces de combate y las opciones de diálogo están diseñadas para ser intuitivas y atractivas, mientras que simultáneamente refuerzan los temas de vida, muerte y el paso del tiempo, que son centrales a la trama del juego. Este enfoque integrado garantiza que la UI no se sienta como una capa separada, sino como una parte de la experiencia de juego integrada.
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 48 Figure 33 Menú tematizado [29] La consistencia estilística de la UI es crucial para la experiencia del usuario. La elección de colores marrones y anaranjados que conforman una paleta que refleja su temática rural. Los colores cálidos y terrosos no solo son agradables a la vista, sino que también refuerzan la atmósfera del juego. Además de elementos visuales que recuerdan a la naturaleza permiten que la interfaz se "desaparezca" y se funda con el entorno del juego hasta que el jugador la necesita. Todo esto sin necesidad de recurrir a una interfaz dinámica más compleja.
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 49 Figure 34 HUD ingame [29] Los iconos en la pantalla, como el reloj, el medidor de energía y las notificaciones de misiones, son claros y útiles, evitando la sobrecarga de información. La UI también es autoexplicativa; los jugadores no necesitan recurrir a documentación externa para entender cómo funciona el juego. Las opciones y acciones disponibles son evidentes, como las herramientas accesibles desde la barra de acción. Todo esto con una buena distribución que no provoca problemas en lectura rápida. Cyberpunk 2077 Cyberpunk 2077 [28] presenta un caso de exceso en la complejidad visual de la UI que no siempre se alinea con el contexto jugable, siendo este un juego de acción frenético. La interfaz está cargada de elementos visuales complejos, “hologramas” y detalles cosméticos futuristas que, aunque son impresionantes a la vista, pueden dificultar la lectura y la comprensión durante un combate tan rápido. La velocidad del gameplay de Cyberpunk 2077 requiere una HUD que permita una rápida comprensión y acceso a la información crítica, algo que la interfaz actual del juego no siempre logra. Esta disonancia puede llevar a momentos de frustración donde la estética visual interfiere con la funcionalidad, perjudicando la experiencia del jugador. En general la tematización de este título sí que sería acorde con el contexto
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 50 narrativo en el que se encuentra, un mundo cibernético, asociado a este hecho mediante su diseño similar a circuitos electrónicos. Figure 35 Menú de implantes equipados [28] Y en la mayoría de pantallas la tematización no interfiere, por ejemplo, los momentos calmados ingame ocultan elementos irrelevantes de la UI y permiten tiempo al jugador para entender visualmente lo que tiene enfrente. Además jerárquicamente es lo suficientemente consistente y generalmente muestra un layout que no requiere memorización.
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 51 Figure 36 HUD durante una conversación ingame [28] Es específicamente en el HUD durante el combate que se debería haber reducido este aspecto. La interfaz además muestra numerosos glitches (errores) en pantalla, reforzando el sentimiento de hostilidad hacia el jugador, pero el tener aún más cosas moviéndose en el espacio en el que se encuentra la información a la que necesitas un acceso rápido no ha sido la mejor de las decisiones ya que provoca una sobresaturación e imposibilidad de acceder a la información en momentos en los que se requiere de forma urgente.
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 52 Figure 37 El gameplay se ve obstruido por un glitch visual [28] Podríamos decir que la contribución a la experiencia final de usuario no sobrepasa la contribución que haría una interfaz más legible, por lo tanto esta última debería haber sido elegida en estas situaciones. En Cyberpunk 2077 , una UI más legible durante el combate habría permitido una respuesta más eficiente del jugador, mejorando tanto la experiencia emocional como la respuesta fisiológica. Cyberpunk 2077 muestra numerosos elementos que se muestran y ocultan de forma dinámica, y desde luego el combate es un factor que visiblemente afecta a la interfaz, así que no debería haber supuesto problema hacer ligeras adaptaciones una vez en combate para solventar este problema.
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 53 Figure 38 HUD durante un combate [28] En momentos narrativos, Cyberpunk 2077 muestra una excelente interfaz ambiental, que contribuye a la inmersión del jugador sin interferir en la jugabilidad. Este tipo de interfaz, que no tiene una función práctica más allá de la evocación emocional, y ha venido y crecido desde la propia industria del entretenimiento en medios como el cine y obras como Star Trek , Star Wars o Evangelion , está bien implementada y logra su propósito de reforzar el ambiente del juego. No suele ser común ver este tipo de interfaces cuya única finalidad es cosmética en obras que no sean de ciencia ficción, pero cuando están presentes toman mucha relevancia a la hora de aportar narrativa y emocionalmente.
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 54 Figure 39 UI ambiental apareciendo en el HUD durante una conversación tranquila [28] En esta figura toda la UI de Arasaka (los documentos corporativos de esta empresa) pretende hacerte sentir como un verdadero agente que trabaja en un departamento de inteligencia. En este caso concreto, el inicio de un personaje “corpo” cuyo rol es ese mismo dentro de la empresa, es exactamente lo que se buscaba.
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 55 5. Objetivos Este proyecto se enmarca en un ámbito interdisciplinar que tiene en cuenta la estética en relación a la ludonarrativa, analizando el videojuego como medio artístico capaz de evocar emociones diversas en los jugadores. El foco de este proyecto es demostrar que el HUD en un juego prototípico es capaz de alterar la toma de decisiones de un jugador con un mínimo de inversión emocional en el mismo. Para ello se analizará la relevancia de la interfaz gráfica de usuario a la hora de construir un escenario de decisiones para después poner en práctica los hallazgos en un prototipo de visual novel realizado específicamente para este proyecto. Este proyecto tiene un enfoque práctico, de forma que al terminarlo el alumno tenga un documento que poder incorporar a su portfolio personal que demuestre su destreza en la integración de estética a nivel ludonarrativo. Los objetivos del proyecto son: 1. Realizar un análisis previo del estado del arte sobre ludonarrativas y teorías de las emociones. 2. Diseñar un modelo de construcción de GUI que atienda a factores emocionales 3. Construir un prototipo jugable en Unity con diferentes interfaces que sirva para estimar el impacto emocional de las decisiones de un jugador ideal respecto de la GUI.
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 56 6. Metodología El enfoque de este proyecto, dada su naturaleza interdisciplinar entre las Ciencias Sociales, Artes visuales y la Tecnología, sigue un esquema secuencial y planificado, dividido en las siguientes fases: ● Revisión bibliográfica de fuentes ● Análisis del discurso ludonarrativo ● Diseño del modelo ● Desarrollo del prototipo en Unity Revisión Bibliográfica de Fuentes Académicas Se comenzó con una investigación teórica sobre los temas clave del proyecto, enfocándose en ludonarrativa, la teoría de las emociones y fundamentos artísticos aplicables. Para ello se realizó una búsqueda de información en bases de datos académicas contrastadas (Google Scholar y Catálogo USJEBSCO) priorizando materiales en inglés debido al carácter universal del idioma y la actualidad y disponibilidad de información relevante al respecto. Análisis del discurso Como complemento al marco teórico, se realizó un análisis cuantitativo del discurso entre varios videojuegos que sirviesen como referencia en cuanto al diseño de interfaces. Este análisis se centra en la efectividad del HUD en la toma de decisiones y en la inmersión del jugador y en cómo la interfaz influye en la percepción emocional del jugador durante momentos clave del juego. El corpus de juegos analizados fue seleccionado en base a criterios representativos de una variedad de géneros, estilos, y presupuestos, con el objetivo de identificar patrones y principios generales aplicables al prototipo. Los juegos elegidos fueron: ● God of War: Ragnarok ● Catherine ● Persona 3 ● Persona 4 ● Persona 5 ● Persona 5 Royal ● Persona 3 Reload ● Stardew Valley
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 57 ● Cyberpunk 2077 En el análisis se utilizaron como marcadores los ítems extraídos del marco teórico: ● La jerarquía ● El texto ● El color ● Los marcos y las formas ● El cursor Diseño del modelo: En base a lo recopilado en el marco teórico y las conclusiones extraídas se realizó un modelo de diseño de buenas prácticas a la hora de completar el desarrollo de una GUI con el enfoque de la transmisión emocional mediante la misma. Este modelo está diseñado para no estar limitado al prototipo jugable pero ha sido utilizado en su construcción como prueba de su capacidad. Desarrollo del Prototipo en Unity: El prototipo jugable, una visual novel, fue desarrollado utilizando Unity. Se siguió un enfoque Waterfall, dada la pequeña escala del proyecto y la necesidad de un proceso ordenado y bien definido. Las etapas se separaron en las siguientes Diseño del Prototipo: Planteamiento de diferentes versiones de la interfaz gráfica, con variantes que afecten visualmente y emocionalmente al jugador de una manera distinta. Implementación Técnica: Desarrollo del prototipo, con una integración de los elementos estéticos y narrativos en la UI y permitiendo la adaptabilidad para pasar entre las diferentes versiones de la interfaz gráfica de la etapa previa.
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 64 Figure 45 Indicadores de aguante contextuales [25] Una buena norma general es que en géneros donde la acción es más frenética, la interfaz debe minimizar la distracción y maximizar la accesibilidad de la información crítica. Por lo tanto, la ubicación estratégica de indicadores clave, como la cantidad de munición o la salud, no solo debe ser rápida de leer sino también intuitiva. Por otro lado, en juegos donde la narrativa tiene un peso significativo, como en las aventuras gráficas o las novelas visuales, la interfaz debe facilitar la inmersión y la comprensión emocional demostradas en pantalla. La UI debe ser un conducto para la experiencia emocional y narrativa del juego, y no simplemente un conjunto de elementos funcionales. Esto implica una consideración minuciosa del flujo de información y cómo cada elemento puede contribuir a la inmersión o al impacto emocional. Y posteriormente a la realización de un prototipo hay que verificar que logra lo que pretende. Para asegurar que el diseño sea efectivo en su propósito, es importante realizar pruebas iterativas con usuarios. A través de estas pruebas, se pueden identificar posibles puntos de fricción o desalineación entre la intención del diseño y la experiencia real del jugador
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 65 Figure 46 Prototipo más avanzado [21] Una de las decisiones clave en la interfaz de juegos que incluyen diálogos es la colocación de lo que dice el personaje en relación con lo que dice el jugador. En un sistema de lectura de izquierda a derecha (LTR), común en la cultura occidental, los diseñadores pueden colocar el diálogo del personaje a la izquierda y las opciones o respuestas del jugador a la derecha. Esto se basa en la fluidez cognitiva del usuario, aprovechando el hábito de lectura que comienza en el lado izquierdo de la pantalla. Colocar el texto en este orden permite una narrativa que fluye de manera natural para el lector, facilitando la comprensión. Sin embargo, en contextos donde se utiliza un sistema de lectura de derecha a izquierda (RTL), como en algunas culturas orientales, la disposición puede invertirse para alinearse con las expectativas cognitivas de esos jugadores. Posiblemente estos apartados afecten tanto en la composición que habrá que elegir entre hacer dos interfaces diferentes adaptadas a ambos tipos de escritura o forzar la interfaz en uno de los dos sacrificando una mejor experiencia de una de las partes. Por suerte en la mayoría de casos podemos simplemente centrar el texto y ajustar el tamaño de fuente respecto a la densidad requerida por el sistema de escritura
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 66 Figure 47 Ejemplo de menú en sistemas de escritura RTL (árabe) y LTR (inglés) [16]
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 67 Figure 48 Ejemplo de densidad visual [16] El uso del color en la interfaz es otra herramienta poderosa que los diseñadores deben seleccionar para influir en las emociones y percepciones del jugador. Los colores como verde, amarillo y rojo tienen connotaciones culturales profundamente arraigadas, especialmente en la cultura occidental. El verde se asocia comúnmente con seguridad, aceptación y positividad; el amarillo con advertencia, precaución o incertidumbre; y el rojo con peligro, rechazo o acciones negativas. Estas asociaciones permiten a los diseñadores guiar las decisiones del jugador y manipular su estado emocional en momentos clave del juego. Sin embargo, es fundamental que los diseñadores consideren las variaciones culturales en la percepción del color. En algunas culturas orientales, el rojo puede estar asociado con la buena fortuna y la celebración, lo que podría transformar una elección que en Occidente sería percibida como peligrosa en algo positivo. Las diferencias culturales siempre van a estar presentes, aunque los jugadores jóvenes expuestos a un mundo más globalizado disponiendo de internet seguramente tengan menos problemas. Eso no evita que en cualquier caso haya que elegir la base cultural que vamos a usar. Casi siempre dependerá del mercado objetivo, ya que algunas empresas tendrán más interés de entrar, por ejemplo, en el mercado chino, favoreciéndoles más el uso de los colores vinculados a la cultura china. También es bueno entender que aunque el mercado objetivo sea occidental, si estamos diseñando algo de temática oriental, contextualmente tiene más sentido usar colores de la cultura que intentamos plasmar, ya que aquí entraría también las expectativas que tienen los usuarios al comprar un juego con esa temática. Además de las preferencias culturales específicas, los diseñadores deben tener en cuenta las tendencias universales de percepción y las mejores prácticas de usabilidad. Por ejemplo, independientemente de la cultura, los colores brillantes como el rojo o el amarillo tienden a llamar más la atención que los colores más apagados, lo que puede ser aprovechado para destacar opciones o alertas en la interfaz.
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 68 Figure 49 Alerta visual sobre el objetivo al que se quiere dirigir al jugador [22] En el caso de querer fomentar un sistema de monetización, indicar novedades mediante este uso de colores brillantes puede guiar la atención del jugador hacia lo que nosotros queremos. En el caso de la novela visual, hacer esto podría ser contraproducente ya que condicionaría al jugador tener una opción diferente a las demás, con el fin de analizar emociones sin interferir es mejor evitar estos elementos inicialmente. Siguiendo la línea de plasmar un entorno neutro para evitar alterar la percepción de la interfaz, aunque la fuente tipográfica tiene un impacto muy importante en el resultado, para este modelo en particular se utilizará la predeterminada que incluye Unity, que no se aleja de la fuente de una interfaz de una aplicación cualquiera, lo mismo se hará con el cursor. Ya que esta interfaz está diseñada para su uso en PC o en móviles, el uso del cursor del sistema, que es bastante neutro de por si, será suficiente. En el caso de los móviles no hay cursor en absoluto así que no es relevante. En este caso, el enfoque en la neutralidad de la interfaz a través de la elección de fuentes y cursores predeterminados es una decisión estratégica que permite un análisis más preciso de la eficiencia compositiva sin la interferencia de elementos temáticos. Sin embargo, hay algunas consideraciones que un diseñador de UI de videojuegos debería tener en cuenta al aplicar este enfoque en diferentes contextos de juego.
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 69 El uso de una tipografia neutra y no estilizada tiene sentido en un modelo que busca evaluar la eficiencia de una composición sin influencias externas. Las fuentes tipográficas tienen un impacto considerable en la percepción del usuario; pueden evocar emociones, sugerir un tono específico y reforzar la ambientación del juego. Por lo tanto, al optar por una fuente neutral, se elimina una variable significativa que podría sesgar los resultados del análisis, permitiendo que la evaluación se centre exclusivamente en el diseño espacial, las formas, y los colores. Mientras que este enfoque es válido para pruebas y modelos analíticos, los diseñadores deben considerar que, en la fase final de desarrollo, la tipografía debe ser cuidadosamente seleccionada para complementar el estilo artístico y el tono del juego. En juegos donde la narrativa y la ambientación son clave, como los RPGs o las novelas visuales, una fuente muy estilizada seguramente beneficie a la experiencia final de usuario, como todo esto depende del género, y en otro juego más centrado en acción una fuente clara es preferible. Figure 50 Ejemplo de fuente estilizada [24] Al igual que con las fuentes, los cursores pueden transmitir una gran cantidad de información sobre el estilo y el contexto del juego. Un cursor altamente estilizado puede sugerir un entorno futurista, fantástico o nostálgico, mientras que un cursor estándar ofrece una experiencia que se siente más neutral y desapasionada. En un modelo diseñado para probar estas cosas concretas de la interfaz, el uso del cursor predeterminado es apropiado, ya que evita que los jugadores interpreten subconscientemente el estilo del cursor como parte del juego. Esto permite que el feedback se centre exclusivamente en el objetivo.
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 70 Figure 51 Ejemplo de cursor icónico y reconocible [23] El objetivo es que en el mejor de los casos el juego sea reconocible sólamente por el cursor, varios juegos logran este efecto en jugadores. En muchos juegos de PC el cursor puede llegar a ser visible mucho tiempo en el juego, aprovechar esto como ventaja para que sea un elemento icónico memorable y acorde al resto de la interfaz puede llevar a futuro a que los jugadores lleguen a recordarlo con nostalgia.
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 71 8. Estudio económico Coste de personal y material Tomando el por referencia los sueldos de un diseñador de UI (Normalmente el puesto incluye la ux asi que más incluidos también los salarios diseñador de UI/UX) Junior podemos tomar como referencia una media de 37.000USD anuales [17] medidos a nivel internacional debido a la accesibilidad de trabajo remoto en este campo. Si lo ajustamos al coste de vida de aquí podríamos apuntar a un salario anual de 40.000€ Hay que añadir además el coste del sistema para el desarrollo del prototipo (2.000€) y estimando 3 meses de desarrollo del prototipo el salario ocuparía 10.000€. Juntándose para una suma final de 12.000€ Coste Energético Consumo energético: Según estimaciones, un PC de pruebas de alta gama consume aproximadamente 600 kWh anuales. A un costo medio de electricidad de 0.20€ por kWh en Europa, el coste de 300 horas de utilización de energía, teniendo en cuenta que el PC de alta gama usa 0.068kWh, cada 100 horas usaría unos 7kWh, es decir en total se usarían 21kWh a 0.20/kWh dando un total aproximado de 4€ [19] Coste de personal 10.000€ Coste de equipo 2.000€ Coste energético 4€ Sumatorio 12.004€
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 72 9. Resultados El desarrollo del prototipo de novela visual se llevó a cabo siguiendo los principios establecidos en la fase de modelado. Se logró implementar un sistema de interfaz adaptable, diseñado para amplificar la narrativa y las emociones del jugador a través de una UI que responde a las decisiones del usuario. El prototipo final incorpora una serie de elementos visuales que se ajustan de manera dinámica al contexto narrativo. En narrativas interactivas, donde las decisiones del jugador afectan el desarrollo de la historia, es preferible que la UI refleje estos cambios de manera inmersiva. Así que durante el desarrollo del modelo se incorporaron los siguientes comportamientos: Colores adaptativos: La UI utiliza una paleta de colores que varía en función del nivel de tensión. Por ejemplo, en situaciones de baja tensión, se emplean colores suaves y tranquilos. A medida que la tensión aumenta, los colores se vuelven más intensos, con transiciones hacia tonos cálidos o saturados que reflejan la creciente urgencia o peligro. Al cambiar la tensión se aplica una transición suave, los colores no cambian abruptamente para que el cambio de estado sea fluido y natural. Esto evita distracciones bruscas y evitan ser disruptivos. Figure 52 Interfaz no final adaptada a un momento de calma [21]
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 73 Los colores fueron seleccionados teniendo en cuenta sus connotaciones emocionales occidentales: ● Verde Suave: Utilizados en situaciones de baja tensión para inducir calma y estabilidad. ● Amarillo: Empleados en situaciones de tensión moderada para representar advertencia o incertidumbre. ● Rojo: Aplicado en momentos de alta tensión para simbolizar peligro o urgencia. Estos significados son explotados para manipular emocionalmente al jugador, alineando la experiencia visual con el contenido narrativo. Figure 53 Interfaz durante un momento con tensión moderada [21] Formas adaptativas: Los elementos de la UI pueden cambiar su forma para reflejar el estado emocional del juego. En escenarios de baja tensión, los bordes de los paneles y botones pueden ser más redondeados y cuando la tensión aumenta, estos elementos se vuelven más angulares.
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 80 Proyección a futuro Queda pendiente probar este prototipo sobre usuarios y explorar cómo los insights y conclusiones extraídas pueden ser aplicados en la evolución del diseño de interfaces en juegos narrativos y más allá u otros posibles prototípos futuros. Más específicamente, el trabajo establece una base para futuras investigaciones y desarrollos en las siguientes áreas clave: Mejoras en Experiencias Emocionales: A partir de las conclusiones, futuros desarrollos podrán centrarse en cómo optimizar la UI para no solo transmitir información, sino también para provocar y dirigir emociones específicas en el jugador. Esto podría abrir nuevas oportunidades en géneros de juegos que buscan una inmersión emocional profunda, como los juegos de terror o los dramas interactivos. Especialización Cultural de la UI: El trabajo destaca la necesidad de adaptar las interfaces a las percepciones culturales del jugador, un aspecto que podría ser aún más relevante con la creciente globalización. Las futuras investigaciones podrían explorar cómo realizar estas adaptaciones de manera más efectiva, utilizando tecnologías como la inteligencia artificial para personalizar la UI en tiempo real según la cultura o preferencias del usuario. Exploración de la Ludonarrativa más en profundidad a través de la UI: La relación entre UI y narrativa puede ser un campo fructífero para el diseño de juegos. Futuras investigaciones podrían ahondar en cómo interfaces más sofisticadas y con mayor capacidad de adaptación narrativa pueden cambiar la manera en que se perciben las historias en los videojuegos. Posiblemente el desarrollo de más modelos y su posterior testeo sobre usuarios pueden ser de utilidad a todo el mundo. A día de hoy se realizan numerosas pruebas de este estilo en espacios cerrados de empresas privadas quizás se podría explorar el desarrollo de una red para la compartición del conocimiento aprendido durante las pruebas de estos prototipos. Adicionalmente es inevitable que las interfaces cambien con el tiempo, asi que es posible que este trabajo pudiera revisarse o ser reemplazado para contemplar las novedades de las interfaces del futuro.
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 81 Bibliografía 1. E. Swain, "In Defense of Ludonarrative Dissonance," The Game Critique, Aug. 25, 2010. [Online]. Disponible en: https://web.archive.org/web/20210827000345/https://www.thegamecritique.com/recentposts/in-defense-of-ludonarrative-dissonance/2283/ . [Úlitmo acceso: Sep. 1, 2024] 2. A. Cuadrado Alvarado y A. J. Planells, Ficción y videojuegos: teoría y práctica de la ludonarración , Barcelona, Spain: Editorial UOC, 2020. [Online]. Disponible en: https://elibro.net/es/ereader/usj/135287?page=40 . [último acceso: Sep. 1, 2024]. 3. C. Nickerson, "What is the Cannon-Bard Theory?" Simply Psychology , 2023. [Online]. Disponible en: https://www.simplypsychology.org/what-is-the-cannon-bard-theory.html. [Último acceso: Sep. 1, 2024]. 4. A. Alex, "Persona 5 Developer Interview About UI Design, Sound Design and Music" Persona Central , Sep. 11, 2016. [Online]. Disponible en: https://personacentral.com/persona-5-interviewui-design-sound-music/. [Último acceso: Sep. 1, 2024]. 5. S. Schoger and A. Wathan, Refactoring UI . 2018. [eBook]. 6. J. Turunen, "The Good, the Bad and the Unpleasant: A Study of Graphical User Interfaces in Video Games," M.S. thesis, Tampere University of Technology, Tampere, Finland, 2017. [Online]. Disponible en: https://trepo.tuni.fi/handle/123456789/24564. [Último acceso: Sep. 1, 2024]. 7. T. James, "The Color and the Shape: Analyzing Perceived Balance & the Weights of Colors in Abstract Painting," Briarcliff H.S., NY, 2007. [Online]. Disponible en: https://www.briarcliffschools.org/uploaded/High_School/Science_Research/Portfolios_2007_Senio rs/2007_Tom_James_paper.pdf. [Último acceso: Sep. 1, 2024] 8. D. Duero, "La Gestalt como teoría de la percepción y como epistemología: aportes y desarrollos," Revista de la Universidad Nacional de Córdoba , pp. 1-35, 2003. [Online]. Disponible en: http://psicologiamonserrat.zonalibre.org/Monserrat%20(Gestalt).pdf. [Último acceso: Sep. 1, 2024] 9. J. Jankowski, K. Samp, I. Irzynska, M. Jozwowicz, y S. Decker, "Integrating Text with Video and 3D Graphics: The Effects of Text Drawing Styles on Text Readability," en Proceedings of the SIGCHI Conference on Human Factors in Computing Systems , 2010. [Online]. Disponible en: https://doi.org/10.1145/1753326.1753524. [Último acceso: Sep. 1, 2024] 10. M. E. Chevreul, De la loi du contraste simultané des couleurs . 1839. [Online]. Disponible en: https://gallica.bnf.fr/ark:/12148/bpt6k1103235/f590.item . [Último acceso: Sep. 1, 2024]
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 82 11. "Rueda cromática" (aplicación), Adobe Color, 2016. [Online]. Disponible en: https://color.adobe.com/es/create/color-wheel. [Último acceso: Sep. 1, 2024] 12. L. Mesones, "Material docente de la asignatura 31395: DISEÑO 3D AVANZADO (2023-24)", Universidad San Jorge, 2024. 13. R. Reggy, "Panel on the Concept and Development Behind Persona 5’s UI," Persona Central, Nov. 13, 2017. [Online]. Disponible en: https://personacentral.com/persona-5-panel-conceptdevelopment-ui/ . [Último acceso: Sep. 10, 2024] 14. A. Alex, "Persona 3 Reload Developer Interview About UI Development, Concept Screenshots," Persona Central, Nov. 29, 2023. [Online]. Disponible en: https://personacentral.com/p3r-interviewmenu-ui/ . [Último acceso: Sep. 10, 2024] 15. D. Mobbs, N. Weiskopf, H. C. Lau, E. Featherstone, R. J. Dolan, and C. D. Frith, "The Kuleshov Effect: the influence of contextual framing on emotional attributions," *Social Cognitive and Affective Neuroscience*, vol. 1, no. 2, pp. 95–106, Sep. 2006. [Online]. Disponible en: https://doi.org/10.1093/scan/nsl014 . [Último acceso: Sep. 10, 2024] 16. G. Team, "7 localization best practices for game UI design," Gridly, May 29, 2024. [Online]. Disponible en: https://www.gridly.com/blog/game-ui-design-localization-best-practices/ . [Último acceso: Sep. 10, 2024] 17. We can fix it in UI, "UI/UX in Video Games - Salary Survey (results)," Google Sheets, 2024. [En línea]. Disponible en: https://docs.google.com/spreadsheets/d/1Aw0j1fAJURnol2f4i5Bgon5f_nhG_u5YGwLw2J54NM/edit?gid=886085393#gid=886085393 . [Accedido: 10 de septiembre de 2024] 18. "Salary," WE CAN FIX IT IN UI , 2024. [Online]. Disponible en: https://wcfiiui.notion.site/Salaryb37ba400618b43d99cd8c7d532335f53 . [Último acceso: Sep. 1, 2024] 19. "Precio de la luz," OCU, 2024. [En línea]. Disponible en: https://www.ocu.org/vivienda-yenergia/gas-luz/informe/precio-luz . [Último acceso: Sep. 10, 2024] 20. Google Imágenes 21. Fuente propia 22. Overwatch 2 , Activision Blizzard, 2022 23. The Elder Scrolls V: Skyrim , Bethesda Game Studios, 2011 24. Final Fantasy XIV , Square Enix, 2010 25. Genshin Impact , miHoYo, 2020 26. Call of Duty: Modern Warfare 2 , Infinity Ward, 2009 27. Florence , Annapurna Interactive, 2018
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 83 28. Cyberpunk 2077 , CD Projekt RED, 2020 29. Stardew Valley , ConcernedApe, 2016 30. Persona 3 Reload , P-Studio, 2024 31. Persona 3 , Atlus, 2006 32. Persona 4 , Atlus, 2008 33. Persona 5 , Atlus, 2016 34. Persona 5 Royal, Atlus, 2019 35. Catherine , Atlus, 2011 36. God of War , Santa Monica Studios, 2018 37. God of War: Ragnarok , Santa Monica Studios, 2022 38. Baldurs Gate III , Larian Studios, 2023 39. The Legend of Zelda: Breath of the Wild , Nintendo EPD, 2017 40. Destiny , Bungie Studios, 2014 41. Silent Hill , Team Silent, 1999 42. Heavy Rain , Quantic Dream, 2010 43. Honkai Impact 3rd , miHoYo, 2016 44. Outlast , Red Barrels, 2013
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 84 Anexo I Nombre alumno: Pablo Ramos Titulación: Grado en Diseño y Desarrollo de Videojuegos Curso académico: 2022/23 1. TÍTULO DEL PROYECTO (provisional) El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. 2. DESCRIPCIÓN Y JUSTIFICACIÓN DEL TEMA A TRATAR Este proyecto se enmarca en un ámbito interdisciplinar que tiene en cuenta la estética en relación a la ludonarrativa, analizando el videojuego como medio artístico capaz de evocar emociones diversas en los jugadores. El foco de este proyecto es demostrar que el HUD en un juego prototípico es capaz de alterar la toma de decisiones de un jugador con un mínimo de inversión emocional en el mismo. Para ello se analizará la relevancia de la interfaz gráfica de usuario a la hora de construir un escenario de decisiones para después poner en práctica los hallazgos en un prototipo de visual novel realizado específicamente para este proyecto. Este proyecto tiene un enfoque práctico, de forma que al terminarlo el alumno tenga un documento que poder incorporar a su portfolio personal que demuestre su destreza en la integración de estética a nivel ludonarrativo. 3. OBJETIVOS DEL PROYECTO Los objetivos del proyecto son: 1. Realizar un análisis previo del estado del arte sobre ludonarrativas y teorías de las emociones. 2. Construir un prototipo jugable con diferentes interfaces. 3. Estimar el impacto emocional de las decisiones de un jugador ideal respecto de la GUI. 4. METODOLOGÍA La metodología se fijará en las primeras reuniones con el tutor.
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 85 5. PLANIFICACIÓN DE TAREAS La planificación se especificará en las primeras reuniones con el tutor. 6. OBSERVACIONES ADICIONALES Este proyecto tiene un marcado enfoque interdisciplinar y se aproxima más al ámbito de las humanidades y las ciencias sociales (comunicación), por lo que puede diferir del resto de trabajos habitualmente presentados en la asignatura. Mi tutor será Dan Tarodo Cortes.
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 86 Anexo II REUNIÓN: 1 Fecha: 23/10/23 Hora comienzo: 15:00 Hora finalización: 15:45 Lugar: Teams Elabora acta: Dan Tarodo Convocados: Dan Tarodo, Pablo Ramos No. Asunto Acuerdo 1 Elaboración de propuesta de TFG 2 3 4 5 6 7 8 9 Otros asuntos 10 Próxima reunión Número Acuerdo Plazo Responsable
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 87 001 xxx dd/mm/aa xxx 002 003 004 005 006
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 88 REUNIÓN: 2 Fecha: 3/7/24 Hora comienzo: 16:28 Hora finalización: 17:58 Lugar: Teams Elabora acta: Dan Tarodo Convocados: Dan Tarodo, Pablo Ramos No. Asunto Acuerdo 1 Puesta en común de la idea 2 Estructura 3 Nociones de búsqueda bibliográfica 4 5 6 7 8 9 Otros asuntos 10 Próxima reunión
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 89 REUNIÓN: 3 Fecha: 10/7/24 Hora comienzo: 16:30 Hora finalización: 16:58 Lugar: Teams Elabora acta: Dan Tarodo Convocados: Dan Tarodo, Pablo Ramos No. Asunto Acuerdo 1 Evaluación material bibliográfico consultado 2 Pautas para escribir marco teórico 3 4 5 6 7 8 9 Otros asuntos 10 Próxima reunión
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 96 REUNIÓN: 10 Fecha: 9/9/24 Hora comienzo: 17:01 Hora finalización: 18:13 Lugar: Teams Elabora acta: Dan Tarodo Convocados: Dan Tarodo, Pablo Ramos No. Asunto Acuerdo 1 Revisión integral de la memoria 2 Revisión de la bibliografía 3 4 5 6 7 8 9 Otros asuntos 10 Próxima reunión
El efecto de la GUI en la toma de decisiones a nivel emocional. Diseño de una propuesta de aplicación ludonarrativa. _____________________________________________________________________________________ 97 REUNIÓN: 11 Fecha: 9/9/24 Hora comienzo: 17:59 Hora finalización: 18:55 Lugar: Teams Elabora acta: Dan Tarodo Convocados: Dan Tarodo, Pablo Ramos No. Asunto Acuerdo 1 Revisión de maquetación, estructura y presentación final 2 Integración de Anexos 3 Repaso general a los materiales enviados 4 5 6 7 8 9 Otros asuntos 10 Próxima reunión