Σχεδιασμός Υλικών και Πρόβλημα Πλοήγησης Κινδύνου Μυστηρίου

Τον Μάρτιο του 2016, η Google ενημέρωσε το Σχεδιασμό Υλικού για να προσθέσει τις κάτω γραμμές πλοήγησης στη βιβλιοθήκη του UI. Αυτή η νέα γραμμή τοποθετείται στο κάτω μέρος μιας εφαρμογής και περιέχει 3 έως 5 εικονίδια που επιτρέπουν στους χρήστες να πλοηγούν σε προβολές ανώτατου επιπέδου σε μια εφαρμογή.

Ακούγεται οικείο? Αυτό οφείλεται στο γεγονός ότι οι γραμμές πλοήγησης στο κάτω μέρος αποτελούν μέρος της βιβλιοθήκης UI της UI εδώ και χρόνια (ονομάζονται γραμμές καρτελών στο iOS).

Αριστερά: Η κάτω γραμμή πλοήγησης του υλικού σχεδίασης | Δεξιά: η γραμμή καρτελών του iOS

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

Είτε είστε χρήστης Android, σχεδιαστής ή προγραμματιστής Android, αυτό θα σας ενοχλήσει.

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

Η πλοήγηση με το μυστήριο κρέατος είναι ένας όρος που δημιουργήθηκε το 1998 από τον Vincent Flanders από τις διάσημες ιστοσελίδες Web που Suck. Αναφέρεται σε κουμπιά ή συνδέσμους που δεν σας εξηγούν τι κάνουν. Αντ 'αυτού, πρέπει να κάνετε κλικ σε αυτά για να μάθετε.

(Ο όρος "μυστήριο κρέας" προέρχεται από το κρέας που σερβίρεται σε αμερικανικές δημόσιες σχολικές αίθουσες που έχουν υποστεί επεξεργασία έτσι ώστε το είδος του ζώου από το οποίο προέρχονται δεν είναι πλέον διακριτό).

Ένα παράδειγμα πλοήγησης με μυστήριο κρέας Πηγή

Η πλοήγηση με το μυστήριο κρέατος είναι το σήμα κατατεθέν των σχεδίων που δίνουν προτεραιότητα στη λειτουργία της μορφής. Είναι κακός σχεδιασμός UX, επειδή δίνει έμφαση στην αισθητική με το κόστος της εμπειρίας των χρηστών. Προσθέτει γνωστικό φορτίο στις εργασίες πλοήγησης, καθώς οι χρήστες πρέπει να μαντέψουν τι κάνει το κουμπί. Και αν οι χρήστες σας πρέπει να μαντέψουν, το κάνετε λάθος.

Δεν θα θέλατε να φάτε μυστήριο κρέας - παρομοίως, οι χρήστες δεν θα ήθελαν να κάνουν κλικ στα κουμπιά μυστήριο.

Απεργία 1: Η γραμμή πλοήγησης του Android Lollipop

Το πρώτο μεγάλο πρόβλημα πλοήγησης με το μυστήριο κρέατος του Material Design συνέβη το 2014 με το Android Lollipop.

Το Android Lollipop εισήχθη στο ίδιο συνέδριο που έκανε το ντεμπούτο του Υλικού Σχεδιασμού και αθλοθέτησε ένα επανασχεδιασμένο UI που ταιριάζει με τη νέα σχεδίαση της Google.

Γραμμή πλοήγησης σε προηγούμενες εκδόσεις του Android

Ένα από τα στοιχεία του UI που επανασχεδιάστηκε ήταν η γραμμή πλοήγησης, η επίμονη μπάρα στο κάτω μέρος του Android OS που παρέχει έλεγχο πλοήγησης για τηλέφωνα χωρίς κουμπιά υλικού για Back, Home και Menu.

Στο Android Lollipop, η γραμμή πλοήγησης επανασχεδιάστηκε σε αυτό:

Γραμμή πλοήγησης, Android Lollipop και επάνω

Δείτε το πρόβλημα;

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

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

Το τρίγωνο εικονίδιο μπορεί να μοιάζει με βέλος "Πίσω", αλλά τι σημαίνει ένας κύκλος και ένα τετράγωνο σε σχέση με τον έλεγχο πλοήγησης;

Κατανόηση των εικονιδίων της γραμμής πλοήγησης

Απεργία 2: Πλωτά κουμπιά δράσης

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

Χαρακτηριστικά για το κουμπί επιπλέουσας ενέργειας | Πηγή

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

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

Χρειάζεστε απόδειξη ότι τα κουμπιά μόνο με εικονίδια είναι κακή ιδέα; Ας παίξουμε ένα παιχνίδι εικασίας.

Παρακάτω είναι μια λίστα με τα όσα - σύμφωνα με τις οδηγίες του Σχεδίου Υλικού - είναι αποδεκτά εικονίδια για κουμπιά επιπλέουσας ενέργειας. Μπορείτε να μαντέψετε τι κάνει κάθε κουμπί;

Κουμπί μυστήριο 1

Εντάξει, αυτό είναι ένα απλό για να σας ζεσταθεί. Αντιπροσωπεύει "Οδηγίες".

Κουμπί μυστήριο 2

