Diseño de UI y UX

La interfaz de usuario (UI) combina diseño visual artístico con diseño de información centrado en la comunicación para producir menús, diseños de tienda, pantallas de cabeza (HUD) y otras interfaces con las que los jugadores interactúan. La interfaz de usuario (Experiencia de usuario) relaciona cómo

Interfaz de usuario

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 comunicarse con el jugador, la interfaz de usuario es crucial para los jugadores de la experiencia. Por mal diseñado UI puede dejar a los jugadores confundidos y frustrados y conducir a una mala retención, mientras que el diseño de efecto adecuado puede contribuir a la experi

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

Priorización

Compartir la información más significativa primero es conocida como la jerarquía de la información . Esto es particularmente crucial en los juegos donde los jugadores toman decisiones instantáneas basadas en un conjunto de información restringido. Cuando priorizas 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. Cuestiona estas preguntas:

• ¿Qué es lo que el jugador está haciendo en este momento?
• ¿Cuál es lo más importante para ellos saberlo, o tener acceso a él?
• ¿Qué opciones tienen para elegir?
• ¿Qué información necesitan para tomar esas decisiones?
• ¿Cuántas veces se involucrarán en esas elecciones?

La información y las características importantes cambian durante el transcurso de un juego, dependiendo de factores como el papel que asume el jugador, su ubicación en el mundo del juego y los elementos que poseen. La interfaz de usuario se puede diseñar para presentar solo lo que importa contextualmente, intercambiando los botones y la información dependiendo de lo que es útil en cada contexto. Esto garantiza que los jugadores siempre tengan lo que necesitan, sin el desordenado de todo lo que no.

Ejemplos

Los elementos no relevantes pueden causar confusión y distracción. RPG vinculado a hechizos tiene una interfaz de usuario limpia y minimalista que es particularmente crucial para las interfaces móviles, ya que las pantallas pueden fácilmente sobrecargarse con botones, pantallas y texto excesivos.

En Super Striker League , las interacciones del jugador varían según si controlan la pelota. Sin la pelota, los jugadores pueden Correr y Ataque para recuperar el control. Una vez en posesión, los botones se cambian a Deke y Pasar, lo que permite a los jugadores esquivar a los oponentes y pasar la pelota. Al alternar estos botones, la interfaz de usuario se mantiene contextualmente útil, evitando distracciones inneces

En The Survival Game, los jugadores necesitan estar conscientes 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 sobrevivir. Si esta información o herramientas son difíciles de encontrar o faltan, la sobrevivencia se vuelve más desafiante y necesita innecesariamente frustrar.

Atención

A pesar de una interfaz de usuario minimalista, prioritaria y contextualizada, los jugadores aún pueden necesitar asistencia para encontrar lo que necesitan. Los diseñadores de UI pueden usar varias herramientas visuales para capturar y guiar la atención del jugador, como:

• Color: Los colores brillantes atraen la atención más que los tonos opacos. Usa tonos vibrantes para textos, botones y otros elementos importantes, y sombras silenciadas para tonos menos importantes. Esto mejora la visibilidad y reduce la distracción.
• Tamaño: Los elementos más grandes son más visibles y se perciben como más importantes que los más pequeños.
• Espacio: Los elementos encerrados por un amplio espacio negativo o espacio de succión son atractivos para los ojos.
• Proximidad: Los elementos agrupados implican una conexión. Al colocar elementos y elementos relacionados uno al lado del otro, los jugadores pueden entender su asociación y localizarlos más fácilmente.
• Movimiento: Los elementos animados atraen la atención. Incluso la menor cantidad de movimiento puede hacer que un elemento se destaque entre los elementos estáticos. Los efectos de partículas, los botones moverse y las flechas animadas a menudo se usan en tutoriales para proporcionar orientación.

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

Ejemplos

En la interfaz de usuario de jailbreak de la temporada, una línea de oro amarillo desciende debajo de los iconos exclusivos de la temporada, haciendo hincapié en las recompensas premium y haciéndolas visiblemente distintas de las gratuitas.

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

En Tower Defense Simulator , tanto el tamaño como la proximidad se utilizan para agrupar y diferenciar visualmente las máscaras de torre diarias de las cajas diarias.

Lenguaje visual

Además de dirigir la atención de los jugadores a 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 opciones de diseño deliberadas y consistentes que proporcionan información a primera vista sobre el propósito, el estado, las asociaciones y la relevancia de un elemento. Algunos de los usos para el lenguaje visual incluyen:

