Layout: Format
PU separatorWechsel zu LOD2.Wechsel zu LOD3
Einleitung und Motivation
Motivation und Lernziel dieser Lerneinheit
  • Überblick über Einsatz von Windows multimedialer Anwendungen und deren Format
Themen dieser Lerneinheit
  • Format und Windows
  • Sccrolling und Paging
  • Seitenlänge
  • Format und Layout
Format (lat.)
  • das Geformte, das Genormte
  • legen Gestalt, Grösse und Mass fest
  • bilden Grundlage jeden Überblicks
  • begrenzen Inhalte
  • richten sich nach Nutzbarkeit und/oder nach Dargestelltem
  • Normierung dient Vereinheitlichung und Kombinationsfähigkeit (Rentabilität)
PU separatorWechsel zu LOD2.Wechsel zu LOD3
Format und Multimedia
Wahl des Formats
  • Wahl des Formats MM-Anwendungen je nach vorgesehener Präsentation
    • Bezugssysteme multimedialer Formate
    • techn. Mittel der Präsentation (Monitor)
    • abgebildete Fenster (Windows)
  • fixe Formate
    • interaktiver Kioske
    • Video- oder Computer-Monitore
    • Monitor- oder Vidiwalls bzw. Projektionen
    • Webanwendungen
    • Screen PDA und Smart-Phones
  • flexible Formate (Windows)
    • Webbrowser
    • OS und Computerapplikationen
Darstellungsformen bei mehreren Fenstern
  • nebeneinander angeordnet (tiled)
  • übereinander (overlapping)
  • geordnet und nach Raster ausgerichtet (cascading)
  • Anordnung von Benutzer frei wählbar
block separator
Beispiel
Window-Darstellungen
Abbildung
[s]
block separator
Eigenschaften der verschiedenen Darstellungsformen
Darstellungsform jeweils Vor- und Nachteile (Wahl nach Anforderung):
Nebeneinander
  • für singuläre Aufgaben bzw. Zielsetzungen
  • für weniger erfahrene Benutzer
  • für Inhalte in fixem Fensterformat
  • für gleichzeitig betrachtete Inhalte
Übereinander
  • wenn Wechsel zwischen mehreren Aktivitäten
  • wenn Benutzer erfahren
  • wenn veränderbare Fenstergrösse notwendig
  • wenn Form und Umfang d. Inhalte schwer vorhersehbar
[s]
  • Interface-Evolution von Einzelschirm-Präsentation zum Windowing
  • Web von Beginn an im Single-Screen-Modus
  • Web-Darstellungen: Analogie von Seite (Page) und Fenster (Window)
  • Ausgleich - Frames (sozus. mehrere nebeneinander angeordnete Windows)
  • durch Frames - parallele Darstellung versch. Inhalte auf einer Seite
PU separatorWechsel zu LOD2.Wechsel zu LOD3
Grösse von Windows
  • Standard - lange Zeit: 640x480 px
  • Anzeige auch auf Monitoren mit geringer Bildschirmauflösung möglich
  • heute Format 1024x768 grundlegend
