Mobile Tabellenanpassung: Von Spalten zu Stapeln
Tarif-Spalten sind auf dem Handy unlesbar. Wir zeigen dir, wie du responsive Tabellen strukturierst und auf kleinen Bildschirmen lesbar machst.
Mehr erfahrenEmpfohlene Pläne richtig hervorheben
So funktioniert visuelle Hierarchie: Welche Farben, Größen und Abstände machen deinen Premiumplan wirklich attraktiv.
Warum die Hervorhebung entscheidend ist
Der beste Plan nützt dir nichts, wenn ihn niemand sieht. Auf einer Preistabelle mit drei oder vier Optionen nebeneinander, braucht dein empfohlener Plan visuelle Aufmerksamkeit. Das ist nicht manipulativ — das ist gute Gestaltung.
Besucher deiner Website sind überfordert. Sie sehen mehrere Optionen und wissen nicht, welche die beste für sie ist. Deine Aufgabe ist es, ihnen sanft die richtige Wahl zu zeigen. Mit den richtigen Techniken schaffst du das, ohne aufdringlich zu wirken.
Die vier Säulen der Hervorhebung
Es gibt vier Werkzeuge, die zusammen funktionieren. Nicht eins allein — alle vier zusammen schaffen die richtige Wirkung.
01. Größe
Der empfohlene Plan ist einfach größer als die anderen. Das funktioniert. Eine 10-15% größere Karte wird sofort als wichtiger wahrgenommen. Du musst es nicht übertreiben — subtil ist besser.
02. Hintergrundfarbe
Ein dunkler Hintergrund, ein kontrastierendes Farbschema — irgendetwas, das sich unterscheidet. Deine anderen Pläne sind weiß? Der empfohlene ist hell grau. Deine anderen sind dunkel? Der empfohlene hat einen farbigen Hintergrund. Kontrast ist König.
03. Position und Abstände
Platziere den empfohlenen Plan in der Mitte. Das ist psychologisch. Die Mitte wirkt wichtig. Wenn die anderen zu nah beieinander sind, vergrößere den Abstand zum empfohlenen Plan. Das erzeugt visuellen Raum.
04. Typografie und Details
Der Titel könnte fetter sein. Das Badge “Am beliebtesten” oder “Empfohlen” ist wichtig — aber nicht zu groß. Und die Schaltfläche? Eine andere Farbe, ein anderer Stil. Nicht die gleiche wie bei den anderen Plänen.
Farbe mit Bedacht wählen
Das Wichtigste: Deine Hervorhebungsfarbe muss von den anderen Plänen unterscheidbar sein. Wenn alle anderen einen weißen oder hellen Hintergrund haben, dann wähle etwas Dunkleres oder Farbigeres.
Aber — und das ist wichtig — nicht zu grell. Ein knalliges Neon-Orange sieht billig aus. Ein tiefes Marineblau, ein warmes Beige oder ein ruhiges Grün wirkt Premium. Der Unterschied liegt in der Tiefe und Sättigung.
Viele Designer machen den Fehler, dieselbe Farbe wie ihr Hauptlogo zu wählen. Das ist okay, aber nicht immer ideal. Teste verschiedene Farben. Die beste ist oft diejenige, die dich am Anfang überrascht hat.
Konkrete Maße und Abstände
Hier sind Zahlen, die funktionieren:
Größenunterschied:
10-15% größer als Standard-Pläne
Abstand zur Seite:
2-3x mehr Platz als zwischen Standard-Plänen
Schattentiefe:
Größerer Schatten für die empfohlene Karte
Badge-Position:
Oben rechts oder oben Mitte, nie versteckt
Diese Werte sind Richtlinien, nicht Gesetze. Bei einer mobilen Ansicht musst du anpassen — vielleicht nicht 15% größer, sondern 8-10%, damit es noch auf dem Bildschirm passt.
Mobil ist eine andere Geschichte
Auf dem Smartphone funktioniert Nebeneinander nicht. Deine vier Pläne werden zu vier Karten übereinander. Jetzt musst du die Hervorhebung anders denken.
Der empfohlene Plan könnte an die Spitze der Liste wandern. Oder — und das sieht oft besser aus — du machst ihn einfach etwas größer und gibst ihm einen anderen Hintergrund. Die anderen Pläne sind alle weiß? Der empfohlene hat einen leicht gefärbten oder dunkleren Hintergrund.
Wichtig: Das Badge “Empfohlen” muss auf mobil sichtbar sein. Auf einem kleinen Bildschirm ist es deine beste Chance, Aufmerksamkeit zu lenken. Mach es deutlich.
Fehler, die Designer vermeiden sollten
Zu viel auf einmal
Größer + farbig + Schatten + anderer Font + anderer Button + Border. Das ist zu viel. Benutzer merken es als “irgendwie übertrieben”. Wähle zwei oder drei Techniken und wende sie konsistent an.
Farben ohne Kontrast
Ein leicht hellerer Grau als die anderen ist nicht genug. Der Unterschied muss offensichtlich sein. Wenn du dir nicht sicher bist, ob der Unterschied groß genug ist — er ist es wahrscheinlich nicht.
Asymmetrische Größe
Der Plan ist oben breiter als unten oder die Höhe ist ungleich. Das sieht einfach seltsam aus. Wenn du die Größe änderst, dann gleichmäßig auf allen Seiten.
Badge ist zu groß
Das “Empfohlen”-Badge soll hinweisen, nicht schreien. Wenn das Badge größer als die Plan-Titel ist, hast du es übertrieben. Klein und deutlich ist besser als groß und aufdringlich.
Die Regel ist: Subtil, aber deutlich
Dein empfohlener Plan soll hervorstechen, aber nicht wie ein Fehler wirken. Die beste Hervorhebung ist diejenige, die Benutzer nicht bewusst wahrnehmen — sie sehen den Plan einfach und denken, dass das die logische Wahl ist.
Teste mit echten Benutzern. Zeige deine Preistabelle verschiedenen Personen und frag sie, welcher Plan ihnen empfohlen wird. Wenn die meisten deinen empfohlenen Plan nennen — du hast es richtig gemacht.
Zusammenfassung: Nutze Größe, Farbe, Position und Abstände. Nicht alle vier gleichzeitig, aber zwei oder drei davon kombiniert. Das ist visuelles Storytelling auf höchstem Niveau.
Hinweis
Dieser Artikel bietet Orientierung zu Designprinzipien für Preistabellen. Die hier beschriebenen Techniken sind allgemeine Best Practices, die je nach Branche, Zielgruppe und Geschäftsmodell angepasst werden müssen. Jede Website ist unterschiedlich — was hier funktioniert, könnte auf deiner Website andere Ergebnisse liefern. Teste immer mit echten Benutzern und miss die Conversion-Raten, um zu sehen, was für dein Publikum funktioniert.
Weitere Artikel zum Thema
