Mega Menus

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

Σχεδιάζοντας τα Mega Menus για τη Zefxis

Η ιστοσελίδα της Zefxis έχει 4 βασικές κατηγορίες: Η Εταιρεία, Υπηρεσίες, Έργα και Επικοινωνία. Θέλαμε να κρατήσουμε το κεντρικό μενού απλό, ώστε να μπορούν οι χρήστες να εστιάσουν εύκολα στα πιο σημαντικά μέρη του site.

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

Δευτερεύον μενού – όχι αρκετό

Μαζί με το βασικό μενού είχαμε ήδη σχεδιάζει ένα εύχρηστο οριζόντιο δευτερεύον μενού, το οποίο έδειχνε τις υπο-σελίδες της επιλεγμένης σελίδας. Κάποιες από αυτές όμως, όπως το Genesis CMS, οι Συχνές Ερωτήσεις, οι Ευκαιρίες Καριέρας κλπ ανήκουν στο 1ο επίπεδο, αλλά γίνονται link κυρίως από (αρκετές) διάσπαρτες σελίδες, χωρίς όμως να εμφανίζονται, λόγω οργάνωσης της πληροφορίας, ούτε στο βασικό, ούτε στο δευτερεύον μενού. Έπρεπε να τις κάνουμε πιο προσβάσιμες και να βοηθήσουμε τους επισκέπτες να τις βρουν πιο εύκολα.

Drop down menus – δεν είναι εύχρηστα

Η πρώτη λογική σκέψη είναι να χρησιμοποιηθούν drop down menus στο βασικό μενού. Το κακό είναι ότι τα controls αυτά δεν είναι στ' αλήθεια εύχρηστα. Μάλιστα, έχουν αρκετά μειονεκτήματα (δείτε το άρθρο του Jacob Nielsen για τα drop down menus, κείμενο στα αγγλικά). Αν και ήδη το ξέραμε αυτό, κάναμε μια γρήγορη υλοποίηση τους, για να επιβεβαιώσουμε τελικά ότι όντως δεν ήταν σωστή λύση.

Mega Menus

Και έπειτα ήρθαν τα Mega Menus. Πρόκειται για έναν ειδικό τύπο από drop down menus, τα οποία είναι πιο σύνθετα και παρέχουν σημαντικά καλύτερη λειτουργικότητα. Θέλαμε να τα κάνουμε όσο πιο εύχρηστα γίνεται, οπότε αποφασίσαμε να μελετήσουμε και την παραμικρή λεπτομέρεια, προκειμένουν να γίνουν καλύτερα.

Ακολουθήσαμε τις υποδείξεις του Jacob Nielsen για τα Mega Menus (κείμενο στα αγγλικα), καθώς και κάποια επιπλέον usability tips που είχαμε στο μυαλό μας.

Τα πιο σημαντικά στοιχεία που προσέξαμε στην υλοποίηση είναι τα εξής:

• Τα links στο βασικό μενού έχουν ένα εικονίδιο που δείχνει ότι θα εμφανιστεί ένα drop down menu όταν το ποντίκι τοποθετηθεί πάνω τους. Είναι ένα μικρό τριγωνάκι που δείχνει προς τα κάτω.
• Οι επιλογές πλοήγησης μέσα στο Mega Menu είναι δομημένες με προσοχή και ξεχωρίζουν με τη χρήση συγκεκριμένης τυπογραφίας και διάταξης. Αυτό βοηθάει το μενού να είναι καθαρό και μειώνει το χρόνο που χρειάζεται ο χρήστης για να βρει αυτό που ψάχνει.
• Το περιεχόμενο κάθε μενού είναι εμφανές ολόκληρο και δε χρειάζεται scrolling για να φανούν όλα τα links. (αυτό θα έκανε πολύ δύσχρηστο το μενού και θα εκνεύριζε τους χρήστες).
• Ο χρόνος απόκρισης για να εμφανιστεί το μενού από τη στιγμή που ο χρήστης τοποθετεί το ποντίκι του πάνω σε ένα link του βασικού μενού ορίστηκε στα 300 milliseconds. Ο Nielsen προτείνει 500 ms, αλλά ύστερα από δοκιμές, αποφασίσαμε ότι για το target group της συγκεκριμένης ιστοσελίδας χρειαζόταν μια μείωση του χρόνου απόκρισης. Η εμφάνιση του μενού χωρίς καθόλου καθυστέρηση είναι απαγορευτική. Κάτι τέτοιο θα ενοχλούσε τους χρήστες, γιατί θα ένιωθαν ότι συνέβη κάτι χωρίς να το θέλουν οι ίδιοι.
• Η εμφάνιση του μενού γίνεται μέσα σε 100ms, με χρήση fade-in. Αυτός ο χρόνος είναι καλός για να νιώσει ο χρήστης ότι αυτό που έγινε προκλήθηκε από δική του ενέργεια και ότι έχει τον έλεγχο των γεγονότων που συμβαίνουν στην ιστοσελίδα.
• Το mega menu εξαφανίζεται αν το ποντίκι φύγει από την επιφάνεια του mega menu και παραμείνει έξω από αυτήν για 500 ms. Είναι σημαντικό να μην εξαφανίζεται αμέσως, γιατί κάποιοι χρήστες μπορεί να κουνήσουν το ποντίκι εκτός της ενεργής περιοχής κατά λάθος.
• Το μενού εξαφανίζεται γρήγορα και συγκεκριμένα στα 100ms.
• Οι επιλογές σε κάθε megamenu είναι ομαδοποιημένες σε λογικά σετ. Δεν έχουμε πολύ μικρό αριθμό ομάδων με υπερβολικά πολλές επιλογές, ούτε πολλές ομάδες με 1-2 επιλογές το καθένα. Έτσι το μενού είναι ευανάγνωστο και οι επιλογές του χρήστη είναι ξεκάθαρες, με αποτέλεσμα να χρειάζεται λιγότερο χρόνο να προχωρήσει στην ενέργειά του.
• Ο τίτλος σε κάθε ομάδα είναι σύντομος, αλλά περιγραφικός. Δεν περιέχει επιτηδευμένους ή "φτιαχτούς" όρους που δε γνωρίζει ο κόσμος, ενώ η πρώτη λέξη του τίτλου είναι η πιο σημαντικό λέξη του. Το ίδιο ισχύει και για τους τίτλους των links. Αυτό και πάλι βοηθάει τους χρήστες να κάνουν γρήγορες επιλογές.
• Οι πιο σημαντικές ομάδες είναι πιο πάνω στο μενού.
• Κάθε επιλογή εμφανίζεται μόνο μια φορά. Το αντίθετο θα μπέρδευε το χρήστη.
• Τα mega menus δεν περιέχουν τίποτα άλλο εκτός από τίτλους ομάδων και links. Συγκεκριμένα, δεν έχουν άλλα πεδία όπως αναζήτηση, είσοδο χρήστη, ή οτιδήποτε θα τα έκανε βαριά και δυσκίνητα.
• Κάθε link του βασικού μενού, εκτός από το να ανοίγει το mega menu είναι και αληθινό link, το οποίο οδηγεί σε μια γενική κατηγορία με καλό και χρήσιμο περιεχόμενο.

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