Я learn: del cuaderno digital al hábito de aprender

Estudio UX/UI · 19 de octubre de 2026 · Español e inglés → ucraniano

Recomendación principal

Conservar la riqueza del contenido, la repetición espaciada y la identidad Я learn, y reorganizar la experiencia alrededor de una sesión diaria breve. La persona debería poder responder inmediatamente: «¿qué me conviene practicar ahora?», «¿qué estoy aprendiendo?» y «¿qué recuerdo después de unos días?».

La dirección elegida contigo es Kyiv contemporáneo: editorial, clara y ágil; azul tinta, amarillo cálido, cirílico protagonista y una navegación de producto. Una interfaz puede tener personalidad sin convertir cada acción de estudio en un espectáculo.

Qué he revisado y cómo interpretar el estudio

He inspeccionado el HTML, CSS, módulos de aprendizaje, datos, traducciones, persistencia y documentación. He abierto en Chromium la portada, tarjetas, ejercicios, alfabeto, glosario, perfil y capítulo 1 del proyecto local; he capturado cada pantalla a 1440 px y el hub de ejercicios a 375 px. También he examinado la estructura de las nueve unidades y las siete mecánicas del motor.

Es una evaluación heurística y técnica, no un estudio con alumnos. No he validado el nivel curricular, la corrección lingüística completa, la retención real ni todas las combinaciones de estados. Las propuestas sobre motivación son hipótesis que deben probarse. Las capturas representan esta copia local; no he modificado ni auditado la versión publicada.

La documentación contiene estados contradictorios: PROJECT_STATE declara una versión aprobada, mientras QA_AUDIT conserva un fallo de internacionalización. README describe una paleta y unas fuentes anteriores, y afirma funcionamiento offline. El código y la observación del navegador tienen prioridad como evidencia del estado actual.

Lo que merece conservarse

• Contenido aprovechable: 33 letras, 778 entradas de vocabulario y 91 ejercicios distribuidos en nueve capítulos. El motor tiene siete tipos reales: 39 test, 19 huecos, 17 de ordenar/arrastrar, nueve de caso, tres de plural, tres de emparejar y uno de ordenar.
• Recuerdo activo y espaciado: SM-2 ya existe; rediseñar no exige descartar el motor ni empezar desde cero.
• Identidad con carácter: Я learn, la tipografía y el enfoque editorial diferencian el producto de una plataforma genérica.
• Privacidad y sencillez: progreso local y una arquitectura estática de HTML, CSS y JavaScript con poca dependencia de infraestructura.
• Diversidad de práctica: aprender letras, reconocer, ordenar y producir formas ofrece una buena base para sesiones mixtas.
• Sin castigo por error: el producto ya evita el sistema de vidas; conviene mantener esa decisión.

Diagnóstico: experiencia actual y cambio propuesto

1. La portada informa, pero no orienta al alumno que regresa

Evidencia: html/index.html presenta un hero, tres CTA, tarjetas del método, temario y estadísticas. Incluso con progreso, la cabecera sigue proponiendo empezar por el alfabeto. El restablecimiento global ocupa espacio en la portada.

Impacto: cada visita obliga a decidir entre herramientas antes de empezar a aprender.

Propuesta — prioridad alta: separar la presentación para la primera visita de la pantalla Hoy. En Hoy: una recomendación principal, repaso pendiente, continuación de la última lección y meta elegida por la persona. Si no hay repasos, ofrecer avanzar; si hay muchos, una tanda limitada con estimación honesta. Mover las acciones de borrado a ajustes y ofrecer exportación.

2. Las herramientas están conectadas por navegación, no por una sesión

Evidencia: alfabeto, vocabulario, ejercicios y capítulos viven en páginas distintas; el hub de ejercicios expone filtros y numerosos ejercicios a la vez. En móvil, el alumno debe atravesar buena parte de la configuración antes de practicar.

Impacto: se aprende a manejar secciones, pero no se hace evidente el siguiente paso pedagógico.

Propuesta — prioridad alta: sesión de cinco a diez minutos: recuperar algunas palabras, introducir una estructura, practicarla y terminar con una recapitulación. Conservar el acceso libre para usuarios avanzados. Una ruta orientada a objetivos, como «presentarme», comunica más que una lista de mecánicas.

3. El repaso necesita proteger el acto de recordar

