8 συμβουλές σχεδίασης UI ή πώς να χρησιμοποιήσετε αποτελεσματικά UI; | SpdLoad

Το αποτελεσματικό περιβάλλον εργασίας χρήστη βοηθάει τους χρήστες να αναλαμβάνουν συγκεκριμένες ενέργειες με ευκολία, ικανοποίηση και πλήρη έλεγχο. Γι 'αυτό είναι πολύ σημαντικό να ακολουθήσετε τις καλές συμβουλές σχεδίασης UI. Και καταλαβαίνετε σαφώς τη διαφορά UX vs UI σχεδιασμό.

Εάν ο σχεδιασμός UI είναι επιτυχής, γίνεται αόρατος για τον χρήστη. Γίνεται τόσο έμπειρος στην πρόβλεψη της δράσης που θα ακολουθήσει ένας χρήστης.

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

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

8 βασικά καλές συμβουλές σχεδιασμού UI

Για έναν αρχάριο σχεδιαστή και πολλούς χρήστες, το UI είναι απλά το "βλέμμα" ενός ιστότοπου. Στην πραγματικότητα, είναι πολύ περισσότερο.

Αποτελείται από έννοιες από οπτικό σχεδιασμό, διαδραστικό σχεδιασμό και αρχιτεκτονική πληροφοριών.

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

Αλλά τι κάνει τη διαφορά μεταξύ αποτελεσματικού και άχρηστου UI σε σχεδιασμό MVP;

Ας εξετάσουμε 8 συμβουλές.

Ξεκινήστε με την έρευνα χρήστη UX

Στο σχεδιασμό διεπαφής χρήστη, όλα ξεκινούν από το χρήστη.

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

Όσο περισσότερο γνωρίζετε τους χρήστες σας, τόσο περισσότερο μπορείτε να προβλέψετε τις ανάγκες τους και να τους φροντίσετε αποτελεσματικά.

Η έρευνα των χρηστών σας δίνει τη δυνατότητα να γνωρίζετε πώς, πότε, πού και γιατί θα χρησιμοποιήσουν το προϊόν σας για να λύσουν τον πόνο.

Ρυθμίστε τις προσδοκίες σχεδιασμού του UI

Η συνέπεια και η εξοικείωση είναι μια σημαντική έννοια του σχεδιασμού του UI.

Οι χρήστες έχουν συνηθίσει να έχουν πρόσβαση και να αλληλεπιδρούν με τους ιστοτόπους με κάποιο τρόπο.

Εάν ο σχεδιασμός περιβάλλοντος χρήστη ενός ιστότοπου είναι διαφορετικός από αυτόν που χρησιμοποιείται ή αναμένεται, μπορεί να υπάρχει κίνδυνος.

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

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

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

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

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

Ομοίως, επιτρέψτε στους χρήστες να γνωρίζουν πότε πρόκειται να αναλάβουν οποιαδήποτε ενέργεια που δεν μπορεί να ανακληθεί. Για παράδειγμα, διαγράψτε ένα μήνυμα ηλεκτρονικού ταχυδρομείου, μια σελίδα ή έναν ιστότοπο. Ρωτήστε τους αν είναι σίγουροι.

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

Εξασφαλίστε ταχεία απόκριση UI

Ο σχεδιασμός UI είναι ένα σημείο αλληλεπίδρασης και επικοινωνίας με τους χρήστες σας.

Όταν κάνω κλικ σε ένα σύνδεσμο, περιμένω να ανοίξει. Όταν πατήσω ένα κουμπί, περιμένω να αλλάξει τα χρώματα.

Μια διαδικασία παράδοσης και λήψης και δράσης και απόκρισης κυριαρχεί στο σχεδιασμό του UI.

Καθώς οι χρήστες συνδέονται με τον ιστότοπό σας, βεβαιωθείτε ότι ο ιστότοπος είναι γρήγορος και προωθημένος με τις απαντήσεις του. Η κύλιση είναι ομαλή και δροσερή, επισημαίνονται θετικές ενέργειες και όλοι οι σύνδεσμοι είναι clickable - σε λιγότερο από 3 δευτερόλεπτα κορυφές.

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

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

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

Τοποθέτηση στοιχείου και μέγεθος

Ο σχεδιασμός του UI αφορά όλα τα κλικ, βρύσες και κύλινδροι.

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

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

Ίδια με τις λίστες του κύριου μενού. Τοποθετήστε τα υψηλότερα στην ιεραρχία από τα πρόσθετα μενού όπως οι κατηγορίες.

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

Κάντε το σχέδιο απλό

Σε όλα τα έργα στα οποία εργάστηκα, βρήκα αυτή τη συμβουλή να είναι πάντα επιτυχημένη. Δεν υπάρχει τίποτα που ένα απλό σχέδιο UI δεν θα διορθώσει ή θα βελτιώσει.

Με ένα απλό σχεδιασμό, οι γνωσιακές διαδικασίες των χρηστών δεν κατακλύζονται.

Θεωρούν ότι είναι εύκολο να παίρνουν αποφάσεις, να εκτελούν τα καθήκοντά τους αποτελεσματικά και να μην είναι περιττά τα περιττά στοιχεία.

