responsive design

Responsive design: ποιες απαιτήσεις ορίζουμε πριν κατασκευάσουμε ιστοσελίδα

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

Ποιος είναι ο στόχος και ποιες διαδρομές προηγούνται;

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

Ποιες οθόνες και καταστάσεις πρέπει να καλύπτονται;

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

Τι ορίζουμε για πλοήγηση, αναζήτηση και φόρμες;

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

Πώς διαχειριζόμαστε εικόνες, τυπογραφία και περιεχόμενο;

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

Ποια τεχνική βάση πρέπει να συμφωνηθεί;

Ο προσαρμοστικός σχεδιασμός συχνά αξιοποιεί ένα ενιαίο έγγραφο HTML (γλώσσα σήμανσης υπερκειμένου, HyperText Markup Language) με κανόνες CSS (επικαλυπτόμενα φύλλα μορφοποίησης, Cascading Style Sheets) που προσαρμόζουν τη διάταξη. Αυτό δεν σημαίνει ότι κάθε πρόβλημα λύνεται με αλλαγή πλάτους. Οι εξαρτήσεις περιλαμβάνουν πλαίσια προβολής, δυναμικά στοιχεία, εξωτερικά εργαλεία πληρωμών, χάρτες και πρόσθετα που μπορεί να έχουν δικούς τους περιορισμούς. Η τεχνική περιγραφή πρέπει να ορίζει πώς φορτώνουν, πώς αποτυγχάνουν με ασφάλεια και τι εμφανίζεται όταν μια εξωτερική υπηρεσία δεν αποκρίνεται.

Πώς συνδέεται με την αναζήτηση και την προσβασιμότητα;

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

Πώς γράφεται ένας χρήσιμος κατάλογος απαιτήσεων;

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

Τι απαιτεί ιδιαίτερη προσοχή σε σύνθετες εφαρμογές;

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

Ποιοι έλεγχοι αποδεικνύουν ότι ολοκληρώθηκε η υλοποίηση;

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

Πώς ξεχωρίζουμε τον επανασχεδιασμό από μια απλή διόρθωση;

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

Πώς συμφωνούνται οι αλλαγές μετά την αρχική έγκριση;

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

Τι σημαίνει αποδοχή από πλευράς επιχείρησης;

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

Τι παραδίδουμε ως τεκμηρίωση και τι συντηρούμε;

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