1
Οκτώβριος 2019

CTA button guidelines

Call To Action buttons! Όταν σχεδιάζονται καλά, αυτά τα κουμπιά όχι μόνο επιτρέπουν στον χρήστη να κατευθύνεται αποτελεσματικότερα στα προϊόντα και τις υπηρεσίες της ιστοσελίδας σας, αλλά έχει καίρια σημασία στο conversion flow.

 

Η λήψη της προσοχής κάποιου δεν είναι ποτέ εύκολη, ειδικά αυτή την εποχή όπου οι χρήστες βομβαρδίζονται με κάθε λογής πληροφορίες – με αποτέλεσμα η συνολική προσοχή να μειωθεί στα 8,25 δευτερόλεπτα. Αυτός είναι και ο λόγος για τον οποίο τα περισσότερα από τα κορυφαία start ups έχουν μετατρέψει τον σχεδιασμό των ιστοσελίδων τους σε όσο το δυνατόν γίνεται πιο minimal – προκειμένου να μειωθεί ο αριθμός των αποσπασματικών στοιχείων σχεδιασμού.

Εστιάζοντας μόνο σε ορισμένα βασικά στοιχεία, η σημασία και η αποτελεσματικότητά τους θα αυξηθούν, οδηγώντας σε καλύτερους ρυθμούς μετατροπής. Ένα από αυτά τα βασικά στοιχεία είναι το “κουμπί CTA”, το οποίο είναι απαραίτητο για τους περισσότερους ιστότοπους και προϊόντα. Έχουν σχεδιαστεί έτσι ώστε να επιτρέπουν στο χρήστη να πραγματοποιεί συγκεκριμένες ενέργειες,  όπως για παράδειγμα δημιουργώντας έναν λογαριασμό, προσθέτοντας ένα προιόν στο καλάθι, αγοράζοντας ένα προϊόν και πολλά άλλα. Όταν σχεδιάζονται καλά, αυτά τα κουμπιά όχι μόνο επιτρέπουν στον χρήστη να περιηγηθεί σωστά στα προιόντα και τις υπηρεσίες σας, αλλά έχει καίρια σημασία στις ροές μετατροπής της ιστοσελίδας σας.

Να είστε σύντομοι

Αυτή ήταν μια από τις βασικές αρχές που υπογράμμισε ο Allison Rung, UX Writer στο Google. Less is more, αλλά η συνοπτική προσέγγιση δεν σημαίνει μόνο μικρή. Είναι μια ισορροπία μεταξύ του αριθμού των λέξεων που χρησιμοποιούνται και του μηνύματος που φέρνουν αυτές οι λέξεις. Ένα μήνυμα είναι συνοπτικό όταν κάθε λέξη έχει σκοπό.

Το UX μιας landing page είναι διαφορετικό από αυτό που χρησιμοποιείται στο κουμπί CTA. Το ένα χρησιμοποιείται για να μεταφέρει ένα μεγαλύτερο, λεπτομερέστερο μήνυμα για το τι κάνει το προϊόν σας και τα οφέλη του για τον χρήστη. Το άλλο είναι να ξεκινήσει η ενέργεια που σχετίζεται με το κουμπί με όσο το δυνατόν λιγότερα λόγια.

Να είστε ξεκάθαροι

Αν και θα εργάζεστε μόνο με 2 έως 4 λέξεις, η γλώσσα είναι ο πυρήνας του σχεδιασμού σας CTA. Οι λέξεις που επιλέγονται θα επηρεάσουν τον τρόπο με τον οποίο ο χρήστης σας αντιλαμβάνεται την επιδιωκόμενη ενέργεια του κουμπιού. Η χρήση λανθασμένων λέξεων μπορεί να μεταφέρει κάτι διαφορετικό, με αποτέλεσμα την απροθυμία των χρηστών ή την αρνητική εμπειρία των ακούσιων αποτελεσμάτων.

Επικεντρωθείτε

Όπως αναφέρθηκε προηγουμένως, τα κουμπιά μπορούν να χρησιμοποιηθούν για την καθοδήγηση του χρήστη μέσω της ροής μετατροπής, αλλά οι υπερβολικές κατευθυντήριες οδηγίες ενδέχεται να προκαλέσουν σύγχυση και ασάφεια. Είναι σημαντικό να περιορίσετε τη χρήση για να αποφύγετε τη γνωσιακή υπερφόρτωση – όσο λιγότερες επιλογές έχει ένας χρήστης, τόσο πιο εύκολη θα είναι η λήψη απόφασης.

Αυτός είναι και ο λόγος για τον οποίο οι δημοφιλείς αλυσίδες γρήγορου φαγητού έχουν περιορισμένη επιλογή επιλογών στο μενού τους. Προσφέροντας έναν περιορισμένο αριθμό επιλογών / κουμπιών, καθιστάτε ευκολότερη τη ζωή του χρήστη που θα αυξήσει τελικά τα ποσοστά μετατροπής των ιστοσελίδων τους.

Χρησιμοποιήστε χρώματα αντίθεσης