Ένας αρχάριος σχεδιαστής μπορεί να δημιουργήσει διεπαφές χρήστη που ήταν υψηλά στο σχεδιασμό, μια οπτική galore-αλλά λειτουργικότητα-σοφός, υπήρχαν πολλά θέματα.

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

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

Έτσι, καθώς αρχίζετε να εργάζεστε με τον επόμενο σχεδιασμό UI, πηγαίνετε για μια απλή διεπαφή.

Προσπαθήστε να δημιουργήσετε ένα σχέδιο που διευκολύνει τη λειτουργία. Επιτρέψτε στους χρήστες να κάνουν check-out ως επισκέπτες κατά την αγορά στο διαδίκτυο.

Αντί να κρύβετε το μενού, το κάνετε πιο εξορθολογισμένο.

Για να καταστήσετε πιο ευπρόσιτες τις κατηγορίες ιστολογίου, αντί να τις γεμίζετε σε όλη τη σελίδα, δοκιμάστε να χρησιμοποιήσετε ένα πλέγμα για να δώσετε στη δομή μια δομή.

Με αυτά τα απλά τσιμπήματα (που απαιτούν πολλή σκέψη και μια χούφτα στιγμές του Eureka!), Θα είστε σε θέση να καρφώσετε την αποτελεσματικότητα στο σχεδιασμό UI σε χρόνο μηδέν.

Σχεδιασμός με γνώμονα την προσβασιμότητα

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

Ένα μεγάλο τμήμα αυτού του ακροατηρίου αποτελείται από χρήστες που έχουν διάφορες προοπτικές που σχετίζονται με την όραση. Όπως διαφορετικές μορφές ανεπάρκειας χρώματος όρασης (CVD), μειωμένες οράσεις, θολή όραση και προβλήματα σχετικά με την όραση που σχετίζονται με την ηλικία.

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

Για το συγκεκριμένο ακροατήριο της CVD, μόνο τα χρώματα δεν παρέχουν επαρκείς πληροφορίες.

Για παράδειγμα, εάν η ειδοποίηση ειδοποίησης συστήματος έχει σχεδιαστεί με χρώματα μόνο (πράσινο και κόκκινο), ένα άτομο με ανεπάρκεια ορατότητας κόκκινου-πράσινου χρώματος θα έχει έναν δύσκολο χρόνο να υπολογίσει ποιο κουμπί θα κάνει κλικ.

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

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

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

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

  • Εκπαιδεύστε τον εαυτό σας σε ποιες αντιθέσεις χρώματος είναι καλύτερες και χειρότερες για το CVD και άλλα διαφορετικά ικανά ακροατήρια. Μπορείτε να χρησιμοποιήσετε τα εργαλεία ανάλυσης και ελέγχου χρώματος online για να σας βοηθήσουμε: Color Oracle, Sim Daltonism και Kontrast Checker κ.λπ.
  • Να επισημάνετε πάντοτε τα χρώματα στις εικόνες / περιγραφές των προϊόντων σας, εάν εκτελείτε ένα κατάστημα ηλεκτρονικού εμπορίου.
  • Βεβαιωθείτε ότι οι σύνδεσμοι σας είναι πάντα υπογραμμισμένοι καθώς μόνο το χρώμα μπορεί να χάσει το κοινό που δεν έχει χρώμα.
  • Προσθέστε μοτίβα, υφές και αλλαγή μορφών για να συμπληρώσετε τα χρώματα στα διαγράμματα και τα γραφήματα απεικόνισης δεδομένων σας.
  • Βεβαιωθείτε ότι τα κύρια κουμπιά στον ιστότοπό σας διακρίνονται κατάλληλα από τα άλλα κουμπιά. Ως ένας καλός πόρος που σας βοηθά να κατανοήσετε το σχεδιασμό προσβασιμότητας, εδώ είναι ένας χρήσιμος σύνδεσμος.

Δημιουργήστε έναν ανταποκρινόμενο ιστότοπο

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

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

Είναι σχεδιασμός ρευστού που αναδιατάσσει και αναπροσαρμόζεται για να ταιριάζει σε οποιαδήποτε οθόνη στην οποία είναι προσβάσιμη.

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

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

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

Φυσικά, μακροπρόθεσμα, τέτοιες τοποθεσίες θα είναι αυτές με περισσότερη επισκεψιμότητα, ευρύτερο φάσμα από αυτές και πιθανώς περισσότερες μετατροπές.

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

Εκπαιδεύστε το μάτι σας για καλό σχεδιασμό και πρακτική, πρακτική, πρακτική!

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

Και δείτε πώς θα το κάνατε διαφορετικά.

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

Παρατηρήστε πώς αλληλεπιδρούν με το περιβάλλον χρήστη και αν υπάρχουν κενά που μπορείτε να διορθώσετε, στοιχεία που μπορείτε να βελτιώσετε ή εμπόδια που μπορείτε να εξαλείψετε.

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

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

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

Αποτελεσματική UI - τι θα ακολουθήσει;

Έτσι, εκεί έχετε

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

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

Συνεπώς, συνεχίστε να μαθαίνετε.

Αρχικά δημοσιεύθηκε στη διεύθυνση https://spdload.com.