Η φόρμα σου μπορεί να δουλεύει τέλεια. Τα δεδομένα περνούν, οι υποβολές φτάνουν, όλα λειτουργούν όπως σχεδιάστηκαν. Αν όμως η φόρμα δεν αντιδρά οπτικά σε ό,τι κάνουν οι άνθρωποι, θα νομίσουν ότι είναι χαλασμένη. Θα πατήσουν το ίδιο πεδίο δύο φορές, χωρίς να είναι σίγουροι ότι πέτυχε το πρώτο κλικ. Θα αναρωτηθούν αν εμφανίστηκε μήνυμα λάθους ή αν η υποβολή πέρασε πραγματικά. Η σύγχυση σκοτώνει τα ποσοστά ολοκλήρωσης πιο γρήγορα από κάθε πρόβλημα σχεδιασμού. Η λύση είναι οι μικροαλληλεπιδράσεις, τα μικρά animation και οι οπτικές αντιδράσεις που δείχνουν στον κόσμο ότι η ενέργειά του πέτυχε.
Μικροαλληλεπίδραση είναι η άμεση ανατροφοδότηση που εμφανίζεται όταν κάποιος αλληλεπιδρά με τη φόρμα σου. Ένα περίγραμμα φωτίζεται όταν πατάει σε ένα πεδίο. Ένα μήνυμα λάθους τρέμει ελαφρά για να τραβήξει την προσοχή. Ένας κύκλος γυρίζει όσο επεξεργάζεται η υποβολή. Ένα τικ εμφανίζεται όταν η εγγραφή είναι σωστή. Αυτά τα animation διαρκούν μόνο χιλιοστά του δευτερολέπτου, αλλά κάνουν κρίσιμη δουλειά. Απαντούν στη σιωπηλή ερώτηση που κάνει κάθε χρήστης φόρμας σε κάθε ενέργεια: Έγινε κάτι; Το άρθρο καλύπτει τι κάνουν οι μικροαλληλεπιδράσεις, πώς να τις χρονίζεις σωστά και γιατί επηρεάζουν άμεσα αν ο κόσμος ολοκληρώνει τη φόρμα σου ή την παρατάει στη μέση.
Τι κάνουν οι μικροαλληλεπιδράσεις στις φόρμες
Η μικροαλληλεπίδραση έχει μία δουλειά: να δώσει άμεση ανατροφοδότηση για μια συγκεκριμένη ενέργεια. Κάποιος γράφει κωδικό και γεμίζει ένας δείκτης ισχύος. Κάποιος αφήνει κενό ένα υποχρεωτικό πεδίο και εμφανίζεται σφάλμα με κόκκινο φόντο. Κάποιος πατάει υποβολή και το κουμπί αλλάζει για να δείξει ότι επεξεργάζεται. Καμία από αυτές τις αλληλεπιδράσεις δεν είναι έκπληξη. Είναι αναμενόμενες. Και γίνονται σε λιγότερο από μισό δευτερόλεπτο.
Οι μικροαλληλεπιδράσεις εξυπηρετούν τέσσερις σκοπούς στις φόρμες. Πρώτον, επιβεβαιώνουν ότι το σύστημα κατέγραψε την ενέργεια. Μια φόρμα φαίνεται χαλασμένη όταν πατάς και δεν αλλάζει τίποτα. Ένα διακριτικό animation λέει ότι η ενέργεια πέτυχε. Δεύτερον, καθοδηγούν τον κόσμο προς το επόμενο βήμα. Ένα κουμπί υποβολής που λάμπει δείχνει πού να πατήσεις. Ένα μήνυμα λάθους που τονίζει το πεδίο με το πρόβλημα δείχνει πού να εστιάσεις. Τρίτον, μειώνουν το άγχος στις στιγμές αβεβαιότητας. Ένας κύκλος που γυρίζει κατά την υποβολή λέει "κάτι γίνεται, περίμενε". Χωρίς αυτόν, ο κόσμος αναρωτιέται αν πάγωσε η φόρμα. Τέταρτον, ελέγχουν την εγγραφή σε πραγματικό χρόνο. Ένα τικ όταν η διεύθυνση email είναι έγκυρη λέει στον κόσμο ότι τα πήγε σωστά, χωρίς να περιμένει την υποβολή.
Το σημαντικότερο που κάνουν οι μικροαλληλεπιδράσεις είναι να απαντούν αμέσως σε μία ερώτηση. Δούλεψε; Όταν ο κόσμος βλέπει την απάντηση, προχωρά με σιγουριά. Όταν δεν τη βλέπει, αμφιβάλλει ή επαναλαμβάνει άσκοπα τις ενέργειές του.
Καταστάσεις εστίασης και ένδειξη του ενεργού πεδίου
Η κατάσταση εστίασης είναι μια μικροαλληλεπίδραση που γίνεται όταν κάποιος πατάει μέσα σε ένα πεδίο φόρμας. Το πεδίο αλλάζει για να δείξει ότι είναι πλέον ενεργό και έτοιμο να δεχτεί κείμενο. Χωρίς κατάσταση εστίασης, κάποιος μπορεί να μη ξέρει σε ποιο πεδίο μόλις πάτησε, ειδικά στο κινητό ή αν η φόρμα έχει πολλά πεδία κοντά το ένα στο άλλο.
Μια απλή κατάσταση εστίασης είναι η αλλαγή χρώματος του περιγράμματος. Το πεδίο έχει ανοιχτόγκριζο περίγραμμα. Όταν εστιάζεται, γίνεται στο χρώμα του brand σου ή σε απαλό μπλε. Αυτό παίρνει 100 με 150 χιλιοστά του δευτερολέπτου. Αυτή η ταχύτητα κάνει τη διαφορά ανάμεσα σε κάτι που φαίνεται και κάτι αόρατο. Πολύ γρήγορο και ο κόσμος το χάνει. Πολύ αργό και φαίνεται νωθρό.
Μια δεύτερη επιλογή είναι η αλλαγή χρώματος φόντου. Το φόντο του πεδίου μένει λευκό όταν είναι ανενεργό. Όταν πατηθεί, γίνεται μια πολύ ανοιχτή απόχρωση του χρώματος του brand σου. Από ανοιχτό γκρι σε λίγο πιο ανοιχτό μπλε. Όχι δραματική αλλαγή. Αρκεί να ξεχωρίζει.
Απόφυγε να κάνεις και τις δύο αλλαγές μαζί. Περίγραμμα, φόντο, σκιά και λάμψη μαζί είναι υπερβολή. Διάλεξε μία και κάν' τη ξεκάθαρη. Το πεδίο που έχει την εστίαση πρέπει να είναι το πιο έντονο στοιχείο της φόρμας εκείνη τη στιγμή.
Βοηθά και ένα κείμενο υποδείγματος που εξαφανίζεται όταν εστιάζεται το πεδίο. Το κείμενο υποδείγματος δείχνει ένα παράδειγμα για το τι να γράψεις. Το "example@email.com" σε ένα πεδίο email. Όταν κάποιος πατήσει να γράψει, το κείμενο υποδείγματος σβήνει σιγά σιγά για να κάνει χώρο στην εγγραφή του. Κι αυτό είναι μικροαλληλεπίδραση, αν και συχνά περνά απαρατήρητο.
Ανατροφοδότηση ελέγχου σε πραγματικό χρόνο
Ο έλεγχος σε πραγματικό χρόνο σημαίνει ότι η φόρμα ελέγχει την εγγραφή καθώς γράφεις και σου λέει αν είναι σωστή. Ένα πεδίο email ελέγχει κάθε χαρακτήρα και δείχνει τικ ή Χ πριν καν τελειώσεις το γράψιμο. Ένα πεδίο κωδικού δείχνει την ισχύ καθώς προσθέτεις χαρακτήρες. Ένα πεδίο ταχυδρομικού κώδικα επιβεβαιώνει ότι η μορφή είναι σωστή.
Η μικροαλληλεπίδραση εδώ είναι η εμφάνιση του τικ ή του Χ και η αλλαγή χρώματος από ουδέτερο σε πράσινο (σωστό) ή κόκκινο (λάθος). Αυτά γίνονται αμέσως καθώς γράφει ο χρήστης. Χωρίς αναμονή. Χωρίς να χρειάζεται υποβολή.
Ο έλεγχος σε πραγματικό χρόνο μειώνει τα λάθη στην υποβολή. Αν κάποιος δει ένα Χ δίπλα στην εγγραφή του, τη διορθώνει πριν πατήσει υποβολή. Δεν συμπληρώνει ολόκληρη τη φόρμα για να μάθει στο τέλος ότι ένα πεδίο ήταν λάθος. Έτσι γλιτώνει την απογοήτευση και ανεβαίνουν τα ποσοστά ολοκλήρωσης.
Η χρονική στιγμή μετράει. Ο έλεγχος πρέπει να ενεργοποιείται όταν ο χρήστης σταματά να γράφει για περίπου 500 χιλιοστά του δευτερολέπτου. Ο έλεγχος σε κάθε πάτημα πλήκτρου μπορεί να φανεί επιθετικός. Μια σύντομη παύση αφήνει τον χρήστη να ολοκληρώσει τη σκέψη του πριν εμφανιστεί η ανατροφοδότηση.
Η οπτική ανατροφοδότηση πρέπει να είναι άμεση. Όχι κύκλος φόρτωσης όσο γίνεται ο έλεγχος. Δείξε το τικ ή το σφάλμα αμέσως. Οι περισσότεροι έλεγχοι (μορφή email, μήκος κωδικού, μορφή ταχυδρομικού κώδικα) γίνονται αμέσως στη συσκευή. Δεν υπάρχει κλήση στον διακομιστή. Δείξε αυτή την ταχύτητα.
Μηνύματα λάθους με οπτική έμφαση
Όταν κάποιος υποβάλλει φόρμα με λάθος, το μήνυμα λάθους πρέπει να εμφανίζεται με τρόπο που δεν χάνεται. Ένα απλό μήνυμα κειμένου στο κάτω μέρος της φόρμας περνά εύκολα απαρατήρητο. Μια μικροαλληλεπίδραση κάνει το λάθος αδύνατο να το αγνοήσεις.
Η καλύτερη μικροαλληλεπίδραση λάθους είναι συνδυασμός. Το πεδίο με το λάθος παίρνει κόκκινο περίγραμμα. Το κείμενο της ετικέτας γίνεται κόκκινο ή έντονο. Το μήνυμα λάθους εμφανίζεται κάτω από το πεδίο με κόκκινο εικονίδιο. Ένα διακριτικό animation τρεμούλιασματος (10 με 20 pixel αριστερά και δεξιά, διάρκειας 300 χιλιοστών του δευτερολέπτου) τραβά την προσοχή χωρίς να ενοχλεί. Το τρεμούλιασμα λέει "ε, αυτό είναι σημαντικό".
Το ίδιο το μήνυμα λάθους πρέπει να είναι καθαρό και συγκεκριμένο. Όχι "Μη έγκυρη εγγραφή". Καλύτερα, "Οι διευθύνσεις email χρειάζονται το σύμβολο @". Ή "Οι κωδικοί πρέπει να έχουν τουλάχιστον 8 χαρακτήρες". Όταν ο κόσμος βλέπει σφάλμα, πρέπει να ξέρει ακριβώς τι πήγε λάθος και πώς να το διορθώσει.
Το κόκκινο είναι το στάνταρ χρώμα για τα λάθη, γιατί οι άνθρωποι καταλαβαίνουν το κόκκινο ως "στοπ" ή "πρόβλημα". Μη χρησιμοποιήσεις άλλο χρώμα με την ελπίδα να ταιριάξει με το brand σου. Η αναγνώριση του κόκκινου ως λάθους είναι παγκόσμια. Μείνε σε αυτό.
Καταστάσεις φόρτωσης και επεξεργασίας
Όταν κάποιος πατάει υποβολή, η φόρμα στέλνει δεδομένα σε διακομιστή. Αυτό παίρνει χρόνο. Στο διάστημα αυτό ο άνθρωπος περιμένει και αναρωτιέται. Έγινε κάτι; Θα ολοκληρωθεί ποτέ; Η μικροαλληλεπίδραση φόρτωσης γεμίζει αυτή τη σιωπή.
Η πιο απλή κατάσταση φόρτωσης είναι να απενεργοποιήσεις το κουμπί υποβολής και να αλλάξεις το κείμενό του από "Υποβολή" σε "Γίνεται υποβολή..." ή "Φόρτωση...". Το κουμπί πρέπει επίσης να ξεθωριάσει λίγο ή να γίνει γκρι, για να δείξει ότι δεν πατιέται πια. Έτσι ο κόσμος δεν πατάει υποβολή πολλές φορές.
Ένα βήμα καλύτερα είναι να προσθέσεις animation κύκλου φόρτωσης. Ένα μικρό κυκλικό εικονίδιο που γυρίζει όσο επεξεργάζεται η φόρμα. Είναι πιο ελκυστικό από στατικό κείμενο και δίνει αίσθηση κίνησης και δραστηριότητας.
Η διάρκεια της κατάστασης φόρτωσης εξαρτάται από το πόσο χρόνο παίρνει πραγματικά η υποβολή. Για φόρμες που υποβάλλονται σε λιγότερο από ένα δευτερόλεπτο, η κατάσταση φόρτωσης μπορεί να φανεί περιττή. Το κουμπί μπορεί απλώς να σκουραίνει για λίγο. Για φόρμες που παίρνουν δύο με πέντε δευτερόλεπτα (όπως μια σύνθετη επεξεργασία δεδομένων), δείξε τον κύκλο φόρτωσης. Γεμίζει τον χρόνο αναμονής και μειώνει το άγχος.
Ο κύκλος πρέπει να κάνει περίπου μία πλήρη στροφή το δευτερόλεπτο. Πιο γρήγορα φαίνεται νευρικό. Πιο αργά φαίνεται παγωμένο. Μία στροφή το δευτερόλεπτο μοιάζει με σταθερή πρόοδο.
Επιβεβαίωση επιτυχίας και ανατροφοδότηση ολοκλήρωσης
Αφού η φόρμα υποβληθεί με επιτυχία, ο χρήστης πρέπει να ξέρει ότι δούλεψε. Μια σελίδα ή ένα μήνυμα επιτυχίας είναι η προφανής λύση. Αλλά μια μικροαλληλεπίδραση μπορεί να κάνει τη στιγμή πιο ικανοποιητική και αξέχαστη.
Ένα πράσινο τικ που εμφανίζεται με διακριτικό animation μεγέθυνσης (από 80% σε 100% του μεγέθους μέσα σε 300 χιλιοστά του δευτερολέπτου) δείχνει ολοκλήρωση. Το τικ μοιάζει με ανταμοιβή. Λέει "τα κατάφερες". Μαζί με ένα μήνυμα επιτυχίας σε πράσινο κείμενο, επιβεβαιώνει ότι η φόρμα πέρασε.
Μια δεύτερη προσέγγιση είναι μια γραμμή προόδου που γεμίζει στο 100% όταν ολοκληρωθεί η υποβολή. Αν η φόρμα έχει πολλά βήματα, μια γραμμή προόδου στο πάνω μέρος δείχνει πόσο έχει προχωρήσει ο άνθρωπος. Όταν ολοκληρωθεί το τελευταίο βήμα, η γραμμή γεμίζει τελείως και γίνεται πράσινη. Μοιάζει με το πέρασμα της γραμμής τερματισμού.
Το ίδιο το μήνυμα επιτυχίας πρέπει να είναι σύντομο και καθαρό. Όχι "Η υποβολή σας παραλήφθηκε με επιτυχία από το σύστημά μας". Καλύτερα, "Ευχαριστούμε. Πήραμε το μήνυμά σου." Ο τόνος πρέπει να είναι προσωπικός και ζεστός. Ο άνθρωπος ολοκλήρωσε μια δουλειά. Αναγνώρισέ το άμεσα.
Αν η φόρμα μετά την επιτυχία οδηγεί σε νέα σελίδα, μην αφαιρέσεις αμέσως τη φόρμα. Άσε το animation επιτυχίας να παίξει 500 με 800 χιλιοστά του δευτερολέπτου πριν την ανακατεύθυνση. Δώσε στον κόσμο μια στιγμή να δει ότι τα κατάφερε πριν τον πας στην επόμενη σελίδα.
Χρονισμός και ταχύτητα στις μικροαλληλεπιδράσεις
Η ταχύτητα μιας μικροαλληλεπίδρασης καθορίζει αν φαίνεται άμεση ή νωθρή. Το ιδανικό εύρος είναι 200 με 500 χιλιοστά του δευτερολέπτου. Είναι αρκετά γρήγορο για να φαίνεται άμεσο και αρκετά αργό για να το δεις και να το καταλάβεις.
Η αλλαγή κατάστασης εστίασης πρέπει να είναι στο γρήγορο άκρο. 100 με 200 χιλιοστά του δευτερολέπτου. Είναι σχεδόν άμεση, αλλά δίνει στο μάτι λίγο χρόνο να την προσέξει.
Το τρεμούλιασμα πεδίου σε λάθος πρέπει να είναι περίπου 300 χιλιοστά του δευτερολέπτου. Φαίνεται χωρίς να ενοχλεί. Πιο γρήγορα μοιάζει υστερικό. Πιο αργά μοιάζει καθυστερημένο.
Ένας κύκλος φόρτωσης ή ένα animation επιτυχίας μπορεί να είναι πιο αργό, 500 με 800 χιλιοστά του δευτερολέπτου. Είναι στιγμές όπου ο άνθρωπος περιμένει να περιμένει. Ένα πιο αργό animation μοιάζει πιο ουσιαστικό και ανταμείβει.
Μη χρησιμοποιείς ποτέ animation μεγαλύτερης διάρκειας από ένα δευτερόλεπτο σε φόρμα. Φαίνεται αργό. Οι αλληλεπιδράσεις σε φόρμες πρέπει να είναι γρήγορες και άμεσες. Αν ένα animation κρατά πάνω από ένα δευτερόλεπτο, ο κόσμος θα αναρωτηθεί αν χάλασε κάτι.
Δοκίμασε τις μικροαλληλεπιδράσεις σε πραγματικές συσκευές και δίκτυα. Ό,τι φαίνεται γρήγορο σε υπολογιστή με ίνες, μπορεί να καθυστερεί σε κινητό με 4G. Σχεδίασε για την πιο αργή πιθανή εμπειρία.
Προσβασιμότητα στις μικροαλληλεπιδράσεις
Κάποιοι άνθρωποι δεν βλέπουν animation. Χρησιμοποιούν ρυθμίσεις προσβασιμότητας που απενεργοποιούν την κίνηση. Μια μικροαλληλεπίδραση που στηρίζεται μόνο στο animation θα είναι αόρατη γι' αυτούς. Η ανατροφοδότησή σου πρέπει να δουλεύει και χωρίς κίνηση.
Το χρώμα είναι το σημαντικότερο σήμα ανατροφοδότησης. Ένα κόκκινο περίγραμμα σε πεδίο με λάθος δουλεύει είτε εμφανίζεται με animation είτε όχι. Ένα πράσινο τικ σε σωστή εγγραφή δουλεύει με ή χωρίς animation μεγέθυνσης. Το χρώμα επικοινωνεί αμέσως χωρίς κίνηση.
Το κείμενο είναι επίσης κρίσιμο. Ένα μήνυμα λάθους πρέπει να είναι κείμενο, όχι μόνο ένα κόκκινο εικονίδιο. Μια κατάσταση επιτυχίας χρειάζεται το "Η φόρμα σου υποβλήθηκε με επιτυχία" ως κείμενο, όχι μόνο ένα τικ. Όταν κάτι πάει λάθος ή σωστά, πες το με λέξεις.
Χρησιμοποίησε τη ρύθμιση prefers-reduced-motion στο CSS. Αν κάποιος έχει ρυθμίσει τη συσκευή του να μειώνει την κίνηση, αφαίρεσε ή απλοποίησε τα animation γι' αυτόν. Κράτα το χρώμα και το κείμενο. Κράτα την κατάσταση εστίασης. Αφαίρεσε το τρεμούλιασμα, τη μεγέθυνση, την περιστροφή. Παίρνουν πάλι πλήρη ανατροφοδότηση, απλώς χωρίς κίνηση.
Συνηθισμένα λάθη στις μικροαλληλεπιδράσεις φορμών
Οι μικροαλληλεπιδράσεις μπορεί να γυρίσουν μπούμερανγκ αν γίνουν άσχημα. Το πιο συνηθισμένο λάθος είναι animation πολύ αργά ή πολύ μεγάλης διάρκειας. Ένα animation εστίασης πεδίου που παίρνει 500 χιλιοστά του δευτερολέπτου φαίνεται νωθρό. Μια μετάβαση στο κουμπί υποβολής που κρατά δύο δευτερόλεπτα φαίνεται παγωμένη. Κράτα τα γρήγορα.
Δεύτερο λάθος είναι τα animation χωρίς σαφή σκοπό. Ένα εικονίδιο που γυρίζει χωρίς να έχει σχέση με φόρτωση, ή μια αλλαγή χρώματος που δεν δείχνει αλλαγή κατάστασης, μπερδεύει τον κόσμο. Κάθε μικροαλληλεπίδραση πρέπει να απαντά σε μια ερώτηση ή να δείχνει μια συγκεκριμένη αλλαγή.
Τρίτο λάθος είναι οι ασυνεπείς μικροαλληλεπιδράσεις. Η κατάσταση εστίασης σε μία φόρμα αλλάζει το χρώμα του περιγράμματος. Σε άλλη φόρμα της ίδιας ιστοσελίδας αλλάζει το φόντο. Ο κόσμος προσέχει αυτή την ασυνέπεια και δεν είναι σίγουρος τι γίνεται. Χρησιμοποίησε το ίδιο στυλ μικροαλληλεπίδρασης σε όλες τις φόρμες της ιστοσελίδας σου.
Τέταρτο λάθος είναι τα υπερβολικά animation. Κάθε πεδίο που εστιάζεται βγάζει λάμψη. Κάθε πάτημα πλήκτρου προκαλεί ανατροφοδότηση. Κάθε κατάσταση hover έχει κίνηση. Η φόρμα γίνεται αποσπαστική αντί για χρήσιμη. Χρησιμοποίησε μικροαλληλεπιδράσεις όπου προσθέτουν αξία. Παράλειψέ τες όπου είναι περιττές.
Πέμπτο λάθος είναι τα φτωχά μηνύματα λάθους. Ένα κόκκινο πεδίο χωρίς επεξηγηματικό κείμενο αφήνει τον κόσμο να μαντεύει τι πήγε λάθος. Συνδύαζε πάντα την οπτική ανατροφοδότηση με καθαρό, συγκεκριμένο μήνυμα λάθους.
Πώς σε βοηθά το WEMASY να προσθέσεις μικροαλληλεπιδράσεις στις φόρμες
Ο δημιουργός ιστοσελίδων του WEMASY σου επιτρέπει να φτιάξεις τις δικές σου σελίδες στην ιστοσελίδα σου.
Οι καλές μικροαλληλεπιδράσεις είναι μικρές και γρήγορες. Δείχνουν στον άνθρωπο ότι η φόρμα άκουσε την ενέργειά του.
Συνδύαζε πάντα το χρώμα με κείμενο, για να καταλαβαίνουν όλοι τι έγινε.
Δοκίμασε τη φόρμα σου σε κινητό και σε πραγματικό δίκτυο πριν τη δημοσιεύσεις.
Δες τα πακέτα του WEMASY.