Τι είναι Mega Drop Down menus; Ανάλυση και παραδείγματα.
Η χρήση των Mega Drop Down menus έχει αρχίσει να γίνεται trend τα τελευταία χρόνια. Τόσο στο εξωτερικό, όσο και στην Ελλάδα, οι επαγγελματίες του χώρου έχουν υιοθετήσει αυτή την μορφή πλοήγησης για να μπορούν να προσφέρουν μια ομαλή εμπειρία στους χρήστες των διαδικτυακών τόπων που έχουν σχεδιάσει. Ένα Mega Drop Down menu μπορεί να βοηθήσει τον μέσο χρήστη να μεταβεί στην πληροφορία που τον ενδιαφέρει, γρήγορα και εύκολα χωρίς να επηρεάζεται από το βάθος / επίπεδο της πληροφορίας.
Τι είναι ακριβώς Mega Drop Down menu;
Η ορολογία της έννοιας σύμφωνα με τον Guru του Usability, Jakob Nielsen, είναι:
Τα Mega Drop Down menus είναι μεγάλα δισδιάστατα πλαίσια πλοήγησης με ομαδοποιημένο περιεχόμενο τα οποία έχουν σαν σκοπό την κατάργηση του scrolling και χρησιμοποιούν εικονίδια, ξεκάθαρο typography και tooltips για να εξηγήσουν στον χρήστη τις επιλογές που έχει.
Ποια είναι τα χαρακτηριστικά των Mega Drop Down menus;
Τα περισσότερα χαρακτηριστικά αναφέρονται ξεκάθαρα και στον παραπάνω όρο της έννοιας. Συγκεκριμένα:
- Μεγάλα δισδιάστατα πλαίσια πλοήγησης με ομαδοποιημένο περιεχόμενο.
- Οι επιλογές πλοήγησης είναι ξεκάθαρες και ενισχυμένες από την χρήση εικονιδίων, φωτογραφιών, ξεκάθαρου typography και tooltips.
- Όλες οι επιλογές είναι εμφανείς στον χρήστη από την αρχή. Δεν υπάρχει scrolling του μενού ή της σελίδας που φιλοξενεί το μενού ώστε να χάνεται κάποια στιγμή η αρχική επιλογή από το πολύ scrolling.
- Είναι μενού που προσφέρει γρήγορη πλοήγηση με ένα κλικ.
Πότε χρειάζεται ένα Mega Drop Down menu;
Για να χρησιμοποιηθεί ένα Mega Drop Down menu στο design ενός διαδικτυακού τόπου, θα πρέπει να απαντηθούν θετικά τουλάχιστον οι 2 πρώτες από τις παρακάτω ερωτήσεις:
- Το website έχει μεγάλο βάθος επιπέδων δομής;
- Το κάθε επίπεδο δομής περιέχει πολλές επιλογές;
- Απαιτείται ομαδοποίηση της πληροφορίας σε επίπεδο πλοήγησης;
Πως γίνεται η καλύτερη ομαδοποίηση των επιλογών πλοήγησης;
- Η αρχική στρατηγική ομαδοποίησης γίνεται ακολουθώντας την λογική δομή του διαδικτυακού τόπου. Αυτό σημαίνει πως αν ο διαδικτυακός τόπος έχει μια συγκεκριμένη δομή, το Mega Drop Down menu θα ακολουθήσει και αυτό εκείνη την δομή. Για καλύτερα αποτελέσματα μπορούν οι τίτλοι των ομάδων πλοήγησης να εμφανίζονται με διαφορετική γραμματοσειρά η μορφοποίηση. Αυτό όμως δεν μπορεί να θεωρηθεί σαν η καλύτερη λύση σε όλες τις περιπτώσεις.
- Αν η παραπάνω τακτική δεν είναι αρκετή, τότε η παρουσίαση των ομαδοποιημένων επιλογών γίνεται με σειρά προτεραιότητας (σημασίας). Είναι προτιμότερο να γίνεται τοποθέτηση των σημαντικότερων ομάδων επιλογών στο σημείο που βρίσκεται κοντά στην κεντρική πλοήγηση του website. Δηλαδή αν υπάρχει μια κεντρική πλοήγηση π.χ. που το πρώτο της επίπεδο περιέχει την επιλογή “Υπηρεσίες”, τότε, από τις ομάδες επιλογών που υπάρχουν στην κατηγορία αυτή (Υπηρεσίες), είναι προτιμότερο να τοποθετούνται εκείνες με την μεγαλύτερη σημασία κοντά στο σημείο όπου το Mega Drop Down menu ανοίγει. Δηλαδή κοντά στην λέξη “Υπηρεσίες” του κεντρικού συστήματος πλοήγησης.
- Επίσης είναι σημαντικό να μην επαναλαμβάνονται στις επιλογές της ομαδοποιημένης πλοήγησης διπλοί όροι, ακόμα και αν αναφέρονται σε διαφορετικές κατηγορίες. Είναι χαρακτηριστικό των Mega Drop Down menus να έχουν όλο το σύστημα πλοήγησης εμφανιζόμενο, οπότε θα φαίνονται οι διπλές ονομασίες και θα μπερδεύουν τους χρήστες.
- Τέλος με την χρήση του Title attribute μπορεί να επιτευχθεί ενίσχυση της κάθε επιλογής εντός του συστήματος πλοήγησης κάνοντας ακόμα πιο ξεκάθαρη την λειτουργία της για τους χρήστες.
Ποια είναι τα πλεονεκτήματα της χρήσης των Mega Drop Down menus;
- Άμεση πρόσβαση σε οποιοδήποτε επίπεδο ή σημείο επιθυμεί ο χρήστης.
- Δημιουργία “λογικής” του διαδικτυακού τόπου και συνηθειών πλοήγησης στο μυαλό του χρήστη μέσα από οπτική απεικόνιση της δομής.
- Αποφυγή αχρείαστου scrolling εντός των drop down menus του διαδικτυακού τόπου, το οποίο θα μπορούσε να δημιουργήσει εν συνεχεία και scrolling στις σελίδες του site όταν αυτό (το μενού) είναι σε πλήρη ανάπτυξη.
- Ενίσχυση του SEO του διαδικτυακού τόπου γιατί με την χρήση Mega Drop Down menus γίνεται και αυτομάτως internal linking των σελίδων του website.
Παραδείγματα πετυχημένης χρήσης Mega Drop Down menus
Ακολουθεί μια λίστα από διαδικτυακούς τόπου που χρησιμοποιούν Mega Drop Down menus για να ενισχύσουν την εμπειρία της πλοήγησης και που αξίζει να σημειωθούν σαν σημεία αναφοράς και έμπνευσής. Κάθε μια περίπτωση προσφέρει ξεκάθαρα ομαδοποιημένες επιλογές η οποίες μπορούν πολύ εύκολα και γρήγορα να “σκαναριστούν” με το μάτι και να οδηγήσουν γρήγορα και κατανοητά τους χρήστες στα σημεία που τους ενδιαφέρουν.
Bentley Motors
Clinique
http://www.clinique.com/index.tmpl
Converse
Electronic Arts
Gateway Computers
Guitar Hero
http://hub.guitarhero.com/games/ghiphone
Intel
http://www.intel.com/p/en_US/business?iid=gg_work+home_business
La Residence Mykonos Luxury Hotel
http://www.laresidencemykonos.com/
MTV
NPR
REI
Republic
Reuters
Starbucks
White House
Mega Drop Down Menu resources
Στο διαδίκτυο υπάρχουν αρκετές λύσεις που μπορούν να χρησιμοποιηθούν για να επιταχυνθεί η διαδικασία της δημιουργίας ενός δυναμικού Mega Drop Down Menu συστήματος πλοήγησης. Μια αναζήτηση σε οποιαδήποτε μηχανή αναζήτησης για τον όρο “Mega Drop Down Menu Scripts” θα επιστρέψει πολλά αξιόλογα αποτελέσματα. Για την διευκόλυνσή σας, έχουν σημειωθεί παρακάτω οι σύνδεσμοι για 4 τέτοιες λύσεις:
CSS Ultimate Menus
http://codecanyon.net/item/css-ultimate-menus/123107?ref=1stwebdesigner
CSS3 Mega Drop Down Menu
Make a Mega Drop-Down Menu with jQuery
http://blogs.sitepoint.com/2009/03/31/make-a-mega-drop-down-menu-with-jquery/
Cut & Paste jQuery Mega Menu
http://www.javascriptkit.com/script/script2/jkmegamenu.shtml
Επίλογος
Αν θέλετε να προσθέσετε κάποιο website ή resource το οποίο πιστεύεται πως πρέπει να μπει στο άρθρο, μην διστάσετε να το γράψετε στα comments. Θα χαρούμε να το προσθέσουμε.
ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο Τι είναι Mega Drop Down menus; Ανάλυση και παραδείγματα. γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.