Τύποι συσκευών και κατασκευή ιστοσελίδων στον Βόλο

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

Η συσκευή αλλάζει και τη συμπεριφορά του χρήστη

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

Μήτρα δοκιμών ανά κατηγορία

Δεν σχεδιάζουμε για μοντέλα συσκευών αλλά για συμπεριφορές

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

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

Η αφή και ο δείκτης δεν είναι το ίδιο πράγμα

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

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

Οι εικόνες χρειάζονται σχέδιο για διαφορετικό κάδρο

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

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

Πρακτικό πρωτόκολλο δοκιμής

1. Ελέγχουμε την αρχική σελίδα σε μικρό κινητό και παρατηρούμε την πρώτη πληροφορία που εμφανίζεται.
2. Ανοίγουμε το μενού με αφή και δοκιμάζουμε όλες τις βασικές διαδρομές.
3. Συμπληρώνουμε φόρμα σε κινητό με το εικονικό πληκτρολόγιο ανοικτό.
4. Περνάμε σε τάμπλετ και ελέγχουμε αν οι ενδιάμεσες διαστάσεις δημιουργούν άβολες μισές στήλες.
5. Ανοίγουμε τη σελίδα σε φορητό υπολογιστή και ελέγχουμε το μήκος των γραμμών και την πυκνότητα.
6. Τέλος, δοκιμάζουμε μεγάλη οθόνη για να βεβαιωθούμε ότι το περιεχόμενο δεν απλώνεται υπερβολικά.

Τι σημαίνει ετοιμότητα για πολλούς τύπους συσκευών

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

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

Ο προσανατολισμός της οθόνης αλλάζει το διαθέσιμο σχήμα

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

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

Πληκτρολόγιο, αφή και βοηθητική πλοήγηση

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

Στην αφή, το αντίστοιχο κριτήριο είναι η απόσταση. Οι γειτονικές επιλογές δεν πρέπει να απαιτούν ακρίβεια. Η εμπειρία γίνεται καλύτερη όταν οι ενεργές περιοχές είναι σαφείς, η κατάσταση πατήματος είναι κατανοητή και δεν υπάρχουν χειρονομίες που ο χρήστης πρέπει να μαντέψει.

Δοκιμή με πραγματικό περιεχόμενο

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

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

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

Δοκιμή με πραγματικές συνθήκες και όχι μόνο με προσομοίωση

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

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