7 Αρχές Αποτελεσματικής Σχεδίασης Ιστοσελίδων [WEB DESIGN]

Πολλές φορές θα έχετε ακούσει την έκφραση

‘Mια ιστοσελίδα πρέπει να έχει χρηστικότητα και πάλι χρηστικότητα και λίγο ακόμη πιο πολύ χρηστικότητα.”

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

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

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

Αρχές Αποτελεσματικής Σχεδίασης

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

Σκέφτονται, έχουν αντίληψη, παίρνουν γρήγορες αποφάσεις – επομένως έχουμε υποχρέωση να ανακαλύψουμε “πως σκέφτονται” και ποια είναι τα βασικά πρότυπα συμπεριφοράς. 

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

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

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

Οι περισσότεροι χρήστες ψάχνουν για κάτι ενδιαφέρον ή χρήσιμο, αλλά προπάντων clickable. Αμέσως μόλις βρουν κάποιο ελπιδοφόρο μήνυμα, κείμενο ή φωτογραφία, οι χρήστες κάνουν κλικ. Εάν η σελίδα δεν ανταποκρίνεται στις προσδοκίες των ανθρώπων, το κουμπί “ΠΙΣΩ” πατιέται αμέσως και η διαδικασία αναζήτησης συνεχίζεται.

Οι χρήστες δεν διαβάζουν, σαρώνουν! Παρατηρήστε πως σε κάθε σελίδα (1η σελίδα, σελίδα κατηγορίας, τελικός προορισμός-άρθρο), οι χρωματικές περιοχές αλλάζουν. Οι μπλε & πράσινες περιοχές συμβολίζουν ένα φευγαλέο πέρασμα, οι κίτρινες περιοχές δείχνουν πως ο χρήστης έχει αρχίζει να εστιάζει και τέλος οι κόκκινες περιοχές είναι τα σημεία που συγκεντρώνεται. Εάν μέσα στις κόκκινες περιοχές περικλείονται links, υπάρχουν περισσότερες πιθανότητες να πατηθούν.
Σε γενικές γραμμές αυτές είναι περίπου οι τυπικές διαδικασίες σάρωσης.

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

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

Οι χρήστες θέλουν να έχουν τον έλεγχο. Θέλουν να είναι σε θέση να ελέγχουν τον browser και βασίζονται στην συνεκτική παρουσίαση των δεδομένων. Λ.χ. δεν θέλουν απρόσμενα “νέα παράθυρα”, θέλουν να είναι σε θέση να πατήσουν το κουμπί “ΠΙΣΩ” και να βρεθούν στην ιστοσελίδα που ήταν πριν:ως εκ τούτου μια καλή πρακτική είναι να μην ανοίγετε τους συνδέσμους σε νέα παράθυρα του προγράμματος πλοήγησης.

Η προηγούμενη εισαγωγή ήταν απαραίτητη για να περάσουμε κατευθείαν στις “7 Αρχές Αποτελεσματικής Σχεδίασης Ιστοσελίδων”.

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

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

ΜILK AND BLOOD

Όταν ένας χρήστης αναζητάει ιστοσελίδες μη κερδοσκοπικού χαρακτήρα και τελικά μπει στην ιστοσελίδα www.milkandblood.info, είναι σίγουρο ότι η πρώτη σελίδα είναι προφανής και αυτονόητη. Δεν δημιουργεί ερωτηματικά , ενώ η δομή της ιστοσελίδας στηρίζεται σε τεχνική Parallel -one page.

02. Μην σπαταλάτε την υπομονή των χρηστών

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

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

NOT FOR SALE

Πάρτε παράδειγμα την ιστοσελίδα not for sale . Όταν κάποιος μπει για πρώτη φορά, το σύστημα ζητάει προαιρετικά το email του χρήστη. Δείτε την απλότητα και την σαφήνεια του κειμένου. Πολύ γρήγορα μπορεί κάποιος να αποφασίσει εάν θέλει να δώσει το email του. Ακόμη και το κουμπί επιβεβαίωσης είναι φιλικό και απλό, γράφει πάνω “Join us”, το οποίο είναι μια φιλική έκφραση και το συνολικό design δεν είναι φλύαρο και ενοχλητικό. Πολύ σημαντικό είναι, ότι είτε δώσετε το email σας, είτε όχι την επόμενη φορά που θα μπείτε δεν θα σας ξανά κάνει το σύστημα την ίδια ερώτηση.

