4 Beispiele dafür, wie Sie durch die Umstellung von Flash auf HTML5 die Wirkung Ihres E-Learnings steigern können

Da mLearning (oder mobiles Lernen) immer mehr Verbreitung findet, ist es für Unternehmen ratsam, ihre alten Flash-E-Learning-Kurse auf HTML5 umzustellen. In diesem Artikel zeige ich Ihnen, wie Sie diese Gelegenheit nutzen können, um die Wirkung Ihrer Online-Schulungen zu steigern.

Warum ist die Migration Ihrer E-Learning-Kurse von Flash zu HTML5 notwendig?

Da Flash bis vor einigen Jahren das führende Autorentool war, haben die meisten Unternehmen massiv in Flash-basierte Kurse investiert. Heute unterstützen die meisten Browser Flash nicht mehr. Die Lernenden von heute wünschen sich die Flexibilität, auf dem Gerät ihrer Wahl (insbesondere Tablets und Smartphones) zu lernen und nicht nur auf Desktops und Laptops. Da Flash mobile Geräte nicht unterstützt, besteht eine zwingende Notwendigkeit, Ihre alten Flash-Kurse in HTML5 zu konvertieren, um sie mobilkompatibel zu machen.

Die Notwendigkeit, alte Flash-Kurse auf HTML5 umzustellen, lässt sich aus zwei Perspektiven betrachten:

1. Organisatorischer Bedarf

Unternehmen haben in der Vergangenheit erhebliche Investitionen in Flash-basierte Kurse getätigt, von denen viele eine lange Lebensdauer aufweisen und nach wie vor relevant sind. Da diese Kurse keine mobilen Geräte unterstützen und die Browser-Unterstützung für Flash zunehmend begrenzt ist, könnte diese Unterstützung in absehbarer Zeit vollständig entfallen.

Studien belegen eindeutig, dass Lernende zunehmend von Desktop-Computern auf mobile Endgeräte wechseln; zugleich etabliert sich die Entwicklung responsiver E-Learning-Kurse rasch als klarer Standard.

2. Bedarf der Lernenden

Weltweit ist ein deutlicher Wandel vom traditionellen E-Learning (verfügbar auf Desktop-Computern und Laptops) hin zu mLearning oder mobilem Lernen zu beobachten, das geräteübergreifend ist. Die Lernenden wünschen sich diese Flexibilität, bei der sie auf dem Gerät ihrer Wahl lernen können.

Die Migration von E-Learning-Kursen zu HTML5 ist jedoch nicht so einfach, wie es klingt. Sie können einige meiner früheren Artikel lesen (aufgelistet im Abschnitt „Weiterlesen“ am Ende dieses Artikels), in denen ich diese Aspekte hervorgehoben und auch Tipps gegeben habe, wie Sie Ihren ROI bei diesem Prozess maximieren können.

Kommen wir nun zu einer interessanten Möglichkeit, die diese Migration bietet: Sie können diesen Schritt nutzen, um nicht nur den technologischen Fortschritt zu realisieren, sondern auch aktuelle, immersivere Lernstrategien zu integrieren.

Wie können Sie die Migration zu HTML5 nutzen, um die Wirkung Ihrer E-Learning-Kurse zu steigern?

Lassen Sie mich zunächst die Schlüsselfaktoren erläutern, die den ROI von Schulungen beeinflussen, und anschließend die Techniken aufzeigen, die darauf Einfluss nehmen können. Im letzten Schritt werden wir gemeinsam betrachten, wie wir diese Migrationsmöglichkeit nutzen können, um diese Techniken einzubinden und eine wirkungsvolle Schulung zu gestalten.

Schlüsselfaktoren, die den ROI von Schulungen beeinflussen

1. Reaktion der Lernenden auf den Lernstoff: Ist er interessant und relevant?
2. Bleibt das Gelernte im Gedächtnis? Fördert die Lerntechnik den Transfer der Informationen vom Kurzzeitgedächtnis ins Langzeitgedächtnis? Ermöglicht sie es den Lernenden, die erforderlichen Lernergebnisse zu erreichen?
3. Anwendung des Gelernten. Fördert die Schulung die Anwendung des Wissens und beschränkt sich nicht nur auf den Wissenserwerb?
4. Leistungssteigerung. Führt die Schulung letztendlich zu der erforderlichen Leistungssteigerung?
5. Unternehmensauswirkungen: Führt die Leistungssteigerung zu dem nachweisbaren Gewinn, den das Unternehmen anstrebt?

Wie können Sie die Gelegenheit der Migration nutzen, um einen positiven Einfluss auf den ROI zu erzielen?

Hier sind meine Empfehlungen. Sie können diese Gelegenheit nutzen, um:

Lerntechniken einzusetzen, die die Lernenden einbinden und motivieren, darunter:

1. Gamification.
2. Mikrolernen (sowohl für formelles als auch für informelles Lernen).
3. Szenariobasiertes Lernen.
4. Storytorials (oder storybasiertes Lernen).

Verwenden Sie innovative Formate, die die Lernenden ansprechen (anstelle traditioneller E-Learning-Ansätze), wie zum Beispiel:

1. Videos.
2. Interaktive Videos.
3. Interaktive Infografiken.

Schaffen Sie ein Umfeld für kontinuierliches, kollaboratives und inklusives Lernen durch:

1. Lernpfade.
2. Tools zur Leistungsunterstützung.
3. Lernportale, die soziales Lernen und partizipatives Lernen (Kuration) ermöglichen.

Beispiele

Nachfolgend finden Sie vier Beispiele, die verdeutlichen, wie wir die Wirkung der Schulungen gesteigert haben, als wir die bisherigen Flash-basierten E-Learning-Kurse mithilfe immersiverer Techniken auf HTML5 überführten. Alle diese Beispiele zeichnen sich aus durch:

1. Kreatives didaktisches Design.
2. Modernes Erscheinungsbild.
3. Fokus auf eine bessere visuelle Hierarchie.

Stellen Sie sich vor, welche Ergebnisse Sie erzielt hätten, wenn Sie sich lediglich für eine technologische Aufwertung entschieden hätten. Diese überlegenen Designs steigern das Engagement der Lernenden und fördern nachhaltiges Lernen.

Beispiel 1 – Traditioneller E-Learning-Kurs, neu gestaltet (und auf HTML5 migriert), um intuitiver, interaktiver und ansprechender zu sein

Dieser Kurs war ursprünglich ein traditioneller E-Learning-Kurs, der für ein modernes Lernprofil neu gestaltet werden musste.

• Im früheren Design mussten die Nutzer ein langes Video ansehen und einen Begrüßungsbildschirm durchlaufen, bevor sie zum Menü gelangten, was nicht intuitiv war. Um dies zu beheben, haben wir den Begrüßungsbildschirm und das Menü zu einem interaktiven Bildschirm zusammengefasst.
• Zusätzlich existierten Bildschirme für „Übersicht“, „Ziele“ und „Als Nächstes“, welche den Lernprozess unnötig verzögerten. Wir haben diese unnötige Verzögerung beseitigt, indem wir die Bildschirme „Übersicht“ und „Ziele“ zu einem interaktiven Bildschirm zusammengefasst haben.
• Darüber hinaus haben wir die statischen Bildschirme überarbeitet und ihnen eine angemessene visuelle Hierarchie verliehen, die es den Nutzern – insbesondere jenen ohne Ton – erleichtert, sich auf die wichtigsten Inhalte zu konzentrieren.
• Nicht intuitive Interaktionen, bei denen auf Bilder geklickt werden musste, die Teil des Hintergrundbildes zu sein schienen, wurden zu kontextbezogenen Symbolklicks umgestaltet, die den Nutzer zur effektiven Interaktion aufforderten.

Insgesamt bietet der neue, migrierte Kurs den Lernenden dank einer klaren Informationshierarchie und ansprechenden Layouts eine intuitivere Erfahrung; zudem empfinden die Benutzer die Navigation als deutlich einfacher. Das überarbeitete Kursdesign stellt den Lernenden erweiterte Interaktionsmöglichkeiten zur Verfügung, sodass sie das Lerntempo individueller gestalten können.

Vorher: 3 separate Frames zur Einführung und Modulstruktur

Nachher: Ein einziger Rahmen mit den erforderlichen Informationen (überlagert und intuitiver)

Vorher: Das Bild war für den Inhalt nicht relevant und die visuelle Hierarchie war ebenfalls nicht passend

Nachher: Relevante Bilder und präzise Informationshierarchie

Beispiel 2 – Migration eines Flash-basierten E-Learning-Kurses mit umfangreichen visuellen Elementen und Animationen in das HTML5-Format mit Microlearning-Elementen

Dieser Kurs war ursprünglich ein Flash-basierter, traditioneller E-Learning-Kurs mit umfangreichen visuellen Elementen, die durch Animationen unterstützt wurden. Der gesamte Inhalt wurde in einer Benutzeroberfläche präsentiert, die wie ein Buch aussah. Der Inhalt wurde mithilfe von kontextbezogenen Bildern und Typografie dargestellt.

