Guía de UX y UI
Consejos y prácticas para construir escenas donde los jugadores querrán 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 gran variedad de usuarios y queremos que las escenas sean 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 encontrarán 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 Metaverse.
Valores de diseño
Todas las escenas en Decentraland deberían diseñarse con estos valores en mente:
Acogedor: El jugador se siente cálidamente bienvenido.
Fácil de usar: La UI es fácil y divertida de usar: evita reinventar la rueda
Fácil de aprender: Los jugadores encuentran la UI familiar e intuitiva. Los patrones deben usarse de manera consistente a lo largo de la escena.
Proporcionar orientación: La escena ofrece una mano amiga. Texto, movimiento, sonido y gráficos guiarán e insinuarán a los jugadores en la dirección correcta.
Reactivo: Clara acción-reacción ante las entradas 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 razón sólida para volver.
Agradable: 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? ¿Ofrecer un paisaje hermoso para contemplar y explorar? ¿Es un museo? ¿Es un juego para un solo jugador? ¿Competitivo? ¿O sigue una narrativa lineal?
Es importante tener bien presente este objetivo en cada paso del proceso de diseño; debería 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 delimitar la escena y establecer uno o varios puntos de entrada fijos, para evitar que los jugadores se encuentren con elementos en el orden incorrecto. Por cierto, los puntos de entrada son un excelente lugar para mostrar un mensaje que dé la bienvenida al jugador y explique cuál debe ser su objetivo en la escena.
Si la experiencia del jugador en tu escena no está pensada para ser lineal, pero aún así necesitas proporcionar algunas instrucciones básicas para asegurar que la disfruten plenamente, puedes mostrar instrucciones en un pop-up. Es posible mostrar un pop-up en la pantalla del jugador tan pronto como entre, independientemente de la dirección desde la que venga, y de esa manera asegurarte de que los jugadores siempre conocerán lo esencial.
📔 Nota: Asegúrate de que el pop-up no sea demasiado intrusivo y que sea fácil cerrarlo haciendo clic en cualquier lugar.
Un mensaje de bienvenida debería comunicar lo siguiente al jugador:
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. Principalmente útil 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 volviendo a tu escena; piensa en formas de motivarlos para que lo hagan. Pregúntate “¿Qué haría que un jugador quisiera volver a mi escena o recomendarla 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.
Feedback y sonido
El sonido juega 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 proporcionar retroalimentación a las acciones del jugador. Si te basas solo en señales visuales, no puedes estar seguro de que el jugador esté mirando en la dirección correcta para ver los efectos de sus acciones. Usando sonido, puedes asegurarte de que sepan que algo sucedió. 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 jugar con el sonido apagado. Si usas el sonido para dar instrucciones de la escena o como pieza clave en la mecánica del juego, intenta también proporcionar algo visual que indique lo mismo. 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.
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 la atención del jugador hacia los elementos que más importan. Hacer buen uso de las herramientas descritas aquí puede hacer que su experiencia sea 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 predeterminados de la UI de Decentraland. La UI predeterminada de Decentraland, incluida la minimapa, el chat, etc., está diseñada para ocupar solo el 25% izquierdo de la pantalla. El resto del espacio es una zona segura, libre para que la usen los creadores de contenido.
No hay restricciones para colocar elementos de UI en el 25% izquierdo de la pantalla, pero ten en cuenta que el Explorer está continuamente realizando 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 escenas y smart wearables siempre aparecen en una capa detrás de la UI predeterminada de Decentraland.
Siempre mantén una cuadrícula en mente y utilízala como tu criterio principal al organizar espacialmente tu UI. Si trabajas en una escena donde se necesita un HUD, puedes empezar por poner todos los consumibles juntos (p. ej., 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 los márgenes. 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ías entre elementos.
Al armar una paleta de colores, comienza seleccionando un color principal y, opcionalmente, uno secundario. Luego deberías decidir si quieres que la paleta sea análoga, complementaria o triádica, etc., en relación con ese color principal.
El color principal debe ser el más usado en tus componentes de UI. Si tu paleta no tiene un color secundario, puedes acentuar 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 (deslizadores e interruptores), enlaces y titulares.
Recuerda que cada color tiene cualidades expresivas únicas; aprovecha eso para comunicar mensajes mediante ellos. Por ejemplo, el rojo a menudo se asocia con connotaciones negativas, mientras que el verde se asocia con connotaciones positivas.
También puedes usar 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 estatus de los elementos de la UI. Los estados de un elemento deben mantener cierta continuidad, pero deben tener affordances claras 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 que sean legibles cuando se usen juntos. Aquí hay una regla fundamental: los colores de los elementos que se muestran juntos deben tener siempre suficiente contraste entre ellos. Ten en cuenta que algunos jugadores pueden ver sus pantallas en condiciones de iluminación subóptimas, lo que dificulta la lectura.
Jerarquía tipográfica
Intenta definir al menos una escala tipográfica de 3 tipos 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 muestre sobre imágenes (o sobre el mundo), seguramente necesitarás experimentar con su legibilidad. En esos casos, sugerimos que agregues una región sólida de color, en una capa entre el texto y las imágenes; de ese modo puedes asegurarte de que el texto permanezca legible.
Íconos
Los íconos sintetizan información, ayudando a identificar acciones mediante imágenes. Son una herramienta increíblemente poderosa para proporcionar información que puede interpretarse rápidamente, en lugar de usar texto para etiquetar cosas, lo que demanda más atención y tiempo del jugador. También es útil mostrar íconos junto con texto, ya que esto ayuda a desambiguar sus significados.
Movimiento
Usa el movimiento para proporcionar retroalimentación y guiar cuando sea necesario. El movimiento ayuda a los jugadores a enfocar su atención y mantiene la continuidad cuando la UI cambia.
Redacción y estructura de contenido
El texto de la UI puede hacer las interfaces más utilizables 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 allí 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 por aclarar su meta en la escena, luego las acciones necesarias para lograrla. Después puedes revelar información progresivamente según se necesite; así los jugadores no se sentirán abrumados al inicio de la experiencia. Al igual que con los recursos gráficos, trata de usar palabras consistentes en toda tu UI y narración.
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 hagan clic o presionen botones sobre 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 3.ª persona Actualmente estamos experimentando con añadir soporte para una cámara en 3.ª persona. Puedes probarla en el Explorer pulsando la tecla 'V'. (Nota: aún no está soportada en la vista previa de una 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 3.ª persona.
Última actualización