Interaktive Elemente im Webdesign: Beispiele für eine bessere Nutzererfahrung

Interaktive Elemente im Webdesign sorgen dafür, dass Besucher auf Ihrer Website etwas tun, statt nur zu lesen. In diesem Beitrag zeige ich die funktionalen Elemente, die ich in Projekten am häufigsten einsetze: vom Rechner über den Konfigurator bis zu Tabs und Vergleichstabellen. Zudem erkläre ich, wann sie helfen und wann sie die Seite nur bremsen. Grundlage ist meine Praxis seit 2012; ich biete also einen Entscheidungsrahmen, kein Versprechen.

Was sind interaktive Elemente im Webdesign?

Interaktive Elemente im Webdesign sind Bausteine der Oberfläche, bei denen der Besucher eine Eingabe macht und dafür ein persönliches Ergebnis erhält. Rechner, Produktkonfiguratoren, Tabs, Akkordeons, Filter, Vergleichstools, mehrstufige Formulare und Empfehlungsquiz sind die wichtigsten Beispiele. Ihr gemeinsames Ziel: Entscheidungen leichter machen.

Eine Grenze ziehe ich dabei bewusst. Ein Button, der beim Überfahren die Farbe wechselt, ist zwar auch Interaktion; allerdings gehört das zur Mikroanimation, und die behandle ich hier nicht. Mir geht es um Elemente, die für den Besucher echte Arbeit erledigen. Das heißt: Der Besucher gibt einen Wert ein, wählt eine Option oder setzt einen Filter, und die Website antwortet.

Kurz gesagt beantwortet ein gutes interaktives Element die Frage im Kopf des Besuchers direkt auf der Seite. Somit muss er weder anrufen noch zur Konkurrenz wechseln.

Worin unterscheidet sich Funktion von Dekoration?

Den Unterschied erkennen Sie mit einer einzigen Frage: Verliert der Besucher eine Information oder eine Handlungsmöglichkeit, wenn ich dieses Element entferne? Lautet die Antwort ja, handelt es sich um ein funktionales Element. Lautet sie nein, ist es wahrscheinlich Dekoration.

Zum Beispiel sieht der Besucher ohne den Ratenrechner auf einer Kreditseite keine Monatsrate mehr. Andererseits fehlt meist nichts, wenn Sie den rotierenden Slider auf der Startseite entfernen; oft lädt der erste Bildschirm dann sogar schneller. Deshalb beginne ich Projekte mit einer Liste der Fragen, die wir beantworten wollen, und nicht mit einer Liste von Effekten.

Dekoration halte ich allerdings nicht für wertlos. Dezente Bewegung kann zum Beispiel eine Marke stützen. Trotzdem gebe ich bei knappem Budget immer dem funktionalen Element Vorrang. Den größeren Rahmen dazu beschreibe ich im Beitrag über conversionorientiertes Webdesign.

Woran erkennen Sie, welches Element Ihre Website braucht?

Die verlässlichste Quelle sind die Fragen, die Kunden Ihnen ohnehin stellen. Notieren Sie zunächst die fünf Fragen, die Ihr Vertrieb am häufigsten hört. Prüfen Sie dann bei jeder Frage, ob ein Besucher sie auf der Website allein beantworten könnte.

• Hören Sie oft „Was kostet mich das?“, denken Sie an einen Preisrechner oder Kostenrechner.
• Fragen Kunden „Welches Modell passt zu mir?“, hilft ein Empfehlungsquiz oder ein Vergleichstool.
• Kommt „Liefern Sie das auch in dieser Größe?“, kann ein Konfigurator sinnvoll sein.
• Klagen Besucher „Ich finde mich im Sortiment nicht zurecht“, prüfen Sie Ihre Filter.

Außerdem lohnt ein Blick in die Suchanfragen der Search Console. Suchen mit Wörtern wie „Rechner“, „Vergleich“, „Unterschied“ oder „welche“ zeigen eine Absicht, die eine interaktive Antwort erwartet. Wie Sie diese Daten lesen, zeige ich in meiner Anleitung zur Search Console.

