17 λάθη σχεδιασμού του UI που αποτυγχάνουν την ιστοσελίδα σας

Καλά σχεδιασμένο περιβάλλον εργασίας χρήστη μπορεί να σημαίνει πολλά για έναν ιστότοπο. Έχοντας όλες τις τελευταίες δυνατότητες και ένα ευχάριστο σχέδιο συμβατό με τα προγράμματα περιήγησης βελτιώνει την κατάταξη της μηχανής αναζήτησης μιας ιστοσελίδας, με αποτέλεσμα την αύξηση του κοινού. Ωστόσο, όταν το έργο είναι τεράστιο, οι προγραμματιστές συχνά αποτυγχάνουν να τηρήσουν τις καλύτερες πρακτικές UI. Με αυτόν τον τρόπο δημιουργείται ένας ιστότοπος όπου δεν λειτουργούν ορισμένες σημαντικές λειτουργίες ή όπου δεν διεξάγονται εξ ολοκλήρου δοκιμές διαδικτυακού προγράμματος περιήγησης. Εδώ, θα συζητήσουμε τους 17 λόγους που οδηγούν στην αποτυχία σχεδιασμού UI για έναν ιστότοπο και ορισμένες συμβουλές σχεδίασης του UI για να αποφευχθούν αυτές οι αποτυχίες.

1. Λεπτές πωλήσεις είναι μια Artform - μια που είναι δύσκολο να κυριαρχήσει

Ο πειστικός σχεδιασμός είναι η τελευταία τάση στον κόσμο του UX, που σπρώχνει τον τελικό χρήστη να σκεφτεί τι είναι το επόμενο και τον αναγκάζει να περιηγηθεί περαιτέρω στον ιστότοπο. Θα σας δώσουμε μια σημαντική συμβουλή σχεδιασμού UI. Ποτέ μην υπερβείτε αυτή τη στρατηγική. Εάν ο τελικός χρήστης ενοχλήσει, δεν θα το σκεφτούν δύο φορές προτού προχωρήσουμε σε διαφορετικό ιστότοπο.

2. Το σχήμα χρωμάτων κάνει όλη τη διαφορά

Κατά το σχεδιασμό του σχεδιασμού του ιστότοπού σας, χρησιμοποιήστε έναν σωστό κωδικό χρώματος για τις γραμματοσειρές, τις επικεφαλίδες καθώς και τα υπόβαθρα. Μελετήστε σωστά τη θεωρία των χρωμάτων για να μάθετε ποιο χρώμα φαίνεται καλό σε ποιο φόντο. Οι συμβουλές σχεδιασμού UI που παρέχονται από ειδικούς δηλώνουν ότι ένας καλά συντονισμένος σχεδιασμός χρωμάτων θα λειτουργήσει καλύτερα στην προσέλκυση ενός πελάτη παρά στη χρήση κινούμενων σχεδίων. Εδώ είναι ένα από τα παραδείγματα μιας εξαιρετικής επιλογής χρωμάτων. Μπορείτε να ανατρέξετε στην πηγή για πιο μοντέρνες παλέτες χρωμάτων ιστού.

3. Τα στοιχεία φλας που αιχμαλωτίζουν τα μάτια

Οι πρόσφατες συμβουλές σχεδίασης του UI δηλώνουν ότι τα απλοποιημένα στοιχεία προσελκύουν περισσότερο έναν χρήστη αντί να χρησιμοποιούν εντυπωσιακά χρώματα και κουμπιά. Ειδικά, η χρήση των στοιχείων flash πρέπει να αποφευχθεί, δεδομένου ότι δεν υποστηρίζονται σε πολλά προγράμματα περιήγησης, με αποτέλεσμα την αποτυχία των δοκιμών μεταξύ των προγραμμάτων περιήγησης.

4. Ανεπιθύμητος σχεδιασμός ιστοσελίδων

Σήμερα, όλες οι οργανώσεις ακολουθούν την κινητή πρώτη προσέγγιση. Είναι ιδανικό ότι πρέπει να σκεφτείτε όσο και τους ανταγωνιστές σας και να αναπτύξετε έναν ιστότοπο ο οποίος ακολουθεί τις καλύτερες πρακτικές του UI που σχετίζονται με τον ανταποκρινόμενο σχεδιασμό, λειτουργεί σωστά σε όλες τις συσκευές χωρίς οριζόντια κύλιση και έχει περάσει όλες τις στρατηγικές δοκιμών cross-browser για κινητά, προγράμματα περιήγησης.

5. Ο ιστότοπος δεν είναι συμβατός με προγράμματα περιήγησης

