Skip to content

Informationsdesign im NUI-Zeitalter

by - 1. Mai 2015

Abstract

NUIs als aktuelle Leitmedien verändern tradierte Designparadigmen. Als Folge ist in Arbeiten von jungen Webdesignern eine Abwendung vom starren funktionalistischen Design und eine Hinwendung zum Einsatz von Transitions und Animationen zu erkennen.

Aithalides analysiert die Highlights einer solchen Arbeit auf dem Hintergrund einer Printpublikation zu Nutzertypen in Deutschland. Die daraus in der interaktiven Applikation entstandene Dynamisierung von Information wird aus informationsdesignerischer Sicht untersucht und mit einem konventionellen, funktionalistisch geprägtem Designverständnis kontrastiert.

Kontext

Im Rahmen meiner LV Multimediales Informationsdesign 2014/15 erarbeiteten Studenten des Fachbereichs Online Medien zu verschiedenen Themen Webapplikationen, die sich durch gutes, interaktives und zeitgemäßes Informationsdesign auszeichnen: unter Anwendung reichhaltige Interaktion, schlüssige Narration und leicht verständliche Exploration. Was diese schlagwortartigen Begriffe bedeuten, wird in der Analyse der einzelnen Applikationen und der Diskussion der designerischen Hintergründe hoffentlich deutlich werden.

Den Applikationen lagen in Printform veröffentlichte Broschüren zugrunde; dabei sollten die Inhalte nicht nur in das Medium Web überführt werden und eine medienadäquate Benutzerführung geschaffen werden. Vielmehr galt es, die Inhalte mit den Möglichkeiten des neuen Mediums zu visualisieren und mittels Interaktionen erlebbar zu machen. Dies konnte auch dazu führen, dass die im Printbericht vorhandene Struktur verändert oder sogar komplett über Bord geworfen und eine neue Informationsarchitektur erarbeitet werden musste. Da die Arbeitsergebnisse nicht nur konzipiert, sondern in einem funktionierenden Prototypen umgesetzt werden sollten, mussten die Studenten innerhalb des gegebenen Zeitraums von 10 Wochen auch reichlich handwerkliches Knowhow zu CSS3 und verschiedenen JavaScript-Libraries erwerben, testen und anwenden.

Dieser erste Artikel in dieser Folge betrachtet die Applikation „Nutzertypen in Deutschland 2014“, der ein Kapitel der Studie „D21 Digital-Index 2014“ zum Inhalt hatte.

Eckdaten zur Applikation „Nutzertypen in Deutschland 2014“

  • Die Applikation wurde für die folgenden Browser optimiert:
    • Safari 8
    • Chrome: leichte Darstellungsfehler
    • Firefox und IE stellen die Applikation nicht korrekt dar.
  • Die in diesem Artikel vorgestellte Applikation „Nutzertypen in Deutschland 2014“ kann jeder hier aufrufen.
  • Zugrunde liegender Printbericht: D21 – Digital – Index 2014, Kapitel 2: Nutzertypen. Wer ist die digitale Gesellschaft?

Fachlicher Hintergrund der Applikation

Die Initiative D21 hatte 2014 eine empirische Studie veranlasst, die zum Ziel hat „… den Grad der Digitalisierung in der [deutschen] Bevölkerung in ihrer Vielschichtigkeit zwischen Leben und Arbeiten aus der Perspektive der Bürgerinnen und Bürger zu messen …..“ [2, S. 7]. Das finde ich an sich schon mal interessant, dass erkannt wurde, dass sich Digitalisierung nicht in der Auflistung von Hardware-KPIs wie Datendurchsatz, Breitband-Versorgung und Anzahl der verkauften Computer erschöpft, sondern dass es erforderlich ist, das Phänomen „Digitalisierung“ aus der Perspektive des Anwenders und seines Verhaltens und seiner Einstellungen zu denken und zu erfassen. Fragen zu stellen wie z.B.: Welche Geräte und Services werden in welchem Umfang genutzt? Zu welchem Zweck? Wenn sie nicht genutzt werden – weshalb werden sie nicht genutzt? Für mich ist das eine Untersuchung, die fundamentale Kennwerte (KPIs) zur User Experience mit den digitalen Medien identifiziert, systematisch erhebt und quantifiziert.

