User experience

Φανταστείτε ότι περπατάτε σε μια άγνωστη πόλη για να φτάσετε σε ένα σημαντικό ραντεβού.

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

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

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

Οι άνθρωποι που χρησιμοποιούν το internet βρίσκονται σε ένα παρόμοιο ταξίδι.

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

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

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

Η κατάργηση των εμποδίων προς τον τελικό προορισμό και η βελτίωση του ταξιδιού των χρηστών ενός site είναι το κλειδί για έναν ικανοποιημένο χρήστη. Αυτό ακριβώς ονομάζεται με απλά λόγια “Εμπειρία χρήστη” (User Experience).

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

Στον κόσμο του design, υπάρχουν 2 όροι που καλό είναι κάποιος να τους έχει κατά νου, όταν σκοπεύει να δημιουργήσει και να διαχειριστεί πληροφορία στο internet: το UI (User Interface) που είναι το πώς κάτι φαίνεται, και το UX (User Experience) που είναι το πώς κάτι λειτουργεί.

Εικόνα 7.1: UI - UX (πηγή: indiehackers.com).

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

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

Όμως τα πράγματα κατά τη χρήση (UX) είναι λίγο διαφορετικά.

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

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

Το User Experience είναι το σημαντικότερο στοιχείο για την επιτυχία ενός website.

Για αυτό δεν είναι τυχαίο που η Εμπειρία Χρήστη αποτελεί έναν τομέα που συνεχώς εξελίσσεται και αποκτά περισσότερη σημασία όσο περνούν τα χρόνια, σε αντίθεση με όρους όπως το User Interface (το οποίο μένει σταθερό), το Conversion Rates ή το Marketing Ideas.

Εικόνα 7.2: Ενδιαφέρον για το UX την τελευταία δεκαετία (πηγή: trends.google.com).

Εικόνα 7.3: Ενδιαφέρον για το Marketing την τελευταία δεκαετία (πηγή: trends.google.com).

Το UX είναι τόσο σημαντικό ώστε το LinkedIn το κατέταξε το 2020 ως την 5η σημαντικότερη δεξιότητα που χρειάζονται οι εταιρείες για νέους εργαζομένους τους.

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

Και ένα καλό User Experience αυξάνει τις πιθανότητες να επικρατήσουν έναντι του ανταγωνισμού.

Έτσι, πολλές εταιρείες αντί να ξοδεύουν εκατομμύρια για μάρκετινγκ, όπως συνέβαινε παλαιότερα, επενδύουν πλέον στη δημιουργία σπουδαίων προϊόντων.

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

Μη με κάνεις να σκέφτομαι

To 2000 o Steve Krug, επαγγελματίας ειδικός στο User Experience (μπορούμε να το αποδώσουμε και ως ευχρηστία), έγραψε το βιβλίο του “Don’t make me think” (μη με κάνεις να σκέφτομαι), το οποίο έμελλε να σημειώσει τρομερή επιτυχία και να αποτελέσει για τους ειδικούς ένα σημείο αναφοράς, όσον αφορά το πως θα έπρεπε να λειτουργεί ένα site.

Αν και έχουν περάσει 22 χρόνια από τότε και η τεχνολογία έχει αλλάξει αρκετά, ωστόσο οι αρχές του βιβλίου παραμένουν αμετάβλητες.

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

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

Εικόνα 7.4: Το εξώφυλλο του Don’t make me think του Steve Krug (πηγή: boagworld.com).

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

Ο Steve Krug αναλύει σε 3 κανόνες, το πως θα έπρεπε να σχεδιάζονται και να λειτουργούν τα websites.

