Σχεδίαση Ιστοσελίδας Zefxis

Εξετάσαμε περισσότερες από 300 παραμέτρους, προκειμένου να κάνουμε την ιστοσελίδα μας πιο εύχρηστη και προσβάσιμη.

Σχεδιάζοντας με γνώμονα την ευχρηστία

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

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

Συγκεκριμένα, κατά τη διάρκεια σχεδίασης της σελίδας μας, εξετάσαμε περισσότερες από 300 οδηγίες και κανόνες καλής ευχρηστίας και προσβασιμότητας στο Διαδίκτυο. Για να γίνει όσο το δυνατόν πιο συστηματικά, σαν οδηγό μας είχαμε μια εκτενή λίστα οδηγιών της Userfocus (αγγλικά), τα άρθρα του usability guru Jacob Nielsen στο useit.com (αγγλικά), Οδηγίες Προσβασιμότητας του W3C (αγγλικά), ενώ παράλληλα εφαρμόσαμε συνειδητά μια πληθώρα κανόνων που ούτως ή άλλως γνωρίζει καλά η σχεδιαστική μας ομάδα.

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

Αρχική Σελίδα

• Οι σημαντικές σελίδες του διαδικτυακού τόπου είναι διαθέσιμες μόνο με 1 κλικ από την αρχική σελίδα. Για την ακρίβεια, οι σελίδες που απέχουν 1 κλικ από την αρχική είναι πολύ περισσότερες απ’ ό,τι συνήθως, μιας και έχουμε χρησιμοποιήσει κάποια ειδικά μενού, που ονομάζονται Mega Menus.
• Τα πιο σημαντικά στοιχεία βρίσκονται στο επάνω μέρος της σελίδας.
• Υπάρχει δυνατότητα για αναζήτηση. Αν και η ιστοσελίδα δεν έχει ιδιαίτερα πολύ περιεχόμενο τέτοιου είδους που να απαιτεί αναζήτηση, σε όποιον επιθυμεί προσφέρεται η δυνατότητα να ψάξει μέσα από την αρχική σελίδα (και από κάθε άλλη σελίδα του website).
• Η αρχική σελίδα περιέχει αξιόλογο περιεχόμενο, ανάλογο με αυτό που περιέχεται στις εσωτερικές σελίδες.
• Το κείμενο των συνδέσμων του μενού ξεκινάει με την πιο σημαντική λέξη, ώστε να μπορεί πάρα πολύ γρήγορα ο επισκέπτης να καταλάβει σε τι αναφέρεται ο καθένας και να μπορέσει εύκολα να καθορίσει τις ενέργειές του.
• Η περιοχή πλοήγησης δεν είναι παραφορτωμένη και οι επισκέπτες δεν τη μπερδεύουν με διαφημιστικό περιεχόμενο.
• Η κεντρική ιδέα της ιστοσελίδας είναι ξεκάθαρη με την πρώτη ματιά.
• Ο επισκέπτης καταλαβαίνει πάρα πολύ γρήγορα σε ποια ιστοσελίδα έχει έρθει και το αντικείμενο με το οποίο αυτή ασχολείται.
• Είναι πολύ εύκολο για τον επισκέπτη να επιλέξει άλλη γλώσσα για τη σελίδα.
• Η σελίδα περιέχει καλά γραφικά, τα οποία έχουν σημασία.
• Οι επιλογές της πλοήγησης είναι τοποθετημένες με την πιο λογική σειρά, αυτή που θα περίμενε ο επισκέπτης και αυτή που συνήθως ακολουθείται σε μια τυπική περιήγηση.
• Η οργάνωση του διαδικτυακού τόπου είναι σωστή και ο επισκέπτης μπορεί να φανταστεί εύκολα σε ποια από τις βασικές κατηγορίες της σελίδας θα βρει αυτό που θέλει.
• Ο επισκέπτης μπορεί να καταλάβει πως θα ξεκινήσει την περιήγησή του, χωρίς να δει τίποτα άλλο εκτός από τη αρχική σελίδα.
• Η αρχική σελίδα δείχνει όλες τις κύριες επιλογές του επισκέπτη.
• Η αρχική σελίδα έχει URL που το θυμάται εύκολα κάποιος.
• Η αρχική σελίδα έχει καλή σχεδίαση και δημιουργεί αμέσως μια καλή πρώτη εντύπωση.
• Η αρχική σελίδα φαίνεται ότι είναι η αρχική σελίδα του website και οι εσωτερικές σελίδες δε μοιάζουν τόσο πολύ, ώστε κάποιος να τις μπερδεύει με την αρχική.