Für die Studie wurden über 200 Einzelinformationen identifiziert, die sich vier Themenbereichen (im Bericht „Dimensionen“ genannt) zuordnen lassen:

  • Zugang – Nutzung der digitalen Infrastruktur
  • Nutzungsvielfalt – Nutzungsintensität und Nutzungsvielfalt
  • Kompetenz – Wissen über digitale Themen, technische und digitale Kompetenz
  • Offenheit – Einstellung der Bevölkerung zu digitalen Themen und Neuerungen ( Ängste, Befürchtungen, Chancen, Vorteile)

Diese vier Themenbereiche stellen auch gleichzeitig die vier Komponenten des Digital-Index dar; jeder der vier Bereiche fließt als Sub-Index mit unterschiedlichem Anteil in die quantitative Gesamtgröße ein. Bestimmt wurde die Gewichtung des Anteils mittels Expertendiskurs [2, S. 8]. Die repräsentative Datenerhebung erfolgte mittels Befragung zur Ermittlung des aggregierten Gesamtgröße, des „D21 Digital-Index“ (n= 2995) [2, S.5]

Mittels statistischer Clusteranalysen wurde nach Gemeinsamkeiten und Unterschieden in der befragten Bevölkerung gesucht und als Ergebnis sechs verschiedene Nutzertypen identifiziert, die jeweils durch eine Adjektiv-Substantiv-Kombination benannt werden. Die errechneten Anteile der jeweiligen Typen an der deutschsprachigen Wohnbevölkerung ab 14 Jahren mit Festnetz-Telefonanschluss im Haushalt sind:

  • Außenstehender Skeptiker: 26%
  • Häuslicher Gelegenheitsnutzer: 30%
  • Vorsichtiger Pragmatiker: 7%
  • Reflektierter Profi: 18%
  • Passionierte Onliner: 13%
  • Smarter Mobilist: 6%

Soweit der zusammengefasste fachliche Hintergrund der erstellten Webapplikation, wie er im Printbericht dargelegt ist.

Informationsarchitektur, Benutzerführung und Navigation

Die Aufgabenstellung an die studentische Projektgruppe lautete, die Inhalte des Kapitels „Nutzertypen“ auf eine interaktive Applikation zu heben und erlebbar zu gestalten.

Ohne eine kurze Darstellung, was die Studie will, was der Digital-Index ist und wie er sich zusammen setzt, sind gewisse Detailinformationen im Kapitel nicht verständlich. Dies hat Konsequenzen für die Informationsarchitektur der Webapplikation: Die Projektgruppe setzte daher einen linearen Screenflow als Vorspann an den Anfang der Applikation, um mittels Text und Grafik diesen Kontext dem Nutzer vorab zu kommunizieren.

Informationsarchitektur der Applikation

Abb. 1 — Informationsarchitektur der Applikation „Nutzertypen in Deutschland 2014“ nach dem D21-Digital-Index. Man beachte den Vorspann vor der eigentlichen Homepage.

„Vorab“ meint dabei: vor dem Übersichtsscreen über die sechs Nutzertypen. Dieser Übersichtsscreen wird als eigentliche Homepage verstanden und folgt darin auch dem Aufbau der gedruckten Broschüre, die auf einer Doppelseite einen Überblick über alle Nutzertypen gibt und deren wesentliche Eigenschaften qualitativ und quantitativ darlegt, bevor auf den folgenden Seiten der Steckbrief jedes einzelnen Typus auf einer Doppelseite erläutert wird.

In der interaktiven Webapplikation wird visuell jeder Nutzertyp durch eine Illustration der kennzeichnenden Eigenschaften sowie durch eine spezifische Farbe kodiert. Verglichen mit dem Printbericht wurde das Informationsdesign des Übersichtsscreens wesentlich verbessert: die Größe der farbigen Kreise korreliert mit dem Anteil des Typus an der Gesamtbevölkerung. Zusätzlich werden die Nutzungstypen entlang einer x-Achse  entsprechend der Größe des Digi-Indexes angeordnet.

