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. Mobile Learning ist sowohl für den akademischen als auch für den Unternehmenssektor ein vielversprechender Trend. Dieser wird nicht zuletzt auch durch die aktuelle Situation und die Einschränkung des Präsenzunterrichts durch Covid-19 weiter verstärkt. [1],[2] In der DACH-Region nutzten bereits 2018 29,3% der Unternehmen mobile Endgeräte für die Aus- und Weiterbildung ihrer Mitarbeiter. [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 Autoren ist nicht klar, dass es nicht reicht, dass die Inhalte auf einem Smartphone oder Tablet in entsprechender Größe und Auflösung angezeigt werden können. Inhalte, die nicht auch bezüglich der Navigation oder der Strukturierung vollständig responsiv für die Endgeräte angepasst 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 Autoren, zu wissen, wie sie Inhalte responsiv erstellen und optimieren können.

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 Autoren 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 Autoren sich bereits zuvor Gedanken darüber machen, welche Inhalte wirklich relevant sind und wie sie responsiv gut dargestellt werden können.[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 „Klicken Sie auf die richtigen Bilder.“ angepasst werden. Für die Anwendung auf einem Tablet oder Smartphone wäre diese Formulierung falsch. Für Endgeräte mit einem Touchscreen sollten Autoren die Formulierung deshalb spezifisch anpassen wie „Tippen Sie auf die richtigen Bilder.“

Es können auch neutrale Handlungsanweisungen genutzt werden wie „Ziehen Sie die Wörter per Drag and Drop in die Lücken“. Die Anweisung kann sowohl mit dem Maus-Cursor als auch mit dem Finger ausgeführt werden. In diesem Fall ist keine Anpassung der Formulierung für Geräte mit Touchscreen nötig.

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 Autoren 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 möglichst vollständig und flüssig gelesen werden können. Deshalb sollten nur relevante Informationen in einen Text integriert werden.[13] Gegebenenfalls 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 Autoren 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 Autoren 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 Autoren eine realistische Ansicht aus der Perspektive der Lernenden.[14]

7. Bilder und Grafiken:

Die Darstellung von Informationen durch Bilder oder Grafiken kann für die verschiedenen Endgeräte unterschiedlich sinnvoll sein. 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.

Die Autoren können das vermeiden, 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, den die Autoren integrieren können, 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 Autoren 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.

Das Autorensystem von inside, der 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 Autoren die Möglichkeit, die Responsivität ihrer Inhalte zu überprüfen und optimale Ergebnisse zu erzielen. Lassen Sie sich hierzu gerne durch inside beraten 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 die 10 genannten obigen Kriterien zur responsiven Erstellung zentrale Aspekte, die die Autoren dabei unterstützen hochwertige Mobile-Learning-Medien zu realisieren.

Die grundsätzliche Auswahl und Strukturierung der Inhalte sind ebenso wichtig wie die Anpassung einzelner Inhalte. Aspekte wie eine angemessene Größe der Schrift oder der Bilder sind für eine gute Lesbarkeit und Erkennbarkeit auf kleinen Screens essenziell. Das gilt auch für die Schaltflächen oder Navigationselemente, die auf dem jeweiligen Endgerät leicht bedient werden können sollten. Darüber hinaus ist der Fakt, dass Lernmedien flexibel unterwegs bearbeitet werden können, im Umgang mit Videos oder Audios zu berücksichtigen. Der zurückhaltende, gezielte Einsatz der Inhalte, die ein großes Datenvolumen verbrauchen, ist aufgrund der variierenden Internetverbindung allgemein empfehlenswert.

Mehr Beiträge aus dieser Kategorie:

Mehr Beiträge zu den Schlagwörtern:

Schreibe einen Kommentar

Share on twitter
Share on linkedin
Share on facebook
Share on xing
Share on tumblr
Share on pinterest
Share on email
Share on print
Menü schließen