The trunk test

Don't make me think

Ο Steve Krug, στο πολύ ενδιαφέρον και χρήσιμο βιβλίο του “Don’t make me think” (το οποίο συστήνω ανεπιφύλακτα σε όσους γνωρίζουν τώρα σιγά σιγά το χώρο του usability), περιγράφει ένα γρήγορο και εύκολο τεστ για να κρίνει κανείς πόσο καλή είναι η πλοήγηση σε ένα site. Αποφάσισα να “τεστάρω” με τη μέθοδο του Krug κάποια ελληνικά sites για να δω πόσο καλά θα πάνε…

The trunk test

Ο Krug το ονομάζει “the trunk test”, δηλαδή το τεστ του πορτ-μπαγκάζ. Το σκεπτικό είναι το εξής: Φαντάσου ότι σου έχουν δέσει τα μάτια, σε έχουν κλείσει μέσα σε ένα πορτ-μπαγκάζ και αφού το αυτοκίνητο στο οποίο σε έχουν πετάξει κάνει κάμποσους κύκλους, σε αφήνει τελικά κάπου βαθιά μέσα στις σελίδες ενός website. Μόλις ξεζαλιστείς και η όρασή σου επανέλθει, θα πρέπει να μπορείς εύκολα και χωρίς ενδοιασμό να απαντήσεις τις εξής ερωτήσεις:

1. Σε ποιό site είσαι; (Site ID)
2. Σε ποιά σελίδα του site βρίσκεσαι; (Page name)
3. Ποιές είναι βασικές ενότητες του site; (Sections)
4. Τι επιλογές πλοήγησης έχεις στη σελίδα; (Local navigation)
5. Που βρίσκεσαι σε σχέση με τα υπόλοιπα σημεία της σελίδας; (ενδείξεις “You are Here“)
6. Πώς μπορείς να κάνεις αναζήτηση; (Search)

Ο λόγος που ο Krug επιλέγει αυτό τον “μαφιόζικο” παραλληλισμό είναι γιατί θέλει να αναδείξει κάτι που συχνά ξεχνάμε. Ότι δηλαδή πολλές φορές δεν καταλήγουμε σε μία εσωτερική σελίδα ακολουθώντας προσεκτικά τα βήματα που έχει σχεδιάσει ο δημιουργός του site, αλλά αντιθέτως “προσγειωνόμαστε” απευθείας εκεί από άλλες πηγές, όπως π.χ. από το Google ή ακολουθώντας ένα link από άλλη σελίδα. Αυτό σημαίνει ότι σαν χρήστες δεν είμαστε ήδη εξοικειωμένοι με τη δομή, τις επιλογές πλοήγησης και τις συμβάσεις που χρησιμοποιεί το συγκεκριμένο site.

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

The I ♥ Digital  test

Για το δικό μου τεστ, έχω επιλέξει να εξετάσω τις εξής σελίδες:

  • Gregorys.gr (σελίδα εμφάνισης καταστημάτων Αθήνας)
  • Buldoza.gr (σελίδα κατηγορίας T-Shirts)
  • Getitnow.gr (σελίδα κατηγορίας Tablets)

Αν θέλετε, προτείνω να κάνετε το δικό σας τεστ ρίχνοντας πρώτα μια (μισόκλειστη) ματιά στις παραπάνω σελίδες αναζητώντας τα 6 στοιχεία που αναφέρονται παραπάνω και στη συνέχεια να δείτε αν συμπίπτουν τα συμπεράσματά μας (so much geeky fun!).

Gregorys.gr

Γρηγόρης

 1. Site ID

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

2. Page name

Το όνομα της σελίδας στην οποία βρίσκομαι, δηλαδή τα Καταστήματα Κέντρου Αθήνας, απουσιάζει εντελώς από τη σελίδα.

3. Site sections

Η περιοχή στην οποία βρίσκονται οι βασικές ενότητες της σελίδας διακρίνονται εύκολα (ακόμα και με μισόκλειστα μάτια) και αποτελούν το κύριο μενού πλοήγησης στο πάνω μέρος της σελίδας.

4. Local navigation

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

5. You are here

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

6. Search

Η αναζήτηση είναι σαφής και τοποθετημένη σωστά. Ένα πιο απλό λεκτικό όπως το “Αναζήτηση” θα ήταν καλύτερο από το πιο παιχνιδιάρικο αλλά όχι τόσο αποτελεσματικό “Ψάχνεις για κάτι;”.

