# Guía de UX y UI Es de vital importancia para nosotros que los creadores de contenido de Decentraland tengan la libertad 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 scenes en Decentraland serán visitadas por una amplia variedad de usuarios y queremos hacer las scenes accesibles para todos ellos. Debido a esto, no podemos ignorar la necesidad de establecer unos criterios de diseño unificados, una guía que pueda garantizar que los jugadores se encontrarán con una experiencia homogéneamente intuitiva y agradable, sin importar en qué scene estén. En este documento compartimos los Design Values 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 scenes que componen el Metaverse. ## Valores de diseño Todas las scenes 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: 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 a lo largo de la scene. * **Guiar**: La scene ofrece una mano amiga. El texto, el movimiento, el sonido y los gráficos orientarán e indicarán a los jugadores la dirección correcta. * **Reactivo**: Acción-reacción clara ante la input de los jugadores. * **Minimalista**: Menos es más. Los jugadores pueden concentrar su atención en lo que importa. * **Interesante**: La scene aprovecha las cosas que hacen que Decentraland sea único y merezca la pena visitar. * **Con propósito**: Los jugadores tienen una fuerte razón 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 scene? ¿Es ofrecer un hermoso paisaje 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, las cuales pueden afectar profundamente la experiencia del visitante. Para las scenes que siguen un flujo lineal, donde cada paso depende del anterior, recomendamos cerrar la scene con paredes 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 de bienvenida al jugador y explicar cuál debería ser su objetivo en la scene.
In-world banner

Instrucciones dentro del mundo

Si la experiencia del jugador en tu scene no pretende ser lineal, pero aun así necesitas proporcionar algunas instrucciones básicas para asegurarte de que la disfruten por completo, puedes mostrar instrucciones en un popup. Es posible mostrar un popup en la pantalla del jugador en cuanto entre, sin importar desde qué dirección venga, y de ese modo asegurarte de que los jugadores siempre conozcan lo esencial.
Pop-up banner

Instrucciones en popup

{% hint style="warning" %} **📔 Nota**: Asegúrate de que el popup no sea demasiado intrusivo y de que sea fácil cerrarlo haciendo clic en cualquier parte. {% endhint %} Un mensaje de bienvenida debe comunicar lo siguiente al jugador: * El título de la scene * Dar la bienvenida al jugador * Objetivo final y motivación para el jugador * Instrucciones/Siguientes pasos * *(Opcional)* Controles. Principalmente útil si tu scene usa global button events. 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 scene; ¡piensa en formas de motivarlos a hacerlo! Pregúntate: “¿Qué haría que un jugador quisiera volver a mi scene, o recomendarla a un amigo?” Por ejemplo, puedes retarlos, 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 scene un lugar dinámico donde los jugadores sientan que disfrutan pasando tiempo allí! ### Feedback 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 feedback 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. Al usar sonido, puedes asegurarte de que sea consciente de que algo ha ocurrido. Si usas señales visuales y sonoras en combinación, oír el sonido invita al jugador a mirar alrededor para encontrar 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 desactivado. Si estás usando el sonido como una forma de proporcionar instrucciones de la scene o una pieza clave de la mecánica del juego, intenta ofrecer también algo visual que indique la misma dirección. 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 tiene como objetivo ayudarte a construir una narrativa a través del diseño de tu scene que dirija la atención 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 exitosa. No podemos exagerar lo valiosos que son el color, los iconos, el movimiento y la escala para transmitir el mensaje correcto: recuerda que todo en la scene transmite un significado. ### 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. En el cliente de escritorio, la UI predeterminada de Decentraland (minimap, chat, etc.) está diseñada para ocupar solo el 25% izquierdo de la pantalla. El resto del espacio de la pantalla es una zona segura, libre para que la utilicen los creadores de contenido.
Screen regions used by UI
No hay restricciones para colocar elementos de UI en el 25% izquierdo de la pantalla, pero ten en cuenta que el explorer está realizando cambios y mejoras continuos en su diseño. Cualquier espacio que hoy no esté cubierto en esa región podría quedar cubierto en versiones futuras. {% hint style="info" %} **📱 Área segura para móvil**: El [cliente móvil](/creator/content-creator-es/scenes-sdk7/creacion-para-movil/building-for-mobile.md) tiene sus propias zonas reservadas: la **parte izquierda** (chat, búsqueda, perfil, joystick, emotes), la **parte superior derecha** (perfil y controles de cámara), y la **parte inferior derecha** (botón de interacción). Al diseñar para móvil, mantén la UI crítica en el centro o en la parte superior central de la pantalla y sigue el [área segura para móviles](/creator/content-creator-es/scenes-sdk7/creacion-para-movil/safe-area.md). Usa [`isMobile()`](/creator/content-creator-es/scenes-sdk7/creacion-para-movil/detect-platform.md) para alternar diseños cuando las restricciones de escritorio y móvil no coincidan. {% endhint %} {% hint style="warning" %} **📔 Nota**: los elementos de UI de scenes y smart wearables siempre aparecen en una capa detrás de la UI predeterminada de Decentraland. {% endhint %} Mantén siempre una cuadrícula en mente y úsala como tu criterio principal al organizar espacialmente tu UI. Si estás trabajando en una scene donde se necesita un HUD, puedes empezar poniendo juntos todos los consumibles (por ejemplo, moneda, comida, vida), y en el otro lado los elementos acumulables como herramientas o armas. Intenta ser consistente con las métricas de la cuadrícula y el padding. Haz que el feedback de cada acción del jugador sea claro. ### Color Es importante elegir una paleta de colores, ya que esto da identidad a tu scene y también señala relaciones y jerarquías entre elementos. Al crear una paleta de colores, empieza 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.
Chromatic color palette

