5 άκρες για το σχεδιασμό ενός κερδοφόρου Buy Button

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

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

Πρώτα απ 'όλα, το Το κείμενο στο κουμπί σας είναι το πιο σημαντικό πράγμα, αλλά υπάρχουν και άλλα χαρακτηριστικά που πρέπει να αντιμετωπιστούν. Γιατί λέω ότι το κείμενο είναι το πιο σημαντικό; Φανταστείτε αυτό - ποιο είναι το σημείο να έχετε ένα όμορφα σχεδιασμένο κουμπί αν το κείμενο σε αυτό λέει “Να πας στο διαολο!”? Εκλεισε η υπόθεση. Καλό αντίγραφο είναι όπου τα χρήματα γίνονται.

Στο σημερινό άρθρο συζητάμε 5 βασικά χαρακτηριστικά ενός σωστού "κουμπιού αγοράς". Ας ΡΙΞΟΥΜΕ μια ΜΑΤΙΑ!

1. Συνολικό ύφος

Αυτό είναι το # 1 σημείο αυτής της λίστας χωρίς λόγο, καθώς είναι το πιο σημαντικό χαρακτηριστικό.

Θέλεις να γυρίστε το κουμπί σας σε μωβ αγελάδα. Αυτή είναι μια ιδέα που διαδόθηκε από τον Seth Godin. Εν ολίγοις, θέλετε να είναι αξιοσημείωτο. με αξιοσημείωτο εννοώ κάτι που δεν μπορεί να αγνοηθεί. Κάτι σαν μωβ αγελάδα στη μέση ενός βοσκοτόμου.

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

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

Επιτρέψτε μου να σας δώσω ένα καλό παράδειγμα ενός κουμπιού μοβ-αγελάδας.

Mozilla Firefox

Αυτή είναι η σελίδα λήψης του Firefox. Θέλω να παρατηρήσετε ένα πράγμα. Το κουμπί στα αριστερά, το κουμπί λήψης, δεν μοιάζει με τίποτα άλλο σε αυτήν τη σελίδα. Είναι το μόνο πράσινο πράγμα. Είναι το μόνο μέρος που παρουσιάζει το λογότυπο του Firefox. Είναι ένα από τα μεγαλύτερα στοιχεία εκεί. Βρίσκεται πάνω από την πτυχή.

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

Με λίγα λόγια: Στόχος είναι να έχετε ένα αξιοσημείωτο κουμπί.

2. Εμφάνιση

Ας ξεκινήσουμε με το χρώμα.

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

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

Ένα ακόμα κόλπο. Το πορτοκαλί είναι γνωστό ως το πιο ορατό χρώμα μετά το κόκκινο χρώμα. Αλλά, δεν δημιουργεί όλα τα αρνητικά συναισθήματα που κάνει το κόκκινο (πράγματα όπως “να σταματήσει”, “Προσέξτε!”, και “κίνδυνος”). Το πιο δημοφιλές πορτοκαλί κουμπί στο διαδίκτυο μπορεί να βρεθεί στο amazon.com.

Το επόμενο πράγμα που πρέπει να επικεντρωθούμε είναι το μέγεθος του κουμπιού. Λοιπόν, τι μπορώ να πω, πρέπει να είναι ΜΕΓΑΛΗ. Όσο μεγαλύτερο είναι το καλύτερο. (Και πάλι παράδειγμα Firefox.)

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

Πρέπει να είναι απλά ή φανταχτερά? Ένα κουμπί δεν μπορεί να είναι πολύ φανταχτερό. Κοιτάξτε ξανά το κουμπί Firefox. Είναι φανταχτερός. Έχει μια πορτοκαλί αλεπού σε αυτό, αλλά εξακολουθεί να μοιάζει με ένα κουμπί. Και αυτό είναι ένα όριο που δεν μπορείτε να περάσετε. Εάν το κουμπί σας δεν μοιάζει με ένα, κανείς δεν θα το κάνει ποτέ κλικ.

Γι 'αυτό δεν υπάρχει απλή απάντηση στην οποία το καλύτερο - φανταστικό ή απλό. Απλά πρέπει να το μάθετε μόνοι σας. Πάντα διαχωρίστε τη δοκιμή. Δημιουργήστε δύο κουμπιά, ένα φανταχτερό και ένα απλό. Χρησιμοποιήστε και τα δύο ταυτόχρονα και δείτε ποια θα εκτελέσει καλύτερα. Το Google Website Optimizer θα σας βοηθήσει με αυτό.

Απλά ένα γρήγορο παράδειγμα ενός απλού κουμπιού.

ThemeFuse

