Breadcrumb Navigation in Greek Sites

breadcrumb navigation στα 100 κορυφαία ελληνικά sites

ΠΜΣ ΔΥΝΗΤΙΚΕΣ ΚΟΙΝΟΤΗΤΕΣ ΚΟΙΝΩΝΙΟΨΥΧΟΛΟΓΙΚΕΣ ΠΡΟΣΕΓΓΙΣΕΙΣ ΚΑΙ ΤΕΧΝΟΛΟΓΙΚΕΣ ΕΦΑΡΜΟΓΕΣ

ΑΛΛΗΛΕΠΙΔΡΑΣΗ ΑΝΘΡΩΠΟΥ ΜΗΧΑΝΗΣ&ΜΑΘΗΣΙΑΚΕΣ ΚΟΙΝΟΤΗΤΕΣ

Βασίλης Λαμπρόπουλος

ΠΑΝΤΕΙΟΠΑΝΕΠΙΣΤΗΜΙΟ

ΠΑΝΤΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟΚΟΙΝΩΝΙΚΕΣ ΚΑΙ ΠΟΛΙΤΙΚΕΣ ΕΠΙΣΤΗΜΕΣΤΜΗΜΑ ΨΥΧΟΛΟΓΙΑΣ

ΠΑΝΤΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΟΙΝΩΝΙΚΕΣ ΚΑΙ ΠΟΛΙΤΚΕΣ ΕΠΙΣΤΗΜΕΣ

ΤΜΗΜΑ ΨΥΧΟΛΟΓΙΑΣ

ΠΑΝΤΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΤΜΗΜΑ ΨΥΧΟΛΟΓΙΑΣ:

ΠΜΣ ΔΥΝΗΤΙΚΕΣ ΚΟΙΝΟΤΗΤΕΣ ΚΟΙΝΩΝΙΟΨΥΧΟΛΟΓΙΚΕΣ ΠΡΟΣΕΓΓΙΣΕΙΣ ΚΑΙ ΤΕΧΝΟΛΟΓΙΚΕΣ ΕΦΑΡΜΟΓΕΣ

ΕΡΓΑΣΙΑ

ΑΛΛΗΛΕΠΙΔΡΑΣΗ ΑΝΘΡΩΠΟΥ ΜΗΧΑΝΗΣ&ΜΑΘΗΣΙΑΚΕΣ ΚΟΙΝΟΤΗΤΕΣ

ΚΑΘΗΓΗΤΕΣ

Σ. Συρμακέσης – Μ. Ρήγου

IIΙ ΕΞΑΜΗΝΟ

Academic Year 2009-2010

Breadcrumb Navigation στα 100 κορυφαία ελληνικά site

Βασίλης Λαμπρόπουλος

Α.Μ.: 6308Μ008

ΠΑΝΤΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΤΜΗΜΑ ΨΥΧΟΛΟΓΙΑΣ: ΠΜΣ ΔΥΝΗΤΙΚΕΣ ΚΟΙΝΟΤΗΤΕΣ ΚΟΙΝΩΝΙΟΨΥΧΟΛΟΓΙΚΕΣ ΠΡΟΣΕΓΓΙΣΕΙΣ ΚΑΙ ΤΕΧΝΟΛΟΓΙΚΕΣ ΕΦΑΡΜΟΓΕΣ

ΑΛΛΗΛΕΠΔΡΑΣΗ ΑΝΘΡΩΠΟΥ ΜΗΧΑΝΗΣ&ΗΛΕΚΤΡΟΝΙΚΕΣ ΜΑΘΗΣΙΑΚΕΣ ΚΟΙΝΟΤΗΤΕΣ “BREADCRUMB NAVIGATION ΣΤΑ 100 ΚΟΡΥΦΑΙΑ ΕΛΛΗΝΙΚΑ SITE”

2

ΠΕΡΙΕΧΟΜΕΝΑ

ΕΙΣΑΓΩΓΙΚΑ

BREADCRUMBS

ΤΥΠΟΙ BREADCRUMBS

Κοινά λάθη στην εφαρμογή των breadcrumbs

Τεχνικά σημεία στον σχεδιασμό των breadcrumbs

Breadcrumbs στα Ελληνικά site

Συμπερασματικά

Αντι Επιλόγου

Βιβλιογραφία



3

Breadcrumb Navigation στα 100 κορυφαία ελληνικά site

Εισαγωγικά

Απο την έκρηξη του φαινομένου του διαδικτύου ως σήμερα οι καινοτομίες που έχουν λάβει μέρος στην ζωή μας είναι άπειρες. Απο απλά interfaces ανταλλαγής πληροφοριών της εποχής του CERN και του Tim Berners-Lee, στην εξέλιξη των μεγάλων multimedia enabled sites. Το να έχεις πλεόν σελίδα στο διαδίκτυο είναι κάτι το προαπαιτούμενο πλέον εφόσον, όλο και περισσότερο, ο άνθρωπος βυθίζεται στην αγκαλία της τεχνολογίας.

Εν αρχήν η Hypertext Markup Language, λοιπόν, η γλώσσα προγραμματισμού που είναι ο πυρήνας του διαδικτύου ή HTML, όπως ονομάζεται εν συντομία. Η HTML είναι μια γλώσσα σήμανσης υπερκείμενου που το χρησιμοποιεί και δομεί μέσω ετικετών – tags – το κείμενο και ανάλογα στοιχεία για να αποδώσει μια σελίδα.Το Υπερκείμενο είναι το κείμενο που παρουσιάζεται σε έναν υπολογιστή και μπορεί να οδηγήσει τον χρήστη σε σχετικές πληροφορίες που μπορούν να τον καθοδηγήσουν. Αντί στατικό όπως το κλασσικό κείμενο, επιτρέπει την δυναμική οργάνωση πληροφοριών μέσω συνδέσμων που ονομάζονται υπερσύνδεσμοι. Το υπερκείμενο μπορεί να σχεδιαστεί για διαφορετικές λειτουργίες όπως παραπομπή σε άλλο σημείο του κειμένου ή άλλη σελίδα ή εμφάνιση επεξηγηματικού κειμένου πάνω από αυτό ακόμα και παραπομπή σε εικόνα ή βίντεο ή και κάποια εφαρμογή.

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

Μια στατική ιστοσελίδα είναι ένα απλό «ηλεκτρονικό έγγραφο» που βρίσκεται αποθηκευμένο σε ένα σύστημα φακέλων σε εναν web server και είναι διαθέσιμο μέσω του Πρωτοκόλλου Mεταφοράς Yπερκειμένου γνωστό ως HTTP. Η ιστοσελίδα τέτοιου τύπου αποδίδεται στον χρήστη ακριβώς όπως βρίσκεται αποθηκευμένη. Κατα συνέπεια κάθε χρήστης λαμβάνει την ίδια



4

