Zum Inhalt springen

Jetzt anfragen!

Content-Bereiche

Oft muss viel Inhalt auf geringer Fläche untergebracht werden. Hierfür gibt es viele Techniken, die entwickelt worden, um einerseits den Content sinnvoll zu gliedern und andererseits die Darstellung derart zu „raffen“, dass dieser Inhalt auch kompakt dargestellt wird und leicht zu erreichen ist.

Bei der Organisation von Inhalten ist darauf zu achten, welche Darstellungsform die Information am besten vermittelt und welche Daten zugleich zu sehen sein müssen.

Akkordeon

Mit dem Akkordeon-Pattern können Inhalte mit mehreren Abschnitten kompakt dargestellt werden.

Funktion & Anwendung

Das Akkordeon besteht aus Überschriften und dazu gehörigen Inhalten, z.B. Texten, Listen oder Links. Durch einen Klick auf die Überschrift wird der dazugehörige Inhalt ein- und ausgeklappt.

Es ist zu unterscheiden zwischen Akkordeons, bei denen mehrere Elemente getrennt öffnet werden können und den Akkordeons, bei denen immer nur ein Element geöffnet werden kann.

Besonders wenn mehrere Elemente geöffnet sein können ist es hilfreich anzuzeigen, ob das Element ausgeklappt ist. Der Indikator (zumeist ein Pfeil oder +/-Symbol) wird gerne neben der Überschrift angebracht.

Der aktive Abschnitt kann durch eine veränderte Darstellung der Überschrift noch stärker hervor gehoben werden, zum Beispiel durch eine andere Hintergrundfarbe. Diese Art der Darstellung ist besonders dann sinnvoll, wenn immer nur ein Element ausgeklappt werden kann.

Wenn nur ein Abschnitt geöffnet sein darf, dann wird der zuvor geöffnete Abschnitt üblicherweise automatisiert geschlossen.

Zudem kann hier zwischen Akkordeons unterschieden werden, die immer eine fixe Höhe beibehalten und jenen, die sich in der Höhe dynamisch anpassen.

Bei einer fixen Höhe wird zur Berechnung der Höhe der Inhalt des längsten Abschnitts für alle Elemente herangezogen. Bei kürzeren Abschnitten verbleibt dadurch ein Leerraum.

Bei variabler Höhe kann das Akkordeon optimal in der Höhe angepasst werden. Allerdings ist darauf zu achten, dass nachfolgende Elemente ihre Position ebenfalls ändern und so eventuell mehr Unruhe im Design entsteht.

Lightbox

In einer Lightbox werden Inhalte abgesetzt vom Hintergrund dargestellt.

Funktion & Anwendung

Lightboxes, manchmal auch als Overlay bezeichnet, lenken die Aufmerksamkeit auf das gewünschte Element und blenden den Rest der Seite aus.

Sie dienen als Ersatz für die ungeliebten Pop-Ups, die in eigenen Fenstern aufgehen. Die Lightbox ist ein helles Element vor einem dunklen Hintergrund und wird üblicherweise horizontal sowie vertikal mittig positioniert und.

Geschlossen wird die Lightbox durch den Klick auf einen Link. Da man es von anderen Programmen so gewöhnt ist, bietet sich als Alternative zum klassischen „Schließen“-Text-Link ein „X“-Symbol an. In manchen Ausführungen der Lightbox ist zudem ein Klick auf den dunklen Hintergrund möglich, um die Box zu schließen.

Ursprünglich wurden Lightboxes hauptsächlich für Bilder im Rahmen von Galerien und als größere Version von Thumbnails genutzt.

Inzwischen kommen sie auch für Videos, Formulare, Benachrichtigungen und Dialoge zum Einsatz.

Karussell / Slider

In einem Karussell oder Slider wird eine Reihe von Elementen untergebracht, wobei die Konzentration immer auf eines oder wenige Elemente fokussiert wird.

Funktion & Anwendung

Dieses Design-Pattern eignet sich vor allem für Elemente mit starker visueller Wirkung.

Typisches Beispiel für einen Slider sind großflächige Elemente auf der Startseite. So werden wechselweise 3 bis 6 Elemente mit einer großen Graphik und einem kurzen Text (z.B. dem Namen der hinter dem Link liegenden Seite oder des beworbenen Produkts / Films / Beitrags) durchgeschaltet. Ein Klick auf das Element führt zu einer weiteren Seite oder einem Call to action wie einem Formular.

Ein anderes Beispiel für ein Karussel ist ein Online-Shop, bei dem Produkte in 3er-Gruppen beworben werden. So werden pro „Seite“ des Karussells einige Produkte jeweils gemeinsam beworben.

Gemein haben die Umsetzungen dieses Patterns, dass

  • ähnlich einer Slideshow stets erkennbar ist, wie viele „Seiten“ es gibt,
  • die aktuelle Seite bzw. Position hervorgehoben wird und
  • es Navigationslinks gibt, um zur nächsten bzw. vorherigen Seite zu gelangen.

Content Tabs

Tabs unterteilen Inhalte wie traditionelle Registerkarten in mehrere Abschnitte, zwischen denen hin- und hergewechselt werden kann.

Funktion & Anwendung

Content-Tabs werden verwendet, um eine größere Menge von Inhalten mit zwei bis zehn Bereichen optisch zu unterteilen. Sie eignen sich unter anderem für

  • umfangreiche Konfigurationsdialoge,
  • aus mehreren Schritten bestehende Aktionen oder
  • umfangreiche Informationen (z.B. Beschreibung, technische Spezifikationen, Ausstattungsmöglichkeiten, Preise und Händlerinformationen für einen Wagen).

Das Tabs-Pattern setzt sich zusammen aus einer Reihe von Navigationslinks und einem Inhaltsbereich. Durch den Klick auf den Link wird der jeweilige Content zum Vorschein gebracht.

Die Links werden standardmäßig horizontal über dem Inhaltsbereich positioniert und gerne als „Laschen“ dargestellt. Sie erinnern damit an traditionelle Registerkarten in Büroschränken oder ähnliche Bedienelemente aus PC-Programmen.

Durch optische Hervorhebungen wird den NutzerInnen verdeutlicht, in welchem Tab man sich gerade befindet.

Content-Tabs sinn sinnvoll einsetzbar, wenn

  • man Inhalte nicht unmittelbar nebeneinander und gleichzeitig sehen muss,
  • die Bereiche kurze Bezeichnungen haben,
  • die Inhalte eine einigermaßen ähnliche Struktur aufweisen und
  • der Navigationsfluss nicht durch das Laden einer neuen Seite unterbrochen werden soll.

Zudem eigenen sich Tabs für das Führen durch einen mehrschrittigen Prozess, zum Beispiel bei umfangreichen Formularen wie speziellen Anfragen oder Bestellvorgängen in Webshops.

Themen

Datenorganisation, Informationsarchitektur, Datenkonsolidierung, Darstellung von Inhalten

Callback Service

Wir rufen Sie gern für ein Beratungsgespräch zurück!