6 τρόποι για καινοτόμο πλοήγηση Ενισχύει το UX

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

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

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

John Gall

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

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

Και όμως δεν αισθάνεται κρύο, υπερβολικά επίσημο ή στερείται προσωπικότητας. Η πλοήγηση, όπως είναι, δεν αισθάνεται δύσκολη ή σκοτεινή. Το περιεχόμενο είναι η πλοήγηση, και αυτό το δίνει ένα ωραίο hands-on, immersive, αίσθηση.

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

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

Ιορδανική σπορά

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

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

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

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

Άνοιγμα ηπείρων

Άνοιγμα ηπείρων είναι μια συλλογή από μικρού μήκους ταινίες από όλο τον κόσμο και μια στρογγυλή στρογγυλή σφαίρα αποτελεί τη βάση της πλοήγησης. Ένα εικονίδιο στην επάνω αριστερή γωνία μετατρέπει τις προβολές μεταξύ της πλοήγησης σφαίρας και μιας απλής οριζόντιας λίστας συνδέσμων.

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

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

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

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

Αρχιτέκτονες της Glamuzina

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

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

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

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

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

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

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

Πλοήγηση υπεύθυνα

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

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

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

Το μενού παίρνει το οπτικό του στοιχείο από το λογότυπο της δανικής ναυτιλίας, το οποίο αντιπροσωπεύει τον κώδικα morse για την DK (τον κωδικό ISO 2 για τη Δανία). Η κινούμενη φόρτωση φόρτωσης γίνεται το μενού, υποδεικνύοντας ότι ο ιστότοπος είναι έτοιμος να εξερευνηθεί. Με τη στροφή στο κείμενο σχετικά με το δείκτη του ποντικιού και την αλλαγή χρώματος στην κάτω κατάσταση, οι παύλες του μενού είναι λειτουργικά καθαρά και οπτικά ελάχιστες.

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

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

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

Sagmeister & Walsh

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

Το διασκεδαστικό / λίγο περίεργο και άβολο κομμάτι είναι στην αρχική σελίδα. Υπάρχει μια άποψη ενός τμήματος των γραφείων της Sagmeister & Walsh με την εμφάνιση και την εργασία, όπως τα κουμπιά μενού που προστέθηκαν στην κορυφή.

Τουλάχιστον αυτό είναι αυτό που μοιάζει με την πρώτη φορά που βλέπετε αυτή τη σελίδα στο 9:30 AM GMT. Κοιτάξτε ξανά στις 11:30 π.μ. EST και θα συνειδητοποιήσετε ότι αυτά τα "κουμπιά" είναι αναμμένα σήματα, και βλέπετε πραγματικούς ανθρώπους που εργάζονται, ζουν (σχεδόν). Κάνοντας κλικ προς τα δεξιά, η προβολή θα εμφανιστεί για να εμφανιστεί ένα άλλο τμήμα του γραφείου, με το μενού να είναι ζωγραφισμένο στο μπροστινό μέρος των γραφείων.

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

συμπέρασμα

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

Οι τοποθεσίες που εξετάσαμε εδώ έχουν ξεπεράσει απλά το "κάντε κλικ εδώ για το x" και προσπαθήσατε να δημιουργήσετε μια απολαυστική, αξέχαστη εμπειρία για τον χρήστη. Η καλή πλοήγηση είναι δυσδιάκριτη, η εξαιρετική πλοήγηση δημιουργεί μια αξιοσημείωτη εμπειρία χρήστη.

• ← 6 τρόποι για την αποφυγή τριβών στο σχέδιό σας
• 5 μαθήματα Οι σχεδιαστές του UX μπορούν να μάθουν από την ανάπτυξη παιχνιδιών →