Ιστοσελίδα για κινητά που διαβάζεται και λειτουργεί πραγματικά
Responsive (mobile friendly) Web Design για κινητά σημαίνει ότι η ιστοσελίδα διατηρεί τη χρησιμότητά της όταν ο επισκέπτης χρησιμοποιεί μικρή οθόνη, αφή, περιορισμένο διαθέσιμο χρόνο και ασταθή σύνδεση. Δεν αρκεί τα στοιχεία να χωρούν οπτικά. Ο άνθρωπος πρέπει να βρίσκει την πληροφορία που αναζητά, να συμπληρώνει φόρμα, να ελέγχει προϊόντα και να επιστρέφει στη σωστή θέση χωρίς κόπο. Ο σχεδιασμός από τη σκοπιά του κινητού αποκαλύπτει συχνά αποφάσεις περιεχομένου που έμεναν κρυμμένες στη μεγάλη οθόνη.
Το κριτήριο είναι η ολοκλήρωση μιας εργασίας
Μια ιστοσελίδα μπορεί να φαίνεται όμορφη σε στιγμιότυπο κινητού και παρ’ όλα αυτά να είναι δύσχρηστη. Δοκιμάστε κάτι συγκεκριμένο: βρείτε το ωράριο, εντοπίστε ένα προϊόν, ζητήστε πληροφορίες ή ολοκληρώστε παραγγελία. Αν απαιτούνται συνεχείς μεγεθύνσεις, άσκοπες μετακινήσεις ή επανάληψη δεδομένων, υπάρχει πρόβλημα λειτουργίας και όχι μόνο παρουσίασης.
Κάθε κρίσιμη διαδρομή χρειάζεται ευανάγνωστα βήματα. Για υπηρεσίες, σημαντικό είναι να διακρίνεται η ενέργεια επικοινωνίας χωρίς να κρύβει το κείμενο. Για ηλεκτρονικό κατάστημα, πρέπει να παραμένουν ορατές επιλογές, διαθεσιμότητα όπου προσφέρεται και τα απαιτούμενα στοιχεία ολοκλήρωσης. Διαφορετικοί στόχοι απαιτούν διαφορετικές προτεραιότητες στην οθόνη.
Το πλέγμα ακολουθεί το περιεχόμενο
Σε στενή οθόνη, οι πολλές στήλες συνήθως μετατρέπονται σε μία πιο καθαρή ροή. Αυτό δεν σημαίνει ότι κάθε τμήμα πρέπει να έχει το ίδιο ύψος: οι συγκρίσεις προϊόντων και τα φίλτρα ενδέχεται να χρειάζονται προσεκτική διαχείριση. Οι εικόνες προσαρμόζονται χωρίς παραμόρφωση, ενώ οι πίνακες που δεν χωρούν χρειάζονται λειτουργική εναλλακτική παρουσίαση.
Τα σημεία αλλαγής διάταξης επιλέγονται εκεί όπου το περιεχόμενο σταματά να λειτουργεί, όχι μόνο επειδή μια συγκεκριμένη συσκευή έχει δημοφιλείς διαστάσεις. Ελέγξτε ενδιάμεσα πλάτη και περιστροφή οθόνης. Ο προσαρμοστικός σχεδιασμός ιστοσελίδων πρέπει να παραμένει συνεπής σε ποικίλες αναλογίες, όχι σε λίγες φωτογραφίες συσκευών.
Αφή, στόχοι πατήματος και καθαρή πλοήγηση
Τα μικρά εικονίδια που λειτουργούν με ποντίκι δεν είναι αυτομάτως κατάλληλα για δάχτυλο. Δώστε αναγνωρίσιμες ετικέτες, επαρκές κενό ανάμεσα σε ενεργά στοιχεία και σαφή οπτική ένδειξη για το τι πατήθηκε. Ένα αναδιπλούμενο μενού πρέπει να ανοίγει, να κλείνει και να επιστρέφει τη θέση του χωρίς απρόσμενες μετακινήσεις.
Αποφύγετε αλληλεπιδράσεις που βασίζονται αποκλειστικά σε πέρασμα δείκτη. Ο επισκέπτης κινητού δεν έχει τον ίδιο τρόπο χειρισμού, ενώ ο χρήστης πληκτρολογίου χρειάζεται ορατή εστίαση. Οι δύο ανάγκες μπορούν να συνυπάρχουν όταν τα κουμπιά και οι σύνδεσμοι ονομάζονται σωστά και η δομή παραμένει προβλέψιμη.
Κείμενο που διαβάζεται χωρίς μεγέθυνση
Η τυπογραφία χρειάζεται ευανάγνωστο μέγεθος, κατάλληλο μήκος γραμμής και αποστάσεις ανάμεσα στις παραγράφους. Το πρόβλημα δεν λύνεται με μικρότερη γραμματοσειρά ώστε «να χωρέσουν όλα». Συχνά λύνεται όταν μειώνεται η περιττή πληροφορία, μπαίνει ουσιαστικός τίτλος και προβάλλονται πρώτα όσα χρειάζονται για την απόφαση.
Η σειρά των ενοτήτων πρέπει να έχει νόημα ακόμη και χωρίς τις δύο στήλες του υπολογιστή. Αν η περιγραφή βρίσκεται σε ένα πλαίσιο και η σχετική τιμή στο απέναντι, στην κάθετη παρουσίαση τα στοιχεία οφείλουν να παραμένουν μαζί. Η οπτική εγγύτητα είναι μέρος της σημασιολογίας της πληροφορίας.
Φόρμες με πραγματικό πληκτρολόγιο κινητού
Μια φόρμα δεν ολοκληρώνεται όταν απλώς φαίνεται σωστή. Χρειάζεται δοκιμή με εναλλαγή πεδίων, αυτόματη συμπλήρωση, σωστό πληκτρολόγιο για email ή αριθμούς και κατανοητά λάθη. Το κουμπί αποστολής πρέπει να παραμένει προσβάσιμο όταν ανοίγει το εικονικό πληκτρολόγιο. Το μήνυμα επιτυχίας να διευκρινίζει τι ακολουθεί.
Αν συλλέγονται στοιχεία επικοινωνίας, ζητήστε όσα είναι αναγκαία για τον σκοπό. Σε μακρύτερες αιτήσεις, χωρίστε τα βήματα με σαφή ένδειξη προόδου και επιτρέψτε διόρθωση. Ένα σφάλμα αποστολής δεν πρέπει να σβήνει ολόκληρη την εργασία του επισκέπτη, ιδιαίτερα όταν πληκτρολογεί εν κινήσει.
Εικόνες, διακοσμητικά και αρχικό περιεχόμενο
Οι βαριές εικόνες συχνά επιβαρύνουν την πρώτη φόρτωση χωρίς να μεταφέρουν ουσιαστική πληροφορία. Χρησιμοποιήστε κατάλληλες διαστάσεις για τη θέση τους, διατηρήστε αναλογίες και προβλέψτε εναλλακτικό κείμενο όταν η εικόνα μεταφέρει νόημα. Ένα τεράστιο κινούμενο στοιχείο που κρύβει το κεντρικό μήνυμα δημιουργεί πρόβλημα προτεραιότητας.
Προσέξτε επίσης τα αναδυόμενα πλαίσια που καλύπτουν το μεγαλύτερο μέρος της οθόνης. Αν χρειάζεται μια ειδοποίηση, ο χρήστης πρέπει να μπορεί να τη διαχειριστεί χωρίς να χάσει ό,τι προσπαθούσε να κάνει. Προτιμήστε εικόνες που απαντούν σε αληθινή απορία για το προϊόν ή την υπηρεσία.
Ίδιο ουσιαστικό περιεχόμενο στις συσκευές
Η Google αναφέρει στις οδηγίες της ότι χρησιμοποιεί την έκδοση κινητού για την ευρετηρίαση και προτείνει προσαρμοστική σχεδίαση. Αυτό κάνει σημαντική τη συνέπεια βασικού κειμένου, περιγραφών και διαθέσιμων ενεργειών ανάμεσα στις οθόνες. Αν κρίσιμες πληροφορίες υπάρχουν μόνο σε επιτραπέζια προβολή, ο επισκέπτης κινητού θα μείνει με ελλιπή εικόνα.
Δεν χρειάζεται όλα να έχουν ακριβώς την ίδια οπτική θέση. Μπορεί να αλλάζουν η διάταξη, το ύψος ενός μενού ή ο τρόπος εμφάνισης φίλτρων. Η σημασία, όμως, πρέπει να διατηρείται. Κάθε σημαντική απόφαση που προσφέρει η μεγάλη οθόνη οφείλει να έχει εύχρηστο αντίστοιχο και στη μικρή.
Μεγέθυνση περιεχομένου και βοηθητικές ρυθμίσεις
Ένα ακόμη χρήσιμο σενάριο είναι η αύξηση του μεγέθους κειμένου από τις ρυθμίσεις της συσκευής ή του προγράμματος περιήγησης. Αν οι ετικέτες κόβονται, τα κουμπιά επικαλύπτονται ή το μενού χάνει τη λειτουργία του, η σελίδα δεν είναι πραγματικά ευέλικτη. Η προσαρμογή δεν περιορίζεται στην εξωτερική διάσταση της οθόνης: πρέπει να αντέχει και διαφορετικές ανάγκες ανάγνωσης.
Ελέγξτε επίσης αν σημαντική πληροφορία μεταφέρεται μόνο με χρώμα, αν οι εικόνες έχουν κατάλληλη περιγραφή και αν τα διαδραστικά στοιχεία διαθέτουν σαφείς ετικέτες. Οι δοκιμές αυτές δεν απαιτούν εξεζητημένη εμφάνιση. Απαιτούν να μη χάνεται η δυνατότητα κατανόησης και χειρισμού όταν ο επισκέπτης αλλάζει τις συνήθεις ρυθμίσεις της συσκευής του.
Πώς ελέγχουμε την πραγματική ταχύτητα
Η εμπειρία επηρεάζεται από τη φόρτωση βασικού περιεχομένου, την ανταπόκριση μετά από πάτημα και τις απρόσμενες μετακινήσεις της διάταξης. Αν μια εικόνα εμφανιστεί και σπρώξει το κουμπί την ώρα που ο χρήστης προσπαθεί να το πατήσει, το πρόβλημα είναι αμέσως αντιληπτό. Οι μετρήσεις βοηθούν, αλλά χρειάζεται και παρατήρηση της συμπεριφοράς.
Δοκιμάστε τη σελίδα χωρίς προϋπάρχουσα προσωρινή αποθήκευση, σε διαφορετική σύνδεση και με λειτουργίες που φορτώνουν μετά το πρώτο άνοιγμα. Ελέγξτε την αναζήτηση, τα φίλτρα και κάθε αναδυόμενο στοιχείο. Η ταχύτητα δεν είναι υπόσχεση σε μια αναφορά· είναι η απρόσκοπτη εκτέλεση των βασικών εργασιών.
Συγκεκριμένα σενάρια ανά τύπο επιχείρησης
Σε ιστοσελίδα καταστήματος, η θέση στον χάρτη, η επικοινωνία και οι βασικές κατηγορίες πρέπει να είναι άμεσα διαθέσιμες. Σε υπηρεσία με ραντεβού, η επιλογή ημερομηνίας και η επιβεβαίωση χρειάζονται ιδιαίτερη προσοχή. Σε ηλεκτρονικό κατάστημα, ο χρήστης πρέπει να μπορεί να συγκρίνει τα αναγκαία χαρακτηριστικά χωρίς χαοτική παράθεση.
Ο σχεδιασμός για ιστοσελίδες καταστημάτων δεν έχει ακριβώς τις ίδιες προτεραιότητες με τον σχεδιασμό ηλεκτρονικού εμπορίου. Ξεκινήστε από το πραγματικό έργο του επισκέπτη και όχι από την υπόθεση ότι όλοι θέλουν την ίδια αρχική οθόνη.
Πρωτόκολλο τελικής δοκιμής για κινητά
Ανοίξτε την κύρια σελίδα, μία σελίδα περιεχομένου και μια κρίσιμη διαδικασία σε πραγματική συσκευή. Χειριστείτε με ένα χέρι το μενού, δοκιμάστε αναζήτηση και συμπληρώστε φόρμα με λανθασμένα και σωστά στοιχεία. Ελέγξτε οριζόντια κύλιση, αντίθεση, μεγέθυνση κειμένου, αλλαγή προσανατολισμού και επιστροφή στην προηγούμενη σελίδα.
Κρατήστε σύντομο κατάλογο: ποια εργασία απέτυχε, σε ποιο βήμα, σε ποια συνθήκη και με ποια επίπτωση. Διορθώστε πρώτα τα εμπόδια ολοκλήρωσης και μετά τις αισθητικές λεπτομέρειες. Το κριτήριο επιτυχίας είναι ότι ο άνθρωπος καταφέρνει με αξιοπιστία αυτό για το οποίο επισκέφθηκε την ιστοσελίδα.