Diseño de experiencias de usuario e interfaces

Pública

Juego

Ilustración 1 Portada del juego.

Título

Droid Fighters

Desarrolladora

Desarrolado para la PEC3 de Media para videojuegos

Género

Lucha

Introducción

Al tratarse de un juego para otra PEC, no ha sido desarrollado completamente, el análisis del juego y de la interface se basan en la visión de la versión final del juego y no en su estado actual.

Droid Fighters es un juego de lucha 3D para 1 o 2 jugadores. El juego es 3D pero el movimiento está limitado al plano que forman los dos jugadores con la vertical. El jugador podrá enfrentarse a la IA o a otro jugador con el mismo ordenador.

Los controles aceptados son teclado, tanto para un solo jugador como para 2 jugadores simultáneos, y soporte para jugar con mando. Por supuesto se puede configurar cualquier combinación de controles y jugadores.

Algunos mapas y luchadores estarán bloqueados al principio, requiriendo jugar torneos para desbloquearlos. Añadiendo una componente de progreso para invitar al jugador a dedicar más tiempo y recompensándole por su esfuerzo.

Público objetivo

Jugadores casuales de PC y Consola con tiempo para jugar de menos de una hora diaria. Como el juego permite partidas rápidas de menos de 3 minutos el juego es ideal para jugadores que no tengan mucho tiempo disponible. Debido a las características del juego es fácilmente portable a PC y consola.

Mecánicas

Sistema de vida: Cada jugador tiene su barra de vida y una salud asociada a ella. Cada ataque que reciba reducirá la salud actual y el primero que llegue a 0 pierde, y, por lo tanto, el otro jugador gana.

Movimiento: Podremos desplazar el personaje a derecha y a izquierda de la pantalla. El juego es 3D pero el movimiento está limitado al plano que forman los contrincantes y el eje vertical.

Ataque: Los luchadores tienen dos controles para realizar ataques, el primario, para atacar con las extremidades superiores por ejemplo y el secundario, para atacar con las inferiores, por ejemplo.

Defender: Los luchadores tienen un botón para defender, cuando la defensa está activa, los ataques del contrario causan menos daño.

Los ataques y defensa se pueden combinar con los controles de arriba y abajo para hacer ataques altos, defensa baja y las demás combinaciones. Si no se pulsa arriba o abajo el ataque o defensa será al medio.

Cámara automática: La cámara tiene en cuenta la posición de los luchadores, ajustándose automáticamente según la distancia entre ambos para mantener el encuadre.

Creación de jugadores: Para poder conservar estadísticas y que los jugadores puedan consultarlas y picarse entre ellos. Los jugadores podrán registrar jugadores en el juego con el apodo que deseen. En el menú de configuración de la partida podrán seleccionar su apodo de la lista, crear uno nuevo, resetear las estadísticas actuales o borrar el jugador.

Sesiones de juego: Al configurar la partida podemos seleccionar empezar una nueva sesión de juego. Con esto indicamos al juego que queremos guardar las estadísticas de esta sesión de forma independiente, las estadísticas globales seguirán registrándose de forma automática, pero se podrán consultar las estadísticas de la sesión al terminarla o en cualquier momento del futuro.

Desbloqueo de personajes: para darle más jugabilidad y no limitar al ljugador a luchar para ganar se presentarán personajes y mapas bloqueados a priori. El jugador tendrá que jugar torneos, y ganarlos, para desbloquearlos. También hay personajes ocultos que solo se desbloquearán si se cumplen determinadas condiciones (ganar x torneos, ganar con los personajes base sin recibir daño, etc…)

Jugabilidad

Modo combate rápido:

Al inicio de la partida se puede escoger mapa, jugadores y controles. Se cargan por defecto unos ajustes que permiten empezar una partida rápida. Seleccionando un mapa y los personajes al azar. Los jugadores podrán seleccionar controles pulsando una tecla, el primero que pulse una tecla será el jugador 1 y el segundo jugador 2. Con esto, si un jugador no sabe qué hacer, simplemente puede dar en el parpadeante botón de empezar y probar directamente el juego.

