10 αρχές για την σωστή κατασκευή ιστοσελίδας

κατασκευή ιστοσελίδας

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

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

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

Ποιές είναι οι αρχές για τον αποτελεσματικό σχεδιασμό μιας ιστοσελίδας;Για τον αποτελεσματικό σχεδιασμό ενός website θα πρέπει αρχικά να κατανοήσουμε πως οι χρήστες αλληλεπιδρούν με τις ιστοσελίδες, πως σκέφτονται και ποιές είναι η συμπεριφορά τους.

Πως σκέφτονται οι χρήστες;

Κατά βάση η συμπεριφορά των χρηστών στο internet δεν είναι πολύ διαφορετική απο αυτή των φυσικών πελατών ενός καταστήματος. Οι επισκέπτες “ρίχνουν μια ματιά” σε κάθε σελίδα, διαβάζουν γρήγορα κάποια απο τα κείμενα και στην συνέχεια επιλέγουν να δούν κάτι που θα προσελκύσει το ενδιαφέρον τους ή θα ανταποκρίνεται σε κάτι που αναζητούν.
Είναι γεγονός πως υπάρχει μεγάλο μέρος του website που δεν το επισκέπτονται καθόλου.
Οι περισσότεροι χρήστες επιλέγουν να δούν κάτι που θα τους φανεί ενδιαφέρον ή χρήσιμο εάν η καινούρια σελίδα που θα δημιουργήσετε δεν ανταποκρίνετε στις προσδοκίες των χρηστών τότε πατάνε το “back button” και ή αναζήτηση συνεχίζεται.

Οι χρήστες εκτιμούν την ποιότητα και την αξιοπιστία.

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

Οι χρήστες δεν διαβάζουν απλώς “σκανάρουν”

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

heatmap
heatmap

Παρατηρήστε τα “θερμά” σημεία όπου είναι πιο έντομα.

Οι χρήστες είναι ανυπόμονοι και θέλουν άμεση πρόσβαση.

Ένας πολύ απλός κανόνας: εάν το website σας δεν ειναι σε θέση να καλύψει τις απαιτήσεις των χρηστών τότε ο σχεδιασμός  της ιστοσελίδας σας δεν είναι σωστός και η εταιρέια έχει απώλεια κερδών.

Οι χρήστες δεν κάνουν τις πιο σωστές επιλογές.

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

Μην κάνετε τους χρήστες σας να σκέφτονται

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

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

web design

Μην εξαντλείτε την υπονομή των χρηστών

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

web development

Εστιάστε στην προσοχή των χρηστών

Μια ιστοσελίδα μπορεί να έχει στατικό και δυναμικό περιεχόμενο. Κάποιες πτυχές μπορεί να προσελκύσουν την προσοχή των χρηστών περισσότερο απο ότι άλλες. Προφανώς οι εικόνες είναι περισσότερο ελκυστικές για τα μάτια απο ότι το κείμενο – όπως επίσης και οι προτάσεις που υπογραμμίζονται προσελκύουν περισσότερη προσοχή απ’ ότι το απλό κείμενο.

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

Το μόνο στοιχείο που είναι άμεσα ορατό από τους χρήστες είναι η λέξη “δωρεάν” η οποία όχι μόνο ελκύει την προσοχή αλλά λειτουργεί και ενημερωτικά. Οι υπότιτλοι λίγο πιο κάτω παρέχουν στους χρήστες αρκετές πληροφορίες για το πως μπορούν να μάθουν περισσότερα για τo “δωρεάν” προϊόν.

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

ιστοσελίδα

Αναδείξτε ένα χαρακτηριστικό

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

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

ux - ui

Κάντε σωστή χρήση γραπτού λόγου

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

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

Για να βελτιστοποιήσετε τον τρόπο γραφής σας

  • Χρησιμοποιήστε σύντομες και περιεκτικές εκφράσεις (προχωρήστε στο νόημα όσο το δυνατόν πιο σύντομα)
  • Χρησιμοποιήστε μια απλή διάταξη για το κείμενο σας (κατηγοριοποιείται το περιεχόμενο, μην ξεχνάτε τις επικεφαλίδες και χρησιμοποιήστε εικόνες ή bullet points για να απλοποιήστε την δομή του κειμένου).
  • Χρησιμοποιήστε απλή και αντικειμενική γλώσσα (η προώθηση του προϊόντος σας δεν χρειάζεται να φαίνεται σαν διαφήμιση, δώστε στους χρήστες κάποιο λογικό λόγο για να μείνουν στην ιστοσελίδα σας ή να χρησιμοποιήσουν το προϊόν σας).
content writing

Προσπαθείτε να έχετε απλότητα - minimal

