<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=352162718287948&amp;ev=PageView&amp;noscript=1">
Πείτε μας για το επόμενο project σας! Εμείς θα επικοινωνήσουμε μαζί σας άμεσα. Συμπληρώστε τη φόρμα
To μονοπάτι της λειτουργικότητας περνάει από το UI και το UX!

To μονοπάτι της λειτουργικότητας περνάει από το UI και το UX!

Έχετε αναρωτηθεί ποτέ γιατί μερικά από τα πιο άσχημα site παγκοσμίως όπως το reddit ή η wikipedia είναι ταυτόχρονα και ανάμεσα στα πιο δημοφιλή;

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

Θυμηθείτε τη ρήση του Steve Jobs: “Design is not just what it looks like and feels like. Design is how it works”.

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

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

User Experience (UX Design)

1. Απλότητα και λειτουργικότητα

Είναι ξεκάθαρος ο τρόπος που αλληλεπιδρά ο επισκέπτης με το site;

Αν πρόκειται για παράδειγμα για ένα e-shop, πόσο εύκολα μπορεί κάποιος να αφαιρέσει ή να προσθέσει προϊόντα στο καλάθι του;

Υπάρχουν ενέργειες που είναι υποχρεωμένος ο επισκέπτης να κάνει αλλά αποδεικνύονται τελικά περιττές και άρα μπορούν να αφαιρεθούν;

Με εκτεταμένα τεστ στο site σου, εντόπισε ό,τι δυσκολεύει ή καθυστερεί την πλοήγηση των επισκεπτών σου.

2. Οργάνωση και διαμόρφωση του περιεχομένου

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

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

Όλα αυτά ελκύουν τον επισκέπτη και τον καθοδηγούν στο αόρατο μονοπάτι που του έχουμε στρώσει.

3. Ξεκάθαρα CTAs

Τι θα συμβεί αν πατήσω αυτό το link;

Είναι αυτό το σωστό button για να κατεβάσω το eBook;

Αυτές οι απορίες πρέπει να απουσιάζουν από τη σκέψη των επισκεπτών σου και να αντικατασταθούν με την αίσθηση σιγουριάς και εμπιστοσύνης.

Εικόνα για Ξεκάθαρα CTAs

Τα κουμπιά πρέπει να είναι ευδιάκριτα και να δείχνουν ξεκάθαρα την ιδιότητά τους.

Ότι δηλαδή μπορούν να πατηθούν.

Επίσης, προτίμησε ξεκάθαρα και περιγραφικά CTAs τόσο για τα κουμπιά όσο και για τα link και μη βασίζεσαι αποκλειστικά στην αντιληπτική ικανότητα των επισκεπτών.

User Interface (UI Design)

1. Καθαρό και ευδιάκριτο navigation

Το menu του website σου θα πρέπει να είναι άμεσα εντοπίσιμο από τον επισκέπτη, ώστε να μπορεί να πλοηγηθεί εύκολα και γρήγορα.

Η κάθε ενέργεια που σχετίζεται με το menu, όπως για παράδειγμα το hover σε μια κατηγορία, πρέπει να αποτυπώνεται ξεκάθαρα,

ενώ τα χρώματα που θα επιλεχθούν για αυτή την ενέργεια δεν πρέπει να δημιουργήσουν σύγχυση στον επισκέπτη ή να επιβαρύνουν την αισθητική του site.

2. Εύκολη διαδραστικότητα με menu τύπου “Burger”, “Tabbed” ή “Pull Down”

Είναι εύκολο για τον επισκέπτη να πατήσει ή να σύρει το menu;

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

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

3. Εύκολη πλοήγηση

Έχοντας σαν πηγή έμπνευσης την ιστορία του Hansel και της Gretel, τα breadcrumbs καλύπτουν την αντίστοιχη ανάγκη των επισκεπτών σε ένα site να βρίσκουν εύκολα το δρόμο τους.

Παράδειγμα breadcrumbs

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

Ειδικότερα, όταν πρόκειται για κατασκευή e-shop, η χρήση τους είναι απαραίτητη για να μπορέσει ο επισκέπτης να περιηγηθεί σε πολλές σελίδες,

είτε για να συγκρίνει προϊόντα και τιμές είτε για να πραγματοποιήσει περαιτέρω αγορές.

Καθώς είναι διαρκώς σε θέση να γνωρίζει σε ποιο σημείο του site βρίσκεται και ποια είναι η ιεραρχία του περιεχομένου,

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

Usability

1. Διαμόρφωση στυλ και μεγέθους γραμματοσειράς

Αν οι γραμματοσειρές Arial και Times New Roman εξακολουθούν να ζουν ανάμεσα στις γραμμές κώδικα του site σου, ήρθε η ώρα για αλλαγή και αναβάθμιση.

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

Το αποτέλεσμα; Ένα πιο ευανάγνωστο περιεχόμενο που επηρεάζει θετικά τον χρόνο παραμονής των επισκεπτών στο site σου.

2. Σχεδιασμός ειδικά διαμορφωμένων σελίδων 404

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

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

3. Αφαίρεση των ενοχλητικών και «επιθετικών» banner

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

Αν ένας από τους στόχους σου είναι η εγγραφή ενός επισκέπτη στη λίστα e-Mail, προτίμησε ένα pop up που ακολουθεί τον επισκέπτη κατά τη παραμονή του στο site χωρίς να κρύβει το περιεχόμενο και δώσε του την επιλογή να γραφτεί όποτε εκείνος το επιλέξει.

Η Ρώμη δεν φτιάχτηκε σε μια ημέρα...

Έτσι, δεν μπορείτε να περιμένετε ότι θα αποκτήσετε ένα αριστουργηματικό website από τη μια στιγμή στην άλλη.

Χρειάζεται γνώση, υπομονή και επαναλαμβανόμενο testing για να βρείτε αυτό που πραγματικά ικανοποιεί το κοινό σας.

Κι αν θέλετε λίγη παραπάνω έμπνευση, δεν έχετε παρά να ρίξετε μια ματιά στο Portfolio μας.

Συμπληρώστε τα στοιχεία σας για να επικοινωνήσουμε μαζί σας