10 άκρες για να σχεδιάσετε χρήσιμα καροτσάκια
Με αυτό κατά νου, είναι όλο και πιο σημαντικό να δοθεί προσοχή στη χρησιμότητα των ιστοσελίδων ηλεκτρονικού εμπορίου .
Όταν οι πελάτες θέλουν να αγοράσουν ένα προϊόν, θέλουν η διαδικασία να είναι γρήγορη και εύκολη, χωρίς καμία ταλαιπωρία.
Ακολουθούν 10 συμβουλές για να σας βοηθήσουμε να δημιουργήσετε καταστήματα ηλεκτρονικού εμπορίου και καροτσάκια αγορών .
1. Πλήρης σελίδα και μίνι καροτσάκια
Τα καρότσια αγορών έρχονται συχνά σε δύο μορφές, ένα πλήρως λειτουργικό καλάθι που περιέχεται σε μια δική του σελίδα και ένα καλάθι αγορών "μίνι", συνήθως τοποθετημένο στην πλαϊνή μπάρα ή πάνω από την πτυχή της σελίδας. Η καλύτερη πρακτική είναι να συμπεριληφθούν και τα δύο .
Τα μικρά καροτσάκια δείχνουν πληροφορίες σε μια μικρή περιοχή που δεν απομακρύνεται από την υπόλοιπη διάταξη. Εδώ είναι ένα εξαιρετικό παράδειγμα ενός χρήσιμου καλαθιού μίνι ψώνια.
Όταν επιλέγεται ένα προϊόν, το στοιχείο εμφανίζεται αμέσως στο μίνι καλάθι. Αφού συνεχίσετε να ψωνίζετε, οι λεπτομέρειες ελαχιστοποιούνται και εμφανίζεται μόνο ο αριθμός των στοιχείων και η συνολική τιμή. Επίσης, υπάρχει ένας σύνδεσμος από το μίνι καλάθι για να δείτε το καλάθι αγορών.
Με το πλήρες καλάθι σελίδας μπορείτε να παρέχετε περισσότερες πληροφορίες και περισσότερες επιλογές από ένα καροτσάκι μίνι. Για παράδειγμα, πληροφορίες όπως τα στοιχεία του προϊόντος, η αφαίρεση / επεξεργασία στοιχείων, οι τιμές φόρου και οι επιλογές αποστολής μπορούν να συμπεριληφθούν σε ένα καλάθι αγορών πλήρους σελίδας. Το παρακάτω παράδειγμα καλαθιού πλήρους σελίδας εμφανίζει επίσης ένα μίνι καλάθι στην επάνω δεξιά γωνία.
2. Checkout: Βήμα-βήμα ή μία σελίδα
Χρησιμοποιώντας μια μέθοδο βήμα προς βήμα , η διαδικασία πληρωμής είναι εύκολη για τον πελάτη να ακολουθήσει. Ρίξτε μια ματιά στη σελίδα ελέγχου Apple.com παρακάτω. Η διαδικασία πληρωμής πραγματοποιείται σε τέσσερα διαφορετικά βήματα: Σύνδεση, Χρέωση και Αποστολή, Πληρωμή και, τέλος, Επαλήθευση / Επεξεργασία.
Αυτή είναι μια καλά δομημένη διαδικασία και σίγουρα θα πρέπει να εξετάσετε το ενδεχόμενο να χρησιμοποιήσετε κάτι παρόμοιο με αυτό όταν σχεδιάζετε βήμα-βήμα checkouts.
Εκτός από μια διαδικασία βήμα προς βήμα, μια άλλη επιλογή είναι να συμπεριλάβετε το καλάθι αγορών, τις προσωπικές πληροφορίες και τις πληροφορίες αποστολής / χρέωσης σε μία σελίδα.
Αυτό μπορεί να λειτουργήσει ωραία αν γίνει με μια καλή διάταξη. Ο ακόλουθος ιστότοπος χρησιμοποιεί μια καλή διαδικασία εξαργύρωσης μιας σελίδας. Υπάρχει ένα τραπέζι στην κορυφή που περιέχει το καλάθι, με τις παρακάτω φόρμες πληροφοριών αγοράς.
3. Σύνδεση από μίνι καλάθι στο πλήρες καλάθι με ένα εικονίδιο
Κατά την κατασκευή ενός καλαθιού αγορών, υπάρχουν λεπτές λειτουργίες που επηρεάζουν την εμπειρία του πελάτη. Κάνοντας κλικ στο μίνι καλάθι θα πρέπει να συνδεθεί με το πλήρες καλάθι και ένα εικονίδιο θα πρέπει να εμφανίζεται δίπλα στο μίνι καλάθι για να τραβήξει την προσοχή του πελάτη στο μίνι καλάθι και αυτόν τον σύνδεσμο.
Ο ακόλουθος ιστότοπος είναι ένα τέλειο παράδειγμα αυτού. Αυτά τα κουμπιά είναι σε ξένη γλώσσα, αλλά το εικονίδιο καλαθιού αγορών μπορεί εύκολα να αναγνωριστεί από οποιονδήποτε.
4. Κάντε τα κουμπιά checkout / add to cart προφανή
Όταν σχεδιάζετε ένα ηλεκτρονικό εμπόριο και ένα καλάθι αγορών, είναι σημαντικό να συμπεριλάβετε εύκολα προσβάσιμους συνδέσμους για να καθοδηγήσετε τον πελάτη μέσω της διαδικασίας πληρωμής. Είναι καλύτερο να χρησιμοποιείτε μεγάλα προφανή κουμπιά . Βεβαιωθείτε ότι τα κουμπιά περιέχουν ευανάγνωστο και κατανοητό κείμενο, όπως 'Προσθήκη στο καλάθι' ή 'Συνέχιση πληρωμής'.
Τα παρακάτω κουμπιά είναι καλά σχεδιασμένα και τοποθετημένα απευθείας κάτω από τις πληροφορίες κάθε προϊόντος. Εάν ο πελάτης δεν μπορεί να βρει το κουμπί checkout, δεν μπορεί να αγοράσει το προϊόν σας!
5. Χρησιμοποιήστε μια διάταξη με βάση το τραπέζι που μπορεί να διαβαστεί
Όταν σχεδιάζετε ένα πλήρες καλάθι αγορών, είναι πάντα καλύτερο να χρησιμοποιήσετε μια δομή με βάση το τραπέζι. Η διάταξη πρέπει να εμφανίζει αποτελεσματικά τις πληροφορίες χωρίς διακοπή. Χρησιμοποιήστε τυπικές γραμματοσειρές και αποφύγετε τη χρήση πολύπλοκων φόντων .
Πάντα σιγουρευτείτε ότι χρησιμοποιείτε ισχυρά περιγράμματα για να διαχωρίζετε κελιά, αλλά μην στυλίζετε τα σύνορα. Οι πληροφορίες σε ένα τραπέζι του καλαθιού αγορών θα πρέπει να είναι εύκολα αντιληπτές χωρίς να αποσπάται η προσοχή από άλλα στοιχεία ή το σύνθετο στυλ.
Αυτό είναι ένα πολύ καθαρό καλάθι. Ο πίνακας είναι ευανάγνωστος και περιέχει όλα τα απαραίτητα στοιχεία. Το πιο σημαντικό, σημειώστε την εικόνα. Η εικόνα του προϊόντος δίνει στον πελάτη μια καλή εικόνα του τι αγοράζει , γεγονός που μπορεί να βοηθήσει τους πελάτες να επιβεβαιώσουν ότι αγοράζουν πράγματι το προϊόν που προορίζονται.
6. Σύνδεσμος "Συνέχιση αγορών"
Μια ακόμη δυνατότητα είναι η σύνδεση "Συνέχιση αγορών" . Όταν κάνετε κλικ, ο σύνδεσμος πρέπει να φέρει τον πελάτη πίσω στο κατάστημα και τον κατάλογο. Αυτό γενικά τοποθετείται κάτω από τον πίνακα του πλήρους καλαθιού αγορών, όπου ο πελάτης μπορεί εύκολα να το βρει.
Το παρακάτω παράδειγμα δείχνει τους συνδέσμους "Συνέχιση αγορών" και "Μετάβαση στο Checkout". Παρατηρήστε πόσο εύκολο είναι να βρείτε αυτά.
7. Αποφύγετε πάρα πολλά πεδία
Δεν υπάρχει τίποτα πιο ενοχλητικό για τον μέσο καταναλωτή από το να χρειάζεται να συμπληρώσετε ένα άχρηστο ποσό πεδίων εισόδου σε μια φόρμα. Θέλετε τη διαδικασία πληρωμής να είναι όσο το δυνατόν πιο εύκολη, γιατί αν ο πελάτης δεν το βρει άνετο, πιθανότατα δεν θα αγοράσει ξανά από τον ιστότοπο.
Διατηρήστε στο ελάχιστο τον αριθμό των πεδίων εισαγωγής , τοποθετήστε παρόμοια πεδία εισόδου σε ομάδες και δώστε κεφαλίδες για κάθε τμήμα. Μια κατάλληλη ποσότητα λευκού χώρου θα συμβάλει επίσης στη βελτίωση της οργάνωσης της φόρμας.
Η παρακάτω φόρμα είναι ελάχιστη και περιέχει ένα μικρό αριθμό πεδίων εισαγωγής.
8. Παρέχετε πολλά στοιχεία βοήθειας
Υπάρχουν πολλά μέρη που βοηθούν τα στοιχεία να συμπεριληφθούν στο καλάθι αγορών και στη διαδικασία ολοκλήρωσης της αγοράς.
Στο καλάθι αγορών, συμπεριλάβετε σύντομες συμβουλές για τον καλύτερο τρόπο χρήσης των λειτουργιών του καλαθιού και εξηγήστε τη διαδικασία πληρωμής. Οι ετικέτες στο καλάθι και στη φόρμα πληρωμής μπορούν να εξηγηθούν με τη χρήση εργαλείων .
Στη σελίδα πληρωμής μπορείτε να συμπεριλάβετε δείγμα κειμένου ως προς το τι πρέπει να συμπεριλαμβάνεται σε κάθε πεδίο εισαγωγής καθώς και παραδείγματα συγκεκριμένων πληροφοριών χρέωσης, όπως μια εικόνα που δείχνει πού βρίσκεται ο αριθμός CVD στο πίσω μέρος μιας πιστωτικής κάρτας.
Στη παρακάτω φόρμα, τα πεδία εισαγωγής έχουν επεξηγηματικό κείμενο δείγματος και η μεσαία στήλη περιλαμβάνει πρόσθετες χρήσιμες πληροφορίες.
9. Δώστε Visual Support
Η οπτική υποστήριξη μπορεί να είναι οτιδήποτε από διαγράμματα έως απλά εικονίδια. Μια εικόνα που δείχνει την τοποθεσία ενός αριθμού λογαριασμού σε μια πιστωτική κάρτα βοηθά τους πελάτες μέσω της διαδικασίας εισαγωγής των στοιχείων χρέωσής τους. Τα εικονίδια που υποστηρίζουν κείμενο είναι χρήσιμα για τη διευκόλυνση της σάρωσης της φόρμας.
Η ακόλουθη εικόνα δείχνει ένα πολύ βολικό καλάθι με κλικ και σύρετε . Η εικόνα του εικονιδίου καλαθιού λέει στους πελάτες ότι μπορούν να σύρετε αντικείμενα στο καλάθι. Το καλάθι έχει επίσης πάνω από την ετικέτα που λέει "Drag Stuff Here."
10. Συμπεριλάβετε πάντοτε μια σελίδα επαλήθευσης
Το πιο σημαντικό χαρακτηριστικό οποιασδήποτε διαδικασίας πληρωμής είναι σίγουρα μια σελίδα επαλήθευσης και επεξεργασίας ως το τελικό βήμα. Συνήθως οι πελάτες θα ήθελαν να επιβεβαιώσουν ότι αγοράζουν τα σωστά αντικείμενα. Κάθε καλή διαδικασία πληρωμής έχει αυτή τη δυνατότητα ως μια τελευταία ευκαιρία για τον πελάτη να αναθεωρήσει την παραγγελία του πριν να δεσμευτούν γι 'αυτό μέσω της διαδικασίας πληρωμής.
Στη σελίδα επαλήθευσης, θα πρέπει να συμπεριλάβετε όλες τις πληροφορίες σχετικά με το προϊόν σε έναν πίνακα, παρόμοιο με το πλήρες checkout της σελίδας. Ο πελάτης θα πρέπει να είναι σε θέση να ακυρώσει την παραγγελία του ή να μπορεί να χρησιμοποιήσει έναν σύνδεσμο "Συνέχιση αγορών" για να προσθέσει περισσότερα στοιχεία. Κάνετε το κουμπί για να ολοκληρώσετε τη διαδικασία πολύ εμφανές, εξαλείφοντας ακόμη και την παραμικρή σύγχυση.
Παρουσίαση των χρηστών καροτσιών και των ταμειακών ελέγχων
IconDock - Αυτή η τοποθεσία έχει ένα πολύ χρήσιμο και βολικό καλάθι. Το μόνο που έχετε να κάνετε είναι να κάνετε κλικ και να σύρετε ένα αντικείμενο στον πίνακα. Υπολογίζει αυτόματα το σύνολο και είναι μια πολύ γρήγορη λύση αγορών.
MediaTemple - Εδώ είναι ένα πολύ ωραίο πίνακα τιμών που περιέχει προφανή κουμπιά checkout με καλή τοποθέτηση.
Κέντρο πρώιμης μάθησης - Αυτός ο ιστότοπος διαθέτει ένα άριστο πλήρες καλάθι, ένα μίνι καλάθι και μια διαδικασία ελέγχου βήμα προς βήμα που απεικονίζεται με χρονοδιάγραμμα.
Roxy - Αυτό είναι ένα απλό καλάθι, και έχει επίσης ένα χρήσιμο μίνι καλάθι που δείχνει στον πελάτη το τρέχον σύνολο.
Mia & Maggie - Αυτό είναι ένα καλαίσθητο καρότσι που είναι εύκολο να το διαβάσετε και περιέχει ένα μεγάλο κουμπί checkout.
Mia & Maggie - Εδώ είναι ένα άλλο παράδειγμα από τη Mia & Maggie, αυτή τη σελίδα. Αυτό το checkout χρησιμοποιεί μια διαδικασία βήμα προς βήμα σε μία σελίδα, η οποία είναι μια πολύ έξυπνη και χρησιμοποιήσιμη διάταξη.
Amazon - Amazon είναι ένας ακόμη δημοφιλής ιστότοπος ηλεκτρονικού εμπορίου που χρησιμοποιεί μια βήμα-προς-βήμα διαδικασία.
Evel - Αυτό είναι ένα πολύ χρήσιμο και γρήγορο checkout χωρίς πάρα πολλά πεδία εισόδου στη φόρμα. Επίσης, παρατηρήστε ότι το καλάθι αγορών βρίσκεται πάνω από τη φόρμα, κάτι που μπορεί να είναι πολύ βολικό για κάποιους πελάτες.
Σχεδιασμός από τον άνθρωπο - Ένα άλλο παράδειγμα ενός τέλειου checkout μίας σελίδας. Αυτός περιέχει μια περίληψη παραγγελιών, η οποία μπορεί να είναι πολύ χρήσιμη. Υπάρχουν πολλά στοιχεία βοήθειας σε ολόκληρη τη φόρμα.
Bridge55 - Ένα ωραίο καλάθι αγορών με μια εικόνα του προϊόντος.
Cosmic Soda - Μια καλή ιστοσελίδα ηλεκτρονικού εμπορίου που χρησιμοποιεί και ένα μίνι καλάθι και ένα πλήρες καλάθι.
Incase - Ένα καλά οργανωμένο checkout με ελάχιστο αριθμό πεδίων.
Shoon - Ένα υπέροχο καλάθι μίνι που εμφανίζει ένα αναδυόμενο παράθυρο που περιέχει πρόσθετες πληροφορίες όταν κάνετε κλικ στο κουμπί "Προσθήκη στο καλάθι".
Wunderbloc - καλάθι αγορών Lightbox .
Bored of Southsea - Ένα καλό καροτσάκι και οργανωμένο καλάθι.
Υποσυνείδητα - Χρήση μίνι και πλήρους καλαθιού και διαδικασία σταδιακής ολοκλήρωσης πληρωμής.
AlphaStore - Μια δομή πίνακα και ένα μίνι καλάθι με ένα αναγνωρίσιμο εικονίδιο καλαθιού αγορών.
Me & mommy-to-be - Ένα καλαίσθητο καρότσι που δεν είναι πάνω από την κορυφή με διακόσμηση.
Γράφτηκε αποκλειστικά για το WDD από τον Matt Cronin από το Spoonfed Design .
Ποιες συμβουλές είναι οι πιο σημαντικές κατά το σχεδιασμό ενός ηλεκτρονικού καλαθιού αγορών; Παρακαλώ μοιραστείτε τα σχόλιά σας μαζί μας.