So gestaltest du verständliche Preistabellen

Ein nützlicher Preisvergleich beantwortet drei Fragen, ohne dass jemand einen Taschenrechner oder einen zweiten Browsertab öffnen muss: Welcher Tarif passt zu meiner Arbeit? Was zahle ich tatsächlich? Was passiert, wenn ich ihn auswähle?

Das klingt einfach, bis echte Produktdetails ins Layout kommen. Ein Tarif umfasst fünf Bearbeitungslizenzen, ein anderer rechnet pro Lizenz ab. Bei jährlicher Zahlung erscheint ein monatlicher Vergleichsbetrag. Die wichtigste Funktion steckt unter zwölf identischen Häkchen. Die Karten können ausgefeilt aussehen, während die Entscheidung schwierig bleibt.

Die durchgearbeiteten Beispiele verwenden Fieldnote, einen fiktiven Dienst für Zusammenarbeit.

Definiere die Entscheidung, bevor du Karten zeichnest

Formuliere in einem Satz, welche Entscheidung du erwartest. Für Fieldnote lautet sie: Wähle einen Arbeitsbereichstarif für eine allein arbeitende Forschungsperson, ein kleines Projektteam oder eine Organisation mit zentraler Verwaltung.

Das sind unterschiedliche Arbeitsanforderungen. Sie sind ein nützlicherer Ausgangspunkt als die Annahme, jede Preisseite brauche drei Spalten. Ein Produkt mit einem einzigen kostenpflichtigen Paket braucht vielleicht eine Preiserklärung statt eines Vergleichs. Bei getrennten Produkten kann zunächst eine Produktauswahl nötig sein. Grundsätzlich unterschiedliche Käufe in benachbarte Spalten zu stellen kann Austauschbarkeit suggerieren, die nicht gegeben ist.

Frage die produktverantwortliche Person, welche Fakten die Entscheidung tatsächlich verändern. In unserem Beispiel sind das aktive Projekte, enthaltene Bearbeitungslizenzen, Gastzugang und Verwaltung. Auch der Speicherplatz variiert, bestimmt für die Zielgruppe aber wahrscheinlich nicht die erste Entscheidung. Daraus ergibt sich die Reihenfolge: Zuerst die Eignung klären, danach die zur Prüfung nötigen Details zeigen.

Pflege ein kleines Faktenblatt außerhalb des Entwurfs. Halte für jeden Tarif Name, Zielgruppe, Abrechnungseinheit, enthaltene Menge, Grenze, Upgradebedingung und Kaufweg fest. Ist ein Punkt laut Quelle noch offen, markiere ihn als offen. Ein schöner Entwurf ist ein besonders schlechter Ort, um fehlende Geschäftsregeln versehentlich zu beschließen.

Das Faktenblatt schützt auch vor widersprüchlichen Überarbeitungen. Ändert sich die enthaltene Lizenzzahl, können Tarifzusammenfassung, Vergleichszeile, Rechner und FAQ betroffen sein. Behandle sie als verschiedene Ansichten eines Fakts, nicht als unabhängige Texte, die zufällig dieselbe Zahl enthalten.

Preisvergleiche gestalten: erst eingrenzen, dann vergleichen

Tarifkarten und Funktionsmatrix erfüllen verschiedene Aufgaben. Karten helfen bei der Vorauswahl. Die Matrix prüft diese Auswahl anhand bestimmter Anforderungen. Wer sämtliche Details in die Karten packt, erzeugt lange Spalten mit schwer auffindbaren Unterschieden.

Figmas Empfehlungen zu Preisseiten unterscheiden zwischen knappen Tarifdarstellungen und einer ausführlicheren Vergleichstabelle. Sie empfehlen außerdem, Abrechnungseinheiten direkt am Preis zu nennen. Das ist eine hilfreiche Grundlage für die folgende Struktur. Figmas Empfehlungen zu Preisseiten.

Bei Fieldnote könnte die Solo-Karte eigenständige Projekte beschreiben und anschließend Preis, Grenze für aktive Projekte und Gastzugang zeigen. Die Team-Karte könnte gemeinsame Forschung einordnen und dann Preis, enthaltene Lizenzen und gemeinsame Projektkapazität nennen. Die Organization-Karte könnte zentrale Verwaltung und den Kauf über den Vertrieb erklären. Wenn das Geschäftsmodell ein individuelles Angebot verlangt, muss dort keine erfundene öffentliche Zahl stehen.

Halte die Informationsreihenfolge gleich, auch wenn die Werte variieren. Stehen die Abrechnungsbedingungen einmal unter dem Button und einmal neben dem Preis, müssen Leser die Beziehung suchen. Ausrichtung erklärt Zusammenhänge: Dieselbe Position bedeutet dieselbe Art von Information.