Τι λες για αυτό? Εάν είστε χρήστης iOS ή Mac, μπορείτε να πείτε "Safari". Αντιπροσωπεύει στην πραγματικότητα "Εξερευνήστε".

Κουμπί μυστήριο 3

Τα πράγματα γίνονται διασκεδαστικά (ή απογοητευτικά) τώρα! Θα μπορούσε αυτό να είναι "Άνοιγμα στις επαφές"; "Βοήθεια, υπάρχει κάποιος που με ακολουθεί"; Ίσως αυτό να είναι ένα κουμπί για τη σωτηρία σας "Τηλεφωνήστε σε φίλο".

Κουμπί μυστηρίου 4

Κρεμάστε, αυτό είναι το κουμπί "Άνοιγμα στις επαφές". Ή είναι αυτό το "κουτσομπολιό για έναν φίλο" αφού το άτομο βρίσκεται μέσα σε μια φούσκα ομιλίας;

Είστε έτοιμοι για τον τελικό γύρο; Εδώ είναι το χειρότερο (και πιο χρησιμοποιημένο) εικονίδιο:

Κουμπί μυστηρίου 5

Μπορεί να πιστεύετε ότι το κουμπί "+" είναι αρκετά απλό να κατανοηθεί - είναι προφανώς ένα κουμπί για τη δράση "Προσθήκη". Αλλά προσθέστε τι;

Προσθέστε τι: αυτό είναι το πρόβλημα ακριβώς εκεί. Αν ένας χρήστης πρέπει να θέσει αυτό το ερώτημα, το κουμπί σας είναι επίσημα μυστήριο κρέας. Δυστυχώς, οι προγραμματιστές και οι σχεδιαστές εφαρμογών σχεδίασης υλικών φαίνεται να είναι ερωτευμένοι με το κουμπί "+" επιπλέουσας ενέργειας.

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

Το κουμπί

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

Ίδιο εικονίδιο, διαφορετικές έννοιες:

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

Περισσότερα για κουμπιά επιπλέουσας ενέργειας:

Απεργία 3: Η νέα γραμμή πλοήγησης στο κάτω μέρος

Αυτό μας φέρνει στην κάτω γραμμή πλοήγησης, που εισήχθη το Μάρτιο του 2016.

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

Κάτω γραμμή πλοήγησης με 3 προβολές: Μέχρι στιγμής, τόσο καλά

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

Κάτω γραμμή πλοήγησης με 4 προβολές: μυστήριο κρέας

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

Αυτό είναι απλά κακό σχέδιο UX. Στην πραγματικότητα, ο Nielsen Norman Group ισχυρίζεται ότι τα εικονίδια χρειάζονται μια ετικέτα κειμένου, ειδικά τα εικονίδια πλοήγησης (δική τους έμφαση):

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

Το πιο πρόσφατο στοιχείο UI του υλικού σχεδίου που εγκρίνει την πλοήγηση με μυστήριο κρέας δεν είναι μόνο απογοητευτικό, αλλά και περίεργο. Γιατί πρέπει να εμφανίζονται ετικέτες κειμένου όταν υπάρχουν 3 προβολές, αλλά να κρύβονται όταν υπάρχουν 4-5 προβολές;

Μια προφανής απάντηση θα ήταν οι περιορισμοί χώρου.

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

iOS στην εφαρμογή App Store, Ρολόι και Μουσική: 5 εικονίδια, όλα με ετικέτες κειμένου

Η Google είτε αποφάσισε ότι τα εικονίδια μπορούν να αντιπροσωπεύσουν επαρκώς τις ενέργειες πλοήγησης (που είναι κακές), είτε αποφάσισαν ότι η αισθητική νοστιμιότητα είναι πιο σημαντική από τη χρηστικότητα (κάτι που είναι χειρότερο). Είτε έτσι είτε αλλιώς, η απόφασή τους επιδείνωσε το UX εκατομμυρίων χρηστών Android.

Σχεδιασμός Υλικού και Λειτουργία Φόρμας

Όταν το Design Design ξεκίνησε το 2014, ήταν πολύ φανταστικό. Είναι τολμηρό, και βόλτες (και ένα-ups) την επίπεδη τάση σχεδιασμού. Η σύζευξη των ζωντανών χρωμάτων και των κινούμενων σχεδίων καθιστά όμορφη την εμφάνιση.

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

Ξανά και ξανά, οι οδηγίες της Google για σημαντικά κουμπιά και μπάρες φαίνεται να δίνουν προτεραιότητα στη λειτουργία της φόρμας. Η γεωμετρική ακρίβεια επιλέχθηκε έναντι της αναγνωσιμότητας στη γραμμή πλοήγησης του Android. Η αισθητική απλότητα προπαγανδίστηκε στα κουμπιά επιπλέουσας δράσης, μετατρέποντάς τα σε αινίγματα στη διαδικασία. Τέλος, η οπτική καθαρότητα θεωρήθηκε πιο σημαντική από τις σημαντικές ετικέτες στις κάτω γραμμές πλοήγησης.

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

Ταχύτητα γράφημα που δείχνει τη σωστή (μπλε) επιτάχυνση για κινούμενα σχέδια

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

Μετά από όλα, ένα κινούμενο κουμπί μυστήριο είναι ακόμα λιγότερο ευχάριστο από ένα στατικό αλλά με σαφήνεια σημασμένο κουμπί.