Buldoza.gr

 Buldoza

 1. Site ID

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

2. Page name

Το όνομα της σελίδας στην οποία βρίσκομαι, δηλαδή τα T-Shirts, είναι εμφανές και μάλιστα γραμμένο με μεγάλα και καθαρά γράμματα. Τέλειο.

3. Site sections

Το κύριο μενού πλοήγησης είναι αρκετά έντονο και ξεχωρίζει στη σελίδα. Τα fonts των κατηγοριών θα μπορούσαν να είναι λίγο πιο έντονα ή μεγάλα.

4. Local navigation

Οι μόνες επιλογές πλοήγησης στην συγκεκριμένη σελίδα είναι στην πραγματικότητα τα φίλτρα που βρίσκονται αριστερά.

5. You are here

Πάνω από τον τίτλο της σελίδας, βρήκα εύκολα τα breadcrumbs που σηματοδοτούν που βρισκόμαστε.

6. Search

Το πεδίο αναζήτησης είναι μεγάλο και καθαρό, τοποθετημένο στο κέντρο του header, “ala ASOS.com

Getitnow.gr

Getitnow

 1. Site ID

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

2. Page name

Το όνομα της σελίδας στην οποία βρίσκομαι, δηλαδή στην κατηγορία Tablets, βρίσκεται αρκετά πιο κάτω στη σελίδα, κάτω από ένα banner και ανάμεσα σε αρκετό “clutter”. Το αποτέλεσμα είναι στο τεστ να μην είναι καθόλου ευδιάκριτο να μην μπορώ σε καμία περίπτωση να υποθέσω ότι το page name βρίσκεται εκεί.

3. Site sections

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

4. Local navigation

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

5. You are here

Οι δημιουργοί της σελίδας προέβλεψαν τα breadcrumb, αλλά δυστυχώς η υλοποίηση δεν είναι  ιδανική. Τα breadcrumbs είναι τοποθετημένα σε πλαίσιο, κάτι το οποίο τα κάνει να μοιάζουν με τίτλο σελίδας. Επιπλέον, η έμφαση της Αρχικής σελίδας, είναι υπερβολική, τραβάει το μάτι κάνοντας τον χρήστη να αγνοεί τη συνέχεια. Τέλος, δεν έχει χρησιμοποιηθεί κάποιο από τα σύμβολα που βοηθούν το χρήστη να καταλάβει πως πρόκειται για breadcrumbs (όπως το “>”, π.χ. Αρχική > Tablets).

6. Search

Υπάρχουν 2 πεδία αναζήτησης, μία αμφιλεγόμενη πρακτική όσον αφορά το Usability. Αγνοώντας όμως το γεγονός αυτό, βρίσκω ότι η τοποθέτηση και των 2 πεδίων δυσκολεύουν το χρήστη, ο οποίος περιμένει να βρει την αναζήτηση ψηλά στην περιοχή του header, συνήθως δεξιά ή στο κέντρο.

Οι βαθμολογίες

Το αυτοσχέδιο αυτό τεστ, ανέδειξε νομίζω ένα ξεκάθαρο νικητή. Το Buldoza (τουλάχιστον η συγκεκριμένη σελίδα που εξέτασα) φάνηκε να καλύπτει και τα 6 σημαντικά στοιχεία που αναφέρει ο Krug ως σημαντικά στοιχεία πλοήγησης. Το Getitnow, αν και φαίνεται να έχει σωστή πρόθεση, έχει ακόμα αρκετά περιθώρια βελτίωσης σε επίπεδο user centered design και υλοποίησης. Τέλος, το site του Γρηγόρη, στην προσπάθειά του να παρουσιάσει ένα πρωτότυπο και φιλικό design, μάλλον άφησε σε δεύτερη μοίρα τα θέματα χρηστικότητας.

Το τεστ του Steve Krug αλλά και η δική μου εκδοχή εδώ στο I ♥ Digital, δεν αποτελούν επιστημονική ή πλήρη έρευνα χρηστικότητας σε καμία περίπτωση. Είναι όμως μια χρήσιμη τεχνική που αναδεικνύει εύκολα και γρήγορα κάποια σημαντικά θέματα και μπορεί να αποτελέσει ένα πολύτιμο “checklist” για κάθε σελίδα.

 

Σας άρεσε; Μοιραστείτε το!

Leave a Comment.