Εάν συμμετάσχετε μαζί μας για το άρθρο UX νωρίτερα αυτό το μήνα, θα γνωρίζετε ότι συζητήσαμε τα 25 βασικά στοιχεία σχεδίασης UX για τον ιστότοπό σας.

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

Ο καλός σχεδιασμός UX προκαλεί ντοπαμίνη και ευτυχία στους επισκέπτες σας. Και αυτό τους κάνει πιο πιθανό να σας εμπιστευτούν. Βασικά, τους καθιστά πιο πιθανό να αγοράσουν από εσάς.

Αφού διαβάσετε τα 25 βασικά στοιχεία στο τελευταίο μας σχέδιο σχεδίασης UX, ας ρίξουμε μια ματιά στον τρόπο λειτουργίας του σε δράση. Συγκεκριμένα, εξετάζουμε τη σχεδίαση UX ιστότοπων ηλεκτρονικού εμπορίου.

Πώς αυτοί οι ιστότοποι χρησιμοποιούν έξυπνα κόλπα σχεδιασμού UX για να ενθαρρύνουν τους επισκέπτες τους να αγοράσουν?

1. Άσος

Χρησιμοποιώ το παράδειγμα του Asos πολύ, αλλά υπάρχει ένας καλός λόγος για αυτό. Ο σχεδιασμός του UX είναι εξαιρετικός.

Όλα ξεκινούν με μια πρόταση αξίας νοκ-άουτ. Υπέροχη εικόνα, απλή επεξήγηση, εγγύηση «δωρεάν παράδοσης» και προφανείς παροτρύνσεις για δράση που σας οδηγούν στην ενότητα ανδρών ή γυναικών.

asos2

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

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

Άσος

2. Ζάρα

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

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

Ζάρα

3. Ανω

Ο Abof (All About Fashion) χρησιμοποιεί ένα εξαιρετικά έξυπνο τέχνασμα UX στον ιστότοπό του. Επισκεφτείτε την αρχική σελίδα και δεν μοιάζει με έναν παραδοσιακό ιστότοπο ηλεκτρονικού εμπορίου. Αντ ‘αυτού, μοιάζει περισσότερο με ένα blog. Είναι γεμάτο ζουμερό περιεχόμενο που εμπνέει το κοινό του.

Ανω

Μέσα στις ιστορίες και τα άρθρα τους, στη συνέχεια επισημαίνουν τα ρούχα σε μια εξέχουσα ενότητα που ονομάζεται «Αγοράστε την ιστορία». Στο προηγούμενο άρθρο μας UX, μιλήσαμε για τη σημασία της δημιουργίας σχέσης με το κοινό σας. Το Abof το κάνει τέλεια με σχετικές ιστορίες και περιεχόμενο.

παραπάνω 2

Μόνο όταν ο πελάτης εμπνευστεί προσπαθεί να πουλήσει κάτι.

Στη σελίδα των προϊόντων τους, έχουν χρήσιμες σημειώσεις «συμβουλές στυλ», οι οποίες είναι τέλεια παραδείγματα «μικρο-αλληλεπιδράσεων» – μικρά ψήγματα που προσεγγίζουν και προσελκύουν το κοινό σας.

παραπάνω 3

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

4. Berghaus

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

Berghaus

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

Το μόνο μειονέκτημα; Μια ισχυρότερη παρότρυνση για δράση θα σφραγίσει πραγματικά τη συμφωνία εδώ.

5. Μήλο

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

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

Στιγμιότυπο οθόνης 2016-07-28 στις 8.43.00 π.μ.

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

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

μήλο 2

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

6. Bellroy

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

Bellroy 3

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

Bellroy 4

7. Νοικιάστε τον διάδρομο

Το Rent The Runway έχει μια αρκετά μοναδική ιδέα: δανείζετε ένα φόρεμα ή μια στολή για λίγες μέρες, αντί να το αγοράζετε. Αυτό είναι ιδανικό για γάμους ή εκδηλώσεις όπου δεν θέλετε να κάνετε μια στολή που μπορεί να μην φοράτε ξανά.

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

ενοικίαση διαδρόμου

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

ενοικίαση διαδρόμου 2

Τόσο απλό, αλλά τόσο καθησυχαστικό.

8. Amazon

Η Amazon είναι ο μεγαλύτερος ιστότοπος ηλεκτρονικού εμπορίου στον κόσμο και ειλικρινά ένας από τους καλύτερους. Μπορείτε να επιλέξετε οποιοδήποτε από τα χαρακτηριστικά τους ως παράδειγμα σχεδιασμού UX.

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

αμαζόνα

Εξακολουθεί να είναι το καλύτερο παράδειγμα αποτελεσματικότητας check-out στον ιστό. Στον πυρήνα του ηλεκτρονικού εμπορίου, ο σχεδιασμός του UX είναι το καρότσι και η διαδικασία check-out. Όσο πιο ομαλή τόσο το καλύτερο. Και δεν γίνεται πιο ομαλή από την παραγγελία με ένα κλικ!