Una vez empezada la partida los jugadores jugarán rondas al mejor de tres. Si al finalizar el tiempo de ronda ambos jugadores tienen la misma cantidad de vida será un empate y tendrán que luchar una ronda adicional.

Al final de la sesión se mostrarán las estadísticas completas para cada jugador, número de victorias totales de cada jugador y ratios de victorias. Con esta característica pretendo aumentar la competitividad del jugador haciendo que quiera jugar más para mejorar sus estadísticas (y empeorar las de sus rivales).

Una voz informa del estado del juego en cada una de las fases para mejorar la inmersión y la accesibilidad.

Modo torneo:

El modo torneo permite desbloquear mapas y jugadores. Es un modo de un solo jugador. Se generará una lista de adversarios y nos tendremos que ir enfrentando a ellos hasta llegar a la final. Está garantizado que el combate final será contra un personaje bloqueado y un mapa también bloqueado (si queda alguno por desbloquear).

Diseño de la interface

Controles

Los controles actualmente siguen los requisitos de la práctica para que dos jugadores puedan usar el teclado a la vez. Para el movimiento se utiliza: Para el jugador 1: A y D y para el jugador 2: J y L. Ataque F y H para jugador 1 y 2 respectivamente y defensa R e Y.

En la versión final del juego se implementaría el soporte para mando acercando aún más los controles estándar y aumentando la accesibilidad suministrando diferentes maneras de controlar el juego.

El esquema de control no es del todo estándar con la industria, las teclas R y F no son las más habituales para atacar y defender. Se han implementado así por requerimientos de la práctica y en la versión final del juego se podrán otras teclas como Ctrl o espacio, pero se podrá personalizar completamente.

HUD de los jugadores

El HUD de estado de los jugadores está basado en el estándar de la industria. Una barra indica al jugador el nivel de salud actual y cada vez que reciba daño la barra bajará la parte correspondiente.

El nombre de los jugadores se indica debajo de la barra de salud. Los jugadores podrán personalizar su nombre en el menú de configuración de partida.

En la parte inferior izquierda para el jugador 1 y parte inferior derecha para el jugador 2 hay dos indicadores radiales. Estos son los contadores de victoria de cada jugador. Cada vez que gane una partida uno de los indicadores se iluminara.

Ilustración 2 HUD del jugador 1

Ilustración 3 HUD del jugador 2

He decidido diseñar el interfaz de esta forma no diegética para hacerlo similar al estándar de la industria, mejorando la accesibilidad de los jugadores. Esto permite acercar el juego a cualquier jugador.

Información del estado de la partida

El estado de la partida se muestra mediante los indicadores radiales que ya hemos visto y el indicador del centro de la pantalla que indica el tiempo restante de ronda.

El juego incorpora indicadores acústicos que informan del inicio de ronda, y del inicio del combate mejorando la accesibilidad. Al igual que la sonorización habitual del movimiento, ataques, impactos y recibir el daño.

Ilustración 4 Tiempo de partida y victorias de cada jugador

Lobby

El lobby es la escena para configurar la partida de jugador contra jugador. En ella los jugadores podrán seleccionar sus personajes y el mapa. Cuando ambos jugadores hayan marcado como que están listos (“Ready!”), la partida podrá comenzar.

El diseño minimalista está inspirado en los clásicos del género “Street Fighter” y “Tekken”. La interface permite claramente ver los distintos ajustes disponibles y ejecutarlos. La versión final del juego tendrá una barra inferior con un resumen de los controles disponibles (Flechas para navegar y el botón para seleccionar o los que el jugador haya personalozado) para mejorar la accesibilidad.

Ilustración 5 Lobby, configuración de partida.

Menús de juego

Actualmente los menús del juego solo permiten cambiar los ajustes de audio. Separados por canales, el jugador puede ajustar los volúmenes como quiera.

Ilustración 6 Ajustes de audio

