4

actualis-Kurs: Online-Redaktion
Alternative Interfaces

Der 3. Teil des Kurses Online-Redaktion ist der gestalterischen Aufbereitung eines Online-Textes oder -Themas gewidmet. Mediengerechte Alternativen werden diskutiert, die vom klassischen Inhaltsverzeichnis abweichen. Denn dieses ist für gedruckte Texte entwickelt worden.

  1. Visueller Einstieg ins Thema
  2. Listen, Tabellen und Zeitschiene
  3. Fotogalerie, Kataloge, Logos
  4. Karten und Grafiken
  5. Organigramme und Diagramme
  6. Video und Multimedia
  7. Visuelle Metaphern, 3D und virtuelle Welten

4.1


Visueller Einstieg ins Thema

Das Internet ist ein visuelles Medium und kann sehr viel Emotionalität vermitteln. Es verlangt deshalb mediengerechte Interfaces: Benutzeroberflächen, die intuitiv bedienbar und visuell attraktiv sind - und oft einen komplexen Inhalt leichter zugänglich machen.

Ein simples Inhaltsverzeichnis in Listenform ist zwar schnell gemacht und garantiert Übersichtlichkeit. Es wirkt aber für emotionale Inhalte und Plattformen zu nüchtern.

Aber auch "trockene" Inhalte lassen sich durch ein mediengerechtes Interface attraktiv gestalten. Es ist dies die gestalterische Weiterführung des journalistischen Anfietscherns (s. Kap. 1.3): die emotionale, erlebnisorientierte Aufbereitung eines nüchternen Inhalts. "To feature" bedeutet auf deutsch veranschaulichen.

4.2


Listen, Tabellen, Zeitschiene

Die einfachste Form, einen Text übersichtlich zu gliedern ist die Liste. Sie war im Internet schon vor dem Aufkommen des Webs bekannt und weit verbreitet. Am bekanntesten ist die Punktliste. Etwas weniger häufig angewendet wird die nummerierte Liste, der ja auch die grafischen Elemente der Punkte fehlen.

Auf Tabellen basiert praktisch jedes Web-Layout. Freilich werden die Tabellenränder heute kaum mehr dargestellt. Ihnen haftet zu sehr das Image von Uni-Arbeiten oder Preislisten an. Kreativ eingesetzt, kann der Webpublisher mit Tabellen äusserst attraktive Interfaces erstellen.

Die Zeitschiene (Timeline) ist eine einfache und doch sehr "leistungsfähige" Form der visuellen Textaufbereitung. Sie wird von Online-Medien gerne eingesetzt, um die Vorgeschichte eines aktuellen Themas übersichtlich darzustellen.

Zwei Darstellungsformen sind möglich:

  • In ihrer einfachsten Form kommt die Zeitschiene mit hervorgehobenen Titeln (fett, Schriftgrösse) und Absatzschaltungen aus. Das geht aber nur bei vertikaler Anordnung.
    Diese hat einen ergonomischen Nachteil: Wenn man oben an der Seite mit dem Anfang beginnt - sofern es überhaupt einen eindeutigen Anfang gibt - ist das Aktuellste erst durch mehr oder weniger langes Scrollen zuunterst zu finden. Steht oben das Neue, kehrt man die ergonomisch begründete Gewohnheit des Scrollens auf den Kopf: statt durch Scrollen vorwärts zu kommen, schreitet man zeitlich zurück.
  • Mediengerechter ist deshalb die horizontale Zeitschiene. Sie entspricht unserer abendländischen Gewohnheit, von links nach rechts zu lesen. Hier ist es nur logisch, dass der zeitliche Anfang beim Aufstarten der Seite erscheint und durch horizontales Scrollen in der Zeit vorwärts geschritten werden kann.
    Auch die horizontale Zeitschiene hat Nachteile: Sie ist aufwändiger für den Programmierer, da sie nur mit Tabellen oder sogar Java oder anderen modernen Web-Techniken dargestellt werden kann. Zudem passen horizontal aufgebaute Zeitschienen nicht in jedes Site-Layout. Und schliesslich scrollen Web-User nicht gerne horizontal, wie Studien ergeben haben (s. J. Nielssen,
    Alertbox: Changes in Web Usability Since 1994). Früher galt das auch fürs vertikal Scrollen, das aber inzwischen akzeptiert ist.
    Trotzdem ist die horizontale Zeitschiene die bessere Form.

Verlinkte Zeitschienen gehen einen Schritt weiter. Sie sind bereits grafische Interfaces wie Karten (s. Kap.4.4) oder Organigramme (s. Kap. 4.5). Ihre Hauptaufgabe ist also das Visualisieren der zeitlichen Entwicklung. Die Texte zu den ev. bebilderten Datums-Angaben werden via Links zur Verfügung gestellt.

4.3


Fotogalerie, Kataloge und Logos

