> For the complete documentation index, see [llms.txt](https://docs.decentraland.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.decentraland.org/creator/content-creator-es/scenes-sdk7/disenar-la-experiencia/ux-ui-guide.md). # Guía de UX y UI Consejos y prácticas para crear escenas 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 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 que las escenas sean accesibles para todos ellos. Por eso, no podemos ignorar la necesidad de establecer 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é 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 para 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 de Decentraland deben diseñarse teniendo en cuenta estos valores: * **Acogedora**: 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. * **Brindar 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. * **Reactiva**: Una clara acción-reacción al input 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 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, las cuales pueden afectar profundamente la experiencia del visitante. Para las escenas que siguen un flujo lineal, en el que cada paso depende del anterior, recomendamos cerrar la escena 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 debe ser su objetivo en la escena.

In-world banner — Instrucciones en el mundo

Si la experiencia del jugador en tu escena no está pensada para ser lineal, pero aun así necesitas proporcionar algunas instrucciones básicas para asegurar que la disfrute al máximo, puedes mostrar las instrucciones en una ventana emergente. Es posible mostrar una ventana emergente en la pantalla del jugador en cuanto entre, independientemente de la dirección desde la que llegue, y así asegurarte de que los jugadores siempre conozcan lo esencial.

Pop-up banner — Instrucciones emergentes

{% hint style="warning" %} **📔 Nota**: Asegúrate de que la ventana emergente no sea demasiado intrusiva y que sea fácil de cerrar haciendo clic en cualquier parte. {% endhint %} Un mensaje de bienvenida debe comunicar al jugador lo siguiente: * El título de la escena * Da la bienvenida al jugador * Objetivo final y motivación para el jugador * Instrucciones / Siguientes pasos * *(Opcional)* Controles. Es especialmente útil si tu escena usa eventos globales de botones. De lo contrario, los propios elementos indican cómo usarlos al pasar el cursor sobre ellos. ### Motivación Probablemente querrás que tus visitantes vuelvan a tu escena, así que piensa en formas de motivarlos para hacerlo. Pregúntate: “¿Qué haría que un jugador quisiera volver a mi escena o recomendársela a un amigo?” Por ejemplo, puedes retarlos, dándoles algo que lograr y 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 parecerán reales si no van acompañadas de sonido. El otro aspecto crucial del sonido es proporcionar retroalimentación a las acciones de un jugador. Si te apoyas solo en pistas visuales, no puedes estar seguro de que el jugador estará mirando en la dirección correcta para ver los efectos de sus acciones. Al usar sonido, puedes asegurarte de que se dé cuenta de que algo ocurrió. Si combinas pistas visuales y sonoras, oír el sonido invita al jugador a mirar alrededor en busca de la pista visual, por si no la vio. Ten en cuenta que algunos jugadores podrían estar jugando con el sonido desactivado. Si estás usando el sonido como forma de proporcionar instrucciones de la escena o una pieza clave de 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. ## Interfaz de usuario Esta sección tiene como objetivo ayudarte a construir una narrativa mediante el diseño de tu escena que dirija el foco 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 íconos, el movimiento y la escala para transmitir el mensaje correcto: todo en la escena comunica un significado, recuérdalo. ### Distribución Ten cuidado al colocar tu UI en regiones de la pantalla que se superponen 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 resto del espacio 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 el 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. {% hint style="info" %} **📱 Zona segura móvil**: La [cliente móvil](/creator/content-creator-es/desarrollar-para-movil/cliente-movil/overview.md) dibuja sus propios controles sobre parte del canvas: la **parte izquierda** (chat, search, profile, joystick, emotes), la **esquina superior derecha** (controles de perfil y cámara), y la **esquina inferior derecha** (botones de acción e interacción). No midas esas regiones a mano: renderiza dentro del área que informa el client, con `screenInset: 'interactable'`. Mantén la UI crítica en el centro o en la parte superior central de la pantalla y sigue el [Área segura móvil](/creator/content-creator-es/desarrollar-para-movil/desarrollar/safe-area.md). Usa [`isMobile()`](/creator/content-creator-es/desarrollar-para-movil/desarrollar/detect-platform.md) para alternar layouts cuando las restricciones de escritorio y móvil no coincidan. {% endhint %} {% hint style="warning" %} **📔 Nota**: Los elementos de UI de las escenas y los smart wearables siempre aparecen en una capa detrás de la UI predeterminada de Decentraland. {% endhint %} #### Nunca ancles tu UI en la esquina superior izquierda El error de distribución más común es fijar un panel a la esquina superior izquierda o dejarlo en el origen de una raíz que cubre la pantalla. Esa esquina, y todo el borde izquierdo, es donde el Explorer dibuja su propio minimapa y chat, y en móvil el joystick virtual. La UI de la escena colocada allí sigue renderizándose, pero la UI propia del client se dibuja encima, por lo que acaba tapada y sus botones a menudo no se pueden pulsar. Nada en el motor de layout te avisa de esto. Usa una de estas opciones en su lugar: * **Ancla el elemento a la derecha, o céntralo.** Para una puntuación, un temporizador o un panel pequeño, establece `positionType: 'absolute'` y `position: { top: 40, right: 40 }`, o céntralo con `justifyContent: 'center'` en la raíz. * **Deja que el Explorer te diga dónde es seguro.** Configura [`screenInset: 'interactable'`](/creator/content-creator-es/scenes-sdk7/ui-2d/onscreen-ui.md#screen-inset-area) en el renderer. Entonces tu UI se coloca dentro del rectángulo que el Explorer reserva para la UI de la escena, el cual ya excluye el minimapa, el chat y los controles del lado izquierdo. ```ts ReactEcsRenderer.setUiRenderer(uiComponent, { screenInset: 'interactable' }) ``` En móvil, los botones de acción en la esquina inferior derecha se dibujan sobre esa zona a propósito, y los toques allí van a los botones del client en lugar de a tu escena. Mantén los elementos interactivos fuera de la esquina inferior derecha o, para una UI que de todos modos ocupa toda la pantalla, oculta los controles táctiles mientras esté abierta: ```ts import { TouchScreenControls } from '@dcl/sdk/ecs' // mientras hay un panel de pantalla completa abierto, el jugador no necesita saltar ni pulsar E TouchScreenControls.hideAll() TouchScreenControls.hideJoystick() // restáuralos cuando el panel se cierre TouchScreenControls.showAll() TouchScreenControls.showJoystick() ``` Estas funciones auxiliares no hacen nada en escritorio, así que puedes llamarlas sin condiciones. Consulta [Controles en pantalla](/creator/content-creator-es/scenes-sdk7/interactividad/touch-screen-controls.md). Ten siempre una cuadrícula en mente y úsala como criterio principal al organizar espacialmente tu UI. Si estás trabajando en una escena donde se necesita un HUD, puedes empezar agrupando todos los consumibles (p. ej., moneda, comida, vida) y, al otro lado, los objetos almacenables como herramientas o armas. Intenta ser coherente 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 da identidad a tu escena y también señala relaciones y jerarquía entre los 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., con relación a 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 utilizado 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 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 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 la manera 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 estados comunican el estado de los elementos de UI. Los estados de un elemento deben mantener cierta continuidad, pero deben tener afordancias claras y ser fácilmente distinguibles de otros estados y de la distribución circundante. {% endhint %}

Active inactive button — Uso del color para los estados de los botones

¡Advertencia! Al seleccionar colores que se mostrarán en superposición, ten especial cuidado de asegurarte de 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 viendo sus pantallas en condiciones de iluminación subóptimas, lo que dificulta la lectura.

Icon contrast — Ambos íconos se pueden distinguir, 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 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, te sugerimos que añadas 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 siga siendo legible.

Text over images — Prioriza la legibilidad

### Íconos Los íconos sintetizan información y te ayudan a identificar acciones mediante imágenes. Son una herramienta increíblemente poderosa para proporcionar input que puede interpretarse rápidamente, en contraposición a 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.

Icon examples — Usa los íconos como un lenguaje universal

### Movimiento Usa el movimiento para proporcionar retroalimentación y guiar 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 difuminados para hacer que las cosas destaquen

### Redacción y estructura del contenido El texto de la UI puede hacer que las interfaces sean más usables y darles 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 objetivo en la escena, luego las acciones necesarias para lograrlo. Después puedes revelar la información de forma progresiva a medida que se necesite; así 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 todas tus funciones de UI y en la narrativa. #### Muestra, no cuentes Dos patrones hacen perder jugadores antes de su primera interacción: * **La ventana emergente de reglas**: un panel de introducción con varios párrafos densos que cubren cada mecánica, regla de puntuación y control. Los jugadores lo cierran sin leerlo. * **El libro de reglas dentro del mundo**: los mismos párrafos en un cartel o una placa en la escena. Parece diseño, pero el texto dentro del mundo es demasiado pequeño y demasiado largo para leerlo, y los jugadores no se quedarán quietos para entrecerrar los ojos y leerlo. Mantén el panel de introducción en una sola pantalla, sin desplazamiento: de 3 a 5 líneas cortas, idealmente una línea para el objetivo, una línea para los controles y una imagen. Un cartel debe decir una sola cosa, en 10 palabras o menos, con un tamaño de fuente grande y un cartel por idea. Luego muestra el resto en lugar de escribirlo: * Haz que el primer objetivo sea inconfundible. Coloca un objeto brillante, animado o de gran tamaño en la línea de visión inicial del jugador. Un contorno pulsante enseña “haz clic en mí” mejor que una frase. * Permite que el jugador haga una mecánica una vez de forma segura, en una zona de práctica, antes de que comience el juego real. * Usa `hoverText` en interactive entities como una instrucción justo a tiempo. Aparece exactamente cuando es relevante y no exige lectura previa. Consulta [Retroalimentación al pasar el cursor](/creator/content-creator-es/scenes-sdk7/interactividad/eventos-de-button/register-callback.md#hover-feedback). * Usa un diagrama para reglas espaciales o de secuencia. Una imagen de “gemas rojas = 1, gemas azules = 5” reemplaza un párrafo. * Entrega cualquier cosa más larga un mensaje a la vez, a través de un NPC o un diálogo que el jugador pueda omitir. Si una regla necesita más texto que eso, rediseña la mecánica o muéstrala visualmente. ### Interacciones con objetos Asegúrate de que los jugadores puedan distinguir qué objetos son interactivos y cuáles no. Al registrar button events en una Entity, el SDK muestra hover feedback por defecto: un edge highlight en la Entity y un hint junto al cursor que muestra qué input 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](/creator/content-creator-es/scenes-sdk7/interactividad/eventos-de-button/register-callback.md#hover-feedback). ### Cámara en 3.ª persona Los jugadores pueden cambiar entre la cámara en 1.ª y 3.ª 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 3.ª persona. Tu escena puede leer el modo de cámara actual del jugador, o forzar uno específico en un área; consulta [Camera](/creator/content-creator-es/scenes-sdk7/fundamentos-del-contenido-3d/camera.md). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.decentraland.org/creator/content-creator-es/scenes-sdk7/disenar-la-experiencia/ux-ui-guide.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.