Τι είναι το UX/UI και γιατί μετράει
Τα δύο γράμματα γράφονται μαζί και εννοούνται σαν ένα. Στην πράξη περιγράφουν διαφορετικές δουλειές: η μία αποφασίζει πώς λειτουργεί, η άλλη πώς φαίνεται.
Παρακάτω θα δείτε τι σημαίνει το καθένα, πού ακριβώς διαφέρουν, με ποιον μηχανισμό ο σχεδιασμός επηρεάζει τις μετατροπές μιας ιστοσελίδας, τι χαρακτηρίζει μια καλή εμπειρία χρήστη και ποια λάθη κοστίζουν περισσότερο.
UX είναι ο σχεδιασμός της εμπειρίας: τι πρέπει να καταφέρει ο επισκέπτης, με ποια σειρά, με πόσα βήματα και με τι πληροφορία σε κάθε σημείο. UI είναι ο σχεδιασμός της διεπαφής: χρώματα, τυπογραφία, κουμπιά, εικονίδια, αποστάσεις, δηλαδή αυτό που βλέπει και αγγίζει. Το UX αποφασίζεται πριν από το UI και είναι εκείνο που καθορίζει αν κάποιος θα ολοκληρώσει την ενέργεια. Ένα όμορφο site με κακή ροή χάνει πελάτες, ενώ ένα απλό site με καθαρή ροή τους κρατά.
Τι είναι το UX
User Experience είναι το σύνολο της εμπειρίας κάποιου που χρησιμοποιεί το site ή την εφαρμογή σας. Δεν αφορά την αισθητική, αφορά τη διαδρομή: από τη στιγμή που φτάνει μέχρι τη στιγμή που πετυχαίνει αυτό που ήθελε ή τα παρατάει.
Η δουλειά ξεκινά πριν σχεδιαστεί οτιδήποτε. Ποιος είναι ο επισκέπτης, τι ήρθε να κάνει, τι χρειάζεται να ξέρει για να αποφασίσει, ποια εμπόδια θα συναντήσει. Οι απαντήσεις γίνονται δομή σελίδων, ιεραρχία πληροφορίας και ροές, και αποτυπώνονται σε wireframes: ασπρόμαυρα σχέδια χωρίς χρώματα, ώστε να κρίνεται η λογική και όχι η εικόνα.
Τι είναι το UI
User Interface είναι το ορατό στρώμα: τυπογραφία, χρώματα, κουμπιά, φόρμες, εικονίδια, αποστάσεις, κινήσεις. Ό,τι βλέπει και πατάει ο χρήστης.
Καλό UI δεν σημαίνει εντυπωσιακό. Σημαίνει κατανοητό. Ένα κουμπί πρέπει να μοιάζει με κουμπί, το κείμενο να διαβάζεται χωρίς προσπάθεια, το σημαντικό να ξεχωρίζει από το δευτερεύον, και η ίδια ενέργεια να δείχνει ίδια σε όλες τις σελίδες. Η συνέπεια είναι το πιο υποτιμημένο χαρακτηριστικό: μειώνει το φορτίο σκέψης, γιατί ο χρήστης μαθαίνει μία φορά και μετά αναγνωρίζει.
Η διαφορά UX και UI
| Κριτήριο | UX | UI |
|---|---|---|
| Ερώτημα | Πώς λειτουργεί; | Πώς φαίνεται; |
| Παραδοτέα | Δομή, ροές, wireframes | Χρώματα, τυπογραφία, στοιχεία διεπαφής |
| Πότε γίνεται | Πρώτο | Μετά τη δομή |
| Τι διορθώνει | Σύγχυση και εγκατάλειψη | Δυσαναγνωσία και ασάφεια |
| Πώς μετριέται | Ολοκληρώσεις, βήματα, εγκαταλείψεις | Αναγνωσιμότητα, συνέπεια, προσβασιμότητα |
Η σχέση τους είναι ιεραρχική. Το UI δεν σώζει κακό UX: αν η διαδρομή είναι λάθος, το ωραιότερο κουμπί απλώς οδηγεί πιο κομψά σε αδιέξοδο. Το αντίστροφο επίσης ισχύει: σωστή δομή με δυσανάγνωστη παρουσίαση κουράζει και χάνει.
Πώς επηρεάζει τις μετατροπές
Ο μηχανισμός είναι απλός. Κάθε επιπλέον βήμα, κάθε ασάφεια και κάθε αμφιβολία λειτουργούν ως τριβή, και ένα μέρος των επισκεπτών φεύγει σε κάθε τέτοιο σημείο.
- Καθυστέρηση. Ο χρόνος φόρτωσης είναι το πρώτο κομμάτι της εμπειρίας, πριν φανεί οτιδήποτε άλλο.
- Ασαφές μήνυμα. Αν δεν γίνεται κατανοητό αμέσως τι κάνετε και για ποιον, ο επισκέπτης δεν προχωρά.
- Κρυμμένη επόμενη κίνηση. Όταν δεν φαίνεται τι πρέπει να πατήσει, το ψάχνει, και σε κινητό το ψάχνει λίγο.
- Πληροφορία που λείπει. Τιμή, χρόνος παράδοσης, διαθεσιμότητα, κόστος. Όσα δεν απαντώνται γίνονται λόγος εγκατάλειψης.
- Φόρμες που κουράζουν. Κάθε περιττό υποχρεωτικό πεδίο κοστίζει έναν αριθμό αιτημάτων.
Το πλεονέκτημα αυτών των διορθώσεων είναι ότι αφορούν όλους όσους έρχονται ήδη, από κάθε κανάλι. Βελτιώνουν ταυτόχρονα την απόδοση του SEO, της διαφήμισης και των social, χωρίς να αυξηθεί ούτε ένα ευρώ σε προϋπολογισμό προβολής.
Στοιχεία καλού UX
- Ταχύτητα. Η γρήγορη σελίδα είναι προϋπόθεση, όχι βελτίωση.
- Σαφής ιεραρχία. Ένα βασικό μήνυμα ανά οθόνη και μία κύρια ενέργεια, ορατή χωρίς αναζήτηση.
- Πλοήγηση που εξηγείται μόνη της. Ονόματα μενού με λέξεις που χρησιμοποιεί ο πελάτης, όχι εσωτερική ορολογία.
- Σχεδιασμός με πρώτο το κινητό. Η πλειοψηφία των επισκέψεων γίνεται εκεί, άρα εκεί κρίνεται και η δομή.
- Ανατροφοδότηση. Ο χρήστης πρέπει να καταλαβαίνει ότι κάτι έγινε: επιβεβαίωση, ένδειξη φόρτωσης, σαφές μήνυμα σφάλματος.
- Προσβασιμότητα. Επαρκής αντίθεση, μέγεθος κειμένου που διαβάζεται, πλοήγηση με πληκτρολόγιο, εναλλακτικό κείμενο σε εικόνες.
Στην πράξη, η βάση όλων αυτών σε ένα σύγχρονο site είναι η σωστή προσαρμογή σε κάθε οθόνη. Το θέμα αναλύεται στο responsive design: γιατί είναι απαραίτητο.
Συχνά λάθη
ΤΙ ΔΟΥΛΕΥΕΙ
- Δομή που αποφασίζεται πριν από τα χρώματα.
- Μία κύρια ενέργεια ανά σελίδα.
- Κείμενο σε γλώσσα πελάτη, όχι εταιρική ορολογία.
- Έλεγχος σε πραγματική συσκευή, με δεδομένα κινητής.
- Απαντήσεις στις ερωτήσεις που ήδη δέχεστε στο τηλέφωνο.
ΤΙ ΚΟΣΤΙΖΕΙ
- Αρχική σελίδα που εντυπωσιάζει χωρίς να εξηγεί.
- Κινήσεις και εφέ που καθυστερούν την ανάγνωση.
- Κείμενο πάνω σε φωτογραφία, χωρίς αντίθεση.
- Μενού με δέκα επιλογές ίδιας βαρύτητας.
- Σχεδιασμός εγκεκριμένος μόνο σε μεγάλη οθόνη.
Συμβουλή: δώστε το site σας σε τρεις ανθρώπους που δεν το ξέρουν και ζητήστε τους να κάνουν μια συγκεκριμένη ενέργεια, για παράδειγμα να βρουν την τιμή μιας υπηρεσίας και να στείλουν αίτημα. Μη βοηθήσετε, μόνο παρακολουθήστε πού κοντοστέκονται. Είναι ο φθηνότερος έλεγχος UX και σχεδόν πάντα ο πιο αποκαλυπτικός.
Αν ετοιμάζετε νέο site, το άρθρο τι χρειάζεται για την κατασκευή ιστοσελίδας δείχνει πού μπαίνει ο σχεδιασμός εμπειρίας μέσα στη συνολική διαδικασία.
Θέλετε site που δεν απλώς εντυπωσιάζει, αλλά μετατρέπει;
Ελέγχουμε τη διαδρομή του επισκέπτη, εντοπίζουμε πού χάνεται και σχεδιάζουμε τις σελίδες με στόχο την ενέργεια που σας ενδιαφέρει.
Συχνές ερωτήσεις
Ποια είναι η διαφορά UX και UI σε μία πρόταση;
Το UX αποφασίζει πώς λειτουργεί κάτι και με ποια σειρά, το UI πώς φαίνεται και πώς αναγνωρίζεται. Το πρώτο σχεδιάζει τη διαδρομή, το δεύτερο την επιφάνεια πάνω στην οποία περπατά ο χρήστης.
Χρειάζεται UX και σε μικρό εταιρικό site;
Ναι, και μάλιστα με μικρότερο κόστος. Σε πέντε σελίδες η δουλειά είναι να αποφασιστεί τι μπαίνει σε κάθε μία, με ποια σειρά και ποια είναι η κύρια ενέργεια. Χωρίς αυτό, οι σελίδες γεμίζουν με ό,τι υπάρχει διαθέσιμο αντί για ό,τι χρειάζεται ο επισκέπτης.
Μπορεί ένα ωραίο design να έχει κακό UX;
Πολύ συχνά. Κείμενο με χαμηλή αντίθεση, εφέ που καθυστερούν, κρυμμένη πλοήγηση και μεγάλες εικόνες χωρίς πληροφορία είναι τυπικά παραδείγματα εντυπωσιακού σχεδιασμού που δυσκολεύει τον χρήστη.
Πώς καταλαβαίνω ότι το site μου έχει πρόβλημα UX;
Από τα σημάδια: επισκέπτες που φεύγουν χωρίς ενέργεια, φόρμες που ξεκινούν και δεν ολοκληρώνονται, ίδιες ερωτήσεις που φτάνουν στο τηλέφωνο επειδή η απάντηση δεν βρίσκεται στη σελίδα, και σαφώς χειρότερα νούμερα στο κινητό από ό,τι στον υπολογιστή.
Το UX είναι ξεχωριστή υπηρεσία ή μέρος της κατασκευής;
Σε μια σωστή κατασκευή είναι μέρος της, όχι πρόσθετο. Ξεχωριστό έργο γίνεται συνήθως όταν υπάρχει ήδη site και το ζητούμενο είναι να βελτιωθούν οι μετατροπές χωρίς πλήρη ανακατασκευή.
Πόσο επηρεάζει το UX το SEO;
Έμμεσα αλλά ουσιαστικά. Ταχύτητα, σταθερότητα κατά τη φόρτωση, καλή εμπειρία σε κινητό και περιεχόμενο που απαντά πραγματικά στην αναζήτηση είναι σήματα που μετρούν, και ταυτόχρονα κρατούν τον χρήστη στη σελίδα αντί να τον στέλνουν πίσω στα αποτελέσματα.
Πείτε μας τι θέλετε να πετυχαίνει το site σας
Συμπληρώστε τη φόρμα και η ομάδα της Aboutnet θα επικοινωνήσει μαζί σας για να δούμε πού χάνεται σήμερα ο επισκέπτης και τι αλλάζει αυτό.
& Γονατά Στυλιανού 2,
Περιστέρι 121 33
Ζητήστε προσφορά
Διαβάστε επίσης: responsive design: γιατί είναι απαραίτητο και τι χρειάζεται για την κατασκευή ιστοσελίδας.