Iconos

Las iconicas pueden emplear una identificación visual que transmite significado e asociaciones. Por instancia, las iconicas relacionadas con estadísticas específicas pueden compartir una paleta de colores y formas similares, lo que permite a los jugadores reconocer y entender su función.

Botones

Como forma prevalente de la entrada del jugador, los botones deben ser fáciles de identificar. Los botones que se alojan en un contenedor, como un color que rodea el texto o el ícono, los distingue del fondo, haciéndolos aparecer interactivos. Añadir resaltos o sombras puede mejorar su apariencia táctil al sugerir profundidad 3D.

Texto

Los encabezados y títulos que contienen información de alto nivel deberían ser más grandes y negritos que el texto del cuerpo. Los colores que son altamente legibles y se pueden leer bien contra el color de fondo deberían considerarse. Las elecciones estilísticas, como el color y el negrito, pueden resaltar información importante, como los elementos del juego, las estadísticas o las habilidades. Siempre priorice la legibilidad cuando elige una fuente.

Una vez que el lenguaje visual se haya diseñado, se puede documentar en un Guía de estilo, un conjunto de reglas y ejemplos que ayudan a todos en el equipo a entender cómo aplicar el lenguaje consistentemente a lo largo del juego.

Convenciones

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

• Un símbolo X en un botón que cierra el diálogo cuando se presiona
• El color gris aplicado a los botones que no están disponibles actualmente
• Un icono de candado superpuesto sobre un botón o función para indicar que el jugador aún no ha ganado o desbloqueado

Dado su uso extendido, los jugadores son típicamente familiares con tales convenciones. Aprovechar esta familiaridad puede hacer que una interfaz sea más intuitiva y menos necesaria para las instrucciones del juego. Jugar juegos dentro de su género objetivo puede ayudar a identificar las convenciones que los jugadores pueden reconocer. Un diseñador de UI puede optar por un enfoque único para mejorar la mejor adaptación a su juego, pero conocer estas convenciones ayuda a informar su proceso de decisión.

2>DOORS2>

Consistencia

Cualquiera que sea la decisión que tome un diseñador de UI, debe aplicarla de manera consistente en todo el 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 la consistencia de la interfaz de usuario en un juego:

• La estadística "Salud" aparece en verde en todo el texto, iconos relacionados y la barra de salud.
• Cualquier diálogo de NPC menciona un objetoen el juego, se destaca en negrita.
• Los botones de cierre siempre son cuadrados, rojos y contienen un X blanco, que solo aparece en la esquina superior derecha de un diálogo.
• Cuando un jugador no puede permitirse un artículo en la comprar, el precio se muestra en rojo.

Estas opciones están deliberadas, destinadas a facilitar la comprensión y la navegación del jugador. Al aplicarlas con consistencia, los jugadores pueden asociar elementos relacionados, identificar elementos importantes, desarrollar memoria muscular, tomar decisiones informadas rápidas y pasar más tiempo inmersos en el juego.

Experiencia de usuario

El diseño UX se refiere a 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 forma conjunta con la interfaz de usuario (UI), está más enfocado en la interactividad y la experiencia del jugador que en el diseño visual y informativo de la interfaz de usuario.

Entendiendo a los jugadores

Un objetivo primario del diseñador de UX es crear interacciones y flujos que sean intuitivos, no intrusivos y convenientes para los jugadores. Este proceso comienza con una comprensión de los jugadores mismos, el público objetivo para un juego. Cuando identificar a los jugadores de una experiencia, considere lo siguiendo:

• Demografía: La demografía ayuda a informar las elecciones de diseño revelando información generalizada sobre un grupo de jugadores. Por ejemplo, los jugadores más jóvenes generalmente son más probable que jueguen en dispositivos móviles o tabletas que en personal de computación, por lo que los juegos destinados a esa audiencia a menudo priorizan la disección y la pulimentación de la experiencia del usuario móvil.

• Nivel de experiencia: Los desarrolladores pueden elegir diseñar para jugadores con poca experiencia de juego, una cantidad significativa o en algún momento en el medio. Las interacciones que son familiares para los jugadores experimentados, como tocar una tecla 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 un mensaje adicional o entrenamiento.

• Familiaridad con el género: similar al 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 en los géneros populares en Roblox, como Roleplay, Survival Horror y First-Person Shooter, probablemente tienen muchos jugadores potenciales que han jugado un juego similar antes. Los juegos en otros géneros pueden tener menos jugadores experimentados

