Responsive Lernmedien erstellen – 10 hilfreiche Praxistipps

Auf Lernmedien greifen die Lernenden heute flexibel von verschiedenen Endgeräten aus zu. Mobile Endgeräte wie Smartphones oder Tablets werden alternativ zum Desktop genutzt. [1],[2] In der DACH-Region nutzten bereits 2018 29,3% der Unternehmen mobile Endgeräte für die Aus- und Weiterbildung ihrer Mitarbeitenden. [3] Um die Lerninhalte jedoch optimal auf allen Endgeräten bereitstellen zu können, müssen die Lernmedien vollständig responsiv gestaltet sein. Allerdings ist es allein mit einem „Responsive Design“ noch nicht getan. [4]

Was ist Responsive Design?

Responsive Design bezeichnet eine flexible Seitenstruktur ohne feste Pixelangaben. Das Layout einer Website passt sich den Seitenverhältnissen und Auflösungen der unterschiedlichen Bildschirmgrößen an. Die Inhalte werden z.B. jeweils in einer angemessenen Größe dargestellt und Texte brechen automatisch um. Dadurch kann grundsätzlich ein angenehmes Nutzererlebnis für verschiedene Endgeräte gewährleistet werden.[5]

Was leistet „Responsive Design“?

Allerdings kann das Responsive Design allein nicht garantieren, dass die Qualität der Lernmedien auf alternativen Bildschirmen gegenüber dem Desktop gleichbleibend ist. Die responsive Erstellung der Lernmedien erfordert mehr. Die Menge des Inhalts, die Strukturierung oder die Art der Darstellung sind Aspekte, die ebenfalls für die responsive Nutzung berücksichtigt werden müssen. Das responsive Design kann das nicht leisten, sorgt aber für die notwendige Flexibilität der Seitenverhältnisse und Größe der einzelnen Elemente.[6]

Mangelnde Umsetzung responsiver Lernmedien

Die Möglichkeiten, hochwertige responsive Lernmedien zu erstellen, sind da. Doch an der optimalen Umsetzung mangelte es bisher. Die Benchmarking Studie von 2018 befragte Unternehmen der DACH-Region über den Einsatz von Mobile Learning. Von den Lerninhalten, die mobil zur Verfügung standen, waren 41 % tatsächlich nicht für die mobile Nutzung optimiert.[7]

Fazit: Vielen Autor*innen ist nicht bewusst, dass es nicht reicht Inhalte auf einem Smartphone oder Tablet in entsprechender Größe und Auflösung auszuspielen. Denn Inhalte, die nicht auch bezüglich der Navigation oder der Strukturierung vollständig responsiv für die Endgeräte optimiert sind, erzielen kein gutes Lernerlebnis. Die Lernenden werden durch überladene, nicht gut oder nur durch Zoomen und Scrollen sichtbare Inhalte im Lernprozess gestört.[8] Diese Inkompatibilität der Lernmedien mit den Endgeräten ist auch ein Faktor, der Unternehmen davon abhält, Mobile Learning einzuführen.[9] Deswegen ist es umso wichtiger für Autor*innen, zu wissen, wie sie Inhalte responsiv erstellen und optimieren.

Das muss bei der responsiven Erstellung beachtet werden!

Die responsive Gestaltung eines Lernmediums sollte bereits Bestandteil der Planung sein. Die Auswahl, der Umfang und die Strukturierung der Inhalte müssen sich daran orientierten, wie darauf zugegriffen wird. Dasselbe gilt für die Art der Darstellung und die Nutzung von Medien, wie Bilder, Videos oder Audios. Die folgenden 10 Kriterien sollten Autor*innen bei der Erstellung responsiver Lernmedien unbedingt berücksichtigen.

1. Umfang der Inhalte:

Die Inhalte und der Umfang an Informationen, die in das Lernmedium eingefügt werden, sollten bereits mit dem Fokus auf die Responsivität geplant werden. Besonders auf kleinen Screens wirken zu viele Inhalte unabhängig von der Darstellungsart als Text, Bild oder Ähnliches überladen. Für die Lernenden wird es dadurch schwieriger, sich zwischen den ganzen Informationen zurechtzufinden. Deswegen sollten Autor*innen sich bereits zuvor Gedanken darüber machen, welche Inhalte wirklich relevant sind und wie sie responsiv gut dargestellt werden.[10]

