Preisorientierung beginnt vor der Tabelle
Eine Preistabelle kann nur dann helfen, wenn ihre Begriffe verständlich sind. Wer noch nicht weiß, was ein Modul leistet oder was als Nutzer zählt, kann auch sauber ausgerichtete Spalten nicht sinnvoll vergleichen. Deshalb sollte die Seite zuerst klären, nach welcher Einheit das Angebot aufgebaut ist und welche Kundensituationen die Tarife unterscheiden.
Als Gestaltungsprinzip gilt: Entscheidungen in einer nachvollziehbaren Reihenfolge anbieten. Zuerst die passende Grundauswahl, anschließend relevante Erweiterungen und dann der nächste Schritt. Welche Reihenfolge für ein konkretes Produkt passt, sollte anhand seiner tatsächlichen Vertrags- und Produktlogik entschieden werden.
Was wir bei easyWerkstatt gestaltet haben
Im UX/UI-Projekt für easyWerkstatt standen einheitliche Eingabemasken und eine einfache Bedienung für Werkstätten im Mittelpunkt. Dazu gehörte die Neugestaltung des Buchungs- und Bezahlprozesses: Tarife sowie zusätzliche Funktionen sollten verständlicher auswählbar werden. Ein Designsystem schuf die Grundlage für konsistente Formulare und wiederkehrende Elemente. Zum easyWerkstatt-Projekt.
Das war ein Projekt an der Webapp. Wir stellen es hier als UX-Beispiel vor; daraus wird keine Webflow-Implementierung der Anwendung abgeleitet. Für eine Marketing-Website lässt sich dennoch eine wichtige Gestaltungsaufgabe mitnehmen: Die Tarifentscheidung darf nicht an der Grenze zwischen Preisseite und Anwendung ihre Verständlichkeit verlieren.
Unterschiede priorisieren, Details zugänglich halten
Sind alle Funktionen gleich prominent aufgelistet, müssen Interessenten die entscheidenden Unterschiede selbst suchen. Besser ist eine klare Trennung zwischen gemeinsamem Umfang und tatsächlich tarifentscheidenden Merkmalen. Das bedeutet nicht, Informationen zu verstecken. Es bedeutet, die Reihenfolge an der Entscheidung auszurichten.
Eine sinnvolle Vergleichsstruktur kann mit der passenden Nutzungssituation beginnen und darunter Umfang, Grenzen und Erweiterungen erklären. Begriffe müssen über alle Spalten hinweg gleich verwendet werden. Unterschiedliche Formulierungen für dieselbe Leistung erzeugen einen scheinbaren Unterschied, der fachlich gar nicht existiert.
Zusatzmodule im Zusammenhang erklären
Ein Add-on braucht mehr als einen Namen und einen Schalter. Besucher sollten verstehen, wofür es gedacht ist, mit welchen Tarifen es genutzt werden kann und wie es die Auswahl verändert. Wenn eine Erweiterung Voraussetzungen hat, gehört diese Information an die Auswahl selbst.
Ein hilfreicher Test ist, eine konkrete Beispielaufgabe durchzuspielen: Eine neue Person im Team soll einen Tarif auswählen und ein Modul ergänzen. Kann sie anschließend in eigenen Worten erklären, was sie gewählt hat? Ein formal erfolgreicher Klickweg genügt nicht, wenn das Verständnis fehlt.
Der Übergang zur Buchung gehört zum Design
Buttons wie „Testen“, „Demo buchen“ und „Angebot anfragen“ eröffnen unterschiedliche Wege. Die Beschriftung muss zum tatsächlichen folgenden Schritt passen. Wer einen Tarif auswählt, sollte im nächsten System nicht ohne Orientierung von vorn beginnen müssen.
Wir empfehlen, Übergänge ausdrücklich in den Prototyp aufzunehmen: Einstieg, Tarifauswahl, mögliche Erweiterung, Eingaben und Bestätigung. Auch Fehler- und Zurück-Zustände gehören dazu. So lässt sich früh erkennen, ob eine Auswahl verloren geht oder ob Nutzer eine unerwartete Verpflichtung vermuten könnten.
Mobile Gestaltung braucht eine bewusste Vergleichslogik
Drei Desktop-Spalten lassen sich nicht unverändert auf einen kleinen Bildschirm übertragen. Bloßes Untereinanderstapeln macht zwar jede Karte lesbar, erschwert aber den direkten Vergleich. Eine mobile Variante kann entscheidende Unterschiede separat zeigen oder einen gezielten Vergleich ausgewählter Tarife anbieten.
Welche Variante passt, hängt von der Zahl der Tarife und der Komplexität der Merkmale ab. Wichtig ist, mit realen Textlängen und typischen Geräten zu prüfen. Platzhalter verdecken häufig genau die Umbrüche und Höhenunterschiede, die später die Orientierung erschweren.
In Webflow gestalten, die Produktlogik bewusst anbinden
Eine Webflow-Marketingseite kann Tarife und Erläuterungen strukturiert darstellen. Abrechnung, Konten und verbindliche Buchungslogik müssen als eigener technischer Umfang geplant werden. Eine optisch fertige Tarifkarte ist noch kein funktionierendes Abrechnungssystem.
Für die Pflege empfehlen sich eindeutige Zuständigkeiten: Wer prüft Preise und Leistungsumfang, wer aktualisiert die Website und wer kontrolliert den Übergang ins Buchungssystem? Nach Änderungen sollte derselbe Beispielweg erneut getestet werden.
Nicht nur den Klick auf den Tarif messen
Ein Tarifklick zeigt Interesse, aber noch keine passende Auswahl. Aussagekräftiger wird die Auswertung, wenn der weitere Verlauf und qualitative Rückmeldungen einbezogen werden. Wiederkehrende Fragen zu Modulen, Wechseln oder Leistungsgrenzen helfen bei der Priorisierung.
Aus dem easyWerkstatt-Projekt nennen wir bewusst keine Conversion-Zahl. Der übertragbare Kern liegt in der Gestaltungsarbeit: konsistente Eingaben und eine nachvollziehbare Auswahl über mehrere Schritte hinweg.
{{callout}}
{{cta}}
Häufig gestellte Fragen
Wie viele Tarife sollte eine SaaS-Preisseite zeigen?
Müssen alle Funktionen in die erste Ansicht?
War easyWerkstatt ein Webflow-Projekt?
Kann Webflow die Abrechnung übernehmen?
Wie prüft man eine Tarifauswahl sinnvoll?
