Gestaltungstipps

Orientierung – klare Struktur – Benutzerfreundlich – Lernförderlich

... dies sollten die Zielstellungen einer Moodle-Kursgestaltung sein. Ist der Kurs auch noch optisch ansprechend gestaltet – umso besser!

Wir möchten Ihnen hier ein paar Tipps geben und teilweise recht einfache Mittel aufzeigen, die hilfreich für eine gute Kursgestaltung sein können. – Navigieren Sie hierzu einfach durch das Inhaltsverzeichnis. Öffnen Sie dafür rechts die Blockleiste, falls sie noch nicht sichtbar sein sollte.

Bildquellen: 
links: Andreas Lischka (webandi) auf pixabay.com / CCO 1.0
rechts: https://pxhere.com/en/photo/1281088 / CC0

Strukturieren Sie Ihre Abschnitte mit Zwischenüberschriften

Hierfür können Sie das Text- und Medienfeld nutzen. 

Nutzen Sie das Beschreibungsfeld von Materialien und Aktivitäten

Beispielsweise für kleine Hinweise, die Orientierung geben, was wie zu tun ist. Aktivieren Sie gegebenenfalls, dass die Beschreibung auch im Kurs angezeigt wird. Damit sind die Hinweise nicht erst sichtbar, wenn auf die Aktivität geklickt wird, sondern bereits beim Drüberschauen über die Kursseite. 

Geben Sie allen Materialien, Aktivitäten und Abschnitten "sprechende" Titel

D.h. aus den Benennungen wird schnell klar, was sich dahinter verbirgt.

Nutzen Sie die Formatvorlagen, die Ihnen im Editor in Moodle zur Verfügung stehen

Beispielsweise um Überschriften und Absätze einheitlich zu gestalten, aber auch Tabellen oder Gleichungen / Formeln maschienenlesbar zu machen. Dies ist im Übrigen auch ein kleiner, aber wichtiger Schritt, um digitale Barrierefreiheit umzusetzen, da die Formatierungen beispielsweise von einem Screen-Reader erkannt, angesteuert und entsprechend ausgelesen werden können.

TIPP:

Für ein einheitliches Schriftbild passen Sie bei Copy&Paste von Texten auf, dass Sie nicht unterschiedliche Schriftformatierungen "mitnehmen". Entweder Sie nutzen dabei als "Zwischentool" einen einfachen Texteditor (z.B. das Notepad bei Windows). Der Text wird erst einmal dort reinkopiert. Dabei gehen die Formatierungen verloren. Dann kopieren Sie den unformatierten Text in den Editor in Moodle und können dort "ganz sauber" die Formatvorlagen anwenden.

Bzw. nutzen Sie folgende hilfreiche Funktionen im Moodle-Editor:

Multimediale & Interaktive Inhalte einbinden

Im Abschnitt "Inhalte / Material bereitstellen" können Sie erkunden, welche Möglichkeiten Sie haben, Inhalte auch multimedial und interaktiv in einem Moodle-Kurs einzubinden. Beispielsweise ist die Aktivität "Lernpaket" prädestiniert dafür, um ganze Lerneinheiten im Kurs einzubinden, die vorher mit einem externen Autorentool attraktiv und multimedial erstellt wurden und von Studierenden interaktiv bearbeitet werden können.

Letzlich kann aber auch innerhalb von Moodle überall dort, wo der Editor genutzt werden kann, entsprechender medialer Inhalt eingebettet werden. Das können Bilder, Skizzen, Audio, Video oder auch H5P-Inhalte sein. Somit können Textseiten in einem Moodle-Kurs oder auch das Buch oder die Lektion multimedial und interaktiv aufbereitet werden. 

Über das "Text- und Medienfeld" ist dies sogar direkt auf der Kursseite innerhalb der jeweiligen Abschnitte möglich. JEDOCH sollte man hierbei darauf achten, nicht zu viele multimediale Inhalte direkt auf der Kursseite einzubetten, weil dies sonst zu längeren Ladezeiten sowie langem Scrollen der Seite führen kann.

Auf den nächsten Seiten finden Sie Beispiele und Hinweise zur Umsetzung für die Einbettung von Bildern, Audio, Video und H5P-Inhalten mit Hilfe des Moodle-Editors.

Screenshot: Werkzeugleiste des Moodle-Editors (Mehr Infos in der Moodle FAQ: Funktionsumfang des TinyMCE-Text-Editors)

Einbettung von Bildern

Bilder sind ein gutes Mittel, um einen Moodle-Kurs optisch ansprechend zu gestalten sowie Inhalte zu veranschaulichen und somit einen multimedialen Zugang zu diesen anzubieten. Bilder können auch sehr leicht über den Editor in Moodle eingebunden werden.

Trotzdem sollten Sie bei der Einbindung von Bildern auf zwei Dinge achten:

1. Vermittelt das Bild inhaltliche Informationen oder dient es nur der Dekoration? – Markieren Sie dies entsprechend beim Upload des Bildes. Dies ist wichtig für die digitale Barrierefreiheit.
2. Wählen Sie bewusst die Größe und Positionierung des Bildes.

Bildgröße:

Bilder werden in Moodle automatisch skaliert. Dabei werden die Maximal-Pixelmaße, die das Bild bietet, auch dargestellt, sofern es die Bildschirmauflösung der Nutzer/innen hergibt. Deshalb sollte bei großer Originalauflösung eines Bildes gegebenenfalls eine kleinere "Angepasste Größe" eingestellt werden, da es sonst zur überproportional großen Darstellung des Bildes kommen kann, insbesondere wenn es in den Textfluss rechts- oder linksbündig eingebunden ist. Bei kleineren Bildschirmauflösungen der Nutzer/innen wird das Bild automatisch herunterskaliert. 

