Layout: Format
PU separatorWechsel zu LOD1.Wechsel zu LOD3
Einleitung und Motivation
Motivation und Lernziel dieser Lerneinheit
Diese Lerneinheit beschäftigt sich mit dem Thema „Layout für multimediale Anwendungen“ und behandelt dabei mit „Format“ bzw. „Windows“ wesentliche Bedingungen, denen die Gestaltung und der Aufbau des grafischen Raumes im Zuge der Darstellung und der Benutzung multimedialer Inhalte unterliegen.
block separator
Definition
Format
Format, aus dem Lateinischen, steht für das Geformte, das Genormte. Formate legen Gestalt, Grösse und Mass fest, sie bilden die Grundlage jeden Überblicks und sie begrenzen Inhalte. Formate richten sich in der Regel nach Nutzbarkeit und/oder nach dem Dargestellten. Die Normierung von Formaten dient der Vereinheitlichung und Kombinationsfähigkeit (vgl. etwa die DIN-Papierformate) und geht weitgehend auf ökonomisch auferlegte Rentabilitätsüberlegungen zurück.

block separator
PU separatorWechsel zu LOD1.Wechsel zu LOD3
Format und Multimedia
Wahl des Formates
Die Wahl des Formats für multimediale Anwendungen richtet sich letztendlich nach der vorgesehenen (bzw. der möglichen) Präsentationsform des Produktes. Je nach Art der Anwendung bilden direkt die technischen Mittel der Präsentation (Monitor) oder darauf abgebildete Fenster (Windows) die Bezugssysteme multimedialer Formate.
Formate fixer Grösse gelten für interaktiver Kioske, Video- oder Computer-Monitore (4:3 oder 16:9), Monitor- oder Vidiwalls bzw. Projektionen. Aber auch zahlreiche Webanwendungen sowie Screen-Präsentationen für PDA und Smart-Phones bedienen sich Fenster festgelegter Grösse (Fixed-size-windows).
Formate flexibler Grösse sind weitverbreitet für die Fenster von Webbrowsern bzw. von Computerapplikationen.
Darstellungsformen bei mehreren Fenstern
Wie mittlerweile auch die gängigsten Computer-Betriebssysteme und damit auch Appikationen auf fensterbasierter Präsentation und Interaktion beruhen, wurde auch für die Dastellung multimedialer Inhalte mit der Entwicklung des Web und deren ebenfalls Window-basierte Browser, Fenster immer wichtiger.
Die Darstellung mehrerer Fenster folgt zwei grundlegenden Stilen: .1 nebeneinander angeordnet (tiled) oder .2 übereinander (overlapping) sowie dabei .3 geordnet und nach Raster ausgerichtet (cascading). Zumeist steht es dem Benutzer frei, die Art der Anordnung zu wählen.
block separator
Beispiel
Window-Darstellungen
Abbildung
[s]
block separator
Eigenschaften der verschiedenen Darstellungsformen
Wiewohl jede Darstellungsform eine Reihe von Vorteilen und Nachteilen mit sich bringt, wird die Wahl der Fenster-Darstellung grundsätzlich je nach Anforderung gewählt:
  • Nebeneinander angeordnete Windows
    • für Aktivitäten, die singulären Aufgaben bzw. Zielsetzungen folgen
    • für weniger erfahrene Benutzer
    • für Inhalt, deren Darstellung keine Veränderung des Fensterformats bedarf
    • für Inhalte, die gleichzeitig betrachtet werden müssen
  • Übereinander angeordnete Windows
    • wenn oft zwischen mehreren Aktivitäten gewechselt werden soll
    • wenn Benutzer bereits Erfahrung mitbringen
    • wenn die Fenstergrösse öfter verändert werden muss
    • wenn der Form und Umfang der Inhalte schwer vorhersehbar ist
