Das visuelle Design von E-Learning-Inhalten

Anfang 2012 erscheint das Buch „E-Learning, E-Teaching und E-Assessment in der Hochschullehre – Eine Anleitung“ im Oldenbourg-Verlag, herausgegeben von Jürgen Handke und Anna Maria Schäfer. Unser Team hat gemeinsam an diesem Buch geschrieben und ich möchte einen Teil des Kapitels an dem ich mitgearbeitet habe hier in meinem Blog als Leseprobe veröffentlichen. Das Thema Design ist im Zusammenhang mit E-Learning-Inhalten bislang immer etwas vernachlässigt worden und das möchte ich mit diesem Beitrag ändern. Der folgende Text ist Teil einer Liste von Kriterien, die für guten E-Learning-Inhalt erfüllt sein müssen. Mehr gibt es dann im Buch zu lesen. Viel Spaß beim Lesen und ich freue mich diesmal ganz besonders auf Feedback. [P.S.: Eine englische Übersetzung dieses Posts ist gerade in Arbeit.]

Benutzbar und zugänglich gestaltet

Wenn an dieser Stelle von Gestaltung die Rede sein soll, muss vorausschickt werden, dass es sich nicht um die didaktische Gestaltung von Lernmaterialien handelt. Vielmehr soll hier die visuelle Gestaltung von Lernumgebungen und ihr Einfluss auf Lernprozesse behandelt werden.

Häufig wird das visuelle Design bei digitalen Lernmaterialien vernachlässigt. Manchmal wird darauf verwiesen, dass die visuelle Gestaltung für den Lernprozess eine untergeordnete Rolle spielt, da die Lerner eher auf die Inhalte selbst achten, als auf die Art wie diese Inhalte gestaltet sind. Ob nun also die Schriftart Times New Roman gewählt wurde oder Arial ist nicht so wichtig, sondern was in dieser Schriftart niedergeschrieben wird. Das mag sicherlich richtig sein, greift aber zu kurz.

Am Beispiel von Arnold et al., die darauf hinweisen, dass Inhalte wichtiger sind als das Design (vgl. Arnold et al., 2011: 137), lässt sich verdeutlichen, dass eine klare Trennung zwischen didaktischer Gestaltung und visueller Gestaltung nicht vorgenommen wird. Das macht insofern Sinn, als dass beide Gebiete in starker Wechselwirkung miteinander stehen und oft nicht voneinander getrennt betrachtet werden können. Wenig hilfreich ist es jedoch, wenn visuelles Design als Beigabe betrachtet wird, denn es bezieht sich gerade im Web Design auf wesentlich mehr als „nur“ die reinen gestalterischen Aufgaben. Tatsächlich gibt es eine Reihe von Gründen, warum visuelles Design Einfluss auf den Lernprozess haben kann. Eine empirische Untersuchung dieser Zusammenhänge ist uns nicht bekannt, allerdings können viele Untersuchungen zum Verhältnis von Web Design und dem Erreichen eines bestimmten Zieles angeführt werden, die sich auf Lernprozesse übertragen lassen (vgl. u.a. Cooper et al., 2007:88-97; Nielsen/Loranger, 2006: VI/VIII; Saffer, 2007:VII; Tidwell, 2006:I).

Zentrale Begriffe im Web Design sind Benutzbarkeit (Englisch: usability) und Zugänglichkeit oder Barrierefreiheit (Englisch: accessibility). Beide Konzepte können durch Methoden der guten visuellen Gestaltung nachhaltig unterstützt werden und dadurch die Erreichbarkeit eines Ziels – hier also eines Lernziels – durch den Benutzer garantieren.

Benutzbarkeit

Die Benutzbarkeit von Webangeboten kann durch eine Reihe von Designaspekten beeinflusst werden, u.a. durch:

a) Typografie
b) Farbe
c) Layout
d) Navigation/Interaktion
e) Gestaltung multimedialer Elemente

Typografische Aspekte (a) spielen eine zentrale Rolle, da die Grundstruktur aller Inhalte im Web textueller Natur ist (siehe Abschnitt 7.1.1). Viele Regeln für eine gute typografische Gestaltung gelten für Webinhalte wie für Printmaterialien gleichermaßen. Genauso arbeitet man in beiden Gebieten mit Schriftgröße, Schriftart, Schriftauszeichnung, Absatzausrichtung etc. Wichtig ist, dass Typografie die Lesbarkeit – und sei es auch nur die gefühlte, wie Liebig herausstellt (INT1) – eines Textes unterstützt, damit die Erfassung der textuellen Information möglichst schnell geschieht (vgl. Ziefle, 2002). Für die Erfassung von textuellen Informationen ist die Strukturierung dieser Information in Überschriften, Absätze, Listen usw. nicht zu vernachlässigen.

