Mobile SaaS Preisseiten optimieren: 7 Schritte für bessere Conversion

Eine SaaS-Preisseite, die auf dem Smartphone konvertiert, braucht drei Dinge: vertikal gestapelte Preiskarten statt horizontaler Tabellen, eine klare Feature-Hierarchie, die zeigt, was relevant ist, und Touch-freundliche Call-to-Action-Buttons ohne Scroll-Aufwand. Wer die Desktop-Version einfach responsiv macht, repariert das Symptom, nicht das Problem.

Das Wichtigste in Kürze

• Preiskarten vertikal stapeln: Jeder Plan wird zur eigenständigen Karte, nicht zur Spalte in einer Tabelle.
• Pro Plan maximal fünf Features in der Standardansicht zeigen – den Rest per Toggle ausklappen lassen.
• Touch-Targets auf mindestens 44 × 44 Pixel bringen; das ist die Mindestgröße der iOS Human Interface Guidelines und von Android Material Design.
• Den empfohlenen Plan auf Mobile strukturell hervorheben: erste Position, deutlicherer Kontrast, mindestens ein sozialer Nachweis direkt in der Karte.
• Im DACH-Raum Cookie-Banner und Pflichtangaben so platzieren, dass sie den Preisbereich auf dem ersten Bildschirm nicht überlagern.

Warum Desktop-Preisseiten auf Mobile systematisch scheitern

Die meisten SaaS-Preisseiten entstehen mit dem Blick auf einen großen Bildschirm. Drei oder vier Preispläne stehen nebeneinander, eine Tabelle mit Häkchen zeigt auf einen Blick, wer was bekommt. Das funktioniert auf 1280 Pixel Breite gut. Auf einem 390 Pixel breiten Smartphone bricht dieselbe Ansicht strukturell zusammen.

Das Ergebnis sind horizontale Scrollbalken, unleserlich kleine Schrift und Call-to-Action-Buttons, die je nach Zoom-Level außerhalb des Viewports oder direkt übereinander liegen. Nutzer, die eine Preisseite auf dem Handy öffnen, entscheiden schnell: Entweder sie finden in wenigen Sekunden, was sie suchen, oder sie verlassen die Seite. Eine Preisseite, die horizontales Scrollen erzwingt, verliert genau in diesem Moment.

Das Problem ist strukturell, nicht kosmetisch. Eine responsiv geschrumpfte Desktop-Preisseite löst die UX-Fragen nicht. Sie verkleinert sie. Mobile-first bedeutet: mit dem mobilen Layout beginnen und die Desktop-Ansicht davon ableiten, nicht umgekehrt. Wer jetzt die Desktop-Seite fertig hat und nachrüstet, muss trotzdem diesen Weg gedanklich gehen – sonst bleiben die strukturellen Schwächen erhalten.

Ein besonders häufiges Symptom dieser Desktop-Denke ist der Abrechnungs-Toggle: Ein Element oben auf der Seite, mit dem Nutzer zwischen monatlicher und jährlicher Zahlung wechseln. Auf Desktop ist dieser Toggle beim Betrachten aller Pläne sichtbar. Auf Mobile scrollt der Nutzer an ihm vorbei und sieht beim Rest der Seite ausschließlich den monatlichen Preis – der jährliche Rabatt ist damit unsichtbar. Das ist ein handfester Conversion-Verlust, der durch eine einfache strukturelle Entscheidung entsteht.

Warum Preiskarten funktionieren und Tabellen auf Mobile versagen

Das Grundprinzip einer mobilen Preisseite ist die Preiskarte. Statt Pläne nebeneinander in Spalten zu zeigen, bekommt jeder Plan eine eigene Karte, die vertikal untereinander gestapelt wird. Der Nutzer scrollt von oben nach unten durch die Pläne, nicht von links nach rechts.