Όπως μπορείτε να δείτε το κουμπί δεν χρησιμοποιεί πορτοκαλί αλεπούδες, αλλά είναι ακόμα πολύ ορατό. Στην πραγματικότητα, το ThemeFuse (ένα εξαιρετικό κατάστημα θεμάτων WordPress, στο οποίο είμαι μέρος) παρέχει κάτι που ονομάζεται shortcodes. Μεταξύ άλλων, αυτές οι shortcodes κάνουν πολύ εύκολο να δημιουργήσετε ωραία κουμπιά.

Για παράδειγμα, με μια μόνο γραμμή:

[button link = "domain.com"] Κάντε κλικ εδώ για να αγοράσετε το εκπληκτικό προϊόν μου [/ button]

Παίρνω αυτό το αποτέλεσμα:

3. Γραμματοσειρά

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

Θέλετε το αντίγραφο στο κουμπί σας να είναι όσο το δυνατόν πιο αναγνώσιμο, καθώς είναι το πιο σημαντικό κομμάτι κειμένου στη σελίδα. Τα all-caps δεν είναι καλή ιδέα. Η μεικτή περίπτωση λειτουργεί πολύ καλύτερα. Με ανάμεικτη περίπτωση εννοώ το πρώτο γράμμα κάθε λέξης που είναι κεφαλαίο χαρακτήρα. (Εκτός από λέξεις όπως “Για”, “ο”, “και”, και τα λοιπα.)

(Πηγή εικόνας: Gomediazine)

Μερικές ασφαλείς γραμματοσειρές που μπορείτε να χρησιμοποιήσετε είναι: Arial, Helvetica, Franklin Gothic, Myriad, ή οποιαδήποτε άλλη κλασική γραμματοσειρά sans-serif, πραγματικά.

Τώρα τι γίνεται με το χρώμα. Το αντίγραφο πρέπει φυσικά να είναι σε μεγάλη αντίθεση με το χρώμα του κουμπιού. Δεν θέλετε γκρι-γκρι. Θέλετε ασπρόμαυρο ή μπλε σε πορτοκαλί.

Και πάλι, το κείμενο πρέπει να είναι ευανάγνωστο.

4. Τοποθέτηση

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

Τοποθετήστε το στο πιο προφανή θέση. Μην προσπαθήσετε να είστε δημιουργικοί εδώ. Η τοποθέτηση πρέπει να είναι προφανής στον πελάτη / χρήστη.

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

Φυσικά, πρέπει να είναι το πιο ορατό μέρος την ίδια στιγμή. Αυτό σημαίνει δύο πράγματα:

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

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

5. Επιπλέον στοιχεία

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

Το αγαπημένο μου παράδειγμα - το παράδειγμα του Firefox - χρησιμοποιεί ένα πραγματικά δροσερό στοιχείο - την πορτοκαλί αλεπού (γνωστός και ως το λογότυπό τους).

Ένας κανόνας είναι να χρησιμοποιήσετε επιπλέον στοιχεία που υπογραμμίστε τον σκοπό του κουμπιού. Για παράδειγμα, δύο βέλη που δείχνουν προς τα κάτω δουλεύουν τέλεια για ένα κουμπί λήψης. Ένα εικονίδιο καλαθιού αγορών λειτουργεί πολύ με ένα κουμπί add-to-cart (το παράδειγμα του Amazon παραπάνω). Ο μεγεθυντικός φακός λειτουργεί εξαιρετικά με ένα κουμπί αναζήτησης. Και ούτω καθεξής.

Μπορείτε επίσης να χρησιμοποιήσετε ορισμένα στοιχεία επωνυμίας. Παραδείγματος χάριν τα πράγματα όπως: το πρότυπο εικονίδιο RSS με το κουμπί εγγραφής στο feed, το εικονίδιο πουλιών με το κουμπί "follow-me-on-twitter", μια πορτοκαλί αλεπού με κουμπί download-firefox, το δικό σας λογότυπο με το buy- κουμπί ουσίας.

Ορίστε μερικά παραδείγματα:

Wakeinteractive

Commercialiq

Mediatemple

Unlocking.com

Sofasurfer.eu

Μεταφόρτωση

Δύναμη του "ελεύθερου"

Ένα ακόμη κόλπο είναι η χρήση της πιο ισχυρής λέξης στην αγγλική γλώσσα - ΔΩΡΕΑΝ. Κάθε φορά που διαφημίζεται κάτι ως ελεύθερο, οι άνθρωποι αρχίζουν να ενεργούν με προβλέψιμο παράλογο (δείτε ένα μεγάλο βιβλίο από το Dan Ariely, "Η ανατροπή του ανορθολογισμού" για να μάθετε τι εννοώ.)

Περισσότερα παραδείγματα:

Freshbooks

Wufoo

Freeagent.com

Τι έπεται?

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

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