4 Συμβουλές UX Σχεδιασμού Φόρμας πρέπει να ξέρετε (με Παραδείγματα)

Έχουμε την τάση να σκεφτόμαστε τις μορφές ως απλά ένα μέσο συλλογής δεδομένων χρήστη, αλλά είναι επίσης ένας τρόπος, μερικές φορές ο μόνος τρόπος, για τους χρήστες μας επικοινωνήστε μαζί μας. Είναι πιθανώς παραληρητική η σκέψη ότι μπορούμε να κάνουμε τους χρήστες αγάπη συμπληρώνοντας έντυπα, ωστόσο είναι σίγουρα δυνατή να βρουν λύσεις που δεν τους ενοχλούν πάρα πολύ, και να τους βοηθήσει κατά τη διάρκεια της διαδικασίας.

Κατά την περιήγηση στο δίκτυο μπορούμε να βρούμε μερικές φορές εκπληκτικές λύσεις που είναι σωστά προγραμματισμένες, αλλά σχεδιάζονται κατά τρόπο που πιθανότατα κάνει πολλούς χρήστες να εγκαταλείψουν τον ιστότοπο εξαιτίας της κακής εμπειρίας του χρήστη.

Εάν τα έντυπα μας έχουν σχεδιαστεί καλά, θα είμαστε σε θέση όχι μόνο να παρακαλούμε τους χρήστες μας, αλλά και την ομάδα backend που μπορεί να αντιμετωπίσει πολύ λιγότερα σφάλματα εισόδου του χρήστη. Έτσι, σε αυτό το άρθρο, θα δούμε πώς μπορούμε ελαχιστοποιούν τα σφάλματα εισόδου του χρήστη και ακόμα κρατήστε τους χρήστες μας ευτυχείς.

Προβλέψτε τις ανάγκες των χρηστών

Οι ιστότοποι και οι εφαρμογές έχουν διαφορετικές βάσεις και στόχοι χρηστών, και ακόμη και στην ίδια τοποθεσία μπορούν να φιλοξενούν πολλές μορφές που συλλέγουν διάφορα είδη δεδομένων, για να αναφέρουμε μόνο τα πιο συνηθισμένα:

• Φόρμες σύνδεσης
• Φόρμες εγγραφής
• Φόρμες προφίλ χρήστη
• Φόρμα εγγραφής στο ενημερωτικό δελτίο
• Τα έντυπα ελέγχου
• Έρευνες χρηστών
• Φόρμα επικοινωνίας
• Σχόλια
• Έντυπα αναζήτησης

Όλοι αυτοί οι τύποι τύπων απαιτούν διαφορετικά πράγματα. Όταν σχεδιάζετε μια φόρμα πληρωμής, είναι σημαντικό να διαβεβαιώσετε αξιόπιστα τους χρήστες σχετικά με την ασφάλεια, ενώ στην περίπτωση σχολίων είναι καλή ιδέα να προσθέστε emojis ή άλλες μεθόδους που επιτρέπουν στους χρήστες να εκφράσουν την πραγματική τους διάθεση.

Ωστόσο, ακόμη και παρόμοιοι τύποι τύπων μπορεί να χρειαστεί να σχεδιαστούν διαφορετικά, όπως έχουν όλες οι τοποθεσίες μοναδική βάση χρηστών. Πριν ξεκινήσετε τη διαδικασία σχεδιασμού, είναι πάντα καλή ιδέα να προβλέψουμε τι χρειάζονται οι χρήστες μας, και σχεδιάστε ανάλογα.

Παράδειγμα: Κοινωνικές συνδέσεις που στοχεύουν τις ανάγκες των χρηστών

Η φόρμα σύνδεσης του Codepen περιέχει τρεις κοινωνικές συνδέσεις με τον Github στην κορυφή. Αυτή η επιλογή δεν θα ήταν εύλογη για τους περισσότερους ιστότοπους.

Αλλά είναι τέλεια για το Codepen, καθώς η βάση χρηστών τους αποτελείται από προγραμματιστές, πολλοί από τους οποίους θα θέλουν να συνδεθούν με τους λογαριασμούς Github ή να συνδέσουν ταυτόχρονα τους λογαριασμούς ανάπτυξης τους.

Σκεφτείτε το κινητό πρώτα