Farbe (b) spielt im Design eine wichtige Rolle, da mit ihrer Hilfe emotionale und kulturelle Informationen transportiert werden können (Thissen, 2001:139). Sie spielt auch deshalb eine Rolle, weil die Aufnahme von Informationen von der Dominanz oder Zurückhaltung von Farbe abhängen kann. Daher sollte die Auswahl von Farben mit Bedacht geschehen und folgende Aspekte berücksichtigen:

  • angenehm/störungsfrei
    Eine für den Benutzer angenehme Farbgebung kann die Aufnahme von Informationen verbessern, wenn durch sie z.B. garantiert wird, dass die Lesbarkeit optimiert wird. Texte werden durch einen hohen Vordergrund-Hintergrund-Kontrast gut lesbar. Grelle Farben und Farbkombinationen haben hingegen einen unangenehmen Effekt (Tufte, 1990:82). Korrespondierend zu einer angenehmen Farbwahl ist natürlich auch zu garantieren, dass Farben nicht stören, wenn etwa bestimmte Farben den falschen Elementen zugeordnet werden. Eine grelle Hintergrundfarbe wird sehr wahrscheinlich als störend bei der Aufnahme von textuellen Informationen empfunden.
  • ansprechend
    Eine ansprechende Farbgebung ist von Bedeutung, da durch sie eine emotional positive Basis für das Arbeiten mit den Inhalten gelegt wird. Dabei ist allerdings die Zielgruppe der Inhalte zu beachten. Was als ansprechend gilt, ist von einer Reihe demographischer Faktoren abhängig (Tullis et al., 2005:123).
  • unterstützend
    Farbe kann dazu benutzt werden, präattentive Wahrnehmung zu unterstützen (Tidwell 2006:163). Durch Einsatz von farbigen Elementen kann die Struktur von Informationen verdeutlicht werden, bevor der Benutzer die Informationen selbst kognitiv aufnimmt. Hier kann Farbe also benutzt werden, um Hierarchien sichtbar zu machen oder gegebenenfalls besonders wichtige Elemente hervorzuheben.
  • kontextsensitiv
    Allgemein lässt sich feststellen, dass die Farbwahl vom Kontext abhängt. Die Hintergrundfarbe Rot wirkt kontraproduktiv bei normalem Fließtext. Soll eine Fehlermeldung besonders ins Auge fallen, gelingt dies aber besonders mit einem roten Hintergrund. Farben sind also gemäß dem thematischen Kontextes zu wählen (Wendt, 2003: 231).

Das Layout (c) einzelner Seiten des digitalen Angebots sollte möglichst konsistent gehalten werden, in dem Sinn, dass gleiche Elemente an der gleichen Stelle zu finden sind. Benutzer finden sich besser und schneller auf Websites zurecht, wenn ihre Erwartung erfüllt wird, an welcher Stelle sich z.B. die Navigationselemente befinden. Das Layout einer einzelne Seite sollte grundlegenden Designregeln zum Layout genügen. Die Anordnung einzelner Elemente in ein konsistentes Layout ist ihrer Aufgabe entsprechend zu bestimmen. Wichtig ist auch, dass eine Zuordnung zusammengehöriger Elemente z.B. durch räumliche Nähe möglich ist. Klare Linien innerhalb des Layouts erhöhen die Übersichtlichkeit und verbessern die Erfassung der präsentierten Informationen (vgl. Hammer, 2008:5.3).

Das Zurechtfinden in einem Hypermediasystem entscheidet darüber, ob der Benutzer die vorliegenden Informationen erfassen kann und ob seine Motivation das System zu benutzen, über längere Zeit aufrecht erhalten werden kann. Idealerweise muss sich ein Lerner nicht mit der Navigation (d) beschäftigen, sondern kann sich intuitiv durch das System bewegen (vgl. Tidwell, 2006:55). Cooper et al. stellen eine Reihe von Regeln für die Navigation auf, die wichtig für eine reibungslose Benutzung eines Hypermediasystems sind (Cooper et al., 2007:237) und die hier auf ein Hypertextsystem übertragen werden sollen, das für das Lernen benutzt wird:

  • die Anzahl der Orte reduzieren, zu denen man gelangen kann
    Der Lerner muss von Anfang erkennen können, wie umfangreich die Lerneinheit ungefähr ist, damit er einschätzen kann, wie lange es dauert, bis er alle Informationen aufgenommen hat. Je mehr Orte er erreichen kann, desto eher stellt sich das Gefühl der Verlorenheit ein.
  • Wegweiser bereitstellen
    Der Lerner muss sich innerhalb der Lerneinheit orientieren können, um zu sehen, wie er von einer Information zu nächsten und gegebenenfalls wieder zurück kommt. Dazu eignen sich grafische Elemente besonders (siehe Abschnitt 7.1.2).
  • Übersichten präsentieren
    Der Lerner muss erkennen können, welche einzelnen Schritte zum Erfassen einer Lerneinheit notwendig sind und um wie viele Schritte es sich handelt. Idealerweise geschieht dies von vornherein inhaltlich, z.B. mit Hilfe von Leitfragen.
  • Kontrollelemente entsprechend ihrer Funktion gestalten
    Aus dem Design von Kontrollelementen, etwa zur Navigation oder dem Abspielen von Multimedia-Inhalten, muss klar hervorgehen, welche Funktion sie haben. Dabei kann auf gängige Symbolik im Computerbereich zurückgegriffen werden, wenn zum Beispiel ein Abspielbutton ein Dreieck abbildet, das nach rechts zeigt.
  • Schnittstelle an die Bedürfnisse des Benutzers anpassen
    Die Benutzerschnittstelle, also mit anderen Worten die Lernumgebung, sollte so gestaltet sein, dass sie den Bedürfnissen des Benutzers nach einer reibungslosen Navigation durch die Lernumgebung entgegen kommt. Dazu gehören etwa eine Gruppierung von Elementen mit ähnlicher Bedeutung und eine Reduzierung der Anzahl von Elementen auf das Nötigste.
  • Hierarchien vermeiden
    Zwar sind Hierarchien inhaltlich gesehen sehr oft notwendig, häufig sogar unerlässlich für die Aufnahme von Informationen. Im Zusammenhang einer Lernumgebung garantiert eine flache Hierarchie jedoch, dass die einzelnen Informationsteile gleich schnell erreichbar sind und nicht „versteckt“ werden.