ακριβώς πληροφορία απο όλες τις πλευρές στην ευχέρεια των δυνατοτήτων των μοντέρνων web server να αποδώσουν διαφορετικές μορφές του περιεχομένου ή της γλώσσας του αρχείου, όπου ο server είναι προγραμματισμένος να κάνει κατι τέτοιο και υπάρχουν τέτοιες εκδόσεις του αρχείου. Είναι κατάλληλες κυρίως για την δημιουργία "μόνιμων/στατικών παρουσιάσεων", όπου δεν υπάρχει συχνά η ανάγκη να τροποποιείται το περιεχόμενό τους. Δηλαδή, θα μπορούσε να χρησιμοποιηθεί μια στατική ιστοσελίδα για την γενική παρουσίαση μιας επιχείρησης και των προϊόντων ή υπηρεσιών της. Δεν χρειάζεται ιδιαίτερες προγραμματιστικές ικανότητες για να δημιουργηθεί, μένει αποθηκευμένο για οποιονδήποτε, δεν χρειάζεται servers υψηλών απαιτήσεων για να φιλοξενήσουν τέτοια αρχεία και μπορεί να παρουσιαστεί απευθείας απο έναν φυλλομετρητή χωρίς την χρήση προγράμματος που λειτουργεί ως web server (μπορούμε να έχουμε τα αρχεία στον υπολογιστή μας και να τα δούμε οποιαδήποτε στιγμή). Αντιθέτως η συσώρευση πολλών τέτοιων αρχείων γίνεται δύσκολη στην διαχείριση χωρίς κάποιον αυτοματισμό.

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

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

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



5

Οι δυναμικές ιστοσελίδες συνδυάζονται με διάφορες άλλες εφαρμογές ή γλώσσες προγραμματισμού που προσφέρουν την δυνατότητα τροποίησης του περιεχομένου τους και την χρήση διαφόρων στοιχείων που εξυπηρετούν τον χρήστη της σελίδας στην περιήγηση του ιστότοπου. Ένα τέτοιο στοιχείο είναι τα breadcrumbs.

Breadcrumbs

Σε Το “breadcrumb” (ή “breadcrumb trail”) είναι ένας τύπος δευτερογενούς πλοήγησης του ιστότοπου που πληροφορεί κατα ένα τρόπο τον χρήστη για το σημείο του site στο οπίο βρίσκεται, αλλά του παρέχει κατην δυνατότητα να επιστρέψει ιεραρχικά σε προηγούμενα επίπεδα. Ο όρος προέρχεται απο το γνωστό παραμύθι του Hans Christian Andersen «Χάνσελ και Γκρέτελ», όπου τα δυο μικρά παιδιά πετούν στον δρόμο ψίχουλα για να μπορέσουν να επιστρέψουν στο σπίτι τους (κάτι αντίστοιχο με τον μίττο της Αριάδνης στην Ελληνική μυθολογία). Με την ίδια αντιστοιχία στο διαδίκτυο, τα breadcrumbs ή «ψίχουλα», παρέχουν στον χρήστη την δυνατότητα να ακολουθήσει το μονοπάτι τους μέχρι το «σπίτι», την αρχική δηλαδή σελίδα απο την οποία ξεκίνησαν την περιήγησή τους. Σε πολλούς δικτυακούς τόπους που έχουν πλήθος σελίδων η πλοήγηση μέσω breadcrumbs μπορεί να βοηθήσει σημαντικά τον χρήστη να «βρεί τον δρόμο του». Όσο αφορα την χρηστικότητα, τα breadcrumbs μειώνουν τον αριθμό των κινήσεων που πρέπει να κάνει ο χρήστης μιας σελίδας στο διαδίκτυο για να βρεθεί σε μια σελίδα σε ανώτερο επίπεδο. Οπτικά παρέχουν σημαντικές πληροφορίες για το που βρίσκεται ο χρήστης στην ιεραρχία του site (σαν ένα μονίμως ενεργό sitemap), παρέχοντας μια σημαντική πηγή πληροφοριών για τις προηγούμενες ιεραρχικά ιστοσελίδες.

Τα breadcrumbs εντοπίζονται συνήθως σε ιστοσελίδες με μεγάλη ποσότητα περιεχομένου οργανωμένο σε ιεραρχική μορφή και σε διαδικτυακές εφαρμογές που έχουν περισσότερο απο ένα βήματα για να πορευθείς σαν ένα αντίστοιχο ενδεικτικό «προόδου». Στην απλούστερη τους μορφή τοποθετούνται οριζόντια σαν σύνδεσμοι κειμένου που διαχωρίζονται απο την μαθηματική αγκύλη που υποδηλώνει το μεγαλύτερο από (>). Το σύμβολο υποδηλώνει το επίπεδο της σελίδας σε σχέση με τους συνδέσμους σε σελίδα που βρίσκονται δίπλα του.

Τα breadcrumbs χρησιμοποιούνται κυρίως σε μεγάλα site που έχουν ιεραρχικά οργανωμένες σελίδες. Τέτοια site μπορεί να είναι εκέινα που έχουν μεγάλο αριθμό πορϊόντων οργανωμένο σε λογικές κατηγορίες. Αναφορικά



6

μπορεί να είναι ιστότοποι ηλεκτρονικού εμπορίου (e-commerce), ειδησεογραφικά site με πληθώρα άρθρων και κατηγοριών κ.α.

Αποφεύγουμε συνήθως τα site ενός επιπέδου που δεν έχουν λογική ιεραρχία ή οργάνωση. Μια πολύ καλή λύση στο δίλημμα αν θα πρέπει να χρησιμοποιήσουμε breadcrumbs ή όχι στην ιστοσελίδα μας, είναι να κατασκευάσουμε έναν χάρτη του ιστότοπου (sitemap) ή ένα διάγραμμα που να αναπαριστά την αρχιτεκτονική της πλοήγησης του site και κατα συνέπεια να διαπιστώσουμε μετα απο εξέταση του αν τα breadcrumbs θα εξυπηρετούσαν την ευχέρεια πλοήγησης του χρήστη στις , και μέσα απο τις κατηγορίες μας. Τα Breadcrumbs θα πρέπει να θεωρηθούν σαν μια δευτερεύουσα λειτουργία και δεν θα έπρεπε επ’ ουδενί να αντικαταστήσουν την πρωταρχική λειτουργία πλόηγησης. Είναι μια απλή διευκόλυνση που παρέχεται στον χρήστη για να εδραιώσει την τοποθεσία του κι ένας εναλλακτικός τρόπος να μετακινηθεί στο site.

Τύποι breadcrumbs

Υπάρχουν τρείς τύποι breadcrumbs:

Βασισμένα στην τοποθεσία

