Οι εκδότες εφημερίδων το είχαν καταλάβει πολύ πριν υπάρξει το web. Η ιστορία που αξίζει να διαβαστεί μπαίνει πάνω από την πραγματική πτυχή. Ό,τι βρίσκεται κάτω από αυτήν ανταγωνίζεται την απόφαση να γυρίσεις σελίδα. Σε μια ιστοσελίδα ισχύει η ίδια αρχή για το πρώτο τμήμα που βλέπει ο επισκέπτης πριν κάνει scroll.
Το above the fold αναφέρεται στο τμήμα μιας ιστοσελίδας που φαίνεται στο παράθυρο του browser όταν φορτώνει η σελίδα για πρώτη φορά, πριν ο επισκέπτης κάνει καθόλου scroll. Είναι το μόνο τμήμα της σελίδας που βλέπει κάθε επισκέπτης. Ό,τι βρίσκεται κάτω από αυτό πρέπει να κερδίσει το scroll. Ο όρος προέρχεται από την εκτύπωση: μια διπλωμένη στη μέση εφημερίδα στο περίπτερο δείχνει μόνο το πάνω μισό της πρώτης σελίδας. Αυτό το πάνω μισό έπρεπε να κερδίσει την προσοχή. Η περιοχή above the fold σε μια ιστοσελίδα δουλεύει με τον ίδιο τρόπο.
Τι βρίσκεται above the fold αλλάζει ανάλογα με τη συσκευή, το μέγεθος οθόνης και τον browser κάθε επισκέπτη. Μια μεγάλη οθόνη υπολογιστή δείχνει πολύ περισσότερο περιεχόμενο above the fold από ένα κινητό σε κάθετη θέση. Ο σχεδιασμός για το fold σημαίνει να σκέφτεσαι για όλες αυτές, όχι μόνο για την εκδοχή που βλέπεις στη δική σου οθόνη.
Γιατί μετράει το περιεχόμενο above the fold;
Οι έρευνες για τη συμπεριφορά ανάγνωσης δείχνουν σταθερά ότι οι επισκέπτες περνούν περισσότερο χρόνο με το περιεχόμενο κοντά στην κορυφή μιας σελίδας. Όσο πιο κάτω βρίσκεται το περιεχόμενο, τόσο λιγότεροι επισκέπτες φτάνουν σε αυτό. Αυτό δεν είναι αποτυχία προσοχής. Είναι λογική αντίδραση στον περιορισμένο χρόνο. Οι επισκέπτες κρίνουν γρήγορα αν αξίζει να διαβάσουν μια σελίδα και αυτή η κρίση γίνεται στο πρώτο ορατό τμήμα.
Το above the fold είναι εκεί όπου απαντάς στην πρώτη ερώτηση του επισκέπτη: είμαι στο σωστό μέρος; Αν ο τίτλος, η εικόνα και οι πρώτες γραμμές κειμένου κάνουν την απάντηση ξεκάθαρη, οι επισκέπτες κάνουν scroll. Αν μπερδευτούν ή δεν είναι σίγουροι, οι περισσότεροι δεν δίνουν στην υπόλοιπη σελίδα καμία ευκαιρία.
Τι πρέπει να μπει above the fold;
Η περιοχή above the fold έχει περιορισμένο χώρο και μεγάλο διακύβευμα. Κάθε στοιχείο που εμφανίζεται εκεί πρέπει να κερδίζει τη θέση του, εξυπηρετώντας τον επισκέπτη ή προωθώντας τον στόχο της σελίδας.
Ένας καθαρός τίτλος που λέει για τι πρόκειται η σελίδα ή τι παίρνει ο επισκέπτης από αυτήν. Μια υποστηρικτική πρόταση ή υπότιτλος που προσθέτει πλαίσιο ή ακρίβεια. Μια εικόνα που ενισχύει το μήνυμα αντί να διακοσμεί απλώς γύρω του. Ένα call to action που δίνει στον επισκέπτη ένα ξεκάθαρο επόμενο βήμα, αν είναι ήδη πεπεισμένος.
Η πλοήγηση ανήκει above the fold. Οι επισκέπτες περιμένουν να βρουν έναν τρόπο να εξερευνήσουν την υπόλοιπη ιστοσελίδα στην κορυφή της σελίδας και ένα μενού που είναι θαμμένο ή κρυμμένο δημιουργεί αμέσως τριβή. Το άρθρο για το τι είναι η πλοήγηση ιστοσελίδας εξηγεί πώς να σχεδιάσεις μενού που δουλεύουν καλά σε όλες τις συσκευές.
Ό,τι δεν ανήκει above the fold είναι οτιδήποτε πιάνει χώρο χωρίς να συμβάλλει στην κατανόηση ή την απόφαση του επισκέπτη. Μεγάλες διακοσμητικές εικόνες χωρίς πληροφοριακή αξία, banners που περιστρέφονται και καθυστερούν τη φόρτωση ή μπλοκ εισαγωγικού κειμένου που πρέπει να περάσει ο επισκέπτης με scroll πριν φτάσει στο θέμα, όλα σπαταλούν τον πιο πολύτιμο χώρο της σελίδας.
Πώς διαφέρει το above the fold στο κινητό;
Στο κινητό, η περιοχή above the fold είναι σημαντικά μικρότερη απ' ό,τι στον υπολογιστή. Μια οθόνη κινητού σε κάθετη θέση δείχνει περίπου 600 με 800 pixels ύψος. Μια οθόνη υπολογιστή μπορεί να δείχνει 900 με 1200 pixels. Ο ίδιος σχεδιασμός μπορεί να αποκαλύπτει δύο ή τρεις ενότητες above the fold στον υπολογιστή, ενώ στο κινητό δείχνει μόνο έναν τίτλο και μια εικόνα.
Η πρακτική συνέπεια είναι ότι οι επισκέπτες από κινητό παίρνουν την απόφασή τους να μείνουν ή να κάνουν scroll με πολύ λιγότερες πληροφορίες από όσες βλέπουν οι επισκέπτες από υπολογιστή με την πρώτη ματιά. Ό,τι μετράει περισσότερο πρέπει να χωράει σε ένα μικρότερο παράθυρο. Οι ενότητες hero με μεγάλες εικόνες φόντου και ελάχιστο κείμενο είναι συνηθισμένο πρόβλημα: φαίνονται εντυπωσιακές στον υπολογιστή, αλλά γεμίζουν ολόκληρη την οθόνη του κινητού με πολύ λίγο περιεχόμενο πριν αναγκαστεί ο επισκέπτης να κάνει scroll.
Το να δοκιμάζεις το above the fold σε πραγματικό κινητό μετράει, γιατί οι προεπισκοπήσεις στον browser και οι προσομοιώσεις υπολογιστή δεν αναπαριστούν με ακρίβεια όσα βλέπουν οι επισκέπτες από κινητό. Για μια πλήρη λίστα ελέγχου για το κινητό, το άρθρο για το πώς να κάνεις την ιστοσελίδα σου φιλική προς το κινητό εξηγεί τι να ελέγξεις πριν βγεις στον αέρα.
Επηρεάζει το above the fold την ταχύτητα της σελίδας;
Άμεσα. Η περιοχή above the fold είναι το πρώτο πράγμα που αποδίδει ο browser, οπότε κάθε πόρος που καθυστερεί την εμφάνισή της χαλά τον αντιληπτό χρόνο φόρτωσης, ακόμα κι αν η υπόλοιπη σελίδα φορτώνει γρήγορα.
Οι μεγάλες εικόνες hero, οι γραμματοσειρές web που πρέπει να φορτώσουν πριν εμφανιστεί το κείμενο και τα scripts που τρέχουν πριν αποδοθεί η σελίδα σπρώχνουν όλα προς τα κάτω το περιεχόμενο above the fold. Από την πλευρά του επισκέπτη, η σελίδα φορτώνει αργά, ακόμα κι αν ο τεχνικός χρόνος φόρτωσης είναι λογικός. Μια κενή ή μισοφορτωμένη περιοχή above the fold, ενώ η υπόλοιπη σελίδα προλαβαίνει, είναι από τις πιο συνηθισμένες αιτίες υψηλού ποσοστού εγκατάλειψης σε κατά τα άλλα καλοσχεδιασμένες σελίδες.
Η βελτιστοποίηση της εικόνας hero, η προτεραιότητα στη φόρτωση πόρων above the fold και η αναβολή των μη απαραίτητων scripts είναι οι πιο αποτελεσματικές διορθώσεις. Το άρθρο για το τι είναι η ταχύτητα ιστοσελίδας καλύπτει την τεχνική πλευρά της απόδοσης φόρτωσης και τι την επηρεάζει περισσότερο.
Επηρεάζει το above the fold το SEO;
Το περιεχόμενο above the fold είναι ένα σήμα που χρησιμοποιούν οι μηχανές αναζήτησης όταν αξιολογούν την ποιότητα μιας σελίδας. Σελίδες που φορτώνουν βαριά διαφήμιση ή περιεχόμενο χαμηλής ποιότητας above the fold, σπρώχνοντας κάτω το κύριο περιεχόμενο, τιμωρούνται. Αυτό ήταν μια συγκεκριμένη ενημέρωση αλγορίθμου που στόχευε ιστοσελίδες που έθαβαν χρήσιμο περιεχόμενο κάτω από μεγάλα μπλοκ διαφημίσεων.
Πέρα από αυτή τη συγκεκριμένη ποινή, το above the fold επηρεάζει το SEO έμμεσα μέσω σημάτων συμπεριφοράς. Οι επισκέπτες που φτάνουν σε μια σελίδα και φεύγουν αμέσως, επειδή η περιοχή above the fold δεν τους έδωσε λόγο να μείνουν, δημιουργούν υψηλά ποσοστά εγκατάλειψης και χαμηλό χρόνο παραμονής. Με τον καιρό, αυτά τα σήματα δείχνουν στις μηχανές αναζήτησης ότι η σελίδα δεν εξυπηρέτησε την πρόθεση πίσω από την αναζήτηση.
Ο καλός σχεδιασμός above the fold στηρίζει και την καλύτερη δομή τίτλων. Ένας καθαρός τίτλος ορατός above the fold, με λογική δομή σελίδας από κάτω, βοηθά και τους επισκέπτες και τις μηχανές αναζήτησης να καταλάβουν γρήγορα τη σελίδα. Το άρθρο για το τι είναι ο σχεδιασμός ιστοσελίδων εξηγεί πώς οι αποφάσεις διάταξης, όπως η ιεραρχία τίτλων, διαμορφώνουν την εμπειρία του επισκέπτη. Για την πλήρη εικόνα της κατάταξης στις αναζητήσεις, το άρθρο για το τι είναι το SEO καλύπτει τους τεχνικούς παράγοντες και τους παράγοντες περιεχομένου που μετράνε περισσότερο.
Πώς χειρίζεται το WEMASY τον σχεδιασμό above the fold
Τα πρότυπα του δημιουργού ιστοσελίδων του WEMASY φτιάχνονται με στόχο την περιοχή above the fold. Οι ενότητες hero είναι βελτιστοποιημένες για γρήγορη φόρτωση και ο οπτικός editor σου επιτρέπει να δεις πώς εμφανίζεται κάθε ενότητα σε διαφορετικά μεγέθη οθόνης πριν δημοσιεύσεις. Η προεπισκόπηση για κινητό δείχνει ακριβώς τι βλέπουν οι επισκέπτες στο κινητό πριν κάνουν scroll, ώστε να προσαρμόσεις το περιεχόμενο και τη διάταξη χωρίς να μαντεύεις.
Δες τι περιλαμβάνεται στον δημιουργό ιστοσελίδων του WEMASY ή δες τα πακέτα στη σελίδα τιμών.
Συχνές ερωτήσεις
Έχει ακόμα νόημα το above the fold με τη σημερινή συμπεριφορά scroll;
Ναι. Οι επισκέπτες κάνουν scroll πιο εύκολα απ' ό,τι πριν από δέκα χρόνια, αλλά η περιοχή above the fold εξακολουθεί να έχει δυσανάλογα μεγάλο βάρος. Οι επισκέπτες περνούν περισσότερο χρόνο με το περιεχόμενο κοντά στην κορυφή μιας σελίδας, όσο κι αν κάνουν scroll. Στην περιοχή above the fold παίρνεται η απόφαση να μείνουν ή να φύγουν. Το να είναι ξεκάθαρη, γρήγορη και πειστική μετράει σήμερα όσο και πάντα. Με τον δημιουργό ιστοσελίδων του WEMASY, μπορείς να το στήσεις απευθείας στην ιστοσελίδα σου.
Πόσο ψηλή πρέπει να είναι μια ενότητα hero;
Μια ενότητα hero πρέπει να αποκαλύπτει αρκετό περιεχόμενο above the fold ώστε να περνά τον σκοπό της σελίδας, χωρίς να καταναλώνει ολόκληρο το ορατό παράθυρο. Στον υπολογιστή, ένα hero που γεμίζει όλο το ύψος της οθόνης με μόνο έναν τίτλο και μια εικόνα μπορεί να φαίνεται εντυπωσιακό, αλλά καθυστερεί και την πρόσβαση του επισκέπτη στο πραγματικό περιεχόμενο. Μια καλύτερη προσέγγιση είναι ένα hero αρκετά ψηλό για να κάνει δυνατή πρώτη εντύπωση, ενώ δείχνει ακόμα ένα κομμάτι περιεχομένου από κάτω, ώστε να καταλαβαίνουν οι επισκέπτες ότι υπάρχουν κι άλλα να δουν αν κάνουν scroll.
Τι είναι ένα call to action above the fold;
Ένα call to action above the fold είναι ένα κουμπί ή σύνδεσμος που μπαίνει στο πρώτο ορατό τμήμα μιας σελίδας και δίνει στους επισκέπτες που είναι ήδη πεπεισμένοι έναν τρόπο να δράσουν αμέσως χωρίς scroll. Συνηθισμένα παραδείγματα είναι «Ξεκίνα», «Κλείσε μια κλήση» ή «Δες τις τιμές». Δεν είναι έτοιμος να δράσει κάθε επισκέπτης above the fold, γι' αυτό υπάρχει η υπόλοιπη σελίδα, αλλά το να υπάρχει νωρίς μια καθαρή ενέργεια μειώνει την τριβή για όσους είναι έτοιμοι.
Χρειάζεται κάθε σελίδα μια δυνατή περιοχή above the fold;
Ναι, αλλά το τι σημαίνει «δυνατή» αλλάζει ανά τύπο σελίδας. Η αρχική σελίδα above the fold πρέπει να δείχνει ποιος είσαι και τι προσφέρεις. Ένα άρθρο blog above the fold πρέπει να επιβεβαιώνει ότι ο αναγνώστης είναι στο σωστό άρθρο και να του δίνει λόγο να συνεχίσει να διαβάζει. Μια σελίδα προϊόντος above the fold πρέπει να δείχνει καθαρά το προϊόν και να κάνει την τιμή εύκολα προσβάσιμη. Η αρχή είναι η ίδια σε όλους τους τύπους σελίδων: το πρώτο ορατό τμήμα πρέπει να απαντά στην πιο άμεση ερώτηση του επισκέπτη.
Πώς δοκιμάζω τι εμφανίζεται above the fold σε διαφορετικές συσκευές;
Ο πιο ακριβής τρόπος είναι να ελέγξεις τις σελίδες σου σε πραγματικές συσκευές. Χρησιμοποίησε μια οθόνη υπολογιστή, ένα tablet και ένα κινητό σε κάθετη και οριζόντια θέση. Τα εργαλεία προγραμματιστή του browser έχουν λειτουργία προσομοίωσης συσκευής που δίνει μια λογική προσέγγιση, αλλά δεν λαμβάνει υπόψη τις γραμμές εργαλείων, τις γραμμές διευθύνσεων και τις περιοχές ειδοποιήσεων του browser που μειώνουν το ορατό ύψος της οθόνης στα πραγματικά κινητά. Αυτό που φαίνεται εντάξει σε προεπισκόπηση browser έχει συχνά αισθητά διαφορετικό όριο fold σε μια πραγματική συσκευή.