Η χρήση των Mega Drop Down menus έχει αρχίσει να γίνεται trend τα τελευταία χρόνια. Τόσο στο εξωτερικό, όσο και στην Ελλάδα, οι επαγγελματίες του χώρου έχουν υιοθετήσει αυτή την μορφή πλοήγησης για να μπορούν να προσφέρουν μια ομαλή εμπειρία στους χρήστες των διαδικτυακών τόπων που έχουν σχεδιάσει. Ένα Mega Drop Down menu μπορεί να βοηθήσει τον μέσο χρήστη να μεταβεί στην πληροφορία που τον ενδιαφέρει, γρήγορα και εύκολα χωρίς να επηρεάζεται από το βάθος / επίπεδο της πληροφορίας.

Τι είναι ακριβώς Mega Drop Down menu;

Η ορολογία της έννοιας σύμφωνα με τον Guru του Usability, Jakob Nielsen, είναι:

Τα Mega Drop Down menus είναι μεγάλα δισδιάστατα πλαίσια πλοήγησης με ομαδοποιημένο περιεχόμενο τα οποία έχουν σαν σκοπό την κατάργηση του scrolling και χρησιμοποιούν εικονίδια, ξεκάθαρο typography και tooltips για να εξηγήσουν στον χρήστη τις επιλογές που έχει.

Ποια είναι τα χαρακτηριστικά των Mega Drop Down menus;

Τα περισσότερα χαρακτηριστικά αναφέρονται ξεκάθαρα και στον παραπάνω όρο της έννοιας. Συγκεκριμένα:

1. Μεγάλα δισδιάστατα πλαίσια πλοήγησης με ομαδοποιημένο περιεχόμενο.
2. Οι επιλογές πλοήγησης είναι ξεκάθαρες και ενισχυμένες από την χρήση εικονιδίων, φωτογραφιών, ξεκάθαρου typography και tooltips.
3. Όλες οι επιλογές είναι εμφανείς στον χρήστη από την αρχή. Δεν υπάρχει scrolling του μενού ή της σελίδας που φιλοξενεί το μενού ώστε να χάνεται κάποια στιγμή η αρχική επιλογή από το πολύ scrolling.
4. Είναι μενού που προσφέρει γρήγορη πλοήγηση με ένα κλικ.

Πότε χρειάζεται ένα Mega Drop Down menu;

Για να χρησιμοποιηθεί ένα Mega Drop Down menu στο design ενός διαδικτυακού τόπου, θα πρέπει να απαντηθούν θετικά τουλάχιστον οι 2 πρώτες από τις παρακάτω ερωτήσεις:

1. Το website έχει μεγάλο βάθος επιπέδων δομής;
2. Το κάθε επίπεδο δομής περιέχει πολλές επιλογές;
3. Απαιτείται ομαδοποίηση της πληροφορίας σε επίπεδο πλοήγησης;

Πως γίνεται η καλύτερη ομαδοποίηση των επιλογών πλοήγησης;

1. Η αρχική στρατηγική ομαδοποίησης γίνεται ακολουθώντας την λογική δομή του διαδικτυακού τόπου. Αυτό σημαίνει πως αν ο διαδικτυακός τόπος έχει μια συγκεκριμένη δομή, το Mega Drop Down menu θα ακολουθήσει και αυτό εκείνη την δομή. Για καλύτερα αποτελέσματα μπορούν οι τίτλοι των ομάδων πλοήγησης να εμφανίζονται με διαφορετική γραμματοσειρά η μορφοποίηση. Αυτό όμως δεν μπορεί να θεωρηθεί σαν η καλύτερη λύση σε όλες τις περιπτώσεις.
2. Αν η παραπάνω τακτική δεν είναι αρκετή, τότε η παρουσίαση των ομαδοποιημένων επιλογών γίνεται με σειρά προτεραιότητας (σημασίας). Είναι προτιμότερο να γίνεται τοποθέτηση των σημαντικότερων ομάδων επιλογών στο σημείο που βρίσκεται κοντά στην κεντρική πλοήγηση του website. Δηλαδή αν υπάρχει μια κεντρική πλοήγηση π.χ. που το πρώτο της επίπεδο περιέχει την επιλογή “Υπηρεσίες”, τότε, από τις ομάδες επιλογών που υπάρχουν στην κατηγορία αυτή (Υπηρεσίες), είναι προτιμότερο να τοποθετούνται εκείνες με την μεγαλύτερη σημασία κοντά στο σημείο όπου το Mega Drop Down menu ανοίγει. Δηλαδή κοντά στην λέξη “Υπηρεσίες” του κεντρικού συστήματος πλοήγησης.
3. Επίσης είναι σημαντικό να μην επαναλαμβάνονται στις επιλογές της ομαδοποιημένης πλοήγησης διπλοί όροι, ακόμα και αν αναφέρονται σε διαφορετικές κατηγορίες. Είναι χαρακτηριστικό των Mega Drop Down menus να έχουν όλο το σύστημα πλοήγησης εμφανιζόμενο, οπότε θα φαίνονται οι διπλές ονομασίες και θα μπερδεύουν τους χρήστες.
4. Τέλος με την χρήση του Title attribute μπορεί να επιτευχθεί ενίσχυση της κάθε επιλογής εντός του συστήματος πλοήγησης κάνοντας ακόμα πιο ξεκάθαρη την λειτουργία της για τους χρήστες.

