Infografía · PuzzleHub Journal

El tablero como laboratorio de producto

Mecánica conocidaMenos incertidumbre
UIProbar interacción
SistemaExtraer patrones
Una lectura visual del sistema de restricciones que define este capítulo.

Cuando una plataforma contiene muchos juegos hay una manera rápida de rediseñarla y una manera útil. La rápida consiste en cambiar colores, bordes y tipografía en todas las páginas. La útil consiste en escoger una experiencia, llevarla mucho más lejos y descubrir qué decisiones merecen convertirse en sistema.

Elegimos Sudoku porque elimina una variable importante: casi todo el mundo reconoce el tablero y entiende la meta general. Si algo se siente confuso, es más probable que el problema esté en nuestra interfaz y no en una mecánica desconocida.

Sudoku como banco de pruebas
ResolverUna experiencia completa con atención a cada estado.
ExtraerSeparar lo específico del Sudoku de lo reutilizable.
PropagarLlevar patrones maduros al resto del catálogo.

Primero un juego terminado

Rediseñamos la pantalla con identidad visual propia, interacciones contextuales, controles más claros, notas de candidatos y contenido de ayuda. Pero cada decisión tenía una segunda pregunta asociada: ¿esto resuelve solo Sudoku o resuelve un problema recurrente de PuzzleHub?

Esa pregunta evita dos extremos. No queremos copiar literalmente la interfaz de Sudoku en un Nonogram. Tampoco queremos que cada juego invente de nuevo cómo reiniciar, cambiar dificultad o explicar sus reglas.

El prototipo no es la pantalla que copiamos; es el lugar donde descubrimos las reglas del sistema.

La jerarquía empieza por dar espacio al tablero

Un juego de lógica necesita que su área interactiva domine la pantalla. Por eso también hemos ampliado el ancho global de la web: algunos tableros sufrían dentro de un contenedor pensado más para texto que para jugar.

La configuración pertenece al contexto de la partida; las acciones frecuentes pertenecen cerca de la acción. Separar ambos niveles reduce desplazamientos y ayuda a que la interfaz se lea sin manual.

Tres niveles de atención
1tablero: protagonista
2acciones: al alcance
3configuración: disponible sin competir

Los controles deben vivir donde se usan

Notas, deshacer, borrar o comprobar son herramientas de resolución. Cuanto más lejos están del tablero, más se rompe el ritmo. Acercarlas no es solo una decisión estética: reduce movimiento, búsqueda visual y cambios de contexto.

Al mismo tiempo, tamaño o dificultad no necesitan ocupar el centro durante cada jugada. Mantener esa diferencia nos da un patrón que puede funcionar en muchas familias aunque las acciones concretas cambien.

Feedback antes que decoración

Los colores y animaciones tienen sentido cuando comunican algo: selección, relación, error, progreso, finalización. Un rediseño puede parecer más moderno y ser peor si añade ruido alrededor de una tarea que exige concentración.

Sudoku nos permite probar esos estados con facilidad: celda activa, valores relacionados, candidatos, conflicto y victoria. Cada estado obliga a pensar también en modo claro, contraste y comportamiento móvil.

Onboarding como parte del producto

Con decenas de puzzles poco conocidos, una página de reglas al final no basta. Una persona que llega a LITS, Norinori o un Logic Grid puede no saber ni qué gesto se espera primero.

Estamos construyendo una base reutilizable para que cada juego pueda explicar objetivo, interacción y lectura del tablero sin tener que diseñar setenta tutoriales desde cero. Los juegos que lo necesiten podrán añadir pasos específicos encima.

El onboarding mínimo debe responder pronto:
  • ¿qué tengo que conseguir?
  • ¿qué puedo tocar o marcar?
  • ¿qué significan las pistas y colores?
  • ¿cómo sé que una acción es incorrecta?
  • ¿dónde encuentro ayuda sin abandonar la partida?
Sudoku es el prototipoLo importante del rediseño no son sus colores; son las decisiones reutilizables que deja detrás.

Del caso especial al game shell

Después del trabajo específico aparecen piezas con nombre propio: carcasa de juego, controles reutilizables, toolbars dentro del área de juego, estados comunes y documentación de interfaz. El motor conserva su interacción, pero deja de tener que construir una aplicación completa alrededor.

Esto también permite soportar motores distintos —nativos, personalizados o integraciones existentes— con una experiencia de producto reconocible.

Los colores de categoría pueden crear continuidad

La identidad visual de cada familia puede viajar desde el catálogo hasta la partida. Eso ayuda a diferenciar experiencias sin diseñar un universo visual independiente para cada título. El color se convierte en señal de pertenencia, no en decoración arbitraria.

El reto está en no depender exclusivamente del color para comunicar estados y en mantener contraste suficiente en temas claros y oscuros.

Modo claro: el test que descubre atajos

Un componente que solo se ve bien sobre un fondo concreto todavía no es realmente reutilizable. Añadir soporte de modo claro obliga a sacar a la superficie valores hardcodeados, sombras excesivas y estados que confiaban demasiado en un único contraste.

Por eso el tema claro es más que una función de apariencia: funciona como prueba de arquitectura visual.

Diseñar PuzzleHub, no setenta skins

La meta es que el usuario aprenda PuzzleHub una vez y después dedique su energía a aprender el siguiente puzzle. Debe reconocer dónde está la ayuda, cómo empieza otra partida, cómo cambia dificultad y qué feedback esperar, aunque el tablero cambie radicalmente.

Sudoku nos está permitiendo construir ese vocabulario sin intentar resolverlo todo a la vez. Cuando una decisión funciona aquí, la probamos fuera. Si sobrevive a juegos muy distintos, entonces empieza a merecer el nombre de sistema.

Ese proceso es más lento que aplicar una plantilla a setenta páginas, pero evita que dentro de unos meses tengamos setenta páginas visualmente parecidas y conceptualmente incoherentes. Preferimos una plataforma que aprende de cada juego.