Diseño de UI y UX

La interfaz de usuario (UI) combina el diseño visual artístico con el diseño de información centrado en la comunicación para producir menús, diseños de tiendas, pantallas de visualización (HUD) y otras interfaces con las que los jugadores interactúan. La experiencia de usuario (UX) se refiere a cómo los jugadores interactúan con el juego, cómo hacen que sus elecciones sean conocidas y cómo se mueven de una elección a otra. Si bien UI y UX a menudo trabajan de manera colaborativa, UX tiene un enfoque más significativo en la interactividad y la experiencia del jugador que en el diseño visual e informativo de la UI.

UI

La UI comparte información vital como puntos de salud, objetivos de misiones y precios que permiten a los jugadores tomar decisiones y navegar por el juego. Dado que a menudo es la forma principal en que los juegos se comunican con el jugador, la UI es fundamental para la experiencia de los jugadores. Una UI mal diseñada puede dejar a los jugadores confundidos y frustrados, lo que conduce a una mala retención, mientras que una UI bien diseñada puede contribuir al compromiso y la monetización. Una UI diseñada de manera efectiva emplea los siguientes principios:

• Priorización
• Atención
• Lenguaje Visual
• Convenciones
• Consistencia

Priorización

Compartir la información más significativa primero se conoce como la Jerarquía de la Información. Esto es particularmente crucial en juegos donde los jugadores deben tomar decisiones instantáneas basadas en un conjunto restringido de información. Al priorizar la UI, identifica qué es esencial o más relevante para la experiencia del jugador y asegúrate de que sea accesible y fácil de localizar. Considera estas preguntas:

• ¿Qué está haciendo el jugador en este momento?
• ¿Qué es lo más importante que deberían tener en cuenta o tener acceso?
• ¿Qué elecciones tienen que hacer?
• ¿Qué información necesitan para tomar esas decisiones?
• ¿Con qué frecuencia participarán en esas decisiones?

La información y las características importantes cambian según factores como el rol que el jugador asume, su ubicación en el mundo 3D y los objetos que sostienen. La UI puede ser diseñada para presentar solo lo que importa contextual y funcionalmente: intercambiando los botones y la información dependiendo de qué es útil en cada contexto. Esto asegura que los jugadores siempre tengan lo que necesitan, sin el desorden de todo lo que no necesitan.

Ejemplos

Elementos irrelevantes pueden causar confusión y distracción. Spellbound RPG tiene una UI limpia y minimalista que es particularmente crucial para interfaces móviles, ya que las pantallas pequeñas pueden abrumarse fácilmente con botones, pantallas y texto excesivos.

En Super Striker League, las interacciones de los jugadores varían según si controlan la pelota. Sin la pelota, los jugadores pueden Correr y Tacleando para recuperar el control. Una vez en posesión, los botones cambian a Fintar y Pasar, permitiendo a los jugadores esquivar oponentes y pasar la pelota. Al alternar estos botones, la UI se mantiene contextual y útil, evitando distracciones innecesarias.

En The Survival Game, los jugadores deben estar al tanto de su estado de salud y hambre, y tener acceso rápido a su mapa, inventario y herramientas. Esta información les permite tomar decisiones y priorizar acciones para la supervivencia. Si esta información o herramientas son difíciles de encontrar o están ausentes, la supervivencia se vuelve más desafiante y frustrante innecesariamente.

Atención

A pesar de una UI minimalista, priorizada y contextualizada, los jugadores aún pueden necesitar asistencia para localizar lo que necesitan. Los diseñadores de UI pueden utilizar varias herramientas visuales para captar y guiar la atención de los jugadores, tales como:

• Color: Los colores brillantes atraen más la atención que los apagados. Usa tonos vibrantes para texto, botones y otros elementos cruciales, y tonos apagados para los menos significativos. Este contraste mejora la visibilidad y reduce la distracción.
• Tamaño: Los elementos más grandes son más conspicuos y se perciben como importantes en comparación con los más pequeños.
• Espacio: Los elementos rodeados de suficiente espacio negativo o relleno son llamativos.
• Proximidad: Los elementos agrupados implican una conexión. Al colocar características y objetos relacionados cerca unos de otros, los jugadores pueden entender su asociación y localizarlos más fácilmente.
• Movimiento: Los elementos animados llaman la atención. Incluso un ligero movimiento puede hacer que un elemento se destaque entre sus contrapartes estáticas. Los efectos de partículas, botones que se mueven y flechas animadas se utilizan a menudo en tutoriales para orientación.

