Βασικές αρχές δόμησης των μενού σε ιστοσελίδες και online καταστήματα

Αρχές δόμησης των μενού

Όταν φτιάχνουμε ένα site, είτε παρουσίασης, είτε online καταστήματος, θέλουμε να ακολουθούμε τις αρχές που έχουν συνηθίσει οι χρήστες, προκειμένου να τους κάνουμε πιο εύκολη τη χρήση του.

Τα μενού είναι ένα από τα πιο κρίσιμα σημεία που πρέπει να δομήσουμε σωστά, καθώς δεν επιτελούν μόνο το ρόλο της διάχυσης της πληροφορίας σε υποσελίδες, αλλά είναι και ένα από τα σημεία που σκανάρουν με το μάτι τους οι χρήστες, όταν μπαίνουν σε ένα site προκειμένου να καταλάβουν το τι προσφέρει το site και ποιο είναι το αντικείμενό του. Είναι ένας από τους τρόπους με τους οποίους προσπαθούν να απαντήσουν στην ερώτηση: “Είμαι στο σωστό site για αυτό που ψάχνω, ή να το κλείσω και να πάω σε άλλο;”

Τα μενού λοιπόν πρέπει να τα προσέξουμε τόσο για λόγους ευχρηστίας, όσο και για λόγους σαφήνειας του site. Πάμε να δούμε από ποιες βασικές αρχές διέπονται.

1. Το site μπορεί να έχει παραπάνω από ένα μενού. Τα περισσότερα site όμως έχουν ένα κεντρικό μενού, το οποίο εμφανίζεται είτε οριζόντια, είτε κάθετα, αλλά και το footer μενού, στο υποσέλιδο. Κάποια site μπορεί να έχουν και επιπλέον βοηθητικά μενού.

2. Στο κεντρικό μενού, ειδικά αν πρόκειται για site παρουσίασης, προσπαθούμε να κρατάμε τον αριθμό των επιλογών όσο το δυνατόν μικρότερο, ώστε και να προβάλλουμε τα πιο σημαντικά σημεία, αλλά και να κάνουμε εύκολη την εύρεση από τους επισκέπτες των σημαντικών σελίδων. Στο site της Netstudio το κεντρικό μενού έχει μόλις έξι επιλογές (παρ’όλο που το site περιέχει περισσότερες από 250 υποσελίδες).

Netstudio Menu
Το κεντρικό μενού από το site της Netstudio (σημειωμένο μέσα σε κίτρινο πλαίσιο) εμφανίζεται οριζόντια στο πάνω μέρος, δεξιά από το λογότυπο.

3. Σε μικρές οθόνες (ταμπλέτες και κινητά) κρύβουμε το μενού πίσω από το επονομαζόμενο “burger menu”, το οποίο είναι τρεις οριζόντιες γραμμές που αποκαλύπτουν το μενού όταν κάνουμε κλικ ή tap με το δάχτυλο πάνω σε αυτές.

My Market Burger Menu
Το Burger Menu του MyMarket
My Market Expanding Mobile Menu
To κεντρικό μενού του eshop του MyMarket κρύβεται πίσω από το burger menu (σημειωμένο σε κίτρινο πλαίσιο). Όταν κάνουμε tap πάνω του, αποκαλύπτεται το μενού σπρώχνοντας το site στα δεξιά της οθόνης.

4. Στο κεντρικό μενού συνηθίζεται η πρώτη επιλογή να είναι το link προς την αρχική σελίδα, αν δεν έχουμε όμως αρκετό χώρο, αυτό μπορεί να παραλειφθεί, καθώς πατώντας στο λογότυπο μπορούμε επίσης να μεταβούμε σε αυτή.

5. Σε site παρουσίασης τα πιο συνήθη και απαραίτητα στοιχεία του μενού είναι το “Υπηρεσίες / Προϊόντα”, το “Ποιοι Είμαστε”, όπου παρουσιάζεται η εταιρία και η “Επικοινωνία”.

6. Η “Επικοινωνία” έχουν μάθει οι χρήστες να την αναζητούν στο τέλος του μενού, οπότε στην περίπτωση των οριζόντιων μενού το τοποθετούμε τελευταίο δεξιά, ενώ στα κάθετα μενού, τελευταίο κάτω.