Die Homepage der Applikation: Übersicht der sechs Nutzertypen mit ihrem Digitalisierungsgrad und dem  jeweiligen Anteil an der deutschen Bevölkerung

Abb. 2 — Die Homepage der Applikation: Übersicht der sechs Nutzertypen mit ihrem Digitalisierungsgrad und dem jeweiligen Anteil an der deutschen Bevölkerung.

Unterhalb – dieses örtliche Attribut ist im Sinne der IA als hierarchische Verortung gemeint – der zentralen Homepage kann der User frei navigieren. Durch Selektion eines Nutzertypen werden Seiten zugänglich, auf denen die Details zu den Subindikatoren dargelegt sind. Navigiert wird zwischen diesen Detailseiten durch Klick auf die horizontal angeordnete Subindikatoren-Leiste am unteren Screenrand. (siehe Abb. 3 Pageflow)

Zur Übersicht und zur Rücknavigation dient die hierarchische Navigation, die visuell als bogenförmige Gruppe von farbigen Kreisen am rechten Rand des Viewports dargestellt ist. Sehr gelungen ist bei dieser Navigation, dass alle Teile der Applikation (Vorspann, Übersicht Nutzertypen, Digi-Index jedes Nutzertypen) in jedem Screen sofort erreichbar sind.

Pageflow vom Übersichtsscreen zu den Detailinformationen der einzelnen Themengruppen innerhalb eines Nutzertyps. Hier  Screenshots am Beispiel

Abb. 3 — Pageflow vom Übersichtsscreen zu den Detailinformationen der einzelnen Themengruppen innerhalb eines Nutzertyps. Hier Screenshots am Beispiel „Reflektierter Profi“.

Klassische Contentnavigation in neuem Look

Wegweisend für gutes interaktives Informationsdesign finde ich in der Applikation die doppelte Funktion vieler Informationselemente: zum einen sind sie Träger von Informationen, gleichzeitig sind sie aber auch Navigationselemente. Am Beispiel des Screens „Reflektierter Profi“: Das Feld Kompetenz in der unteren Dimensionsleiste zeigt die Punktzahl 68 dieses Subindexes für diesen Nutzertyp, gleichzeitig ist dies aber auch ein Sprungpunkt um zum Screen „Kompetenz“ mit den entsprechenden Details zu gelangen.

Die Absicht – oder in der UX-Sprache: die Teilaufgabe – des Nutzers ist hierbei ein Drilldown. Dieser Begriff kommt aus dem Online Analytic Processing (OLAP) und meint das Hineinzoomen in hierarchisch strukturierte Daten um eine Analyse zu verfeinern.

Die Methode, um den Nutzer dies durchzuführen zu lassen, ist die klassische Contentnavigation, so wie sie auf vielen Verzweigungsseiten im Web schon seit etlichen Jahre Anwendung findet. Insofern wurde in der vorliegenden Applikation die Methode der Teaser angewandt und ist nicht ungewöhnlich, sondern Best Practice. Was im vorliegenden Fall aber ungewöhnlich ist, ist die Formgebung dieser Teaser als Bubble. Das hat damit zu tun, dass die studentische Arbeitsgruppe die Kreisgestalt als visuelle Leitmotiv der Applikation wählten – wie sich unschwer anhand der Screenshots in Abb. 3 erkennen lässt. Darüber hinaus aber habe ich beim Navigieren gar nicht den Eindruck, unterschiedliche „Seiten aufzurufen“. Vielmehr fühlt sich so an, als ob die gewünschten Informationen auf meine Klicks auf ein und dieselbe Bühne gerufen werden und dabei einer Choreographie folgen. Das hat viel mit dem Konzept belebter Elemente zu tun. Doch dazu später mehr.

Momentan möchte ich darauf verweisen, dass hinter der Gestaltung dieser Contentnavigation die Absicht stand – und auch spürbar ist -, den User dazu zu bringen, den Informationsraum zu erforschen und sich dabei frei bewegen zu können. Der User soll explorativ den Informationsraum zu den verschiedenen Nutzertypen erkunden können: Drilldowns, Querbezüge, Rollups erforschen können und sich auf seine Weise die Informationen aneignen und verstehen können. Dies ist eine andere, ja geradezu gegensätzliche kommunikative Absicht als die des Vorspanns, bei dem es darauf ankam, in kurzer Zeit einige wenige, aber wichtige Informationen zu vermitteln.

