Visuelle Gestaltung in der Praxis

Während uns die psychologische Forschung ermöglicht, die Grundlagen der visuellen Wahrnehmung zu verstehen, ergänzt das traditionsreiche Berufsfeld des Visual Design diesen Forschungsansatz um die praktische Umsetzung von Gestaltungsmaßnahmen. ### In der Praxis können wir daher die aus der Forschung bekannten Effekte im Diskurs der visuellen Gestaltung wiedererkennen; sie werden meist schon geraume Zeit für die Fokussierung und Steuerung von Wahrnehmungsprozessen genutzt (beispielsweise der oben erwähnte Pop-Out-Effekt).

Wenn wir hier nach Regeln für gute visuelle Gestaltung fragen, so ist es zunächst wichtig festzuhalten, dass wir von der Gestaltung zur Optimierung der Wahrnehmungssituation (zum Beispiel Lesbarkeit, Erkennbarkeit) sprechen und nicht von der reinen Ausschmückung eines Textes. Betrachtet man das Dreigestirn Effektivität, Effizienz sowie Zufriedenheit, spielen natürlich gerade beim letzten Punkt die Ästhetik, Emotionen, andere individuelle Präferenzen etc. eine wesentliche Rolle, die durchaus ein erfolgreiches Lernen begründen. Siehe hierzu beispielsweise Norman (2005).

Die gestalterische Reduktion und Strukturierung von Inhalten mit hoher Informationsdichte gibt dem Auge des Lernenden erst den nötigen Raum, um sich beispielsweise auf dem Papier oder Bildschirm orientieren zu können. Wie bereits oben erwähnt, kann dabei die Wahrnehmungssteuerung sowohl bottom-up als auch top-down vorgenommen werden. Einfach ausgedrückt: Die Gestaltung soll den Lernprozess gewinnbringend unterstützen!

Die optimale Form für einen Inhalt wird auf der Ebene des Zielpublikums, der (regelmäßigen) Struktur der Wahrnehmungsfläche oder des Medienkanals (klare, einheitliche Layouts beziehungsweise Grundraster) und der angemessenen Typografie (klares, einheitliches Schrift-, Bild- sowie Farbkonzept) erarbeitet. Vor diesem Hintergrund sind die wichtigsten Praxistipps aus Sicht des Visual Design zunächst sehr allgemein:

• Stets den kommunikativen und gestalterischen Kontext berücksichtigen und innerhalb des vorgegebenen Konzeptes arbeiten (Rückfragen bei den Verantwortlichen ist sinnvoll).
• Wenn Abweichungen von einem generell eingeführten typografischen bzw. gestalterischen Konzept erforderlich sind (zum Beispiel Schriftgröße, Spaltenbreite oder vergleichbare Einheiten), dann sollten gut wahrnehmbare Unterschiede, Abstände oder Positionen gewählt werden.
• Stets genügend Raum (sogenannten Weißraum) für die Orientierung der Augen des Lesenden lassen.
• Auszeichnungen (fett oder kursiv) sparsam einsetzen. Unterstrichener Text gehört in die Schreibmaschinenwelt und nicht in die moderne Textverarbeitung. Wichtig ist hierbei, dass eine Unterstreichung in Online-Medien (zum Beispiel bei Überfahren mit der Maus, dem sogenannten onmouseover) mehrheitlich als Hyperlink verwendet wird, der zu weiteren Hinweisen überleitet.

Gestaltungsempfehlungen

Folgende beispielhafte Tipps aus der Praxis nach Rakoczi (2010) können Sie einsetzen, um die Augen der Lernenden (unbewusst) zu lenken:

• Beachten Sie, dass der untere Bildschirmbereich visuell benachteiligt ist. Platzieren Sie demnach - soweit es geht - die Kernaussagen des Lernmaterials in der oberen Bildschirmhälfte. Extensives Scrollen sollte vermieden werden.
• Bei dem visuellen Einstieg in Lernmaterial am Bildschirm werden zunächst Titel, Schlagzeilen sowie Bilder mit hoher Informationsdichte fixiert. Navigationselemente, Bilder mit niedrigem Informationsgehalt (im Sinne der sogenannten banner blindness) sowie Textblöcke werden erst danach wahrgenommen. Beachten Sie dabei aber, dass Texte auch im Online-Setting „Träger des Wissens“, und über den Fortlauf des Lernprozesses der am längsten fixierte Medientyp sind.
• Splitten Sie große Textblöcke in kleinere Einheiten von etwa 150 Wörtern auf, um diese visuell leicht erfassbar zu machen.
• Gesichter von Menschen wirken in Abbildungen wie visuelle Magnete. Berücksichtigen Sie diesen Effekt, um die visuelle Aufmerksamkeit bewusst zu lenken, respektive um diesen visuellen Einfluss zu verhindern.
• Beachten Sie, dass Farben, Piktogramme, Abbildungen sowie die Leserichtung nicht kultur-invariant sind. Lernmaterialien sollten demnach auf die Zielgruppe abgestimmt sein.

An dieser Stelle sei zudem darauf hingewiesen, dass für die visuelle Gestaltung zahlreiche auf Heuristiken basierende Richtlinien, Guidelines, Faustregeln etc. existieren. Diese sind nicht in jedem Fall empirisch fundiert und liegen nicht im Fokus dieser Arbeit. Lesende werden daher auf eine weiterführende Recherche verwiesen.

Veränderungen sichtbar machen

Erstes, nachstehendes, Element wird ans Ende der vorherigen Seite gestellt

Das Lernen mit Technologien findet heute kaum mehr primär über statische Benutzer/innen-Oberflächen statt - wie dies zum Beispiel bei einem gedruckten Buch ausschließlich der Fall ist. Im Gegenteil, technologische Lernanwendungen stehen geradezu für dynamische Inhaltsdarstellungen sowie für Interaktionen zwischen Mensch und System. Werden dabei über Benutzer/innen-Oberflächen neue Inhalte dargeboten, kann es sein, dass für Lernende diese Veränderung keineswegs unmittelbar visuell ersichtlich ist. Beispielsweise nehmen Sie an einem Onlinetest teil. Sie glauben, die Fragen der aktuellen Seite im Browser beantwortet zu haben und klicken auf „Weiter“. Doch es geschieht nichts - denken Sie!

Erst nach einiger Zeit bemerken Sie den Hinweis des Systems unterhalb einer noch nicht beantworteten Frage, dass Sie auch diese beantworten müssen. Die Rückmeldung des Systems ist Ihnen nicht „ins Auge gesprungen“. Der bereits in der Infobox erwähnte Pop-Out-Effekt kam hier also nicht zustande. Die Veränderung bei der Bildschirmdarstellung war zu unauffällig, das heißt visuell nicht salient genug. Auch hier gilt, dass die Augen der Betrachtenden beziehungsweise ihre Aufmerksamkeit auf die erfolgte Veränderung gelenkt werden muss. Dies ist grundsätzlich immer dann notwendig, wenn neu dargebotene Bildschirminhalte (zum Beispiel wichtige Informationen) gesehen werden sollen bzw. müssen, jedoch Gefahr laufen, übersehen zu werden. Übersehen werden sie etwa, weil die Veränderung von einer Bildschirmdarstellung zur nachfolgenden nur geringfügig ist, oder weil konkurrierende Objekte auf der Benutzer/innen-Oberfläche die Aufmerksamkeit von der Veränderung ablenken. Die erfolgte Veränderung sollte demzufolge hervorgehoben werden, beispielsweise durch einen Pfeilverweis, eine Einrahmung, farbliche Hinterlegung, Fettschrift, größere Schrift, Blinken u. a. Die Wahl eines Mittels ist dabei immer abhängig von der übrigen Gestaltung. Eine für alle Situationen gültige Empfehlung kann nicht gegeben werden. Letztlich muss die Veränderung so gestaltet werden, dass sie auffällt.

Textgestaltung für das Lesen am Bildschirm

