La Interfaz Extradiegética Como Narrativa Visual: Aplicación del Diseño Gráfico en Videojuegos de Aventura
DOI:
https://doi.org/10.29057/esa.v14iEspecial.18084Palabras clave:
diseño gráfico, diégesis, semiótica, inmersión, exploración, interfaceResumen
El presente artículo analiza el papel de la Interfaz Gráfica de Usuario (GUI) como un elemento fundamental para la construcción de la narrativa visual en los videojuegos de aventura a través de una metodología cualitativa fundamentada en la revisión y el análisis observacional de cuatro títulos diferentes, evaluando la coherencia entre las decisiones de diseño, el apartado visual, la interfaz de usuario, su construcción semiótica y la narrativa visual resultante.
Aunque tradicionalmente las interfaces han sido abordadas desde una perspectiva técnica orientada a la programación, esta investigación propone su estudio mediante el diseño gráfico, en la que el objetivo principal es comprender cómo la interfaz gráfica (GUI), específicamente en su dimensión extradiegética mediante elementos como la pantalla de visualización frontal (HUD), trasciende su función de mediador interactivo, para integrarse estética y semióticamente en el universo de la obra, quedando en evidencia que una aplicación estratégica de los principios visuales permite que los componentes extradiegéticos se vinculen orgánicamente con el apartado visual y la dirección artística, sin romper la inmersión del jugador.
Entonces, la interfaz gráfica no es únicamente un contenedor de datos estadísticos superpuesto a la pantalla, sino un sistema complejo que potencia el vínculo emocional con el entorno virtual y actúa como un narrador activo, demostrando que en el medio interactivo, la funcionalidad técnica y estética es inseparable del discurso narrativo.
Se concluye que a partir de estos hallazgos, se sientan las bases teóricas para futuras investigaciones, demostrando la factibilidad de aplicar este marco analítico a otros géneros interactivos, al desarrollo de interfaces en tecnologías emergentes (VR y AR), e incluso a perspectivas comerciales, revalorizando así el rol del diseño gráfico en la creación de experiencias en diferentes contextos.
Descargas
Citas
Albornoz, M. C. (2014). Diseño de interfaz gráfica de usuario. XVI Workshop de Investigadores en Ciencias de la Computación, 541. https://sedici.unlp.edu.ar/bitstream/handle/10915/41578/Documento_completo.pdf?sequence=1&isAllowed=y
Ardeni. L. (2024). Types of UI in Gaming: Diegetic, Non-Diegetic, Spatial and Meta. Medium. https://medium.com/@lorenzoardeni/types-of-ui-in-gaming-diegetic-non-diegetic-spatial-and-meta-5024ce6362d0
Becerra-Plata, D.O. (2009). Relaciones entre interfaz y narrativa en los videojuegos. Academia.edu., 52-53. https://www.academia.edu/download/102827016/Relaciones_entre_interfaz_y_narrativa_en_los_videojuegos.pdf
Bergman, E., Hermansson, T. (2023). Effect of head-up display design on game immersion. [Tesis, UMEA UNIVERSITET]. DiVA. https://www.diva-portal.org/smash/record.jsf?pid=diva2%3A1779103&dswid=-5984
Bueno-Gutierréz. D. (2018). EL DISEÑO Y EL ARTE EN LOS VIDEOJUEGOS. [Trabajo de fin de grado, Universidad Politécnica de Madrid]. ETSI Sistemas Informáticos. https://oa.upm.es/50803/
Cabañes. E. (2012). Del juego simbólico al videojuego: La evolución de los espacios de producción simbólica. Injuve, 98, 61-76. https://www.injuve.es/eu/observatorio/ambito-digital/no-98-videojuegos-y-juventud
Caroux, L., & Isbister, K. (2016). Influence of head-up displays’ characteristics on user experience in video games. International Journal of Human-Computer Studies. https://doi.org/10.1016/j.ijhcs.2015.11.001
Caroux, L., Delmas, M., Cahuzac, M., Ader, M., Gazagne, B., & Ravassa, A. (2023). Head-up displays in action video games: the effects of physical and semantic characteristics on player performance and experience. CLLE laboratory, University of Toulouse and CNRS. 10.1080/0144929X.2022.2081609
Castro-de-Lucas, S. (2024). Análisis comparativo del uso de materiales en la interfaz, entre Planet Paradise y The Wandering Village. [Trabajo de Fin de Grado, Universidad de Diseño, Innovación y Tecnología]. Grado en Diseño y Desarrollo de videojuegos. https://sciencevalue.udit.es/tfg_videojuegos_tecnologia/15
Cervelló-González, R., Martínez-García, D., Ramírez-Ramey, D., Virgili-Llop, J. (2009). Interfaces usuario máquina. Universitat Oberta de Catalunya. https://hdl.handle.net/10609/9168
Córdoba-Cely, C. (2013). La experiencia de usuario: de la utilidad al afecto. Iconofacto. 9 (12), 56-70. https://repository.upb.edu.co/server/api/core/bitstreams/1354c023-6de5-4138-9065-07d1fa4810b2/content
Cuartero-Romero, D. (2022). El proceso de diseño de experiencia de usuario e interfaz de usuario en un videojuego. [Trabajo de Fin de Grado, Escuela Politécnica Superior de Gandia] Repositorio Institucional UPV. https://riunet.upv.es/handle/10251/190122
Fagerholt, E., Lorentzon, M. (2009). Beyond the HUD User Interfaces for Increased Player Immersion in FPS Games. [Tesis de Maestría en Ciencias, Universidad Tecnológica de Chalmers]. https://publications.lib.chalmers.se/records/fulltext/111921.pdf
Fashé, C., Constance, C. (2020). Análisis del diseño atmosférico y de personajes en la narrativa visual de los videojuegos del sub género Metroidvania: Hollow Knight, Ori and the Blind Forest y Guacamelee!. [Tesis de Grado de Bachiller, Universidad Peruana de Ciencias Aplicadas]. Repositorio Académico UPC. https://repositorioacademico.upc.edu.pe/handle/10757/654566
Friedman, A. (2015). The Role of Visual Design in Game Design. Games and Culture, 10(3), 291–305. https://doi.org/10.1177/1555412014559977
García-Pons. A. (2025). Entre mundos: la diégesis y sus rupturas en el lenguaje cinematográfico. Entropía del caos al orden. https://www.lasallebajio.edu.mx/revistas/entropia/especial_1/download/arturo-garcia-pons_ok.pdf#:~:text=La%20di%C3%A9gesis%2C%20en%20t%C3%A9rminos%20narrativos%2C%20se%20refiere,los%20elementos%20que%20existen%20dentro%20del%20relato.
González-Sánchez, J. L., Padilla, N., Gutiérrez, F. L., Cabrera, M. J. (s/f). De la Usabilidad a la Jugabilidad: Diseño de Videojuegos Centrado en el Jugador. Laboratorio de Investigación en Videojuegos y E-Learning (LIVE) - GEDES, 6. https://gc.scalahed.com/recursos/files/r161r/w21937w/interaccion08-jugabilidad.pdf
González-Sánchez, J.L (2010), Jugabilidad: Caracterización de la experiencia del jugador en videojuegos [Tesis doctoral, Universidad de Granada]. Repositorio institucional de la Universidad de Granada, 38-39. https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://digibug.ugr.es/bitstream/handle/10481/5671/18931200.pdf&ved=2ahUKEwjTjce68KeUAxW2JUQIHSTuMqQQFnoECBoQAQ&usg=AOvVaw2EFMPpM9zpKO0sqr7ZDNM9
Hassenzahl, M., & Tractinsky, N. (2006). User Experience - a research agenda. Behaviour & Information Technology, 25 (2), 91-97. https://doi.org/10.1080/01449290500330331
History-Computer-Saff. (s.f.). OXO Game Guide: History, Origin, and More. History-Computer. https://history-computer.com/software/oxo-game-guide/
Jørgensen, K. (2012). Between the game system and the fictional world: A study of computer game interfaces. Games and Culture, 7, 142‑163. https://doi.org/10.1177/1555412012440315
Juul, J. (2001). “Games telling Stories - A brief note on games and narratives”. The international journal of computer game research. 1 (1). http://www.gamestudies.org/0101/juul-gts/.
Lambert-Sarango, Y. E. (2023). Las narrativas audiovisuales en el diseño de videojuegos, aproximaciones teóricas, un acercamiento a sus particularidades. Ñawi, 7(1), 231-258. https://doi.org/10.37785/nw.v7n1.a12
López, C. A. (2023). El poder de la imagen visual. La otredad en la enseñanza-aprendizaje del diseño. Enfoques pedagógicos proyectuales en comunicación visual. Revista UCES.DG “Enseñanza y Aprendizaje del Diseño”, 19, 30-43. https://dspace.uces.edu.ar/bitstream/123456789/6894/1/Poder_Lopez.pdf
Mahajan, S. M., Khedkar, S. B., & Kasav, S. M. (2015). Head-up display techniques in cars. International Journal of Engineering Science and Innovative Technology (IJESIT), 4(2), 119-124. https://www.researchgate.net/profile/Sudesh-Khedkar/publication/283534782_Head_up_Display_Techniques_in_Cars/links/563d82f308ae34e98c4ae99a/Head-up-Display-Techniques-in-Cars.pdf
May, A., Bizzocchi, J., Antle, N. A., Choo, A. (2015) Fraternal feelings: How brothers: A tale of two sons affects players through gameplay. IEEE Explore, 1-4. https://doi.org/10.1109/GEM.2014.7048074
MY.GAMES. (2023). Heads up! What is HUD and why is it so important in video games. ArtStation. https://www.artstation.com/blogs/mygames_dev/mEQ2/heads-up-what-is-hud-and-why-is-it-so-important-in-video-games
Nicolás-Ortíz, J. C. (2014). Qué es la experiencia del usuario en el diseño de producto. Imperial College London, 7. https://www.academia.edu/download/33546198/Que_es_la_experiencia_del_usuario_en_el_diseno_de_producto.pdf.pdf
Okur, M., Kızıl, R., & Atamaz, E. (2024). The art of graphic design in video games: beyond the visual. Amazonia Investiga, 13 (78), 9-26. https://doi.org/10.34069/AI/2024.78.06.1
Paul Cézanne. (1889). Montagne Sainte-Victoire [Pintura]. Wikimedia Commons. https://commons.wikimedia.org/wiki/File:Montagne_Sainte-Victoire,_par_Paul_C%C3%A9zanne_114.jpg
Pellegrini. A. (2015). La evolución del apartado visual en los videojuegos. Revista de Ciencia y Técnica de la Universidad Empresarial Siglo 21, (2). https://repositorio.21.edu.ar/server/api/core/bitstreams/900dac17-f656-4f43-82e8-76a19dc9a237/content
Pérez-Latorre, Ó. (2011). Géneros de juegos y videojuegos. Una aproximación desde diversas perspectivas teóricas. Comunicació : Revista de Recerca I d’Anàlisi [Societat Catalana de Comunicació], 127–146. https://doi.org/10.2436/20.3008.01.81
Prieto, E. (2023). Qué es la Comunicación Visual y cuáles son sus características. Southern New Hampshire University. https://es.snhu.edu/blog/que-es-la-comunicacion-visual
Ramírez-Acosta, K. (2017). Interfaz y experiencia de usuario: parámetros importantes para un diseño efectivo. Revista tecnología en marcha, 30, 49-54. https://www.scielo.sa.cr/scielo.php?script=sci_arttext&pid=S0379-39822017000500049
Rojas-Zapata, C. F. (2024). Fundamentos del diseño gráfico en los videojuegos - Interpretación del uso de los elementos del diseño gráfico en la lógica compositiva de la imagen, en los videojuegos de novena generación [Trabajo de Doctorado, Universidad de Palermo] Repositorio de la Universidad de Palermo, 54. https://www.palermo.edu/dyc/doctorado_diseno/cuerpo_b_rojas_zapata.pdf
Rojas-Zapata, C. F. (2025). Fundamentos del diseño gráfico en los videojuegos. Cuadernos Del Centro de Estudios de Diseño Y Comunicación, 269–281. https://doi.org/10.18682/cdc.vi277.12672
Rojas, C. F. (2020). Fundamentos del diseño gráfico de videojuegos. Designia, 7(2), 103–127. https://doi.org/10.24267/22564004.338
Rubio-Vera, A. (2025). Diseño de interfaces digitales en el campo de los videojuegos [Proyecto de Grado, Universidad Autónoma de Occidente]. UAO, 32. https://red.uao.edu.co/server/api/core/bitstreams/1eeef2c6-0687-49c5-a4bd-219d4974a76f/content
Sánchez-Coterón, L. (2018). Videojuegos y estética multimodal. ASRI. Arte y Sociedad. Revista de Investigación, (15), 113-124. https://hdl.handle.net/20.500.14352/101785
Sanders-Peirce, C. (1974). La Ciencia de la Semiótica. Ediciones Nueva Visión Buenos Aires. http://coralito.umar.mx:8383/jspui/handle/123456789/1364
Santana, I. (2020). La Semiótica. ResearchGate. https://www.researchgate.net/publication/339786431_Semiotica
Scatteia, L. (2005). Space-themed videogames: An effective way to promote space. The electronic Library, 23(5), 553-566. https://doi.org/10.1108/02640470510631272
Shaar. S. (2025). Diseño de UI de juegos: la mecánica de las experiencias divertidas. Justinmind. https://www.justinmind.com/es/ui-diseno/juego
Shadow of the Tomb Raider. (2018). Game UI Database Shadow-of-the-Tomb-Raider02282021-041613-23917.jpg
Solórzano-Alcivar, N., Moscoso Poveda, S., Elizalde Ríos, E. (2019). Evolución de Videojuegos y su Línea Gráfica _ un enfoque entre la Estética y la Tecnología. Ñawi. Arte, diseño y comunicación, 3(2), 124-145. https://www.redalyc.org/pdf/6879/687973160010.pdf
Tardón, C. G. (2010). Inmersión en mundos simulados: definición, factores que lo provocan y un posible modelo de inmersión desde una perspectiva psicológica. Investigaciones fenomenológicas: Anuario de la Sociedad Española de Fenomenología, (2), 311-320. https://dialnet.unirioja.es/descarga/articulo/4846493.pdf
The Legend of Zelda: Majora's Mask 3D. (2015). Game UI Database. https://www.gameuidatabase.com/gameData.php?id=776
The Legend of Zelda: Skyward Sword HD. (2021). Game UI Database. The-Legend-of-Zelda-Skyward-Sword-HD08152021-060507-33338.jpg
The Wolfess. (2010). Skyward Sword’s Art Style: Straddling the Line or Walking a New Path?. Zelda Universe. https://zeldauniverse.net/2010/06/17/skyward-swords-art-style-straddling-the-line-or-walking-a-new-path/
Toledo-Castro. L. (2019), Jugando a la interfaz: La interfaz de usuario jugable y narrativa [Trabajo Final de Máster, Universidad Politécnica de Valencia]. Repositorio de Artes Visuales y Multimedia, 39. https://riunet.upv.es/server/api/core/bitstreams/7a9bb5a6-126f-492d-9847-8fdbcd8fcfbb/content
Toledo-Castro. L.E. (2019). Jugando a la interfaz: La interfaz de usuario jugable y narrativa. Artes Visuales y Multimedia Máster Oficial UPV. https://www.academia.edu/45602362/Jugando_a_la_interfaz_La_interfaz_de_usuario_jugable_y_narrativa
Tomb-Raider. (2018). Meet the Team: Eidos Montreal's David Boileau. YouTube. https://www.youtube.com/shorts/A3FtM02py0Q
Treviño-Villegas. M. (2024). Procesamiento Predictivo en el Cerebro. Revista de la Academia Mexicana de Ciencias, 71(1), 56. https://www.revistaciencia.amc.edu.mx/images/revista/75_1/PDF/Ciencia75-1.pdf
Valdovinos, S. E., & Vega, M. N. (2025). Diseño gráfico y fábrica visual. El poder de la comunicación visual en la industria. Qartuppi. https://books.google.com.mx/books?hl=es&lr=&id=UCp1EQAAQBAJ&oi=fnd&pg=PA7&dq=comunicaci%C3%B3n+visual+dise%C3%B1o+gr%C3%A1fico&ots=jFSFgFwrSD&sig=yOIbGs3XMq1kurNZYyj6WqV1Bec&redir_esc=y#v=onepage&q=comunicaci%C3%B3n%20visual%20dise%C3%B1o%20gr%C3%A1fico&f=false
Viruete. M. (2019). Interfaces visuales y usabilidad. realovirtual. https://www.realovirtual.com/articulos/5331/interfaces-visuales-usabilidad#google_vignette
Wood, D. (2022). Diseño de interfaces: Introducción a la comunicación visual en el diseño de interfaces de usuario. Parramón Paidotribo. https://books.google.com.mx/books?hl=es&lr=&id=kjiXEAAAQBAJ&oi=fnd&pg=PT14&dq=comunicaci%C3%B3n+visual+videojuegos&ots=KP_OLYnDV0&sig=jQzuhbGIWuhw0U5R8Y-eBWrDaN0&redir_esc=y#v=onepage&q=comunicaci%C3%B3n%20visual%20videojuegos&f=false
Descargas
Publicado
Cómo citar
Número
Sección
Licencia
Derechos de autor 2026 Ricardo Hernández Cerón, Martha Rocío Cisneros Contreras
Esta obra está bajo una licencia internacional Creative Commons Atribución-NoComercial-SinDerivadas 4.0.