Die Karte selbst folgt einer festen Inhaltsreihenfolge: oben der Planname und ein kurzer Satz, für wen dieser Plan passt. Darunter der Preis mit Währung und Abrechnungszeitraum. Dann drei bis fünf der wichtigsten Features, formuliert als vollständige Aussagen. Ganz unten der CTA-Button, der die volle Kartenbreite einnimmt und mindestens 44 Pixel hoch ist. Diese Reihenfolge ist nicht willkürlich: Sie spiegelt die Entscheidungsreihenfolge des Nutzers wider. Planname und Zielgruppe kommen zuerst, weil sie bestimmen, ob die Karte überhaupt relevant ist.

Die Frage, welcher Plan oben stehen soll, ist keine Designfrage, sondern eine Geschäftsfrage. Wenn dein Einstiegsplan der häufigste Ausgangspunkt ist, kommt er zuerst. Wenn dein Professional-Plan das wirtschaftliche Herzstück ist und Bestandskunden selten churnen, bekommt er die erste Position. Teste beide Varianten, bevor du dauerhaft entscheidest.

Die Struktur einer mobilen Preiskarte im Detail

Jede Preiskarte sollte diese Elemente enthalten, in dieser Reihenfolge:

1. Planname und Zielgruppe: Zum Beispiel "Starter – für Teams bis zehn Personen." Ein Satz, keine Bullet-Liste. Wer zuerst wissen möchte, ob der Plan zu ihm passt, findet die Antwort hier.
2. Preis mit Zeitraum: "49 Euro pro Monat, bei jährlicher Abrechnung." Währung und Abrechnungsrhythmus explizit nennen. Auf Mobile gibt es keine Fußnote, die das im Nachhinein klärt.
3. Top-Features: Maximal fünf Punkte als ul, vollständige Aussagen. "Unbegrenzte E-Mail-Kontakte" statt nur "Kontakte". Häkchen-Tabellen funktionieren auf Mobile nicht, weil die Spalten-Logik verloren geht, wenn du vertikal durch eine einzelne Liste scrollst.
4. Toggle für weitere Features: Ein "Alle Features anzeigen"-Element, das den Rest aufklappt. Das hält die Karte kompakt, ohne Information zu verstecken.
5. CTA-Button: Ganz unten, volle Kartenbreite, mindestens 44 Pixel hoch. Text wie "Jetzt starten" oder "Kostenlos testen". Kein Nebensatz im Button-Text.

Feature-Hierarchie: Was du zeigst und was du verbirgst

Der häufigste Fehler auf mobilen Preisseiten ist nicht das Layout, sondern die Menge. Wenn ein Preisplan 40 Features enthält und alle in der Karte stehen, verliert der Nutzer den Überblick. Auf Desktop kann er vergleichende Spalten von oben nach unten scannen. Auf Mobile liest er in einer einzigen Spalte und hört auf, wenn der Text zu lang wird.

Die Lösung ist progressive Disclosure: Du zeigst zunächst die drei bis fünf Features, die die Kaufentscheidung am stärksten beeinflussen. Alles andere kommt hinter einen Toggle. Die Kunst liegt darin, die richtigen fünf auszuwählen – und das ist keine Design-, sondern eine Produkt- und Vertriebsentscheidung.

Wie du die richtigen Top-Features auswählst

Geh dabei in zwei Schritten vor. Zuerst sammelst du aus Support-Anfragen, Onboarding-Gesprächen und Churn-Interviews, welche Features Kunden am häufigsten nennen, wenn sie erklären, warum sie sich für einen bestimmten Plan entschieden haben. Das sind die Kauftreiber. Danach schaust du, welche Features am stärksten zwischen deinen Plänen differenzieren: was jemand mit dem nächsthöheren Plan konkret zusätzlich bekommt. Diese Differenzmerkmale gehören auf die Karte, weil sie Upgrades motivieren.

