Μια βιτρίνα του κινητού ηλεκτρονικού εμπορίου
Η βελτιστοποίηση των ιστότοπων για τον ιστό για κινητά είναι μια αγγαρεία. Και η βελτιστοποίηση των ιστότοπων ηλεκτρονικού εμπορίου για το κινητό ιστό είναι ένα θηρίο που οι σχεδιαστές και οι προγραμματιστές έχουν αρχίσει να δαμάζουν.
Δεν αποτελεί έκπληξη το γεγονός ότι οι μεγαλύτερες εταιρείες αγκαλιάζουν πρώτα το μέσο, πιθανότατα επειδή διαθέτουν τους πόρους και τις ροές των πωλήσεων για να το δικαιολογήσουν. Εξάλλου, ακόμη και αν ένας ιστότοπος ηλεκτρονικού εμπορίου έχει σημαντική κυκλοφορία, ένα μικρό ποσοστό αυτού θα βασίζεται σε κινητά. Και ένα ακόμη μικρότερο ποσοστό αυτής της κυκλοφορίας θα ολοκληρώσει πραγματικά τις πωλήσεις τους.
Δεδομένου ότι η ορμή αρχίζει πραγματικά σε αυτό το χώρο, η εμπειρία των ανθρώπων με πλήρεις συναλλαγές ηλεκτρονικού εμπορίου είναι περιορισμένη. Αυτό καθιστά την κόγχη πειραματική σε καλύτερη περίπτωση. Ευτυχώς, δεδομένης της φύσης του ηλεκτρονικού εμπορίου, η επιτυχία μπορεί να μετρηθεί και να δοκιμαστεί προσεκτικά. Αυτό είναι ένα μέσο που ακόμα χρειάζεται να οριστεί.
Ένα τεράστιο εμπόδιο στην πρόοδο είναι η έλλειψη παραδειγμάτων. Οι γκαλερί σερφάρισμα για να βρείτε έναν τόνο ενδιαφέρουσες ιδέες δεν είναι ακόμη κοντά στο να είναι γρήγορο και εύκολο. Υπάρχουν μόνο λίγες μικρές συλλογές κινητού σχεδιασμού, ακόμα λιγότερες για το ηλεκτρονικό εμπόριο. Για να το αντιμετωπίσω, έχω συγκεντρώσει 10 φανταστικά παραδείγματα κινητού ηλεκτρονικού εμπορίου. QR έχουν συμπεριληφθεί κωδικοί για ευκολότερη περιήγηση. Μπορείτε να βρείτε πολλές εφαρμογές για τα κινητά σας τηλέφωνα που μπορούν να διαβάσουν αυτούς τους κωδικούς.
1. Walmart
Μια κοινή προσέγγιση όλων των δικτυακών τόπων που παρουσιάζονται εδώ είναι η δημιουργία μιας αρχικής σελίδας τύπου πύλης. Walmart δεν είναι διαφορετική. Ωστόσο, ενώ οι περισσότεροι ιστότοποι βασίζονται σε λίστες που βασίζονται σε κείμενο, αυτό έχει ένα πλέγμα εικονιδίων, το οποίο είναι πολύ πιο εύκολο να περιηγηθείτε. Πολλοί από τους ιστότοπους για κινητά που καλύπτονται εδώ έχουν λίστες που είναι τόσο μικρές ώστε είναι δύσκολο να χρησιμοποιηθούν. Η Walmart συνδυάζει εικονίδια με κείμενο για να καταστήσει τους στόχους εύκολο να χτυπήσει.
Το μεγαλύτερο gotcha στον ιστότοπο της Walmart είναι ότι πρέπει να μεταβείτε στον κύριο ιστότοπο για να ολοκληρώσετε μια συναλλαγή. Παρόλα αυτά, οι πληροφορίες και τα κουμπιά είναι εξαιρετικά εύχρηστα, λειτουργικά και καλά οργανωμένα.
2. Toys-R-Us
ο Παιχνίδια-R-Us ο ιστοχώρος είναι ένα βήμα προς τη σωστή κατεύθυνση. Αλλά θα μπορούσε να κάνει μερικά βασικά πράγματα καλύτερα. Πρώτον, βρήκα τον κατάλογο των κουμπιών στην αρχική σελίδα να είναι πολύ μικρός. Καταλαβαίνω τον πειρασμό να τα συρρικνωθώ για να διατηρήσω το διάστημα, αλλά θα ήταν πολύ πιο εύκολο να το χρησιμοποιήσω με λίγο περισσότερο χώρο. Βέβαια, θα έπρεπε να κυλίω περισσότερο, αλλά αυτό είναι ένα καλό εμπόδιο.
Μόλις περάσετε από την αρχική σελίδα, παίρνει πολύ καλύτερα. Συγκεκριμένα, αυτή η ιστοσελίδα έχει μία από τις καλύτερες σελίδες καλαθιού αγορών. Τα κουμπιά είναι καθαρά και η ισορροπία ανάμεσα στην πυκνότητα και την ικανότητα ροής φαίνεται σωστή. Συνολικά, ένα καλό παράδειγμα για το πώς να κοινοποιούν σαφώς τα σημεία δράσης.
3. Crocs
Η ανάπτυξη κινητής τηλεφωνίας εξακολουθεί να κυριαρχείται από προγραμματιστές, οπότε η εύρεση ενός όμορφα σχεδιασμένου ιστότοπου για κινητά είναι μια ανακούφιση. Αυτή είναι η περίπτωση Crocs . Ο ιστότοπός του είναι καλά εφαρμοσμένος και μια ομορφιά που πρέπει να δούμε.
Η προβολή λίστας καταλόγων είναι ιδιαίτερα καθαρή. Ο μόνος τρόπος με τον οποίο θα μπορούσε να γίνει πιο αργός θα ήταν να εξαλειφθούν τα ονόματα προϊόντων. Ανεξάρτητα από αυτό, κάθε σειρά κάνει έναν εύκολο στόχο, με σαφείς και σχετικές πληροφορίες.
4. JC Penny
Ένα πρόβλημα που οι σχεδιαστές του JC Penny κινητό κατάστημα που αντιμετώπισε ήταν πεδίο εφαρμογής. Πώς επιτρέπετε στους χρήστες να αναζητούν αποτελεσματικά ένα ευρύ φάσμα επιλογών σε μια ενότητα όπως τα παντελόνια των ανδρών; Η λύση, ένα απλό σύστημα drop-down, επιτρέπει στους πελάτες να φιλτράρουν γρήγορα τα κριτήρια για να φτάσουν στα προϊόντα που χρειάζονται.
Οι μεγάλες εικόνες είναι επίσης ένα πολύ ωραίο χαρακτηριστικό. Παρατηρήστε πόσο εύκολο είναι να δείτε τα πραγματικά στοιχεία στην προβολή λεπτομερειών προϊόντος. Υποψιάζομαι ότι ο ρυθμός μετατροπής κινητών ιστότοπων είναι εξαιρετικά χαμηλός και δεν μπορώ παρά να πιστεύω ότι η μεγάλη φωτογραφία όπως αυτή είναι ένα από τα λίγα όπλα για την καταπολέμηση αυτού.
5. Αχυρώνας κεραμικής
Ο τύπος θα πρέπει να είναι αρκετά σαφής μέχρι τώρα: το λογότυπο στην κορυφή, την αναζήτηση κάτω από αυτό, ένα οδηγό γραφικών για την προώθηση ενός προϊόντος ή πώλησης, ακολουθούμενη από μια λίστα με τις κύριες κατηγορίες προϊόντων. Και βρίσκουμε αυτή την ακριβή δομή Κεραμικός Αχυρώνας Του κινητού ιστότοπου.
Μια απολύτως λαμπρή λεπτομέρεια είναι η λύση αυτής της ιστοσελίδας στο πρόβλημα των μακριών ψωμιών. Θα παρατηρήσετε στη λίστα των κατηγοριών προϊόντων ότι το ίχνος του ψωμιού έχει μειωθεί σημαντικά για να συμπεριλάβει μόνο το τελευταίο μέρος της συμβολοσειράς. Συγκρίνετε αυτό με την παρενόχληση του ψωμιού στο Toys-R-Us, και θα εκτιμήσετε αυτή τη λύση εξοικονόμησης χώρου.
6. Χωρίς νήματα
Δεν είναι έκπληξη αυτό Χωρίς νήματα 'κινητή ιστοσελίδα είναι φανταστική. Η αρχική σελίδα ακολουθεί τον τύπο πύλης κατηγορίας, αλλά με μια συστροφή. Όπως και ο ιστότοπος της Walmart, η προσέγγιση του δικτύου είναι πολύ πιο εύκολη στη χρήση από ό, τι οι περισσότεροι. Η φωτογραφία είναι ελκυστική και κάνει το κατάστημα να αισθάνεται σαν μια πραγματική εμπειρία αγορών. Κάτι για αυτό απλά αισθάνεται λιγότερο μηχανικό από τα περισσότερα από τα άλλα καταστήματα που καλύπτονται εδώ.
Θα βρείτε αυτή την ίδια προσέγγιση πλέγματος στην προβολή της λίστας προϊόντων, η οποία είναι μια ωραία ανακούφιση και τα προϊόντα εμφανίζονται πολύ καλά. Οι σχεδιαστές κατάφεραν να ελαχιστοποιήσουν το σπαταλημένο χώρο διατηρώντας παράλληλα ευκολία στη χρήση.
7. Brookstone
Brookstone Το κινητό κατάστημα πάσχει από μια πυκνή αρχική σελίδα. Αλλά μόλις το περάσετε, ο ιστότοπος γίνεται καλύτερος. Η μεγάλη σαφής φωτογραφία εκτιμάται πολύ. Δεν ξέρω αν οι εικόνες ήταν βελτιστοποιημένες για κινητές συσκευές, αλλά είναι βέβαιο ότι είναι μεταξύ των πιο εύκολο να δούμε σε ολόκληρη αυτή την παρτίδα.
Ένα αδύναμο σημείο είναι η ποσότητα κύλισης που απαιτείται στη σελίδα του καλαθιού αγορών για να φτάσετε στο κουμπί ελέγχου. Το περιεχόμενο θα μπορούσε να κάνει με κάποια κλάδεμα και βελτιστοποίηση για να κλείσει η συμφωνία.
8. Dooney & Bourke
Εκτιμώ πραγματικά τη φωτογραφία Dooney & Bourke Της αρχικής σελίδας. Καταγράφει ακριβώς τι πωλεί η εταιρεία μόλις προσγειωθείτε στη σελίδα. Μια λεπτή λεπτομέρεια για να πούμε το λιγότερο, αλλά σίγουρα κάτι που πρέπει να εξετάσουμε.
Ένα σημείο ερεθισμού σχετικά με την προβολή λεπτομερειών προϊόντος είναι ότι το πεδίο ποσότητα είναι κενό από προεπιλογή. Έπρεπε να προσθέσω ένα "1" για να προσθέσω ένα προϊόν στο καλάθι μου. Αλλά είναι απίθανο να παραγγείλω περισσότερες από μία από τις ίδιες τσάντες των $ 150.
Επίσης, η σελίδα του καλαθιού αγορών αισθάνεται λίγο σαν μια δεύτερη σκέψη. Αλλά θα δώσω την πίστωση της εταιρείας για την τοποθέτηση βασικών στοιχείων δράσης στην κορυφή. Οι πιθανότητες οι πελάτες να ξεχνούν τι έχουν μόλις βάλει στο καλάθι τους είναι λεπτόι, οπότε η εστίαση στο να τους βοηθήσουν να φτάσουν στη σελίδα check-out είναι μια έξυπνη ιδέα.
9. Buy.com
Η αρχική σελίδα του Buy.com έχει κάτι που καμία άλλη αρχική σελίδα σε αυτό το άρθρο δεν έχει: ένα πραγματικό προϊόν. Η σκέψη των περισσότερων καταστημάτων ηλεκτρονικού εμπορίου είναι να δημιουργηθεί μια κινητή πύλη που επιτρέπει στους χρήστες να σκάβουν στην πλήρη σειρά προϊόντων. Αν και αυτό μπορεί να είναι απαραίτητο, το Buy.com με εμπνέει να εξετάσω εναλλακτικές λύσεις.
Τι γίνεται αν μια καλύτερη προσέγγιση είναι να επικεντρωθεί σε συμφωνίες; Η αρχική σελίδα είναι βασική ακίνητη περιουσία? δεδομένης της πρόκλησης του κλεισίματος των πωλήσεων, γιατί να μην αφιερώσετε όλη την προσπάθειά σας να βάζετε κάτι ακαταμάχητο μπροστά στους πελάτες. Παρατηρήστε ότι πριν φτάσετε στον κατάλογο των τμημάτων αυτού του ιστότοπου, βλέπετε το χαρακτηρισμένο προϊόν και τέσσερις ξεχωριστές συνδέσεις με πωλήσεις, προσφορές και προσφορές.
10. Petco
Ένα μεγάλο χαρακτηριστικό του κινητού ιστού είναι ότι εξαλείφει το χνούδι. Έτσι, όταν βλέπω την αρχική σελίδα του Petco Της κινητής ιστοσελίδας, δεν μπορώ παρά να αναρωτηθώ αν η μεγάλη φωτογραφία είναι χρήσιμη με οποιονδήποτε τρόπο. Το όνομα της εταιρείας και το συνοδευτικό εικονίδιο σκύλου και γάτας επικοινωνούν με το προϊόν. Λοιπόν, γιατί να δείξει αυτή την ανόητη εικόνα; Αντίθετα, θα έβαζα είτε μια ειδική συμφωνία είτε ένα πλέγμα εικόνων κατηγορίας. Αν και εκτιμώ το βερνίκι της ιστοσελίδας, θα μπορούσε να τροποποιηθεί λίγο.
Η εταιρεία χτυπά σε μια έξυπνη ιδέα στην άποψη λεπτομέρειας του προϊόντος, επισημαίνοντας τις πωλήσεις μόνο μέσω Διαδικτύου. Γιατί να μην προχωρήσουμε ένα βήμα παραπέρα και να κάνουμε μερικά από αυτά ειδικά κινητά. Αντίστοιχα, η σελίδα λεπτομερειών του προϊόντος είναι εξαιρετικά καθαρή και καθαρή. Η σφράγιση των περιγραφών πλήρους μήκους κάτω από τις βασικές λειτουργίες και πληροφορίες φαίνεται επίσης σαν μια συνετή απόφαση.
συμπέρασμα
Ο σχεδιασμός ιστοσελίδων για κινητά είναι δύσκολος και ο σχεδιασμός ιστότοπων ηλεκτρονικού εμπορίου για κινητές συσκευές είναι ίσως διπλάσιος. Η αποτύπωση του τρόπου με τον οποίο οι πελάτες μπορούν να βρουν το σωστό προϊόν και πώς να μετατρέψουν τη διαδικασία σε πώληση δεν είναι εύκολο. Ελπίζω αυτή η μικρή συλλογή πόρων να φέρει μερικές φρέσκες ιδέες στον επόμενο (ή ίσως και στον πρώτο) σχεδιασμό ιστοσελίδων για κινητά.
Γράφτηκε αποκλειστικά για WDD από Πάτρικ ΜακΝέιλ . Είναι ανεξάρτητος συγγραφέας, προγραμματιστής και σχεδιαστής. Συγκεκριμένα, αγαπά να γράψει για το σχεδιασμό ιστοσελίδων, να εκπαιδεύσει τους ανθρώπους στην ανάπτυξη ιστοσελίδων και να δημιουργήσει ιστότοπους. Το πάθος του Patrick για τις τάσεις και τα σχέδια του web design μπορεί να βρεθεί στα βιβλία του ΤοWebDesignersIdeaBook.com . Ακολουθήστε τον Patrick στο Twitter @designmeltdown .
Τι νομίζετε ότι αν αυτά τα παραδείγματα; Παρακαλώ μοιραστείτε τα σχόλια παρακάτω ...