Σχεδιαστικά Συστήματα

Η ανατομία ενός κουμπιού CTA το 2017: Βέλτιστες πρακτικές φωνής & τόνου, στυλ και συστατικού.

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

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

Φωνή & Τόνος

Γιατί να κάνω κλικ σε αυτό το κουμπί;

ένα. Ξεκινώντας με ένα ρήμα δράσης και γράφοντας στο πρώτο πρόσωπο

Το κουμπί CTA θα πρέπει να ξεκινά με ένα ρήμα δράσης όπως "Έναρξη", "Λήψη" ή "Λήψη". Είναι προσανατολισμένες προς τη δράση.

Σε μια δοκιμαστική δοκιμασία του Michael Aagaard (Unbounce's Senior Conversion Optimizer), διαπίστωσε ότι η αλλαγή του αντιγράφου του κουμπιού CTA από το δεύτερο άτομο στο πρώτο πρόσωπο οδήγησε σε αύξηση κατά 90% του ποσοστού κλικ.

σι. Προσδοκία

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

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

ντο. Αίσθηση του επείγοντος

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

ρε. Αίσθηση ευκολίας

Συχνά, ο δισταγμός του χρήστη για ανάληψη δράσης απορρέει από τη σκέψη ότι μια ενέργεια θα είναι δύσκολη, δαπανηρή ή χρονοβόρα. Αντιμετωπίζοντας αυτές τις ανησυχίες, το κουμπί CTA μπορεί να οδηγήσει σε περισσότερες μετατροπές.

μι. Λέξεις ενεργοποίησης

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

Σκεφτείτε λέξεις που ενεργοποιούν όπως λέξεις-κλειδιά αναζήτησης!

Ο Jared Spool έχει καλές συμβουλές στο άρθρο: Οι σωστές λέξεις ενεργοποίησης.

Στυλ

Πού πρέπει να κάνω κλικ;

ένα. Σχήμα

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

σι. Μέγεθος

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

ντο. Λευκή απόσταση

Η χρήση κενών (ή νεκρού χώρου) γύρω από ένα κουμπί CTA είναι ένας αποτελεσματικός τρόπος να το ξεχωρίσετε σε περιοχές όπου υπάρχουν πολλά στοιχεία.

ρε. Τοποθέτηση

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

Οι σχεδιαστές που χρησιμοποιούν εφαρμογές για κινητά που έχουν σχεδιαστεί σύμφωνα με τα πρότυπα του Σχεδίου Υλικού Google γνωρίζουν ήδη ότι το κύριο κουμπί (FAB - Κουμπί Ενέργειας Float) θα βρίσκεται στην κάτω δεξιά πλευρά της οθόνης. Θέματα τοποθέτησης!

μι. Αντίθετο χρώμα

Ορίστε ένα χρώμα προφοράς για το κουμπί CTA και κολλήστε με αυτό. Μην χρησιμοποιείτε το πρωτεύον ή δευτερεύον χρώμα του εμπορικού σας σήματος.

Ο Michael Aagaard λέει:

Η καλύτερη συμβουλή μου είναι να χρησιμοποιείτε την κοινή λογική και τα αντίθεση χρώματα όταν σχεδιάζετε τα κουμπιά της σελίδας προορισμού. Η καλή παλιά "δοκιμασία μάτι" είναι πάντα χρήσιμη. Βάλτε μαζί τη σελίδα σας, κάντε μερικά βήματα πίσω, στραβίστε τα μάτια σας και δείτε αν το κουμπί σας ξεχωρίζει. Αρχίζω συνήθως με το να δοκιμάζω ένα πορτοκαλί ή πράσινο κουμπί, απλώς και μόνο επειδή συχνά αποδίδουν καλά σε δοκιμές. Δεν νομίζω ότι υπάρχει βαθύτερος ψυχολογικός λόγος, αλλά φαίνεται ότι ξεχωρίζουν στις περισσότερες σελίδες προορισμού λόγω του μέσου σχεδιασμού. Και πάλι, είναι όλα σχετικά με το πλαίσιο, και έχω δει δοκιμές όπου ένα μοβ κουμπί έχει ξεπεράσει τόσο πράσινο και πορτοκαλί παραλλαγές.

Φανταστείτε ότι το κουμπί CTA πρέπει να είναι σχεδόν ανωμαλία στην οθόνη. Για να το κάνετε αυτό, αποφύγετε κάποιες αρχές Gestalt όπως η εγγύτητα, η ομοιότητα, η συνέχεια και η κοινή περιοχή. Χρησιμοποιήστε μόνο έναν νόμο: το σημείο εστίασης. Κάνοντας αυτό το κουμπί CTA θα παραμείνει επισημασμένο στην άποψη του χρήστη σας.

Συστατικό

Ήρθε η ώρα να μεταμορφώσετε τα στοιχεία διεπαφής σας σε στοιχεία!

ένα. Να είστε συστατικό στοιχείο για τους σχεδιαστές και τους προγραμματιστές

Οι σχεδιαστές πρέπει να δημιουργήσουν διεπαφές που σκέπτονται στα εξαρτήματα, χρησιμοποιώντας τα σωστά εργαλεία που διατίθενται στην αγορά, όπως το Sketch, το Adobe XD, το Figma, κλπ. Οι προγραμματιστές επίσης! Χρησιμοποιήστε κάποια τεχνολογία front-end για συνιστοποίηση όπως React, Angular, Vue.js, κλπ.

σι. Σύμβαση ομοιόμορφου ονόματος για σχεδιαστές και προγραμματιστές

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

Παράδειγμα αντίδρασης:
Παράδειγμα συμβόλου σχήματος:
κουμπί / κύριο πλήκτρο
κουμπί / δευτερεύον κουμπί

ντο. Βελτιστοποιημένη για τη δοκιμή μονάδων

Για την αποτελεσματικότερη λειτουργία της ομάδας QA, δηλώνετε πάντοτε ένα αναγνωριστικό για το στοιχείο σας. Και καθιστά σαφές ποιο είναι το πλαίσιο στο οποίο εφαρμόζεται το στοιχείο.

Παράδειγμα HTML:

ρε. Βελτιστοποιημένη για το Analytics

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

HTML παράδειγμα:

Υπάρχουν πολλά οφέλη για την εφαρμογή και τη χρήση χαρακτηριστικών δεδομένων:

μι. Βελτιστοποιημένη για δοκιμή A / B

Βάλτε σε εφαρμογή τις καλές πρακτικές βελτιστοποίησης εξαρτημάτων που αναφέρθηκαν παραπάνω και δοκιμάστε όλες τις συμβουλές του Voice & Tone and Style.

Παράδειγμα αντίδρασης:
<Κουμπί
  αξία = "Η σημερινή μπύρα!"
  className = "κύριο πλήκτρο - b"
  παραλλαγή = "b"
  εκστρατεία = "Ημέρα του Αγίου Πατρικίου"
/>
Έξοδος HTML:
<κουμπί
  class = "κύριο πλήκτρο - b"
  μεταβολή δεδομένων = "b"
  εκστρατεία δεδομένων = "Ημέρα του Αγίου Πατρικίου">
  Μπύρα σήμερα!
"Ο στόχος μιας δοκιμής δεν είναι να πάρει ένα ανελκυστήρα, αλλά να πάρει μια μάθηση" - Δρ Flint McGlaughlin, MECLABS

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

"Φυσικά το χτύπημα ενός σπιτιού στην πρώτη κούρσα είναι ευκολότερο στο εγώ. Αλλά όταν πλησιάζετε τη βελτιστοποίηση ως διαδικασία - όχι μια μοναδική ευκαιρία να κουνηθείτε για τους φράχτες - θα δείτε ότι η στάση σε λίγες βάσεις κατά μήκος του δρόμου είναι συχνά αυτό που χρειάζεται για να κερδίσετε το παιχνίδι "- Michael Aagaard, Unbounce

Να θυμηθω

Τίποτα δεν είναι γραμμένο σε πέτρα. Δοκιμάστε πολύ. Είναι όλα σχετικά με το πλαίσιο.

Εισερχόμενο μάρκετινγκ

Όλα όσα παρουσιάστηκαν σε αυτό το άρθρο μπορούν να συνδυαστούν με κάποια στρατηγική Inbound Marketing. Μάθετε περισσότερα σχετικά με τα περιεχόμενα του παρακάτω συνδέσμου:

βιβλιογραφικές αναφορές