Diseño de apps para aprender idiomas: rediseño de una pantalla de inicio, antes y después

Una app de idiomas tiene un solo trabajo en su pantalla de inicio: meter al estudiante en la lección de hoy. El primer borrador de abajo tiene todo lo que un estudiante necesita, pero se lee como un boletín de notas. Las estadísticas son una frase gris, la unidad son doce filas iguales con porcentajes, un banner chillón vende una suscripción y el siguiente paso es un CONTINUE pequeño al final.

La corrección mantiene cada función y cambia cómo se ve y dónde está. Las estadísticas pasan a ser cuatro contadores simples, la unidad se convierte en un banner sólido, la lista se vuelve un camino de nodos y una burbuja dice Start.

La pantalla completa, antes y después

Borrador junior

Corregida

A la izquierda, todo pesa lo mismo. La línea de estadísticas de 9 px, el banner amarillo chillón, las doce filas y el botón CONTINUE piden atención a la vez, y ninguno dice "tócame primero".

A la derecha, la pantalla se lee de arriba abajo en el orden en que piensa un estudiante: cómo voy, qué unidad es esta, dónde estoy en ella, qué toco. Hay un camino, una burbuja y una acción.

Qué cambió, medido

Corrección 1: deja las estadísticas en una línea simple

Antes

Después

La cabecera del borrador: Hola Mi curso con Curso de español, racha de 41 días debajo y un desplegable de español, luego una barra gris que dice Nivel A2 62,5%, XP 1240, Corazones 4/5, Gemas 320, Liga Plata, y después un banner amarillo que dice GO PLUS NOW con 50% de descuento en tu primer mes y un botón UPGRADE. Frente a una sola fila: una bandera de España, una llama con 41, una gema con 320, un corazón con 4 y una pequeña etiqueta amarilla PLUS.

El borrador deletrea sus estadísticas como una frase: "Nivel A2 62,5% | XP 1240 | Corazones 4/5 | Gemas 320 | Liga Plata". Mide 9 px, es gris y hay que leerla como texto. Un estudiante que abre la app todos los días no quiere leer sus propios números, quiere echarles un vistazo.

La corrección da a cada número un icono y un color: una llama para la racha de 41 días, una gema para 320, un corazón para 4. Van en una fila en negrita de 16 px, así que el ojo los recoge de una pasada. El desplegable de español se convierte en la bandera, que abre la lista de idiomas. El banner "GO PLUS NOW!!!", con su 50% de descuento y su botón UPGRADE, se encoge a una pequeña etiqueta PLUS al final de la fila, y la oferta se abre desde ahí.

Nivel, XP y Liga Plata pasaron a la pestaña Perfil. Importan, pero no cada vez que se abre la app.

Regla para reutilizar: muestra como iconos los números que un estudiante revisa a diario y mueve el resto a un toque de distancia.

Corrección 2: dale a la unidad un banner sólido

Antes

Después

Una línea de texto que dice Unidad 3 en negrita y Pedir comida en gris, con un enlace subrayado a la Guía a la derecha. Frente a un banner morado sólido con SECCIÓN 1, UNIDAD 3 en versalitas, Pedir comida en blanco de 20 px, un divisor finísimo y un icono de libro, con un borde más oscuro en la parte inferior.

En el borrador, la unidad es una etiqueta. "Unidad 3" y "Pedir comida" van en una línea con un enlace de texto, y nada dice que este es el encabezado al que pertenece todo lo de abajo.

La corrección lo convierte en un banner: 350 por 76, radio 12, morado de marca, un título de 20 px y un borde inferior 4 px más oscuro que lo hace parecer pulsable. Es el único bloque grande de color de la pantalla, así que el estudiante sabe en qué unidad está sin leer. El enlace a la Guía se convierte en el icono de libro a la derecha, tras un divisor finísimo, así que sigue a un toque.

Regla para reutilizar: cuando una pantalla tiene un encabezado al que pertenece todo lo de abajo, dale un bloque de color, no una línea de texto.

Corrección 3: convierte la lista en un camino

Antes

Después

Doce filas en una lista, cada una con un icono, un nombre y XP y porcentaje a la derecha: tres con checks morados y 100%, Pedir bebidas con un icono de play y 0%, luego ocho con candados grises y 0%, desde Platos principales hasta Repaso de la unidad. Frente a un camino sinuoso de cinco círculos robustos: dos nodos morados con check, un nodo morado con estrella y un anillo amarillo, y dos nodos grises bloqueados.

Esta es la corrección que sostiene toda la pantalla. En el borrador, cada lección es una fila de 42 px con un nombre de 11 px y dos números de 9 px. Doce filas del mismo tamaño dicen que doce cosas son igual de importantes, y el estudiante tiene que encontrar la que no está hecha.

El camino lo dice solo con forma y color. Los nodos terminados son morados con un check, el nodo actual es morado con una estrella y un anillo de progreso, y los bloqueados son grises con un candado. Cada nodo mide 64 px con un borde inferior 5 px más oscuro, y el anillo del actual mide 92 px, con tres de doce lecciones rellenas en amarillo. Puedes leer el estado de la unidad desde el otro lado de la habitación, sin texto.