Bilder und Logos sind die klassischen Mittel zum Veranschaulichen eines Themas. Ihr Funktions-Spektrum geht weit über das Illustrieren eines Textes hinaus. Sie sind Symbole.

Fotos sind ein mächtiges Werkzeug in der Hand des Designers. Auf Homepages und als Einstieg in ein Thema können sie ein Eigenleben führen, das weit über das in Kap. 2.5 diskutiert Illustrieren eines Textes hinaus geht. Sie stehen für ein Thema, eine Rubrik, einen Autor oder gar eine ganze Site. Bilder wirken damit imagebildend.

Das Porträt eines Firmen-Verantwortlichen ist damit oft wichtiger als der Begrüssungstext dazu. Das selbe gilt für Fotos von Gegenständen.

Bei der Vorstellung mehrerer Personen oder Unternehmens-Einheiten kann eine Fotogalerie eine geeignetes Interface zum Kunden ergeben. Die visualisierte Personalisierung schafft einen menschlichen Bezug - ganz im Sinne der Kundenbindung.

Eine ähnliche Funktion hat der Produktekatalog mit Fotos von Gegenständen oder der Darstellung von Dienstleistungen. Auch hier verschafft die Visualisierung dem "Augenmenschen" einen natürlichen Zugang zu abstrakten Fakten.

Dienstleistungen sind nicht immer einfach in Bilder umsetzbar. Hier müssen professionelle Fotografen oder Zeichner beigezogen werden, was teuer und langwierig werden kann. Trotzdem ist dies oft unumgänglich, wie zum Beispiel die Internet- und Printpublikationen von Banken und Versicherungen zeigen.

Mit dem gleichen Problem kämpfen oft Soft- und Hardware-Firmen. Sie müssen in aufwändiger Aufbauarbeit ihren Produkten ein Gesicht verleihen. Beispiele sind das Windows-Logo, der Apfel von Apple (und natürlich das iMac-Design) oder der Linux-Pinguin. Diese Logos können in einem Produktekatalog abgebildet werden, zum Beispiel mit einem Foto der Verpackung (Kartonschachtel) eines Programms.

4.4


Karten und Grafiken

Immer wenn es um geographische Web-Inhalte geht, stellen Karten, Pläne, Grafiken und Fotos attraktive Interfaces dar.

Pläne, Karten oder Übersichtsfotos (Luftaufnahmen) bieten einen intuitiven Zugang zu räumlich darstellbaren Informationen. Sie sind selten als Haupt-Zugang (Homepage) geeignet, sollten aber als Alternativ-Interface zu den Informationen einer Web-Site (Datenbank) in Erwägung gezogen werden.

Beispiele von geographischen Interfaces sind:

  • Karten oder Pläne für touristische Informationen
  • Firmen- und Lagepläne
  • Stadtpläne
  • Pläne von Ausstellungshallen
  • Luft- oder Übersichtsfotos

Gemeinsam ist geographischen Interfaces, dass sie relativ aufwändig in der Programmierung sind. Die Darstellungen müssen in Bereiche aufgeteilt und punktgenau verlinkt werden. Es handelt sich um sogenannte Image-Maps.

4.5


Organigramme und Diagramme

Organigramme und Diagramme visualisieren Aufbau oder Funktionalität von Organisationen und Systemen. Sie bieten einen einfachen Überblick über oft komplexe Zusammenhänge.

Organigramme und Diagramme sind eng verwandt mit den geographischen Interfaces des vorigen Kapitels. Die Web-Techniken (Image-Maps) sind die selben und folglich auch der Aufwand zur Erstellung. Sie stellen jedoch nichträumliche Dinge und Zusammenhänge räumlich dar.

Beispiele für den Einsatz von Organigrammen und Diagrammen sind:

  • Hierarchien in Firmen oder Organisationen
  • Hierarchische Gliederung von Informationen (Kapitel und Unterkapitel)
  • System-Darstellungen (Ökosysteme, Arbeitsabläufe usw.)
  • komplexe zeitliche Zusammenhänge (Evolutionsgeschichte, Stammbaum), die sich nicht in einer einfachen Zeitschiene darstellen lassen

4.6


Video und Multimedia

Moderne Web-Techniken ermöglichen trendige Interfaces. Animationen, Ton, Video, Java, Flash und Dynamic HTML bringen Bewegung und Ton ins Web - ein weites Feld, das hier nur angeschnitten werden kann.

Traditionelle HTML-Seiten beginnen links oben und müssen von Hand (resp. per Maus) nach unten und allenfalls nach rechts gescrollt werden. Damit ist es dank den modernen Web-Techniken vorbei. Die Web-Seiten werden "beweglich": Filme und Animationen laufen ab, Ton erklingt aus dem Lautsprecher, Radio hören und fernsehen wird möglich, wie es bis vor kurzem noch kaum vorstellbar war.

