User Experience & Web Design

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

Σε αυτήν την ανάρτηση θα σας παρουσιάσω έναν κανόνα UX (UX = User Experience), το εφέ σειριακής θέσης. Μαζί θα εξετάσουμε τι σημαίνει και πώς μπορούμε να χρησιμοποιήσουμε αυτές τις πληροφορίες για την ανθρώπινη μνήμη για να σχεδιάσουμε ιστοσελίδες με την καλύτερη δυνατή εμπειρία χρήστη. Είναι μια από τις τακτικές που χρησιμοποιούμε τόσο για την κατασκευή ιστοσελίδων όσο και για την δημιουργία eshop στην dreamweaver.gr

User Experience & Web Design. Αναλύοντας το φαινόμενο σειριακής θέσης

Τι είναι το εφέ σειριακής θέσης;

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

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

User Experience & Web Design. Η πρώτη και η πρόσφατη πληροφορία 

Η πρώτη πληροφορία

Ας πούμε ότι σας ζητούσα το εξής:

«Θέλω να μου φέρεις τα παρακάτω από το super market: αγγούρι, καρότα,κολοκυθάκια, κρεμμύδια…..».

Στη συνέχεια σας ζητούσα να επαναλάβετε όλα τα πράγματα που σας ζήτησα. Είναι πιθανό να προσπαθήσετε να επαναφέρετε στη μνήμη σας τη λίστα από την αρχή. Το αγγούρι θα ήταν πιο εύκολο να το θυμάστε. Ίσως και τα καρότα… Και μετά τι άλλο;

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

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

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

Η πρόσφατη πληροφορία

Τώρα ας πούμε ότι είμαστε μαζί σε μια συνάθροιση και σας συστήνω σε μέλη της οικογένειας μου:

 

“Από εδώ ο μπαμπάς μου, ο θείος Γιάννης, η αδελφή μου, η μαμά μου και ο παππούς μου ο Μανόλης.”

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

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

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

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

User Experience & Web Design. 6 τρόποι ορθής εφαρμογής και χρήσης

1. Τοποθετήστε τις πιο σημαντικές πληροφορίες στην αρχική ενότητα και σε ενότητες call-to-action (παρότρυνσης δράσης)

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

Η ενότητα παρότρυνσης για δράση (click-to-action) στο κάτω μέρος της αρχικής σελίδας δίνει στους χρήστες ένα σαφές επόμενο βήμα που πρέπει να κάνουν. Ενώ η αρχική σελίδα μπορεί να τα ωθήσει προς διάφορες κατευθύνσεις, αυτή η ενότητα τα ωθεί σε έναν συγκεκριμένο προορισμό, σε ένα popup με φόρμα αίτησης προσφοράς, σε μια σελίδα δήλωσης συμμετοχής κ.α. Δείτε παραδείγματα παρακάτω:

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

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

2. Τοποθετήστε στοιχεία που τραβούν το μάτι στα άκρα της κεφαλίδας (header) της ιστοσελίδας σας

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

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

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

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

3. Κάντε τα σημαντικά στοιχεία να επιμένουν (sticky)

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

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

4. Μελετήστε τα δεδομένα ώστε να μπορείτε να σχεδιάσετε ένα «ψεύτικο» υποσέλιδο.

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

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

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

Χωρίστε δηλαδή το περιεχόμενο σε δύο μέρη. Φυσικά, το σημαντικότερο θα βρίσκεται στην κορυφή. Ακολουθεί μια full width ενότητα με call to action στοιχεία και κάτω από αυτή το περιεχόμενο που δεν έχει ιδιαίτερη σημασία.

5. Βάλτε έξτρα»πινελιές» στα εσωτερικά στοιχεία που πρέπει να ξεχωρίζουν από τα υπόλοιπα.

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

Ας δούμε ένα παράδειγμα παρακάτω με παρουσίαση πακέτων τιμών.

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

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

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

6. Βάλτε τη σφραγίδα σας στην αρχή και το τέλος των videos σας

Το βίντεο μπορεί να είναι ένας αποτελεσματικός τρόπος επικοινωνίας με τους επισκέπτες του ιστότοπου, αφού συχνά κάνει την κατανόηση μακροσκελούς ή πυκνού περιεχομένου πολύ πιο εύκολη.
Γνωρίζοντας αυτό, πολλές επωνυμίες ενσωματώνουν προγράμματα αναπαραγωγής βίντεο σε βασικούς τομείς των ιστότοπών τους — όπως η ενότητα στην κορυφή της αρχικής σελίδας και σε σελίδες προϊόντων – πωλήσεων. Τα βίντεο αυτά δεν μπαίνουν πάντα «απευθείας στο ψητό». Πολύ συχνά εμφανίζουν πρώτα ένα frame με ένα λογότυπο ή μια επωνυμία.

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

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

Καταλήγοντας…

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

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

Κλείνοντας να τονίσουμε ότι την 1η Νοεμβρίου 2022 ξεκινούν οι σπουδές web design από το Πανεπιστήμιο Αιγαίου ( ΚΕΔΙΒΙΜ ) ένα πρόγραμμα που στηρίζει τόσο το Εργαστήριο ΤΠΕ Ήρων όσο και η DreamWeaver.Gr