Lies GitHubs Preisseite in zwei Durchgängen

Die GitHub-Preisseite ist ein nützliches reales Beispiel für die Trennung von Tarifübersicht und Detailvergleich. Der Tarifbereich vermittelt Optionen und Kaufwege. Der Funktionsvergleich darunter liefert eine andere Detailtiefe. Die abgebildeten Preise illustrieren diese Seitenstruktur; aktuelle Bedingungen stehen auf der Live-Seite.

Prüfe die beiden Bereiche mit unterschiedlichen Fragen. Erkennst du in der Übersicht eine plausible Option für dein Team? Kannst du in der Matrix die eine Anforderung prüfen, die sie ausschließen würde? Diese Trennung hilft, weil eine einführende Karte und eine Beschaffungsprüfung nicht dieselbe Informationsdichte brauchen. Eine Karte mit jeder Matrixzeile ist keine Zusammenfassung mehr.

Bitte einen potenziellen Käufer, einen passenden Tarif zu wählen und die Verpflichtung zu erklären. Diese Antworten zeigen, was das Layout vermittelt.

Berechne den Betrag, für den sich die lesende Person entscheidet

Für ein separates Lizenzbeispiel nehmen wir SeatMeter, einen fiktiven Dienst. Ein Tarif wird mit 12 $ pro Bearbeitungslizenz und Monat beworben, jährlich abgerechnet und mit mindestens fünf Lizenzen. Ein dreiköpfiges Team zahlt deshalb nicht zwangsläufig 36 $ im Monat. Unter diesen Bedingungen beträgt die jährliche Mindestverpflichtung 12 $ × 5 × 12 = 720 $.

Hier scheitern Preisgestaltungen oft, obwohl jede einzelne Zahl stimmt. Die visuelle Hierarchie macht den monatlichen Vergleichsbetrag einprägsam und die tatsächliche Zahlung fast unsichtbar. Frage jemanden, welche Belastung heute erwartet wird. Nennt die Person den Satz statt des Rechnungsbetrags, löst eine größere Darstellung des Satzes das Missverständnis nicht.

Lass ein Spar-Badge die Vergleichsbasis nicht verdecken. Spart die jährliche Option zwanzig Prozent gegenüber zwölf monatlichen Zahlungen, sage, welcher Monatspreis dafür verwendet wurde. Gilt eine Aktion nur für den ersten Zeitraum, gehört diese Bedingung nah an den Aktionsbetrag. Ein dauerhaft wirkendes Badge an einem befristeten Angebot erzeugt Erwartungen, die eine Fußnote womöglich nicht mehr korrigiert.

Dasselbe gilt für enthaltene Kapazitäten. „Fünf Bearbeitungslizenzen enthalten“ und „mindestens fünf kostenpflichtige Bearbeitungslizenzen“ können dieselbe anfängliche Teamgröße ergeben und trotzdem unterschiedliche Geschäftsregeln beschreiben. Halte die tatsächliche Regel im Faktenblatt fest und verwende in Karte, Matrix und Checkout dieselbe Bedeutung.

Arbeitsbereichspreise folgen einer anderen Rechnung

Halte Betrag, Währung, Abrechnungseinheit und Verpflichtung zusammen. Bei Jahresabos mit monatlichem Vergleichsbetrag gehört die jährliche Gesamtzahlung in dieselbe visuelle Gruppe.

Angenommen, Fieldnote Team kostet bei monatlicher Zahlung 30 $ pro Arbeitsbereich und Monat. Das separate Jahresangebot für Arbeitsbereiche kostet 288 $ pro Jahr, entsprechend 24 $ monatlich. Eine klare Jahreskarte kann den monatlichen Vergleichswert als Hauptzahl zeigen und unmittelbar erklären, dass jährlich 288 $ abgerechnet werden. Besucher sollten nicht erschließen müssen, ob zwölf Zahlungen zu 24 $ verfügbar sind.

Die Unterscheidung zwischen Arbeitsbereichspreis und Lizenzpreis braucht dieselbe Sorgfalt. „24 $ pro Monat“ ist unvollständig, wenn ein sechsköpfiges Team tatsächlich das Sechsfache zahlt. Zeige, ob der Preis eine feste Zahl an Bearbeitungslizenzen enthält, für jede Lizenz gilt oder ab einer Mindestmenge beginnt. Die Mengenannahme gehört zum Preis, nicht in einen entfernten Tooltip.