2. Anpassung der Führungstexte:

Ein Lernmedium responsiv zu erstellen bedeutet auch, dass die Handlungsanweisungen für die verschiedenen Endgeräte zutreffend sind. Wenn Anweisungen Bedienelemente beinhalten, müssen Formulierungen wie „Machen Sie einen Doppelklick, um die Datei zu öffnen.“ angepasst werden. Für die Anwendung auf einem Tablet oder Smartphone ist diese Formulierung irreführend.

Im Optimalfall nutzen Sie neutrale Handlungsanweisungen wie „Ziehen Sie die Wörter per Drag and Drop in die Lücken“. Diese Anweisung kann sowohl mit dem Maus-Cursor als auch mit dem Finger ausgeführt werden.

3. Darstellung von Schaltflächen

Die Gestaltung von Buttons oder Schaltflächen trägt entscheidend zur User Experience bei. Die Lernenden navigieren über sie und können mit dem Lernmedium interaktiv arbeiten. Deshalb sollten sie groß genug sein, damit sie auch mit dem Finger auf einem Touchscreen eindeutig und leicht bedienbar sind.[11]

Wichtig ist zudem, dass Autor*innen prüfen, ob die Symbole auf den Schaltflächen für alle Bildschirmgrößen gleichermaßen gültig sind. Die Struktur kann auf einem kleinen Screen so umbrechen, dass Elemente auf einem Desktop nebeneinander und auf einem Smartphone übereinander angeordnet sind. Ist auf einer Schaltfläche ein Pfeil zu sehen, kann es dann sein, dass die Pfeilrichtung für kleinere Screens angepasst werden muss.

4. Dauerhaft sichtbare Menü- oder Navigationsschaltflächen

Gibt es ein Menü oder Schaltflächen für die Navigation, die dauerhaft sichtbar sein müssen? In einer interaktiven Lernkarte oder einer Lernsequenz können Lernende z.B. zwischen mehreren Seiten vor und zurück navigieren. Die Schaltflächen müssen also jederzeit sichtbar sein. Die Inhalte sind so zu strukturieren, dass genug Platz dafür ist. Sonst besteht die Gefahr, dass relevante Informationen durch dauerhaft sichtbare Schaltflächen verdeckt und unzugänglich werden. Die Lernenden sollten alle Informationen schnell und einfach z.B. durch Scrollen in einen sichtbaren Bereich holen können.[12]

5. Textlänge:

Die Textlänge richtet sich nicht allein nach dem Inhalt. Auch hier ist die Responsivität mit einzubeziehen. Der Inhalt eines responsiven Lernmediums sollte so dargestellt werden, dass die Texte auf den verschiedenen Endgeräten jeweils übersichtlich und gut lesbar sind. Sie müssen vollständig und flüssig gelesen werden können. Deshalb sollten nur relevante Informationen in einen Text integriert werden.[13] Oft kann z.B. eine Liste zu einer übersichtlicheren Struktur beitragen, ohne die Informationen zu reduzieren. 

6. Schriftgröße:

Eine gut lesbare Schriftgröße ist auf allen Endgeräten sehr wichtig. Zu kleine Schriftgrößen erschweren das Lesen und sollten deshalb auch für kleine Screens eine Mindestgröße von umgerechnet 14 px haben. Um dennoch eine übersichtliche Struktur beizubehalten, können Autor*innen z.B. die Überschriften für die Ansicht auf dem Smartphone in der Größe reduzieren.

Für größere Endgeräte wie große Desktops oder Smart TVs können auch deutlich größere Schrifttypen verwendet werden. Um eine gut geeignete Schriftgröße auszuwählen, müssen Autor*innen zwei Aspekte mit einbeziehen. Wie groß ist das Sichtfenster auf dem Bildschirm? Aus welcher Distanz schauen die Menschen auf den Bildschirm? Um nach diesen Überlegungen eine gut lesbare Schriftgröße für die verwendeten Endgeräte auszuwählen, ist es empfehlenswert, die Darstellung der Lernmedien auf den entsprechenden Endgeräten zu prüfen. So erhalten Autor*innen eine realistische Ansicht aus der Perspektive der Lernenden.[14]

7. Bilder und Grafiken:

Die Darstellung von Informationen durch Bilder oder Grafiken ist für die verschiedenen Endgeräte unterschiedlich sinnvoll. Zeigt eine Grafik z.B. viele kleine Symbole und Zahlen, sind diese auf einem Desktop gut lesbar. Auf einem kleinen Screen hingegen sind sie ohne umständliches Zoomen kaum zu erkennen.

Als Autor*in vermeiden Sie das, indem sie Bilder einbinden, die wenige einzelne Elemente groß darstellen. Dabei ist zu beachten, dass die Bilder so eingebunden werden, dass sie sich auf verschiedenen Endgeräten responsiv der Rahmengröße anpassen.

8. Videos:

Wenn Videos in ein responsives Lernmedium eingebunden werden, ist es sinnvoll, für die Ansicht auf einem kleinen Screen einen Hinweis einzufügen, das Smartphone zu drehen. Ein Video ist im Hochformat oft zu klein, während die Lernenden im Querformat alles gut erkennen können.

Ein weiterer wichtiger Hinweis ist, dass auch der Ton eingeschaltet werden sollte. Allerdings sind Videos im responsiven Kontext ausgewählt einzusetzen. Da die Nutzung von Videos Ton erfordert, sind viele Videos in responsiven Lernmedien für das Lernen von unterwegs ungeeignet.

9. Audios:

Für die Einbindung der Audios ist zu beachten, dass die Betriebssysteme von Smartphones häufig das automatische Abspielen verhindern. Gegebenenfalls können Autor*innen dann einen extra Play-Button einfügen.

Wie bereits für die Videos ist ein Hinweis sinnvoll, damit die Lernenden den Ton einschalten. Für die quantitative Nutzung der Audios gilt die gleiche Zurückhaltung, mit der auch Videos einzusetzen sind. Die Lernenden möchten vielleicht nicht, dass das Umfeld mithört oder jedes Mal Kopfhörer nutzen.

10. Datenvolumen:

Wenn die Lernenden von mobilen Endgeräten auf ihre Lernmedien zugreifen, können schlechte Internetverbindungen ein Problem sein. Inhalte, die ein großes Datenvolumen verbrauchen, werden unter Umständen nicht richtig geladen. Deshalb sind Medien, wie z.B. längere Videos sparsam einzusetzen. So kann eine gute Performance auch für den Zugriff über mobile Daten gewährleistet werden.[15]

Responsive Lernmedien mit dem eAuthor eVolution erstellen

Die responsive Erstellung von Lerninhalten ist essenziel für die Nutzung auf verschiedenen Endgeräten. Das Lernmedium sollte bezüglich der Navigation, des Layouts und des Umfangs der Informationen vollständig nach den genannten Kriterien angepasst werden. So können Autoren sicherstellen, dass die Qualität des Lernmediums auf allen Endgeräten konstant bleibt.

Unser Autorentool eAuthor eVolution bietet alle individuellen Anpassungsmöglichkeiten, die für die responsive Erstellung nötig sind. Mit ihm können z.B. speziell für die Ansicht auf einem Tablet oder Smartphone die Struktur oder das Design der Inhalte geändert werden. Der eAuthor eVolution zeigt darüber hinaus eine Vorschauansicht des ausgespielten Lernmediums für die verschiedene Gerätetypen. Dadurch haben Autor*innen die Möglichkeit, die Responsivität ihrer Inhalte zu überprüfen und optimale Ergebnisse zu erzielen. 

 

Kontaktieren Sie uns bei Interesse oder testen Sie den eAuthor eVolution einfach selbst!

Fazit

Aufgrund der verbreiteten Nutzung verschiedener Endgeräte wie Smartphones oder Tablets, bieten bereits viele Unternehmen Mobile Learning an. Allerdings sind die Lernmedien trotz ihrer grundsätzlichen Bereitstellung für verschiedene Endgeräte häufig nicht für diesen Gebrauch optimiert. Die Qualität der Lernmedien leidet unter den differenten Bildschirmgrößen. Zusätzlich zum Responsive Design, dass für die flexible Seitenstruktur sorgt, ist es deshalb unbedingt notwendig, auch die Inhalte selbst responsiv anzupassen. Hierzu liefern unsere 10 Kriterien zur responsiven Erstellung zentrale Aspekte, die Sie als Autor*in dabei unterstützen, hochwertige Mobile-Learning-Medien zu realisieren.

Mehr Beiträge aus dieser Kategorie:

Mehr Beiträge zu den Schlagwörtern: