Screenbased Multimediadesign und -produktion

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,
• eine Beamerprojektion,
• ein Multitouchtable 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 durch Zeigerbewegung bzw. ü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.
• Bei den Smartphones und den Tablets (z.B. iPad) ist der Screen gleichzeitig eine berührungssensitive Fläche, auf der durch Fingerberührungen und -gesten Aktionen ausgelöst werden, ebenso
• mittels eingebauter Lage- und Beschleunigungssensoren durch Lageveränderung bzw. Bewegung(z.B. durch Drehen zwischen Hoch- und Querformat wechseln).
• Spezielle Interfaces wie Kinect ermöglichen einen Input durch Ganzkörperbewegungen.
• Mittels GPS können ortsbezogene Daten (local based services) und
• über Biofeedback körperbezogene Daten (z.B. Pulsfrequenz) als Input dienen.

Für spezielle Nutzungssituationen in z.B. Museen, Informationszentren, Science Parks werden "maßgeschneiderte" Interfaces entwickelt.

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. Die Größe des Screens und die Interaktionsmöglichkeiten beeinflussen wesentllich das Screendesign.

Nachstehende Grafik fasst noch einmal die Ebenen zusammen, die bei der Entwicklung einer interaktiven, multimedialen (Web-)Anwendung wesentlich sind:

• Information, Präsentation, Portfolio
• Erleben, Unterhaltung
• Infotainment = Information + Entertainment
• Spiele
• CBT (ComputerBasedTrainig), Game-based Learning
• 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.

Distributionsmedien

• Internet, Web, mobiles Web
• Spielkonsolen, Spielstationen
• Kioskanwendungen: POI (Point Of Information) z.B. in Museen und bei Ausstellungen, POS (Point Of Sales)
• DVD, CD-ROM - verlieren immer mehr an Bedeutung

In größeren Produktionen werden von Anfang an verschiedene Distributionskanäle geplant und aufeinander abgestimmt.

• Website für den  PC,
• App für das Smartphone, Tablet
• RSS-Feed,
• Newsletter über E-Mail,
• soziale Netzwerke wie facebook, twitter, ...
• Videos über YouTube, Vimeo, ...
• local based services mittels GPS,
• Print/pdf, web-to-print
• DVD on demand,
• ARG (alternate reality games),
• ......

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 benutzerspezifisch über die gewünschten Ausgabemedien/kanäle zur Verfügung gestellt.
Unter dem Stichwort web-to-print versteht man webbasiertes Editieren und Publizieren von Druckmedien mit dem zentralen Aspekt der Einbindung des Kunden.

In zeitgemäßen Produktionen ist es ein Standard, dass eine klare Trennung zwischen den Inhalten, die in diversen Datenbanken abgelegt sind, und den Ausgabeformaten vorgenommen wird. Z.B. werden entsprechend dem gewählten Endgerät (PC oder Smartphone) die Daten aufbereitet, layoutiert und übermittelt > Stichwort: fluides (liquides) Design, Responsive Webdesign, Media Queries. Mit den Media Queries von CSS3 kann man Geräteeigenschaften auslesen (z.B. Höhe, Breite, Orientierung des Smartphones) und die Ausgabe dementsprechend anpassen.

Auch können die BenutzerInnen über Benutzerprofile individuell definieren, für welche Inhalte sie sich interessieren. Zum Teil werden die (vermeintlichen) Interessen der BenutzerInnen auch aus deren Nutzungsverhalten automatisch herausgefiltert (z.B. Amazon, GoogleAdds). Was nur durch eine enorme, durchaus kritisch zu bewertende Datenkonzentration im Hintergrund möglich ist.

Die nachstehende Grafik gibt einen sehr guten Überblick über die vier ineinander greifenden Bereiche in die der Designprozess für eine interakitve multimediale (Web-)Applikation eingebettet ist:

• Die BenutzerInnen. für die die Anwendung entwickelt wird,
• die möglichen Technologien,
• die zur Verfügung stehenden Resourcen (Personal, Budget, Zeit, Infrastruktur, ...) und
• die Organisation (der organisatorische Rahmen) für die bzw. von der die Applikation entwickelt wird.

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 Entwicklung 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-, Smartphone- 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. Da auf dem iPhone und iPad von Apple keine Flash-Anwendungen abgespielt werden können, gewinnt der HTML5-Standard immer mehr an Bedeutung.

