Ein E-Learning-Kurs ohne Schaltflächen ist kaum vorstellbar. Sie dienen zur Navigation (z. B. „Weiter“ und „Zurück“), zum Aufrufen weiterer Informationen (z. B. bei einer Click-&-Reveal-Interaktion) zum Auslösen von Aktionen (z. B. Absenden eines Formulars oder Start eines Videos) usw. Da Schaltflächen so allgegenwärtig sind, möchten wir heute ein paar grundlegende Gedanken zur Gestaltung von Schaltflächen besprechen.

Vertraute Formatierung

Wenn man einem Element nicht ansieht, dass es eine Schaltfläche ist, verfehlt es seinen Sinn. Schaltflächen müssen klickbar aussehen. Dabei hilft es enorm, sie so zu formatieren, wie Schaltflächen erfahrungsgemäß aussehen. Am häufigsten sind sie rechteckig, sei es mit spitzen oder abgerundeten Ecken oder mit ganz runden Enden. Manchmal haben sie noch einen Schlagschatten, der ihnen optische Tiefe verleiht. Oft haben sie eine Farbfüllung, aber farbige Umrisse sind auch nicht selten.

Wichtig ist, die Schaltflächen optisch vom Rest des Kurses abzuheben, damit sie sofort ins Auge fallen und als klickbare Elemente erkannt werden.

Hier ein paar Beispiele für geläufige Button-Formatierungen:

	Gefüllt mit Schatten	Umriss mit Schatten	Gefüllt ohne Schatten	Umriss ohne Schatten
Spitze Ecken
Abgerundete Ecken
Runde Enden

Heißt das, man sollte keine anders geformten Schaltflächen in seine Kurse einbauen? Nicht direkt. Es bedeutet nur, dass Ihnen diese Standardformen das Leben leichter machen. In manchen Fällen können andere Formen aber durchaus effektiv eingesetzt werden. Wenn Sie z. B. einen E-Learning-Kurs über Tiere erstellen, könnten Sie Schaltflächen in Form eines Pfotenabdrucks einbauen. Wenn Sie das tun, sollten Sie jedoch darauf achten, die anderen Hinweise zur Gestaltung umso gründlicher zu beachten, damit die Buttons auch als klickbar wahrgenommen werden: eine kontrastierende Farbe und ein Schlagschatten helfen hier auf jeden Fall.

Kurze und eindeutige Beschriftung

Schaltflächen tragen oft eine Beschriftung, damit die Nutzer wissen, was passiert, wenn sie darauf klicken. Die obersten Gebote für diese Beschriftung sind „Unmissverständlichkeit“ und „Prägnanz“. Sehen wir uns das an einem Beispiel an:

Prägnant	Umständlich

Beide Schaltflächen kommunizieren klar, was passiert, wenn man auf sie klickt, aber die linke ist prägnanter formuliert. Die Kursteilnehmer können also schneller und leichter erfassen, wozu sie da ist.

Symbole mit Wiedererkennungswert

Noch schneller erfassen lässt sich der Zweck einer Schaltfläche, wenn sie ein Symbol in der Beschriftung enthält. Zum Beispiel ein Pfeil nach unten für eine Download-Schaltfläche.

Auch hier ein Beispiel:

Nur Text	Text mit Symbol

An der Schaltfläche links ist nichts auszusetzen, aber finden Sie nicht auch, dass das Symbol in der rechten Variante noch klarer kommuniziert, wozu die Schaltfläche da ist?

Manche Designer bevorzugen Buttons, die gar keinen Text, sondern nur Symbole zeigen. Wenn Sie auch zu dieser Gruppe gehören, achten Sie darauf, dass Sie unmissverständliche Symbole wählen. Sonst riskieren Sie, die Kursteilnehmer unnötig zu verwirren.

Und man verschätzt sich hier leichter, als man meinen sollte. Ein Symbol, das Ihnen unmittelbar einleuchtet, kann Anderen fremd sein oder sie zumindest im Unklaren lassen. Sehen wir uns den nach unten zeigenden Pfeil noch einmal an:

Neben der Wort „Download“ war der Pfeil sehr eindeutig. Aber ohne jeglichen Text sieht das schon anders aus. Dieser einsame Pfeil könnte für „Herunterladen“ stehen, aber auch für „Zum Ende der Seite springen“ oder „Zum nächsten Abschnitt springen“. Text neben einem Symbol ist immer die sicherere Wahl. Und wenn Sie aus Ästhetik- oder Platzgründen keinen Text einbauen wollen, ziehen Sie zumindest einen Tooltip mit Text in Erwägung, der bei Mausberührung angezeigt wird.

Feedback bei Interaktion

Wenn Sie auf einer Internetseite den Mauszeiger auf einen Link oder einen Button bewegen, wird der Pfeil des Zeigers zu einer Hand mit ausgestrecktem Zeigefinger. Das ist ein dezenter Hinweis darauf, dass das Element klickbar ist. Andere Möglichkeiten, diesen Hinweis zu geben, sind Farb- oder Formwechsel, eine kleine Animation oder das Auftauchen eines weiteren Symbols, z. B. eines Häkchens.

Wenn Sie Storyline 360 als Autorentool verwenden, können Sie diese Hinweise mit Zuständen einbauen. Wie Sie den Zustand eines Elements verändern, wenn der Kursteilnehmer darauf klickt, darauf zeigt oder es bewegt, erfahren Sie in diesem Blogartikel (auf Englisch).

Konsistenz

Wir Menschen sind Gewohnheitstiere. Auch in einem E-Learning-Kurs wollen wir uns am liebsten in vertrauten Umgebungen bewegen. Deshalb sollte Ihr Kurs so einheitlich wie möglich gestaltet sein. Das gilt nicht zuletzt auch für die Schaltflächen. Verwenden Sie im gesamten Kurs dieselben Farben, Formen, Schriftarten und Symbolstile.

Auch sollten sich Schaltflächen mit derselben Funktion (z. B. „Weiter“ oder „Zurück“) immer an derselben Position befinden. So wissen die Lernenden, immer wohin sie gucken müssen und worauf sie klicken können.

Sie können sich das Leben in diesem Aspekt einfacher machen, wenn Sie gleich zu Beginn Ihrer Entwicklungsarbeit Design-Standards für Ihre Schaltflächen festlegen.

Fazit

Halten wir fest: Kursteilnehmer sollten nicht nach Schaltflächen suchen oder ihre Funktion erraten müssen. Wenn Ihre Buttons leicht zu finden sind, unmissverständlich beschriftet sind und so reagieren, wie die Teilnehmer es aus anderen Kontexten gewohnt sind, unterstützen sie das Gesamtdesign und die Effektivität Ihres Kurses, anstatt davon abzulenken.

Sie möchten noch mehr Tipps für die Gestaltung effektiver und benutzerfreundlicher E-Learning-Kurse? Die finden Sie hier:

• Was sind UX- und UI-Design und was bedeuten sie für E-Learning?
• UI-Design: 3 Dinge, die E-Learning-Designer wissen müssen
• Wie Sie eine bessere Lernerfahrung gestalten

Wenn Ihnen dieser Beitrag gefallen hat, abonnieren Sie doch unseren wöchentlichen Blognewsletter.