Formate im Web

One-Page

Neben bewährten Formaten wie den klassischen, nach Bedürfnissen ausgestalteten Seiten, Artikeln, Blogs, News-Listen etc. hat in letzter Zeit vor allem das One-Page Format von sich reden gemacht. Das Bedürfnis nach einer einfachen Webseite, die mit wenigen statischen Inhalten meist eine Person oder kleine Firma repräsentierten, wurde einfach aber gut gestaltet auf einer einzelnen Seite umgesetzt. Das Format eignet sich darüber hinaus bei klar abgegrenzten Inhalten, beispielsweise für spezifische Kampagnen, Events, Bekanntmachungen, Vorab-Präsentationen oder Announcements mit der Möglichkeit zur Registration etc.

Infinite Scroll Webseiten

Infinite Scroll Webseiten laden ähnlich wie bei One-Page Seiten allen Content auf eine einzelne Seite, kommen aber ohne vertikale Begrenzung aus. Im Gegenteil; Die Seiten funktioniert wie ein endloses Band das über vertikales Scrolling navigiert wird. Es gibt auch Beispiele von horizontal scrollbaren Seiten, die Vertikale hat sich aber als die dominantere Ausrichtung etabliert. Inhalte werden auf der endlosen Seite nach Priorität gegliedert und aneinandergereiht. Eine Navigation, welche meistens statisch überlagert ist, erlaubt es direkt zu einzelnen Ankerpunkten in der Seite zu springen.

Die Agentur RGA präsentierte auf der Seite für Nike Better World Web eine Technologie, die sich als "Parallax Scrolling" wie ein Lauffeuer im Web verbreitete und in allen Möglichen Anwendungsbereichen und Spielarten umgesetzt wurde. Das Prinzip ist einfach: Ein Hintergrund, Mittel-Layer und Vordergrund bewegen sich beim Scrollen in verschiedenen Geschwindigkeiten. Dadurch entsteht ein Eindruck von Tiefe in der Bewegung. Der Effekt wurde zwischen 2012 bis 2014 in allen Variationen extrem ausgereizt. Die Vielfalt reichte von sich wechselnden Hintergrundbildern überlagert von Textlayern, Videos im Hinter- oder Vordergrund, Elemente die gezielt in Scrollbereichen ein- oder ausgeblendet werden, Miteinbeziehen der Horizontalen Scrollrichtung etc. Prinzipiell folgt die Benutzerführung der Vertikalen von Oben nach Unten und erlaubte eine Dramaturgie entlang der Scrollpositionen.

Eine Innovation mit Infinite-Scrolling und Parallax Effekten entstand durch die Interpretation der Vertikalen als Zeitachse. Damit lässt sich ein Ablauf oder eine Erzählung als chronologische Animation visualisieren, durch die sich der Benutzer scrollen kann.

Parallax Webseiten

Parallax Websites lassen sich mit der Scrollfunktion steuern. Scrollt der Benutzer nach unten, bewegen sich die Elemente der Website unterschiedlich schnell. Ein Hintergrundbild bewegt sich langsam, während Bilder oder Grafikelemente sich im Vordergrund schneller bewegen.

SPA - Single Page Applications

Lange galt die Devise, Views möglichst Serverseitig zu rendern und so wenig wie möglich dem Client zu überlassen. Javascript als Sprache und deren Verwendung im Browser für Effekte, Rendering oder gar für Logik galt als optional, unsicher und wegen der ungleichmässigen Unterstützung durch Browser als unzuverlässig. Diese Umstände haben sich total verändert. Javascript als Sprache und der Browser als clientseitige Platform hat sich zu einem festen Bestandteil des Web-Stacks gemausert. Nicht zuletzt durch Frameworks wie Angular oder React werden heute sogenannte 'Single-Page Applications' realisiert, bei denen quasi nur eine einzige Startseite vom Server grendert wird. Alles weitere - Views, routing, models, templates und sub-templates, logik, forms etc. wird via Javascript kontrolliert. Ein par Beispiele von Single-Page apps:

  • Facebook (Alles was mit dem Stream, Posts und Freunden zu tun hat ist Clientseitig. Separate pages für Profile, Events teilweise Serverseitig)
  • Twitter
  • Soundcloud

Dem Benutzer wird eine eine effizientere, nahtlosere Bedienung ermöglicht. Ein Übergang von einem Navigationspunkt zum Anderen benötigt nicht mehr ein kompletter Reload inkl. unveränderten Elementen wie Navigation, Footer etc. sondern es wird lediglich eine Teil vom Layout neu geladen. Auf Soundcloud beispielsweise spielt der aktuelle Track ungehindert weiter, egal ob der Benutzer sich andere Playlists anschaut oder eine Suche ausführt. Oder bei Facebook sind Friend Requests, Messages und Notifications so implementiert dass sie permanent verfügbar sind und aktualisiert werden, unabhängig von View-Änderungen weil der Benutzer zwischen den Inhalten hin und her wechselt.

Die Folge dieser Entwicklung auf die Gestaltung war ein verstärkter Fokus auf die Wechsel (Transitions) und kleinen Interaktionsabläufe (Microinteractions) innerhalb von Web-Apps.

Animations

Animationen sind ein wichtiges Gestaltungsmittel geworden für Interaktionen. Auch die Materialdesign-Guidelines messen der Bewegung von Elementen eine wichtige Bedeutung zu um Benutzeroberflächen haptischer und physischer zu gestalten. Einige Anwendungen und Patterns von Animationen wie z.B. Collapse-Toggle (Accordion) oder Fade-In/Out sind spätestens seit JQuery weit verbreitet. Neuere Formen von Animationen versuchen durch die Bewegung dem Benutzer Beziehungen zwischen den Elementen oder Ansichten zu kommunizieren - etwa beim Wechsel zwischen Listen- und Detail-Ansicht:

Ein schönes Beispiel für den Einsatz von Animationen für View- und Sub-View Transitions ist der Konfigurator vom dänischen Kopfhörer-Hersteller AIAIAI.

Animationen können mit verschiedenen Mitteln umgesetzt werden. Native CSS-Animations und Javascript libraries (welche unter der Haube wiederum auf CSS, Canvas oder requestAnimationFrame zurückgreifen) werden im Moment am häufigsten eingesetzt. Das 2012 vorgestellte Web-Animations-API (WAAPI) mit einer einheitlichen und nativen Unterstützung von CSS- und Javascript-Animations sieht vielversprechend aus. Schlechte Browserunterstützung und ständig ändernde Spezifikationen verhindern die Verwendung im Moment noch. Ein Polyfill für das API hat das web-animations-js Projekt auf Github bereitgestellt. Der Artikel 'A Comparison of Animation Technologies' (S. Drasner, CSS-Tricks, 2016) bietet ein guter Überblick und Vergleich der verfügbaren Techniken und Libraries.

Visual Storytelling

Infinite Scrolling, Parallax und das neu entdeckte narrative Potential trafen auf Online-Journalisten die auf der Suche waren nach neuen publizistischen Möglichkeiten. Das Ergebnis ist eine Reihe von Experimenten die unter Bezeichnungen wie "Visual Storytelling", "Data Journalism" oder "Long Form" interessante Erzeugnisse hervorbrachten, mit dem Ziel Inhalte im Web umfassender und interaktiver zu vermitteln.