Publicat per

PEC 1. Análisis de Usabilidad y Accesibilidad en Save Oceans

Índice

Introducción a Save Oceans

El título sobre el que voy a trabajar en esta PEC es Save Oceans [1], un minijuego disponible para GNU/Linux, Windows y macOS en Itch.io que desarrollé en una semana en febrero de 2021 para la game jam de DOME [2] de ese mismo año. DOME [3] es un framework de desarrollo de videojuegos creado por Aviv Beeri pensado principalmente para la programación de videojuegos 2D. El framework está escrito en C, pero, en cambio, el código del juego se escribe en el lenguaje de programación Wren [4], creado por el desarrollador de lenguajes Bob Nystrom, autor de los libros “Game Programming Patterns” [5] y “Crafting Interpreters” [6] e ingeniero del lenguaje Dart en Google.

Desarrollé Save Oceans para aprender, principalmente, otro lenguaje de programación como es Wren, además de como ejercicio de protesta sobre la el uso mayoritario y desproporcionado de plásticos en la sociedad actual, que provoca una cantidad ingente de desechos que terminan en acuíferos, lagos, ríos y, finalmente, en mares y océanos.

Con respecto a la Jam, el tema opcional de la DOME Jam de 2021 fue “Minimal”, por lo que, aparte de usarlo en la idea de minimizar la basura de los océanos, pensé en realizar una interfaz y mecánicas lo más reducidas posibles. El juego parte de la base de ser muy similar al concepto del buscaminas, pero con notables diferencias. La idea principal es localizar dónde están las casillas de basura. Con respecto a la jugabilidad e interfaz, empezamos con un tablero que representa el mar, que está dividido en una cuadrícula de 5×4 rellenada por celdas de niebla [Figura 1]. Cuando el jugador hace clic en una de las celdas, la niebla desaparece de esta. Si debajo de la niebla hay basura, esta se recoge y no se penaliza al jugador. Si, en cambio, no hay basura debajo, se penaliza al jugador reduciendo el tiempo de la ronda. Para ayudarnos, se dispone en la interfaz de un botón con forma de radar que, al pulsarlo, señala una de las cuatro esquinas, elegida aleatoriamente, de las celdas que contienen basura en este momento. Con esto, si se pulsa varias veces se puede saber en qué celda hay basura triangulando las esquinas que señala el radar.

Captura de pantalla del juego de Save Oceans.
Figura 1. Captura de pantalla del juego de Save Oceans.

Elegí este juego porque, a pesar de conseguir terminar las mecánicas principales y un bucle principal del juego, pienso que hay algunas características que se pueden mejorar pero que han quedado con problemas debido al poco tiempo de planteamiento y desarrollo. Es verdad que al estar dentro de un prisma como es en el desarrollo tan corto de una Game Jam, muchas veces corremos el riesgo de dejarnos en el tintero un buen planteamiento de los distintos elementos de una interfaz, como son sus características y hacerlas lo más usables posible. Además, en cuanto a accesibilidad es lo primero que olvidamos, ya no solo en el desarrollo de una Jam, si no incluso en el desarrollo de una obra a nivel comercial, siendo pocos los casos en los que se refleja en el contenido final que todo esto se ha tenido en cuenta en etapas tempranas del desarrollo.

Análisis de usabilidad y accesibilidad

Una de las cosas que destaca nada más iniciar el juego es que la interfaz y el propio juego solo se puede controlar con el ratón. Para poder iniciar el juego tenemos que pulsar en el texto de “New game” y para acceder a los ajustes tenemos que pulsar en la tuerca que hay en un extremo de la pantalla [Figura 2]. Con respecto a esta última pantalla [Figura 3] sólo se puede modificar los valores pulsando con el ratón, sin poder desplazarnos con las flechas del teclado. Volviendo a la pantalla de la partida, para despejar cada una de las casillas o pulsar el radar, tenemos que mover el ratón a cada uno de los elementos de la interfaz. De aquí podemos sacar que un problema que veo con respecto a usabilidad y accesibilidad es que el control de todo el juego se ve limitado a que el usuario tenga un ratón.

