Το ποσοστό μετατροπής σου στο κινητό είναι ένα τοις εκατό. Το ποσοστό μετατροπής στον υπολογιστή είναι πέντε τοις εκατό. Οι επισκέπτες κινητού βλέπουν την ίδια προσφορά με τους επισκέπτες υπολογιστή. Το ίδιο προϊόν. Τα ίδια οφέλη. Ίδια όλα. Το κινητό όμως μετατρέπει σε ένα κλάσμα του υπολογιστή. Η διαφορά δεν είναι η προσφορά. Η διαφορά είναι η τριβή. Το κινητό έχει περισσότερη τριβή. Οι οθόνες είναι μικρότερες. Η πληκτρολόγηση είναι πιο αργή. Οι φόρμες είναι άβολες στις οθόνες αφής. Οι εικόνες αργούν να φορτώσουν στα δίκτυα κινητής. Το checkout απαιτεί ατέλειωτη κύλιση. Κάθε βήμα φαίνεται πιο δύσκολο στο κινητό. Αυτή η τριβή σκοτώνει τις μετατροπές. Ένας επισκέπτης στον υπολογιστή συμπληρώνει μια φόρμα σε δύο λεπτά. Η ίδια φόρμα στο κινητό παίρνει επτά λεπτά. Στο τρίτο λεπτό έχει ήδη εγκαταλείψει. Η βελτιστοποίηση μετατροπών στο κινητό αφαιρεί αυτή την τριβή. Απλοποιεί τις φόρμες. Επιταχύνει τις σελίδες. Ξανασχεδιάζει για αφή. Αφαιρεί περιττά βήματα. Στόχος δεν είναι η μετατροπή στο κινητό να γίνει ίση με τον υπολογιστή. Είναι να αφαιρέσεις την τεχνητή τριβή που σκοτώνει τις μετατροπές στο κινητό. Εδώ θα δεις τη βελτιστοποίηση μετατροπών στο κινητό και πώς να βελτιώνεις τις μετατροπές σε μικρές οθόνες.
Γιατί οι μετατροπές στο κινητό είναι χαμηλότερες
Οι μετατροπές στο κινητό είναι χαμηλότερες για βάσιμους λόγους. Οι χρήστες κινητού έχουν αποσπάσεις προσοχής. Είναι σε καφετέριες και στο τρένο. Τους διακόπτουν. Οι συσκευές κινητού είναι πιο αργές. Τα δίκτυα είναι πιο αργά. Οι συσκευές έχουν λιγότερη επεξεργαστική ισχύ. Οι εμπειρίες στο κινητό θέλουν περισσότερη προσπάθεια. Η πληκτρολόγηση είναι πιο δύσκολη. Χρειάζεται κύλιση. Το πάτημα μικρών στόχων είναι δύσκολο. Αυτοί είναι πραγματικοί περιορισμοί. Η βελτιστοποίηση για κινητό δεν μπορεί να τους αφαιρέσει. Μπορεί όμως να ελαχιστοποιήσει την επίδρασή τους.
Βελτιστοποίηση φορμών για κινητό
Οι φόρμες είναι το μεγαλύτερο σημείο τριβής στο κινητό. Μια φόρμα δέκα πεδίων στον υπολογιστή είναι διαχειρίσιμη. Στο κινητό απαιτεί ατέλειωτη κύλιση. Απλοποίησε τις φόρμες για κινητό. Μείωσε τα πεδία από δέκα σε τρία. Ζήτα μόνο βασικές πληροφορίες. Ζήτα προαιρετικές πληροφορίες μετά τη μετατροπή. Χρησιμοποίησε αυτόματη συμπλήρωση και προσυμπλήρωση όταν γίνεται. Άσε τα προγράμματα περιήγησης κινητού να συμπληρώνουν αυτόματα email και διεύθυνση. Χρησιμοποίησε τύπους πεδίων που εμφανίζουν το κατάλληλο πληκτρολόγιο. Ένα πεδίο τηλεφώνου πρέπει να εμφανίζει αριθμητικό πληκτρολόγιο. Ένα πεδίο email πρέπει να εμφανίζει πληκτρολόγιο email. Αυτές οι μικρές αλλαγές μειώνουν την τριβή.
Βελτιστοποίηση ταχύτητας για κινητό
Τα δίκτυα κινητής είναι πιο αργά από τα δίκτυα υπολογιστή. Οι αργές σελίδες προκαλούν εγκατάλειψη. Βελτιστοποίησε τις εικόνες. Συμπίεσέ τες. Σέρβιρε εικόνες κατάλληλου μεγέθους για οθόνες κινητού. Μη σερβίρεις μια εικόνα τεσσάρων megabyte για υπολογιστή σε κινητό τηλέφωνο. Συμπίεσε τον κώδικα. Αφαίρεσε περιττή JavaScript. Καθυστέρησε τη φόρτωση μη κρίσιμης JavaScript μέχρι να φορτώσει η σελίδα. Χρησιμοποίησε επιθετικά την προσωρινή αποθήκευση. Αποθήκευσε στατικά στοιχεία στη συσκευή, ώστε να μη χρειάζεται να κατεβαίνουν ξανά. Δοκίμασε την ταχύτητα της σελίδας σου στο κινητό. Το Google PageSpeed Insights σου δείχνει τι να διορθώσεις.
Βελτιστοποίηση κουμπιών και αφής
Τα κουμπιά πρέπει να είναι μεγαλύτερα στο κινητό. Τα δάχτυλα είναι λιγότερο ακριβή από το ποντίκι. Ένα κουμπί που πατιέται εύκολα στον υπολογιστή μπορεί να είναι αδύνατο στο κινητό. Κάνε τα κουμπιά τουλάχιστον σαράντα τέσσερα επί σαράντα τέσσερα pixel. Αυτό είναι περίπου το μέγεθος ενός ανθρώπινου δαχτύλου. Άφησε αποστάσεις ανάμεσα στα κουμπιά, ώστε να μην πατιούνται κατά λάθος. Μην βάζεις δύο κουμπιά ακριβώς δίπλα το ένα στο άλλο. Αφαίρεσε τα εφέ hover. Το hover δεν υπάρχει στο κινητό. Τα εφέ hover μπερδεύουν τους χρήστες κινητού. Αντικατάστησέ τα με ενεργές καταστάσεις που δείχνουν τι γίνεται όταν πατάς.
Βελτιστοποίηση checkout για κινητό
Το checkout είναι εκεί όπου η εγκατάλειψη στο κινητό είναι μεγαλύτερη. Απλοποίησε το checkout. Το checkout μίας σελίδας είναι καλύτερο από το checkout πολλών σελίδων στο κινητό. Μείωσε τα πεδία της φόρμας. Προσυμπλήρωσε ό,τι ξέρεις. Δείξε καθαρά την πρόοδο. Πες στους χρήστες πόσα βήματα απομένουν. Προσφέρε checkout ως επισκέπτης. Μην αναγκάζεις δημιουργία λογαριασμού πριν από την αγορά. Προσφέρε πολλούς τρόπους πληρωμής. Κάποιοι χρήστες έχουν ψηφιακό πορτοφόλι στο κινητό. Κάποιοι χρησιμοποιούν πιστωτικές κάρτες. Η υποστήριξη όλων μειώνει την τριβή.
Δοκιμή της βελτιστοποίησης για κινητό
Κάνε δοκιμές A/B στις αλλαγές για κινητό. Μια απλοποιημένη φόρμα τριών πεδίων απέναντι σε μια φόρμα δέκα πεδίων. Ένα μεγαλύτερο κουμπί απέναντι σε ένα μικρότερο. Ένα checkout μίας σελίδας απέναντι σε checkout πολλών σελίδων. Μέτρησε ποιο μετατρέπει καλύτερα. Εφάρμοσε ό,τι δουλεύει. Το κινητό είναι αρκετά διαφορετικό, ώστε αλλαγές που δουλεύουν στον υπολογιστή μπορεί να μη δουλεύουν στο κινητό. Δοκίμασε σε πραγματικές συσκευές κινητού. Η δοκιμή σε πρόγραμμα περιήγησης στον υπολογιστή δεν είναι το ίδιο με τη δοκιμή σε τηλέφωνο.
Συχνές ερωτήσεις
Να φτιάξω εφαρμογή κινητού αντί να βελτιστοποιήσω το site μου για κινητό;
Όχι απαραίτητα. Οι ιστοσελίδες για κινητό δουλεύουν για τις περισσότερες επιχειρήσεις. Οι εφαρμογές απαιτούν λήψεις. Οι λήψεις είναι τριβή. Οι χρήστες σπάνια κατεβάζουν εφαρμογές αν δεν προσφέρουν σημαντική αξία. Ξεκίνα με μια καλά βελτιστοποιημένη ιστοσελίδα για κινητό. Σκέψου εφαρμογή μόνο αν οι χρήστες θα ωφελούνταν από λειτουργίες χωρίς σύνδεση, ειδοποιήσεις push ή καλύτερη εμπειρία από ό,τι επιτρέπει το web. Με τον δημιουργό ιστοσελίδων του WEMASY μπορείς να το στήσεις απευθείας στην ιστοσελίδα σου.
Πώς βελτιστοποιώ για διαφορετικά μεγέθη οθόνης κινητού;
Χρησιμοποίησε responsive σχεδιασμό. Ένας σχεδιασμός που προσαρμόζεται σε διαφορετικά μεγέθη οθόνης. Τα CSS media queries σου επιτρέπουν να εφαρμόζεις διαφορετικά στυλ σε διαφορετικά σημεία αλλαγής (breakpoints). Δοκίμασε σε διαφορετικές συσκευές και μεγέθη οθόνης. Μην υποθέτεις ότι όλες οι συσκευές κινητού είναι ίδιες. Ένα τηλέφωνο και ένα tablet έχουν διαφορετικά μεγέθη οθόνης. Βελτιστοποίησε και για τα δύο.
Ποια είναι η πιο αποτελεσματική βελτιστοποίηση για κινητό που μπορώ να κάνω;
Η μείωση των πεδίων της φόρμας συνήθως έχει τη μεγαλύτερη επίδραση. Οι μεγάλες φόρμες είναι το μεγαλύτερο σημείο τριβής στο κινητό. Κόψε τα περιττά πεδία και δες τη μετατροπή στο κινητό να βελτιώνεται. Δεύτερη έρχεται η βελτιστοποίηση ταχύτητας. Οι αργές σελίδες προκαλούν εγκατάλειψη. Βελτιστοποίησε τις εικόνες και αφαίρεσε περιττό κώδικα.
Μπορώ να χρησιμοποιώ το ίδιο checkout για κινητό και υπολογιστή;
Μπορείς να μοιράζεσαι το ίδιο backend αλλά να βελτιστοποιείς την παρουσίαση για κάθε συσκευή. Το checkout στον υπολογιστή μπορεί να έχει περισσότερα πεδία και περισσότερα βήματα. Το checkout στο κινητό πρέπει να είναι απλούστερο. Χρησιμοποίησε responsive σχεδιασμό, ώστε ένα checkout να προσαρμόζεται σε κάθε συσκευή. Ή φτιάξε checkout ανά συσκευή αν έχεις τους πόρους.
Πώς δοκιμάζω το κινητό χωρίς πραγματική συσκευή κινητού;
Τα εργαλεία προγραμματιστή του προγράμματος περιήγησης σου επιτρέπουν να προσομοιώνεις συσκευές κινητού. Μπορείς να δεις πώς φαίνεται το site σου σε διάφορα μεγέθη οθόνης. Η προσομοίωση όμως δεν είναι το ίδιο με τις πραγματικές συσκευές. Οι πραγματικές συσκευές έχουν πιο αργά δίκτυα και διαφορετικά προγράμματα περιήγησης. Δοκίμασε σε πραγματικές συσκευές όταν γίνεται. Δανείσου τηλέφωνα και tablet από συναδέλφους αν δεν έχεις δικά σου.
Ποια είναι η τυπική βελτίωση από τη βελτιστοποίηση για κινητό;
Μια καλά βελτιστοποιημένη εμπειρία κινητού συνήθως βελτιώνει τα ποσοστά μετατροπής κατά πενήντα έως εκατό τοις εκατό. Μόνο η απλοποίηση της φόρμας μπορεί να βελτιώσει τη μετατροπή στο κινητό κατά είκοσι τοις εκατό. Η βελτιστοποίηση ταχύτητας μπορεί να τη βελτιώσει κατά τριάντα τοις εκατό. Συνδύασε πολλές βελτιστοποιήσεις και η επίδραση πολλαπλασιάζεται.