Τι είναι η ανταποκρινόμενη πλοήγηση; Δυναμικά μενού για περιήγηση σε κινητά
Η ανταποκρινόμενη πλοήγηση είναι ένα βασικό στοιχείο της βελτιστοποίησης για κινητά. Εάν η πλοήγηση σε κινητά δεν καθοδηγεί τους χρήστες ομαλά από το σημείο Α στο σημείο Β, είναι πιθανό να εγκαταλείψουν γρήγορα τη σελίδα, με αποτέλεσμα την απώλεια επισκεψιμότητας και, το πιο σημαντικό, την απώλεια εσόδων. Διάφορες ιδέες, όπως τα μενού που εμφανίζονται με κύλιση προς τα κάτω ή οι κάτω γραμμές πλοήγησης, μπορούν να συμβάλουν στη βελτίωση της εμπειρίας πλοήγησης στον ιστότοπο.
Τι κάνει μια καλή ανταποκρινόμενη πλοήγηση;
Ένα καλό σύστημα πλοήγησης είναι η ραχοκοκαλιά κάθε ιστότοπου, καθώς βοηθά τους χρήστες να βρουν τις πληροφορίες που τους ενδιαφέρουν. Τα στοιχεία πλοήγησης πρέπει να λειτουργούν ομαλά, να έχουν σαφή και αυτονόητη δομή και να επιτρέπουν την διαισθητική χρήση. Οι κύριες προκλήσεις της ανταποκρινόμενης πλοήγησης έγκεινται στον περιορισμένο χώρο της οθόνης και στην αλληλεπίδραση μέσω αφής στις κινητές συσκευές. Ωστόσο, υπάρχουν αρκετές ανταποκρινόμενες λύσεις που εξασφαλίζουν μια καθαρή και φιλική προς τον χρήστη εμπειρία πλοήγησης στον ιστότοπο.
Η βασική ιδέα πίσω από το responsive web design είναι ότι το περιεχόμενο και η διάταξη μιας σελίδας προσαρμόζονται δυναμικά στις συνθήκες της συσκευής και στο μέγεθος της οθόνης.
Στις περισσότερες περιπτώσεις, είναι καλύτερο να ακολουθείτε την προσέγγιση «mobile first». Αυτή η στρατηγική σχεδιασμού δίνει προτεραιότητα στην βελτιστοποίηση των διαδικτυακών έργων για κινητά, θέτοντας σε πρώτη προτεραιότητα το σχεδιασμό, τη χρηστικότητα και την απόδοση της έκδοσης για κινητά, πριν από την προσαρμογή της σε επιτραπέζιους και φορητούς υπολογιστές. Η μετατροπή ενός υπάρχοντος συστήματος πλοήγησης ιστότοπου για χρήση σε κινητά είναι συχνά πιο περίπλοκη και χρονοβόρα. Γι’ αυτό, πριν αρχίσετε να σχεδιάζετε και να δημιουργείτε την ανταποκρινόμενη πλοήγηση, θα πρέπει να απαντήσετε σε μερικές βασικές ερωτήσεις, ειδικά όσον αφορά την τοποθέτηση και τη συνολική δομή της πλοήγησης.
Ένας προσβάσιμος ιστότοπος είναι πιο σημαντικός από ποτέ — και η πλοήγηση παίζει βασικό ρόλο σε αυτό, συμπεριλαμβανομένης της συμβατότητας με προγράμματα ανάγνωσης οθόνης, της επαρκούς αντίθεσης και άλλων χαρακτηριστικών προσβασιμότητας.
Πού πρέπει να τοποθετηθεί η πλοήγηση;
Συνηθισμένες προσεγγίσεις για την τοποθέτηση της πλοήγησης περιλαμβάνουν την πλοήγηση στο υποσέλιδο και την τοποθέτηση του μενού στο πάνω μέρος της σελίδας. Με την πλοήγηση στο υποσέλιδο, οι χρήστες βλέπουν μόνο έναν σύνδεσμο προς την πλοήγηση στην αρχή της σελίδας για κινητά, ο οποίος τους μεταφέρει απευθείας στο υποσέλιδο όπου βρίσκονται τα μεμονωμένα στοιχεία του μενού.
Ωστόσο, η πλοήγηση με βάση το υποσέλιδο δεν είναι πολύ φιλική προς τον χρήστη: οι χρήστες αναμένουν τα σημαντικά στοιχεία πλοήγησης να είναι εύκολα προσβάσιμα, γι’ αυτό και η πλοήγηση με βάση το υποσέλιδο γίνεται όλο και λιγότερο συνηθισμένη. Σήμερα, η πλοήγηση σε κινητές συσκευές τοποθετείται συχνότερα στο πάνω μέρος της σελίδας. Αυτή η κλασική προσέγγιση στο responsive design είναι γνωστή στους περισσότερους χρήστες.
Πώς είναι δομημένη η πλοήγηση;
Υπάρχουν διάφορες δυνατότητες όσον αφορά τη δομή της πλοήγησης. Δύο από τις πιο δημοφιλείς επιλογές είναι η πλοήγηση με λίστα και τα ευέλικτα πλέγματα.
Οι λίστες μπορούν να εμφανίζονται ως πλοήγηση ενός επιπέδου ή πολλαπλών επιπέδων. Αυτή η μορφή έχει δύο σαφή πλεονεκτήματα: πρώτον, οι προγραμματιστές ιστού μπορούν να εφαρμόσουν τις λίστες με σχετικά απλό τρόπο και, επιπλέον, προσαρμόζεται στις συνήθειες του χρήστη.
Η πλοήγηση με πλέγμα είναι ιδανική για σύντομα στοιχεία πλοήγησης και είναι ιδιαίτερα δημοφιλής στο ηλεκτρονικό εμπόριο. Τα στοιχεία εμφανίζονται το ένα δίπλα στο άλλο σε διάταξη πλέγματος, με τον αριθμό των στηλών να εξαρτάται από το μέγεθος της οθόνης. Εάν σχεδιάζετε ένα πλέγμα δύο στηλών, βεβαιωθείτε ότι ο αριθμός των στοιχείων είναι ζυγός, ώστε να αποφύγετε μια ασύμμετρη διάταξη.
Και στις δύο παραλλαγές, είναι δυνατό να προστεθούν επιπλέον υποενότητες, οι οποίες μπορούν να εμφανίζονται και να εξαφανίζονται σταδιακά.
Ποια είναι τα διαθέσιμα συστήματα πλοήγησης για κινητά;
Τώρα φτάνουμε στο κεντρικό ερώτημα: πώς πρέπει να ανοίγει το μενού πλοήγησης για κινητά; Η ιδέα καθορίζεται από τον τρόπο με τον οποίο παρουσιάζεται η πλοήγηση στον χρήστη. Οι επιλογές εμφάνισης είναι ποικίλες: η πλοήγηση μπορεί να εμφανίζεται απευθείας στη σελίδα ή να ανοίγει πατώντας έναν σύνδεσμο. Η πλοήγηση μπορεί είτε να μετακινεί το περιεχόμενο προς τα κάτω είτε να βρίσκεται πάνω από αυτό. Εδώ έχουμε συλλέξει μερικά παραδείγματα.
Ανεξάρτητα από το είδος πλοήγησης που επιλέγετε, το εικονίδιο με το χάμπουργκερ έχει γίνει το πρότυπο για το άνοιγμα μενού σε κινητές συσκευές. Το μικρό σύμβολο με τις τρεις οριζόντιες γραμμές είναι πλέον ευρέως αναγνωρισμένο σε smartphone και tablet ως το καθολικό σύμβολο για ένα κρυφό μενού.
Πλοήγηση μέσω αναπτυσσόμενου μενού
Ένας από τους κλασικούς τύπους ανταποκρινόμενης πλοήγησης είναι το αναπτυσσόμενο μενού. Μοιάζει πολύ με την παραδοσιακή πλοήγηση σε επιτραπέζιους υπολογιστές, γεγονός που το καθιστά οικείο στους χρήστες και ένα συχνά επιλεγμένο concept πλοήγησης. Το μενού ενεργοποιείται πατώντας ένα κουμπί ή ένα εικονίδιο και εμφανίζεται πάνω από το περιεχόμενο χωρίς να το καλύπτει πλήρως.
Περιήγηση με κύλιση προς τα κάτω
Ένας άλλος δημοφιλής τύπος πλοήγησης είναι το μενού slidedown, γνωστό και ως πλοήγηση ακορντεόν ή επεκτάσιμου πλαισίου. Όταν οι χρήστες πατούν το κουμπί μενού, η πλοήγηση ανοίγει με ολίσθηση — σε αντίθεση με τα αναπτυσσόμενα μενού, δεν επικαλύπτει το περιεχόμενο, αλλά το ωθεί προς τα κάτω. Αν και η εφαρμογή αυτής της προσέγγισης είναι ελαφρώς πιο περίπλοκη, θεωρείται εξαιρετικά επεκτάσιμη και εξοικονομεί χώρο. Χάρη στην ικανότητά της να περιλαμβάνει στοιχεία υπο-πλοήγησης, προσφέρει μια κομψή λύση τόσο για απλά όσο και για πιο σύνθετα μενού.
Κάτω γραμμή πλοήγησης
Η κάτω γραμμή πλοήγησης είναι μια όλο και πιο δημοφιλής λύση για εφαρμογές και ιστότοπους για κινητά, όπου το μενού εμφανίζεται στο κάτω μέρος της οθόνης. Αυτός ο τύπος πλοήγησης είναι ιδιαίτερα φιλικός προς τον χρήστη, καθώς είναι εύκολα προσβάσιμος σε smartphone. Λειτουργεί καλά για έργα με λίγα βασικά στοιχεία πλοήγησης και παρέχει μια σαφή, οργανωμένη δομή που βοηθά τους χρήστες να μεταβαίνουν γρήγορα μεταξύ των κύριων ενοτήτων του ιστότοπου.
Πλοήγηση εκτός καμβά
Σε αυτήν την προσέγγιση, η ανταποκρινόμενη πλοήγηση τοποθετείται εξ ορισμού εκτός της ορατής περιοχής της οθόνης. Το μενού δεν είναι ενσωματωμένο στην κύρια διάταξη, γεγονός που καθιστά την πλοήγηση εκτός καμβά μια λύση που εξοικονομεί χώρο και δεν καταλαμβάνει καθόλου χώρο στην οθόνη. Μόνο όταν πατηθεί το εικονίδιο του μενού, η πλοήγηση εμφανίζεται, ωθώντας ολόκληρη τη διάταξη στην άκρη. Αυτή η μέθοδος είναι ιδιαίτερα κατάλληλη για μεγάλες ιεραρχίες πλοήγησης με πολλαπλά υπομενού.