• Κανόνας 1. Μη με κάνεις να σκέφτομαι.
  Αυτός είναι ο γενικός κανόνας. Κάθε φορά που ένας χρήστης πρέπει να κάνει παύση (έστω και για ένα κλάσμα του δευτερολέπτου) για να σκεφτεί κάτι, αποσπάται η προσοχή του από τη δράση που θέλετε να κάνει.
  Ο στόχος είναι να κάνετε την ιστοσελίδα σας πανεύκολη στη χρήση, π.χ. κάθε τι να κάνει το αυτονόητο.
  Ένας ιστότοπος είναι αυτονόητος όταν οι χρήστες «καταλαβαίνουν» περί τίνος πρόκειται και πώς να τον χρησιμοποιούν χωρίς να χρειάζεται να σκεφτούν.
  Ως εμπειρικοί κανόνες: (i) είναι προφανές ότι οι σύνδεσμοι (links) και τα κουμπιά πρέπει να έχουν τη δυνατότητα click και (ii) χρησιμοποιούν λέξεις που είναι προφανείς σε όλους (call to action - προτροπή σε δράση).
  Πρέπει να αποφεύγετε η τεχνική ορολογία, οι έξυπνες αλλά μπερδεμένες φράσεις μάρκετινγκ ή όροι που είναι συγκεκριμένοι για τον κλάδο ή την εταιρεία σας.
• Κανόνας 2. Κάθε click πρέπει να αποτελεί μια προφανή επιλογή χωρίς να χρειάζεται κάποιος να σκεφτεί τι πρόκειται να συμβεί αφού το πατήσει. Το αποτέλεσμα της δράσης του click δηλαδή να είναι αυτονόητο.
  Ο Krug πιστεύει ότι ο αριθμός των κλικ δεν έχει τόση σημασία, εφόσον κάθε κλικ είναι αυτονόητο (δηλαδή δεν απαιτεί σκέψη) και προφανές (δηλαδή ο χρήστης είναι σίγουρος ότι είναι η σωστή επιλογή).
  Η μόνη εξαίρεση είναι όταν η ταχύτητα του internet είναι αργή, οπότε ο αριθμός των κλικ θα κάνουν τη διαφορά.
• Κανόνας 3. Όταν κατά τη δημιουργία μιας σελίδας, τελειώσετε το περιεχόμενο που σκοπεύετε να προσθέσετε σε αυτήν, αφαιρέστε τις μισές λέξεις. Στη συνέχεια, αφαιρέστε και τις μισές από όσες απέμειναν.
  Αφαιρέστε όλες τις περιττές λέξεις για να μειώσετε τους περισπασμούς, αφήστε το βασικό περιεχόμενο να ξεχωρίσει και συντομεύστε τη σελίδα για να ελαχιστοποιήσετε την κύλιση.
  Η μόνη εξαίρεση είναι για ειδήσεις ή άρθρα που βασίζονται στο περιεχόμενο.

Ένα μεγάλο μέρος για να τηρούνται οι παραπάνω κανόνες αποτελεί -προφανώς- το κομμάτι του σχεδιασμού του website, το οποίο πολλές φορές αναλαμβάνουν επαγγελματίες και στηρίζεται σε σκελετούς και διατάξεις που υπάρχουν και πωλούνται έτοιμα (templates / themes).

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

Πόσο εύχρηστα είναι όμως όλα αυτά;

Κατά τη γνώμη μου, καθόλου!

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

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

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

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

Στον αντίποδα των προσωπικών projects, αυτό που μένει σταθερό όλα τα χρόνια που έχω εργαστεί δίπλα σε σπουδαίους επαγγελματίες σχεδιαστές του Skroutz.gr, είναι το γεγονός της απλότητας και της δόμησης της πληροφορίας με ένα design “αυταπόδεικτο” για τους χρήστες, καθώς και η συνεχής προσπάθεια για να εντοπίσουμε και να αφαιρέσουμε οτιδήποτε δυσκολεύει τους επισκέπτες!

Η κατά γενική ομολογία πιο επιτυχημένη εταιρεία του internet, η Google, έχει ως βασική σελίδα του Google Search ότι πιο απλό θα σκεφτόταν κάποιος: ένα λογότυπο και μια φόρμα αναζήτησης, μαζί με πολύ λίγα links για σύνδεση (log-in) και πληροφορίες για το προϊόν.