Window-Formate
Abbildung
  • bei Sicherstellung der Monitor-Auflösung bei Präsentation – freie Formatwahl
  • Gestaltung fixer Windowgrössen – durchweg unterschiedliche Formate u. Fenstergrössen (PopUp-, PopUnder-Windows, Web-Microsites
Typische Monitor-Auflösungen
Abbildung
[s]
  • alle zu vermittelnden Informationen im Fenster zu platzieren
  • möglichst grosszügige Dimensionierung des Windows empfohlen
  • bessere Möglichkeiten für Layout
Vorteile grossformatiger Seiten
  • mehr Information gezeigt
  • Erfassen der Struktur von gezeigten Daten einfacher
  • weniger Interaktion notwendig
  • effizientere Bewertung der Information möglich
Nachteile grossformatiger Seiten
  • längere Wege des Mauszeigers
  • Erfassen des Inhalts (visuelle Abtastung) aufwendiger
  • Überlappung bei Display mehrerer Fenster wahrscheinlicher
[s]
Studien - Windows in UserInterfaces
  • Vergleich zw. 6, 12 u. 24 Zeilen Text: Fenster mit 12 Zeilen Text am raschesten erfasst
  • Vergleich d. Erfassung alphanum. Daten 7-, 13- und 19-zeiliger Windows: 7-Zeilen-Version am angenehmsten
  • Tests: unterschiedlich gestaltete visuelle Daten stellen Messbarkeit in Frage
  • Wahl der Window-Grösse je nach Anforderungen der Applikation
  • Format eröffnet Designer vielfältige Möglichkeiten
[s]
PU separatorWechsel zu LOD2.Wechsel zu LOD3
Veränderbares Format
  • Window-Format für Content-Gestaltung (Multimedia) entscheidend
  • besonders wenn vom Designer gewähltes Format nicht mit des Benutzers ident
  • Rücksichtnahme auf techn Präsentationsbedingungen unabdingbar
  • wiedererkennbares Erscheinungsbild f. gelungenes Design wichtig
  • identische Darstellung entworfener Seiten auf allen Plattformen, Browsertypen u. Monitoren
  • Kompatibilitätsanforderungen: oft Kompromiss möglichster Annäherung
  • Kompatibilität nicht zuletzt von Aufwand für Tests u. Anpassungen abhängig
  • Intro-Anmerkungen in Website bzgl. Einschränkungen
  • damit Anpassungszeit und finanzielle Mittel eingespart
  • User verschreckt bzw. Zugang zur Applikation verwährt u. ausgegrenzt
  • für Designprozess durch Eingrenzung von Möglichkeiten, Beschränkungen bzw. Normierung gestalterischer Spielraum gewonnen
  • heute meist gebräuchliche Bildschirmauflösungen (Web): 800x600 u. 1024x768 px
PU separatorWechsel zu LOD2.Wechsel zu LOD3
Scrolling oder Paging
  • bei flexibler Anpassung von Browser-Windows - Entscheidung ob fixe od. flexible Dimensionierung von Window-Inhalten
  • Inhalte fixer Dimensionierung:
    • als einzeln zu betrachtende Seiten dargestellt
    • zum Lesen weiterzuschalten
  • Inhalte flexibler Dimensionierung:
    • Benutzer muss scrollen
Scrolling einer Seite
Abbildung
Scrollen: Diskussionen unterschiedlicher Ansichten
  • Nein - „Internet users don’t scroll“ (Nielsen 1996)
    • Top Ten Mistakes in Web Design (Alertbox)
  • Ja - „Scrolling Now Allowed“(Nielsen 1997)
    • Nielsen, J.: 1997, Changes in WebUsability Since 1994
    • Changes in Web Usability Since 1994 (Alertbox)
  • Nein - f. 24% aller Internet-Beginner Scroll-Informationen nicht auffindbar
    • (Berliner Studie)
  • Ja - Scrolling benutzerfreundlich (Univ. Utrecht)
    • 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 - Top10-Ärgerniss beim Surfen (brit. Studie 2001)
    • Pressemitteilung der Abbey National Bank (2002)
  • Ja - User behaupten nein, aber lt. Tests problemloser Umgang (Jared Spool)
    • 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?
  • divergierende Ergebnisse durch unscharfe Formulierungen!
  • ob kurz oder lang (Seiten) ist subjektiv u. abhängig v. Strukturierung u. Darstellung des Inhalts
  • Scrolling (vertikal) durch geeignetes Eingabedevice unterstützt (Mäuse mit Scroll-Rad)
  • Paging - als Weiterschaltung von Einzelseiten zur Navigation im Content
  • auch beide Methoden (Scrolling u. Paging) parallel sinnvoll
  • eher zur Navigation durch textintensive Inhalten empfohlen
  • von Designern nicht bevorzugt angewandt
  • möglichste Reduktion und Entscheidung für eine Navigationsmethode
  • horizontale als auch vertikale Navigation für manche Benutzer verwirrend
  • horizontales Scrolling von Inhalten zu vermeiden
[s]
PU separatorWechsel zu LOD2.Wechsel zu LOD3
Above the fold
  • Websites - Effekt wie „in Mitte gefalteter“ Tageszeitungen
  • für Kaufpräsentation und ersten Leserkontakt nur obere Inhalte relevant
  • dort alle wesentlichen Informationen
Above-the-fold
Abbildung
  • für Elemente unterhalb dem Rand keinerlei Aufmerksamkeitswert
  • für Benutzer-Ansprache wesentliche Elemente ins übersehbare Bildfeld
  • Bsp Web-Shops: Links zum Warenkorb und zur Kasse immer sichtbar zu halten
  • unbedingte Regel der Priorisierung von Inhalten
  • vordergründige Absicht von Web-Portalen auf Einstiegsseite oft nicht erkennbar
  • Vielzahl von Bedürfnissen an Vielzahl von Benutzergruppen oft unmöglich zu erfüllen
  • Werbe-Banner an Portal-Header überragen oft eigentlichen Content (Scrollen notwendig)
PU separatorWechsel zu LOD2.Wechsel zu LOD3
Länge einer Seite
Nachteil lange Seite
  • Handicap langer Seiteninhalte, wenn Navigation nicht sichtbar
  • zumindest Inhaltsübersicht anwählbar zu bleiben
  • für Printout längere Seiten vorteilhafter
  • kurz gefasste Seiten auf mehrere Male auszudrucken
  • Angebot einer Printversion als Ergänzung
Vorteile lange Content-Seitenformate
  • wenige Ladevorgänge
  • über die Browser-Search auffindbare Inhalte
  • geringer Aufwand sie zu administrieren
  • einfach im Ausdruck oder im Download
Vorteile kurze Content-Seitenformate
  • unmittelbare Erfassbarkeit allen Inhalts
  • gute Übersicht der Struktur komplexer Inhalte und bessere Orientierung
  • kurze Ladezeit einzelner Seiten
  • permanente Verfügbarkeit der Navigation
  • für jedes Format Gestaltung den jeweiligen Rezeptionsverhältnissen und Interaktionsmodus anzupassen
PU separatorWechsel zu LOD2.Wechsel zu LOD3
Text für Multimedia
Darstellung von Text
Darstellung von Text zu achten auf
  1. knappe textuelle Formulierungen
  2. Aufteilung und Strukturierung des Gesamttextes
  3. adäquate Navigation durch gesamtes Textvolumen
Problematik langer oder kurzer Seiteninhalte so zu umgehen
PU separatorWechsel zu LOD2.Wechsel zu LOD3
Klein-Formate
  • für Gestaltung Web in letzten Jahren unterschiedlichste Window-Formate eingesetzt (zumeist in Fixed Size)
  • Micro-Sites besonders zu Werbe- und Promotionzwecken Anwendung
  • Einsatz als Banner, PopUp- od. PopUnder-Windows
PU separatorWechsel zu LOD2.Wechsel zu LOD3
Format und Layout
  • Entscheidung zw. auflösungsabhängigen oder -unabhängigen Layout (Web)
  • Seiteninhalt durch Veränderung der Fensterbreite anzupassen od. nicht
  • Anzeige von Text bei variabler Spaltenbreite in längeren Zeilen
  • leseunfreundliche Veränderung
  • Lösung: automat. Spalten-Umbruch einer Seite, sobald Format verändert
Wahl des Formates
Wahl des Formats für folgende Anforderungsprofile entscheidend:
  • zur Differenzierung verschiedener Applikationen bzw. Produkte voneinander
  • zur Strukturierung von Inhalten
  • für Leseverhalten des Anwenders
  • zur Visuelle Erfassung des Anwenders
  • für Intuitive Navigation
  • für ästhetische Gesichtspunkte
  • für Ablauf- bzw. Interaktionsdramaturgie einer Multimedia-Anwendung
Entscheidung für Format einer mm. Applikation abhängig von:
  • Phasen des Entstehungsprozesses
  • Umfang und Art darzustellender Inhalte
  • Struktur der Anwendung
  • Art und Aufbau der Navigation
PU separatorWechsel zu LOD2.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/