Το κουμπί αποστολής φόρμας με τη χειρότερη απόδοση στις περισσότερες μελέτες είναι πάντα το ίδιο. Δεν έχει δικό του χρώμα. Χάνεται μέσα στη σελίδα. Η ετικέτα του είναι μία λέξη. Και δουλεύει αξιόπιστα σε κάθε ιστοσελίδα που θέλει λιγότερες μετατροπές.
Αυτό το κουμπί γράφει "Υποβολή".
Δεν είναι έτοιμος να πατήσει το κουμπί σου κάθε επισκέπτης που φτάνει μέχρι εκεί. Κάποιοι αποφασίζουν ακόμη. Κάποιοι είναι νευρικοί. Κάποιοι ψάχνουν διαβεβαίωση ότι αξίζει τον χρόνο τους να συμπληρώσουν αυτή τη φόρμα. Το κουμπί είναι συχνά η τελευταία εντύπωση που αποφασίζει αν θα ολοκληρώσουν. Μια γενική ετικέτα μίας λέξης τους αφήνει να συμπληρώσουν μόνοι τους αυτή τη διαβεβαίωση. Ένα προσεγμένο κουμπί με συγκεκριμένο κείμενο αφαιρεί την αμφιβολία.
Αυτό το κεφάλαιο εξηγεί τι αλλάζουν στα ποσοστά αποστολής φόρμας το κείμενο, το χρώμα και η θέση του κουμπιού, πώς το πλαίσιο της φόρμας σου επηρεάζει ποιο κείμενο κουμπιού δουλεύει και πώς να αποφύγεις τα μοτίβα σχεδιασμού και κειμένου που σκοτώνουν τις μετατροπές χωρίς να το καταλαβαίνεις.
Τι επηρεάζει πραγματικά η μετατροπή στο κείμενο του κουμπιού
Οι έρευνες για τα κουμπιά call-to-action δείχνουν σταθερά μοτίβα. Τα γενικά κουμπιά όπως "Υποβολή" και "Αποστολή" αποδίδουν 30 έως 40 τοις εκατό χειρότερα από τα κείμενα που περιγράφουν μια ενέργεια. Ένα κουμπί που γράφει "Πάρε τη δωρεάν προσφορά μου" μετατρέπει περισσότερο από ένα κουμπί που γράφει "Υποβολή". Ένα κουμπί που γράφει "Επιβεβαίωση της εγγραφής μου" δουλεύει καλύτερα από το "Υποβολή". Αλλά δεν πρόκειται για έξυπνα λογοπαίγνια. Πρόκειται για σαφήνεια στο αποτέλεσμα.
Όταν ένας επισκέπτης πηγαίνει τον δείκτη πάνω από ένα κουμπί με ετικέτα "Υποβολή", απαντά σε μια άρρητη ερώτηση. Τι υποβάλλω; Πού πηγαίνει; Τι γίνεται μετά; Δεν έχει την απάντηση. Κάνει μια υπόθεση. Το γενικό κείμενο κουμπιού δημιουργεί τριβή, γιατί αναγκάζει τον επισκέπτη να συμπεράνει τι έρχεται μετά.
Το συγκεκριμένο κείμενο κουμπιού, που περιγράφει ενέργεια, απαντά αμέσως σε αυτή την ερώτηση. Το "Πάρε τη δωρεάν προσφορά μου" λέει στον επισκέπτη ακριβώς τι γίνεται όταν πατήσει. Το "Επιβεβαίωση της εγγραφής μου" εξηγεί το επόμενο βήμα. Το "Ζήτα ένα demo" κάνει σαφές ότι ξεκινά μια συζήτηση και δεν δεσμεύεται σε κάτι άγνωστο.
Το μοτίβο ισχύει σε όλους τους τύπους φορμών και τους κλάδους. Σε μια μελέτη του Baymard Institute για φόρμες ολοκλήρωσης αγοράς, το "Ολοκλήρωση παραγγελίας" ξεπέρασε το "Υποβολή" κατά 25 τοις εκατό στο ποσοστό μετατροπής. Σε μια δοκιμή φορμών επικοινωνίας από εταιρεία λογισμικού μάρκετινγκ, το "Στείλε το αίτημά μου" κέρδισε το "Υποβολή" κατά 18 τοις εκατό. Σε μια ανάλυση δοκιμών ποσοστού μετατροπής σε 50 e-shop, τα κουμπιά που περιείχαν όφελος ή επόμενο βήμα ξεπέρασαν τις ενέργειες μίας λέξης κατά μέσο όρο 23 τοις εκατό.
Η βελτίωση δεν είναι μικρή. Δεν είναι βελτιστοποίηση 2 τοις εκατό. Είναι να αλλάξεις το ποσοστό αποστολής της φόρμας σου από 15 τοις εκατό σε 19. Ή από 300 αποστολές τον μήνα σε 370. Το κείμενο του κουμπιού είναι μία από τις αλλαγές με τη μεγαλύτερη απόδοση που μπορείς να κάνεις σε μια φόρμα.
Κείμενο κουμπιού ανά τύπο φόρμας
Το ίδιο κείμενο CTA δεν δουλεύει σε κάθε φόρμα. Το πλαίσιο, δηλαδή ο λόγος που κάποιος συμπληρώνει μια φόρμα, διαμορφώνει σε ποιο κείμενο κουμπιού θα αντιδράσει.
Φόρμες εγγραφής και δημιουργίας λογαριασμού
Όταν κάποιος φτιάχνει λογαριασμό, δεσμεύεται σε κάτι. Η απόφαση συνήθως έχει παρθεί. Δεν ρωτά πια "να το κάνω;". Ρωτά "θα δουλέψει;" και "είναι ασφαλές;". Το κείμενο του κουμπιού για εγγραφή πρέπει να επιβεβαιώνει την ενέργεια και να δίνει διαβεβαίωση.
Αποτελεσματικά μοτίβα: "Δημιούργησε τον λογαριασμό μου", "Ας ξεκινήσουμε", "Επιβεβαίωση της εγγραφής μου". Απόφυγε το γενικό "Υποβολή". Απόφυγε ετικέτες που φαίνονται μόνιμες ή βαριές, όπως "Δέσμευση για δημιουργία λογαριασμού". Κράτα το ύφος ελαφρύ και προς τα εμπρός.
Για εγγραφές με κωδικό, το κείμενο του κουμπιού μπορεί να αναγνωρίζει την τριβή: "Δημιούργησε κωδικό και συνέχισε". Αυτό λέει στον επισκέπτη ότι δεν φτιάχνει κωδικό χωρίς λόγο. Είναι ένα βήμα προς κάτι. Η ενέργεια είναι σαφής.
Φόρμες επικοινωνίας και αιτημάτων
Οι φόρμες επικοινωνίας ωφελούνται από συνομιλιακό, ανθρώπινο κείμενο κουμπιού. Ο επισκέπτης επικοινωνεί. Ζητά κάτι. Το κουμπί πρέπει να ακούγεται σαν να αναγνωρίζεις αυτό το αίτημα.
Αποτελεσματικά μοτίβα: "Στείλε το αίτημά μου", "Επικοινώνησε μαζί μας", "Στείλε το μήνυμά μου", "Ζήτα περισσότερες πληροφορίες". Έτσι η φόρμα μοιάζει με συζήτηση και όχι με ξεφόρτωμα δεδομένων.
Απόφυγε την ψυχρή ή τυπική γλώσσα. Μην γράφεις "Υποβολή αιτήματος". Γράψε "Στείλε το αίτημά μου". Η διαφορά είναι λεπτή. Το ένα μοιάζει με συναλλαγή. Το άλλο μοιάζει με κουβέντα με άνθρωπο.
Φόρμες κράτησης και ραντεβού
Μέχρι να συμπληρώσει κάποιος μια φόρμα κράτησης, η πρόθεσή του έχει επιβεβαιωθεί. Θέλει το ραντεβού. Το κείμενο του κουμπιού πρέπει να είναι άμεσο και να αφαιρεί την αμφιβολία για το τι έρχεται μετά.
Αποτελεσματικά μοτίβα: "Επιβεβαίωση του ραντεβού μου", "Κλείσε τη συνεδρία μου", "Κανόνισε την κλήση μου", "Κράτα τη θέση μου". Αυτά αναγνωρίζουν ότι ο άνθρωπος έχει ήδη αποφασίσει. Το κουμπί είναι το τελικό βήμα επιβεβαίωσης.
Απόφυγε οτιδήποτε δημιουργεί ασάφεια. Το "Κράτηση" δουλεύει. Το "Εγγραφή" δίνει λιγότερη σαφήνεια για το τι κρατείται. Η σαφήνεια σε αυτό το στάδιο αυξάνει τα ποσοστά ολοκλήρωσης.
Φόρμες ολοκλήρωσης αγοράς και πληρωμής
Η ολοκλήρωση αγοράς σε e-shop έχει τα περισσότερα να χάσει από ένα αόριστο κείμενο κουμπιού. Κάθε λέξη εδώ επηρεάζει απευθείας τα έσοδα. Ο επισκέπτης είναι έτοιμος να αγοράσει. Μην δημιουργείς δισταγμό.
Αποτελεσματικά μοτίβα: "Ολοκλήρωση της αγοράς μου", "Πλήρωσε τώρα", "Οριστικοποίηση παραγγελίας", "Αγόρασε τώρα". Κάποιοι έμποροι δοκιμάζουν κείμενο που προβάλλει το όφελος, όπως "Πάρε το [όνομα προϊόντος] μου", για να δυναμώσουν αυτό που λαμβάνει ο πελάτης και όχι αυτό που πληρώνει.
Μην χρησιμοποιείς ποτέ το γενικό "Υποβολή". Δοκίμασε αν το "Ολοκλήρωση της αγοράς μου" ή το "Αγόρασε τώρα" αποδίδει καλύτερα στο κοινό σου. Κάποιοι κλάδοι και εύρη τιμών ανταποκρίνονται σε διαφορετική γλώσσα. Αλλά και τα δύο νικούν τη γενική ετικέτα.
Φόρμες σχολίων και ερωτηματολογίων
Τα κουμπιά ερωτηματολογίων πρέπει να φαίνονται γρήγορα και εύκολα. Ο επισκέπτης σου κάνει χάρη. Το κείμενο του κουμπιού πρέπει να το αναγνωρίζει και να το κάνει να φαίνεται χωρίς τριβή.
Αποτελεσματικά μοτίβα: "Στείλε τα σχόλιά μου", "Υποβολή της απάντησής μου", "Μοιράσου τη γνώμη μου". Αυτά φαίνονται γρήγορα. Απόφυγε γλώσσα που κάνει τα σχόλια να μοιάζουν με επίσημη υποβολή. Το "Στείλε τα σχόλιά μου" είναι πιο ελαφρύ από το "Υποβολή ερωτηματολογίου".
Φόρμες φιλτραρίσματος υποψήφιων πελατών και B2B
Οι φόρμες B2B συχνά απαιτούν περισσότερες πληροφορίες, γιατί φιλτράρουν τους υποψήφιους πελάτες. Το κείμενο του κουμπιού μπορεί να αναγνωρίζει τι έρχεται μετά χωρίς να αποθαρρύνει.
Αποτελεσματικά μοτίβα: "Ζήτα μια προσφορά", "Κανόνισε μια συμβουλευτική", "Ξεκίνα τη δωρεάν δοκιμή μου", "Πάρε προσαρμοσμένη τιμή". Αυτά κάνουν σαφές ποιο είναι το επόμενο βήμα. Ο επισκέπτης δεν ανησυχεί ότι δεσμεύεται σε κάτι αόριστο.
Ο σχεδιασμός του κουμπιού επηρεάζει τα κλικ περισσότερο απ' όσο νομίζουν οι περισσότεροι
Το κείμενο του κουμπιού είναι μόνο μέρος της ιστορίας. Το πώς φαίνεται το κουμπί και πού βρίσκεται στη σελίδα καθορίζει αν κάποιος θα το δει καν ως κάτι που πατιέται.
Αντίθεση χρώματος και οπτική προβολή
Ένα κουμπί που χάνεται στο φόντο της σελίδας παίρνει λιγότερα κλικ από ένα κουμπί με υψηλή αντίθεση. Δεν πρόκειται για φανταχτερό σχεδιασμό. Πρόκειται για ευκολία εντοπισμού. Αν ένα κουμπί δεν ξεχωρίζει οπτικά από τη φόρμα, ο επισκέπτης μπορεί να το χάσει εντελώς.
Τα αποτελεσματικά κουμπιά έχουν αντίθεση χρώματος τουλάχιστον 4,5 προς 1 με το φόντο. Στην πράξη αυτό σημαίνει ότι το χρώμα του κουμπιού πρέπει να διαφέρει αισθητά από το φόντο της σελίδας και από τα άλλα στοιχεία της φόρμας.
Δοκίμασε τι δουλεύει για την επιχείρησή σου. Κάποιες επιχειρήσεις χρησιμοποιούν ένα χρώμα της επωνυμίας που ξεχωρίζει φυσικά. Άλλες χρησιμοποιούν θερμά χρώματα όπως πορτοκαλί ή κόκκινο πάνω σε ψυχρά φόντα όπως γκρι ή λευκό. Το συγκεκριμένο χρώμα μετράει λιγότερο από την αντίθεση. Κάν' το κουμπί εύκολο να το βρεις.
Μέγεθος και λευκός χώρος
Τα κουμπιά που είναι πολύ μικρά δεν φαίνονται πατήσιμα. Τα κουμπιά που είναι πολύ μεγάλα φαίνονται πιεστικά. Το σωστό μέγεθος είναι σχετικό με τη φόρμα και τη σελίδα. Ένα κουμπί που πιάνει το μισό πλάτος της φόρμας φαίνεται επιθετικό. Ένα κουμπί πλάτους 150 pixels σε μια φόρμα επικοινωνίας πλήρους πλάτους φαίνεται κατάλληλο.
Ο λευκός χώρος γύρω από το κουμπί αυξάνει τα κλικ. Ένα κουμπί που περιβάλλεται από άλλα στοιχεία της φόρμας χάνεται. Ένα κουμπί με καθαρό χώρο γύρω του ξεχωρίζει και φαίνεται πατήσιμο. Πρόσθεσε περιθώριο πάνω και κάτω από το κουμπί. Άφησέ το να αναπνέει.
Σχήμα και στυλ κουμπιού
Οι στρογγυλεμένες γωνίες φαίνονται πιο μοντέρνες και φιλικές. Οι αιχμηρές γωνίες φαίνονται πιο εταιρικές ή τεχνικές. Κανένα δεν είναι καθολικά καλύτερο. Δοκίμασε ποιο στυλ ταιριάζει με την επωνυμία και το κοινό σου.
Τα συμπαγή κουμπιά με καθαρό φόντο αποδίδουν καλύτερα από τα κουμπιά με περίγραμμα ή τα διάφανα (ghost) κουμπιά στις περισσότερες φόρμες. Ένα κουμπί με περίγραμμα που ταιριάζει με το στυλ της φόρμας χάνεται. Ένα συμπαγές κουμπί με αντίθεση ξεχωρίζει.
Οι σκιές και τα εφέ όταν περνάς το ποντίκι αυξάνουν την αίσθηση ότι κάτι πατιέται. Ένα κουμπί που αλλάζει χρώμα ή έχει ορατή κατάσταση hover δείχνει στον επισκέπτη ότι ανταποκρίνεται στην αλληλεπίδραση.
Μέγεθος κουμπιού στο κινητό
Οι χρήστες κινητού πατούν με τον αντίχειρα. Ένα κουμπί που είναι πολύ μικρό χάνει πατήματα. Οι οδηγίες της Apple προτείνουν ελάχιστο στόχο αφής 44 επί 44 pixels. Οι οδηγίες του Android προτείνουν 48 επί 48 pixels. Οι φόρμες στο κινητό πρέπει να κάνουν τα κουμπιά αρκετά μεγάλα ώστε ένας στόχος μεγέθους αντίχειρα να πετυχαίνεται αξιόπιστα.
Στο κινητό τα κουμπιά συχνά στοιβάζονται κάθετα. Ένα κουμπί πλήρους πλάτους φαίνεται πιο πατήσιμο από ένα κουμπί που φαίνεται μόνο εν μέρει. Ένα σταθερό (sticky) κουμπί που μένει ορατό ενώ κάνεις scroll στη φόρμα αυξάνει τις ολοκληρώσεις στο κινητό.
Η θέση καθορίζει ποιος βλέπει το κουμπί
Το καλύτερο κείμενο και σχεδιασμός κουμπιού δεν θα βοηθήσουν αν ο κόσμος περνά με scroll χωρίς να το προσέξει. Το πού βρίσκεται το κουμπί στη σελίδα επηρεάζει την ορατότητα.
Κουμπιά πάνω από το πρώτο scroll
Στην ιδανική περίπτωση, το κύριο κουμπί πρέπει να φαίνεται χωρίς scroll στον υπολογιστή. Αν η φόρμα σου πιάνει το μεγαλύτερο μέρος της οθόνης, ίσως χρειαστεί scroll για να φτάσεις στο κουμπί. Αυτό είναι αναπόφευκτο. Αν όμως υπάρχει χώρος πάνω από το πρώτο scroll, βάλε το κουμπί εκεί ώστε ο επισκέπτης να μην χρειάζεται να το ψάχνει.
Σταθερά κουμπιά στο κινητό
Οι φόρμες στο κινητό συχνά απαιτούν scroll. Ένα σταθερό κουμπί που μένει ορατό στο κάτω μέρος της οθόνης αυξάνει τις ολοκληρώσεις. Ο επισκέπτης δεν χάνει ποτέ το κουμπί από τα μάτια του ενώ συμπληρώνει τα πεδία. Μπορεί να ολοκληρώσει οποιαδήποτε στιγμή χωρίς να κάνει scroll μέχρι κάτω.
Κύρια και δευτερεύοντα κουμπιά
Κάποιες φόρμες έχουν πολλά κουμπιά. "Υποβολή", "Αποθήκευση ως πρόχειρο", "Επόμενο βήμα". Όταν έχεις πολλά κουμπιά, κάν' την κύρια ενέργεια οπτικά κυρίαρχη. Ένα δυνατό κύριο κουμπί πρέπει να φαίνεται ξεκάθαρα πιο πατήσιμο από τις δευτερεύουσες επιλογές. Χρησιμοποίησε χρώμα, μέγεθος ή θέση για να δείξεις ιεραρχία.
Συνηθισμένο λάθος είναι να κάνεις το κύριο και τα δευτερεύοντα κουμπιά ίδια. Αν το "Ακύρωση" και η "Υποβολή" έχουν το ίδιο μέγεθος και χρώμα, κάποιοι επισκέπτες πατούν το λάθος. Οι σχεδιαστές το δοκιμάζουν και βρίσκουν ότι αν το κύριο κουμπί είναι 30 έως 40 τοις εκατό μεγαλύτερο από τα δευτερεύοντα, μειώνονται οι τυχαίες ακυρώσεις.
Το κείμενο κάτω από το κουμπί αυξάνει την ολοκλήρωση
Το ίδιο το κουμπί είναι απλώς η τελική αλληλεπίδραση. Το κείμενο κάτω από το κουμπί ή κοντά του δίνει διαβεβαίωση της τελευταίας στιγμής που σπρώχνει τους διστακτικούς επισκέπτες να πατήσουν.
Το κείμενο διαβεβαίωσης απαντά στην τελική αντίρρηση. Αν η φόρμα σου ζητά διεύθυνση email, μια γραμμή κάτω από το κουμπί που λέει "Δεν θα μοιραστούμε ποτέ τα στοιχεία σου" αφαιρεί τον τελευταίο λόγο να μην στείλει. Αν η φόρμα σου απαιτεί τηλέφωνο, το "Χωρίς ενοχλητικές κλήσεις, θα επικοινωνήσουμε μαζί σου μέσα σε μία εργάσιμη ημέρα" χτίζει εμπιστοσύνη.
Αυτό το κείμενο διαβεβαίωσης πρέπει να είναι μικρό και δευτερεύον. Δεν πουλάς πια. Απαντάς στην τελευταία αμφιβολία. Παραδείγματα: "Θα σου απαντήσουμε μέσα σε 24 ώρες", "Τα στοιχεία σου προστατεύονται πάντα", "Δεν χρειάζεται πιστωτική κάρτα για να ξεκινήσεις τη δωρεάν δοκιμή", "Το απόρρητό σου είναι προτεραιότητά μας".
Οι δοκιμές δείχνουν ότι το κείμενο διαβεβαίωσης κάτω από τα κουμπιά αυξάνει τα ποσοστά ολοκλήρωσης κατά 3 έως 5 τοις εκατό σε φόρμες με μεγάλη τριβή. Σε φόρμες με μικρή τριβή, όπως τα newsletter, ο αντίκτυπος είναι μικρότερος. Σε φόρμες B2B που ζητούν πολλές πληροφορίες, το κείμενο διαβεβαίωσης μπορεί να αυξήσει τις ολοκληρώσεις κατά 10 τοις εκατό ή και περισσότερο.
Καταστάσεις σφάλματος και ανατροφοδότηση φόρτωσης
Αυτό που γίνεται αφού κάποιος πατήσει το κουμπί καθορίζει αν νιώθει σίγουρος για την αποστολή του.
Απενεργοποιημένη κατάσταση κατά την αποστολή
Μόλις κάποιος πατήσει το κουμπί, απενεργοποίησέ το αμέσως. Ένα απενεργοποιημένο κουμπί αποτρέπει διπλές αποστολές. Το πιο σημαντικό, δείχνει στον επισκέπτη ότι το κλικ του καταγράφηκε. Το κουμπί πρέπει να δείχνει κατάσταση φόρτωσης: "Γίνεται αποστολή..." ή ένα spinner ή κινούμενο κείμενο.
Χωρίς κατάσταση φόρτωσης, ο επισκέπτης δεν ξέρει αν δούλεψε το κλικ του. Μπορεί να πατήσει ξανά. Μπορεί να κλείσει τον browser. Μια καθυστέρηση ενός δευτερολέπτου ανάμεσα στο κλικ και σε οποιαδήποτε ανατροφοδότηση φαίνεται μεγάλη σε έναν χρήστη. Δείξε αμέσως ότι κάτι γίνεται.
Κείμενο για την αποκατάσταση σφάλματος
Όταν αποτύχει η αποστολή μιας φόρμας, το κουμπί και το κείμενο γύρω του πρέπει να εξηγούν τι πήγε στραβά και τι να κάνει στη συνέχεια. Μην δείχνεις απλώς ένα μήνυμα σφάλματος στην κορυφή της φόρμας. Ενημέρωσε το ίδιο το κουμπί.
Ένα κουμπί που γράφει "Δοκίμασε ξανά" είναι πιο χρήσιμο από το "Υποβολή" όταν γίνει σφάλμα. Το κείμενο δίπλα στο κουμπί πρέπει να εξηγεί συγκεκριμένα τι απέτυχε: "Αυτό το email είναι ήδη εγγεγραμμένο" ή "Συμπλήρωσε όλα τα υποχρεωτικά πεδία".
Κάν' την αποκατάσταση σφάλματος εμφανή. Κάποιες φόρμες τονίζουν το πεδίο με το πρόβλημα. Κάποιες δείχνουν μηνύματα σφάλματος δίπλα στο πεδίο. Κάποιες κάνουν και τα δύο. Όσο πιο καθαρό το σφάλμα, τόσο πιο γρήγορα το διορθώνει ο επισκέπτης.
Φόρμες και βελτιστοποίηση κουμπιού αποστολής με το WEMASY
Ο Δημιουργός ιστοσελίδων του WEMASY σου επιτρέπει να φτιάξεις τις δικές σου σελίδες στην ιστοσελίδα σου και να προσθέσεις μια φόρμα.
Αν το κουμπί σου έχει υψηλή εγκατάλειψη συγκεκριμένα, είναι ένδειξη ότι το κείμενο ή ο σχεδιασμός του κουμπιού χρειάζεται δοκιμή. Αν οι επισκέπτες φτάνουν στο κουμπί αλλά δεν πατούν, δοκίμασε διαφορετικό κείμενο και σχεδιασμό χωρίς να ξαναχτίσεις τη φόρμα.
Δες πώς προσθέτεις μια φόρμα στον Δημιουργό ιστοσελίδων. Για περισσότερα σχετικά με κείμενα φορμών που φέρνουν ολοκληρώσεις, διάβασε για το πώς να γράφεις ετικέτες και κείμενα βοήθειας φορμών που δουλεύουν και για το τι προκαλεί την εγκατάλειψη φόρμας και πώς να την προλάβεις.