7. Στα e-shop, όπου η επικοινωνία δεν είναι η βασική ενέργεια που θέλουμε να εκτελούν οι χρήστες, μπορεί να λείπει από το κεντρικό μενού και περιορίζεται στο footer menu. Θέλουμε όμως να είναι συνεχώς εμφανές το τηλέφωνο επικοινωνίας, κάτι που δίνει και ευκολία στην επικοινωνία, ειδικά από κινητό, αλλά και αξιοπιστία στο e-shop.

8. Ένα εντυπωσιακό στοιχείο των μενού των e-shop είναι το mega menu, το οποίο είναι drop down menu που εμφανίζεται όταν κάνουμε κλικ ή hover στο μενού πρώτου επιπέδου και εμφανίζει τις επιλογές 2ου και 3ου επιπέδου μαζί με banner ή και προώθηση προϊόντων. Δείτε παράδειγμα από το Greek Fashion Room στην εικόνα παρακάτω.

Drop Down Menu
Παράδειγμα drop down menu από το e-shop Greek Fashion Room με άνοιγμα mega menu που περιέχει και προώθηση προϊόντων.

9. Σε site όπου θέλουμε να δείξουμε πολλές επιλογές, υπάρχει η λύση του drop down menu, όπου αφού κάνουμε κλικ ή περάσουμε το mouse από μια επιλογή 1ου επιπέδου, εμφανίζονται οι επιλογές του 2ου ή και του 3ου επιπέδου.

10. Μια εναλλακτική του drop down menu είναι να εμφανίζουμε δευτερεύον μενού στη σελίδα του 2ου επιπέδου. Π.χ. στη σελίδα “Ποιοι είμαστε” της Netstudio εμφανίζεται δευτερεύον μενού με τις επιλογές που αφορούν την ενότητα αυτή.

11. Στην περίπτωση που η ενότητα έχει πολλές επιλογές, μια εναλλακτική τόσο του drop down menu, όσο και του δευτερεύοντος μενού είναι η εμφάνιση μιας σελίδας που δίνει όλες τις επιλογές της ενότητας. Με αυτό τον τρόπο δείχνουμε τις υπηρεσίες μας στη Netstudio, όταν κάποιος επιλέγει το “Υπηρεσίες” από το κεντρικό μενού.

12. Για να αυξήσουμε τις σελίδες που επισκέπτεται ο χρήστης, μια τεχνική που έχει βρει καθολική αποδοχή τα τελευταία χρόνια, είναι το “sticky menu”, όπου καθώς σκρολάρουμε προς τα κάτω, το μενού παραμένει “κολλημένο” στο πάνω μέρος της οθόνης. Με αυτόν τον τρόπο ο χρήστης μπορεί να μεταβεί σε άλλες σελίδες του site χωρίς να χρειαστεί να σκρολάρει πάνω για να βρει το μενού. Έτσι λειτουργεί το μενού και στο site της Netstudio.

Drop Down Menu
Το site του Embio Medical Center χρησιμοποιεί drop down menus, οπότε από τις εννιά επιλογές του κεντρικού μενού, ξεδιπλώνονται άλλες 485 επιλογές!
Κάθετο Μενού
Το κεντρικό μενού του eshop του MyMarket (σημειωμένο σε κίτρινο πλαίσιο) εμφανίζεται κάθετα στα αριστερά του περιεχομένου.
Footer Menu
Το footer menu στο υποσέλιδο της Netstudio, σημειωμένο με κίτρινο πλαίσιο.
Δευτερεύον μενού
Δευτερεύον μενού (σημειωμένο με κίτρινο πλαίσιο) εμφανίζεται στην ενότητα “Ποιοι Είμαστε” της Netstudio.
Η σελίδα υπηρεσιών της Netstudio
Στο Netstudio, στην ενότητα “Υπηρεσίες” δεν εμφανίζεται ούτε drop down menu, ούτε δευτερεύον μενού, αλλά ουσιαστικά όλη η σελίδα είναι ένα μενού με τις διαθέσιμες επιλογές.

Αυτές είναι οι βασικές αρχές που ακολουθούμε στη δόμηση των μενού στα site που φτιάχνουμε. Υπάρχουν φυσικά και εξαιρέσεις και επιπλέον δευτερεύοντες κανόνες. Αφήστε στα σχόλια παρακάτω αρχές που πιστεύετε ότι πρέπει να συμπεριληφθούν σε αυτή τη λίστα.