Προσανατολισμός

• Η σελίδα δεν περιέχει άσχετες, άχρηστες πληροφορίες ή στοιχεία που αποπροσανατολίζουν τους επισκέπτες.
• Έχει αποφευχθεί η περιττή χρήση γραφικών,  applets, flash, JavaScript και video.
• Η πληροφορία παρουσιάζεται με απλό τρόπο και με λογική σειρά.
• Όπου υπάρχουν διαγράμματα, είναι εμφανή τα ακριβή αριθμητικά στοιχεία.
• Οι επισκέπτες μπορούν να ολοκληρώσουν τις ενέργειές τους εύκολα.
• Η σελίδα της Προστασίας Δεδομένων είναι εύκολο να βρεθεί, μέσα από οποιαδήποτε σελίδα του site και είναι απλή και κατανοητή.
• Δεν αποκαλύπτονται στο χρήστη οι εσωτερικές πληροφορίες του λογισμικού της ιστοσελίδας και δεν τον μπερδεύουν μηνύματα λάθους που δε θα έπρεπε να δει ποτέ.
• Οι ενέργειες όπως η αποστολή στοιχείων δε γίνονται ποτέ αυτόματα και τα αντίστοιχα κουμπιά είναι ξεκάθαρα, κανονικά κουμπιά και όχι απλό κείμενο (hypertextlinks).
• Η ιστοσελίδα είναι δεν έχει προβλήματα με λανθασμένους συνδέσμους (brokenlinks) και Javascriptexceptions.
• Υπάρχει ειδική σελίδα 404, σε περίπτωση που κάποιος χρήστης βρεθεί σε σελίδα που δεν υπάρχει. Η σελίδα αυτή εξηγεί τους πιθανούς λόγους για τους οποίους δε βρέθηκε το περιεχόμενο, έχει σύνδεσμο προς το Sitemap και προς την Αρχική Σελίδα, ενώ περιέχει και το πεδίο της Αναζήτησης, για να μπορέσει ο χρήστης να ψάξει αυτό που θέλει.

Πλοήγηση

• Η μετακίνηση μεταξύ σχετικών ενοτήτων είναι εύκολη και υπάρχει φανερός και εύκολος τρόπος επιστροφής στην Αρχική Σελίδα, μέσα από κάθε σελίδα του site.
• Η πληροφορία είναι κατανεμημένη σε ένα μοντέλο με μικρό βάθος και μεγάλο εύρος και όχι το αντίστροφο.
• Η δομή είναι απλή και ξεκάθαρη και δεν υπάρχουν άχρηστα επίπεδα.
• Ο τρόπος πλοήγησης είναι σταθερός και δεν αλλάζει από σελίδα σε σελίδα.
• Δεν υπάρχουν "αδιέξοδα", δηλαδή σελίδες στις οποίες αν καταλήξει κάποιος δεν μπορεί να φύγει, παρά μόνο χρησιμοποιώντας το κουμπί Back του Browser.
• Η σελίδα δε χρησιμοποιεί frames.
• Υπάρχει  Sitemap, το οποίο είναι διαθέσιμο από οποιαδήποτε σελίδα του site. Στο Sitemap παρουσιάζεται συνοπτικά το περιεχόμενο όλης της ιστοσελίδας, όχι μια επανάληψη του βασικού μενού, αλλά ούτε και αράδιασμα όλου του συνόλου των σελίδων.
• Η σελίδα στην οποία βρίσκεται ο επισκέπτης αντικατοπτρίζεται καθαρά στο βασικό και δευτερεύον μενού πλοήγησης.
• Οι ονομασίες των ενοτήτων της ιστοσελίδας περιγράφουν καλά το περιεχόμενο των υποσελίδων τους.
• Οι σύνδεσμοι περιέχουν τις λέξεις εκείνες, που θα κάνουν τους επισκέπτες να καταλάβουν γρήγορα σε τι αναφέρονται οι σύνδεσμοι, βοηθώντας έτσι τη γρήγορη εκτέλεση των διαφόρων ενεργειών.
• Οι σύνδεσμοι δεν περιέχουν άχρηστες λέξεις και δεν μπερδεύουν τους χρήστες.
• Οι σύνδεσμοι (εκτός από αυτούς της βασικής και δευτερεύουσας πλοήγησης) έχουν διαφορετική εμφάνιση αν ο χρήστης έχει ήδη επισκεφθεί τη σελίδα στην οποία αναφέρονται (visited links).
• Όταν το ποντίκι βρίσκεται πάνω από κάποιο σύνδεσμο, γίνεται μια ξεκάθαρη αλλαγή στην εμφάνιση του συνδέσμου, είτε πρόκειται για απλό κείμενο (hypertext link) είτε για κουμπί.
• Ο χρήστης μπορεί να βρεθεί στις σημαντικές σελίδες με περισσότερους από έναν τρόπους. Μάλιστα, αυτό ισχύει για το μεγαλύτερο αριθμό των σελίδων του site και όχι μόνο για τις πιο σημαντικές.
• Το κουμπί Back του Browser έχει τη συμπεριφορά που πρέπει και πηγαίνει το χρήστη πάντα στη σελίδα, στην οποία βρισκόταν προηγουμένως.

