Auswahlkarte für Angebotsanfrage-Formular
Die Auswahlkarte ist ein interaktives Element, das Besuchern ermöglicht, aus verschiedenen Optionen in den Auswahlschritten des Angebotsanfrage-Formulars zu wählen. Jede Option wird als anklickbare Karte dargestellt.
Voraussetzungen
- Wird automatisch für jede Option in den Auswahlschritten generiert
- Keine separate Konfiguration erforderlich
Aufbau der Auswahlkarte
Jede Karte besteht aus folgenden Elementen:
Auswahlfeld (Radio Button):
- Unsichtbares Auswahlfeld für die technische Funktionalität
- Ermöglicht nur eine Auswahl pro Schritt
- Wird automatisch mit eindeutiger ID erstellt
Anklickbare Fläche:
- Die gesamte Karte ist anklickbar
- Große Zielfläche für einfache Bedienung
- Besonders benutzerfreundlich auf mobilen Geräten
Titel der Option:
- Zentriert dargestellter Text
- Beschreibt die Auswahloption
- Beispiel: "Online-Shop", "Firmen-Website", "Blog"
So funktioniert die Auswahlkarte
Auswahl-Mechanismus:
- Klick auf Karte: Besucher klickt auf eine beliebige Stelle der Karte
- Automatische Auswahl: Die Option wird automatisch ausgewählt
- Visuelle Rückmeldung: Die Karte zeigt den ausgewählten Zustand
- Andere Karten: Andere Optionen werden automatisch abgewählt
Interaktive Zustände:
- Normal: Standarddarstellung der nicht ausgewählten Karte
- Hover: Hervorhebung beim Überfahren mit der Maus
- Ausgewählt: Spezielle Darstellung der gewählten Option
- Fokus: Tastatur-Navigation wird unterstützt
Design und Layout
Kartendesign:
- Moderne Kartenoptik mit Rahmen
- Abgerundete Ecken für freundliches Aussehen
- Ausreichend Innenabstand für gute Lesbarkeit
Responsive Verhalten:
- Automatische Anpassung an verschiedene Bildschirmgrößen
- Optimale Darstellung auf Desktop, Tablet und Smartphone
- Touch-freundliche Größe auf mobilen Geräten
Anordnung:
- Mehrere Karten werden nebeneinander angezeigt
- Automatischer Umbruch bei schmalen Bildschirmen
- Gleichmäßige Abstände zwischen den Karten
Barrierefreiheit
Tastatur-Navigation:
- Karten können mit Tab-Taste angesteuert werden
- Auswahl mit Leertaste oder Enter-Taste möglich
- Sichtbare Fokus-Anzeige für Tastatur-Nutzer
Screenreader-Unterstützung:
- Korrekte Beschriftung für Screenreader
- Eindeutige IDs für jede Option
- Semantisch korrekte HTML-Struktur
Touch-Optimierung:
- Ausreichend große Zielflächen (mindestens 44px)
- Keine zu kleinen anklickbaren Bereiche
- Optimiert für Finger-Bedienung
Verwendung in verschiedenen Schritten
Erste Schritte:
- Grundlegende Kategorien (z.B. Art der Website)
- Wenige, klar unterscheidbare Optionen
- Einfache, verständliche Bezeichnungen
Detailschritte:
- Spezifischere Auswahlmöglichkeiten
- Mehr Optionen möglich
- Detailliertere Beschreibungen
Anpassung an Inhalte:
- Kartengröße passt sich automatisch an Textlänge an
- Konsistente Darstellung unabhängig vom Inhalt
- Optimale Nutzung des verfügbaren Platzes
Tipps für optimale Nutzung
Für Website-Betreiber:
- Verwende klare, verständliche Bezeichnungen
- Halte die Optionen kurz und prägnant
- Biete nicht zu viele Optionen pro Schritt (maximal 6-8)
- Achte auf logische Reihenfolge der Optionen
Für Besucher:
- Die gesamte Karte ist anklickbar
- Nur eine Auswahl pro Schritt möglich
- Auswahl kann durch Klick auf andere Karte geändert werden
- Mit "Zurück" kann die Auswahl später korrigiert werden
Tipps und Hinweise
- Die Karten sind vollständig responsive und touch-optimiert
- Nur eine Option kann pro Schritt ausgewählt werden
- Die Auswahl wird automatisch gespeichert beim Weiterklicken
- Das Design passt sich automatisch an dein Website-Theme an
- Barrierefreiheit ist vollständig gewährleistet