Καλέστε σε δράση Οδηγίες κουμπιών, βέλτιστες πρακτικές και παραδείγματα

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

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

Ο σκοπός των κουμπιών "Κλήση στη δράση"

Τα κουμπιά κλήσης για δράση μπορούν να προσφέρουν διάφορες λειτουργίες. Παρά όλα αυτά, “πρόσκληση σε δράση” είναι πραγματικά ασαφής. Το μόνο που σημαίνει είναι ότι είναι ο κύριος σκοπός είναι να πάρετε έναν επισκέπτη στον ιστότοπό σας Κάνε κάτι. Αυτό κάτι θα μπορούσε να προσθέσει ένα προϊόν στο καλάθι αγορών τους, να κατεβάσει κάτι, να ζητήσει πληροφορίες ή σχεδόν οτιδήποτε άλλο.

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

Τύποι κουμπιών "Κλήση στη δράση"

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

1. Προσθήκη στα κουμπιά

Οι ιστότοποι ηλεκτρονικού εμπορίου χρησιμοποιούν γενικά ένα πλήθος κουμπιών κλήσης για δράση, αλλά το πιο ευρέως χρησιμοποιούμενο είναι το “προσθήκη στο καλάθι” κουμπί. Αυτά τα κουμπιά εμφανίζονται γενικά σε μεμονωμένες σελίδες προϊόντων. Σκοπός τους είναι να προσελκύσουν τους πελάτες να αγοράσουν ένα στοιχείο. Τα κοινά στοιχεία σχεδιασμού στα κουμπιά προσθήκης στα κουτάκια περιλαμβάνουν απλή διατύπωση (όπως “Προσθήκη στο καλάθι” ή “Προσθήκη στη τσάντα” ή “Αγορασε τωρα“) και τη χρήση εικονιδίων (συνήθως τσάντα ή καλάθι).

2. Κάντε λήψη κουμπιών

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

3. Δοκιμαστικά κουμπιά

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

4. Μάθετε περισσότερα κουμπιά

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

5. Κουμπιά εγγραφής

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

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

Χρησιμοποιώντας τον αρνητικό χώρο αποτελεσματικά

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

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

Ορισμένες οδηγίες:

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

Μέγεθος και χρώμα

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

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

Ορισμένες οδηγίες:

• Τα κουμπιά της πρόσκλησης για δράση θα πρέπει να είναι τα μεγαλύτερα κουμπιά σε μια δεδομένη σελίδα
• Χρησιμοποιήστε αντίθεση χρώματα για να κάνετε τα μικρότερα κουμπιά να ξεχωρίζουν περισσότερο
• Χρησιμοποιήστε λιγότερο διακριτά χρώματα για να προσαρμόσετε καλύτερα τα κουμπιά μεγάλου μεγέθους
• Τα κουμπιά κλήσης για δράση πρέπει να δώσουν προσοχή στην προσοχή χωρίς να συντρίψουν το σχέδιό σας

Γλώσσα

Η ακριβής διατύπωση που επιλέγετε να χρησιμοποιήσετε στα κουμπιά κλήσης για δράση μπορεί να έχει τεράστιο αντίκτυπο στη μετατροπή. Συγκρίνω “Αγορασε τωρα” με “Προσθήκη στο καλάθι“. Το ένα είναι πολύ πιο επείγον από το άλλο. Ή μήπως “Δοκιμάστε το δωρεάν” με “Δωρεάν δοκιμή“? Το ένα είναι πολύ πιό punchier από το άλλο και ξεχωρίζει περισσότερο.

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

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

Ορισμένες οδηγίες:

• Χρησιμοποιήστε απλή, άμεση γλώσσα
• Χρησιμοποιήστε μια μεγάλη, έντονη γραμματοσειρά στο κουμπί για το κύριο κείμενο
• Βεβαιωθείτε ότι η γλώσσα απαιτεί σαφώς συγκεκριμένη ενέργεια

Δημιουργία επείγοντος

Θέλετε οι επισκέπτες στον ιστότοπό σας να πραγματοποιούν τις επιθυμητές ενέργειες με όσο το δυνατό λιγότερη σκέψη. Ενώ δεν θέλετε να εξαπατήσετε τους επισκέπτες σας, τόσο περισσότερες ευκαιρίες θα τους δώσετε να σταματήσουν και να εξετάσουν τι κάνουν, τόσο περισσότερες ευκαιρίες τους δίνετε “όχι”.