Ποια είναι τα πλεονεκτήματα της χρήσης των Mega Drop Down menus;

1. Άμεση πρόσβαση σε οποιοδήποτε επίπεδο ή σημείο επιθυμεί ο χρήστης.
2. Δημιουργία “λογικής” του διαδικτυακού τόπου και συνηθειών πλοήγησης στο μυαλό του χρήστη μέσα από οπτική απεικόνιση της δομής.
3. Αποφυγή αχρείαστου scrolling εντός των drop down menus του διαδικτυακού τόπου, το οποίο θα μπορούσε να δημιουργήσει εν συνεχεία και scrolling στις σελίδες του site όταν αυτό (το μενού) είναι σε πλήρη ανάπτυξη.
4. Ενίσχυση του SEO του διαδικτυακού τόπου γιατί με την χρήση Mega Drop Down menus γίνεται και αυτομάτως internal linking των σελίδων του website.

Παραδείγματα πετυχημένης χρήσης Mega Drop Down menus

Ακολουθεί μια λίστα από διαδικτυακούς τόπου που χρησιμοποιούν Mega Drop Down menus για να ενισχύσουν την εμπειρία της πλοήγησης και που αξίζει να σημειωθούν σαν σημεία αναφοράς και έμπνευσής. Κάθε μια περίπτωση προσφέρει ξεκάθαρα ομαδοποιημένες επιλογές η οποίες μπορούν πολύ εύκολα και γρήγορα να “σκαναριστούν” με το μάτι και να οδηγήσουν γρήγορα και κατανοητά τους χρήστες στα σημεία που τους ενδιαφέρουν.

Bentley Motors

http://www.bentleymotors.com/

Clinique

http://www.clinique.com/index.tmpl

Converse

http://www.converse.com/

Electronic Arts

http://www.ea.com/

Gateway Computers

http://www.gateway.com/

Guitar Hero

http://hub.guitarhero.com/games/ghiphone

Intel

http://www.intel.com/p/en_US/business?iid=gg_work+home_business

La Residence Mykonos Luxury Hotel

http://www.laresidencemykonos.com/

MTV

http://www.mtv.com/

NPR

http://www.npr.org/

REI

http://www.rei.com/

Republic

http://www.republic.co.uk/

Reuters

http://www.reuters.com/

Starbucks

http://www.starbucks.com/

White House

http://www.whitehouse.gov/

Mega Drop Down Menu resources

Στο διαδίκτυο υπάρχουν αρκετές λύσεις που μπορούν να χρησιμοποιηθούν για να επιταχυνθεί η διαδικασία της δημιουργίας ενός δυναμικού Mega Drop Down Menu συστήματος πλοήγησης. Μια αναζήτηση σε οποιαδήποτε μηχανή αναζήτησης για τον όρο “Mega Drop Down Menu Scripts” θα επιστρέψει πολλά αξιόλογα αποτελέσματα. Για την διευκόλυνσή σας, έχουν σημειωθεί παρακάτω οι σύνδεσμοι για 4 τέτοιες λύσεις:

CSS Ultimate Menus

http://codecanyon.net/item/css-ultimate-menus/123107?ref=1stwebdesigner

CSS3 Mega Drop Down Menu

http://codecanyon.net/item/css3-mega-drop-down-menu/126387?clickthrough_id=&redirect_back=true&ref=105

Make a Mega Drop-Down Menu with jQuery

http://blogs.sitepoint.com/2009/03/31/make-a-mega-drop-down-menu-with-jquery/