La moderación es clave con estas herramientas. Un uso excesivo de elementos brillantes y en movimiento podría abrumar y confundir a los jugadores en lugar de ayudarlos.

Ejemplos

En Jailbreak, la UI del pase de temporada presenta una franja de amarillo dorado debajo de los iconos exclusivos del pase de temporada, llamando la atención sobre las recompensas premium y haciéndolas visualmente distintas de las gratuitas.

En Dragon Adventures, se da prioridad visual al paquete de monedas de mayor valor aumentando su tamaño y separándolo con más relleno, para distinguirlo de paquetes más pequeños.

En Tower Defense Simulator, se utilizan tanto el tamaño como la proximidad para agrupar y distinguir visualmente las Apariencias de Torres Diarias de las Cajas Diarias.

Lenguaje visual

Además de dirigir la atención de los jugadores hacia los elementos más importantes en la pantalla, los diseñadores de UI desarrollan un lenguaje visual para ayudar a los jugadores a entender lo que están viendo. Un lenguaje visual es un conjunto de decisiones de diseño deliberadas y consistentes que proporcionan información de un vistazo sobre el propósito, estado, asociaciones y relevancia de un elemento. El lenguaje se construye a partir de herramientas como la forma, el color y el estilo. Algunos de los usos del lenguaje visual incluyen:

Íconos

Los íconos pueden emplear una identidad visual que transmite significado y asociaciones. Por ejemplo, los íconos relacionados con estadísticas específicas pueden compartir una paleta de colores y formas similares, lo que permite a los jugadores reconocer y comprender su función.

Botones

Como una forma prevalente de entrada del jugador, los botones deben ser fáciles de identificar. Alojar botones en un contenedor, como un color que rodea el texto o el ícono, los distingue del fondo, haciéndolos parecer interactivos. Agregar resaltados o sombras puede mejorar su atractivo táctil al sugerir profundidad en 3D.

Texto

Los encabezados y títulos que contienen información significativa a nivel alto deben ser más grandes y en negrita que el texto del cuerpo. Se deben considerar colores que sean altamente legibles y que contrasten bien con el color de fondo sobre el que se mostrarán. Elecciones estilísticas como el color y el uso de negrita pueden resaltar información importante como artículos del juego, estadísticas o habilidades. Siempre se debe priorizar la legibilidad al elegir una fuente.

Una vez que se ha diseñado el lenguaje visual, puede documentarse en una Guía de Estilo, un conjunto de reglas y ejemplos que ayudan a todos en el equipo a entender cómo aplicar el lenguaje de manera consistente en el juego.

Convenciones

Las convenciones son decisiones de diseño comúnmente aplicadas que se ven en muchos juegos diferentes. Algunos ejemplos incluyen:

• Un símbolo de X en un botón que cierra el diálogo cuando se presiona
• El color gris aplicado a botones que actualmente no se pueden usar
• Un ícono de candado superpuesto a un botón o característica para indicar que el jugador aún no lo ha ganado o desbloqueado

Dada su uso generalizado, los jugadores suelen estar familiarizados con tales convenciones. Aprovechar esta familiaridad puede hacer que una interfaz sea más intuitiva y reducir la necesidad de instrucciones específicas del juego. Jugar juegos dentro de tu género objetivo puede ayudar a identificar convenciones que los jugadores podrían reconocer. Un diseñador de UX puede optar por un enfoque único para ajustarse mejor a su juego, pero conocer estas convenciones informa su proceso de toma de decisiones.

Consistencia

Cualesquiera que sean las decisiones que tome un diseñador de UI, debe aplicarlas de manera consistente a lo largo del juego. La consistencia ayuda a los jugadores a aprender a navegar por el juego de manera más eficiente y evita la confusión y la frustración.

Aquí hay algunos ejemplos de consistencia de UI en un juego:

• La estadística de "Salud" aparece en verde en todo el texto, íconos relacionados y la barra de salud.
• Cada vez que el diálogo de un NPC menciona un artículo del juego, se resalta en negrita.
• Los botones de cierre son siempre cuadrados, rojos y contienen una X blanca, apareciendo solo en la esquina superior derecha de un diálogo.
• Siempre que un jugador no puede permitirse un artículo en la tienda, el precio se muestra en rojo.