Schließlich sollten Sie das Conversion Ziel festlegen. Welchem Ziel dient das Element: Angebotsanfrage, Anruf oder Warenkorb? Ist das Ziel unklar, bleibt auch das Element ohne Zweck. Dazu passt mein Beitrag Conversion Ziele festlegen.

Wann lohnen sich Rechner auf der Website?

Rechner lohnen sich immer dann, wenn Preis oder Ergebnis von der Person abhängen. Kredite, Versicherungen, Energieverbrauch, Mietrendite, Materialmengen und Werbeerträge sind die typischen Fälle. Konkret gibt der Besucher einige Werte ein und sieht eine Zahl, die zu seiner Situation passt.

Die Stärke entsteht durch den Kontrast. Eine allgemeine Preisliste spricht alle an, beantwortet aber niemandem die eigene Frage. Ein Rechner dagegen beantwortet „Was bedeutet das in meinem Fall?“. Den ROAS Rechner und den Mehrwertsteuer Rechner auf meiner eigenen Website habe ich zum Beispiel so gebaut, dass Besucher eine Aufgabe schnell erledigen.

Beim Entwurf eines Rechners halte ich mich an einige Regeln:

1. Ich halte die Zahl der Felder klein. Drei oder vier Felder reichen für ein erstes Ergebnis.
2. Ich setze sinnvolle Standardwerte, damit niemand vor einem leeren Formular sitzt.
3. Ich zeige das Ergebnis sofort. Ein eigener Button zum Berechnen ist selten nötig.
4. Unter das Ergebnis schreibe ich kurz die Annahmen der Berechnung.
5. Direkt neben das Ergebnis setze ich den nächsten Schritt: Angebot anfragen, Experten fragen, Produkt ansehen.

Ein Hinweis noch: Wer das Ergebnis erst gegen eine E-Mail Adresse zeigt, verspielt meist Vertrauen. Ich zeige das Ergebnis deshalb frei und biete einen ausführlichen Bericht per E-Mail nur als Option an.

Für wen eignet sich ein Produktkonfigurator?

Ein Konfigurator eignet sich für Produkte, die sich aus vielen Optionen zusammensetzen. Möbel, Türen und Fenster, Industrieanlagen, Druckprodukte, Fahrzeugzubehör und Softwarepakete gehören dazu. Der Besucher wählt Maße, Farbe, Material oder Module, und die Website zeigt das Ergebnis und oft auch den Preis.

Der eigentliche Nutzen liegt in der kürzeren Abstimmung vor dem Verkauf. In der Industrie sehe ich häufig denselben Kreislauf: Der Kunde schickt Maße per E-Mail, der Vertrieb antwortet, danach klären beide Seiten fehlende Angaben nach. Ein guter Konfigurator schließt diesen Kreislauf auf einem Bildschirm. Mehr dazu steht in meinem Beitrag über Websites für Industrieunternehmen.

Allerdings ist ein Konfigurator ein teures Element. Die Regeln zwischen den Optionen, etwa welcher Deckel zu welchem Gehäuse passt, müssen sauber in der Software stecken. Sonst bestellen Kunden Produkte, die Sie gar nicht fertigen können. Daher reicht bei schmalem Sortiment oder wenigen Optionen oft ein einfaches Anfrageformular.

Zwei Dinge sind mir beim Konfigurator am wichtigsten. Erstens eine Zusammenfassung der Auswahl bei jedem Schritt. Zweitens das Speichern einer unfertigen Konfiguration. B2B Einkäufer stimmen sich oft mit Kollegen ab, deshalb hilft ein teilbarer Link enorm.

Wann sind Tabs die richtige Wahl?

Tabs passen zu Inhaltsgruppen, die auf derselben Ebene liegen und sich gegenseitig ersetzen. Zum Beispiel eignen sich technische Daten, Einsatzbereiche und Dokumente eines Produkts gut für Tabs. Dasselbe gilt für verschiedene Leistungspakete. Der Besucher möchte also jeweils nur eine Gruppe sehen.

Allerdings schaden Tabs, wenn sie Informationen trennen, die zusammen gelesen werden sollten. Muss der Nutzer zwischen Tabs hin und her springen, um etwas zu vergleichen, haben Sie das falsche Element gewählt. Dann funktioniert eine Vergleichstabelle besser.

