Guía de UX y UI
Consejos y prácticas para construir scenes en las que 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 amplia 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 garantice que los jugadores encontrarán una experiencia homogéneamente intuitiva y placentera, 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 deberían 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 usarse de forma consistente en toda la escena.
Proveer orientación: La escena ofrece una mano amiga. Texto, movimiento, sonido y gráficos guiarán y sugerirán a los jugadores en la dirección correcta.
Reactiva: Acción-reacción clara a la entrada de los jugadores.
Minimalista: Menos es más. Los jugadores pueden centrar 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? ¿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 bien presente 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 encuentren 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 algunas instrucciones básicas para asegurar 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, independientemente de la dirección desde la que venga, y de esa manera asegurarte de que los jugadores siempre conozcan lo esencial.
📔 Nota: Asegúrate de que el popup no sea demasiado intrusivo y que sea fácil de cerrar 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
Meta final y motivación para el jugador
Instrucciones/Próximos pasos
(Opcional) Controles. Principalmente útil si tu escena usa eventos globales de botones. De lo contrario, los propios objetos 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 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 desafiarlos, dándoles algo que lograr que sea lo suficientemente difícil como para requerir varios intentos. También puedes organizar eventos multijugador competitivos, los cuales son una oportunidad interesante para socializar. Haz de tu escena un lugar dinámico donde los jugadores sientan que disfrutan pasar 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 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 sucedió. 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 podrían estar jugando con el sonido apagado. Si usas el sonido como una forma de dar instrucciones de escena o como 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 esos sonidos, como subtítulos en una película.
Interfaz de Usuario
Esta sección tiene como objetivo ayudarte a construir una narrativa a través del diseño de tu escena que dirija el foco 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 valioso 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.
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. 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 realizando cambios y mejoras en su diseño. Cualquier espacio que hoy no esté cubierto en esa región podría estarlo 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.
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 que necesita un HUD, puedes empezar colocando todos los consumibles juntos (por ejemplo, moneda, comida, vida), y en el otro lado los almacenables como herramientas o armas. Trata de 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 relaciones y jerarquías entre elementos.
Al confeccionar 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.
💡 Consejo: Generadores de paletas de colores 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 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 realces, controles de selección (sliders y switches), enlaces y titulares.
Recuerda que cada color tiene cualidades expresivas únicas; aprovecha eso para comunicar mensajes mediante ellos. Por ejemplo, el rojo suele asociarse 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 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 asegurarte de que sean legibles cuando se usan juntos. Aquí hay una regla fundamental: los colores de los elementos que se muestran juntos siempre deben tener mucho contraste entre ellos. Ten en cuenta que algunos jugadores podrían mirar sus pantallas en condiciones de iluminación subóptimas, lo que hace la lectura más difícil.
Jerarquía tipográfica
Intenta definir al menos una escala 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 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 asegurar 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ápidamente, en contraposición a usar texto para etiquetar cosas, lo cual exige más atención y tiempo al 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 enfocar su atención y ayuda a mantener 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. Siempre haz el texto de la UI 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 diles el objetivo de la escena. Comienza aclarando su meta en la escena, luego las acciones necesarias para alcanzarla. Después puedes revelar información progresivamente conforme sea necesaria; así los jugadores no se sentirán abrumados al inicio de la experiencia. Como con los recursos gráficos, procura usar palabras coherentes en las funciones de la UI y la narrativa.
Nuevas funciones del SDK - ¡Próximamente!
Interacciones con objetos Ahora no es posible para los jugadores saber qué objetos son interactivos y cuáles no, hasta que realmente hacen clic o presionan 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 es compatible en la vista previa de una escena). Puedes empezar a pensar en desarrollar nuevas experiencias o juegos increíbles que podrían resultar mucho más atractivos gracias a una cámara en 3.ª persona.
Última actualización