Βέλτιστες πρακτικές για 6 κοινά στοιχεία διεπαφής χρήστη
Η εμφάνιση και η χρηστικότητα ορισμένων στοιχείων διεπαφής και λειτουργικότητας είναι ζωτικής σημασίας για την επιτυχία των ιστοσελίδων της σημερινής αγοράς.
Μελέτες έχουν αποδείξει ότι ακόμη και μια καθυστέρηση split-second στη σκέψη από το χρήστη θα αποδυναμώσει την αντίληψή τους και το ενδιαφέρον τους για έναν ιστότοπο και τελικά θα μειώσει το ποσοστό μετατροπής του ιστότοπου.
Σε ορισμένες θέσεις και βιομηχανίες, τα στοιχεία του UI που δεν είναι προφανή στη χρήση τους μπορεί να είναι απολύτως αποδεκτά. Η βιομηχανία blogging και ανάπτυξης ιστοσελίδων είναι τέλεια παραδείγματα.
Αλλά όταν σχεδιάζουμε διεπαφές χρηστών για μη τεχνικά κατανοητά ακροατήρια - κάτι που συμβαίνει συνήθως με την εργασία των πελατών - πρέπει να διασφαλίσουμε ότι ορισμένα στοιχεία UI δεν απομακρύνονται πολύ από αυτό που οι χρήστες έχουν συνηθίσει.
Αυτό το άρθρο περιγράφει μερικές βέλτιστες πρακτικές και χαρακτηριστικά χρηστικότητας από έξι στοιχεία διεπαφής χρήστη και τις συμβάσεις για το καθένα, έτσι ώστε οι προγραμματιστές να δημιουργήσουν εμπειρίες χρήστη που είναι τόσο όμορφα και απλά.
1. Εμφάνιση του πλαισίου αναζήτησης
Σε μεγάλους ιστοτόπους πλούσιους σε πληροφορίες ή βαριά προϊόντα, η αναζήτηση είναι βασιλιάς. Οι χρήστες εδώ γενικά παραιτούνται από συμβατικές γραμμές πλοήγησης υπέρ του κουτιού αναζήτησης.
Ένα πλαίσιο αναζήτησης που δεν είναι άμεσα ορατό θα έχει ένα από τα δύο εφέ: 1) ο χρήστης δεν θα έχει καμία δυνατότητα αναζήτησης ή 2) ο χρήστης θα βρει τη λειτουργικότητα αναζήτησης μετά από μια καθυστερημένη και ενδεχομένως ερεθιστική περίοδο.
Βεβαιωθείτε ότι το πλαίσιο αναζήτησης στον ιστότοπό σας είναι εύκολο να το δείτε. Τα σκοτεινά υπόβαθρα και τα φανταχτερά γραφικά θα μειώσουν την χρηστικότητα , οπότε διατηρείται το λευκό ή το ανοιχτό γκρι είναι καλύτερο. Επίσης, βεβαιωθείτε ότι το πλαίσιο αναζήτησης είναι αρκετά μεγάλο σε σχέση με άλλα σημαντικά στοιχεία της σελίδας, διατηρώντας έτσι τη θέση της στην οπτική ιεραρχία.
Το πλαίσιο αναζήτησης είναι ενεργοποιημένο Τομέας από IP ταιριάζει στο οπτικό θέμα της ιστοσελίδας ωραία, είναι πορτοκαλί και γραφικά συνεπής με το περιβάλλον της. Αλλά εάν δοθεί μια τέτοια θεραπεία σε ένα κουτί αναζήτησης σε έναν πιο πολυσύχναστο ιστότοπο, είναι πιθανόν να είναι δύσκολο να εντοπιστεί.
Ο σχεδιασμός δεν αποτελεί εμπόδιο στο Domain by IP επειδή ο ιστότοπος έχει μία λειτουργία: αναζήτηση, η οποία βρίσκεται ακριβώς στη μέση της σελίδας. Επιπλέον, έχοντας μια εξειδικευμένη τεχνολογία, οι προγραμματιστές της έχουν λιγότερα κίνητρα να ακολουθήσουν τη σύμβαση. Αλλά αυτός ο βαθμός δημιουργικότητας πρέπει να αποφευχθεί σε μεγαλύτερους ιστοτόπους , των οποίων το κοινό-στόχος μπορεί να μην είναι τόσο τεχνικά καταλαβαίνω.
Ωρα για περιπέτεια , εν τω μεταξύ, διατηρεί το κιβώτιο αναζήτησης λευκό, κατάλληλο μέγεθος και εύκολο στη χρήση στη σελίδα:
Παρά το γεγονός ότι είναι σε ξένη γλώσσα, το Adventure Time έχει ένα πολύ σαφές πλαίσιο αναζήτησης, ακόμα και για τους αγγλόφωνους χρήστες. Το μέγεθος και το χρώμα του κουτιού συμπληρώνεται με το γραφικό μεγεθυντικό φακό, το οποίο έχει γίνει το σύμβολο παγκόσμιας εμβέλειας για την αναζήτηση στο διαδίκτυο. Ένας χρήστης που αναζητά αυτή τη λειτουργία δεν θα έχει πρόβλημα εδώ.
Αυτό το πρότυπο θα πρέπει να ακολουθείται σε όλα τα έργα που στοχεύουν σε μια διαφορετική βάση χρηστών.
Περαιτέρω ανάγνωση:
2. Σαφώς επισημασμένο συμπτυσσόμενο / επεκτάσιμο περιεχόμενο
Οι ιστότοποι επωφελούνται από τα πτυσσόμενα πλαίσια και τα αναπτυσσόμενα μενού, διότι δημιουργούν καθαρότερες και λιγότερο γεμάτες διατάξεις. Ωστόσο, το κρυφό περιεχόμενο αυτών των στοιχείων διεπαφής μπορεί να επηρεάσει τη χρηστικότητα ενός ιστότοπου εάν η παρουσία του δεν είναι σαφής.
Όταν ένας χρήστης κάνει κλικ σε ένα γυμνό σύνδεσμο ή κουμπί, αναμένεται να μεταφερθεί σε μια νέα σελίδα. Αλλά όταν ένας χρήστης κάνει κλικ σε ένα σύνδεσμο ή ένα κουμπί που έχει έναν κρυφό δείκτη περιεχομένου, αναμένει ότι το νέο περιεχόμενο θα εμφανιστεί αμέσως (μέσω JavaScript ή AJAX) και θα έχει τη δυνατότητα να το αποκρύψει στη συνέχεια. Έτσι, ένας ιστότοπος θα πρέπει να διαφοροποιεί απότομα τους συνήθεις συνδέσμους και τους συνδέσμους που αποκαλύπτουν νέο περιεχόμενο μέσω του JavaScript .
Το πτυσσόμενο περιεχόμενο, όπως στα πλευρικά πλαίσια και τα δέντρα μενού, μπορεί να υποδεικνύεται με ένα βέλος, ένα τρίγωνο ή έναν δείκτη συν / πλην τύπου Windows Explorer. Ο πίνακας στον οποίο εμφανίζονται οι χρήστες που έχουν συνδεθεί CSS Globe δείχνει σαφώς ότι είναι πτυσσόμενο:
Παρακάτω είναι η ίδια σελίδα μετά την επέκταση του πίνακα για να αποκαλύψει μια ομάδα λειτουργιών:
Με την επέκταση του περιεχομένου στον πίνακα, το βέλος περιστρέφεται κατά 90 μοίρες, γεγονός που υποδηλώνει ότι το ίδιο περιεχόμενο μπορεί τώρα να κρυφτεί ή να συμπτυχθεί. Αυτή η ίδια αρχή μπορεί να εφαρμοστεί και στα μενού drop-down ή fly-out, αν και αυτά δεν απαιτούν ένα περιστρεφόμενο βέλος. Παραδόξως, το χαρακτηριστικό αυτό παραλείπεται συχνά ακόμη και σε επαγγελματικά σχεδιασμένους ιστότοπους.
Περαιτέρω ανάγνωση:
3. Δείκτης φόρτωσης AJAX
Όταν βελτιώνετε την εμπειρία χρηστών φορτώνοντας περιεχόμενο μέσω ασύγχρονων αιτημάτων, βεβαιωθείτε ότι ενημερώνετε το χρήστη ότι γίνεται επεξεργασία μιας αίτησης AJAX. Χωρίς αυτήν την ένδειξη, ο χρήστης μπορεί να εγκαταλείψει την αναμονή ή να αναρωτηθεί γιατί τίποτα δεν συνέβη σε απάντηση του κλικ.
Μπορείτε να το ολοκληρώσετε με πολλούς τρόπους. ένας τρόπος είναι να επισημάνετε ένα μήνυμα "Φόρτωση" ή παρόμοιο μήνυμα στην περιοχή ή κοντά στη θέση όπου θα λάβει χώρα η ενέργεια, όπως κάνει ο αναγνώστης RSS της Google:
Στο επάνω μέρος του στιγμιότυπου οθόνης εμφανίζεται κίτρινο κείμενο που επισημαίνεται, το οποίο εμφανίζεται όταν πατήσετε το κουμπί "Mark all as read", λέγοντας στον χρήστη ότι συμβαίνει κάτι.
Ένας άλλος τρόπος για να δείξει αυτό είναι με κινούμενα σχέδια ή γυαλί περιστρεφόμενης ώρας, που θα ήταν εξοικειωμένοι με τους χρήστες των Windows. Ένας κινούμενος δείκτης χρησιμοποιείται σε πολλές ιστοσελίδες, συμπεριλαμβανομένων των Κελάδημα , όπου οι χρήστες κάνουν κλικ σε ένα κουμπί "Περισσότερα" για να δουν παλαιότερα tweets:
Αφού γίνει κλικ στο κουμπί και ανάλογα με την ταχύτητα της σύνδεσης του πελάτη με το διακομιστή, εμφανίζεται ένα οικείο κινούμενο περιστρεφόμενο γραφικό, λέγοντας στον χρήστη ότι το αίτημά του βρίσκεται υπό επεξεργασία.
Τα γραφικά φόρτωσης AJAX είναι διαθέσιμα δωρεάν από διάφορους διαφορετικούς ιστότοπους, πολλά από τα οποία σας επιτρέπουν να προσαρμόσετε τα γραφικά με το μέγεθος, το χρώμα και άλλες επιλογές.
Αυτός ο τύπος οπτικού δείκτη είναι σημαντικός για ασύγχρονα αιτήματα που δεν παρέχουν ενδείξεις από την πλευρά του πελάτη σχετικά με τη δραστηριότητα που φορτώνει.
Ένας δείκτης τύπου AJAX θα μπορούσε επίσης να χρησιμοποιηθεί για την ενίσχυση της λειτουργίας AJAX που δεν συμπεριφέρεται σαν AJAX και απαιτεί χρόνο φόρτωσης. Αυτό θα μπορούσε να περιλαμβάνει μια συλλογή φωτογραφιών που φορτώνει μια μεγαλύτερη εικόνα όταν κάνετε κλικ σε μια μικρογραφία.
Τα γραφικά φόρτωσης AJAX και άλλοι δείκτες δεν επιταχύνουν πραγματικά μια σελίδα, αλλά βελτιώνουν τον χρόνο "αντιληπτού" φορτίου , ο οποίος συχνά είναι εξίσου πολύτιμος με τη βελτίωση του πραγματικού χρόνου φόρτωσης.
Περαιτέρω ανάγνωση:
4. Θέση του καλαθιού αγορών και των λειτουργιών σύνδεσης και εγγραφής
Όταν οι χρήστες σαρώνουν μια σελίδα για το κουμπί "Καλάθι αγορών" ή "Εγγραφή τώρα", η πρώτη θέση που βλέπουν είναι η επάνω δεξιά γωνία της σελίδας. Εάν δεν έχετε επιτακτικούς λόγους, διατηρήστε αυτή τη λειτουργία στην οικεία τοποθεσία της, αλλιώς υπάρχει κίνδυνος να επιβραδυνθεί και να διαταραχθεί η εμπειρία του χρήστη.
Οι επιλογές και οι λειτουργίες που εμπίπτουν στην κατηγορία αυτή περιλαμβάνουν το "Προβολή καλαθιού", "Έλεγχος", "Σύνδεση", "Αποσύνδεση", "Εγγραφή", "Υποβολή συνδέσμου", "Ξεχάσατε τον κωδικό;" "Αυτό το τελευταίο στοιχείο θα ήταν συνήθως το τελευταίο σε μια οριζόντια γραμμή πλοήγησης.
TasteBook περιλαμβάνει τέσσερις τέτοιους συνδέσμους στην πάνω δεξιά γωνία της διάταξης:
Maui Divers Κοσμήματα είναι ένα άλλο καλό παράδειγμα και περιλαμβάνει επίσης μια γραφική τσάντα για ψώνια:
5. Μορφή ημερομηνίας λήξης σε έντυπα πιστωτικών καρτών
Όταν ένα έντυπο ζητά την ημερομηνία λήξης της πιστωτικής σας κάρτας, η μορφή είναι πάντα η ίδια: ο μήνας, που αντιπροσωπεύεται από δύο ψηφία, ακολουθούμενος από το έτος, που αντιπροσωπεύεται από δύο ή τέσσερις ψηφία (π.χ. 03/11 ή 03/2011). Η τετραψήφια μορφή είναι πώς εμφανίζεται η ημερομηνία λήξης στην ίδια την πιστωτική κάρτα.
Ο καλύτερος τρόπος συλλογής αυτών των πληροφοριών και ενίσχυσης της εμπειρίας των χρηστών είναι να χρησιμοποιήσετε δύο ξεχωριστά πλαίσια επιλογής, το ένα για το μήνα και το άλλο για το έτος. Μην κάνετε το χρήστη να εισάγει την ημερομηνία λήξης σε ένα μόνο πλαίσιο κειμένου, ακόμα κι αν παρέχετε οδηγίες.
Εδώ είναι ένα καλό παράδειγμα από το σελίδα πληρωμής της Maui Divers Κοσμήματα:
Και εδώ είναι ένα παράδειγμα κακά σχεδιασμένου πεδίου ημερομηνίας λήξης:
Επιπλέον, ο επιλογέας μηνών δεν θα πρέπει να εμφανίζει τα ονόματα των μηνών, αλλά θα πρέπει να αναφέρει τους αριθμούς 01 έως 12. Δεν υπάρχει λόγος να επιβραδύνετε τους χρήστες κάνοντας τους να καταλάβουν ότι "08" σημαίνει "Αύγουστος".
6. Εύκολα αναγνωρίσιμοι σύνδεσμοι
Αυτό δεν πρέπει ποτέ να είναι ένα πρόβλημα, αλλά, δυστυχώς, ορισμένοι ιστότοποι εξακολουθούν να μην διακρίνουν σαφώς τους συνδέσμους και το κανονικό κείμενο στο κύριο σώμα.
Στις περισσότερες περιπτώσεις, ο καλύτερος τρόπος για να υποδείξετε αυτή τη διαφορά είναι να συνδέσετε ένα διαφορετικό χρώμα και να τον υπογραμμίσετε. Σε ορισμένες περιπτώσεις, είναι αρκετό ένα έντονα διαφορετικό χρώμα. αλλά μόνο η υπογράμμιση ή η απλή αλλαγή του χρώματος είναι σπάνια αρκετά και συχνά θα επηρεάσει την προσβασιμότητα.
Cameron.io κάνει αυτή τη διάκριση καλά:
Οι σύνδεσμοι αυτοί δεν θα ήταν τόσο ορατοί, αν υπογράμμισαν απλώς αλλά δεν άλλαξαν χρώμα. Δεν θα σχεδιάζετε ένα κουμπί που δεν μοιάζει με κουμπιά, οπότε γιατί να αφήσετε τους συνδέσμους κειμένου να μπερδεύονται στο κύριο σώμα; Καθώς οι περισσότεροι χρήστες σαρώνουν κείμενο στο διαδίκτυο, οι σχεδιαστές θα πρέπει να διασφαλίζουν ότι όλοι οι σύνδεσμοι είναι αναγνωρίσιμοι πολύ πριν το ποντίκι μεταφερθεί πάνω τους.
Περαιτέρω ανάγνωση:
συμπέρασμα
Όλα τα στοιχεία διεπαφής χρήστη και οι λειτουργίες που αναλύονται σε αυτό το άρθρο είναι ζωτικής σημασίας για την χρηστικότητα του ιστοτόπου και διαδραματίζουν σημαντικό ρόλο στην αντίληψη του χρήστη για την επωνυμία σας.
Πολλές μικρές βελτιώσεις μπορούν να κάνουν μεγάλη διαφορά στην αντιληπτή ταχύτητα και μπορούν να αποτρέψουν τους χρήστες να απογοητευτούν ή να μην αισθάνονται άνετα.
Κάντε τα στοιχεία διεπαφής χρήστη σας απλά και εξορθολογισμένα και ακολουθήστε συμβάσεις όπου είναι εφικτό. Θα δείτε μειωμένους ρυθμούς εγκατάλειψης, καλύτερες μετατροπές και σταθερή ροή επισκεψιμότητας.
Γράφτηκε αποκλειστικά για WDD από τον Louis Lazaris, ανεξάρτητο συγγραφέα και web developer. Ο Λούις τρέχει Εντυπωσιακοί ιστότοποι , όπου δημοσιεύει άρθρα και σεμινάρια σχετικά με το σχεδιασμό ιστοσελίδων.
Πώς μπορούν να βελτιωθούν ορισμένα από αυτά ή άλλα στοιχεία διεπαφής χρηστών; Παρακαλώ μοιραστείτε τις σκέψεις σας στα παρακάτω σχόλια.