Cut & Paste jQuery Mega Menu

http://www.javascriptkit.com/script/script2/jkmegamenu.shtml

Επίλογος

Αν θέλετε να προσθέσετε κάποιο website ή resource το οποίο πιστεύεται πως πρέπει να μπει στο άρθρο, μην διστάσετε να το γράψετε στα comments. Θα χαρούμε να το προσθέσουμε.

Σε προηγούμενο άρθρο, με τίτλο “Wireframes στο Web Design” είχε αναλυθεί η έννοια του WireFrame στο Web Design, και πώς μπορεί κάποιος να χρησιμοποιήσει αυτή την τεχνική για να κερδίσει χρόνο από τη γενική παραγωγική διαδικασία ενός Web έργου.
Στον επίλογο του άρθρου αυτού, αναφέραμε πως θα προταθούν μερικά εργαλεία σχεδιασμού Wireframes. Τα συγκεκριμένα εργαλεία στοχεύουν κατά βάση σε αυτό, αλλά μπορείτε να χρησιμοποιήσετε και άλλα που χρησιμοποιείτε καθημερινά στην παραγωγική σας διαδικασία, όπως π.χ. το PowerPoint.
Σήμερα λοιπόν σας παρουσιάζουμε 21 εργαλεία για WireFraming:

Axure RP Pro

Balsamiq Mockups

Denim

EightShapes Unify

FlairBuilder

ForeUI

Gliffy

Hot Gloo

iPlotz

iRise

Jumpchart

Justinmind Prototyper

Justproto

Microsoft Visio

MockupScreens

mxGraph

Omnigraffle

Pencil

Pidoco

ProtoShare

WireframeSketcher

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

Τι είναι τα Wireframes στο Web Design;

Wireframe στο Web Design είναι ο πρόχειρος σχεδιασμός μια ιστοσελίδας ο οποίος γίνεται πριν τον κανονικό της σχεδιασμό. Συνήθως γίνεται με πολύ απλά εργαλεία γιατί στόχος είναι η προβολή της λειτουργικότητας της σελίδας και όχι του εικαστικού της. Λόγω της απλότητάς τους και της έλλειψης εικαστικού, είναι συνήθως ασπρόμαυρα και έχουν μοναδικό στόχο να απεικονίσουν την τοποθέτηση των στοιχείων μιας σελίδας και τη λειτουργικότητα της. Στοιχεία όπως scrollers, κουμπιά, θέσεις εικόνων, θέσεις τίτλων, κ.α.

Τι κερδίζετε από την χρήση των Wireframes;

Βλέποντας πώς θα λειτουργήσει ένας διαδικτυακός τόπος, πριν αυτός σχεδιαστεί, σας βοηθάει πάρα πολύ στην κατανόηση του UID (User Interface Design) και δίνει την ευκαιρία στη δημιουργική ομάδα να προβλέψει τυχόν προβλήματα που ίσως προκύψουν στο μέλλον. Εκτός από την ίδια τη δημιουργική ομάδα, οι πελάτες σας μπορούν να φανταστούν τον διαδικτυακό τους τόπο σε ένα αρχικό στάδιο. Αυτό τους βοηθάει στο να καταλάβουν τι ακριβώς θα παραλάβουν και τους δίνει την ευκαιρία να κάνουν τις επεμβάσεις που θέλουν σε ένα σημείο που δεν επηρρεάζει την παραγωγική διαδικασία. Τα εμπόδια αντιμετωπίζονται σε αρχικό στάδιο και ο πελάτης νιώθει ότι έχει μεγαλύτερη συμμετοχή στην όλη διαδικασία.

Πως μπορείτε να φτιάξετε δικά σας Wireframes;

Ο πιο συνηθισμένος τρόπος κατασκευής Wireframes είναι με το χαρτί και το μολύβι. Πάρτε μια λευκή κόλλα χαρτί και το μολύβι σας και αρχίστε να σχεδιάζετε τις ιδέες σας. Η επαφή αυτή με το project σάς δίνει τη δυνατότητα να διευρύνετε τους ορίζοντές σας. Το χαρτί και το μολύβι σας δίνουν την δυνατότητα να δείτε σε εικόνα αυτό που φαντάζεστε πολύ γρήγορα! Αφού ολοκληρώσετε τις ιδέες σας, μπορείτε να τις σκανάρετε και να τις αποστείλετε στον πελάτη σας σαν εικόνες, ώστε να αρχίσει να αποκτάει και εκείνος μια καλύτερη ιδέα του τι σκοπεύετε να του ετοιμάσετε και να του δώσετε την ευκαιρία να επέμβει σε αυτό το αρχικό στάδιο.

