Strukturierung und Gestaltung von screenbased Multimediaproduktionen

Ausgehend von den zu vermittelnden Inhalten, den erstellten Nutzungsszenarien und Userprofilen müssen die Inhalte entsprechend strukturiert werden. Diese Struktur in Verbindung mit einem Konzept, wie man in der Struktur navigieren und sich zurecht finden kann, bildet die Grundlage sowohl für die technische Implementierung als auch für das Groblayout.

Eine Multimedia/Webapplikation lässt sich mit einem Eisberg vergleichen: Layout und Design (Screendesign, Interaktionsdesign) bilden den für die BenutzerInnen sichtbaren kleinen, aber wesentlichen Teil des Eisbergs. Die technische Implementierung ist der große unsichtbare Teil unter dem Wasser. Er wird für die User erst spürbar, wenn es zu einer "Kollision" kommt, d.h. wenn etwas nicht wie gewünscht funktioniert. Die Struktur bildet die Wasserlinie, die Verbindung dieser beiden Teile. Die Art der Strukturierung ist für die BenutzerInnen erfahrbar und bildet mit dem Layout und Design das Interface (das Tor, die Schnittstelle) zu den Inhalten.

Natürllich beeinflussen die technischen (und die oft damit verbundenen finanziellen) Möglichkeiten die Struktur. Z.B. hat die Wahl einer Entwickllungsplattform oder eines CMS (Content Management Systems)  Einfluss auf die Struktur. Ebenso fließen Überlegungen des Layouts und Designs in den Prozess der Strukturentwicklung ein. Entscheidend ist aber, dass durch die präzise Definition der Struktur inkl. Navigations- und Orientierungskonzept eine klare Schnittstelle zwischen den DesignerInnen und den SoftwareentwicklerInnen geschaffen wurde.

Eine ergänzende, aber etwas andere Sicht zeigt die nachstehende Grafik:
Gezeigt werden von unten nach oben fünf Ebenen bei der Entwicklung von screenbasierten Benutzeroberflächen:

Auf der strategy-Ebene wird der Zweck, den die Anwendung erfüllen soll, definiert (Zieldefinition). Das beinhaltet auch die Beschreibung des Nutzens für die User (Usersicht) und die Entwicklung von Nutzungsszenarien. Auf der scope-Ebene wird festgelegt welche Inhalte und Features in der Applikation angeboten werden. Auf der structure-Ebene wird der Inhalt in ein Netzwerk von Teilblöcken zerlegt, und es wird festgelegt, welche Features bei den jeweiligen Einheiten zur Verfügung stehen. Durch das Netzwerk wird definiert, wie die Teilblöcke zusammenhängen. Auf der skeleton-Ebene wird das Groblayout der jeweilgen Einheiten definiert, d.h. wie die einzelnen Elemente (Buttons, Bilder, Textblöcke, usw.) auf dem Screen angeordnet werden. Auf der surface-Ebene erfolgt die konkrete visuelle Gestaltung, die den Zielvorstellungen entsprechend  die BenutzerInnen auch emotional ansprechen soll.

Diese Abbildung wurde entnommen aus Jesse James Garrett, The Elements of User Experience
Siehe auch Elemente der Entwicklung von Benutzerschnittstellen von J. Garrett.

Möglichkeiten zur Strukturierung von Inhalten

Das Grundproblem besteht darin, dass immer mehr Daten vorliegen als auf dem beschränkten Rechteck des Screens gleichzeitig dargestellt werden können. Daher müssen die Daten in kleine Teilblöcke zerlegt werden. Der zu strukturierende Datenbestand muss dabei nicht gleich bleiben, sondern kann sich laufend verändern und auch wachsen. Daraus ergibt sich sofort das zentrale Strukturierungproblem, in welche Blöcke die Daten zerlegt und wie diese verknüpft werden sollen.

Dafür gibt es unterschiedliche Lösungansätze:

• Lineare Struktur: Inhalte werden ähnlich wie in einem Buch in einer klar definierten Reihenfolge strukturiert und angeboten
  
  
• Baumstruktur: Inhalte werden in streng hierachischer Form gegliedert. Ausgehend von einem Knoten im Baum ist es grundsätzlich nicht vordefiniert, welcher Subknoten zuerst ausgewählt wird.
  
  
  
  Auch in vielen (Sach-)büchern werden die Inhalte baumartig in Kapitel und Unterkapitel gegliedert, wobei hier für den Druck eine zum Teil inhaltlich nicht notwendige Linearisierung erfolgen muss.
• Netzstruktur: Die einzelnen Inhaltsblöcke sind in einer nicht-hierachischen Form untereinander vernetzt.
  
  

Lineare Strukturen sind ein Spezialfall von Baumstrukturen. Bäume sind wiederum Spezialfälle von Netzen. Natürlich kommen in der Praxis meist Mischformen vor:

• Eine lineare Struktur wird zu einem Ring geschlossen: Vom Ende gelangt man wieder zum Anfang. Z.B.in einer Bildergalerie. Wenn alle Elemente gleichwertig sind, ist der Einstiegspunkt beliebig und kann z.B. durch Zufall ausgewählt werden, um bei jedem Neueinstieg für Abwechslung zu sorgen.
  
  
• Die Subknoten eines Knoten werden untereinander verknüpft, um nicht immer auf die nächst höhere Ebene zurück wechseln zu müssen. Oder alle Knoten einer Baumebene werden verknüpft.
  
  
• Unabhängigen Teilnetze werden baumartig verknüpft. Jeder Knoten des Baums bildet dabei ein Netz.

Zusätzlich zu den oben genannten Strukturen ist eine Strukturierung nach Level of Detail (LoD) möglich:
Dabei werden für jeden Inhaltsblock unterschiedlich umfangreiche Informationsblöcke angeboten. Z.B. Kurzinformationen für den raschen Überblick, etwas detailiertere sowie umfangreiche,  in die Tiefe gehende Informationen. Die BenutzerInnen können daher selbst je nach Interesse und Zeit den für sie entsprechenden Detailiertheitsgrad wählen.