Φόρμες

• Οι ετικέτες των πεδίων δείχνουν καθαρά τον τύπο και τη μορφή των δεδομένων που πρέπει να εισαχθούν από το χρήστη.
• Το μέγεθος των πεδίων είναι αρκετά μεγάλο για να χωρέσει τα δεδομένα.
• Ο περιορισμός στον αριθμό των χαρακτήρων σε ένα πεδίο δεν εμποδίζει το χρήστη να εισάγει το σύνολο των δεδομένων που επιθυμεί.
• Είναι ξεκάθαρη η διάκριση μεταξύ προαιρετικών και υποχρεωτικών πεδίων.
• Οι ερωτήσεις στις φόρμες είναι χωρισμένες σε ομάδες με λογικό τρόπο και κάθε ομάδα έχει επικεφαλίδα.
• Όπου είναι απαραίτητο, οι ερωτήσεις έχουν παραδείγματα, τα οποία βοηθούν το χρήστη να συμπληρώσει τα πεδία.
• Οι ερωτήσεις είναι κατανοητές.
• Χρησιμοποιούνται dropdown menus, checkboxes και radio buttons όπου είναι απαραίτητο, ώστε να ελαχιστοποιείται ο όγκος των δεδομένων που πρέπει να πληκτρολογηθούν.
• Στις σελίδες, όπου η κύρια ενέργεια του χρήστη είναι η συμπλήρωση μιας φόρμας, ο κέρσορας τοποθετείται αυτόματα στο πρώτο πεδίο της φόρμας.
• Ο χρήστης μπορεί να συμπληρώσει τις φόρμες, μετακινούμενος είτε με το ποντίκι, είτε με το πληκτρολόγιο, χωρίς να χρειάζεται να χρησιμοποιήσει και τα 2 για να μεταφερθεί από πεδίο σε πεδίο.
• Το πεδίο στο οποίο βρίσκεται ο χρήστης ανά πάσα στιγμή ξεχωρίζει πολύ καλά από τα υπόλοιπα, με τη χρήση ειδικών χρωμάτων και πλαισίων.
• Τα περιεχόμενα της φόρμας ελέγχονται αυτόματα πριν γίνει η αποστολή.
• Όταν υπάρχουν λάθη στη συμπλήρωση μιας φόρμας, σε κάθε σχετικό πεδίο εμφανίζεται το σωστό μήνυμα λάθους, το οποίο δείχνει ξεκάθαρα ποιο είναι το σφάλμα και πώς ο χρήστης μπορεί να διορθώσει την απάντησή του.
• Τα μηνύματα λάθους εμφανίζονται με τη χρήση κειμένου κάτω από κάθε πεδίο και ένα βελάκι που δείχνει ξεκάθαρα σε ποιο πεδίο αναφέρεται το λάθος, ενώ ταυτόχρονα το φόντο του πεδίο χρωματίζεται με ειδικό τρόπο.
• Όταν υπάρχουν λάθη, ο κέρσορας τοποθετείται αυτόματα στο πρώτο πεδίο που χρειάζεται αλλαγή από το χρήστη.
• Οι ετικέτες βρίσκονται κοντά στα πεδία, στα οποία αναφέρονται και δεν μπερδεύουν το χρήστη.
• Οι ετικέτες όλων των πεδίων είναι  html labels και όταν ο χρήστης κάνει κλικ επάνω τους μεταφέρεται στο αντίστοιχο πεδίο.
• Το κλικ στις ετικέτες των radio buttons και των checkboxes ισοδυναμεί με το κλικ στα ίδια τα εικονίδια των πεδίων, οπότε ο χρήστης μπορεί πιο γρήγορα να κάνει τις επιλογές του.

