Der Bestellprozess von PrestaShop wurde für einen breiten Bildschirm entworfen. Auf dem Smartphone, über das inzwischen der Großteil des Traffics läuft, behält er Interface-Entscheidungen bei, die bei jedem Schritt Bestellungen kosten.
Hier die Analyse Bildschirm für Bildschirm, mit dem, was sich ohne Redesign beheben lässt.
Bildschirm 1: der Warenkorb
Drei wiederkehrende Probleme.
Der Bestellbutton unter der Liste. Bei einem Warenkorb mit fünf Artikeln liegt er unter einem langen Scrollweg. Das erwartete Verhalten ist ein fixierter Button am unteren Bildschirmrand, der die Summe anzeigt und dauerhaft sichtbar ist.
Winzige Mengenwahlschalter. Die Plus- und Minus-Buttons sind oft kleiner als dreißig Pixel. Die Barrierefreiheits-Empfehlung setzt das minimale Touch-Ziel bei etwa vierundvierzig Pixeln Kantenlänge an. Darunter trifft der Kunde den falschen Button, muss korrigieren und ärgert sich.
Löschen ohne Bestätigung oder Rückgängig. Ein versehentliches Tippen auf den Papierkorb leert eine Zeile ohne Ausweg. Eine temporäre Rückgängig-Option erspart die komplette mentale Rekonstruktion des Warenkorbs.
Bildschirm 2: Identifikation
Das ist der Bildschirm, der auf dem Smartphone die meisten Abbrüche erzeugt, und zwei technische Details genügen.
Das E-Mail-Feld ruft nicht die richtige Tastatur auf. Ein korrekt typisiertes Feld lässt eine Tastatur mit direkt erreichbarem At-Zeichen erscheinen. Ohne das geht der Kunde bei jeder Eingabe über die Umschalttaste.
Das automatische Ausfüllen funktioniert nicht. Browser können E-Mail, Name, Adresse und Bankkarte ausfüllen, sofern die Felder die erwarteten Autocomplete-Hinweise tragen. Ein korrekt annotiertes Formular füllt sich mit zwei Tipps. Ein Formular ohne Annotation erzwingt eine vollständige Eingabe.
Das ist wahrscheinlich die rentabelste Korrektur des gesamten Bestellprozesses, und sie erfordert nur das Hinzufügen von Attributen zu bestehenden Feldern.
Dritter Punkt: das Passwort. Wenn Sie die Kontoerstellung erzwingen, erzeugt das Fehlen einer Option zum Anzeigen des eingegebenen Passworts wiederholte Fehler auf einer Touch-Tastatur.
Bildschirm 3: die Adresse
Das Adressformular ist das längste des Bestellprozesses und das am schlechtesten angepasste.
Zu viele Felder. Viele Konfigurationen fragen nach Firma, Adresszusatz, zweitem Zusatz, Festnetz und Mobiltelefon. Auf dem Smartphone ist jedes zusätzliche Feld ein Hindernis. Reduzieren Sie auf das strikt Notwendige und verbergen Sie optionale Felder hinter einem Link.
Die Postleitzahl ruft nicht die Zifferntastatur auf. Gleiche Bemerkung wie bei der E-Mail: Der Feldtyp bestimmt die angebotene Tastatur.
Die Feldreihenfolge folgt nicht der lokalen Logik. In Deutschland gibt man die Postleitzahl vor der Stadt ein, und die erste sollte die zweite vorbefüllen. Diese Autovervollständigung entfernt ein ganzes Feld und reduziert die Fehler.
Fehler erscheinen erst nach der Validierung. Ein Formular, das nach dem Buttondruck fünf Fehler im Block meldet, zwingt zum Hochscrollen in der Seite. Die Validierung während der Eingabe, Feld für Feld, ist deutlich weniger frustrierend.
Einfacher & Eleganter Checkout für PrestaShopEin eleganter One-Page-Checkout, der konvertiert99,00€
Bildschirm 4: der Versand
Zwei Probleme.
Versandoptionen in gedrängten Radiobuttons. Drei Versanddienstleister in kompakten Zeilen mit kleinen Radiobuttons erzeugen Fehlauswahlen. Jede Option sollte eine vollständig klickbare Karte sein.
Der Abholpunkt in einer nicht angepassten Karte. Abholpunkt-Module zeigen oft eine für Desktop konzipierte Karte mit winzigen Markierungen und launischem Zoom. Auf dem Smartphone funktioniert eine nach Entfernung sortierte Liste, mit der Karte als Option, besser.
Bildschirm 5: die Zahlung
Das ist der Bildschirm, auf dem ein Problem am teuersten ist, denn der gesamte vorherige Aufwand geht verloren.
Die Zifferntastatur für die Karte. Kartennummer, Ablaufdatum und Sicherheitscode müssen eine Zifferntastatur aufrufen. Das ist immer noch häufig falsch konfiguriert, auch in neueren Zahlungsmodulen.
Das automatische Ausfüllen der Karte. Browser und Passwort-Manager können eine gespeicherte Karte ausfüllen, sofern die Autocomplete-Hinweise korrekt sind. Ohne sie muss der Kunde seine physische Karte hervorholen, was den Ablauf unterbricht und Zeit zum Aufgeben lässt.
Die Weiterleitung auf eine nicht angepasste Bankseite. Die starke Authentifizierung öffnet manchmal eine Seite mit kaputter Darstellung auf dem Smartphone. Testen Sie diesen Ablauf unter realen Bedingungen, mit einer echten Karte: Es ist der am wenigsten getestete und kritischste Punkt des Bestellprozesses.
Die Rückkehr nach der Authentifizierung. Wenn der Kunde zur Validierung in seine Banking-App wechselt, verlässt er den Browser. Die Rückkehr muss die Sitzung wiederherstellen und die Bestellung fortsetzen, nicht beim Warenkorb neu beginnen.
Die übergreifenden Probleme
Vier Elemente, die alle Bildschirme betreffen.
Der automatische Zoom beim Fokussieren. Auf manchen mobilen Browsern löst ein Feld mit einer Schriftgröße unter sechzehn Pixeln beim Auswählen einen automatischen Zoom aus, der die ganze Seite verschiebt. Die Korrektur besteht darin, in Formularen nie unter diese Größe zu gehen.
Die Tastatur, die das aktive Feld verdeckt. Bei einem langen Formular überdeckt die virtuelle Tastatur manchmal das gerade ausgefüllte Feld. Das Scrollen muss sich beim Öffnen der Tastatur anpassen.
Gestapelte fixierte Banner. Fixierter Header, Cookie-Banner, Werbebanner: Auf einem Telefonbildschirm bleibt manchmal nur ein Drittel der Höhe für den Inhalt. Entfernen Sie im Bestellprozess alles, was nicht notwendig ist.
Die Ladezeit zwischen den Schritten. Jedes vollständige Neuladen ist eine Gelegenheit zum Abbruch. Ein One-Page-Bestellprozess, oder Übergänge ohne Neuladen, beseitigt diese Bruchstellen.
Die Diagnosemethode
Drei Aktionen, in dieser Reihenfolge, vor jeder Änderung.
Geben Sie eine Bestellung auf Ihrem eigenen Telefon auf, unter realen Bedingungen, mit einer echten Karte und einem Mobilfunknetz statt WLAN. Das offenbart in zehn Minuten das Wesentliche der Probleme.
Erfassen Sie die Abschlussrate pro Schritt, getrennt auf Smartphone und Desktop. Die Differenz zwischen beiden lokalisiert das Problem: Wenn das Smartphone bei der Adresse abbricht, ist es sinnlos, die Zahlung zu überarbeiten.
Sehen Sie sich Aufzeichnungen mobiler Sitzungen an, die nicht abgeschlossen wurden. Zögern, wiederholte Korrekturen und manuelle Zooms sind sofort sichtbar und weisen auf die problematischen Felder hin.
Womit anfangen
Wenn Sie nur drei Dinge tun können, nehmen Sie diese.
Die Autocomplete-Attribute auf allen Feldern des Bestellprozesses. Geringe Kosten, sofortige Wirkung, und es nützt allen Browsern.
Die Feldtypen, damit jede Eingabe die richtige Tastatur aufruft. Gleiche Logik, gleiches Verhältnis von Aufwand zu Ergebnis.
Die Touch-Zonen, auf mindestens vierundvierzig Pixel vergrößert bei allen interaktiven Elementen des Bestellprozesses.
Diese drei Korrekturen erfordern kein Redesign und beheben die Mehrheit der messbaren Reibungspunkte.
Das Modul Einfacher und Eleganter Checkout für PrestaShop baut diesen Ablauf auf PrestaShop 8 und 9 neu auf: One-Page-Bestellprozess ohne Neuladen zwischen den Schritten, verschlanktes Adressformular mit Vorbefüllung der Stadt durch die Postleitzahl, korrekt gesetzte Feldtypen und Autocomplete-Attribute sowie für Mobilgeräte dimensionierte Touch-Zonen.
