Conceptos básicos

¿Qué es una interfaz?

Según Women in Games una interfaz de Usuario es el punto de interacción entre el usuario y el videojuego. Su objetivo es brindar la información necesaria para que el usuario interactúe con fluidez durante el juego. Guiará al usuario de manera directa o intuitiva,  para que pueda accionar y recorrer la narrativa correctamente.

Cuando diseñemos una interfaz tendremos que tener en cuenta varios factores y hacernos una serie de preguntas:

• Entorno/Plataforma: Tener en cuenta dónde se jugará el juego, sus posibilidades y limitaciones.
• Contenido: Información necesaria para que el usuario pueda interactuar con el juego.
• Diseño Visual: Definición del estilo de arte.
• Arquitectura de la información: Definir qué elementos son de mayor o menor importancia para el usuario, para luego organizarlos de manera coherente y por relevancia.

Por otra parte podemos catalogar las interfaces en tres grandes grupos de Affordance*:

• Affordance física: La utilizaremos para indicar una acción disponible en el juego.
• Affordance cognitiva: Se utiliza para que el jugador entienda de forma rápida la info.
• Affordance sensorial: Se utiliza para que el jugador perciba la información rápidamente.

*El Affordance es la cualidad de un objeto para comunicarle al usuario cómo ese objeto debe ser utilizado. Por lo tanto cuando hablamos de “affordance” en un juego nos referimos a que los usuarios entienden e interactúan con los elementos del juego (objetos, mecánicas, interfaz…) de forma intuitiva y sin hacerles pensar demasiado. 

Interfaces en pantalla

Encontramos diferentes tipos de interfaces en pantalla y estos tipos se diferencian dependiendo de su integración en el videojuego:

• Diegetic: Los elementos de la interfaz diegética existen dentro del mundo del juego por lo que el jugador y el avatar pueden interactuar a través de los medios visuales y auditivos. Las encontraremos como parte de la narrativa, inmersas en el juego.

                                                                                                                                           La barra de vida del personaje está intregada en su traje (Dead Space 2)

• Non-diegetic: Una interfaz que se presenta fuera del mundo del juego, solo visible y audible para los jugadores del mundo real. Es lo que entendemos como la interfaz más común.

                                                                                                                              La interfaz del juego solo la vemos nosotros como jugador (League of Legends) 

• Spatial: Elementos de interfaz de usuario representados en el espacio 3D del juego con o sin ser una entidad del mundo real del juego. Por ejemplo los tutoriales. Muchas veces están integrados en el entorno del juego pero no forman parte del core.

                                                                                                                                                             El tutorial forma parte de la pared (Spelunky)

• Meta: Están dentro de la historia del juego pero no están dentro del espacio del juego. Estos componentes de la interfaz apuntan a sumergir al jugador aún más dentro de la experiencia. Algunos ejemplos son las gotas de sangre en la pantalla o las roturas de vidrios.

                                                                                                                                                               La sangre tiñe la pantalla (Call of Duty 4)
Para mejorar la usabilidad de todas estas interfaces se tendrían que tener en cuenta los siguientes aspectos:

La información correcta: Una buena interfaz gráfica dice al usuario solamente lo que necesita conocer.

La buena representación de los conceptos: Los iconos han de ser más simple artísticamente que en el diseño de los elementos del juego.

El buen uso de los colores, la medida y el lugar: Ayudara a crear los patrones del diseño.

El buen timing: No hay que forzar la memoria a corto plazo del jugador, es decir, los elementos de la interfaz tienen que estar visibles cuándo el jugador lo necesite, el tiempo que tarda en leerlo y luego irse.

El buen uso de los canales no visuales: La vibración puede dar la información sobre el estado del jugador o un evento importante y también el sonido puede dar feedback en los botones.

Bien ahora que tenemos unos conceptos básicos del diseño de interfacies hablaremos acerca de HUD, GUI y sus diferencias:

HUD y GUI son dos conceptos cuya razón de ser radica en la mejora de la visualización de la información e interacción por parte del usuario.

HUD y GUI

Por un lado, HUD (Heads-Up-Display) es la creación de monitores que presentan datos sin necesidad de que el usuario tenga que apartar la mirada de su punto de visión usual. Es decir, la información se muestra en todo momento en la pantalla, en forma de iconos y números generalmente.

Por otro lado, GUI (Graphical User Interface) consiste en el diseño y mapeado de todo lo relacionado con la interfaz de entorno del juego. Es decir, todo lo que sean menus, opciones, etc… Todo lo que te ayuda a llegar a completar los requisitos que necesites. Desde iniciar una partida, guardar partida, modificar parámetros en las opciones… 

¿Qué es una buena interfaz?

Podríamos considerar una buena interfaz aquella que consigue lograr que la interaccion del usuario sea eficiente y simple. Para diseñar una buena interfaz no solo tenemos que saber dibujar o tener unas habilidades excelentes, también debemos tener un amplio conocimiento del diseño y comprensión de las necesidades del usuario. Por ello vamos a mencionar al menos siete  puntos clave a tener en cuenta para crear una buena interfaz:

