Ob Tablet, Smartphone oder am Computer: Unsere heutige Gesellschaft ist dauerhaft online – ein Grund, warum E-Learning Kurse immer wichtiger werden. Doch mit dem Erstellen eines einzelnen Designs für den Online-Kurs ist es oftmals nicht getan. Denn die Web-Ansicht des Kurses verändert sich je nach Art des genutzten Gerätes und kann enorm verzerrt werden. Um dies zu vermeiden und sicher zu stellen, dass die Webseite sich den Geräten anpasst, sind speziell darauf ausgerichtete Design-Tools optimal geeignet. Dabei kann man grundsätzlich zwischen zwei Arten von Webdesign unterscheiden – „adaptive“ und „responsive“ Design. In einem unserer letzten Artikel wurden die Unterschiede sowie Vor- und Nachteile zwischen diesen zwei Arten genauer dargestellt. Nun wollen wir uns dem responsiven Design etwas genauer zuwenden und teilen mit Ihnen sechs Regeln1 für eine erfolgreiche Anwendung.
Potenzielle Nutzer möchten Ihre Online-Trainings immer und überall durchführen können. Gerade deshalb steht der Begriff M-Learning immer mehr im Fokus. Das „M“ steht für „mobil“ und bezeichnet die Möglichkeit, Trainings auch am Smartphone oder Tablet durchzuführen und nicht mehr nur „klassisch“ am Laptop oder PC. Dies bringt Herausforderungen für die Webseite, da diese optimal an die verschiedenen Bildschirmgrößen angepasst werden muss. Hier kommt die Lösung des responsive Designs ins Spiel, damit die E-Learning Nutzer auf allen Geräten ein effektives und erfolgreiches Lernerlebnis haben können!
Wenn es um die Navigation auf E-Learning Plattformen geht, sollte grundsätzlich auf ein simples, leicht zu erschließendes Format gesetzt werden. So kann garantiert werden, dass die Nutzer das gesuchte Themengebiet schnell finden, ohne lange Zeit für die Suche aufwenden zu müssen. Vor allem bei Smartphones muss auf eine bildschirmgerechte Anpassung des Menüs geachtet werden. Dafür sollten einzelne Themenblöcke zunächst gebündelt in Kategorien erscheinen. Wenn der Nutzer dann im nächsten Schritt auf die gesuchte Kategorie klickt, erscheinen alle passenden Unterkategorien. Auf diesem Wege kann das gesuchte Training ohne großen Zeitaufwand gefunden werden. Einfach, aber effizient!
Mit hoher Wahrscheinlichkeit wollen Nutzer, die mobile Geräte für ihren E-Learning Kurs nutzen auf diesem Weg Zeit sparen. Eine Möglichkeit die Zeitersparnis zu vergrößern, bietet die Reduktion der Ladezeiten Ihrer E-Learning Webseite. Darunter fällt beispielsweise die Verkleinerung von datenintensiven Grafiken und Bildern, welche lange Zeit zu laden brauchen (vor allem bei schwacher Verbindung). Am besten geeignet sind dafür JPEG oder GIF Formate für Bilder, wohingegen PNG Dateien eher ungeeignet sind. Achten Sie außerdem darauf, dass auf den verschiedenen Geräten keine Verzerrungen der Bilder oder ein Mangel der Qualität auftreten.
Um die vorherigen drei Punkte zu unterstützen und das „responsive Design“ der Webseite erfolgreich umzusetzen, sollten nur die wichtigsten Inhalte mit in das Training übernommen werden. Darunter fallen außer Bilder und Grafiken auch Texte und andere Informationsquellen. Überlegen Sie bei allen Inhalten ganz genau, ob sie die Ladezeit und den zusätzlichen Platz in Ihrem responsiven Kurs Wert sind und verbannen Sie jegliche überflüssige Information.
Besonders wichtig ist eine Schriftart und Schriftgröße, die für den Nutzer leicht leserlich ist. Andererseits sollte sie auch nicht zu groß sein und den gesamten Bildschirm einnehmen. Der richtige Mittelweg ist hier gefragt, weshalb eine Schriftgröße von 12 oder 14 pt. empfohlen wird. Auch Buttons sollten größentechnisch nicht zu sperrig ausfallen, um Klickfehler der Nutzer zu vermeiden. Wenn sie Hyperlinks nutzen, bietet es sich zudem an, diese in einer anderen Farbe erkennbar zu machen, um sie vom üblichen Text abzugrenzen.
Responsive Webdesign sollte immer frühzeitig mit in die Planung für einen E-Learning Kurs einbezogen werden, da es kompliziert werden kann, Änderungen im Nachhinein durchzuführen. Beachten Sie dabei alle vorher genannten Faktoren, wie Einfachheit, Schriftgröße, Navigation und Bildgröße um eine schnelle Ladezeit zu garantieren. Des Weiteren ist es notwendig, entsprechende Testläufe auf den unterschiedlichen Geräten wie Smartphone, Laptop und Handy durchzuführen und bei Bedarf weitere Überarbeitungen am Design vorzunehmen. Kooperieren Sie dabei gerne mit Teammitgliedern und Kollegen, um beispielsweise die Button-Größe zu testen und mehrere Meinungen zu haben. So können Sie die optimalen Anpassungen auf Ihrer E-Learning Webseite durchführen.
Ein weiterer Tipp, um Ihre Webseite auf responsive Design zu überprüfen, sind kostenfreie Tests, bei denen Sie nur Ihren Link einsetzen müssen (Zum Beispiel hier).
Abschließend kann festgehalten werden, dass heutzutage immer mehr Menschen mobile Lernmöglichkeiten in Anspruch nehmen und in den nächsten Jahren voraussichtlich noch viele weitere dazu kommen werden. Aus diesem Grund kann keineswegs auf eine Anpassung der E-Learning Webseite für alle möglichen Geräte verzichtet werden. Denn nur so kann ein qualitativ hochwertiges, ganzheitliches Lernerlebnis für die Nutzer sowie ein langfristiges Wachstum der Branche garantiert werden.
Dr. Moritz Schulz,
Geschäftsführer
