Πάρε τη φόρμα οποιασδήποτε επιχείρησης και πιθανότατα θα βρεις προβλήματα σχεδιασμού που της κοστίζουν leads. Οι περισσότεροι εστιάζουν σε αυτό που ζητούν και όχι στο πώς το παρουσιάζουν. Οι επιχειρήσεις που μετατρέπουν όμως, ξέρουν ένα μυστικό: ο τρόπος που τακτοποιείς τα πεδία, ο χώρος ανάμεσά τους και το οπτικό βάρος κάθε στοιχείου κάνουν τη διαφορά ανάμεσα σε μια εύκολη και μια επίπονη εμπειρία.
Αυτή η διαφορά είναι τεράστια. Το χάσμα ανάμεσα σε ποσοστό ολοκλήρωσης 50% και 85% συχνά οφείλεται σε τρία μόνο πράγματα.
Οι αρχές σχεδιασμού φορμών είναι οι πρακτικοί κανόνες που ελέγχουν αυτή την αόρατη εμπειρία. Η διάταξη, ο χώρος και η οπτική ιεράρχηση δουλεύουν μαζί για να οδηγούν τους επισκέπτες σου μέσα από τη φόρμα με φυσικό τρόπο, χωρίς τριβή ή σύγχυση. Κατάκτησε αυτά τα τρία και κάθε φόρμα που φτιάχνεις θα είναι διαισθητική στη συμπλήρωση.
Σε αυτόν τον οδηγό θα μάθεις ακριβώς πώς να εφαρμόζεις κάθε αρχή. Χωρίς θεωρίες. Χωρίς φλυαρίες. Μόνο το πρακτικό πλαίσιο που μετατρέπει μπερδεμένες φόρμες σε μετατροπές.
Τι είναι οι αρχές σχεδιασμού φορμών;
Οι αρχές σχεδιασμού φορμών είναι οι κανόνες οργάνωσης και οπτικής παρουσίασης που κάνουν τις φόρμες να δουλεύουν. Δεν αφορούν τη διακόσμηση ή την αισθητική προτίμηση. Αφορούν τη συμπεριφορά του χρήστη. Πώς σαρώνει το ανθρώπινο μάτι μια φόρμα; Πώς ομαδοποιεί ο εγκέφαλος τις σχετικές πληροφορίες; Ποια σήματα λένε σε κάποιον ότι ένα πεδίο είναι σημαντικό, προαιρετικό ή συνδεδεμένο με άλλο πεδίο; Αυτές είναι οι ερωτήσεις που απαντά ο σχεδιασμός φορμών.
Οι καλύτερες αρχές σχεδιασμού φορμών ισχύουν για όλους τους τύπους φορμών. Είτε σχεδιάζεις φόρμα επικοινωνίας, φόρμα ολοκλήρωσης αγοράς ή φόρμα εγγραφής σε εκδήλωση, ισχύουν οι ίδιοι κανόνες διάταξης, χώρου και ιεράρχησης. Οι αρχές αυτές βασίζονται στο πώς οι άνθρωποι επεξεργάζονται πραγματικά οπτικές πληροφορίες και παίρνουν αποφάσεις υπό γνωστικό φορτίο.
Όταν οι αρχές σχεδιασμού φορμών αγνοούνται, τα ποσοστά ολοκλήρωσης καταρρέουν. Μελέτες δείχνουν ότι οι φόρμες με κακή απόσταση έχουν 20 έως 40% υψηλότερα ποσοστά εγκατάλειψης από τις φόρμες με σωστή απόσταση. Μια ασαφής οπτική ιεράρχηση κάνει τους χρήστες να προσπερνούν σημαντικά πεδία ή να συμπληρώνουν προαιρετικά πεδία που δεν σκόπευαν. Η κακή διάταξη κάνει μια φόρμα πέντε πεδίων να μοιάζει με είκοσι.
Γιατί οι αρχές σχεδιασμού φορμών μετράνε για την επιχείρησή σου
Κάθε φόρμα στην ιστοσελίδα σου είναι σημείο μετατροπής. Εκεί οι υποψήφιοι γίνονται leads, οι πελάτες ολοκληρώνουν αγορές και συλλέγονται δεδομένα. Αν οι φόρμες σου είναι δύσκολες στη χρήση, χάνεις έσοδα άμεσα.
Σκέψου τι γίνεται όταν κάποιος φτάνει στη φόρμα σου. Έχει ήδη αποφασίσει ότι θέλει να συνεργαστεί μαζί σου. Θέλει να ολοκληρώσει τη φόρμα. Το μόνο που τον εμποδίζει είναι η τριβή στον σχεδιασμό. Δεν μπορεί να καταλάβει αν ένα πεδίο είναι υποχρεωτικό ή προαιρετικό. Δεν καταλαβαίνει γιατί ζητείται μια πληροφορία. Δεν βλέπει εύκολα πού να πατήσει μετά. Έτσι φεύγει.
Οι αρχές σχεδιασμού φορμών επηρεάζουν άμεσα τα επιχειρηματικά σου μεγέθη. Οι επιχειρήσεις που εφαρμόζουν ισχυρές αρχές σχεδιασμού στις φόρμες τους βλέπουν υψηλότερα ποσοστά ολοκλήρωσης, χαμηλότερη εγκατάλειψη και καλύτερη ποιότητα δεδομένων. Μια εταιρεία τεχνολογίας που βελτίωσε την απόσταση και την οπτική ιεράρχηση των φορμών της είδε τα ποσοστά ολοκλήρωσης να ανεβαίνουν από 62% σε 84%. Ένα e-shop που αναδιοργάνωσε τη διάταξη της φόρμας ολοκλήρωσης αγοράς μείωσε την εγκατάλειψη καλαθιού κατά 23%.
Αυτό δεν είναι θεωρητικό. Έτσι αποφασίζουν οι χρήστες αν αξίζει τον χρόνο τους η φόρμα σου.
Οι τρεις βασικές αρχές σχεδιασμού φορμών: διάταξη, απόσταση και οπτική ιεράρχηση
Ο σχεδιασμός φορμών στηρίζεται σε τρεις πυλώνες. Ο καθένας έχει συγκεκριμένο σκοπό. Μαζί φτιάχνουν μια φόρμα που μοιάζει απλή και οδηγεί τους χρήστες από την αρχή ως το τέλος.
Αρχή 1: Διάταξη φόρμας
Η διάταξη είναι ο τρόπος που οργανώνεις τις πληροφορίες στη σελίδα. Είναι η φυσική τοποθέτηση των πεδίων, των ετικετών, των κουμπιών και των ενοτήτων. Μια δυνατή διάταξη κάνει αμέσως σαφές πώς συμπληρώνεται η φόρμα και με ποια σειρά.
Η πιο αποτελεσματική διάταξη φόρμας ακολουθεί δομή μίας στήλης. Δεν είναι τάση του σχεδιασμού, βασίζεται στον τρόπο που διαβάζουν οι άνθρωποι. Το μάτι κινείται από πάνω προς τα κάτω στη σελίδα. Όταν βάζεις τα πεδία σε μία στήλη, οι χρήστες περνούν μέσα από αυτά φυσικά, χωρίς να κοιτάζουν αριστερά και δεξιά ή να πηγαίνουν πίσω για να ελέγξουν μήπως έχασαν κάτι.
Οι φόρμες πολλών στηλών αναγκάζουν το μάτι να δουλεύει περισσότερο. Ο χρήστης πρέπει να αποφασίσει αν θα συμπληρώσει πρώτα την αριστερή στήλη ή τη δεξιά. Πρέπει να θυμάται πού βρισκόταν. Ακόμα και μια φόρμα δύο στηλών αυξάνει το γνωστικό φορτίο και την εγκατάλειψη. Οι φόρμες μίας στήλης μετατρέπουν σημαντικά καλύτερα, μερικές φορές κατά 20% ή περισσότερο.
Μέσα σε αυτή τη μία στήλη, τα σχετικά πεδία πρέπει να ομαδοποιούνται οπτικά. Μια φόρμα διεύθυνσης αποστολής πρέπει να έχει όλα τα πεδία διεύθυνσης μαζί (οδός, πόλη, πολιτεία, ΤΚ). Η ενότητα χρέωσης πρέπει να είναι οπτικά ξεχωριστή από την ενότητα αποστολής. Αυτές οι ομάδες λένε στους χρήστες ότι τα πεδία ανήκουν μαζί και συμπληρώνονται ως σύνολο. Τα πεδία χωρίς ομάδες μοιάζουν τυχαία και ανοργάνωτα, ακόμα κι αν οι πληροφορίες έχουν νόημα.
Και οι ετικέτες καθορίζουν τη διάταξη. Κάθε ετικέτα πρέπει να βρίσκεται ακριβώς πάνω από το πεδίο της, όχι αριστερά. Όταν οι ετικέτες βρίσκονται αριστερά των πεδίων, η απόσταση ανάμεσα στην ετικέτα και στο πεδίο μεγαλώνει, και δεν είναι σαφές ποιο πεδίο ανήκει σε ποια ετικέτα. Οι ετικέτες από πάνω κρατούν προφανή τη σχέση ετικέτας και πεδίου. Αυτό είναι ιδιαίτερα σημαντικό στο κινητό, όπου οι ετικέτες και τα πεδία δίπλα δίπλα είναι αδύνατα.
Μετράει και η θέση του κουμπιού. Το κύριο κουμπί πρόσκλησης για δράση πρέπει να βρίσκεται στο κάτω μέρος της φόρμας, ακριβώς κάτω από το τελευταίο πεδίο. Πρέπει να είναι σαφές, εμφανές και το πρώτο που πέφτει το μάτι όταν ο χρήστης τελειώσει τη συμπλήρωση. Τα δευτερεύοντα κουμπιά (όπως "Αποθήκευση ως πρόχειρο" ή "Άκυρο") πρέπει να είναι μικρότερα ή να εμφανίζονται κάτω από το κύριο κουμπί, ώστε να μην αποσπούν από τη βασική ενέργεια.
Αρχή 2: Απόσταση στις φόρμες
Η απόσταση είναι ο κενός χώρος. Είναι η απόσταση ανάμεσα στα πεδία, ανάμεσα στις ενότητες και ανάμεσα σε μια ετικέτα και το πεδίο της. Η απόσταση δεν μοιάζει με "αρχή". Μοιάζει αόρατη. Κάνει όμως την πιο σημαντική δουλειά στον σχεδιασμό της φόρμας σου.
Η σωστή απόσταση κάνει δύο πράγματα. Δημιουργεί σαφήνεια για το τι ανήκει μαζί και δίνει χώρο ανάσας που κάνει τη φόρμα να μοιάζει λιγότερο συντριπτική.
Ο κανόνας είναι απλός. Τα σχετικά πεδία πρέπει να έχουν στενή απόσταση μεταξύ τους. Τα πεδία "First Name" και "Last Name" πρέπει να έχουν 8 έως 12 pixels κάθετου χώρου ανάμεσά τους. Είναι αρκετά κοντά ώστε να μοιάζουν με ζευγάρι. Μόλις τελειώσεις μια ομάδα (όπως την ενότητα ονόματος), αύξησε τον χώρο πριν από την επόμενη ομάδα στα 24 έως 32 pixels. Αυτό το οπτικό κενό λέει στον χρήστη ότι ξεκινά νέα ενότητα.
Σκέψου την απόσταση σαν σημεία στίξης. Η στενή απόσταση λέει "αυτά ανήκουν μαζί". Η μεγάλη απόσταση λέει "αυτή είναι μια νέα σκέψη". Οι χρήστες διαβάζουν αυτά τα σήματα αμέσως.
Να τι γίνεται όταν η απόσταση είναι πολύ στενή παντού. Μια φόρμα με δέκα πεδία στριμωγμένα χωρίς χώρο ανάσας μοιάζει με τοίχο από πεδία εισαγωγής. Ο χρήστης νιώθει συντριβή πριν καν ξεκινήσει. Ο εγκέφαλός του δεν ξέρει ποια πεδία σχετίζονται με ποια άλλα. Η εγκατάλειψη γίνεται πριν συμπληρωθεί το πρώτο πεδίο.
Να τι γίνεται με τη σωστή απόσταση. Η ίδια φόρμα δέκα πεδίων μοιάζει διαχειρίσιμη. Ο χρήστης βλέπει ότι κάποια πεδία ομαδοποιούνται μαζί (διεύθυνση χρέωσης), μετά υπάρχει κενό, μετά άλλη ομάδα (διεύθυνση αποστολής). Η φόρμα μοιάζει πιο σύντομη επειδή σπάει σε εύπεπτα κομμάτια.
Μια μελέτη του 2024 για το UX των φορμών βρήκε ότι οι φόρμες με σωστή απόσταση και ομαδοποίηση έχουν 32% υψηλότερα ποσοστά ολοκλήρωσης από τις ίδιες φόρμες με στριμωγμένη διάταξη. Η μόνη μεταβλητή που άλλαξε ήταν η απόσταση.
Οι φόρμες στο κινητό χρειάζονται περισσότερο χώρο, όχι λιγότερο. Οι οθόνες κινητού είναι μικρές και τα δάχτυλα μεγάλα. Το στρίμωγμα των πεδίων στο κινητό σκοτώνει τις μετατροπές. Κάθε πεδίο χρειάζεται αρκετό περιθώριο γύρω του, ώστε ο χρήστης να το πατά χωρίς να χτυπά τα διπλανά. Δεν εννοούμε το περιθώριο μέσα στο πεδίο (αν και αυτό μετράει). Εννοούμε τον χώρο ανάμεσα στα πεδία. Μια φόρμα κινητού με γενναιόδωρη κάθετη απόσταση και διάταξη μίας στήλης μετατρέπει σημαντικά καλύτερα από μια φόρμα φτιαγμένη για υπολογιστή και μικρυμένη για κινητό.
Αρχή 3: Οπτική ιεράρχηση στις φόρμες
Η οπτική ιεράρχηση είναι η σειρά με την οποία το μάτι και ο εγκέφαλος επεξεργάζονται όσα βλέπουν. Σε μια φόρμα, είναι η διαφορά ανάμεσα σε ένα "υποχρεωτικό" πεδίο που ξεχωρίζει στον χρήστη και σε ένα που χάνεται στο φόντο. Είναι η διαφορά ανάμεσα σε ένα κύριο κουμπί αποστολής που μοιάζει πατήσιμο και σε ένα δευτερεύον κουμπί ακύρωσης που μοιάζει με κείμενο.
Η οπτική ιεράρχηση στις φόρμες δημιουργείται με τέσσερα βασικά εργαλεία. Το μέγεθος, το χρώμα, η αντίθεση και η θέση παίζουν ο καθένας ρόλο στην καθοδήγηση της προσοχής του χρήστη.
Το μέγεθος δείχνει σημασία. Μια εμφανής ετικέτα πεδίου σε γραμματοσειρά 16px είναι πιο σημαντική από το κείμενο βοήθειας στα 12px. Ένα μεγάλο κουμπί αποστολής μοιάζει πιο σημαντικό από ένα μικρό κουμπί "Reset". Η ένδειξη υποχρεωτικού πεδίου πρέπει να είναι λίγο πιο εμφανής από τις ετικέτες των προαιρετικών. Μην κάνεις αυτή την αλλαγή προφανή. Κάν' την απλώς λίγο πιο ορατή. Αυτή η διακριτική διαφορά μεγέθους καθοδηγεί το μάτι χωρίς να φωνάζει.
Το χρώμα δημιουργεί ιεράρχηση μέσω αντίθεσης. Μια σκούρα ετικέτα σε λευκό φόντο έχει υψηλή αντίθεση και ξεχωρίζει. Το ανοιχτογκρί κείμενο βοήθειας έχει χαμηλότερη αντίθεση και υποχωρεί. Ένα έντονο μπλε κουμπί αποστολής σε φόρμα με γκρι πεδία εισαγωγής έχει άμεση αντίθεση και τραβά το μάτι. Ένα δευτερεύον κουμπί στο ίδιο γκρι με το φόντο της φόρμας υποχωρεί. Το μάτι πέφτει πρώτα στην κύρια ενέργεια, ακριβώς εκεί που θέλεις.
Ο περιορισμός είναι σημαντικός. Μην χρησιμοποιείς περισσότερα από τρία οπτικά βάρη σε μία φόρμα. Ένα βάρος μπορεί να είναι χρώμα, μέγεθος, απόχρωση ή στυλ (έντονο ή κανονικό). Αν όλα είναι φωτεινά, τίποτα δεν είναι φωτεινό. Αν έχεις πέντε διαφορετικά χρώματα κειμένου, ο χρήστης δεν ξέρει πού να προσέξει. Τρία επίπεδα οπτικής σημασίας αρκούν για να καθοδηγήσουν την προσοχή χωρίς σύγχυση. Αυτός είναι ο κανόνας ιεράρχησης που παραβιάζουν οι περισσότερες φόρμες, και φαίνεται ως "δεν ήξερα ότι αυτό ήταν προαιρετικό" ή "νόμιζα ότι το κουμπί ήταν ανενεργό".
Και η θέση δημιουργεί ιεράρχηση. Το πρώτο πεδίο που βλέπει ο χρήστης είναι το πιο εμφανές. Το κύριο κουμπί πρόσκλησης για δράση στο κάτω μέρος είναι το τελευταίο που βλέπει, και είναι η ενέργεια που ολοκληρώνεται με τη μεγαλύτερη πιθανότητα. Οι ενδείξεις υποχρεωτικών πεδίων, το κείμενο βοήθειας και τα μηνύματα σφάλματος χρειάζονται θέση που τα κάνει προφανή χωρίς να αποσπούν.
Το "τεστ του μισόκλειστου ματιού" δείχνει αν δουλεύει η οπτική ιεράρχησή σου. Θόλωσε το βλέμμα σου (ή κυριολεκτικά μισόκλεισε τα μάτια) στη φόρμα σου. Τι βλέπεις πρώτο; Αν βλέπεις τα πιο σημαντικά πεδία και το κύριο κουμπί ενέργειας, η ιεράρχηση δουλεύει. Αν τα μάτια σου πηγαίνουν σε τυχαία σημεία ή μπερδεύονται για το τι να κάνουν, η ιεράρχηση θέλει δουλειά.
Πώς εφαρμόζεις τις αρχές σχεδιασμού σε κάθε τύπο φόρμας
Αυτές οι τρεις αρχές ισχύουν για κάθε φόρμα στην ιστοσελίδα σου. Μια φόρμα επικοινωνίας χρησιμοποιεί τους ίδιους κανόνες διάταξης, απόστασης και ιεράρχησης με μια φόρμα ολοκλήρωσης αγοράς, μια φόρμα εγγραφής ή μια φόρμα συμμετοχής σε εκδήλωση. Η διαφορά δεν είναι στις ίδιες τις αρχές. Η διαφορά είναι στο ποια πεδία μετράνε περισσότερο για κάθε τύπο φόρμας.
Για να εφαρμόσεις αυτές τις αρχές στις φόρμες σου, ξεκίνα από τη διάταξη. Διάλεξε μία στήλη, από πάνω προς τα κάτω. Ομαδοποίησε τα σχετικά πεδία και πρόσθεσε μεγαλύτερα κενά ανάμεσα στις ομάδες.
Μετά εφάρμοσε την απόσταση. Χρησιμοποίησε σταθερή απόσταση ανάμεσα στα πεδία μέσα σε μια ομάδα (8 έως 12px). Χρησιμοποίησε μεγαλύτερη απόσταση ανάμεσα στις ομάδες (24 έως 32px). Δοκίμασε στο κινητό και βεβαιώσου ότι κάθε πεδίο πατιέται εύκολα.
Τέλος, όρισε την οπτική ιεράρχηση. Εντόπισε τι πρέπει να προσέξει πρώτο ο χρήστης. Είναι ο τίτλος της φόρμας; Είναι η ένδειξη υποχρεωτικού; Είναι το κύριο κουμπί ενέργειας; Φρόντισε αυτό το στοιχείο να είναι οπτικά εμφανές. Κράτα όλα τα υπόλοιπα σε βοηθητικό ρόλο.
Το αποτέλεσμα είναι μια φόρμα που μοιάζει διαισθητική. Οι χρήστες δεν χρειάζεται να σκεφτούν. Τη συμπληρώνουν και την στέλνουν.
Πώς σε βοηθά η WEMASY να φτιάξεις καλύτερες φόρμες
Με τον δημιουργό ιστοσελίδων της WEMASY φτιάχνεις τις δικές σου σελίδες στην ιστοσελίδα σου και μπορείς να προσθέσεις μια φόρμα.
Σε κάθε φόρμα που φτιάχνεις, εφάρμοσε τις τρεις αρχές με τη σειρά: διάταξη, απόσταση, ιεράρχηση.
Δες τι περιλαμβάνει το πακέτο WEMASY σου.