Lässt man den User einen Informationsraum explorativ erkunden, so geht man als UX-Designer immer das Risiko ein, dass der Nutzer mit bestimmten Bereichen gar nicht in Berührung kommt; daher ist die Konzeption explorativen Vorgehens nicht in allen Nutzungssituationen oder Nutzungszielen sinnvoll. Auch die Verdichtung und Verlagerung von Informationen bedarf der Berücksichtigung von kognitiver Last des Nutzers und Steuerbarkeit der Applikation. Im der vorliegenden Applikation „Nutzertypen“ merkte ich an mir selber beim Durchklicken, wie sehr das Spielerische und die Freude am Entdecken in mir angesprochen wird. Der Reiz des Ausprobierens, ob und wie „es weiter geht“ führt zu einer Leichtigkeit im Umgang mit dieser Applikation, die den Nutzer in die Applikation und ihre Inhalte involviert und eine nachhaltige positive User Experience schafft.

Entzerrung von Information durch Verlagerung auf Interaktionsebenen

Damit Exploration als reizvolle Erkunden eines Themas und nicht nur als orientierungssuchendes Umherklicken in einer unverständlichen Umgebung empfunden wird, bedarf es der Anwendung verschiedener Methoden. Auf eine von ihnen möchte ich näher eingehen: die Entzerrung von Information durch Verlagerung auf Interaktionsebenen.

Betrachten wir das Diagramm in Abb. 4, das die Dimension „Offenheit“ des Nutzertyps „Reflektierter Profi“ zeigt wie es im Printbericht dargestellt ist. Dieses Diagramm wirkt durch die Linienverbindung der Werte ein wenig so, als sei es ein Polaritätsprofil / semantisches Differenzial dieses Nutzertyps. Problematisch ist dabei aus methodischer Sicht, dass in der Befragung keine Gegensatzpaare abgefragt wurden, sondern eine Lickert-Skala. Die der jeweiligen Aussage zustimmenden Probanden dieses Nutzertyps werden als Prozentsatz auf der x-Achse dargestellt, zusätzlich wird dieser Wert durch die Größe des Kreises visualisiert. Im Grunde genommen wäre hierfür ein Balkendiagramm die ausreichende Visualisierung.

Aus UX-Sicht weist dieses Diagramm ein Zuviel an textueller Information auf, das daher kommt, dass die abgefragte Aussagen vollständig auf der y-Achse wieder gegeben werden. Es gibt einen Hinweis darauf, dass die Autoren bzw. Layouter des Printberichtes das Problem der kognitiven Last erkannt haben: nämlich, dass sie versucht haben, durch Hervorhebung der Kernformulierung mittels fetten Schriftschnitts die Erfassbarkeit des Textinhaltes zu verbessern.

Abb. 4: Diagramm im Printbericht: Zuviel textuelle Information verhindert schnelle Erfassbarkeit. Quellennachwei

Abb. 4 — Diagramm im Printbericht: Zuviel textuelle Information verhindert schnelle Erfassbarkeit. [ 2, S. 25 ]

Zur des dargestellten Polaritätsprofils in die interaktive Applikation wurden die folgenden Überlegungen getroffen und umgesetzt:

  • Da ein Polaritätsprofil nur interessant ist, wenn zwei oder mehrere Objekte gleichzeitig dargestellt werden, entschied die Projektgruppe, die im Bericht dargestellten Informationen auf ihren Kern zu beschränken, indem keine Verbindungslinien zwischen den Werten gezogen werden, sondern diese lediglich durch Kreisgröße, numerischen Wert und Position auf einer y-Achse darzustellen.
  • Als Maßnahme zur Informationsentzerrung wird auf die Darstellung der vollständigen Aussagen entlang einer Achse vollständig verzichtet. Stattdessen erhalten die Bubbles selbst ein Stichwort neben dem prominenten numerischen Wert. Die Darstellung der vollständigen Aussage wird also auf eine andere Modusebene verlagert, die durch Hovern des jeweiligen Kreises eingeblendet wird. Dieses ist vergleichbar dem Kniff, bei Charts ergänzende textuelle oder numerische Information in Tooltip-ähnliche GUI-Elemente zu verlagern, die nur dann sichtbar werden, wenn einzelne Datenpunkte gehovert werden.
