Timeline, Akkordeon, Cards, wann welches Element passt

Im modernen Webdesign gibt es eine ganze Reihe von Bauteilen, die immer wieder vorkommen. Timelines, Akkordeons, Karten, Tabs, Slider. Sie sehen oft schick aus, aber jeder hat seinen ganz konkreten Sinn. Wer sie wahllos einsetzt, baut ein Designkarussell. Wer weiß, wann was funktioniert, baut funktionale Websites.

Akkordeons

Ein Akkordeon ist ein Element, bei dem mehrere Inhalte untereinander stehen, aber zunächst nur die Überschriften zu sehen sind. Klickt man auf eine Überschrift, klappt der dazugehörige Inhalt aus.

Akkordeons sind perfekt für FAQ-Sektionen. Sie sind auch gut, wenn du viele Punkte hast, die jeweils kurz erklärt werden müssen, aber nicht alle gleichzeitig sichtbar sein sollen. Sie sparen Platz, geben dem Besucher Kontrolle und wirken aufgeräumt.

Wo Akkordeons nicht passen, ist bei Inhalten, die der Besucher unbedingt sehen muss. Was hinter einem Akkordeon versteckt ist, wird oft nicht angeklickt. Wenn die Information wichtig ist, gehört sie in den Vordergrund.

Timelines

Eine Timeline zeigt eine Abfolge von Ereignissen oder Schritten in zeitlicher oder logischer Reihenfolge. Visuell oft als senkrechte oder waagrechte Linie mit Punkten dargestellt.

Timelines sind ideal für Prozessdarstellungen, etwa wie eine Zusammenarbeit bei dir abläuft. Erstgespräch, Konzeption, Umsetzung, Übergabe. Sie sind auch passend für Unternehmensgeschichten oder für Produktentwicklungen über mehrere Jahre.

Was Timelines gut machen, ist Klarheit. Sie zeigen, dass es eine Reihenfolge gibt und dass jeder Schritt seinen Platz hat. Das beruhigt den Besucher, der wissen will, was auf ihn zukommt.

Timelines sind weniger sinnvoll, wenn die Inhalte keinen wirklichen Ablauf abbilden. Eine Liste deiner Leistungen ist zum Beispiel keine Timeline, denn die Leistungen folgen nicht aufeinander.

Karten oder Cards

Karten sind kleine Container, die einzelne Inhalte zusammenfassen. Jede Karte hat oft ein Bild, eine Überschrift, einen kurzen Text und manchmal einen Button. Mehrere Karten werden meistens nebeneinander oder in einem Raster angeordnet.

Karten eignen sich hervorragend für die Darstellung von Leistungen, Produkten, Teammitgliedern, Blogartikel-Vorschauen oder Referenzprojekten. Sie sind übersichtlich, leicht zu erfassen und lassen sich gut auf verschiedenen Bildschirmgrößen anpassen.

Wenn du gleichartige Inhalte hast, die du in einer Übersicht zeigen willst, sind Karten fast immer die richtige Wahl.

Tabs

Tabs sind wie Karteikarten in einem Ordner. Mehrere Inhalte teilen sich den gleichen Platz, aber nur einer ist gleichzeitig sichtbar. Der Besucher klickt auf einen Reiter und sieht den entsprechenden Inhalt.

Tabs sind gut, wenn du verwandte Inhalte hast, die der Besucher nicht alle gleichzeitig sehen muss, aber zwischen denen er schnell wechseln können soll. Etwa eine Vergleichstabelle zwischen verschiedenen Paketen oder eine Detailansicht eines Produkts mit Reitern wie Beschreibung, Spezifikationen, Bewertungen.

Tabs sollten sparsam eingesetzt werden. Wenn du zu viele davon hast, weiß der Besucher nicht mehr, was wichtig ist.

Slider und Karussells

Slider zeigen mehrere Inhalte nacheinander an, oft automatisch oder manuell durch Pfeile gesteuert. Sie sind im Web seit Jahren im Einsatz, aber ihre Beliebtheit hat aus gutem Grund nachgelassen.

Studien haben mehrfach gezeigt, dass Slider in den meisten Fällen weniger Conversion bringen als statische Inhalte. Der Besucher sieht oft nur das erste Bild, weil er weiterscrollt, bevor das nächste angezeigt wird. Außerdem ist die Bedienung auf Mobilgeräten oft schwierig.

Wenn du dich für einen Slider entscheidest, dann mit Bedacht. Etwa für Kundenstimmen, bei denen mehrere Bewertungen Platz finden sollen, ohne die Seite zu überfrachten. Oder für eine Bildergalerie, bei der die einzelnen Bilder gleichberechtigt sind.

Modal-Fenster

Ein Modal-Fenster ist ein Pop-up-ähnliches Element, das sich über den Hauptinhalt legt. Es wird oft genutzt, um wichtige Informationen einzuholen, etwa eine Newsletter-Anmeldung, eine Bestätigung oder ein Login.

Modale sind nützlich, wenn der Besucher etwas tun soll, ohne dass die Seite gewechselt wird. Sie sollten aber sparsam eingesetzt werden. Modale, die ungefragt aufpoppen und den Besucher unterbrechen, sind eines der häufigsten Ärgernisse im Web.

Was du daraus mitnehmen solltest

Jedes Element hat seinen Zweck. Wer es richtig einsetzt, baut Websites, die intuitiv funktionieren. Wer Elemente einsetzt, weil sie modisch wirken, baut Websites, die kompliziert sind. Eine gute Designentscheidung beginnt immer mit der Frage, was hier gerade gebraucht wird, und endet erst dann mit der Frage, wie es am besten umgesetzt wird.

Dein nächster Schritt

Wenn du nicht sicher bist, ob deine Website die richtigen Elemente an den richtigen Stellen einsetzt, schau ich gerne kostenlos drüber. Ich gebe dir eine ehrliche Rückmeldung, was funktioniert und was sich verbessern lässt. Komplett unverbindlich.