21.02.2008

Κατασκευάζοντας ένα σύστημα πλοήγησης με βάθος 4

Πρόσφατα βρέθηκα στη θέση να σχεδιάσω την πλοήγηση σε ένα website με βάθος 4. Ήταν σαν να πρέπει να βάλεις 4 κουτιά, το ένα μέσα στο άλλο, αλλά χωρίς το ένα να κρύβει το άλλο. Αυτό από μόνο του ήταν δυσκολότερο απ' όλο τον υπόλοιπο σχεδιασμό. Ξεκίνησα δοκιμάζοντας διάφορες παραλλαγές, τις οποίες θα προσπαθήσω να περιγράψω εδώ, τα υπέρ και τα κατά της κάθε μίας, τα οποία τελικά έκριναν τελικά ποιο μοντέλο θα υλοποιηθεί.

Το μενού

Η βασική δομή του μενού ήταν η εξής: 1. Αρχική σελίδα 2. Προφίλ εταιρίας  2.1 Γενικά  2.2 Προσωπικό  2.3 Υποδομές 3.Υπηρεσίες  3.1 Μελέτες   3.1.1 Μελέτες κτηρίων    3.1.1.1 Μελέτες σπιτιών    3.1.1.2 Μελέτες γραφείων    3.1.1.3 Μελέτες καταστημάτων   3.1.2 Μελέτες αγροτεμάχιων    3.1.2.1 Μελέτες εντός αστικών κέντρων    3.1.2.2 Μελέτες εκτός αστικών κέντρων  3.2 Σχέδια   3.2.1 Σχέδια γενικής αντιμετώπισης   3.2.2 Σχέδια προσαρμοσμένα σε ειδικές απαιτήσεις 4. Επικοινωνία Εκτός της δυσκολίας των 4 επιπέδων στο παραπάνω σχήμα, υπάρχει και η δυσαναλογία του μεγεθών των κειμένων. 'Αλλο το "Επικοινωνία" (είναι μία μόνο λέξη, άρα και πιο βολική) κι άλλο το "Σχέδια προσαρμοσμένα σε ειδικές απαιτήσεις" (φαίνεται από μόνο του πόσο δύσκολο είναι να τοποθετηθεί το κείμενο αυτό σε μια οθόνη).

Λύση Νο1: Αναδιπλώμενα μενού

Η παρακάτω εικόνα δείχνει την κάθετη διάταξη του 1ου επιπέδου με τα επόμενα επίπεδα ν' ανοίγουν προς τα δεξιά. (Κλικ επάνω της για να τη δείτε στο πλήρες μέγεθός της.)

Βρισκόμαστε πάνω στο "Μελέτες καταστημάτων" δηλαδή το επίπεδο 3.1.1.3 έχοντας ήδη ξοδέψει πολύ περισσότερο πλάτος από τη μισή οθόνη, χωρίς ακόμα ο επισκέπτης να έχει πάρει κάποια πληροφορία. Πρόκειται δηλαδή για μια λύση που δεν μπορεί να προκριθεί. Αντίστοιχα συμβαίνουν στην περίπτωση που το 1ο επίπεδο διαταχθεί οριζόντια. Επιπλέον, τα αναδιπλώμενα μενού είναι μεν μια λύση βολική τεχνικά, αλλά δύστροπη νοηματικά, γιατί ο επισκέπτης δύσκολα θυμάται πως βρέθηκε εκεί και πως θα ξαναφτάσει, ακόμα κι αν υπάρχει η βοήθεια των breadcrumbs.

Λύση Νο2: Μενού που διατάσσονται οριζόντια και κάθετα στη σελίδα

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

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

Λύση Νο3: Δενδροειδής πλοήγηση

Πολύ απλούστερο και κατανοητό σχήμα πλοήγησης. Θυμίζει αρκετά την πλοήγηση του Windows Explorer. Παρ' όλα αυτά πρόκειται για ένα είδος πλοήγησης που δεν προάγει το γενικότερο design και απαιτεί πολλά κλικ. Δίνει την εντύπωση φτωχής δουλειάς και περισσότερο απασχολεί, παρά διευκολύνει έναν επισκέπτη.

Λύση Νο4: Drop down λίστες

Πρόκειται για μία από τις πιο βολικές προσεγγίσεις. Όλη η πλοήγηση βρίσκεται στην κορυφή της σελίδας κι ο επισκέπτης δε χρειάζεται να εστιάζει την προσοχή του σε διαφορετικές περιοχές του website. Χωρίς πολλά κλικ και χωρίς να δοκιμάζεται η υπομονή του, η μεταφορά από περιοχή σε περιοχή του website γίνεται γρήγορα και κατανοητά. Τα μειονεκτήματα που προκύπτουν έχουν να κάνουν με το design, καθώς οι drop down λίστες θυμίζουν αρκετά φόρμες εγγραφής. Παράλληλα, δεν υπάρχει η δυνατότητα να σχεδιαστούν πολύ διαφορετικά γιατί οι browsers είναι αρκετά ιδιότροποι με τέτοιου είδους design και για να παρακαμφθούν τα προβλήματα απαιτείται ειδική χρήση JavaScript. Όχι ό,τι πιο βολικό δηλαδή. Επιπλέον, οι επισκέπτες έχουν συνέχεια ανάγκη οπτικής βοήθειας για το που βρίσκονται.

Λύση Νο5: Tabs

Πρόκειται για τη λύση που τελικά θα εφαρμοστεί. Έχει όλα τα πλεονεκτήματα της προηγούμενης με τις drop down λίστες, είναι σαφώς πιο φιλική προς τον επισκέπτη και το design της δεν έχει περιορισμούς. Η υλοποίηση γίνεται με τη χρήση JavaScript, αλλά αυτή τη φορά όσον αφορά τη λειτουργικότητα κι όχι το σχεδιασμό. Επιπλέον, το tab ανοίγει και κλείνει εύκολα, περιέχει όλη την πληροφορία με τρόπο απόλυτα χρηστικό κι ανεβάζει σημαντικά το συνολικό look & feel του website.

Επίλογος

Η πλοήγηση σε ένα τόσο μεγάλο βάθος αποτελούσε κι ακόμα αποτελεί ένα από τα σημαντικότερα προβλήματα στο web design. Μέχρι πριν από λίγα χρόνια η τελευταία λύση δε θα ήταν εφικτή, αλλά κάθε νέο εργαλείο (όπως στη συγκεκριμένη περίπτωση η υλοποίηση με JavaScript/AJAX) υπάρχει για να κάνει τη ζωή μας πιο εύκολη. Αυτό πιστεύω ότι πρέπει να είναι το σκεπτικό πίσω από την όποια εφαρμογή του.