No se pierde nada. Los nombres se abren desde los nodos, el XP se muestra en la burbuja de la lección actual, y el 100% se volvió el check mientras que el 0% se volvió el candado. Las demás lecciones están más adelante en el camino. Duolingo hizo de este camino el estándar de las apps de aprendizaje, y aquí funciona por la misma razón: el progreso es algo por lo que caminas, no algo que lees.

Regla para reutilizar: cuando los elementos tienen un estado y un orden, muestra el estado con forma y color y el orden con la posición.

Corrección 4: pon una burbuja Start en el nodo actual

Antes

Después

Un pequeño botón morado que dice CONTINUE en mayúsculas abajo a la derecha, bajo la lista. Frente a una burbuja blanca con borde finísimo que dice Pedir bebidas y Start, 12 XP, con un puntero hacia abajo al nodo morado con estrella dentro de su anillo amarillo.

En el borrador, el siguiente paso es un botón CONTINUE de 91 por 30 bajo doce filas. Está lejos de la lección que inicia, así que el estudiante tiene que conectar las dos cosas. Además va en mayúsculas, igual que el botón UPGRADE de arriba, así que no parece la acción principal.

La corrección pone la acción sobre aquello en lo que actúa. Una burbuja sobre el nodo actual nombra la lección, "Pedir bebidas", y dice "Start · 12 XP". Tiene una línea finísima de 2 px y ninguna sombra, así que se lee como parte del camino. Solo se nombra la lección actual, así que solo hay una cosa que tocar.

Regla para reutilizar: pon la acción principal junto al objeto sobre el que actúa, y nombra el objeto en la acción.

Las correcciones menores

• Cada función se queda. El desplegable de español es la bandera. El título Mi curso es la pestaña Learn. Liga Plata y la pestaña Liga pasaron a la pestaña Perfil. La oferta se abre desde la etiqueta PLUS.
• Un solo margen. El borrador tiene 14 px a la izquierda y 12 px a la derecha. La pantalla corregida usa 20 a ambos lados, con 16 entre bloques.
• Un solo par de acentos. El morado (#7C3AED) es el color de acción en el banner y los nodos. El sol (#FFC53D) es solo el anillo de progreso y la etiqueta PLUS.
• Escala tipográfica. El borrador va de 9 a 15 px. La pantalla corregida va más grande, con contadores de 16 px y un título de unidad de 20 px.
• Una barra de pestañas plana. Cinco pestañas con iconos rellenos y de contorno mezclados pasan a cuatro iconos de un solo estilo, sin etiquetas.
• Sin sombras. La profundidad viene de los bordes inferiores más oscuros de 4 y 5 px, no de sombras proyectadas.

Audita tu propia pantalla de aprendizaje

Consigue el archivo de Figma

El archivo gratis tiene el borrador junior, la pantalla corregida y cada parte como componente.

Archivo gratis de Figma

Rediseño de una pantalla de aprendizaje de idiomas, antes y después

Ambas pantallas y cada parte como componente de Figma. Gratis, solo lectura, duplícalo a tus borradores.

Abrir en Figma

FAQ

¿Cómo se debe diseñar la pantalla de inicio de una app de idiomas?

Muestra unos pocos contadores simples arriba, un banner de unidad sólido, un camino de nodos de lección donde el estado se indica con color y forma, y una burbuja Start en la lección actual. El estudiante debe ver dónde está y qué tocar sin leer.

¿Por qué las apps de idiomas usan un camino en lugar de una lista?

Un camino muestra estado y orden de un vistazo. Las lecciones terminadas, la actual y las bloqueadas se ven distintas, así que el estudiante no tiene que leer doce filas para encontrar la siguiente.

¿Qué estadísticas debe mostrar una app de idiomas en la pantalla de inicio?

Las que un estudiante revisa cada día: la racha, las gemas o puntos y los corazones. El nivel, el XP y la liga pueden ir en la pestaña de perfil.

¿Dónde debe ir la oferta de suscripción en una app de aprendizaje?

Como una pequeña etiqueta en la fila de estadísticas que abre la oferta. Un banner grande sobre las lecciones compite con la lección por la atención.

¿De qué tamaño debe ser un nodo de lección?

Unos 64 px, que es un objetivo cómodo para el pulgar. La pantalla corregida usa nodos de 64 px con un borde inferior 5 px más oscuro y un anillo de 92 px en el actual.

Fuentes

• Ambas pantallas son nuestras, diseñadas y medidas en Figma. La app, Hola, y todos sus datos son inventados. Los números coinciden en ambas pantallas: la racha de 41 días, 320 gemas, 4 corazones y la lección 4 de 12, Pedir bebidas, con 12 XP.
• Patrón estudiado: el camino de aprendizaje de Duolingo, y Babbel.
• Los iconos son de Phosphor (MIT). El logotipo es Baloo 2 ExtraBold. No hay fotos.
• Publicado por primera vez como carrusel en App Brainy.