Features, die vorhanden, aber selten kaufentscheidend sind – zum Beispiel spezifische API-Formate oder Integrationen, die nur eine kleine Nutzergruppe braucht – landen im ausklappbaren Bereich. Sie müssen auffindbar sein, aber sie müssen nicht sofort sichtbar sein. Wenn du unsicher bist, welche Features in die Karte gehören, schau dir die Support-Anfragen der letzten drei Monate an: Welche Features fragen Nutzer vor dem Kauf aktiv nach? Das sind deine Kandidaten.

Was sich auf Mobile gegenüber Desktop strukturell ändert

Preispsychologie auf Mobile: Was sich verändert

Die Prinzipien der Preispsychologie gelten auf Mobile genauso wie auf Desktop. Ankerpreise, empfohlene Pläne, soziale Beweise – das alles wirkt. Aber einige dieser Mechanismen funktionieren auf kleinen Bildschirmen anders, weil der Vergleich zwischen Plänen wesentlich aufwändiger ist. Auf Desktop siehst du alle drei Preispläne gleichzeitig. Auf Mobile scrollst du von Plan zu Plan und trägst den vorherigen im Kopf.

Ankerpreise brauchen auf Mobile mehr Begründung

Auf Desktop setzt ein teurer Plan am linken oder rechten Rand automatisch einen Anker für den mittleren. Alle drei Preise sind gleichzeitig sichtbar, der Vergleich passiert unmittelbar. Auf Mobile scrollst du zu jedem Plan einzeln. Wenn ein teurer Plan als Anker wirken soll, muss er mit einer klaren Begründung erscheinen, warum jemand ihn wählen würde: "Für Teams, die mehrere Marken betreuen und eigene CRM-Anbindungen brauchen." Ohne diese Begründung wirkt er nur teuer, nicht wertvoll.

Der empfohlene Plan braucht mehr als einen Badge

Ein "Beliebt"-Badge ist auf Desktop eine starke visuelle Markierung, weil er auf einer von drei Spalten sofort ins Auge springt. Auf Mobile, wo du durch Pläne scrollst, wird dieser Badge leicht übersehen, besonders wenn die Karte optisch denselben Aufbau wie alle anderen hat. Heb den empfohlenen Plan deshalb strukturell hervor: Platziere ihn als erste Karte in der vertikalen Reihenfolge. Gib der Karte eine deutlichere Hintergrundfarbe oder einen breiteren Rahmen. Zeige einen kurzen sozialen Nachweis direkt in der Karte, zum Beispiel "Von den meisten unserer Kunden in dieser Kategorie genutzt." Das muss kein Link und keine große Testimonial-Sektion sein – ein einziger Satz in der richtigen Position genügt.

Jährliche Preise auf jeder Karte klar kommunizieren

Viele Preisseiten zeigen auf Desktop einen Toggle oben auf der Seite, mit dem Nutzer zwischen monatlicher und jährlicher Abrechnung wechseln. Das ist sinnvoll, wenn alle Pläne gleichzeitig sichtbar sind. Auf Mobile ist dieser Toggle nach dem ersten Scroll durch die erste Karte aus dem Blickfeld. Erkläre deshalb auf jeder Karte separat, was die jährliche Option kostet und welcher Betrag dabei gespart wird. Ein Satz reicht: "Oder 39 Euro pro Monat bei jährlicher Zahlung." Wer die jährliche Option attraktiver machen möchte, zeigt den monatlichen Vergleichspreis durchgestrichen neben dem jährlichen Preis – aber nur, wenn dieser Vergleich korrekt und prüfbar ist.

So baust du die mobile Preisseite auf: Schritt für Schritt

Der folgende Ablauf führt dich von der bestehenden Desktop-Seite zu einer geprüften mobilen Version. Wenn du mit deinem Tech-Stack vertraut bist, plane dafür einen halben Tag ein.

