10 Κανόνες για την παραγωγή φιλικών προς το χρήστη μορφές ιστού

Sep 10, 2025

πως να

Illustration of web forms on an iMac and tablet

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

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

Στο δεύτερο από τα δύο άρθρα μου εξερευνώντας πώς να οικοδομήσουμε καλύτερες μορφές ( Βρείτε το πρώτο εδώ ), εδώ είναι οι 10 συμβουλές μου για να σχεδιάσουν μορφές που είναι φιλικά προς το χρήστη. Δεν είναι ό, τι ψάχνετε; Μπορεί να χρειαστείτε τους οδηγούς μας στην κορυφή οικοδόμος ιστότοπου ή αποθήκευση σύννεφων υπηρεσία.

01. Ρωτήστε μόνο τι απαιτείται

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

02. Παραγγείλετε τα πεδία λογικά

Screenshot compares two forms - one with fields in an odd order, one with headings explaining field groupings, ordered logically — Σκεφτείτε τη μορφή σας σαν μια συνομιλία. θέλετε να ομαδοποιήσετε και να παραγγείλετε τα πεδία με μια σειρά που έχει νόημα στον χρήστη

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

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

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

Η ομαδοποίηση πρέπει να πραγματοποιηθεί οπτικά καθώς και στον κώδικα. Για παράδειγμα, θα μπορούσατε να χρησιμοποιήσετε το & lt; flusset & gt; και & lt; Legend & GT; Στοιχεία για τη συσχέτιση σχετικών ελέγχων:

 & lt; flusset & gt;
  & lt; Legend & GT; προσωπικές πληροφορίες: & LT; / Legend & GT;
  & lt; div & gt;
    & lt; ετικέτα για = "first_name" & gt; πρώτο όνομα & lt; / label & gt;
    & lt; τύπος εισόδου = "κείμενο" όνομα = "first_name" id = "first_name" & gt;
  & lt; / div & gt;
  & lt; div & gt;
    & lt; ετικέτα για = "last_name" & gt; / lt. / label & gt;
    & lt; τύπος εισόδου = "κείμενο" όνομα = "last_name" id = "last_name" & gt;
  & lt; / div & gt;
    & lt; ετικέτα για = "gender" & gt; profession & lt; / label & gt;
    & lt; τύπος εισόδου = "κείμενο" όνομα = "επάγγελμα" id = "επάγγελμα" & gt;
  & lt; / div & gt;
& lt; / fieldset & gt;

03. Κρατήστε ετικέτες σύντομα

Οι ετικέτες πεδίου λένε στους χρήστες τι σημαίνουν τα αντίστοιχα πεδία εισόδου. Το κείμενο Clear Label είναι ένας από τους κύριους τρόπους για να κάνετε το UIS πιο προσβάσιμο. Οι ετικέτες λένε στον χρήστη τον σκοπό του πεδίου, αλλά δεν βοηθούν τα κείμενα. Επομένως, εξασφαλίζοντας ότι η σάρωση εύκολα αποτελεί προτεραιότητα - θα πρέπει να σχεδιάσετε συνοπτικές, βραχείες και περιγραφικές ετικέτες (κρατήστε τους σε μια λέξη ή δύο).

04. Μην διπλοποιείτε τα πεδία

Screenshot compares bad and good forms - the bad asks users to retype their email and retype their password — Μην κάνετε τους χρήστες σας να πληκτρολογείτε δύο φορές - θα τα εμποδίσετε μόνο με την σπατάλη του χρόνου τους

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

05. Επισημάνετε τα προαιρετικά πεδία

Στην ιδανική περίπτωση, είναι καλύτερο να μην υπάρχουν προαιρετικά πεδία. Σύμφωνα με τον αριθμό του κανόνα 1, εάν δεν απαιτείται ένα κομμάτι πληροφοριών, δεν έχει νόημα να σπαταλάτε χρόνο χρήστη. Αλλά αν τα χρησιμοποιήσετε, θα πρέπει να διακρίνετε σαφώς ποια πεδία εισόδου δεν μπορούν να παραμείνουν κενά. Συνήθως ένα μικρό σημάδι όπως ένας αστερίσκος (*) ή η «προαιρετική» ετικέτα είναι αρκετή.

06. Να είστε προσεκτικοί με τις προεπιλογές

Αποφύγετε να συμπεριλαμβάνονται μια στατική προεπιλογή, εκτός αν πιστεύετε ότι ένα μεγάλο μέρος των χρηστών σας (π.χ. 90 τοις εκατό) θα επιλέξει αυτή την τιμή - ειδικά αν είναι ένα απαιτούμενο πεδίο. Γιατί; Με αυτή την προσέγγιση είναι πιθανό να εισαγάγετε σφάλματα, επειδή οι άνθρωποι σαρώσουν γρήγορα στο διαδίκτυο. Μην υποθέστε ότι θα πάρουν το χρόνο να αναλύσουν όλες τις επιλογές. Μπορούν να παρακάμψουν φλόγα από κάτι που έχει ήδη αξία.

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

