σχεδιασμός website

Σχεδιασμός website που βοηθά τον επισκέπτη να αποφασίσει και να ενεργήσει

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

Ποια ανάγκη δικαιολογεί νέο σχεδιασμό

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

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

Τι ακριβώς περιλαμβάνει η υπηρεσία

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

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

Πίνακας επιλογής με ελέγξιμα κριτήρια

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

Περιεχόμενο πριν από τη διακόσμηση

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

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

Προσβασιμότητα ως πρακτική προδιαγραφή

Η προσβασιμότητα πρέπει να συζητείται πριν κλείσει το οπτικό προσχέδιο. Οι οδηγίες σχεδιασμού της Πρωτοβουλίας Προσβασιμότητας Ιστού του W3C (Κοινοπραξία Παγκόσμιου Ιστού, World Wide Web Consortium) περιλαμβάνουν επαρκή αντίθεση, αναγνωρίσιμα διαδραστικά στοιχεία και κατανοητές ετικέτες. Επομένως, χρειάζεται να εξετάζεται αν ένα κουμπί ξεχωρίζει, αν η εστίαση είναι ορατή και αν η πληροφορία μεταδίδεται και χωρίς αποκλειστική εξάρτηση από το χρώμα.

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

Πώς δοκιμάζεται η προσαρμογή σε οθόνες

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

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

Δοκιμαστική αξιολόγηση χωρίς καθοδήγηση του επισκέπτη

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

Κατέγραψε τις παρατηρήσεις με ουδέτερη γλώσσα. Αντί για «δεν του άρεσε», σημείωσε ότι επέλεξε λανθασμένη κατηγορία επειδή δύο ετικέτες περιέγραφαν παρόμοιο περιεχόμενο. Αντί για «δεν καταλαβαίνει», εξέτασε αν λείπει πληροφορία ή αν η διάταξη δημιουργεί λάθος προσδοκία. Έτσι η διόρθωση συνδέεται με συγκεκριμένη αλληλεπίδραση και μπορεί να επανελεγχθεί με την ίδια αποστολή μετά την αλλαγή.

Πότε προτιμάται βελτίωση αντί πλήρους αντικατάστασης

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

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

Κίνδυνοι που χρειάζονται ξεχωριστή επιβεβαίωση

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

Τι παραλαμβάνεις και πώς κλείνει η εργασία

Στην παράδοση χρειάζεσαι τα συμφωνημένα αρχεία, οδηγίες για τα επαναλαμβανόμενα στοιχεία και σαφή εικόνα των περιορισμών. Κατέγραψε τι περιλαμβάνει η άδεια χρήσης γραμματοσειρών και εικόνων, ποιος κρατά τα αρχικά αρχεία και ποια αλλαγή θεωρείται νέα εργασία. Η αποδοχή πρέπει να βασίζεται στη συμφωνημένη λίστα σελίδων και καταστάσεων, όχι σε αόριστη δήλωση ότι ο ιστότοπος «φαίνεται έτοιμος».

Για να ξεκινήσεις ουσιαστική συζήτηση, διάλεξε μία βασική εργασία επισκέπτη και συγκέντρωσε το πραγματικό της περιεχόμενο. Ζήτησε από τον σχεδιαστή να δείξει πώς ολοκληρώνεται σε διαφορετικές οθόνες. Έτσι η επιλογή συνεργάτη συνδέεται με αποτέλεσμα που μπορείς να παρατηρήσεις και να αξιολογήσεις.