• Die Herausforderung bei der Migration für eine geräteübergreifende Bereitstellung mittels HTML5 bestand darin, die allgemeinen Richtlinien eines responsiven Designs zu befolgen und gleichzeitig das gleiche Maß an Interaktion durch visuelle Elemente und Interaktionen beizubehalten.
• Als Erstes haben wir die Benutzeroberfläche vereinfacht, damit sie auf allen Geräten und Plattformen nahtlos funktioniert. Um den Interaktionsfaktor aufrechtzuerhalten, haben wir weiterhin wirkungsvolle Bilder verwendet, um Kernbotschaften zu vermitteln, und Symbole sowie Schaltflächen hinzugefügt, um zusätzliche Inhalte anzuzeigen bzw. hervorzuheben.
• Angesichts der veränderten Nutzergewohnheiten, die auf den Einsatz mobiler Geräte beim Lernen zurückzuführen sind, haben wir den Inhalt zudem in kleinere, leicht verdauliche Häppchen unterteilt und darauf hingearbeitet, dass die Interaktionen und Layouts auf allen Geräten nahtlos funktionieren.

Vorher: Das Design wirkt veraltet (der ursprüngliche Kurs wurde vor über 7 Jahren entworfen)

Nachher: Moderne und kontextbezogene Bilder werden verwendet, um den Kontext zu schaffen

Vorher: Das Design wirkt veraltet und der Bildschirm wirkt überladen

Nachher: Kontextbezogene Bilder und eine klare visuelle Hierarchie

Beispiel 3 – Umstellung eines älteren HTML-Kurses zum Thema Zeitmanagement auf mobilfreundliche Microlearning-Einheiten mit Videos, szenariobasiertem Lernen und Gamification

Der ursprüngliche Kurs wurde mit einem älteren HTML-Framework entwickelt, das nicht mit Smartphones kompatibel war und interaktive Elemente enthielt, die nicht für eine mobile Plattform optimiert waren.

• Wir haben den gesamten Kurs zum Thema Zeitmanagement in kleine, leicht verdauliche Microlearning-Einheiten umgewandelt, die auf allen Geräten angezeigt werden können und den Lernenden die Flexibilität bieten, in ihrem eigenen Tempo zu lernen.
• Der migrierte Kurs vermittelte die Lerninhalte in verschiedenen Formaten, darunter Videos, Szenarien und gamifizierte Aktivitäten, die in ihrer Gesamtheit dazu beitrugen, das Engagement der Lernenden zu steigern und ihnen ein immersives Lernerlebnis zu bieten.

Vorher: Traditionelles E-Learning-Format

Nachher: Nutzt szenariobasiertes Lernen im Modus der geführten Erkundung

Vorher: Traditionelles und schwerfälliges Design

Nachher: Leicht lesbares und übersichtliches, aufgeräumtes Design

Beispiel 4 – Migration eines traditionellen, seitenbasierten E-Learning-Kurses in szenariobasierte mobile Apps, um eine moderne Lernerzielgruppe anzusprechen
. Es handelte sich um ein traditionelles E-Learning-Modul, das als PPT erstellt und in ein Articulate-Presenter-Framework mit minimalen Steuerungsmöglichkeiten für den Benutzer integriert wurde. Es ähnelte eher einem seitenbasierten Kurs, verpackt in einer ansprechenden Benutzeroberfläche.

• Angesichts des Profils der modernen Zielgruppe, die den Kurs zu Instructional-Design-Fähigkeiten absolvieren würde, haben wir den Kurs jedoch auf einen szenariobasierten Ansatz umgestellt, der es den Lernenden ermöglicht, ihre Fähigkeiten in diesem Bereich durch interessante Übungen und Bewertungen zu erlernen, zu üben und anzuwenden.
• Der Kurs wurde zudem für Tablets optimiert, um den Nutzern die Flexibilität zu bieten, den Kurs von überall und unterwegs absolvieren zu können.
• In einem weiteren Schritt haben wir die Kurse in mobile Apps überführt, sodass die Lernenden auch offline darauf zugreifen können und das Gelernte genau dann üben können, wenn sie es benötigen.

Vorher: Unübersichtliches Design

Nachher: Aufgeräumtes und klares Design mit eindeutiger visueller Hierarchie

Vorher: Traditionelles Format

Nachher: Modernes Design

Ich hoffe, dieser Artikel liefert Ihnen wertvolle Denkanstöße, die Sie bei der Planung der Umstellung traditioneller E-Learning-Kurse auf das HTML5-Format nutzen können. Nutzen Sie diese Gelegenheit, um die Wirkung Ihrer Schulungsangebote zu steigern. Bei Rückfragen stehe ich Ihnen gerne zur Verfügung.
Weiterlesen

• Migration von Flash zu HTML5 – 7 Tipps zur Verbesserung der Lernerfahrung
• Warum die Umstellung Ihrer Online-Schulungskurse von Flash auf HTML5 wirtschaftlich sinnvoll ist
• Bewährte Verfahren für die korrekte Migration älterer Flash-Kurse zu HTML5
• Kostenloses E-Book: Das unverzichtbare Toolkit für die erfolgreiche Migration von Flash zu HTML5