Evidencia: flashcards.js muestra botones de valoración desde el inicio; answer() acepta respuestas sin comprobar que la tarjeta se haya revelado. El manejo de Enter/Espacio existe tanto en la tarjeta como en el documento: conviene comprobar la doble activación por propagación. El selector da prioridad a palabras nuevas; su orden numérico puede poner vencidas más recientes antes que las más atrasadas, a pesar de los comentarios. También puede incluir tarjetas futuras para completar la tanda.

Impacto: es posible avanzar sin recuperar el significado y dedicar tiempo a tarjetas que aún no necesitan repaso.

Propuesta — prioridad alta: mostrar primero la pregunta y «Mostrar respuesta». Solo después, valorar el recuerdo. Distinguir nuevas, pendientes y futuras; fijar cupo de nuevas, priorizar vencidas y ofrecer estudiar por adelantado como elección explícita. Revisar el orden del planificador con casos de fechas concretas antes de tocar el algoritmo. El prototipo demuestra la interacción; no implementa SM-2 ni intervalos reales.

4. ES/EN aún no equivale a dos cursos de origen completos

Evidencia: i18n.js traduce muchas cadenas de interfaz. Las 778 entradas revisadas contienen trad y ejemplos en español, sin campos dedicados a traducción inglesa; flashcards.js pinta directamente w.trad. Preguntas y explicaciones del capítulo 1 permanecen en español.

Impacto: elegir English puede dejar una experiencia mixta, con instrucciones que el alumno no entiende.

Propuesta — prioridad esencial: separar idioma de interfaz, idioma de apoyo e idioma objetivo. Modelo recomendado: contenido ucraniano común, con traducciones, instrucciones y explicaciones por locale. Auditar cobertura y permitir publicar una lección solo cuando su versión ES o EN esté revisada. Las comparaciones fonéticas deben adaptarse al idioma de origen; una explicación basada en la «j española» no sirve automáticamente a un anglófono.

5. Hay promesas y textos visibles que necesitan precisión

Observado en navegador: «Baraja de {n} palabras» en vocabulario; «{n} términos» en capítulo 1; alphabet.prev y alphabet.next en alfabeto; ejemplos vacíos como «» — en tarjetas. El perfil vacío muestra «Aún no hay capítulos con vocabulario» aunque sí existen datos.

Datos: 672 de las 778 entradas no tienen ejemplo_ucr informado. Esto mide ausencia del campo, no demuestra que todas necesiten el mismo tipo de ejemplo.

Propuesta — prioridad alta: corregir interpolaciones y traducciones faltantes; no renderizar ejemplos vacíos; distinguir ausencia de actividad de ausencia de contenido. Añadir ejemplos gradualmente por utilidad y dificultad, con revisión lingüística. La calidad de la interfaz incluye lo que afirma, no solo cómo se dibuja.

6. La voz es una dependencia didáctica, no un adorno

Evidencia: tts.js depende de voces del navegador y contempla deletreo como alternativa. En el navegador de inspección no había voz ucraniana disponible. Parte del copy habla de audio nativo; no equivale a grabaciones de hablantes nativos.

Impacto: la experiencia de pronunciación cambia según el dispositivo. El deletreo no sustituye el sonido para ejercicios auditivos.

Propuesta — prioridad alta: grabaciones revisadas y alojadas con la app, audio lento/normal y disponibilidad visible. Si falta audio, ofrecer práctica escrita equivalente sin evaluar comprensión auditiva inexistente. No simular un reproductor funcional. La demo reproduce solo si hay una voz ucraniana disponible y explica el caso contrario.

7. La gamificación mide actividad con más claridad que aprendizaje

Evidencia: hay XP, niveles, racha, logros y dominio basado en repeticiones. El catálogo incluye metas de volumen y perfección. El código añade actividad por valoración de tarjetas.

Riesgo de diseño: optimizar clics o evitar errores para conservar la perfección puede desplazar el objetivo de recordar. No he demostrado este efecto con alumnos.

Propuesta — prioridad media: conservar XP como feedback secundario, premiar recuperación tras un intervalo, completar objetivos comunicativos y volver después de una pausa. Mostrar «vista», «en práctica» y «retenida», explicando el criterio. Metas semanales flexibles, celebración breve y sin sonidos automáticos. No introducir ligas por defecto ni convertir fallar en una pérdida. Los umbrales y recompensas deberán calibrarse con datos reales.

8. El estilo actual tiene identidad, pero compite con la tarea

Evidencia visual: papel crema, terracota, sombras duras, serif de gran tamaño, manuscrita y texturas. La portada carga DM Sans, DM Serif y Caveat mediante Google Fonts; otras páginas, como vocabulario, no incluyen esa misma carga y pueden renderizar con alternativas. Las capturas muestran diferencias tipográficas entre portada y tarjetas.