Im Bild oben wird eine lineare Struktur in drei unterschiedlichen Detailiertheitsgraden angeboten. In diesem Fall kann man bei jedem Block in die Tiefe gehen, kann aber bei Level 2 und 3 nicht zu einem anderen Inhaltsblock wechseln. (Logisch gesehen ist das ein Baum.) Im unteren Bild kann man hingehen auch auf unterem Level zu anderen Blöcken wechseln (Netz).

Wenn Inhalte in untereinander verknüpfte Teilblöcke zerlegt werden, von denen nur jeweils einer am Screen gezeigt werden kann, muss es auf diesem Screen Einstiegspunkte oder -bereiche geben über die verknüpfte Teilblöcke ausgewählt und angezeigt werden können. Ein Menü ist eine Sammlung von Einstiegspunkten auf dem Screen über das verschiedene Teilblöcke ausgewählt werden können.
Für die Anordnung und Präsentation dieser Einstiegspunkte, -bereiche und Menüs auf einem Screen gibt es viele Möglichkeiten:

Anmerkung: Viele der nachstehenden Möglichkeiten kommen auch im Informationsdesign bei der Erstellung von Datenvisualisierungen zur Anwendung. Denn dabei geht es auch um die Anordnung und das aufeinander Beziehen von Daten bzw. kleinen Informationsblöcken . Man muss daher nur Einstiegspunkte durch Daten bzw. Informationsblöcke ersetzen.

• Nicht-Ordnung, Gleichwertigkeit: Man möchte mitteilen, dass die hinten den Einstiegspunkten aufrufbaren Inhalte gleichwertig sind, keiner bestimmten Ordnung unterliegen und daher die Reihenfolge des Aufwählens für die BenutzerInnen beliebig ist. Mögliche Lösungen:
  • Die Punkte werden beliebig auf dem Screen verteilt.
    Man hat den Eindruck einer zufälligen Verteilung.
    Museum of Erotic Art
  • Bei jedem Einstieg werden die Punkte neu angeordnet.
    http://www.newquest.fr/, http://www.thibaud.be/
  • Die Punkte sind zufällig verteilt und wechseln permanent fließend oder sprunghaft ihre Position.
    http://www.wefeelfine.org/ (Punkt "Madness") 
  • Die Punkte werden kreisförmig angeordnet.
    Dadurch gibt es keinen Anfang und kein Ende. Der Kreis kann zusätzlich rotieren.
    Karussell_Menü
  • Auch eine zeitliche Rotation ist möglich, d.h. die Punkte werden zeitlich nacheinander angeboten und nach dem letzten folgt wieder der erste.
    http://yugop.com/ver2/
  • Durch gleichwertige Schrift- Form- und Farbgestaltung kann die inhaltliche Gleichwertigkeit unterstützt werden.
     
• Neutrale Ordnungen enthalten eine Reihung, aber sie implizieren keine Wertigkeit der gereihten Punkte:
  • Alphabetische Ordnung.
    Z.B. bei der Auflistung von Personen, Kunden, etc.
  • Anordnung in zeitlicher Abfolge
    Alle Blog-, Twittereinträge sind in einer zeitlicheen Abfolge angeordnet (der aktuellste Eintrag ist ganz oben).
    Ein Spezialfall sind explizite Timelines auf denen die Einstiegspunkte angeordnet sind
    http://ten.propaganda3.com/, facebook timeline, http://cba.fro.at/timeline/
  • Anordnung auf Karten, Plänen, Grundrissen und in Räumen.
    Google maps, http://mediatheque.visitprovence.com (map search), http://www.sagmeister.com/ 
• Ordnung durch durch thematische Nähe: Punkte, die inhaltlich zusammengehören werden in irgendeiner Form visuell zusammengefasst, z.B. durch Nähe, Umrandung, Farbe, Größe, ....
• Ordnungen , die eine Reihung bzw. Wertigkeit implizieren können: Durch bestimmte Anordnungen kann die Reihenfolge in der Nutzung der Einstiegspunkte bzw. deren Wertigkeit visualisiert werden. Natürlich muss man sich als BenutzerIn nicht an diese Reihenfolge halten. Wenn man als GestalterIn eine eindeutige Reihenfolge vorgeben möchte, darf man immer nur den nächste Einstiegspunkt bereitstellen.
  • Waagrechte und senkrechte Reihung. Häufig benutzte oder wichtige Einstiegspunkte werden eher an den Beginn einer Reihung (Listung) gestellt. Bei der Abfolge von Einstiegspunkten in einer Reihung sollte man den inhaltlichen Zusammenhang der Punkte beachten. Inhaltlich verwandte Bereiche sollten auch nahe zueinander gereiht werden.
    http://www.ufg.ac.at/
    In Spalten angeordnete (Text-)Punkte sind in der Regel leichter erfassbar als nebeneinander angeordnete Punkt >
    Vergleich zwischen zwei Screenentwürfen.
  • Anordnung in Matrixform und Tabellen: Kombination von Reihen und Spalten. In der Regel wird eine Matrix gemäß unserer Leserichtung von links nach rechts und von oben nach unten abgearbeitet.
    iPad,  http://offenhuber.net/
  • Zentrale Anordnung, Nähe zum Zentrum: Die wesentlichen Elemente werden in der Mitte angeordnet und zum Rand hin nimmt die Bedeutung ab.
• Weitere Möglichkeiten der Visualisierung der Wichtigkeit und Bedeutung von Einstiegspunkten
  Neben der Plazierung auf dem Screen und der Position in einer Anordnung kann man die Bedeutung von Einstiegspunkten durch nachfolgende Punkte beieinflussen:
  • Größe: Über die Größe kann man z.B. den BenutzerInnen mitteilen wieviel Inhalt (mengenmäßig) hinten dem Einstiegspunkt zu erwarten ist. So könnte man zwischen "inhaltsschweren" und kleinen Teilblöcken unterscheiden.
  • Farbe, Kontrast: Es gibt Farben, die sich kontrastreich vom Hintergrund abheben und "ins Auge springen". Dadurch kann die Bedeutung des Einstiegspunktes gesteigert werden.
    Aber auch andere Informationen können über die Farbgebung vermittelt werden.
  • Form und Schriftwahl.