Für Tabs gelten bei mir diese praktischen Regeln:

• Ich begrenze Tabs meist auf sechs, denn mehr laufen auf dem Smartphone über.
• Ich formuliere kurze, vorhersehbare Beschriftungen.
• Den aktiven Tab markiere ich nicht nur mit Farbe, sondern zum Beispiel mit einer Unterstreichung.
• Auf dem Smartphone wandle ich Tabs bei Bedarf in ein Akkordeon um.

Die Frage versteckter Inhalte in Tabs und den Zielkonflikt im Design bespreche ich im Beitrag UX und SEO in Einklang bringen, deshalb wiederhole ich das hier nicht. Kurz gesagt: Kommt der Inhalt mit dem HTML der Seite, können Suchmaschinen ihn sehen.

Worauf sollten Sie bei Akkordeons achten?

Ein Akkordeon stapelt Überschriften untereinander und klappt den Inhalt beim Klick auf. Auf langen Seiten zeigt es dem Besucher auf einen Blick die Struktur des Inhalts. Deshalb eignet es sich sehr gut für FAQ, technische Details und lange Beschreibungen auf dem Smartphone.

Trotzdem hat ein Akkordeon einen Preis: Es versteckt Inhalte. Legen Sie Pflichtinformationen wie Lieferzeit oder Rückgabebedingungen hinein, übersehen Besucher sie leichter. Ich halte daher kritische Angaben im offenen Text und lege nur Nebendetails ins Akkordeon.

Technisch ist das Akkordeon Muster des W3C eine solide Referenz. Überschriften sollten echte Buttons sein. Sie sollten Screenreadern melden, ob sie offen oder geschlossen sind, und per Tastatur funktionieren. Der häufigste Fehler, den ich finde, ist eine Überschrift als klickbares div. Dann können Tastaturnutzer das Akkordeon überhaupt nicht öffnen.

Zudem erzwinge ich nicht, dass immer nur ein Bereich offen ist. Besucher möchten manchmal zwei Antworten nebeneinander lesen. Diese kleine Entscheidung spart vor allem auf FAQ Seiten unnötige Klicks.

Wie gestalten Sie Filter und Sortierung richtig?

Filter helfen Besuchern, lange Listen auf Websites mit vielen Produkten oder Beiträgen einzugrenzen. Kategorien im E-Commerce, Immobilienangebote, Stellenbörsen und Blogarchive sind typische Beispiele. Konkret beantwortet ein guter Filter in Sekunden die Frage: Gibt es hier, was ich suche?

Bei Filtern prüfe ich diese Punkte:

• Die Optionen sprechen die Sprache des Besuchers, nicht die interner Artikelnummern.
• Jede Option zeigt, wie viele Treffer sie liefert.
• Kombinationen ohne Treffer sind deaktiviert oder zeigen einen Hinweis.
• Aktive Filter stehen über der Liste und lassen sich mit einem Klick entfernen.
• Auf dem Smartphone öffnet sich der Filterbereich im Vollbild mit einem fixierten Button für die Ergebnisse.

Für SEO sollten Sie außerdem die endlosen URL Kombinationen beachten, die Filter erzeugen. Google schreibt in der Dokumentation zur facettierten Navigation ausdrücklich, dass solche Kombinationen Crawling Ressourcen verschwenden können. Welcher Filter eine indexierbare Seite wird und welcher nur ein Werkzeug bleibt, ist eine Frage der Architektur. Das beschreibe ich im Beitrag zur Kategoriestruktur für große Websites.

Wie verkürzt ein Vergleichstool die Entscheidung?

Ein Vergleichstool stellt zwei oder mehr Optionen in einer Tabelle nebeneinander. Preispakete, technische Produkte und Softwaretarife profitieren am meisten davon. Es macht Unterschiede sichtbar, ohne das Gedächtnis des Besuchers zu belasten.

