Τι είναι Mega Drop Down menus; Ανάλυση και παραδείγματα.

Σπύρος Παπασπυρόπουλος | Web Professional, 4 Μαρτίου 2011 | UID | 0 Σχόλια

Η χρήση των 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;

Τα περισσότερα χαρακτηριστικά αναφέρονται ξεκάθαρα και στον παραπάνω όρο της έννοιας. Συγκεκριμένα:

1. Μεγάλα δισδιάστατα πλαίσια πλοήγησης με ομαδοποιημένο περιεχόμενο.
2. Οι επιλογές πλοήγησης είναι ξεκάθαρες και ενισχυμένες από την χρήση εικονιδίων, φωτογραφιών, ξεκάθαρου typography και tooltips.
3. Όλες οι επιλογές είναι εμφανείς στον χρήστη από την αρχή. Δεν υπάρχει scrolling του μενού ή της σελίδας που φιλοξενεί το μενού ώστε να χάνεται κάποια στιγμή η αρχική επιλογή από το πολύ scrolling.
4. Είναι μενού που προσφέρει γρήγορη πλοήγηση με ένα κλικ.

Πότε χρειάζεται ένα Mega Drop Down menu;

Για να χρησιμοποιηθεί ένα Mega Drop Down menu στο design ενός διαδικτυακού τόπου, θα πρέπει να απαντηθούν θετικά τουλάχιστον οι 2 πρώτες από τις παρακάτω ερωτήσεις:

1. Το website έχει μεγάλο βάθος επιπέδων δομής;
2. Το κάθε επίπεδο δομής περιέχει πολλές επιλογές;
3. Απαιτείται ομαδοποίηση της πληροφορίας σε επίπεδο πλοήγησης;

Πως γίνεται η καλύτερη ομαδοποίηση των επιλογών πλοήγησης;

1. Η αρχική στρατηγική ομαδοποίησης γίνεται ακολουθώντας την λογική δομή του διαδικτυακού τόπου. Αυτό σημαίνει πως αν ο διαδικτυακός τόπος έχει μια συγκεκριμένη δομή, το Mega Drop Down menu θα ακολουθήσει και αυτό εκείνη την δομή. Για καλύτερα αποτελέσματα μπορούν οι τίτλοι των ομάδων πλοήγησης να εμφανίζονται με διαφορετική γραμματοσειρά η μορφοποίηση. Αυτό όμως δεν μπορεί να θεωρηθεί σαν η καλύτερη λύση σε όλες τις περιπτώσεις.
2. Αν η παραπάνω τακτική δεν είναι αρκετή, τότε η παρουσίαση των ομαδοποιημένων επιλογών γίνεται με σειρά προτεραιότητας (σημασίας). Είναι προτιμότερο να γίνεται τοποθέτηση των σημαντικότερων ομάδων επιλογών στο σημείο που βρίσκεται κοντά στην κεντρική πλοήγηση του website. Δηλαδή αν υπάρχει μια κεντρική πλοήγηση π.χ. που το πρώτο της επίπεδο περιέχει την επιλογή “Υπηρεσίες”, τότε, από τις ομάδες επιλογών που υπάρχουν στην κατηγορία αυτή (Υπηρεσίες), είναι προτιμότερο να τοποθετούνται εκείνες με την μεγαλύτερη σημασία κοντά στο σημείο όπου το Mega Drop Down menu ανοίγει. Δηλαδή κοντά στην λέξη “Υπηρεσίες” του κεντρικού συστήματος πλοήγησης.
3. Επίσης είναι σημαντικό να μην επαναλαμβάνονται στις επιλογές της ομαδοποιημένης πλοήγησης διπλοί όροι, ακόμα και αν αναφέρονται σε διαφορετικές κατηγορίες. Είναι χαρακτηριστικό των Mega Drop Down menus να έχουν όλο το σύστημα πλοήγησης εμφανιζόμενο, οπότε θα φαίνονται οι διπλές ονομασίες και θα μπερδεύουν τους χρήστες.
4. Τέλος με την χρήση του Title attribute μπορεί να επιτευχθεί ενίσχυση της κάθε επιλογής εντός του συστήματος πλοήγησης κάνοντας ακόμα πιο ξεκάθαρη την λειτουργία της για τους χρήστες.

Ποια είναι τα πλεονεκτήματα της χρήσης των Mega Drop Down menus;

1. Άμεση πρόσβαση σε οποιοδήποτε επίπεδο ή σημείο επιθυμεί ο χρήστης.
2. Δημιουργία “λογικής” του διαδικτυακού τόπου και συνηθειών πλοήγησης στο μυαλό του χρήστη μέσα από οπτική απεικόνιση της δομής.
3. Αποφυγή αχρείαστου scrolling εντός των drop down menus του διαδικτυακού τόπου, το οποίο θα μπορούσε να δημιουργήσει εν συνεχεία και scrolling στις σελίδες του site όταν αυτό (το μενού) είναι σε πλήρη ανάπτυξη.
4. Ενίσχυση του SEO του διαδικτυακού τόπου γιατί με την χρήση Mega Drop Down menus γίνεται και αυτομάτως internal linking των σελίδων του website.

Παραδείγματα πετυχημένης χρήσης Mega Drop Down menus

Ακολουθεί μια λίστα από διαδικτυακούς τόπου που χρησιμοποιούν Mega Drop Down menus για να ενισχύσουν την εμπειρία της πλοήγησης και που αξίζει να σημειωθούν σαν σημεία αναφοράς και έμπνευσής. Κάθε μια περίπτωση προσφέρει ξεκάθαρα ομαδοποιημένες επιλογές η οποίες μπορούν πολύ εύκολα και γρήγορα να “σκαναριστούν” με το μάτι και να οδηγήσουν γρήγορα και κατανοητά τους χρήστες στα σημεία που τους ενδιαφέρουν.

Bentley Motors

http://www.bentleymotors.com/

Clinique

http://www.clinique.com/index.tmpl

Converse

http://www.converse.com/

Electronic Arts

http://www.ea.com/

Gateway Computers

http://www.gateway.com/

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

http://www.mtv.com/

NPR

http://www.npr.org/

REI

http://www.rei.com/

Republic

http://www.republic.co.uk/

Reuters

http://www.reuters.com/

Starbucks

http://www.starbucks.com/

White House

http://www.whitehouse.gov/

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

http://codecanyon.net/item/css3-mega-drop-down-menu/126387?clickthrough_id=&redirect_back=true&ref=105

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 μας.

Ο Σπύρος Παπασπυρόπουλος είναι βραβευμένος Web Professional που δραστηριοποιείται στον χώρο του επαγγελματκού Web Design και του Search Engine Optimisation (SEO) από το 1999. Το 2004 ίδρυσε μαζί με τον Γιάννη Ευσταθίου την βραβευμένη εταιρία x2interactive Web Agency και το 2008 το Web Design Blog.