• Baumartige Menüs und Karteireiter: Die Standardmenüs in den Programmen sind klassische Beispiele für eine baumartige Strukturierung von Einstiegspunkten (in diesem Fall von Programmbefehlen). Die Reihung der Hauptmenüpunkte erfolgt dabei meist nach einem ähnlichen Schema. Dieses Prinzip lässt sich sofort auf Menüs für Multimediaanwendungen übertragen. Ebenso das Prinzip der Karteireiter, über die man zwischen Teilbereichen hin- und herwechseln kann.
  
  
  Abb.: Der Screenshot zeigt ein mehrstufiges baumartig aufgebautes Programmmenü und zwei zusätzliche Karteireitersysteme.
  
  Sehr oft wird zusätzlich zu eher spielerisch gestalteten Auswahlmöglichkeiten ein herkommliches Menü meist am Screenrand für eine rasche, effiziente Nutzung der Inhalte angeboten.
  http://yugop.com/ver2/

Navigationsstruktur und Inhalt sind zwei unterschiedliche Elemente im Screen. Für das Design ergibt sich daraus die Frage, wie diese beiden Elemente zueinander in Beziehung gesetzt werden:

• Klare Trennung von Navigation und Inhalt:
  In den meisten Fällen wird eine klare Trennung zwischen diesen Elementen bevorzugt. Im Webdesign findet man sehr oft die Gliederung von Hauptmenü im oberen Screenbereich, darunter links den Bereich für weitere Untermenüs und der große Restbereich ist für den Inhalt vorgesehen.
  
  Abb.: Häufig verwendete Gliederung im Webdesign
  
  Auch im Explorer von Windows findet man die strenge Zweiteilung: Im linken Bereich ist die Baumstruktur der Navigation abgebildet, im rechten Bereich der Inhalt des gerade ausgewählten Knotens.
  
  
• In der Navigationsstruktur wird der Inhalt per Klick angezeigt:
  Wird ein Inhalt abgerufen, so entfaltet sich dieser unmittelbar in der Navigationsstruktur.
  Mit der Ajax und jQuery-Technologie lässt sich dieses Prinzip in normalen Webseiten realisieren > Accordion-Menüs
  http://www.sectionseven.com http://www.dhp-architecten.be/
  
  
• Der Inhalt wird in die Navigationsstruktur eingebettet und bildet mit dieser eine verwobene Einheit.
  Durch entsprechende visuelle Gestaltung ist der Unterschied zwischen den ineinander verwobenen Komponenten wahrnehmbar.

Hier geht es um die Frage, wie Einstiegspunkte zu anderen, gerade nicht gezeigten Inhalten den BenutzerInnen zur Verfügung gestellt werden. Auch dafür gibt es wieder unterschiedliche Lösungsmöglichkeiten.

• Alle Einstiegspunkte werden gleichzeitig und klar sichtbar am Screen angezeigt.
• Durch Klick auf oder Rollover über einen Einstiegspunkt werden weitere Einstiegspunkte sichtbar.
  Z.B. die vertrauten Drop-Down-Menüs und sich entfaltende Navigationsbäume.
  http://www.koendemuynck.com/ (Drop-Down-Menü von der Seite)
• Entdecken vorhandener Punkte:
  Die Einstiegspunkte sind überhaupt nicht sichtbar oder sie sind als mögliche Einstiegspunkte erkennbar, deren Bedeutung ist aber nicht ablesbar. Erst durch Mausbewegung oder durch Verschieben von Elementen werden vorhandene Einstiegspunkte sichtbar, lesbar.
  http://www.glasfabrik.at/
  Gelegentlich sieht man Lösungen, wo Einstiegspunkt erst nachdem man die dazugehörigen Inhalte besucht hat, klar und deutlich sichtbar sind. Z.B. Sigmund Freud CD von http://www.nofrontiere.com/
• Erst wenn bestimmte Aufgaben gelöst sind, werden weitere Einstiegspunkte sichtbar.
  Das ist vor allem in spielerischen Anwendungen ein häufig verwendetes Prinzip.
• Verwendung von Filtern und Layern:
  Den BenutzerInnen wird die Möglichkeit angeboten, nur die für sie relaventen Einstiegspunkte anzeigen zu lassen. Die Anzeige wird gefiltert. Derselbe Zweck kann auch durch Layer realisiert werden, wo übereinanderliegende Schichten ein- bzw.ausgeblendet werden können.
  Informationslayer eines Plans
• Anzeige gemäß des Benutzerprofils:
  Am Beginn einer Anwendung wird durch entsprechende Abfragen ein Benutzerprofil erstellt. Auf Grund dieses Profils werden bestimmte Einstiegspunkte gezeigt.
  Es besteht auch die Möglichkeit automatisiert ein Benutzerprofil zu erstellen, das sich aus der Protokollierung des Nutzungsverhalten ergibt. Voraussetzung ist dabei natürlich, dass die BenutzerInnen die Anwendung laufend nutzen. Amazon wäre ein bekanntes kommerzielles Beispiel dafür.
• Personalisierung:
  Das ist eine erweiterte Form von Filterung. Den BenutzerInnen werden Möglichkeiten angeboten ihre eigenen bevorzugten Einstiegspunkte auf der Benutzeroberfläche zusammenzustellen. Favoriten, Bookmarks sind bekannte Aspekte von Personalisierung einer Anwendung.

Da nicht alle Inhalte gleichzeitig auf dem Screen gezeigt werden können, muss man von einem Inhaltsblock zum nächsten wechseln. Daraus ergibt sich die Frage, wie dieser Inhaltswechsel erfolgen kann?

Grundsätzliches zu Navigation und Orientierung