Impacto: demasiados tratamientos similares a carteles, controles con contornos fuertes y fuentes inconsistentes aumentan el ruido. En tarjetas, palabras largas ocupan mucho alto y alejan la respuesta de los controles.

Propuesta — prioridad media: centralizar carga tipográfica y tokens; reservar la expresividad al inicio, hitos y contenido cultural. En sesión, letra ucraniana legible, controles tranquilos, ancho acotado y acciones cercanas. Tipografía fluida que soporte frases largas y caracteres como Ґ, Є, І, Ї y el apóstrofo ucraniano.

9. Accesibilidad, continuidad y confianza

Evidencia: existen estilos de foco y varias etiquetas ARIA, pero eso no prueba conformidad completa. Hay alternativas de ordenar y arrastrar que deben verificarse con teclado. El progreso reside en varios almacenamientos locales. No he encontrado un service worker y la carga de datos usa cache: 'no-store': la promesa general de funcionar offline no está demostrada.

Propuesta — prioridad alta: objetivo WCAG 2.2 AA, controles cómodos de 44–48 px, feedback con texto y no solo color, foco visible y no tapado, idiomas por fragmento y orden de lectura correcto. Los 44 px son un objetivo de comodidad y el criterio mejorado; WCAG 2.2 AA tiene su propio mínimo de 24 px con excepciones. Toda operación de arrastrar necesita alternativa de clic/teclado. Respetar reducción de movimiento. Para continuidad: exportar/importar, restaurar sesión y explicar qué ocurre al borrar los datos del navegador. Añadir offline solo con almacenamiento y pruebas reales; sincronización opcional después.

Arquitectura de información propuesta

Hoy: recomendación de sesión, repaso disponible y continuar.

Mi camino: objetivos comunicativos dentro de los nueve capítulos; posibilidad de saltar o revisar.

Repasar: cola de repetición espaciada, sesiones limitadas, filtros secundarios y estado vacío útil.

Practicar: una tarea por pantalla; explicación breve tras responder; volver a intentar sin castigo.

Explorar: búsqueda global de vocabulario, alfabeto y pequeñas referencias gramaticales. Diccionario y práctica deben conectarse sin borrar el contexto.

Mi progreso: retención por habilidad, actividad semanal, próximos repasos y ajustes de datos. En móvil, probar si cinco destinos más un acceso secundario funcionan mejor que los seis de esta demo; no fijar la navegación definitiva sin comprobar su descubribilidad.

Flujos que diseñaría en detalle

1. Primera visita: idioma de apoyo → motivo de aprendizaje → objetivo diario opcional → primera actividad. No pedir cuenta antes de demostrar valor. Una prueba breve puede permitir saltar letras conocidas.
2. Regreso diario: Hoy → recomendación explicada → sesión → resumen con lo recuperado y siguiente paso.
3. Tarjetas: pregunta → intento mental o escrito → revelar → valorar → siguiente. Poder corregir una valoración accidental.
4. Error en ejercicio: respuesta → explicación de la diferencia → intento posterior. Aceptar variantes válidas, normalizar espacios/apóstrofos y revisar cada caso sin ocultar errores relevantes.
5. Interrupción: guardar paso y respuesta; al volver, continuar o empezar de nuevo. Confirmar solo cuando una acción vaya a perder trabajo.
6. Sin audio/red/datos: explicar la limitación, ofrecer una alternativa útil y evitar marcar como completada una habilidad que no pudo practicarse.

Tres posibilidades de diseño

No recomiendo mezclar las tres en la misma interfaz. El prototipo desarrolla la elegida; las otras son alternativas conceptuales, no tres productos completos implementados.

Sistema visual de Kyiv contemporáneo

• Paleta tokenizada en OKLCH: fondo 97% .009 88; superficie 99% .004 88; texto 24% .045 266; secundario 46% .035 266; azul 42% .18 267; amarillo 88% .16 91. El amarillo es una superficie de llamada con texto oscuro; nunca texto amarillo sobre fondo claro.
• Tipografía: Golos Text alojada localmente para interfaz y cirílico; Fraunces para el momento editorial. La producción deberá confirmar licencias y cobertura de todos los pesos que se distribuyan.
• Composición: escritorio con navegación lateral, tarea central y apoyo opcional; móvil con una columna y navegación inferior. La sesión elimina información secundaria.
• Elemento memorable: una Ї grande integrada en la portada de sesión. Tiene relación directa con el idioma; no requiere una escena 3D ni una descarga pesada.
• Controles: tamaños consistentes, texto que describe la acción, estados activos inequívocos y sistema de iconos SVG coherente.
• Movimiento: lente de contención en el estudio. Feedback de botón en 100–160 ms, cambio de tarea 160–220 ms, revelado 200–240 ms y celebración puntual hasta 600 ms como objetivos de diseño. Sin bucles permanentes ni animaciones bloqueantes. En la demo se implementa el revelado y se respeta prefers-reduced-motion.

