Σχεδιάζοντας μια ιδέες και έμπνευση για το Winning Navigation Menu
Το μενού πλοήγησης σε έναν ιστότοπο είναι σαν μια πινακίδα δρόμου σε έναν δρόμο ή έναν κατάλογο επιπέδων σε ένα εμπορικό κέντρο. Δεν μπορείτε να φτάσετε στον προορισμό σας χωρίς να ξέρετε πού βρίσκεστε. Όπως και στην πραγματική ζωή, η πλοήγηση στο σχεδιασμό ιστοσελίδων είναι πολύ σημαντική και παίζει σημαντικό ρόλο στη χρηστικότητα ενός ιστοτόπου καθώς και στην εμπειρία του χρήστη.
Σήμερα μπορείτε να δείτε πολλά διαφορετικά είδη μενού πλοήγησης με ενδιαφέροντα, δημιουργικά και ασυνήθιστα σχέδια. Αλλά πώς για την αποτελεσματική πλοήγηση σε μια ιστοσελίδα, τι θα μοιάζει? πώς πρέπει να μοιάζει?
Σήμερα θα ήθελα να μοιραστώ τις παρατηρήσεις και τις γνώσεις μου σχετικά με τη σημασία της πλοήγησης στον σχεδιασμό ιστοσελίδων. Θα σας αποκαλύψω μερικές απλές συμβουλές που μπορείτε να χρησιμοποιήσετε για να βελτιώσετε την πλοήγηση και τη χρηστικότητα της ιστοσελίδας σας. Θα υπάρχουν επίσης ορισμένα παραδείγματα αποτελεσματικών μενού πλοήγησης για να σας δώσουμε κάποια ιδέα για το πώς να σχεδιάσετε το επόμενο σχέδιό σας.
Αρχιτεκτονική Πληροφοριών
Ο σχεδιασμός πλοήγησης πρέπει να ξεκινά με την αρχιτεκτονική των πληροφοριών Είναι ζωτικής σημασίας να καθίσετε και προβληματισμό σχετικά με την αρχιτεκτονική πληροφόρησης μιας ιστοσελίδας. Πρέπει να υπολογίσετε τι είδους χαρακτηριστικά του ιστότοπου προσφέρει, τι είναι το πιο σημαντικό και τι θα μπορούσε να τοποθετηθεί σε χαμηλότερα επίπεδα στην ιεραρχία των πληροφοριών.
Η αρχιτεκτονική πληροφοριών περιλαμβάνει χαρακτηριστικά, ανάγκες χρηστών, sitemap, δοκιμές και wireframes. Μπορείτε να διαβάσετε περισσότερα για την αρχιτεκτονική των πληροφοριών σε άρθρο του Cameron Chapman στην Αρχιτεκτονική Πληροφοριών 101: Τεχνικές και Βέλτιστες Πρακτικές.
Χρήση τεχνολογιών με δυνατότητα χρήστη
Αποφύγετε τη χρήση του Flash, του JavaScript, του jQuery ή οτιδήποτε άλλο που κινδυνεύει να εμποδίσει την πρόσβαση στην πλοήγηση του ιστότοπού σας στην οικοδόμηση της γραμμής πλοήγησης ή τουλάχιστον να βεβαιωθείτε ότι είναι σε θέση να υποβαθμίσει με χαρά.
Για περισσότερες αναφορές στο χαριτωμένη υποβάθμιση του javascript, ελέγξτε αυτή την ανάρτηση σε 10 χρήσιμες μεθόδους απόσβεσης για CSS και Javascript.
Χρησιμοποιήστε απλούς, φιλικούς προς τον χρήστη όρους
Είναι καλύτερα να το χρησιμοποιήσετε απλά, προφανή και όρους που είναι εύκολο να καταλάβουμε από ό, τι για να διατηρήσετε τους όρους που αφορούν μόνο τον κλάδο για το μενού πλοήγησης. Οποιοσδήποτε σύνδεσμος που λαμβάνει τους χρήστες περισσότερο από ένα δευτερόλεπτο ή δύο για να καταλάβουν είναι πιθανώς ακατάλληλο για χρήση.
Εάν ένας χρήστης πρέπει να κάνει κλικ σε έναν σύνδεσμο για να καταλάβει τι οδηγεί ο σύνδεσμος τότε αυτό θα συμβάλει σε μια κακή εμπειρία χρήστη για τους επισκέπτες σας.
Παραδείγματα
Οι όροι στο μενού πλοήγησης της ιστοσελίδας της Larissa Ness είναι εύκολο να κατανοηθούν και αρκετά κοινός. Οι χρήστες δεν θα το βρίσκουν συγκεχυμένο επειδή έχουν ήδη εμπειρία με μενού όπως αυτό.
Ακολουθεί ένα καλό παράδειγμα ενός καθαρού και καθαρού μενού πλοήγησης με τους κοινούς όρους που χρησιμοποιούνται, στο csupport.
Η δημιουργική αντιπροσωπεία Eighty8Four χρησιμοποιεί τον όρο "εκθεσιακό χώρο" που μπορεί να προκαλέσει σύγχυση στους επισκέπτες. Αυτός ο όρος μπορεί να σημαίνει χαρτοφυλάκιο ή εργασία, αλλά δεν είναι σαφές και οι επισκέπτες δεν έχουν άλλη επιλογή παρά να κάνουν κλικ για να το ελέγξουν.
Τυποποιήστε το σχέδιο πλοήγησης
Χρησιμοποιήστε το ίδιο μοντέλο πλοήγησης σε όλες τις σελίδες σας. Είναι πολύ σημαντικό επειδή χωρίς ένα συνεπή σχεδιασμό, ένας χρήστης μπορεί πραγματικά να σκεφτεί ότι βρίσκεται σε άλλη ιστοσελίδα. Βεβαιωθείτε ότι χρησιμοποιείτε το ίδιο μοντέλο πλοήγησης έτσι ώστε οι χρήστες να μπορούν εύκολα να μεταβούν στον ιστότοπό σας χωρίς να χάνονται.
Μπλάργκ, όπως φαίνεται παρακάτω, χρησιμοποιεί ένα απλό και καθαρό σχέδιο πλοήγησης το οποίο παραμένει το ίδιο σε όλες τις υποσελίδες. Η μόνη διαφορά είναι η ένδειξη χρώματος, η οποία δείχνει τη σελίδα που βρίσκεται στον επισκέπτη.
Υποδείξτε πού βρίσκεστε
Είναι ζωτικής σημασίας να ενημερώνεται ο χρήστης πού βρίσκεται ανά πάσα στιγμή. Μπορείτε να το κάνετε αυτό αλλάζοντας το φόντο του συνδέσμου, το χρώμα του ονόματος της σελίδας ή στρέψτε το κείμενο με έντονα γράμματα στο μενού πλοήγησης για να το κάνετε διαφορετικό από τους άλλους.
Austin Eastciders χρησιμοποιεί διαφορετικό χρώμα και φόντο για να υποδείξει τη σελίδα που χρησιμοποιεί ο χρήστης. Αυτός ο δείκτης μπορεί επίσης να λειτουργήσει ως μια λεπτή αλλαγή σχεδιασμού, για παράδειγμα χρησιμοποιώντας ένα διαφορετικό φόντο πλοήγησης που δημιουργεί την αίσθηση ότι άλλα στοιχεία του μενού είναι σε βάθος.
Media Χειρουργική χρησιμοποιεί ένα πιο σκούρο χρώμα ως ένδειξη για μια ανοιχτή υποσελίδα. Απλό αλλά αποτελεσματικό.
Χρησιμοποιήστε συμβάσεις ιστού
Είναι όλα σχετικά με την εύκολη στη χρήση και την έξυπνη πλοήγηση στον ιστότοπο. Οι συμβάσεις Ιστού καθιστούν πολύ πιο εύκολο για τους σχεδιαστές να εργάζονται γύρω από τα σχέδιά τους. Οι περισσότεροι χρήστες θα κάνουν κλικ στο λογότυπο της ιστοσελίδας για να επιστρέψουν στην αρχική σελίδα, οπότε σχεδιάστε το λογότυπό σας για να το κάνετε αυτό.
Εάν δεν το κάνετε, τους κάνετε να ξοδέψετε χρόνο για να μάθετε κάτι νέο ή σε ορισμένες περιπτώσεις τους ενοχλούν, παρέχοντας αυτό που αναμένουν να είναι κοινά αποδεκτά πρότυπα πλοήγησης.
Μπορείτε να μάθετε περισσότερα σχετικά με τις συμβάσεις ιστού εδώ:
- 10 συμβάσεις σχεδίασης ιστοσελίδων
- Μην επανεμφανίσετε τον τροχό σχεδιασμού ιστοσελίδων
- Σχεδιασμός με συμβάσεις Web
Εγχύστε το σχέδιο τοποθετεί το λογότυπο στην επάνω αριστερή γωνία που ταιριάζει σήμερα με μία από τις πιο συνηθισμένες συμβάσεις ιστού.
Δημιουργία Adams χρησιμοποιεί μία από τις συνηθέστερες συμβάσεις ιστού - το λογότυπο τοποθετείται στην επάνω αριστερή γωνία της ιστοσελίδας και συνδέεται με την αρχική σελίδα.
Δοκιμάστε το: Συμμετέχετε σε ένα τρίτο μέρος
Πάντα δοκιμάστε το σχεδιασμό πλοήγησης σας με οποιοδήποτε άτομο που έχει χρησιμοποιήσει το Internet πριν. Ίσως θελήσετε να φέρετε άτομα που δεν σχετίζονται με τη διαδικασία σχεδιασμού για να το δοκιμάσουν. Παρατηρήστε τις προτιμήσεις τους όταν πλοηγούν μέσω του ιστότοπού σας και να αναλύσετε το χρόνο που χρειάστηκε για να βρουν τις σελίδες για τις οποίες αναζητούσαν.
Για καλύτερη ακρίβεια, εμπλέκουν περισσότερους ανθρώπους, συλλέγουν τα δεδομένα, αναλύουν και συνοψίζουν τα δεδομένα για καλύτερη προσαρμογή. Διεξάγετε έρευνα μετά από δοκιμή, εάν είναι απαραίτητο. Μπορεί να έχετε κάποιες απροσδόκητες ιδέες και εισροές που διαφορετικά δεν θα εντοπίζονταν χωρίς αυτή τη δοκιμαστική λειτουργία.
Παρέχετε ένα πλαίσιο
Για να είστε συνεπείς με το περιεχόμενό σας και την πλοήγησή σας, παρέχετε κάποιο πλαίσιο για τους χρήστες του ιστότοπου να βρίσκουν γρήγορα τα πράγματα που χρειάζονται. Μπορείτε να τοποθετήσετε μικρά εικονίδια που σχετίζονται με το περιεχόμενο στο οποίο συνδέεστε ή σύντομες περιγραφές για να δώσετε μια επισκόπηση του τι είναι η σελίδα.
Το δικό μου ποδήλατο χρησιμοποιεί απλά εικονίδια για να δώσει στους χρήστες περισσότερες πληροφορίες σχετικά με το τι μπορούν να βρουν σε ορισμένες υποσελίδες.
Σάρα Παρμεντερ χρησιμοποιεί σύντομες και ωραίες λεζάντες κάτω από την κύρια πλοήγηση για να παρέχει κάποιες πληροφορίες σχετικά με τις υποσελίδες στις οποίες συνδέεται η κύρια πλοήγηση.
SEO σκοπούς
Το Google προτιμά την συνεπή πλοήγηση. Είναι καλό να έχετε συνεπή πλοήγηση όχι μόνο για τους χρήστες να κατανοήσουν και να πάρουν την ιδέα για το πώς να πλοηγηθείτε μέσω του ιστοτόπου σας, αλλά και για τις μηχανές αναζήτησης για να δείξετε τον ιστότοπό σας.
Τα ρομπότ μηχανών αναζήτησης θα ανιχνεύσουν τον ιστότοπό σας για να ευρετηριάσουν τον ιστότοπό σας και να βάλουν τους συνδέσμους στη σελίδα αποτελεσμάτων μηχανών αναζήτησης. Εάν θέλετε να είστε ορατοί, δώστε προσοχή σε καλό σχεδιασμό πλοήγησης και κερδίστε περισσότερη κίνηση.
Δωρεάν δέσμες ενεργειών πλοήγησης (CSS και jQuery)
Ακολουθεί μια σύντομη λίστα με τα πιο πρόσφατα μενού πλοήγησης που μπορείτε να βρείτε χρήσιμα για τα έργα σας. Αυτά τα σενάρια θα βελτιώσουν ακόμα περισσότερο τον χρήστη του προϊόντος σας προσθέτοντας μερικά ωραία χαρακτηριστικά και καθιστώντας την ευχαρίστηση να το χρησιμοποιήσετε.
XML-driven Vertical News Scroller Script χρησιμοποιώντας HTML και jQuery: vScroller
Φιλτράρετε
Page Scroller
Χρονοδιάγραμμα χαρτοφυλακίου
HorizontalNav
CSS3 Μινιμαλιστικό μενού πλοήγησης
Επίδραση πλοήγησης κύκλου με το CSS3
Επιδράσεις πλοήγησης πλέγματος με το jQuery
Ascensor
Δημιουργήστε ένα κομψό μενού πλοήγησης CSS3
Παρουσίαση όμορφης οριζόντιας πλοήγησης
Και τελευταίο αλλά όχι λιγότερο σημαντικό μερικά οριζόντια μενού πλοήγησης. Ελέγξτε αυτές τις εκπληκτικές ιστοσελίδες και τις λύσεις μενού πλοήγησης για να βρείτε νέες ιδέες για τα έργα σας.
Ch3mical
Bloom Search Marketing Inc.
Alex Perez
Libor Zezulka
Hauska!
Χρυσή Ακτή
Νιλ Κάρπερτερ
Μάρκ Τόμας
3D Πολυστυρένιο
Liechtenecker
Περιπέτεια κόσμο
Φωτογραφία Arbutus
OMDRL
4 Pines Beer
Κυνήγι κυνηγών
Ας ελπίσουμε ότι θα βρείτε αυτό το άρθρο χρήσιμο και ενημερωτικό. Αν έχετε οποιεσδήποτε σκέψεις ή εάν διαφωνείτε, παρακαλώ μοιραστείτε τη γνώμη σας στην ενότητα σχολίων.