Abb. 5: Bubble-Diagramm statt Polaritätsprofil entzerrt Information.

Abb. 5 — Bubble-Diagramm statt Polaritätsprofil entzerrt Information.

Sehr elegant gestaltet ist die Transition zwischen den beiden Modi Hover/Normal: Wie bei einer realen Scheibe scheint sich die Bubble zu drehen, als ob sie an einem unsichtbaren Faden aufgehangen wäre, und zeigt ihre andere Seite.

Informationsdesign als mechanisches Ballett

Überhaupt: die Transitions! Die Art und Weise, wie Informationen in den Screen kommen, wie Screenelemente auf Hovern reagieren, das lebendige Pulsieren der Tag-Cloud, das Zusammenführen von Textenteilen, die sich während meines Scrollens sich zu kompletten Aussagen reißverschlussartig ergänzen, all das im richtig dimensionierten räumlichen und zeitlichen Maß – das ist schon gut inszeniertes mechanisches Ballett. Zwar nicht eines, das choreografiert ist für menschliche Körper. Aber eines, das choreografiert ist für Informationen, die sich schon irgendwie wesenhaft verhalten.

Die Art und Weise, wie sie von unten herbei huschen, über die Endposition hinaus schießen, leicht federn und dann ihre Position in der vertikalen Mitte des Screens einnehmen, um dann brav und rasend schnell auf die darzustellenden Ziffern hochzuzählen, hat etwas Magisches. Als Benutzer fühle mich dabei ein wenig wie ein Zauberer, der Informationen dazu veranlasst auf einer Bühne aufzutreten, mir ihre Geschichte zu erzählen und wieder abzutreten. Hier ein Recording von Interaktionen und Systemreaktion, das einen ersten Eindruck der Transitions vermittelt:

Webbasierte Animationen und Transitions sind vom Handwerklich-Technischen her betrachtet nichts aktuell Neues. Ihnen liegen JavaScript- und/oder CSS3-Libraries zugrunde. Trotzdem braucht es gute handwerklich Leistung und ein gutes Gefühl für die richtige Dimensionierung der Parameter des passend platzierten Effektes, so wie es in der vorliegenden Applikation im Großen und Ganzen auch zu finden ist.

Noch bemerkenswerter als die handwerkliche Leistung finde ich die Durchgängigkeit, mit der graphische Elemente und Texte in der Applikation animiert wurden. Dies deswegen, weil hier ein bisher gültiges Paradigma des Informationsdesigns gekippt wird, das lautete: Animation und Information schliessen sich in der Regel aus! So statuiert der Wikipedia-Eintrag Animation im Abschnitt Animation in der Lernpsychologie: „Animierte Bilder haben gegenüber statischen Repräsentationen den Vorteil, Veränderung explizit abbilden zu können. Sie stellen jedoch auch hohe Verarbeitungsanforderungen an die Lernenden. Daher sollten sie mit Bedacht eingesetzt und auf Sachverhalte beschränkt werden, die tatsächlich von einer bewegten Darstellung profitieren. Häufig werden jedoch selbst solche Medienbestandteile animiert und damit effekthascherisch überbetont, die dafür weitestgehend ungeeignet sind, wie zum Beispiel Texte.“ [3]

Ich denke, es ist an der Zeit, ein wenig hinter dieses Paradigma zu schauen und zu überlegen, ob dieses heute noch gültig ist. Es könnte sein, dass es sich bei der Behauptung der mangelnden Eignung animierter Information um einen Mythos handelt, der vor vielen Jahren in einem bestimmten Kontext nachgewiesen und publiziert wurde, seitdem weitergereicht wird und immer wieder erneut zitiert. Aber niemals empirisch unter aktuellen Bedingungen überprüft!

Animation = (funktionsloses) Ornament?

