Multimediakurs Leinfelder: Inhalt/ A:Einsteiger/Modul 4 "Optik u. Inhalt"/Modul 4.3.3 "Planung:Kognitives Design" |
(© copyright) Letzte Änderungen: |
Die Philosophie von Hypertext-Strukturen und ihr psychologischer Background
Im Unterschied zur Buchform verwenden wir im Web Hyptertext- bzw. Hypermedia-Inhalt und Strukturen. Dies bedeutet insbesondere, dass der Inhalt in kleine Untereinheiten ("Module", "chunks") zerteilt werden kann, die fast beliebig vernetzt werden können und somit das Durchblättern von Sites in der Regel nicht linear, sondern basierend auf spontanen Entscheidungen und Assoziationen vorgenommen werden kann. Also, nun gibt's etwas Hausmanns-Psychologie:
Veranschaulichung: Man kann dies vielleicht mit einem 20-bändigen Lexikon in Buchform vergleichen. Schlagen Sie dort ein Stichwort nach, finden Sie wahrscheinlich weitere Querverweise, welche Ihnen besonders interessant erscheinen, ziehen den entsprechenden Band raus, schauen dort nach, finden wieder weitere Verweise. Sie verfolgen diese weiter, lassen sich treiben und haben am Schluss möglicherweise einen Informationszuwachs erfahren, der in dieser Form nicht geplant war. Sie haben eine interessante Zeit verbracht und dabei ggf. noch jede Menge Unerwartetes gelernt bzw. sprichwörtlich "erfahren".
Diese positive Erfahrung kann allerdings stark eingeschränkt werden, wenn etwa Folgendes auftritt:
- Sie haben Ihr Lexikon in Unordung, manche Bände stehen nicht dort, wo Sie sie erwarteten und sie müssen langwierig suchen, bis Sie die Information tatsächlich finden. Frust!
- Sie haben zwar ihre Bände richtig sortiert, werden aber von Querverweis zu Querverweis weitergejagt, ohne dass Sie zwischendurch einen Wissenszuwachs erfahren. Ärgerlich, viel Aufwand für wenig Ergebnis. Frust!
- Ihnen macht die Sucherei zwar nichts aus, aber was Sie dann am Schluss finden, entspricht überhaupt nicht Ihren Erwartungen. Enttäuschend. Frust!
- Sie haben wenig Zeit und wollten nur schnell die benötigte Information auffinden. Nach dem dritten Querverweis haben Sie aber aus Zeitgründen aufgegeben, soviel Zeit haben Sie nicht. Frust! Sie wählen dann eine andere Form der Informationsbeschaffung (rufen z.B. einen Kollegen an, der es wissen müsste).
Im Web ist dies sehr vergleichbar. Grundsätzlich kommt die Hypertext-Struktur dem Arbeiten des menschlichen Gehirns sehr entgegen. Assoziatives Lernen und freie Entscheidungsmöglichkeit über den weiteren Verlauf der Websurf-Erfahrung werden positiv erfahren, solange sich daraus keine negativen Erlebnisse ableiten lassen. Das menschliche Gehirn kann nämlich in ausgezeichneter Weise:
- rasch Information aufnehmen
- Information vorübergehend (oder auch dauerhaft) abspeichern und wieder abrufen
- Information analysieren
- Auf Information durch umgehende Entscheidung reagieren
- Informationen verwalten
Genau dem sollten unsere Webseiten zuarbeiten, die technischen Möglichkeiten hierzu beinhaltet es.
Das Gehirn kann allerdings bei Reiz- und Informationsüberflutung auch rasch "dicht machen" und reagiert mit Konzentrationsschwäche. Genau dies kann auch die Gefahr bei der Benutzung des Webs sein. Hier hilft dann nur die Ruhe linearen Denkens, des linearen Verfolgens und Weiterentwickelns von Ideen und Handlungen (analog eines Besinnungsaufsatzes, einer Erzählung in Buchform oder eines Kinofilmes). Hier müssen keine Entscheidungen zu Reaktionen getroffen werden, was ein erholsames Erlebnis sein kann. Das linear konzentriert aufgenommene Wissen kann aber dann später für kompetente Entscheidungsfindungen und Reaktionen verwendet werden.
Je nach Inhalt, Zielgruppe und eigenen Webmaster-Fähigkeiten sollten wir also Webseiten produzieren, die beiden Strukturen menschlichen Denkens Rechnung tragen. Dennoch sind puristisch lineare Angebote ohne die Möglichkeit des Aufrufens zusätzlicher vertiefender Links oder Feedback-Möglichkeiten sind sicherlich nach wie vor in Buchform besser aufgehoben. Bücher haben gegenüber dem WWW den Vorteil, dass man sie auf dem Sofa, am Strand, im Bett oder in der Badewanne lesen kann. Wir sollten also die Möglichkeiten und Vorteile der interaktiven Hypertext-Strukturen nutzen, ohne sie überzustrapazieren.
Tipp: Könnte es sein, dass der Webnutzer Ihr Angebot v.a. auch als Papierausdruck benutzen möchte? Vielleicht, weil es keine entsprechenden Bücher gibt, vielleicht, weil er nicht ohne Weiteres immer online sein kann oder möchte. Dies ist nur möglich, wenn Ihre Seiten überwiegend linear aufgebaut sind und nicht nur aus sehr kurzen Teilmodulen bestehen. Machen Sie dies aber nicht zur generellen Prämisse, Sie schränken ansonsten Ihre Ausdrucksmöglichkeiten mit dem Webmedium sehr stark ein. Vielleicht können Sie ja auch eine ausdruckbare Version (am besten als pdf-File) zusätzlich zu Ihrem hypertext-strukturierten Angebot online zur Verfügung stellen (mehr dazu im Teil B des Kurses).
Umsetzung
Wie können wir nun die bisher gemachten Vorüberlegungen bei der Umsetzung in unsere Website berücksichtigen?
Textlicher Ausdruck im Web
Ziel: rasche Informationsaufnahme, Verlängerung der "Attention Span", Modularisierung zum beliebigen Einstieg innerhalb Website. Hierzu einige Stichworte bzw. Anregungen:
- Optische Text-Strukturierung:
Kurze Sätze, viele Absätze, eingerückter Text, viele Listen. Sans-Serif-Schriften. Highlighting von Textstellen zum raschen Scannen von Text. Wo sinnvoll, Verwendung von Tabellen zur überblicksmäßigen und vergleichenden Zusammenstellung von Sachverhalten. Diese Tabellen sollten jedoch aus nur wenigen Spalten (am besten nur drei) und wenigen Zeilen (nicht über 7) bestehen, ansonsten lieber mehrere einzelne Tabellen (z.B. mit hierarchisch verschachteltem Inhalt, also evtl. 2. Tabelle zur Erläuterung eines Spalteninhalts der ersten Tabelle) verwenden.
'
Beispiel 1: Zum Vergleich zwischen iFrames und Frames hatten wir dies z.B. verwendet (zugegeben ist die Tabelle zu lang, wir sollten sie in zwei thematisch etwas unterschiedliche Tabellen umsetzen. Z.B. eine zum Vergleich der technischen Unterschiede, eine zweite zum Vergleich der Anwendungsvor- und Nachteile. Hier nochmals das entsprechende Beispiel (danach Fenster bitte schließen).
Beispiel 2: auch bei Diskussion der generellen technischen Möglichkeiten haben wir einen Vergleich der verschiedenen Techniken mit Hilfe einer tabellarischen Darstellung vorgenommen. Das Beispiel finden Sie hier (bitte danach wiederum Fenster schließen)
(Haben Sie das Popup-Fenster wieder geschlossen?)
- Inhaltliche und stilistische Umsetzung: Je nach Zielgruppe nicht zu formaler Stil, wenig Nebensätze, keine blumigen Beschreibungen, möglichst wenig Füllwörter, einfacher Satzbau, humoristische Einlagen, eher familiärer Ton. Zurückhaltung mit Bewertungen (der Benutzer soll selbst Schlüsse ziehen). Relativ einfache Sprache, die Scannen von Text erlaubt, Erklärung komplexer Vorgange mit möglichst vielen aussagekräftigen Bildern und wenig Text. Auf das Wesentliche konzentrieren.
- Überleitungen: wenn Überleitungen notwendig sind, machen Sie sie kurz. Es kann gut sein, dass der Websurfer genau an Ihrer Überleitungsstelle einsteigt und überhaupt nicht weiß, worum es geht. Wenn Sie derartigen beliebigen Quereinstieg nicht wollen, müssen Sie ihn durch geeignete Techniken verhindern (z.B. Frames, siehe Modul 4.3.4 )
- Wahl der Landessprache und z.T. des Stils je nach Zielgruppe und Anspruch.
Generelles Layout
Ziel wiederum: Rasche Informationsaufnahme, Verlängerung der "Attention Span", Modularisierung zum beliebigen Einstieg innerhalb Website. Strukturierung. Hierzu:
- Dezenter Hintergrund, bestenfalls mit sublimer Hintergrundinformation. Weniger ist aber mehr.
- Klare Navigation durch sinnfällige Buttons
- Nur wenige (am besten nur eine) Vordergrundgrafik (z.B. Firmengebäude auf Eingangsseite??), Mittelgrundgrafiken müssen unauffällig, unaufdringlich und selbsterklärend sein (z.B. für Buttons, Bullets)
- Wenn möglich, weiße Ruheflächen fürs Auge einbauen (zwischen Textstellen, zwischen Grafiken)
- Animationen, falls verwendet, sollten stoppbar sein, ansonsten zu große Ablenkungsgefahr.
- wenn möglich, durchgängiges "Look and Feel" für gesamte Site. Nichts schlimmer, als auf jeder Seite ein anders aussehender "home"-Button. Ggf. auch Corporate-Identity mit einbauen.
- Grafiken eher klein halten, auf jeden Fall lange Ladezeiten verhindern.
Navigations- und Sitestruktur
Ziel wiederum: Rasche Informationsaufnahme, Modularisierung zum beliebigen Einstieg innerhalb Website. Strukturierung. Insbesondere Vermeidung des Verlorengehens im Web ("Lost in Cyberspace"). Hierzu:
- Prinzip der wenigen Klicks: Auffinden der Teilangebote nach max. 3-5 Klicks
- Möglichst nicht mehr als 4-8 Grundkategorien, ggf. in weitere Subkategorien aufteilen, die aber nicht auf der Homepage angezeigt werden sollen.
- ggf. Navigationshilfen oder Site-Map, um dem Benutzer jederzeit klarzumachen, wo er sich innerhalb der Site befindet, und welche Navigationsmöglichkeiten er von dort hat.
Dieses Thema vertiefen wir mit Beispielen in Modul 4.4.3
Sonstige Möglichkeiten
- Bereitstellung von Links auf externe Angebote als Ausweitungsmöglichkeit der Informationsgewinnung
- Abfragemöglichkeiten des Lernzuwachses für den Benutzer (kleine Frage- und Antwort-Tests etc.)
- Feedback-Möglichkeiten (email, Gästebuch, Diskussionsforen, Chat etc.).
- Darstellung der Berücksichtigung von User-Feedback
- Newsfenster
- Ausweitung des Angebots
Finger weg!
- Nicht mit pop-up-Fenstern zupflastern, dies kann zur völligen Verwirrung führen (ggf. bei Popupfenstern einen "Schließe-Fenster-Button" mit einbauen (Technik hierzu im Kursteil B)
- Keinesfalls Öffnen anderer Popup-Fenster beim Schließen von Fenstern. Nuissance erster Güte!
- Keine längeren Textpassagen in GROSSBUCHSTABEN. Wird als beleidigendes Anschreien angesehend.
- keine "in Arbeit"-Platzhalter. Eine Website ist eigentlich immer in Arbeit. Wenn schon, dann genau angeben, was wirklich in Arbeit ist.
- Lieber nicht auf Englisch als in falschem Englisch.
- Kein direkter Einbau anderer Seiten oder Bilder in die eigenen Angebote!
Und vergessen Sie bitte nie: das tollste Design, die beste Navigation und die ausgefeilteste Site-Technik nützen nichts, wenn die Inhalte wenig informativ und insgesamt uninteressant sind !
Oops: Interessiert Sie des Kursleiters Selbstkritik zu diesem Thema?
>> Fortsetzung: Modul 4.4: Wechselwirkungen zwischen Inhalt, Layout und Design
<< Modul 4.3.2