• "Blättern"
  Ähnlich dem Umblättern einer Buchseite wird auf derselben Stelle der alte Inhalt durch den neuen ersetzt. Diese Ersetzung kann wieder auf unterschiedliche Art erfolgen:
  
  • Harter, übergangsloser "Sprung"
    von A nach B, meist durch einen Klick ausgelöst.
  • "Filmübergänge", Transitionen:
    Alle Varianten von Überblendungen, die im VIdeoschnitt möglich sind, sind auch hier denkbar. Im Gegensatz zum harten Schnitt ist hier ein fleißender Übergang zwischen den Inhalten wahrnehmbar.
    Häufig verwendet werden Ausfaden des alten und Einfaden des neuen Inhalts, Überdecken oder Aufpixeln des alten Inhalts,
    Herein- bzw. Hinausschieben des neuen bzw. alten Inhalts.
    Häufig wird der alte Inhalt auf einen neutralen Grund (weiße, schwarze Farbfläche) ausgeblendet und von diesem wird der neue Inhalt eingeblendet.
    Beispiele für "klassisches" Blättern: http://www.claracollins.com/ (Katalog Spring/Summer 2006)
     
  • Bei jedem Wechsel Ab- bzw. Aufbau des alten bzw. neuen Inhalts:
    Im Gegensatz zu einer standardisierten Überblendung wird hier eine konkrete Screensituation aufgelöst und zu einer konkreten, neuen umgeformt. Das ist sicher die aufwendigste, aber wenn gut eingesetzt auch die abwechslungsreichste Form den Inhalt zu ändern. Auf Dauer können aufwendige Übergänge aber auch nerven. Das ist sehr stark von der Nutzungssituation und dem Zweck der Anwendung abhängig.
• Scrollen
  Der gezeigte Screenausschnitt ist Teil einer größeren Fläche und wird durch die BenutzerInnen über Maus (Maus bei gedrückter Taste ziehen) oder Tastaturpfeile verschoben. Das Weiterschieben kann auch automatisch erfolgen, wenn sich der Mauscursor den Rändern nähert oder Navigationselemente (z.B. Scrollbar) angeklickt werden.
  http://makeyourmoneymatter.org/, http://www.flatvsrealism.com/
  
  Paralax Scrolling: Wenn mehrere teilweise transparente Schichten übereinander gelegt sind, ergibt sich beim Scrollen ein räumlicher Effekt indem die oberen (= nahen) Schichten schneller als die unteren (= weiter entfernten Schichten) bewegt werden.
  
  Siehe auch ActionScript3: Container (Sprites, Movieclips) ziehen (drag) und scrollen, Panoramen
   
• Zoomen
  Grundsätzlich ist eine große Fläche mit den ausgebreiteten Inhalten die Ausgangsbasis. Durch Einzoomen kann man bestimmte Teilinhalte screenfüllend vergrößern. Durch Auszoomen erhält man wieder einen Gesamtüberblick.
  Der Zoomvorgang kann vordefiniert sein und z.B. durch einen Klick ausgelöst werden oder völlig frei, d.h. man kann an jeder beleibigen Stelle ein- und auszoomen.
  
  Scrollen kombiniert mit Zoomen
  Beispiel für mehrfaches Einzoomen: http://www.sofake.com/ (Navigation am unteren Rand)
   
• Überlagerung
  Über den bestehenden Inhalt wird der neue Inhalt transparent darübergelegt, sodass der alte Inhalt noch (abgedunkelt, verschwommen, blass, ...) sichtbar ist und so gleichzeitig ein Bezug zwischen dem alten und neuen Inhalt hergestellt wird.
  Häufig wird dieses Prinzip bei der Vergrößerung von Bildern in Bildergalerien anwandt > jQuery/Lightbox

Beim Gestalten von "maßgeschneiderten" Übergängen zwischen Inhaltsblöcken (siehe unter Blättern - Ab-/Aufbau des alten/neuen Inhalts) ergibt sich das Problem, dass bei direkten Übergängen zwischen den einzelnen Blöcken, die Zahl der Möglichkeiten mit der Anzahl der Teilblöcke quadratisch zunimmt.
Bei 4 Blöcken muss man 6 Übergänge (die in beide Richtungen funktionieren müssen) gestalten, bei 5 Blöcken 10 Übergänge und bei 6 bereits 15.
Da dies sehr aufwendig ist, wird meistens für alle Übergänge ein gleichbleibender Zwischenzustand definiert über dem alle Übergänge laufen. Man muss daher für jeden neuen Blöck nur einen neuen Teilübergang zu diesem Zwischenzustand gestalten.


Abb.: direkte Übergänge (links), Übergänge über einen neutralen Zwischenzustand (rechts)

Wenn man zu einem neuen Inhaltsblock wechselt möchte man gelegentlich den Bezug zum vorhergehenden Block oder zu den Nachbarblöcken nicht verlieren. Dafür findet man wieder verschiedene Lösungen:

• Der neue Inhalt legt sich transparent über den alten Inhalt:
  Der alte Inhalt wird z.B. aufgehellt, leicht weich gezeichnet, sodass seine Struktur noch erkennbar ist, aber die Lesbarkeit des darüberliegenden neuen Inhalts nicht stört. Gerne wird dieses Mittel bei vertiefenden Inhalten eingesetzt .
  
  
• Kleine Teile des alten bzw. der benachbarten Inhalte sind noch am Rand zu sehen:
  Der alte Inhalt wird z.B. nicht vollständig aus dem Screen geschoben, sondern ein kleines Stück bleibt sichtbar und der alte Inhalt kann darüber wieder hergeholt werden.
  
  
• Neben dem Hauptanzeigebereich gibt es eine Übersicht, die den aktuellen Blöcke und dessen Beziehungen zu den benachbarten Blöcken zeigt. Dabei können der aktuelle, der vorhergehende und bereits besuchte Blöcke visuell besonders gekennzeichnet sein.
  
  
• History, Verlauf, Breadcrumbs
  Anzeige einer Liste bereits besuchter Blöcke in zeitlicher Reihenfolge. Über diese Liste kann man auf früher besuchte Blöcke zugreifen. Die Breadcrumbs (Brotkrümel) sind vor allem auf Webseiten sehr häufig zu finden ( Inhalt1 > Inhalt2 > Inhalt3 > .... > aktueller Inhalt ).
  

Beim Scrollen und Zoomen bildet eine große Fläche die Ausgangsbasis von der jedoch nur ein Teil auf dem Screen zu sehen ist. Daraus ergibt sich das Orientierungsproblem, wo man sich gerade auf der Fläche befindet. Dafür gibt es wieder verschiedene Lösungsansätze, um eine Orientierung zu ermöglichen:

• Navigator
  In einem kleinen Überblicksfenster wird die gesamte Fläche gezeigt und ein darin enthaltenes Rechteck kennzeichnet den Ausschnitt, der im großen Fenster sichtbar ist. Sehr oft kann man das Ausschnittsrechteck im Überblickfenster verschieben und in der Größe verändern und so den gezeigten Ausschnitt im großen Fenster beeinflussen.
  
  