Σήμερα, με τόσους πολλούς φυλλομετρητές διαθέσιμους στο διαδίκτυο, με το μερίδιο χρήσης τους να διαφέρει σε διαφορετικά δημογραφικά στοιχεία και συσκευές, θα σας δώσουμε μία από τις καλύτερες συμβουλές σχεδίασης UI προτού κυκλοφορήσετε τον ιστότοπό σας. Εκτελέστε τις κατάλληλες δοκιμές μεταξύ των προγραμμάτων περιήγησης και βεβαιωθείτε ότι ο ιστότοπός σας λειτουργεί σωστά σε όλα τα στοχευμένα προγράμματα περιήγησης. Ακολουθεί ένα παράδειγμα ενός div που φαίνεται διαφορετικό σε κάθε πρόγραμμα περιήγησης.

Η παραπάνω εικόνα είναι μια επίδειξη του μοναδικού div στην πλατφόρμα LambdaTest. Μπορείτε να παρατηρήσετε πώς η εμφάνιση διαφέρει από το Google Chrome στο Mozilla Firefox. Το LambdaTest είναι ένα διαγώνιο εργαλείο δοκιμής περιήγησης που σας επιτρέπει να δοκιμάσετε το RWD (Responsive Web Design) του ιστότοπού σας μεταξύ των browsers 2000 + και των διαφόρων εκδόσεών τους που εκτελούνται σε πραγματικά λειτουργικά συστήματα.

6. Ακατάλληλο μέγεθος γραμματοσειράς

Η διατήρηση ενός σταθερού μεγέθους γραμματοσειράς και γραμματοσειράς είναι πολύ σημαντική όταν ακολουθείτε τις καλύτερες πρακτικές UI. Οι τολμηρές και μεγάλες τυπογραφίες γίνονται δεκτές, αλλά είναι ακατάλληλες αν υπάρχει λόγος 4: 1 μεταξύ του μεγέθους μιας γραμματοσειράς μιας κλάσης και μιας παραγράφου.

7. Σχεδιάζοντας ένα περίπλοκο πρωτότυπο

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

8. Γιατί τόσο σταθεροποιημένο προς ξεπερασμένο & συμπλεγμένο σχεδιασμό;

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

9. Το περιεχόμενο είναι ο βασιλιάς, οι διαφημίσεις δεν είναι!

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

10. Η περίπλοκη πλοήγηση συγχέει τον χρήστη

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

11. Έχοντας ένα πλαγιογραφημένο σχέδιο

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

Ακολουθεί ένα άλλο παράδειγμα λογοκλοπής.

12. Ιστοσελίδα που στερείται αντίθεση

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

13. Κακά σχεδιασμένα CTAs

Τα CTA διατηρούν τη δύναμη να δώσουν εντολή σε ένα χρήστη να κάνει μια ενέργεια. Από το χρώμα στη γραμματοσειρά, τα πάντα για αυτά πρέπει να ζητούν από ένα χρήστη να "κάνει κλικ". Τα CTA που είναι πολύ προσεκτικά προσελκύουν ένα χρήστη να απομακρυνθεί, ενώ οι CTA που είναι πολύ απλές, αγνοούνται απλά. Διατηρήστε μια ισορροπία χρώματος, σκιών και ωραίας γραμματοσειράς στα CTA σας για να τα καταστήσετε αξιοπρόσεχτα και να κάνετε κλικ.

14. Κείμενο, Τυπογραφία και Παρουσίαση

Σήμερα, οι περισσότεροι χρήστες του ιστότοπου δεν περνούν εξ ολοκλήρου το περιεχόμενο. Εάν θέλετε να εκφράσετε την ιδέα σας από άποψη περιεχομένου, θα πρέπει να διατηρήσετε μια καλή ισορροπία του περιεχομένου κειμένου μαζί με εικόνες και στοιχεία εμπλουτισμένου μέσου, όπως ήχου ή βίντεο. Το υπερβολικό περιεχόμενο κειμένου θα υποχρεώνει τον χρήστη να τις αγνοήσει και με αυτό τον τρόπο αγνοώντας ορισμένες σημαντικές πληροφορίες που προσπαθείτε να μεταδώσετε.

15. Έχοντας Μεγάλα Στοιχεία Μέσων

Συχνά παρατηρείται ότι η ταχύτητα μιας τοποθεσίας μειώνεται σημαντικά ή δεν λειτουργεί καθόλου όταν η κίνηση αυξάνεται ξαφνικά. Αυτό οφείλεται κυρίως στη χρήση μεγάλων εικόνων ή κινούμενων εικόνων. Μια από τις καλύτερες πρακτικές σχεδιασμού UI είναι να έχετε εικόνες περιορισμένου μεγέθους και σύμφωνα με τις πρόσφατες τάσεις, κλιμακούμενες εικόνες φορέα που καταλαμβάνουν πολύ μικρό μέγεθος και διασφαλίζουν ότι ο ιστότοπός σας λειτουργεί σωστά κάτω από οποιαδήποτε σενάρια.

16. Σχεδιασμός υποχρεωτικών και μακροχρόνιων εντύπων

