Abschnittsübersicht

  • Nach der Theorie kommt die Praxis und diese stellt sich, wie so oft, nicht als so leicht heraus, wie im Vorfeld vermutet. In diesem Abschnitt begleitet ihr das Team von Moodle.NRW "live" bei der Erstellung der ersten Moodle-Tour für die Startseite unserer Moodle 4.0 Instanz. 

    Nach vorbereitenden Überlegungen zu Ziel und Zweck der gewünschten Tour und einer ungefähren Vorstellung zu ihrem Umfang und ihren Eigenschaften, stellen wir den "Quick Guide: Wie erstelle ich eine Moodle-Tour?" auf die Probe. Nach Konfiguration der grundlegenden Einstellungen wird an drei Tour-Bestandteilen beispielhaft gezeigt, wie der Erstellungsprozess vonstatten geht und wie die verschiedensten Hindernisse - ja, davon gibt es einige - umgangen werden können.

    Der Abschnitt schließt mit den wichtigsten "Learnings" aus diesem Prozess, auf dass die Moodle-Community von unseren Erfahrungen profitieren kann!


    Vorbereitungen

    • Welchen Zweck soll die Tour erfüllen?
      • Tour soll einen ersten Überblick über die Seite verschaffen, Nutzer*innen insbesondere auf die Sektion News & Termine hinweisen sowie in die Knowledge Base selbst geleiten ✔️

    • Wie soll die Tour ausgestaltet sein?
      • Knackig, persönlich und mit den auf der Seite vielfach genutzten Icons

    • Welche Ebene soll die Moodle-Tour adressieren? Startseite, Kursbereiche, spezieller Kursbereich, Kursebene?
      • Startseite ✔️

    • Welche Zielgruppe soll angesprochen werden?
      • Sämtliche Nutzer*innen der Seite ✔️

    • Wie viele Schritte soll die Tour beinhalten?
      • Tour möglichst kurz halten (hier: 5 Schritte); eine etwaige Aufspaltung in mehrere kurze Touren ist aufgrund der gleichen Kombination aus Rolle/Ebene nicht möglich. ✔️
      • Schrittfolge anzeigen lassen. ✔️

    • Kann die Tour noch in einem anderen Kontext (z. B. für eine andere Zielgruppe) verwendet werden, so dass der Aufwand minimiert wird?
      • Auf Ebene der Startseite und aufgrund der umfassenden Zielgruppe nicht möglich. ❌

    • Zu welchem Zeitpunkt und wie häufig soll die Tour angezeigt werden? Kann diese abgebrochen werden?
      • Beim ersten Zugriff auf die Seite mit aktiviertem Account für alle Accounts. Einmalige Anzeige mit der Option, die Tour jederzeit abbrechen und dann über den Footer bzw. das Fragezeichen fortsetzen bzw. erneut aufrufen zu können. ✔️

    • Soll die Tour mehrsprachig sein?
      • Nein, deutsche Version ist für die definierte Zielgruppe ausreichend. ❌

    •   Erstellungsprozess | Rahmenbedingungen festlegen

      Nach Klick auf den Button "Neue Tour anlegen" erscheint die grundlegende Einstellungsmaske. Auf Basis der vorbereitenden Überlegungen werden Name und Beschreibung für die Moodle-Tour vergeben und als passende Anzeigeebene die eigene Startseite mit "FRONTPAGE_MY" gewählt. Der Haken bei "Geführte Tour aktiv" wird nicht (!) gesetzt, um die Tour nicht direkt "scharf zu stellen".

      Den Anregungen aus der Sektion Best Practices folgend, wird die Schaltfläche "Tour beenden" personalisiert, die Schrittnummern werden angezeigt und die Tour-Schritte, um mobile Endgeräte zu unterstützen, generell "Unterhalb" platziert.

      Bei den Tour-Filtern werden zunächst die am wenigsten restriktiven Einstellungen gewählt. Dies beinhaltet sämtliche relevanten Kursbereiche für den Filter "Kategorie" sowie die Wahl von "Alle" bei allen anderen Filtern.


      Erstellungsprozess | Einzelne Tour-Bestandteile erstellen

      Die Moodle-Tour "Startseite KB" besteht aus insgesamt fünf Schritten und ist somit hinreichend kurz, um gemeinsam mit der persönlichen Ansprache und der Verwendung von Bildern sowie auflockernden Icons die Aufmerksamkeit der Nutzer*innen zu wahren. Beispielhaft wird nachfolgend die Erstellung der Tour-Schritte 1/5, 4/5 und 5/5 betrachtet.

      Tour-Schritt 1/5 | Herzlich willkommen!

      Der erste Schritt beinhaltet eine klassische Begrüßung, so dass als Zieltyp "In der Seitenmitte" ausgewählt werden kann und es keiner gesonderten Platzierung bedarf. Um die Nutzer*innen zu aktivieren, wird zusätzlich mit einer Hervorhebung des Tour-Schrittes - der gewünschte Inhalt wird weiß hinterlegt und die restliche Anzeige leicht verdunkelt - gearbeitet.


      Tour-Schritt 4/5 | Wie finde ich mich zurecht?

      Der vierte Schritt zielt auf die Navigationsleiste in der Kopfzeile der Startseite. Um diesen passgenau platzieren zu können, ist die Verwendung eines CSS-Selectors erforderlich. Mit einem Rechtsklick auf den entsprechenden Bereich öffnet sich in allen modernen Browsern ein Fenster, in dem "Element untersuchen" ausgewählt werden kann und in der Folge der html-Code des gewünschten Elements bzw. der Seite angezeigt wird. Nach Erkennen des passenden CSS-Selectors wird dieser in den Tour-Schritt eingepflegt (hier: .moremenu.navigation.observed). 

      Aufgrund der Platzierung des Schrittes über einen CSS-Selector erscheint im Bereich "Optionen" das Feld "Anzeigen, wenn Ziel nicht gefunden", welches mit "Ja" versehen wird, damit etwaige Fehler bei der Selector-Auswahl nicht zum Scheitern der gesamten Tour führen.
      Eine Hervorhebung wird in diesem Fall nicht genutzt - eine der vielen Lehren aus der Erstellung dieser Tour, später mehr dazu.  

      Der Text wird auf das Nötigste beschränkt und durch einen zusätzlichen Screenshot aufgelockert.


      Schritt 5/5 | Kontakt Moodle.NRW

      Der fünfte Schritt nimmt den Textblock mit den Kontaktmöglichkeiten in der rechten Blockleiste ins Visier. Wieder ist die Verwendung eines passenden CSS-Selectors erforderlich (hier: #inst279).

      Analog zu Schritt 4/5 wird erneut das Feld "Anzeigen, wenn Ziel nicht gefunden" mit "Ja" versehen, in diesem Fall jedoch zusätzlich die Hervorhebung wie schon im ersten Tour-Schritt aktiviert.

      Es ergibt sich eine Tour bestehend aus fünf Schritten, welche neben einer Begrüßung insgesamt vier Elemente der Startseite (News und Termine, Kursbereiche, Navigationsleiste sowie Kontaktmöglichkeiten) aufgreift und somit wirklich kurz und knackig ausfällt. Ob diese Moodle-Tour jedoch wie gewünscht funktioniert, steht auf einem anderen Blatt. lächelnd


      Erstellungsprozess | Test und Aktivierung

      Moodle-Touren besitzen keinen Testmodus. Ohne eine Tour zu aktivieren, ist es nicht möglich, zu prüfen, ob diese wie gewünscht angezeigt wird. Weder die korrekte Auswahl der Zielelemente, die Länge und Ausgestaltung des Inhalts, noch die Platzierung und/oder Hervorhebung der einzelnen Schritte ist somit im Vorfeld kontrollierbar. Dies heißt jedoch nicht, dass eine im schlimmsten Fall nicht-funktionale Moodle-Tour auf die Nutzer*innen eurer Moodle-Instanz losgelassen werden muss, sondern nur, dass euer Pragmatismus gefragt ist.

      In den grundlegenden Einstellungen der betrachteten Moodle-Tour "Startseite KB" wurde zunächst die am wenigsten restriktive Variante der Tour-Filter gewählt. Dies wird nun widerrufen und der Filter im Kontext der Rollen sehr eng definiert (hier: Administrator/in), so dass ausschließlich eine Handvoll Nutzer*innen in den Genuss der ungetesteten Tour kommt. Sobald zusätzlich der Haken bei "Geführte Tour aktiv" gesetzt oder das Auge-Symbol angeklickt wurde, können etwaige Fehler gefunden und dann ausgemerzt werden. 

      Anbei die Tour-Ansicht der Schritte 1/5, 4/5 und 5/5: 

      Um die Moodle-Tour mehrere Male zu durchlaufen, genügt ein Klick auf das Fragezeichen und den Button "Tour erneut starten". Ein "Zurück"-Button und somit die Möglichkeit der Rückwärtsnavigation existiert für Nutzertouren in Moodle für die Version 4.0 nicht. 

      Ist der Test erfolgreich abgeschlossen und die Moodle-Tour bereit, auf größeres Publikum zu treffen, kann diese durch eine neuerliche Anpassung des Tour-Filters "Rolle" für die Allgemeinheit freigeschaltet werden. Alle Nutzer*innen, die sich dann auf der Instanz einloggen, bekommen auf der Startseite die zugehörige Moodle-Tour einmalig angezeigt.


      Findet ihr unsere Tour zur Startseite spannend und möchtet euch davon in eurer eigenen Moodle-Instanz inspirieren lassen? Dann nichts wie rüber zum Abschnitt "Sammlung Moodle-Touren | NRW Moodle-Community"! Dort findet ihr nicht nur alle Touren von Moodle.NRW, sondern auch weitere Produkte aus der Community!


    • Learnings: Was hat sich bei der Erstellung der Moodle-Tour als besonders kniffelig herausgestellt?

      Die Erstellung einer Moodle-Tour hält einige Überraschungen bereit. Kenntnisse im CSS-Bereich sind durchaus von Vorteil, doch mit Kreativität und der notwendigen Beharrlichkeit können auch Nicht-IT-Personen ansprechende und vor allem funktionierende Nutzertouren erstellen! Nachfolgend werden einige "AHA"-Momente in ihrer Wertigkeit absteigend thematisiert.


      Kein Testmodus

      Die gewichtigste Problematik, die sofort ins Auge sticht, ist der Umstand, dass Moodle-Touren keinen Testmodus besitzen. Nur wenn die Tour aktiviert ist, ist ihre Erprobung in Gänze möglich. Unter Zuhilfenahme der Tour-Filter lässt sich dies jedoch umgehen. Wird der Filter im Kontext der Rollen kurzzeitig sehr eng definiert (z. B. über die Rolle "Administrator/in"), so dass ausschließlich eine Handvoll Nutzer*innen in den Genuss der ungetesteten Tour kommt, können Design und Funktionalität in Ruhe getestet und modifiziert werden.


      Auswahl des CSS-Selectors

      Die korrekte Auswahl des Zielelementes kann bei rudimentären CSS-Kenntnissen fehlerbehaftet sein. Das Prinzip "Trial and Error" leistet hier gute Dienste, genauso wie die Möglichkeit, über den Import externer Touren das ein oder andere "abgucken" zu können. 

      Extra-Tipp: Wird das Feld "Anzeigen, wenn Ziel nicht gefunden" mit "Ja" markiert, führt ein nicht korrekt gewählter Selector nicht direkt zum Scheitern der Tour.


      "Mit Hervorhebung anzeigen"

      So aktivierend die Möglichkeit, einzelne Tour-Schritte mit einem weißen Hintergrund zu versehen, auch ist, bei einigen Zielelementen, wie z. B. der Navigationsleiste, ist dies kontraproduktiv. Elemente werden durch weiße Flächen überlagert und sind nicht mehr in ihrer ursprünglichen Form erkennbar. Im Zweifelsfall also lieber die "second best"-Lösung ohne Hervorhebung fahren.


      Kleine Bildschirme / responsives Design


      Eine eher überraschende Erkenntnis war der Umstand, dass Moodle-Touren sperrig bei differierenden Bildschirmgrößen und Auflösungen agieren. Insbesondere dann, wenn sämtliche Blockspalten ausgeklappt sind und ein Zielelement in der Inhaltsspalte angewählt wird, kommt es zu unschönem Versatz insbesondere bei hervorgehobenen Elementen. Im Zweifelsfall also lieber auch hier die "second best"-Lösung ohne Hervorhebung fahren und einen möglichst granularen CSS-Selector wählen.


      Wenig Text / viel Bild


      Auch wenn in der Literatur zu Nutzertouren Konsens herrscht, dass wenig Text und viele visuelle Elemente die Abbruchquote bei Touren verringern können, und dieser Umstand der Erstellerin bekannt ist, ist es dennoch bemerkenswert, wie wenige Sätze in einer Tour bereits zu viel sind und wie wenig ansprechend reine Text-Schritte wirken. Sämtliche Texte wurden nach dem ersten Testlauf um die Hälfte zusammengekürzt und gestrafft sowie um visuelle Elemente ergänzt.