Θέλετε τα κουμπιά σας να τους δίνουν την εντύπωση ότι πρέπει να ενεργήσουν αμέσως. Θέλετε να τους ενθαρρύνετε να λάβουν την απόφασή τους αμέσως, στο κίνητρο της στιγμής. Παρόλο που αυτό δεν θα λειτουργήσει για κάθε κουμπί κλήσης για δράση (ειδικά εκείνα για την αγορά ειδών υψηλού εισιτηρίου), για χαμηλού κόστους ή δωρεάν ενέργειες, έχοντας επισκέπτες με κλικ με λίγη προοπτική είναι επιθυμητή.

Ορισμένες οδηγίες:

• Ενθαρρύνετε τους επισκέπτες σας να ενεργούν αμέσως
• Μην δίνετε στους επισκέπτες σας κανένα λόγο να σταματήσετε
• Ενώ η επείγουσα ανάγκη είναι σημαντική, μην παραπλανήσετε τους επισκέπτες σας με κανέναν τρόπο

Παρέχετε επιπλέον πληροφορίες

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

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

Ορισμένες οδηγίες:

• Περιλάβετε μόνο πρόσθετες πληροφορίες όταν προσθέτουν στην εμπειρία του χρήστη
• Οι επιπλέον πληροφορίες είναι κατάλληλες μόνο για ορισμένους τύπους κουμπιών κλήσης για δράση, κυρίως κουμπιά λήψης ή δοκιμής
• Βεβαιωθείτε ότι η κύρια πρόσκληση για δράση εξακολουθεί να είναι το πιο εμφανές κείμενο του κουμπιού σας

Προτεραιότητα

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

Χρησιμοποιήστε χρώμα για να επισημάνετε το πιο σημαντικό κουμπί σε μια σελίδα ή για να κάνετε τα λιγότερο σημαντικά αυτά να φαίνονται λιγότερο εμφανή. Ή χρησιμοποιήστε το μέγεθος για να ξεχωρίσετε το πιο σημαντικό κουμπί (καθιστώντας το μεγαλύτερο) και υπογραμμίζοντας τις λιγότερο σημαντικές.

Εικόνες και εικόνες

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

Ορισμένες οδηγίες:

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

Παραδείγματα

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

Ζωντανή μετάδοση - Η διαφοροποίηση των κουμπιών "Αγοράστε τώρα" (για πληρωμένες επιλογές) και "Εγγραφείτε" (για δωρεάν επιλογές) είναι μια καλή στρατηγική.

Windows 7 - Το μεγάλο, πράσινο κουμπί "Λήψη Windows7" ​​είναι εύκολο για τους επισκέπτες να εντοπίσουν.

Διαχείριση αρχείων - Το φωτεινό πράσινο κουμπί εδώ ξεχωρίζει πραγματικά ενάντια στο λευκό φόντο.

Ημερολόγιο - Χρησιμοποιώντας διαφορετικά χρώματα για τα κουμπιά "Λήψη" και "Αγορά" τα ξεχωρίζει και δίνει προτεραιότητα στο κουμπί "Αγορά".

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

GoodBarry - Ένα άλλο λαμπρό πράσινο κουμπί κλήσης για δράση.

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

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

Notepod - Ένα καλό παράδειγμα της συμπερίληψης επιπλέον πληροφοριών σε ένα κουμπί κλήσης για δράση.

Inkd - Ένα καλό παράδειγμα της προτεραιότητας κουμπιά με μέγεθος.

Κομψά Θέματα - Ένα άλλο εξαιρετικό παράδειγμα χρήσης του χρώματος για να ξεχωρίζει χωρίς να συγκρουστεί με τα περιβάλλοντα σχεδιαστικά στοιχεία.

ZenDesk - Ένα άλλο καλό παράδειγμα για να φτιάξετε ένα κουμπί ξεχωρίζει με το χρώμα.

Storenvy - Ένα στρογγυλό κουμπί είναι απροσδόκητο και ξεχωρίζει, ειδικά όταν περιβάλλεται από ένα λευκό περίγραμμα.

Bara'Mail - Μερικές φορές ένα κουμπί που μοιάζει σε έργα καλύτερα στο γενικό σχεδιασμό του site σας, ειδικά όταν η δράση είναι λιγότερο επείγουσα.

Περισσότερες πηγές

• Κουμπιά κλήσης προς δράση: Παραδείγματα και βέλτιστες πρακτικές - Από το περιοδικό Smashing
• Καλό κουμπί παρότρυνσης για δράση - Από το περίπτερο UX
• Κουμπιά κλήσης προς δράση: Μήπως το μέγεθος έχει σημασία; - Από Get Elastic
• 10 τεχνικές για μια αποτελεσματική “Πρόσκληση σε δράση” - Από το Boagworld
• 5 Συμβουλές για τη δημιουργία ενός αποτελεσματικού κουμπιού κλήσης προς δράση - Από το SitePoint