El juego final incorporará un menú donde personalizar los controles, que cada jugador podrá guardar en su perfil haciendo el cambio de controles de forma automática cuando se selecciona el jugador en la configuración de partida.

Diseño de experiencias de usuario e interfaces

Pública

Juego

Ilustración 1 Portada de Left 4 Dead 2.

Título

Left 4 dead 2

Desarrolladora

Valve

Publisher

Valve

Género

FPS cooperativo ambientado en el apocalipsis zombi.

Introducción

Es un juego de disparos en primera persona ambientado en el apocalipsis zombi. El jugador encarna a uno de los cuatro supervivientes que forman el grupo. Los supervivientes tendrán que colaborar para sobrevivir y llegar juntos al lugar de extracción de cada nivel. Tendrán que completar niveles luchando contra hordas de zombis y enemigos especiales. Para ello tendrán que recoger y usar armas y equipamiento a lo largo de las pantallas. Deberán administrar la munición y los botiquines, decidiendo si usarlos consigo mismos o con sus compañeros.

Clasificación de los elementos de la interfaz

No diegético

Un HUD clásico muestra el estado de nuestros compañeros. Está situado abajo a la izquierda. cada uno con su foto, barra de vida, nombre y objetos usables que porta. Cuando alguno de los compañeros esté en estado crítico se mostrará en el HUD, un icono si está atrapado por un zombi y otro en caso de que haya sido derribado.

El HUD del jugador está en la esquina inferior derecha, con foto, barra de vida y salud actual.

El inventario con armas y objetos se representan en la parte central derecha de la pantalla. La interface nos avisa si nos falta alguno de los objetos resaltando el icono en gris, indicando, por ejemplo, que podemos recoger granadas y que tenemos un botiquín.

Ilustración 2 El HUD de Left 4 Dead 2 con sus tres partes.

Diegéticas

El progreso de los objetivos es visible directamente en el mundo, cuando tengamos que abrir una puerta mecánica o desplegar un puente, esté se moverá en tiempo real en el mundo, indicando a los jugadores en qué estado se encuentra y cuanto falta para que llegue a su posición final.

El juego incorpora un sistema de guía a través de las voces de los personajes. Estos diálogos se activan de forma automática y sirven para dar pistas sobre lo que hacer o informar a los jugadores de que se está recargando el arma. También avisan que han visto un enemigo especial cuando se le apunta por primera vez. Si un jugador se separa los demás miembros le dirán que deberían permanecer juntos. Incluso avisan de que debemos cerrar la puerta de la sala segura del final del nivel.

Los personajes aprovechan las pantallas de transición o carga para conversar, entre ellos o sobre sí mismos, lo que es una buena forma de mejorar la inmersión y darle trasfondo a los personajes de una forma natural y no invasiva.

Representaciones espaciales

Los objetos interactuables y recolectables se resaltan si el jugador está apuntando cerca de la localización del objeto, mientras se esté a una distancia mínima. Al resaltar el objeto también se activarán diálogos para informar a los demás miembros de lo que se ha encontrado.

A los personajes heridos, derribados y pringados de vómito se les resaltará la silueta con un código de colores en función del estado en el que estén. Con esto es fácil y rápido ver el estado de los aliados.

Los objetivos también se resaltan en el mundo para facilitar su localización.

Ilustración 3 Pistola resaltada y tutorial indicando la letra para recogerla.

Representaciones meta

Cuando atacamos y matamos zombis que están cerca la sangre salpicará a la pantalla. Cuando el Boomer vomite o explote nos cubrirá de vómito y representará con un efecto de ver a través de una película de material viscoso.

Si somos heridos de gravedad empezaremos a escuchar nuestras palpitaciones mientras que empezamos a escuchar el sonido del mundo de forma cada vez más distante.

Al consumir pastillas o inyecciones de adrenalina también veremos efectos visuales en la pantalla adulterando la visión del jugador.

El juego nos muestra en el centro de la pantalla la dirección de donde proviene el daño que recibimos, ayudando a saber si tenemos un zombi fuera de nuestro rango de visión.