Qué significa «moderna en octubre de 2026» aquí

Lo tomo como una dirección de producto actual, no como una afirmación de que exista una única moda ganadora. Propongo personalización comprensible, interacción inmediata, contenido contextual, continuidad entre dispositivos cuando se incorpore y accesibilidad desde la base.

He contrastado referencias vigentes de los propios productos: Anki para separar revelado y valoración; Duolingo para estudiar cómo reducir la fricción del hábito; Memrise para observar su propuesta de contenido en contexto y voces reales. Son fuentes sobre esos productos, no pruebas de que copiar sus mecanismos mejore este proyecto. No he contratado ni probado sus planes de pago.

Para accesibilidad y movimiento: WCAG 2.2 del W3C y documentación de reducción de movimiento de MDN. Estas referencias fundamentan requisitos concretos; no implican que la demo haya superado una auditoría de conformidad.

No añadiría un tutor de IA, reconocimiento de voz o WebGL para aparentar modernidad. Una fase posterior puede evaluar conversación guiada, con revisión lingüística, latencia y costes claros. La retroalimentación de pronunciación no debe presentarse como fiable sin validación.

Rendimiento e implementación

La pila estática actual puede producir esta experiencia. No hay motivo demostrado para migrar todo a React, introducir Three.js o descargar varias bibliotecas de animación para transiciones sencillas. En el prototipo uso CSS y JavaScript local: es una decisión deliberada para preservar rapidez.

Objetivos para producción, pendientes de medición: LCP ≤2,5 s, INP ≤200 ms y CLS ≤0,1 en condiciones representativas; respuesta visual local inmediata, fuentes limitadas y cargadas desde un único punto, audio bajo demanda y particiones de datos cacheables con versión. Medir en móvil real y percentiles de usuarios; una captura o una prueba en escritorio no valida estos objetivos.

Primero separar contenido, traducciones, planificador, progreso y componentes visuales. Mantener IDs de palabras y ejercicios. Diseñar una migración versionada y reversible del progreso antes de integrar la nueva UI. Cada paso debe poder convivir con la app anterior; no cambiar el planificador al mismo tiempo que toda la presentación sin pruebas específicas.

Prioridades y hoja de ruta

Cómo comprobar que el rediseño mejora el aprendizaje

Prueba moderada inicial con 5–8 personas como objetivo de reclutamiento, mezclando principiantes, usuarios de tarjetas y hablantes de ambos idiomas. Ese tamaño sirve para encontrar problemas cualitativos; no demuestra mejora estadística de retención.

Tareas: empezar sin ayuda, retomar una sesión, revelar/valorar, corregir un error, buscar una palabra y cambiar el idioma de apoyo. Observar dudas y comprensión además del tiempo y los clics. Comparar la versión actual con la propuesta, alternando el orden de exposición.

Después, medir activación, finalización de sesiones, retorno a siete días y recuperación tras varios días con tarjetas equivalentes. Acordar consentimiento y analítica mínima; el proyecto actual no necesita perder su privacidad. Retención debe medirse independientemente de XP. No hay resultados de estas pruebas todavía.

Alcance real del prototipo entregado

Implementado: seis destinos navegables, tres tarjetas con valoración tras revelado, tres ejercicios con reintento y explicación, ocho palabras buscables en tres idiomas, alfabeto de 33 letras con nombres, cambio de idioma ES/EN y actividad local aislada. La valoración se registra, pero no programa una cola espaciada. Los logros y la meta de portada son ejemplos de composición.

No implementado: contenido completo de los nueve capítulos, SM-2 conectado, audio grabado, cuenta, sincronización, offline garantizado, evaluación de pronunciación y tutor IA. La demo no lee ni modifica el progreso de la aplicación original. Las traducciones de muestra ilustran el flujo; no sustituyen una revisión lingüística profesional.

Los archivos originales permanecen intactos. Todos los entregables están en propuesta-ux-2026/, fuera de html/ y del volumen que sirve la aplicación actual. Las comprobaciones y capturas del prototipo se documentan en verificacion.json y capturas/.