Εναλλακτικές επιλογές μενού Hamburger για κινητή πλοήγηση

Εάν εργάζεστε σε ψηφιακά προϊόντα, έχετε ήδη διαβάσει δεκάδες άρθρα που περιγράφουν πώς και γιατί η πλοήγηση χάμπουργκερ στο κινητό (και στην επιφάνεια εργασίας!) Βλάπτει τις μετρήσεις της UX λόγω της χαμηλής ανιχνευσιμότητας και της αποδοτικότητάς της. (Μπορείτε να διαβάσετε μερικά από τα καλύτερα άρθρα σχετικά με το θέμα εδώ, εδώ, εδώ και εδώ.)

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

1. Καρτέλες

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

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

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

Παραδείγματα: LinkedIn και Google Photos

Καρτέλες μόνο με εικονίδια σε συνδέσμους LinkedIn και εικονίδια + ετικέτες με ετικέτες στο Google Photos

2. Καρτέλες με επιλογή 'περισσότερο'

Όταν υπάρχουν περισσότερα από 5 κύρια τμήματα, μια πρακτική λύση θα μπορούσε να είναι η εμφάνιση των τεσσάρων τμημάτων με τις μεγαλύτερες προτεραιότητες και η δημιουργία ενός πέμπτου στοιχείου "οτιδήποτε άλλο":

Οι αρχές σχεδιασμού για αυτήν τη λύση είναι βασικά οι ίδιες με αυτές για τις απλές καρτέλες. Το στοιχείο "περισσότερο" μπορεί είτε να συνδεθεί σε μια σελίδα πλοήγησης είτε να λειτουργήσει ως αναπτυσσόμενο μενού με τις υπόλοιπες ενότητες:

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

Παράδειγμα: Facebook

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

3. Προοδευτικά συμπτυσσόμενο μενού

Μια πιο εξελιγμένη έκδοση της πλοήγησης 'tabs + more' είναι να σχεδιάσετε ένα μενού που προσαρμόζεται στο πλάτος της οθόνης, δείχνει όσο το δυνατόν περισσότερη πλοήγηση και τοποθετεί τα υπόλοιπα κάτω από ένα στοιχείο Περισσότερα εάν είναι απαραίτητο:

Αυτό σημαίνει ότι το μενού Περισσότερα περιέχει περισσότερα στοιχεία σε μια χαμηλότερη ανάλυση - άλμα αντικειμένων κάτω από το Περισσότερα όταν δεν υπάρχει αρκετός χώρος για να τα δείξει. Η ευελιξία αυτής της λύσης παρέχει μια καλύτερη εμπειρία από τις "καρτέλες + περισσότερα", ειδικά σε μεγέθη οθόνης.

Παράδειγμα: BBC

Το κύριο μενού του BBC γίνεται σύμφωνα με το πραγματικό μέγεθος της οθόνης ώστε να εμφανίζονται πάντα όσο το δυνατόν περισσότερα αντικείμενα

4. Πλοηγηθείσα πλοήγηση

Εάν έχετε πολλά στοιχεία πλοήγησης χωρίς μεγάλη διάκριση στις προτεραιότητες και έχοντας μια κατηγορία "περισσότερο" θα ήταν ένας κακός συμβιβασμός, μια άλλη στρατηγική είναι να απαριθμήσετε όλα τα στοιχεία σε μια πτυσσόμενη προβολή:

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

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

Παραδείγματα: Μεσαίο και Google

Οι κύριες κατηγορίες μπορούν να μετακινηθούν σε μικρότερα μεγέθη οθόνης στο Medium.comΟι κατηγορίες της σελίδας αποτελεσμάτων αναζήτησης Google είναι διαθέσιμες σε μια πτυσσόμενη προβολή

5. Μενού διαγραφής

Ένα ασυνήθιστο αλλά ενδιαφέρουσα μοτίβο είναι η χρήση μενού που μοιάζουν με dropdown όταν η προβολή και η προσβασιμότητα των άλλων τμημάτων δεν είναι απαραίτητα:

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

Παράδειγμα: Barnes & Noble και Duolingo

Κατά την περιήγηση βιβλίων, η τρέχουσα κατηγορία και οι επιλογές πλοήγησης / φιλτραρίσματος είναι πάντα διαθέσιμες σε ένα αναπτυσσόμενο μενού στο bn.comΠαρόλο που δεν αποτελεί κοινή αλληλεπίδραση για τους περισσότερους χρήστες, το Duolingo επιτρέπει την γρήγορη εναλλαγή μεταξύ των γλωσσών που ασκείτε μέσω ενός dropdown

Και μερικές φορές, με έκπληξη, το μενού χάμπουργκερ μπορεί να είναι μια καλή επιλογή

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

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

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

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

Το Google Translate είναι πραγματικά παρόμοιο με αυτό:

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

συμπέρασμα

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

Είμαι βέβαιος ότι υπάρχουν πολλές άλλες μεγάλες ιδέες και μοτίβα για την αποτελεσματική πλοήγηση μέσω κινητού τηλεφώνου. Ποιες πρέπει να προσθέσω σε αυτή τη συλλογή; Στείλτε τις στο δρόμο μου στο τμήμα σχολίων. (Btw, προσλαμβάνουμε επίσης!)