Τα έντυπα αποτελούν σημαντικό μέρος του ιστοτόπου σας, ειδικά σε ένα που απαιτεί την εγγραφή του χρήστη. Έχοντας μια μακρά φόρμα με πολλά δεδομένα θα περιπλέξει μόνο τον χρήστη και μπορεί να χάσει κάποιες σημαντικές πληροφορίες κατά την πλήρωσή του, ειδικά στο κινητό. Μία από τις καλύτερες πρακτικές σχεδιασμού του UI είναι να κρατήσει μια απλή φόρμα που είναι πιο εύκολο να γεμίσει και έχει όσο το δυνατόν λιγότερες πληροφορίες. Επίσης, σημειώστε ότι δεν έχετε θέσει πάρα πολλά υποχρεωτικά πεδία για έναν χρήστη. Τα πιο υποχρεωτικά πεδία που διατηρείτε, το υψηλότερο ποσοστό εγκατάλειψης που θα συναντήσετε.

17. Δεν έχει καλό αρχιτέκτονα πληροφόρησης

Ακριβώς όπως η ανάπτυξη, ο σχεδιασμός του σχεδιασμού μιας ιστοσελίδας απαιτεί επίσης μια σωστή στρατηγική για την οποία θα χρειαστείτε τη βοήθεια ενός αρχιτέκτονα UX. Θα δώσουμε u μια συμβουλή σχεδιασμού UI. Έχοντας έναν καλό αρχιτέκτονα πληροφόρησης θα σας δώσει μια καλή στρατηγική σχεδιασμού. Εάν δεν διαθέτετε κάποιον ή του οποίου ο τρόπος προσέγγισης στο σχεδιασμό ενός ιστότοπου είναι παρωχημένος, θα οδηγήσει σε μια κακώς σχεδιασμένη τοποθεσία που υποτίθεται ότι αποτυγχάνει όταν πρόκειται για αναθεώρηση από τον χρήστη.

Σχέδιο νοοτροπίας που χρειάζεται να αλλάξει

1. Μη Συμμετοχή του Πελάτη

Επί του παρόντος, υπάρχει ένας λόγος για τον οποίο οι μέθοδοι DevOps και Agile έχουν κερδίσει τόσο μεγάλη δημοτικότητα. Είναι ιδανικό να εμπλέκεται ο πελάτης σε κάθε βήμα, ξεκινώντας από το σχεδιασμό μέχρι την ανάπτυξη, έτσι ώστε να μπορεί να ελέγξει εάν η εφαρμογή αναπτύσσεται ακολουθώντας τις καλύτερες πρακτικές του UI και επίσης εάν ο αρχιτέκτονας του UX μπορεί να παράσχει πρόσθετες συμβουλές σχεδίασης UI, εάν απαιτείται.

2. Δεν κατανοούν την απαίτηση

Οι σχεδιαστές συχνά αρχίζουν να δουλεύουν χωρίς να πληρούν τις προδιαγραφές των απαιτήσεων. Αυτό δεν είναι καθόλου σύμφωνα με τις καλύτερες πρακτικές του UI. Αυτό μπορεί να οδηγήσει σε πλήρη ή μερική αναδιάρθρωση ακόμα και μετά την ανάπτυξη ενός πλήρως λειτουργικού ιστότοπου.

3. Σχεδιασμός Αφού βάζετε τα παπούτσια πελατών σας

Ενώ σχεδιάζετε ή αναπτύσσετε, πρέπει να σκεφτείτε από την οπτική γωνία ενός τελικού χρήστη. Θυμηθείτε ότι σχεδιάζετε μια φανταστική προσωπικότητα. Μπορεί να υπάρχει ένα συγκεκριμένο μοτίβο χρώματος ή κλίσης που προτιμάτε, αλλά δεν είναι απαραίτητο να αρέσει στον τελικό χρήστη το ίδιο. Έρευνα σχετικά με τις τελευταίες τάσεις του UX και ποια είναι η πλειοψηφία των χρηστών πριν από την υλοποίηση του σχεδιασμού.

4. Δεν περιλαμβάνεται η δοκιμή ευχρηστίας

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

5. Δεν συμπεριλαμβάνεται ο έλεγχος προσβασιμότητας

Μια από τις καλύτερες συμβουλές σχεδιασμού UI που θα σας βοηθήσουν στην αύξηση της κατάταξης μηχανών αναζήτησης του ιστότοπού σας είναι να τηρείτε τα πρότυπα W3C για προσβασιμότητα. Το άρθρο 508 του W3C αναφέρει ότι ένας ιστότοπος πρέπει να είναι προσβάσιμος σε όλους, ειδικά σε άτομα με ειδικές ανάγκες. Εάν ο στόχος σας είναι να ακολουθήσετε τις καλύτερες πρακτικές σχεδιασμού του UI, πρέπει να συμπεριλάβετε κατάλληλους ελέγχους προσβασιμότητας.

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

Αρχικά δημοσιεύθηκε στο LambdaTest

Συγγραφέας Arnab Roy Chowdhury

Περαιτέρω ανάγνωση…

Αν σας αρέσει η θέση, παρακαλώ clap και βοηθήστε τους άλλους να το βρουν επίσης.