coastdigitalgroup/coastai-skills

Preisgestaltungs-UI-System (Pricing Table UI System)

Zweck

Das Preisgestaltungs-UI-System bietet eine Methodik für die visuelle und strukturelle Organisation von Preistarifen. Es stellt sicher, dass Nutzer Pläne einfach vergleichen, Wertunterschiede verstehen und die passende Option auswählen können, ohne kognitiv überfordert zu werden. Dieses System konzentriert sich auf die räumliche Anordnung der Tarife, die Hierarchie der Funktionen und die interaktiven Möglichkeiten (wie Abrechnungswechsel), die die Kaufentscheidung unterstützen.

Anwendungsfälle

• Gestaltung von Abonnement-Tarifrastern für SaaS-Anwendungen.
• Strukturierung mehrstufiger Dienstleistungsangebote (z. B. Agenturpakete).
• Erstellung von Vergleichsmatrizen für physische Produktbündel.
• Standardisierung von Preislayouts in einem Unternehmen mit mehreren Produkten.
• Implementierung responsiver Preiskarten, die auch auf mobilen Geräten den Kontext wahren.

Wann NICHT zu verwenden

• Einprodukt-E-Commerce: Verwende product-page-optimization für einzelne Artikel ohne konkurrierende Tarife.
• Nur-Unternehmens-Angebote: Wenn jeder Preis „Kontaktieren Sie uns“ ist, fokussiere auf das Design des Lead-Erfassungsformulars.
• Reine Datenvergleiche: Für den Vergleich technischer Spezifikationen von 10+ Elementen verwende data-table-ui-system.
• Dynamische/Auktionspreise: Wenn der Preis durch Gebote oder Echtzeit-Marktschwankungen bestimmt wird.

Eingaben

1. Tarifstufen: Die Namen, Preise und Zielgruppen für jede Stufe.
2. Funktionsinventar: Eine umfassende Liste der Funktionen, kategorisiert nach Priorität.
3. Abrechnungszyklen: Optionen für monatliche vs. jährliche Abrechnung und zugehörige Rabatte.
4. Primäres Ziel: Welcher Tarif ist die „Goldlöckchen“- oder „Bestwert“-Option?
5. Markenstil-Token: Abstands-, Typografie- und Farbskalen aus dem übergeordneten System.

Ausgaben

1. Preisraster-Anatomie: Definition der Tarifkarte (Kopfzeile, Preis, Funktionen, CTA).
2. Abrechnungswechsel-Spezifikation: Design für das Umschalten zwischen verschiedenen Zahlungsbedingungen.
3. Funktionsvergleichslogik: Regeln dafür, wie Funktionen über Tarife hinweg angezeigt, ausgeblendet oder zusammengefasst werden.
4. Tarif-Hervorhebungsstrategie: Visuelle Methoden zur Betonung des empfohlenen Tarifs.
5. Responsive Stapelplan: Wie das Raster an mobile Viewports angepasst wird.

Arbeitsablauf

1. Struktur der Tarifkarte festlegen

Wende das visual-hierarchy-system auf die einzelne Preiskarte an:

• Kopfzeile: Tarifname und ein kurzes Wertversprechen (z. B. „Für wachsende Teams“).
• Preisblock: Die Währung, der Betrag und das Intervall (z. B. „/Monat“). Stelle sicher, dass der Betrag das hervorstechendste Element ist.
• Funktionsliste: Die 5-7 wichtigsten Funktionen.
• CTA: Ein kontrastreicher Button zur Auswahl des Tarifs.

2. Den „Anker“-Tarif gestalten (Hervorhebung)

Identifiziere den primären Tarif und mache ihn visuell dominant:

• Höhe: Verwende einen subtilen Schatten oder Rahmen, um ihn „herausstechen“ zu lassen.
• Farbe: Verwende eine Markenfarbe für die Kopfzeile oder den CTA-Button.
• Abzeichen: Füge ein „Am beliebtesten“- oder „Bestpreis“-Band/Abzeichen hinzu.
• Skalierung: Erhöhe die Höhe der Karte leicht im Vergleich zu den Nachbarn.

3. Die Abrechnungslogik festlegen

Gestalte den Mechanismus zum Wechsel zwischen Abrechnungszyklen (z. B. Monatlich vs. Jährlich):

• Der Schalter: Verwende einen klaren Kippschalter oder eine Registerkarten-Oberfläche.
• Rabattsignalisierung: Weise deutlich auf die Ersparnis hin (z. B. „20 % sparen“) in der Nähe der jährlichen Option.
• Kontextbezogene Preise: Stelle sicher, dass die Preise in den Karten sofort aktualisiert werden, wenn der Schalter umgelegt wird.

4. Funktionsvergleich verwalten

Organisiere Funktionen, um die „Textwand“ zu vermeiden:

• Primäre Funktionen: Liste die wichtigsten Werttreiber ganz oben auf.
• Funktionsgruppierung: Gruppiere ähnliche Funktionen (z. B. „Support“, „Sicherheit“), wenn die Liste lang ist.
• Häkchen vs. Text: Verwende Symbole für binäre Funktionen (Ja/Nein) und Text für Grenzen (z. B. „Bis zu 10 Benutzer“).
• „Alle anzeigen“-Link: Bei komplexen Tarifen halte die Karte kurz und biete unten einen Link zu einer vollständigen Vergleichstabelle an.

5. Responsive Stapelung definieren

Lege fest, wie das Raster auf kleineren Bildschirmen zusammenbricht:

• Horizontales Scrollen vs. vertikaler Stapel: Auf Mobilgeräten Tarife vertikal stapeln, um die Lesbarkeit zu gewährleisten.
• Klebende Kopfzeile: Bei vertikalen Stapeln erwäge eine klebrige Leiste, die Tarifname und Preis sichtbar hält, während der Nutzer durch die Funktionen scrollt.
• Tarifvergleichsmodus: Auf Mobilgeräten den Nutzern ermöglichen, zwischen Tarifen zu „wischen“, um sie horizontal zu vergleichen, falls ein vertikaler Stapel zu lang ist.
• Container-Abfragen: Bevorzuge Container-Abfragen gegenüber Viewport-Breakpoints für die Tarifkarte selbst, da Preistabellen oft in Kontexte mit unterschiedlichen Breiten eingebettet sind (z. B. ein Homepage-Abschnitt vs. eine vollständige Preisseite).

Entscheidungsregeln

• Die Macht der Drei: Drei Tarife (z. B. Basic, Pro, Enterprise) sind die optimale Anzahl, um die Entscheidungslähmung zu verringern.
• Preisdominanz: Der Preis sollte das zweitprominenteste Element nach dem „Bestwert“-Abzeichen sein.
• Konsistente CTAs: Alle Tarife sollten einen CTA auf derselben vertikalen Position haben (normalerweise am unteren Ende der Karte ausgerichtet).
• Die Regel „Keine versteckten Bedingungen“: Zeige die Abrechnungshäufigkeit immer in der Nähe des Preises an (z. B. „29 €/Monat, jährlich abgerechnet“).
• Binäre Klarheit: Verwende klare, kontrastreiche Häkchen für enthaltene Funktionen; verwende ein dezent graues „X“ oder lasse ausgeschlossene Funktionen einfach weg, um negative visuelle Störungen zu vermeiden.

Einschränkungen

• Barrierefreiheit: Schalter müssen per Tastatur zugänglich sein und ihren Zustand über aria-checked oder aria-pressed anzeigen. Preistexte müssen das WCAG-AA-Kontrastverhältnis (4,5:1) erfüllen, und alle interaktiven Ziele (Schalter, CTA-Buttons) müssen die WCAG-2.2-Mindestzielgröße von 24x24px erfüllen (2.5.8).
• Responsivität: Preiskarten dürfen niemals eine feste Breite haben; sie sollten innerhalb des responsive-grid-system fließend sein.
• Währungsunterstützung: Gestalte für unterschiedliche Währungssymbollängen (z. B. „10 €“ vs. „1.000 kr“) und verwende logische CSS-Eigenschaften (margin-inline, padding-inline), damit sich Layouts korrekt an RTL-Sprachumgebungen anpassen.

Häufige Fehlermuster

• Funktionsüberfrachtung: Auflistung von 20+ Funktionen in einer einzigen Karte, was das Scannen unmöglich macht.
• Unsichtbare Schalter: Den Abrechnungswechsel so klein machen, dass Nutzer nicht erkennen, dass sie einen Rabatt erhalten können.
• Der „schwebende CTA“: Buttons, die nicht über Karten hinweg ausgerichtet sind, wodurch das Raster unordentlich aussieht.
• Mehrdeutige Preisangaben: Nicht klarstellen, ob ein Preis pro Benutzer oder pauschal ist, bis zur Kaufabwicklung.
• Fehlende Tarifdifferenzierung: Tarife, die so ähnlich aussehen, dass der Nutzer nicht weiß, welchen er wählen soll.

Validierungskriterien

• Eine klare visuelle Hierarchie zwischen den Tarifen ist vorhanden (der empfohlene Tarif wird hervorgehoben).
• Preise sind nach den Tarifnamen das prominenteste Element.
• Der Abrechnungswechsel ist deutlich sichtbar und aktualisiert die Preise sofort.
• Die Funktionen sind auf die 5-7 wichtigsten pro Karte beschränkt.
• CTAs sind horizontal über alle Karten im Raster ausgerichtet.
• Die mobile Ansicht stapelt Karten vertikal oder bietet ein zugängliches Wischmuster.
• Alle interaktiven Elemente (Schalter, Buttons) sind per Tastatur zugänglich.
• Die Kontrastverhältnisse für Preise und Abzeichen erfüllen WCAG AA.