Αποτελεσματική Wireframing μιας φόρμας στο Web

Η σημασία των εντύπων
Ποιο είναι το πιο δημοφιλές και, ταυτόχρονα, το πιο μισητό μέρος του ιστού; Έντυπα. Σε μια μελέτη που πραγματοποίησα, το 91% των υποκειμένων δήλωσε ότι, τουλάχιστον μία φορά, παραιτήθηκε από την εγγραφή σε μια ηλεκτρονική υπηρεσία λόγω της μορφής που έπρεπε να συμπληρώσουν.

Εργαλείο δημιουργίας προτύπου ενημερωτικού δελτίου
Με τις κάρτες Postcards μπορείτε να δημιουργήσετε και να επεξεργαστείτε ηλεκτρονικά πρότυπα ηλεκτρονικά χωρίς καμία δεξιότητα κωδικοποίησης! Περιέχει περισσότερα από 100 στοιχεία για να σας βοηθήσει να δημιουργήσετε πρότυπα προσαρμοσμένων μηνυμάτων ηλεκτρονικού ταχυδρομείου ταχύτερα από ποτέ.

Αυτό είναι ένα καταστροφικό, αλλά όχι εκπληκτικό, αποτέλεσμα.

Όπως έγραψε ο Luke Wroblewski στο σπουδαίο βιβλίο του “Web Design Design”: “Οι μορφές πιπιλίζουν. Εάν δεν με πιστεύετε, προσπαθήστε να βρείτε ανθρώπους που τους αρέσει να τους γεμίζουν “.

Δεν είναι περίεργο ότι είναι δύσκολο να βρεις ανθρώπους που τους αρέσουν οι φόρμες. απλά σκεφτείτε το ρόλο που παίζουν:

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

Βάλτε τις φόρμες σας – οι περισσότεροι άνθρωποι μπορούν να πουν. Οι σχεδιαστές, από την άλλη πλευρά, μπορούν ευτυχώς να τους χαιρετήσουν “μορφές μακράς διαρκείας!” Δεδομένου ότι οι φόρμες δεν πρόκειται να εξαφανιστούν μέχρις ότου φανταστεί η αγορά με φανταχτερά στοιχεία βιομετρίας (που έχει και ορισμένα ηθικά ζητήματα), οι σχεδιαστές σε όλο τον κόσμο πρέπει να προσπαθήσουν να κάνουν την εμπειρία της πλήρωσης τους λιγότερο δυσάρεστη.

Τα έντυπα είναι προκλητικά, αλλά οι σχεδιαστές της εμπειρίας χρήστη αγαπούν τις προκλήσεις.

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

Πως? Επιτρέψτε μου να σας καθοδηγήσω σε μερικούς βασικούς κανόνες (σας συνιστώ να διαβάσετε το βιβλίο του Luke Wroblewski για να μάθετε περισσότερα) και τις τεχνικές τεκμηρίωσης.

κατασκευη ιστοσελιδας τιμες

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

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

Βρείτε τον εαυτό σας στα παπούτσια του χρήστη σας και λύστε τα προβλήματα που βλάπτουν την εμπειρία τους. Αυτό είναι που είναι το Design Experience Experience, έτσι;

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

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

Μια φόρμα είναι στον ιστότοπό σας για να έχει μια σημαντική συζήτηση με τον χρήστη σας. Αυτό είναι το κύριο καθήκον του.

Ο Στίβεν Π. Άντερσον, συγγραφέας του μεγάλου σχεδιασμού σαγηνευτικής αλληλεπίδρασης: Δημιουργία παιχνιδιάρικης, διασκεδαστικής και αποτελεσματικής εμπειρίας από τους χρήστες, παρουσιάζει μια έξυπνη άσκηση. Φανταστείτε το διάλογο μεταξύ μιας φόρμας ιστού και ενός χρήστη σαν να ήταν μια πραγματική συζήτηση μεταξύ ανθρώπων. Τι θα έλεγε η φόρμα σας; Αν μοιάζει με αυτό:

Χρήστης: Γεια σας, θα ήθελα να ολοκληρώσω τη συναλλαγή μου. Είμαι πραγματικά ενθουσιασμένος για να πάρει αυτό το βιβλίο!

Μορφή: Έχετε λογαριασμό;

Χρήστης: Λοιπόν, γιατί χρειάζομαι ένα;

Μορφή: Έχετε λογαριασμό; Ή θέλετε να πάρετε ένα τώρα;

Χρήστης: Αλλά δεν έχω ιδέα γιατί χρειάζομαι λογαριασμό;

Μορφή: Λάβετε τον λογαριασμό σας τώρα! ΕΙΝΑΙ ΔΩΡΕΑΝ!

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

Αυτό είναι σωστό, πρέπει να αντιμετωπίζετε τη φόρμα σας ως συνομιλητής που πρόκειται να έχει μια σημαντική συζήτηση με το χρήστη σας. Υπάρχουν τρεις κανόνες μορφής savoir-vivre:

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

Και πάντα να είστε προσεκτικοί. Οι μορφές δεν είναι εύκολο να σχεδιαστούν, αφού τείνουν να έχουν ένα σύνολο πολύπλοκων καταστάσεων που εξαρτώνται από την είσοδο των χρηστών. Σφάλματα, επιβεβαιώσεις, προειδοποιήσεις – αυτό είναι το μόνο που χρειάζεται να σχεδιάσετε, εκτός και αν θέλετε να δείτε σε πολύτιμη μορφή το μήνυμα “βάση δεδομένων # 23485 κρίσιμο λάθος”. Εάν δεν το σχεδιάζετε, κάποιος θα πάρει ακριβώς αυτό το μήνυμα … και μην περιμένετε εκπληκτικά αποτελέσματα.

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

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