Animation – wenn ich dies höre, klingelt bei mir als Designer sofort die Alarmglocke. Bei diesem Wort befürchte ich das Gleiche wie der Autor des obigen Wikipedia-Zitates: Effekthascherei, Aufmerksamkeit ohne fundierte Inhalte, Ablenkung vom Wesentlichen, zu laut, zu bunt, zu viel! Dies geht gegen das Fokussierte, das Reduzierte, die klare Botschaft, das „Weniger ist mehr“, das so mühsam durch die Auseinandersetzung mit der visuellen Formwerdung der Inhalte erarbeitet werden muss. Welcher Designer kennt es nicht, wie oft eine visuelle Kommunikation im Entstehensprozess gesehen, assoziiert, umgestellt, gestrafft, reduziert werden muss, wie viele Ideen gestrichen werden müssen bis man an den klaren Kern kommt. Und dann kommt jemand mit überquellenden Powerpoint-Folien, bei denen Texte und Clipart-Grafiken auf die Folie wirbeln, zoomen und schachbrettern, was die Effektmaschine hergeben – es braucht ja nur einen Klick in die Animationsleiste. Formen, die keine Aussage treffen, sondern im schlimmsten Fall von der Inhaltslosigkeit der Aussagen ablenken sollen – das ist meine Furcht als Designer.

Als solcher weiss ich die Paradigmen des Funktionalismus zu schätzen. Einer dieser Leitsätze ist „Form follows function“ (Louis Sullivan). Die Gestaltung von Dingen soll sich aus der Funktion der Dinge ableiten. Andersherum gesagt: es soll nichts geben, was nicht eine Funktion unterstützt.

„Ornament ist vergeudete arbeitskraft und dadurch vergeudete gesundheit. So war es immer. Heute bedeutet es aber auch vergeudetes material, und beides bedeutet vergeudetes kapital.“ beschrieb Adolf Loos 1908 in seiner Schrift Ornament und Verbrechen, deren Titel designgeschichtlich einen weiteren Leitsatz des Funktionalismus zugespitzte. Sein Gedankengang: der Aufwand, der das Ornament erschafft, sei vergeudeter Aufwand, der besser dem Funktionalem dienen könne. Auf unser Thema übertragen führt dies zur Frage: ist die Animation ein zur Information hinzugefügtes Ornament, das eigentlich völlig überflüssig ist und nach dem Loos’schen Verständnis ebenfalls ein Verbrechen wäre?

Nun, der Begriff „Animation“ leitet sich aus dem Lateinischen „anima“ für Seele ab. Das Animierte ist das Beseelte, etwas das mit einer gewissen Autonomie agiert und reagiert. Aus diesem Blickwinkel könnte man sogar das System, mit dem der User interagiert, das die gewünschten Informationen bereitstellt und wieder wegnimmt und das auf Fehleingaben informierend antwortet, als beseeltes Wesen, als animiert betrachten. Man könnte nun den Standpunkt vertreten , es sei eigentlich nur konsequent, wenn die Informationen – genauer: Darstellungen (Text, Zahlen, Formen), die Informationen tragen – auch eine Art Eigenleben führen. Es wäre aber andererseits auch argumentierbar, dass es solche Ornamente gar erst nicht bedarf, da das Beseelte sich bereits im Verhalten des Systems ausdrücke.

Animierte Objekte in NUIs

Dass von Studenten Animationen im Informationsdesign ohne Scheu angewandt werden, mag einen ganz einfachen (Hinter-)Grund haben: sie sind in den vergangenen 10 Jahren groß geworden mit Geräten wie SmartPhone und Tablets. Diese Touch-Geräte sind in in einer neueren Phase der Hardware-Technologie entstanden und ihre Interfaces sind anders konzipiert als die der WIMP (Windows Mouse Pointer)-Systeme. Screeninhalte werden beispielsweise nicht gescrollt, sondern mittels Flick-Geste angeschubst; die Reaktion des Screeninhaltes auf die Geste entspricht demjenigen physischer Gegenstände: schnelle Bewegung am Anfang, danach allmähliches Verlangsamen. Diese sich über einen Zeitraum verändernde visuelle Reaktion des Screeninhaltes ist ebenfalls eine Animation – aus technischer Sicht wie aus Nutzersicht. Und sie hat eine Funktion, nämlich das steuerbare „Scrollen“ des Screeninhaltes.

