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 alerta (HUD) y otras interfaces con las que interactúan los jugadores.La experiencia de usuario (Experiencia de usuario) se relaciona con cómo los jugadores interactúan con el juego, cómo hacen sus elecciones conocidas para el juego y cómo se mueven de una elección a la siguiente.Aunque la interfaz de usuario y la experiencia de usuario a menudo trabajan de forma colaborativa, la experiencia lleva un enfoque más significativo en la interactividad y la experiencia del jugador en lugar del diseño visual e informativo de la interfaz de usuario.
UI
La interfaz de usuario comparte información vital como puntos de golpe, objetivos de misiones y precios que permiten a los jugadores tomar decisiones y navegar por el juego.Debido a que a menudo es la forma principal en que los juegos se comunican con el jugador, la interfaz de usuario es crítica para la experiencia del jugador.La interfaz de usuario mal diseñada puede dejar a los jugadores confundidos y frustrados y conducir a una mala retención, mientras que la interfaz de usuario diseñada con experticia puede contribuir a la participación y la monetización.La interfaz de usuario diseñada 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 toman decisiones instantáneas con frecuencia basadas en un conjunto restringido de información.Al priorizar la interfaz de usuario, identifica lo que 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?
- ¿Cuál es lo más importante para que estén conscientes o tengan acceso?
- ¿Qué opciones tienen que tomar?
- ¿Qué información necesitan para tomar esas decisiones?
- ¿Con qué frecuencia se involucrarán en esas elecciones?
La información y las características importantes cambian durante el curso de un juego, dependiendo de factores como el papel que desempeña el jugador, su ubicación en el mundo del juego y los artículos que sostiene.La interfaz de usuario se puede diseñar para presentar solo lo que importa contextualmente: intercambiar botones e información dependiendo de lo que sea útil en cada contexto.Esto garantiza que los jugadores siempre tengan lo que necesitan, sin la cantidad de cosas que no tienen.
Ejemplos
Los elementos irrelevantes pueden causar confusión y distracción. Spellbound RPG tiene una interfaz de usuario limpia y minimalista que es particularmente crucial para las interfaces móviles, ya que las pantallas pequeñas pueden verse fácilmente abrumadas con botones, pantallas y texto excesivos.
En Super Striker League, las interacciones de los jugadores varían según si controlan la bola.Sin la pelota, los jugadores pueden correr y abordar para recuperar el control.Una vez en posesión, los botones cambian a Deke y Pasar, permitiendo que los jugadores esquiven a los oponentes y pasen la pelota.Al alternar estos botones, la interfaz de usuario se mantiene contextualmente útil, evitando distracciones innecesarias.
En El juego de supervivencia, los jugadores deben estar conscientes de su estado de salud y hambre y tener un 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 se pierden, la supervivencia se vuelve más desafiante y frustrante innecesariamente.
Atención
A pesar de una interfaz de usuario minimalista, priorizada y contextualizada, los jugadores aún podrían necesitar asistencia para localizar lo que necesitan.Los diseñadores de interfaces pueden usar varias herramientas visuales para capturar y guiar la atención de los jugadores, como:
- Color: Los colores brillantes captan la atención más que los opacos.Usa tonos vibrantes para texto crucial, botones y otros elementos, y tonos opacos para los menos significativos.Este contraste mejora la visibilidad y reduce la distracción.
- Tamaño: Los elementos más grandes son más llamativos y se perciben como importantes en comparación con los más pequeños.
- Espacio: Los elementos rodeados por un amplio espacio negativo o relleno son llamativos.
- Proximidad: Los elementos agrupados implican una conexión.Colocando funciones y elementos relacionados cerca el uno del otro, los jugadores pueden entender su asociación y localizarlos más fácilmente.
- Movimiento: Los elementos animados atraen la atención.Incluso un ligero movimiento puede hacer que un elemento se destaque entre sus contrapartes estáticas.Los efectos de partículas, los botones temblorosos y las flechas animadas se utilizan a menudo en los tutoriales para obtener orientación.
La moderación es clave con estas herramientas. El uso excesivo de elementos brillantes y en movimiento podría abrumar y confundir a los jugadores en lugar de ayudarlos.
Ejemplos
En la interfaz de usuario del pase de temporada de Jailbreak, una tira de amarillo dorado se encuentra debajo de los íconos exclusivos del pase de temporada, que atraen la atención a las recompensas premium y las hacen visualmente distintas de las gratuitas.
En Aventuras de dragón, se le da prioridad visual al paquete de monedas de mayor valor aumentando su tamaño y separándolo con más espacio, para distinguirlo de los paquetes más pequeños.
En Simulador de defensa de torre, tanto el tamaño como la proximidad se usan para agrupar y distinguir visualmente las máscaras diarias de torres de las cajas diarias.
Lenguaje visual
Además de dirigir la atención de los jugadores a los elementos más importantes de la pantalla, los diseñadores de interfaces de usuario desarrollan un lenguaje visual para ayudar a los jugadores a comprender lo que están viendo.Un lenguaje visual es un conjunto de decisiones deliberadas y consistentes de diseño que proporcionan información a primera vista sobre el propósito, el estado, las asociaciones y la relevancia de un elemento.El lenguaje se construye a partir de herramientas como forma, color y estilo.Algunos de los usos para el lenguaje visual incluyen:
Iconos
Las iconos pueden emplear una identidad visual que transmita significado y asociaciones.Por instancia, los iconos relacionados con estadísticas específicas pueden compartir una paleta de colores y formas similares, permitiendo que los jugadores reconozcan y entiendan su función.
Botones
Como forma prevalente de entrada de jugadores, los botones deben ser fáciles de identificar.Los botones de alojamiento en un contenedor, como un color que rodea el texto o el ícono, los distingue del fondo, haciéndolos aparecer interactivos.Añadir resaltados o sombras puede mejorar su apelo táctil al sugerir profundidad 3D.
Texto
Los encabezados y títulos que contengan información de alto nivel significativa deberían ser más grandes y audaces que el texto del cuerpo.Los colores que son altamente legibles y contrastan bien contra el color de fondo que se mostrará deben considerarse.Las elecciones estilísticas como el color y el subrayado pueden resaltar información importante como los artículos del juego, las estadísticas o las habilidades.Siempre prioriza la legibilidad al elegir una fuente.
Una vez que se haya diseñado el lenguaje visual, se puede documentar en una Guía de estilo, un conjunto de reglas y ejemplos que ayuden a todos en el equipo a entender cómo aplicar el lenguaje de manera consistente a través del juego.
Convenciones
Las convenciones son elecciones 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 se aplica a los botones que no son actualmente utilizables
- Un icono de bloqueo que superpone un botón o función para indicar que el jugador aún no lo ha ganado o desbloqueado
Dada su amplio uso, 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 puedan reconocer.Un diseñador de interfaces de usuario puede optar por un enfoque único para adaptar mejor su juego, pero conocer estas convenciones informa su proceso de toma de decisiones.
X Cerrar botones en Vientos de la fortuna , Dragon Adventures , Simulador de choque de bots y Puertas >
Consistencia
Sea cual sea la decisión que tome un diseñador de interfaces de usuario, debe aplicarla de forma 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 la interfaz de usuario en un juego:
- El estado de "Salud" aparece en verde en todo el texto, íconos relacionados y la barra de salud.
- Cada vez que el diálogo NPC menciona un objetoen el juego, se resalta en negrita.
- Los botones de cierre siempre son cuadrados, rojos y contienen una X blanca, que solo aparece en la esquina superior derecha de un diálogo.
- Cada vez que un jugador no puede permitirse un artículo en la comprar, el precio se muestra en rojo.
Estas opciones son deliberadas, con el objetivo de facilitar la comprensión y la navegación del jugador.Al aplicarlos de forma consistente, permiten que los jugadores asocien elementos relacionados, identifiquen elementos importantes, desarrollen memoria muscular, tomen decisiones informadas rápidamente y pasen más tiempo inmersos en el juego.
Experiencia de usuario
El diseño de UX se relaciona con cómo los jugadores interactúan con el juego, cómo hacen sus elecciones conocidas para el juego y cómo se mueven de una elección a la siguiente.Aunque UX a menudo trabaja de la 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 interfaz de usuario.
Entender a los jugadores
Un objetivo principal del diseñador de UX es crear interacciones y flujos que sean intuitivos, poco intrusivos y convenientes para que los jugadores utilicen.Ese proceso comienza con una comprensión de los propios jugadores, la audiencia prevista para un juego.Al identificar jugadores de una experiencia, considera lo siguiendo:
Demografía: La demografía ayuda a informar las decisiones de diseño al revelar información generalizada 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 computadoras personales, por lo que los juegos destinados a esa audiencia a menudo priorizan el diseño y el pulido de la experiencia de usuario móvil.
nivelde experiencia: Los desarrolladores pueden elegir diseñar para jugadores con poca experiencia de juego, una cantidad significativa o en algún lugar intermedio.Las interacciones que son familiares para los jugadores experimentados, como tocar una tecla de número para equipar un artículo en una barra de herramientas o presionar c para agacharse, pueden no ser obvias para los jugadores inexpertos y requieren mensajes adicionales o entrenamiento.
Familiaridad de género: Similar al nivel de experiencia general, la familiaridad de género refleja el nivel de experiencia de los jugadores con un tipo específico de juego.Los juegos que se enmarcan en géneros populares en Roblox, como el juego de roles, el terror de supervivencia y el tirador en primera persona, es probable que tengan muchos jugadores potenciales que hayan jugado un juego similar antes.Los juegos de otros géneros pueden tener menos jugadores experimentados, pero esa brecha de experiencia se puede superar a través de tutoriales y de la usabilidad.
Estilo de juego: Los jugadores a menudo prefieren tipos específicos de jugar, que van desde la competición y la recolección de logros hasta la exploración y la cooperación.Estas preferencias no solo se reflejan en las mecánicas del juego que prefieren los jugadores, sino que también influyen en las decisiones de UX.Los diseñadores consideran qué interacciones priorizar, qué pulir y qué 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 buscan despertar en ellos.
Después de considerar estos factores y seleccionar un grupo objetivo de jugadores (o grupos), conócelos al reunirse con ellos, jugar con ellos y aprender acerca de sus objetivos y preferencias para informar mejor las decisiones de diseño.
Diseñar interacciones
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 cantidad de explicación posible.Para hacer esto utilizan:
- Convenciones
- Metáforas
- Comentarios
Convenciones
Convenciones son diseños y principios de UX con los que los jugadores pueden estar ya familiarizados de otros juegos.
Ejemplos de convenciones incluyen:
- El aviso de proximidad "E" que los desarrolladores de Roblox usan para señalar a los jugadores que un artículo es interactuable si se quedan lo suficientemente cerca como para que aparezca.
- La tecla "C" que permite que el avatar del jugador se aguante para que puedan gatear debajo de las obstrucciones o encajar en espacios pequeños.
- Los elementos de equipación de teclas de número de una barra de herramientas se transfieren a las manos del avatar para que puedan usarse.
- Caminar en círculos en el suelo para colocarse en la cola para una coincidir.
Las convenciones se establecen cuando una implementación o elecció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 ubicado al lado de WASD, las teclas que los jugadores usan para barra de navegación.Es una interacción fácil de realizar rápidamente y bajo presión, lo cual es ideal ya que intentar ocultarse o huir de una amenaza próxima es un caso de uso común para agacharse.
Metáforas
Metáforas relacionan un concepto abstracto con uno más familiar, creando un atajo para la comprensión.En este ejemplo de Spellbound Wizard RPG, el acto de lanzar hechizos mágicos se realiza al dibujar cartas de una baraja.La interfaz de usuario/experiencia basada en tablas realiza el acto abstracto de lanzar hechizos, que no tiene expresión en la vida real, en algo que los jugadores pueden relacionar más fácil y rápidamente entender.
Comentarios
La comunicación del juego al jugador se conoce como retroalimentación.Los comentarios ayudan a los jugadores a comprender que una acción que han tomado ha tenido un efecto en el juego.Puede contribuir a aprender cómo funciona el juego y agregar una capa adicional de polaco que haga que una característica sea más satisfactoria de usar.Algunos ejemplos de comentarios incluyen:
- Un enemigo reproduce su animación de reacción "hit" para indicar que ha recibido daño de la arma del jugador
- Un botón que cambia el color para indicar el estado de mantener el puntero, deprimir y liberar (seleccionado)
- Un efecto de sonido de "cha-ching!" de caja registradora que se reproduce cuando el jugador completa una comprar
- Una barra de progreso que se llena a medida que el jugador completa los objetivos de la misión
Cuando falta o es insuficiente la retroalimentación, los jugadores pueden no saber lo que han logrado, entender si los efectos fueron buenos o malos o incluso saber si la función que están usando está funcionando correctamente o experimentando errores.
Diseñar flujos
A menudo se requieren varias interacciones para que un jugador complete un objetivo.Los diseñadores de UX se preocupan por cómo los jugadores navegan de una pantalla de acción o de 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:
- Busca y toca el botón de avatar
- Seleccione una categoría de elemento (cara, cabeza, cuello, etc)
- Desplazarse para encontrar un artículo de interés
- Toca el artículo para equiparlo en su avatar
- Busca y toca el botón de Hecho para salir de la personalización del avatar
Estos pasos tomados juntos representan el flujo de personalización del avatar.Este flujo es simple y directo, con los pasos mínimos necesarios para equipar un objeto.Debido a que los jugadores no tienen que realizar muchas acciones o pensar demasiado sobre lo que necesitan hacer, este flujo es bajo en fricción, una medición del esfuerzo requerido para alcanzar un objetivo.
Diseñar flujos eficientes y de baja fricción requiere una consideración cuidadosa de los casos de uso. Esos casos de uso se pueden expresar como objetivos del jugador como:
- Queriendo ser capaz de modificar rápidamente un avatar
- Encontrar elementos fácilmente mientras se modifica
- Previsualizar artículos antes de la selección
- Eliminación de artículos fácil después de la selección
Estos objetivos luego guían el diseño de la interfaz de usuario y la experiencia de usuario de la función:
- Los jugadores acceden a la función de personalización de avatares a través de un botón prominente en el HUD y pueden comenzar inmediatamente a equipar artículos a sus avatares
- Las pestañas ordenan los elementos en categorías convenientes, y el campo de búsqueda permite que los jugadores busquen elementos directamente
- Los elementos se previsualizan en el avatar instantáneamente
- Los jugadores pueden eliminar el artículo presionándolo nuevamente para deseleccionarlo o presionándolo en la lista de artículos equipados
Los diseñadores pueden comenzar a organizar la interfaz de usuario y planificar los pasos que los jugadores tomarán para completar el objetivo de modificar sus avatares.Este proceso se puede ayudar con el uso de un diagrama de flujo, que muestra visualmente las acciones de los jugadores mientras navegan por la interfaz de usuario.Estos diagramas pueden ayudar a identificar pasos olvidados, puntos de dolor donde los pasos no son claros o inconvenientes, y fricción excesiva.