1. Öffne deine aktuelle Preisseite auf einem echten Smartphone, nicht im Browser-Emulator. Notiere, was du nicht auf Anhieb lesen oder tippen kannst. Das sind deine Prioritäten, nicht das, was im Design-Tool gut aussah.
2. Entscheide die Planreihenfolge für Mobile. Überlege, welcher Plan für den Großteil deiner Besucher am relevantesten ist, und stell ihn oben. Wenn du dir nicht sicher bist, schau in deine Analyse-Daten: Welcher Plan wird auf der Preisseite am häufigsten angeklickt?
3. Reduziere die Feature-Ansicht pro Plan auf maximal fünf Punkte. Schau in deinen Support-Daten nach, welche Features kaufentscheidend sind. Alle anderen wandern hinter einen Toggle. Wenn du keinen Toggle einbauen kannst, begrenze auf drei Features und streiche den Rest vorerst.
4. Prüfe alle CTA-Buttons auf Touchgröße. Öffne die Entwicklertools deines Browsers, schalte auf mobiles Gerät und miss die Höhe der Buttons. Unter 44 Pixel: sofort korrigieren. Das ist keine optionale Verbesserung – kleinere Touch-Targets erhöhen die Fehlerquote messbar.
5. Kontrolliere den Kontrast des empfohlenen Plans mit einem mobilen Screenshot im Tageslicht. Hebt er sich klar ab? Wenn nicht, erhöhe die Hintergrundfarbe oder den Rahmen, bevor du andere Elemente anpasst.
6. Prüfe den Cookie-Banner auf Mobile. Erscheint er beim ersten Laden über dem Preisbereich? Falls ja, passe das Banner so an, dass Preise und CTAs sofort sichtbar sind. Cookie-Banner gehören unten an den Bildschirmrand oder kompakt oben – nicht als Vollbildüberlagerung, die den Preisbereich verdeckt.
7. Teste den Checkout-Einstieg auf Mobile. Klicke auf den CTA-Button des Plans, den du kaufen würdest, und geh den Prozess bis zum ersten Eingabeschritt durch. Wie viele Felder erscheinen? Wie lange dauert es, die erste Seite auszufüllen? Jedes zusätzliche Feld ist eine potenzielle Abbruchstelle.

Typische Fehler und was hinter ihnen steckt

Der Abrechnungs-Toggle ist nur oben auf der Seite sichtbar

Ursache: Das Toggle-Element wurde für Desktop gebaut, wo es beim gleichzeitigen Betrachten aller Pläne sichtbar bleibt. Auf Mobile scrollt der Nutzer daran vorbei und sieht ausschließlich den monatlichen Preis.

Gegenmittel: Den Abrechnungszeitraum auf jeder Preiskarte separat erklären, oder den Toggle sticky machen, damit er beim Scrollen sichtbar bleibt. Letzteres ist technisch aufwändiger, aber auf Seiten mit vielen Plänen sinnvoll.

Zu viele Preispläne auf einer Seite

Ursache: SaaS-Produkte wachsen und bekommen mit der Zeit Sonderpläne für Enterprise, Non-Profit oder Bildung. Auf Desktop werden diese am Rand oder unten platziert. Auf Mobile verlängern sie die Seite erheblich und erschweren die Entscheidung, weil die Planreihenfolge keine natürliche Priorität mehr signalisiert.

Gegenmittel: Auf Mobile maximal drei bis vier Hauptpläne zeigen. Sonderpläne auf eine separate Unterseite auslagern, die über einen klar platzierten Link direkt unter den Hauptplänen erreichbar ist.

Social Proof erscheint erst weit unten auf der Seite

Ursache: Auf Desktop befinden sich Logos, Testimonials oder Kundenzahlen oft neben oder unter den Preisspalten und sind gleichzeitig sichtbar. Auf Mobile stehen sie unter allen Karten und werden von Nutzern, die nach dem zweiten oder dritten Plan abbrechen, nicht mehr erreicht.

Gegenmittel: Mindestens ein Element sozialen Beweises direkt in der meistgeklickten Preiskarte einbauen. Das muss kein vollständiges Testimonial sein – ein kurzer Satz wie "Von über 200 Unternehmen im deutschsprachigen Raum genutzt" in der richtigen Position reicht.

Der CTA führt direkt in ein langes Registrierungsformular

Ursache: Der Checkout-Prozess wurde für Desktop-Nutzer entwickelt, die sitzen, Zeit haben und eine Tastatur vor sich haben. Mobile-Nutzer befinden sich oft in einer anderen Situation und brechen mehrstufige Formulare auf kleinen Bildschirmen häufiger ab.

Gegenmittel: Den ersten Schritt nach dem CTA auf das Minimum reduzieren. Bei einer kostenlosen Trial-Anmeldung reicht zu Beginn eine E-Mail-Adresse. Weitere Felder kommen nach der Bestätigung. Details zur Strukturierung dieses Prozesses findest du im Beitrag zur Optimierung der Free-Trial-Anmeldung für SaaS-Anbieter.

A/B-Tests auf der mobilen Preisseite: Worauf es ankommt

Mobile Preisseiten sollten nie ausschließlich auf Basis von Desktop-Test-Ergebnissen optimiert werden. Ein Element, das auf Desktop die Conversion verbessert, kann auf Mobile neutral oder negativ wirken, weil Nutzer andere Aufmerksamkeitspfade haben und in anderen Entscheidungssituationen sind. Das gilt in beide Richtungen: Mobile-Erkenntnisse übertragen sich genauso wenig automatisch auf Desktop.

Trenne deshalb deine A/B-Tests nach Geräteklasse, bevor du Schlüsse ziehst. Was genau dabei schiefgeht, wenn du Mobile und Desktop in einem Test zusammenfasst, erklärt der Beitrag zu A/B-Tests für Mobile und Desktop getrennt auswerten im Detail.

Diese Elemente lassen sich auf mobilen Preisseiten besonders gut testen

• Reihenfolge der Preispläne: Welcher Plan steht oben und erhält die erste und meiste Aufmerksamkeit?
• CTA-Text: Unterschiede zwischen "Jetzt starten", "Kostenlos testen" und "14 Tage kostenlos" sind auf Mobile oft klarer messbar als auf Desktop, weil der Button mehr Bildschirmfläche einnimmt.
• Anzahl der sichtbaren Features pro Plan: Drei versus fünf ergibt auf Mobile einen anderen Lesefluss und beeinflusst, ob Nutzer zum Toggle greifen.
• Platzierung des sozialen Beweises: In der Karte vs. unter der Karte vs. nur ganz unten auf der Seite.
• Abrechnungs-Toggle: Sticky vs. pro Karte erklärt vs. nur oben auf der Seite.

Wann die Optimierung der Preisseite nicht die erste Priorität ist

Nicht jedes SaaS-Produkt gewinnt Kunden über eine öffentliche Preisseite, die direkt zum Kauf führt. Wenn dein Vertrieb primär über Demos, individuelle Angebote oder Partnerkanäle läuft und die öffentliche Preisseite nur eine grobe Orientierung bietet, ist eine aufwändige Optimierung dieser Seite nicht der wirksamste Hebel.

Prüfe zuerst, wie viel deines mobilen Traffics tatsächlich auf der Preisseite landet und welcher Anteil von dort in eine Testanmeldung oder einen Kauf übergeht. Wenn mobile Nutzer die Seite häufig öffnen und ohne Interaktion verlassen, lohnt sich die Optimierung. Wenn aber die meisten mobilen Besucher direkt in eine Demo-Anfrage oder eine Kontaktseite wechseln, ist der Einstiegspunkt in diesen Prozessen das höherwertige Ziel.

Hilfreich ist ein Blick auf die vollständige Conversion-Strecke. Wer mehr über die systematische Analyse von Schwachstellen in SaaS-Funnels erfahren möchte, findet in der Übersicht zu Pricing-Page-Optimierung im DACH-Markt einen passenden Ausgangspunkt.