Εικόνα 7.5: Η κεντρική σελίδα του Google Search.

Δεν πρέπει λοιπόν κανείς να απαιτεί πολλά από τον χρήστη.

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

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

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

Όσο πιο απλό, τόσο πιο καλό!

Εικόνα 7.6: Απλότητα προϊόντων (πηγή: Eric Burke, stuffthathappens.com).

Τα πιο σημαντικά πράγματα που πρέπει να κάνει κάποιος που θέλει να δημιουργήσει κάτι στο internet, κατά τη γνώμη μου, είναι αρχικά να μάθει περισσότερα για το UX μέσα από βιβλία, άρθρα στο internet, video, blogs κ.α.

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

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

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

Πλοήγηση

Η σωστή πλοήγηση σε ένα site είναι η καρδιά ενός καλού User Experience.

Σύμφωνα με μια μελέτη από το Tank Design που δημοσιεύτηκε στο Forbes, η πλοήγηση ενός website μπορεί να κοστίσει μια περιουσία, εάν δεν υλοποιηθεί σωστά.

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

Μια άλλη έρευνα που διεξήχθη από το διάσημο σε User Experience site Jakob Nielsen, η μέση διάρκεια επίσκεψης μιας σελίδας διαρκεί λιγότερο από 1 λεπτό. Για το λόγο αυτό, αν οι λειτουργίες πλοήγησης που υπάρχουν στη σελίδα αποτύχουν στο στόχο τους, το site δεν θα έχει την ευκαιρία να αποδείξει στους υποψήφιους πελάτες ότι αξίζουν ο χρόνος και η προσοχή τους.

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

Το αποτέλεσμα;

Χάσατε!

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

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

Ποιες είναι όμως οι βασικές αρχές μιας καλής πλοήγησης σε ένα site;

Ας πάρουμε τα πράγματα από την αρχή.

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

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

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

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

Τα αναπτυσσόμενα μενού είναι μια μορφή μενού πλοήγησης στο οποίο οι σύνδεσμοι αποκαλύπτονται σε μια λίστα που πέφτει όταν κάνετε click ή τοποθετείτε το δείκτη του ποντικιού σε μια περιοχή μιας σελίδας (hover).

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

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

Τα μενού υποσέλιδου (footer) είναι μενού πλοήγησης που βρίσκονται στο κάτω μέρος μιας σελίδας.

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

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

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

Τα μενού της πλαϊνής στήλης - sidebar είναι παρόμοια με την οριζόντια γραμμή πλοήγησης, αλλά βρίσκεται κάθετα, στο πλάι μιας σελίδας με κάθε στοιχείο μενού στοιβαγμένο πάνω από το επόμενο.

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

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

Τα breadcrumbs (ψίχουλα), είναι ένας κοινός τρόπος για να ξέρουν οι επισκέπτες μιας σελίδες που ακριβώς βρίσκονται ή / και τη διαδρομή που έχουν ακολουθήσει μέχρι αυτό το σημείο.

Τα breadcrumbs οφείλουν την ονομασία τους στο κλασσικό παραμύθι Χάνσελ και Γκρέτελ, και είναι μια διάταξη που επιτρέπει στους χρήστες να ακολουθούν τα βήματά τους, προκειμένου να “ταξιδεύουν” στις διάφορες ενότητες και σελίδες ενός site με ευκολία.

Το Χάνσελ και Γκρέτελ (γερμανικά: Hänsel und Gretel‎) είναι ένα δημοφιλές παραμύθι γερμανικής προέλευσης, που δημοσιεύτηκε αρχικά από τους αδελφούς Γκριμ το 1812.

Ο Χάνσελ και η Γκρέτελ είναι δύο αδέλφια, που γίνονται αντικείμενο απαγωγής από μια κανίβαλη μάγισσα που ζει στο δάσος, σε ένα σπίτι κατασκευασμένο από τούρτα, γλυκίσματα και πολλές άλλες λιχουδιές. Τα δύο παιδιά τελικά δραπετεύουν, αφού χρησιμοποιούν μεταξύ άλλων και ένα μονοπάτι από ψίχουλα (breadcrumbs).

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

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