Ilustración 4 Efecto de vómito al ser atacado por un Boomer.

Transiciones entre categorías

El panel de información pasa de ser un elemento no diegético a ser una representación espacial. Primero es un cartel en la parte central inferior de la pantalla, después de unos segundos el letrero se desplaza a la localización del elemento en el mundo.

Propuestas de cambio de 4 elementos a tipo «diegético»

Inventario

El HUD correspondiente al inventario se puede incorporar totalmente como elemento diegético. Para las armas de fuego, se puede incorporar en el propio juego mediante orificios en el cargador a través de los cuales se pueda ver la munición como en un cargador real. A diferencia de las armas reales, los orificios tendrán que ser mayores para que el jugador pueda ver mejor el estado de la munición. Para representar el número de cargadores que nos queda podemos añadir un número grabado en los cargadores indicando cuantos cargadores nos quedan, aunque simular que está escrito con un rotulador sumergiría aún más al jugador en la atmosfera del juego.

Ilustración 5 Cargador real con ventana para comprobar las balas restantes.

Para los objetos utilizables no tendríamos problema, pues ya están incluidos en el mundo. Cuando el jugador quiera repasar que objetos tiene podrá usar la rueda del ratón o las teclas y estos se irán mostrando en sus manos, ya sea una bomba o un botiquín.

Para no perder accesibilidad podemos hacer que el HUD esté oculto por defecto y solo se muestre si tenemos en pantalla un objeto para recoger o si el jugador cambia de objeto. Pero debido a los pocos objetos del juego no reduciría tanto a la accesibilidad como aumentaría la inmersión en el juego.

Panel de personajes

En juegos de ambientación futurista o simplemente más tecnológicos lo tendríamos muy fácil. Al igual que en Deep Dead space podríamos representar la vida de los personajes en su propio traje. En Left 4 Dead esta solución sacaría completamente al jugador de la atmosfera. Pero igualmente podemos representar la salud de los jugadores en su propio cuerpo con elementos más rudimentarios.

En el caso de los compañeros, irán apareciendo heridas y vendajes sobre su cuerpo. Cuantos más vendajes, más dañado ha sufrido el personaje. Irónicamente, al curar a un aliado, le estaríamos quitando vendajes en lugar de ponérselos. Alternativamente a esta solución podemos hacer que los personajes muestren heridas abiertas y que estás se recubran por vendas cuando se cure. Para hacer desaparecer los vendajes se pueden desprender cuando el jugador sufra daño y se vuelva a abrir la herida o con desvanecimiento en el tiempo. Aunque mostrar tantas heridas cambiaría el juego de genero al gore, por eso creo que la solución de mostrar vendajes directamente al ser herido se acerca más a la atmosfera del Left 4 Dead.

Para el propio jugador habría que seguir la misma regla, solo que representados los vendajes en sus brazos.

En cuanto a los objetos de los compañeros, estos ya están representados físicamente en el propio personaje, con un sencillo vistazo podemos ver cuantos llevan botiquín o granadas.

Efecto vómito y sangre

El efecto sangre es fácilmente representable añadiendo salpicaduras de sangre en los brazos y armas del jugador. Los chorros de sangre ya brotan de los enemigos con lo que no haría falta añadirlos.

Para el vómito añadiremos una película viscosa por los brazos y el arma. En el caso de los compañeros, añadiremos el afecto con la misma película sobre su cuerpo, en lugar del resaltado de la silueta del personaje en color verdoso.

Uso de la adrenalina

Para convertir el afecto de la adrenalina en un elemento diegético el juego está a medio camino, la velocidad del jugador aumenta y el sonido del juego se escucha lejano, pero se puede aumentar la usabilidad cambiando los ataques de las armas, haciendo que aumente la sensación de poder mientras dure el efecto de la adrenalina. Estos movimientos serán más visiblemente más poderosos que los ataques normales, aumentando su velocidad de ataque y exagerando sus movimientos para representar el estado en el que se encuentra el personaje.

