Diagnóstico
Tras validar las necesidades de los usuarios, realizamos una Auditoría Heurística exhaustiva de la versión de escritorio actual de Lichess.org, mapeamos el Journey Map del usuario novato y evaluamos tendencias de diseño contemporáneas para construir la base del rediseño.
Hallazgos Principales
Evaluamos las 6 heurísticas con mayor deuda técnica, siendo “Diseño Estético y Minimalista”, “Ayuda y Documentación” y “Prevención de Errores” las áreas con gravedad crítica (nivel 5).
| HEURÍSTICA | HALLAZGO | GRAVEDAD |
|---|---|---|
| #8 | 1. Sobrecarga visual crítica | ALTA (5) |
| #10 | 2. Onboarding inexistente | ALTA (5) |
| #5 | 3. Miss-clicks en controles de tiempo | ALTA (5) |
| #4 | 4. Inconsistencia del ecosistema | MEDIA (3) |
| #2 | 5. Terminología excluyente | MEDIA (3) |
| #1 | 6. Feedback insuficiente al buscar partida | BAJA (2) |
1. Sobrecarga visual crítica
La pantalla de inicio compite por atención entre partidas, donaciones y Lichess TV sin una jerarquía clara (Problemas 1 y 8). Los widgets secundarios consumen el mismo peso visual que las acciones primarias del usuario.
Implementar un Dashboard modular. Ocultar información secundaria bajo pestañas colapsables y revelarla progresivamente.
2. Onboarding inexistente
El usuario nuevo aterriza en la plataforma sin ninguna guía (Problemas 2 y 10). No existe flujo de bienvenida, tutorial progresivo ni indicaciones sobre qué hacer al ingresar por primera vez.
Crear un Onboarding progresivo en la primera visita del usuario. Tooltips contextuales y un flujo de inicio guiado.
3. Miss-clicks en controles de tiempo
Los botones de selección de ritmo de juego (Bullet, Blitz, Rapid) están muy juntos y son visualmente similares, provocando clics accidentales en momentos críticos (Problema 7 validado por encuestas). Los usuarios reportan pérdidas de rating por este motivo.
Reestructurar los botones de selección de tiempo separándolos visualmente y aplicando la Ley de Fitts: mayor área de toque, mayor separación.
4. Inconsistencia del ecosistema
La interfaz web de escritorio difiere drásticamente de la nueva app móvil de Lichess, que fue rediseñada con patrones modernos. Los usuarios que alternan entre ambas experimentan ruptura cognitiva.
Unificar el Sistema de Diseño (UI Kit) y la tipografía entre la web Desktop y la app móvil.
5. Terminología excluyente
El uso de términos técnicos del ajedrez competitivo ("Bullet", "Blitz", "Lobby") sin ninguna explicación contextual representa una barrera de entrada para usuarios no familiarizados (Problema 3).
Renombrar con lenguaje natural (ej. "Sala de Juego" para Lobby). Incorporar íconos de relojes junto a los controles de tiempo e implementar tooltips explicativos.
6. Feedback insuficiente al buscar partida
El usuario no recibe señales claras de que el sistema está procesando su solicitud (Problema 5). Al iniciar una búsqueda de oponente, la interfaz no confirma visualmente el estado del proceso.
Agregar micro-interacciones de estado y spinners que confirmen que el sistema está buscando oponente o cargando el análisis.
La plataforma es funcional pero hostil. La prioridad absoluta (Gravedad 5) es reducir el ruido visual (Heurística #8) para bajar la barrera de entrada.
Diagrama de flujo con tres escenarios (A: jugar partida, B: ruido visual, C: buscar herramienta) mostrando puntos de fricción y éxito en la experiencia actual.
Mapa de Viaje del Usuario
Flujos de Usuario: Novato vs. Experto
A partir de los puntos de fricción observados, redefiní los recorridos ideales para mis dos arquetipos de usuario, integrando Onboarding progresivo y prevención de errores en el flujo.
Matriz de Tendencias
La Solución Visual
Para resolver los problemas de “Diseño Estético y Minimalista” detectados en la auditoría, hemos seleccionado patrones de diseño contemporáneos que guiarán la nueva interfaz de escritorio.
Minimalismo Funcional
Reducción extrema de elementos decorativos para dejar solo lo esencial. No se trata de quitar funcionalidad, sino de revelar la información progresivamente, permitiendo que el contenido respire.
El tablero de ajedrez será el protagonista absoluto. Los menús laterales se simplificarán y se usará el espacio en blanco (whitespace) para separar las secciones de "Torneos" y "Estudios" sin usar líneas divisorias pesadas.
Modo Oscuro Nativo
Interfaz con fondos oscuros y textos claros, diseñada como experiencia de primer nivel — no como inversión automática de colores.
Dado que las sesiones de juego y análisis pueden durar horas, el Modo Oscuro reducirá la fatiga visual (Computer Vision Syndrome). Se utilizarán grises profundos (no negro absoluto) para mantener el confort visual y resaltar las piezas.
Dashboard UI & Grid Layout
Organización de la información en tarjetas o módulos rectangulares que aprovechan la amplitud de la pantalla de escritorio de manera ordenada y escaneable.
Transformaremos la "lista interminable" actual en un sistema de tarjetas (Cards) para los torneos y modos de juego. Esto permite escanear la información rápidamente y mejora la organización en pantallas anchas (Desktop).
Micro-interacciones y Feedback
Pequeñas animaciones que responden a acciones del usuario, confirmando que el sistema está procesando y respondiendo.
Efecto visual al pasar el mouse sobre una pieza o botón (hover). Animación sutil de "check" al encontrar partida. El objetivo es darle vida a la interfaz y confirmar que el sistema está respondiendo en cada momento.
Tipografía Escalable y Accesible
Uso de fuentes modernas sans-serif con altos pesos de lectura, cumpliendo estándares de accesibilidad WCAG AA en todos los tamaños.
Reemplazo de las fuentes de sistema antiguas por una tipografía geométrica legible (ej. Inter o Roboto), asegurando altos ratios de contraste y una jerarquía visual clara entre títulos, cuerpo y metadata.
Del Diagnóstico a la Acción
Con los hallazgos de la auditoría heurística mapeados y las tendencias de diseño identificadas, el siguiente paso es traducir este diagnóstico en una nueva arquitectura de información que reorganice la estructura de navegación y los flujos de usuario de la versión Desktop.
Factibilidad · Viabilidad · Deseabilidad
Cada propuesta de rediseño fue evaluada contra tres ejes: ¿es técnicamente factible sin reescribir el backend open-source? ¿Es viable dentro de un modelo sin fines de lucro sostenido por donaciones? ¿Es deseable para los usuarios según los datos de la investigación?
| PROPUESTA | FACTIBILIDAD | VIABILIDAD | DESEABILIDAD |
|---|---|---|---|
| Dashboard Modular (Jerarquía) | Alta | Alta | Alta |
| Acceso Directo (Eficiencia) | Alta | Alta | Alta |
| Ergonomía — Ley de Fitts | Media | Media | Alta |
| Modo Oscuro Nativo | Alta | Alta | Alta |
| Onboarding Progresivo | Media | Alta | Alta |
"Este research confirma que Lichess necesita un rediseño que respete su potencia técnica pero que simplifique el acceso y mejore la ergonomía visual. El próximo paso es el desarrollo del Prototipo funcional, donde aplicaremos estas soluciones de diseño."