• "Bodenmarkierung"
  Durch Anbringen von konzentrischen Kreisen oder Linien auf der großen Fläche kann man im gezeigten Ausschnitt die Position des Ausschnitt relativ zum Zentrum der großen Fläche ablesen. Das ist vor allem geeignet für Inhalte, die sich um ein Zentrum anordnen und das Zentrum bzw. die Distanz zum Zentrum auch eine inhaltliche Bedeutung haben.
  
  
• Scrollbarinformationen
  Durch die Position und Länge des Sliders in einem Scrollbar kann man die Position und Größe des gezeigten Ausschnitts relativ zur großen Fläche ablesen.
  
  
• Hinweise auf außenhalb des Screens liegende Inhalte
  Durch Markierungen an den Rändern kann man zeigen, in welchen Richtungen noch weitere Inhalte außerhalb der gezeigten Fläche zu finden sind.
  
  
  Abb.: Links nur mit Hinweisen auf außerhalb liegende Inhalte, rechts durch den Grauwert kodiert mit der zusätzlichen Information über die Menge der Inhalte.
  
  Beispiele:
  In pdf-Dateien erfolgt ein Hinweis auf nicht sichtbare Kommentare durch kleine Dreiecke an den Rändern.
  Nachfolgendes Bildbeispiel ist einem Portfolio, das sich auf einer großen Fläche ausbreitet, entnommen.
  Zu den beiden letzten Punkten siehe auch Projektion

Wenn man von einem Inhaltsblock zum nächsten wechselt müssen die entsprechenden Daten für den neuen Inhalt in den Hauptspeicher geladen werden. Dafür wird Zeit benötigt während der die BenutzerInnen warten müssen. Für das Laden gibt es grundsätzlich zwei Strategien:

• Es werden gleich zu Beginn alle verfügbaren Daten für den neuen Inhaltsblock geladen auch wenn diese zu Beginn noch nicht gezeigt werden. Das ergibt eine längere Ladezeit am Beginn eines neuen Blocks, aber keine (bzw. nur sehr kurze) Wartezeiten während der Beschäftigung mit diesem Inhaltsblock.
• Es werden immer nur die Daten geladen, die für die nächste Anzeige benötigt werden. Das ergibt eine kürzere Wartezeit am Anfang, aber immer wieder Ladeunterbrechungen während der Beschäftigung mit dem Inhaltsblock.
  Zum Beispiel kann man alle Bilder einer Galerie gleich zu Beginn laden oder jedes Bild erst beim konkreten Aufruf.

Unabhängig von der gewählten Strategie soll man den BenutzerInnen mitteilen, dass das System beschäftigt ist und man warten muss. Dafür gibt es wieder mehrere grundsätzliche Möglichkeiten:

• Das einfachste Beispiel dafür ist der statische (Sand-)Uhrcursor oder eine andere "sprechende" Cursorform.
  Nur wenn die Sanduhr zu lange gezeigt wird, ist man sich nicht mehr sicher, ob jetzt das System noch beschäftigt ist oder sich das Programm unerwartet "verabschiedet" hat.
• Die Verwendung von statischem Text wie "loading ..."
• Animierte Cursor (sich umdrehende Sanduhr, bewegte Uhrzeiger), animierter Text (die Punkte bei loading ...), extra Animationen (rotierende Objekte):
  Alle diese Lösungen verwenden einen wiederkehrenden Loop. Solange die Animation läuft, weiß man, dass sich zumindest das Gesamtsystem noch nicht abgestürzt ist, aber man weiß nicht wielange es noch dauert.
• Dynamische Anzeige des Ladevorgangs durch eine "wachsende" Grafik und/oder durch Prozentangaben. Durch die Anzeige wird vermittelt, wieviel bereits geladen wurde. Bei der Verwendung einer wachsenden Grafik (z.B. Ladebalken, größer werdendes Keissegment) sollte der 100%-Bezug ebenfalls visualisiert werden.
  Sehr oft werden wachsende Grafik und Prozentangabe kombiniert (z.B. im sich verändernden Prozentzahlenwert fährt gleichzeitig der Ladebalken hoch).
  Beispiele:
  • Beim Laden von Videos werden Ladebalken und Abspielbalken des Videos kombiniert: http://www.vimeo.com/
  • Eine grafische Auflösung eines vertikalen Ladebalkens: http://www.sectionseven.com/
  • Verspielter Ladebalken: http://www.jimcarrey.com/

Wartezeiten ergeben sich nicht nur bei Ladevorgängen sondern auch komplexen Berechnungen, die das System durchführen muss, beim Aufbau von Verbindungen usw.
Durch kleine nicht rechenintensive Animationen, durch Abspielen eines Soundfiles kann diese Wartezeit überbrückt werden. Wenn man aus einem Fundus von Animationen und Sounds bei jedem Warten zufällig etwas anderes einspielen kann, so kann man die Wartezeit in ein überraschendes Erlebnis verwandeln und man freut sich schon auf die nächste Wartezeit.

Benutzeraktionen lassen sich mit den Standardeingabegeräten (Maus, Tastatur) auslösen durch:

• Rollover: http://www.dontclick.it
• Mausklick: Einfachklick, Doppelklick, Klick + Verwendung einer Sondertaste (Strg, Shift, Alt)
  • beliebiger Mausklick auf dem Screen
  • Mausklick auf eine bestimmte Stelle
• Drag and Drop: Ein Element mit gedrückter Maustaste an eine bestimmte Stelle ziehen und dort die Maustaste auslassen.
• Tastendruck auf Tastatur
  • beliebige Taste
  • spezielle Taste (verschieden Aktionen können über einzelne Tasten ausgelöst werden)
    http://www.jacziesmer.com
    http://www.koendemuynck.com/ (Pfeiltasten zum Blättern in Fächern und Galerien)
  • Taste + Sondertaste
• Indirekt durch Lösen einer Aufgabe.

Durch Fingerberührung und Fingergesten auf berührungssensitiven Oberflächen bei Smartphones, Tablets.

Eine etwas ungewöhnliche Navigationsform ist die audiovisuelle Navigation über Kamera und Mikrophon durch Bewegung und Sprache, z.B.
http://www.becauseclickingisso90s.com/ - einfach ausprobieren,
http://www.youtube.com/hugobosstv - Steuerung durch Kopfneigung (nicht mehr online).