Ein anderes Beispiel für eine funktionale Animation ist der Federeffekt im iOS 7: Gelangt der User beim Scrollen eines Inhaltes mittels Swipe oder Flick-Geste an dessen Anfang oder Ende, so wird diese Begrenzung deutlich, indem der Inhalt zwar über diese Begrenzung hinaus läuft, aber sofort wieder an die Begrenzung zurückfedert. Der Screeninhalt vollzieht eine nicht-lineare Bewegung, die autonom abläuft und so aussieht, als sei dieser Inhalt ein physikalisches Objekt, das mittels einer unsichtbaren Feder mit dem Rand des Screens verbunden – also eine Animation. Das System gibt also keinen textuellen Warnhinweis (z.B. „Sie können nicht weiterscrollen“) oder graphische Warnung (z.B. rotes Warndreieck-Icon am Ende der Scrollbar) an den Nutzer aus. Vielmehr versteht der Nutzer die Aussage einzig des Systems anhand des Verhaltens der Elemente, eben der Art und Weise, wie diese animiert sind. Deswegen werden diese Interfaces eben auch „natural“ genannt, da sie sich anfühlen wie das, was wir aus unserer physischen, natürlichen Umgebung kennen.

Die NUIs sind bereits seit einiger Zeit Leitmedium geworden; sie produzieren neue Standards bezüglich Look und Feel von Benutzungsoberflächen. Und damit kommt auch die Nutzererwartung, dass sich auch die Objekte in Webmedien mehr wie natürliche Objekte verhalten sollen. Und unter diesem Blickwinkel stellt sich mir die Frage: Was wirkt natürlicher – Texte, die auf einer Screenfläche bereits vorhanden sind wie bei einem bedrucktem Blatt Papier? Oder Texte, die beim Scrollen von ausserhalb zusammenkommen und sich auf der Fläche positionieren? Ehrlich gesagt: auf mich wirkt zweites natürlicher – und spannungsvoller erst recht.

Ich denke: im Zeitalter von NUIs ist es wichtig, den Gestaltungselementen Lebendigkeit und Beseeltheit mitzugeben. Und dies selbstverständlich nicht als inhaltsleere Effekthascherei, sondern zur Optimierung von Steuerbarkeit von Controls und inhaltlicher Aussage des inhaltlich Kommunizierten.

Kinetic Type

Die klassische Form, ja sozusagen die reinste Form, von Information ist der Text. Der Text gilt als Verkörperung des Satzes, der wiederum versprachlichter Gedanke ist. Es gibt sogar Menschen, die für sich ausschließlich nur geschriebenen Text oder gesprochenes Wort als Information zulassen und ausschließlich Zeitungen mit möglichst geringem Bildanteil lesen. TV oder das Genre der Illustrierten werden in der Wertewelt dieser Menschen nicht als Informationsmedium akzeptiert.

Nun, solche Sichtweisen würde der Mediengestalter von heute eher als Haltung einer Randgruppe von Sonderlingen einordnen. Nichtsdestotrotz ist das Konzept der starren Typografie auch heute noch ein wirkendes Paradigma in der Mediengestaltung, das optimale Effizienz und Effektivität beim Aufnehmen und Verstehen der durch Texte vermittelten Informationen verspricht. In unserer Vorstellung hat ein Text gefälligst starr zu sein und an derselben Stelle zu stehen, damit wir ihn optimal erfassen können. Der menschliche Wahrnehmungsvorgang mit seinen Fixationen und Sakkaden [5] legt die Ansicht ja nahe: das Lesen von Text ist ein eigentlich mühsamer und mit Fehlern behafteter Vorgang, der keine weitere Komplikation durch tanzende Buchstaben, vibrierende Wörter und die Position verändernde Zeilen gebrauchen kann.

Trotzdem ist die Frage, ob in einem Informationsdesign, bei dem Text kein romanhafter Fließtext, sondern oft nur ein Informationsträgern in einem Medienmix ist, die Frage nach der Leseeffizienz eine wesentliche Fragestellung. Würde ein animierter Text tatsächlich schlecht lesbar wegen unerträglich hoher kognitiver Last, so könnten viele Filmabspänne, Sende-Trailer, TV-Werbespots und Werbung auf Bussen und LKWs gar nicht funktionieren.