Erkläre bei nutzungsabhängigen Preisen zunächst die Grenze, bevor du einen Rechner ergänzt. Ein Rechner ohne sichtbare Basis kann einen unsicheren Preis präzise erscheinen lassen. Sage, welche Nutzung enthalten ist, was zusätzliche Kosten auslöst und ob die Schätzung optionale Positionen umfasst. Gibt es keinen stabilen Satz für eine Rechnung, erkläre stattdessen, welche Angaben der Vertrieb braucht.

Mische nicht mehrere Einheiten in einer Vergleichszeile. Eine Zelle mit „10“ und eine mit „Unbegrenzt“ bleiben mehrdeutig, solange nicht klar ist, was gezählt wird und für welchen Zeitraum. „Aktive Projekte“ ist etwas anderes als „Pro Monat erstellte Projekte“. Das kann die Kaufentscheidung verändern, selbst wenn die Zahlen gleich aussehen.

Behandle den Abrechnungsschalter als Änderung der Bedingungen

Beim Wechsel zwischen monatlicher und jährlicher Zahlung müssen alle betroffenen Angaben gemeinsam aktualisiert werden. Es geht um mehr als eine Animation der größten Zahl. Jahresgesamtbetrag, Sparhinweis, Verpflichtung und Ziel der Kaufaktion müssen zum gewählten Zustand passen.

Im Fieldnote-Beispiel ergeben zwölf monatliche Zahlungen 360 $, die jährliche Zahlung kostet 288 $. Die Differenz beträgt 72 $ beziehungsweise zwanzig Prozent des Gesamtbetrags bei monatlicher Zahlung. Wird diese Ersparnis gezeigt, muss ihre Basis klar bleiben. Ein Vergleich mit irgendeinem anderen Aktionspreis würde etwas anderes aussagen.

Die aktive Wahl braucht eine eindeutige Beschriftung und Darstellung. Zwei Wörter neben einem kleinen Schalter können offenlassen, ob die linke Beschriftung den aktuellen Wert oder die Alternative meint. Eine segmentierte Auswahl mit sichtbarer Markierung ist in einem Prototyp oft leichter verständlich. Unabhängig von der Gestaltung muss der Zustand auch bei Tastaturbedienung erkennbar sein und darf nicht allein von Farbe abhängen.

Wechsle die Einstellung, während du einen weiter unten stehenden Tarif betrachtest. Ist weiterhin klar, welcher Abrechnungszeitraum gilt? Eine wiederholte Beschriftung neben einem langen Vergleich kann hilfreicher sein als ein weit oben verschwundener Schalter. Wiederholung ist gerechtfertigt, wenn der Preis dadurch seinen Kontext behält.

Lege auch fest, was stabil bleibt. Tarifreihenfolge und Funktionsgrenzen sollten sich nicht allein wegen einer anderen Zahlungsfrequenz ändern, sofern sich das tatsächliche Angebot nicht ändert. Unerwartete Umordnungen erschweren den Vergleich und können wirken, als habe sich der Dienst unter den Augen der lesenden Person verändert.

Gestalte Zeilen, die sich ehrlich vergleichen lassen

Jede Zeile sollte eine Frage stellen und sie für jeden Tarif beantworten. „Projektkapazität“ kann eine Zahl enthalten. „Gastzugang“ kann mit „Enthalten“ oder „Nicht enthalten“ beantwortet werden. „Support“ braucht eine Beschreibung, wenn ein Tarif E-Mail-Hilfe und ein anderer eine feste Kontaktperson bietet. Ein Häkchen allein vermittelt diese Unterschiede nicht.

Verwende innerhalb einer Zeile dieselbe Einheit und Genauigkeit. Steht bei Solo „Drei aktive Projekte“, sollte bei Team nicht „Viel Platz zum Wachsen“ stehen. Der zweite Ausdruck weicht dem Vergleich aus, für den die Tabelle da ist. Werbesprache gehört in die umgebende Erklärung, die tatsächliche Grenze in die Zelle.

Unterscheide Fehlen von Ungewissheit. Ein Strich kann nicht verfügbar, nicht zutreffend, nicht offengelegt oder null bedeuten. Verwende eindeutige Wörter, wenn der Unterschied zählt. Nutzt du ein kompaktes Symbol, definiere seine Bedeutung und mache sie auch assistiven Technologien zugänglich. Käufer sollten nie raten müssen, ob eine leere Zelle eine Einschränkung oder ein Veröffentlichungsfehler ist.

