Το χρώμα της μάρκας σου σε ένα κουμπί αποστολής λέει σε κάποιον τι να πατήσει. Το ίδιο χρώμα σε μια ετικέτα φόρμας κάνει το κείμενο δύσκολο στην ανάγνωση. Η γραμματοσειρά της μάρκας σου σε έναν τίτλο φαίνεται εκλεπτυσμένη. Η ίδια γραμματοσειρά σε μια ετικέτα πεδίου γίνεται δυσανάγνωστη στα 12 pixels. Αυτή είναι η βασική ένταση στον σχεδιασμό φορμών με ταυτότητα. Τα στοιχεία που κάνουν τη μάρκα σου αναγνωρίσιμη μπορεί να κάνουν τη φόρμα πιο δύσκολη στη συμπλήρωση.
Η στρατηγική δεν είναι να αφαιρέσεις τη μάρκα σου. Είναι να τη χρησιμοποιείς επιλεκτικά. Βάλε το χρώμα της μάρκας εκεί που οδηγεί τους ανθρώπους σε ενέργεια. Χρησιμοποίησε τη γραμματοσειρά της μάρκας εκεί που παραμένει ευανάγνωστη. Αφαίρεσε την προσωπικότητα της μάρκας εκεί που δημιουργεί τριβή. Το άρθρο εξηγεί τις συγκεκριμένες αποφάσεις που κρατούν τη φόρμα σου και με ταυτότητα και εύχρηστη.
Πού να βάζεις το χρώμα της μάρκας σε μια φόρμα
Το κύριο χρώμα της μάρκας σου ανήκει στο κουμπί αποστολής. Όταν κάποιος φτάνει στο τέλος μιας φόρμας, πρέπει να ξέρει τι να πατήσει. Ένα κουμπί στο χρώμα της μάρκας σου αναγνωρίζεται αμέσως. Το άτομο έχει ήδη δει αυτό το χρώμα σε όλη την ιστοσελίδα σου. Ξέρει ότι σημαίνει ενέργεια. Ένα κουμπί με το χρώμα της μάρκας σηματοδοτεί "αυτό ανήκει στη μάρκα σου και είναι ασφαλές να το πατήσεις".
Κράτα το φόντο της φόρμας ουδέτερο. Λευκό, υπόλευκο ή πολύ ανοιχτογκρί. Ένα ανοιχτό φόντο κάνει τα πεδία της φόρμας να ξεχωρίζουν και το κείμενο ευανάγνωστο. Πολλές μάρκες χρησιμοποιούν σκούρα φόντα στις ιστοσελίδες τους. Ένα σκούρο ναυτικό μπλε μπορεί να φαίνεται εκλεπτυσμένο στην κεφαλίδα σου. Βάλε το στο φόντο της φόρμας και ξαφνικά το λευκό κείμενο μέσα στα πεδία γίνεται πιο δύσκολο στην ανάγνωση. Οι άνθρωποι μισοκλείνουν τα μάτια. Αναρωτιούνται αν η φόρμα είναι χαλασμένη. Η φόρμα παύει να είναι πλεονέκτημα για τη μάρκα σου και γίνεται τριβή.
Εφάρμοσε το χρώμα της μάρκας διακριτικά στις καταστάσεις εστίασης των πεδίων. Όταν κάποιος πατά σε ένα πεδίο φόρμας, το πεδίο χρειάζεται οπτική ανατροφοδότηση. Εμφανίζεται ένα περίγραμμα ή αλλάζει το φόντο για να δείξει ότι το πεδίο είναι ενεργό. Χρησιμοποίησε εδώ μια πιο ανοιχτή απόχρωση του χρώματος της μάρκας σου. Όχι τον πλήρη κορεσμό του κύριου χρώματός σου. Μια πιο απαλή έκδοση δείχνει ότι το πεδίο είναι επιλεγμένο χωρίς να κυριαρχεί στη φόρμα.
Τα μηνύματα σφάλματος χρειάζονται δικό τους χρώμα. Το κόκκινο είναι το πρότυπο. Οι άνθρωποι καταλαβαίνουν το κόκκινο ως "στοπ" ή "κάτι πάει στραβά". Μην χρησιμοποιείς το χρώμα της μάρκας σου για σφάλματα ακόμα κι αν η μάρκα σου είναι κόκκινη. Αν η μάρκα σου είναι κόκκινη, πρόσθεσε μια πιο σκούρα ή πιο κορεσμένη απόχρωση ειδικά για σφάλματα. Έτσι δημιουργείται μια οπτική διάκριση ανάμεσα στο "κανονικό" και το "σφάλμα" που οι άνθρωποι αναγνωρίζουν αμέσως.
Τα μηνύματα επιτυχίας μπορούν να χρησιμοποιούν πράσινο. Το πράσινο δείχνει ολοκλήρωση και πρόοδο. Το καταλαβαίνουν όλοι. Αφού κάποιος στείλει τη φόρμα σου, μια σελίδα ή ένα μήνυμα επιτυχίας σε πράσινο μοιάζει με επιβεβαίωση.
Τα χρώματα των συνδέσμων μέσα σε μια φόρμα πρέπει να είναι το χρώμα της μάρκας σου. Οι σύνδεσμοι αναμένεται να ξεχωρίζουν με χρώμα. Το κείμενο βοήθειας ή οι επεξηγηματικοί σύνδεσμοι πρέπει να μοιάζουν συνδεδεμένοι με τη μάρκα σου αλλά ξεκάθαρα ξεχωριστοί από τα πεδία της φόρμας.
Το πρόβλημα προσβασιμότητας στις παλέτες χρωμάτων των μαρκών
Πολλές παλέτες χρωμάτων μαρκών αποτυγχάνουν στα πρότυπα αντίθεσης WCAG AA. Ένα ανοιχτό πράσινο μέντας που φαίνεται όμορφο στον οδηγό της μάρκας σου μπορεί να έχει αναλογία αντίθεσης 2 προς 1 σε λευκό. Το WCAG AA απαιτεί 4.5 προς 1. Ένα εκλεπτυσμένο μωβ μπορεί να αποτυγχάνει απέναντι στο φόντο που διάλεξες για τα πεδία. Είναι συνηθισμένο. Διορθώνεται επίσης.
Δοκίμασε τα χρώματα της μάρκας σου πριν τα χρησιμοποιήσεις σε φόρμες. Χρησιμοποίησε ένα εργαλείο ελέγχου αντίθεσης. Αν το χρώμα της μάρκας σου δεν πληροί το WCAG AA, έχεις επιλογές. Χρησιμοποίησε μια πιο σκούρα ή πιο κορεσμένη εκδοχή του χρώματος. Ένα πράσινο μέντας μπορεί να έχει μια παραλλαγή σκούρου πράσινου στην παλέτα σου που πληροί την αναλογία. Ή χρησιμοποίησε το χρώμα της μάρκας μόνο ως τόνο σε κουμπιά, όπου η αντίθεση είναι φυσικά υψηλότερη. Χρησιμοποίησε ένα σκούρο ουδέτερο, όπως το ανθρακί, για κείμενο που χρειάζεται αντίθεση.
Αυτό είναι ιδιαίτερα κρίσιμο για τις ετικέτες. Αν οι ετικέτες σου είναι σε ανοιχτό χρώμα μάρκας, κάποιος με χαμηλή όραση θα δυσκολευτεί. Θα δυσκολευτεί και κάποιος που βλέπει τη φόρμα σε φωτεινή οθόνη κινητού σε εξωτερικό χώρο. Οι ετικέτες δεν είναι διακόσμηση. Είναι κρίσιμη πληροφορία. Κράτα τες σκούρες με δυνατή αντίθεση. Φύλαξε το χρώμα της μάρκας για κουμπιά και τόνους, όπου δεν θυσιάζει την αναγνωσιμότητα.
Πώς να διαλέξεις γραμματοσειρά για αναγνωσιμότητα στις φόρμες
Η μάρκα σου πιθανότατα έχει μια ξεχωριστή γραμματοσειρά. Οι γραμματοσειρές με πατούρες (serif) δείχνουν κύρος στα δικηγορικά γραφεία. Οι γεωμετρικές χωρίς πατούρες (sans-serif) μοιάζουν μοντέρνες για εταιρείες τεχνολογίας. Οι παιχνιδιάρικες γραφικές δουλεύουν για δημιουργικές μάρκες. Αυτές οι γραμματοσειρές είναι πολύτιμα στοιχεία της μάρκας. Βοηθούν τους ανθρώπους να αναγνωρίζουν τη μάρκα σου. Σε μια φόρμα όμως δημιουργούν προβλήματα.
Οι ετικέτες της φόρμας πρέπει να σαρώνονται εύκολα και να διαβάζονται σε μικρά μεγέθη. Οι περισσότερες διακοσμητικές γραμματοσειρές μαρκών δεν διαβάζονται. Μια χειρόγραφη γραμματοσειρά είναι όμορφη σε έναν τίτλο στα 36 pixels. Στα 13 pixels για ετικέτα φόρμας, είναι σχεδόν δυσανάγνωστη. Μια λεπτή γεωμετρική γραμματοσειρά φαίνεται κομψή σε μεγαλύτερα μεγέθη. Στα 12 pixels, γίνεται δύσκολη στην ανάγνωση. Μια πολύπλοκη γραμματοσειρά με πατούρες και διακοσμητικά στοιχεία δημιουργεί οπτικό θόρυβο σε ένα πεδίο φόρμας που πρέπει να είναι σαφές και λειτουργικό.
Η λύση είναι να χρησιμοποιείς μια καθαρή γραμματοσειρά sans-serif για όλο το κείμενο της φόρμας. Ετικέτες, κείμενο βοήθειας, κείμενο placeholder, μηνύματα σφάλματος. Όλα πρέπει να είναι σε μια απλή, ευανάγνωστη γραμματοσειρά, όπως μια κλασική γραμματοσειρά συστήματος. Αυτό δεν είναι εγκατάλειψη της μάρκας σου. Είναι επιλογή σαφήνειας εκεί που μετράει. Η μάρκα σου φαίνεται στο χρώμα του κουμπιού, στη διάταξη, στη συνολική αισθητική. Οι ετικέτες της φόρμας δεν χρειάζεται να σηκώσουν ολόκληρο το βάρος της ταυτότητας της μάρκας.
Αν η μάρκα σου χρησιμοποιεί καθαρή, ευανάγνωστη sans-serif, δοκίμασέ τη στα 12 έως 14 pixels σε κινητό τηλέφωνο. Διαβάζεται καθαρά; Αν ναι, μπορείς να τη χρησιμοποιήσεις στη φόρμα σου. Αν όχι, χρησιμοποίησε εφεδρική γραμματοσειρά.
Το κείμενο του κουμπιού αποστολής μπορεί να χρησιμοποιεί τη γραμματοσειρά της μάρκας σου αν διαβάζεται στα 14 έως 16 pixels. Το κείμενο του κουμπιού είναι μεγαλύτερο από των ετικετών. Μια διακοσμητική γραμματοσειρά έχει περισσότερο χώρο να δουλέψει. Αν όμως η γραμματοσειρά της μάρκας σου αποτυγχάνει στα μεγέθη των ετικετών, θα αποτύχει και στα πεδία της φόρμας. Διάλεξε πρώτα την αναγνωσιμότητα και δεύτερη την προσωπικότητα της μάρκας.
Πώς χτίζεται η οπτική ιεράρχηση όταν δουλεύουν μαζί η τυπογραφία και το χρώμα
Η οπτική ιεράρχηση σε μια φόρμα καθοδηγεί ένα άτομο από πάνω προς τα κάτω. Ποια στοιχεία είναι τα πιο σημαντικά; Ποια είναι δευτερεύοντα; Σε μια φόρμα, η ιεράρχηση είναι απλή και συγκεκριμένη. Οι ετικέτες των πεδίων είναι πρωτεύουσες. Το κείμενο βοήθειας είναι δευτερεύον. Το κουμπί αποστολής είναι η πρόσκληση για δράση.
Χρησιμοποίησε το μέγεθος γραμματοσειράς για να στηρίξεις αυτή την ιεράρχηση. Οι ετικέτες πρέπει να είναι 13 έως 16 pixels. Το κείμενο βοήθειας πρέπει να είναι μικρότερο και λίγο πιο ανοιχτό στο χρώμα, γύρω στα 12 pixels. Τα μηνύματα σφάλματος πρέπει να είναι εξίσου ευανάγνωστα με τις ετικέτες. Μην κάνεις το κείμενο σφάλματος μικρότερο ή πιο ανοιχτό. Οι άνθρωποι πρέπει να βλέπουν τα σφάλματα αμέσως. Κάνε το κείμενο σφάλματος εξίσου εμφανές με την ετικέτα που διορθώνει.
Το χρώμα της μάρκας σου στηρίζει αυτή την ιεράρχηση. Το κουμπί αποστολής έχει το κύριο χρώμα της μάρκας σου και διαφέρει ορατά από τις ετικέτες των πεδίων. Το χρώμα από μόνο του λέει στον χρήστη "αυτή είναι η ενέργεια που κάνεις μετά". Οι ετικέτες πρέπει να είναι σκούρες και ουδέτερες. Όποιο χρώμα μάρκας υπάρχει στις ετικέτες πρέπει να είναι διακριτικό και δευτερεύον ως προς την αναγνωσιμότητα.
Οι επικεφαλίδες ενοτήτων σε μια μακρύτερη φόρμα μπορούν να χρησιμοποιούν το χρώμα της μάρκας σου. Αυτό δημιουργεί οπτικές παύσεις ανάμεσα στις ομάδες πεδίων. Μια επικεφαλίδα ενότητας δεν είναι πεδίο εισαγωγής. Έχει χώρο να είναι πιο εκφραστική από τις ετικέτες. Εκμεταλλεύσου αυτόν τον χώρο κρατώντας τις ετικέτες σαφείς και ευανάγνωστες.
Πότε να εφαρμόζεις την προσωπικότητα της μάρκας και πότε να την αφαιρείς
Η φόρμα είναι ένα εργαλείο που κάποιος χρησιμοποιεί για να καταφέρει κάτι. Αυτό το άτομο θέλει να περάσει γρήγορα μέσα από τη φόρμα. Κάθε επιλογή σχεδιασμού πρέπει είτε να τον βοηθά σε αυτό είτε να εξαφανίζεται.
Η προσωπικότητα της μάρκας ανήκει σε σημεία όπου προσθέτει εμπιστοσύνη. Η συνολική οπτική ποιότητα της φόρμας σου, η απόσταση ανάμεσα στα πεδία, η συνέπεια χρωμάτων και τυπογραφίας δείχνουν ότι η μάρκα σου νοιάζεται για τις λεπτομέρειες. Μια φόρμα με επαγγελματική, προσεγμένη εμφάνιση ανήκει σε μια προσεγμένη, επαγγελματική μάρκα. Αυτή είναι η προσωπικότητα της μάρκας σε δράση. Βοηθά τους ανθρώπους να σε εμπιστεύονται.
Η προσωπικότητα της μάρκας δεν ανήκει σε σημεία όπου δημιουργεί τριβή. Μην χρησιμοποιείς ετικέτες με κεφαλαία γράμματα επειδή φαίνονται πιο επιβλητικές. Μην χρησιμοποιείς πολύ ανοιχτό κείμενο σε πιο σκούρο φόντο επειδή νιώθεις ότι είναι πιο εκλεπτυσμένο. Μην χρησιμοποιείς στενή, πολύπλοκη γραμματοσειρά για να χωρέσει περισσότερο κείμενο επειδή ταιριάζει με την αισθητική της μάρκας σου. Αυτές οι επιλογές βλάπτουν τη χρηστικότητα. Καθυστερούν τους ανθρώπους. Ο σχεδιασμός φορμών είναι από τα λίγα μέρη όπου μια μάρκα πρέπει να πει "η αισθητική μου περνά σε δεύτερη μοίρα μπροστά στο να βοηθήσω τους ανθρώπους να ολοκληρώσουν αυτή την εργασία".
Δοκίμασε τις επιλογές σχεδιασμού της μάρκας σου σε κινητό τηλέφωνο. Αν οι επιλογές προσωπικότητας κάνουν τη φόρμα πιο δύσκολη στη συμπλήρωση σε μικρή οθόνη, δεν προσθέτουν αξία. Αφαίρεσέ τες. Γδύσε τη φόρμα μέχρι να μοιάζει εύκολη στο κινητό. Μετά εφάρμοσε επιλογές μάρκας που δεν εμποδίζουν αυτή την ευκολία.
Πώς λειτουργεί η συνέπεια στους διαφορετικούς τύπους φορμών σου
Μια μάρκα μπορεί να έχει διαφορετικούς τύπους φορμών. Μια φόρμα επικοινωνίας είναι σύντομη και συνομιλητική. Μια φόρμα ολοκλήρωσης αγοράς είναι μεγαλύτερη και πιο δομημένη. Μια έρευνα είναι διερευνητική. Μια εγγραφή στο newsletter είναι ελάχιστη. Η καθεμία έχει διαφορετικό σκοπό. Όλες όμως πρέπει να μοιάζουν ότι ανήκουν στην ίδια μάρκα.
Η βασική οπτική γλώσσα πρέπει να μένει ίδια σε κάθε φόρμα. Το κουμπί αποστολής είναι πάντα στο κύριο χρώμα της μάρκας σου. Οι ετικέτες είναι πάντα στην ίδια ευανάγνωστη γραμματοσειρά. Η απόσταση των πεδίων ακολουθεί το ίδιο μοτίβο. Όταν κάποιος περνά από μια φόρμα επικοινωνίας σε μια φόρμα ολοκλήρωσης αγοράς και μετά σε μια έρευνα, πρέπει να νιώθει ότι βρίσκεται στην ίδια εμπειρία μάρκας, ακόμα κι αν η φόρμα έχει διαφορετικό σκοπό.
Φτιάξε έναν οδηγό στυλ φορμών και τεκμηρίωσε τις αποφάσεις σου. Η γραμματοσειρά για τις ετικέτες είναι μια συγκεκριμένη sans-serif στα 14 pixels. Το χρώμα του κύριου κουμπιού είναι ο επίσημος κωδικός χρώματος της μάρκας σου. Η κατάσταση εστίασης των πεδίων είναι αυτή η συγκεκριμένη ανοιχτή απόχρωση του χρώματος της μάρκας σου. Το κείμενο βοήθειας είναι γκρι στα 12 pixels. Όταν έχεις αυτές τις αποφάσεις τεκμηριωμένες, κάθε φόρμα που φτιάχνει η ομάδα σου θα είναι συνεπής. Και η δημιουργία τους γίνεται πιο γρήγορη, γιατί οι αποφάσεις έχουν ήδη παρθεί.
Πώς σε βοηθά η WEMASY να φτιάξεις φόρμες με την ταυτότητά σου
Με τον δημιουργό ιστοσελίδων της WEMASY φτιάχνεις τις δικές σου σελίδες στην ιστοσελίδα σου και μπορείς να προσθέσεις μια φόρμα.
Κράτα το χρώμα της μάρκας για το κουμπί και τους τόνους, και τα σκούρα ουδέτερα χρώματα για το κείμενο.
Δοκίμασε τη φόρμα σου στο κινητό πριν τη δημοσιεύσεις και κράτα τις επιλογές σου σε έναν οδηγό στυλ.
Δες τι περιλαμβάνει το πακέτο WEMASY σου.