Περισσότερη προσβασιμότητα

• Στην κορυφή κάθε σελίδας υπάρχει ένας σύνδεσμος 'Skip to content', ο οποίος εμφανίζεται και γίνεται ενεργός με το πρώτο Tab που θα πατήσει ο χρήστης.
• Υπάρχουν χρήσιμα και περιγραφικά alt text attributes για κάθε αντικείμενο που δεν είναι κείμενο (π.χ. εικόνες).
• Τα χρώματα στο φόντο των διαφόρων περιοχών έχουν επιλεγεί έτσι ώστε να κάνουν μεγάλη αντίθεση με το κείμενο, για να είναι ευανάγνωστο.
• Όταν υπάρχει κείμενο πάνω από κάποια εικόνα, η εικόνα και το χρώμα του κειμένου είναι τέτοια ώστε το κείμενο να διαβάζεται εύκολα. Αν ο χρήστης απενεργοποιήσει τις εικόνες στη σελίδα ή ο browser του δεν υποπστηρίζει εικόνες, υπάρχει χρώμα φόντου τέτοιο που να κάνει το κείμενο ευανάγνωστο.
• Δεν υπάρχει περιεχόμενο που είναι γνωστό ότι προκαλεί κρίσεις επιληψίας.
• Τα κείμενα είναι οργανωμένα σε σύντομες, αλλά όχι υπερβολικά μικρές φράσεις, που είναι εύκολο κάποιος να τις διαβάσει και να τις κατανοήσει.
• Η γλώσσα που χρησιμοποιείται δεν περιέχει δυσνόητες λέξεις ή μηνύματα που δύσκολα μπορεί κάποιος να καταλάβει.
• Όποτε είναι δυνατό, οι τεχνικοί όροι επεξηγούνται.
• Όποτε υπάρχει κάποια συντομογραφία, αναφέρεται και ολόκληρο το νόημά της, είτε σε φανερό κείμενο, είτε σε alt ή title attribute..
• Τα διαδραστικά αντικείμενα λειτουργούν με τον προβλεπόμενο τρόπο.
• Δε χρησιμοποιούνται tables για τη διάταξη των γραφικών της ιστοσελίδας, αλλά μόνο για δεδομένα που πρέπει να παρουσιαστούν με μορφή πίνακα.
• Αν ένας σύνδεσμος οδηγεί σε μια σελίδα που είναι γραμμένη σε διαφορετική γλώσσα από αυτήν στην οποία βλέπει την ιστοσελίδα ο χρήστης, υπάρχει σχετική προειδοποίηση με κείμενο δίπλα στο σύνδεσμο.
• Οι σύνδεσμοι ανοίγουν πάντα στο ίδιο παράθυρο του browser. Αν ένας σύνδεσμος πρόκειται να ανοίξει σε άλλο παράθυρο, ο χρήστης προειδοποιείται με κείμενο, το οποίο βρίσκεται δίπλα στον σύνδεσμο.
• Πάντα υπάρχει έστω ένα κενό ή ένας χαρακτήρας μεταξύ δύο διαφορετικών συνδέσμων κειμένου.
• Οι εικόνες που υπάρχουν για "διακόσμηση" έχουν πάντα κενό ("") alt attribute.
• Δεν υπάρχει πουθενά κείμενο με υπογράμμιση, το οποίο θα έκανε τους χρήστες να νομίσουν ότι πρόκειται για σύνδεσμο, ο οποίος μάλιστα δε λειτουργί.
• Το πλάτος των παραγράφων είναι τέτοιο που να βοηθάει το διάβασμα. Δεν υπάρχουν ούτε πολύ μικρές, ούτε πολύ μεγάλες παράγραφοι σε πλάτος.
• Οι αποστάσεις μεταξύ των γραμμών, σε συνδυασμό με το μέγεθος των γραμμάτων και τα περιθώρια γύρω από τις παραγράφους είναι τα κατάλληλα, ώστε το κείμενο να είναι ευανάγνωστο.