Auch Funktionsnamen müssen stabil bleiben. Heißt dieselbe Fähigkeit im ersten Tarif „Gemeinsame Ordner“ und im zweiten „Kollaborative Bereiche“, kann ein Upgrade entstehen, das es nicht gibt. Ändert sich die Fähigkeit tatsächlich, beschreibe die Änderung: mehr Mitglieder, längerer Verlauf, andere Berechtigungen oder eine andere Servicezusage.

Gruppiere Zeilen nach erkennbaren Fragen. Fieldnote könnte Abschnitte für Projektarbeit, Zusammenarbeit und Verwaltung verwenden. Die Gruppen sollen beim Finden helfen, nicht die interne Zuständigkeitsstruktur des Produktteams abbilden. Denken Käufer an geteilten Zugriff, muss dieser Weg offensichtlich sein, auch wenn mehrere Entwicklungsteams die zugrunde liegenden Funktionen verantworten.

Sei vorsichtig mit „Alles aus dem vorherigen Tarif“. Das verkürzt eine Karte, zwingt aber zum Nachsehen, um einen höheren Tarif zu verstehen. In einer knappen Übersicht kann das vertretbar sein. In einer Matrix ist der wiederholte tatsächliche Wert meist nützlicher, weil jede Zeile unabhängig vergleichbar bleibt.

Begründe Empfehlungen

Ein hervorgehobener Tarif sollte seine Eignung erklären. „Für Teams, die Forschung über mehrere Projekte teilen“ liefert einen Grund, Fieldnote Team zu erwägen. „Bestes Preis-Leistungs-Verhältnis“ verlangt ein Urteil zu übernehmen, ohne seine Grundlage zu kennen. „Am beliebtesten“ ist eine überprüfbare Tatsachenbehauptung und braucht Belege. Es ist kein dekorativer Ersatz für eine Empfehlung.

Setze Hervorhebung als Ausgangspunkt ein und halte Alternativen lesbar. Ein stärkerer Rahmen, eine kleine Beschriftung oder eine zurückhaltende Flächenänderung können reichen. Die mittlere Karte so stark zu vergrößern, dass die übrigen Bedingungen schlecht zu überfliegen sind, ist ein schlechter Tausch. Die hervorgehobene Option muss weiterhin mit anderen vergleichbar sein.

Prüfe die Seite ohne diese Hervorhebung. Wird das Angebot dann unverständlich, hat die Betonung zu viel Erklärungsarbeit übernommen. Tarifnamen, Zielgruppenbeschreibungen und sichtbare Unterschiede sollten bereits eine vernünftige Auswahl ermöglichen, bevor Farbe eine Priorität ergänzt.

Erhalte den Vergleich auf schmalen Bildschirmen

Tarifkarten untereinander zu stellen ist einfach. Den Vergleich zu erhalten ist schwieriger. Belegt jeder Tarif einen eigenen Bildschirm, müssen Menschen im Gedächtnis behalten, ob eine Funktion im ersten enthalten war. Ein sauberes vertikales Layout ist nicht automatisch ein einfacher Vergleich.

Bei wenigen Tarifen sollte die Funktionsreihenfolge in den gestapelten Karten gleich bleiben. Für eine längere Matrix kommen ein schmaler Vergleich mit zwei wählbaren Tarifen oder eine horizontal scrollbare Tabelle mit klarer Orientierung infrage. Welche Variante passt, hängt davon ab, ob Besucher hauptsächlich einen Tarif lesen oder bestimmte Werte mehrerer Tarife vergleichen.

Ein Akkordeon kann die anfängliche Länge verringern, versteckt aber Informationen. Wesentliche Einschränkungen und Zahlungsbedingungen gehören nicht in eingeklappte Bereiche. Müssen alle Tarife aufgeklappt werden, um Gastzugang zu finden, verteilt das Akkordeon denselben Aufwand lediglich auf mehr Interaktionen.

Bei einer echten Datentabelle müssen die strukturellen Beziehungen erhalten bleiben. Das Tabellentutorial des W3C erklärt die Verknüpfung von Kopf- und Datenzellen, damit diese Beziehungen auch assistiven Technologien zur Verfügung stehen. Ein Raster visuell ausgerichteter Texte ist keine gleichwertige Umsetzung. W3C-Tutorial zu barrierefreien Tabellen.

Teste die schmale Version mit einem konkreten Vergleich: Finde die günstigste Option für sechs Bearbeitungslizenzen und zwanzig aktive Projekte. Diese erfundenen Anforderungen zeigen, ob das Layout die entscheidungsrelevanten Informationen erhält. Dass die Seite in den Viewport passt, beantwortet diese Frage nicht.

Stimme die Aktion auf den nächsten Schritt ab

