Startseite Kampagne Kfz-Versicherung Außendienstseite Außendienstseite Ausbau Außendienstseite (barrierefrei) Übersicht Schadenmeldung Schadenmeldung 404 Seite Basisseite Aufbau Step Display Level Navigation Produktseite rechnende Produktseite DXP-Update Kontakt

Step Display
Step Displays schaffen Orientierung auf den ersten Blick: Ihre Kunden erhalten eine klare Schritt-für-Schritt-Anleitung direkt auf der Website – ob für die Schadenmeldung, die Antragstellung oder den Ablauf einer Bewerbung. Abläufe werden verständlich erklärt, Hürden abgebaut und der Weg zur gewünschten Aktion deutlich erleichtert.

Vorteile für Nutzer und Redakteure

Vorteile für Ihre Kunden

Das Step Display führt Ihre Kunden sicher durch jeden Prozess. Statt sich durch lange Texte zu arbeiten, erhalten sie eine klare Schritt-für-Schritt-Struktur, die Orientierung gibt und Unsicherheit reduziert – vom Antrag über die Schadenmeldung bis hin zur Bewerbung. So wird der Ablauf nachvollziehbar, verständlich und angenehm.
Schneller Überblick über den gesamten Prozess Weniger Unsicherheit durch klare Schritt-für-Schritt-Erklärungen Sicheres Gefühl bei Anträgen, Schadenmeldungen oder Bewerbungen

Vorteile für Redakteure

Für Redakteure bietet das Step Display volle Flexibilität. Inhalte und Schritte lassen sich individuell an den jeweiligen Use Case anpassen und die Darstellung ist frei wählbar – vertikal (Standard) oder horizontal. In der horizontalen Variante reagiert das Element automatisch auf den Viewport und wechselt bei kleineren Auflösungen in die vertikale Form.
Flexible Anpassung an unterschiedliche Use Cases Wahl zwischen vertikaler und horizontaler Darstellung Automatische, responsive Darstellung auf allen Endgeräten Bitte beachten Sie: Die dargestellten Beispiele sind fiktiv und dienen ausschließlich der Veranschaulichung.

Beispiele zur Umsetzung
Wie vielseitig das Step Display einsetzbar ist, zeigen die folgenden Beispiele: einmal im Versicherungsabschluss, wo Kunden Schritt für Schritt durch den Antragsprozess geführt werden, und einmal im Bewerbungsprozess, der transparent und klar strukturiert dargestellt wird. Für die redaktionelle Pflege muss zunächst die Komponente "Step Display" innerhalb eines Containers ausgewählt und auf einer Seite mit Basistemplate platziert werden.

Beispiel 1: Prozess Produktabschluss

Gemeinsam zu Ihrer Online KFZ-Versicherung: Los geht´s!

Produkt gefunden

 Sie haben ein passendes Versicherungsprodukt gefunden.

Online abschließen

 Jetzt brauchen Sie nur noch unser Online- Abschlussangebot abzuschließen.

Gut versichert!

 Ab dem Zeitpunkt des Online-Abschlusses sind Sie jetzt bestens versichert.

Hinweise zur Anwendung

Ein Step Display wie dieses eignet sich ideal, um den Abschlussprozess einer Versicherung transparent darzustellen. Kunden sehen auf einen Blick, welche Schritte notwendig sind – von der Produktauswahl bis zur erfolgreichen Absicherung. So werden Unsicherheiten reduziert, der Online-Abschluss klar strukturiert und die Wahrscheinlichkeit eines erfolgreichen Vertragsabschlusses steigt. Zusätzlich können die einzelnen Schritte farblich hervorgehoben werden, sodass Nutzer sofort erkennen, welcher Schritt bereits abgeschlossen ist und wie es weitergeht.

Beispiel 2: Prozess Bewerbungsablauf

Du willst Teil des Teams werden? So einfach ist eine Bewerbung bei uns!

Onlinebewerbung

 Reichen Sie Ihre Unterlagen bequem online ein – schnell, einfach und jederzeit möglich.

Bewertung der Bewerbung

 Ihr Profil wird sorgfältig geprüft, damit wir Ihre Stärken und Erfahrungen kennenlernen können.

