Μπορεί μια ιστοσελίδα να είναι εντυπωσιακή και ταυτόχρονα δύσχρηστη; Φυσικά.
Μπορεί να έχει εξαιρετικά animations, ιδιαίτερη τυπογραφία, premium φωτογραφίες και ένα design που κερδίζει την προσοχή από το πρώτο δευτερόλεπτο. Και παρ’ όλα αυτά ο επισκέπτης να μην μπορεί να καταλάβει τι προσφέρει η εταιρεία ή πώς πρέπει να επικοινωνήσει.
Εδώ βρίσκεται η ουσιαστική διαφορά ανάμεσα στο «φαίνεται ωραίο» και στο «λειτουργεί σωστά». Και εκεί ακριβώς συναντώνται το UI και το UX.
1. Τι είναι UI και τι UX;
Οι δύο όροι χρησιμοποιούνται συχνά μαζί, αλλά δεν σημαίνουν ακριβώς το ίδιο πράγμα.
UI — User Interface είναι η οπτική πλευρά της διεπαφής: χρώματα, typography, buttons, cards, icons, εικόνες, spacing, forms και γενικότερα ο τρόπος με τον οποίο παρουσιάζεται το ψηφιακό περιβάλλον.
UX — User Experience είναι η εμπειρία που έχει ο άνθρωπος όταν χρησιμοποιεί αυτό το περιβάλλον. Μπορεί να καταλάβει εύκολα πού βρίσκεται; Βρίσκει αυτό που ψάχνει; Καταλαβαίνει τι πρέπει να κάνει στη συνέχεια; Νιώθει σιγουριά όταν συμπληρώνει μια φόρμα ή πραγματοποιεί μια αγορά;
Το UI είναι αυτό που βλέπει. Το UX είναι αυτό που βιώνει.
2. Το design ξεκινά από τον χρήστη, όχι από τον designer
Ένα συχνό λάθος είναι να σχεδιάζουμε με βάση αυτό που αρέσει σε εμάς. Όμως ο designer δεν είναι απαραίτητα ο τελικός χρήστης.
Ένα website για ένα δικηγορικό γραφείο έχει διαφορετικό κοινό από ένα fashion eShop. Μια B2B πλατφόρμα έχει διαφορετικές ανάγκες από ένα website ξενοδοχείου. Μια εφαρμογή που χρησιμοποιείται καθημερινά από εργαζομένους έχει διαφορετικές απαιτήσεις από μια landing page διαφημιστικής καμπάνιας.
Πριν από το design χρειάζεται να γνωρίζουμε ποιος θα χρησιμοποιήσει το προϊόν, γιατί θα το χρησιμοποιήσει, τι θέλει να πετύχει, ποιες πληροφορίες χρειάζεται και ποια εμπόδια μπορεί να συναντήσει.
3. Τα πρώτα δευτερόλεπτα έχουν σημασία
Όταν κάποιος ανοίξει μια ιστοσελίδα, δεν πρέπει να χρειάζεται να λύσει γρίφο. Πρέπει σχετικά γρήγορα να μπορεί να καταλάβει: Ποια εταιρεία είναι αυτή; Τι προσφέρει; Γιατί με αφορά; Ποιο είναι το επόμενο βήμα;
Αν το hero section είναι εντυπωσιακό αλλά δεν απαντά σε καμία από αυτές τις ερωτήσεις, τότε έχουμε θυσιάσει τη σαφήνεια για την αισθητική.
4. Visual hierarchy: δεν έχουν όλα την ίδια σημασία
Αν όλα είναι μεγάλα, τίποτα δεν είναι μεγάλο. Αν όλα έχουν έντονο χρώμα, τίποτα δεν ξεχωρίζει.
Η οπτική ιεραρχία βοηθά τον χρήστη να καταλάβει ποια πληροφορία πρέπει να δει πρώτη, ποια δεύτερη και ποια τρίτη. Χρησιμοποιούμε μέγεθος, βάρος γραμματοσειράς, χρώμα, contrast, whitespace, positioning και grouping ώστε να κατευθύνουμε φυσικά την προσοχή.
5. Το whitespace δεν είναι χαμένος χώρος
Υπάρχει συχνά η τάση να γεμίζουμε κάθε διαθέσιμο σημείο μιας σελίδας. Όμως ο κενός χώρος αποτελεί μέρος του design. Δίνει «ανάσα» στο περιεχόμενο, δημιουργεί ομάδες πληροφοριών, ενισχύει την ιεραρχία και κάνει την εμπειρία πιο ξεκούραστη.
Το ζητούμενο δεν είναι να χρησιμοποιήσουμε κάθε pixel. Είναι να χρησιμοποιήσουμε σωστά την προσοχή του χρήστη.
6. Navigation: ο χρήστης δεν πρέπει να σκέφτεται πού βρίσκεται κάτι
Ένα δημιουργικό menu μπορεί να φαίνεται εντυπωσιακό. Αν όμως ο χρήστης δεν καταλαβαίνει πώς λειτουργεί, έχουμε δημιουργήσει πρόβλημα.
Οι χρήστες έχουν ήδη μάθει συγκεκριμένα patterns από χιλιάδες websites και applications. Δεν χρειάζεται να επανεφεύρουμε κάθε interaction. Η καινοτομία έχει αξία όταν βελτιώνει την εμπειρία, όχι όταν αναγκάζει τον χρήστη να μάθει από την αρχή πώς λειτουργεί ένα website.
7. Τα Call-to-Action πρέπει να έχουν σκοπό
«Μάθε περισσότερα», «Πατήστε εδώ», «Δείτε περισσότερα». Τα βλέπουμε παντού.
Ένα CTA πρέπει να εξηγεί όσο γίνεται τι πρόκειται να συμβεί: Ζήτησε προσφορά. Κλείσε ραντεβού. Δες τα διαθέσιμα πακέτα. Πρόσθεσε στο καλάθι. Ξεκίνα την αξιολόγηση.
Όσο πιο ξεκάθαρη είναι η ενέργεια, τόσο μικρότερη αβεβαιότητα δημιουργούμε στον χρήστη.
8. Mobile UX: δεν κάνουμε απλώς shrink το desktop
Το mobile design απαιτεί διαφορετικές αποφάσεις. Υπάρχει λιγότερος χώρος, η αλληλεπίδραση γίνεται με το δάχτυλο και ο χρήστης μπορεί να βρίσκεται εν κινήσει.
Πρέπει να εξετάσουμε touch targets, μήκος περιεχομένου, sticky actions, menu structure, φόρμες, modals, typography και ταχύτητα. Responsive design δεν σημαίνει απλώς ότι «δεν χαλάει στο κινητό». Σημαίνει ότι λειτουργεί σωστά στο κινητό.
9. Οι φόρμες είναι UX
Μια φόρμα επικοινωνίας μπορεί να φαίνεται ασήμαντο κομμάτι ενός website, μέχρι να ζητά 15 πληροφορίες από κάποιον που απλώς θέλει να κάνει μια ερώτηση.
Κάθε επιπλέον πεδίο πρέπει να έχει λόγο ύπαρξης. Τα labels πρέπει να είναι ξεκάθαρα, τα errors να εξηγούν τι πήγε λάθος και ο χρήστης να γνωρίζει ότι η υποβολή ολοκληρώθηκε. Το ίδιο ισχύει για registration, checkout, booking και οποιαδήποτε διαδικασία απαιτεί δεδομένα.
10. Microinteractions: οι μικρές λεπτομέρειες που κάνουν το interface να «μιλά»
Πάτησες το κουμπί; Αποθηκεύτηκε; Φορτώνει; Έγινε η πληρωμή; Υπήρξε error;
Οι microinteractions δίνουν feedback. Μπορεί να είναι μια μικρή αλλαγή στο button, ένα loading state, ένα confirmation message ή μια διακριτική κίνηση. Δεν υπάρχουν μόνο για να κάνουν το interface πιο όμορφο. Υπάρχουν για να εξηγούν στον χρήστη τι συμβαίνει.
11. Accessibility: καλό design για περισσότερους ανθρώπους
Η προσβασιμότητα δεν πρέπει να αντιμετωπίζεται ως κάτι που αφορά μόνο μια πολύ μικρή ομάδα χρηστών. Contrast, σωστά μεγέθη κειμένου, keyboard navigation, labels, alt text και λογική δομή περιεχομένου μπορούν να κάνουν ένα ψηφιακό προϊόν ευκολότερο στη χρήση για πολύ περισσότερους ανθρώπους.
Το accessibility πρέπει να εξετάζεται από τον σχεδιασμό και την ανάπτυξη και όχι μόνο ως μεταγενέστερη διόρθωση.
12. Design system: συνέπεια αντί για χάος
Ένα button δεν πρέπει να έχει διαφορετικό style σε κάθε σελίδα, ούτε κάθε developer να αποφασίζει κάθε φορά πόσο spacing θα χρησιμοποιήσει.
Ένα design system μπορεί να καθορίζει typography, χρώματα, buttons, form elements, cards, spacing, icons, components και states. Αυτό δημιουργεί συνέπεια για τον χρήστη και κάνει την ανάπτυξη και τη μελλοντική εξέλιξη του προϊόντος πιο οργανωμένη.
13. UI/UX και conversion δεν είναι αντίπαλοι
Όταν ο χρήστης καταλαβαίνει το προϊόν, εμπιστεύεται το interface και μπορεί εύκολα να ολοκληρώσει την ενέργεια που θέλει, αφαιρούμε εμπόδια από τη διαδικασία.
Αυτό μπορεί να σημαίνει περισσότερες φόρμες ενδιαφέροντος, περισσότερες κρατήσεις, περισσότερες αγορές, λιγότερα abandoned carts ή απλώς λιγότερη σύγχυση.
Δεν σχεδιάζουμε για να «αναγκάσουμε» τον χρήστη να κάνει conversion. Σχεδιάζουμε για να μην τον εμποδίζουμε όταν έχει ήδη αποφασίσει ότι θέλει.
14. Τα δεδομένα μπορούν να αλλάξουν το design
Ο σχεδιασμός πριν από το launch βασίζεται σε έρευνα, εμπειρία και υποθέσεις. Μετά το launch έχουμε κάτι ακόμη πιο σημαντικό: πραγματικούς χρήστες.
Analytics, heatmaps, funnels, feedback και usability observations μπορούν να δείξουν σημεία που δεν λειτουργούν όπως περιμέναμε. Το design δεν πρέπει να θεωρείται τελειωμένο επειδή δημοσιεύτηκε. Μπορεί να εξελίσσεται με βάση δεδομένα.
15. Γιατί το «μου αρέσει» δεν είναι αρκετό
Το design έχει αναπόφευκτα και υποκειμενική πλευρά. Αλλά ένα επαγγελματικό UI/UX project δεν μπορεί να αξιολογείται μόνο με βάση το προσωπικό γούστο.
Πρέπει να ρωτάμε: Εξυπηρετεί το brand; Ταιριάζει στο κοινό; Είναι κατανοητό; Είναι εύχρηστο; Οδηγεί σωστά στις σημαντικές ενέργειες; Λειτουργεί σε διαφορετικές συσκευές; Μπορεί να εξελιχθεί;
Το «μου αρέσει» έχει αξία. Αλλά το «λειτουργεί» έχει μεγαλύτερη.
Τελικά, τι σημαίνει καλό UI/UX;
Δεν σημαίνει να αφαιρέσουμε τη δημιουργικότητα, ούτε να κάνουμε όλα τα websites ίδια. Σημαίνει να χρησιμοποιήσουμε τη δημιουργικότητα με σκοπό.
Να σχεδιάσουμε ένα περιβάλλον που εκφράζει το brand, δημιουργεί συναίσθημα και ταυτόχρονα βοηθά τον άνθρωπο να πετύχει αυτό για το οποίο ήρθε.
Το καλύτερο interface δεν είναι αυτό που κάνει τον χρήστη να αναρωτιέται πόσο δύσκολο ήταν να σχεδιαστεί. Είναι αυτό που κάνει αυτό που θέλει να πετύχει να φαίνεται εύκολο.
Συχνές ερωτήσεις
Ποια είναι η διαφορά μεταξύ UI και UX Design;
Το UI αφορά κυρίως την οπτική και διαδραστική διεπαφή ενός ψηφιακού προϊόντος, ενώ το UX αφορά τη συνολική εμπειρία του χρήστη κατά την αλληλεπίδρασή του με αυτό. Οι δύο περιοχές είναι διαφορετικές αλλά λειτουργούν καλύτερα όταν σχεδιάζονται μαζί.
Χρειάζεται UI/UX Design πριν από το development;
Σε projects όπου απαιτείται custom σχεδιασμός, είναι ιδιαίτερα χρήσιμο να έχουν λυθεί βασικές αποφάσεις για δομή, user flows και interface πριν ξεκινήσει η πλήρης ανάπτυξη. Αυτό μπορεί να μειώσει αλλαγές και ασάφειες κατά το development.
Τι είναι wireframe;
Είναι μια απλοποιημένη αναπαράσταση μιας οθόνης ή σελίδας που χρησιμοποιείται για να οργανωθούν η δομή, οι πληροφορίες και οι βασικές ενέργειες πριν δοθεί έμφαση στο τελικό visual design.
Μπορεί να βελτιωθεί το UX ενός υπάρχοντος website;
Ναι. Μέσα από αξιολόγηση της υπάρχουσας εμπειρίας, δεδομένα χρήσης και εντοπισμό σημείων τριβής μπορούν να σχεδιαστούν στοχευμένες αλλαγές χωρίς να σημαίνει απαραίτητα ότι πρέπει να ξανακατασκευαστεί ολόκληρο το website.
Η προσέγγιση της DynaWasp
Στη DynaWasp αντιμετωπίζουμε το UI/UX ως τη σύνδεση ανάμεσα στο design, την τεχνολογία και τον επιχειρηματικό στόχο.
Δεν ξεκινάμε από το ερώτημα «Τι μπορούμε να βάλουμε στην οθόνη;». Ξεκινάμε από: «Τι πρέπει να μπορεί να κάνει εύκολα ο άνθρωπος που βρίσκεται μπροστά της;»
Μελετάμε τη δομή, τα user flows, το περιεχόμενο, το brand και τις τεχνικές απαιτήσεις πριν αυτά μετατραπούν σε ένα ολοκληρωμένο interface. Γιατί ένα καλό design πρέπει να είναι όμορφο. Αλλά πρέπει πρώτα να λειτουργεί.
Σχεδιάζεις ένα νέο website, eShop ή web application ή θεωρείς ότι το υπάρχον interface δυσκολεύει τους χρήστες σου; Μίλησε με την ομάδα της DynaWasp για να εξετάσουμε πώς μπορεί η εμπειρία να γίνει πιο ξεκάθαρη, πιο λειτουργική και πιο αποτελεσματική.