Design von Sprachlern-Apps: Ein Redesign des Startbildschirms, Vorher und Nachher

Eine Sprach-App hat auf ihrem Startbildschirm genau eine Aufgabe: die Lernenden in die heutige Lektion bringen. Der erste Entwurf unten hat alles, was ein Lernender braucht, liest sich aber wie ein Schulzeugnis. Die Stats sind ein grauer Satz, die Unit besteht aus zwölf gleichen Zeilen mit Prozentwerten, ein lautes Banner verkauft ein Abo, und der nächste Schritt ist ein kleines WEITER ganz unten.

Der Fix behält jede Funktion und ändert, wie sie aussieht und wo sie sitzt. Aus den Stats werden vier schlichte Zähler, aus der Unit ein solides Banner, aus der Liste ein Weg aus Knoten, und eine Blase sagt Start.

Der ganze Screen, vorher und nachher

Junior-Entwurf

Repariert

Links hat alles das gleiche Gewicht. Die 9-px-Stats-Zeile, das laute gelbe Banner, die zwölf Zeilen und der WEITER-Button verlangen alle gleichzeitig Aufmerksamkeit, und keiner sagt „tipp mich zuerst an“.

Rechts liest sich der Screen von oben nach unten in der Reihenfolge, in der Lernende denken: Wie läuft es bei mir, welche Unit ist das, wo bin ich darin, was tippe ich an. Es gibt einen Weg, eine Blase und eine Aktion.

Was sich geändert hat, gemessen

Fix 1: die Stats auf eine schlichte Zeile bringen

Vorher

Nachher

Der Header des Entwurfs: Hola Mein Kurs mit Spanischkurs, darunter 41 Tage Serie und ein Spanisch-Dropdown, dann eine graue Leiste mit Level A2 62,5%, XP 1240, Herzen 4/5, Edelsteine 320, Liga Silber, dann ein gelbes Banner mit JETZT PLUS HOLEN, 50% Rabatt auf den ersten Monat und einem UPGRADE-Button. Dagegen eine Zeile: eine spanische Flagge, eine Flamme mit 41, ein Edelstein mit 320, ein Herz mit 4 und ein kleines gelbes PLUS-Tag.

Der Entwurf buchstabiert seine Stats als Satz aus: „Level A2 62,5% | XP 1240 | Herzen 4/5 | Edelsteine 320 | Liga Silber“. Er ist 9 px klein, grau und muss wie Text gelesen werden. Wer die App jeden Tag öffnet, will seine eigenen Zahlen nicht lesen, sondern überfliegen.

Der Fix gibt jeder Zahl ein Icon und eine Farbe: eine Flamme für die 41 Tage Serie, einen Edelstein für 320, ein Herz für 4. Sie sitzen in einer Zeile in 16 px fett, sodass das Auge sie in einem Durchgang erfasst. Aus dem Spanisch-Dropdown wird die Flagge, die die Sprachliste öffnet. Das Banner „JETZT PLUS HOLEN!!!“ mit seinen 50% Rabatt und dem UPGRADE-Button schrumpft zu einem kleinen PLUS-Tag am Ende der Zeile, und das Angebot öffnet sich darüber.

Level, XP und Liga Silber sind in den Profil-Tab gewandert. Sie sind wichtig, aber nicht bei jedem Öffnen der App.

Regel zum Mitnehmen: Zeige die Zahlen, die Lernende täglich prüfen, als Icons und verschiebe den Rest einen Tap weiter weg.

Fix 2: der Unit ein solides Banner geben

Vorher

Nachher

Eine Textzeile mit Unit 3 in Fett und Essen bestellen in Grau, mit einem unterstrichenen Guide-Link rechts. Dagegen ein solides violettes Banner mit ABSCHNITT 1, UNIT 3 in kleinen Versalien, Essen bestellen in 20 px Weiß, einer haarfeinen Trennlinie und einem Buch-Symbol, mit einem dunkleren Rand am unteren Ende.