Εικόνα 7.7: Breadcrumbs στο Skroutz.gr.

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

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

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

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

Για μικρά site η κεντρική μπάρα πλοήγησης σε όλες τις σελίδες, με τις βασικές ενότητες (μέχρι 5-7) με ή χωρίς αναπτυσσόμενο μενού (μικρό σε μέγεθος με όσο δυνατόν λιγότερες επιλογές) για κάθε μια από τις επιλογές, είναι προτεινόμενη. Ταυτόχρονα, φυσικοί σύνδεσμοι προς άλλες σελίδες του site μέσα στο περιεχόμενο μαζί με ένα σύνολο συνδέσμων στο υποσέλιδο (όροι χρήσης, επικοινωνία κτλ.) θα βοηθήσουν σε μια καλή εμπειρία χρήστη.

Το μενού πλαϊνής στήλης δεν είναι απαραίτητο και μπορεί να αποφεύγεται.

Τα breadcrumbs είναι μια κοινή πρακτική σε sites οποιουδήποτε μεγέθους.

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

Όσον αφορά την παρουσία μενού πλοήγησης σε κινητές συσκευές, π.χ. smartphones, είναι κοινή πρακτική τα αναδυόμενα μενού χάμπουργκερ.

Τα στοιχεία πλοήγησης πρέπει να είναι σαφή και διακριτά.

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

Εικόνα 7.8: Τα βέλη μπορούν να βοηθήσουν πολύ στο να αντιληφθούν οι επισκέπτες μιας σελίδας τη λειτουργία ενός συνδέσμου πλοήγησης.

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

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

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

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

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

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

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

Το παν είναι να διασφαλίσετε ότι δεν θα υπάρχουν εκπλήξεις.

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

Οι επισκέπτες θα πρέπει να είναι σίγουροι ότι ξέρουν πού θα καταλήξουν όταν κάνουν click σε οποιοδήποτε σύνδεσμο.

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

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

Ένα -όχι και τόσο καλό- παράδειγμα από την εμπειρία μου είναι από το site grandama.gr, στο οποίο μου είχε ζητήσει στο παρελθόν η ιδιοκτήτρια κάποιες συμβουλές σχετικά με το πώς μπορεί να αυξήσει την επισκεψιμότητα από τις μηχανές αναζήτησης.

Όταν επισκέφτηκα το grandama.gr και προσπάθησα να περιηγηθώ για να αναγνωρίσω τις βασικές ενότητες (ο business στόχος του grandama.gr είναι να παρέχει κατ’ οίκον φροντίδα ηλικιωμένων), είδα το αναδυόμενο μενού να περιέχει μεγάλες φράσεις, κακή ιεραρχία, διαφορετικές γραμματοσειρές και στυλ, πολλά χρώματα, το οποίο με δυσκόλευε πολύ στο να το κατανοήσω (εικ. 7.8).

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

Εικόνα 7.9: Αναδυόμενο μενού κεντρικής πλοήγησης grandmama.gr.

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

Μια παρότρυνση για δράση (call to action) είναι ένας σύνδεσμος, συνήθως με τη μορφή κουμπιού, που προσκαλεί τους επισκέπτες να προβούν σε μια συγκεκριμένη ενέργεια (συνήθως για μετατροπή).

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

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

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

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

Κάτι άλλο που θα πρέπει να φροντίσετε είναι να ελαχιστοποιήσετε τα click της πλοήγησης.

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

Γι’ αυτό είναι πολύ σημαντικό να τοποθετείτε συνδέσμους προς δημοφιλές ή σημαντικό περιεχόμενο στα κύρια μενού πλοήγησής σας.

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

Όπως στο παράδειγμα του grandama.gr παραπάνω, δεν υπάρχει τίποτα που να καταστρέφει την φιλικότητα προς το χρήστη και την κομψή σχεδίαση μιας γραμμής πλοήγησης, όσο τα πολλά στοιχεία πλοήγησης (υπερπλήρες μενού πλοήγησης, ή όπως ονομάζεται mega-menu).

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

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

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

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

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

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