Häufige Fragen

Wie viele Preispläne sollte eine mobile Preisseite maximal zeigen?

Drei bis vier Hauptpläne sind auf Mobile handhabbar. Mehr als vier verlängert die Seite stark und macht den Vergleich schwerer, weil Nutzer beim vertikalen Scrollen den vorherigen Plan nicht mehr im Blick haben. Sonderpläne für Enterprise, Bildungseinrichtungen oder Non-Profit-Organisationen lagere auf eine separate Unterseite aus und verlinke dort klar von der Hauptpreisseite, zum Beispiel direkt unter den vier Hauptkarten.

Was ist der Unterschied zwischen einer responsiv angepassten und einer mobile-first-Preisseite?

Eine responsiv angepasste Seite beginnt als Desktop-Layout und wird für kleinere Bildschirme zusammengeschrumpft. Dabei bleiben Desktop-Annahmen erhalten: breite Tabellen werden gestaucht, Touch-Targets bleiben klein, alle Features bleiben sichtbar. Eine mobile-first-Preisseite wird von Grund auf für kleine Bildschirme entworfen. Layout, Feature-Auswahl und Lesefluss orientieren sich an der mobilen Nutzungssituation. Das Ergebnis ist strukturell anders, nicht nur kleiner.

Wie gehe ich mit DSGVO-Pflichtangaben auf der mobilen Preisseite um?

Pflichtangaben – Widerrufsrecht, AGB-Verlinkung, Datenschutzhinweis – müssen auf Mobile sichtbar und auffindbar sein, dürfen aber den Preisbereich nicht überlagern. Eine bewährte Platzierung: eine kurze Pflichtzeile direkt unter dem CTA-Button jeder Karte, verlinkt auf die vollständigen Dokumente. Das hält den Preisbereich aufgeräumt und erfüllt gleichzeitig die Informationspflicht. Cookie-Banner sollten so konfiguriert sein, dass sie unten am Bildschirmrand erscheinen und nicht den gesamten Preisbereich abdecken.

Macht es Sinn, auf der mobilen Preisseite einen Live-Chat einzubinden?

Nur, wenn der Chat-Widget-Button keinen Preisinhalt überdeckt. Auf Mobile nimmt ein Live-Chat-Widget meistens die untere rechte Ecke ein, genau dort, wo viele CTA-Buttons positioniert sind. Stelle sicher, dass kein interaktives Element über dem CTA liegt. Wenn das nicht ohne größere Umbauarbeiten lösbar ist, deaktiviere den Chat auf Mobile oder verschiebe den Widget-Trigger in einen weniger kritischen Seitenbereich.

Sollte der Checkout-Prozess auf einer separaten Seite starten oder direkt auf der Preisseite?

Auf Mobile ist der Schritt weg von der Preisseite eine Abbruchgefahr, weil Nutzer zurücknavigieren müssen, um einen anderen Plan zu prüfen. Wenn dein Checkout mehrstufig ist, halte zumindest den ersten Schritt einfach: eine E-Mail-Adresse reicht für den Einstieg in eine Trial. Komplexere Entscheidungen wie Zahlungsmethode und Rechnungsadresse kommen später, wenn die Bereitschaft zur Eingabe höher ist.

Mobil-optimierte Preisseiten sind keine separate Produktkategorie, sondern eine präzisere Version der Preisseite, die du sowieso betreibst. Die strukturellen Entscheidungen – Karten statt Tabellen, Feature-Hierarchie, Touch-freundliche Buttons – verbessern oft gleichzeitig die Desktop-Version, weil sie zu klarerer Informationsarchitektur zwingen. Ein sinnvoller nächster Schritt ist, die aktuelle Preisseite auf einem echten Gerät zu öffnen und die drei offensichtlichsten Reibungspunkte zu notieren. Meistens sind es bei SaaS-Preisseiten dieselben.