Im Entwurf ist die Unit ein Label. „Unit 3“ und „Essen bestellen“ stehen mit einem Textlink in einer Zeile, und nichts sagt, dass dies die Überschrift ist, zu der alles darunter gehört.

Der Fix macht daraus ein Banner: 350 mal 76, Radius 12, Markenviolett, ein Titel in 20 px und ein 4 px dunklerer unterer Rand, der es drückbar aussehen lässt. Es ist der eine große Farbblock auf dem Screen, sodass Lernende wissen, in welcher Unit sie sind, ohne zu lesen. Der Guide-Link wird zum Buch-Symbol rechts hinter einer haarfeinen Trennlinie, bleibt also einen Tap entfernt.

Regel zum Mitnehmen: Wenn ein Screen eine Überschrift hat, zu der alles darunter gehört, gib ihr einen Farbblock, keine Textzeile.

Fix 3: die Liste in einen Weg verwandeln

Vorher

Nachher

Zwölf Zeilen in einer Liste, jede mit Icon, Name sowie XP und Prozent rechts: drei mit violetten Häkchen und 100%, Getränke bestellen mit Play-Symbol und 0%, dann acht mit grauen Schlössern und 0%, von Hauptgerichte bis Unit-Wiederholung. Dagegen ein gewundener Weg aus fünf dicken Kreisen: zwei violette abgehakte Knoten, ein violetter Sternknoten mit gelbem Ring und zwei graue gesperrte Knoten.

Dieser Fix trägt den ganzen Screen. Im Entwurf ist jede Lektion eine 42-px-Zeile mit 11-px-Namen und zwei 9-px-Zahlen. Zwölf gleich große Zeilen sagen, dass zwölf Dinge gleich wichtig sind, und Lernende müssen die eine finden, die noch nicht erledigt ist.

Der Weg sagt es allein mit Form und Farbe. Abgeschlossene Knoten sind violett mit Häkchen, der aktuelle Knoten ist violett mit Stern und Fortschrittsring, und die gesperrten sind grau mit Schloss. Jeder Knoten ist 64 px groß mit 5 px dunklerem unterem Rand, und der Ring um den aktuellen misst 92 px, drei von zwölf Lektionen in Gelb gefüllt. Den Zustand der Unit erkennst du quer durch den Raum, ganz ohne Text.

Nichts geht verloren. Die Namen öffnen sich über die Knoten, die XP stehen in der Blase der aktuellen Lektion, und aus den 100% wurde das Häkchen, aus den 0% das Schloss. Die anderen Lektionen liegen weiter unten auf dem Weg. Duolingo hat diesen Pfad zum Standard für Lern-Apps gemacht, und er funktioniert hier aus demselben Grund: Fortschritt ist etwas, an dem man entlanggeht, nicht etwas, das man liest.

Regel zum Mitnehmen: Wenn Elemente einen Zustand und eine Reihenfolge haben, zeige den Zustand mit Form und Farbe und die Reihenfolge mit der Position.

Fix 4: eine Start-Blase auf den aktuellen Knoten setzen

Vorher

Nachher

Ein kleiner violetter Button mit WEITER in Versalien unten rechts, unter der Liste. Dagegen eine weiße Blase mit haarfeinem Rand mit Getränke bestellen und Start, 12 XP, mit einem Zeiger nach unten auf den violetten Sternknoten in seinem gelben Ring.

Im Entwurf ist der nächste Schritt ein 91 mal 30 großer WEITER-Button unter zwölf Zeilen. Er ist weit von der Lektion entfernt, die er startet, also müssen Lernende die beiden selbst verbinden. Er steht außerdem in Versalien, genau wie der UPGRADE-Button darüber, und sieht deshalb nicht wie die Hauptaktion aus.

Der Fix setzt die Aktion auf das Ding, auf das sie wirkt. Eine Blase über dem aktuellen Knoten nennt die Lektion, „Getränke bestellen“, und sagt „Start · 12 XP“. Sie hat eine 2-px-Haarlinie und keinen Schatten, wirkt also wie ein Teil des Wegs. Nur die aktuelle Lektion trägt einen Namen, also gibt es nur eine Sache zum Antippen.

