Wedia Digital Marketing Agency - Academy Blog

9 UX συμβουλές για το σχεδιασμό ενός website menu

Written by Teresa Zegkinoglou | 06 Μαρ 2018

Κάνε πιο ευχάριστη την πλοήγηση στο website σου και βοήθησε τον επισκέπτη του να βρει την πληροφορία που αναζητεί, ακολουθώντας δοκιμασμένες user experience συμβουλές! 

Η έννοια της σωστής πλοήγησης είναι αρκετά γνώριμη σε όλους μας, ήδη πολύ πριν ασχοληθούμε με αυτήν στο ψηφιακό περιβάλλον. Ο εντοπισμός των ζυμαρικών σε ένα καινούριο σούπερ μάρκετ, η εύρεση ενός συγκεκριμένου καταστήματος στο συγκρότημα κτιρίων Berjaya Times Square στην Kuala Lumpur ή η εύρεση ενός ξενοδοχείου στη Χαβάη, ύστερα από πτήση που είχε ανταπόκριση στο αεροδρόμιο της Φρανκφούρτης και του Σαν Φρανσίσκο, αποτελούν διαδρομές μικρότερες ή μεγαλύτερες, από ένα σημείο Α σε ένα σημείο Β.

Ανάλογα με την πληροφορία που έχουμε κάθε φορά στη διάθεσή μας, οι διαδρομές αυτές μπορούν είτε να μας οδηγήσουν στον προορισμό μας είτε όχι. Κάπως έτσι λοιπόν, οι επισκέπτες του site σου πλοηγούνται από σελίδα σε σελίδα και προσδοκούν να βρουν την πληροφορία που αναζητούν, ακολουθώντας το δικό τους Buyer’s Journey. Θα τους αφήσεις να χαθούν;

Ας δούμε μαζί 9 UX tips για το σχεδιασμό εύχρηστων και λειτουργικών navigation menus:

  1. Μη χρησιμοποιείς μικροσκοπικά menu ή menu icons όταν σχεδιάζεις για μεγάλες αναλύσεις οθονών. Αξιοποίησε το πλεονέκτημα του χώρου που σου δίνεται και δώσε το κατάλληλο white space ανάμεσα στο navigation και τα υπόλοιπα γραφικά του site.
  1. Location, location, location. Τοποθέτησε το menu σε σημείο που είναι γνώριμο στους επισκέπτες σου. Ένας μέσος χρήστης αφιερώνει περίπου 21 ώρες την εβδομάδα online και έτσι έχει ήδη εξοικειωθεί με τα βασικά UI elements που συναντά στα υπόλοιπα site. Δεν έχεις παρά να ικανοποιήσεις τις προσδοκίες του και να προσφέρεις μια ξεκούραστη και προβλέψιμη πλοήγηση στο site σου.
  1. Σχεδίασε το menu με τέτοιο τρόπο ώστε να προδίδει ξεκάθαρα τη λειτουργία του. Να φαίνεται δηλαδή ότι πρόκειται για ένα σύνολο links, στα οποία μπορεί κανείς να κάνει click. Ο μεγάλος αριθμός γραφικών αλλά και η αυστηρή εφαρμογή της θεωρίας του flat design, μπορούν να μπερδέψουν τους επισκέπτες σου και να θεωρήσουν ότι έχουν μπροστά τους ένα όμορφο εικαστικό, αντί για το βασικό navigation του site.
  2. «Πού βρίσκομαι τώρα;»: Αυτή είναι μια από τις βασικές ερωτήσεις που πρέπει να είναι σε θέση να απαντήσουν οι επισκέπτες σου ανά πάσα στιγμή. Η απάντησή τους θα κριθεί από το πόσο πετυχημένη είναι η σχεδιαστική απεικόνιση του ίδιου του navigation, αλλά και από τη χρήση άλλων οπτικών βοηθημάτων, όπως του breadcrumb.
  1. Anything you… write may be used against you. Το menu αποτελεί ένα από τα βασικότερα σημεία του site στο οποίο δεν έχεις την πολυτέλεια να πρωτοτυπήσεις με ευφάνταστες λέξεις και φράσεις. Αρχικά, κάνε το απαραίτητο SEO research, ώστε να εντοπίσεις τι ακριβώς ψάχνουν οι χρήστες στις μηχανές αναζήτησης και, με βάση τα αποτελέσματα αυτά, χρησιμοποίησε σχετικές λέξεις ή τίτλους για το navigation του site σου.
  1. Εφάρμοσε τη λογική των mega menus σε περιπτώσεις που το sitemap είναι αρκετά εκτενές. Έτσι, μπορείς να δώσεις τη δυνατότητα στους επισκέπτες σου να πάρουν μια γεύση από το σύνολο των υποενοτήτων που υπάρχουν κάτω από κάθε βασική κατηγορία, αλλά και να οδηγηθούν απευθείας στην υποενότητα αυτή εξοικονομώντας μερικά clicks.
  1. Χρησιμοποίησε φωτογραφίες ή icons για να βοηθήσεις τους χρήστες να καταλάβουν πιο εύκολα τις διαθέσιμες επιλογές στο menu. Πρόκειται για μια τακτική η οποία συναντάται κυρίως σε e-commerce websites και μπορεί να είναι αρκετά αποτελεσματική, εφόσον βέβαια τα visual elements που θα χρησιμοποιηθούν διευκολύνουν το user journey.
  1. Σχεδίασε τα links του menu αρκετά μεγάλα, ώστε o χρήστης να κάνει εύκολα click σε αυτά. Τα links τα οποία είναι πολύ μικρά σε μέγεθος ή πολύ κοντά το ένα με το άλλο, μπορούν να δημιουργήσουν εκνευρισμό στους χρήστες των mobile συσκευών. Η μικρότερη συνιστώμενη διάσταση ενός κουμπιού σύμφωνα με την Apple είναι 44 x 44px. Μπορείς επίσης να διαβάσεις μερικά ακόμα δοκιμασμένα tips UX design για mobile.
  1. Εφάρμοσε την τεχνική του «sticky» menu. Σε ένα site που το περιεχόμενο είναι εκτενές, η επιστροφή στην κορυφή της σελίδας αποτελεί μια πρόκληση για τους επισκέπτες του site. Τα menus που παραμένουν ορατά στο πάνω μέρος της σελίδας ανεξάρτητα από το scroll, αποτελούν ιδανική λύση η οποία μπορεί να προσαρμοστεί ακόμα και σε μικρές αναλύσεις οθονών. Δες για παράδειγμα πώς εφαρμόσαμε το sticky menu στο πρόσφατο redesign του Υiannis Lucacos.

Βάλε τις σωστές προτεραιότητες!

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

Κράτησε λοιπόν για το τέλος τα λόγια του Linus, του ήρωα των Peanuts, τα οποία υπερβαίνουν κάθε ανάλυση από οποιονδήποτε UX expert: «Good things last eight seconds… bad things last three weeks».