Περιεχόμενο
- 1. Μην επισημαίνετε υποχρεωτικά πεδία
- 2. Μη χρησιμοποιείτε κλώστες
- 3. Έχετε μόνο έναν τύπο κουμπιού ή καλύτερα ακόμα ένα μόνο κουμπί ανά φόρμα
- 4. Πεδία κομματιών
- 5. Σκεφτείτε γιατί ρωτάτε κάτι και πώς αισθάνεται ο χρήστης
- 6. Ημερομηνίες είναι άθλιες μικρές
- 7. Μορφές ως προγραμματιστής
- 8. Μην χρησιμοποιείτε στήλες σε φόρμες
- 9. Μην χρησιμοποιείτε δύο πεδία όταν θα το κάνει
- 10. Να είστε καλοί
Φόρμες, δεν υπάρχει τίποτα που πολλοί σχεδιαστές μισούν περισσότερο από φόρμες. Δεν αναδεικνύουν απαραίτητα τη δημιουργικότητα ή το κάνουν; Ίσως ήρθε η ώρα να κοιτάξουμε ξανά τις φόρμες και να καταλάβουμε ότι μια φόρμα, στην πιο βασική της, είναι μια συνομιλία μεταξύ του χρήστη και του λογισμικού.
Ξεχάστε το σημείο και το κλικ, οι φόρμες αντιπροσωπεύουν την πλουσιότερη αλληλεπίδραση που θα αντιμετωπίσουμε ως ψηφιακοί σχεδιαστές. Την επόμενη φορά που θα έρθει μια φόρμα, μην νομίζετε ότι πρόκειται απλώς να εφαρμόσετε κάποια ωραία εφέ CSS ή να προσθέσετε ένα ωραίο jQuery. Υπάρχει πολύ μεγαλύτερο βάθος στη σχεδίαση φορμών.
Έχω δοκιμάσει ο χρήστης εκατοντάδες φόρμες και σχεδίασα μερικές σύνθετες φόρμες για ασφαλιστικές εταιρείες, αλληλεπιδράσεις κρατήσεων διακοπών και πολλά άλλα. Οι πιθανότητες έχετε χρησιμοποιήσει μία από τις φόρμες μου τους τελευταίους μήνες.
Εδώ είναι τα μαθήματα που ήθελα να είχα μάθει πριν ξεκινήσω να σχεδιάζω φόρμες.
1. Μην επισημαίνετε υποχρεωτικά πεδία
Γνωρίζετε τον μικρό αστερίσκο που σημαίνει υποχρεωτικό πεδίο; Έχω δει ότι αποτυγχάνουν πολλές φορές στις δοκιμές χρηστών. Ως έννοια, τα υποχρεωτικά πεδία δεν έχουν πολύ νόημα, δεν έχουν ισοδύναμο εκτός σύνδεσης. Είναι ιδανικά για προγραμματιστές επειδή προσφέρουν μια ωραία ασπρόμαυρη προσέγγιση για την ολοκλήρωση. Ο αστερίσκος και το υποχρεωτικό πεδίο αποτυγχάνουν επειδή είναι μια μαθημένη συμπεριφορά. Τυπική συμπεριφορά που έχω δει στις δοκιμές χρηστών είναι ότι ο χρήστης συμπληρώνει τη φόρμα στην κορυφή και τελειώνει είτε όταν υπάρχει κάτι για να τους σταματήσει είτε πατήσουν ένα κουμπί.
Η λύση είναι απλή, επισημάνετε προαιρετικά πεδία, σημειώστε το μέρος όπου ο καλός χρήστης μας πρέπει να σταματήσει και να σκεφτεί εάν πρέπει να συμπληρώσει αυτό το πεδίο.
2. Μη χρησιμοποιείτε κλώστες
Το HTML5 είναι εξαιρετικό, έτσι δεν είναι; Προσφέρει πολλά συναρπαστικά νέα γυαλιστερά εργαλεία για να παίξετε. Πρέπει να σκεφτούμε την καταλληλότητα των νέων παιχνιδιών μας. Το πεδίο αριθμών περιλαμβάνει τώρα μικρά βέλη πάνω και κάτω για να επιτρέπουν στον χρήστη να κυκλώνει αριθμούς.
Υπάρχουν δύο προβλήματα εδώ. Πρώτον, η προεπιλεγμένη οθόνη του προγράμματος περιήγησης των βελών τα καθιστά πολύ μικρά. Πολύ τρελό να κάνετε κλικ και το λίπος που έχουμε ανάμεσά μας θα παλέψει με ένα iPhone. Ονομάζεται Fitt's Law, όσο μικρότερο είναι τόσο πιο δύσκολο είναι να κάνετε κλικ πάνω του.
Αλλά σας ακούω να φωνάζετε, μπορείτε απλά να πληκτρολογήσετε τον αριθμό απευθείας στο πεδίο αριθμών. Ναι, μπορείτε, αλλά ας ρίξουμε μια ματιά στην οθόνη του προγράμματος περιήγησης, τα πάνω / κάτω περιστρεφόμενα βέλη μοιάζουν με τον αξιόπιστο φίλο μας το πλαίσιο επιλογής. Ένας χρήστης που παρουσιάζεται με έναν κλώστη για πρώτη φορά θα υποθέσει, καθώς μοιάζει με ένα πλαίσιο επιλογής, ότι δεν μπορεί να πληκτρολογήσει σε αυτό.
Η συμβουλή μου είναι να αποφευχθούν έως ότου γίνουν πιο συνηθισμένα μέρη ή οι προγραμματιστές του προγράμματος περιήγησης ταξινομήσουν τον προεπιλεγμένο σχεδιασμό.
3. Έχετε μόνο έναν τύπο κουμπιού ή καλύτερα ακόμα ένα μόνο κουμπί ανά φόρμα
Υπάρχει μια μικρή γνωστή αρχή της ψυχολογίας που ονομάζεται Hick’s Law. Ο Hick’s Law δηλώνει ότι όσο περισσότερες επιλογές προσφέρουμε τόσο δυσκολότερο είναι να κάνουμε μια επιλογή. Δεν ξέρω την επιστήμη πυραύλων, αλλά έναν κανόνα που αξίζει να θυμάστε.
Μπορείτε να βοηθήσετε τον καλό σας χρήστη, βοηθώντας τους να κάνουν μια επιλογή. Κάνοντας όλα τα κύρια κουμπιά ένα χρώμα και έχοντας μόνο ένα από αυτά ανά σελίδα διευκολύνεται η επιλογή. Ποιο είναι το κουμπί που πρέπει να πατάω; Ω, είναι εύκολο, είναι το μεγάλο χρωματιστό.
4. Πεδία κομματιών
Σπούδασα νευροεπιστήμη σε μια προηγούμενη ζωή και έτσι μελέτησα την ψυχολογία της μνήμης - συγκεκριμένα βραχυπρόθεσμη ή λειτουργική μνήμη. Τώρα προτού το πείτε? όχι, η βραχυπρόθεσμη χωρητικότητα μνήμης δεν είναι 7 +/- 2, 4 +/- 1 ή στον άνθρωπο μιλάμε τρία έως πέντε κομμάτια. Εμείς ως άνθρωποι είμαστε καταπληκτικοί στην αξιολόγηση των οπτικών ερεθισμάτων, ο περιορισμός είναι ότι είμαστε καλύτεροι όταν ο αριθμός είναι μικρότερος. Το τεμαχισμό μιας φόρμας σε μικρότερες ομάδες διευκολύνει την αξιολόγηση, καθώς συχνά αυτό που ο χρήστης πρέπει να εισάγει στη φόρμα προέρχεται από τη μνήμη του.
Βεβαιωθείτε ότι οι ομάδες πεδίων έχουν μήκος περίπου τέσσερα.
5. Σκεφτείτε γιατί ρωτάτε κάτι και πώς αισθάνεται ο χρήστης
Αυτή είναι ίσως η πιο ευθεία συμβουλή που δίνω, αλλά είναι συχνά η λιγότερο χρησιμοποιούμενη.
Ας πάρουμε τα εξής:
Ερώτηση κάθε ερώτησης που θέτετε. Είναι αναγκαίο? Πώς νιώθεις να το ρωτάς αυτό;
Τις περισσότερες φορές υπάρχει μια ανάγκη επιχείρησης να κάνουμε μια ερώτηση και εμείς ως σχεδιαστές μπορούμε να διαφωνήσουμε για την αναγκαιότητα έως ότου είμαστε μπλε στο πρόσωπο. Η ερώτηση πρέπει να τεθεί. Στην κατανόηση της επιχειρηματικής ανάγκης για αυτά τα δεδομένα μπορούμε συχνά να συμβιβαστούμε.
Μπορούμε να βοηθήσουμε λέγοντας στον ωραίο χρήστη μας γιατί πρέπει να κάνουμε αυτήν την ερώτηση. Διαβεβαιώστε για τη χρήση και την κοινή χρήση αυτών των δεδομένων και γενικά να είστε ευγενικοί.
Λαμβάνοντας ξανά το παράδειγμά μας:
Είναι ακόμα μια δύσκολη ερώτηση, αλλά ελπίζουμε ότι έχουμε γλυκώσει το χάπι.
6. Ημερομηνίες είναι άθλιες μικρές
Η εισαγωγή ημερομηνιών μπορεί να είναι μια πραγματική πρόκληση και υπάρχουν μερικές παγίδες που μπορείτε να αποφύγετε. Το μεγαλύτερο πρόβλημα είναι η αντιμετώπιση λαθών.
Η ευκολότερη προσέγγιση είναι να ξεκινήσετε ένα ημερολόγιο. Αξίζει να σημειωθεί ότι οι εβδομάδες ξεκινούν τη Δευτέρα στο Ηνωμένο Βασίλειο και την Κυριακή στις ΗΠΑ. Εάν ο χρήστης σας δεν συγκεντρώνει, μπορεί να επιλέξει Κυριακή όταν σημαίνει Δευτέρα.
Αξίζει επίσης να αναφερθούν οι διεθνείς μορφές ημερομηνιών. Οι ΗΠΑ τοποθετούν τον πρώτο μήνα, στην Ιαπωνία είναι ο πρώτος χρόνος. Έτσι, μια ημερομηνία όπως η 4/5/12 θα μπορούσε να ερμηνευθεί με τρεις τρόπους.
Γι 'αυτό είναι καλύτερο να χρησιμοποιείτε επιλεγμένα πλαίσια.
7. Μορφές ως προγραμματιστής
Οι φόρμες είναι τέχνες για προγραμματιστές αλλά και για σχεδιαστές. Η κατανόηση των πιθανών σφαλμάτων που θα μπορούσαν να γίνουν με την εισαγωγή δεδομένων και το σχεδιασμό του κωδικού υποστήριξης για την αντιμετώπιση είναι μια πρόκληση.
Εδώ είναι απλό. Εισαγωγή νομισματικής αξίας. Τα πιθανά λάθη που μπορεί να κάνει ο χρήστης είναι τεράστια. Ο εξαναγκασμός των μορφών δεδομένων που πρέπει να πληρούν οι χρήστες είναι απογοητευτικός για τον χρήστη σας και, ας το παραδεχτούμε, λίγο τεμπέλης από την πλευρά των προγραμματιστών.
Τι καλύτερη πρόκληση για έναν προγραμματιστή από το να δημιουργήσετε μια αλεξίσφαιρη φόρμα.
8. Μην χρησιμοποιείτε στήλες σε φόρμες
Το μεγάλο πρόβλημα στη χρήση στηλών σε φόρμες είναι η ροή. Ξεκινάμε μια φόρμα στην κορυφή και τελειώνουμε στο κάτω μέρος. Κατά την εισαγωγή στηλών, η ροή της φόρμας μπορεί να σπάσει.
Μην υποθέτετε την καρτέλα χρηστών μέσω φορμών και επομένως η εστίαση είναι ένας τρόπος πλοήγησης σε φόρμες σε στήλες. Είναι σπάνιο να το έχω δει στις δοκιμές χρηστών. Τις περισσότερες φορές βλέπουμε να εισάγουμε λεπτομέρειες, κάντε κλικ στο επόμενο πεδίο με το ποντίκι / το trackpad / το δάχτυλο και μετά εισάγετε λεπτομέρειες και ούτω καθεξής.
9. Μην χρησιμοποιείτε δύο πεδία όταν θα το κάνει
Οι περισσότεροι άνθρωποι δεν είναι δακτυλογράφοι αφής. Στις δοκιμές χρηστών βλέπουμε άτομα να βλέπουν το πληκτρολόγιο καθώς πληκτρολογούν.
Όταν εισάγετε έναν αριθμό τηλεφώνου που χωρίζει το πεδίο φόρμας, ας πούμε ότι προσθέτετε κωδικό περιοχής και αριθμό, προκαλεί πραγματικά προβλήματα. Οι χρήστες δεν βλέπουν ούτε θυμούνται ότι υπάρχουν δύο πεδία, οπότε εισαγάγετε τον πλήρη αριθμό στο πρώτο πεδίο, χειρότερα εάν το πεδίο περιορίζεται σε έναν ορισμένο αριθμό χαρακτήρων.
Χρησιμοποιήστε μόνο ένα πεδίο για αριθμό τηλεφώνου, το ίδιο ισχύει για τον αριθμό σπιτιού / δρόμο - χρησιμοποιήστε μόνο ένα πλαίσιο εισαγωγής κειμένου.
10. Να είστε καλοί
Θα εκπλαγείτε από το πόσα αρκετά αγενή μηνύματα σφάλματος υπάρχουν εκεί έξω.
Ακολουθεί ένα παράδειγμα αυτού που συνάντησα πρόσφατα.
Το ίδιο το γεγονός που προτείνουν ότι θα θέλατε να εισαγάγετε μια ημερομηνία στο μέλλον και στη συνέχεια μια μάλλον προσεκτική απάντηση, καλά, δεν είναι πολύ ωραίο.
Βάλτε ξανά τον εαυτό σας στη θέση του χρήστη, πώς θα αισθανόσασταν αυτό το σφάλμα; Ενοχλημένος? Ίσως ακόμη χειρότερα. Το να είσαι καλός είναι εύκολο.
Έχω δημιουργήσει ένα φύλλο παχνιού / εξαπάτησης με δυνατότητα λήψης για να σας βοηθήσω να σχεδιάσετε καλύτερες φόρμες. Περιλαμβάνει πολλούς περισσότερους τρόπους βέλτιστης πρακτικής για το σχεδιασμό καλύτερων μορφών.