[s]
Während die Interface-Evolution von der Einzelschirm-Präsentation zum Windowing führte, blieb das Web von Beginn an im Single-Screen-Modus.
Nachdem für Darstellungen im Web die Analogie von Seite (Page) und Fenster (Window) gilt, damit also auch im Single-Window-Modus. Um dies auszugleichen wurden zwar Frames geschaffen – sozusagen mehrere nebeneinander angeordnete Windows innerhalb des Hauptfensters. Frames erlauben die parallele Darstellung verschiedener Inhalte auf einer (Web)Seite.
PU separatorWechsel zu LOD1.Wechsel zu LOD3
Grösse von Windows
Standard Multimedia-Applikationen für Monitorpräsentationen wurden lange Zeit zumeist auf Basis der Abmessungen 640x480 Pixel angefertigt. Damit konnten sie jedenfalls auch auf Monitoren mit einer geringen Bildschirmauflösung angezeigt werden, ohne dass seitliche Teile der Applikation abgeschnitten wurden. Für die Präsentation im Web gilt heute mittlerweile das Format 1024x768 als grundlegend.
Window-Formate
Abbildung
Falls sichergestellt ist, dass dem Betrachter auch höherauflösende Monitore zu Verfügung stehen oder wenn etwa eine Präsentation für Kiosk oder für Monitor im Vollbild-Modus erstellt wird, muss darauf keine Rücksicht genommen werden. (komm2002) Auch mit der Gestaltung für fixe Windowgrössen, etwa von PopUp- oder PopUnder-Windows – beispielsweise für Werbung oder für vollständige Web-Microsites – werden durchweg unterschiedliche Formate und Fenstergrössen verwendet.
Typische Monitor-Auflösungen
Abbildung
[s]
Jedenfalls sollten alle relevanten zu vermittelnden Informationen im Fenster Platz finden. Je grosszügiger das grundlegende Window dimensioniert ist, umso mehr und bessere Möglichkeiten bieten sich im Layout der einzelnen Seiten.
Vorteile grossformatiger Seiten
  • mehr Information kann gezeigt werden
  • Erfassen der Struktur von gezeigten Daten wird einfacher
  • weniger Interaktion wird notwendig
  • effizientere Bewertung der vermittelte Information ist möglich
Nachteile grossformatiger Seiten
  • längere Wege des Mauszeigers fallen an
  • Erfassen des Inhalts ergo visuelle Abtastung wird aufwendiger
  • Überlappung bei Display von mehreren Fenstern ist wahrscheinlicher
