Design d'application d'apprentissage des langues : refonte d'un écran d'accueil, avant et après

Une appli de langues a un seul travail sur son écran d'accueil : amener l'apprenant dans la leçon du jour. Le premier jet ci-dessous contient tout ce dont un apprenant a besoin, mais on dirait un bulletin scolaire. Les stats tiennent en une phrase grise, l'unité est une pile de douze lignes identiques avec des pourcentages, une bannière criarde vend un abonnement, et la suite logique est un petit CONTINUE tout en bas.

La correction garde chaque fonction et change l'apparence et la place des choses. Les stats deviennent quatre compteurs simples, l'unité devient une bannière pleine, la liste devient un chemin de nœuds, et une bulle dit Start.

L'écran entier, avant et après

Brouillon junior

Corrigé

À gauche, tout a le même poids. La ligne de stats en 9 px, la bannière jaune criarde, les douze lignes et le bouton CONTINUE réclament tous l'attention en même temps, et aucun ne dit « touche-moi d'abord ».

À droite, l'écran se lit de haut en bas dans l'ordre où pense l'apprenant : où j'en suis, quelle est cette unité, où suis-je dedans, qu'est-ce que je touche. Il y a un chemin, une bulle et une action.

Ce qui a changé, mesuré

Correction 1 : garder les stats sur une ligne simple

Avant

Après

L'en-tête du brouillon : Hola Mon cours avec Cours d'espagnol, une série de 41 jours en dessous et un menu déroulant Espagnol, puis une barre grise indiquant Niveau A2 62,5 %, XP 1240, Cœurs 4/5, Gemmes 320, Ligue Argent, puis une bannière jaune indiquant GO PLUS NOW avec 50 % de réduction sur votre premier mois et un bouton UPGRADE. Contre une seule rangée : un drapeau espagnol, une flamme avec 41, une gemme avec 320, un cœur avec 4 et une petite étiquette jaune PLUS.

Le brouillon écrit ses stats en toutes lettres dans une phrase : « Niveau A2 62,5 % | XP 1240 | Cœurs 4/5 | Gemmes 320 | Ligue Argent ». C'est du 9 px, c'est gris, et il faut le lire comme du texte. Un apprenant qui ouvre l'appli tous les jours n'a pas envie de lire ses propres chiffres, il veut les survoler.

La correction donne à chaque chiffre une icône et une couleur : une flamme pour la série de 41 jours, une gemme pour 320, un cœur pour 4. Ils tiennent sur une seule rangée en gras 16 px, donc l'œil les capte d'un seul coup. Le menu déroulant Espagnol devient le drapeau, qui ouvre la liste des langues. La bannière « GO PLUS NOW!!! », avec ses 50 % et son bouton UPGRADE, se réduit à une petite étiquette PLUS au bout de la rangée, et l'offre s'ouvre depuis celle-ci.

Niveau, XP et Ligue Argent sont passés dans l'onglet Profil. Ils comptent, mais pas à chaque ouverture de l'appli.

Règle à réutiliser : affichez en icônes les chiffres qu'un apprenant consulte chaque jour, et déplacez le reste à un tap de distance.

Correction 2 : donner à l'unité une bannière pleine

Avant

Après

Une ligne de texte avec Unité 3 en gras et Commander à manger en gris, avec un lien Guide souligné à droite. Contre une bannière violette pleine avec SECTION 1, UNITÉ 3 en petites capitales, Commander à manger en blanc 20 px, un séparateur fin et une icône de livre, avec un bord plus sombre en bas.

Dans le brouillon, l'unité est une étiquette. « Unité 3 » et « Commander à manger » tiennent sur une ligne avec un lien texte, et rien ne dit que c'est le titre auquel tout ce qui suit se rattache.

La correction en fait une bannière : 350 sur 76, rayon 12, violet de la marque, un titre en 20 px et un bord inférieur plus sombre de 4 px qui donne l'impression qu'on peut appuyer dessus. C'est le seul grand bloc de couleur de l'écran, donc l'apprenant sait dans quelle unité il est sans lire. Le lien Guide devient l'icône de livre à droite, derrière un séparateur fin, donc il reste à un tap.

Règle à réutiliser : quand un écran a un titre auquel tout ce qui suit appartient, donnez-lui un bloc de couleur, pas une ligne de texte.

Correction 3 : transformer la liste en chemin

Avant

Après

Douze lignes dans une liste, chacune avec une icône, un nom et XP et pourcentage à droite : trois avec des coches violettes et 100 %, Commander des boissons avec une icône lecture et 0 %, puis huit avec des cadenas gris et 0 %, de Plats principaux à Révision de l'unité. Contre un chemin sinueux de cinq gros cercles : deux nœuds violets cochés, un nœud étoile violet avec un anneau jaune, et deux nœuds gris verrouillés.

C'est la correction qui porte tout l'écran. Dans le brouillon, chaque leçon est une ligne de 42 px avec un nom en 11 px et deux chiffres en 9 px. Douze lignes de même taille disent que douze choses sont aussi importantes les unes que les autres, et l'apprenant doit chercher celle qui n'est pas finie.

Le chemin le dit par la seule forme et la couleur. Les nœuds terminés sont violets avec une coche, le nœud en cours est violet avec une étoile et un anneau de progression, et les verrouillés sont gris avec un cadenas. Chaque nœud fait 64 px avec un bord inférieur plus sombre de 5 px, et l'anneau autour du nœud en cours fait 92 px, trois leçons sur douze remplies en jaune. On lit l'état de l'unité depuis l'autre bout de la pièce, sans texte.