Επίλογος

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

Ο σημερινός μέσος άνθρωπος χρησιμοποιεί καθημερινά διάφορες συσκευές. Από απλές συσκευές όπως έναν βραστήρα, μια τηλεόραση, ένα τηλέφωνο μέχρι και πιο πολύπλοκες, δηλαδή ένα smart phone, έναν υπολογιστή κ.ά. Κάθε μια από αυτές τις συσκευές για να φανεί χρήσιμη στον άνθρωπο, πρέπει να μπορεί να “επικοινωνεί” μαζί του. Για να επιτευχθεί αυτή η επικοινωνία μεταξύ συσκευής και ανθρώπου ένας UID (User Interface Designer) πρέπει να σκεφτεί και να σχεδιάσει τον τρόπο με τον οποίο θα αναπτυχθεί η αυτή η σχέση.
Στην περίπτωση του βραστήρα, ένα κουμπί με ένα φωτάκι, δίνει στον άνθρωπο την ικανότητα να επικοινωνεί μαζί του. Πώς; Απλά ο άνθρωπος λέει στον βραστήρα να βράσει νερό πατώντας το κουμπί και ο βραστήρας ανάβοντας το λαμπάκι λέει στον άνθρωπο ότι άρχισε να το βράζει. Με το πέρας του βρασίματος σβήνει το λαμπάκι και ο βραστήρας ειδοποιεί τον άνθρωπο πως το νερό έβρασε.
Ο UID σε αυτό το παράδειγμα, σχεδίασε το κουμπί, το φωτάκι και τον τρόπο με τον οποίο μπορεί και αντιδράει ο βραστήρας στις ενέργειες του χρήστη του. Επίσης σχεδίασε το μέγεθος του κουμπιού, το χρώμα του, και αποφάσισε σε ποιο σημείο της συσκευής πρέπει να τοποθετηθεί ώστε να είναι πιο εργονομικό στον χρήστη του.
Εφαρμογές όπως η παραπάνω υπάρχουν σε όλες τις συσκευές, ηλεκτρονικές και μη. Εμάς μας ενδιαφέρει η εφαρμογή του UID (User Interface Design) στο Web Design και γενικότερα στο σχεδιασμό ηλεκτρονικών εφαρμογών (CDs, DVDs, iPhone apps, κ.α.). Πριν όμως αναλύσουμε περισσότερο το θέμα μας ας απαντήσουμε στο ερώτημα, τι ακριβώς είναι το UID;

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

Τι πρέπει να προσέχουμε στο UID ενός website;

1.Σωστή τοποθέτηση των βασικών συνδέσμων και κουμπιών
Όπως και στο παράδειγμα του βραστήρα, έτσι και στον σχεδιασμό ενός website, τα κουμπιά και οι σύνδεσμοι που λένε στον χρήστη τι να κάνει, πρέπει να είναι τοποθετημένα σε σωστά σημεία. Δηλαδή, να μην είναι μπερδεμένα με άλλα στοιχεία του εικαστικού και να ξεχωρίζουν εύκολα από οποιοδήποτε άλλο στοιχείο. Π.χ. Είναι προτιμότερο να μην υπογραμμίζονται λέξεις αν δεν είναι σύνδεσμοι γιατί οι υπογραμμισμένες λέξεις στο διαδίκτυο έχουν ταυτιστεί με links.

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

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

4.Συνοχή
Είναι σημαντικό να δημιουργείται στον χρήστη η αίσθηση της συνήθειας. Η συνήθεια στην οποία αναφερόμαστε είναι σε λειτουργικό επίπεδο και προκαλεί στον χρήστη το αίσθημα της ασφάλειας. Αυτό πετυχαίνεται με τη συνοχή στο σχεδιασμό των λειτουργιών και αποτελεί ένα μεγάλο συν στη συνολική επιτυχία της σχέσης μεταξύ ανθρώπου και διαδικτυακού τόπου ή ηλεκτρονικής εφαρμογής.