Seine Stärke liegt also in sichtbaren Unterschieden. Deshalb achte ich beim Bau auf zwei Dinge. Erstens biete ich an, gemeinsame Merkmale auszublenden. Zweitens hebe ich die Zeilen hervor, die sich unterscheiden. In einer Tabelle mit dreißig Zeilen steckt der eigentliche Unterschied oft in fünf.

Die Spalte zum Aufwand beruht auf meiner Praxiserfahrung. Sie hängt von Ihrer Plattform ab und ist keine Garantie.

Wie funktionieren mehrstufige Formulare und Assistenten?

Ein mehrstufiges Formular teilt ein langes Formular in kleine, logische Abschnitte. Jeder Schritt stellt also wenige Fragen, und eine Fortschrittsanzeige zeigt, wie viel noch fehlt. Bei Angeboten, Terminen und Bewerbungen wirkt das oft weniger abschreckend als eine lange Seite.

Allerdings ist Aufteilen nicht immer die Lösung. Mit jedem Schritt wächst auch die Sorge „Wie lange dauert das noch?“. Daher lösche ich zunächst überflüssige Felder. Danach prüfe ich, ob die restlichen Felder überhaupt eine Aufteilung brauchen. Der größte Gewinn entsteht meist durch weniger Fragen, nicht durch mehr Schritte.

In den ersten Schritt setze ich die einfachste und interessanteste Frage. Zum Beispiel zieht „Welche Leistung interessiert Sie?“ mit Antworten per Klick den Besucher in den Ablauf. Kontaktdaten frage ich erst am Ende ab, denn dann hat der Besucher bereits Mühe investiert.

Feldauswahl, Fehlermeldungen und die Dankeseite sind ein eigenes Thema. Diese Punkte behandle ich einzeln im Beitrag Formulare für Termin, Angebot und Demo optimieren.

Was leisten Quiz und Empfehlungstools?

Ein Empfehlungsquiz führt Besucher, die nicht genau wissen, was sie wollen, mit wenigen Fragen zum passenden Produkt. Hautpflege, Sportausrüstung, Softwaretarife und Weiterbildungen sind typische Einsatzfelder. Der Besucher beantwortet die Fragen und erhält am Ende einen persönlichen Vorschlag.

Der Wert liegt in der Übersetzung Ihres Sortiments in die Sprache des Besuchers. Fachbegriffe kennt er nämlich selten, denn er ist kein Experte. Er kann aber sagen „Meine Haut ist trocken“ oder „Ich laufe dreimal pro Woche“. Somit arbeitet das Quiz wie ein Dolmetscher zwischen seinen Worten und Ihren Artikelnummern.

Andererseits verspielt ein schlecht gebautes Quiz schnell Vertrauen. Führt jede Antwort zum selben Produkt, merken Besucher das. Deshalb prüfe ich, ob jedes Ergebnis wirklich zu einem anderen Bedarf passt. Außerdem erkläre ich auf der Ergebnisseite in ein, zwei Sätzen, warum das Quiz diesen Vorschlag macht. Wer die Logik sieht, vertraut der Empfehlung eher.

Zudem liefern die Antworten wertvolle Kundendaten. Welche Bedürfnisse am häufigsten vorkommen, fließt direkt in Ihre Zielgruppenanalyse ein. Natürlich sollte Ihre Datenschutzerklärung diese Erhebung abdecken, bevor Sie Daten sammeln.

Karten, Zeitleisten und Slider für Vorher und Nachher

Diese drei Elemente passen dann zu spezielleren Situationen. Eine interaktive Karte beantwortet bei Unternehmen mit mehreren Standorten oder Händlernetz die Frage „Welcher Standort ist mir am nächsten?“. Kombiniert mit einem Filter, der etwa nur Händler mit Service zeigt, wird sie zum starken Werkzeug.

Eine Zeitleiste kann Firmengeschichte oder die Schritte eines Ablaufs erzählen. Allerdings bin ich hier vorsichtig. Die meisten Zeitleisten auf Seiten „Über uns“ beantworten keine einzige Besucherfrage. Bei Abläufen, etwa in Produktion oder Montage, helfen sie dagegen wirklich.