Im Bereich der digitalisierten Lern- und Lehrmaterialien stellt sich immer wieder die ganz grundsätzliche Frage nach der Lesbarkeit von Texten. Ältere Forschungsergebnisse weisen zwar auf negative Effekte des Bildschirmlesens hin, allerdings konnten neue Studien hier keine bedeutsamen Unterschiede hinsichtlich den beteiligten Augenbewegungen (Holzinger et al., 2011; Siegenthaler et al., 2011) und der Ermüdung beim Lesen (Siegenthaler et al., 2012) zwischen dem Lesen von auf Papier gedrucktem Text und am Bildschirm nachweisen. Objektiv betrachtet spielt es hinsichtlich der beteiligten Blickbewegungen demzufolge keine Rolle, auf welchem Medium gelesen wird - das subjektive Empfinden ist aber in den meisten Fällen anders: Lesen von digitalem Textmaterial wird von den meisten Menschen als mühsam erlebt. Dieser Umstand jedoch dürfte seine Ursache nicht nur im darstellenden Medium haben: Digitales Textmaterial kann von jeder und jedem leicht selbst erstellt und mit anderen geteilt werden. Dabei ist aber die Produktions- und auch Gestaltungszeit häufig sehr kurz, was leider dazu führt, dass solche Materialien unter wahrnehmungspsychologischen Aspekten in vielen Fällen mangelhaft sind. Die folgenden Ratschläge sollten daher bei der Textgestaltung berücksichtigt werden, um das visuelle System optimal anzusprechen:

• Schriftart: Ob eine Schrift mit Serifen oder ohne Serifen lesbarer ist, darüber gehen die Meinungen auseinander (Ein kurzer Überblick zum wissenschaftlichen Diskurs findet sich hier: http://alexpoole.info/blog/which-are-more-legible-serif-or-sans-serif-typefaces/ [2013-08-13]). Aufgrund der vorhandenen Publikationen zu diesem Thema kann man davon ausgehen, dass abgesehen von soziokulturellen/historischen Unterschieden hierdurch die Lesbarkeit nur minimal beeinflusst wird. Sie können sich also praktisch frei für eine Schrift mit Serifen (beispielsweise Times New Roman) oder ohne Serifen (beispielsweise Arial) entscheiden. Für längere Texte sollten Sie jedoch niemals exotische (und damit oft schlecht lesbare) Schriftarten verwenden.
• Schriftgröße: Wir empfehlen eine 10- bis 12-Punkt-Schrift. Zwar können alle Lesenden die Schrift auf dem Bildschirm nach Bedarf vergrößern, allerdings muss dann sehr viel gescrollt werden, was als mühsam empfunden wird. Überlegen Sie sich daher bei der Formatierung, in welchem Kontext gelesen werden soll (beispielsweise unterwegs auf dem Smartphone, ausgedruckt auf Papier, auf einem 27-Zoll-Bildschirm etc.).
• Laufbreite des Textes: Ein Fließtext sollte idealerweise – ebenfalls wegen des horizontalen Scrollens – einspaltig gestaltet sein und maximal 80 Zeichen pro Zeile umfassen.
• Kontrast/Farbe: Studien haben gezeigt, dass klare Kontraste die empfundene Lesbarkeit von Textmaterialien erhöhen. Verwenden Sie entweder dunkle Farben auf hellem Hintergrund oder umgekehrt, aber keine Farben Ton in Ton (wie beispielsweise weiter oben genannt hellblauer Text auf blauem Hintergrund).

Zusammenfassend soll angemerkt werden, dass der Einsatz bzw. die Kombination von Gestaltungsmaßnahmen stets mit Bedacht anzuwenden ist. Visual Design verinnerlicht immerwährend subjektive sowie kulturvariante Aspekte und liegt nicht selten ‚im Auge der Betrachterin oder des Betrachters‘. Dennoch können Lehrende beim überlegten Einsatz von Gestaltungsempfehlungen mehr richtig als falsch machen.

?

Wir haben zwei Übungsaufgaben vorbereitet, die Ihnen die Möglichkeit geben, die in diesem Kapitel vorgestellten Inhalte zu reflektieren und visuelle Wahrnehmung selbst zu erfahren. Die beiden Übungsaufgaben finden Sie unter dem nachfolgenden Link: http://learningcenter.ffhs.ch/?p=1825
Viel Spaß beim Lösen!