• Bilder/Grafiken, die viele Informationsdetails beinhalten (z.B. Schaubilder), sollten eher groß eingebunden werden (Empfehlung: Maximalbreite des Bildes braucht nicht größer als 1300px sein). Alternative kann hier auch sein, das Bild in einer viel kleineren Größe einzubinden und das Bild als Link zu definieren bzw. neben das Bild einen Link zur vergrößerten Ansicht des Bildes zu setzen. Die Verlinkung führt auf die große Originalauflösung des Bildes. Damit wird das Schaubild als Informationsquelle verdeutlicht ohne zu viel Dominanz in der Gesamtgestaltung der Seite einzunehmen.
• Für Bilder/Grafiken, die eher zur Dekoration/Motivation eingebunden werden, sollte man abwägen wieviel Raum sie in der Gesamtgestaltung einer Seite wirklich benötigen. Beispielsweise braucht eine Comicart-Zeichnung ohne viel Details sicherlich keine 1300px Breite.

Positionierung des Bildes:

Es wird empfohlen große Bilder NICHT in den Textfluss mit der Einstellung rechts- oder linksbündig einzubinden. Das Bild am besten einfach über oder unter dem Textabschnitt einfügen (gegebenfalls die Einstellung zentriert vornehmen). 

Ansonsten kann der Textfluss bei kleinen Bildschirmauflösungen (z.B. Anschauen auf dem Smartphone) "unschön" und schlechter lesbar zusammengestaucht werden.

Beispiel für Text-Bild-Kombination mit rechtsbündig gesetztem Bild: 

Der folgende Abschnitt widmet sich schwerpunktmäßig dieser Konzeption und soll Sie auf den ersten Schritten von der Idee bis hin zur Konzeptentwicklung begleiten. 

Inhalte in diesem Abschnitt:

• Ideenfindung und Weiterentwicklung
• Ausarbeitung und mediendidaktische Konzeption von X
  
  • Didaktische Überlegungen und Schritte zu Rahmenkonzept, Zielgruppe, Lerninhalten und Lernzielen
  • Methodenauswahl & Entwicklung einer narrativen Struktur

So würde das Beispiel auf einem Smartphone-Bildschirm aussehen:

Man sieht, dass der Text neben dem Bild zusammengestaucht wird. Das Bild könnte also etwas kleiner sein oder sollte nicht neben dem Text (rechtsbündig) eingebunden sein.

Beispiel für Text-Bild-Kombination mit verlinktem Schaubild:

Im Organigram der TU Darmstadt erfahren Sie, welche Fachbereiche sowie interdisziplinäre Einheiten (Forschungsfelder, Studienbereiche etc.) und zentrale Einrichtungen es an der Universität gibt. Ebenso finden Sie die einzelnen Dezernate aufgelistet und erfahren, wofür diese jeweils zuständig sind.

Vergrößerte Ansicht des Organigramms

Auf der TU-Website "Organisation" finden Sie weitere hilfreiche Infos u.a. auch zu Gremien und Hochschulgruppen innerhalb der Universität.

Einbettung von Audio & Video

Um Audio (z.B. Podcasts) und Video von externen Quellen einzubetten, kann der Einbettungscode genutzt werden, der auf den meisten Plattformen über die "Teilen" bzw. "Share"-Funktion angeboten wird. Dieser <iframe>-Code wird einfach in der "Quellcode"-Ansicht des Moodle-Editors eingefügt:

Beispiel Audio-Einbettung

Hier wurde der Einbettungscode zum Podcast in der "Quellcode"-Ansicht des Moodle-Editors eingefügt.

Beispiel Video-Einbettung

Auch dieses YouTube-Video wurde mit Hilfe seines Einbettungscodes auf dieser Seite eingebettet. Es gibt noch weitere Varianten wie man Videos einbetten kann. Diese finden Sie in der Moodle FAQ: Externe Videos einbetten. 

Beim folgenden Video handelt es sich um ein eigenes Video, das auf Panopto – der Videoplattform der TU – gespeichert ist. Hier erfolgte die Einbettung mit Hilfe des "Panopto-Button" im Editor. Siehe auch Moodle FAQ: Eigene Videos bereitstellen (Panopto).

Einbettung von H5P-Inhalten

Mit H5P können Lerninhalte zur Verfügung gestellt werden, die multimedial gestaltet sind und von Studierenden interaktiv bearbeitet werden können. H5P-Inhalte können nicht nur als einzelne Aktivitäten im Moodle-Kurs zur Verfügung gestellt werden, sie können auch auf Textseiten oder beispielsweise im Buch (wie dieses hier) eingebettet werden.

Unten auf dieser Seite sehen Sie ein Beispiel des H5P-Inhalttyps "Column", in dem verschiedene Inhaltselemente, wie z.B. Bild, Text, Quiz-Frage, miteinander kombiniert werden können. Der H5P-Inhalt wurde erst als Paketdatei im "Inhaltsspeicher" des Kurses hochgeladen (alternativ kann der H5P-Inhalt auch direkt dort erstellt werden – siehe Moodle FAQ: Lerninhalte mit H5P). Dann wurde er über den "H5P"-Button im Moodle-Editor auf dieser Buchseite eingebettet:

HINWEIS: Bei H5P-Inhalten, die auf diese Weise über den Moodle-Editor an beliebigen Stellen im Moodle-Kurs eingebettet sind, werden Bewertungen aus Quiz-Fragen nicht in die zentrale Bewertungsübersicht des Moodle-Kurses übertragen. Bei H5P-Inhalten, die per H5P-Aktivität eingebunden sind, werden die Bewertungen übertragen.

Beispiel H5P-Inhalt (Typ "Column") zum Thema "Kon-Tiki":

Quelle: https://h5p.org/column