Οι χρήστες κινητού είναι διαφορετικοί. Έχουν μικρότερες οθόνες. Αλληλεπιδρούν με το άγγιγμα. Έχουν λιγότερη υπομονή για την τριβή. Οι καταγραφές συνεδριών δείχνουν προβλήματα που αφορούν μόνο το κινητό και που οι δοκιμές σε υπολογιστή δεν πιάνουν. Ένα πεδίο φόρμας που δουλεύει καλά στον υπολογιστή μπορεί να είναι αδύνατο στο κινητό. Ένα κουμπί που πατιέται εύκολα στον υπολογιστή μπορεί να είναι πολύ μικρό στο κινητό. Μια διάταξη που είναι καθαρή στον υπολογιστή μπορεί να μπερδεύει στο κινητό. Όποιος δοκιμάζει σε υπολογιστή δεν βλέπει αυτά τα προβλήματα. Οι καταγραφές από κινητό τα δείχνουν. Ένας επισκέπτης από κινητό μπαίνει στο site σου. Προσπαθεί να πλοηγηθεί. Το μενού είναι πολύ μικρό. Πατάει λάθος επιλογή. Μπερδεύεται. Η καταγραφή δείχνει τον αγώνα του. Προσπαθεί να συμπληρώσει μια φόρμα. Τα πεδία είναι στριμωγμένα. Το πληκτρολόγιο καλύπτει τη σελίδα. Φεύγει. Η καταγραφή δείχνει την απογοήτευση. Η βελτιστοποίηση για κινητό θέλει οπτική γωνία κινητού. Όποιος φτιάχνει για υπολογιστή βελτιστοποιεί για υπολογιστή. Οι χρήστες κινητού χρειάζονται βελτιστοποίηση για κινητό. Οι καταγραφές συνεδριών γεφυρώνουν το κενό. Δείχνουν τους χρήστες κινητού όπως ζουν πραγματικά το site σου.
Αυτό το άρθρο εξηγεί πώς να χρησιμοποιείς καταγραφές συνεδριών για να βελτιώσεις την εμπειρία στο κινητό και το responsive design.
Βρες προβλήματα στο μέγεθος των σημείων αφής και στην ακρίβεια του πατήματος
Το κινητό δουλεύει με άγγιγμα. Ο υπολογιστής με ποντίκι. Το άγγιγμα είναι λιγότερο ακριβές. Ένα κουμπί αρκετά μεγάλο για τον δείκτη του ποντικιού είναι πολύ μικρό για ένα δάχτυλο. Οι καταγραφές συνεδριών δείχνουν οπτικά τα προβλήματα ακρίβειας. Ένας επισκέπτης από κινητό προσπαθεί να πατήσει ένα κουμπί. Αστοχεί. Ξαναπροσπαθεί. Πατάει λάθος κουμπί. Αυτός ο αγώνας δεν φαίνεται στις μετρήσεις. Φαίνεται καθαρά στις καταγραφές.
Δες καταγραφές από κινητό. Πατούν οι επισκέπτες με ακρίβεια. Ή αστοχούν συχνά. Πατούν το κουμπί που ήθελαν. Ή αυτό δίπλα του. Τα προβλήματα ακρίβειας δείχνουν ότι η διεπαφή είναι πολύ πυκνή.
Τα μικρά κουμπιά προκαλούν λάθη. Πολλά κουμπιά πολύ κοντά μεταξύ τους μπερδεύουν. Τα σημεία αφής χρειάζονται χώρο. Η καταγραφή δείχνει ποια στοιχεία δυσκολεύουν το πάτημα. Κάνε τα μεγαλύτερα. Βάλε τα πιο μακριά το ένα από το άλλο. Η χρηστικότητα στο κινητό βελτιώνεται.
Πρόσεξε τις διαταραχές στη διάταξη και τα προβλήματα αναγνωσιμότητας κειμένου στο κινητό
Οι οθόνες κινητού είναι μικρότερες. Το περιεχόμενο που χωράει στον υπολογιστή δεν χωράει στο κινητό. Το κείμενο μικραίνει υπερβολικά. Οι εικόνες παραμορφώνονται. Οι διατάξεις χαλάνε. Οι καταγραφές συνεδριών δείχνουν τα προβλήματα διάταξης στο κινητό.
Δες καταγραφές από κινητό. Μπορεί ο επισκέπτης να διαβάσει το κείμενο. Κάνει μεγέθυνση για να διαβάσει. Τα παρατάει. Το κείμενο που θέλει μεγέθυνση είναι πολύ μικρό. Οι εικόνες που δεν προσαρμόζονται είναι πρόβλημα. Οι διατάξεις που δεν προσαρμόζονται είναι χαλασμένες.
Το responsive design πρέπει να προσαρμόζει τις διατάξεις στο μέγεθος της οθόνης. Αν οι καταγραφές δείχνουν προβλήματα διάταξης, το responsive design έχει αποτύχει. Διόρθωσε τις διατάξεις για κινητό. Κάνε το κείμενο ευανάγνωστο χωρίς μεγέθυνση. Προσάρμοσε σωστά τις εικόνες.
Βρες προβλήματα στην πλοήγηση σε κινητό
Η πλοήγηση στο κινητό διαφέρει από τον υπολογιστή. Ο υπολογιστής έχει καταστάσεις hover. Το κινητό δεν μπορεί να κάνει hover. Ο υπολογιστής έχει χώρο για μενού. Το κινητό όχι. Η πλοήγηση στο κινητό πρέπει να είναι διαφορετική. Οι καταγραφές συνεδριών δείχνουν πού αποτυγχάνει.
Δες καταγραφές από κινητό. Μπορεί ο επισκέπτης να φτάσει στο μενού. Καταλαβαίνει πώς να πλοηγηθεί. Χάνεται. Πατάει κατά λάθος επιλογές του μενού. Τα προβλήματα πλοήγησης εμποδίζουν την εξερεύνηση του site.
Τα μενού στο κινητό χρησιμοποιούν συχνά εικονίδιο hamburger. Αν οι επισκέπτες δεν το βλέπουν ή δεν το καταλαβαίνουν, η πλοήγηση αποτυγχάνει. Τα μενού στο κινητό συχνά καλύπτουν περιεχόμενο. Αν καλύπτουν σημαντικό περιεχόμενο, οι επισκέπτες εκνευρίζονται. Η καταγραφή δείχνει τα προβλήματα πλοήγησης στο κινητό. Διόρθωσέ τα με σχεδίαση που ξεκινά από το κινητό.
Πρόσεξε τα προβλήματα πληκτρολογίου και συμπλήρωσης φορμών στο κινητό
Οι φόρμες στο κινητό είναι δύσκολες. Το πληκτρολόγιο καλύπτει τη μισή οθόνη. Τα πεδία κειμένου είναι μικρά. Η αυτόματη συμπλήρωση δουλεύει ασταθώς. Οι καταγραφές συνεδριών δείχνουν την τριβή στις φόρμες του κινητού.
Δες καταγραφές από κινητό όπου συμπληρώνεται φόρμα. Εμφανίζεται το πληκτρολόγιο και καλύπτει τη φόρμα. Βλέπει ο επισκέπτης τι πληκτρολογεί. Δυσκολεύεται με το πληκτρολόγιο. Η αυτόματη συμπλήρωση βοηθά ή μπερδεύει. Η καταγραφή δείχνει πόσο εύχρηστη είναι η φόρμα στο κινητό.
Οι φόρμες στο κινητό θέλουν διαφορετική σχεδίαση. Μείωσε τα πεδία. Χρησιμοποίησε τύπους πεδίων φτιαγμένους για κινητό. Δοκίμασε πώς συμπεριφέρεται το πληκτρολόγιο. Η καταγραφή δείχνει τι δουλεύει και τι όχι.
Σύγκρινε συνεδρίες κινητού και υπολογιστή για να βρεις τριβή που αφορά συγκεκριμένη συσκευή
Η εμπειρία σε κινητό και υπολογιστή διαφέρει. Η τριβή μπορεί να εμφανίζεται στο κινητό και όχι στον υπολογιστή. Ή το αντίθετο. Η σύγκριση καταγραφών δείχνει προβλήματα ανά συσκευή.
Δες μια καταγραφή όπου ο επισκέπτης εγκαταλείπει από κινητό. Μετά δες την αντίστοιχη καταγραφή από υπολογιστή. Εμφανίζονται τα ίδια προβλήματα. Ή είναι διαφορετικά. Η τριβή που αφορά μια συσκευή θέλει διόρθωση για αυτή τη συσκευή.
Κάποια προβλήματα είναι κοινά. Ασαφής πρόταση αξίας. Μπερδεμένη πλοήγηση. Εμφανίζονται και στα δύο. Κάποια αφορούν μόνο μία συσκευή. Μέγεθος σημείων αφής. Κάλυψη από το πληκτρολόγιο. Εμφανίζονται μόνο στο κινητό. Βρες ποιο πρόβλημα ανήκει πού. Διόρθωσε και τους δύο τύπους όπως πρέπει.
Συχνές ερωτήσεις
Ποιο είναι το ελάχιστο προτεινόμενο μέγεθος σημείου αφής με βάση τις καταγραφές συνεδριών από κινητό;
Δες καταγραφές από κινητό. Αν οι επισκέπτες πατούν με ακρίβεια, το μέγεθος είναι σωστό. Αν αστοχούν συχνά, τα σημεία είναι πολύ μικρά. Το πρότυπο της αγοράς είναι τουλάχιστον 48 επί 48 pixel. Οι καταγραφές όμως δείχνουν τι δουλεύει για τους δικούς σου χρήστες. Κάποιοι έχουν μεγαλύτερα δάχτυλα. Κάποιοι πιο σταθερό χέρι. Η συμπεριφορά στην καταγραφή δείχνει ποιο μέγεθος ταιριάζει στο κοινό σου. Με τον Δημιουργό ιστοσελίδων της WEMASY μπορείς να το στήσεις κατευθείαν στην ιστοσελίδα σου.
Να δοκιμάζω το κινητό σε πραγματικές συσκευές ή αρκούν τα δεδομένα καταγραφών από κινητό;
Χρησιμοποίησε και τα δύο. Οι καταγραφές συνεδριών δείχνουν πραγματική συμπεριφορά χρηστών σε πραγματικές συσκευές. Αυτό έχει μεγάλη αξία. Δεν μπορείς όμως να δοκιμάσεις κάθε συσκευή. Χρησιμοποίησε τις καταγραφές για να βρεις προβλήματα. Χρησιμοποίησε δοκιμές σε συσκευές για να καταλάβεις τη συμπεριφορά συγκεκριμένων συσκευών. Οι καταγραφές απαντούν στο τι χαλάει. Οι δοκιμές σε συσκευές απαντούν στο γιατί χαλάει σε εκείνη τη συσκευή.
Πώς ξέρω αν τα προβλήματα απόδοσης στο κινητό οφείλονται στη σχεδίαση ή στην ταχύτητα του δικτύου;
Δες τις καταγραφές. Αν τα στοιχεία φορτώνουν αργά, μπορεί να φταίει το δίκτυο. Αν όμως τα στοιχεία φαίνονται και παρ' όλα αυτά προκαλούν προβλήματα, φταίει η σχεδίαση. Κατάγραψε και γρήγορες και αργές συνδέσεις κινητού. Δες αν τα προβλήματα σχεδίασης μένουν. Τα προβλήματα δικτύου φαίνονται μόνο σε αργές συνδέσεις. Τα προβλήματα σχεδίασης φαίνονται παντού.
Από ποιες συσκευές κινητού να βλέπω πρώτα καταγραφές;
Δες τα στατιστικά σου. Ποιες συσκευές φέρνουν τη μεγαλύτερη επισκεψιμότητα. Δες πρώτα καταγραφές από αυτές. Μετά δες τις λιγότερο συνηθισμένες. Μην τις αμελήσεις όμως. Μια συσκευή με λίγη επισκεψιμότητα μπορεί να έχει μεγάλη εγκατάλειψη. Δώσε προτεραιότητα με βάση τον αντίκτυπο. Πολλή επισκεψιμότητα με μεγάλη εγκατάλειψη είναι κρίσιμη. Λίγη επισκεψιμότητα με οποιαδήποτε εγκατάλειψη μπορεί και πάλι να θέλει διόρθωση.
Μπορούν οι καταγραφές συνεδριών να με βοηθήσουν να διαλέξω ανάμεσα σε responsive design και εφαρμογή κινητού;
Εν μέρει. Οι καταγραφές δείχνουν αν η εμπειρία σου στο web από κινητό δουλεύει. Αν δείχνουν μεγάλη τριβή και κακή μετατροπή, μια εφαρμογή μπορεί να βοηθήσει. Οι εφαρμογές όμως έχουν τη δική τους τριβή. Η καταγραφή δεν μπορεί να προβλέψει την επιτυχία μιας εφαρμογής. Χρησιμοποίησε τις καταγραφές για να καταλάβεις τα προβλήματα στο web του κινητού. Κάνε το web στο κινητό όσο καλύτερο γίνεται. Σκέψου μια εφαρμογή αν παραμένει κακό.
Πώς βελτιστοποιώ για συσκευές κινητού με διαφορετικά μεγέθη οθόνης όταν έχω καταγραφές μόνο από δημοφιλείς συσκευές;
Το responsive design πρέπει να δουλεύει σε όλα τα μεγέθη. Δοκίμασε σε πολλά μεγέθη οθόνης κατά την ανάπτυξη. Χρησιμοποίησε τις καταγραφές για να βρεις τριβή. Βελτιστοποίησε με βάση αυτές. Μετά δοκίμασε τις διορθώσεις σου και σε άλλα μεγέθη. Responsive design σημαίνει ένα site που δουλεύει σε όλα τα μεγέθη. Οι καταγραφές δείχνουν τι χρειάζεται διόρθωση. Η κάλυψη των δοκιμών εξασφαλίζει ότι η διόρθωση δουλεύει και σε μεγέθη που δεν έχεις καταγράψει.