Τα breadcrumbs τοποθεσίας δείχνουν στον χρήστη που είναι στην ιεραρχία. Χρησιμοποιούνται κατα κόρο για πλοήγηση πολλαπλών επιπέδων [συνήθως πάνω απο 2 επίπεδα χρειάζονται]. Στο παράδειγμα που ακολουθεί, κάθε σύνδεσμος κειμένου είναι ένα επίπεδο ανώτερος απο αυτόν στα δεξιά του.

Βασισμένα στις ιδιότητες

Τα breadcrumbs που είναι προσανατολισμένα στις ιδιότητες δείχνουν τις ιδιότητες μιας συγκεκριμένης σελίδας. Στο παράδειγμα που ακολουθεί φαίνονται οι ιδιότητες των αντικειμένων μιας συγκεκριμένης σελίδας. Αυτή η σελίδα δείχνει όλες τις τηλεοράσεις LED στις τηλεοράσεις τις κατηγορίας TV Video



7

Βασισμένα στο μονοπάτι

Τα breadcrumbs που είναι προσανατολισμένα σε μονοπάτι, δείχνουν στον χρήστη τα βήματα που χρειάστηκε για να φτάσει μέχρι εκεί. Είναι δυναμικά απο τη άποψη οτι δείχνουν τις σελίδες που χρειάστηκε να ακολουθήσει ο επισκέπτης για να βγεί στο συγκεκριμένο σημείο.

Σχόλια:

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

Τα breadcrumbs δε που είναι βασισμένα στο μονοπάτι δεν είναι απαραίτητα για site που το περιεχόμενο τους δεν μπορεί να τοποθετηθεί ή να περιγραφεί απο μόνο μια κατηγορία. Αυτο είναι κοινλος τόπος σε site που έχουν ένα τύπο πλοήγησης βάσει αναζήτησης όπως π.χ. το amazon.com.

Ωφέλη της χρήσης breadcrumb navigation:

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

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



8

περιηγηθείς στις ενδιάμεσες. Με πολύ λιγότερα «κλίκ» του ποντικιού λοιπόν αυξάνεται η λειτουργικότητα κάτι που προτιμούν και οι χρήστες τέτοιων site.

Δεν καλύπτει μεγάλη έκταση, ούτε «πνίγει» το περιεχόμενο: λόγω της τυπικής οριζόντιας και απλής τους διάταξης δεν καταλμβάνουν πολύ χώρο στην σελίδα. Το όφελος είναι οτι «φορτώνουν» ελάχιστα ως καθόλουτην σελίδα και αν χρησιμοποιηθούν σωστά υπερτερούν οποιασδήποτε αρνητικής πλευράς.

Μειώνουν το «bounce rate»: τα breadcrumbs είναι ένας πολύ καλός τρόπος να δελεαστούν οι χρήστες να παραμείνουν στο site μετα την άφιξή τους στην σελίδα. Αν ας πούμε ένας χρήστης φτάνει μέσω αναζήτησης στο google και παρατηρήσει το breadcrumb, θα θελήσει πιθανόν να δει και τις προηγούμενες κατηγορίες πρίν απο αυτή που σχετίζονται με το αντικείμενο. Αυτό μειώνει κατα γενική ομολογία το bounce rate (το ποσοστό δηλαδή των αρχικών χρηστών που έρχονται σε ένα ιστότπο και «αναπηδούν» σε ένα άλλο site. Όσο μεγαλύτερο, τόσο λιγότερο χρόνο παραμένουν οι χρήστες κατα μέσο όρο στο site.).

Κοινά λάθη στην εφαρμογή των breadcrumbs

Η χρήση των breadcrumbs είναι μια σχετικά ξεκάθαρη υπόθεση και δεν χρειάζεται πολλές αποσαφηνίσεις ή όρους για την χρήση τους σε ενα site. Πάραυτα, κάποιοι γενικοί κανόνες χρήσης τους είναι:

Η χρήση των breadcrumbs όταν δεν υπάρχει πραγματικό ώφελος

Στο παράδειγμα αυτό, το site slicethepie ρισκάρει με την υπερπληροφόρηση απο την υπερβολή στις επιλογές πλοήγησης. Η πρωταρχική πλόηγηση, το breadcrumb και η τρίτη επιλογή πλόηγησης μέσω tabs είναι πολύ κοντά. Το breadcrumb σε αυτό το παράδειγμα δεν προσφέρει καμμία εξυπηρέτηση καθότι η τρίτη επιλογή πλόηγησης είναι ακριβώς απο κάτω. Επίσης όταν κλικάρουμε το δεύτερο επίπεδο στο breadcrumb το «MUSIC», πηγαίνουμε

http://www.slicethepie.com/Music/Default.aspx�



9

στην καρτέλα «LISTEN» κάτι που και λειτουργικά είναι άχρηστο αλλά και μας κάνει να πιστεύουμε πως η πρώτη καρτέλα είναι πιο ψηλά σε επίπεδο απο τις άλλες δυο («SEARCH» και «ARTISTS HALL OF FAME»)

Η μη λειτουργική εξαφάνιση των breadcrumbs Houdini style!

Στο παράδειγμα της καθ’όλα βραβευμένης ιστόσελίδας e-shop η μαγεία είναι ακόμα εκεί. Βρισκόμαστε σε μια λίστα προϊόντων και όταν επιλέγουμε ένα, ζούμε την μαγεία των παιδικών μας χρόνων. Το breadcrumb εξαφανίζεται, αφήνοντας μας να αναρωτιόμαστε αν άξιζε να υπάρχει καν. Η επιστροφή στην σελίδα που είμασταν πλέον γίνεται μόνο με το κουμπί «πίσω» στον φυλλομετρητή μας αχρηστεύοντας τις πρωταρχικές αξίες του breadcrumb navigation trail.

http://www.e-shop.gr/PER_memcards.phtml�



10

Η χρήση των breadcrumbs σαν πρωταρχική πλοήγηση

Όπως είχαμε πει πρίν τα breadcrumbs πρέπει να είναι η δευτερογενής επιλογή πλοήγησης και είναι απλά εκεί για να εξυπηρετήσουν τον χρήστη για να περιηγηθεί στο site. Καλό είναι όμως να μην παραβλέπουμε την αρχική πλοήγηση εξαιτίας τους...

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

Χρήση των breadcrumbs σε σελίδες με πολλές κατηγορίες

Τα breadcrumbs έχουν μια γραμμική δομή και κατα συνέπεια δεν είναι λειτουργική η χρήση τους σε σελίδες που δεν μπορούν να οργανωθούν σε ξεκάθαρες κατηγορίες. Η ιεράρχηση της δομής του site πάιζει τον σημαντικότερο ρόλο στην απόφαση αν θα τα χρησιμοποιήσει κάποιος ή οχι. Τα breadcrumbs είναι άμεσα συνδεδεμένα με τον όρο του sitemap άλλωστε. Όταν μια σελίδα υπάγεται σε περισσότερες απο μια κατηγορίες, τα Breadcrumbs είναι αναποτελεσματικά και περισσότερο μπερδεύουν, παρά εξυπηρετούν τον χρήστη.