Estas elecciones son deliberadas, con el objetivo de facilitar la comprensión y navegación del jugador. Al aplicarlas de manera consistente, permiten a los jugadores asociar elementos relacionados, identificar artículos importantes, desarrollar memoria muscular, tomar decisiones rápidas e informadas, y dedicar más tiempo a sumergirse en el juego.

UX

El diseño de UX se refiere a cómo los jugadores interactúan con el juego, cómo hacen que sus elecciones sean conocidas y cómo se mueven de una elección a la siguiente. Aunque UX a menudo trabaja mano a mano con la interfaz de usuario (UI), se centra más en la interactividad y la experiencia del jugador que en el diseño visual e informativo de la UI.

Entendiendo a los jugadores

Un objetivo principal del diseñador de UX es crear interacciones y flujos que sean intuitivos, no intrusivos y convenientes para que los jugadores los utilicen. Ese proceso comienza con la comprensión de los jugadores mismos, el público objetivo para un juego. Al identificar a los jugadores de un juego, considera lo siguiente:

• Demografía: La demografía ayuda a informar las decisiones de diseño al revelar información general sobre un grupo de jugadores. Por ejemplo, los jugadores más jóvenes son generalmente más propensos a jugar en dispositivos móviles o tabletas que en ordenadores personales, por lo que los juegos destinados a esa audiencia a menudo priorizan el diseño y la mejora de la experiencia de usuario móvil.

• Nivel de experiencia: Los desarrolladores pueden optar por diseñar para jugadores con poca experiencia en juegos, una cantidad significativa, o en algún lugar intermedio. Las interacciones que son familiares para jugadores experimentados, como presionar una tecla numérica para equipar un artículo en una barra de herramientas, o presionar c para agacharse, pueden no ser obvias para jugadores inexpertos, y pueden requerir mensajes o capacitación adicional.

• Familiaridad con el género: Al igual que el nivel de experiencia general, la familiaridad con el género refleja el nivel de experiencia de los jugadores con un tipo específico de juego. Los juegos que caen dentro de géneros populares en Roblox, como juegos de rol, horror de supervivencia y shooters en primera persona, son probablemente tener muchos jugadores potenciales que han jugado un género similar antes. Los juegos en otros géneros pueden tener menos jugadores experimentados, pero esa brecha de experiencia puede ser superada a través de tutoriales y usabilidad.

• Estilo de juego: Los jugadores a menudo favorecen tipos específicos de juego, que van desde la competencia y la recolección de logros hasta la exploración y la cooperación. Estas preferencias no solo se reflejan en la mecánica del juego que los jugadores prefieren, sino que también influyen en las decisiones de UX. Los diseñadores consideran qué interacciones priorizar, cuáles pulir y cuáles presentar a los jugadores. También tienen en cuenta la mentalidad que tendrán los jugadores cuando se involucren con estas interacciones y las emociones que pretenden evocar de ellas.

Después de considerar estos factores y seleccionar un grupo objetivo de jugadores (o grupos), conócelos mediante reuniones, jugando con ellos y aprendiendo sobre sus objetivos y preferencias para informar mejor las decisiones de diseño.

Diseñar interacciones

Las interacciones son características que permiten a los jugadores experimentar y comunicar sus elecciones en un juego. Los diseñadores de UX quieren que esas interacciones sean intuitivas y requieran la menor explicación posible. Para hacer esto, utilizan:

• Convenciones
• Metáforas
• Retroalimentación

Convenciones

Las convenciones son diseños y principios de UX con los que los jugadores pueden estar familiarizados de otros juegos.

Ejemplos de convenciones incluyen:

• El indicativo de proximidad "E" que los desarrolladores de Roblox utilizan para señalar a los jugadores que un artículo es interactivo si están lo suficientemente cerca como para que aparezca.
• La tecla "C" permite que el avatar del jugador se agache para que pueda esquivar obstrucciones o encajar en espacios reducidos.
• Las teclas numéricas equipan artículos de una barra de herramientas en las manos del avatar para que puedan ser utilizados.
• Caminar en círculos en el suelo para hacer cola para una partida.