• Estilo de juego: Los jugadores a menudo eligen un tipo específico de jugar, que va desde la competencia y el logro de recolección de éxitos hasta la exploración y la cooperación. Estas preferencias no solo se reflejan en las mecánicas de juego que los jugadores prefieren, sino que también influyen en las decisiones de UX. Los diseñadores consideran qué interacciones priorizar, qué ajustar y qué presentar a los jugadores. También tienen en cuenta la

Después de considerar estos factores y seleccionar un grupo de jugadores objetivo (o grupos), obtenerlos al conocerlos, jugar con ellos y aprender sobre sus objetivos y preferencias para mejorar la información del diseño.

Diseñando 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 estas interacciones sean intuitivas y requieren la menor explicación posible. Para hacer esto, utilizan:

• Convenciones
• Metáforas
• Sugerencias

Convenciones

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

Ejemplos de convenciones incluyen:

• La invitación de proximidad "E" que los desarrolladores de Roblox usan para señalar a los jugadores que un artículo es interactible si se acercan lo suficiente para que aparezca.
• La tecla "C" que permite que el avatar del jugador se agache para que pueda patearse debajo de las obstrucciones o caber en espacios apretados.
• Número de teclas equipando objetos de una barra de herramientas en las manos del avatar para que se puedan usar.
• Camina en círculos en el suelo para entrar en la fila para una coincidir.

Las convenciones se establecen cuando una determinada implementación o elección de diseño crece en popularidad debido a su facilidad de uso. "C" para agacharse, por ejemplo, es fácil de recordar debido a que es la primera letra en 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 rápida y sencilla para realizar, lo cual es ideal ya que intentar es

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 se realiza al dibujar cartas de una baraja. La interfaz de usuario basada en la baraja otorga el acto de lanzar hechizos, que no tiene expresión real, en algo que los jugadores pueden relacionar más fácilmente y rá

Sugerencias

La comunicación del juego al jugador se conoce como retroalimentación . La retroalimentación ayuda a los jugadores a entender que una acción que han tomado ha tenido un efecto en el juego. Puede contribuir al aprendizaje de cómo funciona el juego y agregar una capa extra de polaco que hace que una característica sea más satisfactoria de usar. Algunos ejemplos de retroalimentación incluyen:

• Un enemigo que juega 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 pasar el mantener el puntero, presionado y soltado (seleccionado)
• ¡Un efecto de sonido de "cha-ching!" cuando el jugador completa una comprar!
• Una barra de progreso llena mientras el jugador completa los objetivos de la misión

Cuando se elimina o se agota el feedback, 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ñando Flujos

A menudo se requieren múltiples interacciones para que un jugador complete un gol. Los diseñadores de UX se preocupan por cómo los jugadores navegan desde una acción o pantalla o elección a la siguiente y asegurarse 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:

• Encuentra y toca el botón de Avatar
• Seleccione una categoría de artículo (cara, cabeza, cuello, etc)
• Desplácese para encontrar un artículo de interés
• Toca el artículo para equiparlo en su avatar
• Encuentra y toca el botón 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 tan pocos pasos como sea posible necesarios para equipar un objeto. Debido a que los jugadores no tienen que realizar muchas acciones o pensar demasiado en lo que necesitan hacer, este flujo es bajo en fricción, una medida de la energía requerida para alcanzar un objetivo.

Diseñar flujos efectivos y de baja fricción requiere una consideración cuidadosa de los casos de uso. Estos casos de uso se pueden expresar como metas de los jugadores, como:

• Quieres ser capaz de modificar rápidamente un avatar
• Encontrar ítems fácilmente mientras se modifican
• Previsualizar los elementos antes de seleccionar
• Fácil eliminación de elementos después de la selección

Estos objetivos luego guían el diseño de UI y UX de la función:

• Los jugadores acceden a la personalización del avatar a través de un botón prominente en el HUD, y pueden comenzar inmediatamente a equipar los elementos a sus avatares
• Las pestañas sirven para ordenar los elementos en categorías convenientes, y el campo de búsqueda permite a los jugadores buscar directamente
• Los elementos se previsualizan en el avatar al instante
• Los jugadores pueden eliminar el elemento haciendo clic de nuevo en él para deseleccionarlo, o haciendo clic en él en la lista de elementos equipados

Los diseñadores pueden entonces comenzar a planificar 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 gráficos pueden ayudar a identificar los pasos olvidados, los puntos de dolor donde las acciones no son claras o convenientes