03. Διαχειριστείτε σωστά την προσοχή του χρήστη

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

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

Dadaab Stories

Η ιστοσελίδα Dadaab Stories, χρησιμοποιεί όλο το background σε Full Screen για να την αναπαραγωγή video. Είναι πολύ σημαντικό ότι ενώ το video πετυχαίνει στο στόχο του και εγκλωβίζει το βλέμμα, ταυτόχρονα δεν ενοχλεί. Φυσικά αυτό έχει σχέση με την επιλογή του πλάνου, τα χρώματα, το πόσο “δράση” περιέχει το πλάνο κ.ο.κ. Επιπλέον η επιλογή να τοποθετηθεί σε Full Screen video για background, αναπαριστά με τον καλύτερο τρόπο την ιδέα που αντιπροσωπεύει η ιστοσελίδα.

4. Κατευθυντήριες γραμμές

Τα σύγχρονα σχέδια websites συνήθως καθοδηγούν τους χρήστες από την πρώτη κιόλας σελίδα με ελκυστικά μεγάλα κουμπιά του τύπου “κάνε τα εξής βήματα: 1-2-3”. Κάποιοι επικρίνουν αυτή την τεχνική, όμως από σχεδιαστικής άποψης οι κατευθυντήριες γραμμές είναι εξαιρετικά αποτελεσματικές, δεδομένου ότι οδηγούν τους επισκέπτες μέσα στο περιεχόμενο της ιστοσελίδας με πολύ απλό και φιλικό τρόπο. 

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

The Michael J. Fox Foundation

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

5. Γραπτός λόγος

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

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

Στα κείμενα που αφορούν την επιχείρησή σας ή τα προϊόντα σας ή τις υπηρεσίες σας, αποφύγετε άγνωστες τεχνικές ονομασίες και ορολογίες marketing. Για παράδειγμα, αν έχετε περιγράψει μια υπηρεσία και θέλετε οι χρήστες να δημιουργήσουν ένα λογαριασμό (sign up) ώστε να λάβουν περισσότερες πληροφορίες, είναι προτιμότερο να γράψετε “Ξεκινήστε τώρα!” από το να γράψετε “Πατήστε εδώ για να διευρύνεστε αναλυτικά τις υπηρεσίες μας”.

IMDb

Ίσως συμφωνούμε όλοι, πως μια από τις ιστοσελίδες με πραγματικά τεράστιο όγκο πληροφοριών, είναι το IMDb. Έχουν να προσφέρουν άφθονο φωτογραφικό υλικό και εκατομμύρια γραμμές γραπτού λόγου. Και όμως, η πρώτη σελίδα είναι απίστευτα κομψή. Τίτλοι, σύντομοι και περιεκτικοί, καθώς και όλα τα λεκτικά που εμφανίζονται στην 1η σελίδα. Σίγουρα το IMDb αποτελεί εκτός των άλλων case study!

6. Προσπαθήστε για την απλότητα

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

Living Edge

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

7. Μην φοβάστε τον κενό χώρο 

Στην πραγματικότητα είναι αρκετά δύσκολο να εκτιμήσουμε την αξία του κενού χώρου. Πραγματικά πιστεύετε ότι πρέπει να φορτώσουμε κάθε pixel της οθόνης με πληροφορίες; Όχι φυσικά δεν χρειάζεται! Αντιθέτως με το να αφήνουμε κενό χώρο μειώνουμε το γνωστικό φορτίο και βοηθάμε τον χρήστη να επικεντρωθεί εκεί που θέλουμε.
Πολύπλοκες δομές είναι δύσκολο να σαρωθούν (να θυμάστε οι χρήστες στην πρώτη τους επαφή με μια ιστοσελίδα “σαρώνουν”, δεν διαβάζουν).
Εάν θέλετε να χωρίσετε την ιστοσελίδα σε τμήματα είναι προτιμότερο να χρησιμοποιείτε κενό, παρά γραμμές και χρώματα. Παράλληλα οι ιεραρχικές δομές μειώνουν την πολυπλοκότητα.

Postmachina

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