Μια ιστοσελίδα μπορεί να είναι όμορφη και να μη φέρνει κανέναν πελάτη. Το UX UI design διορθώνει αυτό το κενό με έρευνα και όχι με εικασίες. UX (user experience) είναι η εμπειρία του επισκέπτη, δηλαδή πόσο εύκολα βρίσκει ό,τι ζητά. UI (user interface) είναι η διεπαφή, δηλαδή τα κουμπιά, οι φόρμες και τα μενού. Ως SEO agency Greece από τον Φεβρουάριο του 2007, η alphatek σχεδιάζει με στόχο την αναζήτηση και την πώληση μαζί.
Η alphatek ιδρύθηκε από ανθρώπους της πληροφορικής και του μάρκετινγκ και συνεργάζεται με επιχειρήσεις στην Ελλάδα και στο εξωτερικό. Γι’ αυτό κάθε έργο UX UI design ξεκινά από δεδομένα και πραγματικούς χρήστες, όχι από το γούστο κάποιου. Εδώ εστιάζουμε στο κομμάτι που συνήθως παραλείπεται: την έρευνα πριν από το σχέδιο. Θα δείτε τι κερδίζει η επιχείρησή σας από το UX UI design, από πού συλλέγουμε στοιχεία και πώς τα μετατρέπουμε σε personas και διαδρομές.
Τι σημαίνει UX UI design για μια επιχειρηματική ιστοσελίδα;
Για μια επιχείρηση, το UX UI design σημαίνει λιγότερους επισκέπτες που φεύγουν στη μέση, περισσότερα αιτήματα επικοινωνίας και λιγότερες επαναλαμβανόμενες ερωτήσεις στην υποστήριξη. Η σελίδα απαντά στις απορίες του πελάτη πριν τις διατυπώσει. Ο επισκέπτης φτάνει στη φόρμα χωρίς να κολλήσει.
Κάθε ιστοσελίδα έχει σημεία όπου οι επισκέπτες τα παρατούν. Τα λέμε σημεία διαρροής (drop-off points). Μπορεί να είναι μια φόρμα με δώδεκα πεδία, ένα κουμπί που κρύβεται στο κινητό ή μια σελίδα υπηρεσίας χωρίς επόμενο βήμα. Ο ιδιοκτήτης σπάνια τα βλέπει, γιατί ξέρει ήδη πού να πατήσει. Το UX UI design εντοπίζει αυτά τα σημεία και τα διορθώνει ξεκινώντας από όσα χάνουν τους περισσότερους πελάτες. Έτσι η ίδια επισκεψιμότητα φέρνει περισσότερα αποτελέσματα, χωρίς επιπλέον διαφήμιση.
Το δεύτερο κέρδος είναι περισσότερα αιτήματα επικοινωνίας. Όταν ο πελάτης καταλαβαίνει γρήγορα τι προσφέρετε, σε ποιον και πώς ξεκινά η συνεργασία, γράφει πιο εύκολα. Τα αιτήματα έρχονται και πιο ώριμα, γιατί έχει ήδη διαβάσει τα βασικά. Το τρίτο κέρδος φαίνεται στην υποστήριξη. Αν οι ίδιες ερωτήσεις έρχονται κάθε μέρα με email, η απάντηση λείπει από τη σελίδα. Ένα σωστό UX UI design βάζει αυτή την απάντηση εκεί που κοιτά ο χρήστης και ελευθερώνει χρόνο για το προσωπικό σας.
Τις βασικές αρχές σχεδιασμού, όπως την τυπογραφία και τα χρώματα, τις εξηγούμε στη σελίδα για τον σχεδιασμό ιστοσελίδων. Στην αναζήτηση, η Google ευρετηριάζει πρώτα την έκδοση για κινητά (mobile-first indexing). Εξετάζει επίσης τα Core Web Vitals, δηλαδή τη φόρτωση (LCP), την απόκριση στα κλικ (INP) και τη σταθερότητα της διάταξης (CLS). Ένα UX UI design φτιαγμένο πρώτα για το κινητό εξυπηρετεί μαζί τους χρήστες και την κατάταξη. Τα παρακάτω σημάδια δείχνουν ότι η σελίδα σας το χρειάζεται.
- Πολλοί επισκέπτες ανοίγουν τη φόρμα επικοινωνίας, αλλά λίγοι πατούν τελικά την αποστολή.
- Οι πελάτες ρωτούν στο τηλέφωνο πράγματα που η σελίδα ήδη γράφει κάπου χαμηλά.
- Στο κινητό το κουμπί κλήσης ή το μενού υπηρεσιών χάνεται κάτω από άλλα στοιχεία.
- Οι σελίδες υπηρεσιών παίρνουν επισκέψεις από τη Google, αλλά σχεδόν κανένα αίτημα.
- Ο σχεδιασμός άλλαξε πολλές φορές με βάση απόψεις, χωρίς στοιχεία από πραγματικούς χρήστες.
- Η τελευταία ανανέωση έγινε χωρίς UX UI design, μόνο με νέα γραφικά και χρώματα.
Πώς ξεκινά η έρευνα χρηστών;
Σε κάθε έργο UX UI design, η έρευνα χρηστών ξεκινά από όσα ήδη έχει η επιχείρηση: δεδομένα του Google Analytics 4, ερωτήσεις πελατών και email υποστήριξης. Μετά προσθέτουμε συνεντεύξεις, ερωτηματολόγια, χάρτες θερμότητας, καταγραφές συνεδριών και ανταγωνιστές. Όλα γίνονται πριν από το πρώτο σχέδιο.
Οι συνεντεύξεις είναι σύντομες κουβέντες ένας προς έναν με πραγματικούς πελάτες. Μιλάμε και με όσους δεν αγόρασαν, γιατί αυτοί ξέρουν τι έλειπε. Κρατάμε τις λέξεις του πελάτη αυτούσιες, γιατί μπαίνουν μετά στα κείμενα. Τα ερωτηματολόγια (surveys) φτάνουν σε περισσότερους ανθρώπους με λίγες, απλές ερωτήσεις. Οι συνεντεύξεις φανερώνουν το «γιατί» και τα ερωτηματολόγια το «πόσο συχνά». Το UX UI design χρειάζεται και τα δύο, για να μη στηρίζεται μια απόφαση σε μία φωνή. Στις συνεντεύξεις ρωτάμε τα εξής.
- Τι ψάχνατε όταν βρήκατε την ιστοσελίδα μας για πρώτη φορά;
- Ποιες λέξεις γράψατε στη Google ή ρωτήσατε σε κάποιο εργαλείο AI;
- Τι σας έκανε να διστάσετε πριν στείλετε μήνυμα ή τηλεφωνήσετε;
- Ποια πληροφορία ψάξατε στη σελίδα και τελικά δεν τη βρήκατε;
- Ποιον άλλο εξετάσατε και τι σας άρεσε στη δική του ιστοσελίδα;
- Από ποια συσκευή μπήκατε, από κινητό ή από υπολογιστή, και γιατί;
- Τι θα σας έκανε να αποφασίσετε πιο γρήγορα και με περισσότερη σιγουριά;
Για το UX UI design, τα δεδομένα δείχνουν τι κάνουν οι χρήστες στην πράξη. Στο Google Analytics 4 βλέπουμε από ποιες σελίδες φεύγουν και ποιο βήμα της φόρμας δεν ολοκληρώνουν. Στο Google Search Console βλέπουμε με ποιες αναζητήσεις φτάνουν, άρα τι περιμένουν να βρουν. Οι χάρτες θερμότητας (heatmaps) χρωματίζουν τα σημεία με τα περισσότερα κλικ. Οι καταγραφές συνεδριών (session recordings) δείχνουν ανώνυμα πώς κινείται και πού σταματά κάθε επισκέπτης. Τις ενεργοποιούμε μόνο με τη συγκατάθεσή του.
Τα αιτήματα υποστήριξης είναι μια πηγή που συχνά μένει αναξιοποίητη. Κάθε email που ρωτά «πού βρίσκω…» ή «πώς κάνω…» δείχνει ένα κενό στη σελίδα. Τα ομαδοποιούμε ανά θέμα και τα βάζουμε σε σειρά συχνότητας. Μετά εξετάζουμε τους ανταγωνιστές που εμφανίζονται στις ίδιες αναζητήσεις και στις περιλήψεις AI Overviews της Google. Δεν αντιγράφουμε το σχέδιό τους. Σημειώνουμε τι εξηγούν καλύτερα και πού αφήνουν τον χρήστη χωρίς απάντηση. Εκεί κερδίζει έδαφος το δικό σας UX UI design.
Τι είναι οι personas και τα user journeys;
Οι personas είναι σύντομα προφίλ που περιγράφουν τους βασικούς τύπους πελατών σας, με βάση την έρευνα. Τα user journeys είναι οι διαδρομές τους, από την πρώτη αναζήτηση μέχρι την πρώτη επικοινωνία μαζί σας. Μαζί δείχνουν στο UX UI design πού χρειάζεται βοήθεια ο χρήστης.
Ας πάρουμε ένα μικρό λογιστικό γραφείο. Η πρώτη persona είναι η Μαρία, ιδιοκτήτρια καφέ, που ψάχνει λογιστή από το κινητό αργά το βράδυ. Θέλει να μάθει αν το γραφείο αναλαμβάνει εστίαση και πόσο γρήγορα απαντά. Η δεύτερη persona είναι ο Νίκος, νέος ελεύθερος επαγγελματίας, που φοβάται τη γραφειοκρατία και θέλει απλά λόγια. Τα χαρακτηριστικά τους δεν τα επινοούμε. Προέρχονται από τις συνεντεύξεις και τα δεδομένα. Κάθε απόφαση στο UX UI design ελέγχεται απέναντι σε αυτά τα δύο πρόσωπα.
Το user journey, δηλαδή η διαδρομή του χρήστη, χωρίζει την απόφαση σε στάδια. Η Μαρία ψάχνει στη Google, ανοίγει δύο ή τρεις ιστοσελίδες, συγκρίνει και στέλνει μήνυμα. Σε κάθε στάδιο σημειώνουμε τι κάνει, τι σκέφτεται και τι τη δυσκολεύει. Αυτά τα εμπόδια λέγονται pain points, δηλαδή σημεία τριβής. Για τη Μαρία, είναι μια σελίδα χωρίς παραδείγματα από την εστίαση. Για τον Νίκο, είναι οι τεχνικοί όροι χωρίς εξήγηση. Το UX UI design τα λύνει ένα προς ένα.
Οι πιο κρίσιμες στιγμές της διαδρομής είναι οι στιγμές αμφιβολίας, όταν ο χρήστης σκέφτεται «μήπως να ρωτήσω αλλού;». Συνήθως εμφανίζονται λίγο πριν από τη φόρμα ή το κουμπί κλήσης. Εκεί το UX UI design βάζει την απάντηση που λείπει: τι γίνεται μετά την αποστολή, σε πόσο χρόνο απαντάτε, κριτικές από το Google Business Profile. Αυτά τα στοιχεία εμπιστοσύνης στηρίζουν και το E-E-A-T της Google, δηλαδή εμπειρία, εξειδίκευση, κύρος και αξιοπιστία. Ο χάρτης της διαδρομής φτιάχνεται βήμα βήμα.
- Διαλέγουμε μία persona και έναν σκοπό, για παράδειγμα «κλείνω ραντεβού με λογιστή».
- Γράφουμε τα στάδια από την πρώτη αναζήτηση μέχρι την πρώτη επικοινωνία.
- Σημειώνουμε σε κάθε στάδιο τι κάνει, τι σκέφτεται και τι νιώθει ο χρήστης.
- Μαρκάρουμε τα pain points με βάση τις συνεντεύξεις και όχι με βάση υποθέσεις.
- Εντοπίζουμε τις στιγμές αμφιβολίας και γράφουμε δίπλα την απάντηση που λείπει.
- Ελέγχουμε τον χάρτη με τα δεδομένα του Google Analytics 4 για κάθε στάδιο.
- Κρατάμε τον χάρτη ως βάση για κάθε επόμενη απόφαση στο UX UI design.
Πώς οργανώνετε το μενού και τις σελίδες;
Οργανώνουμε το μενού με βάση τον τρόπο που σκέφτεται ο πραγματικός επισκέπτης, όχι με το οργανόγραμμα της εταιρείας. Στο UX UI design αυτό λέγεται αρχιτεκτονική πληροφορίας. Είναι ο χάρτης που ορίζει ποιες σελίδες υπάρχουν, πώς μπαίνουν σε ομάδες και με ποιο όνομα εμφανίζεται η καθεμία.
Το πρώτο εργαλείο είναι το card sorting, δηλαδή ταξινόμηση με κάρτες. Γράφουμε κάθε θέμα του site σε μια κάρτα. Πραγματικοί χρήστες χωρίζουν τις κάρτες σε ομάδες και δίνουν όνομα σε κάθε ομάδα. Στο ανοιχτό card sorting φτιάχνουν δικές τους κατηγορίες. Στο κλειστό βάζουν τις κάρτες σε κατηγορίες που ορίσαμε εμείς. Οι ομάδες που επαναλαμβάνονται από χρήστη σε χρήστη γίνονται τα κλαδιά του μενού. Έτσι το UX UI design πατά σε δεδομένα από τους ίδιους τους πελάτες και όχι σε εικασίες.
Στο UX UI design τα ονόματα του μενού είναι λέξεις που χρησιμοποιεί ο πελάτης. Μια ετικέτα όπως «Λύσεις» δεν λέει τίποτα συγκεκριμένο. Μια ετικέτα όπως «Κατασκευή eshop» λέει ακριβώς τι θα βρει κάποιος. Τη δομή την ελέγχουμε με tree testing, δηλαδή δοκιμή μόνο στο δέντρο του μενού, χωρίς γραφικά. Ο χρήστης παίρνει μια αποστολή, π.χ. «βρες την πολιτική επιστροφών». Εμείς βλέπουμε σε ποιο κλαδί ψάχνει πρώτα και πόσες φορές γυρίζει πίσω. Αν χάνεται, αλλάζουμε το όνομα ή τη θέση.
Τα breadcrumbs είναι η γραμμή που δείχνει πού βρίσκεστε μέσα στο site, π.χ. Αρχική, Υπηρεσίες, SEO. Με ένα κλικ ο επισκέπτης ανεβαίνει ένα επίπεδο πιο πάνω. Με δομημένα δεδομένα BreadcrumbList, δηλαδή ετικέτες κώδικα από το schema.org, η Google καταλαβαίνει τη θέση κάθε σελίδας στη δομή. Σε site με πολλές σελίδες ή προϊόντα χρειάζεται και γρήγορη εσωτερική αναζήτηση. Ένα καλό UX UI design δείχνει προτάσεις ήδη από τα πρώτα γράμματα που πληκτρολογείτε. Δέχεται επίσης ορθογραφικά λάθη, συνώνυμα και λέξεις χωρίς τόνους.
- Κάθε σημαντική σελίδα υπηρεσίας ή προϊόντος απέχει το πολύ τρία κλικ από την αρχική σελίδα.
- Το κύριο μενού στο UX UI design έχει λίγες, καθαρές επιλογές, όχι δεκαπέντε στριμωγμένους συνδέσμους.
- Κάθε ετικέτα έχει μία έως τρεις λέξεις και δεν μοιάζει με άλλη ετικέτα του μενού.
- Τα breadcrumbs εμφανίζονται σε κάθε εσωτερική σελίδα και στο κινητό, πάνω από τον κεντρικό τίτλο.
- Το μενού κινητού περιέχει όλες τις βασικές σελίδες, αφού η Google ευρετηριάζει πρώτα την έκδοση κινητού.
- Οι διευθύνσεις URL ακολουθούν την ίδια ιεραρχία με το μενού και τα breadcrumbs του site.
- Σε eshop η αναζήτηση φαίνεται αμέσως στην κεφαλίδα και δεν κρύβεται πίσω από δεύτερο κλικ.
Τι είναι τα wireframes και τα prototypes στο UX UI design;
Τα wireframes είναι απλά σχέδια της σελίδας με γκρι κουτιά, χωρίς χρώματα και φωτογραφίες. Τα prototypes είναι μοντέλα που πατάτε σαν να ήταν πραγματικό site. Στο UX UI design τα χρησιμοποιούμε για να δοκιμάσουμε νέες ιδέες και διαδρομές πριν γραφτεί έστω και μία γραμμή κώδικα.
Ξεκινάμε με wireframes χαμηλής πιστότητας (low fidelity), δηλαδή με ελάχιστη λεπτομέρεια. Είναι πρόχειρα σκίτσα σε χαρτί ή σε εργαλείο όπως το Figma. Δείχνουν μόνο τη θέση των στοιχείων: τίτλο, κουμπί, φόρμα, εικόνα. Συχνά φτιάχνουμε δύο εκδοχές της ίδιας σελίδας. Η απουσία χρωμάτων είναι σκόπιμη. Έτσι η συζήτηση μένει στη δομή και όχι στο αν αρέσει το μπλε. Στο UX UI design μια αλλαγή σε αυτό το στάδιο θέλει λίγα λεπτά. Η ίδια αλλαγή μετά τον προγραμματισμό θέλει μέρες δουλειάς.
Όταν η δομή κλειδώσει, περνάμε σε υψηλή πιστότητα (high fidelity). Εδώ μπαίνουν τα πραγματικά κείμενα, οι εικόνες και τα χρώματα της μάρκας. Συνδέουμε τις οθόνες μεταξύ τους και φτιάχνουμε ένα clickable prototype, δηλαδή ένα μοντέλο που αντιδρά στα κλικ. Ο πελάτης ανοίγει έναν σύνδεσμο στο κινητό του και περνά όλη τη διαδρομή: αρχική, προϊόν, καλάθι, ολοκλήρωση παραγγελίας. Βλέπει το UX UI design να λειτουργεί πριν υπάρξει το site. Δείχνουμε τις μικρές κινήσεις, όπως το άνοιγμα του μενού και του καλαθιού.
Η μεγάλη αξία του prototype είναι το έγκαιρο feedback, δηλαδή σχόλια πριν ξεκινήσει ο προγραμματισμός. Ο πελάτης και η ομάδα του αφήνουν σημειώσεις πάνω στην ίδια την οθόνη, στο σημείο που τους αφορά. Οι πωλητές βλέπουν αν η φόρμα ζητά όσα χρειάζονται για μια προσφορά. Η υποστήριξη βλέπει αν το site απαντά στις συχνές ερωτήσεις των πελατών. Μαζεύουμε όλα τα σχόλια, τα βάζουμε σε σειρά προτεραιότητας και βγάζουμε νέα έκδοση. Κάθε κύκλος κάνει το UX UI design πιο καθαρό.
- Αρχικά σκίτσα σε χαρτί για τις βασικές οθόνες: αρχική, κατηγορία, προϊόν, καλάθι και σελίδα επικοινωνίας.
- Wireframe χαμηλής πιστότητας με γκρι κουτιά, πραγματικούς τίτλους και τη σειρά των ενοτήτων κάθε σελίδας.
- Έλεγχος κάθε διαδρομής του UX UI design πρώτα στην οθόνη του κινητού και μετά στον υπολογιστή.
- Prototype υψηλής πιστότητας με τελικά κείμενα, πραγματικές εικόνες και έτοιμα στοιχεία από το design system.
- Σύνδεση των οθονών, ώστε κάθε κουμπί και σύνδεσμος να ανοίγουν τη σωστή επόμενη οθόνη του prototype.
- Συλλογή σχολίων από πελάτη και ομάδα πάνω στο prototype και νέα έκδοση με τις αλλαγές.
- Τελική έγκριση του UX UI design, με γραπτές σημειώσεις για κάθε κίνηση, κατάσταση και μήνυμα σφάλματος.
Πώς χτίζεται ένα σύστημα UI που μένει συνεπές;
Ένα σύστημα UI χτίζεται από μικρά κομμάτια που επαναλαμβάνονται: κουμπιά, πεδία φόρμας, κάρτες, μηνύματα, μενού. Κάθε κομμάτι σχεδιάζεται μία φορά, με όλες τις καταστάσεις του, και μπαίνει παντού. Έτσι το UX UI design μένει ίδιο σε κάθε σελίδα, ακόμη και μετά από χρόνια αλλαγών.
Τα κομμάτια αυτά λέγονται components. Όλα μαζί, με κανόνες χρήσης, φτιάχνουν ένα design system, δηλαδή μια κοινή βιβλιοθήκη για σχεδιαστές και προγραμματιστές. Στη βάση του βρίσκονται τα design tokens: ονομασμένες τιμές για αποστάσεις, μεγέθη, γωνίες και σκιές. Το token «κενό-μεσαίο» ορίζει την απόσταση ανάμεσα στις κάρτες. Αν αλλάξει ένα token, η αλλαγή περνά αυτόματα σε κάθε σημείο που το χρησιμοποιεί. Στο UX UI design αυτό σημαίνει ότι μια νέα σελίδα στήνεται από έτοιμα κομμάτια και όχι από το μηδέν.
Στο UX UI design κάθε component έχει πολλές καταστάσεις (states). Ένα κουμπί έχει κανονική μορφή, hover όταν περνά από πάνω το ποντίκι, focus όταν φτάνετε σε αυτό με το πληκτρολόγιο και disabled όταν δεν είναι διαθέσιμο. Ένα πεδίο φόρμας χρειάζεται και κατάσταση σφάλματος. Μια λίστα χρειάζεται empty state, δηλαδή τι βλέπει ο χρήστης όταν δεν υπάρχει τίποτα ακόμη. Εκεί μετρά το microcopy, τα μικρά κείμενα της οθόνης. Το «Λάθος email» δεν βοηθά. Το «Λείπει το @ από το email» βοηθά.
Η προσβασιμότητα μπαίνει μέσα σε κάθε component από την αρχή. Ακολουθούμε τα WCAG 2.2, τους διεθνείς κανόνες για web χωρίς εμπόδια. Το κανονικό κείμενο έχει αντίθεση τουλάχιστον 4.5:1 με το φόντο. Κάθε κουμπί δουλεύει με πληκτρολόγιο και δείχνει καθαρό focus. Τα σφάλματα δεν δηλώνονται μόνο με κόκκινο χρώμα, αλλά και με κείμενο ή εικονίδιο. Στο τέλος, το UX UI design περνά στην κατασκευή ιστοσελίδων με κάθε component περιγραμμένο στο design system, ώστε ο κώδικας να ταιριάζει με το εγκεκριμένο σχέδιο.
- Κάθε component του UX UI design έχει όνομα, σκοπό και παράδειγμα σωστής και λάθος χρήσης.
- Κάθε πεδίο φόρμας έχει ορατή ετικέτα από πάνω και όχι μόνο ένα γκρι κείμενο που σβήνει.
- Κάθε άδειο καλάθι, λίστα ή αναζήτηση χωρίς αποτέλεσμα προτείνει μια χρήσιμη επόμενη κίνηση στον επισκέπτη.
- Κάθε κουμπί για το δάχτυλο έχει τουλάχιστον 24 επί 24 pixels, όπως ορίζουν τα WCAG 2.2.
- Τα components έχουν ίδια ονόματα στο Figma, στον κώδικα και στα έγγραφα του UX UI design.
- Κάθε αλλαγή στο design system καταγράφεται πάντα με ημερομηνία, αιτία και τις σελίδες που επηρεάζει.
- Οι εικόνες στις κάρτες έχουν δηλωμένο μέγεθος, ώστε η σελίδα να μη μετακινείται όταν φορτώνει (CLS).
Πώς κάνετε usability testing χωρίς μεγάλο κόστος;
Βάζετε πέντε πραγματικούς χρήστες να κάνουν τρεις έως πέντε συγκεκριμένες εργασίες στο site, ενώ λένε δυνατά τι σκέφτονται. Δεν χρειάζεστε εργαστήριο ή ακριβό εξοπλισμό. Καταγράφετε πού κολλάνε. Διορθώνετε πρώτα ό,τι σταματά μια αγορά ή μια επικοινωνία και ξανατεστάρετε.
Το usability testing είναι ένα τεστ ευχρηστίας. Παρακολουθείτε έναν πραγματικό άνθρωπο να χρησιμοποιεί το site σας, χωρίς να τον βοηθάτε. Σύμφωνα με το άρθρο του Nielsen Norman Group για την ευχρηστία, πέντε χρήστες ανά γύρο φτάνουν για τα περισσότερα έργα. Μετά τον πέμπτο βλέπετε κυρίως τα ίδια προβλήματα. Γι’ αυτό στο UX UI design προτιμάμε πολλούς μικρούς γύρους από έναν μεγάλο.
Κάθε εργασία γράφεται σαν πραγματικό σενάριο, όχι σαν εντολή. Αντί για «πατήστε Επικοινωνία», λέτε «θέλετε να μάθετε αν γίνεται παράδοση αύριο». Ο χρήστης μιλά δυνατά όσο κινείται. Αυτή η μέθοδος λέγεται think-aloud, δηλαδή σκέψη φωναχτά. Ακούτε τι περιμένει να βρει και τι τον μπερδεύει. Εσείς δεν απαντάτε σε ερωτήσεις. Σημειώνετε μόνο πού σταμάτησε, τι έψαξε και πού τα παράτησε.
- Γράψτε τρεις έως πέντε εργασίες που αντιστοιχούν σε πραγματικούς στόχους των πελατών σας.
- Βρείτε πέντε χρήστες που μοιάζουν με τους πελάτες σας, όχι συναδέλφους ή φίλους.
- Κάντε το τεστ με βιντεοκλήση και κοινή χρήση οθόνης από το κινητό τους.
- Βαθμολογήστε κάθε πρόβλημα με βάση πόσους χρήστες σταμάτησε και σε ποιο βήμα.
Το remote τεστ, δηλαδή το τεστ από απόσταση, κόβει το κόστος μετακίνησης και χώρου. Ο χρήστης δοκιμάζει το site στη δική του συσκευή, με το δικό του δίκτυο. Δωρεάν εργαλεία όπως το Microsoft Clarity προσθέτουν καταγραφές συνεδριών από πραγματικούς επισκέπτες. Σε ένα έργο UX UI design διορθώνετε πρώτα ό,τι σταμάτησε τους περισσότερους χρήστες σε κρίσιμο βήμα, όπως το καλάθι ή η φόρμα.
Πώς μετράτε την εμπειρία χρήστη;
Μετράτε αν ο χρήστης ολοκληρώνει την εργασία, πόσο χρόνο θέλει, πόσα λάθη κάνει, πόσοι γίνονται πελάτες και πόσο γρήγορα φορτώνει η σελίδα. Ένα σύντομο ερωτηματολόγιο, το SUS, προσθέτει τη γνώμη του χρήστη για το πόσο εύκολο ήταν όλο αυτό.
Από τα τεστ με χρήστες βγαίνουν τρία νούμερα. Το task success είναι το ποσοστό όσων ολοκληρώνουν την εργασία χωρίς βοήθεια. Το time on task είναι ο χρόνος που χρειάστηκαν. Το error rate μετρά πόσες φορές πάτησαν λάθος ή γύρισαν πίσω. Στο τέλος δίνετε το SUS (System Usability Scale): δέκα δηλώσεις με βαθμό από 1 έως 5. Το σκορ πάει από 0 έως 100 και πάνω από 68 είναι καλύτερο από τον μέσο όρο.
Το conversion rate είναι το ποσοστό των επισκεπτών που κάνουν την ενέργεια που θέλετε. Το Google Analytics 4 το μετρά όταν ορίσετε ως key events, δηλαδή βασικά συμβάντα, την αποστολή φόρμας ή την αγορά. Μια σελίδα με πολλές επισκέψεις και λίγες ενέργειες είναι ο πρώτος στόχος για τεστ. Οι σελίδες προσγείωσης για καμπάνιες θέλουν ακόμα πιο στενή παρακολούθηση.
Τα Core Web Vitals φαίνονται στο Google Search Console, με δεδομένα από πραγματικούς χρήστες του Chrome. Το LCP μετρά πότε εμφανίζεται το μεγαλύτερο στοιχείο και θέλει κάτω από 2,5 δευτερόλεπτα. Το INP μετρά πόσο γρήγορα αντιδρά η σελίδα σε ένα πάτημα, με όριο τα 200 χιλιοστά του δευτερολέπτου. Το CLS μετρά πόσο πηδούν τα στοιχεία, με όριο το 0,1. Στο UX UI design αυτά τα όρια μπαίνουν από την αρχή.
Ένα απλό ημερολόγιο μετρήσεων κάνει το UX UI design πρακτικό και όχι θεωρητικό. Κάθε μήνα γράφετε τρία πράγματα: ποια εργασία δυσκόλεψε τους χρήστες στο τελευταίο τεστ, τι αλλάξατε και πώς κινήθηκαν οι μετατροπές μετά την αλλαγή. Μετά από λίγους μήνες βλέπετε καθαρά ποιες βελτιώσεις έφεραν πελάτες και ποιες ήταν απλώς αισθητικές.
Κρατήστε το ημερολόγιο κοινό για όλη την ομάδα, ώστε ο σχεδιαστής, ο προγραμματιστής και ο ιδιοκτήτης της επιχείρησης να αποφασίζουν με τα ίδια στοιχεία.
Ποια λάθη στο UX UI design διώχνουν πελάτες;
Τα λάθη που κοστίζουν περισσότερο στο UX UI design είναι όσα κρύβουν το επόμενο βήμα. Αργή σελίδα, μικρά κουμπιά στο κινητό, μεγάλες φόρμες και pop-up που καλύπτουν το περιεχόμενο. Ο επισκέπτης δεν παραπονιέται. Απλώς φεύγει και πάει στον ανταγωνιστή.
- Κουμπιά και links τόσο μικρά που ο αντίχειρας πατά το διπλανό στοιχείο.
- Φόρμες με πολλά πεδία, όπως ΑΦΜ και διεύθυνση, για ένα απλό ερώτημα.
- Pop-up που καλύπτει όλη την οθόνη του κινητού πριν διαβαστεί οτιδήποτε.
- Μενού με εσωτερικούς όρους της εταιρείας αντί για τις λέξεις του πελάτη.
- Σελίδα που μετακινείται ακριβώς τη στιγμή που ο χρήστης πάει να πατήσει.
- Μηνύματα λάθους που γράφουν «σφάλμα» χωρίς να εξηγούν τι πρέπει να διορθωθεί.
Τα περισσότερα από αυτά τα λάθη φαίνονται μόνο σε κινητό. Η Google χρησιμοποιεί mobile-first indexing, δηλαδή διαβάζει και αξιολογεί πρώτα την έκδοση του site για κινητά. Ο σχεδιασμός όμως συχνά εγκρίνεται σε μεγάλη οθόνη υπολογιστή. Στο κινητό, το ίδιο κουμπί μικραίνει και το pop-up κρύβει τα πάντα. Γι’ αυτό κάθε απόφαση στο UX UI design ελέγχεται πρώτα σε πραγματικό τηλέφωνο.
Κάθε πεδίο σε μια φόρμα είναι ένα ακόμα εμπόδιο. Ζητήστε μόνο ό,τι χρειάζεστε για την πρώτη απάντηση. Τα υπόλοιπα ζητούνται αργότερα, όταν ο πελάτης σας έχει εμπιστευτεί. Στα μηνύματα λάθους, γράψτε δίπλα στο πεδίο τι λείπει και κρατήστε όσα έχει ήδη συμπληρώσει ο χρήστης. Μια φόρμα που σβήνει τα πάντα μετά από ένα λάθος χάνει τον πελάτη.
Τα μενού με εσωτερική ορολογία είναι λάθος της έρευνας. Ο πελάτης ψάχνει «επισκευή», ενώ η εταιρεία γράφει «τεχνική υποστήριξη». Τα ασυνεπή κουμπιά είναι λάθος του συστήματος. Όταν κάθε σελίδα έχει άλλο στυλ κουμπιού, ο χρήστης δεν ξέρει τι πατιέται. Η λύση είναι ένα design system, δηλαδή μια βιβλιοθήκη έτοιμων στοιχείων με σταθερούς κανόνες. Έτσι το UX UI design μένει συνεπές όσο μεγαλώνει το site.
Συχνές ερωτήσεις για το UX UI design
Εδώ απαντάμε στις ερωτήσεις που ακούμε πιο συχνά από επιχειρήσεις πριν ξεκινήσουν. Αφορούν τον χρόνο, το μέγεθος του site, τις αλλαγές σε υπάρχον site, τη σχέση με τη Google και τα πρώτα βήματα μιας συνεργασίας.
Πόσο χρόνο θέλει ένα έργο UX UI design;
Εξαρτάται από τον αριθμό των σελίδων και των ροών, δηλαδή των διαδρομών που κάνει ο χρήστης για να ολοκληρώσει κάτι. Ένα site παρουσίασης με μία φόρμα έχει λίγες ροές. Ένα eshop έχει αναζήτηση, φίλτρα, καλάθι και ταμείο. Στο UX UI design η έρευνα και τα τεστ προηγούνται του σχεδιασμού. Το χρονοδιάγραμμα συμφωνείται γραπτά πριν ξεκινήσει η δουλειά.
Χρειάζεται UX UI design ένα μικρό επαγγελματικό site;
Ναι, γιατί ακόμα και ένα site πέντε σελίδων έχει έναν στόχο: να σας καλέσει ή να σας γράψει ο επισκέπτης. Αν το τηλέφωνο δεν φαίνεται στο κινητό ή η φόρμα δεν στέλνεται, ο στόχος χάνεται. Σε ένα μικρό site το UX UI design προχωρά και πιο γρήγορα. Λίγες σελίδες σημαίνουν λίγες εργασίες για τεστ και γρήγορες διορθώσεις.
Μπορεί το UX UI design να βελτιώσει ένα site χωρίς νέο σχεδιασμό;
Ναι. Πολλές χρήσιμες αλλαγές είναι μικρές και γίνονται σε υπάρχουσες σελίδες. Ξεκινάμε από τα δεδομένα του Google Analytics 4 και τις καταγραφές συνεδριών. Βρίσκουμε τις σελίδες με πολλές επισκέψεις και λίγες ενέργειες. Εκεί κάνουμε τεστ με χρήστες και διορθώνουμε κείμενα κουμπιών, φόρμες και σειρά περιεχομένου. Μετράμε ξανά πριν προχωρήσουμε σε μεγαλύτερες αλλαγές.
Επηρεάζει το UX UI design την κατάταξη στη Google;
Ναι, με δύο τρόπους. Η Google αναφέρει ότι τα Core Web Vitals χρησιμοποιούνται από τα συστήματα κατάταξής της. Επίσης, το helpful content είναι μέρος των βασικών συστημάτων κατάταξης, που ανταμείβουν σελίδες χρήσιμες για ανθρώπους. Ένα καθαρό UX UI design κάνει το περιεχόμενο εύκολο στην ανάγνωση και στη χρήση. Η κατάταξη όμως εξαρτάται και από το περιεχόμενο, τα links και την τεχνική υγεία του site.
Πώς ξεκινά ένα έργο UX UI design με την alphatek;
Η alphatek δουλεύει από τον Φεβρουάριο του 2007 με επιχειρήσεις στην Ελλάδα και στο εξωτερικό. Ξεκινάμε με μια συζήτηση για τους στόχους σας και μια ματιά στα δεδομένα του site. Μετά προτείνουμε τα πρώτα τεστ και τις μετρήσεις. Για να δούμε τι χρειάζεται το δικό σας site, ζητήστε μια πρόταση συνεργασίας και θα λάβετε συγκεκριμένο πλάνο για το UX UI design σας.