Multimediaanwendungen für Smartphones
Diese Anwendungen müssen für den jeweilgen Betriebssystemtyp des Smartphones entwickelt werden, wie z.B. iPhone, Android (Google-Handy), Windows 8 (z.B. Nokia).

Desktopanwendungen sind stand-alone 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 Pure Data PD VVVV

openFRAMEWORKS auf C++ basierend

Ergänzende Linkliste

Bei der Entwicklung eines Multimediaprodukts soll man

• den Mehrwert eines Mediums 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.

Beispiel für die Kombination von Information und spielerischen Elementen:

http://www.claracollins.com/archives/ (>Spring-Summer 2006, zusätzlich zur Präsentation der Kollektion ein spielerischer Daumenkinoeffekt)

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.

User Centered Design

Unter dem Stichwort User Centered Design werden Entwicklungsprozesse zusammengefasst, die die BenutzerInnen ins Zentrum des Designprozesses stellen. Ein zentrales Element ist dabei die Erstellung von Personas.  Eine Persona ist eine fiktive Person mit konkreten Eigenschaften und einem konkreten Nutzungsverhalten, die eine Gruppe von NutzerInnen repräsentiert. Sie hat einen Namen, ein Alter, ein Geschlecht, einen Familienstand, eine Vorbildung, eine Karriere, einen bestimmten Level an Erfahrungen im Umgang mit Computern und Websites, konkrete Motivationen zur Nutzung der zu entwickelnden Anwendung und ein Foto, um der Persona ein Gesicht zu geben.

Die Grafik wurde entnommen von http://www.ergonomen.ch
Allen Abbildungen zu User Centered Design gemein ist die Darstellung des iterativen Prozesses.

Nachfolgende Defintion von Usability ist der Website von Jacob Nielson www.useit.com entnommen, die umfassende Informationen zu diesem Thema anbietet.

"Usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process.

Usability is defined by five quality components:

• Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
• Efficiency: Once users have learned the design, how quickly can they perform tasks?
• Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
• Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
• Satisfaction: How pleasant is it to use the design?

There are many other important quality attributes. A key one is utility, which refers to the design's functionality: Does it do what users need? Usability and utility are equally important: It matters little that something is easy if it's not what you want. It's also no good if the system can hypothetically do what you want, but you can't make it happen because the user interface is too difficult. To study a design's utility, you can use the same user research methods that improve usability." (http://www.useit.com/alertbox/20030825.html)

Eine interessante Studie über die Verweildauer auf Webseiten finden Sie hier.

• Struktur
  Da meistens mehr Daten vorliegen als auf dem beschränkten Rechteck des Screens gleichzeitig dargestellt werden können, 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.
  Die Strukturierung eines innerhalb des Screens sichtbaren Datenblocks ist dann ein Frage des Layouts.
   
• Navigation
  Auf Grund der Strukturierung der Daten in ein Netzwerk zusammenhängender Teilblöcke müssen Elemente angeboten werden, die es ermöglichen, von einem zum anderen Datenblock zu wechseln.
   
• 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.
   
  Vertiefende Informationen zu 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.
   
• Identität, Identifikation
  Elemente mit einem hohen Wiedererkennungswert sind identitätsstiftend. Die Verwendung von Logos und klaren CI-Vorgaben (corporate identity) fallen in diese Kategorie. Ebenso Elemente, die die Identiifkation der Zielgruppe mit dem Dargestellten ermöglichen.
   
• 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. Über die bei den NutzerInnen geweckten Emotionen erfolgt eine starke Verknüpfung mit dem dargebotenem Inhalt.
  In diesen Bereich fallen z.B. die Farbgebung, die Auswahl der Bilder, 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, Verknüpfungen mit sozialen Plattformen wie Facebook, Twitter.
   
• Individuelle Anpassung der Darstellung
  Über diese Komponenten können die User die Anwendung auf ihre individullen Bedürfnisse anpassen.
  Simple Beispiele dafür sind die Buttons für Fullscreen, Sound on/off, Vergrößerung/Verkleinerung der Schriftgröße, Änderung der Sprache.
   
• 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.

Eine kleine Liste webbasierter, multimedialer Anwendungen aus unterschiedlichsten Bereichen:

10mg (Webagentur, Einstiegsspiel)

Carousel Philips (Microsite, interaktiver Werbespot)

Kraftwerk (Musikgruppe)

Museum of Erotic Art (virtuelles Museum)

Paraplüsch (Spiel)

this is sand (Spiel)

Rendart DNS (Grafikgenerator)

Great Pockets (Microsite, Produktwerbung über eine interaktive Story)