Το βασικό μενού πλοήγησης ενός ιστοτόπου πρέπει να πληροί τα εξής κριτήρια:

1. Να είναι βολικό.
2. Να είναι ξεκάθαρο και συμπαγές.
3. Να επικοινωνεί άμεσα τη λειτουργία και το περιεχόμενό του.
4. Να είναι διαθέσιμο από οποιοδήποτε σημείο της σελίδας.
5. Να αποκρίνεται σε όλες τις συσκευές και κυρίως να είναι φιλικό προς τα κινητά.
6. Να είναι εύκολα προσβάσιμο και εύχρηστο.

Αρχικά, ξεκινήστε με τον καθορισμό της ιεραρχίας στην οποία θα εμφανίζονται οι πληροφορίες.

Σχεδιάστε πρώτα την πλοήγηση του site μέχρι την τελευταία λεπτομέρεια στο χαρτί.

Μπορείτε να χρησιμοποιήσετε χάρτη ιστότοπου (sitemap), διάγραμμα, υπολογιστικό φύλλο Excel ή ό,τι άλλο θεωρείτε άνετο για να δουλέψετε.

Επιμείνετε στον κανόνα των τριών clicks.

Αυτός ο κανόνας είναι στοιχειώδης και επιβάλλεται από πολλούς ειδικούς του UX.

Η αρχή του είναι ότι καμία εσωτερική σελίδα στο site δεν πρέπει να απέχει περισσότερο από τρία click.

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

Τοποθετήστε σημαντικούς συνδέσμους είτε στην αρχή είτε στο τέλος του μενού πλοήγησης.

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

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

Για παράδειγμα, οι ειδικοί του UX συνιστούν να γίνει η “Επικοινωνία” το τελευταίο στοιχείο στη λίστα (πράγμα που πολύ συχνά συμβαίνει).

Χρησιμοποιήστε λέξεις όσο το δυνατόν πιο συγκεκριμένες και σαφείς.

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

Αποφύγετε γενικούς όρους και πλοήγηση που βασίζεται σε λέξεις όπως “Υπηρεσίες” ή “Βίντεο”.

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

Χρησιμοποιήστε όχι περισσότερους από 5-7 συνδέσμους, ειδικά όταν πρόκειται για τη βασική γραμμή πλοήγησης.

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

Οι αριθμοί 5-7 είναι ιδανικοί αριθμοί για την πλοήγηση σε ένα site που μπορεί να κρατάει τους επισκέπτες εστιασμένους στο στόχο τους.

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

Χρησιμοποιήστε μια κοινή και ευανάγνωστη γραμματοσειρά.

Μη χρησιμοποιείτε καλλιγραφικές ή περίεργες γραμματοσειρές που δυσκολεύουν τη γρήγορη σάρωση δεδομένων. Δείτε παραπάνω στην εικόνα 7.8 πόσο δύσκολη είναι η γρήγορη σάρωση του κειμένου.

Διασφαλίστε τη βέλτιστη** αναλογία αντίθεσης** (κατά προτίμηση 7:1) μεταξύ των λέξεων του μενού και του φόντου.