Wie lässt sich zeigen, dass man als BenutzerIn eine Aktion auslösen kann bzw. dass ein Bereich eine aktive Schaltfläche ist?

• Durch Gestaltung (Farbe, Form, Größe) und Platzierung lassen sich aktive und passive Bereiche visuell klar unterscheiden.
• Schaltflächen, Buttons:
  Button (Druckknopf) ist ein Metapher aus der Realwelt in der man über Schalter, Drücker, Drehknöpfe, Hebel, Schieber, etc. Geräte steuern kann.
  Ein Button soll als solcher klar wahrnehmbar sein.
• Durch Rollovereffekt:
  Bei Rollover kann durch Ändern der Cursorform gezeigt werden, dass hier eine Aktion ausgelöst werden kann (Cursorpfeil -> Handcursor).
  Über spezielle Cursorformen und/oder durch Einblenden von Zusatzinformationen kann zusätzlich vermittelt werden, welche Aktion hier ausgelöst werden kann.
  Dabei haben sich bestimmte Konventionen herausgebildet, die man natürlich "lesen" lernen muss:
  So zeigt über einem Videostandbild die Änderung der Cursorform auf ein Dreieck an, dass durch Klick das Video abgespielt werden kann (= Play-Symbol). Nach dem Klick wechselt der Cursor auf ein Quadrat (= Stop-Symbol) zum Zeichen, dass beim nächsten Klick das Video wieder angehalten wird.
  Bei Rollover können auch komplexere Animationen ausgelöst werden, um den Charakter der aktiven Fläche zu verstärken.
• Durch kleine Animationen, die immer ablaufen, können aktive Bereiche auf sich aufmerksam machen und so signalisieren, dass man hier etwas tun kann.

Bei der Gestaltung von Buttons werden meist 4 Zustände definiert:

• Normalzustand
• Rolloverzustand
• Gedrückter Zustand
• Inaktiver Zustand.

Die einzelnen Zustände können durch Texte, Standbilder oder Animationen repräsentiert werden.
Im inaktiven Zustand werden Buttons oft vollständig ausgeblendet. Ein gezeigter inaktiver Button (meist etwas blasser dargestellt) ist ein Hinweis für die BenutzerInnen, dass etwas möglich ist, aber nicht in der momentanen Situation.
Die Zuständsänderungen (normal > rollover > gedrückt und gedrückt > rollover > normal) werden sehr häufig durch kurze Soundsamples betont.

In vielen screenbasierten Anwendungen ist (meist links oben - quasi als Einstiegspunkt) das Logo der Organisation, der Institution, des Unternehmens zu sehen.

Ein Logo als wesentliches Identifikationsmittel muss prägnant  und mit hohem Wiedererkennungswert gestaltet sein.

Viele bekannte Logos sind bereits an ihrem charakteristischen Schriftzug zu erkennen, wie das nach folgende Beispiel von Elisabeth Weggemann zeigt:

In den letzten Jahren ist ein Trend aufgekommen, bei dem ausgehend von einer Logogrundstruktur ein ganze "Logofamilie" entwickelt wird. Dabei wird das Logo in Abhängigkeit vom jeweiligen Anlass variiert ohne dabei die Grundstruktur und die Wiedrerkennbarkeit aufzugeben. In diesem Ansatz spiegelt sich Beständigkeit und Dynamik eines Unternehmens im Logo wieder.

Beispiele für Logofamilien unter Beibehaltung des Wiedererkennungswertes:

 

Eine spezielle Variante von Logofamilien sind die generativen Logos, die nach einem algorithmischen Verfahren erzeugt werden.
Stefan Sagmeister erklärt in dem Video wie er die Logofamilie zu Casa da Musica in Porto generativ entwickelt hat.

Ein weiteres sehr gutes Beispiel für ein Logo, das in vielen Varianten eingesetzt werden kann und trotzdem seine Identität bewahrt ist die Logofamilei des Media Labs am MIT (sowohl das neue als auch das alte Logo):

neues Media Lab Logo, altes Media Lab Logo.

Die Bereitschaft größere Textmengen am Screen zu lesen ist sehr unterschiedlich. Auch habe ich (ohne große statistiche Untersuchungen) beobachtet, dass die Lesegewöhnheiten und -vorlieben sehr unterschiedlich sind.

• Allgemein sollten die Textzeilen nicht zu lange sein. (Selbstkritische Bemerkung: Die Textzeilen in DMA sind eigentlich zu lange, aber aus CMS-technischen Gründen haben wir eine Breite von 800px). Natürlich muss auch der Zeilenabstand (Zeilendurchschuss) zur Schriftgröße und Zeilenlänge passen.
  Auf Grund der unterschiedlichsten Monitoreinstellungen lässt sich auch kein einheitlicher Wert bei der Schriftgröße definieren.
• Der Kontrast zwischen Schrift und Untergrund muss genügend groß sein. Sehr störend sind unterlegte Bilder (wenn es sein muss, dann so blass unterlegt, dass der Kontast zur Schrift stimmt). Viele NutzerInnen lieben dunkle Schrift auf hellem Grund (Dunkelgrau auf Fast-Weiß), andere lieben wiederum helle Schrift auf dunklem Grund (wegen der Blendung). Es gibt viele Untersuchungen, aber für mich keine eindeutigen Ergebnisse.
• Man sagt, dass serifenlose Schriften wie Arial besser geeignet sind als Serifenschriften, die im Printbereich eindeutig für größere Textmengen bevorzugt werden. das hängt damit zusammen, dass die Serifen bei den bisherigen Monitorauflösungen im Fließtext eher ein unklareres Schriftbild bewirkt haben. Mit der immer höheren und feineren Auflösung der Monitore hat sich das etwas geändert. Hier hängt es auch wieder stark von der Schriftgröße ab.
  Durch Wordpress und die Blogs haben Serifenschriften (in Anlehnug an die Printpresse) auf den Webseiten an Bedeutung gewonnen, vorallem bei den Überschriften.
