Guía de UX y UI
Consejos y prácticas para construir escenas donde los jugadores quieran quedarse y volver.
Es de vital importancia para nosotros que los creadores de contenido de Decentraland sean libres de utilizar su creatividad al máximo. 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 que las escenas sean accesibles para todos ellos. Por ello, no podemos ignorar la necesidad de establecer criterios de diseño unificados, una guía que pueda garantizar que los jugadores encuentren una experiencia homogéneamente intuitiva y agradable, sin importar en qué escena se encuentren.
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 para los jugadores. Esperamos que estos criterios puedan servir como punto de partida para construir y/o mejorar las escenas que conforman el Metaverso.
Valores de diseño
Todas las escenas en Decentraland deben diseñarse teniendo en cuenta estos valores:
Acogedor: El jugador se siente calurosamente bienvenido.
Fácil de usar: La UI es fácil y divertida de usar: debes evitar reinventar la rueda
Fácil de aprender: Los jugadores encuentran la UI familiar e intuitiva. Los patrones deben utilizarse de forma consistente a lo largo de la escena.
Proporcionar orientación: La escena ofrece una mano amiga. El texto, el movimiento, el sonido y los gráficos guiarán e indicarán a los jugadores la dirección correcta.
Reactivo: Reacción clara a la entrada de los jugadores.
Minimalista: Menos es más. Los jugadores pueden concentrar su atención en lo que importa.
Interesante: La escena aprovecha las cosas que hacen a Decentraland único y digno de visitar.
Con propósito: Los jugadores tienen una fuerte razón para volver.
Disfrutable: A los jugadores les gusta 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 ser muy consciente de este objetivo en cada paso del proceso de diseño; debe guiar todas tus decisiones, las cuales pueden afectar profundamente la experiencia del visitante.
Para escenas que siguen un flujo lineal, donde cada paso depende del anterior, recomendamos cercar la escena y establecer uno o varios puntos de entrada fijos, para evitar que los jugadores se encuentren con cosas en el orden incorrecto. Por cierto, los puntos de entrada son un lugar excelente para mostrar un mensaje que dé la bienvenida al jugador y explique 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 aún necesitas proporcionar instrucciones básicas para asegurar que la disfruten por completo, puedes mostrar instrucciones en un pop-up. Es posible mostrar un popup en la pantalla del jugador tan pronto como entren, independientemente de la dirección desde la que vengan, 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 lugar.
Un mensaje de bienvenida debe comunicar al jugador lo siguiente:
El título de la escena
Dar la bienvenida al jugador
Objetivo final y motivación para el jugador
Instrucciones/Próximos pasos
(Opcional) Controles. Sobre todo útiles si tu escena usa eventos de botones globales. 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 regresando a tu escena; ¡piensa en formas para motivarlos a hacerlo! Pregúntate “¿Qué haría que un jugador quiera volver a mi escena o quiera recomendársela a un amigo?”
Por ejemplo, puedes desafiarlos, dándoles algo que lograr que sea lo suficientemente difícil como para requerir varios intentos. También puedes organizar eventos multijugador competitivos, que son una oportunidad interesante para socializar. Haz de tu escena un lugar dinámico donde los jugadores sientan que disfrutan pasar el 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. Lo otro crucial para lo que sirve el sonido es proporcionar retroalimentación a las acciones del jugador. Si dependes solo de señales visuales, no puedes estar seguro de que un jugador esté mirando en la dirección correcta para ver los efectos de sus acciones. Usando sonido, puedes asegurarte de que sean conscientes de que algo ocurrió. Si usas señales visuales y sonoras en combinación, escuchar el sonido invita al jugador a buscar la señal visual, en caso de que no la haya visto.
Ten en cuenta que algunos jugadores pueden estar jugando con el sonido apagado. Si estás usando el sonido como una forma de proporcionar instrucciones de la escena o una pieza clave en la mecánica del juego, intenta también proporcionar algo visual que sugiera lo mismo. Por ejemplo, podrías mostrar texto en la parte inferior de la UI para acompañar estos sonidos, como subtítulos en una película.
Interfaz de usuario
Esta sección está dirigida a 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 buen uso de las herramientas aquí descritas puede hacer su experiencia mucho más inmersiva y exitosa.
No podemos subestimar lo valiosos que son el color, los íconos, el movimiento y la escala para transmitir el mensaje correcto: todo en la escena transmite un significado, recuerda eso.
Diseño
Ten cuidado al colocar tu UI en regiones de la pantalla que se superpongan con los elementos de la UI predeterminada de Decentraland. La UI predeterminada de Decentraland, incluyendo minimapa, chat, etc., está diseñada para cubrir solo el 25% izquierdo de la pantalla. El resto del espacio en pantalla es una zona segura, libre para que los creadores de contenido la usen.
No hay restricciones para colocar elementos de UI en el 25% izquierdo de la pantalla, pero ten en cuenta que el explorer está continuamente haciendo cambios y mejoras en su diseño. Cualquier espacio que hoy no esté oculto en esa región podría estar cubierto en versiones futuras.
📔 Nota: Los elementos de UI de escenas y smart wearables siempre aparecen en una capa detrás de la UI predeterminada de Decentraland.
Siempre ten en mente una cuadrícula y úsala como tu criterio principal al organizar espacialmente tu UI. Si estás trabajando en una escena donde se necesita un HUD, puedes empezar poniendo todos los consumibles juntos (por ejemplo, moneda, comida, vida), y en el otro lado los elementos almacenables como herramientas o armas. Trata de ser consistente con las métricas de la cuadrícula y el padding. 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 relaciones y jerarquía entre los elementos.
Al componer una paleta de colores, comienza 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.
💡 Tip: Generadores de paletas de color gratuitos que recomendamos: Coolors, Adobe Color CC, Colour Lovers, Color Hunt, Color by Hailpixel, Colour Code, Sip, Color Scheme Designer by Paletton, Cohesive Colors, Colr
El color principal debe ser el más usado con frecuencia en tus componentes de UI. Si tu paleta no tiene un color secundario, puedes enfatizar elementos combinando el color principal con negro o blanco. Tener un color secundario no es obligatorio, pero ayuda a enfatizar y distinguir los elementos de la UI de tu escena. Los colores secundarios funcionan mejor para resaltados, controles de selección (sliders y switches), enlaces y titulares.
Recuerda que cada color tiene sus propias cualidades expresivas únicas; aprovecha eso 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 claras affordances y ser fácilmente distinguibles de otros estados y del diseño circundante.
¡Advertencia! Al seleccionar colores que se mostrarán en superposición, presta especial atención a asegurarte de que sean legibles cuando se usan juntos. Aquí hay una regla fundamental: los colores de los elementos que se muestran juntos deben tener siempre 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
Intenta 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 necesitarás experimentar con su legibilidad. En esos casos, sugerimos que añadas una región sólida coloreada, en una capa entre el texto y las imágenes; de esa manera puedes asegurarte de que el texto siga siendo legible.
Íconos
Los íconos sintetizan información, ayudándote a identificar acciones mediante imágenes. Son una herramienta increíblemente poderosa para proporcionar información que puede interpretarse rápido, a diferencia de usar texto para etiquetar cosas, lo que exige más atención y tiempo del jugador. También es útil mostrar íconos en combinación con texto, ya que esto ayuda a desambiguar sus significados.
Movimiento
Usa el movimiento para proporcionar retroalimentación y guiar el camino cuando sea necesario. El movimiento ayuda a los jugadores a focalizar su atención y a mantener la continuidad cuando la UI cambia.
Redacción y estructura del contenido
El texto de la UI puede hacer las interfaces más usables y dar a los jugadores más confianza en sus acciones. Haz siempre el texto de la UI lo más conciso posible. Los jugadores están 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 diles el objetivo de la escena. Comienza aclarando su meta en la escena, luego las acciones necesarias para lograrla. Después puedes revelar información de forma progresiva según se necesite; de esta manera los jugadores no se sentirán abrumados al inicio de la experiencia. Como con los recursos gráficos, intenta usar palabras consistentes en todas las funciones de la UI y la narrativa.
Nuevas funciones del SDK - ¡Próximamente!
Interacciones con objetos Ahora no es posible que los jugadores sepan qué objetos son interactivos y cuáles no hasta que realmente hacen clic o presionan botones en ellos. Hemos estado trabajando en una nueva función para que los creadores puedan mostrar mensajes toast personalizados al apuntar a un objeto interactivo. Este mensaje indica qué entrada usar y puede tener texto personalizado para describir los efectos de interactuar con él. Recomendamos encarecidamente que lo uses cuando se lance; tu escena se sentirá más natural y fácil de usar.
Cámara en tercera persona Actualmente estamos experimentando con añadir soporte para una cámara en tercera persona. Puedes probarla en el explorer presionando la tecla 'V'. (Nota: aún no es compatible en una vista previa de escena). Puedes comenzar a pensar en desarrollar experiencias o juegos increíbles que podrían ser mucho más atractivos gracias a una cámara en tercera persona.
Última actualización