Rien n'est perdu. Les noms s'ouvrent depuis les nœuds, l'XP est affichée dans la bulle de la leçon en cours, et le 100 % est devenu la coche tandis que le 0 % est devenu le cadenas. Les autres leçons sont plus loin sur le chemin. Duolingo a fait de ce parcours le standard des applis d'apprentissage, et il marche ici pour la même raison : la progression est quelque chose qu'on parcourt, pas quelque chose qu'on lit.

Règle à réutiliser : quand des éléments ont un état et un ordre, montrez l'état par la forme et la couleur, et l'ordre par la position.

Correction 4 : poser une bulle Start sur le nœud en cours

Avant

Après

Un petit bouton violet indiquant CONTINUE en capitales en bas à droite, sous la liste. Contre une bulle blanche à fine bordure indiquant Commander des boissons et Start, 12 XP, avec une pointe vers le nœud étoile violet dans son anneau jaune.

Dans le brouillon, l'étape suivante est un bouton CONTINUE de 91 sur 30 sous douze lignes. Il est loin de la leçon qu'il lance, donc l'apprenant doit relier les deux. Il est aussi en capitales, comme le bouton UPGRADE plus haut, donc il n'a pas l'air de l'action principale.

La correction place l'action sur la chose sur laquelle elle agit. Une bulle au-dessus du nœud en cours nomme la leçon, « Commander des boissons », et dit « Start · 12 XP ». Elle a un filet de 2 px et aucune ombre, donc elle fait partie du chemin. Seule la leçon en cours est nommée, donc il n'y a qu'une chose à toucher.

Règle à réutiliser : mettez l'action principale à côté de l'objet sur lequel elle agit, et nommez l'objet dans l'action.

Les petites corrections

• Chaque fonction reste. Le menu déroulant Espagnol est le drapeau. Le titre Mon cours est l'onglet Apprendre. Ligue Argent et l'onglet Ligue sont passés dans l'onglet Profil. L'offre s'ouvre depuis l'étiquette PLUS.
• Une seule marge. Le brouillon a 14 px à gauche et 12 px à droite. L'écran corrigé utilise 20 des deux côtés, avec 16 entre les blocs.
• Une seule paire d'accents. Le violet (#7C3AED) est la couleur d'action sur la bannière et les nœuds. Le soleil (#FFC53D) sert uniquement pour l'anneau de progression et l'étiquette PLUS.
• Échelle typographique. Le brouillon va de 9 à 15 px. L'écran corrigé voit plus grand, avec des compteurs en 16 px et un titre d'unité en 20 px.
• Une barre d'onglets à plat. Cinq onglets aux icônes pleines et contour mélangées deviennent quatre icônes du même style, sans libellés.
• Pas d'ombres. La profondeur vient des bords inférieurs plus sombres de 4 et 5 px, pas d'ombres portées.

Auditez votre propre écran d'apprentissage

Récupérez le fichier Figma

Le fichier gratuit contient le brouillon junior, l'écran corrigé et chaque élément sous forme de composant.

Fichier Figma gratuit

Refonte d'un écran d'apprentissage des langues, avant et après

Les deux écrans et chaque élément en composant Figma. Gratuit, en lecture seule, dupliquez-le dans vos brouillons.

Ouvrir dans Figma

FAQ

Comment concevoir l'écran d'accueil d'une appli d'apprentissage des langues ?

Affichez quelques compteurs simples en haut, une bannière d'unité pleine, un chemin de nœuds de leçons où l'état se lit par la couleur et la forme, et une seule bulle Start sur la leçon en cours. L'apprenant doit voir où il en est et quoi toucher sans lire.

Pourquoi les applis de langues utilisent-elles un chemin plutôt qu'une liste ?

Un chemin montre l'état et l'ordre d'un coup d'œil. Les leçons terminées, en cours et verrouillées ont chacune un aspect différent, donc l'apprenant n'a pas à lire douze lignes pour trouver la suivante.

Quelles stats une appli de langues doit-elle montrer sur l'écran d'accueil ?

Celles qu'un apprenant consulte chaque jour : la série, les gemmes ou les points et les cœurs. Le niveau, l'XP et la ligue peuvent se trouver dans l'onglet profil.

Où placer l'offre d'abonnement dans une appli d'apprentissage ?

Sous forme de petite étiquette dans la rangée de stats qui ouvre l'offre. Une grande bannière au-dessus des leçons concurrence la leçon pour l'attention.

Quelle taille doit avoir un nœud de leçon ?

Environ 64 px, ce qui est une cible confortable pour le pouce. L'écran corrigé utilise des nœuds de 64 px avec un bord inférieur plus sombre de 5 px et un anneau de 92 px sur le nœud en cours.

Sources

• Les deux écrans sont les nôtres, conçus et mesurés dans Figma. L'appli, Hola, et toutes ses données sont inventées. Les chiffres concordent sur les deux écrans : la série de 41 jours, 320 gemmes, 4 cœurs, et la leçon 4 sur 12, Commander des boissons, à 12 XP.
• Modèle étudié : le parcours d'apprentissage de Duolingo, et Babbel.
• Les icônes viennent de Phosphor (MIT). Le logotype est en Baloo 2 ExtraBold. Il n'y a aucune photo.
• D'abord publié sous forme de carrousel sur App Brainy.