Diseño de experiencias de usuario e interfaces

Pública

Juego

Título

Reaper: tale of a pale swordsman

Desarrolladora

Hexage

Publisher

Hexage

Género

Juego de acción hack and slash con rol y aventura.

Introducción

El juego se presenta inicialmente como un juego de hack and slash, el jugador tiene habilidades de salto y diferentes ataques. Para la transición de un nivel a otro se utiliza un mapa al estilo de un juego de aventuras, algunas de las localizaciones permitirán interactuar con personajes del juego al incorporar un sistema de misiones. En estos diálogos se han incorporado funciones de rol pudiendo regatear recompensas o responder a los diálogos con diferentes actitudes. El jugador puede personalizar su personaje con el sistema de inventario y los vendedores que se irá encontrando durante el juego. Podrá acumular puntos “cráneos de rabia” haciendo ataques normales para poder realizar ataques especiales aún más poderosos.

Ilustración 1 Game play del juego.

Análisis de los controles

Controles PC

El juego está diseñado para móvil y después portado a PC, esto causa, al igual que en otros títulos, que la versión PC tenga unos controles especialmente difíciles de manejar. En PC, controlamos el desplazamiento lateral con las teclas WASD y salta con el espacio. Estos controles básicos son lógicos e intuitivos pero esos mismos controles se han usado para mapear los ataques especiales. En la versión móvil, los ataques especiales se activan con gestos. Presionar hacia arriba dará como resultado un golpe que puede lanzar a los enemigos por el aire, presionar hacia abajo da un golpe poderoso, presionar hacia abajo mientras estás en el aire da un golpe repentino hacia abajo que afecta a cualquier enemigo dentro de un radio determinado. Tocar dos veces la barra espaciadora dará como resultado un ataque de torbellino, convirtiendo al espadachín en una poderosa ráfaga de cuchillas que rebota al entrar en contacto con las entidades y causa daños graves en el proceso. Tocando dos veces la tecla izquierda o derecha hará que el espadachín haga un desplazamiento rápido en esa dirección mientras ataca.

El jugador acumula puntos de ira con los ataques normales a los enemigos. Esto se consigue quedándose quieto cerca de los enemigos causando que dejes de sentir el juego mientras esperas que acumules los puntos, como si estuvieras recolectando madera. Esto convierte a gran parte del juego en una experiencia simple y pasiva, completamente en contra del espíritu de este tipo de juegos.

Ilustración 2 Personaje con 8 puntos de ira.

Los puntos de ira se utilizan para hacer los ataques más poderosos, pero por cómo están definidos los controles, lo más probable es que se activen las acciones especiales en un momento que no nos interese.

El mayor problema con el control de PC es el control del personaje. Al ser un juego de hack and slash el control es muy importante, tanto para el combate como para el desplazamiento y evitar los obstáculos. Aparte de gastar puntos de ira constantemente sin querer, los obstáculos te harán rebotar mientras te dañan, en el caso de las púas, los fuegos te quemarán de forma imperceptible y agujeros que te quitarán una gran parte de salud.

Controles Android

La pantalla táctil se divide en 3 zonas, en la parte de la derecha se controlan los gestos, en la parte izquierda es para desplazarnos a la izquierda y la parte central para desplazarnos a la derecha. Solo por la separación de los controles de movimiento y ataque ya mejora muchísimo la experiencia respecto a la versión PC.

Ilustración 3 Zonas táctiles en la versión movil.

El salto se realiza tocando en la zona de gestos, el doble salto tocando una segunda vez, pero para hacer el ataque torbellino hay que pulsar dos veces seguidas mientras el personaje está en el aire. Esto dificulta mucho el ejecutar una acción determinada y, como pasaba en PC, gastar los valiosos puntos de ira.

Para deslizar el personaje y atacar se desplaza el dedo en la dirección que queramos efectuar el ataque. Lo mismo para los ataques vertical y hacia abajo, deslizaremos el dedo en la dirección que queramos atacar.