9. Βόσκω

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

αμυχή

Αυτό είναι ένα απλό masterclass στο σχεδιασμό UX.

10. TopShop

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

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

Topshop 2

Ακόμα πιο δροσερό, κάθε προϊόν μεταβαίνει σε μια εικόνα του μοντέλου που τα φοράει όταν τοποθετείτε το ποντίκι σας. Ενθαρρύνει την αλληλεπίδραση και δίνει στους πελάτες μια καλύτερη ματιά στα αντικείμενα.

11. Διαμαρτυρία

Η διαμαρτυρία μπορεί να έχει τη μεγαλύτερη, πιο λιτή πλοήγηση στον Ιστό.

Π

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

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

12. Νέα εμφάνιση

Η νέα εμφάνιση παίρνει μια θέση στη λίστα για το καινοτόμο καλάθι τους. Κάθεται στη γραμμή πλοήγησής τους ανά πάσα στιγμή με έντονη ένδειξη για να σας υπενθυμίσει ότι είναι εκεί.

Νέα εμφάνιση 2

Όταν κάνετε κλικ σε αυτό, δεν σας μεταφέρει σε άλλη σελίδα. Αντ ‘αυτού, παίρνετε ένα συρόμενο πλαίσιο που κινείται από το πλάι για να σας δείξει τι υπάρχει στην τσάντα σας. Αυτό σημαίνει ότι οι πελάτες δεν χάνονται ποτέ και μπορούν εύκολα να κάνουν checkout όποτε θέλουν.

Νέα εμφάνιση

13. Μολύβι, από 53

Εάν πρόκειται να πουλήσετε μια γραφίδα σε σχεδόν 60 $, θα πρέπει να την πουλήσετε πραγματικά! Ευτυχώς, το “Pencil”, από το 53 κάνει εξαιρετική δουλειά, χρησιμοποιώντας διάφορα κόλπα σχεδιασμού UX.

Χρησιμοποιούν μια μακρά, παράλληλη σελίδα κύλισης για να εξηγήσουν όλες τις δυνατότητες και να σας δείξουν τι ακριβώς μπορείτε να κάνετε με αυτό.

μολύβι 2

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

Μολύβι

14. Αγρόκτημα

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

αγρόκτημα

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

15. Sid Mashburn

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

εικονίδια

16. Αργά ρολόγια

Αυτό είναι ένα ρολόι με ένα μόνο χέρι. Είναι μια πολύ μοναδική ιδέα, οπότε χρειάζεται κάποια εξήγηση! Το Slow Watches το κάνει πολύ καλά με ένα βίντεο εξήγησης πλήρους οθόνης.

αργά ρολόγια

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

17. Firebox

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

εικόνες

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

Δεδομένου ότι ειδικεύονται στα δώρα, έχουν επίσης ένα «εύρημα δώρων» στο nav bar τους, έναν φανταστικό τρόπο να περιορίσουν τις επιλογές.

18. Lazy Oaf

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

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

τεμπέλης

Κάντε κλικ στις εικόνες και λαμβάνετε ένα πλαίσιο «γρήγορης αγοράς» για να επιλέξετε καθένα από τα τρία αντικείμενα που εμφανίζονται. Είναι ένας πιο παλιός και συναρπαστικός τρόπος για ψώνια.

Τι δεν πρέπει να κάνετε!

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

1. Σπίτι του Fraser

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

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

Ώρα του Fraser

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

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

2. Wal Mart

Η Wal Mart έχει μια δύσκολη πρόκληση. Πωλούν σχεδόν τα πάντα, οπότε πώς θα το κατηγοριοποιήσετε και θα το κάνετε απλό; Δεν είμαι σίγουρος … αλλά όχι έτσι …

wall mart

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

Υπάρχουν απλά πάρα πολλές πληροφορίες εδώ. Όταν παρουσιάζετε στους χρήστες σας πάρα πολλές επιλογές, συχνά πανικοβάλλονται και φεύγουν.

3. Ray-Ban

Αυτή είναι μια ελαφρώς μέση επιλογή, επειδή το μεγαλύτερο μέρος του ιστότοπου της Ray-Ban είναι πολύ φιλικό προς τον χρήστη. Στην πραγματικότητα, έχει έναν τόνο δροσερών χαρακτηριστικών.

Ωστόσο, κάνουν κάτι που κάνουν πολλές ιστοσελίδες ηλεκτρονικού εμπορίου που ενοχλούν πραγματικά τους πελάτες. Αυτό:

απαγόρευση ακτίνων

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

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

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

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

Η εξαιρετική σχεδίαση UX αφορά τα μικρά τσιμπήματα που διευκολύνουν τους πελάτες σας. Αυτές οι 18 ιστοσελίδες το κάνουν τέλεια.

Ποιες δυνατότητες θα χρησιμοποιείτε στον δικό σας ιστότοπο?

Kim Martin
Kim Martin Administrator
Sorry! The Author has not filled his profile.
follow me