Η τελική απάντηση σε αυτή την ερώτηση είναι φυσικά: όλα εξαρτώνται.

Ας συζητήσουμε το ζήτημα της τοποθέτησης ετικετών. Οι μελέτες παρακολούθησης των ματιών του Matteo Penzo δείχνουν ότι οι μορφές με την επάνω ετικέτα επεξεργάζονται με τον πιο γρήγορο τρόπο. Γιατί; Πιθανότατα επειδή η ετικέτα (αν είναι σύντομη) και το πεδίο της φόρμας μπορούν να γίνουν αντιληπτές με μία κίνηση για τα μάτια. Σε αυτή τη μελέτη, η Penzo διαπίστωσε επίσης μικρές σακκαδικές κινήσεις μεταξύ της ετικέτας και της εισόδου (50 ms) και το γεγονός ότι αν η ετικέτα είναι οικεία (π.χ. “όνομα”), οι χρήστες στερεώνουν την όρασή τους μόνο στην είσοδο, όχι στην ετικέτα.

Οι ετικέτες που έχουν ευθυγραμμιστεί δεξιά έχουν τριπλασιάσει τον χρόνο ζαχαροπλαστικής μεταξύ της ετικέτας και της εισόδου (170 ms για τους ειδικούς και 240 ms για τους αρχάριους χρήστες) σε σύγκριση με τις επάνω ετικέτες, αλλά είναι πολύ χαμηλότερες από τις ετικέτες που ευθυγραμμίζονται αριστερά (500 ms).

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

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

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

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

Αυτό είναι κάτι, έτσι; Βασικά σημαίνει ότι:

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

κατασκευη ιστοσελιδας κοστος

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

Ανοίξτε το λογαριασμό σας στο UXPin και προχωρήστε βήμα βήμα μαζί μου μέσα από την άσκηση.

1. Τίτλος της φόρμας σας
Αυτό είναι συνήθως ένα υποτιμημένο μέρος μιας φόρμας. Αλλά καλά … θυμάσαι τους κανόνες της μορφής savoir-vivre; Πρέπει να ενημερώνετε τους ανθρώπους, να τους μιλάτε και να βελτιώνετε πραγματικά τη συζήτηση. Ο τίτλος είναι μια καλή αρχή.

Τίτλος

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

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

3. Ευθυγραμμίστε τις ετικέτες
Δεδομένου ότι δεν ενδιαφέρουμε πραγματικά για το ύψος της φόρμας, είναι πολύ καλύτερο να χρησιμοποιήσουμε τις ετικέτες που τοποθετούνται στην κορυφή. Στο UXPin μπορείτε πραγματικά να επεξεργαστείτε τη θέση μιας ετικέτας με ένα κλικ.

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

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

Ευθυγράμμιση ετικετών

4. Ομαδοποίηση περιεχομένου
Εάν είστε σε θέση να διαιρέσετε το περιεχόμενο σε ομάδες – παρακαλούμε να το κάνετε. Στην περίπτωσή μας υπάρχει μια κύρια ομάδα περιεχομένου (στοιχεία αποστολής) και η ομαδοποίηση θα μπορούσε να προκαλέσει σύγχυση.

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

5. Παρέχετε βοήθεια και υποστήριξη
Όπου απαιτείται, θα πρέπει να παρέχεται βοήθεια. Προσπαθήστε να το κάνετε με διακριτικό τρόπο και μόνο σε μέρη που πραγματικά το απαιτούν.

Μην παρέχετε βοήθεια δίπλα στο πεδίο “όνομα”. Οι χρήστες σας θυμούνται σίγουρα τα ονόματά τους. Έχουν ένα πρόβλημα όμως με την κατανόηση γιατί ακριβώς χρειάζεστε τη διεύθυνση ηλεκτρονικού ταχυδρομείου τους για να παραδώσει ένα βιβλίο. Εξηγήστε ότι με έναν συνομιλητικό τρόπο:

“Χρειαζόμαστε το ηλεκτρονικό σας ταχυδρομείο για να σας ενημερώνουμε για την πρόοδο της παραγγελίας σας. Μισούμε το spam όσο και εσείς!”

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

Αχ … και θυμηθείτε – εάν απαιτούνται όλα τα πεδία, απλά μην κουράζετε τα μάτια του χρήστη σας με αστερίσκους και πρόσθετες πληροφορίες σχετικά με τις απαιτήσεις.

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

Είναι πολύ απλό. Απλά θυμηθείτε να χρησιμοποιήσετε απλή γλώσσα για να εξηγήσετε λάθη και να επιβεβαιώσετε ότι κάτι πήγε καλά.

Παραδείγματα:

“Δεν μπορούμε πραγματικά να παραδώσουμε το πακέτο χωρίς το όνομά σας :(“

“Ω άνθρωπος … χωρίς τη διεύθυνσή σας το όλο σχέδιο σίγουρα θα αποτύχει”

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

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

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

ΥΣΤΕΡΟΓΡΑΦΟ. Αν δεν έχετε εγγραφεί ακόμα στο UXPin – ήρθε η ώρα να εξασκηθείτε σε ορισμένες δεξιότητες σχεδιασμού