Paleta de colores cromática

Strategies for combining colors properly

Estrategias para combinar colores correctamente

{% hint style="info" %} **💡 Consejo**: generadores gratuitos de paletas de colores que recomendamos: [Coolors](https://coolors.co), [Adobe Color CC](https://color.adobe.com/), [Colour Lovers](http://www.colourlovers.com), [Color Hunt](http://www.colorhunt.co), [Color by Hailpixel](http://color.hailpixel.com), [Colour Code](http://colourco.de), [Sip](https://sipapp.io/), [Color Scheme Designer by Paletton](http://paletton.com), [Cohesive Colors](http://javierbyte.github.io/cohesive-colors), [Colr](http://www.colr.org) {% endhint %} El color principal debe ser el más usado en todos 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 scene. 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; 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.
Colored switches

Usar el color de forma incorrecta puede ser confuso

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. {% hint style="warning" %} **📔 Nota**: los States comunican el estado de los elementos de UI. Los states de un elemento deben mantener cierta continuidad, pero deben tener affordances claras y ser fácilmente distinguibles de otros states y del layout circundante. {% endhint %}
Active inactive button

Uso del color para los states de los botones

¡Atención! Al seleccionar colores que se mostrarán en superposición, presta especial cuidado en asegurarte de que sean legibles cuando se usen juntos. Aquí va 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.
Icon contrast

Ambos iconos pueden distinguirse, pero el primero tiene mejor contraste. Se vuelve más fácil de leer y requiere menos esfuerzo para entenderlo.

### 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 superiores. Si vas a colocar texto que se muestre sobre imágenes (o sobre el mundo), sin duda necesitarás experimentar con su legibilidad. En esos casos, sugerimos que añadas una región sólida y coloreada, en una capa entre el texto y las imágenes; de ese modo puedes asegurarte de que el texto siga siendo legible.
Text over images

Prioriza la legibilidad

### Iconos Los iconos sintetizan información, ayudándote a identificar acciones mediante imágenes. Son una herramienta increíblemente poderosa para proporcionar input que pueda interpretarse rápidamente, en lugar de usar texto para etiquetar cosas, lo que exige más atención y tiempo del jugador. También es útil mostrar iconos en combinación con texto, ya que esto ayuda a desambiguar sus significados.
Icon examples

Usa los iconos como un lenguaje universal

### Movimiento Usa el movimiento para proporcionar feedback y guiar el camino cuando sea necesario. El movimiento ayuda a los jugadores a centrar su atención y ayuda a mantener la continuidad a medida que la UI cambia.
Adding glow

Usa partículas, escala o márgenes de desvanecimiento para hacer que las cosas destaquen

### Escritura y estructura del contenido El texto de la UI puede hacer que las interfaces sean más usables 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 Welcome Message y diles el objetivo de la scene. Empieza aclarando su meta en la scene y luego las acciones necesarias para lograrla. Después puedes revelar información progresivamente según sea necesario; de este modo los jugadores no se sentirán abrumados al principio de la experiencia. Al igual que con los recursos gráficos, intenta usar palabras consistentes en tus funciones de UI y en la narrativa. Nuevas funciones del SDK - ¡Próximamente! Interacciones con objetos Ahora mismo no es posible que los jugadores sepan qué objetos son interactivos y cuáles no, hasta que realmente hacen clic o pulsan botones sobre ellos. Hemos estado trabajando en una nueva función para que los creadores puedan mostrar mensajes toast personalizados cuando apunten a un objeto interactivo. Este mensaje indica qué input usar y puede tener texto personalizado para describir los efectos de interactuar con él. Recomendamos encarecidamente que lo uses cuando se lance; tu scene 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 pulsando la tecla ‘V’. (Nota: todavía no es compatible en un preview de scene). ¡Puedes empezar a pensar en desarrollar nuevas experiencias o juegos increíbles que podrían ser mucho más atractivos gracias a una cámara en tercera persona! --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.decentraland.org/creator/content-creator-es/scenes-sdk7/disenar-la-experiencia/ux-ui-guide.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.