Guía de UX y UI
Consejos y prácticas para construir escenas en las que los jugadores quieran quedarse y volver.
Para nosotros es de vital importancia que los creadores de contenido de Decentraland sean libres de hacer uso de su creatividad en toda su extensión. Esto es esencial para que Decentraland se convierta en un lugar gratificante para explorar. Sin embargo, también es importante tener en cuenta que las escenas en Decentraland serán visitadas por una amplia variedad de usuarios y queremos hacer las escenas accesibles para todos ellos. Por eso, no podemos ignorar la necesidad de establecer un criterio de diseño unificado, una guía que pueda garantizar que los jugadores encuentren una experiencia homogénea, intuitiva y agradable, sin importar en qué escena estén.
En este documento compartimos los valores de diseño de Decentraland, con el objetivo de promover lo que consideramos las mejores prácticas para diseñar la interfaz y la experiencia de los jugadores. Esperamos que estos criterios puedan servir como punto de partida para construir y/o mejorar las escenas que componen el metaverso.
Valores de diseño
Todas las escenas en Decentraland deben diseñarse teniendo en cuenta estos valores:
Acogedor: El jugador se siente acogido con calidez.
Fácil de usar: La UI es fácil y divertida de usar; deberías evitar reinventar la rueda
Fácil de aprender: Los jugadores encuentran la UI familiar e intuitiva. Los patrones deben usarse de forma consistente en toda la escena.
Brindando orientación: La escena ofrece una mano amiga. El texto, el movimiento, el sonido y los gráficos guiarán y orientarán a los jugadores en la dirección correcta.
Reactivo: Una clara relación acción-reacción ante la entrada de los jugadores.
Minimalista: Menos es más. Los jugadores pueden centrar su atención en lo que importa.
Atractivo: La escena aprovecha las cosas que hacen que Decentraland sea único y digno de visitar.
Con propósito: Los jugadores tienen una razón sólida para volver.
Agradable: Los jugadores disfrutan de cómo se ven, suenan y se sienten las cosas
Experiencia de usuario
¿Por dónde empezar?
¿Cuál es el objetivo de tu escena? ¿Es ofrecer un paisaje hermoso para contemplar y explorar? ¿Es un museo? ¿Es un juego para un solo jugador? ¿Uno competitivo? ¿O sigue un flujo narrativo lineal?
Es importante tener muy presente este objetivo en cada paso del proceso de diseño; debe guiar todas tus decisiones, ya que todas pueden afectar profundamente la experiencia del visitante.
Para las escenas que siguen un flujo lineal, donde cada paso depende del anterior, recomendamos delimitar la escena con paredes y establecer uno o varios puntos de entrada fijos, para evitar que los jugadores tropiecen con cosas en el orden incorrecto. Por cierto, los puntos de entrada son un lugar excelente para mostrar un mensaje de bienvenida al jugador y explicar cuál debería ser su objetivo en la escena.
Si la experiencia del jugador en tu escena no está pensada para ser lineal, pero aun así necesitas proporcionar algunas instrucciones básicas para asegurarte de que la disfrute por completo, puedes mostrar instrucciones en un pop-up. Es posible mostrar un popup en la pantalla del jugador tan pronto como entre, sin importar desde qué dirección venga, y de esa manera asegurarte de que los jugadores siempre conocerán lo esencial.
📔 Nota: Asegúrate de que el popup no sea demasiado intrusivo y de que sea fácil de cerrar haciendo clic en cualquier parte.
Un mensaje de bienvenida debe comunicar lo siguiente al jugador:
Título de la escena
Dar la bienvenida al jugador
Objetivo final y motivación del jugador
Instrucciones/Siguientes pasos
(Opcional) Controles. Resulta útil sobre todo si tu escena usa eventos globales de botón. De lo contrario, los propios elementos indican cómo usarlos al pasar el cursor sobre ellos.
Motivación
Probablemente querrás que tus visitantes sigan volviendo a tu escena; ¡piensa en formas de motivarlos a hacerlo! Pregúntate: “¿Qué haría que un jugador quisiera volver a mi escena o recomendarla a un amigo?”
Por ejemplo, puedes ponerles un desafío, dándoles algo que lograr que sea lo bastante difícil como para requerir varios intentos. También puedes organizar eventos multijugador competitivos, que además son una oportunidad interesante para socializar. ¡Haz de tu escena un lugar dinámico donde los jugadores sientan que disfrutan pasando tiempo allí!
Retroalimentación y sonido
El sonido desempeña un doble papel clave, ¡no dejes de usarlo! Por un lado, es vital para generar inmersión; muchas cosas no se sentirán reales si no van acompañadas de sonido. La otra función crucial del sonido es ofrecer retroalimentación a las acciones del jugador. Si te basas solo en señales visuales, no puedes estar seguro de que el jugador estará mirando en la dirección correcta para ver los efectos de sus acciones. Usando sonido, puedes asegurarte de que sean conscientes de que algo ha ocurrido. Si usas señales visuales y sonoras en combinación, oír el sonido invita al jugador a buscar la señal visual por si no la vio.
Ten en cuenta que algunos jugadores podrían estar jugando con el sonido desactivado. Si usas el sonido como una forma de dar instrucciones de la escena o como una pieza clave en la mecánica del juego, intenta ofrecer también algo visual que apunte en la misma dirección. Por ejemplo, podrías mostrar texto en la parte inferior de la UI para acompañar esos sonidos, como subtítulos en una película.
UI
Esta sección está pensada para ayudarte a construir una narrativa a través del diseño de tu escena que dirija el enfoque del jugador hacia los elementos que más importan. Hacer un buen uso de las herramientas descritas aquí puede hacer que su experiencia sea mucho más inmersiva y satisfactoria.
No podemos exagerar lo valiosos que son el color, los iconos, el movimiento y la escala para transmitir el mensaje correcto: todo en la escena transmite un significado, no lo olvides.
Distribución
Ten cuidado al colocar tu UI en regiones de la pantalla que se superpongan con los elementos predeterminados de la UI de Decentraland. En el cliente de escritorio, la UI predeterminada de Decentraland (barra lateral, minimapa, chat, etc.) está diseñada para ocupar solo el 25% izquierdo de la pantalla (resaltado en rojo en la imagen). El espacio restante de la pantalla es una zona segura que los creadores de contenido pueden usar libremente.
No hay restricciones para colocar elementos de UI en el 25% izquierdo de la pantalla, pero ten en cuenta que Explorer realiza continuamente cambios y mejoras en su diseño. Cualquier espacio que hoy no esté oculto en esa región podría quedar cubierto en versiones futuras.
📔 Nota: Los elementos de UI de las escenas y de los wearables inteligentes siempre aparecen en una capa detrás de la UI predeterminada de Decentraland.
Ten siempre presente una cuadrícula y úsala como criterio principal al organizar espacialmente tu UI. Si estás trabajando en una escena en la que se necesita un HUD, puedes empezar reuniendo todos los consumibles (p. ej., moneda, comida, vida) y, al otro lado, los objetos almacenables como herramientas o armas. Procura ser consistente con las métricas de la cuadrícula y el espaciado. Haz que la retroalimentación de cada acción del jugador sea clara.
Color
Es importante elegir una paleta de colores, ya que esto le da identidad a tu escena y también señala las relaciones y la jerarquía entre los elementos.
Al crear una paleta de colores, empieza seleccionando un color principal y, opcionalmente, uno secundario. Luego debes decidir si quieres que la paleta sea análoga, complementaria o triádica, etc., en relación con ese color principal.
El color principal debería ser el más usado entre tus componentes de UI. Si tu paleta no tiene un color secundario, puedes resaltar elementos combinando el color principal con negro o blanco. Tener un color secundario no es obligatorio, pero ayuda a enfatizar y diferenciar los elementos de UI de tu escena. Los colores secundarios funcionan mejor para los resaltados, los controles de selección (deslizadores e interruptores), los enlaces y los titulares.
Recuerda que cada color tiene cualidades expresivas únicas; aprovéchalas para comunicar mensajes a través de ellos. Por ejemplo, el rojo suele asociarse con connotaciones negativas, mientras que el verde se asocia con connotaciones positivas.
También puedes usar los colores estratégicamente para indicar cambios de estado, por ejemplo, cambiando el color de un elemento para indicar si está activo o inactivo.
📔 Nota: Los estados comunican el estado de los elementos de UI. Los estados de un elemento deben mantener cierta continuidad, pero deben tener indicios claros y ser fácilmente distinguibles de otros estados y del diseño que los rodea.
¡Atención! Al seleccionar colores que se mostrarán superpuestos, presta especial cuidado a que sean legibles cuando se usen juntos. Aquí tienes una regla fundamental: los colores de los elementos que se muestran juntos siempre deben tener mucho contraste entre sí. Ten en cuenta que algunos jugadores podrían estar mirando sus pantallas en condiciones de iluminación subóptimas, lo que dificulta la lectura.
Jerarquía tipográfica
Procura definir al menos una escala de 3 tamaños para Títulos, Subtítulos y Cuerpo. Ten cuidado con el uso del color y el tamaño de la fuente. Todos los tamaños de fuente deben ser de 12 px o mayores.
Si vas a colocar texto que se muestra sobre imágenes (o sobre el mundo), seguramente tendrás que experimentar con su legibilidad. En esos casos, sugerimos que añadas una región sólida de color, en una capa entre el texto y las imágenes, de esa manera puedes asegurarte de que el texto siga siendo legible.
Iconos
Los iconos sintetizan información y te ayudan a identificar acciones mediante imágenes. Son una herramienta increíblemente poderosa para proporcionar información que se pueda interpretar rápidamente, en lugar de usar texto para etiquetar las cosas, lo cual exige más atención y tiempo por parte del jugador. También resulta útil mostrar iconos en combinación con texto, ya que esto ayuda a desambiguar sus significados.
Movimiento
Usa el movimiento para ofrecer retroalimentación y guiar el camino cuando sea necesario. El movimiento ayuda a los jugadores a centrar su atención y a mantener la continuidad a medida que cambia la UI.
Escritura y estructura del contenido
El texto de la UI puede hacer que las interfaces sean más utilizables y da a los jugadores más confianza en sus acciones. Haz siempre que el texto de la UI sea lo más conciso posible. Los jugadores están ahí para jugar, no para leer. Cualquier texto que parezca demasiado largo no será leído por la mayoría de los jugadores.
Recibe a tus jugadores con un Mensaje de bienvenida y explícales el objetivo de la escena. Empieza aclarando su meta en la escena y luego las acciones necesarias para alcanzarla. Después puedes revelar la información progresivamente a medida que se necesite; de este modo, los jugadores no se sentirán abrumados al principio de la experiencia. Al igual que con los recursos gráficos, procura usar palabras consistentes en todas las funciones de tu UI y en la narrativa.
Interacciones con objetos
Asegúrate de que los jugadores puedan distinguir qué objetos son interactivos y cuáles no. Al registrar eventos de botón en una Entity, el SDK muestra de forma predeterminada una retroalimentación al pasar el cursor: un resaltado del borde en la Entity y una pista junto al cursor que indica qué entrada usar, con texto personalizado para describir los efectos de interactuar con ella. Recomendamos encarecidamente usarlo; tu escena se sentirá más natural y fácil de usar. Consulta Retroalimentación al pasar el cursor.
Cámara en tercera persona
Los jugadores pueden cambiar entre cámara en primera y tercera persona en cualquier momento pulsando la tecla ‘V’. Diseña tu escena para que las interacciones funcionen cómodamente en ambos modos: por ejemplo, los objetivos de clic pequeños son más difíciles de acertar en tercera persona. Tu escena puede leer el modo de cámara actual del jugador, o forzar uno específico en un área; consulta Cámara.
Última actualización