Bei der Gestaltung multimedialer Elemente (e) ist darauf zu achten, dass sie grundsätzlich Benutzereingriffe ermöglichen. Ein Videosoll daher nicht selbstständig ablaufen, ohne dass man es stoppen oder die Lautstärke regeln könnte. Darüber hinaus sollten sie kontextsensitiv gestaltet werden, also nicht nur thematisch sondern auch im Hinblick auf Designgrundlagen in ihre Umgebung passen. Wie bei jedem grundlegenden E-Learning-Element gilt auch hier, dass die Gestaltung zielgruppenorientiert sein muss.

Zugänglichkeit

Zwar ist das Konzept der Zugänglichkeit meist vor allem so gemeint, dass Personen mit Behinderung ein Webangebot benutzen können und Informationen nicht in Formaten „versteckt“ sind, die für diese Personen nicht zugänglich sind. Wenn Informationen also in einer Grafik gespeichert sind und ein beschreibender Text zu dieser Grafik fehlt, können sehbehinderte Menschen diese Information nicht erreichen. Man kann aber aus der Zugänglichkeit von Webangeboten auch einen Vorteil für nicht behinderte Menschen ableiten. Sieht man sich Elemente aus den Spezifikationen an, die das World Wide Web Consortium (W3C) für Barrierefreiheit vorschlägt, findet man viele Elemente, die auch für die didaktische Gestaltung Geltung haben (http://www.w3.org/WAI/intro/wcag.php). Besonders die „Four Prin­ciples of Accessibility“ bieten eine gute Grundlage für die Erstellung von Inhalten:

Perceivable – Information and user interface components must be presentable to users in ways they can perceive. This means that users must be able to perceive the information being presented (it can’t be invisible to all of their senses)

Operable – User interface components and navigation must be operable. This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)

Understandable – Information and the operation of user interface must be understandable. This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)

Robust – Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible). (INT2)

Werden diese Prinzipien auf jede Art von Inhalten sowohl technisch als auch inhaltlich übertragen, kann davon ausgegangen werden, dass die Informationen, die transportiert werden sollen, bei der großen Mehrheit der Anwender ankommen.

Quellen

Arnold, Patricia/Kilian, Lars/Thillosen, Anne/Zimmer, Gerhard. 2011. Handbuch E-Learning. Bielefeld: WBV.

Cooper, Alan/Reimann, Robert/Cronin, David. About Face 3. 2007. The Essentials of Interaction Design. Indianapolis: Wiley Publishing.

Hammer, Norbert. 2008. Mediendesign für Studium und Beruf. Grundlagenwissen und Entwurfssystematik in Layout, Typografie und Farbgestaltung. Berlin: Springer Verlag.

Nielsen, Jakob/Loranger, Hoa. 2007. Prioritizing Web Usability. Berkeley: New Riders.

Saffer, Dan. 2007. Designing for Interaction: Creating Smart Applications and Clever Devices. Berkeley: New Riders.

Thissen, Frank. 2001. Screen-Design-Handbuch. Berlin: Springer Verlag.

Tidwell, Jenifer. 2006. Designing Interfaces. Patterns for Effective Interaction Design. Sebastopol: O’Reilly.

Tufte, Edward R. 1990. Envisioning Information. Cheshire: Graphics Press.

Tullis, Thomas S./Catani, Michael/Chadwick-Dias, Ann/Cianchette, Carrie. 2005. Presentation of Information. In: Proctor, Robert/Vu, Kim-Phuong L. (Hrsg.). Human Factors in Web Design. Mahwah: Lawrence Erlbaum Associates.

Wendt, Matthias. Praxisbuch CBT und WBT. 2003. Konzipieren, entwickeln, gestalten. München: Hanser.

Ziefle, Martina. 2002. Lesen am Bildschirm. Eine Analyse visueller Faktoren. Münster: Waxmann Verlag.

[INT1] Liebig, Martin. Die gefühlte Lesbarkeit.

[INT2] http://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s