Menú principal del juego escogido.
Figura 2. Menú principal del juego escogido.
Menú de ajustes del juego de Save Oceans.
Figura 3. Menú de ajustes del juego de Save Oceans.

Siguiendo con la pantalla principal y la de ajustes, una de las cosas que se puede encontrar el jugador es que no hay feedback de que el texto de “New game” o que las diferentes opciones dentro del menú de juego tengan alguna funcionalidad a menos que se haga click sobre ellas con el ratón. Esto lo veo como un problema de usabilidad porque el usuario tiene que descubrir la funcionalidad cuando se le podría mostrar de forma visual que estos elementos de la interfaz se pueden accionar al pasar por ellos.

Con respecto al juego, uno de los elementos que podemos ver en la interfaz nada más iniciar la partida es la cantidad de basura que tenemos que buscar en el mapa [Figura 4]. El número de elementos de cada tipo se seleccionan de forma aleatoria, y una vez recogidos se pasa a la siguiente ronda. En principio las rondas son cortas, y podemos saber aproximadamente cuantos elementos quedan en pantalla pulsando en el radar y observando los puntos que señala, pero como problema de accesibilidad que veo es que el usuario no tiene forma de saber visualmente el número exacto de elementos restantes.

Mensaje de elementos a recoger de la ronda.
Figura 4. Mensaje de elementos a recoger de la ronda.

Siguiendo con el juego, en el momento en el que el usuario hace clic en una de las celdas, se escucha un sonido y se despeja la niebla. Si la celda tuviera un elemento, este se ve y aparece un tick verde encima [Figura 5]. Si hubiera agua, aparece una flecha roja [Figura 6] indicando que es una celda incorrecta, y a mayores decrece el tiempo como penalización. Aquí hay varias cosas que desgranar, y es que el sonido que se escucha es siempre el mismo, sea agua o una celda válida, por lo que sonoramente no funciona como feedback porque no nos permite distinguir de forma sencilla esto. Además, con esta mecánica, un problema que puede aparecer es que el usuario no se esté fijando en el tiempo que le queda, por lo que sin un feedback visual que le permita ver que se le ha restado el tiempo, puede ser que pierdas la partida sin darte cuenta de este detalle y de la sensación de que el tiempo no se calcula bien.

Icono de celda correcta con elemento a recoger.
Figura 5. Icono de celda correcta con elemento a recoger.
Icono de celda incorrecta sin elementos a recoger.
Figura 6. Icono de celda incorrecta sin elementos a recoger.

Para finalizar, se puede comentar el problema de que el juego no tiene forma de recuperarse de la partida en cuanto pierdes. Si pulsas el botón retroceder, este te lleva al nivel principal y no puedes reiniciar la ronda, además de que tampoco cuenta con un menú de pausa en donde puedas acceder a una repetición o incluso a las opciones sin tener que salir al menú principal, lastrando la usabilidad en este caso.

Mis tres propuestas de mejora

En esta sección me voy a centrar en tres propuestas de mejora a tres problemas comentados anteriormente siguiendo el patrón comentado por Eelke Former en la literatura de la asignatura [7].

Problema El jugador tiene que esperar a que la ronda termine para finalizar el juego, el cual considero como un problema de usabilidad si el jugador quiere interrumpir el juego por cualquier motivo.
Contexto Como ya comenté en el capítulo anterior, en Save Oceans el juego se ejecuta indefinidamente ronda a ronda hasta que el tiempo de la ronda llega a 0. En cambio, en los juegos de tipo puzzle se puede pausar normalmente la acción.
Fuerzas
  • Principalmente el usuario necesita responder a un evento externo como una llamada o un mensaje.
  • A veces incluso el usuario solo quiere salir del juego en vez de seguir jugando hasta que termine y/o no puede cerrar el juego (se ejecuta a pantalla completa, por ejemplo, y no están accesibles los controles de la ventana).
  • Otras veces viene dado porque el usuario quiere cambiar la configuración del juego [Figura 3], como puede ser el volumen de la música o configurar los botones.