Ωστόσο, να θυμάστε επιπλέον ότι ένα κείμενο με υψηλή αντίθεση μπορεί να είναι δύσκολο να διαβαστεί (στο online εργαλείο https://contrast-ratio.com/ μπορείτε να βάλετε τα χρώματα σας και να δείτε την αντίθεση).

Ακολουθήστε μια συνέπεια στη μορφή, στο στυλ και το design.

Η πλοήγηση στον ιστότοπο θα πρέπει να παραμένει ίδια σε ολόκληρο τον ιστότοπο.

Φροντίστε την εμφάνιση και τη λειτουργικότητα του μενού πλοήγησης σε κινητά και σε άλλα μεγέθη οθόνης.

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

Να είστε προσεκτικοί και φειδωλοί με τα αναπτυσσόμενα μενού.

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

Πρώτον, οι επισκέπτες μπορεί να δυσκολεύονται να τα διαχειριστούν.

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

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

Εικόνα 7.10: Αναδυόμενο μενού κεντρικής πλοήγησης ebay.

Εικόνα 7.11: Αναδυόμενο μενού κεντρικής πλοήγησης asos.

Να υποδεικνύετε πάντα σε ποιο σημείο του site βρίσκεται κάθε σελίδα (π.χ. χρήση breadcrumbs ή πιο έντονης γραμματοσειράς στον σύνδεσμο της σελίδας στην οποία βρίσκεται ο επισκέπτης).

Μην αφήνετε περιθώρια σύγχυσης.

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

Ευθυγραμμίστε την πλοήγηση του site με τον business στόχο ή / και τη στρατηγική μάρκετινγκ.

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

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

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

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

Εικόνα 7.12: Μενού κεντρικής πλοήγησης arahova-pansion.gr. Οι βασικές σελίδες είναι 1 click μακριά από κάθε περιοχή του site, ενώ όλες οι σελίδες βρίσκονται μέχρι 2 click μακριά.

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

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

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

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

Κέντρισε το ενδιαφέρον, δώσε (λίγες) επιλογές μετά

Ένα άρθρο που δημοσιεύτηκε από το περιοδικό TIME το 2015 περιείχε μια έρευνα της Microsoft, σύμφωνα με την οποία οι άνθρωποι έχουν χρόνο προσοχής σε κάτι μόλις 8 δευτερόλεπτα, χρόνος μικρότερος από τη μνήμη ενός χρυσόψαρου.

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

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

Αυτό είναι ένα λάθος στο οποίο πέφτουμε αρκετά συχνά.

Στον κλάδο του web development, της δημιουργίας δηλαδή και διαχείρισης ιστοχώρων, υπάρχει ο όρος Bounce Rate, που στα ελληνικά μπορούμε να τον αποδώσουμε ως “Ποσοστό Εγκατάλειψης” ή “Αναπήδησης”.

Σχεδόν σε όλες τις σοβαρές εταιρείες που επιχειρούν μέσω μιας παρουσίας στο internet, το bounce rate είναι ένας δείκτης απόδοσης και ποιότητας.

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

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

Κάθε site έχει πολλές σελίδες και προφανώς κάθε σελίδα έχει το δικό της bounce rate.

Το σύνολο όλων των ποσοστών εγκατάλειψης των σελίδων αποτελεί το bounce rate του site και είναι ενδεικτικό της ποιότητας των σελίδων (περιεχόμενο, user experience, design κτλ).

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

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

Αυτός ο ελάχιστος χρόνος, είναι υπερ-κρίσιμος για την επιτυχία ενός site.

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

Οι χρήστες θα εγκαταλείψουν μια σελίδα κυρίως για τους εξής λόγους:

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

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

Ας πάρουμε ένα παράδειγμα.

Έχετε επισκεφθεί ποτέ το Nissan.com; Αν όχι, κάντε ένα click σε αυτόν τον σύνδεσμο: https://www.nissan.com/.

Αυτό που θα δείτε είναι η παρακάτω σελίδα.

Εικόνα 7.13: Κεντρική σελίδα Nissan.com.

Ήταν αυτό που περιμένατε;

Μάλλον όχι!

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

Αν λοιπόν σας ενδιέφερε να αγοράσετε ένα αυτοκίνητο Nissan, θα μένατε για πολλή ώρα στο να κοιτάζετε ανταλλακτικά υπολογιστών στο Nissan.com;

Η απάντηση είναι σχεδόν σίγουρα όχι, και υπάρχουν στατιστικά στοιχεία για αυτό.

Σύμφωνα με το Alexa.com, μια υπηρεσία στατιστικών χρήσης internet της Amazon που πρόσφατα σταμάτησε τη λειτουργία της, ο μέσος επισκέπτης του nissan.com παραμένει εκεί για περίπου 30 δευτερόλεπτα. Αντίθετα, στο nissanusa.com, το site της Nissan Motors στις Ηνωμένες Πολιτείες Αμερικής παραμένει για περισσότερα από 4 λεπτά.

Αυτή είναι η θλιβερή αλήθεια: οι περισσότεροι από τους ανθρώπους που επισκέπτονται το nissan.com δεν ενδιαφέρονται για το τι είναι στην πραγματικότητα ο ιστότοπος. Μάλλον ψάχνουν για νέο αυτοκίνητο.

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

Κάτι αντίστοιχο με το παραπάνω κάνουν αρκετοί οι οποίοι αγοράζουν domains όπως “yuotube.com” ή “faecbook.com” προκειμένου να αποσπάσουν ένα μικρό ποσοστό της επισκεψιμότητας από τις πραγματικές τοποθεσίες.

Στην καλύτερη περίπτωση κάτι τέτοιο είναι παραπλανητικό.

Στη χειρότερη περίπτωση, μπορεί να είναι εντελώς επικίνδυνο — ακόμη και παράνομο.

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

Γιατί να θέλει κάποιος να υποβάλλει τους επισκέπτες του σε αυτό;

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

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

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

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

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

Το πρώτο Σάββατο, 24 γεύσεις μαρμελάδας παρουσιάστηκαν για να δοκιμάσουν και να αγοράσουν οι πελάτες.

Το δεύτερο Σάββατο, διατέθηκαν μόνο έξι από αυτές τις ίδιες μαρμελάδες.

Τι πιστεύετε ότι ήταν τα αποτελέσματα;

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

Όταν ήταν διαθέσιμες 24 μαρμελάδες, το 60% των πελατών σταμάτησαν για μια δοκιμή γεύσης. Όμως, μόνο το 3% των αγοραστών που σταμάτησαν αγόρασαν κάποια.

Όταν αντίθετα ήταν διαθέσιμες μόνο 6 γεύσεις, μόνο το 40% των πελατών σταμάτησαν να δοκιμάσουν τις μαρμελάδες. Αλλά από αυτούς που σταμάτησαν, το 30% πήρε στο τέλος μια από τις μαρμελάδες.

Τι σημαίνει αυτό για έναν ιστότοπο;

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

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

Πώς όμως μπορεί κάποιος να κεντρίσει το ενδιαφέρον του χρήστη;

Σήμερα ζούμε σε μια κοινωνία όπου βομβαρδιζόμαστε με πληροφορίες.

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

Οι ειδικοί του User Experience γνωρίζουν ότι οι άνθρωποι αντιδρούν σε οτιδήποτε κινείται.

Η περιφερειακή μας όραση, μια αίσθηση που αναπτύξαμε για να μας προστατεύει από τον κίνδυνο, είναι εξαιρετικά ευαίσθητη στην κίνηση.

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

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

Εικόνα 7.14: Ένα ανθρώπινο πρόσωπο που μας κοιτάζει, προκαλεί την προσοχή μας (πηγή: unsplash.com).

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

Ο ευκολότερος τρόπος για να ελέγξετε αν κάτι ξεχωρίζει είναι με το εξής: Κοιτάζετε την οθόνη από μια απόσταση 1-2 μέτρων, θα πρέπει να ξεχωρίζετε αμέσως το στοιχείο που επικρατεί οπτικά.

Δεν δίνουμε ιδιαίτερη σημασία σε πράγματα που βλέπουμε συνεχώς, αλλά όταν βλέπουμε κάτι νέο και καινοτόμο, αυτό τείνει να πυροδοτεί την περιέργειά μας.

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

Δείξτε στο κοινό σας γρήγορα ότι έχετε να πείτε — μην του το πείτε μόνο.

Επίσης μπορείτε να στοχεύστε τα πρωτόγονα ένστικτα των ανθρώπων: Μπορώ να το φάω, μπορώ να κάνω σεξ μαζί του και θα με σκοτώσει;

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

Είναι φυσικό ένστικτο να σαρώνουμε το περιβάλλον μας και να απαντάμε σε αυτές τις ερωτήσεις.

Γνωρίζοντας αυτό, μπορείτε να τα χρησιμοποιήσετε για να τραβήξετε την προσοχή.

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

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

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

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

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

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

Οι άνθρωποι αγαπούν τις ιστορίες και πρέπει εσείς να πείτε τη δική σας ιστορία.

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

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

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

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

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

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

Οι πληροφορίες που δίνετε στους επισκέπτες σας πρέπει να είναι πολύτιμες, και το μήνυμα να είναι διασκεδαστικό, ελκυστικό ή ενδιαφέρον.

Ποτέ, μα ποτέ, μην προσπαθήσετε να εξαπατήσετε το κοινό σας. Το τελευταίο πράγμα που θέλετε να κάνετε είναι να παραπλανήσετε τους αναγνώστες σας με clickbait τεχνικές.

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

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

Tα πιο βασικά και σημαντικά για τη σελίδα και το σκοπό της στοιχεία πρέπει να βρίσκονται “above the fold” ή στα ελληνικά “επάνω από την τσάκιση ή τη δίπλωση”.

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

Ο όρος “above the fold” (επάνω από την πτύχωση) έρχεται από τον κόσμο των εφημερίδων και σημαίνει το μέρος εκείνο της 1ης σελίδας της εφημερίδας που είναι ορατό όσο η εφημερίδα είναι διπλωμένη στο περίπτερο.

Εικόνα 7.16: Above the fold τμήμα εφημερίδας (πηγή: epicnine.com).

Στο περιβάλλον των ηλεκτρονικών υπολογιστών, smartphones, tablets κα. “above the fold” θεωρείται εκείνο το τμήμα της σελίδας που βλέπουν οι επισκέπτες ανοίγοντας τη σελίδα από τη συσκευή τους, χωρίς να σκρολάρουν καθόλου.

Οποιοδήποτε στοιχείο της σελίδας είναι ορατό στους επισκέπτες μετά από κύλιση, θεωρείται ως στοιχείο “below the fold”.

Η διάταξη και η τοποθέτηση περιεχομένου που θα κεντρίσει την προσοχή του επισκέπτη ώστε να επενδύσει τον χρόνο και την προσοχή του σε μια σελίδα, είναι σημαντικό να είναι “above the fold” επειδή το περιεχόμενο αυτό θα δει ο επισκέπτης αμέσως μόλις φορτώσει η σελίδα.

Τα στοιχεία που βρίσκονται above the fold τραβούν την προσοχή των επισκεπτών περισσότερο από κάθε άλλο τμήμα σε μια σελίδα.

Το περιεχόμενο above the fold συχνά θα καθορίσει το αν ένας επισκέπτης θα παραμείνει στη σελίδα ή θα εγκαταλείψει για να επισκεφτεί ένα άλλο site.

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

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

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

Πράγματα που πρέπει να έχεις υπόψη:

1. Επίλεξε για το site σου απλή διάταξη, μεγάλες γραμματοσειρές και ευκρινή χρώματα. Κράτησε το όσο μπορείς πιο απλό. Μην κάνεις τους επισκέπτες σου να σκέπτονται.
2. Ο γενικός κανόνας για ένα καλό User Experience είναι πως οτιδήποτε βλέπει ο χρήστης πρέπει να είναι αυταπόδεικτο, να είναι σαφές το τι κάνει και γιατί βρίσκεται εκεί. Η πληροφορία πρέπει να είναι απλή, λιτή και περιεκτική.
3. Μια μικρή σε έκταση σελίδα, με συνοπτικές πληροφορίες, απλή διάταξη και ξεκάθαρο call to action θα είναι πάντα καλύτερη από οτιδήποτε άλλο.
4. Δώσε επιλογές στο χρήστη. Όχι όμως πολλές στην ίδια σελίδα. Διευκόλυνε όσο είναι δυνατόν το επόμενο κλικ.

Cover image source: Unsplash.com