Las convenciones se establecen cuando una implementación o decisión de diseño particular gana popularidad debido a su facilidad de uso. Por ejemplo, "C" para agacharse es fácil de recordar debido a que es la primera letra de la palabra agacharse, y está convenientemente ubicada junto a WASD, las teclas que los jugadores utilizan para navegar. Es una interacción fácil de realizar rápidamente y bajo presión, lo cual es ideal, ya que intentar ocultarse o escapar de una amenaza inminente es un caso de uso común para agacharse.

Metáforas

Las metáforas relacionan un concepto abstracto con uno más familiar, creando un atajo a la comprensión. En este ejemplo de Spellbound Wizard RPG, el acto de lanzar hechizos mágicos se lleva a cabo sacando cartas de un mazo. La UI/UX basada en el mazo ancla el acto abstracto de lanzar hechizos, que no tiene una expresión en la vida real, en algo con lo que los jugadores pueden relacionarse y entender más fácil y rápidamente.

Retroalimentación

La comunicación del juego al jugador se conoce como retroalimentación. La retroalimentación ayuda a los jugadores a comprender que han tomado una acción. Puede contribuir a aprender cómo funciona el juego y agregar una capa adicional de pulido que hace que una característica sea más satisfactoria de usar. Algunos ejemplos de retroalimentación incluyen:

• Un enemigo que reproduce su animación de reacción "impacto" para indicar que ha recibido daño del arma del jugador.
• Un botón que cambia de color para indicar el estado de sobrevuelo, presionado y liberado (seleccionado).
• Un efecto de sonido de caja registradora "cha-ching!" al completar una compra.
• Una barra de progreso llenándose a medida que el jugador completa los objetivos de la misión.

Cuando la retroalimentación falta o es insuficiente, los jugadores pueden no saber qué han logrado, entender si los efectos fueron buenos o malos, o incluso saber si la característica que están utilizando está funcionando correctamente o experimentando errores.

Diseñar flujos

A menudo se requieren múltiples interacciones para que un jugador complete un objetivo. Los diseñadores de UX se preocupan por cómo los jugadores navegan de una acción o pantalla de UI o elección a la siguiente y se aseguran de que estos caminos sean lógicos y convenientes.

Por ejemplo, para equipar un artículo en un avatar en Berry Avenue RP, un jugador debe:

• Encontrar y tocar el botón de Avatar
• Seleccionar una categoría de artículo (cara, cabeza, cuello, etc.)
• Desplazarse para encontrar un artículo de interés
• Tocar el artículo para equiparlo en su avatar
• Encontrar y tocar el botón Hecho para salir de la personalización del avatar

Estos pasos en conjunto representan el flujo de personalización del avatar. Este flujo es simple y directo, con la menor cantidad de pasos necesarios para equipar un artículo. Debido a que los jugadores no tienen que realizar muchas acciones ni pensar demasiado en lo que necesitan hacer, este flujo es bajo en fricción, una medida del esfuerzo requerido para alcanzar un objetivo.

Diseñar flujos eficientes y de baja fricción requiere una cuidadosa consideración de los casos de uso. Esos casos de uso pueden expresarse como objetivos de los jugadores tales como:

• Querer poder modificar rápidamente un avatar
• Encontrar artículos fácilmente mientras se modifica
• Previsualizar artículos antes de la selección
• Fácil eliminación de artículos después de la selección

Estos objetivos luego guían el diseño de UI y UX de la característica:

• Los jugadores acceden a la función de personalización del avatar a través de un botón destacado en el HUD, y pueden comenzar inmediatamente a equipar artículos a sus avatares
• Las pestañas ordenan los artículos en categorías convenientes y el campo de búsqueda permite a los jugadores buscar artículos directamente
• Los artículos se previsualizan en el avatar de inmediato
• Los jugadores pueden eliminar el artículo tocándolo nuevamente para deseleccionarlo, o tocándolo en la lista de artículos equipados

Los diseñadores pueden luego comenzar a delinear la UI y planificar los pasos que los jugadores tomarán para completar el objetivo de modificar sus avatares. Este proceso puede ser ayudado por el uso de un diagrama de flujo, que representa visualmente las acciones de los jugadores a medida que navegan por la UI. Estos diagramas pueden ayudar a identificar pasos pasados por alto, puntos de dolor donde los pasos son poco claros o inconvenientes, y fricción excesiva.