Η χρήση των 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. Θα χαρούμε να το προσθέσουμε.

ο Web Design Blog ανακάλυψε δύο post από το Vandeley Design, τα οποία παρουσιάζουν μια σειρά από 100+ εντυπωσιακά designs από navigation systems σε websites. Τα websites έχουν το κάθε ένα το δικό τους στυλ, αλλά αυτό που έχει σημασία είναι πως έχουν καταφέρει να σχεδιάσουν το σύστημα πλοήγησής τους με τέτοιον τρόπο, ώστε να αποτελεί μέρος του συνολικού έργου χωρίς να βρίσκεται εκεί απλά ως μενού. Φιλτράροντας την λίστα του Vandeley Design που βρίσκεται χωρισμένη σε 2 άρθρα, εδώ και εδώ, σας παρουσιάζουμε αυτά που εμείς θεωρούμε ως τα 25 καλύτερα navigation systems από αυτά που προτείνει. Σίγουρα μια πολύ καλή πηγή έμπνευσης για επόμενα design σας.

30elm

Ad Fed

Africa Tour 2008

Ashville School

Bird Malaysia

BlackBook Magazine

Branded07

Buffalo

Carbonica

Create and Live

DrupalCon DC

Fall for Tennessee

David Hellmann

Interspire

Jamie’s Italian

MacAllen Ridge

Michael Coyle

Navigant Consulting

Paolo Boccardi

Rockatee

Rzepak Pure

Soh Tanaka

Thuiven

Tennessee Vacation

Viget Extend

Ένα πολύ έυχρηστο εργαλείο για τη δημιουργία συστημάτων πλοήγησης με τεχνολογία CSS είναι το IzzyMenu. Το IzzyMenu είναι μια WEB 2.0 εφαρμογή η οποία δίνει τη δυνατότητα στους εγγεγραμμένους χρήστες να δημιουργούν CSS Menus τα οποία έχουν επαγγελματική όψη.

Υπάρχει μια πληθώρα από WEB 2.0 στυλ από τα οποία μπορείτε να επιλέξετε όποιο εσείς θέλετε. Η βιβλιοθήκη με τα μενού ανανεώνεται συνεχώς από την ομάδα του IzzyMenu, δίνοντάς σας κάθε τόσο νέες επιλογές.

Επομένως, είτε είστε ένας έμπειρος Web Designer, είτε μόλις τώρα ξεκινάτε να ασχολείστε με τα CSS σίγουρα αξίζει τον κόπο να δείτε το IzzyMenu.