Το χρώμα που χρησιμοποιείτε για τα κουμπιά σας εξαρτάται από διάφορους παράγοντες, το φόντο της ιστοσελίδας σας, το χρώμα της επωνυμίας σας ή ακόμα και τη φύση της προβλεπόμενης δράσης. Ενώ δεν υπάρχει κάποια συνολική οδηγία για το πιο χρώμα να χρησιμοποιήσετε, είναι σημαντικό να επιλέξετε ένα που να έρχεται σε αντίθεση με το φόντο της ιστοσελίδας σας. Εάν το φόντο είναι μπλε, τότε είναι καλύτερο να χρησιμοποιήσετε είτε κίτρινο είτε κόκκινο για να δημιουργήσετε αντίθεση.

Με καλή αντίθεση, το κουμπί ξεχωρίζει ανάμεσα στα άλλα στοιχεία και απαιτεί την προσοχή του χρήστη.

Χρησιμοποιήστε έξυπνες τοποθετήσεις

Η χρήση έξυπνων τοποθετήσεων μπορεί να αυξήσει περαιτέρω τις πιθανότητες προσέλκυσης των επισκεπτών μιας ιστοσελίδας. Υπάρχουν δύο τύποι έξυπνων τοποθετήσεων. Το ένα είναι η κατανόηση του πνευματικού μοντέλου του χρήστη και το δεύτερο το ταξίδι του χρήστη.

Τα νοητικά μοντέλα διαμορφώνονται μέσω της συχνής χρήσης ενός συστήματος και της κατανόησης του τρόπου λειτουργίας του. Αν σας ζητούσαμε να δείξετε πού βρίσκεται το κουμπί εγγραφής, χωρίς να κοιτάξετε την οθόνη, πού θα το αναζητούσατε; Θα μπορούσαμε πιθανότατα να διαβάσουμε το μυαλό σας και να υποθέσουμε ότι σκεφτήκατε την επάνω δεξιά γωνία. Με την κατανόηση του τρόπου με τον οποίο οι χρήστες σας χρησιμοποιούν ορισμένα συστήματα, μπορείτε να τοποθετήσετε τα CTA σας στα σωστά σημεία.

Για τον τελευταίο, με την κατανόηση του ταξιδιού του χρήστη σας, μπορείτε να προβλέψετε την κίνηση των ματιών τους και να τους προτρέψετε προς το CTA με τη διάταξη της σελίδας. Για παράδειγμα, για τις περισσότερες landing pages, το banner θα έχει μια κεφαλίδα, μια δευτερεύουσα κεφαλίδα και, τέλος, το κουμπί CTA – ο χρήστης θα έχει περισσότερες πιθανότητες να κάνει κλικ στο CTA μετά την ανάγνωση των πληροφοριών που προηογύνται.

Εφαρμογή οπτικής ιεραρχίας

Τις περισσότερες φορές, τα κουμπιά CTA έρχονται σε ένα ζεύγος. “Login & sign up”, “confirm & cancel”, κ. ο. κ. Είναι σημαντικό να διευκρινίσετε το κύριο CTA σας και να δημιουργήσετε μια οπτική ιεραρχία για να το κάνετε εστιάζοντας σε αυτό. Αυτό μπορεί να γίνει με το σχεδιασμό του κύριου κουμπιού με έναν πιο τολμηρό τρόπο (χρησιμοποιώντας ένα χρώμα που αντιπαραβάλλεται με το δευτερεύον CTA) και τοποθετώντας το στην δεξιά πλευρά του σχεδιασμού. Ενώ η δευτερεύουσα ενέργεια μπορεί να αναπαρασταθεί χρησιμοποιώντας ένα ghost button ή απλά ένα link.

Η εφαρμογή μιας σαφούς οπτικής ιεραρχίας θα καθοδηγήσει τους χρήστες της ιστοσελίδας σας, προς την ιδανική αντίδραση τους.

Δοκιμές

Αν και οι παραπάνω συμβουλές θα χρησιμεύσουν σίγουρα για τη βελτίωση του σχεδιασμού κουμπιών σας, ο μόνος τρόπος για να τελειοποιήσετε το κουμπί CTA σας είναι μέσω πολλαπλών δοκιμών A / B για να μάθετε τι λειτουργεί καλύτερα για τους χρήστες σας. Το κείμενο, τα χρώματα, το μέγεθος, η τοποθέτηση, το σχήμα και το στυλ μπορούν να έχουν μεγάλες διαφορές στην αντίδραση των επισκεπτών της ιστοσελίδας σας.

Για να σχεδιάσετε το τέλειο κουμπί παρότρυνσης για δράση, οι σχεδιαστές πρέπει να επικεντρωθούν στους κύριους στόχους του και να αξιολογήσουν την αποτελεσματικότητά του μέσω πολλών γύρων δοκιμών A / B. Ένα κουμπί με το κατάλληλο μέγεθος, χρώμα, κείμενο και τοποθέτηση θα τραβούσε την προσοχή του χρήστη και θα τον ενθάρρυνε να πάρει την επιθυμητή ενέργεια.

TOP

Inquiry