7 μυστικά για το σχεδιασμό των μεγάλων μορφών
Σχεδόν κάθε σχεδίαση ιστοσελίδων περιλαμβάνει κάποιο τύπο μορφής. Από απλή συλλογή διευθύνσεων ηλεκτρονικού ταχυδρομείου για εγγραφή σε ενημερωτικό δελτίο ή ειδοποίηση σε πλήρεις ενότητες συλλογής πληρωμής, είναι επιτακτικό να σχεδιάσετε μια φόρμα που είναι εύκολη στη χρήση και κατανόηση.
Τα πρότυπα του σχεδιασμού της φόρμας εξελίσσονται επίσης. Παρόλο που πολλές μορφές περιελάμβαναν πολλές στήλες και ζήτησαν πολλές πληροφορίες, οι περισσότερες βέλτιστες πρακτικές προτείνουν τώρα να διατηρούνται μορφές όσο το δυνατόν απλούστερες. Και υπάρχουν πολλά για το σχεδιασμό επίσης. Μια καλή φόρμα είναι σαρωτή, δεν απαιτεί πολύ πληκτρολόγηση και περιλαμβάνει έξυπνη σήμανση και μορφοποίηση για να βοηθήσει τους χρήστες να συμπληρώσουν τις φόρμες σωστά την πρώτη φορά.
Εδώ είναι μερικά μυστικά για να εξασφαλίσετε ότι σχεδιάζετε μια φόρμα που οι χρήστες πραγματικά συμπληρώνουν.
1. Εύκολη σάρωση και ανάγνωση
Γνωρίζετε ότι οι χρήστες σαρώνουν ιστότοπους για να συλλέγουν πληροφορίες και να καθορίζουν ποιες ενέργειες θα αναλάβουν ή εάν το περιεχόμενο και το σχέδιο τους ενδιαφέρουν ή όχι. Το ίδιο ισχύει και για τις μορφές. Ο χρήστης θα πρέπει να είναι σε θέση να αναφέρει ποιες πληροφορίες χρειάζεται με μια ματιά και να παρέχει μια σαφή εξήγηση για το τι είναι το έντυπο και πώς να το υποβάλει.
Μια μορφή που μπορεί να σαρωθεί ιδιαίτερα περιλαμβάνει τα εξής:
- Αντίθεση: Το κείμενο πρέπει να είναι σύντομο και να διαβάζεται εύκολα. Αποφύγετε πολλά χρώματα και ακολουθήστε τους παραδοσιακούς συνδυασμούς σκούρου φωτός με κείμενο και φόντο.
- Ομαδοποίηση και χώρος: Πληροφορίες ομάδας που είναι παρόμοιες με μεγαλύτερες μορφές. Κατά τη συλλογή πληροφοριών πληρωμής, για παράδειγμα, πληροφορίες πελατών ομάδας, πληροφορίες πληρωμής και πληροφορίες αποστολής. Τρία μικρότερα μπλοκ είναι πιο εύπεπτα από ένα μακρύ. Χρησιμοποιήστε έξυπνα αποστάσεις σε αυτές τις ετικέτες που συνδέονται με το πεδίο που εξηγούν, αντί για ομοιόμορφη απόσταση μεταξύ κειμένου και στοιχείων πεδίου.
- Σαφής τερματισμός / παρότρυνση για δράση : Κάντε το κουμπί μεγάλο και εύκολο να το δείτε. Το μικροσκόπιο μέσα στο κουμπί θα πρέπει να λέει στους χρήστες τι θα συμβεί, όπως "υποβολή", "πληρώστε τώρα" ή "προχωρήστε στο επόμενο βήμα." Θυμηθείτε να κλείσετε το βρόχο ανατροφοδότησης και να ενημερώσετε τους χρήστες όταν υποβάλλεται σωστά η φόρμα.
2. Εξετάστε τις Πλωτές ετικέτες
Υπήρξε πολλή συζήτηση σχετικά με το αν θα χρησιμοποιηθεί ή όχι το κείμενο υπαινιγμού μέσα στα πεδία φόρμας. Το κύριο πρόβλημα είναι ότι πολύ συχνά αυτό το κείμενο δεν πάει μακριά με ένα κλικ και οι χρήστες πρέπει να το διαγράψετε ενεργά για να ξεκινήσετε την πληκτρολόγηση. Αυτό είναι αμήχανο.
Επιπλέον, το Ο Nielsen Norman Group βρήκε ότι τα κενά πεδία μπορούν να τραβήξουν το μάτι και να βοηθήσουν τους χρήστες να εισάγουν τις πληροφορίες πιο καθαρά.
Εάν αισθάνεστε την ανάγκη να χρησιμοποιήσετε συμβουλές, σκεφτείτε μια διαδραστική λύση-επιπλέουσες ετικέτες. Συμπεριλάβετε τις πληροφορίες της ετικέτας σας μέσα στα πεδία φόρμας έτσι ώστε να μοιάζει με κείμενα κράτησης θέσης, αλλά αφήστε το κείμενο να εμψυχωθεί και να μετακινηθεί στην επάνω αριστερή θέση μόλις ο χρήστης ξεπεράσει ή κάνει κλικ στο πεδίο. Η ετικέτα ή η υπόδειξη δεν πηγαίνει ποτέ μακριά και δεν παρεμποδίζει τον χρήστη να προσπαθήσει να συμπληρώσει τη φόρμα. (Επιπλέον, η μικρή κινούμενη εικόνα είναι μια διασκεδαστική έκπληξη για τους χρήστες.)
3. Χρησιμοποιήστε Μάσκες Πεδίου
Οι μάσκες πεδίου μπορούν να παράσχουν μερικές από τις ίδιες ενδείξεις και να σχηματίσουν συμβουλές αλλά χωρίς να παρεμποδίσουν τη χρηστικότητα. Μια μάσκα πεδίου εμφανίζεται μόνο όταν ένας χρήστης ενεργοποιήσει ένα πεδίο και παρέχει μια πρόσθετη ένδειξη σάρωσης σχετικά με τις πληροφορίες που χρειάζονται. Η μάσκα μπορεί να βοηθήσει τον χρήστη περαιτέρω με την αυτόματη μορφοποίηση των πληροφοριών σε μια προσπάθεια να αποφευχθούν τα λάθη που θα κλωτσήσει τη φόρμα κατά την υποβολή.
Ένα καλό παράδειγμα μάσκας πεδίου σε δράση είναι με τους αριθμούς τηλεφώνου. Εξετάστε τις επιλογές πολλαπλών μορφών:
- (000) 000-0000
- 000-000-0000
- 0000000000
Πώς γνωρίζει κάποιος ποιος θα λειτουργήσει; Το πεδίο φόρμας θα καθορίζει και θα προσαρμόζει τη μορφή ως χρήστης, έτσι δεν χρειάζεται να το σκεφτεί και μόνο πρέπει να πληκτρολογήσει αριθμούς. (Εξασφαλίζει επίσης την ταλαιπωρία της ανάγκης εναλλαγής μεταξύ των πληκτρολογίων σε μια κινητή συσκευή.)
4. Κάντε φόρμες φιλικές προς το πληκτρολόγιο
Δεν έχετε τρόπο να γνωρίζετε σε ποιον τύπο συσκευής ένας χρήστης θα συναντήσει τη φόρμα σας, αλλά θα πρέπει να είναι εξίσου εύκολο να συμπληρώσετε ούτως ή άλλως. Σκεφτείτε όλους τους διαφορετικούς τύπους πληκτρολογίων που θα μπορούσαν να στείλουν πληροφορίες στη φόρμα και να προσαρμόσουν πεδία για να ανιχνεύσουν και να χρησιμοποιήσουν την κατάλληλη επιλογή.
Σε επιτραπέζιους υπολογιστές, οι χρήστες θα πρέπει να μπορούν να εισάγουν μια φόρμα και να συμπληρώνουν κάθε πεδίο χωρίς να χρειάζεται να κάνουν κλικ σε ένα ποντίκι. Προωθήστε αυτόματα από το ένα πεδίο στο άλλο κατά την ολοκλήρωση ή τη χρήση καρτελών ή εισάγετε για να μετακινηθείτε. Το W3.org έχει ένα συμπαγές σύνολο συστάσεις πληκτρολογίου για να ακολουθήσετε.
Σε κινητές συσκευές, αντιστοιχίστε τον τύπο του πληκτρολογίου με τα απαιτούμενα δεδομένα. Εάν η είσοδος είναι για γράμματα, ανοίξτε το πληκτρολόγιο άλφα. για τους αριθμούς, εμφανίζεται η αριθμητική επιλογή. Από το Google: "Οι χρήστες των εφαρμογών εκτιμούν τις εφαρμογές που παρέχουν το κατάλληλο πληκτρολόγιο για την εισαγωγή κειμένου. Βεβαιωθείτε ότι αυτό εφαρμόζεται με συνέπεια σε ολόκληρη την εφαρμογή και όχι μόνο για ορισμένα καθήκοντα αλλά όχι για άλλα. "
5. Επιλογή για κατακόρυφη μορφή
Οι κατακόρυφες μορφές είναι ευκολότερες για τους χρήστες από ότι οι πολλαπλές μορφές στήλης. Ο κανόνας των βέλτιστων πρακτικών είναι να διασφαλιστεί ότι όλα τα πεδία μπορούν να χωρέσουν στην οθόνη χωρίς μετακίνηση σε μορφή από πάνω προς τα κάτω.
Η μόνη εξαίρεση είναι για σούπερ σύντομες φόρμες, όπου ένας χρήστης χρειάζεται μόνο να εισάγει μια διεύθυνση ηλεκτρονικού ταχυδρομείου ή ένα όνομα και μια διεύθυνση ηλεκτρονικού ταχυδρομείου. Δύο στήλες δίπλα-δίπλα, ακολουθούμενες από ένα κουμπί παρότρυνσης για δράση, μπορούν να λειτουργήσουν καλά σε αυτήν την κατάσταση, εφόσον το κουτί ηλεκτρονικού ταχυδρομείου είναι αρκετά μακρύ ώστε οι χρήστες να βλέπουν όλα τα γράμματα της διεύθυνσής τους.
Θυμηθείτε να παραγγείλετε τα στοιχεία λογικά και σε κάθετη μορφή. Αν συλλέγετε το όνομα, το επώνυμο, τη διεύθυνση ηλεκτρονικού ταχυδρομείου και την ακολουθία χρωμάτων των μαλλιών τους ακολουθείστε με αυτόν τον τρόπο.
6. Περιορίστε τη δακτυλογράφηση
Χρησιμοποιήστε όσο το δυνατόν περισσότερες λύσεις προπληρωμής με φόρμες. Τίποτα δεν είναι πιο ευχάριστο και στη συνέχεια θα προσθέσετε μια διεύθυνση και μετά από τις πρώτες βρύσες, το Google API κλωτσάει και προτείνει επιλογές διευθύνσεων.
Αυτό κάνει τρία πράγματα:
- Κάνει ευκολότερο για τους χρήστες, ιδιαίτερα για κινητά.
- Βοηθά στον περιορισμό του αριθμού των απαραίτητων πεδίων.
- Μπορεί να βοηθήσει στην εξάλειψη κάποιου σφάλματος χρήστη, όπως το σφάλμα.
Σκεφτείτε το ίδιο με τις διευθύνσεις ηλεκτρονικού ταχυδρομείου, έτσι ώστε στους χρήστες να δίνονται οι δημοφιλείς τομείς ηλεκτρονικού ταχυδρομείου μετά το σύμβολο @. Όταν ένας χρήστης πληκτρολογεί στο [email protected] .... το πεδίο αυτόματα υποδηλώνει [προστατευμένο με ηλεκτρονικό ταχυδρομείο] .
7. Κρατήστε το Σύντομο και Γλυκό
Θα μπείτε στον πειρασμό να ζητήσετε από τους χρήστες πολλές πληροφορίες σε φόρμες. Αντισταθείτε στην ώθηση!
Ζητήστε μόνο ζωτικής σημασίας πληροφορίες σε φόρμες. Υπάρχει μια ισχυρότερη πιθανότητα ότι οι χρήστες θα συμπληρώσουν τις φόρμες που απαιτούν λιγότερη δέσμευση. Αν χρειάζεστε περισσότερες πληροφορίες αργότερα, μπορείτε να τις στείλετε μέσω ηλεκτρονικού ταχυδρομείου από τη λίστα σας για να ζητήσετε πρόσθετες λεπτομέρειες. (Ως χρήστης που έχει ήδη επιλέξει, ο χρήστης είναι πιο πιθανό να συμμετάσχει μαζί σας για περισσότερα αυτήν τη στιγμή.)
Αποφύγετε τα προαιρετικά πεδία. Μην ζητάτε περιττές πληροφορίες. Μην χρησιμοποιείτε πολλαπλά πεδία όπου θα μπορούσατε να χρησιμοποιήσετε ένα (για παράδειγμα, αριθμούς τηλεφώνου).
συμπέρασμα
Δώστε στους χρήστες κάτι σε αντάλλαγμα για τη συμπλήρωση μιας φόρμας. Κάνε τη διασκέδαση ή το ενδιαφέρον. Ευχαριστώ τον χρήστη.
Η δημιουργία μιας φόρμας που είναι εύκολο να διαβαστεί και εύκολη στη χρήση θα αυξήσει τις πιθανότητες συλλογής δεδομένων και μετατροπής ενός επισκέπτη σε έναν επαναλαμβανόμενο χρήστη.