Leader Online Logo

Responsive Design σε φορητές συσκευές: πώς θα το διορθώσετε!

Η κατασκευή ιστοσελίδων με Responsive Web Design υποτίθεται ότι καθιστά πιο ομαλή την εμπειρία πλοήγησης του χρήστη στο Διαδίκτυο από πληθώρα ηλεκτρονικών μέσων, με την προσαρμογή του σχεδιασμού της ιστοσελίδας για υπολογιστή σε μια μικρότερη οθόνη κινητού τηλεφώνου. Δυστυχώς, η συμπύκνωση όλου του περιεχομένου της επιφάνειας εργασίας ενός σταθερού υπολογιστή σε μια τόσο μικρή οθόνη έχει το ακριβώς αντίθετο αποτέλεσμα – προκαλεί στην πραγματικότητα σοβαρές απώλειες στα conversion rates. Αλλά με ποιον τρόπο γίνεται αυτό;

Το Responsive Web Design κατακλύζει τις ιστοσελίδες για κινητά με αδιάφορο περιεχόμενο για τους επισκέπτες που βρίσκονται εν κινήσει. Σε ιστοσελίδες κατασκευασμένες για έναν χρήστη σταθερού υπολογιστή, ο επισκέπτης μέσω κινητού τηλεφώνου, ο οποίος έχει διαφορετικούς στόχους και διαφορετική πνευματική κατάσταση, μπορεί να μην βρει αυτό που αναζητά και να εγκαταλείψει την ιστοσελίδα σας απογοητευμένος και μπερδεμένος. Αυτό είναι η πηγή της τεράστιας ζημίας στις μετατροπές (conversions).

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

Για να αναπτύξουμε μια χρήσιμη εμπειρία Responsive Web Design, πρέπει να εξετάσουμε δύο παραμέτρους:

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

2. να κατανοήσουμε την πρόθεσή του.

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

5 βήματα για τη βελτιστοποίηση του Responsive Design της ιστοσελίδας σας

Βελτιστοποιήστε την κλίμακα των εικόνων

και… λάβετε υπόψη το μέγεθος.

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

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

Απλοποιήστε την πλοήγηση

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

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

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

Χρησιμοποιήστε ειδικές δομές για κινητά τηλέφωνα

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

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

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

Όσο λιγότερα, τόσο καλύτερα

Aπλοποιήστε, περιορίσετε και βελτιώστε τα κείμενά σας.

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

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

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

Επανεξετάστε τα κουμπιά προτροπής σε δράση

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

Διαμορφώστε έναν ενιαίο σχεδιασμό σήμερα

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