07. Ελαχιστοποιήστε την ανάγκη πληκτρολόγησης

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

Η συμπλήρωση των πληροφοριών διεύθυνσής σας είναι συχνά το πιο δυσκίνητο μέρος οποιασδήποτε φόρμας ηλεκτρονικής εγγραφής, χάρη σε πολλά πεδία, μακρά ονόματα και ούτω καθεξής. Αποθηκεύστε τους χρήστες σας να πληρούνται για να πληκτρολογήσετε ολόκληρη τη διεύθυνσή τους με την εφαρμογή προφίλ για αυτά τα πεδία. Βιβλιοθήκες όπως οι Χάρτες Google Προσφέρετε ένα απλό API JavaScript για να επιτευχθεί αυτό. Μπορείς Βρείτε μια λύση εργασίας εδώ .

08. Χρησιμοποιήστε την επικύρωση σε πραγματικό χρόνο

Illustration shows two fields filled with green ticks beside them, one field filled but with a red x beside it — Ειδοποιήστε τους χρήστες αμέσως αν κάνουν ένα σφάλμα - μην τους κάνετε να περιμένουν μέχρι να ολοκληρώσουν ολόκληρη τη φόρμα

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

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

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

Μαϊντανός είναι μια εξαιρετική βιβλιοθήκη επικύρωσης φόρμας JavaScript. Είναι ανοιχτό πηγές και εστιασμένη UX, ώστε να μπορείτε να αντικαταστήσετε σχεδόν κάθε προεπιλεγμένη συμπεριφορά για να ταιριάζει στις ακριβείς ανάγκες σας. Στον ακόλουθο κώδικα υπάρχει ένα απλό παράδειγμα επικύρωσης μαϊντανού για ένα πεδίο 'μήνυμα'. Το πεδίο πρέπει να είναι τουλάχιστον 20 χαρακτήρες, αλλά όχι περισσότερο από 100.

 & lt; ετικέτα για = "μήνυμα" & gt; μήνυμα (20 chars min, 100 max): & lt; / label & gt;
& lt; textarea id = "message" class = "όνομα φόρμας" όνομα = "μήνυμα" data-parsley-trigger = "keyup" δεδομένων-μαϊντανό-minlength = "20" δεδομένων-μαϊντανό-maxlength = "100" -Μετάρι μήκους = "Ελάτε! Πρέπει να εισάγετε τουλάχιστον ένα σχόλιο 20 χαρακτήρων". Επικύρωση δεδομένων-μαϊντανό-όριο = "10" & gt; / textarea & gt;

Μπορείς Βρείτε το πλήρες δείγμα κώδικα εδώ .

09. Αποφύγετε τις σταθερές μορφές εισόδου

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

10. Μην χρησιμοποιείτε κουμπιά επαναφοράς

Illustration shows Reset button next to a Save button below a form, with a red cross through it — Λίγο καλό που ήρθε από το να συμπεριλαμβάνεται ένα κουμπί επαναφοράς δίπλα στην επιλογή υποβολής

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

Θέλετε να μάθετε πώς οι χρήστες σας ανταποκρίνονται στον ιστότοπό σας; Μια αξιοπρεπής web hosting Η υπηρεσία θα σας δώσει τα αναλυτικά που χρειάζεστε.

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

Σχετικά Άρθρα:

29 εργαλεία σχεδιασμού ιστοσελίδων για να επιταχύνετε τη ροή εργασίας σας
Οι 41 καλύτερες δωρεάν γραμματοσειρές ιστού
13 καλύτερα κομμάτια λογισμικού ελέγχου χρηστών

10 Κανόνες για την παραγωγή φιλικών προς το χρήστη μορφές ιστού

01. Ρωτήστε μόνο τι απαιτείται

02. Παραγγείλετε τα πεδία λογικά

03. Κρατήστε ετικέτες σύντομα

04. Μην διπλοποιείτε τα πεδία

05. Επισημάνετε τα προαιρετικά πεδία

06. Να είστε προσεκτικοί με τις προεπιλογές

07. Ελαχιστοποιήστε την ανάγκη πληκτρολόγησης

08. Χρησιμοποιήστε την επικύρωση σε πραγματικό χρόνο

09. Αποφύγετε τις σταθερές μορφές εισόδου

10. Μην χρησιμοποιείτε κουμπιά επαναφοράς

πως να - Τα πιο δημοφιλή άρθρα

Δημιουργήστε ένα γρήγορο αντιδραστικό ιστολόγιο με το SVELTE και SAPPER

Πώς να εφαρμόσει φως ή σκοτεινές λειτουργίες στο CSS

30 Κλειδί απόδοση Συμβουλές

Πώς να χρησιμοποιήσετε γραμματοσειρές Web

Δημιουργήστε μια σύνθετη σκηνή 3D Sci-Fi στο Blender

Πώς να σχεδιάσετε μια μεγάλη γάτα με παστέλ

Μόδα ευέλικτες διατάξεις με το CSS Grid

Δημιουργήστε ένα UI με βάση την κάρτα με βάση

Κατηγορίες