Der Button sollte beschreiben, welche unmittelbare Handlung tatsächlich möglich ist. Einen Test beginnen, einen kostenlosen Arbeitsbereich erstellen, ein bezahltes Abo wählen und den Vertrieb kontaktieren sind unterschiedliche Schritte. Überall „Loslegen“ zu schreiben erzeugt eine einheitliche Buttonreihe, lässt aber die Interaktion offen.

Platziere wichtige Bedingungen bei der betreffenden Aktion. Braucht ein Test eine Zahlungsmethode, sage das vor dem Weitergehen. Beginnt ein Organisationstarif mit einem Gespräch, vermeide eine Beschriftung, die einen sofortigen Checkout verspricht. Es geht um eine zutreffende Erwartung, nicht um die vollständige Kauferklärung innerhalb der Karte.

Denke auch an Personen mit bestehendem Abo. Eine allgemeine öffentliche Preistabelle kann sie in eine doppelte Registrierung führen. Die spätere Produktumsetzung braucht möglicherweise einen Aktueller-Tarif-Zustand oder einen Weg zu den Kontoeinstellungen. Halte diesen Zustand fest, auch wenn der Prototyp keine Kontologik umsetzt. Sonst wird nur die erstmalige Nutzung geprüft.

Stelle nicht jede nicht verfügbare Wahl durch einen deaktivierten Button dar. Hängt die Berechtigung von einer Kontobedingung ab, erkläre diese. Ein deaktiviertes Bedienelement ohne Erklärung lässt nicht erkennen, ob eine Grenze, ein vorübergehender Fehler oder eine beabsichtigte Regel vorliegt.

Die aufgezeichneten GitHub-Karten verdeutlichen den Unterschied. Team bietet „Continue with Team“ an. Enterprise bietet sowohl einen Test als auch den Kontakt zum Vertrieb. Die zweite Karte enthält zwei Wege in denselben Tarif, nicht zwei seiner Funktionen. Folge bei der Prüfung jedem Weg und untersuche, welche Angaben als Nächstes nötig sind. Eine konsistente Buttonfarbe kann den visuellen Rhythmus erhalten, während die Beschriftungen den nächsten Schritt konkret benennen.

Prüfe einen Entwurf mit Entscheidungsaufgaben

Eine visuelle Prüfung wird nützlicher, wenn jede Person eine Frage beantworten soll. Gib einer Person das Soloszenario und einer anderen das Szenario eines wachsenden Teams. Bitte beide, einen Tarif zu wählen und die ausschlaggebenden Fakten zu nennen. Ihre Begründungen machen Mehrdeutigkeiten sichtbar, die eine offene Bitte um Feedback leicht übersieht.

Bei Fieldnote könnte eine Aufgabe eine Forschungsperson mit zwei Projekten und mehreren Gästen betreffen. Eine zweite könnte sechs Bearbeitungslizenzen verlangen, eine dritte organisationsweite Verwaltung. Nimm ein Szenario auf, das den hervorgehobenen Tarif ausschließen sollte. Sonst prüft ihr nur die Wirkung der Betonung, nicht, ob der Vergleich auch eine andere Entscheidung unterstützt.

Lass anschließend jede Person den sofort fälligen Betrag und die Zahlungsverpflichtung nennen. Eine falsche Antwort ist ein Problem, selbst wenn die richtigen Wörter irgendwo auf der Seite stehen. Verschiebe oder überarbeite die Erklärung anhand des Missverständnisses, statt automatisch eine weitere Fußnote anzufügen.

Prüfe auch bewusst schwierige Werte: einen langen Funktionsnamen, eine nicht verfügbare Funktion oder einen verhandelten Preis. Das sind keine seltenen Layoutausnahmen, die bis zur Entwicklung warten können. Sie bestimmen, ob die Vergleichsstruktur das tatsächliche Angebot darstellen kann.

In OpenDesign kann eine HTML-Vorschau diese visuelle Prüfung unterstützen. Kommentare können eine irreführende Preisgruppe oder eine verrutschende Vergleichszeile benennen. Gezielte Text- und Stiländerungen verbessern die Darstellung. Gib freigegebene Tariffakten als Gestaltungskontext mit. Berechnungen, Kontoberechtigung und Checkoutverhalten prüfst du im tatsächlich umgesetzten Ablauf.

Vergleiche vor der Übergabe jeden sichtbaren Preis und jede Grenze mit dem Faktenblatt. Prüfe beide Zahlungszustände, jede Kaufaktion und das schmale Layout. Die Tabelle ist bereit, wenn die lesende Person eine passende Wahl und deren Bedingungen richtig erklären kann, auch dann, wenn der hervorgehobene Tarif nicht passt.