7 Tipps zum Entwerfen einer besseren Checkout-Seite
Da die Ferienzeit vor der Tür steht, werden viele von uns online einkaufen. (OK… vielleicht viel einkaufen!) Die Checkout-Seite einer Website kann diese Erfahrung zu einer unvergesslichen Erfahrung machen oder zu einer, die Sie gerne vergessen würden.
Wenn Sie eine Checkout-Seite entwerfen, gibt es so viele Überlegungen - Funktionalität, Benutzerfreundlichkeit, Sicherheit und Design. Das letzte Element kann jeder Designer beeinflussen. Eine Checkout-Seite sollte nicht nachträglich gestaltet werden. Es ist wohl die wichtigste Seite im Online-Shopping-Erlebnis.
Mach es visuell
Dies mag nach einer offensichtlichen Idee klingen, aber die Checkout-Seite einer E-Commerce-Seite muss visuell sein. Zu viele Websites verwandeln es in eine Grundform.
Dies ist aus mehreren Gründen wichtig. Eine visuelle Verbindung zwischen den Checkout-Seiten und dem Rest der Website schafft die Glaubwürdigkeit der Marke. Wenn die Checkout-Seite wie der Rest der Website aussieht, fühlt sie sich sicher an und gehört zur Website. Mithilfe von Grafiken, von Logos bis hin zu Artikeln im Warenkorb, können sich Benutzer daran erinnern, warum und wo sie sich im Web befinden. (Denken Sie daran, ein Großteil der Welt ist eine ziemlich abgelenkte Gruppe von Internetnutzern.)
Welche Art von Grafik sollten Sie verwenden?
- Bilder. Jeder Artikel sollte mindestens von einem Symbol begleitet sein, das anzeigt, was der Benutzer kauft.
- Logos. Das Firmenlogo sollte immer gut sichtbar sein (und anklickbar sein, um zum Rest der Website zurückzukehren).
- Große Knöpfe. Rufen Sie zum Handeln auf, z. B. "In den Warenkorb", "Artikel aktualisieren" und "Jetzt kaufen", groß, farbenfroh und optisch ansprechend. Schaltflächen sollten leicht zu finden sein und Sie dazu bringen, darauf zu klicken.
- Farbe. Zu viele Checkout-Seiten sind alle weiß mit umrandeten Feldern. Es ist in Ordnung, Farbe zu verwenden. Behalten Sie das Farbschema der restlichen Website auf der Checkout-Seite bei.
- Typografie. Der Text sollte einfach und leicht zu lesen sein. (Menschen vertrauen eher einfachen Serifen- oder serifenlosen Schriften als einem Skript oder einer neuen Schriftart.) Sie können aber auch Spaß mit größeren Textelementen haben.
Fügen Sie Zahlungslogos und Sicherheitssiegel hinzu
Fügen Sie Grafiken hinzu, mit denen sich Benutzer beim Einkaufen wohl fühlen. Während die meisten Menschen verstehen, dass sie online mit einer Kreditkarte bezahlen können, wird diese Idee durch kleine Logos neben den Zahlungsschaltflächen verstärkt.
Es ist ein kleiner, aber beruhigender visueller Hinweis für Benutzer. Dies kann dazu beitragen, Verwirrung darüber zu vermeiden, welche Zahlungsarten akzeptiert werden.
Denken Sie daran, Logos für alle Zahlungsarten einzuschließen. (Zu viele Websites erinnern sich an Kreditkartenlogos, vergessen jedoch PayPal oder Apple Pay.) Halten Sie die Bilder klein und gruppieren Sie sie auf organisierte Weise. (Zum Glück für Designer lassen sich die meisten dieser Elemente in kleinen Formaten gut rendern und haben ähnliche Seitenverhältnisse.)
Erwägen Sie zu diesem Zweck das Entwerfen oder Herunterladen eines speziellen Benutzeroberflächen-Kits mit Logos. Sie sind nicht auf Lagerlogos des Unternehmens beschränkt. Sei einfach nicht zu wild mit dem Design; Ziel ist es, dass Benutzer die Logos in sehr geringer Größe auf dem Bildschirm erkennen.
Erwägen Sie, Bilder zu vergrößern
Checkout-Seiten, auf denen Benutzer einen letzten Blick auf Artikel im Warenkorb werfen können, sind ein großer Bonus. Hover-Effekte, die jeden Artikel im Warenkorb oder in einem Popup vergrößern, können es Benutzern erleichtern, potenzielle Einkäufe ein letztes Mal zu sehen, und die Frustration beseitigen, zurück navigieren zu müssen, um eine Farbe oder Größe zu überprüfen.
Eine weitere Option besteht darin, übergroße Miniaturbilder für Elemente auf der Checkout-Seite zu erstellen. Dieses zusätzliche Bild kann einem Benutzer helfen, seine Kaufentscheidung zu bestätigen und sich beim Kauf noch besser zu fühlen.
Zu viele Designer vernachlässigen es, überhaupt Bilder aufzunehmen, was das Verlassen eines Wagens erleichtert. Stellen Sie sich das so vor: Ein Bild an der Kasse ist gleichbedeutend damit, in einem Laden mit einem Gegenstand in der Hand in der Schlange zu stehen. Derzeit ändern nicht viele Menschen ihre Meinung.
Verwenden Sie Tabellen
Informationen im Warenkorb müssen perfekt organisiert werden. Der einfachste Weg, dies zu erreichen, besteht darin, den Wagen in Form einer Tabelle oder eines ähnlichen gitterbasierten Formats zu gestalten.
Verwenden Sie Spalten und Zeilen, um jeden Artikel, ein Bild, eine Beschreibung, eine Menge, einen Preis und andere relevante Informationen anzuzeigen. Elemente sollten vertikal in Spalten mit anderen Informationen in der entsprechenden Zeile sortiert werden. Diese Art der Sortierung ist für Wagen mit mehreren Artikeln unerlässlich, damit Benutzer nicht gezwungen sind, sich über Bildschirme anstatt über Auf und Ab zu bewegen (was komfortabler ist).
Verwenden Sie in jeder Tabelle oder jedem Raster eine konsistente Ausrichtung. Links ist am häufigsten. Berücksichtigen Sie auch die Ausrichtung der Preise, damit diese auf dem Bildschirm gut sichtbar sind. Im Idealfall sollten die Preise so ausgerichtet sein, dass sich die Zahlen vor und nach einem Zeitraum für jeden Artikel an derselben Position befinden.
Denken Sie an Funktionalität
Während ein Großteil der Gesamtfunktionalität eines Checkout-Seitendesigns möglicherweise nicht die Anweisung eines Designers ist, muss dies berücksichtigt werden. (Ob Designer oder Entwickler diese Konzepte erstellen, kann je nach Team variieren.)
Zu den wichtigsten Funktionsproblemen, für die Gestaltungselemente erforderlich sind, gehören:
- Fähigkeit und einfache Druckbarkeit von mehreren Bildschirmen aus, auch vor und nach dem Auschecken.
- Fügen Sie eine Wunschliste oder eine andere Methode hinzu, um Artikel für den späteren Kauf zu speichern. Machen Sie diese Informationen gemeinsam nutzbar.
- Zu viele Checkout-Seiten werden zu dunklen Löchern ohne Links zu anderen Teilen des Einkaufserlebnisses. Sperren Sie Benutzer nicht in Seiten, aus denen sie nicht herauskommen können.
- Ermöglichen Sie die Bearbeitung von Artikeln im Warenkorb.
- Betrachten Sie eine druckbare Rechnungsoption oder -seite. (Dies ist besonders wichtig, wenn Ihre Kunden Geschäftskunden sind.)
- Erleichtern Sie Benutzern das Verstehen, Ändern oder Aktualisieren von Bestellungen. Viele Checkout-Seiten enthalten neben jedem Artikel einen Mengenzähler. Machen Sie diese Nummer einfach zu bearbeiten (und sie sollte automatisch aktualisiert werden).
- Machen Sie es sich einfach, nach dem Auschecken ein Konto zu erstellen. Nicht jeder Kunde hat zuvor bei Ihnen eingekauft. Es sollte schnell und einfach sein, einen Kauf zu tätigen und sich dann für ein Konto anzumelden. Verdecken Sie zuerst den Verkauf.
Auf jeder Seite sollten Schlüsselsymbole erscheinen
Wenn Sie über das Design von Checkout-Seiten nachdenken, beginnt der Moment, in dem das Website-Konzept eine E-Commerce-Option enthält. Bestimmte Designelemente müssen auf der gesamten Website übertragen werden.
Symbole zum Hinzufügen zum Warenkorb und zur Kasse sollten im gesamten Design enthalten sein. Die Schaltflächen oder Navigationselemente sollten dasselbe Design (oder ziemlich ähnlich) wie die entsprechenden Aktionsschaltflächen auf der Checkout-Seite haben.
Denken Sie an mobile Benutzer
Ein wachsender Prozentsatz des Umsatzes wird eher auf Mobilgeräten als auf Desktop-Computern erzielt. Denken Sie auch an das Design Ihrer Checkout-Seite und die Benutzerfreundlichkeit für diese Kunden. (Nichts ist frustrierender - und allzu häufig - als eine Website, die bis zur Kasse auf einem Telefon funktioniert.)
Designelemente mit Blick auf Tippen und Streichen. Die Tasten sollten größer und leichter zu sehen sein. Das Formular sollte tiefere Felder enthalten, damit Sie leicht darauf tippen können, ohne den Bildschirm vergrößern zu müssen.
Wenn es um mobile Benutzer geht, ist es ebenso wichtig, alles auf einer einzigen Seite zu halten. Erstellen Sie eine Checkout-Seite, die einen Bildlauf durchführt und nicht durch mehrere Bildschirme blättert.
Fazit
Das Entwerfen einer Checkout-Seite kann für jeden Designer eine große Aufgabe sein. Der Schlüssel ist etwas, worüber wir in der Design-Community oft sprechen: Halten Sie es einfach. Entwerfen Sie eine einfache Gliederung mit minimalen Effekten und einem Fokus auf Benutzerfreundlichkeit, und Sie werden mit größerer Wahrscheinlichkeit Erfolg haben.
Denken Sie an den Benutzer, wenn Sie an Checkout-Seiten denken. Bemühen Sie sich, eine Seite zu entwerfen, die visuell ansprechend ist, Logos, die Benutzer führen und informieren, viele Bilder, ein organisiertes Layout, Funktionen, Symbole, die den Verkauf leiten und fördern, und eine mobilfreundliche Oberfläche.
Stock Fotos mit freundlicher Genehmigung von Creative Market.
