Σχεδιασμός UI ηλεκτρονικού εμπορίου: (6 εφαρμόσιμες τακτικές)

Εισαγωγή

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

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

Βεβαιωθείτε ότι η πρωταρχική φωτογραφία προϊόντος είναι ελκυστική

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

Ξεκινήστε εξετάζοντας όλα όσα γνωρίζετε για το κοινό-στόχο σας. Τι τους αρέσει; Γιατί τους αρέσουν τα προϊόντα σας; Τι τους αρέσει στα προϊόντα σας; Πώς μπορείτε να βάλετε αυτά τα χαρακτηριστικά στο επίκεντρο;

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

Ιδανικά, θα δοκιμάσετε A/B διάφορες παραλλαγές σχεδιασμού. Μερικές φορές, οι μικρότερες αλλαγές μπορούν να κάνουν τη μεγαλύτερη διαφορά.

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

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

Πηγή: mamasandpapas.com

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

Πηγή: greenhouseemporium.com

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

Βεβαιωθείτε ότι τα φίλτρα δεν είναι πολύ ενοχλητικά

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

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

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

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

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

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

Πηγή: Πηγή: Ovaeda.com

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

Εμφάνιση σύντομων περιγραφών προϊόντων στο Hover

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

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

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

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

_Πηγή: Πηγή: Bariatricfusion.com _

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

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

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

Ρίξτε κάποια κοινωνική απόδειξη

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

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

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

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

Πηγή: sephora.com

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

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

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

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

Πηγή: vinylstatus.com

Εμφάνιση πολλαπλών προβολών προϊόντων

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

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

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

Πηγή:hm.com

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

Πηγή:simplybeach.com

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

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

Εμφάνιση των στοιχείων που είδατε πρόσφατα

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

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

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

Πηγή: adidas.com

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

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

Ανακεφαλαιώνοντας

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

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