• Scrolltyp versus Blättertyp:
  Oft kann man lesen, dass lange Textblöcke in kleine Teilblöcke zerlegt werden sollen, zwischen denen man weiterblättern muss. Aber auch hier würde ich mit einer allgemein verbindlichen Aussage vorsichtig sein, denn es gibt ganz klar auch die Srolltypen, die das Scrollen dem ständigen Blättern den Vorzug geben. Natürlich muss ein langer Text durch Überschriften (und Bildelemente) entsprechend gegliedert sein.
  In vielen Anwendungen werden den BenutzerInnen jetzt schon beide Lesemöglichkeiten angeboten. Das ist die beste Lösung.
  Nebenbemerkung: Das Blättern hat auf Webseiten den werbetechnischen Vorteil, dass man mit jedem Umblättern eine neue Seite aufruft und so die Pageimpressions erhöhen kann.

Weitere Informationen unter Bildschirmtypografie

Folgende Elemente und Steuerungen findet man bei Bildergalerien aller Art:

• Thumbnails für Überblick und direkte Bildwahl:
  Kleine Vorschaubilder, die einen Überblick über die gezeigten Bilder geben. Durch Klick auf ein Thumbnail wird das eigentliche große Bild angezeigt.
  Die Thumbnails können statisch angezeigt werden oder man kann mit der Maus durch eine Thumbnailgalerie scrollen.
• Von der Größe der Thumbnails ist es abhängig, ob es genügt, sich über die Thumbnails einen Eindruck zu verschaffen ohne das Großbild zu öffnen. Erst bei besonderem Interesse wechselt man auf das große Bild.
• Thumbnails ergeben ein neues Bild: Minibilder ohne echte Information ergeben ein größeres Bild. Man wird zum zufälligen Entdecken animiert.
• Thumbnails können nur einen Ausschnitt zeigen (als Anregung) oder das gesamte Bild stark verkleinert.
• Thumbnails und Großbild werden gleichzeitig gezeigt oder nach dem Einblenden eines Großbildes werden die Thumbnails ausgeblendet.
• Durchblättern im Großbildmodus soll möglich sein. Eine zusätzliche Tastatursteuerung beim Blättern (über die Pfeiltasten) ist sehr benutzerfreundlich.
• Angabe der Bilderanzahl und der aktuellen Bildnummer schafft zusätzlichen Überblick.
• Gleich nach dem Laden kann die Galerie automatisch abgespielt werden bzw. es wird die Möglichkeit einer Slideshow angeboten.

Kombination mit Sound:

Durch die Kombination von Standbildern und Hintergrundsound (ambient sound) kann die Atmosphäre eines Ortes sehr gut vermittelt werden. Ein ausgezeichnetes Beispiel dafür sind die Sights and Sounds of Provence. Die Art und Auswahl der Fotografien unterstreichen die Alltäglichkeit, das Nichtinszenierte und die Unmttelbarkeit des Geschehens. Verstärkt durch die Tonebene ist man als BetrachterIn mitten drinnen.

Integration einer Videofläche in das Screendesign

Die Einbindung von Videoflächen (mit den ganzen Steuerelementen) in einem Screendesign ist eine besondere Herausforderung, denn sehr leicht kann die Videofläche mit dem darin gezeigten Inhalt zum Fremdkörper auf dem Screen werden. Abstrakt gesprochen geht es um die Einbindung des Videorechtecks in das größere Screenrechteck, denn in den seltensten Fällen wird ein Video gleich fullscreen gezeigt.

In flächigem, reduziertem, orthogonalem Screendesign ist es einfach, eine Videofläche einzubinden.
Es gibt keinen Unterschied zwischen Standbildern und Videos. Der Unterschied besteht nur darin, dass man ein Video anklicken und dadurch abspielen kann.

Bei spielerischen Multimediaapplikationen gibt es neben dem einfachen In-die-Fläche-setzen die Möglichkeit,

• das Video über einen Bildschirm in ein Ambiente einzubauen,
        z.B. werden die Videos auf der Mattscheibe eines Fernsehers gezeigt,
• das Video auf eine (Wand-)Fläche in einem 3D-Interface zu projizieren,
• das Video mit dem Hintergrund zu "verschmelzen", sodass die Begrenzungen der Videofläche nicht wahrnehmbar sind.
   

Fullscreenvideo

Durch die effizienten Videokompressionsverfahren und die hohen Bandbreiten können Videos in sehr guter Qualität fullscreen und ruckelfrei abgespielt werden. Dadurch ist es möglich, Videos anstelle von Standbildern als Hintergrund laufen zu lassen, z.B. der Banner von http://www.airbnb.at/
 

Interaktives Video

Wenn man durch Benutzereingaben den Ablauf des Videos beeinflussen kann, spicht man von einem interaktiven Video.
http://www.beonlineb.com
 

Videoplayer

Standardplayer wie sie in YouTube, Vimeo, usw. verwendet werden, enthalten folgende Elemente:

• Play/Pause-Button. Auch durch Klick auf das Video kann dieses gestartet und angehalten werden.
• Lade- und Abspielbalken. Aus der Gesamtlänge des Balken lässt sich die aktuelle Lade- und Abspielposition ablesen.
• Timecode der Abspielposition.
• Fullscreen-Button. Im Fullscreen-Modus kann man durch Klick auf das Video in den Normalmodus zurückwechseln.
• Die Steuerelemente werden automatisch ausgeblendet und bei Rollover wieder eingeblendet.

Abb.: Vimeo-Player

Animationen sind belebende Faktoren in Multimediaanwendungen, wenn sie sinnvoll eingesetzt werden. Sie erzeugen Dynamik und Abwechslung. 

• Animationen sind Eyecatcher, da Bewegtbilder schneller wahrgenommen werden als Standbilder. Bei einem Kiosk sollen Animationen die BenutzerInnen anlocken. Deshalb wird automatisch, wenn ein Kiosk länger nicht benutzt wurde auf eine Eyecatcheranimation umgeschaltet. Auch auf dem Screen können animierte Elemente auf besondere Stellen des Screen aufmerksam machen.
• Animationen beleben den Screen und unterhalten. Es tut sich etwas, auch wenn man als BenutzerIn nichts tut.
  http://www.jimcarrey.com/
