Δύο στις τρεις υποβολές φορμών γίνονται πια από κινητό. Παρόλα αυτά, οι περισσότερες ιστοσελίδες σχεδιάζουν τις φόρμες τους σε υπολογιστή και μετά τις στριμώχνουν σε οθόνη κινητού. Το αποτέλεσμα: φόρμες που εκνευρίζουν στη συμπλήρωση, εγκαταλείπονται πιο συχνά και μετατρέπουν λιγότερους επισκέπτες σε πελάτες.
Ο σχεδιασμός φορμών για κινητό δεν είναι να μικραίνεις τις φόρμες του υπολογιστή. Είναι να ξανασκεφτείς ολόκληρη την εμπειρία για ένα άτομο που κρατά μια οθόνη 6 ιντσών, χρησιμοποιεί τον αντίχειρά του, μέσα σε ένα κουνημένο λεωφορείο ή σε μια γεμάτη καφετέρια. Όλα αλλάζουν. Ο διαθέσιμος χώρος μικραίνει. Οι στόχοι αφής μεγαλώνουν. Το πληκτρολόγιο εμφανίζεται και κρύβει τη μισή φόρμα. Ο επισκέπτης διακόπτεται και φεύγει.
Ο σχεδιασμός φορμών με προτεραιότητα στο κινητό (mobile-first) σημαίνει να βελτιστοποιείς κάθε λεπτομέρεια μιας φόρμας για τον τρόπο που οι άνθρωποι χρησιμοποιούν πραγματικά τα κινητά. Αυτό το κεφάλαιο καλύπτει τις συγκεκριμένες αλλαγές που μειώνουν την εγκατάλειψη, επιταχύνουν την ολοκλήρωση και μετατρέπουν περισσότερους επισκέπτες κινητού σε leads ή πελάτες.
Οι φόρμες κινητού που σχεδιάστηκαν για υπολογιστή χάνουν πελάτες
Δες τι γίνεται όταν κάποιος ανοίγει μια φόρμα στο κινητό του σε σχέση με τον υπολογιστή. Ο χρήστης κινητού έχει λιγότερο χώρο οθόνης, λιγότερη υπομονή και περισσότερες περισπάσεις. Ζογκλάρει πολλά πράγματα. Η προσοχή του είναι κατακερματισμένη. Μια άβολη αλληλεπίδραση και φεύγει.
Τα δεδομένα το επιβεβαιώνουν. Οι φόρμες με κακό σχεδιασμό για κινητό βλέπουν τα ποσοστά εγκατάλειψης να ανεβαίνουν 20-40 ποσοστιαίες μονάδες σε σχέση με τον υπολογιστή. Ένα μόνο κακοτοποθετημένο πεδίο μπορεί να προκαλέσει κύμα εγκαταλείψεων. Ένα μικρό κουμπί που δύσκολα πατιέται δημιουργεί τριβή που πολλαπλασιάζεται σε χιλιάδες υποβολές.
Αυτό όμως που χάνουν οι περισσότερες επιχειρήσεις: η βελτιστοποίηση για κινητό δεν καθυστερεί τους χρήστες υπολογιστή. Μια φόρμα που σχεδιάστηκε πρώτα για κινητό και μετά βελτιώθηκε για μεγαλύτερες οθόνες δουλεύει στην πραγματικότητα καλύτερα για όλους. Πιο συμπαγείς διατάξεις. Καλύτερη απόσταση. Σαφέστερη ιεράρχηση. Αυτά δεν είναι συμβιβασμοί του κινητού: είναι βελτιώσεις σχεδιασμού.
Η πρόκληση του σχεδιασμού φορμών κινητού: τι είναι πραγματικά διαφορετικό
Οι φόρμες κινητού αντιμετωπίζουν περιορισμούς που δεν έχουν οι φόρμες υπολογιστή. Αν καταλάβεις τι αλλάζει, σχεδιάζεις εξυπνότερα:
Ο χώρος οθόνης είναι περιορισμένος
Η οθόνη ενός κινητού δείχνει περίπου 30-40% του περιεχομένου που μπορεί να δείξει ταυτόχρονα η οθόνη ενός υπολογιστή. Κάθε στοιχείο πιάνει φυσικό χώρο. Οι έξτρα ετικέτες, οι οδηγίες, οι υποδείξεις και τα πεδία της φόρμας ανταγωνίζονται για τον ίδιο μικροσκοπικό χώρο. Το πληκτρολόγιο εμφανίζεται και μικραίνει ακόμα περισσότερο τον διαθέσιμο χώρο. Οι μεγάλες παράγραφοι οδηγιών φεύγουν εκτός οθόνης.
Οι στόχοι αφής είναι μεγαλύτεροι και λιγότερο ακριβείς
Ένα δάχτυλο έχει πλάτος 40-50 pixels. Ο δείκτης του ποντικιού είναι 1 pixel. Αυτό σημαίνει ότι τα κουμπιά, τα checkboxes, τα radio buttons και οι στόχοι συνδέσμων πρέπει να είναι σημαντικά μεγαλύτεροι στο κινητό για να πατιούνται εύκολα. Τα τυπικά μεγέθη που προτείνουν οι μεγάλοι κατασκευαστές συστημάτων κινητών είναι 44x44 pixels τουλάχιστον. Αν είναι πολύ μικρά, οι χρήστες αστοχούν, εκνευρίζονται και εγκαταλείπουν τη φόρμα.
Τα πληκτρολόγια παίρνουν τον έλεγχο
Στο κινητό, όταν ο χρήστης πατά ένα πεδίο φόρμας, το πληκτρολόγιο ανεβαίνει και καλύπτει τη μισή οθόνη. Κάποια πεδία ενεργοποιούν διαφορετικά πληκτρολόγια: τα πεδία email δείχνουν το σύμβολο @, τα πεδία αριθμών κρύβουν τα γράμματα, τα πεδία ημερομηνίας ανοίγουν επιλογείς ημερολογίου. Κάθε τύπος πληκτρολογίου αλλάζει όσα βλέπει ο χρήστης και τον τρόπο που αλληλεπιδρά. Σχεδίασε για καθένα ξεχωριστά.
Το πλαίσιο αλλάζει συνεχώς
Οι χρήστες υπολογιστή κάθονται και συμπληρώνουν μια φόρμα χωρίς διακοπές. Οι χρήστες κινητού συμπληρώνουν φόρμες στο τρένο, σε καταστήματα, ανάμεσα σε άλλες εφαρμογές. Παίρνουν μια ειδοποίηση, αλλάζουν εφαρμογή, επιστρέφουν πέντε λεπτά αργότερα. Η κύλιση μοιάζει ατελείωτη. Τα πεδία της φόρμας συγχέονται. Κάθε βήμα που απαιτεί μνήμη ή αλλαγή πλαισίου κάνει τους ανθρώπους να τα παρατούν.
Ένα χέρι χειρίζεται τη συσκευή
Οι περισσότεροι χρήστες κινητού κρατούν τη συσκευή με ένα χέρι και πλοηγούνται με τον αντίχειρα. Τα κουμπιά κάτω δεξιά είναι προσβάσιμα. Τα κουμπιά στην κορυφή μιας ψηλής φόρμας απαιτούν δεύτερο χέρι ή άβολο τέντωμα. Οι ετικέτες στην αριστερή πλευρά των πεδίων διαβάζονται πιο δύσκολα ενώ κρατάς τη θέση του αντίχειρα. Σχεδίασε για χειρισμό με ένα χέρι.
Κανόνας 1: Μείωσε τον αριθμό των πεδίων που ζητάς
Κάθε πεδίο που ζητάς είναι ένα ακόμα πάτημα, μια ακόμα απόφαση, μια ακόμα ευκαιρία να φύγει κάποιος. Η φόρμα δεν χρειάζεται τα πάντα. Χρειάζεται μόνο ό,τι πραγματικά χρησιμοποιείς για να επικοινωνήσεις.
Κοίτα τις πραγματικές περιπτώσεις χρήσης σου. Μια φόρμα επικοινωνίας σπάνια χρειάζεται μεσαίο όνομα, μέγεθος εταιρείας ή κατηγορία κλάδου στην πρώτη υποβολή. Μια φόρμα κράτησης δεν χρειάζεται το πατρικό όνομα της μητέρας του πελάτη. Μια εγγραφή στο newsletter δεν χρειάζεται τον ΤΚ την πρώτη μέρα. Μπορείς να ζητήσεις περισσότερες πληροφορίες αργότερα, όταν έχεις ήδη χτίσει εμπιστοσύνη.
Ένα μεγάλο ταξιδιωτικό site δοκίμασε αυτή την αρχή και γλίτωσε $12 million τον χρόνο αφαιρώντας προαιρετικά πεδία από τη φόρμα κρατήσεών του. Οι χρήστες ολοκλήρωσαν περισσότερες φόρμες. Έγιναν περισσότερες μετατροπές. Η απλοποίηση απέδωσε.
Ξεκίνα με το απόλυτο ελάχιστο. Στο κινητό ο κανόνας είναι αυστηρότερος: αν δεν το χρειάζεσαι για να ολοκληρωθεί η βασική ενέργεια, αφαίρεσέ το. Δοκίμασε να αφαιρείς πεδία ένα ένα και δες το ποσοστό ολοκλήρωσης να ανεβαίνει.
Κανόνας 2: Στοίβαξε τα πεδία σε μία στήλη
Οι διατάξεις δύο στηλών στο κινητό είναι λάθος. Απαιτούν οριζόντια κύλιση, δημιουργούν μπερδεμένη οπτική ιεράρχηση και σπαταλούν οριζόντιο χώρο. Μία στήλη, στοιβαγμένη κάθετα, είναι η πιο γρήγορη στη σάρωση και τη συμπλήρωση.
Κάθε πεδίο παίρνει όλο το πλάτος. Οι ετικέτες βρίσκονται πάνω από το πεδίο, όχι δίπλα. Ο χρήστης κυλά προς τα κάτω, διαβάζει την ετικέτα, πατά το πεδίο, πληκτρολογεί και πάει στο επόμενο. Η ροή είναι γραμμική. Το γνωστικό φορτίο είναι χαμηλό.
Αντίσταση στον πειρασμό να βάλεις όνομα και επώνυμο δίπλα δίπλα, ή διεύθυνση και ΤΚ στην ίδια γραμμή. Η κάθετη στοίβαξη είναι πιο αργή στον υπολογιστή, ναι. Αλλά το κινητό είναι τα δύο τρίτα της επισκεψιμότητάς σου. Βελτιστοποίησε για την πλειονότητα.
Κανόνας 3: Κάνε τους στόχους αφής αρκετά μεγάλους για να πατιούνται αξιόπιστα
Τα κουμπιά πρέπει να είναι τουλάχιστον 44x44 pixels. Τα checkboxes και τα radio buttons πρέπει να είναι τουλάχιστον 40x40 pixels. Τα μικρά κουμπιά αναγκάζουν τους χρήστες να σημαδεύουν προσεκτικά ή να πατούν πολλές φορές. Χτίζεται εκνευρισμός. Φεύγουν.
Παρακολούθησε τη δική σου χρήση του κινητού για μια μέρα. Πρόσεξε πόσα πατήματα αστοχούν. Ακόμα και οι έμπειροι χρήστες αστοχούν. Σχεδίασε για το ποσοστό αστοχίας που είναι ενσωματωμένο στα ανθρώπινα δάχτυλα.
Μετράει και η απόσταση ανάμεσα στους στόχους αφής. Αν ένα κουμπί "ναι" είναι ακριβώς δίπλα σε ένα κουμπί "όχι", οι χρήστες θα πατήσουν το λάθος. Πρόσθεσε 10-15 pixels χώρου ανάμεσα στα διαδραστικά στοιχεία.
Κανόνας 4: Βάλε τις ετικέτες πάνω από τα πεδία, όχι μέσα σε αυτά
Το κείμενο placeholder μέσα στα πεδία εξαφανίζεται μόλις ο χρήστης αρχίσει να πληκτρολογεί. Ξεχνά σε τι χρησίμευε το πεδίο. Μετά κάνει λάθος, βλέπει σφάλμα και δεν ξέρει τι να διορθώσει.
Οι ετικέτες πρέπει να βρίσκονται έξω και πάνω από το πεδίο. Σαφείς, ορατές, πάντα παρούσες. Όταν ο χρήστης πατά το πεδίο και εμφανίζεται το πληκτρολόγιο, η ετικέτα μένει ορατή και του θυμίζει τι πληκτρολογεί.
Μια ετικέτα μέσα σε πεδίο είναι απλώς μια ευκολία για τον σχεδιαστή. Γλιτώνει λίγα pixels χώρου. Σου κοστίζει μετατροπές.
Κανόνας 5: Διάλεξε τον σωστό τύπο πεδίου για το πληκτρολόγιο του κινητού
Οι διαφορετικοί τύποι πεδίων ενεργοποιούν διαφορετικά πληκτρολόγια στις κινητές συσκευές. Χρησιμοποίησέ τους για να κάνεις την εισαγωγή δεδομένων πιο γρήγορη και ακριβή:
Διευθύνσεις email
Χρησιμοποίησε `type="email"` για να ενεργοποιήσεις πληκτρολόγιο με ορατό το σύμβολο @ και τα πλήκτρα .com/.org. Οι χρήστες δεν χρειάζεται να ψάχνουν ειδικούς χαρακτήρες. Γίνεται αυτόματα και επικύρωση.
Αριθμοί τηλεφώνου
Χρησιμοποίησε `type="tel"` για να εμφανίσεις αριθμητικό πληκτρολόγιο. Παράλειψε την περίπλοκη μορφοποίηση που χωρίζει το πεδίο σε τμήματα (κωδικός περιοχής)-αριθμός. Οι χρήστες δυσκολεύονται με τα άκαμπτα τμήματα πεδίων και σβήνουν με backspace στο λάθος κομμάτι. Ένα απλό πεδίο τηλεφώνου που δέχεται ψηφία και κενά είναι πιο γρήγορο.
Αριθμοί και ποσότητες
Χρησιμοποίησε `type="number"` για να δείχνει το πληκτρολόγιο μόνο αριθμούς. Κρύψε τα γράμματα. Κάποια πεδία αριθμών χρειάζονται δεκαδικά: χρησιμοποίησε `inputmode="decimal"` για να τα επιτρέψεις.
Ημερομηνίες
Χρησιμοποίησε `type="date"` για να ενεργοποιήσεις εγγενή επιλογέα ημερομηνίας αντί να ζητάς από τους χρήστες να πληκτρολογήσουν 03/15/2026. Ο επιλογέας ημερολογίου είναι πιο γρήγορος, με λιγότερα λάθη και μοιάζει εγγενής στο κινητό.
URL
Χρησιμοποίησε `type="url"` για να δείξεις πληκτρολόγιο με την κάθετο και το πλήκτρο .com. Οι χρήστες μπορούν να γράψουν μια διεύθυνση ιστοσελίδας χωρίς να ψάχνουν ειδικούς χαρακτήρες.
Κάθε τύπος πεδίου λέει στο πρόγραμμα περιήγησης του κινητού τι δεδομένα περιμένεις. Το πρόγραμμα περιήγησης βελτιστοποιεί τότε το πληκτρολόγιο ώστε να ταιριάζει. Δεν χρειάζεται να εξηγήσεις τη μορφή. Το πληκτρολόγιο κάνει τη δουλειά.
Κανόνας 6: Γράψε σαφή μηνύματα σφάλματος που εμφανίζονται σε πραγματικό χρόνο
Όταν κάποιος συμπληρώνει μια φόρμα στο κινητό και πατά αποστολή μόνο για να δει "Μη έγκυρη διεύθυνση email", έχει ήδη ξεχάσει τι πληκτρολόγησε. Δεν ξέρει ποιο πεδίο προκάλεσε το σφάλμα. Σε μικρή οθόνη, το μήνυμα σφάλματος μπορεί να είναι κάτω από το σημείο που φαίνεται. Πρέπει να κυλήσει πίσω πάνω.
Αντί γι' αυτό, επικύρωσε τα πεδία καθώς τα συμπληρώνει ο χρήστης. Μόλις πάει στο επόμενο πεδίο, έλεγξε αυτό που μόλις άφησε. Αν υπάρχει σφάλμα, δείξε το αμέσως, ακριβώς κάτω από το πεδίο. Βλέπει το πρόβλημα ενώ το πλαίσιο είναι ακόμα στο μυαλό του.
Τα μηνύματα σφάλματος πρέπει να είναι συγκεκριμένα. ΛΑΘΟΣ: "Μη έγκυρη εισαγωγή." ΣΩΣΤΟ: "Η διεύθυνση email πρέπει να περιλαμβάνει το σύμβολο @." Ο χρήστης ξέρει ακριβώς πώς να το διορθώσει.
Απόφυγε το κόκκινο χρώμα μόνο του για να σηματοδοτείς σφάλματα. Οι χρήστες με αχρωματοψία θα το χάσουν. Χρησιμοποίησε κόκκινο μαζί με εικονίδιο ή ετικέτα κειμένου. "Σφάλμα: Αυτό το πεδίο είναι υποχρεωτικό."
Κανόνας 7: Βελτιστοποίησε τα κουμπιά για αλληλεπίδραση στο κινητό
Τα κουμπιά αποστολής πρέπει να είναι μεγάλα, προφανώς πατήσιμα και τοποθετημένα εκεί που ξεκουράζεται φυσικά ο αντίχειρας. Ένα κείμενο κουμπιού 16 pixels σε κουμπί ύψους 44 pixels πατιέται εύκολα. Ένα κείμενο 14 pixels σε κουμπί 32 pixels είναι αστοχία που περιμένει να συμβεί.
Το πλάτος του κουμπιού πρέπει να καλύπτει το μεγαλύτερο μέρος του πλάτους της οθόνης, όχι να στριμώχνεται σε στενή στήλη. Τα κουμπιά πλήρους πλάτους στο κινητό μειώνουν το γνωστικό φορτίο του "πού πατάω μετά".
Απόφυγε δευτερεύοντα κουμπιά στην ίδια οθόνη εκτός αν είναι απολύτως απαραίτητα. Πάρα πολλά κουμπιά δημιουργούν παράλυση απόφασης. Μία κύρια ενέργεια ανά οθόνη είναι ο κανόνας του mobile-first.
Κανόνας 8: Χρησιμοποίησε ενδείξεις προόδου σε φόρμες πολλών βημάτων
Αν η φόρμα σου απλώνεται σε πολλές οθόνες, δείξε μια γραμμή προόδου στην κορυφή. Το "Βήμα 1 από 3" λέει στον χρήστη τι να περιμένει. Ξέρει ότι δεν συμπληρώνει μια ατελείωτη φόρμα. Βλέπει τη γραμμή τερματισμού.
Κάθε βήμα πρέπει να αναλαμβάνει ένα λογικό κομμάτι πληροφορίας. Μην πετάς πέντε διαφορετικά θέματα στο πρώτο βήμα. Σπάσε τα. Άφησε τους χρήστες να νιώθουν πρόοδο καθώς προχωρούν.
Επίτρεψε στους χρήστες να γυρνούν πίσω και να επεξεργάζονται προηγούμενα βήματα. Δεν πρέπει να νιώθουν κλειδωμένοι. Οι χρήστες κινητού είναι φοβισμένοι. Μια διέξοδος μειώνει το άγχος.
Κανόνας 9: Φρόντισε η φόρμα σου να δουλεύει με τα πληκτρολόγια και τις διακοπές του κινητού
Το πληκτρολόγιο ανεβαίνει και κρύβει τη φόρμα σου. Ο χρήστης κυλά για να δει το επόμενο πεδίο. Καλά. Τώρα έρχεται μια ειδοποίηση και το πληκτρολόγιο κλείνει. Η φόρμα είναι ορατή αλλά ο χρήστης ξέχασε τι συμπλήρωνε. Άσχημα.
Δοκίμασε τη φόρμα σου σε πραγματικό κινητό και πραγματικό πληκτρολόγιο. Κατάλαβε πόσο μέρος της φόρμας εξαφανίζεται όταν εμφανίζεται το πληκτρολόγιο. Αν ένα πεδίο κρύβεται εντελώς, δεν μπορεί να χρησιμοποιηθεί. Ξανασχεδίασε τη διάταξη ώστε το ενεργό πεδίο να μένει ορατό με ανοιχτό το πληκτρολόγιο.
Αποθήκευε την πρόοδο της φόρμας καθώς ο χρήστης συμπληρώνει κάθε πεδίο. Αν αλλάξει εφαρμογή ή η φόρμα κλείσει κατά λάθος, τα δεδομένα του μένουν. Όταν επιστρέψει, η φόρμα είναι ακριβώς όπως την άφησε. Αυτό αφαιρεί μια τεράστια πηγή εγκατάλειψης.
Κανόνας 10: Χρησιμοποίησε αυτόματη συμπλήρωση και προσυμπλήρωση για να επιταχύνεις την ολοκλήρωση
Τα κινητά αποθηκεύουν στοιχεία επικοινωνίας, διευθύνσεις email, ονόματα και στοιχεία πληρωμής. Όταν η φόρμα σου χρησιμοποιεί τυπικά ονόματα πεδίων και χαρακτηριστικά HTML, το πρόγραμμα περιήγησης μπορεί να τα συμπληρώνει αυτόματα. Ένα πεδίο τηλεφώνου με `autocomplete="tel"` θα δείχνει αποθηκευμένους αριθμούς ως προτάσεις.
Η προσυμπλήρωση πεδίων με δεδομένα που ήδη ξέρεις είναι ακόμα πιο δυνατή. Αν κάποιος συνδεθεί και ξεκινήσει μια φόρμα, το email του είναι ήδη συμπληρωμένο. Η διεύθυνσή του είναι ήδη συμπληρωμένη. Πληκτρολογεί μόνο ό,τι είναι καινούργιο. Τα ποσοστά ολοκλήρωσης ανεβαίνουν όταν οι χρήστες δεν χρειάζεται να ξαναγράψουν πληροφορίες που ήδη έχεις.
Η αυτόματη συμπλήρωση και η προσυμπλήρωση δεν είναι απάτη. Σέβονται τον χρόνο του χρήστη. Μειώνουν την πληκτρολόγηση. Μειώνουν τα λάθη. Αυξάνουν την ολοκλήρωση.
Κανόνας 11: Δοκίμασε σε πραγματικά κινητά με πραγματικούς χρήστες
Τα προγράμματα περιήγησης υπολογιστή έχουν προσομοίωση συσκευής. Προσομοιώνει οθόνη κινητού. Είναι χρήσιμη για γρήγορους ελέγχους. Δεν προσομοιώνει όμως την πραγματική εμπειρία κινητού. Το πληκτρολόγιο δεν δουλεύει με τον ίδιο τρόπο. Η κύλιση δεν αισθάνεται το ίδιο. Οι στόχοι αφής δεν απαιτούν τον πραγματικό σου αντίχειρα.
Δοκίμασε τη φόρμα σου σε πραγματικά κινητά. Ζήτα από έναν συνάδελφο να τη συμπληρώσει. Δες πού διστάζει. Δες πού κάνει λάθη. Δες πού εγκαταλείπει. Αυτά τα πραγματικά δεδομένα σου λένε περισσότερα από οποιαδήποτε λίστα ελέγχου.
Τα συνηθισμένα λάθη στις φόρμες κινητού είναι δύσκολο να εντοπιστούν χωρίς δοκιμή. Ένα κουμπί που φαίνεται μεγάλο σε προσομοιωτή υπολογιστή μπορεί να είναι πολύ μικρό σε πραγματικό κινητό υπό έντονο ήλιο. Οι ετικέτες που φαίνονται σαφείς σε ένα wireframe μπορεί να διαβάζονται δύσκολα στη γωνία που κρατιέται ένα κινητό. Μόνο η πραγματική δοκιμή αποκαλύπτει αυτά τα προβλήματα.
Πώς σε βοηθά η WEMASY στον σχεδιασμό φορμών για κινητό
Με τον δημιουργό ιστοσελίδων της WEMASY φτιάχνεις τις δικές σου σελίδες στην ιστοσελίδα σου και μπορείς να προσθέσεις μια φόρμα.
Δοκίμασε τη φόρμα σου σε πραγματικό κινητό πριν τη δημοσιεύσεις.
Δες τι περιλαμβάνει το πακέτο WEMASY σου.