Όταν κάποιος συναντά ένα σφάλμα στη φόρμα σου, απέχει μια στιγμή από το να φύγει. Μελέτες δείχνουν ότι πάνω από 75% των χρηστών εγκαταλείπουν τις φόρμες όταν εμφανίζονται σφάλματα και δεν μπορούν να τα διορθώσουν αμέσως. Δεν είναι μικρό πρόβλημα. Είναι τρεις στους τέσσερις πιθανούς πελάτες, leads ή συνδρομητές που φεύγουν. Η διαφορά ανάμεσα στο να τους κρατήσεις και να τους χάσεις συχνά καταλήγει σε ένα πράγμα: το μήνυμα σφάλματος. Ένα μπερδεμένο μήνυμα σφάλματος τους διώχνει. Ένα σαφές, χρήσιμο μήνυμα σφάλματος τους φέρνει πίσω και τους βοηθά να ολοκληρώσουν τη φόρμα.
Ένα μήνυμα σφάλματος είναι η ευκαιρία της φόρμας σου να οδηγήσει κάποιον προς την ολοκλήρωση όταν κάνει λάθος. Ένα κακό μήνυμα σφάλματος (ασαφές, κατηγορητικό ή άχρηστο) κάνει τον χρήστη να νιώθει μπερδεμένος ή ένοχος. Ένα καλό μήνυμα σφάλματος του λέει ακριβώς τι πήγε στραβά, γιατί μετράει και πώς να το διορθώσει, σε απλή γλώσσα. Το άρθρο εξηγεί πώς να γράφεις μηνύματα σφάλματος που δουλεύουν, πού να τα τοποθετείς ώστε να μη χάνονται, ποιο ύφος χτίζει πραγματικά εμπιστοσύνη και γιατί η σαφήνεια κάνει τη διαφορά ανάμεσα στην εγκατάλειψη και την ολοκλήρωση.
Τι κάνει αποτελεσματικό ένα μήνυμα σφάλματος
Ένα αποτελεσματικό μήνυμα σφάλματος κάνει τρία πράγματα. Πρώτον, δηλώνει καθαρά τι πήγε στραβά. Όχι "Μη έγκυρη εισαγωγή". Αντί γι' αυτό, "Οι διευθύνσεις email χρειάζονται το σύμβολο @." Δεύτερον, εξηγεί γιατί απορρίφθηκε η εισαγωγή, αν αυτό βοηθά. "Οι κωδικοί πρόσβασης πρέπει να έχουν τουλάχιστον 8 χαρακτήρες, γιατί οι πιο σύντομοι σπάνε πιο εύκολα." Τρίτον, λέει στον χρήστη ακριβώς τι να κάνει στη συνέχεια. "Γύρνα στο πεδίο του κωδικού και πρόσθεσε τουλάχιστον 4 χαρακτήρες ακόμα." Ο χρήστης τώρα ξέρει το πρόβλημα, καταλαβαίνει γιατί μετράει και ξέρει πώς να το διορθώσει.
Το ύφος ενός μηνύματος σφάλματος μετράει περισσότερο απ' όσο νομίζουν οι περισσότεροι. Ένα μήνυμα σφάλματος που ακούγεται θυμωμένο ή υποτιμητικό κάνει τον χρήστη να νιώθει ότι τον κατηγορούν. Το "Ξέχασες το σύμβολο @" μοιάζει με δική του ευθύνη. Το "Οι διευθύνσεις email χρειάζονται το σύμβολο @" είναι η ίδια πληροφορία χωρίς κατηγορία. Ένα χρήσιμο ύφος αναγνωρίζει το λάθος χωρίς να κάνει το άτομο να νιώθει άσχημα.
Ο χρόνος και η θέση ενός μηνύματος σφάλματος καθορίζουν αν ο χρήστης θα το δει καν. Ένα μήνυμα σφάλματος που εμφανίζεται τρεις οθόνες κάτω από το πεδίο που το προκάλεσε χάνεται εύκολα. Ένα μήνυμα σφάλματος που εμφανίζεται δίπλα στο προβληματικό πεδίο, τη στιγμή που προσπαθούν να προχωρήσουν, τους αναγκάζει να το προσέξουν και να το διορθώσουν αμέσως.
Επικύρωση εν ώρα εισαγωγής ή κατά την υποβολή
Η επικύρωση εν ώρα εισαγωγής (inline validation) δείχνει μήνυμα σφάλματος τη στιγμή που κάποιος συμπληρώνει ένα πεδίο λάθος, πριν στείλει τη φόρμα. Ένα πεδίο κωδικού δείχνει σφάλμα μόλις πληκτρολογήσουν κωδικό που είναι πολύ σύντομος. Ένα πεδίο email δείχνει σφάλμα μόλις φύγουν από το πεδίο χωρίς σύμβολο @. Η ανατροφοδότηση σε πραγματικό χρόνο είναι δυνατή, γιατί οι άνθρωποι διορθώνουν τα λάθη αμέσως αντί να τα ανακαλύπτουν αφού συμπληρώσουν ολόκληρη τη φόρμα.
Η επικύρωση εν ώρα εισαγωγής κάνει ένα πράγμα ιδιαίτερα καλά. Χτίζει αυτοπεποίθηση. Όταν κάποιος πληκτρολογεί μια διεύθυνση email και βλέπει να εμφανίζεται ένα πράσινο τικ, ξέρει ότι τη σωστή. Προχωρά χωρίς αμφιβολία. Χωρίς αυτή την επιβεβαίωση, αναρωτιέται αν η εισαγωγή του ήταν σωστή και αμφιβάλλει για τον εαυτό του.
Η επικύρωση κατά την υποβολή είναι αυτό που γίνεται όταν κάποιος πατά αποστολή και η φόρμα ελέγχει όλα τα πεδία μαζί. Αν κάποιο πεδίο έχει σφάλμα, εμφανίζεται μια σύνοψη επικύρωσης που απαριθμεί όλα τα προβλήματα στην κορυφή της φόρμας, και κάθε πεδίο με σφάλμα επισημαίνεται. Η επικύρωση κατά την υποβολή πιάνει σφάλματα που ξέφυγαν από την επικύρωση εν ώρα εισαγωγής και δίνει στους χρήστες πλήρη εικόνα του τι πρέπει να διορθωθεί.
Η καλύτερη προσέγγιση είναι και τα δύο. Χρησιμοποίησε επικύρωση εν ώρα εισαγωγής για πεδία που ελέγχονται αμέσως (μορφή email, μήκος κωδικού, μορφή ΤΚ). Χρησιμοποίησε επικύρωση κατά την υποβολή ως τελική δικλίδα ασφαλείας. Όταν κάποιος πατά αποστολή, αν κάποιο πεδίο έχει ακόμα σφάλμα, δείξε του αμέσως τι πρέπει να διορθωθεί πριν μπορέσει να στείλει.
Πώς γράφεις μηνύματα σφάλματος που είναι συγκεκριμένα και πρακτικά
Ένα συγκεκριμένο μήνυμα σφάλματος λέει στον χρήστη ακριβώς ποιο είναι το πρόβλημα. Ένα γενικό μήνυμα σφάλματος τον αφήνει να μαντεύει. Σύγκρινε αυτά τα δύο:
Γενικό: "Μη έγκυρος αριθμός τηλεφώνου."
Συγκεκριμένο: "Οι αριθμοί τηλεφώνου χρειάζονται 10 ψηφία. Έχεις γράψει 9. Πρόσθεσε ένα ακόμα ψηφίο."
Το γενικό μήνυμα λέει στον χρήστη τι δεν πάει καλά αλλά όχι γιατί ή πώς να το διορθώσει. Το συγκεκριμένο μήνυμα του λέει το πρόβλημα, γιατί συνέβη και ακριβώς τι να κάνει. Το συγκεκριμένο μήνυμα παίρνει λίγο περισσότερο χρόνο να διαβαστεί, αλλά γλιτώνει από τον χρήστη λεπτά ταλαιπωρίας.
Ένα πρακτικό μήνυμα σφάλματος περιλαμβάνει οδηγίες. Το "Οι κωδικοί πρόσβασης πρέπει να περιέχουν τουλάχιστον έναν αριθμό" λέει τι λείπει. Το "Οι κωδικοί πρόσβασης πρέπει να περιέχουν τουλάχιστον έναν αριθμό. Γύρνα στο πεδίο του κωδικού και πρόσθεσε έναν αριθμό" λέει τι να κάνει. Στις φόρμες η οδηγία είναι συνήθως προφανής (γύρνα στο πεδίο), αλλά η ρητή διατύπωση βοηθά ανθρώπους που δεν είναι εξοικειωμένοι με τις φόρμες ή που χρησιμοποιούν βοηθητική τεχνολογία.
Χρησιμοποίησε απλή γλώσσα. Όχι "Λανθασμένη μορφή ΤΚ." Αντί γι' αυτό, "Οι ΤΚ είναι 5 αριθμοί. Έχεις γράψει γράμματα." Όχι "Μη έγκυρη μορφή email." Αντί γι' αυτό, "Οι διευθύνσεις email χρειάζονται σύμβολο @ και domain (παράδειγμα: name@company.com)."
Θέση που κάνει τα σφάλματα αδύνατο να χαθούν
Ένα μήνυμα σφάλματος που βρίσκεται μακριά από το πεδίο που το προκάλεσε χάνεται εύκολα. Όταν κάποιος συμπληρώνει μια φόρμα με πολλά πεδία, εστιάζει σε κάθε πεδίο ένα ένα. Ένα μήνυμα σφάλματος που εμφανίζεται στο κάτω μέρος της φόρμας ενώ εκείνοι είναι ακόμα εστιασμένοι στο πάνω μέρος περνά απαρατήρητο.
Η καλύτερη θέση για ένα μήνυμα σφάλματος είναι ακριβώς κάτω ή δίπλα στο πεδίο που έχει το σφάλμα. Όταν πηγαίνουν στο επόμενο πεδίο ή προσπαθούν να στείλουν, ένα μήνυμα σφάλματος εμφανίζεται αμέσως κάτω από το πεδίο που μόλις συμπλήρωσαν. Δεν μπορούν να το αποφύγουν γιατί εμφανίζεται εκεί που περιμένουν την επόμενη ενέργεια.
Για μια σύνοψη επικύρωσης (που απαριθμεί όλα τα σφάλματα μαζί μετά την υποβολή), τοποθέτησέ την στην κορυφή της φόρμας. Έτσι ο χρήστης έχει πλήρη εικόνα όλων των προβλημάτων. Μετά, καθώς κυλά προς τα κάτω, τα επιμέρους σφάλματα πεδίων εμφανίζονται ξανά δίπλα σε κάθε πεδίο που πρέπει να διορθώσουν. Αυτή η διπλή προσέγγιση εξυπηρετεί δύο σκοπούς: δείχνει την πλήρη έκταση του τι πρέπει να διορθωθεί και τους το υπενθυμίζει καθώς δουλεύουν σε κάθε πεδίο.
Μην χρησιμοποιείς ποτέ μηνύματα σφάλματος τύπου toast στις φόρμες. Το toast είναι μια ειδοποίηση που εμφανίζεται για λίγο στη γωνία της οθόνης και μετά εξαφανίζεται. Στις φόρμες, αυτή είναι η χειρότερη δυνατή θέση. Το σφάλμα εμφανίζεται μακριά από το πεδίο που το προκάλεσε. Εξαφανίζεται πριν ο χρήστης προλάβει να το διαβάσει. Δημιουργεί αποσύνδεση ανάμεσα στο πρόβλημα και στο σημείο όπου διορθώνεται. Αν ένα μήνυμα σφάλματος πρέπει να εξαφανιστεί, πρέπει να γίνει μόνο αφού ο χρήστης διορθώσει επιτυχώς το πεδίο.
Οπτικός σχεδιασμός των μηνυμάτων σφάλματος
Το χρώμα από μόνο του δεν αρκεί για να επικοινωνήσει ένα σφάλμα. Κάποιος με αχρωματοψία μπορεί να μη βλέπει το κόκκινο χρώμα που σηματοδοτεί σφάλμα. Ένα πολύ μικρό εικονίδιο σφάλματος μπορεί να χαθεί από κάποιον με χαμηλή όραση. Βασίσου σε πολλαπλά σήματα: χρώμα συν κείμενο συν εικονίδιο.
Ένα κόκκινο περίγραμμα γύρω από το πεδίο. Ένα κόκκινο ή πορτοκαλί εικονίδιο δίπλα στο μήνυμα σφάλματος. Κείμενο που δηλώνει καθαρά το πρόβλημα. Και τα τρία μαζί δημιουργούν μια κατάσταση σφάλματος που σχεδόν όλοι αναγνωρίζουν.
Το μέγεθος γραμματοσειράς μετράει. Το κείμενο του μηνύματος σφάλματος πρέπει να έχει το ίδιο μέγεθος με την ετικέτα του πεδίου. Αν το μήνυμα σφάλματος είναι μικρότερο, οι άνθρωποι μπορεί να το χάσουν ή να νομίσουν ότι είναι λιγότερο σημαντικό απ' ό,τι είναι. Το μήνυμα σφάλματος αξίζει το ίδιο οπτικό βάρος με την ετικέτα.
Μπορεί να αλλάξει και η ετικέτα του προβληματικού πεδίου. Το κείμενο της ετικέτας μπορεί να γίνει κόκκινο ή έντονο. Αυτό δημιουργεί ένα ακόμα οπτικό σήμα που βοηθά τον χρήστη να σαρώσει γρήγορα τη φόρμα και να βρει το πεδίο που θέλει προσοχή.
Ύφος και ευγένεια στα μηνύματα σφάλματος
Τα μηνύματα σφάλματος πρέπει να ακούγονται σαν να βοηθάς κάποιον, όχι σαν να τον κατηγορείς. Απόφυγε λέξεις που ακούγονται σκληρές ή κατηγορητικές.
Σκληρό: "Έγραψες μη έγκυρη διεύθυνση email."
Χρήσιμο: "Οι διευθύνσεις email χρειάζονται το σύμβολο @. Έλεγξε τι έγραψες και δοκίμασε ξανά."
Σκληρό: "Ο κωδικός είναι πολύ αδύναμος."
Χρήσιμο: "Οι κωδικοί χρειάζονται τουλάχιστον 8 χαρακτήρες. Οι μεγαλύτεροι κωδικοί είναι πιο ασφαλείς."
Σκληρό: "Ξέχασες να συμπληρώσεις αυτό το πεδίο."
Χρήσιμο: "Αυτό το πεδίο είναι υποχρεωτικό. Πες μας τη γνώμη σου."
Ένα χρήσιμο ύφος αναγνωρίζει το λάθος χωρίς να κάνει το άτομο να νιώθει άσχημα. Εξηγεί γιατί υπάρχει ο κανόνας (όταν βοηθά). Προχωρά χωρίς να κολλά στο σφάλμα.
Συνηθισμένα λάθη στα μηνύματα σφάλματος
Το πιο συνηθισμένο λάθος είναι να είσαι πολύ ασαφής. Το "Μη έγκυρη εισαγωγή" δεν λέει τίποτα στον χρήστη. Το "Κάτι πήγε στραβά" είναι εξίσου άχρηστο. Γίνε συγκεκριμένος για το ποιο είναι το πρόβλημα.
Δεύτερο λάθος είναι η τεχνική γλώσσα. Το "Regex mismatch" ή το "Validation failed" μπορεί να λέει κάτι σε μηχανικούς, αλλά οι απλοί άνθρωποι δεν έχουν ιδέα τι σημαίνουν. Μετάφρασε τα τεχνικά σφάλματα σε απλή γλώσσα.
Τρίτο λάθος είναι να δείχνεις πάρα πολλά σφάλματα μαζί. Αν μια φόρμα έχει 20 πεδία και τα 20 δείχνουν σφάλματα, ο χρήστης νιώθει συντριβή. Δώσε προτεραιότητα στα κρίσιμα σφάλματα (όπως ένα υποχρεωτικό πεδίο που είναι κενό) και δείξε τα πρώτα. Τα δευτερεύοντα σφάλματα (όπως ένα πεδίο με πρόβλημα μορφοποίησης που είναι προαιρετικό) μπορούν να εμφανιστούν δεύτερα.
Τέταρτο λάθος είναι τα μηνύματα σφάλματος που επαναλαμβάνουν την ετικέτα χωρίς να προσθέτουν νέα πληροφορία. Η ετικέτα λέει "Διεύθυνση email." Το μήνυμα σφάλματος λέει "Η διεύθυνση email δεν είναι έγκυρη." Ο χρήστης ήδη ξέρει ποιο πεδίο έχει το πρόβλημα (βλέπει το κόκκινο περίγραμμα), αλλά ακόμα δεν ξέρει γιατί δεν είναι έγκυρη. Το μήνυμα σφάλματος πρέπει να προσθέτει πληροφορία, όχι να επαναλαμβάνει την ετικέτα.
Πέμπτο λάθος είναι να μην προσφέρεις τρόπο διόρθωσης. Το "Ο κωδικός δεν πληροί τις απαιτήσεις" λέει στον χρήστη ότι κάτι δεν πάει καλά αλλά όχι ποιες είναι οι απαιτήσεις. Το "Ο κωδικός δεν πληροί τις απαιτήσεις. Οι κωδικοί χρειάζονται τουλάχιστον 8 χαρακτήρες και έναν αριθμό" του λέει τι να διορθώσει.
Πώς σε βοηθά η WEMASY να φτιάξεις σαφή μηνύματα σφάλματος
Με τον δημιουργό ιστοσελίδων της WEMASY φτιάχνεις τις δικές σου σελίδες στην ιστοσελίδα σου και μπορείς να προσθέσεις μια φόρμα.
Γράψε τα μηνύματα σφάλματος με απλά λόγια και δείξε τα δίπλα στο πεδίο που τα προκάλεσε.
Κάθε μήνυμα πρέπει να λέει τι πήγε στραβά και πώς διορθώνεται.
Δοκίμασε τη φόρμα σου με σκόπιμα λάθη, για να δεις πώς φαίνονται τα μηνύματα στην πράξη.
Δες τι περιλαμβάνει το πακέτο WEMASY σου.