[s]
Studien - Windows in UserInterfaces
Über Windows in UserInterfaces besagt eine Studie, dass im Vergleich zwischen 6, 12 und 24 Zeilen Text, das Fenster mit 12 Zeilen Text am raschesten erfasst werden konnte. Eine andere Studie verglich die Erfassung alphanumerischer Daten 7-, 13- und 19-zeiliger Windows und identifizierte die 7-Zeilen-Version als für den Benutzer am angenehmsten. Für die Gestaltung multimedialer Applikationen werden solche Tests wahrscheinlich kaum nutzbringend sein können. Zu unterschiedlich gestalten sich die mannigfaltigen potentiellen Kombinationen visueller und auditiver Daten, um in messbaren Zusammenhang mit der Window-Grösse gebracht werden zu können.
Im Allgemeinen sollte sich die Wahl der Grösse des Windows nach den Anforderungen der Applikation richten; mit der Wahl des Formates eröffnen sich für den Designer jedenfalls vielfältige Möglichkeiten.
[s]
PU separatorWechsel zu LOD1.Wechsel zu LOD3
Veränderbares Format
In Kreation und Produktion für multimediale (im besonderen Web-) Anwendungen kann das Window-Format für die Gestaltung des Contents zum entscheidenden Faktor werden: wenn nämlich das vom Designer gewählte Format nicht mit dem ident ist, in dem der Benutzer das Werk später rezipiert. Die Rücksichtnahme auf diese technischen Bedingungen der Präsentation ist daher bei der Kreation unabdingbar.
Für ein gelungenes Design ist es wichtig, dass sich ein wiedererkennbares Erscheinungsbild erzielen lässt. Es ist also möglichst zu gewährleisten, dass die entworfenen Seiten auf allen Plattformen (Linux, MacOS, Windows), Browsertypen (Internet Explorer, Netscape, ...) und Monitoren identisch dargestellt werden. In dieser Fülle von Kompatibilitätsanforderungen genügt sich die technische Implementierung oft in dem Kompromiss, eine möglichste Annäherung zu erarbeiten. Das Mass an Kompatibilität ist nicht zuletzt vom Umfang des Aufwandes abhängig, der für Tests und wiederholte Anpassungen des Designs getätigt wird (oder werden kann).
Nicht selten weisen beim Einstieg in eine Website Anmerkungen wie „Optimiert für Internet Explorer x “ oder „Optimale Bildschirmauflösung 800x600“ auf diese Einschränkungen hin. So werden zumeist Anpassungszeit und damit finanzielle Mittel eingespart.
Leider werden durch solche Entscheidungen somanche User verschreckt bzw. wird gewissen – wennauch zumeist nur schmalen – Usergruppen der Zugang zur Applikation verwährt. Die Benutzer weniger verbreiteter Browser werden ausgegrenzt und einzelne den Markt dominierende Software-Produkte begünstigt.
Für den Designprozess ist dies allerdings nicht unbedingt von Nachteil. Durch die Eingrenzung von Möglichkeiten, Beschränkungen bzw. Normierung – je weniger also auf technische Restriktionen bzw. Bedingtheiten Rücksicht zu nehmen ist – wird auch gestalterischer Spielraum gewonnen.
Zur Zeit liegen die beiden meist gebräuchlichen Bildschirmauflösungen von Internetbenutzern bei 800x600 und 1024x768 Pixel.
PU separatorWechsel zu LOD1.Wechsel zu LOD3
Scrolling oder Paging
Mit der Möglichkeit der flexiblen Anpassung von Webseiten (also des Browser-Windows) durch den Benutzer steht der Designer bei der Gestaltung fürs Web vor der Entscheidung, ob der Inhalt eines Windows als fixe Grösse oder – als seitlich und/oder nach unten – flexibel konzipiert werden soll. Für den ersten Fall bedeutet dies für die Benutzung, dass dargestellte Inhalte sich damit als jeweils einzeln zu betrachtende Seiten darstellen und zum Lesen weitergeschaltet werden müssen. Soll sich Inhalt in einem Fenster flexibel darstellen, heisst das für den Benutzer: Scrollen!
Scrolling einer Seite
Abbildung
Scrollen: Diskussionen unterschiedlicher Ansichten
Zu diesem Thema lassen herrschende Diskussionen durchweg unterschiedliche Vorlieben und Ansichten erkennen, und zahlreiche durchgeführte Untersuchungen schliessen sich dem an.
Wollen also Internet-User scrollen?
  • Nein, meinte 1996 Jakob Nielsen: „Internet users don’t scroll“
    • Top Ten Mistakes in Web Design (Alertbox)
  • Ja, 1997 kam derselbe Nielsen zu dem umgekehrten Schluss: „Scrolling Now Allowed“ Nielsen, J.: 1997, Changes in WebUsability Since 1994 Changes in Web Usability Since 1994 (Alertbox)
  • Nein, in einer Berliner Studie erforschte man, dass 24% aller Internet-Beginner, Informationen, die erscrollt werden müssen, nicht auffinden.
    • Wandtke & Hurtienne: Zum Navigationsverhalten von Erstbenutzern des World Wide Web
  • Ja, an der Universität Utrecht wurde Scrolling im Zuge einer Studie zu Lesen und Verstehen von Hypertext untersucht: Scrolling wird als benutzerfreundlich erkannt.
    • Van Nimwegen, C., Pouw, M., van Oostendorp, H. (1999) The influence of structure and reading-manipulation on usability of hypertexts. Interacting with computers 12 (1999) 7-21.
  • Nein, „zu lange Seiten“ werden laut einer britischen Studie aus 2001 von Usern als eines der Top10-Ärgernisse beim Surfen empfunden
    • Pressemitteilung der Abbey National Bank (2002)
  • Doch ja, Usability-Spezialist Jared Spool meint, dass laut Studien Benutzer zwar behaupten lange Seiten nicht zu mögen, in Tests jedoch problemlos damit umgehen.
    • Spool, J., Scanlon, T., Schroeder, W., Snyder, C. & DeAngelo, T. (1999) Web Site Usability. A Designer’s Guide. San Francisco: Morgan Kaufman