Solución
Ejemplo de menú de pausa.
Figura 7. Ejemplo de menú de pausa.

Para arreglar esto, se podría implementar una escena de pausa [Figura 7] que pare el cronómetro del juego y que tenga únicamente el control de la UI, evitando que se pueda usar la UI del juego. Además, esta escena puede incluir un menú de pausa donde el jugador pueda resumir el juego, reiniciar la ronda, acceder al menú de configuración y salir al menú principal o mismo cerrar el juego.

Justificación Usabilidad – En la actualidad, lo normal es que los juegos se ejecuten en equipos personales como PC o consolas, y por eso el jugador puede estar pendiente a eventos externos como interrupciones por elementos externos al juego.
Ejemplos
Pantalla de pausa de Ratchet & Clank: Rift Apart.
Figura 8. Pantalla de pausa de Ratchet & Clank: Rift Apart.

En la saga de Ratchet & Clank, de PlayStation, se puede acceder a una escena de pausa [Figura 8] pulsando el botón Start en donde se pueden acceder a diferentes pantallas, como acceder al menú de configuración, salir al menú principal del juego, menús de guardado y carga de partida, acceder a diferentes extras o a menús contextuales del jugador, como pueden ser el mapa del planeta, armas y artilugios y otros.

Problema El jugador tiene que memorizar cuantos elementos quedan en la ronda, aunque pueden saber de forma aproximada cuántos elementos quedan con el radar. Aún así, para mi esto puede suponer un problema de accesibilidad para la gente con trastornos cognitivos como TDAH o TEA.
Contexto Como comenté en el segundo capítulo, en el momento en el que inicia una ronda, se muestra en pantalla un panel con la cantidad de elementos a recoger en la ronda actual, dividido por tipo de elemento. Este panel desaparece, dando control al jugador. Aún así, con la función de radar, el jugador puede saber dónde están los elementos restantes, pero solo como forma aproximada.
Fuerzas
  • El jugador tiene que atender a elementos externos del juego (por ejemplo, contestar un mensaje) cuando aparece el panel de número de elementos para completar la ronda.
  • El jugador no se acuerda del número de elementos en la ronda actual.
  • Existe una condición cognitiva del jugador que hace que no pueda retener la atención en el juego en todo momento.
Solución
Ejemplo interfaz en el que sale un icono representandouna bolsa de basura y el número de elementos que faltan por limpiar en la ronda.
Figura 9. Ejemplo interfaz en el que sale un icono representando
una bolsa de basura y el número de elementos que faltan por limpiar en la ronda.
  • Dar acceso al jugador en el momento que quisiera al panel con la cantidad de elementos, sea mediante una acción que permita mostrar/ocultar el panel o mostrando esta información en la escena de pausa propuesta en la anterior tabla.
  • Otra posible solución es añadir un bullet journal (listado por tipo de elemento) o un contador en la interfaz del juego [Figura 9] que vaya decrementando su número a medida que el jugador recoge los elementos de la cuadrícula.
Justificación Accesibilidad – Como persona con TDAH, conozco personalmente los problemas que originan estos trastornos cognitivos. A veces es imposible controlar de forma consciente cuando pierdes el foco en el juego, y con ello olvidarte de lo que estabas haciendo. Añadir ayudas (sean visuales o textuales) permite recordar el objetivo actual cuando vuelves a tomar el foco en el juego, evitando muchas fricciones y problemas para continuar el hilo actual sin tener que reiniciar la partida.
Ejemplos
Interfaz del juego de Mario Odyssey en un nivel.
Figura 10. Interfaz del juego de Mario Odyssey en un nivel.

