Strukturierung

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).


Anordnung von Einstiegspunkten, -bereichen und Menüs

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:

  • 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.
      http://www.okaydave.com/ http://www.matthewmahon.com/
    • Die Punkte sind zufällig verteilt und wechseln permanent fließend oder sprunghaft ihre Position.
      http://www.swedengraphics.com/
    • Bei jedem Einstieg werden die Punkte neu angeordnet.
      http://www.thibaud.be/
    • Die Punkte werden kreisförmig angeordnet. Dadurch gibt es keinen Anfang und kein Ende. Der Kreis kann zusätzlich rotieren.
      http://www.oneover.com/
    • 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:
  • 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/http://www.gluesociety.com/
    • 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.
      http://www.martin-h.com/ (Pillenpackung als Matrix)
    • 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.
      http://www.aaronjasinski.com/ (Paintings: Die Höhe eines Farbbalkens zeigt die Größe des Bildes)
    • 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, z.B.
      http://www.aaronjasinski.com/ (Paintings: Die Farbe eines Farbbalkens entspricht der dominanten Farbigkeit des Bildes)
    • 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://www.platoo.at/

Beziehung zwischen Navigationsstruktur und Inhaltsanzeige

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.
    http://www.sectionseven.com/ http://www.dhp-architecten.be/
    http://www.pgo.fr/models/cevennes/ (siehe Bildergalerie)

  • 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.
    http://www.platoo.at/ (gezeichnete Pfeile)

Wie und wann werden die Einstiegspunkte angeboten? Personalisierung und Benutzerprofil

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.
    http://www.swedengraphics.com/ (Filter oben)
  • 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.

Wie lässt sich der Übergang von einem Inhaltsblock zum nächsten gestalten?

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 Inaltswechsel erfolgen kann?

  • "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 http://www.oasim.com/.
      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/
       
    • 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.
      http://www.wmteam.de/ http://www.tokyoplastic.com http://www.giraffentoast.com
  • 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://www.worthersoriginal.com/viki/ http://www.brothersofthehead.com/
    http://www.5nak.com/ (vertikales Scrollen) http://www.metropolis-media.com.pl/2007/(vertikales Scrollen je nach Mausposition oder durch Buttons am Rand))

    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.
    http://www.sonjamueller.org/ http://www.javierferrervidal.com/

    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.
    http://www.leoburnett.ca/ http://www.sqcircle.com/
    Scrollen kombiniert mit Zoomen: http://www.platoo.at/
    Beispiel für mehrfaches Einzoomen: http://www.sofake.com/ (Navigation am unteren Rand)

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)

Ein Beispiel für direkte Übergänge:
http://www.duboismeetsfugger.com/ (mehr als 12 Übergänge zwischen 4 Blöcken mit mehreren Varianten zwischen zwei Blöcken)
Beispiele für Übergänge mit Zwischenzustand:
http://www.wmteam.de/
http://www.iservice.at/

Wie kann man den Bezug zum vorhergehenden bzw. zu benachbarten Inhaltsblöcken herstellen?

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 ).

Orientierung auf großen Flächen

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.
    Weiteres Beispiel entnommen aus http://www.worthersoriginal.com/viki:

    Zu den beiden letzten Punkten siehe auch Projektion

Wie lässt sich ein Ladevorgang visualisieren? Wie lässt sich Wartezeit überbrücken?

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).
    Eine grafische Auflösung eines vertikalen Ladebalkens: http://www.sectionseven.com/
    Beim Laden von Videos werden Ladebalken und Abspielbalken des Videos kombiniert.
    Ladevorgang nicht als Prozent- sondern Kilometerangabe. Man nähert sich der Stadt aus der Luft: http://www.metropolis-media.com.pl/2007/

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.

Wodurch lässt sich eine Aktion auslösen?

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
  • Indirekt durch Lösen einer Aufgabe.

Eine etwas ungewöhnliche Navigationsform ist die audiovisuelle Navigation über Kamera und Mikrophon durch Bewegung und Sprache, z.B.
http://www.andreaslutz.com - einfach ausprobieren.

Gestaltung von Interaktionsbereichen und Schaltflächen (Buttons)

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.

Wie kann man mit größeren Textmengen und Zusatzinformationen umgehen?

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 kann sich das ändern. Hier hängt es auch wieder stark von der Schriftgröße ab.

  • 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

Gestaltungsmöglichkeiten bei Bildergalerien

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.
    http://www.madeofjapan.com/ (Minibilder ohne echte Information; man wird zum zufälligen Entdecken animiert; Thumbnails ergeben ein neues Bild)
  • Thumbnails können nur einen Ausschnitt zeigen (als Anregung) oder das gesamte Bild stark verkleinert.
    http://www.pgo.fr/models/cevennes/
  • Thumbnails und Großbild werden gleichzeitig gezeigt oder nach dem Einblenden eines Großbildes werden die Thumbnails ausgeblendet.
    http://www.5nak.com/ (gleichzeitig)
  • 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.

http://www.falbphotography.com/ (zeigt sehr viele Features einer Galerie)
http://www.koendemuynck.com/ http://www.claracollins.com/

Integration einer Videofläche in das Screendesign

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

Eine Lösung besteht darin, die Videofläche als Projektionsfläche oder als Monitorfläche in ein Ambiente einzubauen:
Videoprojektionsfläche in einer Zeichnung: http://www.duboismeetsfugger.com/ (work > TV)
Video auf einem Bildschirm: http://www.platoo.at/ (> Video)
Videoprojektionsfläche in einem 3D-Interface

Einsatz von Animationen, Introanimationen

Animationen sind belebende Faktoren in Multimediaanwendungen, wenn sie sinnvoll eingesetzt werden. Sie erzeugen Dynmik und Abwechslung. 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.
Einige Beispiele für aufwendige gleichbleibende Wechsel zwischen Menüpunkten, die mit der Zeit eher nerven:
http://www.triworks.net/triworks2008/index.php http://www.template-support.net/oasim/oa_xquisite_studios/

  • 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. Es tut sich etwas, auch wenn man als BenutzerIn nichts tut.
  • 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.
  • 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.
    http://www.greatpockets.com/index.php

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.

Einsatzmöglichkeiten des Cursors und der Cursorform

Ü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

Zufall als Gestaltungsmittel

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

Gestaltungselemente: Guided Tour und Zeitleiste

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.

Viele Inhalte lassen sich neben anderen Kriterien entlang einer Zeitleiste strukturieren. Bei der Gestaltung einer Timeline geht es vor allem darum, wie man zusätzliche Ordnungskriterien mit der Zeitleiste kombiniert, wie die einzelnen Inhalte in der Zeitleiste plaziert werden und daraus abrufbar sind. Viele weiter oben behandelten Möglichkeiten lassen sich dabei anwenden.
Beispiel für eine Zeitleiste: http://cba.fro.at/timeline/

Stilmittel bei der Gestaltung einer Multimediaanwendung

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.

Beispiele von Flashanwendungen

Module, die für die Durchführung vorausgesetzt werden