Parte: 10 — UI/UX, accesibilidad y localización · Fuente: Celia Hodent, "The Gamer's Brain" · Documentación de Godot 4 (GUI) ⏱️ Duración estimada: 70 min · Nivel: Intermedio
Comprender la diferencia entre UI (la interfaz que el jugador ve y toca) y UX (la experiencia global que resulta de esa interacción), y aprender a evaluar ambas con criterios profesionales. La UI es solo una parte de la UX: un botón puede verse perfecto y aun así generar una experiencia frustrante si aparece en el momento equivocado o compite por la atención con otros elementos.
En esta clase sentamos el vocabulario que usaremos en toda la Parte 10: principios de diseño (claridad, jerarquía, consistencia, feedback), el concepto de carga cognitiva y los cuatro tipos de UI (diegética, no diegética, espacial y meta). El laboratorio no es de código todavía: montarás en Godot 4 una pequeña pantalla de auditoría con una checklist interactiva para evaluar la UX de un juego real y proponer mejoras concretas.
Al finalizar, el alumno podrá:
| # | Tema | Por qué importa |
|---|---|---|
| 1 | UI vs UX | Evita confundir "lo bonito" con "lo usable". |
| 2 | Claridad | Si el jugador no entiende, abandona. |
| 3 | Jerarquía visual | Guía la mirada a lo importante primero. |
| 4 | Consistencia | Reduce el esfuerzo de reaprender. |
| 5 | Feedback | Confirma que las acciones tuvieron efecto. |
| 6 | Carga cognitiva | Menos esfuerzo mental = más diversión. |
| 7 | Los 4 tipos de UI | Deciden cuánto rompe la inmersión. |
| 8 | Auditoría con checklist | Convierte opiniones en criterios medibles. |
Necesitas Godot 4.x abierto y un juego cualquiera para auditar (uno tuyo, uno comercial o incluso un prototipo del curso). Ten a mano papel o una nota digital para registrar hallazgos. No hace falta arte: usaremos nodos Control básicos para construir la checklist.
Como lectura de apoyo, el trabajo de Celia Hodent sobre psicología cognitiva aplicada a juegos es la referencia estándar; su charla "The Gamer's Brain" resume los principios. Consulta también la introducción a GUI de Godot: https://docs.godotengine.org/en/stable/tutorials/ui/index.html.
Construiremos una pantalla de auditoría UX: una lista de criterios con casillas que suman una puntuación en vivo. La usarás para evaluar cualquier juego.
Crea una escena nueva. Como raíz elige un nodo Control y renómbralo Auditoria. En el viewport, arriba, pulsa el botón de anclas y elige Full Rect para que ocupe toda la pantalla.
Añade como hijo un MarginContainer y, en el Inspector, pon los cuatro theme_override_constants/margin_* en 24. Dentro añade un VBoxContainer (Lista).
Dentro del VBoxContainer añade un Label (Titulo) con el texto "Auditoría UX" y varios CheckBox (uno por criterio): "¿El objetivo es claro?", "¿Hay jerarquía visual?", "¿La UI es consistente?", "¿El feedback es inmediato?", "¿La carga cognitiva es baja?".
Añade al final un Label llamado Marcador. Este mostrará la puntuación total.
Selecciona el nodo raíz Auditoria, pulsa Attach Script y guarda como auditoria.gd:
extends Control
# Referencia al Label que muestra el marcador.
@onready var marcador: Label = $MarginContainer/Lista/Marcador
# Reunimos todos los CheckBox de la lista.
@onready var lista: VBoxContainer = $MarginContainer/Lista
func _ready() -> void:
# Conectamos la señal 'toggled' de cada CheckBox.
for hijo in lista.get_children():
if hijo is CheckBox:
hijo.toggled.connect(_on_criterio_cambiado)
_actualizar_marcador()
func _on_criterio_cambiado(_estado: bool) -> void:
_actualizar_marcador()
func _actualizar_marcador() -> void:
var cumplidos := 0
var total := 0
for hijo in lista.get_children():
if hijo is CheckBox:
total += 1
if hijo.button_pressed:
cumplidos += 1
marcador.text = "UX: %d / %d criterios" % [cumplidos, total]
Ejecuta la escena con F6. Marca y desmarca casillas: el Marcador debe actualizarse al instante. Ese cambio inmediato es, en sí mismo, un ejemplo de feedback.
Ahora aplica la herramienta: elige un juego, recórrelo mentalmente y marca cada criterio que cumpla. Anota junto a cada casilla no marcada una mejora concreta ("el botón atrás cambia de sitio entre pantallas → fijarlo abajo-izquierda").
Clasifica tres elementos de UI de ese juego según los cuatro tipos: por ejemplo, una barra de vida fija es no diegética, una linterna que se atenúa es diegética, un cartel dentro del nivel es espacial, y un menú de pausa es meta.
Terminas con una checklist funcional y un diagnóstico UX real y accionable.
Marcador para que muestre también un porcentaje.Marcador de verde si se cumplen todos los criterios usando add_theme_color_override.Extiende la auditoría para que, al cerrar (tecla Esc), imprima en el Output un resumen con la puntuación final y la lista de criterios NO cumplidos, listos para copiar como tareas de mejora.
Criterio de aceptación: al pulsar Esc, el Output muestra "UX: X/N" y una línea por cada criterio sin marcar; si están todos marcados, muestra "Sin observaciones".
| Síntoma / mensaje | Causa y cómo arreglar |
|---|---|
| El marcador no cambia al marcar | No se conectó la señal toggled; revisa el bucle en _ready(). |
| "Invalid get index 'Marcador'" | La ruta $MarginContainer/Lista/Marcador no coincide con el árbol real. |
| Los CheckBox se apilan sin margen | Faltan los theme_override_constants/margin_* en el MarginContainer. |
| Confundir UI bonita con buena UX | Recuerda: la UX incluye ritmo y contexto, no solo estética. |
| Clasificar mal los tipos de UI | Pregúntate si el personaje "vería" ese dato dentro del mundo. |
❓ ¿UI y UX son lo mismo? No. La UI es lo que ves; la UX es cómo te hace sentir usarlo. Una UI impecable puede dar una UX pobre si llega en mal momento.
❓ ¿Qué es la carga cognitiva y por qué importa? Es el esfuerzo mental que exige la interfaz. Cuanto menor sea, más recursos mentales quedan para disfrutar el juego.
❓ ¿Cuándo conviene UI diegética? Cuando la inmersión es prioritaria y el dato encaja creíblemente en el mundo, como munición mostrada en el arma.
❓ ¿Puedo mezclar tipos de UI en un mismo juego? Sí, y es lo normal. El menú de pausa será meta, el HUD no diegético y los carteles del nivel espaciales.
Clase 187 - Capstone Parte 9: un set de assets coherente
Clase 189 - Sistema de UI de Godot: Control, Containers y anclas