Πώς να σχεδιάσεις μια αρχική σελίδα που δουλεύει

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

Πρόχειρο

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

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

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

Τι χρειάζεται να κάνει μια αρχική σελίδα;

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

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

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

Τι να βάλεις στο πάνω μέρος της αρχικής (above the fold);

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

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

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

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

Πώς δομείς το περιεχόμενο κάτω από το above the fold;

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

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

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

Τι κάνει το κείμενο της αρχικής να δουλεύει;

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

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

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

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

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

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

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

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

Επηρεάζει ο σχεδιασμός της αρχικής το SEO;

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

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

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

Πώς χειρίζεται το WEMASY τον σχεδιασμό της αρχικής σελίδας

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

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

Συχνές ερωτήσεις

Πόσο μεγάλη πρέπει να είναι μια αρχική σελίδα;

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

Πόσα κουμπιά ενέργειας πρέπει να έχει μια αρχική σελίδα;

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

Πρέπει μια αρχική σελίδα να έχει βίντεο;

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

Ποιο είναι το μεγαλύτερο λάθος που κάνουν οι επιχειρήσεις στην αρχική τους;

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

Κάθε πότε πρέπει να ανασχεδιάζεται η αρχική σελίδα;

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

Βάλ’ το αμέσως σε εφαρμογή
στη δική σου ιστοσελίδα.

Ξεκίνα δωρεάν με το WEMASY και φτιάξε τη σελίδα σου σε λίγα λεπτά.