Ich halte nichts von Antworten mit Ja oder Nein, wenn es um den Frage nach dem Einsatz von animierter Schrift geht. Ich denke vielmehr, die Antwort liegt in der Suche nach dem richtigen Maß innerhalb einer bestimmten Kommunikationsaufgabe; handwerklich gesprochen also um die richtige Adjustierung der Parameter, damit Text animiert wird und trotzdem lesbar ist. Und erst ein User Research, der Effizienz und Effektivität des Verstehens eines solchermaßen animierten Texte mit einem nicht-animierten Text misst und vergleicht, würde fundiert darauf hinweisen, ob und unter welchen Umständen animierter Text schlechter zu lesen, zu verstehen und zu erinnern ist als der nicht-animierte. Bisher habe ich keine aktuelle Untersuchung hierzu gesehen.

2011/12 wurde in Mainz erstmalig die Ausstellung „Moving Types“ gezeigt, die die bewegte Schrift in der Geschichte und in den verschiedensten Anwendungen zum Thema hat [6]. Die Ausstellung vermittelt an über 200 Beispielen bewegter Typografie, dass Schrift in Bewegung nichts so Ungewöhnliches ist. Die Ausstellung macht deutlich: nicht nur die klassischen Attribute von Text wie Schriftart, Schriftgröße, Zeilenabstand tragen zur guten Gestaltung und zur Kommunikation bei, sondern auch Attribute, mit denen Schrift animiert werden kann.

Darüber hinaus gibt es aber auch seit einigen Jahren visuelle Kommunikation, bei denen Text der lebendige Hauptakteur eines Textes gemacht wird. Eine Fundstätte für staunenswerte Werke ist (wieder einmal) Youtube; finden lassen sich Beispiele mittels Suchbegriffe wie  „Typographic Animation“, „Type in motion“ oder „Kinetic Type“. Oft werden Songtexte mit animierter Typo dargestellt und folgen der Musik wie bei Mad world by Gary Jules. Oder der Text kombiniert thematisch assoziative Begriffe in animierter Form mit ikonenhaften Grafiken. Mein persönlicher Favorit ist ein Movie, das nicht mehr künstlerisches Experiment animierten Textes ist, sondern bereits ein ausgereiftes informationsdesignerisches Werk ist: Eine Textanimation mit Informationen zur Nutzung von Zuckerrohr für Nahrungsmittel und zur Energiegewinnung. Bitte anschauen – danach wird man differenzierter die Frage beantworten: Schliessen sich animierter Text und Informationsdesign aus?

Ob und inwieweit das in dieser Form Gesehene und Gelesene Verständnis und Wissen schafft und ob dieses Wissen auch nachhaltig besser erinnert werden kann als in einer mehr statisch präsentierten Form – das wäre ein Thema, das zukünftig im Zuge einer User Research-Studie untersucht werden könnte.

Quellen

[1] Arweiler, Janus, Kirchner, Leutner: Nutzertypen in Deutschland 2014, Arbeit im Rahmen der Lehrveranstaltung Multimediales Informationsdesign 2014/15, Fachbereich Online Medien an der DHBW Mosbach.

[2] Initiative D21 e.V., TNS Infratest (Hrsg.): D-21-Digital-Index 2014

[3] Wikipedia-Artikel Animation, Abschnitt Animation in der Lernpsychologie. Zuletzt aufgerufen 31.04.2015.

[4] Loos, Adolf (1908): Ornament und Verbrechen

[5] Lotz, Kaselow (2007): Ich sehe das, was du grad siehst – Der Eyetracker

[6] Ludwig, Annette et al. (Hrsg.): Moving Types – Lettern in Bewegung, Medienausstellung und Katalog (1.Auflage, Mainz 2011).

[7] Aloe Design Studios (2011): Kinetic Type Animiation for Unica Brazil and sugarcane.org (movie)

From → Allgemein

Schreibe einen Kommentar

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: