Ανοίξτε το analytics σας και δείτε την κατανομή συσκευών. Στα περισσότερα ελληνικά e-shops που βλέπουμε, το κινητό είναι η μεγάλη πλειοψηφία της επισκεψιμότητας. Συχνά όμως το ποσοστό μετατροπής στο κινητό είναι αισθητά χαμηλότερο από το desktop. Ένα μέρος αυτής της διαφοράς είναι φυσιολογικό (ο κόσμος χαζεύει στο κινητό και αγοράζει στον υπολογιστή), αλλά ένα μέρος είναι απλά κακό mobile checkout.
Το πρόβλημα είναι ότι οι περισσότεροι ιδιοκτήτες καταστημάτων ελέγχουν το site τους από τον υπολογιστή. Ας το διορθώσουμε.
Η δοκιμή των πέντε λεπτών
Πριν από οτιδήποτε άλλο: πάρτε το κινητό σας, βγείτε από το Wi-Fi και κάντε μια πραγματική παραγγελία στο κατάστημά σας, με το ένα χέρι. Μετά ζητήστε το ίδιο από κάποιον που δεν έχει ξαναδεί το site, με διαφορετικό κινητό (αν έχετε iPhone, δοκιμάστε και Android).
Σημειώστε κάθε σημείο που:
- Χρειάστηκε zoom.
- Πατήσατε κάτι λάθος.
- Άνοιξε λάθος πληκτρολόγιο.
- Περιμένατε χωρίς να ξέρετε αν κάτι γίνεται.
- Χάθηκαν στοιχεία που είχατε ήδη γράψει.
Αυτή η λίστα είναι το πλάνο σας.
Πεδία φόρμας που βοηθούν, όχι που εμποδίζουν
Σωστό πληκτρολόγιο για κάθε πεδίο
Είναι λεπτομέρεια που κάνει τεράστια διαφορά:
- Τηλέφωνο:
type="tel", ώστε να ανοίγει αριθμητικό πληκτρολόγιο. - Email:
type="email", με το @ διαθέσιμο αμέσως. - Ταχυδρομικός κώδικας:
inputmode="numeric", γιατί ο ελληνικός ΤΚ είναι πέντε ψηφία. - Αριθμός κάρτας (αν η φόρμα είναι δική σας): αριθμητικό πληκτρολόγιο.
Autofill που δουλεύει
Οι browsers μπορούν να συμπληρώσουν όνομα, διεύθυνση, τηλέφωνο, email με ένα άγγιγμα, αρκεί τα πεδία να έχουν σωστά autocomplete attributes (name, email, tel, street-address, postal-code, address-level2 για την πόλη). Πολλά themes τα έχουν σβήσει ή τα έχουν λάθος. Ελέγξτε τα.
Μέγεθος γραμματοσειράς
Αν τα πεδία έχουν γραμματοσειρά κάτω από 16px, το Safari σε iPhone κάνει αυτόματο zoom όταν ο πελάτης πατήσει πάνω τους, και η σελίδα «ξεφεύγει». Λύση: 16px και πάνω στα inputs.
Ετικέτες που δεν εξαφανίζονται
Placeholder στη θέση του label φαίνεται κομψό, αλλά μόλις ο πελάτης αρχίσει να γράφει δεν θυμάται τι πεδίο είναι. Χρησιμοποιήστε κανονικά labels πάνω από τα πεδία.
Λιγότερη πληκτρολόγηση
- Ο ΤΚ μπορεί να συμπληρώσει αυτόματα πόλη και νομό.
- Η επιλογή χώρας να είναι προεπιλεγμένη στην Ελλάδα.
- Πεδία τιμολογίου μόνο αν ο πελάτης ζητήσει τιμολόγιο.
- Αυτόματη συμπλήρωση διεύθυνσης μπορεί να βοηθήσει, αλλά δοκιμάστε τη με ελληνικές διευθύνσεις πριν τη βάλετε.
Wallets: το μεγαλύτερο κέρδος
Το Apple Pay και το Google Pay αφαιρούν σχεδόν όλη τη φόρμα: όνομα, διεύθυνση, κάρτα έρχονται από το wallet, και η έγκριση γίνεται με Face ID ή δακτυλικό αποτύπωμα. Σε κινητό, είναι το πιο γρήγορο checkout που μπορείτε να προσφέρετε.
- Βάλτε τα ως express κουμπιά στην κορυφή του checkout, ή και στο καλάθι.
- Βεβαιωθείτε ότι το κόστος αποστολής υπολογίζεται σωστά όταν η διεύθυνση έρχεται από το wallet.
- Δοκιμάστε τα σε πραγματικές συσκευές, όχι μόνο σε emulator.
Για τους υπόλοιπους τρόπους πληρωμής που περιμένει ο Έλληνας αγοραστής, δείτε τον οδηγό μας για τους τρόπους πληρωμής.
Σχεδιασμός για τον αντίχειρα
- Κουμπιά αρκετά μεγάλα: τουλάχιστον περίπου 44-48px ύψος, με απόσταση μεταξύ τους.
- Κύριο κουμπί πάντα προσβάσιμο: ένα sticky «Ολοκλήρωση παραγγελίας» ή «Συνέχεια» στο κάτω μέρος βοηθά σε μεγάλες σελίδες.
- Μία στήλη. Δύο πεδία δίπλα-δίπλα σε κινητό σχεδόν πάντα δυσκολεύουν.
- Σύνοψη παραγγελίας που ανοιγοκλείνει στην κορυφή, με το σύνολο πάντα ορατό.
- Επιλογές ως μεγάλα radio buttons, όχι dropdowns, για αποστολή και πληρωμή.
Ταχύτητα σε πραγματικό δίκτυο
Το checkout συχνά είναι η πιο αργή σελίδα του site, γιατί εκεί φορτώνουν όλα τα scripts: πάροχοι πληρωμών, tracking, chat, reviews, plugins που δεν έχουν καμία δουλειά εκεί. Σε 4G με μέτριο σήμα αυτό φαίνεται.
- Αφαιρέστε από το checkout ό,τι δεν χρειάζεται (chat widgets, sliders, pop-ups).
- Ελέγξτε το INP: κάθε πάτημα πρέπει να ανταποκρίνεται γρήγορα. Ο στόχος της Google είναι κάτω από 200ms.
- Δείξτε ένδειξη φόρτωσης όταν υπολογίζονται μεταφορικά ή όταν πατιέται το κουμπί πληρωμής, και απενεργοποιήστε το κουμπί για να μη γίνουν διπλές παραγγελίες.
Η επιστροφή από την τράπεζα
Στο κινητό, η έγκριση 3D Secure ή IRIS συχνά ανοίγει την εφαρμογή της τράπεζας. Ο πελάτης εγκρίνει και πρέπει να επιστρέψει στον browser και στη σελίδα επιβεβαίωσης. Εδώ «χάνονται» παραγγελίες:
- Δοκιμάστε τη ροή με τις μεγάλες ελληνικές τράπεζες σε iPhone και Android.
- Βεβαιωθείτε ότι η παραγγελία ενημερώνεται μέσω callback από τον πάροχο, ακόμα κι αν ο πελάτης δεν επιστρέψει ποτέ στη σελίδα.
- Στείλτε email επιβεβαίωσης αμέσως, ώστε ο πελάτης να ηρεμήσει.
Μηνύματα λάθους φιλικά για κινητό
Στο desktop ένα μήνυμα λάθους στην κορυφή της σελίδας φαίνεται. Στο κινητό, ο πελάτης βρίσκεται τρεις οθόνες πιο κάτω και δεν το βλέπει ποτέ. Βάλτε το μήνυμα δίπλα στο πεδίο, μεταφέρετε την οθόνη εκεί και πείτε τι να κάνει: «Ο ταχυδρομικός κώδικας πρέπει να έχει 5 ψηφία».
Λίστα ελέγχου
- Δοκιμαστική παραγγελία με ένα χέρι, σε 4G, σε iPhone και Android
- Σωστά πληκτρολόγια και autocomplete σε όλα τα πεδία
- Inputs με γραμματοσειρά 16px+
- Labels πάνω από τα πεδία
- Apple Pay και Google Pay ως express επιλογές
- Μία στήλη, μεγάλα κουμπιά, sticky κύριο κουμπί
- Καθαρό checkout χωρίς περιττά scripts
- Σωστή επιστροφή από εφαρμογή τράπεζας
- Μηνύματα λάθους δίπλα στο πεδίο
Συμπέρασμα
Το mobile checkout δεν είναι μια μικρότερη έκδοση του desktop. Είναι το κύριο checkout σας. Κάθε δευτερόλεπτο και κάθε πεδίο που κερδίζετε εκεί φαίνεται στις πωλήσεις. Αν θέλετε έναν έλεγχο ταχύτητας και χρηστικότητας στο δικό σας κατάστημα, δείτε την υπηρεσία μας για ταχύτητα και Core Web Vitals ή επικοινωνήστε μαζί μας.