Was ist screenbased Multimedia?

Multimedia =
Schrift, Text,
Bild (2D- und 3D-Grafik, Fotografie),
2D- und 3D-Animation, Video,
Sprache, Geräusche, Sound, Musik
+
Interaktion

Interaktion =
Dialog zwischen Mensch und Maschine (HCI = Human Computer Interaction),
Ablaufsteuerung durch den Benutzer innerhalb vordefinierter Pfade in einem „Informationsraum“ oder „Unterhaltungsraum“,
Eingabe von Text, Sprache, Bildern, ... .

Screenbased :
Die primäre Ausgabeschnittstelle ist ein (in der Regel rechteckiger) Screen (Monitor, mobiles Endgerät wie Handy, Smartphone oder iPhone, Beamerprojektion und andere Displays) unterstützt durch Lautsprecher und eventuell durch Force Feedback.
Die wesentlichen Eingabeschnittstellen sind zeigerbasierte Geräte mit Tasten (Maus, Trackball, Joystick, ...) durch die eine Position auf dem Screen (oder im dahinter liegenden virtuellen Raum) definiert und über die Tasten eine Aktion ausgelöst werden kann, eine Tastatur für Text-, ein Mikrophon für Ton- und eine Videokamera für Bildeingabe.

Screendesign =
Gestaltung des Screens als Schnittstelle zwischen BenutzerInnen und den Daten (im weitesten Sinn) im Rechner.
Erst wenn die Daten für die BenutzerInnen in irgendeiner Form sinnvoll genutzt werden werden können, erhalten sie für diese einen Wert.
Screendesign soll die sinnvolle und lustvolle Nutzung der Daten ermöglichen.

Medientypen und Programme - eine kleine Auswahl

Multimediaanwendungen setzten sich aus verschiedenen Medienkomponenten zusammen, die in unterschiedlichen, dafür spezialisierten Programmen erstellt und in entsprechenden Dateiformaten abgespeichert werden.
 

Medium Ausgabeformate (kleine Auswahl) Software zur Erstellung der Medienkomponenten
(kleine Auswahl)
Schrift, Text .txt, .rtf, .doc Texteditor, Word
Bild (2D-Grafik, Fotografie) .psd, .jpg, .tif, .png, .gif
.ai, .eps
Photoshop,
Vektorgrafikprogramme (Illustrator, Freehand, CorelDraw)
2D-(Vektorgrafik)Animation .swf, .svg
Flash
3D-Grafik und -Animation gerendert als (Stand-)Bild, Video oder 2D-(Vektorgrafik)animation
3ds max, Maya, Cinema4D
Video .flv, .f4v, .mov, .wmv,  .mpeg, .avi Premiere, FinalCutPro, AfterEffects, Quicktime, Flash
Sprache, Geräusche, Sound, Musik .aiff, .wav Soundbooth, Audition, SoundForge, Logic, Cubase

In Softwaretools für die Entwickliung interaktiver Applikationen, auch Autorenprogramme genannt, werden die einzelnen Medienkomponeten zueinander in Beziehung gesetzt. Dazu werden die Dateien in die Autorenprogramme importiert bzw. damit extern verknüpft. Extern verknüpft bedeutet, dass die Datei ihre Eigenständigkeit behält und nicht innerhalb der Datei des Autorenprogramms noch einmal gespeichert wird. Daher darf man nicht vergessen, neben der Datei des Autorenprogramms den BenutzerInnen auch die extern verknüpften Dateien mitzuliefern und zur Verfügung zu stellen.
Die Autorenprogramme bieten zum Teil auch eingeschränkte Möglichkeiten, einzelne Medienkomponenten wie Pixel-, Vektorgrafiken und Text zu erstellen. Vor allem aber die Möglichkeit, über eigene Programmiersprachen die Interaktion mit den BenutzerInnen zu definieren.
 

Grundsätzlich muss man zwischen Multimediaanwendungen im Browser-und Desktopbereich unterscheiden:

Browseranwendungen laufen innerhalb eines Webbrowsers wie Firefox, InternetExplorer, Safari, ... und benötigen in der Regel ein Browser-Plugin (Player), um abgespielt werden zu können. Damit diese Anwendungen im Rechner, auf dem sie ausgeführt werden, keinen Schaden anrichten können, sind sie Sicherheitsrestriktionen unterworfen. Diese Applikationen laufen in einer sogenannten Sandbox und können nur bedingt auf die Systemressourcen des Rechners zugreifen.
 

Ausgabeformate (kleine Auswahl)
file extensions

Player Software zur Erstellung der interaktiven Appikation
(kleine Auswahl)
.htm, .html,
.css, .js
.benötigt nur den Browser und keinen speziellen Player, aber JavaScript muss im Browser aktiviert sein
jeder HTML-Editor wie z.B. Dreamweaver
HTML, CSS


.swf Flash-Player Flash/Flex mit der Programmiersprache ActionScript
Adobe Flash
.jar Java Runtime Environment JRE
mit PlugIn zum Ausführen von Java-Applets im Browser
JAVA-Entwicklungsumgebung JAVA,
Processing


.scr Silverlight Runtime
Silverlight Toolkit
Microsoft Silverlight

Mit dem neuen HTML5-Standard wird angestrebt, die Plugin-basierenden  RIA-Technologien (rich internet application) wie Adobe Flash, Microsoft Silverlight und Sun JavaFX obsolet zu machen. Ob das gelingen wird, wird sich zeigen.

Desktopanwendungen sind stand-alon e Anwendungen, die lokal auf dem jeweilgen Rechner installiert sind. Diese Programme werden in der Regel über eine direkt vom Betriebssystem ausführbare Datei (exe-Datei) gestartet. Gelegentlich ist wie z.B. bei JAVA-Programmen ein Runtime Environment dazwischen geschaltet.
 

Software zur Erstellung von interaktiven Desktopanwendungen
(kleine Auswahl)
Director mit der Programmiersprache LINGO (eines der ältesten Autorenprogramme)
Adobe Director
Adobe AIR (Adobe Integrated Runtime)
Adobe AIR

JAVA und von JAVA abgeleitete Programme
JAVA
Processing
Scala

Grafische Entwicklungsumgebungen;
Max/MSP/JITTER
VVVV
Field basierend auf Python
openFRAMEWORKS auf C++ basierend

Ergänzende Linkliste

Anwendungsbereiche

  • Information, Präsentation, Portfolio
  • Erleben, Unterhaltung
  • Infotainment = Information + Entertainment
  • Spiele
  • CBT (ComputerBasedTrainig)
  • Werbung, Verkauf Linkliste von Webshops
  • Kommunikation, virtuelle Gemeinschaften -> Web 2.0, Social Web
Natürlich überlappen sind die oben aufgelisteten Anwendungsbereiche und sind in der Realität nicht so deutlich trennbar. Das bereits etablierte Kunstwort Infotainment ist das beste Beispiel dafür. Bildungsinhalte werden in einer kurzweiligen, unterhaltsamen Form vermittelt und im Idealfall wird durch die multimediale Darbietung die Qualität der Vermittlung erhöht.
Viele (Online-)Spiele bieten Kommunikationsmöglichkeiten für die SpielerInnen untereinander und fördern die virtuelle Gemeinschaftsbildung
oder erfüllen über den Weg der Unterhaltung Werbe- und Marketingaufgaben. Spiele werden "gebranded", d.h. mit einer Marke verknüpft. Über Spiele erfolgt unterhaltsame Kundenbindung, Produktpräsentation und -information.

Distribution

  • Internet, Web
  • DVD, CD-ROM
  • Kioskanwendungen: POI (Point Of Information) z.B. in Museen und bei Ausstellungen, POS (Point Of Sales)
  • Spielkonsolen, Spielstationen
Auch bei den Distributionskanälen wird eine Verknüpfung angestrebt. In größeren Produktionen werden von Anfang an verschiedene Distrubutionswege geplant und aufeinander abgestimmt. Im Idealfall erfolgt die Produktion so lange wie möglich unabhängig von den Ausgabemedien und erst in einer sehr späten Produktionsphase oder sogar erst bei Bedarf (Stichwort: media-on-demand) werden die Inhalte über die gewünschten Ausgabemedien zur Verfügung gestellt.
In vielen CD-ROM und DVD-Produktionen gibt es die Möglichkeit auf Inhalte im Internet zuzugreifen um z.B. aktuelle Zusatzinformationen zu erhalten oder sich an Foren beteiligen zu können. Bei größeren Konsolenspielen werden im Internet einige Spiellevel als Kaufreiz angeboten. Kioske sind mit dem Internet verbunden und werden über dieses gewartet usw.

Multimediaproduktion und Benutzerprofil

Bei der Entwicklung eines Multimediaprodukts soll man

  • den Mehrwert gegenüber anderen Medien definieren,
  • konkrete Szenarien für Nutzungssituation entwerfen,
  • Technik (Benutzerführung) und Inhalte auf klar definierte Zielgruppen abstimmen.

Benutzerprofil

BenutzerInnen gehen auf Grund ihrer Persönlichkeitsstruktur, ihrer Erfahrung im Umgang mit dem Medium und dem Nutzungszweck mit unterschiedlichsten Erwartungshaltungen an eine Multimediaanwendung heran. Als GestalterIn sollte man sich darüber im klaren sein und konkrete Benutzer- und Nutzungsszenarien entwerfen.

Einige Benutzertypen in ihrer ausgeprägten Form gegenübergestellt (natürlich gibt es wieder alle möglichen Mischformen)

Typ: "Gebrauchsanweisung lesen"
Dieser Typ informiert sich am Anfang, was möglich ist, welche Inhalte angeboten werden, wie etwas funktioniert und steigt dann erst in die eigentliche Anwendung ein.
->
Beim Einstieg (Intro) erklären, worum es geht, welche Möglichkeiten man hat, was zu tun ist,
einen Gesamtüberblick bieten.

Typ "Sofort drauflos klicken"
Dieser Typ beginnt in einen Bereich einzusteigen und erarbeitet sich im Probieren die Möglichkeiten der Anwendung.
->
Keine langen Erklärungen vorweg,
eher begleitend kurze Erklärungen und Hilfen in den einzelnen Bereichen.

Typ: "Supermarkt"
Dieser Typ liebt das klar sichtbare, inhaltlich sortierte Angebot in den Regalen. Er weiß nach kurzem Gebrauch sehr schnell, wo die gesuchten Waren zu finden sind und schätzt das sehr. Da Supermärkte immer nach ähnlichem Schema aufgebaut sind, findet er sich auch in unbekannten Märkten schnell zurecht.
->
Klare, übersichtliche, gut gegliederte Menüstrukturen.
Die Benutzerführung lehnt sich an den für viele gewohnten Mainstream an.

Typ "Flohmarkt"
Dieser Typ liebt es eher unsytematisch herumzustöbern, zu suchen und zu entdecken. Ist dabei ausdauernd und freut sich über unerwartete Entdeckungen.
->
Anreize zum Herumstöbern in der Multimediaanwendung bieten und durch "versteckte Schätze" dieses (geduldige) Erkunden belohnen.
Vgl. versteckte Bonustracks auf einer CD, kleine Animationen oder Filmsequenzen während und am Ende eines Filmabspanns.
Typ: "Zapper"
Dieser Typ ist ungeduldig, langweilt sich schnell und muss laufend bei Laune gehalten werden.
->
Kurze Informationsblöcke,
vermeiden von Wiederholungen,
jederzeit einen Ausstieg ermöglichen,
abwechslungsreiche, kurzweilige Gestaltungen.

Typ "Etwas zu Ende schauen können"
Dieser Typ ist geduldig und schätzt auch einen langsameren und breiteren Aufbau einer Geschichte, umfangreichere, vielschichtige Informationen.
->
Angebote zur Vertiefung,
unterschiedliche Zugänge zu einem Thema anbieten,
längere Text-, Ton- oder Videoblöcke sind möglich.

Zielgruppen

Die oben angeführten Benutzertypen sind relativ zielgruppenunabhängig.
Darüber hinaus muss man bei einer Multimediaproduktion vor allem für das Design und Layout die anzusprechenden Zielgruppen klar definieren (wobei natürlich das Design und Layout primär vom Inhalt der Produktion abhängig ist):
Kinder, Jugendliche, Erwachsene,
welche Altersgruppe bei den Erwachsenen will man erreichen,
wie ist der kulturelle Hintergund der Zielgruppe,
soll eine bestimmte Szene, Subkultur angesprochen werden, welche ästhetischen Normen sind dort üblich usw.

Vertrautheit im Umgang mit dem Medium

Ungeübte NutzerInnen
brauchen länger, um einen Screen mit seinen Elementen zu erfassen, gehen sehr vorsichtig um (um nichts "kaputt" zu machen) und sind schnell verzweifelt. Unerwartetes wird schnell als eigener Bedienungsfehler interpretiert ("Was habe ich jetzt wieder gemacht?").
->
Klare, übersichtliche und eindeutige Strukturen,
erläuternde Textelemente,
Guided Tours (die AnfängerInnen werden bei der Hand genommen),
Hilfen für den Einstieg, einfache Hilfefunktionen,
vertraute Metapher verwenden.

Geübte NutzerInnen
sind mit den visuellen Codes und der Handhabung des Mediums vertraut und können daher den Screen und dessen Elemente schneller wahrnehmen und interpretieren.
->
Man muss nicht alles erklären,
"Visuelle Abkürzungen" und reduizierte Layouts sind möglich.
Z.B. ein kleines Dreieck in einer Ecke genügt als Hinweis, dass es hier weitere Informationen gibt oder ein Cursor, der sich bei Rollover in ein kleines Dreieck verwandelt, zeigt als Play-Symbol an, dass bei Klick etwas abgespielt wird.

Grundhaltung bei der Nutzung

Gezieltes Abrufen von Information
Mit dieser Grundhaltung möchten die BenutzerInnen möglichst schnell die für sie relevanten Informationen abrufen bzw. feststellen, ob sie diese Informationen hier überhaupt bekommen können.
->
Überblick über alle angebotenen Informationen,
klare, logisch nachvollziehbare Gliederung der Inhalte, die sich in der Menüstruktur wiederspiegelt,
differenzierte Suchfunktionen,
Indizes, Glossare.

Entdeckender, spielerischer Zugang
Mit dieser Grundhaltung sind die BenutzerInnen offen für Neues, sind neugierig und haben in der Regel mehr Zeit zur Verfügung. Es geht ihnen um ein (zweckfreies) lustvolles Erlebnis, Spaß, Action, Wettkampf, Zeitvertreib, Entspannung, Eintauchen in eine virtuelle Welt.
->
Der Spiel- und Forschungstrieb muss geweckt und immer wieder aufs Neue angeregt werden (z..B. durch Spiellevel, immer wieder geänderte Ausgangssituationen, Punkte mit Highscore-Listen),
ansprechendes Erscheinungsbild entwickeln,
Erlebnisse ermöglichen,
Identifikationsmöglichkeiten und Rollen anbieten,

Ziel sollte es sein, durch vielfältige Zugänge die unterschiedlichen Bedürfnisse der Benutzertypen zu erfüllen.

Beispiele für die Kombination unterschiedlicher Zugänge:

Zwei völlig getrennte Zugänge, wo man sich gleich beim Einstieg entscheiden muss:
http://www.dmb.at/index_flash.php (lustige und unlustige Website)

Ein herkömmlich struktiertes Menü und ein unkonventionelles Menü zum Herumstöbern und Entdecken werden kombiniert:
http://www.leoburnett.ca/ (Siehe am unteren Rand: Feeling lost?)
http://www.communicatorworld.com (normale Menüleiste unten)
http://www.okaydave.com/ (normale Menüleiste unten)

Kurze Informationen für den schnellen Einstieg und Überblick kombiniert mit der Möglichkeit sich zu vertiefen:
http://www.nachrichten.at (Schlagzeilen und Kurztexte, die einen raschen Einstieg ermöglichen und bei Interesse kann man mit "mehr ..." vertiefende Informationen abrufen)
http://www.falbphotography.com/ (Bildergalerie mit Thumbnails für Überblick und Einzelbildern für Detailansicht)

Introanimationen, die sich abbrechen oder für immer wegschalten lassen:
http://www.wmteam.de/ (Skip Intro)
Introanimationen sind in der Regel nur beim Ersteinstieg interessant, außer man bietet mehrere Variationen an.

Möglichkeiten anbieten, die Benutzeroberfläche selbst zu gestalten:
http://www.oneover.com/ (Options>Interface Styles, Background Images)

Kombination von Information und spielerischen Elementen:
http://www.claracollins.com/(>Spring-Summer 2006, zusätzlich zur Präsentation der Kollektion ein spielerischer Daumenkinoeffekt)
http://www.duboismeetsfugger.com/(abwechslungsreiche lustige Animationen als Übergang zwischen Informationsblöcken)

Nutzungsszenarien

Die Nutzungsszenarien können vielfältig sein, aber grundsätzlich soll man überlegen,

  • ob eine Multimediaanwendung eher für den einmaligen Gebrauch, für eine gelegentliche oder eine permante Nutzung gedacht ist,
  • ob die Produktion eher für Informations-, Kommunikations und/oder Unterhaltungszwecke entwickelt wird,
  • wie der Ersteinstieg sich von Folgeeinstiegen unterscheidet,
  • wo und wie die Produktion konsumiert wird: zu Hause, in der Arbeit, alleine oder in Gemeinschaft.

Komponenten des Screendesigns

  • Struktur und Navigation
    Das Grundproblem der Navigation 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, zwischen denen man herumnavigieren muss.
    Daraus ergibt sich sofort das zentrale Strukturierungproblem, in welche Blöcke die Daten zerlegt und wie diese verknüpft werden sollen, d.h. wie man von einem zum anderen Datenblock wechseln kann.
    Die Strukturierung eines innerhalb des Screens sichtbaren Datenblocks ist dann ein Frage des Layouts.
    Navigation und Orientierung

  • Orientierung
    Da man auf dem Screen immer nur ein kleine Teilansicht des gesamten Datenbestands sieht, ist es in der Regel für die BenutzerInnen wichtig zu wissen, wo man sich gerade befindet.
    D.h. man braucht einen Überblick über das Ganze und eine Positionsbestimmung innerhalb des gesamten Datenbestands.
    Auch ist es oft sehr sinnvoll, die "Spur der BenutzerInnen" durch den Datenbestand abzubilden, um jederzeit zu wissen, was man schon gesehen hat.
    Navigation und Orientierung

  • Inhalt
    Das ist der Teil des Datenbestands, der neben Navigations-, Orientierungs- und anderen Komponenten auf dem Screen sichtbar ist und den eigentlichen Kern des Dargebotenen bildet.

  • Emotion, Motivation
    Durch diese Komponenten soll bei den BenutzInnen das Interesse am Inhalt geweckt bzw. gehalten werden und
    eine emotionale Verankerung der Inhalte aufgebaut werden. Die Emotionen sind in der Regel ein Teil des Inhalts, der transportiert werden soll.
    In diesen Bereich fallen spielerische Elemente, kleine Animationen, Introanimationen als Einstieg und Vorspann in eine Multimediaanwendung und Eyecatcher bei Kioskanwendungen, die im Leerlauf BenutzerInnen anlocken sollen.

  • Interaktion, Kommunikation
    Über diese Komponenten können die BenutzerInnen Kontakt mit den Entwicklern bzw. MitbenutzerInnen aufnehmen und mit diesen kommunizieren.
    Typische Beispiele dafür sind E-Mailadressen, Rückmeldeformulare, Kommentarfunktionen, Voting, Chat.

  • Layout, Screengliederung, Anordnung der Elemente im Screen
    All diese unterschiedlichen Elemente müssen visuell gestaltet, auf dem Screen angeordnet und zueinander in Beziehung gesetzt werden.
    Das Gesamtlayout und Design soll auf die Inhalte, den Verwendungszweck und die Zielgruppen abgestimmt sein.

Gestaltungsfragen beim Screendesign

Beispiele für webbasiertes Multimediadesign mit Flash

Ein kleine Liste von multimedialen Flashanwendungen aus unterschiedlichsten Anwendungsgebieten:

10mg (Webagentur, Einstiegsspiel)

Carousel Philips (interaktiver Webspot)

Kraftwerk (Musikgruppe)

JAG-Jeans (Modelabel)

Hugo Boss Prize (Kultursponsoring)

Museum of Erotic Art (virtuelles Museum)

Paraplüsch (Spiel)

Ball of Bastards (Spiel)

this is sand (Spiel)

Guitar Shred Show (Lernen, Spiel)

Rendart DNS (Grafikgenerator)

Great Pockets (kurze interaktive Story)

Kommentierte Linkliste von Flashbeispielen mit Screenshotbildern

Ergänzende und vertiefende Module