Ein Slider für Vorher und Nachher wirkt, wenn die Veränderung sichtbar ist. Renovierung, Gartenbau, Zahnästhetik, Bildbearbeitung und Reinigung sind Beispiele. Der Besucher zieht den Regler und sieht den Unterschied selbst. Im Gesundheitsbereich schränkt das Heilmittelwerbegesetz solche Darstellungen allerdings ein; prüfen Sie die Rechtslage vor der Veröffentlichung.

Wie wirken interaktive Elemente im Webdesign auf SEO?

Interaktive Elemente im Webdesign können SEO in zwei Richtungen beeinflussen. Gut umgesetzt helfen sie einer Seite, die Suchabsicht zu erfüllen, und Besuchern, ihre Aufgabe abzuschließen. Schlecht umgesetzt verstecken sie Inhalte vor Suchmaschinen oder bremsen die Seite.

Das häufigste Problem sieht so aus: Wichtige Inhalte kommen erst nach einem Klick per JavaScript vom Server. Dann fehlen sie im ersten HTML, und ihre Erfassung durch den Crawler ist nicht sicher. Auch Googles Hinweise zum Lazy Loading empfehlen, Inhalte ohne Nutzerinteraktion zu laden. Deshalb liefere ich Inhalte von Tabs und Akkordeons mit der Seite aus und ändere nur die Sichtbarkeit.

Bei Werkzeugen wie Rechnern schreibe ich außerdem immer erklärenden Text um das Tool herum. Eine Seite, die nur aus einem Formular besteht, kann einer Suchmaschine schwer vermitteln, worum es geht. Einige Absätze zu Zweck, Formel und Deutung des Ergebnisses helfen Besuchern und Suchmaschinen zugleich. Weitere technische Prüfungen finden Sie in meinen Tipps zum technischen SEO.

Welche Regeln gelten für Barrierefreiheit?

Bei interaktiven Elementen häufen sich Fehler in der Barrierefreiheit. Einen statischen Absatz kann man kaum kaputt machen. Ein selbst gebautes Auswahlmenü oder ein Schieberegler sperrt dagegen schnell Tastatur und Screenreader Nutzer aus.

Meine Checkliste sieht so aus:

1. Jedes interaktive Element funktioniert allein mit der Tastatur, also mit Tabulator und Eingabetaste.
2. Das fokussierte Element hat einen sichtbaren Rahmen.
3. Klickflächen sind groß genug. WCAG 2.2 nennt 24 mal 24 CSS Pixel als Mindestgröße für Zielflächen.
4. Zustände wie offen, geschlossen oder ausgewählt zeigen Sie nicht nur über Farbe, sondern auch mit Text oder Symbol.
5. Bereiche mit wechselndem Ergebnis, etwa die Ausgabe eines Rechners, melden die Änderung an Screenreader.

Für Tabs beschreibt das Tabs Muster des W3C die Navigation mit Pfeiltasten. Geben Sie diese Dokumente Ihrem Entwicklerteam, dann endet die Diskussion „Bei uns funktioniert es“ schnell.

Barrierefreiheit ist kein Gefallen. Ein Formular, das sich mit der Tastatur flüssig bedienen lässt, funktioniert auch für alle Mausnutzer sauberer.

Worauf sollten Sie bei der Performance achten?

Jedes interaktive Element bringt zusätzliches JavaScript auf die Seite. Mit wachsendem JavaScript reagiert die Seite womöglich langsamer auf Klicks. Google misst diese Verzögerung mit Interaction to Next Paint (INP). Laut dem INP Leitfaden auf web.dev gelten 200 Millisekunden oder weniger als gut, mehr als 500 Millisekunden als schlecht.

Daher empfehle ich für interaktive Elemente diese Gewohnheiten:

• Laden Sie keine schwere Bibliothek für einen einzigen Slider; native Browserelemente reichen oft.
• Laden Sie den Code für Werkzeuge weiter unten erst, wenn der Besucher sich ihnen nähert.
• Starten Sie im Rechner nicht bei jedem Tastendruck schwere Berechnungen, sondern mit kurzer Verzögerung.
• Zeigen Sie nach dem Klick sofort eine sichtbare Reaktion und erledigen Sie die schwere Arbeit danach.

