Μπορεί το design ενός website να έχει να κάνει με χρώματα και αισθητική, αλλά έχει μεγάλη σημασία να σκεφτείτε και το User Experience (UX) κατά τον ανασχεδιασμό ή την κατασκευή ιστοσελίδων.
Ας ξεχωρίσουμε το UI από το UX.
UI σημαίνει User Interface, ενώ UX σημαίνει User Experience.
Τι είναι User Experience;
Με τον όρο User Experience (UX) εννοούμε την εμπειρία που αποκομίζουν οι επισκέπτες κατά την πλοήγησή τους στο website μας. Ιστοσελίδες που έχουν κατασκευαστεί με βάση το καλό User Experience, επιτρέπουν την εύκολη πλοήγηση, τη γρήγορη εύρεση του περιεχομένου και έχουν responsive συμπεριφορά για τις διάφορες συσκευές.
Σε έναν ψηφιακό κόσμο με περισσότερα από 1 δις διαφορετικά websites, χρειάζεται να διασφαλίσουμε ότι σίγουρα το δικό μας website προσφέρει μια ευχάριστη εμπειρία στους επισκέπτες. Μόνο έτσι θα έχουμε καλές πιθανότητες να δούμε αυτούς τους επισκέπτες να επιστρέφουν ξανά σε μας και να χτίσουμε μια συνεχόμενη ψηφιακή σχέση μαζί τους.
10 χαρακτηριστικά ενός user friendly website
- Απλοτητα
- Οπτική ιεραρχία
- Ευκολία πλοήγησης
- Συνέπεια – Συνοχή
- Responsive design
- Προσβασιμότητα
- Παραδοχές εθιμοτυπικού design
- Αξιοπιστία
- Έμφαση στον επισκέπτη
- Testing
Απλότητα
Όταν κάποιος επισκέπτεται το website μας, δεν το κάνει για να θαυμάσει το καλλιτεχνικό design που επιλέξαμε ή για να μας επαινέσει για την αισθητική μας. Έρχεται γιατί ψάχνει κάποια πληροφορία, κάποιο προϊόν ή τα στοιχεία επικοινωνίας μας.
Επομένως, χρειάζεται να του δώσουμε την ευκαιρία να βρει εύκολα όσα ψάχνει, χωρίς πολλά γραφιστικά και περιεχόμενο, που αποσπά την προσοχή και παρακωλύει την έρευνα που κάνει ο επισκέπτης.
Φυσικά, μπορούμε να χρησιμοποιούμε χρώματα, εικόνες, βίντεο και εικονίδια. Αυτό, όμως, δε σημαίνει ότι η ιστοσελίδα μας πρέπει να φαίνεται ασφυκτικά γεμάτη από υλικό.
Οι συγγραφείς του βιβλίου Handbook of Human-Computer Interaction προτείνουν να χρησιμοποιούνται μέχρι 5 χρώματα για το design μιας ιστοσελίδας. Έτσι, διασφαλίζεται ότι δε θα προκύψει στο τέλος ένα χρωματικά υπερφορτωμένο website.
Οπτική ιεραρχία
Όταν κάνουμε UX βελτιστοποίηση, είναι χρήσιμο να σκεφτούμε τι θέλουμε να δει ο επισκέπτης μας πρώτα. Τίτλοι, εικόνες ή γραφήματα, ανάλογα με την περίπτωση, τοποθετούνται σε σημεία που το μάτι του επισκέπτη θα πέσει αβίαστα.
Επομένως, αν θέλουμε να ολοκληρώσει ο χρήστης μια ενέργεια, όπως είναι για παράδειγμα η προσθήκη προϊόντων στο καλάθι, θα πρέπει να βάλουμε αυτό το κουμπί σε μια θέση, ώστε η διαδικασία να μοιάζει απόλυτα φυσική.
Ευκολία Πλοήγησης
Σε μια ιδανική εμπειρία πλοήγησης, κάποιος που επισκέπτεται την ιστοσελίδα μας θα πρέπει να μπορεί να βρει εύκολα αυτό που ψάχνει. Παρακάτω ακολουθεί μια λίστα πρακτικών συμβουλών, που μπορεί να εφαρμοστεί για τη βελτίωση της εμπειρίας πλοήγησης για ιστοσελίδες:
- Διατηρείστε τη βασική πλοήγηση κοντά στην κορυφή της σελίδας
- Βελτιστοποιήστε την εμπειρία πλοήγησης και στο footer των σελίδων
- Προσθέστε σε κάθε σελίδα (εκτός από την αρχική σας σελίδα), την πορεία με το ίχνος πλοήγησης (Breadcrumbs)
- Συμπεριλάβετε μια μπάρα αναζήτησης στην κορυφή του ιστοτόπου σας, ώστε οι επισκέπτες να μπορούν να αναζητούν λέξεις-κλειδιά
- Χρησιμοποιήστε συνδέσμους στα κείμενα των σελίδων σας με σαφή τον προορισμό των συνδέσμων αυτών
- Δημιουργήστε ένα ξεκάθαρο sitemap. Η αρχική σας σελίδα θα πρέπει να βρίσκεται στην κορυφή και οι υπόλοιπες σελίδες να στοιχίζονται από κάτω σε μορφή διαγράμματος, που μοιάζει με ανάστροφο δέντρο. Δείτε για παράδειγμα το site map της digital challenge_:
Συνέπεια – Συνοχή
Η συνέπεια και η συνοχή έχει θετικό αποτέλεσμα για την εμπειρία των χρηστών, αλλά και για την εταιρική σας ταυτότητα.
Η συνολική εμφάνιση και αίσθηση του ιστότοπού σας πρέπει να ακολουθεί την ίδια αισθητική σε όλες τις σελίδες. Το φόντο, οι χρωματικοί συνδυασμοί, οι γραμματοσειρές, ακόμη και ο τόνος της γραφής σας πρέπει να έχουν απόλυτη συνοχή.
Αυτό δε σημαίνει ότι κάθε σελίδα πρέπει να ακολουθεί την ίδια διάταξη. Μπορείτε να δημιουργήστε διαφορετική μορφή για συγκεκριμένες σελίδες, που έχουν τον ίδιο σκοπό. Για παράδειγμα μπορείτε να έχετε το ίδιο design σε όλες τις σελίδες προϊόντων του e-shop σας, αλλά η σελίδα επικοινωνίας να είναι λίγο διαφορετική.
Χρησιμοποιώντας λίγο διαφορετικές εκδοχές του ίδιου design, θα διευκολύνετε τους επισκέπτες να κατανοήσουν τι είδους πληροφορίες είναι πιθανό να βρουν σε μια δεδομένη σελίδα.
Responsive design
Σύμφωνα με την έρευνα της Statista, 48% των προβολών διαδικτυακών σελίδων γίνεται πια από mobile συσκευές. Συνεπώς, είναι πολύ σημαντικό, ειδικά για το User Experience, οι ιστοσελίδες να μπορούν να προσαρμόζονται και να προβάλλονται σωστά σε όλες τις πιθανές συσκευές, τις οποίες μπορεί να χρησιμοποιούν οι επισκέπτες.
Αν σκεφτεί κανείς ότι το 93% των χρηστών έχει εγκαταλείψει ιστοσελίδες που δεν προβλήθηκαν σωστά στη συσκευή τους, η ανάγκη για responsive design είναι επιτακτική.
Το responsive design σημαίνει ότι ουσιαστικά κατασκευάζουμε ένα ευέλικτο website. Σε έναν ιστότοπο που ανταποκρίνεται σε προσαρμογή, το μέγεθος του περιεχομένου αλλάζει και αναδιαμορφώνεται αυτόματα, ώστε να ταιριάζει στις διαστάσεις της συσκευής που χρησιμοποιεί ο επισκέπτης.
Αυτό μπορεί να επιτευχθεί με διάφορα πρότυπα HTML, φιλικά προς κινητά ή με τη δημιουργία ενός ιστοτόπου για κινητά. Στην digital challenge_ δίνουμε μεγάλη βαρύτητα στο responsive design. Μια από τις λύσεις που προτείνουμε συχνά, είναι η κατασκευή e-shop με WordPress, ώστε αυτό να προσαρμόζεται άρτια και στις mobile συσκευές.
Προσβασιμότητα
Ο στόχος της προσβασιμότητας είναι να δημιουργήσει έναν ιστότοπο που μπορεί να χρησιμοποιήσει ο καθένας, συμπεριλαμβανομένων ατόμων με αναπηρίες ή περιορισμούς, που επηρεάζουν την εμπειρία της περιήγησής τους.
Οι οδηγίες για τη δημιουργία ενός website με γενικευμένη πρόσβαση (WCAG) είναι:
- Ο επισκέπτης θα πρέπει να μπορεί να αντιληφθεί το περιεχόμενο που βρίσκεται στην ιστοσελίδα
- Η λειτουργικότητα του ιστοτόπου θα πρέπει να είναι δυνατή με διαφορετικούς τρόπους
- Όλο το περιεχόμενο και οι ειδοποιήσεις που εμφανίζονται στη σελίδα, θα πρέπει να είναι εύκολα κατανοητές
- Ο ιστότοπος θα πρέπει να μπορεί να χρησιμοποιηθεί με χρήση διάφορων υποστηρικτικών τεχνολογιών, συσκευών και προγραμμάτων περιήγησης
Μπορείτε να μάθετε περισσότερα για τις ιστοσελίδες με το πρότυπο WCAG και να δείτε παραδείγματα ιστοσελίδων που υλοποιήθηκαν με τους αντίστοιχους κανόνες.
Παραδοχές εθιμοτυπικού design
Μια μεγάλη πρόκληση στο σχεδιασμό ιστοσελίδων είναι η εξισορρόπηση της πρωτοτυπίας με τις καθιερωμένες πρακτικές. Υπάρχουν συγκεκριμένες συνήθειες διαδικτυακής περιήγησης που οι χρήστες έχουν υιοθετήσει, και δε χρειάζεται να τις αλλάξετε.
Τέτοιες συνήθειες μπορεί να είναι για παράδειγμα το εικονίδιο καλαθιού για ηλεκτρονικές αγορές, που συνήθως εμφανίζεται πάνω και δεξιά σε ένα e-shop. Μια άλλη παραδοχή είναι επίσης η αλλαγή χρώματος ενός κουμπιού, όταν ο χρήστης περνά το ποντίκι του από πάνω (mouse hover).
Μπορείτε να επιστρατεύσετε τη δημιουργικότητά σας για μια αξέχαστη εμπειρία επισκεπτών, ενώ ταυτόχρονα ικανοποιείτε τις ψηφιακές τους συνήθειες. Εάν παραμελήσετε αυτό που περιμένουν οι χρήστες να δουν στο σημείο που το συνήθισαν, μπορεί να αισθάνονται άβολα ή ακόμη και να απογοητεύονται από τον ιστότοπό σας.
Αξιοπιστία
Αν υποθέσουμε ότι δε θα μπαίνατε ποτέ σε ένα όμορφο κτήριο, το οποίο όμως δείχνει ότι δεν είναι πολύ ασφαλές, αντίστοιχα και οι χρήστες του διαδικτύου δεν θα παραμείνουν σε μια σελίδα, όσο όμορφη και αν είναι, σε περίπτωση που δεν πληροί κριτήρια διαδικτυακής ασφάλειας.
Μία από τις καλύτερες μεθόδους για τη βελτίωση της αξιοπιστίας, είναι να είστε ξεκάθαροι και ειλικρινείς σχετικά με το προϊόν ή την υπηρεσία που πουλάτε. Μην κάνετε τους επισκέπτες να σκάψουν δεκάδες σελίδες για να βρουν τι ακριβώς κάνετε.
Επίσης, αν έχετε μια φυσική διεύθυνση είναι καλό να το αναφέρετε, ώστε να αισθάνονται οι χρήστες ότι μπορούν να σας βρουν στην έδρα σας.
Ακόμη, αν πουλάτε αγαθά ή υπηρεσίες, είναι καλό να αναφέρετε τις τιμές σας. Αντί να αναγκάζετε τους ανθρώπους να επικοινωνήσουν μαζί σας για να μάθουν περισσότερα σχετικά με τις τιμές, καταγράψτε τες με σαφήνεια στον ιστότοπό σας. Αυτό κάνει την επιχείρησή σας πολύ πιο αξιόπιστη.
Έμφαση στον επισκέπτη
Σε κάθε περίπτωση, να θυμάστε ότι κάνετε ανασχεδιασμό ιστοσελίδων για να διευκολύνετε τους χρήστες. Αυτό σημαίνει να σχεδιάζεται με βάση το καλό UX. Προσπαθήστε να πάρετε feedback από το κοινό σας σχετικά με την πλοήγηση στο website σας.
Ακόμη κι αν δεν καταφέρετε να μάθετε κάτι απευθείας από τους επισκέπτες σας, υπάρχουν τα analytics. Παρατηρώντας πώς συμπεριφέρονται οι χρήστες κατά την επίσκεψή τους στις ιστοσελίδες σας, μπορείτε να βγάλετε κάποια συμπεράσματα σχετικά με το usability.
Αν δείτε για παράδειγμα ένα υψηλό bounce rate σε μια συγκεκριμένη σελίδα, είναι πολύ πιθανό η σελίδα αυτή να έχει μια σχεδιαστική αστοχία, να είναι κάποια περιγραφή δυσανάγνωστη ή κάποια φωτογραφία να είναι λανθασμένα τοποθετημένη εκεί.
Testing
Τέλος, μην παραμελείτε το testing, όταν σκέφτεστε το UX. Πολλές φορές είναι αδύνατο να γνωρίζουμε αν κάτι είναι πετυχημένο ή όχι. Μπορούμε πάντα να δοκιμάσουμε μια ιδέα, να δούμε πώς ανταποκρίνονται οι επισκέπτες και αν αυτό που υλοποιήσαμε τους βοήθησε να βρουν όσα έψαχναν.
Η καλή χρηστικότητα δεν επιτυγχάνεται εν μία νυκτί. Απαιτεί έρευνα και συνεχόμενες δοκιμές για να φτάσουμε στην τελειοποίηση.
Η εμπειρία πλοήγησης εξαρτάται από το αν ο ιστότοπός σας είναι αξιόπιστος, λειτουργικός και εύχρηστος για τα άτομα που τον χρησιμοποιούν πραγματικά. Αν έχετε ερωτήσεις σχετικά με το UX και την εφαρμογή των οδηγιών που αναλύσαμε, αφήστε το σχόλιό σας ή διαφορετικά επικοινωνήστε μαζί μας.
Η ομάδα της digital challenge_ προτείνει τον ανασχεδιασμό ιστοσελίδας για αύξηση των πωλήσεων και αναλαμβάνει την κατασκευή ιστοσελίδων εξ ολοκλήρου, πάντα υπό το πρίσμα μιας εύκολης πλοήγησης για τους επισκέπτες σας.