Es würde zu weit führen, diese Techniken hier einzeln zu diskutieren. Grundsätzlich kann zwischen zwei Trends unterschieden werden:

  • Video und Ton sind obwohl technisch sehr interessant, jedoch bezüglich des Designs eher "konservative" Erweiterungen des traditionellen HTML-Layouts. Statt eines Bilds im Text kann ein Video abgerufen oder ein Tondokument abgespielt werden. Selbst die Streaming-Verfahren, die dem Senden von Radio und TV gleichkommen, brechen die traditionellen Strukturen kaum auf. Die Designs dieser Multimedia-Sites werden durch die neuen Elemente kaum verändert.
  • Java Script, Java, Shockwave, Macromedia Flash und Dynamic HTML gehen diesbezüglich einen Schritt weiter. Die Seiten selbst werden animiert, Elemente bewegen sich, Buttons leuchten auf und verändern ihre Grösse und die Navigation kann völlig neue Formen annehmen. Das alles geschieht insbesondere bei Dynamic HTML in Interaktion mit den Site-Besuchern.
    Da dabei bisweilen die herkömmliche Navigation (z.B. Scrollleiste am rechten Browserrand) ausgeschaltet wird, sind solche Sites für die Besucher ungewohnte Welten. Die User müssen sich zuerst an die fremden Interfaces gewöhnen, die nur noch wenig mit bekannten Navigationselementen zu tun haben. Es ist hier also besonders wichtig, dass die Navigation intuitiv aufgebaut und absolut konsequent durchgezogen wird. Ansonsten sind die Site-Besucher verloren.
    Es versteht sich von selbst, dass exzessiver Einsatz solcher Techniken nur bei trendigen Auftritten Sinn macht. Konservativere Site-Besucher würden abgeschreckt und haben vor allem nicht immer die nötigen Plug-ins. Wer ein trendiges Image vermitteln will, kommt bei einem avantgardistischen und experimentierfreudigen Publikum mit solchen Sites an. Aber Achtung: Dieses Publikum ist sehr anspruchsvoll und verlangt stets nach den neusten Effekten. Trendsetting ist aufwändig!

4.7


Visuelle Metaphern, 3D und virtuelle Welten

Metaphern sind am Computer nichts Neues: Auf Macs gibts seit vielen Jahren "Schreibtische", "Ordner" und "Papierkörbe". Shopping-Sites greifen gerne auf diese Technik zurück, z.B. mit dem "Einkaufskorb". In neue Dimensionen stossen Techniken der virtuellen Realität vor.

Metaphern sind Symbole, die für Funktionen stehen. Ein Web-Shop kann auf seiner Homepage einen Laden darstellen mit Warenauslagen, Auskunft, Kasse und Plauderecke. Alles könnte genau so gut mit simplen Links angeboten werden: Warenkatalog, Hilfe, Preisberechnung, Chat. Manchmal ist indes ein emotionaler Zugang erwünscht, was mit solchen Metaphern erreicht werden kann.

Grossflächige Metaphern konnten sich im Web kaum durchsetzen. Ganz im Gegensatz zu CD-Roms oder Spielen scheinen sie im Web nur eine Modewelle gewesen zu sein. Das dürfte primär an den zu grossen Datenmengen liegen, die solch grossflächigen Bilder benötigen. Weder Amazon noch andere grosse Web-Händler benutzen sie noch. Im Gegenteil: Ihre Layouts sind wieder sachlicher geworden. Vielleicht liegt das auch daran, dass die Site-Besucher mit dem Medium so vertraut geworden sind, dass sie solche Metaphern nicht mehr benötigen.

Wo das Spielerische im Vordergrund steht, sind Metaphern aber wichtig geblieben.

Zudem sind sie in Form von Logos ein fester Bestandteil vieler Sites geworden. Und sei es nur als Buttons.

Virtuelle Realität geht noch einen Schritt weiter als die statischen Metaphern. Mittels VRML oder QuickTime Virtual Reality (QTVR) lassen sich dreidimensionale Welten kreieren, in denen man sich bewegen kann oder Objekte bewegt werden können. Auch diese Techniken haben sich nicht annähernd so schnell und stark verbreitet, wie das Fachleute erwartet hatten.

Die Datenlast dürfte wiederum das Hauptproblem darstellen. Denn auf CD-Roms und offline werden solche Techniken gerne eingesetzt, z.B. bei der Promotion von Autos, im Ingenieurwesen, in der Architektur (Computer Aided Design, CAD), im Tourismus (3D-Städteführer) und natürlich bei Computerspielen.

Es bleibt abzuwarten, wie sich diese Techniken angesichts leistungsfähigerer Datenleitungen und Breitband-Netzzugängen entwickeln werden. Gute Chancen bestehen dank ihrer Attraktivität bei emotionalen Angeboten allemal.