10 Συμβουλές χρηστικότητας για τους σχεδιαστές ιστοσελίδων
Με απλά λόγια, η χρηστικότητα καθιστά την ιστοσελίδα σας εύκολη για τους επισκέπτες σας να βρουν τις πληροφορίες που χρειάζονται όταν το χρειάζονται .
Μια κοινή παρανόηση σχετικά με τη χρηστικότητα μεταξύ των εταιρειών ιστού είναι ότι η χρηστικότητα είναι δαπανηρή. Ναι, υπάρχουν πολυεθνικές εταιρείες που ξοδεύουν χιλιάδες δολάρια σε δοκιμές ευχρηστίας και έρευνα, αλλά για μια καθημερινή χρηστικότητα της εταιρείας είναι εφικτή χωρίς τη γνώση εμπειρογνωμόνων ευχρηστίας ή χωρίς ακριβό εξοπλισμό για δοκιμές .
Οι σχεδιαστές ιστοσελίδων έχουν μια ακόμα πιο εύκολη δουλειά, απλά με την ανάγνωση άρθρων χρηστικότητας μπορούν να συγκεντρώσουν αρκετά καλή γνώση σχετικά με τα βασικά της χρηστικότητας και τον τρόπο εφαρμογής τους σε έναν ιστότοπο.
1. Συμπεριλάβετε μια ετικέτα
Μια ετικέτα είναι μια δήλωση ή ένα σύνθημα που αντιπροσωπεύει την φιλοσοφία και την αποστολή μιας επιχείρησης ή, στην περίπτωσή μας, μιας ιστοσελίδας. Θα πρέπει να είναι το πιο προφανές στοιχείο στην πρώτη σελίδα ενός δικτυακού τόπου και θα πρέπει να περιγράφει με σαφήνεια τον ιστότοπο σε μία φράση.
Οι στατιστικές δείχνουν ότι ένας ιστότοπος έχει μόνο 8 δευτερόλεπτα για να προσελκύσει την προσοχή ενός επισκέπτη για να περιηγηθεί στην περιοχή περαιτέρω. Χωρίς σαφή ετικέτα, ένας ιστότοπος θα δυσκολευόταν να κρατήσει τους επισκέπτες αρκετά μακριά για να περιηγηθεί στις εσωτερικές σελίδες.
2. Εφαρμογή αναζήτησης ιστότοπου
Όπως και με τις ετικέτες, η αναζήτηση ιστότοπου είναι ένα πολύ σημαντικό στοιχείο σε έναν ιστότοπο. Όταν οι χρήστες αναζητούν κάτι που συνήθως αναζητούν ένα πεδίο κειμένου όπου μπορούν να εισάγουν τον όρο αναζήτησης τους.
Σύμφωνα με Ο Jacob Nielsen Συμβουλές για την ευχρηστία του ιστού, κάνουν αυτό το πλαίσιο αναζήτησης 27 χαρακτήρες , ώστε το κείμενο να είναι ορατό και εύκολο στη χρήση. Τοποθετήστε το πεδίο κειμένου αναζήτησης στην κορυφή της ιστοσελίδας σας , επειδή οι χρήστες έχουν την τάση να ψάχνουν έναν ιστότοπο σύμφωνα με το μοτίβο F , που σημαίνει από την πάνω αριστερή προς την κάτω δεξιά.
Συμπεριλάβετε ένα κουμπί αναζήτησης και ορίστε σαφώς το κείμενο αναζήτησης, μην χρησιμοποιήσετε κείμενο όπως Go ή Submit , επειδή αυτές οι εκφράσεις τείνουν να παραπλανήσουν τους επισκέπτες του ιστότοπού σας.
3. Μην χρησιμοποιείτε εκτεταμένα γραφικά
Η καταχρηστική χρήση στοιχείων σχεδιασμού και γραφικών είναι πάντα κακή για έναν ιστότοπο, απλώς παραπλανούν τους επισκέπτες του ιστότοπου. Σχεδιάστε μόνο τη βελτίωση της ιστοσελίδας, όχι μόνο για να την διακοσμήσετε. Από την άποψη της χρηστικότητας, λιγότερα είναι πάντα περισσότερα.
4. Χρησιμοποιήστε χάρτες Site
Οι χάρτες ιστότοπων είναι μια σχετικά νέα λειτουργία ιστοτόπου που βελτιώνει την πλοήγηση σε ιστοσελίδες και βελτιστοποίηση μηχανών αναζήτησης (SEO). Οι χάρτες ιστότοπων αποτελούν κατ 'ουσίαν μια δομική αναπαράσταση των σελίδων και της αρχιτεκτονικής ενός ιστότοπου Μπορεί να είναι ένα έγγραφο οποιασδήποτε μορφής ή μια ιστοσελίδα που απαριθμεί τις σελίδες ενός ιστοτόπου, συνήθως οργανωμένη με ιεραρχική μέθοδο.
Πρόσφατα, οι μηχανές αναζήτησης όπως το Google, το Yahoo και το MSN έχουν αρχίσει να προσφέρουν ένα πρωτόκολλο Sitemap, το οποίο είναι παρόμοιο με τη σελίδα χάρτη ιστότοπου ενός ιστότοπου, αλλά τα δεδομένα είναι οργανωμένα σε μορφή XML. Υπάρχουν γεννήτριες XML Sitemap που δημιουργούν αυτά τα έγγραφα για μια συγκεκριμένη διεύθυνση URL.
5. Μην σπάσετε τη ροή εργασίας
Με τη ροή εργασίας εννοούμε κάθε ενέργεια που κάνει ένας χρήστης σε έναν ιστότοπο . Για παράδειγμα, συμπληρώνοντας μια φόρμα, καταχωρίζοντας σε έναν ιστότοπο, κατηγορίες περιήγησης, αρχεία κ.λπ. Μην σπάτε αυτές τις ροές εργασίας, αφήστε τον χρήστη να ακυρώσει οποιαδήποτε ενέργεια. Μην αφήνουμε τον χρήστη να ακυρώσει μια λειτουργία, τον αναγκάζουμε να το ολοκληρώσει ακόμη και αν δεν το θέλει.
Όχι κάθε λειτουργία σε έναν ιστότοπο είναι προφανής για τους χρήστες, καθοδηγείστε τους μέσα από τη συγκεκριμένη ροή εργασιών χρησιμοποιώντας περιγραφικές συμβουλές. (π.χ. κατά τη συμπλήρωση ενός εντύπου). Συνδέσεις Javascript συνήθως σπάσουν τη ροή εργασίας, οπότε δεν συνιστάται να τις χρησιμοποιείτε στον ιστότοπό σας.
Ένα άλλο λάθος δεν αλλάζει το χρώμα των συνδέσεων που επισκέπτονται , με αποτέλεσμα να σπάσει ο σχεδιασμός πλοήγησης. Επιτρέψτε στους χρήστες να γνωρίζουν πού βρίσκονται και πού βρίσκονται σε έναν ιστότοπο.
6. Δημιουργήστε εύκολα σαρωμένες ιστοσελίδες
Εύκολη η ανάγνωση ιστοσελίδων διαδραματίζει σημαντικό ρόλο στη διατήρηση της εμπιστοσύνης των επισκεπτών, τη διατήρησή τους στον ιστότοπό σας και την ανάγνωση του περιεχομένου σας. Δοκιμές ευχρηστίας δείχνουν ότι η πλειοψηφία των χρηστών δεν διαβάζουν ιστοσελίδες, τις ανιχνεύουν , ψάχνουν για τίτλους, τολμηρό, έμμεσο κείμενο ή λίστες.
Οι μελέτες παρακολούθησης οφθαλμών που πραγματοποιήθηκαν από τον Jakob Nielsen δείχνουν ότι οι χρήστες διαβάζουν περιεχόμενο που μοιάζει με σχήμα F, που σημαίνει ότι η ανάγνωση ξεκινάει από το επάνω αριστερό μέρος της ιστοσελίδας, στη συνέχεια μετακινείται προς τα κάτω λίγο αργότερα από το αριστερό.
Ο Nielsen αναφέρει επίσης τις συνέπειες αυτού του προτύπου ανάγνωσης:
- Οι χρήστες δεν θα διαβάσουν με λέξη μια λέξη περιεχομένου ιστοσελίδων, θα εξάγουν σημαντικές παραγράφους, έντονα κείμενα κ.λπ.
- Οι δύο πρώτες παράγραφοι είναι απαραίτητες σε μια ιστοσελίδα. Αυτά πρέπει να περιέχουν τις πιο σημαντικές πληροφορίες που αναζητούν οι επισκέπτες σας.
- Οι υποκατηγορίες και οι λίστες ξεχωρίζουν από τις κανονικές παραγράφους. Χρησιμοποιήστε αυτά τα στοιχεία για να ενημερώσετε τους χρήστες σχετικά με σημαντικές πληροφορίες.
Μια σημαντική μέθοδος που μπορούμε να μάθουμε από τις παραδοσιακές έντυπες εφημερίδες είναι ότι οι δημοσιογράφοι σκέφτηκαν έναν ελκυστικό τίτλο και μια πιασάρικη πρώτη παράγραφο για να κάνουν αναγνώστες να διαβάσουν ολόκληρο το άρθρο. Οργανώνουν το περιεχόμενο σε μορφή ανεστραμμένης πυραμίδας , απλά απεικονίζουν μια ανάποδη πυραμίδα. Η ευρεία βάση αντιπροσωπεύει τις σημαντικότερες πληροφορίες σε ολόκληρο το άρθρο και η στενή κορυφή αντιπροσωπεύει τις λιγότερο σημαντικές πληροφορίες.
Μπορούμε να χρησιμοποιήσουμε αυτήν τη μορφή για να οργανώσουμε το περιεχόμενο ιστού τοποθετώντας τα πιο σημαντικά κομμάτια στην κορυφή και τα λιγότερο σημαντικά στο κάτω μέρος , αλλά πώς γνωρίζουμε ποιες πληροφορίες είναι σημαντικές και ποιες όχι; Με τη βοήθεια του τις αξίες ειδήσεων .
7. Μην σχεδιάζετε παραπλανητικά στοιχεία ελέγχου UI
Με στοιχεία ελέγχου διεπαφής χρήστη (IUI) εννοούμε στοιχεία ιστοσελίδας, στοιχεία και widget που μπορεί να αλληλεπιδράσει ένας χρήστης (π.χ. ένα κουμπί, αναπτυσσόμενη λίστα).
Μην σχεδιάζετε γραφικά στοιχεία που μοιάζουν με κουμπιά, αλλά δεν είναι . Συχνά βλέπουμε κείμενο που υπογραμμίζεται και μοιάζει με συνδέσμους, αλλά δεν μπορούν να κάνουν κλικ.
Με το να μην έχουν τη δράση που οι χρήστες περίμεναν, θα πίστευαν ότι ο ιστότοπος είναι σπασμένος και τελικά να φύγει. Μια άλλη σημαντική συμβουλή χρηστικότητας σχετικά με τους ελέγχους UI είναι συνέπεια: Βεβαιωθείτε ότι τα στοιχεία ελέγχου UI σας είναι συνεπή .
Yahoo , όπως δείχνει και η παραπάνω εικόνα, είναι ένα καλό παράδειγμα σταθερού σχεδιασμού ελέγχου UI. Κάθε καρτέλα στη σελίδα φαίνεται και συμπεριφέρεται με τον ίδιο τρόπο, κάθε σύνδεσμος υπογραμμίζεται πάνω στο ποντίκι, κάθε κουμπί μοιάζει με το ίδιο, κλπ.
8. Δώστε Σημαντική Ανατροφοδότηση
Σημαντική ανατροφοδότηση είναι απαραίτητη για έναν ιστότοπο. Αυτό είναι το κανάλι επικοινωνίας μεταξύ του ιστότοπου και των χρηστών, με τη βοήθεια ανατροφοδότησης που αφήνουμε στους χρήστες να γνωρίζουν τι συμβαίνει στον ιστότοπο. Σε περίπτωση σφάλματος στην ιστοσελίδα σας, μην εκτυπώνετε μόνο σφάλμα , αλλά γράφετε σημαντικά μηνύματα λάθους που λένε στο χρήστη τι πήγε στραβά και ποιες ενέργειες μπορούν να εκτελέσουν από εκεί.
Η ανάδραση λειτουργεί με αμφότερους τους τρόπους . Όταν ένας χρήστης συμπληρώνει μια φόρμα, ουσιαστικά σας δίνει ανατροφοδότηση. Μην κάνετε τους χρήστες να συμπληρώνουν δύο φορές τις ίδιες πληροφορίες. Για παράδειγμα, αν ένας χρήστης έχει εγγραφεί σε έναν ιστότοπο και πρέπει να συμπληρώσει μια φόρμα κάποια στιγμή, μην ζητάτε το όνομα ή άλλες πληροφορίες που έχουν ήδη παρασχεθεί, επειδή αυτές οι λεπτομέρειες υπάρχουν ήδη κάπου σε αρχείο ή βάση δεδομένων. Με απλή λήψη αυτών των λεπτομερειών γίνεται αυτόματα απλοποίηση ολόκληρης της διαδικασίας.
9. Μην χρησιμοποιείτε υπερβολικά Javascript
Με την έλευση της Javascript και της τεχνικής AJAX, οι σχεδιαστές ιστοσελίδων και οι προγραμματιστές μπορούν να δημιουργήσουν ανταποκρινόμενες, διαφανείς ιστοσελίδες, αλλά όπως συμβαίνει με όλες τις νέες τεχνολογίες, υπάρχει κόστος. Στην περίπτωσή μας το κόστος είναι ασυνέπεια του προγράμματος περιήγησης. Δεν έχει κάθε χρήστης ενημερωμένο πρόγραμμα περιήγησης ιστού. Μπορεί επίσης να μην έχουν ενεργοποιημένη την επιλογή Javascript από προεπιλογή.
Χρησιμοποιώντας εκτενώς Javascript σε έναν ιστότοπο, αποκλείουμε αυτούς τους χρήστες. Αντ 'αυτού χρησιμοποιήστε διακριτικό Javascript και χαλαρή υποβάθμιση .
10. Αποφύγετε CAPTCHAs
Το CAPTCHA σημαίνει Πλήρως Αυτοματοποιημένο Public Turing test για να πει στους υπολογιστές και τους ανθρώπους εκτός. Ακόμα και το όνομα ακούγεται περίπλοκο. Η πιο γενική μορφή του CAPTCHA είναι κείμενο ενσωματωμένο σε μια εικόνα και με τη δοκιμή των επισκεπτών μπορούμε να διαχωρίσουμε τους ανθρώπους από τα spam bots.
Το πρόβλημα με τα CAPTCHAs είναι ότι κάθε μορφή ανθρώπινης μεθόδου επαλήθευσης ενεργοποιεί μια πολύπλοκη διαδικασία στους εγκεφάλους των χρηστών (π.χ., καταγραφή του παραμορφωμένου κειμένου, προσθήκη δύο αριθμών κ.λπ.).
Ένα άλλο πρόβλημα με τα CAPTCHAs είναι οι ασυνέπειες όσον αφορά τους διαφορετικούς πολιτισμούς . Για παράδειγμα, τα κινεζικά σύμβολα, οι αριθμοί είναι διαφορετικοί από τα περισσότερα δυτικά γράμματα και αραβικούς αριθμούς. Οι Κινέζοι έχουν πολύ πιο δύσκολο χρόνο χρησιμοποιώντας ηλεκτρονικές φόρμες CAPTCHA.
Περίληψη
- Να συμπεριλαμβάνετε πάντα μια ετικέτα που θα πρέπει να είναι το πιο προφανές στοιχείο σε μια ιστοσελίδα.
- Εφαρμόστε μια αναζήτηση ιστότοπου σε 27 χαρακτήρες και τοποθετήστε την στην κορυφή της ιστοσελίδας σας.
- Μη χρησιμοποιείτε εκτεταμένα γραφικά και στοιχεία σχεδιασμού.
- Συμπεριλάβετε μια σελίδα χάρτη ιστότοπου και καταχωρίστε ένα έγγραφο XML χάρτη ιστοτόπου στις μηχανές αναζήτησης.
- Μην σπάσετε τη ροή εργασίας ενός χρήστη. Αφήστε κάθε ενέργεια να ακυρωθεί εάν είναι απαραίτητο.
- Δημιουργήστε εύκολα περιεχόμενο που μπορεί να σαρωθεί και τοποθετήστε τις πιο σημαντικές πληροφορίες στην κορυφή της ιστοσελίδας σας.
- Μην σχεδιάζετε γραφικά στοιχεία που μοιάζουν με κουμπιά, αλλά δεν είναι.
- Παρουσιάστε ουσιαστική ανατροφοδότηση και μην ξεχνάτε ότι η ανατροφοδότηση λειτουργεί με δύο τρόπους.
- Χρήση διακριτικό Javascript και χαλαρή υποβάθμιση .
- Αποφύγετε CAPTCHAs, χρησιμοποιήστε πιο χρησιμοποιήσιμο μεθόδων αντι αυτου.
Ακολουθείτε αυτές τις αρχές; Προσθέστε τα παρακάτω σχόλια και επιπλέον συμβουλές.