5.Σωστή ανταπόκριση
Ο σχεδιασμός μιας ηλεκτρονικής εφαρμογής ή διαδικτυακού τόπου πρέπει να προβλέπει και τις σωστές αντιδράσεις μιας διαδραστικής σχέσης ανθρώπου και εφαρμογής. Δηλαδή όταν ο χρήστης εκτελέσει μια λανθασμένη λειτουργία, ο διαδικτυακός τόπος πρέπει να τον ενημερώσει σχετικά και να του προτείνει μια λύση. Φανταστείτε να εκτελούσε μια λανθασμένη λειτουργία ο χρήστης και να μην ενημερωνόταν γι’ αυτό από την εφαρμογή. Θα νόμιζε ότι όλα δουλεύουν ρολόι ενώ στην πραγματικότητα η επιλεγμένη λειτουργία του δεν θα εκτελείτο.

6.Λειτουργικότητα και εργονομία κινήσεων
Οι σύνδεσμοι, τα κουμπιά και γενικότερα τα στοιχεία πλοήγησης αν είναι τοποθετημένα σε σημεία που βολεύουν την κίνηση του χεριού που κρατάει το ποντίκι, δημιουργούν στον χρήστη μια αίσθηση ταχύτητας και ασφάλειας κινήσεων γιατί νιώθει τις κινήσεις που κάνει γνώριμες και “σωστές”. Προκαλώντας αφύσικες κινήσεις στον χρήστη δεν ενισχύεται το UID και ο χρήστης εκνευρίζεται νιώθοντας ότι εκτελεί άσκοπες και χρονοβόρες κινήσεις.

7.Ελκυστικότητα
Μια όμορφη αισθητική προσέγγιση πάντα βοηθάει στην επικοινωνία χρήστη και εφαρμογής. Όταν ο χρήστης βρίσκεται απέναντι σε ένα όμορφα σχεδιασμένο UID, νιώθει όμορφα, του δημιουργούνται ζεστά συναισθήματα και αντιμετωπίζει την εμπειρία του μέσα από ένα θετικό πρίσμα. Νιώθοντας οικεία, επικοινωνεί καλύτερα με την εφαρμογή και έχει μια καλύτερη εμπειρία. Μια καλή εμπειρία είναι ένας από τους λόγους για τους οποίους επιστρέφει ο χρήστης στον διαδικτυακό τόπο, ξανά και ξανά.

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

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

Το Usability είναι η σχέση του ανθρώπου / χρήστη με το user interface (περιβάλλον της εφαρμογής ή του site). Όσο καλύτερο το Usability, τόσο καλύτερη η κατανόηση της λειτουργίας της εφαρμογής/website από τον μέσο χρήστη.

Ίσως το Usability να είναι κάτι το οποίο δεν έχει κεντρίσει το ενδιαφέρον των πελατών σας (πολλές φορές οι πελάτες – χωρίς να το γνωρίζουν -προτείνουν ακόμα και πράγματα που κάνουν κακό στο Usability), αλλά εσείς σαν Web Designers μπορείτε να τους ενημερώσετε σχετικά με αυτό και να τους αντί-προτείνετε λύσεις που είναι πιο φιλικές προς τους χρήστες (User Friendly).

Το Web Design Blog, έκανε μια έρευνα και βρήκε μερικά web sites τα οποία θα σας φανούν ιδιαίτερα χρήσιμα στην αναζήτηση του κατάλληλου Usability για το website ή την εφαρμογή που σχεδιάζετε. Εκτός από εσάς, τα website αυτά ίσως μπορέσουν να βοηθήσουν και τους πελάτες σας να καταλάβουν καλύτερα τι βοηθάει το website τους και τι όχι.

FENG GUI

http://www.feng-gui.com

Το Feng GUI (Graphic User Interface) είναι ένα site που σας δίνει την δυνατότητα να κάνετε upload μια εικόνα ή design και στη συνέχεια με έναν αλγόριθμο υπολογίζει περίπου σε ποιο σημείο θα έπεφτε το μέσο ανθρώπινο μάτι. Πολύ χρήσιμη δωρεάν λύση.

M.I.T.

http://web.mit.edu/is/usability/usability-guidelines.html

Το πανεπιστήμιο του MIT, έχει ετοιμάσει έναν πολύ χρήσιμο πίνακα με όλες τις λεπτομέρειες ,στις οποίες είναι καλό να δίνει προσοχή ένας Web Designer όταν σχεδιάζει ένα website. Ο πίνακας αυτός ανανεώνεται συνεχώς.

InfoDesign

http://www.infodesign.com.au/usabilityresources/evaluation/webevaluation.asp

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

Five Second Test