Für regelmäßige Messungen folgen Sie den Schritten im Beitrag zum Lighthouse Test. Den Zusammenhang zwischen Tempo, Ranking und Umsatz bespreche ich in Wie beeinflusst die Ladezeit SEO.

Wie messen Sie Interaktionen in GA4?

Ob ein Element wirkt, wissen Sie erst nach der Messung. Die erweiterten Messungen in GA4 erfassen Grundereignisse wie Seitenaufrufe, Scrollen und ausgehende Klicks von selbst. Eigene Interaktionen wie das Öffnen eines Tabs, das Setzen eines Filters oder die Nutzung eines Rechners müssen Sie allerdings selbst als Ereignis definieren.

Ein typisches Ereignisset von mir sieht so aus:

• Rechner: erstes Feld ausgefüllt, Ergebnis angesehen, Klick nach dem Ergebnis.
• Konfigurator: Schritt abgeschlossen, Konfiguration gespeichert, Angebot angefragt.
• Filter: Filter gesetzt, null Treffer gesehen.
• Quiz: Quiz gestartet, Quiz beendet, Klick zum empfohlenen Produkt.

Die eigentliche Frage lautet nicht „Wie viele haben es genutzt?“, sondern „Verhalten sich Nutzer anders als Nichtnutzer?“. Deshalb trenne ich beide Gruppen in zwei Segmente und vergleiche ihre Conversion Rate. Dieser Vergleich beweist keine Ursache, denn Nutzer sind womöglich ohnehin motivierter. Dennoch zeigt er die Richtung. Für eine belastbare Antwort brauchen Sie einen A/B Test.

Außerdem achte ich besonders auf Ereignisse ohne Treffer. Liefern Filter oder Websitesuche oft nichts, suchen Besucher etwas, das Sie nicht anbieten. Dieses Signal kommt oft früher als jeder Vertriebsbericht.

Interaktive Elemente im Webdesign: Welche passen zu welcher Seite?

Eine Zuordnung nach Seitentyp verhindert überflüssige Elemente. Hier ist die grobe Zuordnung aus meinen Projekten; sie ist ein Ausgangspunkt aus der Praxis, keine feste Regel.

• Leistungsseite: Kostenrechner, Paketvergleich und am Ende ein FAQ Akkordeon.
• Produktseite: technische Daten in Tabs, Konfigurator und bei Bedarf Bilder für Vorher und Nachher.
• Kategorieseite: Filter, Sortierung und Vergleich ausgewählter Produkte.
• Kontakt und Angebot: mehrstufiges Formular und Standortkarte.
• Blog und Ratgeber: ein kleiner Rechner oder eine Checkliste, die direkt zum Thema passt.

Die Startseite fehlt bewusst. Dort funktioniert eine klare Wegführung besser als schwere interaktive Elemente im Webdesign: Besucher sollen schnell auf die passende Seite kommen. Haben Sie ein starkes Werkzeug, öffnen Sie auf der Startseite eine Tür dorthin, statt das Werkzeug selbst dorthin zu verlegen.

Ebenso vermeide ich mehrere schwere Elemente auf einer Seite. Konkurrieren Rechner, Konfigurator und Quiz auf einem Bildschirm, weiß der Besucher nicht, wo er anfangen soll.

Häufige Fehler, die Sie vermeiden sollten

Über die Jahre habe ich zudem immer wieder dieselben Fehler gesehen. Die meisten entstehen, weil niemand fragt, warum das Element überhaupt da ist.

• Ein Element einbauen, weil die Konkurrenz eines hat, obwohl Zielgruppe und Fragen anders sind.
• Das Ergebnis eines Rechners hinter einer E-Mail Abfrage verstecken.
• Die wichtigste Information der Seite in einen Tab legen.
• Filter nicht auf dem Smartphone testen; ein Bereich, der am Desktop perfekt wirkt, lässt sich am Handy womöglich nicht schließen.
• Das Element veröffentlichen und nie messen.
• Die Pflege vergessen; ändert sich ein Preis und niemand passt den Rechner an, zeigt er falsche Zahlen.