Οι χρήστες κινητής και επιφάνειας εργασίας έχουν διαφορετικές ανάγκες, αλλά ως η συμπλήρωση των εντύπων είναι μια πολύ μεγαλύτερη πρόκληση σε μια κινητή οθόνη, χρησιμοποιώντας χειρονομίες παρά σε ένα φυσικό πληκτρολόγιο, α κινητή πρώτη προσέγγιση μπορεί να μας οδηγήσει περισσότερο όταν θέλουμε να σχεδιάσουμε χρήσιμες μορφές.

Επιπλέον, πολλά μοτίβα UI που λειτουργούν καλά στο κινητό θα λειτουργούν καλά και στην επιφάνεια εργασίας.

Παράδειγμα: Έλεγχοι με δυνατότητα τροφοδοσίας

Οι κινητές μορφές υψηλής ποιότητας δεν μπορούν να φανταστούν χωρίς ορατά στοιχεία ελέγχου επί του οποίου οι χρήστες κινητών τηλεφώνων μπορούν εύκολα να πατήσουν με τα δάχτυλά τους.

Η φόρμα εγγραφής στο ενημερωτικό δελτίο της διάσκεψης σχεδιασμού ιστοσελίδων Το Event Apart προσαρμόζεται στον τρόπο με τον οποίο οι χρήστες κινητής τηλεφωνίας έχουν πρόσβαση στην οθόνη - που περιέχει δύο εύχρηστα πεδία εισαγωγής και ένα κουμπιού μεγέθους δακτύλου.

Τα πεδία εισαγωγής κειμένου είναι υψηλότερα ως συνήθως, έτσι ώστε οι χρήστες κινητών τηλεφώνων να μπορούν εύκολα να πατήσουν σε αυτά και το μεγάλο κουμπί πορτοκαλί με ένα εικονίδιο κρότου ενθαρρύνει περαιτέρω τους χρήστες να υποβάλουν τη φόρμα.

Η έκδοση της επιφάνειας εργασίας του ιστότοπου χρησιμοποιεί το ίδιο σχέδιο, καθώς φαίνεται και καλά και λειτουργεί καλά σε μεγαλύτερες οθόνες.

Παράδειγμα: Εξοικονόμηση εισόδου

Κατά το σχεδιασμό εντύπων για κινητά, είναι πάντα σημαντικό να εξετάσουμε πώς μπορούμε ελαχιστοποιήστε τον χώρο που χρησιμοποιούμε. ο αναλώσιμη είσοδος Το μοτίβο σχεδίασης του UI έχει γίνει πολύ δημοφιλές πρόσφατα και λειτουργεί ιδιαίτερα καλά στο κινητό.

Η Booking.com εκμεταλλεύεται αυτό το μοτίβο στη φόρμα αναζήτησης στον ιστότοπό του για κινητά. Όταν ο χρήστης μπαίνει στο πεδίο αναζήτησης, διευρύνεται για να γίνει αφήστε περισσότερο χώρο για χειρονομίες, και κάτω από αυτό εμφανίζεται μια λίστα επιλογών με συστάσεις.

Όταν ο χρήστης βγάλει από το πεδίο, συρρικνώνεται και οι επιπλέον πληροφορίες εξαφανίζονται.

Παράδειγμα: Πλήκτρο Morphing

Κουμπιά μορφοποίησης πάρτε το αναλώσιμο πρότυπο εισόδου ένα βήμα ακόμα περισσότερο, καθώς οι χρήστες βλέπουν πρώτα ένα κουμπί, το οποίο τότε μεταμορφώνεται σε μια μορφή όταν το χτυπάνε.

Το παρακάτω στιγμιότυπο οθόνης είναι από το λαμπρό άρθρο του Startup για τον καινοτόμο σχεδιασμό φόρμας, το οποίο παρουσιάζει και πολλές άλλες δημιουργικές λύσεις.

Διευκόλυνση της εισαγωγής εισόδου

Τα μακρά έντυπα τείνουν να αποτρέπουν τους χρήστες. Το καλύτερο που μπορούμε να κάνουμε είναι να ζητήστε μόνο την εισροή που πραγματικά χρειαζόμαστε. Αυτό δεν είναι μόνο σημαντικό από την άποψη της εμπειρίας των χρηστών, αλλά οι χρήστες μπορούν επίσης να διστάζουν να δώσουν πάρα πολλές προσωπικές πληροφορίες εξαιτίας θέματα ιδιωτικότητας.

Μερικές φορές, όμως, εμείς ακόμη πρέπει να ακολουθήσουν μακρύτερες μορφές. Σε αυτή την περίπτωση είναι καλή ιδέα τα κόβουμε σε μικρότερα κομμάτια, και εξυπηρετούν τα κομμάτια ως διαδοχικές οθόνες.