• Animationen dienen zur Veranschaulichung von Sachverhalten, Vorgängen, Prozessen, Abläufen. Man muss als GestalterIn immer entscheiden, ob ein bestimmter Inhalt besser als dokumentierte Grafik, als Abfolge von Standbildern (nebeneinander oder hintereinander) oder als Animation vermittelt werden kann.
• Animation zur Gestaltung von Übergängen. Gegenüber einem harten Schnitt haben Animationen den Vorteil, dass durch die Animation eine visuelle Verknüpfung zwischen dem alten und neuen Inhalte erfolgt. Das Neue entwickelt sich aus dem Alten. Die Veränderung ist für das Auge nachvollziehbar und man wird nicht schlagartig mit einem neuen Zustand konfrontiert bei man sich fragt, woher kommt der jetzt. Übergänge können für die Orientierung behilflich sein. Z.B. das Minimieren von Fenstern im MacOS X.
  Nur wenn man dieselbe Animation bei einem Übergang zum x-ten Mal gesehen hat, dann beginnt sie zu nerven, wenn sie zu lange ist und zu dominant in Erscheinung tritt, z.B. immer von Sound und Geräuschen begleitet wird.
• Animationen als Pausenfüller z.B. zur Überbrückung von Ladezeiten.
• Animationen geben visuelles Feedback auf Benutzeraktionen. Es wird durch die Animation veranschaulicht, dass man als BenutzerIn etwas ausgelöst hat.
• Animationen erzählen Geschichten, z.B. bei Introanimationen.
  Great Pockets
   

Introanimationen

• machen neugierg,
• schaffen Abstand zum Vorhergehenden,
• führen in ein Thema ein,
• bereiten nachfolgende Inhalte vor,
• geben einen Überblick über das Kommende.

Introanimationen sind interessant, wenn man sie zum ersten Mal sieht, aber nicht beim x-ten Einstieg in die Multimediaanwendung. Deshalb muss man den BenutzerInnen immer die Möglichkeit bieten, Introanimationen zu überspringen oder abzubrechen -> "skip intro".

Introanimationen sind meist screenfüllend. D.h. aber nicht, dass eine großformatige Animation ablaufen muss. Es genügt oft, viele kleinformatige Animationen gut verteilt auf dem Screen abspielen zu lassen, um den Eindruck eines lebendigen, bewegten Gesamtscreens zu erreichen.

Über verschiedene Cursorformen lässt sich anzeigen,

• welche Aktionen in dem Screenbereich, wo sich der Cursor gerade befindet, durchgeführt werden können,
• welches Werkzeug momentan benützt wird,
• dass man als Benutzer warten muss.

Je nach verwendetem Authoringprogramm kann man aus einem Pool von Cursorformen auswählen und/oder eigene Cursorformen gestalten (z.B. Director). Bei Bedarf kann man zwischen diesen Formen wechseln.

Es gibt schwarz/weiße und farbige Cursor, die sich auch animieren lassen, d.h. es wird ein Loop an Einzelbildern abgespielt. Für das Gestalten von eigenen Cursorformen stehen Pixelflächen in der Größe von 16x16 oder 32x32 Pixeln zur Verfügung. Wenn man andere Cursorgrößen verwenden möchte, erzeugt man einen unechten Cursor. Dazu wird die Anzeige des Standardcursors ausgeblendet (ist in allen Authoringprogrammen möglich) und eine frei gestaltete Grafik wird mit der Mausposition verknüpft. Die BenutzerInnen bewegen die Maus und das Grafikobjekt bewegt sich entsprechend der sich verändernden Mausposition über den Screen. Dadurch erhält man den Eindruck, dass die Grafik ein Mauscursor ist. Unechte Cursor haben eine schlechtere Performance und reagieren bei raschen Mausbewegungen in der Regel nicht so unmittelbar wie ein Cursor, der vom Betriebssystem zur Verfügung gestellt wird.

Siehe auch: ActionScript3: Cursor aus-/einblenden, ändern, animieren und Movieclips an die Maus binden

Durch die Verwendung von Zufallszahlen kann man eine Anwendung spannender und abwechslungsreicher gestalten, da sich den BenutzerInnen auch bei mehrmaliger Benutzung ein bestimmtes Erscheinungsbild oder eine bestimmte Abfolge immer neu und etwas verändert präsentiert. Voraussetzung dafür ist ein Pool an Möglichkeiten, die die EntwicklerInnen bereit stellen müssen, aus dem das Programm per Zufall eine Variante auswählen kann. Das bedeutet natürlich in der Regel einen Mehraufwand an Entwicklungsarbeit.

Verwendung von Zufall:

• In räumlicher Anordnung:
  Zufällige statische Verteilung der Informationsobjekte auf der Fläche im Raum, zufällige Bewegung der Informationsobjekte auf dem Screen.
• In zeitlicher Abfolge:
  Zufällige Abfolge der Informationsobjekte.
• Bei der Auswahl von zu zeigenden Objekten, abzuspielenden Soundfiles:
  Z.B. bei (interaktiven) Dialogsituationen können unterschiedliche Sprechsequenzen eingespielt werden, um den Dialog lebendig zu halten.
• Bei der Gestaltung von Objekteigenschaften: Farbe, Größe, ...

Siehe auch: ActionScript3: Einfache mathematische Funktionen

Guided Tours sind wie der Name bereits sagt "geführte Touren" durch eine Multimediaanwendung in der die BenutzerInnen über den Aufbau, die Bedienung und die Inhalte der Produktion informiert werden. Sie sind eine sehr effiziente Möglichkeit weniger geübte User mit der Anwendung vertraut zu machen.

Nochfolgend eine nicht den Vollständigkeitsanspruch erhebende Liste von grundsätzlichen Stilmitteln bei der Gestaltung von Multimediaanwendungen:

• Flächiger, streng orthogonaler Aufbau
• Flächige Gestaltung unter Vermeidung jeglicher Raumwirkung außer dem Mittel der Schichtung
• Verwendung von 3D-Objekten ohne jedoch einen freien 3D-Raum zu verwenden
• Aufbau einer 3D-Umgebung in einem 3D-Raum
• Einsatz von Handzeichnung
• Verwendung von gescannten und fotografierten Objekt(teilen), sehr in Verbindung mit Collage
• Collage von Bildelementen
• Primärer Einsatz typografischer Elemente.