Benutzerorientierte und empirische Methoden in Frage gestellt?
Zur Ehrenrettung von streng benutzerorientierten und empirischen Methoden kann man annehmen, dass bei solch divergierenden Ergebnissen die (Um-) Fragen etwas unscharf formuliert wurden, etwa bezüglich der Definition welches Ausmass unter „lange Seite“ genau zu verstehen sei. Was als kurz oder lang empfunden wird, ist im jeweiligen Fall nicht zuletzt abhängig von einer gelungenen Strukturierung des vorgegebenen Inhalts oder etwa der (im Browser veränderbaren) Darstellungsgrösse der Schrift. [s]
Um vertikales Scrolling angenehm zu gestalten, kann oft die Verwendung eines geeigneten Eingabedevices sehr dienlich sein: Mäuse mit Scroll-Rad lassen Scrolling als durchwegs annehmbare Navigationsform ihre Berechtigung.
Natürlich können dem Benutzer auch beide Methoden gleichzeitig, also Scrolling als auch die Weiterschaltung von Einzelseiten zur Navigation durch den Content angeboten werden. Diese Variante empfiehlt sich jedoch eher für die Navigation durch textintensive Inhalten. Sie wird von Designern nicht gerade bevorzugt angewandt, da sich im Sinne gebotener Einfachheit möglichste Reduktion und damit die Entscheidung für eine der Navigationsmethoden empfiehlt. Durch angebotene Inhalte sowohl horizontal als auch vertikal navigieren zu können bzw. zu sollen, stellt für das Orientierungsmodell mancher Benutzer einen verwirrenden Faktor dar.
Einig jedenfalls sind sich Untersuchungen, Anwender und Experten über eines: Horizontales Scrolling von Inhalten wird strikt abgelehnt und sollte jedenfalls vermieden werden.
PU separatorWechsel zu LOD1.Wechsel zu LOD3
Above the fold
Wer regelmässig Tageszeitungen kauft und liest, kennt den Effekt: Die Zeitungen (ausgenommen davon sind Zeitungs-„Kleinformate“) sind in der Mitte gefaltet. Da bei der Kaufpräsentation und dem ersten Leserkontakt nur der obere Teil der Inhalte wahrgenommen wird, finden sich dort alle wesentlichen Informationen. Ähnlich verhält es sich bei Webseiten. In Fachkreisen spricht man dabei von Above- the-Fold.
Above-the-fold
Abbildung
Für gestaltete Elemente, die im Window unterhalb des unteren Randes des Screens liegen (Below-the-Fold), existiert dem Betrachter und User gegenüber keinerlei Aufmerksamkeitswert. Soll also der Benutzer unmittelbar angesprochen werden, ist darauf zu achten, dass die dazu wesentlichen Elemente jedenfalls im für ihn übersehbaren Bildfeld liegen.
block separator
Beispiel
Shop-Anwendung
Besonders fatal verhält sich dieses Problem beispielsweise im Falle einer Shop-Anwendung, deren Buy-Button ausserhalb des aktiven Windows (Below-the-Fold) und damit des Ansprech- und Interaktionsbereiches des Benutzers liegt. Für Web-Shops gilt also die vordringliche Anforderung, dass Links zum Warenkorb und zur Kasse immer sichtbar bleiben müssen.

block separator
Natürlich gilt auch in diesem Fall zur Vermeidung dieser Problematik die unbedingte Regel der Priorisierung von Inhalten. Web-Portale machen es sich auf ihren Einstiegsseiten oft nicht leicht, erkennen zu lassen, womit sie Benutzer primär adressieren wollen – eine Vielzahl von Bedürfnissen einer Vielzahl von Benutzergruppen sollen oftmals angesprochen bleiben (und können damit oft erst recht nicht abdeckt werden).
Viele Portale sind mit Werbe-Bannern am Header ihrer Seite – oft sogar mehrfach untereinander positioniert – derart überfrachtet, dass für eigentlichen Content kaum Raum gelassen wird. Will man Content-Relevantes erfahren, bleibt einem nichts anderes über, als sofort mit dem Scrollen zu beginnen.
PU separatorWechsel zu LOD1.Wechsel zu LOD3
Länge einer Seite
Nachteil lange Seite
Ein Handicap langer Seiteninhalte ist es, wenn zumeist die Navigation (ohne Verwendung von Frames) nicht sichtbar bleibt. Jedenfalls sollte Content zumindest an einer Inhaltsübersicht über Anker anwählbar bleiben.
Für das Printout sind längere Seiten vorteilhafter. Im Extremfall müssen besonders kurz gefasste Seiten auf mehrere Male ausgedruckt werden. Eine ideale Ergänzung dazu ist das Angebot einer gesonderte Printversion.
Vorteile lange Content-Seitenformate
Im Allgemeinen sprechen für die Gestaltung von langen Content-Seitenformaten:
  • wenige Ladevorgänge
  • über die Browser-Search auffindbare Inhalte
  • geringer Aufwand sie zu administrieren
  • einfach im Ausdruck oder im Download