Regel zum Mitnehmen: Setze die Hauptaktion neben das Objekt, auf das sie wirkt, und nenne das Objekt in der Aktion.

Die kleineren Fixes

• Jede Funktion bleibt. Das Spanisch-Dropdown ist die Flagge. Der Titel Mein Kurs ist der Lernen-Tab. Liga Silber und der Liga-Tab sind in den Profil-Tab gewandert. Das Angebot öffnet sich über das PLUS-Tag.
• Ein Rand. Der Entwurf hat 14 px links und 12 px rechts. Der reparierte Screen nutzt 20 auf beiden Seiten, mit 16 zwischen den Blöcken.
• Ein Akzentpaar. Violett (#7C3AED) ist die Aktionsfarbe auf Banner und Knoten. Sonnengelb (#FFC53D) ist nur der Fortschrittsring und das PLUS-Tag.
• Typoskala. Der Entwurf läuft von 9 bis 15 px. Der reparierte Screen läuft größer, mit 16-px-Zählern und einem 20-px-Unit-Titel.
• Eine flache Tab-Leiste. Fünf Tabs mit gemischten gefüllten und Outline-Icons werden zu vier Icons in einem Stil, ohne Beschriftung.
• Keine Schatten. Die Tiefe kommt von den dunkleren 4- und 5-px-Rändern unten, nicht von Schlagschatten.

Prüfe deinen eigenen Lern-Screen

Hol dir die Figma-Datei

Die kostenlose Datei enthält den Junior-Entwurf, den reparierten Screen und jedes Teil als Komponente.

Kostenlose Figma-Datei

Redesign eines Sprachlern-Screens, vorher und nachher

Beide Screens und jedes Teil als Figma-Komponente. Kostenlos, nur Ansicht, dupliziere sie in deine Entwürfe.

In Figma öffnen

FAQ

Wie sollte der Startbildschirm einer Sprachlern-App gestaltet sein?

Zeige oben wenige schlichte Zähler, ein solides Unit-Banner, einen Weg aus Lektionsknoten, bei dem der Zustand durch Farbe und Form gezeigt wird, und eine Start-Blase auf der aktuellen Lektion. Lernende sollten sehen, wo sie stehen und was sie antippen, ohne zu lesen.

Warum nutzen Sprach-Apps einen Pfad statt einer Liste?

Ein Pfad zeigt Zustand und Reihenfolge auf einen Blick. Abgeschlossene, aktuelle und gesperrte Lektionen sehen unterschiedlich aus, also müssen Lernende nicht zwölf Zeilen lesen, um die nächste zu finden.

Welche Stats sollte eine Sprach-App auf dem Startbildschirm zeigen?

Die, die Lernende jeden Tag prüfen: die Serie, die Edelsteine oder Punkte und die Herzen. Level, XP und Liga können im Profil-Tab liegen.

Wohin gehört das Upgrade-Angebot in einer Lern-App?

Als kleines Tag in der Stats-Zeile, das das Angebot öffnet. Ein großes Banner über den Lektionen konkurriert mit der Lektion um Aufmerksamkeit.

Wie groß sollte ein Lektionsknoten sein?

Etwa 64 px, das ist ein angenehmes Ziel für den Daumen. Der reparierte Screen nutzt 64-px-Knoten mit 5 px dunklerem unterem Rand und einem 92-px-Ring um den aktuellen.

Quellen

• Beide Screens sind unsere eigenen, in Figma gestaltet und vermessen. Die App Hola und alle ihre Daten sind erfunden. Die Zahlen stimmen auf beiden Screens überein: die 41 Tage Serie, 320 Edelsteine, 4 Herzen und Lektion 4 von 12, Getränke bestellen, mit 12 XP.
• Untersuchtes Muster: der Lernpfad von Duolingo und Babbel.
• Die Icons stammen von Phosphor (MIT). Der Schriftzug ist Baloo 2 ExtraBold. Es gibt keine Fotos.
• Zuerst als Karussell auf App Brainy veröffentlicht.