Wie wir die Preis-Seite ohne das Gefühl von Kleingedrucktem erstellt haben

Wir haben eine Preis-Seite erstellt, die das Gefühl von Kleingedrucktem vermeidet und die Benutzerwahrnehmung verbessert.

---

Einführung in das Problem

Kürzlich gab es in unserem Slack-Kanal eine Diskussion darüber, wie Nutzer unsere Preispläne wahrnehmen. Einer der Entwickler teilte einen Screenshot der alten Preis-Seite, und viele äußerten, dass die Schrift zu klein und schwer lesbar sei. Dies bereitete uns ernsthafte Sorgen, da die Preis-Seite eines der Schlüsselelemente ist, das die Kaufentscheidung der Nutzer beeinflusst.

Warum das wichtig ist

Die Preis-Seite ist nicht nur eine Ansammlung von Zahlen und Beschreibungen. Sie ist ein wichtiger Teil unseres Produkts, der den Nutzern den Wert klar und verständlich vermitteln muss. Wenn Nutzer nicht schnell und einfach verstehen können, welche Tarife wir anbieten, wirkt sich das negativ auf ihre Entscheidung aus. Darüber hinaus kann dies potenzielle Kunden abschrecken, die nach Transparenz und Einfachheit suchen. Wir waren uns bewusst, dass eine Verbesserung dieser Seite direkt unsere Konversionsraten und die allgemeine Markenwahrnehmung beeinflussen könnte.

Einzelheiten zum Problem

In der alten Version der Preis-Seite beschwerten sich die Nutzer über mehrere Dinge. Erstens war die Schrift tatsächlich zu klein, was die Wahrnehmung der Informationen, insbesondere auf mobilen Geräten, erschwerte. Zum Beispiel erwähnte einer der Nutzer in den Kommentaren, dass er nicht erkennen kann, welcher Tarif für ihn geeignet ist, aufgrund der komplizierten Struktur und des kleinen Textes. Dieses Problem wurde dadurch verschärft, dass die Informationen in Form einer Tabelle mit kleinen Zellen und ohne klare visuelle Hervorhebungen präsentiert wurden.

Was wir zuerst versucht haben

Ursprünglich entschieden wir uns, einfach die Schriftgröße zu erhöhen und die Hintergrundfarbe auf einen kontrastreicheren Farbton zu ändern. Nach mehreren Iterationen und Tests mit Nutzern wurde jedoch schnell klar, dass dies nicht ausreichte. Wir standen vor dem Problem, dass wir bei der Vergrößerung der Schrift die Menge an Informationen auf einer Seite reduzieren mussten, was das Problem der Klarheit ebenfalls nicht löste. Das führte uns zu der Überlegung, das Design der Seite vollständig zu überarbeiten.

Technischer Ansatz

Anstatt einfache Änderungen vorzunehmen, beschlossen wir, die Preis-Seite neu zu gestalten. Wir konzentrierten uns auf intuitives Design und Lesbarkeit. Als Lösung wählten wir größere Schriftarten, klare visuelle Trennungen und fügten interaktive Elemente hinzu, um die Interaktion zu verbessern. Hier ist ein Beispiel für unseren neuen CSS-Code:

.pricing-table {
  font-size: 1.2rem;
  line-height: 1.5;
  padding: 20px;
}
.pricing-header {
  font-weight: bold;
  font-size: 1.5rem;
}

Wir führten auch die Möglichkeit ein, dass Nutzer einfach zwischen den Tarifen über Tabs wechseln können, was die Wahrnehmung der Informationen dynamischer und benutzerfreundlicher machte.

Änderungen im Produkt

Nach der Implementierung des neuen Designs bemerkten wir signifikante Veränderungen. Nutzer begannen, aktiver mit den Tarifen zu interagieren, und die Anzahl der Informationsanfragen nahm ab. Die verbesserte Lesbarkeit und die intuitive Benutzeroberfläche ermöglichten es den Nutzern, schneller Entscheidungen zu treffen, was sich positiv auf die Konversion auswirkte. Wir sind überzeugt, dass die verbesserten Tarife auch Auswirkungen auf die Seiten /jobs und /for-candidates haben werden, da Klarheit in den Preisen das Vertrauen in unser Produkt stärken kann.

Was wir gelernt haben

  • Einfachheit und Klarheit sind wichtiger als die Menge an Informationen.
  • Interaktive Elemente können das Nutzererlebnis erheblich verbessern.
  • Änderungen sollten mit echten Nutzern getestet werden, bevor sie endgültig implementiert werden.

Was das für Kandidaten bedeutet

Für Kandidaten bedeutet dies, dass sie jetzt schneller und einfacher verstehen können, welche Dienstleistungen wir anbieten und wie diese bei der Jobsuche helfen können. Die Klarheit der Preise macht den Auswahlprozess transparenter und weniger stressig.

Was das für Recruiter bedeutet

Recruiter werden sehen, dass die verbesserte Preis-Seite das Interesse an unseren Dienstleistungen steigern kann. Klare und verständliche Tarife helfen, neue Kunden zu gewinnen und das Image des Unternehmens auf dem Markt zu verbessern.

Nächste Schritte

Trotz der erzielten Ergebnisse verfolgen wir weiterhin das Feedback der Nutzer. Wir planen, zusätzliche A/B-Tests durchzuführen, um festzustellen, welche Designelemente noch verbessert werden können. Hätten wir die Möglichkeit, etwas zu ändern, würden wir mehr Aufmerksamkeit auf die Testphase legen, um mögliche Mängel in den frühen Entwicklungsphasen zu identifizieren. ---

Verwandte Materialien

  • Chart plannedГрафик взаимодействия с тарифами
    Изменение уровня взаимодействия пользователей с новой страницей тарифов.
  • Code screenshot plannedПример кода CSS
    Код, использованный для улучшения дизайна страницы с тарифами.

Auch auf Fitlane AI

Themen: страница тарифов, пользовательский опыт, дизайн интерфейса, HTML, CSS, Fitlane, AI