Fortschrittsanzeige für Angebotsanfrage-Formular
Die Fortschrittsanzeige zeigt Besuchern, wie weit sie im mehrstufigen Angebotsanfrage-Formular bereits fortgeschritten sind. Sie besteht aus einem Fortschrittsbalken und einer Schritt-Anzeige, die beide automatisch aktualisiert werden.
Voraussetzungen
- Wird automatisch im Angebotsanfrage-Formular angezeigt
- Keine separate Konfiguration erforderlich
Aufbau der Fortschrittsanzeige
Die Anzeige besteht aus zwei Elementen:
Schritt-Anzeige (rechts oben):
- Zeigt den aktuellen Schritt und die Gesamtzahl
- Format: "3/5" (bedeutet: Schritt 3 von 5)
- Hilft bei der Orientierung im Prozess
Fortschrittsbalken:
- Visueller Balken, der sich mit jedem Schritt füllt
- Zeigt den Prozentsatz des Fortschritts
- Wird in der Primärfarbe deiner Website dargestellt
So funktioniert die Anzeige
Automatische Berechnung:
Die Fortschrittsanzeige berechnet automatisch:
- Aktueller Schritt: Welcher Schritt gerade aktiv ist
- Gesamtschritte: Wie viele Schritte das Formular insgesamt hat
- Prozentsatz: Wie viel Prozent des Formulars bereits ausgefüllt sind
Beispiel-Berechnung:
Bei einem 4-Schritt-Formular:
- Schritt 1: 25% (1/4)
- Schritt 2: 50% (2/4)
- Schritt 3: 75% (3/4)
- Schritt 4: 100% (4/4)
Visuelle Darstellung:
- Leerer Bereich: Grauer Hintergrund für noch nicht erreichte Schritte
- Gefüllter Bereich: Farbiger Balken für abgeschlossene Schritte
- Glatte Animation: Der Balken füllt sich sanft bei jedem Schritt
Verhalten in verschiedenen Schritten
Auswahlschritte:
- Jeder Auswahlschritt erhöht den Fortschritt gleichmäßig
- Die Anzeige aktualisiert sich beim Klick auf "Weiter"
- Rückwärts-Navigation reduziert den Fortschritt entsprechend
Kontaktdaten-Schritt:
- Wird als letzter Schritt vor dem Abschluss angezeigt
- Meist bei 100% oder kurz davor
- Zeigt, dass das Ende des Formulars erreicht ist
Nach dem Absenden:
- Die Fortschrittsanzeige wird ausgeblendet
- Bestätigungstext ersetzt das Formular
Design und Layout
Positionierung:
- Oberhalb des Formularinhalts platziert
- Gut sichtbar, aber nicht störend
- Konsistente Position in allen Schritten
Responsive Verhalten:
- Passt sich automatisch an verschiedene Bildschirmgrößen an
- Bleibt auf mobilen Geräten gut lesbar
- Optimale Darstellung auf allen Geräten
Farbgebung:
- Verwendet die Primärfarbe deiner Website
- Harmoniert mit dem restlichen Design
- Gute Kontraste für bessere Lesbarkeit
Psychologische Wirkung
Motivation:
- Zeigt Besuchern, dass sie bereits Fortschritte gemacht haben
- Motiviert zum Weitermachen ("Ich bin schon bei 75%")
- Reduziert Abbruchrate bei längeren Formularen
Transparenz:
- Besucher wissen, was sie erwartet
- Keine Überraschungen bei der Anzahl der Schritte
- Schafft Vertrauen in den Prozess
Orientierung:
- Hilft bei der Navigation im Formular
- Zeigt deutlich, wo man sich befindet
- Verhindert Verwirrung bei mehrstufigen Prozessen
Tipps und Hinweise
- Die Anzeige aktualisiert sich automatisch - keine manuelle Einstellung nötig
- Der Fortschrittsbalken ist ein wichtiges UX-Element für längere Formulare
- Die Schritt-Anzeige hilft besonders auf mobilen Geräten bei der Orientierung
- Die Anzeige funktioniert auch bei unterschiedlich vielen Formularschritten
- Besucher können den Fortschritt durch Vor- und Zurück-Navigation beeinflussen