Online Test

 Zeigen Sie Ihr Wissen und Ihre Fähigkeiten in einem kurzen Online-Test – flexibel von zu Hause aus.

Einladung zum Matching Day

 Bei positivem Ergebnis laden wir Sie zu einem persönlichen Kennenlernen im Matching Day ein.

Vertragsabschluss

 Nach einer Zusage erhalten Sie Ihren Vertrag direkt von der Direktion oder Geschäftsstelle.

Hinweise zur Anwendung

Auch im Bewerbungsprozess lässt sich das Step Display wirkungsvoll einsetzen. Bewerber erkennen sofort, welche Schritte sie erwarten – von der Online-Bewerbung über das Vorstellungsgespräch bis zur finalen Zusage. So entsteht Transparenz, der Prozess wirkt strukturiert und die Candidate Experience verbessert sich deutlich. Zusätzlich können die einzelnen Schritte farblich hervorgehoben werden, sodass Bewerber jederzeit sehen, welchen Teil sie bereits abgeschlossen haben und was als Nächstes folgt.

Redaktionelle Hinweise

Checkliste: So pflegen Sie ein Step Display richtig

Mit dem Step Display lassen sich Inhalte flexibel an den jeweiligen Use Case anpassen. Sie können sowohl die Darstellung als auch die einzelnen Schritte individuell konfigurieren:
Darstellung wählen: Entscheiden Sie, ob das Step Display horizontal oder vertikal angezeigt werden soll. Hinweis: Auf Tablets (small) und Smartphones (x-small) wird automatisch die vertikale Variante ausgespielt. Steps anlegen: Über den Button „Hinzufügen“ weitere Schritte einfügen und mit Inhalten befüllen. Icons oder Zahlen einsetzen: Symbole aus dem Icon Font auswählen – alternativ stehen auch Zahlen als Icons zur Verfügung. Achten Sie auf ein korrekt gesetztes ARIA-Attribut, damit Screenreader die Inhalte vorlesen können. Status pflegen: Default: Step ist noch nicht abgeschlossen; Completed: Step ist erledigt und wird farblich hervorgehoben Überschrift festlegen: Wählen Sie für jeden Step das gewünschte H-Level (p, h1–h6). Diese Einstellung hat keinen Einfluss auf die Optik, sorgt aber für eine saubere Struktur im Quellcode.

Dos

Die horizontale Ausprägung kann je nach Viewport (Spaltenmenge 12, 8, 4) eine begrenzte Anzahl an Schritten haben (3 bis max 6 Schritte). Bei Verwendung eines Grids von 1040px ist die Verwendung der horizontalen Ausprägung nur in L-XL sinnvoll, ab M vertikal. Verwenden Sie gleiche Formate (nur SVG oder nur Iconfont) für die Symbole in den Steps. Schreiben Sie die Anleitung in leichter Sprache, kurz und anschaulich. Die Anleitung sollte mit dem tatsächlichen Flow übereinstimmen.

Don'ts

Zuviel Text. Zu viele Schritte (mehr als 6 Schritte). Mischung der Formate (SVG plus Iconfont) erzeugt schlechtes Alignment und verschiedene Grössen.

Weitere Informationen und eine detaillierte Anleitung finden Sie in unserem Redaktionsguide.

Zum Redaktionsguide

Individuelle Beratung für Ihre Use Cases

Ob Produktabschluss, Schadenmeldung oder Bewerbungsprozess: Wir unterstützen Sie dabei, das Step Display optimal einzusetzen. Sprechen Sie uns an – wir beraten Sie gerne zu den passenden Use Cases.
Jetzt beraten lassen

Best Cases

Startseite Kampagne Kfz-Versicherung Außendienstseite

Best Cases

Außendienstseite Ausbau Übersicht Schadenmeldung Schadenmeldung 404 Seite

Academy

Basisseite Produktseite rechnende Produktseite

Service

DXP-Update Kontakt Meine Services Meine Meldestelle Impressum Datenschutz OEV Online Dienste GmbH Barrierefreiheit Privatsphäre-Einstellungen Folgen Sie uns