Typography

Babbel verwendet in der aktuellen iOS-App nicht die Systemschrift. Stattdessen wird hauptsächlich die Sans Serif Font »Milliard« verwendet. Für besondere Hervorhebungen kommt die Serifenschrift »Leitura News« hinzu.

Durch die Wahl einer eigenen Schriftart bekommt das Interface einen eigenen Look, der sich positiv abheben kann. Bei der Gestaltung einer macOS-App ist dies jedoch weniger sinnvoll. Fenster sind häufig nicht im Fullscreen geöffnet, sondern überlagern sich mit anderen. Das Betriebssystem nimmt einen größeren Einfluss auf die Wahrnehmung einer macOS-App als auf die einer iOS-App. So kann es passieren, dass Schriften nicht zusammenpassen, sich beißen oder ein Overload verschiedener Schriftarten vorhanden ist.

Aus diesem Grund habe ich mich dafür entschieden, die Systemschriften zu verwenden; jedoch mit einem kleine Twist. Wörter in der eigenen Sprache verwenden die SF Pro, Wörter in der zu lernenden Fremdsprache die New York.

Typography

Navigation

Die Navigation in der iOS App funktioniert über die Tab-Bar. Die verschiedenen Tabs verbergen jedoch eine Menge weiterer Inhalte. Diese hab ich in der klassischen macOS-Sidebar hervorgeholt, neu strukturiert und in zwei Bereiche unterteilt: »My Learning Path« und »Explore«.

Übergreifend kann die Lernsprache auf macOS nun direkt oben in der Sidebar verändert werden. Der Drill-down in den Einstellungen wird so vermieden und ist für alle praktisch, die mehrere Sprachen gleichzeitig lernen.

Anstelle von Tools findet man in der Toolbar Vor- und Zurück-Buttons wie in Safari. Diese Art der Navigation ergibt im diesem Fall Sinn, da es vorrangig um den Content geht und die klassische Tools nicht benötigt werden.

Dashboard

Today

Im Tab »Today« bekommt man sowohl auf iOS als auch auf macOS einen Schnellzugriff auf relevante Funktionen wie den Start der nächsten Lektion oder das Wiederholen von Vokabeln.

Zudem können Fortschritt und Aktivität verfolgen werden. Dank des größeren Screens ist eine höhere Informationsdichte möglich, wodurch diese Informationen aus dem iOS Drill-down hervorgeholt werden können.

Vokabelliste

Vocabulary

Das bereits gelernte Vokabular wird in einer Liste angezeigt. Diese hat eine maximale Breite, um die Lesbarkeit bzw. die Zuordnung der Elemente innerhalb einer Spalte zu gewährleisten.

Suchfunktion

Eine Funktion die es auf iOS nicht gibt: die Suche.

Sie ist auf macOS einheitlich rechts oben in der Toolbar platziert und durchsucht alle Bereiche der App. Die Suchergebnisse werden jedoch nach dem aktuellen Bereich sortiert, um die Relevanz zu erhöhen. So werden während man sich beispielsweise im Tab »Vocabulary« befindet, zuerst Vokabeln passend zum Suchbegriff vorgeschlagen.

Kursübersicht

Course Overview

Die Kursübersicht ist in zwei Bereiche unterteilt: »Courses by level« und »Courses by theme«. Bei der Auswahl eines Levels gelangt der User über einen Drill-down auf eine Unterseite mit den zugehörigen Kursen.

Beginner (A2)

Je nachdem, ob man mit diesem Level schon begonnen hat, wird man mit Button zu »Start« oder »Continue« aufgefordert. Durch die visuelle Kontinuität (▶ + orangene Farbe) lässt sich erkennen, an welcher Stelle der Kurs fortgesetzt werden würde.

Innerhalb eines ausgewählten Kurses werden die Lektionen angezeigt sowie ob diese abgeschlossen, als nächstes an der Reihe oder noch sind erledigt sind. Durch einen Doppelklick kann eine Lektion gestartet werden.

Beispiel-Lektion

Lektionen öffnen sich, macOS-typisch, in einem neuen Fenster. Jede Lektion hat verschiedene Aufgabentypen, zu denen jeweils mehrere Aufgaben gestellt werden.