http://fivesecondtest.com/

Ένα ακόμα πολύ χρήσιμο website, το Five Second Test, χρησιμοποιεί την τεχνική της απομνημόνευσης των εντυπωσιακών στοιχείων μιας ιστοσελίδας. Δηλαδή, ανεβάζετε (upload) το εικαστικό σας και αυτό μετά παρουσιάζεται για 5 δευτερόλεπτα σε τυχαίους χρήστες. Στη συνέχεια οι τυχαίοι αυτοί χρήστες πρέπει να γράψουν ονομαστικά ποια 5 στοιχεία τους έκαναν περισσότερο εντύπωση από τη σελίδα σας. Συλλέγοντας στοιχεία, εσείς μετά μπορείτε να καταλάβετε ποια στοιχεία της σελίδας σας τονίζονται περισσότερο και ποια όχι. Η πληροφορία αυτή βοηθάει στο να ισορροπήσετε τα εικαστικά σας όπως πρέπει, ώστε οι χρήστες σας να έχουν την πιο σωστή εμπειρία. Το Five Second Test έχει άλλα 2 τεστ. Στο ένα μπορείτε να βάλετε το εικαστικό σας να συγκριθεί με ένα άλλο (για 5 δευτερόλεπτα) και στο άλλο μπορείτε να ζητάτε από τους χρήστες να καταγράφουν τι τους άρεσε και τί όχι, αφού έχουν δει το εικαστικό σας για 5 δευτερόλεπτα πάλι.

ClickTale

http://www.clicktale.net

Μια πολύ ενδιαφέρουσα λύση για το Usability είναι αυτή της ClickTale. Η ClickTale έχει μια δωρεάν επιλογή και μερικές πιο δυνατές λύσεις επί πληρωμή. Αυτό που κάνει είναι να εξετάζει την κίνηση των χρηστών σας στο website σας και να σας παρουσιάζει αυτή την κίνηση σε video! Έτσι, είναι σαν να βρίσκεστε πίσω από το χρήστη και να παρακολουθείτε την οθόνη του. Η Δωρεάν επιλογή είναι πολύ καλή για να δοκιμάσετε την υπηρεσία. Αν κρίνετε πως χρειάζεστε μια πιο ολοκληρωμένη εικόνα, μπορείτε να δοκιμάσετε και ένα από τα πακέτα επί πληρωμής της ClickTale στο http://www.clicktale.com/personal_pricing.aspx για ιδιώτες και στο http://www.clicktale.com/business_pricing.aspx για εταιρίες.

CrazyEgg

http://crazyegg.com/

Η λύση της CrazyEgg είναι πολύ καλή και παρέχει πολλές χρήσιμες λειτουργίες. Ο λόγος που την παρουσιάζουμε τελευταία είναι γιατί προσφέρει μόνο λύσεις επί πληρωμή. Παρόλ’ αυτά αξίζει τον κόπο να της ρίξετε μια ματιά.

Ένας ανεπίσημος κανόνας του Web Design (Σχεδιασμού Ιστοσελίδων) είναι και αυτός των 3 κλικ, ή όπως αποκαλείται στο εξωτερικό “Three-click rule“. Ο κανόνας είναι απλός και αναφέρει ότι:

“Ο χρήστης δεν πρέπει να ξεπερνάει τα 3 κλικ για να βρει οποιαδήποτε πληροφορία θέλει στον διαδικτυακό τόπο που βρίσκεται.”

Ο άτυπος αυτός κανόνας βασίζεται στην υποψία ότι, οι χρήστες που δεν βρίσκουν την πληροφορία που αναζητούν μετά από 3 κλικ, εκνευρίζονται και φεύγουν δυσαρεστημένοι από το website.

Αν και δεν υπάρχουν επίσημα αποδεικτικά στοιχεία που να υποστηρίζουν την άποψη αυτή, είναι κοινά αποδεκτό στην κοινωνία των Web Designers πως ο κανόνας των 3 κλικ είναι αληθινός και όποια site τον ακολουθούν, έχουν ένα πιο συγκροτημένο και κατανοητό σύστημα πλοήγησης, έλκοντας έτσι τους χρήστες.

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

Περισσότερες πληροφορίες για το Three-click rule μπορείτε να διαβάσετε στα παρακάτω links:

• http://www.uie.com/articles/three_click_rule/
• http://www.hobo-web.co.uk/tips/31.htm
  

Για εσάς τι έχει μεγαλύτερη σημασία;