100%
Ihr Fortschritt auf der gesamten Seite
Auf dieser Seite erfahren Sie, warum diese Website so aussieht, wie sie aussieht. Um dabei einen tieferen Einblick in die Konzeption zu bekommen, können Sie auf die grauen Kästen klicken. Dort verstecken Sich noch viele zusätzliche Informationen.
Konzeption dieser Website
Das Design orientiert sich stark an den Richtlinien des Learning-Experience-Designs (LXD), dessen oberste Regel besagt:
Das Interface muss vollkommen hinter dem Lerninhalt zurücktreten.
Wann immer man sich auf einer Website, die sich dem vermitteln von Wissen verschrieben hat, von dem User-Interface abgelenkt wird, wurden im Design grobe Fehler gemacht. Aus diesem Grund ist die Frage, die sich ein LX-Designer kompromisslos stellen muss: „Was brauche ich wirklich?“ Kein Element der Benutzeroberfläche sollte dort stehen, weil es schön aussieht, sondern weil es einen bestimmten lernfördernden Effekt hat.
Wenn sie auf die folgende Leiste klicken, können Sie sich über die wichtigsten Richtlinien des LX-Designs informieren.
Prinzipien des LX-Designs
Generell ist Literatur zu offiziellen Richtlinien, das Design von digitalen Lernerfahrungen betreffend, recht rar. Bei meiner Recherche bin ich auf Dorian Peters von der University of Sydney gestoßen, die sich vor allem mit dem, was sie „Interfacedesign for Learning“ nennt, beschäftigt. Ihre Herangehensweise ist für meine Arbeit deshalb so wertvoll, weil sie sich nicht auf spezifische, digitale Lernanwendungen wie Schulcomputer-Programme oder ähnliches beschränkt, sondern versucht, grundsätzlichere Regeln für ein Interface-Design von Lernanwendungen zu finden. Aus diesem Grund konnte ich ihre Erkenntnisse sehr gut als Grundlage für mein weiteres Vorgehen verwenden. Im Folgenden sollen die in Peters’ Buch Interfacedesign for Learning erläuterten Prinzipien für LXD stichpunktartig dargestellt werden.
Grundsätzliches
Eine Website kann noch so informativ und hochqualitativ sein - wenn sie unprofessionell gestaltet ist, wird sie als Wissensquelle von Anfang an als weniger seriös und vertrauenswürdig eingestuft.
Look und Feel des Interface sollten dem Thema und der Zielgruppe angemessen sein.
Der Fokus des Lerners liegt stets auf dem Bekannten. Wird bei der Gestaltung von wichtigen Teilen des Interface zu radikal innovativ gedacht, ist es wahrscheinlich, dass wichtige Informationen auf der Strecke bleiben.
Selbstbestimmtes Lernen gilt als äußerst effektiv. Dort werden dem Lernenden selbst Freiheiten zum Entdecken und aktiven Lernen gegeben, anstatt ihn in einer schlauchartigen Struktur von Lektion zu Lektion zu leiten.
Die Lerninhalte sollten in einer bekannten Situation präsentiert werden und beim Lerner Assoziazionen erzeugen, um den Lehrstoff mit dem echten Leben zu verknüpfen und ihn so in einen größeren Zusammenhang einzubetten. (Situated Learning)
Mentale Hürden im Interface sind nur zulässig, solange sie absichtlich platziert werden, um dem Lernenden zum Beispiel eine Verschnaufpause oder Zeit zur Reflexion des Gelernten zu gewähren.
Der User darf niemals ratlos alleine gelassen werden. Es muss ihm stets ein nächster Schritt präsentiert werden.
Anweisungen in Textform sollten möglichst vermieden werden. Stattdessen ist es oft möglich und deshalb ratsam, den aktuellen Kontext zu Erklärungszwecken zu nutzen. „Die Menge an Hilfe, die nötig ist, um erfolgreich mit einem Design zu interagieren, ist umgekehrt proportional zur Qualität des Designs.“
Der Pfad der Interaktion und der Benutzerforschritt sollten stets sichtbar sein. Das hilft bei der Orientierung im Lernvorgang und motiviert zum Weitermachen.
Gegen kognitive Überlastung
Wie aus der Theoriearbeit ersichtlich wurde, muss stets darauf geachtet werden, das Arbeitsgedächtnis nicht zu überlasten und den Lernenden möglichst wenig ablenkenden Reizen auszusetzen. Auf dieses Ziel, das Usability-Experte Steve Krug mit Don’t make me think beschreibt, arbeiten alle folgenden Regeln hin:
Das Interface muss maximal reduziert werden. Es sollte so weit in den Hintergrund rücken, dass das Gehirn des Users absolut frei für den Inhalt der Website ist. Aus diesem Grund sind Dinge wie eine Mystery-Meat-Navigation, deren Funktion sich nicht intuitiv erschließt, grundsätzlich zu vermeiden.
Da eine Kombination aus Text und Bild mehr Lernerfolg verspricht, ist die Benutzung von Grafiken sehr sinnvoll. Diese müssen jedoch ständig auf ihre Relevanz und Daseinsberechtigung überprüft werden: „Relevante Grafiken sind diejenigen, die dem Lernenden helfen, die Lerninhalte zu verarbeiten und zu interpretieren oder dabei helfen, sich auf Lernaktivität einzulassen.“ (Pos.1558, Strategies to reduce overload) Dabei müssen Fragen gestellt werden wie: „Was ist der Zweck dieser Grafik? Hilft das Design, den visuellen Fokus auf die wichtigen Stellen zu lenken?“
Es kann dabei unterschieden werden zwischen:
Relationalen Grafiken
zeigen, wie Dinge zusammen hängen (z. B. vergleichende Graphen)
Grafische Ordner
strukturieren die Konzepte einer Lektion
Sich verändernde Grafiken
zeigen Veränderung über einen bestimmten Zeitraum
Sichtbar machende Grafiken
Magnetlinien, atomare Strukturen, globale Geldströme
Kontext schaffende Grafiken
Ein Interface im Piratendesign, eine virtuelle Welt
Die Grafiken und Bilder, die nach dieser Prüfung übrig geblieben sind, müssen nun, wo immer möglich, auf ihre grundsätzliche grafische Essenz reduziert werden. Fotos beinhalten sehr viel zusätzliche visuelle Information, die die Kapazitäten des Users unnötig belasten. Deshalb gelten hier folgende Richtlinien:
Da das Erkennen von Dingen an deren Kanten beginnt, sollten möglichst Umrisszeichnungen, Silhouetten oder Icons verwendet werden. An diese erinnert man sich besser als an Bilder. Außerdem bleibt bei dieser Reduktion nur die Information übrig, die für die Lerninhalte wichtig ist.
Der Hintergrund sollte dafür entfernt werden, Beschriftungen stets lesbar, prägnant und konsistent sein. Falls Komplexität in den Grafiken nötig ist, muss sie langsam gesteigert werden. Oft ist es in diesem Fall sinnvoll, komplexe Grafiken in mehrere Teile aufzuteilen und einzeln zu erklären. Dann sollte jedoch zuallererst der Zusammenhang klargemacht werden. Aufgrund der begrenzten Kapazität des Arbeitsgedächtnisses wird von der Nutzung von mehr als vier Teilgrafiken zur Erklärung eines einzigen Sachverhalts abgeraten.
Datengrafiken sollten auf ähnliche Weise minimalisiert werden: Gitternetzlinien sind möglichst zu entfernen, auszugrauen oder zu verringern. Bei Symbolen bietet sich die Benutzung von Formen an, die mehr als eine Sache gleichzeitig beschreiben können. Ein Punkt in einer Datengrafik kann beispielsweise Inhalte sowohl über seine Position, seine Größe, als auch durch seine Farbe beschreiben. Rollover-Hotspots sind außerdem eine gute Methode, viele Informationen in einer Grafik unterzubringen, ohne sie visuell zu überladen.
Sofern möglich, sollten Dinge immer direkt beschriftet werden, um den Benutzer nicht durch eine Fußnote aus dem Lernfluss zu reißen. Aus diesem Grund ist es ratsam, auch Texte und Beschriftungen immer direkt an der entsprechenden Grafik zu platzieren.
Um Verwechslungsgefahr auszuschließen und damit Irritation und Verwirrung des Users zu vermeiden, ist bei visuellen Elementen stets auf ausreichende Unterschiedlichkeit zu achten.
Da wissenschaftlich nachgewiesen wurde, dass leicht lesbare Aussagen als besonders glaubwürdig empfunden werden, liegt es im Interesse jedes Learning-Interface-Designers, diese Lesbarkeit zu gewährleisten. Dafür sollte niemals eine Schriftgröße unter 10 Punkt eingesetzt werden oder die Zeilenlänge 100 Zeichen überschritten werden. Studien haben gezeigt, dass sogar eine Zeilenlänge von nur 47 bis 72 Zeichen als besonders angenehm empfunden wird. Der Einsatz von Serifenschriften stellt auf modernen Bildschirmen mittlerweile kein Problem mehr dar und bringt die gleichen Vorteile wie im Buchdruck mit sich.
Steuerung der Aufmerksamkeit
Um die Aufmerksamkeit des Benutzers zu lenken, stehen dem LX-Designer einige Werkzeuge zur Verfügung: Farbe (Sättigung), Größe, Textur, Platzierung (links oben wichtiger als rechts unten) und Tiefe (vorne wichtiger als hinten). Das Musterbeispiel der hierarchischen Vermittlung mehrerer Informationsebenen unter Einsatz all dieser Mittel, stellt die Karte der Londoner U-Bahn dar. Dort werden sowohl die Stadt, als auch das gesamte Netz, die U-Bahn-Linien und Stationen intuitiv dargestellt.
Da Bewegtbild die Aufmerksamkeit des Menschen in extremem Maß auf sich lenkt, muss es sehr vorsichtig, wenn überhaupt, eingesetzt werden, weil es sonst zu massiver Ablenkung und Irritation des Benutzers kommen kann.
Für den Einsatz von Farben ist es zudem ratsam, im Hochkontrast-Bereich zu bleiben, damit farbliche und somit meist inhaltliche Unterschiede klar erkennbar werden. Außerdem sollten so wenig verschiedene Farben wie möglich eingesetzt und auf die relative Wechselwirkung mit den Umgebungsfarben geachtet werden. Mögliche Farbenblindheit des Benutzers sollte stets im Hinterkopf behalten werden und deshalb bei wichtigen Funktionen immer auch ein sekundäres, nichtfarbliches Signal platziert werden (Textur, Symbol, etc.).
Soziales und emotionales Lernen
Es wurde nachgewiesen, dass Lernen in einem sozialen Kontext effizienter vonstatten geht. Daher sollte versucht werden, eine direkte, persönliche Interaktion bereitzustellen oder zumindest zu simulieren. Das ist entweder durch das Einbauen eines virtuellen Agenten (als erklärende oder motivierende Instanz) oder schon durch so einfache Methoden wie das Verfassen von Texten in der Ich-Form möglich.
Emotional aufgeladene Informationen bleiben besonders eindrucksvoll im Gedächtnis. Deswegen kann die Motivation zum Beispiel durch Belohnungssysteme effektiv gesteigert werden.
Gutes, sauberes und offenes Design einer Anwendung oder Website führt zu einem guten Gefühl bei der Benutzung, wodurch die Kreativität und Lernbereitschaft des Users steigt. Verwirrendes und damit schlechtes Design bewirkt jedoch eine Stressreaktion, die wiederum in einem verengten Fokus und Tunnelblick resultiert.
Solch ein gutes Gefühl beim Lernen kann durch die Schaffung einer Umgebung zum sicheren Experimentieren, Korrigieren von Handlungen und Löschen von falschen Ansätzen erschaffen werden. Dorian Peters spricht von der Entwicklung von warmen, süßen, hellen, besänftigenden, symmetrischen, runden, glatten oder weichen Erfahrungen. Außerdem ist das visuelle Vermitteln von Anwesenheit des Autors von Vorteil. Kleine visuelle Späße und Eastereggs lockern die Lernerfahrung zusätzlich auf.
Es sollte jedoch darauf geachtet werden, den User nicht zu unterfordern. Das führt nur zu Langeweile und damit zur Steigerung der Ablenkbarkeit. Ebenso sollte die Schwierigkeit nicht ständig nur gesteigert werden. Das Einweben von leichten Übungen führt dem Benutzer seinen Forschritt vor Augen. Dieser sollte auch auf visuelle Art von Zeit zu Zeit gekennzeichnet werden. Zudem kann die Motivation dadurch gesteigert werden, dass die Bedeutung des Gelernten für die echte Welt aufgezeigt wird. Da die Menschen von Natur aus eine Spezies der Geschichtenerzähler sind, ist es einfach, den User durch eine thematisch relevante Geschichte emotional an den Lernstoff zu binden. Spielerische Anweisungen entspannen den Lernenden bei der Bearbeitung komplexer Sachverhalte und erzeugt erneut die Illusion direkter menschlicher Interaktion.
Da diese Grundregeln des Learning-Experience-Designs jedoch hauptsächlich mit Augenmerk auf Lernerfahrungen aufgestellt wurden, die von der “Realität” des Internet separiert stehen, ist es unerlässlich, hier ebenfalls noch die Prinzipien des generellen Interaktionsdesigns vorzustellen. Dafür habe ich die berühmten, von Bruce Tognazzini aufgestellten Grundsätze gewählt.
Prinzipien des UI-Designs
Tognazzini war unter anderem Interface-Designer für Apple, Sun Microsystems und WebMD und hält über 50 Patente im Bereich der Mensch-Computer-Interaktion. Seine Grundsätze des Interaktionsdesigns überschneiden sich teilweise mit den oben beschriebenen, jedoch werden auch einige wertvolle Ergänzungen gemacht.
Autonomie
Eine Umgebung schaffen, die erforschbar,
aber nicht riskant ist.
Informationen über den Status des aktuellen Vorgangs im Sichtweite halten.
Nie nur auf Farben verlassen (10% aller Männer sind farbenblind).
Große Buttons für wichtige Funktionen.
Konsistenz
Auf strikte Konsistenz achten.
Benutzerverhalten muss immer die gleichen Auswirkungen haben.
Unterschiedliches Verhalten muss durch unterschiedliches Aussehen ausgedrückt werden.
Es muss herausgefunden werden, welches Verhalten Nutzer von der Seite erwarten.
Entdeckbarkeit
Zu simple Interfaces erhöhen den Grad der Verwirrung und dadurch die Komplexität.
Was der User nicht finden kann, existiert nicht.
Wichtige Funktionen sollten immer sichtbar sein.
Usereffizienz
Immer den User im Kopf haben, nicht die Effizienz der Programmierung.
Den User beschäftigt halten (keine Wartezeiten).
Fehlermeldungen müssen hilfreich sein.
Entdecker-Interfaces
Nutzer nicht in einen Pfad zwängen, sondern den Entdeckergeist zulassen und fördern.
Stabile visuelle Signale geben dem Nutzer ein Gefühl
von Heimat.
Aktionen müssen umkehrbar sein.
Es muss immer einen Weg heraus geben
(User nicht gefangen halten).
Lesbarkeit
Höchster Kontrast für Text, der gelesen werden MUSS.
Bei Zahlen auf maximale Lesbarkeit achten.
Das Design immer an den ältesten Nutzern der Zielgruppe testen.
Einfachheit
Usability nicht der Vereinfachung opfern.
Keine Vereinfachung durch das Entfernen notwendiger Funktionen.
Sichtbare Navigation
Navigation auf ein Minimum reduzieren.
Immer aktuellen Ort markieren.
Breadcrumb Navigation einfügen, falls der Weg komplex ist.
Diese Prinzipien dienten zusammen mit den Grundlagen des Learning-Experience-Designs als Basis für die Ausarbeitung der Gestaltung der Website.
Typografie
Die oberste Maxime der Typografie auf Webseiten mit Informationsfokus ist die Implementierung von angenehm und leicht lesbarem Text. Die Grundlagen des LXD von Dorian Peters empfehlen lediglich eine Schriftgröße von über 10 Punkt (etwa 13px oder 0.8em) sowie eine Zeilenlänge von 47 bis 72 Zeichen. Bruce Tognazzini schreibt, ein Design solle stets am ältesten Benutzer der Zielgruppe getestet werden. Das gilt speziell für die Darstellung von Text. Die Recherche auf den Zeitungsseiten von den Online-Auftritten der Zeitungen Zeit, Guardian und New York Times war dabei eine große Hilfe. Auf seriösen Seiten hat sich mittlerweile größtenteils wieder der Einsatz von Serifenschriften eingebürgert, die meist in Größen zwischen 16px und 20px bei einem Zeilenabstand von 24px bis 30px benutzt werden. Als Schriftart haben ich mich für die PT-Serif von Paratype entscheiden. Diese Fontfamilie ist sehr gut ausgebaut und verfügt über ein sehr gleichmäßiges, angenehmes und dennoch seriöses Schriftbild im Mengentext.
Zum Vergleich habe ich hier den gleichen Absatz noch einmal in verschiedenen, alternativen Schriftarten eingefügt.
Arial
Die oberste Maxime der Typografie auf Webseiten mit Informationsfokus ist die Implementierung von angenehm und leicht lesbarem Text. Die Grundlagen des LXD von Dorian Peters empfehlen lediglich eine Schriftgröße von über 10 Punkt (etwa 13px oder 0.8em) sowie eine Zeilenlänge von 47 bis 72 Zeichen. Bruce Tognazzini schreibt, ein Design solle stets am ältesten Benutzer der Zielgruppe getestet werden. Das gilt speziell für die Darstellung von Text. Die Recherche auf den Zeitungsseiten von den Online-Auftritten der Zeitungen Zeit, Guardian und New York Times war dabei eine große Hilfe. Auf seriösen Seiten hat sich mittlerweile größtenteils wieder der Einsatz von Serifenschriften eingebürgert, die meist in Größen zwischen 16px und 20px bei einem Zeilenabstand von 24px bis 30px benutzt werden. Als Schriftart haben ich mich für die PT-Serif von Paratype entscheiden. Diese Fontfamilie ist sehr gut ausgebaut und verfügt über ein sehr gleichmäßiges, angenehmes und dennoch seriöses Schriftbild im Mengentext.
Times new roman
Die oberste Maxime der Typografie auf Webseiten mit Informationsfokus ist die Implementierung von angenehm und leicht lesbarem Text. Die Grundlagen des LXD von Dorian Peters empfehlen lediglich eine Schriftgröße von über 10 Punkt (etwa 13px oder 0.8em) sowie eine Zeilenlänge von 47 bis 72 Zeichen. Bruce Tognazzini schreibt, ein Design solle stets am ältesten Benutzer der Zielgruppe getestet werden. Das gilt speziell für die Darstellung von Text. Die Recherche auf den Zeitungsseiten von den Online-Auftritten der Zeitungen Zeit, Guardian und New York Times war dabei eine große Hilfe. Auf seriösen Seiten hat sich mittlerweile größtenteils wieder der Einsatz von Serifenschriften eingebürgert, die meist in Größen zwischen 16px und 20px bei einem Zeilenabstand von 24px bis 30px benutzt werden. Als Schriftart haben ich mich für die PT-Serif von Paratype entscheiden. Diese Fontfamilie ist sehr gut ausgebaut und verfügt über ein sehr gleichmäßiges, angenehmes und dennoch seriöses Schriftbild im Mengentext.
Georgia
Die oberste Maxime der Typografie auf Webseiten mit Informationsfokus ist die Implementierung von angenehm und leicht lesbarem Text. Die Grundlagen des LXD von Dorian Peters empfehlen lediglich eine Schriftgröße von über 10 Punkt (etwa 13px oder 0.8em) sowie eine Zeilenlänge von 47 bis 72 Zeichen. Bruce Tognazzini schreibt, ein Design solle stets am ältesten Benutzer der Zielgruppe getestet werden. Das gilt speziell für die Darstellung von Text. Die Recherche auf den Zeitungsseiten von den Online-Auftritten der Zeitungen Zeit, Guardian und New York Times war dabei eine große Hilfe. Auf seriösen Seiten hat sich mittlerweile größtenteils wieder der Einsatz von Serifenschriften eingebürgert, die meist in Größen zwischen 16px und 20px bei einem Zeilenabstand von 24px bis 30px benutzt werden. Als Schriftart haben ich mich für die PT-Serif von Paratype entscheiden. Diese Fontfamilie ist sehr gut ausgebaut und verfügt über ein sehr gleichmäßiges, angenehmes und dennoch seriöses Schriftbild im Mengentext.
Wie Sie vielleicht in diesem Absatz schon bemerkt haben, wurde auch die Markierung der Links dem Prinzip der maximalen Reduzierung angepasst. Wo man sonst durch blaue, unterstrichene Schrift aus dem Lesefluss gerissen wird, wurden die Links hier leicht ausgegraut. Auf diese Weise wird mentales Stolpern vermieden, die Hyperlinks bleiben jedoch weiter sichtbar und werden beim Rollover sehr deutlich markiert.
Farbwahl
Um die Seite seriös aber nicht langweilig, einladend, aber nicht zu verspielt wirken zu lassen, arbeitete ich größtenteils in Grautönen. Zur Akzentuierung wurde jedoch eine Sonderfarbe eingesetzt. Dabei entschied ich mich schließlich für ein ins Grüne driftendes Türkis. Diese Farbmischung verbindet die frische eines Grüns mit der Seriosität des technischen Blaus, wodurch ein erfrischender, unverbrauchter und leuchtender Farbton entsteht. Es musste jedoch darauf geachtet werden, dass die Farbe sowohl als Farbfläche funktioniert, als auch im Mengentext auf weißem Hintergrund sehr gut lesbar bleibt.
Das generelle Farbschema der Seite sollte sehr hell und einladend wirken, um das oben viel beschworene gute Gefühl erzeugen zu können. Dafür wurde der Hintergrund rein weiß gelassen, um ihn luftig mit dezenten Gestaltungselementen bespielen zu können.
Navigation
Bei der Darstellung meiner Navigation wurde ein vertikales Akkordeonmenü eingesetzt, das mit den Vorteilen eines Tab-Menüs verbunden wurde. Ein Akkordeon-Menü wird für Websitestrukturen empfohlen, die mindestens zwei in der Navigation darzustellende Ebenen, aber nicht über mehr als zehn Hauptkapitel auf der obersten Ebene verfügen.
Im gängigen UI-Vokabular befinden sich außerdem noch horizontale und vertikale Dropdown-Menüs. Diese wären für den vorliegenden Fall allerdings nicht geeignet gewesen, da ein Grundsatz des LXD besagt, dass der User immer wissen muss, wo er sich gerade befindet. Weil ein Dropdown-Menü nach der Auswahl wieder verschwindet, wären nur die Menüpunkte der ersten Ebene zur Orientierung geblieben.
Wie Sie links in der fertigen Navigation erkennen können, geht das Weiß der aktiven Navigationsfelder in die Hintergrundfarbe der aktuellen Seite über. Dadurch ist dem Benutzer stets klar, an welcher Stelle er sich befindet. Außerdem ist die Beschriftung des aktiven Kapitels jeder Strukturebene stets mit der Sonderfarbe markiert.
Von einer zusätzlichen Breadcrump-Navigation wurde aufgrund der wenigen Ebenen der Websitestruktur abgesehen. Solch ein Menü einzufügen wäre nur sinnvoll, wenn dieses dann auch über mehr als drei Stationen verfügt. In solchen Fällen wird sie für Seiten mit Lernfokus jedoch ausdrücklich empfohlen.
Wie im generell üblich, wurde dem Logo links oben die Funktionalität eines Home-Buttons zugewiesen, um dem Benutzer stets die Möglichkeit zu geben, an den Anfang seiner Reise zurückzukehren, sollte er sich beim selbstständigen Entdecken der Seite verirren.
Illustration
Illustrationen spielen eine wichtige Rolle zur Unterhaltung und Motivation der Benutzers. Da unterhaltende Mittel wie Bilder und Videos dem Lernerfolg im vorliegenden Fall nicht zuträglich sind, wird die Bedeutung von Texten und Illustrationen noch größer. Dem Prototypencharakter der Website ist es jedoch geschuldet, dass selbst Titelillustrationen den puristischen Richtlinien des LX-Designs folgen sollen. Sie müssen aber trotzdem geeignet sein, das Interesse des Lesers zu Beginn der gesamten Seite und jeder einzelnen Unterseite auf das Thema hinzulenken. Deswegen sollte ein illustratives Baukastensystem einzelner Elemente erstellt werden um viele verschiedene Illustrationen einfach in einem konsistenten Stil zusammenstellen können.
Da sich die gesamte Arbeit um das Gehirn dreht, liegt es auf der Hand, ein Motiv aus diesem Themengebiet als Keyvisual zu wählen. Doch wie sollten Vorgänge dargestellt werden, die für das bloße Auge nicht zu erkennen sind, oder schematische Darstellungen von solchen Vorgängen fröhlich und attraktiv gestalten? Bald fiel mir die grundsätzliche Ähnlichkeit der Darstellung von elektronischen Schaltkreisen und neuronalen Strukturen auf. Auf Grundlage dieser Idee wurde ein visuelles Vokabular aufgebaut um mit der geometrischen Ordnung, die elektrischen Schaltkreisen zugrunde liegt, die Struktur von Gehirnzellen und Synapsenverbindungen darzustellen.
Aus diesen Elementen wurden zehn Titelillustrationen und die große Einstiegsillustration geformt. Jede der Titelillustrationen ist thematisch an den Inhalt der jeweiligen Seite angepasst und soll dazu dienen, die Neugierde des Lesers für jede Seite neu zu entfachen und ihn beim Thema zu halten. Im Zentrum der „Neuronen“ werden zudem Icons mit einer thematisch relevanten Bedeutung als Teaser eingefügt, die diesen Effekt noch verstärken sollen. Bei der Farbauswahl war es erneut sehr wichtig, durch die Illustrationen nicht vom eigentlichen Inhalt der Seite abzulenken. Aus diesem Grund wurde für die Hauptstrukturen ein sehr helles Grau verwendet, das fast im Hintergrund verschwindet, aber auch auf schlecht kalibrierten Bildschirmen noch gut zu erkennen ist. Die türkise Sonderfarbe dient erneut als Akzent und Blickfang.
Im Text erklärte Studien mussten zudem unbedingt zur Verdeutlichung visuell aufgearbeitet werden, um die kognitive Belastung für den Leser so weit wie möglich zu reduzieren, ohne die Komplexität des Themas zu verringern. Siehe hier.
Erklärende Illustrationen wurden stets den Grundsätzen des LX-Designs entsprechend auf ihre Essenz reduziert und an die stilistische Bildsprache der Titelillustrationen angepasst. Dabei wurde immer auf die grundsätzliche Notwendigkeit der Illustrationen geachtet. Wenn diese nicht in der Erläuterung eines Sachverhalts besteht, dann darin, Sinnabschnitte im Text zu separieren oder das Gelernte in einen visuellen Kontext zu stellen
Logo und URL
Diese visuelle Sprache und generelle Simplizität des Designs sollte schließlich auch auf das Logo des Projekts übertragen werden, das, wie oben schon erwähnt, hauptsächlich als visueller Anker und Home-Button der Seite dient. Da der Titel der Arbeit und Seite „Ich weiß, wir wissen“ zu lang und sperrig ist, wurde er mit seinen Anfangsbuchstaben abgekürzt.
Diese Initialen machen zusätzlich bereits durch die leichte kognitive Dissonanz mit dem Internetpräfix „www“ neugierig auf den Inhalt der Seite. Die Frage, ob ein Signet oder nur eine Wortmarke entwickelt werden sollte, lässt sich mit Hinblick auf die LXD-Richtlinien recht leicht beantworten. Ein zusätzlicher visueller Stimulus, der ständig an der wichtigsten Stelle der Website (links oben) positioniert ist, wäre eine Ablenkung, die mit keinem markenstrategischen Argument zu rechtfertigen ist.
ICH WEISS WIR WISSEN
Das zweite Buchstabenpaar wurde außerdem zu einer Einheit zusammengefügt, um bei „wir wissen“ die innere Verwobenheit des kollektiven Weltwissens darzustellen. So ist selbst bei genauem Hinsehen nicht zu erkennen, wo der eine Buchstabe aufhört und der nächste beginnt. Im Gegensatz dazu sind „I“ und „W“ als Symbol des Individualwissens klar separiert. Da diese vier Buchstaben alleine niemandem etwas sagen würden, wurde der Titel darunter zusätzlich noch erklärend ausgeschrieben.
Als URL wäre www.iwww.de die optimale Adresszeile gewesen. Symbolisiert es doch das „Ich“, das inmitten einem Meer von Internet steht. Da diese Adresse zwar unbenutzt, aber leider schon verkauft war, musste auf die nächstbeste Variante www.iw-ww.de zurückgegriffen werden. Diese URL passt außerdem besser zum Logo, bei dem die vier Buchstaben ebenfalls paarweise separiert stehen.
Videos
Über gutes Design von Info-Videos ließe sich eine eigene Masterarbeit schreiben. Aus diesem Grund soll hier nur ein äußerst gelungenes Exemplar präsentiert werden.
Im Gegensatz dem Beispiel in der Arbeit ist das Folgende ein Lehrvideo, das sehr bewusst darauf achtet, den Zuschauer visuell nicht zu überlasten und Platz für die wirklich wichtigen Informationen zu lassen, ohne dabei auf gutes Design zu verzichten:
emotionale Komponenten
Da auf dieser Seite eine direkte, persönliche Interaktion mit den Lernenden nicht dauerhaft möglich ist, musste ein anderer Weg gefunden werden, diesen Mangel zu kompensieren. Daher wurde ein virtueller Agent entworfen, der dem Leser durch seine Anwesenheit, Hinweise und Kommentare das Gefühl einer sozialen Präsenz vermittelt. Wie alle bildlichen Darstellungen ist auch der Agent auf ein Minimum an Gestaltungsdetails reduziert, vermittelt aber trotzdem ein offenes, freundlich entspanntes Gefühl durch Mimik und Körperhaltung.
Durch ihn können außerdem positive Bestärkungen in die Lernerfahrung eingebaut werden, die im eigentlichen Lerntext fehl am Platz gewesen wären. Der Agent allerdings, der für meine Person steht, und damit als Autor und Lehrer fungiert, lobt, leitet und bestärkt den Lernenden, wann immer es nötig ist, oder fügt an geeigneten Stellen meine persönliche Meinung oder Einschätzung zu einem Thema hinzu. Abgesehen von thematisch relevanten Texten, die natürlich seriös sein müssen, sind die Kommentare und Anweisungen des Agenten bewusst locker und fröhlich formuliert, um ebenfalls wieder das gute Gefühl zu erzeugen und den Benutzer in seinem Lernen zu bestätigen.
Fühlt sich der Benutzer in seiner Tätigkeit alleine, ist die Lernerfahrung generell weniger erfolgreich. Aus diesem Grund wurde am Ende jeder Seite einen Besucherzähler angebracht, der dem Lernenden vor Augen führt, wie viele Leute vor ihm schon in der gleichen Situation wie er steckten. So soll ein abstraktes, aber effektives Zusammengehörigkeitsgefühl erzeugt werden.
Ebenfalls ein Faktor bei der Erzeugung des guten Gefühls ist, dass die Lernenden stets den eigenen Fortschritt im Blick haben können. Auf dieser Seite wurde das auf zwei Ebenen eingebaut: einmal einen Indikator in der Sonderfarbe zur Anzeige der Leseposition auf der aktuellen Seite, und eine prozentuale Anzeige des Fortschritts im gesamten Lernstoff, die auf jeder Seite dargestellt wird.
Um den User nie hilflos alleine zu lassen, wurde am Ende jeder Seite ein kleiner Satz als Teaser eingefügt. Dieser dient als eine Art umgekehrter Cliffhanger für das nächste Kapitel. Indem er meist als Frage formuliert ist, verlangt der Leser unterbewusst nach einer Antwort und wird dazu verleitet, emotional in das nächste Thema zu investieren. Durch einen Klick auf den Weiter-Button gelangt er dann direkt dorthin. Auf diese Weise ist es theoretisch möglich, den kompletten Inhalt der Website zu konsumieren, ohne einmal die Hauptnavigation an der linken Seite zu bedienen.
Aus dem gleichen Grund sind die jeweiligen Titel der Seiten bewusst reißerisch formuliert. So wird Interesse geweckt und der Benutzer dazu verleitet, überhaupt erst mit dem Lesen des Haupttextes zu beginnen.
Zum Schluss
Am Ende dieser Seite hoffe ich, dass das Lesen Ihnen geholfen hat, sich dem Thema des speziellen Interfacedesigns für Lernumgebungen anzunähern.
Auch wenn die spezifische Gestaltung und manche Elemente des Aufbaus dieses Prototypen möglicherweise nur schwer auf Ihr Website-Konzept anzuwenden sind, hilft Ihnen das Beispiel meiner Arbeit vielleicht, stets den Dienst am Gehirn des Users im Hinterkopf zu behalten und Entscheidungen zu vermeiden, die klar einen negativen Effekt auf eben dieses haben würden.
Es ist sehr wahrscheinlich, dass Teile meiner Arbeit bereits in wenigen Jahren völlig überholt sein werden, weil sich die Schnittstellen, mit denen wir uns mit dem Internet verbinden, gänzlich andere sind. Der Aufstieg virtueller Realitäten wird dabei nur der erste Schritt in eine Zukunft sein, die wir uns heute vermutlich noch nicht einmal ansatzweise vorstellen können.
Dennoch wird die grundlegende Aussage meiner Arbeit weiter gültig bleiben: Gerade in solch einer Welt des rasenden Fortschritts ist es die Pflicht eines jeden Gestalters, immer wieder einen Schritt zurückzutreten und zu betrachten, welche Auswirkungen ganz alltägliche Handlungen oder gängige Design-Methoden auf den Benutzer und damit auf uns alle haben könnten. Unser Gehirn ist zu wichtig, um seine Gesundheit aus Gründen der Bequemlichkeit oder des kurzfristigen Profits aufs Spiel zu setzen. Ganz im Gegenteil bin ich mir sogar sicher: Wer für das menschliche Gehirn gestaltet, wird langfristig weit erfolgreicher sein, als jemand, der ihm (aus welchen Gründen auch immer) Stolpersteine in den Weg legt.
WENIGER IST...
NOCH ZU VIEL!
So viele Personen haben schon gelernt, was Sie gerade lernen