Γιάννης

Γράφει ο Γιάννης

Founder & CEO

Σχόλια
avatar

30/07/2020 - 12:10

ΑΡΗΣ - ΠΑΝΑΓΙΩΤΗΣ ΜΑΖΑΡΑΚΗΣ

Πλήρες και εμπεριστατωμένο. Δεν είμαι σε θέση να προσθέσω τίποτε άλλλο από την εκτίμησή μου για την πληρότητα και ευθυβολία του μηνύματος

avatar

01/08/2020 - 23:07

ΚΑΒΡΑΚΗΣ ΠΑΝΑΓΙΩΤΗΣ

Απολύτως σωστά όσα αναφέρατε. Συγχαρητήρια για το έργο σας.

avatar

18/08/2020 - 20:34

Charis

Απολύτως σωστά όλα τα παραπάνω! Μια προσθήκη στην παράγραφο για το ''sticky menu'' είναι ότι μπορεί να συμβεί ακριβώς το ίδιο όχι μόνο στο πάνω μέρος της οθόνης, αλλά και στο κάτω μέρος, σε επίπεδο pdp του προϊόντος στο οποίο έχουμε περιηγηθεί και κάνουμε scroll down για να δούμε επιπλέον content.

Σχολιάστε το άρθρο

Συμβουλές digital marketing από το blog μας

preview του βίντεο Unboxing Regalinas

Website Unboxing Regalinas

Δείτε πώς ανακατασκευάσαμε το ηλεκτρονικό κατάστημα μόδας Regalinas.gr και τι αποτέλεσμα έφερε αυτή η ανακατασκευή.

Δείτε το video
preview του βίντεο του βίντεο με την Εύη Λούλη

Η Εύη Λούλη μιλάει για τη Netstudio

Η Εύη Λούλη, υπεύθυνη Marketing του Ομίλου Λούλη, μιλάει για τη συνεργασία του Ομίλου Λούλη με τη Netstudio.

Δείτε το video
preview του βίντεο με τα 4 πιο σημαντικά σημεία σε κάθε site ή e-shop

Τα 4 πιο σημαντικά σημεία σε κάθε site ή e-shop

Δείτε ποια είναι τα πρώτα σημεία που κοιτάω ΚΑΘΩΣ μιλάω στο τηλέφωνο με υποψήφιους πελάτες που μου ζητούν να προτείνω βελτιώσεις στο site τους.

Δείτε το video
preview του video του GS Diamonds

GS Diamonds Website Unboxing (με υπότιτλους)

Δείτε στο video πώς φτιάξαμε ένα από τα πιο πολύπλοκα και εντυπωσιακά μας project. Το GS Diamonds, το eshop του μεγαλύτερου εμπόρου διαμαντιών στην Αυστραλία.

Δείτε το video
preview του video με τον Αποστόλη του White Goods

Σκέψεις & ανησυχίες ενός νέου για το ηλεκτρονικό εμπόριο

Δείτε στο video απόσπασμα από εσωτερική συζήτηση προόδου, 7 μήνες μετά τη δημοσίευση του καινούριου site του White Goods.

Δείτε το video
preview του βιντεο πως να μετρήσετε την ταχύτητα του site σας

Πώς να μετρήσετε την ταχύτητα του site σας

Μετρήστε και βελτιστοποιήσετε την ταχύτητα φορτώματος του site σας ή του e-shop σας.

Δείτε το video
preview του βιντεο τι είναι το usability testing

Εισαγωγή στο Usability Testing και στο Userfeel με τη Netstudio

Τι είναι το usability testing και πώς μπορεί η Netstudio να σας βοηθήσει να βελτιστοποιήσετε το site σας, το eshop σας ή την εφαρμογή σας.

Δείτε το video
preview του βιντεο Website Unboxing Forel.gr

"Από την πρώτη στιγμή καταλάβαμε ότι θα τα πάμε καλά. Και τελικά είχαμε δίκιο. Τα πήγαμε πολύ καλά."

Δείτε πώς φτιάξαμε το e-shop μόδας Forel.gr και πώς σχολιάζει τη συνεργασία ο Μάκης Χατζούλας.

Δείτε το video