1. Claridad: Puede parecer algo lógico pero muchos juegos cometen el error de que la interfaz no es legible ya sea por las tipografías, disposición de la información… La información tiene que ser transmitida de manera precisa.
2. Concisión: No sobrecarguemos las interfaces con elementos visuales, iconos, y opciones. Ser conciso radica en que el usuario sea autosuficiente a la hora de encontrar lo que necesita de un vistazo rápido sin navegar entre menus o buscando en cualquier rincón de la pantalla.
3. Legibilidad: Utiliza tanto tipografías sencillas y rápidas de leer para el usuario. Si tu juego está basado en la época medieval y utilizas una tipografía típica de esa época, posiblemente tu jugador no sea capaz de leerla con comodidad por falta de experiencia.
4. Interactividad: Una buena interfaz debe ser rápida en su manejo. Poder interactuar de manera correcta sin tener que dar cien vueltas a las cosas es muy importante. 
5. Familiaridad: Asegurate que el jugador se sienta cómodo tanto con los términos que utilices como en la disposición de los elementos. Al menú de opciones no podemos llamarle “navegador de parámetros” porque la gente no va a entender. 
6. Eficiente: La interfaz debería entender el objetivo del usuario y no impedírselo. Hacer una interfaz que ayude al usuario a encontrar lo que necesita en vez de marearlo con botones y submenús es primordial.
7. Atractiva: Bueno, esto es algo obvio, intentaremos sobre todo concepto que el usuario entienda de un vistazo lo que significan nuestras opciones, iconos, textos… dotándoles de un buen aspecto y agradable a la vista.

League of Legends es el juego más jugado del mundo actualmente, pero sus menús de interfaz no son realmente cómodos. Podemos ver un ejemplo muy sencillo: El juego te permite modificar la estética de tus personajes añadiéndole un outline, activar o desactivar el eye Candy, activar o desactivar las animaciones de interfaz, Mover o anclar la cámara con el cursor… Bien, todos estos parámetros ¿Donde los añadirías? Seguramente tu respuesta sea “en el menú de opciones > interfaz” o “opciones > gráficos”. El resultado es que todas esas opciones están desperdigadas a lo largo de las pestañas “video – interface – game” haciéndole al jugador más difícil la tarea de modificar o incluso descubrir esas opciones.

Documentación y estilo

Es esencial que una vez tengamos en cuenta los puntos anteriormente mencionados, nos dediquemos a la preproducción de nuestro trabajo de interfaz. Todo trabajo en cualquier ámbito artístico se refiera necesita un trabajo previo de investigación, documentación y sketch. 

A continuación dejo una lista de preguntas o puntos importantes que deberíamos tener en cuenta cuando vayamos a empezar a documentarnos:

• Descripción del juego
• Cronología
• Ambientación
• Número de jugadores
• Aspecto del jugador principal (o jugadores)

Esto es una lista muy básica, pero estaría bien saber a qué proyecto nos enfrentamos y como abarcarlo. No me voy a extender mucho en este apartado pues en el video relacionado a este punto puedes ver un ejemplo de como  documentarte

Pinterest es una red social y buscador de imágenes inagotable. Puedes crearte tus propios “tableros” donde guardar imágenes y catalogarlas por contenido. Es realmente útil y una herramienta super potente que recomiendo utilices para documentarte, buscar inspiración o simplemente pasar el rato viendo que hacen otros artistas.

Cubriendo las necesidades mínimas

Cuando estemos en un nuevo proyecto y una vez hayamos conseguido documentarnos y buscar un estilo, es momento de prototipar. A la vez que el resto de nuestro equipo está prototipando mecánicas, diseño de niveles, etc… nosotros tendremos además que prototipar y averiguar cuales son las necesidades mínimas del proyecto y en este caso de la interfaz.

Nuevamente recurriremos a un listado de tres preguntas para saber por donde empezar:

• ¿Qué screens necesita el usuario para llegar a empezar una partida?
• ¿Qué opciones son necesarias para empezar una partida?
• ¿Qué es estrictamente necesario mostrar en pantalla para el jugador?

Crear un documento de texto respondiendo estas pregunta y ordenando tus ideas conseguirás tener claro qué necesita vuestro proyecto para cubrir las necesidades mínimas en cuando a interfaz.

ICONOGRAFIA

La iconografía de un juego es básica. Tanto en el HUD como en la GUI tenemos que ser claros con el usuario. Esto es algo que ya hemos hablado con anterioridad, pero… ¿Cuántas veces te ha sucedido que entras a un juego nuevo y has dicho “¿Este botón para qué es?”? Eso es lo peor que le puede pasar a un diseñador de interfaces. 

Que el usuario no sepa para que sirven las cosas o se pierda entre iconos no nos ayuda. Debemos conseguir de una forma clara y sencilla indicarle a nuestro jugador como debe actuar. Y no solo tenemos que tener en cuenta la iconografía dentro de nuestro país, debemos pensar en las culturas de otros países para que entiendan esos iconos también.

Caso de estudio

                                                                                                                                                                                            Dragalia Lost

Dragalia Lost es un juego para móviles desarrollado por Nintendo y Cygames, y a pesar de que Nintendo sea una gran compañía esto no significa que las cosas estén bien hechas. Veamos los iconos de la GUI de este juego en el que en la parte inferior consta de 6 iconos. Sin mirar la imagen de abajo, serías capaz de identificar para que son cada uno de los iconos?

• Lanza con bandera
• Maza o martillo
• Grupo de personajes
• Casa o choza
• Cristales azules
• Libro

Dedícale unos minutos a reflexionar sobre tus respuestas antes de pasar a la siguiente página.

A continuación la resolución de la imagen:

Probablemente te sorprendas al ver que no has acertado ninguno. Tampoco existe problema de que no sepas cual es el concepto del juego y que no se te haya puesto en situación. De eso se trata. Si la iconografía del juego fuera correcta deberías saber ver de un vistazo para qué sirve cada opción, independientemente del juego o el contexto que estemos tratando.

En el video perteneciente a esta parte del módulo podrás encontrar un ejemplo más acerca de una mala práctica de iconografías.