Η αρχική σελίδα δεν είναι γκαλερί ή φυλλάδιο. Είναι μηχανισμός δρομολόγησης. Η μία της δουλειά είναι να φέρει τον σωστό επισκέπτη στο σωστό προϊόν όσο πιο γρήγορα γίνεται. Κάθε απόφαση σχεδιασμού στην αρχική πρέπει να υπηρετεί αυτόν τον στόχο.
Το άρθρο καλύπτει πώς να σχεδιάσεις αρχική σελίδα online καταστήματος που δουλεύει. Τι να βάλεις, τι να αφήσεις έξω, ποια λάθη σκοτώνουν τις μετατροπές και πώς να σκεφτείς τη διάταξη στο κινητό, όπου περιηγούνται οι περισσότεροι αγοραστές σου.
Αν θέλεις πλήρη εικόνα για το ποιες σελίδες χρειάζεται το e-shop σου, ξεκίνα από το ποιες σελίδες χρειάζεται κάθε online κατάστημα.
Σε τι χρησιμεύει πραγματικά η αρχική σελίδα;
Η αρχική σελίδα εξυπηρετεί επισκέπτες που δεν έχουν αποφασίσει ακόμα. Ξέρουν κάτι για την επιχείρησή σου ή σε βρήκαν μέσω αναζήτησης ή social media, αλλά δεν έχουν δεσμευτεί να αγοράσουν. Η αρχική είναι η στιγμή που αποφασίζουν αν θα προχωρήσουν παραπέρα.
Πρέπει να απαντά άμεσα σε τρεις ερωτήσεις. Τι πουλά αυτό το e-shop; Είναι για κάποιον σαν εμένα; Τι πρέπει να κάνω μετά; Αν κάποια από αυτές τις απαντήσεις είναι ασαφής, οι επισκέπτες φεύγουν. Όχι επειδή τα προϊόντα σου είναι κακά, αλλά επειδή η αρχική δεν τους έδωσε λόγο να μείνουν.
Πώς να σχεδιάσεις την ενότητα hero
Το hero είναι το πρώτο που βλέπει ο επισκέπτης. Βρίσκεται πάνω από το σημείο όπου κόβεται η οθόνη, πριν κυλήσει, και κουβαλά το μεγαλύτερο βάρος της πρώτης εντύπωσης.
Ένα δυνατό hero έχει τέσσερα στοιχεία. Έναν τίτλο που ονομάζει με απλή γλώσσα αυτό που πουλάς. Μια σύντομη γραμμή υποστήριξης που προσθέτει πλαίσιο, συχνά ένα βασικό όφελος ή διαφοροποίηση. Μια εικόνα που δείχνει το προϊόν ή το αποτέλεσμα που δημιουργεί. Και ένα μόνο κουμπί call to action που λέει στον επισκέπτη ακριβώς πού να πάει.
Ο τίτλος είναι το πιο σημαντικό κομμάτι. Κράτα τον συγκεκριμένο. Το «Χειροποίητες δερμάτινες τσάντες για καθημερινή χρήση» δουλεύει. Το «Εκεί όπου η τέχνη συναντά τη λειτουργικότητα» δεν δουλεύει. Οι αγοραστές σαρώνουν γρήγορα. Αν ο τίτλος σου θέλει ερμηνεία, τους έχεις ήδη χάσει.
Το κουμπί CTA πρέπει να ονομάζει προορισμό και όχι συναίσθημα. Το «Δες τις τσάντες» ή το «Δες τα νέα προϊόντα» δουλεύει. Το «Ανακάλυψε περισσότερα» ή το «Εξερεύνησε τώρα» δεν δουλεύει. Δώσε στον επισκέπτη κατεύθυνση και όχι πρόταση.
Η εικόνα του hero πρέπει να δείχνει καθαρά το προϊόν. Οι εικόνες lifestyle δουλεύουν καλά όταν το προϊόν χρειάζεται πλαίσιο για να έχει νόημα, όπως τα ρούχα ή τα είδη σπιτιού. Οι εικόνες μόνο του προϊόντος δουλεύουν καλύτερα όταν η σαφήνεια μετράει περισσότερο από τη φιλοδοξία, όπως στα εργαλεία ή τα ηλεκτρονικά. Χρησιμοποίησε εικόνες υψηλής ποιότητας. Ένα θολό ή κακά φωτισμένο hero υπονομεύει όλα τα υπόλοιπα.
Τι να δείξεις κάτω από το hero
Όταν ο επισκέπτης κυλήσει πέρα από το hero, ψάχνει πιο συγκεκριμένους λόγους να μείνει. Αυτή η ενότητα της αρχικής πρέπει να φέρνει στην επιφάνεια προϊόντα ή κατηγορίες που ταιριάζουν σε αυτό που είναι πιο πιθανό να θέλουν οι αγοραστές σου.
Μην προσπαθείς να δείξεις τα πάντα. Διάλεξε τα best seller σου, τα προϊόντα με το μεγαλύτερο περιθώριο κέρδους ή την κατηγορία στην οποία καταλήγουν οι περισσότεροι αγοραστές σου. Τρία με έξι προτεινόμενα προϊόντα είναι λογικό εύρος. Περισσότερα αρχίζουν να φαίνονται φορτωμένα και δημιουργούν παράλυση απόφασης.
Τα μπλοκ κατηγοριών δουλεύουν καλά για e-shop με μεγάλη γκάμα προϊόντων. Αντί για μεμονωμένα προϊόντα, δείξε τις τρεις ή τέσσερις κορυφαίες κατηγορίες με καθαρή εικόνα και ετικέτα για κάθε μία. Άφησε τους αγοραστές να επιλέξουν μόνοι τους το σωστό τμήμα του e-shop.
Η ενότητα προτεινόμενων πρέπει επίσης να είναι δυναμική. Εναλλάσσε εποχιακά προϊόντα, προϊόντα σε προσφορά ή νέες αφίξεις. Μια αρχική που δεν αλλάζει ποτέ δεν δίνει στους επισκέπτες που επιστρέφουν λόγο να κυλήσουν.
Πώς να χρησιμοποιήσεις κοινωνική απόδειξη στην αρχική σελίδα
Οι αγοραστές εμπιστεύονται άλλους αγοραστές περισσότερο απ' ό,τι τα καταστήματα. Η κοινωνική απόδειξη στην αρχική χτίζει αξιοπιστία πριν ο επισκέπτης φτάσει σε σελίδα προϊόντος.
Οι πιο αποτελεσματικές μορφές κοινωνικής απόδειξης στην αρχική είναι σύντομες κριτικές πελατών ή βαθμολογίες με αστέρια, ένας αριθμός πελατών ή αποστελλόμενων παραγγελιών, αναφορές στον Τύπο ή λογότυπα μέσων και σήματα εμπιστοσύνης τρίτων, όπως εικονίδια ασφαλούς πληρωμής ή αναγνωρισμένες σφραγίδες πιστοποίησης.
Κράτα το συνοπτικό. Μία ή δύο δυνατές μαρτυρίες είναι πιο αποτελεσματικές από έναν τοίχο κριτικών πέντε αστέρων. Ένα μόνο λογότυπο από αναγνωρίσιμο μέσο κάνει περισσότερα από μια λίστα δέκα άγνωστων ονομάτων. Διάλεξε την απόδειξη που θα σημαίνει τα περισσότερα για τον αγοραστή που είναι πιο δύσπιστος για το να αγοράσει από εσένα για πρώτη φορά.
Να βάλεις ενότητα με την ιστορία της επιχείρησης;
Μια σύντομη ενότητα με την ιστορία της επιχείρησης στην αρχική είναι προαιρετική, αλλά βοηθά σε ορισμένες περιπτώσεις. Δουλεύει καλύτερα όταν η ιστορία του ιδρυτή είναι μέρος του λόγου που ένας αγοραστής θα διάλεγε αυτή την επιχείρηση αντί για μια μεγαλύτερη ανταγωνίστρια. Τα χειροποίητα προϊόντα, η ηθική προμήθεια, οι επιχειρήσεις που βασίζονται στην κοινότητα και τα προϊόντα με ιδρυτή στην πρώτη γραμμή ωφελούνται όλα από μια σύντομη ανθρώπινη στιγμή στην αρχική.
Αν βάλεις μία, κράτα την σύντομη. Δύο ή τρεις προτάσεις και ένας σύνδεσμος προς την πλήρη σελίδα «Σχετικά με εμάς» αρκούν. Μην την τοποθετείς πάνω από το σημείο όπου κόβεται η οθόνη ή πάνω από τα προτεινόμενα προϊόντα. Η ιστορία προσθέτει ζεστασιά, αλλά τα προϊόντα οδηγούν στις αποφάσεις.
Για e-shop όπου το προϊόν στέκεται μόνο του, παράλειψε την ενότητα ιστορίας. Μια σελίδα που πουλά είδη μαζικής κατανάλωσης δεν χρειάζεται ιστορία προέλευσης. Χρησιμοποίησε τον χώρο για περισσότερη έκθεση προϊόντων.
Τι δεν χρειάζεται η αρχική σελίδα
Η φασαρία στην αρχική είναι εξίσου βλαβερή με μια ενότητα που λείπει. Κάθε στοιχείο που δεν κάνει δουλειά αφαιρεί προσοχή από κάτι που κάνει.
Συνηθισμένα λάθη στην αρχική είναι πολλά call to action που ανταγωνίζονται στο ίδιο επίπεδο, βίντεο ή animations που ξεκινούν μόνα τους και καθυστερούν τη σελίδα, μεγάλα μπλοκ κειμένου που κανείς δεν διαβάζει, μενού πλοήγησης με περισσότερα από έξι ή επτά στοιχεία και pop-ups που εμφανίζονται πριν ο επισκέπτης προλάβει να δει οτιδήποτε.
Κάθε επιπλέον επιλογή που επιβάλλεις σε έναν επισκέπτη είναι ένα μικρό κόστος τριβής. Η αρχική πρέπει να φαίνεται καθαρή και όχι πολυάσχολη. Αν δεν μπορείς να αποφασίσεις ανάμεσα σε δύο στοιχεία, αφαίρεσε αυτό που δεν συνδέεται άμεσα με το να φτάσει ο επισκέπτης σε ένα προϊόν.
Σχεδιασμός αρχικής σελίδας για κινητό
Πάνω από τη μισή επισκεψιμότητα του e-commerce έρχεται από κινητό. Ο σχεδιασμός της αρχικής σου πρέπει να χτιστεί πρώτα για κινητό και όχι να προσαρμοστεί από τον υπολογιστή εκ των υστέρων.
Στο κινητό, ο τίτλος του hero πρέπει να είναι αρκετά σύντομος για να διαβάζεται σε δύο γραμμές. Το κουμπί CTA πρέπει να είναι αρκετά μεγάλο για να πατιέται εύκολα. Οι εικόνες προϊόντων πρέπει να στοιβάζονται καθαρά σε μία στήλη. Η πλοήγηση πρέπει να συμπτύσσεται σε μενού που δεν κυριαρχεί στην οθόνη.
Δοκίμασε κάθε αλλαγή της αρχικής σε τηλέφωνο πριν τη δημοσιεύσεις. Αυτό που φαίνεται καθαρό σε οθόνη υπολογιστή μπορεί να γίνει μπερδεμένη κύλιση σε μικρή οθόνη. Η εμπειρία του αγοραστή στο κινητό είναι ο βασικός περιορισμός του σχεδιασμού σου και όχι εκ των υστέρων σκέψη.
Η σαφήνεια στην αποστολή μετράει και στο κινητό. Οι αγοραστές στο τηλέφωνο είναι συχνά κοντά σε απόφαση αγοράς. Ένα ορατό banner με τα όρια δωρεάν αποστολής ή την εκτιμώμενη παράδοση στην αρχική μπορεί να μετατρέψει μια περιήγηση σε αγορά. Για περισσότερα σχετικά με το πώς θα στήσεις την αποστολή στο e-shop σου, δες το πώς να στήσεις την αποστολή για το online κατάστημά σου.
Πώς το WEMASY στηρίζει τον σχεδιασμό της αρχικής σελίδας
Στο σύστημα e-commerce του WEMASY φτιάχνεις δικές σου σελίδες στην ιστοσελίδα σου.
Δες τι περιλαμβάνει κάθε πακέτο στη σελίδα τιμών του WEMASY.
Συχνές ερωτήσεις
Πόσα CTA πρέπει να έχει μια αρχική σελίδα;
Ένα κύριο CTA πάνω από το σημείο όπου κόβεται η οθόνη και μετά δευτερεύοντα CTA πιο κάτω στη σελίδα, συνδεδεμένα με συγκεκριμένες ενότητες. Το κύριο CTA πρέπει να είναι η πιο σημαντική ενέργεια που θέλεις να κάνει ένας επισκέπτης για πρώτη φορά, συνήθως το «Αγόρασε τώρα» ή ένας σύνδεσμος σε συγκεκριμένη κατηγορία. Αν υπάρχουν ανταγωνιστικά κύρια CTA με το ίδιο οπτικό βάρος, διασπάται η προσοχή και μειώνονται τα κλικ και στα δύο. Ο δημιουργός ιστοσελίδων του WEMASY σου επιτρέπει να φτιάξεις δικές σου σελίδες στην ιστοσελίδα σου.
Να δείχνω τιμές στην αρχική σελίδα;
Όχι απαραίτητα στην ίδια την αρχική, αλλά είναι χρήσιμο να δείχνεις τιμές στις κάρτες των προτεινόμενων προϊόντων. Οι αγοραστές σαρώνουν εύρη τιμών για να δουν αν το e-shop χωράει στον προϋπολογισμό τους. Αν κρύψεις τις τιμές μέχρι τη σελίδα προϊόντος, προσθέτεις τριβή και μπορεί να φανεί ότι κάτι κρύβεις. Αν τα προϊόντα σου είναι premium, μια αρχική τιμή «από» δημιουργεί θετικές προσδοκίες αντί για έκπληξη.
Κάθε πότε πρέπει να ενημερώνω την αρχική σελίδα;
Ενημέρωσε τα προτεινόμενα προϊόντα και τις εποχιακές ενότητες όποτε έχεις νέες αφίξεις, τρέχει προσφορά ή αλλάζει εποχικά αυτό που ψάχνουν οι αγοραστές. Το hero μπορεί να μένει σταθερό για περισσότερο, αλλά ανανέωσέ το όταν αλλάζει η κύρια προσφορά ή η τοποθέτησή σου. Μια αρχική που φαίνεται ίδια για έναν ολόκληρο χρόνο δείχνει e-shop που δεν είναι ενεργό.
Επηρεάζει η ταχύτητα φόρτωσης της αρχικής τις πωλήσεις;
Ναι. Μια αρχική που χρειάζεται πάνω από τρία δευτερόλεπτα για να φορτώσει στο κινητό χάνει σημαντικό ποσοστό επισκεπτών πριν δουν οτιδήποτε. Οι μεγάλες μη συμπιεσμένες εικόνες είναι η πιο συνηθισμένη αιτία. Συμπίεσε τις εικόνες πριν το ανέβασμα, απόφυγε βίντεο που ξεκινά μόνο του στο hero και περιόρισε τα scripts τρίτων. Η ταχύτητα είναι απόφαση σχεδιασμού της αρχικής και όχι μόνο τεχνική.
Πρέπει η αρχική να συνδέει με κάθε κατηγορία προϊόντων;
Όχι απαραίτητα. Σύνδεσε με τις κατηγορίες που θα θέλουν οι περισσότεροι αγοραστές σου. Ένα μενού πλοήγησης μπορεί να κουβαλά την πλήρη λίστα κατηγοριών. Το κυρίως σώμα της αρχικής πρέπει να φέρνει στην επιφάνεια τις κατηγορίες που φέρνουν τις περισσότερες μετατροπές ή που θέλεις να προωθήσεις. Αν συνδέσεις με τα πάντα, δημιουργείς οπτικό θόρυβο και αποδυναμώνεις τις σελίδες που μετράνε περισσότερο.
Πού να μπουν τα σήματα εμπιστοσύνης στην αρχική σελίδα;
Κοντά στο hero, δίπλα στο CTA ή σε ειδική γραμμή εμπιστοσύνης ανάμεσα στο hero και στα προτεινόμενα προϊόντα. Οι αγοραστές είναι πιο πιθανό να ψάξουν σήματα εμπιστοσύνης τη στιγμή που σκέφτονται να πατήσουν ένα CTA. Αν τα βάλεις μόνο στο υποσέλιδο, τα βλέπουν μόνο όσοι έχουν ήδη κυλήσει ως το τέλος, που είναι πολύ αργά για τους περισσότερους επισκέπτες που έρχονται για πρώτη φορά.