10 Tipps, wie Sie mit gutem Design den Erfolg Ihres E‑Learning steigern
Manchmal könnte man meinen, dass die Erstellung von E‑Learning Kursen einem großen Zaubertrick gleicht: Da müssen didaktische Konzepte erstellt und Inhalte geschrieben werden und anschließend wird auch noch erwartet, dass sie in grafischer Perfektion präsentiert werden. Gar nicht so leicht, vor allem, wenn man bisher wenig Berührungspunkte mit Grafikdesign hatte. In diesem Beitrag finden Sie deshalb die 10 wichtigen Basics der Online-Kurs-Gestaltung, mit denen Ihnen Ihr Zaubertrick ganz sicher gelingen wird.
10 Tipps für die Gestaltung von E‑Learning Kursen
1. Eine klare, visuelle Hierarchie
Es ist kein Zufall, welche Elemente wir auf einem Screen zuerst wahrnehmen und welche Elemente wir als zusammengehörig empfinden – ganz im Gegenteil: Unsere Wahrnehmung folgt klaren Gesetzen, den sogenannten Gestaltgesetzen. Folgend ein Überblick über die fürs E‑Learning wichtigsten Gestaltgesetze und Grundlagen der Wahrnehmung:
Gesetz der Nähe
Elemente, die nah beieinander stehen, werden als zusammengehörig wahrgenommen. Damit ist dieses Gesetz wichtig, wenn es darum geht, einen Zusammenhang zwischen Elementen herzustellen – zum Beispiel zwischen einem Bild und einem Text. Sind die Elemente nicht nah genug beieinander, fällt es uns schwer, den Zusammenhang zu erkennen. Ergo: Es entsteht eine Irritation, die uns einen Inhalt als “anstrengend” oder “schwer zu begreifen” wahrnehmen lässt – das Gegenteil von dem, was Sie mit einem E‑Learning Kurs erreichen wollen.
Achten Sie im Umkehrschluss auf genügend Abstand zwischen den Elementen, die in keinem kausalen Zusammenhang stehen.
Gesetz der Ähnlichkeit
Elemente, die in Stil, Farbe, Form, Größe oder Struktur ähnlich sind, werden ähnliche Eigenschaften und Funktionen zugeschrieben. Für die Gestaltung Ihrer E‑Learning-Kurse bedeutet das zum Beispiel, dass gleiche Funktionen wie Buttons, die zum nächsten Kapitel führen, immer gleich gestaltet sein sollten.
Im Umkehrschluss bedeutet dieses Gesetz aber auch, dass sich Elemente unterschiedlicher Hierarchien ausreichend unterscheiden müssen, um sie auch den verschiedenen Hierarchien zugehörig wahrzunehmen. Vereinfacht ausgedrückt: Die Headlines müssen sich ausreichend von Sublines unterscheiden, um den Lernenden die nötige Orientierung zu geben, wo im Kapitel sie sich befinden.
Gesetz der Geschlossenheit
Das Gesetz der Geschlossenheit beschreibt, dass wir geschlossene Formen als eigenständige Objekte wahrnehmen – auch dann, wenn die Geschlossenheit sogar nur angedeutet wird. Unterbewusst füllen wir die Lücken auf und schließen sozusagen die Form. Hierfür braucht es jedoch entsprechende kognitive Fähigkeiten, die – im Lernkontext – aber vorrangig für das Verstehen und Verarbeiten von neuem Wissen benötigt werden. Achten Sie deshalb darauf, an passenden Stellen Formen vorzugeben oder die Erkennung der Form möglichst leicht zu gestalten – zum Beispiel, indem Sie eine Kombination aus Bild, Text und zwei Buttons so anordnen, dass dabei – würde man alle Elemente mit einem Stift umrahmen – ein sauberes Rechteck entsteht.
Leserichtung
In unserem Kulturkreis haben wir gelernt von links nach rechts zu lesen – entsprechend ist unser Auge auch in jeder anderen Situation bestrebt, sich von links nach rechts zu orientieren. Platzieren Sie in Bild-Text-Kombinationen das Bild deshalb immer links und den Text rechts. Würden Sie das Bild rechts platzieren, würde das Auge zwar zuerst zum Bild fliegen, weil sich Bildinformationen schneller erfassen lassen als Textinformationen, jedoch würden dabei Irritationen entstehen, weil unser Auge sich eigentlich in unserer Lesrichtung von links nach rechts orientieren möchte.
2. Souveräner Umgang mit Weißraum
Weißraum ist die logische Konsequenz aus den eben erklärten Gestaltgesetzen: Als Weißraum wird der Teil eines Layouts bezeichnet, der nicht durch Text, Bilder oder andere grafische Elemente gefüllt ist. Durch Weißräume lassen sich gezielt Blicke lenken, während das Auge in einem zu vollen Layout gar nicht weiß, wohin es zuerst schauen soll. Der Weißraum sorgt dabei auch dafür, dass dem Content mehr Aufmerksamkeit zuteil wird – er wirkt also autoritärer und glaubwürdiger.
Darüber hinaus sorgt ein ausreichender Weißraum für bessere Lesbarkeit und entspannt die Augen. Die Faustregel zum Weißraum besagt, dass etwa die Hälfte des Layouts aus Weißraum bestehen sollte. Im Fall von E‑Learning bedeutet das, dass jede einzelne “Folie” bzw. jeder Screen zu etwa 50% frei von Text und grafischen Elementen sein sollte.
3. Konsistenz auf Basis des Corporate Designs
Egal ob Fließtexte, Überschriften, Button-Formen, Navigation, … gleiche Elemente mit gleichen Funktionen sind im Sinne der leichten Wiedererkennung immer im selben Stil zu gestalten. Gleiches gilt auch für die Verwendung von Grafiken: Wenn Sie also zu einem bestimmten Thema vier bebilderte Beispiele anführen, sollten alle vier Bilder der gleichen Art und im gleichen Stil gehalten sein – zum Beispiel vier Fotos mit ähnlicher Helligkeit oder vier Icons mit selber Strichstärke oder vier Gifs in selber Geschwindigkeit…
Einfacher werden Gestaltungs-Entscheidungen, wenn Sie ihr Corporate Design zugrunde legen. Das bedeutet zwar nicht, dass das Corporate Design in E‑Learning-spezifischen Punkten nicht noch Anpassungen oder Erweiterungen bedarf, jedoch gibt es eine gute Orientierung und – das Wichtigste – garantiert die Wiedererkennung, Glaubwürdigkeit und die Identifikation Ihrer Mitarbeitenden beim Lernen.
Tipp: Knowledgeworker Create ermöglicht Ihnen die Erstellung von Vorlagen, in denen Sie Element-Gruppen definieren können. Auf diese Weise sparen Sie viel Zeit bei der Erstellung der Kurse und wahren gleichzeitig ein konsistentes Erscheinungsbild.
Try it
Knowledgeworker Create 30 Tage kostenfrei testen
DSGVO-konform. Voll responsiv. Barrierefrei. Clevere KI-Integration.
Bauen Sie ganz einfach dynamische, interaktive & moderne Onlinekurse via Drag & Drop. Dank integrierten Aufgaben-, Review- und Übersetzungsmanagement arbeiten Sie kollaborativ und beschleunigen Ihren Kurserstellungsprozess.
4. Einsatz von verschiedenen Medien
Beim E‑Learning gilt: Je mehr Abwechslung, desto besser. Je mehr verschiedene Medien Sie verwenden (auch Text ist ein Medium), desto mehr verschiedene Lerntypen sprechen Sie an. Darüber hinaus lassen sich Bilder, Grafiken und Videos natürlich auch viel schneller erfassen als Text, sodass bebilderte Zusammenhänge oft sehr viel länger im Kopf bleiben.
5. Intuitive Navigation
Die Navigation dient in erster Linie dazu, Lernende sicher durch die Inhalte zu führen und ihnen dabei jederzeit eine Orientierung zu geben. Sorgen Sie deshalb dafür, dass die Navigation möglichst immer in einer Weise sichtbar ist, dass die Lernenden ihren jeweiligen “Aufenthaltsort” und möglichst ihren aktuellen Lernfortschritt anzeigt.
Verzichten Sie, da die Navigation immer sichtbar ist auf ausgefallene Design-Elemente, die vom eigentlichen Inhalt ablenken.
6. Responsive Gestaltung
Das A&O jeder Webanwendung ist, dass sie sich auf jedem Gerät optimal anzeigen und nutzen lässt. Gerade im Fall von E‑Learning, das häufig nicht mehr nur am Desktop, sondern vielleicht auf dem täglichen Arbeitsweg in der Bahn oder auf der Couch stattfindet, ist es wichtig, dass sich die Inhalte immer optimal erfassen lassen. Eine Verschiebung der Elemente allein ist jedoch oft nicht ausreichend: Tabellen müssen formatiert, Grafiken und Text vergrößert werden, etc.
Tipp: Knowledgeworker Create ist von Haus aus 100 % responsiv, sodass es Ihrerseits keinerlei Anpassungen bedarf, um Inhalte auch auf Smartphones und Tablets optimal auszuspielen.
7. Reduzierte, effektive Farbpalette
Sind die Farben von vornherein durchs Corporate Design vorgegeben, ist bei der Wahl der Farbpalette wenig Spielraum. Andernfalls könnte man sich versucht fühlen, mit besonders vielen Farben zu arbeiten oder Farben zu verwenden, die vermeintlich “Pepp” verleihen. Auch bei Farben gilt jedoch: Weniger ist mehr. Akzentfarben sind natürlich wichtig, um Funktionen wie Buttons hervorzuheben oder um die visuelle Hierarchie zu unterstützen. Anders als auf Landingpages gilt in E‑Learning Kursen, in denen man sich lang aufhält und in denen die Augen möglichst entspannt sein sollen, nicht unnötig durch “harte” Farbkontraste zu reizen. Komplementär-Kontraste haben deshalb in E‑Learning Inhalten nichts zu suchen. Wählen Sie stattdessen eine stimmige Farbpalette mit 2-3 Akzentfarben zum Beispiel in sanften Warm-Kalt- oder Qualitäts-Kontrasten.
Tipp: Das Adobe Color Wheel hilft kostenlos bei der Auswahl der richtigen Farbpalette.
8. Lesbarkeit gewährleisten
Eine optimale Lesbarkeit zu gewährleisten ist tatsächlich die größte typografische Herausforderung, da sie von so vielen Faktoren bestimmt wird. Da sich über die Lesbarkeit von Schriften im Web problemlos ein ganzer Artikel schreiben lässt, haben wir uns auf die wichtigsten Punkte begrenzt:
Ausrichtung
Da wir in unserem europäischen Kulturkreis von links nach rechts lesen, sind für uns Texte am leichtesten lesbar, die linksbündig ausgerichtet sind. Davon sollten Sie auch nur in Ausnahmen abweichen und nur, wenn die betreffenden Texte sehr kurz sind: Sowohl bei zentrierter als auch rechtsbündiger Ausrichtung fällt das Lesen sehr schnell schwer, weil die Zeilen links an jeweils unterschiedlichen Stellen beginnen und unser Auge viel mehr Mühe hat, die jeweiligen Zeilenanfänge zu finden.
Schriftgröße
Tatsächlich lässt sich die optimale Schriftgröße in Abhängigkeit vom durchschnittlichen Abstand, den das Gerät vom Auge hat, und der Anatomie der jeweiligen Schriftart berechnen – eine Aufgabe, die man jedoch getrost UX-DesignerInnen überlassen darf. Im Allgemeinen hat sich mit der Zeit im Web eine Schriftgröße von 15-16 Pixel für Fließtexte durchgesetzt.
Zeilenlänge
Die optimale Zeilenlänge für Desktop-Ansichten liegt zwischen 55 - 80 Zeichen – andernfalls wird das Lesen zu anstrengend. Sind die Zeilen zu kurz, wird der Leserhythmus gestört, weil die Augen viel zu schnell hin und her springen müssen. Sind die Zeilen hingegen zu lang, verliert das Auge die Orientierung und weiß gar nicht mehr, welche überhaupt die nächste Zeile ist. Am Smartphone erübrigt sich dieses Problem durch die ohnehin durch die Ausrichtung des Screens.
Auswahl der Schriftart
Wie gut sich eine Schrift lesen lässt, wird durch ihre Lesbarkeit und Leserlichkeit bestimmt. Die Lesbarkeit beschreibt, wie gut sich ein Text lesen lässt, die Leserlichkeit beschreibt, wie gut die einzelnen Buchstaben unterscheidbar sind.
Lesbarkeit: Im Print werden sehr gern Serifenschriften verwendet, da die Serifen dazu führen, dass unsere Augen die Buchstaben schneller “zusammenziehen” und wir dadurch schneller und flüssiger lesen können. Bildschirme jedoch haben eine wenigstens 50% geringere Auflösung als Druckerzeugnisse, was dazu führt, dass Serifen “verschwimmen” oder “pixelig” aussehen. Je kleiner eine Schriftart, desto deutlicher wird dieser Effekt. Deshalb sollte man auch für die Fließtexte von E‑Learning Inhalten immer eine serifenlosen Schrift wählen.
Leserlichkeit: Eine Schrift ist dann leicht leserlich, wenn sich ihre Buchstaben möglichst deutlich voneinander unterscheiden. Wenn Sie einmal ganz genau hinschauen, werden Sie auch in unserer Blog-Schrift leichte Form-Unterschiede in den sich ähnelnden Buchstaben erkennen. Deshalb sollte man auch dort, wo es um optimale Leserlichkeit geht, auf gar keinen Fall zu geometrischen Schriftarten wie Futura, Arial, Century Gothic oder Avenir greifen, deren Buchstaben immer auf denselben geometrischen Grundformen beruhen. In einer geometrischen Schriftart haben beispielsweise “o”, “q” und “a” denselben, manchmal sogar exakt kreisrunden Schriftkörper, während “u” und “n” nur eine Spiegelung voneinander sind. Solche Schriften lassen sich nur mit viel Anstrengung lesen, während man Wörter in besser unterscheidbaren Buchstaben problemlos nur aufgrund ihres Schriftbildes erkennen kann, ohne sie überhaupt bewusst gelesen zu haben.
Zeilenabstand
Während sich im Print Texte problemlos mit einem 1- bis 1,2-fachen Zeilenabstand erfassen lassen, braucht es im Web einen deutlich größeren Abstand zwischen den Zeilen, um Texte ohne Anstrengung lesen zu können. Wählen Sie deshalb abhängig von der Schriftart einen 1,3-1,6-fachen Zeilenabstand. Allgemein gilt: Je größer ein Text, desto kleiner kann der Zeilenabstand sein (zum Beispiel bei Überschriften), je kleiner ein Text, desto größer muss der Zeilenabstand sein (zum Beispiel bei Fließtexten).
Manuelle Umbrüche
Verzichten Sie auf manuelle Umbrüche, auch wenn das in der Desktop-Version vielleicht zu unschönen Worttrennungen führt. Andernfalls werden die Trennungen auch in Tablet- oder Smartphone-Ansicht übernommen, wo die Umbrüche an ganz unpassenden Stellen platziert sein und ganze Abschnitte auseinanderreißen können.
9. Digitale Barrierefreiheit
Das beste Design bringt nichts, wenn es nicht uneingeschränkt von allen Menschen wahrgenommen werden kann. Dabei sprechen wir noch nicht einmal von offensichtlichen körperlichen Einschränkungen, sondern von denen, die oft verborgen bleiben. Wussten Sie zum Beispiel, dass 9% aller Männer und 0,8% der Frauen eine Rot-Grün-Sehschwäche/Blindheit haben? Oder dass es 16 Millionen schwerhörige Menschen in Deutschland gibt?* 96% aller Behinderungen entstehen übrigens auch erst durch Krankheiten, Unfälle oder einfach im Alter, wenn allmählich hören und sehen schwerer fällt. Es gibt jedoch jede Menge Möglichkeiten, die Gestaltung von E‑Learning Kursen so anzupassen, dass sie auch mit Seh- Hör- Motorik- kognitiven- und/oder altersbedingten Einschränkungen vollumfänglich genutzt werden können. Am effektivsten ist die Umsetzung der digitalen Barrierefreiheit natürlich dann, wenn sie von Anfang mitgedacht wird und nicht erst in einem nachträglichen Arbeitsschritt realisiert werden muss.
10. Beta Test mit Testgruppe
Planen Sie unabhängig von inhaltlichen Tests unbedingt vor dem Roll-Out auch einen Design-Test mit einer kleinen ausgewählten Testgruppe ein. In unserem Artikel zu Review-Prozessen finden Sie jede Menge Tipps, wie Sie auch das Design im Prozess platzieren und welche Hilfestellung Sie der Beta-Gruppe geben können, um konstruktives und konkretes Feedback zu erhalten.
Content-Service
Wir unterstützen Sie bei der Entwicklung Ihrer Online-Kurse!
Das Knowledgeworker-Team der chemmedia AG bietet Ihnen nicht nur eine intuitive E‑Learning Software, sondern auch umfassende Serviceleistungen rund um die Erstellung Ihrer Online-Kurse.
Fazit.
Das Design eines Online-Kurses trägt maßgeblich zum Lernerfolg bei. Das Design entscheidet, wie viel kognitive Ressourcen den Lernenden bleibt, um Inhalte zu erfassen, aber auch dafür, dass Ihre Mitarbeitenden nicht die Lust am Lernen verlieren. Lernen kostet ohnehin viel Mühe – ein unübersichtliches Design, in dem man sich nicht zurechtfindet, sorgt für hohe Abbruchquoten. Ein gutes hingegen leitet den Fokus der Lernenden genau dorthin, wo Sie ihn haben wollen: Zu dem neuen Wissen, das Ihre Mitarbeitenden und damit Ihr Unternehmen nach vorn bringen wird.
Folgende Artikel könnten Sie auch interessieren
Bildquelle: baranq/shutterstock.com