http://www.mefeedia.com/entry/fri-feb-27-2009/14804198�



11

Τεχνικά σημεία στον σχεδιασμό των breadcrumbs

Ο σχεδιασμός των breadcrumbs έχει μεγάλη σημασία για να μπορούν αυτά να είναι λειτουργικά ενώ ταυτόχρονα να μην βαραίνουν το ήδη βεβαρημμένο πολλές φορές περιεχόμενο της ιστοσελίδας. Συνοψίζονται στα εξής:

1. Το διαχωριστικό σύμβολο των breadcrumbs είναι συνήθως το «μεγαλύτερο από» σύμβολο (>). Τυπικά το σύμβολο αυτό υποδεικνύει ιεραρχία όπως στην κατηγορία τύπων Parent>child. Το σύμβολο όμως αυτο μπορεί να υποδεικνύει και κατέυθυνση κοινά ερμηνευμένο και σαν βέλος, άρα μπορούν να υπάρχουν και μορφές του σαν βέλος με δεξιά φορά, σαν εισαγωγικά κλείσιμου (»), ή σαν κάθετοι με δεξιά φορά –right slash (/). Η επιλογή έγκειται στην αισθητική του site και τον τύπο breadcrumb που θα χρησιμοποιηθεί. Για παράδειγμα σε τύπο βασισμένο σε μονοπάτι που οι σύνδεσμοι δεν έχουν επακριβώς μια ιεραρχική σχέση μεταξύ τους, η χρήση του «μεγαλύτερο από» συμβόλου, μπορεί να μην αποδίδει την σχέση τους ξεκάθαρα. Ακολουθούν κάποια παραδείγματα τύπων breadcrumbs:



12

2. Το μέγεθος των breadcrumbs είναι άμεσα συνδεδεμένο με το περιεχόμενο των σελίδων. Δεν θα πρέπει λοιπόν να αποσπούν την προσοχή απο το κυριώς περιεχόμενο αλλά να βρίσκονται σε ενα διακριτικά ευδιάκριτο σημείο. Μια καλή περιπτωση είναι οτι το αντικέιμενο που βρίσκεται πρώτο στο breadcrumb δεν θα πρέπει α αποσπά και πρώτο την προσοχή όταν φτάνομε σε μια ιστοσελίδα.

3. Θα πρέπει να βρίσκονται στο πάνω μέρος της σελίδας όπου και έχουν αξία και συνοχή οπτικά.

4. Τα breadcrumbs θα πρέπει να έχουν μια συνοχή. Ετσι αν σκοπεύουμε να τα χρησιμοποιήσουμε, καλό θα ήταν να υπάρχουν σε όλο το site κι οχι μόνο σε κάποια σημεία του. Αυτό θα μπερδέψει και θα εκνευρίσει πιο πολύ τους χρήστες που δεν θα κάτσουν πολύ σε μια τέτοια σελίδα αν δεν υπάρχει ιδιαίτερος λόγος. Ένα κλασσικό παράδειγμα είναι το site του e-shop στο οποίο τα breadcrumbs εμφανίζονται σε κάποια σημεία και μετά μαγικά εξαφανίζοντας αναγκάζοντας μας να πατήσουμε το κουμπί «πίσω» του φυλλομετρητή μας για την περιήγηση μας.

5. Καλό θα ήταν τα breadcrumbs να μην τραβούν την προσοχή, αλλά ταυτόχρονα οτι δεν είναι κομμάτι της κυρίως σελίδας και του περιεχομένου της απλά μια συνεισφορά στην περιήγηση της.

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

7. Η κατηγοριοποίηση των σελίδων θα πρέπει να είναι ξεκάθαρη και να μην έχουμε σελίδες που βρίσκονται σε παραπάνω απο μια κατηγορία ειδάλλως καλο είναι να μην χρησιμοποιήσουμε τα breadcrumbs, κατι τέτοιο άλλωστε θα προκαλούσε σύγχυση στον χρήστη. Ο προγραμματισμός της ιεραρχίας έχει πολύ μεγάλη σημασία.



13

8. Θα ήταν χρήσιμο το τελευταίο κομμάτι του breadcrumb να έχει διαφορετικό χρώμα απο τα υπόλοιπα ώστε να είναι ευδιάκριτο που βρίσκεται ο χρήστης. Αυτό θα μπορούσε να γίνει τονίζοντας το με bold στοιχεία, ή κάνοντας το πιο άτονο σε γκρι τόνους.

9. Το τελευταίο κομμάτι του Breadcrumb, θα ήταν λογικότερο και πιο χρήσιμο να μην είναι σύνδεσμος απλά και μόνο επειδή είναι η σελίδα που ο χρήστης παρακολουθεί ήδη. Η συνδεσή του με την σελίδα δεν έχει χρηστική αξία και επιπρόσθετα, απλά θα μπέρδευε τον περιηγητή όταν θα την επέλεγε.

10. Τα breadcrumbs δεν θα έπρεπε να χρησιμοποιούνται σαν επικεφαλίδα της σελίδας

11. Δεν προσπαθούμε να αντικαταστήσουμε την βασική πλόηγηση του site με τα breadcrumbs.



14

Breadcrumbs στα Ελληνικά site

Το κομμάτι των Breadcrumbs στα ελληνικά site είναι σίγουρα σχετικά τυπικό όσο και η σχέση των ελλήνων σχεδιαστών με αυτά. Για τις ανάγκες της έρευνας έπρεπε να τεθεί ένα standard για την μελέτη τους και γιαυτό και η απόφαση ήταν να μελέτηθούν κατα κόρο τα breadcrumbs ανάμεσα στα 100 κορυφάια ελληνικά ή με ελληνική έκδοση (βάσει alexa.com) sites. Συνεπώς απορρίφθηκαν αρκετά ξένα site που βρίσκονταν στην λίστα και αρκετά απο τα site που δεν είχαν breadcrumb πλοήγηση είτε λόγω νοοτροπίας του site (π.χ. το zoo.gr), είτε λόγω απόφασης να μην υπάρχει (όπως το site της ελευθεροτυπίας). Στην κριτική που ακολουθεί λοπόν αναφέρονται τα λάθη, οι ελλείψεις ή ακόμα και η χρηστικότητα των ελληνικών ιστότοπων. Η σειρά παρουσιάσης είναι τυχαία καθότι στο διαρκώς μεταβαλλόμενο τοπίο του διαδικτύου η βαθμολογία είναι πάντα σχετική.

Pixmania.com



15