Vorteile kurze Content-Seitenformate
Für die Gestaltung von kurzen Content-Seitenformaten sprechen
  • unmittelbare Erfassbarkeit allen Inhalts
  • gute Übersicht der Struktur komplexer Inhalte und bessere Orientierung
  • kurze Ladezeit einzelner Seiten
  • permanente Verfügbarkeit der Navigation
Egal ob Scrolling oder Paging angewandt wird, für jedes Format muss die Gestaltung den jeweiligen Rezeptionsverhältnissen und dem Interaktionsmodus angepasst werden und sollte dementsprechend gut und adäquat sein.
PU separatorWechsel zu LOD1.Wechsel zu LOD3
Text für Multimedia
Darstellung von Text
Für die Darstellung von Text im multimedialen Zusammenhang scheint es angebracht, dass
  1. auf knappe textuelle Formulierungen sowie
  2. die Aufteilung und Strukturierung des Gesamttextes sowie folglich
  3. eine adäquate Navigation durch das gesamte Textvolumen
geachtet wird.
So kann die Problematik langer oder kurzer Seiteninhalte bzw. des ungeliebten Scrollens bereits im Vorfeld umgangen werden.
PU separatorWechsel zu LOD1.Wechsel zu LOD3
Klein-Formate
Mit der Gestaltung fürs Web sind in den letzten Jahren durchweg die unterschiedlichsten Window-Formate (vor allem in Zuge des Designs mittels Flash) und dies zumeist in Fixed Size eingesetzt worden. Besonders sogenannte Micro-Sites – also relativ kleine Formate – finden besonders zu Werbe- und Promotionzwecken Anwendung. Für den Einsatz von Bannern, die nicht nur als Inhalte von Seiten, sondern teil- und oft unangenehmerweise auch als selbsttätig öffnende PopUp- oder als PopUnder-Windows gestaltet werden, sind diese kleinen Window-Formate bereits gängig.
PU separatorWechsel zu LOD1.Wechsel zu LOD3
Format und Layout
Die Entscheidung zwischen auflösungsabhängigen oder -unabhängigen Layout in Webanwendungen betrifft die Frage: Soll sich bei Veränderung der Fensterbreite durch den Benutzer der Inhalt einer Seite anpassen oder nicht? Für die Anzeige von Text bedeutet das bei einer variablen Spaltenbreite längere Zeilen, also ein leseunfreundliche Veränderung. Besonders nahe kommt einer Problemlösung der automatische Umbruchs einer Seite auf mehrere Spalten, sobald das Window-Format verändert wird.
Wahl des Formates
Die Wahl des Formats kann für Entscheidungen zu folgenden Faktoren in der Abstimmung auf vordefinierte Anforderungsprofile und Anwender-Gruppen relevant sein:
  • zur Differenzierung verschiedener Applikationen bzw. Produkte voneinander
  • zur Strukturierung von Inhalten
  • für das Leseverhalten des Anwenders
  • zur Visuelle Erfassung des Anwenders
  • für Intuitive Navigation
  • für ästhetische Gesichtspunkte
  • für die Ablauf- bzw. Interaktionsdramaturgie einer Multimedia-Anwendung
Die Entscheidung für das letztendliche Format einer multimedialen Applikation kann nur in unmittelbarem Zusammenhang mit anderen Phasen des Entstehungsprozesses getroffen werden. Abhängig vom Umfang und der Art der darzustellenden Inhalte muss das Format einer Anwendung auf die Struktur der Anwendung abgestimmt werden. Die Struktur wiederum ist für Art und Aufbau der Navigation grundlegend.
PU separatorWechsel zu LOD1.Wechsel zu LOD3
Quellen
Thomas Wirth: Missing Links; Hanser, 2002
Isolde Kommer: Typografie und Layout für digitale Medien; Hanser, 2002
Wilbert O. Galitz: The Essential Guide to User Interface Design; Wiley, 2002
Christian Stary: Interaktive Systeme; Vieweg, 1994

PU separator
Dr. Stefan Müller (sm@automat.at)
Automat, http://www.automat.at/