Definition
Schlussfolgerungen Analysephase
Anhand der vorangegangenen Analysephase laesst sich erkennen, dass Multimedia-Menus Schnittstellen zur Ansteuerung des Hauptinhalts, sowie anwaehlbare Unterteilungen desselbigen bereitstellen muessen. Ausserdem sollten Funktionen gegeben sein, die es dem Betrachter ermoeglichen aus diversen Zusatzinhalten auszuwaehlen oder weiterfuehrende, eventuell dynamisch nachladbare Verlinkungen anzusteuern.
Aufbau
Daraus ergibt sich ein mehrschichtiger Aufbau, der in vier Abschnitte unterteilt ist: Hauptmenu, Kapitelanwahl, Zusatzinhalte, im folgenden Extras genannt, und weiterfuehrende Links, im folgenden Mehr genannt.
Navigation
Sobald das Menu gestartet wird oeffnet sich das Hautpmenu. Hier befinden sich vier Anwahlpunkte: Film starten, Kapitel, Extras, Mehr. Der Knopf Film starten fuehrt den Betrachter sofort zum verlinkten, sogenannten Mainfeature. Ueber den Anwahlpunkt Kapitel erreicht er eine Uebersicht aller zeitlichen Unterteilungen des Hauptinhalts und kann diese einzeln ansteuern, was ihn zum entsprechenden, zeitlichen Punkt im Mainfeature fuehrt. Waehlt er den Bereich Extras aus, so kommt er zu einer Auflistung der angebundenen zusaetzlichen Inhalte, kann diese durchlaufen und ansteuern. Der Bereich Mehr beinhaltet eine Darstellung der weiterfuehrenden Links, die auf Inhalte ausserhalb des Menus (z.B Soundtracks oder Homepages) verweisen.
Bricht der Betrachter den Wiedergabevorgang ab, kehrt er zum vorangeganen Bereich zurueck. Befindet sich der User in einem der drei Unterbereiche, kann er ueber den Knopf Hauptmenu zum Startbildschirm zurueckkehren oder per Druck auf den Knopf Fortsetzen den Hauptfilm am verlassenen Punkt weiterspielen.
Layout
Daraus lassen sich die einzelnen Bereiche folgendermassen aufbauen:
- Hauptmenu - zusammenhaengende Anwahlpunkte, die als Gemeinschaft frei im Raum angeordnet werden koennen. Folgende Kombinationen sind moeglich (X*Y): 1*4, 4*1, 2*2.
- Kapitelanwahl - unterteilt in 2 Bereiche: Menunavigation und Kapitelanwahl. Die Menunavigation kann hierbei wieder als Gemeinschaft im Raum stehen (2*1 oder 1*2). Die Kapitelanwahl sollte als zusammenhaengende Liste platziert werden. Horizontale oder vertikale Ausrichtungen sind hierbei moeglich.
- Extras - unterteilt in 2 Bereiche: Menunavigation und Extrasanwahl. Die Menunavigation kann hierbei wieder als Gemeinschaft im Raum stehen (2*1 oder 1*2). Die Extrasanwahl sollte als zusammenhaengende Liste platziert werden. Horizontale oder vertikale Ausrichtungen sind hierbei moeglich.
- Mehr - unterteilt in 2 Bereiche: Menunavigation und weiterfuehrende Links. Die Menunavigation kann hierbei wieder als Gemeinschaft im Raum stehen (2*1 oder 1*2). Die Verlinkungen sollten als Einheit angelegt werden und sich entweder deutlich von der Menunavigation abgrenzen oder, falls die Gestaltung zulaesst, die Menunavigation visuell erweitern.
Anpassbarkeit
Da dieses Menu auf einem flexiblen Template aufgebauen soll, ist es zwingend erforderlich, dass variable Inhaltsmengen als solche eingebunden werden. Dazu gehoeren Kapitelanwahlpunkte, Extrasanwahlpunkte und weiterfuehrende Links.
Es ist daher besonders darauf zu achten, dass genuegend Platz fuer diese variablen Mengen angeboten wird, bzw. dass bei unuebersichtlich grossen Mengen oder bei solchen, die sich inhaltlich in verschiedene Kategorien unterteilen lassen, weitere Untermenus angeboten werden.
Auf der visuellen Seite muss darauf geachtet werden, dass der Aufbau genuegend grafische Flexibiltaet bietet um individuelle Menus zu generieren, die nicht sofort auf den ersten Blick als Kopie eines weiteren Menus erkannt werden. Daher sollten einzelne Bereiche ueber eigene Hintergrundgrafiken verfuegen, die sich einfach manipulieren und austauschen lassen koennen. Im Falle des Hauptmenus beispielsweise, scheint es sinnvoll dem Hintergrund einen formatfuellenden Bereich einzuraeumen. Darauf sollte eine formatfuellende Titelgrafik liegen, die ueber den Namen des Inhalts informiert und eventuell einzelne Teile des Menus hervorhebt. Die Anwahlpunkte liegen dann auf der dem Betrachter naechsten Ebene und bestehen aus Einzelgrafiken und einblendbaren Highlightgrafiken.
Dieses System bietet durch seinen Schichtenaufbau ausserdem die Moeglichkeit einzelne Schichten unterschiedlich zu animieren (beispielsweise bei Uebergaengen zwischen zwei Bereichen)
System
Daraus ergeben sich folgende funktionelle und strukturelle Anforderungen:
- Zentrales Menu, das alle vier Bereiche (Hauptmenu, Kapitelanwahl, Extras, Mehr) dynamisch laden kann
- Navigationselemente zum Ansteuern der einzelnen Bereiche (hin und zurueck)
- Navigationselemente zum Ansteuern des Mainfeatures (Filmstart und Kapitelanwahl)
- Navigationselemente zum Ansteuern der Extrasinhalte mit der Option, diese in maximal drei Kategorien zu unterteilen
- Navigationselemente zum Anwaehlen der weiterfuehrenden Links
- Dynamische Generierung der Anwahlpunkte fuer Kapitel, Extras und weiterfuehrende Links mittels Anbindung an hinterlegte Metadaten
- Animierte Uebergaenge zwischen einzelnen Bereichen
- Anbindung der Navigationselemente an hinterlegte Inhalte
- Moeglichkeit ein sich wiederholendes Audioelement einzubinden
- Um Ladezeiten zu sparen, soll auf die Einbindung von Hintergrundvideos verzichtet werden, da diese zudem teilweise nicht unterstuetzt werden. Stattdessen sollen blendende Slideshows fuer Abwechslung sorgen.
Aufgrund der sich rapide entwickelnden und mittlerweile sehr verlaesslichen Webtechnologien, soll das Fundament des Menus aus einer mit HTML ausgezeichneten Webseite bestehen, die per Stylesheets formatiert und per Javascript verwaltet werden soll. Ein speziell an die Vorgaben der Zielplattform angepasstes Javascript, soll die Kommunikation zwischen Menu und Anwendung fehlerfrei ermoeglichen. Fuer die Verwaltung der Metadaten werden eine XML-Datei sowie eine plattformkompatible PLIST-Datei verwendet. Zur visuellen Einbindung in die Ubersicht der auf dem spaeteren Abspielgeraet vorhandenen Filme, wird eine PNG Grafik hinterlegt. Die innerhalb des Menus verwendeten Grafiken werden je nach Transparenz als JPG oder PNG-Datei abgespeichert.
Umsetzung
In der finalen Umsetzung stellt sich dies folgendermassen dar:
Wie bereits erwaehnt gibt es eine zentrale Datei (index.html), die von der Anwendung gestartet wird. Ueber die controller, die sich im Ordner 'controllers' befinden, werden die entsprechenden Daten geladen und angezeigt. Die Stylesheets im Ordner 'css' kuemmern sich um die Formatierung und die Darstellung der sich im Ordner 'images' befindenden Dateien.
Die Extrasinhalte befinden sich im Ordner 'videos' und werden durch Verlinkungen im data.js-controller angesprochen. Die drei Dateien iTunesArtwork, iTunesMetadata.plist und manifest.xml sind durch die Plattform vorgegebene Notwendigkeiten.
Wireframes
Aufgrund der bisherigen Ueberlegungen ergeben sich nun folgende Wireframes.
(Da hier nicht alle 72 Bilder abgebildet werden sollen, gibt es nur eine kleine ueberschaubare Menge)
Wireframes (Klicken zum Scrollen)
Templates
Um hohe Flexibiltaet und variable Designmoeglichkeiten zu bieten, wurden neun Templates ausgearbeitet, die sich sowohl im Layout als auch in ihren Groessenverhaeltnissen unterscheiden. Dabei bestehen alle jedoch aus dem selben strukturellen Aufbau.
Template 01 (Klicken zum Scrollen) Zur Live Demo
Template 02 (Klicken zum Scrollen) Zur Live Demo
Template 03 (Klicken zum Scrollen) Zur Live Demo
Template 04 (Klicken zum Scrollen) Zur Live Demo
Template 05 (Klicken zum Scrollen) Zur Live Demo
Template 06 (Klicken zum Scrollen) Zur Live Demo
Template 07 (Klicken zum Scrollen) Zur Live Demo
Template 08 (Klicken zum Scrollen) Zur Live Demo
Template 09 (Klicken zum Scrollen) Zur Live Demo
Beispiele
Die folgenden fuenf Menus wurden als beispielhafte Titel gebaut, um die Zuverlaessigkeit des Systems ausserhalb der Plattform zu testen. Nachdem die Spezifikationen der Zielplattform vorlagen, wurden die Menus entsprechend angepasst und erfolgreich innerhalb der Anwendung angezeigt.
A Serious Man (Klicken zum Scrollen) Zur Live Demo
From Paris With Love (Klicken zum Scrollen) Zur Live Demo
Gamer (Klicken zum Scrollen) Zur Live Demo
Ghost In The Shell (Klicken zum Scrollen) Zur Live Demo
REC2 (Klicken zum Scrollen) Zur Live Demo
Anmerkungen
Um die im Text verlinkten Live Demos betrachten zu können, sollten Sie den aktuellsten Safari Browser benutzen und ueber eine Bildschirmauflösung von mindestens 1280x720 Pixeln verfügen.
Bildergallerien lassen sich per Klick auf das Bild durchblättern.