La franquicia de videojuegos de Mario, de Nintendo, es un claro ejemplo de juegos que tienen una usabilidad y accesibilidad muy pulida. Por poner un ejemplo, en Mario Odyssey se tiene presente el número de Lunas que se pueden recoger en el mundo en la parte izquierda de la pantalla [Figura 10]. Además se incluye el número de monedas y otra información a plena vista del estado actual del juego sin tener que delegar toda esta información en el jugador o en menús secundarios.

Problema El jugador no puede utilizar otro tipo de controles, teniendo que controlar el juego en todo momento mediante ratón. Es un problema de accesibilidad porque no permite que el juego se adapte ante trastornos físicos del jugador. También se puede ver como un problema de usabilidad al no permitir que el juego se adapte al jugador.
Contexto Como expliqué en el segundo apartado, en el momento en el que se inicia el juego en PC se hace latente que solo se puede controlar con el ratón porque el menú principal no reacciona ante eventos del teclado. Podría escudarse en que es un juego similar al buscaminas, y que el control principal recae en el ratón, pero existen muchos otros juegos del mismo tipo que permiten controles alternativos.
Cabe destacar que en la actualidad hay una configuración de controles en Save Oceans, como se ve en la Figura 3. En estos momentos solo se puede cambiar el botón principal del ratón.
Fuerzas
  • El jugador no tiene ratón, el ordenador no incluye conexión a periféricos o está usando su dispositivo en un sitio físico donde no puede usar un ratón.
  • El jugador prefiere conectar un mando al dispositivo para jugarlo con él.
  • El juego se ejecuta en un dispositivo donde no se puede emular un ratón.
Solución
  • Implementar un sistema para poder leer la entrada controles en el juego según los botones que esté pulsando el jugador, es decir, cuando el jugador mueva el ratón leer del ratón, cuando pulse el teclado leer del teclado y si conecta un mando, leer los botones de este mando.
  • Mostrar una pantalla en el menú de configuración en el que el usuario pueda configurar qué entradas va a leer el juego.
Justificación Accesibilidad – Al adaptarse al control que el usuario utilice permite que el juego sea usado por personas con movilidad reducida o trastornos físicos.
Usabilidad – Permitiendo leer el control que el usuario esté usando permite que el juego se adapte al jugador y no al revés, facilitando la jugabilidad del mismo.
Ejemplos
Interfaz de mapping de Horizon: Zero dawn en PS4 y en PC.
Figura 11. Interfaz de mapping de Horizon: Zero dawn en PS4 y en PC.

Existen muchos juegos que, dependiendo de la plataforma en la que se están ejecutando, el mapa de controles cambia para adaptarse a las entradas soportadas por la plataforma, como Horizon: Zero dawn [Figura 11]. Admás, xisten otros juegos que incluso cambian los iconos de los controles según la entrada recibida en ese momento (si se pulsa el teclado se ponen teclas, si se pulsa un botón de un controlador, se ponen los botones de ese controlador).

Bibliografía

  1. R. Alcalde Azpiazu, “Save Oceans”. itch.io [Online]. Disponible: https://nekerafa.itch.io/save-oceans
  2. “DOMEJam 2021”. itch.io [Online]. Disponible: https://itch.io/jam/domejam-2021
  3. A. Beeri, “DOME – Design-Oriented Minimalist Engine”. github.com [Online]. Disponible: https://github.com/domeengine/dome
  4. B. Nystrom and friends, “- Wren”. wren.io [Online]. https://wren.io/
  5. B. Nystrom, “Game Programming Patterns” (2009-2014). [Online]. https://gameprogrammingpatterns.com/
  6. B. Nystrom, “Crafting Interpreters” (2014-2021). [Online]. https://craftinginterpreters.com/
  7. E. Folmer, “Designing Usable and Accessible Games with Interaction Design Patterns”. gamedeveloper.com [Online]. https://www.gamedeveloper.com/design/designing-usable-and-accessible-games-with-interaction-design-patterns

Debat0el PEC 1. Análisis de Usabilidad y Accesibilidad en Save Oceans

Deixa un comentari