5 έξυπνες εναλλακτικές λύσεις στο μενού Hamburger
Ο χώρος οθόνης είναι ένας πολύτιμος πόρος στο κινητό. Για να ανταποκριθούν στην πρόκληση του μικρού χώρου στην οθόνη, ενώ παράλληλα κάνουν την πλοήγηση προσβάσιμη, οι σχεδιαστές συχνά βασίζονται στην απόκρυψη της πλοήγησης πίσω από το εικονίδιο χάμπουργκερ, ένα πρωταρχικό παράδειγμα κρυφής πλοήγησης. Σε αυτό το άρθρο, θα δούμε γιατί η κρυφή πλοήγηση δημιουργεί κακό UX και ποιες εναλλακτικές είναι διαθέσιμες για τους σχεδιαστές.
Γιατί το μενού Hamburger είναι κακό για το UX
Σε κινητά, η ορατή πλοήγηση χρησιμοποιείται 1,5 φορές περισσότερο από το χάμπουργκερ
Εάν εργάζεστε σε ψηφιακά προϊόντα, πιθανότατα έχετε ήδη διαβάσει δεκάδες άρθρα που περιγράφουν πώς το μενού χάμπουργκερ στο κινητό βλάπτει τις μετρήσεις UX. Το κύριο μειονέκτημα είναι η χαμηλή του δυνατότητα ανίχνευσης, και αυτό υποστηρίζεται από πραγματικούς αριθμούς. Σε ποιοτικές μελέτες, Ο NNGroup βρέθηκε ότι η κρυφή πλοήγηση είναι λιγότερο ευδιάκριτη από την ορατή ή εν μέρει ορατή πλοήγηση. Αυτό σημαίνει ότι όταν η πλοήγηση είναι κρυμμένη, οι χρήστες είναι λιγότερο πιθανό να χρησιμοποιήσουν την πλοήγηση. Τα μενού του Hamburger οδηγούν σε εμπλοκή, επιβραδύνουν την εξερεύνηση και μπερδεύουν τους ανθρώπους.
Τι πρέπει λοιπόν να χρησιμοποιήσουμε;
Παρόλο που δεν υπάρχει κανένας σκληρός και γρήγορος τρόπος για εφαρμογές και ιστότοπους για κινητά, μια γενική σύσταση είναι να χρησιμοποιηθούν είτε ορατά - οι κύριες επιλογές πλοήγησης εμφανίζονται σε μια ορατή γραμμή πλοήγησης ή σε σύνθετη πλοήγηση , όπου ορισμένες από τις κύριες επιλογές πλοήγησης είναι ορατές και μερικά είναι κρυμμένα κάτω από ένα διαδραστικό στοιχείο.
1. Γραμμή καρτελών
Εάν διαθέτετε περιορισμένο αριθμό προορισμών ανώτατου επιπέδου στον ιστότοπο ή την εφαρμογή σας, ίσως η λύση είναι η πλοήγηση με καρτέλες. Όταν ένα μενού είναι ορατό στο πάνω ή στο κάτω μέρος, είναι βασικά η διαφήμιση ότι υπάρχει μια πλοήγηση και οι άνθρωποι μπορούν να δουν τις επιλογές πλοήγησης από την αρχή.
Οι καρτέλες φαίνεται να είναι το απλούστερο μοτίβο πλοήγησης. Ωστόσο, πρέπει να εξεταστούν ορισμένα πράγματα κατά το σχεδιασμό αυτού του τύπου πλοήγησης:
- Η γραμμή καρτελών επιτρέπει την εμφάνιση 5 ή λιγότερων επιλογών πλοήγησης.
- Μια από τις επιλογές θα πρέπει να είναι πάντοτε ενεργή και θα πρέπει να επισημαίνεται οπτικά, για παράδειγμα, χρησιμοποιώντας ένα αντίθεση χρώματος.
- Η πρώτη καρτέλα πρέπει να είναι η αρχική σελίδα και η σειρά των καρτελών πρέπει να σχετίζεται με την προτεραιότητά τους ή τη λογική τους σειρά στη ροή του χρήστη.
- Είναι καλύτερα να χρησιμοποιείτε εικονίδια μαζί με ετικέτες για κάθε επιλογή πλοήγησης. Τα εικονίδια χωρίς ετικέτες λειτουργούν μόνο για κοινές ενέργειες, όπως ένα εικονίδιο μεγεθυντικού φακού για αναζήτηση και για διασυνδέσεις που χρησιμοποιούν συχνά οι χρήστες (π.χ. Instagram).
Συμβουλή: Για να εξοικονομήσετε χώρο στην οθόνη, η γραμμή πλοήγησης μπορεί να αποκρύπτεται / αποκαλύπτεται προς τα κάτω και προς τα πάνω.
2. Γραμμή καρτέλας Με την επιλογή "Περισσότερα"
Όταν έχετε περισσότερους από 5 κορυφαίους προορισμούς, μια πρακτική λύση θα ήταν να εμφανίσετε τα 4 τμήματα που έχουν προτεραιότητα και να έχετε ένα 5ο στοιχείο ως λίστα με τις υπόλοιπες επιλογές.
Οι αρχές σχεδιασμού για αυτήν τη λύση είναι βασικά οι ίδιες με αυτές για την καρτέλα Tab. Υπάρχει μόνο μια εξαίρεση: το τελευταίο στοιχείο είναι το στοιχείο "περισσότερο".
Το στοιχείο "περισσότερο" μπορεί να λειτουργήσει ως αναπτυσσόμενο μενού ή ακόμα και να συνδεθεί σε ξεχωριστή σελίδα πλοήγησης με τις υπόλοιπες ενότητες. Από την πρώτη ματιά αυτή η λύση δεν είναι πολύ καλύτερη από το μενού χάμπουργκερ, καθώς κρύβει επίσης περιεχόμενο και η ετικέτα της δεν λέει πάρα πολλά για το τι είναι κρυμμένο πίσω από αυτό. Ωστόσο, αν έχετε προτεραιότητα στις επιλογές πλοήγησης, η πλειονότητα των χρηστών σας θα έχει οθόνες 4 ή 5 ορατές επιλογές πλοήγησης κορυφαίας προτεραιότητας στην οθόνη όλη την ώρα, ώστε να βελτιωθεί η εμπειρία πλοήγησης για αυτούς.
3. Προοδευτικά Συρρικνούμενο Μενού
Το προοδευτικά πτυσσόμενο μενού, γνωστό και ως πρότυπο "Priority +", είναι ένα μενού που προσαρμόζεται στο πλάτος της οθόνης. Εμφανίζει όσο το δυνατόν περισσότερη πλοήγηση και τοποθετεί τα πάντα κάτω από ένα κουμπί "περισσότερο". Βασικά, αυτό το μοτίβο είναι μια εκλεπτυσμένη έκδοση της πλοήγησης 'Tab bar + more', όπου ο αριθμός των επιλογών πλοήγησης που είναι κρυμμένοι πίσω από το μενού "περισσότερο" εξαρτάται από τον διαθέσιμο χώρο οθόνης. Η ευελιξία αυτής της λύσης παρέχει μια καλύτερη εμπειρία χρήστη από μια 'στατική' 'Γραμμή καρτών + περισσότερα ".
4. Πλοηγηθείσα πλοήγηση
Παρόμοια με τα προηγούμενα δύο πρότυπα, αυτή είναι μια άλλη προσέγγιση για μεγαλύτερες λίστες. Αν έχετε πολλές επιλογές πλοήγησης χωρίς μεγάλη διάκριση στις προτεραιότητες, για παράδειγμα είδη μουσικής, μπορείτε να απαριθμήσετε όλα τα στοιχεία σε μια προβολή με δυνατότητα κύλισης. Κάνοντας τη λίστα με δυνατότητα κύλισης επιτρέπετε στους χρήστες να μετακινούνται από πλευρά σε πλευρά.
Το μειονέκτημα αυτής της λύσης είναι ότι ακόμη και τα κορυφαία λίγα στοιχεία είναι ορατά χωρίς κύλιση και όλα τα υπόλοιπα είναι εκτός οράματος. Αυτό είναι, ωστόσο, μια αποδεκτή λύση όταν οι χρήστες αναμένεται να εξερευνήσουν το περιεχόμενο, για παράδειγμα κατηγορίες ειδήσεων, κατηγορίες μουσικής ή σε ηλεκτρονικό κατάστημα.
5. Πλοήγηση πλήρους οθόνης
Ενώ με άλλα μοντέλα που αναφέρονται σε αυτό το άρθρο, ο αγώνας είναι να ελαχιστοποιηθεί ο χώρος που αναλαμβάνουν τα συστήματα πλοήγησης, το πρότυπο πλήρους οθόνης παίρνει ακριβώς την αντίθετη προσέγγιση. Αυτή η προσέγγιση συνήθως αφιερώνει την αρχική σελίδα αποκλειστικά στην πλοήγηση. Οι χρήστες στρέφονται ή σπρώχνουν διαδοχικά για να αποκαλύψουν πρόσθετες επιλογές μενού καθώς μετακινούνται προς τα πάνω και προς τα κάτω.
Αυτό το μοτίβο λειτουργεί καλά σε ιστότοπους και εφαρμογές με βάση την εργασία και κατευθύνσεις, ειδικά όταν οι χρήστες τείνουν να περιορίζονται σε ένα μόνο σκέλος της ιεραρχίας πλοήγησης κατά τη διάρκεια μίας μόνο συνεδρίας. Η διοχέτευση χρηστών από τις σελίδες γενικής επισκόπησης στις σελίδες λεπτομερειών τους βοηθά να φιλοξενούνται σε αυτό που αναζητούν και να εστιάζουν στο περιεχόμενο σε μια μεμονωμένη ενότητα.
Πλήρης οθόνη στην Yelp
Χρησιμοποιώντας πλοήγηση σε πλήρη οθόνη, οι σχεδιαστές μπορούν να οργανώσουν μεγάλα κομμάτια πληροφοριών με συνεκτικό τρόπο και να αποκαλύψουν πληροφορίες χωρίς να κατακλύζουν τον χρήστη. Μόλις ο χρήστης αποφασίσει για το πού να πάει, τότε μπορείτε να αφιερώσετε ολόκληρο το χώρο στην οθόνη για το περιεχόμενο.
συμπέρασμα
Με τα πρότυπα πλοήγησης για κινητά, δεν υπάρχει λύση ενιαίου μεγέθους. εξαρτάται πάντα από το προϊόν σας, από τους χρήστες σας και από το περιβάλλον. Ωστόσο, η βάση κάθε καλά σχεδιασμένης πλοήγησης είναι η αρχιτεκτονική των πληροφοριών: σαφής δομή, προτεραιότητες και ετικέτες με βάση τις ανάγκες των χρηστών σας. Βοηθώντας τους χρήστες να πλοηγηθούν πρέπει να είναι κορυφαία προτεραιότητα για κάθε σχεδιαστή εφαρμογών. Τόσο οι χρήστες για πρώτη φορά όσο και οι χρήστες που επιστρέφουν θα πρέπει να μπορούν να καταλάβουν πώς να μετακινούνται εύκολα με την εφαρμογή σας.