Πολλές τοποθεσίες ηλεκτρονικού εμπορίου (π.χ. Amazon) χρησιμοποιούν αυτή τη λύση για να μειώσουν τα ποσοστά εγκατάλειψης του καλαθιού.

Εάν θέλουμε να διευκολύνουμε την ολοκλήρωση πεδίων φόρμας, ο κανόνας είναι να μειώνουν τόσο τις περισπασμούς όσο και τις ενέργειες των χρηστών όσο το δυνατόν.

Παράδειγμα: Εξατομικευμένος επιλογέας εισόδου

Διαφορετικοί συλλέκτες περιεχομένου, όπως συλλέκτες ημερομηνιών ή συλλέκτες χρωμάτων, δεν διευκολύνουν μόνο τη λήψη των σωστών εισροών, αλλά κάνουν και τη φόρμα πιο ελκυστικό, και σημαντικά μειώστε τα σφάλματα των χρηστών.

Η εφαρμογή λήψης λίστας Todoist παρέχει εξατομικευμένες συμβουλές μέσα στο εργαλείο επιλογής ημερομηνίας, όταν ο χρήστης κινείται κατά τη διάρκεια των ημερών.

Για παράδειγμα, στο παρακάτω στιγμιότυπο οθόνης, ο χρήστης μπορεί να δει ότι για την 31η Αυγούστου έχει ήδη 2 καθήκοντα και μπορεί να λάβει υπόψη αυτές τις πληροφορίες κατά την επιλογή της κατάλληλης ημερομηνίας για τις εργασίες. Είναι μια εξαιρετική ιδέα για μια εφαρμογή όπου η παραγωγικότητα είναι το κύριο μέλημα του χρήστη.

Παράδειγμα: Εισαγωγή σύρετε-και-πτώση

Σχέδια μεταφοράς και αποτύπωσης συνήθως λειτουργούν καλά με τα αρχεία μεταφόρτωσης αρχείων, ειδικά όταν οι χρήστες υποτίθεται ότι ανεβάζουν εικόνες.

Πιθανότατα δεν μειώνουν τις ενέργειες των χρηστών σε σχέση με το συνηθισμένο κουμπί Upload a file, αλλά το κάνουν πολύ πιο εύκολο επιλέξτε το αρχείο που θέλει να μεταφορτώσει ο χρήστης, μειώνοντας έτσι την πιθανότητα υποβολής λανθασμένου φακέλου.

Το WordPress.com παρέχει μια κομψή και διαισθητική διασύνδεση εισόδου χρήστη με μεταφορά και απόθεση στη φόρμα επεξεργασίας μηνυμάτων. ο μικρές μικρογραφίες και το οπτική αναπαράσταση των ήδη αρχειοθετημένων αρχείων βοηθήστε τους χρήστες να εκτελέσουν γρήγορα την μεταφόρτωση.

Παράδειγμα: Επικάλυψη για την κατάργηση των αποσταθεροποιήσεων

Αν οι χρήστες αποστασιοποιούνται κατά την ολοκλήρωση της φόρμας μας, είναι πιο επιρρεπείς σε σφάλματα και επίσης ενοχλούνται πιο εύκολα

Περιεχόμενα περιεχομένου αποτελούν μια εξαιρετική εναλλακτική λύση για τον μινιμαλιστικό σχεδιασμό φόρμας. Χρησιμοποιούνται από πιο σύνθετες τοποθεσίες που θέλουν να εμφανίζουν διαφορετικά είδη πληροφοριών στην ίδια οθόνη.

Στο παρακάτω στιγμιότυπο οθόνης, μπορείτε να δείτε την έκδοση για επιτραπέζιους υπολογιστές της Booking.com. Όταν οι χρήστες αιωρούνται στη φόρμα αναζήτησης, το υπόλοιπο περιεχόμενο αποκτάται που καλύπτεται από μια γκριζωπή επικάλυψη για να τους βοηθήσει να επικεντρωθεί στη διαδικασία πλήρωσης της φόρμας.

Αποστολή σχολίων στους χρήστες

Δίνοντας το σωστή ανατροφοδότηση την κατάλληλη στιγμή μπορεί να βελτιώσει σημαντικά την εμπειρία του χρήστη.

Στο σχεδιασμό της φόρμας, υπάρχουν δύο είδη ανατροφοδοτήσεων των χρηστών:

1. Σχόλια που δόθηκαν πριν υποβολή αίτησης - ώστε να να μειώσετε τα λάθη και αποτελούν ποσοστά εγκατάλειψης, όπως συσκευές παρακολούθησης προόδου, άμεση επικύρωση εισόδου που ανταμείβει αμέσως τους χρήστες για τη σωστή είσοδο ή βοηθητικά εργαλεία βοήθειας
2. Σχόλια που δόθηκαν μετά υποβολή αίτησης - προκειμένου να ενημερωθούν οι χρήστες έχουν διαπράξει λάθος, όπως μηνύματα σφάλματος

Το είδος των σχολίων που χρησιμοποιούν οι χρήστες μας εξαρτάται σε μεγάλο βαθμό από τα χαρακτηριστικά του κοινού-στόχου μας και από τον στόχο του ιστότοπού μας.

Παράδειγμα: Έλεγχος προόδου

Τα έντυπα που διαρκούν περισσότερο από μία σελίδα, όπως οι έρευνες και οι περισσότερες φόρμες ελέγχου ηλεκτρονικού εμπορίου, μπορούν να λάβουν μόχλευση tracker προόδου σχέδιο μοτίβο. Οι ανιχνευτές προόδου δίνουν ένα άμεση οπτική ανατροφοδότηση στους χρήστες σχετικά με την κατάστασή τους και να τους ενθαρρύνουν να συνεχίσουν τη διαδικασία.

Η εφαρμογή ιστού του δημιουργού της έρευνας SnapSurveys δείχνει ένα μικρό πρόγραμμα παρακολούθησης προόδου ακριβώς πάνω από τα κουμπιά υποβολής, έτσι ώστε οι χρήστες να μπορούν φυσικά να την εντοπίσουμε.

ο εντοπιστής προόδου δεν χρησιμοποιεί ετικέτες, αλλά τον τρόπο που έχει σχεδιαστεί καθιστά σαφή τον στόχο της - ο αριθμός των κύκλων υποδεικνύει τον αριθμό των βημάτων, τα ήδη εκτελεσθέντα βήματα γίνονται μπλε και οι χρήστες μπορούν εύκολα να δουν πόσα βήματα βρίσκονται μπροστά τους.

Παράδειγμα: Επικύρωση σε πραγματικό χρόνο

Χρησιμοποιεί το κατάστημα καλλυντικών Body Shop επικύρωση σε πραγματικό χρόνο στη φόρμα προφίλ χρήστη για την εξάλειψη των σφαλμάτων και τη βελτίωση του UX της διαδικασίας ολοκλήρωσης της φόρμας.

Οι είσοδοι ελέγχονται ενώ οι χρήστες ολοκληρώνουν τη φόρμα και οι σωστές και λανθασμένες απαντήσεις επισημαίνονται αμέσως με εύκολα διακριτά εικονίδια λίγο περισσότερο στα δεξιά, αλλά ακόμα στην ορατή περιοχή.

Παράδειγμα: Εκφραστικές Εργαλειοθήκες

Κατανοητή μικροσκοπία είναι επίσης ένα ουσιαστικό μέρος της επιτυχημένης ανατροφοδότησης των χρηστών στο σχεδιασμό της φόρμας. Εξ ορισμού, η μικροσκοπία μιας ιστοσελίδας αποτελείται από μικρά κομμάτια κειμένου που χρησιμοποιούνται σε διάφορα στοιχεία - ετικέτες, κουμπιά, μηνύματα λάθους, συμβουλές εργαλείων κλπ.

Στη φόρμα σύνδεσης, η τραπεζική ομάδα της Barclay απαντά στις ερωτήσεις που ενδέχεται να ζητήσουν οι χρήστες με τη βοήθεια της καλά σχεδιασμένα εργαλεία που περιλαμβάνουν εύκολη στην κατανόηση μικροσκοπία.

Τα εργαλεία είναι κρυμμένα πίσω από λίγο; εικονίδια να μην αποσπά την προσοχή των χρηστών που γνωρίζουν πώς να συμπληρώσουν τη φόρμα σύνδεσης, αλλά να είναι πάντα παρούσα για χρήστες που δεν είναι βέβαιοι.

Ορισμένα από τα εργαλεία περιέχουν ακόμη και ένα μικρό οπτικό μιας χρεωστικής κάρτας με σχολιασμό ώστε οι χρήστες να μπορούν εύκολα να βρουν τα δεδομένα που πρέπει να εισάγουν στη φόρμα εγγραφής.