Der letzte Punkt wiegt am schwersten, trotzdem übersehen Teams ihn oft. Nach der Übergabe erinnert sich niemand an die festen Werte im Tool. Deshalb halte ich Preise und Sätze im Verwaltungsbereich editierbar, statt sie fest im Code zu hinterlegen. Eine breitere Liste typischer Probleme finden Sie im Beitrag UX Fehler, die Umsatz kosten.

Wie planen Sie interaktive Elemente für das Smartphone?

Zunächst: Ein großer Teil Ihrer Besucher kommt vermutlich über das Smartphone. Daher sollten Sie jedes interaktive Element zuerst auf dem kleinen Bildschirm denken. Eine Vergleichstabelle mit fünf Spalten, die am Desktop gut aussieht, wird am Handy schnell zu mühsamem seitlichem Scrollen. Besucher verlieren die Spaltenköpfe und verwechseln, welche Zahl zu welchem Paket gehört.

Mein Ansatz für mobile Geräte ist einfach. Im Vergleich zeige ich zwei Optionen gleichzeitig und lasse die anderen auswählen. Filter verschiebe ich in einen Bereich, der von unten hochfährt. In Rechnern sorge ich dafür, dass Zahlenfelder die Zifferntastatur öffnen; das senkt Tippfehler spürbar.

Zudem lassen sich genaue Werte mit dem Finger auf einem Schieberegler schwer treffen. In solchen Fällen ergänze ich immer ein Feld, in das Besucher den Wert eintippen können. Die Grundsätze dazu erkläre ich im Beitrag Was ist Mobile First Design.

Wo fangen Sie an? Ein Plan in sieben Schritten

Unabhängig vom Budget empfehle ich, mit einem einzigen Element zu beginnen. Die folgende Reihenfolge nutze ich in neuen Projekten.

1. Sammeln Sie die fünf Fragen, die Ihr Vertrieb am häufigsten hört.
2. Wählen Sie die Frage, die ein Besucher auf der Website allein beantworten könnte.
3. Ordnen Sie ihr mit der Tabelle oben das passende Element zu.
4. Veröffentlichen Sie zuerst eine einfache Version, zum Beispiel einen Rechner mit drei Feldern.
5. Legen Sie die Ereignisse in GA4 an und sammeln Sie mindestens einige Wochen Daten.
6. Vergleichen Sie das Verhalten von Nutzern und Nichtnutzern.
7. Wirkt das Element, bauen Sie es aus; wirkt es nicht, entfernen Sie es ohne Zögern.

Der letzte Schritt fällt vielen Unternehmen schwer, denn in das Element flossen Zeit und Budget. Allerdings bremst ein ungenutztes Element weiter die Seite und lenkt ab. Interaktive Elemente im Webdesign verdienen ihren Platz nur mit gemessenen Ergebnissen.

Plugin oder eigene Entwicklung: was ist sinnvoller?

Für einfache Tabs, Akkordeons und Filter reichen die fertigen Komponenten der meisten Content Management Systeme. Testen Sie sie dennoch selbst auf Barrierefreiheit und Tempo. Lassen sie sich per Tastatur öffnen und schließen? Laufen sie auf dem Smartphone über? Wie viel Code fügen sie hinzu? Sehen alle drei Antworten gut aus, brauchen Sie keine eigene Entwicklung.

Andererseits reichen Plugins bei Elementen mit Geschäftslogik, also bei Rechnern und Konfiguratoren, oft nicht aus. Ihre Formel, Ihre Preisregeln und Ihre Produktgrenzen sind individuell. Dann liefert eine eigene Entwicklung das solidere Ergebnis, bringt aber auch eine Pflicht zur Pflege mit.

Bei der Entscheidung stelle ich eine Frage: Stimmt dieses Element in zwei Jahren noch, und wer aktualisiert es? Ist die Antwort unklar, beginne ich mit einer einfacheren Lösung. In meinen Projekten behandle ich diese Elemente im Rahmen des Webdesign Prozesses, zusammen mit einem Messplan. Wenn Sie unsicher sind, welches Element Ihrer Website hilft, schreiben Sie mir über die Kontaktseite.