Conclusión

Ambos mapas de control presentan problemas con la elección de las teclas o gestos, el mismo para acciones completamente diferentes, haciendo muy difícil el aprendizaje de los controles. La versión móvil mejora en cuanto a que se solapan menos controles, pero sigue habiendo solape en el salto y el ataque torbellino.

El ataque automático, aunque no es un control per se, arruina la experiencia en ambas plataformas por igual, mala idea implementar ataque automático en un juego de combate.

Aunque no estoy acostumbrado a jugar en el teléfono y menos a este tipo de juegos, el control es mucho más intuitivo y claro que en PC aunque, como ya he comentado, ambas plataformas son muy mejorables.

Propuesta de mejora

Mapeo de controles

Una forma de mejorar el sistema de control es cambiar los atajos del teclado:

• Movimiento: WASD, mismo mapa de control para movimiento en suelo y en el aire. La mayoría de juegos usan estos controles de forma sistemática, a mayores se pueden añadir los cursores para poder dar la opción de usar uno u otro para moverte.
• Salto: Espacio, lo dejaría como está. Al igual que para el movimiento, es el standard de la industria.
• Doble salto: Doble espacio. Mismo razonamiento que en el salto, es un estándar.
• Ataque: Clic izquierdo. Como en la mayoría de dispositivos con teclado, el jugador contará con un ratón, esto permite separar las acciones de ataque de los movimientos y las de ataque. Cuando el jugador quiera atacar hará clic al ratón y el personaje hará el ataque normal en la condición que esté. Eliminando el ataque automático.
• Ataque especial: Clic derecho. Los ataques especiales se realizarán combinando la tecla de dirección y el clic derecho del ratón. Esto nos permite tener más control sobre el personaje al separar las acciones. El funcionamiento es el siguiente. Si el jugador está yendo a la derecha y quiere hacer un dash a la derecha, solo tiene que pulsar el click secundario y el ataque se realizará. Los ataques hacia arriba y hacia abajo siguen el mismo razonamiento. Si el jugador no está presionando ningún control de movimiento puede pulsar primero el clic derecho y después la dirección que quiera darle al ataque.
• Torbellino: doble clic derecho. Al ser un único ataque podemos ponerlo en el ratón. En caso de que pudiéramos desbloquear más habilidades mediante habilidades o equipamiento, podríamos seleccionar las habilidades con las teclas numéricas. Como buen juego de rol el jugador podría personalizar estos atajos con las habilidades que deseé.

Ilustración 4 Esquema de controles propuesto

Configuración de controles

Otra forma es permitir la reconfiguración directamente, con un menú de configuración donde el jugador podrá modificar los controles y adaptarlos a su gusto. Un standard muy habitual en la industria, esto permitirá tener control total sobre los atajos de control del juego pudiendo ser personalizados. Esto abre un abanico para que cualquiera pueda establecer su control ideal y mejoraría la accesibilidad para los jugadores más limitados.

Ilustración 5 Menú de configuración del WoW.

Interacción con el mundo

Al mejorar los controles los peligros del nivel son menos amenazantes, pero aún se pueden mejorar algunos puntos.

• Es difícil darte cuenta de que te estás quemando si no te fijas en el indicador con forma de corazón de vida. Esto provoca frustración al tardar en darte cuenta de donde ha venido el daño o enfrentarte a la siguiente pelea con menos vida de la que pensabas. Esto se puede arreglar añadiendo feedback, por ejemplo, sonido de hoguera cuando estás cerca de los calderos y aumentar el volumen cuanto más cerca estés. Cuando el jugador llegue al rango de sufrir daño unas llamas empezarán a cubrir el personaje. También se pueden introducir efecto de sonido de quejidos por las quemaduras.
• Para las plantas que te hacen rebotar, en línea con la solución de los calderos, se puede añadir un sonido que represente un rebote, o al menos un sonido de impacto contra una superficie blanda o vegetal (un arbusto o similar).