Ο κανόνας “keep it simple” -KIS- (“Κράτα το απλό”) θα πρέπει να είναι ο βασικός σας στόχος κατά την κατασκευή της ιστοσελίδας σας. Σπάνια οι χρήστες επισκέπτονται μια ιστοσελίδα για τον σχεδιασμό της, στις περισσότερες περιπτώσεις αυτό που τους ενδιαφέρει είναι το περιεχόμενο και η ευκολία πλοήγησης γι’ αυτό και εσείς είναι καλύτερο να προτιμήσετε την απλότητα και οχι το περίπλοκο.

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

κατασκευή ιστοσελίδας

Μην έχετε φοβία απέναντι στο κενό χώρο

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

Η περίπλοκη δομή μια σελίδας είναι πιο δύσκολο να διαβαστεί.

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

Ιεραρχικές δομές για την μείωση της πολυπλοκότητας (νόμος Simon): όσο καλύτερα μπορείτε να παρέχετε στους χρήστες την αίσθηση της οπτικής ιεραρχίας τόσο πιο εύκολο θα είναι για εκείνους να αντιληφθούν το περιεχόμενο της ιστοσελίδας σας.

correct website structure

Επικοινωνήστε αποτελεσματικά με "ορατή γλώσσα" (visible language)

Στα κείμενα του για την αποτελεσματική οπτική επικοινωνία ο Aaron Marcus αναφέρει τρείς βασικές αρχές που αναφέρονται στην χρήση της λεγόμενης “visible language” (ορατή γλώσσα), το περιεχόμενο δηλαδή που βλέπουν οι χρήστες στην οθόνη τους.

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

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

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

Επικοινωνία: συνδυάστε την εμφάνιση της σελίδες με τις δυνατότητες των χρηστών. Το περιεχόμενο προκειμένου να προσελκύσει τους χρήστες θα πρέπει να έχει ισορροπία, να είναι ευανάγνωστο και να έχει σωστά χρώματα. Χρησιμοποιήστε, μέχρι 3 γραμματοσειρές και μέχρι 3 μεγέθη, και προσπαθείτε να μην ξεπερνάτε τις 18 λέξεις ή 50-80 χαρακτήρες ανά γραμμή.

visible language - Aaron Marcus

Τα κοινότυπα στοιχεία είναι πολύ χρήσιμα

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

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

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

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

w3c standards

Δοκιμάστε νωρίς, δοκιμάστε συχνά

Για την κάθε κατασκευή ιστοσελίδας θα πρέπει να γίνονται δοκιμές ευχρηστίας. Η λεγόμενη αρχή ΤΕΤΟ μπορεί να βοηθήσει σε σημαντικά προβλήματα που σχετίζονται με την διάταξη της ιστοσελίδας.

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

Μερικά σημαντικά σημεία που πρέπει να θυμάστε:
Σύμφωνα με τον Steve Krug, η δοκιμή έστω και σε ένα άτομο είναι 100% καλύτερη απ το να μην δοκιμαστεί σε κανέναν και η δοκιμή σε ένα άτομο στο αρχικό στάδιο του σχεδιασμού είναι καλύτερη απο το να δοκιμαστεί σε 50 άτομα όταν πια ολοκληρώνεται. Βάση του πρώτου κανόνα του Boehm, τα λάθη είναι συχνότερα κατά την διάρκεια του σχεδιασμού και όσο ο σχεδιασμός προχωρά τόσο πιο δύσκολο είναι να αφαιρεθούν.
Η δοκιμή είναι μια επαναληπτική διαδικασία. Αυτό σημαίνει όταν σχεδιάζεις κάτι δοκίμασε το, διόρθωσε το και μετά δοκίμασε το ξανά. Μπορεί να υπάρχουν προβλήματα που δεν είχες εντοπίσει την προηγούμενη φορά αφού μπορεί να ήταν κρυμμένα.
Οι δοκιμές πάντα έχουν χρήσιμα αποτελέσματα
Είτε θέλετε να επισημάνετε τα προβλήματα που μπορεί να υπαρχουν είτε θέλετε να δικρίνετε τις όποιες αδυναμίες σε κάθε περίπτωση οι δοκιμές είναι χρήσιμες για να έχετε μια συνολική εικόνα για το έργο σας.
Βάση του κανόνα του Weinberg, ένας προγραμματιστής δεν είναι το κατάλληλο άτομο για να δοκιμάσει τον κώδικα του, το ίδιο ισχυεί και για τοον σχεδιαστή της ιστοσελίδας. Αυτό συμβαίνει επειδή δουλέυοντας πάνω σε project για αρκετό καιρό μετά απο κάποιο σημείο είναι πλεόν αδύνατον να παρατήρήσουν νέες προοπτικές που μπορεί να υπάρχουν. Ξέρουν πως είναι δομημένο και πως ακριβώς λειτουργεί και άρα έχουν την οπτική που οι επισκέπτες της ιστοσελίδας δεν είναι δυνατό να αποκτήσουν.

κοινότυπα στοιχεία ux

Εαν σας ενδιαφέρει να αυξήσετε τα έσοδα σας online καλέστε μας για ραντεβού