Diseñar una buena UI es un gran desafío, sobre todo para un estudio indie con pocos medios y con poca gente, o ninguna, destinada al diseño gráfico. Muchas veces ponemos todo el esfuerzo en las áreas con más carga de trabajo, como programación o arte, pero descuidar el diseño de interfaz es lastrar la experiencia de usuario, por eso debemos darle la importancia que se merece.
Diseño de interfaz de usuario en videojuegos
La interfaz es la forma de comunicarnos con el jugador. En nuestro artículo sobre cómo diseñar un HUD de un videojuego comentamos cómo trabajar el UI dentro del juego, pero en realidad está en todas partes: en el menú principal, en la pausa, en el inventario, en la página de estadísticas, ¡lo envuelve todo!
El objetivo es fácil de entender: ofrecer toda la información que necesita el jugador para jugar de una manera fácil y comprensible. Por eso es crítico que sea intuitiva y visualmente agradable, porque muchos jugadores abandonan tras los primeros 30 min. de ‘luchar’ contra la UI. Esto es especialmente decisivo en los juegos para móvil.
Hay que cuidar todos los detalles, desde la tipografía que se usa, el color de los paneles de información, el orden de lectura… es por eso por lo que el testeo del UI es fundamental, para ver realmente cómo lo utiliza la gente y si sabe lo que está haciendo en cada momento.
Nuestro objetivo es lograr que el diseño de UI sea inmersivo
Diseñar un buen menú para un videojuego
Tenemos que meternos en la mente de la persona que está jugando y diferenciar sus primeras horas de juego de cuando lleva muchas, ya que la forma en la que lo usa es diferente y el diseño UI debe funcionar para cada momento.
Cosas como permitir saltar pantallas iniciales o poner accesos directos ayuda a que el jugador pueda acceder rápidamente. Lo que quiere es jugar, por eso el botón de continuar debe estar siempre en grande y el primero, ¡no le entretengas!
Hay que mantener la coherencia en todas las pantallas, no solo en diseño, sino en orden y estructura. Si tengo un menú principal y varias páginas de extras, logros, estadísticas, etc., tengo que hacer que sean todas iguales. Por ejemplo, si siempre pongo un titular centrado y debajo una imagen a la izquierda con la información en la columna derecha, no debería cambiar ese layout en el resto de las páginas. Evita que el jugador tenga que memorizar cómo usar la UI, ya que un buen diseño de interfaz permite al jugador moverse con naturalidad, sin tener que aprender a usarla, ¡lo importante es que aprenda las mecánicas de juego!
Aprovecha todo el espacio de la pantalla, una de las peores cosas que puedes hacer es mostrar un menú de pausa con mapas, ítems, fichas, etc., pero que deja mucho espacio libre alrededor y todo se queda comprimido en el centro. ¡Qué el jugador quiere ver el contenido, no lo bonito que se ve el juego desenfocado en los bordes!
Hay que lograr que el diseño del menú sea inmersivo, para ello tenemos que hacer que case con nuestro juego. Si el juego es de exploración en las profundidades del océano, deberíamos tener una UI que dé la sensación de estar dentro de un traje de buceo, por ejemplo. Los colores, diseño y sonidos ayudan a crear esa ambientación.
El diseño de UI de Mad Max es muy funcional y tiene toda la estética que se espera del wasteland.
Persona 5 rompe las reglas del diseño de UI
Ahora que hemos visto algunos de los pilares del diseño UI, vamos a hablar de cómo debemos buscar nuestra propia personalidad y dar rienda suelta a nuestra creatividad. Conocer las reglas te permite poder saltártelas, como hizo el juego Persona 5, que posiblemente tenga uno de los diseños de UI más caótico, alocado y difícil de entender, pero absolutamente maravilloso e increíble, una delicia visual y de jugabilidad.
El diseño de UI de Persona 5 tiene una gran personalidad, al ver una imagen ya sabes que juego es.
El primer gran acierto es lo inmersivo que es, ya que los menús reflejan perfectamente el sentimiento de desorden y caos con una estética punk frenética y rabiosa. Una elegancia visual soberbia.
Dentro del caos encontramos un orden de colores y de tamaños que ayudan a la legibilidad.
Luego continúan rompiendo las reglas de usabilidad al cambiar lo que hacen los botones en función del menú en el que te encuentres. Siempre hay cambios en los menús de personalización, economía y batalla. Si quieres romper las reglas, es crucial hacerlo bien y con sentido.
Juegan mucho con los colores. Aunque su paleta de color principal es el rojo y negro, hacen cambios radicales para diversos menús y paneles logrando destacarlos y que tengan una personalidad única.
El uso de contrastes ayuda mucho a ordenar los contenidos.
Monument Valley y cómo crear una UI elegante y minimalista
Después del espectáculo caótico y atractivo de Persona 5 nos vamos a ver un diseño UI en el polo opuesto: Monument Valley. El sensacional juego de Ustwo utiliza una interfaz minimalista, que apenas es perceptible pero que acompaña perfectamente la estética del juego y es sorprendente fácil de usar. Todo está en su sitio, y con unas proporciones perfectas.
El diseño de UI de Monument Valley es elegante, sin estridencias y tremendamente funcional.
Sin duda se puede aprender mucho de diseño UI estudiando la interfaz de Persona 5 y de Monument Valley. Aunque las 2 son diametralmente opuestas, ambas comparten 2 aspectos esenciales: son coherentes con el concepto de juego ayudando a la inmersión y fáciles de usar.
Antes de romper las reglas, intenta seguirlas para que tu próximo videojuego ofrezca una gran experiencia de juego.
¿Te ha gustado? ¡Compártelo!
Guionista, diseñador de videojuegos y creador de Gametopia y sus cursos online. Creativo en la agencia de publicidad Flas Marketing y profesor de Guion y diseño de videojuegos en el Master de la Universidad Politécnica de Madrid.
Linkedin - Twitter
