Γνωρίζατε ότι το 55% του συνόλου της επισκεψιμότητας ηλεκτρονικού εμπορίου είναι τώρα σε κινητή συσκευή?

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

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

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

1. Απλότητα

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

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

2. Σκεφτείτε τον αντίχειρα!

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

παρακολούθηση αντίχειρα

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

3.… Ειδικά οι μεγάλοι αντίχειρες

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

Ο ιστότοπος για κινητά της Hobbycraft είναι ένα καλό παράδειγμα. Πρώτα απ ‘όλα, οι μεγάλοι σύνδεσμοι φωτογραφιών τους το καθιστούν εξαιρετικά εύκολο για μεγάλους αντίχειρες. Αλλά ρίξτε μια ματιά στα εικονίδια τους στην κορυφή («καταστήματα, λογαριασμός, καλάθι»). Είναι πολύ μεγαλύτερα από ό, τι συνήθως θα περίμενε κανείς. Το Hobbycraft σκέφτεται τον μεγάλο αντίχειρα, και το ίδιο θα πρέπει και εσείς.

4. Μενού πλοήγησης χάμπουργκερ

Μία από τις πιο δημοφιλείς τάσεις σχεδιασμού των τελευταίων δώδεκα μηνών είναι το μενού «χάμπουργκερ». Μπορείτε να δείτε ένα παράδειγμα στον ιστότοπο της Hobbycraft παραπάνω. Είναι οι τρεις γραμμές που μοιάζουν με χάμπουργκερ – κάντε κλικ σε αυτό και επεκτείνεται το πλήρες μενού πλοήγησης.

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

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

IMG_3663

5. Επιλέξτε μια μεγάλη γραμματοσειρά

Μια μικρή οθόνη για κινητά μας αναγκάζει να σκεφτόμαστε πολύ και σκληρά για τη γραμματοσειρά που χρησιμοποιούμε. Δεν υπάρχει χώρος για μικρές, περίπλοκες γραμματοσειρές. Αντ ‘αυτού, σκεφτείτε απλό, τολμηρό και μεγάλο. Γενικά, μια γραμματοσειρά sans-serif είναι καθαρότερη και απλούστερη (δηλαδή η Ariel είναι καλύτερη από την Times New Roman).

71950dee059b803c4a7caa30dce8f5bf

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

6. Χρησιμοποιήστε την «έξυπνη αναζήτηση»

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

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

Μπορείτε να το δείτε σε δράση στον ιστότοπο της Europcar. Ο πελάτης αρχίζει να πληκτρολογεί «Norw» και ο ιστότοπος προτείνει αυτόματα τους διάφορους κλάδους του Norwich. Απλός.

IMG_4331

7. Απλοποιήστε τα έντυπα εγγραφής και αγοράς

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

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

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

img_1292-blog-half

8. Το πολύ τρία στρώματα

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

  1. Αρχική σελίδα: Ο πελάτης επιλέγει «κατηγορία: κορίτσια»
  2. Ο πελάτης επιλέγει «υποκατηγορία: παπούτσια»
  3. Ο πελάτης κάνει κλικ στη σελίδα του προϊόντος.

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

9. Διευκολύνετε την επιστροφή στην αρχική σελίδα

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

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

img_1304-blog-half

10. Χωρίς ζουμ!

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

Apple-Pinch-to-zoom

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

11. Αντιμετωπίστε την ανησυχία «ασφάλειας»

Παρά την τεράστια επισκεψιμότητα σε ιστότοπους ηλεκτρονικού εμπορίου για κινητά, εξακολουθεί να υπάρχει μια γενική ανησυχία ότι η αγορά κάτι από έναν ιστότοπο για κινητά δεν είναι τόσο «ασφαλής» όσο ένας επιτραπέζιος υπολογιστής. Φυσικά, δεν υπάρχει διαφορά στην ασφάλεια από κινητό σε tablet σε επιτραπέζιο υπολογιστή. Ωστόσο, μια μελέτη του 2013 δείχνει ότι σχεδόν οι μισοί από τους αγοραστές στο διαδίκτυο αισθάνονται λιγότερο ασφαλείς όταν αγοράζουν κάτι σε smartphone. Αυτός ο φόβος είναι πιθανό να σκοτώσει τις μετατροπές σας.

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

εικόνα18

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

12. Στοίβαξη περιεχομένου

Για πολλούς ανθρώπους, η δημιουργία ενός ιστότοπου για κινητά σημαίνει απλώς την επιλογή ενός «αποκριτικού» θέματος στο WordPress ή στο Shopify ή σε όποια πλατφόρμα χρησιμοποιείτε. Αν και αυτό είναι ένα καλό ξεκίνημα, θα πρέπει να δώσετε ιδιαίτερη προσοχή στον τρόπο με τον οποίο το θέμα ανακατεύει αυτόματα το περιεχόμενό σας. Δεν είμαι σίγουρος τι εννοώ; Ρίξτε μια ματιά σε αυτό το διάγραμμα παρακάτω:

15_contentStacking

Αυτός είναι ο τρόπος με τον οποίο ένα θέμα που ανταποκρίνεται μπορεί να συσσωρεύσει αυτόματα το περιεχόμενό σας για tablet (αριστερή εικόνα) ή smartphone (δεξιά εικόνα). Εξετάστε προσεκτικά ποια είναι τα πιο σημαντικά κομμάτια του περιεχομένου σας και βεβαιωθείτε ότι είναι σωστά σωστά. Για παράδειγμα, στη δεξιά πλευρά, τα προϊόντα (κουτί 5 – είδη μπάνιου) αναγκάζονται να περάσουν κάτω από την οθόνη. Μπορούν ακόμη και να ωθηθούν κάτω από το «fold».

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

13. Χάστε οποιοδήποτε περιεχόμενο Flash

Το Flash είναι μια σχετικά ξεπερασμένη μορφή σε οποιαδήποτε συσκευή. (Στην πραγματικότητα, οι σχεδιαστές αγωνίζονται να το σκοτώσουν μια για πάντα! Καταπίνει πόρους, είναι αργός και είναι παιδική χαρά για χάκερ). Ενώ αυτά είναι κακά νέα σε έναν ιστότοπο για επιτραπέζιους υπολογιστές, είναι ακόμη χειρότερα σε smartphone ή tablet.

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

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

14. Αγκαλιάστε τους περιορισμούς!

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

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

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

15. Λάβετε αποφάσεις σχεδιασμού χρησιμοποιώντας το Google Analytics

Το πρόβλημα με το σχεδιασμό για κινητά είναι ότι υπάρχουν τόσες πολλές συσκευές που πρέπει να λάβετε υπόψη. Βελτιστοποιείτε τη διάταξη και το σχεδιασμό σας για tablet iPad ή Android; Βελτιστοποιείτε το iPhone 5 ή το iPhone 6; Ή το Samsung Galaxy?

Ένας ανταποκρινόμενος σχεδιασμός σημαίνει ότι θα διαμορφωθεί με διαφορετικό τρόπο σε κάθε ένα. Εδώ είναι το Google Analytics που μπορεί να σας βοηθήσει. Η τελευταία έκδοση του Analytics σάς επιτρέπει να βλέπετε ποιες κινητές συσκευές επισκέπτονται τον ιστότοπό σας πιο συχνά:

παρακολούθηση κινητών συσκευών-αναλυτικών στοιχείων

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

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

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

Θα ήθελα πολύ να ακούσω τι έχετε κάνει για να βελτιστοποιήσετε τον ιστότοπό σας για κινητά. Τι τροποποιήσεις έχει λειτουργήσει για εσάς?

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