Το site της γαλλικής εταιρείας Pixmania έχει μετάφραση και στα ελληνικά για τους έλληνες χρήστες του. Ουσιαστικά πρόκειται για ένα τελείως διαφορετικό site για την Ελλάδα βασισμένο στο template του αρχικού της site (ένα για κάθε χώρα στην οποία βρίσκαται το site). Τα breadcrumbs εδώ είναι διακριτικά τοποθετημένα, δεν τραβάνε το μάτι, ενώ το τελευταίο μονοπάτι του trail έχει τοποθετηθεί ίσως άκαιρα, πάνω απο το μονοπάτι. Κατα τ’αλλα υπόκειται στους κανόνες σχεδίασης των breadcrumbs, είναι βασισμένο στις ιδιότητες και είναι αρκετά χρηστικό παραμένοντας ενεργό σε όλες τις σελίδες δίνοντας την ιδιότητα στον χρήστη να περιήγηθεί στην σελίδα και να περάσει και σε άλλες επιλογές με ευκολία. Τυπικό παράδειγμα e-commerce site, στοχεύει και λογικά πετυχαίνει το στόχο του να κρατήσει τον χρήστη αρκετή ώρα κοιτώντας απο την μια κατηγορία στην άλλη. Σχεδιαστικά δεν παρέχει κάτι το όμορφο αλλά πιο πολύ κάτι το λειτουργικό.

Plaisio.gr



16

Ακόμα ένα site στον τομέα του e-commerce της ελληνικής εταρείας πλαίσιο, έχει ένα εύχρηστο breadcrumb βασισμένο στις ιδιότητες, δίνει την δυνατότητα να περιηγηθεί κάποιος σε άλλα σημεία του site χωρίς να μπερδευτεί, βρίσκεται στην κορυφή της σελίδας διακριτικά με στοιχείο το «μεγαλύτερο απο» και το τελευταιο κομμάτι του μονοπατιού άτονο για να υποδεικνύει την τρέχουσα σελίδα. Λειτουργικό, αλλά χωρίς καμμια ιδιάιτερη σχεδιάση με στόχο καθαρά και μόνο στο χρηστικό κομμάτι.



17

e-shop.gr

Μετά τα δυο επιτυχημένα παραδείγματα, να και μια αποτυχία. Το site του e-shop.gr, απο τις πρώτες επιχειρήσεις ηλεκτρονικού εμπορίου στην Ελλάδα καταστρατηγεί αρκετούς απο τους κανόνες του σχεδιασμού, αρχίζοντας απο τον βασικότερο: δεν μενει παρών σε όλο το breadcrumb trail! Επιλέγοντας το πρϊον είναι σαν να αποφασίζουμε να μην φύγουμε ποτέ απο την σελίδα παρα μόνο απο την βασική πλοήγηση ή απο κάποιες άλλες επιλογές που δίνονται. Πέραν απο το γεγονός της χαοτικής, τροποντινά, σχεδιασής του τουλάχιστον



18

το breadcrumb είναι ευδιάκριτο αλλά και διακριτικό(πολλές φορές υπερβολικά!), αλλά όμως καμουφλάρεται απο την μπάρα που περιέχει το καλάθι χρήστη, την εγγραφή και την βοήθεια που είναι πιο σχεδιαστικά πετυχημένο για χρήση breadcrumb απο αυτό που χρησιμοποιείται. Η επιλογή των χρωμάτων ποδοσφαιρικής ομάδας ακολουθεί και στα breadcrumbs Με την επιλογή του μαύρου σαν χρώμα που όμως δεν παραπέμπει σε σύνδεσμο παρά μόνο αν το περάσουμε το ποντίκι μας τυχαία στο σημείο, μπερδεύει τον χρήστη κάνοντας το δυσλειτουργικό. Η απορία φυσικά έγκειται στα κρεμασμένα βραβεία και στην λογική απόδοσης τους σε τέτοια site.

In.gr



19

Η περίπτωση του in.gr ενός ειδησεογραφικού site με πολύ περιεχόμενο είναι ένα καλό παράδειγμα της κακής χρήσης των breadcrumbs. Η ίδια η δομή ενός ειδησεογραφικού site δίνει την δυνατότητα της ιεραρχικής δομής των κατηγοριών και είναι ένα μια απο τις περιπτώσεις που τα breadcrumbs χρειάζονται λόγω και του πυκνού περιεχομένου που συσσωρεύουν και την πληθώρα κατηγοριών και άρθρων. Στην περίπτωση όμως του εν λόγω site δεν γίνεται καν κατανοητό οτι οι προηγούμενες σελίδες είναι σύνδεσμοι λόγω του μονότονου μαύρου που έχουν. Δεν υπάρχει διαχωρισμός μεταξύ της τρέχουσας σελίδας και των προηγουμένων (η ανακάλυψη οτι η τελευταία σελίδα δεν είναι συνδεσμος ενώ οι άλλες είναι, γίνεται μόνο εμπειρικά), ενώ ούτως ή άλλως η τελευταία σελίδα δεν είναι κάν η τελευταία. Στην επιλογή άρθρου το μονοπάτι μένει ακόμα στο Ελλάδα ενώ πλέον δεν υπάρχει δυνατότητα να γυρίσουμε στις γενική κατηγορία «Ελλάδα». Η περιήγηση στο site αφήνεται στο ενδιαφέρον και την υπομονή του χρήστη ενώ ο μόνος λόγος να δεις ένα άλλο αρθρο είναι αν υπάρχει κάπου σαν κοινός σύνδεσμος ή αν επιστρέψεις πίσω μέσω του φυλλομετρητή. Κάπως χαμηλά τα standard για ένα απο τα πρώτα ελληνικά site στον χώρο της ενημέρωσης.



20

Tanea.gr

Στο site της εφημερίδας τα νέα δίνει μια περίεργη διάσταση στα breadcrumbs. Αρχικά όπως και στο in.gr, δεν δίνει την τελευταία καταχώρηση θεωρώντας οτι την βλέπουμε ήδη. Βασισμένο όπως και το προηγούμενο στην τοποθεσία



21

όπου η τοποθεσία είναι η εκάστοτε ιεραρχικά δοσμένη κατηγορία. Εκεί έρχεται και η παρεξήγηση. Στο screenshot που βλέπουμε το μεσαίο πλήκτρο δεν είναι σύνδεσμος! Μπορούμε να πάμε μόνο στην αρχική σελίδα και στην γενική της οικονομίας απορώντας γιατί πρέπει να υπάρχει αυτό το μονοπάτι αν δεν υπάρχει γενική κατηγορία. Κατα τ’ άλλα η τοποθεσία είναι διακριτική, το σύμβολο που χρησιμοποιείται για διαχωρισμό τηρεί τις λογικές αλλά είναι ένα ακόμα site που δεν έχει κανένα ενδιαφέρον στην αισθητική σχεδίαση του breadcrumb παρά μόνο στην χρηστική(που τείνει να είναι αχρηστική με τέτοια λογική).

Pathfinder.gr



22

Στο site pathfinder.gr περιμένει κανείς να είναι σχετικά πιστό στο κομματι του «μονοπατιού» κι ευτυχώς είναι. Ξεκάθαρο breadcrumb με ένα διακριτικό bold για να υποδείξει την τρέχουσα σελίδα. Ίσως να χρειάζονταν ένα διαφορετικό χρώμα ή πάχος για να διαχωρίζεται και πιο ξεκάθαρα, αλλά και πάλι καλύπτει το κομμάτι της ξεκάθαρης λειτουργικότητας. Στο μέρος όπου είναι διακριτικό σαν breadcrumb δεν είναι σίγουρο καθότι επισκιάζει αρκετά την κεντρική μπαρα περιήγησης γενοωός που έει όμως να κάνει με τον σχεδιασμό της πρωταρχικής μπαρας περιήγησης κι οχι με το breadcrumb. Βασιμένο στην τοποθεσία και ακολουθώντας το «μονοπάτι».



23

Ethnos.gr

Τα breadcrumbs σε αυτό το site δεν διαφέρουν καθόλου απο τα προηγούμενα ειδησεογραφικού τύπου ελληνικά site: φτάνουν μόνο μέχρι την γενική κατηγορία είναι απλά, έχουμε τύπο «εισαγωγικού» και μια επιγραφή βρίσκεστε εδώ στην περίπτωση που το ξεχάσουμε. Διακριτκά στέκονται με το μπλέ χρώμα του συνδέσμου αλλά χωρίς την υπογράμμιση, δεν τραβούν το μάτι απο την ειδησεογραγία, αλλά δεν προσθέτουν τίποτα άλλο στην ούτως ή



24

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

Gazzetta.gr



25

Στην gazzetta.gr, ένα ιταλικό όνομα εξασφαλίζει μια μαφιόζικη λογική. Η σελίδα είναι αστεία όσο αφορά το θέμα του breadcrumb, δεν υπάρχει καν ο βασικός κανόνας ότι πρέπει να συμβαδίζουν με την κατηγορία. Αντιθέτως, εδω πάμε πολυ βαθειά μέχρι να εμφανιστεί το breadcrumb trail κι όταν εντέλει μετά απο 4 κλίκ για να βγούμε στο συγκεκριμένο άρθρο, κοιτάμε πάνω, παρατηρούμε πως ήταν σαν να μην πήγαμε πουθενά. Το «μεγαλύτερο από» αντιστρέφεται για να μας οδηγήσει στο πουθενά. Εδω λοιπόν παρατηρούμε ξεκάθαρα το φαινόμενο του μη λειτουργικού breadcrumb καθότι δεν προσφέρει καμμία ουσιαστική βοήθεια που δεν θα μπορούσαμε να έχουμε απο ένα απλό κουμπί ή μιας υποκατηγορίας στο βασικό μενού πλοήγησης.

Kathimerini.gr



26

Στο site της καθημερινής η λογική είναι αραβική. Καθώς είναι γνωστό, η λογική της στοίχισης των πραγμάτων απο την αριστερή προς την δεξιά μεριά, δεν είναι μόνο γιατί οι συντεταγμένες που δέχεται ο υπολογιστής στην οθόνη (για το που βρίσκονται τα αντικέιμενα) έρχεται απο αριστερά όπως κοιτάμε την οθόνη, αλλά κυρίως γιατί στον δυτικό πολιτσμό η φορά τόσο της γραφής, όσο και της ανάγνωσης είναι απο τα αριστερά πρός τα δεξιά. Πέραν λοιπόν απο την πολύ γενική κατάληξη που σε επιστρέφει μόνο στην αρχική σελίδα κάθε κατηγορίας και το γεγονός οτι και εδώ δεν υπάρχει το τελευταίο κομμάτι του trail, τα breadcrumbs είναι και στην ανάποδη μεριά τελείως. Σημασιολογικά δηλώνει είτε οτι απευθύνεται στο αραβόφωνο κομμάτι του πλυθησμού, είτε οτι σχεδιαστικά θέλει να δηλώσει κάτι που δεν είναι εντέλει κατανοητό, είτε οτι δεν δίνει καμμία αξία στα breadcrumbs καθότι χάνονται μεέσα στους υπόλοιπους σχετικούς συνδέσμους άρθρων. Η καινοτομία της τοποθέτησης λοιπόν δεν είναι πετυχημένη θε έλεγε κανείς.



27

Naftemporiki.gr

Στην Ναυτεμπορική, η λογική ειναι κοινότυπη (όπως και σε κάθε site ειδησεογραφικό που εξετάσαμε), το μονοπάτι είναι τοποθετημένο διακριτικά πάνω απο το κείμενο, χωρίς να αποπροσανατολίζει απο το βασικό μενού και τις υποκατηγορίες του λόγω της εικόνας-διαφήμισης που τα χωρίζει. Τυπικό μπλέ σαν σύνδεσμος, Σύμβολο «μεγαλύτερο από» και καμμία εμφάνιση της τελικής σελίδας, στην οποία βρισκόμαστε, στο trail. Κλασσικό «κόψιμο» site,



28

κλασσικά breadcrumbs. Ίσως λόγω της καηγοριοποίησης τo βάθος του site να φαίνεται μικρό όταν το δούμε μέσω των breadcrumbs.

Protothema.gr



29

Το site της εφημερίδας του Θέμου Αναστασιάδη, έχει ένα σχετικά κομψο breadcrumb trail. Στα χρώματα της όλης ιστοσελίδας, φεύγει απο το κλασσικό μπλέ των συνδέσμων αλλά ενώ χώρος υπάρχει για να μας δείξει την ακριβή μας θέση, περιορίζεται όπως και τα υπόλοιπα στην τυπική αναφορά της γενικής κατηγορίας. Ίσως και γενικά να μην χρειάζεται να αναφέρεται ο τίτλος του άρθρου όταν ήδη τον βλέπουμε μπροστά μας, αλλά ίσως πάλι και να δημιουργεί μια σύγχυση για το αν βλέπουμε ένα άρθρο ή κάποια προεπισκόπηση του χωρίς να χρειαστεί να κατεβούμε πιο κα΄τω στην σελίδα ψάχνοντας το τέλος του άρθρου για να το διαπιστώσουμε.

Xe.gr



30

Στην Χρυσή ευκαρία, ένα site που χρησιμοποιείται αρκετά και περιλαμβάνει μεγάλο όγκο πληροφοριών με συνδέσμους, παρότι τα πράγματα μπορεί να γίνουν δύσκολα, η διακριτική παρουσία των βασισμένων στην τοποθεσία breadcrumbs βοηθά αρκετά στην περιήγηση καθώς το trail οδηγεί μέχρι και στην αρχική σελίδα, ενώ ενεργοποιείται σύντομα με την αλλαγή επιπέδων στο site σε αντίθεση με αρκετά ειδησεογραφικά site που είδαμε που έπρεπε να φτάσει κανείς στο ίδιο το άρθρο για να ενεργοποιήθεί το trail. Σύμβολο το βέλος για τον διαχωρισμό, χρώματα απο το χρωματολόγιο του site και σωστή τοποθέτηση είναι βασικά του στοιχεία.



31

Insomnia.gr

Στο insomnia.gr έχουμε ουσιαστικά να κάνουμε με ένα online forum κι όχι με site. Πάραυτα παρατηρούμε ένα μικρό σχετικά σε βάθος breadcrumb και αρκετά συμπαθητικό με μια μικρή συμβολή στον όγκο δεδομένων που έχει ενα φόρουμ. Φυσικά το trail δεν καλύπτει όλη την έκταση του φόρουμ, αλλά κυριώς τις βασικές θεματικές ενότητες και κατα συνέπεια μιλάμε και για βάση



32

στην τοποθεσία πλοήγηση. Τα χρώματα δένουν αρμονικά και παρότι βρίσκεται σε άλλο σηεμίο το τέος του trail είναι ευδιάκριτο και μη επιλέξιμο.

Eurobank.gr

Η Eurobank πιθανότατα βρίκσεται τόσο ψηλά λόγω της υπηρεσίας e-banking που διαθέτει. Το site είναι απλό με κάποιες τσαχπινιές αμφιβόλου λογικής και



33

αισθητικής. Οι κατηγορίες είναι διακριτικά στο πάνω μέρος χωρισμένες με δεξιά διαγώνιο (slash), αλλά ειδικά στο παραπάνω παράδειγμα υπάρχει μια σύγχυση σχετικά με ποιό είναι κομμάτι του breadcrumb και ποιό οχι. Το μονοπατι ακολουθεί το τράπεζα>δυναμικό μέχρι και το θέσεις εργασίας αλλά μετα ακολουθούν άλλοι δυο σύνδεσμοι που δεν οδηγούν σε ίδια σημεία με αυτά του breadcrumb. Μπορεί να μη είναι τόσο περίπλοκο αλλά θεωρείται λάθος να αναγκάζεται ο πελάτης να εκλογικεύει την διαδικασία του μονοπατιού. Τα χρώματα του είναι τα ίδια, όπως και η διάσταση της γραμματοσειράς αλλά λόγω της θέσης τους δημιουργούν την αίσθηση οτι πρόκειται για μονοπάτι.

Skroutz.gr



34

Η μεγαλοσύνη του site skroutz.gr αντιτίθεται στην πασίγνωστη τσιγγουνιά του γνωστου παπιοεπιχειρηματία του Disney. Ευδιάκριτα γράμματα διακριτικά όμως αναμειγμένα καθότι τα στοιχεία της σελίδας έχουν την λογική του μεγάλου, που θα μπορούσε να τα διαβάσει και ηλικιωμένος με προβλήματα όρασης, και τραβάνε το μάτι χωρίς αυτό να εστιάζει στο μονοπατι. Ένα πολύ ωραίο παράδειγμα της σχεδίασης των breadcrumbs σε συνοχή με τα στοιχεία της σελίδας. Βασισμένα στις ιδιότητες breadcrumbs, αντικατάστση της τυπικής ευθειάς γραμμής υπογράμμισης συνδέσμου με διακεκομμένη, διαχωρισμός με εισαγωγικό δεξί, διαφορά στο τελευταίο trail με πιο σκούρα γράμματα, το skroutz.gr ακολουθέι την λογική e-commerce site επικεντρώνοντας στο φτηνότερο όμως: και το μεγάλο κουτι αναζήτησης το αποδεικνύει.



35

Uoa.gr

Το site του Εθνικού Καποδιστριακού Πανεπιστημίου ήταν για κάποιο λόγο η τελευταία στάση στο top 100 των site απο Ελλάδα στο alexa.com. Πολύ τυπικό breadcrumb και αντίστοιχα πιο τυπικοί σύνδεσμοι, μπλε με υπογράμμιση, με διαχωριστικό εισαγωγικό, η πλοήγηση είναι ενεργή απο την αρχή της αλλαγής επιπέδων, πιστή στην λειτουργία της, ταιριαστή με το



36

αυστηρό στήσιμο του site. Τελευταίο link ανενεργό και χωρίς υπογράμμιση το breadcrumb του uoa.gr, είναι τυπικό, αξιόπιστο και σφιχτά ακαδημαϊκό.

Με την ολοκλήρωση των breadcrumbs των ελληνικών τοπ 100 site, η προσοχή στράφηκε σε κάποια site παρόχων internet και φιλοξενίας και με μικρές διαφορές ήταν τα ίδια. Η σχολίαση έγινε στο site της hol.gr απλά γιατί είχε μια ευχάριστη λογική και γιατί μπορεί να γίνει μια σύνδεση με κάποια ξένα site που θα αναφέρουμε σε λίγο.

Hol.gr



37

Τυπικό το breadcrumb της hol, διαχωρισμένο με καθέτους αλλά και «μεγαλύτερο απο» σύμβολα για να αποδώσει την τωρινή σελίδα. Διαφορά στον τελευταίο σύνδεσμο για να φανεί η διαφορά του, το μονοπατι όμως αναμειγνύεται αρμονικά με τα χρώματα του site και στέκεται διακριτικά εκέι που θα έπρεπε να βρίσκεται. Το site της hol ήταν ενα ομολογουμένως απλό κι ωραίο site, αλλά περίμενε κανείς και απο την hol αλλά και απο τις παρόμοιες εταρείες να έχουν επενδύσει πιο πολύ στον σχεδιασμό του site τους ενγένει.



38

Συμπερασματικά

Χωρίς να αφήνουμε έξω κανένα απο τα site της κορυφαίας εκατοντάδας, διαπιστώσαμε πόσα λίγα απο αυτά κα΄νουν χρήση αυτής της δυνατότητας πλοήγησης. Πολλά απο αυτά είναι ειδησεογραφικά όπως το site της ελευθεροτυπίας και το αυτό της κας Στάη, που θα είχαν λόγω χρήσης τους αλλά τα αποφεύγουν παραδειγματικά αναπαυμένοι στην δυνατότητα των headlines να τραβήξουν τον κόσμο και εν μέρει σχεδόν αρνητικοί στην θέληση του χρήστη να περιηγηθεί άνετα στους ιστότοπους τους. Αποκλείστηκαν site ξένα και κάποια απο αυτά λόγω περιεχομένου επίσης. Υπήρχαν και δυο blog που δεν υποστηρίζουν την χρήση breadcrumbs και κάποια site που δεν είχαν λόγο να έχουν breadcrumbs (όπως το zoo.gr). Εσκεμμένα δεν τοποθετήθηκε και το google.gr καθότι θεωρήθηκε τροποντινά ξένο site, αλλά και γιατί δεν προσέφερε τίποτα στην έρευνα με την πολύ απλοϊκή του λογική μονοπατιού

Ένα άλλο θλιβερό συμπέρασμα ήταν οτι κανείς δεν επένδυε σοβαρά στον σωστο, λειτουργικό αλλά και κομψό σχεδιασμό του site. Ήταν αρκετά δύσκολη και η αναζήτηση για τέτοια site πέραν απο την κλασσική εκατοντάδα. Εντέλει μια μικρή βόλτα στα site του εξωτερικού μας έδειξε την όμορφη χρήση αλλά και τις δυνα΄τοτητες που υπάρχουν για καινοτόμες λύσεις μέσω των breadcrumbs. Παρατίθενται κάποια απο τα site του εξωτερικού για σύγκριση και παράθεση.



39

Apple.com

Το site της apple μια εταρειάς γνωστής για το υπέροχα μινιμαλιστικό της ύφος, δεν θα μπορούσε να είναι εξίσου όμορφο αλλά και να έχει προσοχή στην λεπτομέρεια και χρηστικότητα ταυτόχρονα. Διαχωρισμός του breadcrumb με σύμβολα «μεγαλύτερο απο», έξυπνα τοποθετημένα ώστε να αποτελούν κομμάτι του κουτιού στο οποίο είναι τοποθετημένα. Διακριτικό αλλά ταυτόχρονα σωστά τοποθετημένο, χωρίς να αποσπά την προσοχή αλλά ταυτόχρονα και με αισθητή παρουσία. Ενεργό απο νωρίς στα επίπεδα καθοδηγεί άνετα τον χρήστη μέχρι και την αρχική σελίδα.



40

Delicious.com

Η καινοτομία δεν έχει όριο στα breadcrumbs της Delicious! Χωρισμένα μεταξύ τους με μικρά ατομικά κουτιά που έχουν κατάληξη σε «>», δίνουν την δυνατότητα στον χρήστη να ακολουθήσει ανάποδη πορεία πρός την κατηγορία που θέλει αντί να φύγει απλά απο αυτή προς ψηλότερα επίπεδα του site. Μια ενσωματωμένη μηχανή αναζήτησης στο τελευταίο trail, παρέχει την δυνατότητα αναζήτησης κατηγορίας ή ιδιότητας! Το βάρος που έχουν είναι ιδιάιτερο χωρίς πάραυτα να ακυρώνουν την βασική πλοήγηση. Κομψα και



41

εύχρηστα μια πραγματική πρωτοπορία! Και βάση στο μονοπατι. Ένα περίεργα κλασσικό παράδειγμα path oriented λογικής.

Coverstock.com

Εδώ στο κλασσικό μοτίβο των breadcrumbs έχουμε την δυνατότητα επιλογής-αποεπιλογής των τελευταίων κατηγοριών για να μπορούμε να φιλτράρουμε τις κατηγορίες που μας δίνουν αποτελέσματα. Απλό, λιτό και λειτουργικό.

Ideo.com

Διαφορά χρώματος για να υποδηλώσει την διαφόρα επιπέδων, στυλάτα τετράγωνα με ένδειξη βέλους ενσωματωμένη, το site της IDEO, δίνει σημασία στο breadcrumb με διακριτικότητα, λειτουργικότητα αλλά και άποψη. Ιεραχική δομή, βασισμένο στην τοποθεσία και ενεργό απο ψηλά επίπεδα στα χρώματα του site.



42

Profoto.com

H profoto.com, έχει μια μοναδική δυνατότητα στο breadcrumb της: το κάθενα απο αυτά έχει υπομενού κατηγορίας για να μπορεί ο χρήστης να παραμετροποιήσει την αναζήτηση του πιο άνετα. Όλα δωσμένα με έναν τρόπο ώστε να μην επικρατεί πανικός απο την υπερπληροφόρηση του χρήστη. Απαλά χρώματα, διακριτικά και αρκετός χώρος για να μην δημιουργειται συνωστισμός των επιλογών.



43

Αντι Επιλόγου

Τα breadcrumbs μπορεί να γίνουν όπως φαίνεται κι απο τα παραδείγματα απο το εξωτερικό, πολύ δυνατά εργαλεία πλοήγησης. Κι όμως αυτά αγνοούνται παντελώς στο επίπεδο του σχεδιασμού και εργονομίας απο την ελληνική αγορά web. Ίσως επειδή το internet σαν χώρος διακίνησης κι αγοράς είναι σε χαμηλά επίπεδα στην χώρα να ωφείλει και την χαμηλή αίσθηση αισθητικής. Ίσως αν web designer σταματούσε να είναι ο προγραμματιστής να είχαμε κάποια ομορφότερα παραδείγματα με τον καιρό. Οι πηγές εμπνευσης είναι ολόγυρα μας.



44

Βιβλιογραφία

• Alexa.com Uhttp://www.alexa.com/topsites/countries;4/GRU

• Hongkiat.com Uhttp://www.hongkiat.com/blog/breadcrumb-navigation-examined-best-practices-%20%20examples/U

• Webdesign.about.com Uhttp://webdesign.about.com/od/webdesignbasics/g/bldefbreadcrumb.htmU

• W3schools.com Uhttp://www.w3schools.comU

• Web Design Garage –online book- Marc Campbell, Prentice Hall, Jan 21, 2005, ch. 7 http://my.safaribooksonline.com/0131481991/ch07

• Webdesignparctices.com http://www.webdesignpractices.com/navigation/breadcrumb.html

• Davechaffey.com http://www.davechaffey.com/E-marketing-Glossary/Breadcrumbs-in-web-design.htm

• Linkdup.com http://www.linkdup.com/

http://www.alexa.com/topsites/countries;4/GR�

http://www.hongkiat.com/blog/breadcrumb-navigation-examined-best-practices-%20%20examples/�

http://www.hongkiat.com/blog/breadcrumb-navigation-examined-best-practices-%20%20examples/�

http://webdesign.about.com/od/webdesignbasics/g/bldefbreadcrumb.htm�

http://webdesign.about.com/od/webdesignbasics/g/bldefbreadcrumb.htm�

http://www.w3schools.com/�

http://my.safaribooksonline.com/0131481991/ch07�

http://www.webdesignpractices.com/navigation/breadcrumb.html�

http://www.davechaffey.com/E-marketing-Glossary/Breadcrumbs-in-web-design.htm�

http://www.davechaffey.com/E-marketing-Glossary/Breadcrumbs-in-web-design.htm�

ΠΑΝΤΕΙΟΠΑΝΕΠΙΣΤΗΜΙΟ

ΠΑΝΤΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟΚΟΙΝΩΝΙΚΕΣ ΚΑΙ ΠΟΛΙΤΙΚΕΣ ΕΠΙΣΤΗΜΕΣΤΜΗΜΑ ΨΥΧΟΛΟΓΙΑΣ

Documents

Breadcrumb Navigation in Greek Sites