7 σημαντικές συμβουλές σχεδιασμού UI

7 σημαντικές συμβουλές σχεδιασμού UI
Rick Davis

Στη σημερινή εποχή, η διαδικτυακή παρουσία μιας επιχείρησης ή ενός οργανισμού είναι κάτι πολύ περισσότερο από μια απλή συλλογή ιστοσελίδων ή μια εφαρμογή με ωραία εμφάνιση. Ουσιαστικά λειτουργεί ως υποκατάστατο της πρωταρχικής αλληλεπίδρασης μεταξύ καταναλωτών και δημιουργών. Γι' αυτό είναι τόσο σημαντικό να διασφαλίσετε ότι οι αλληλεπιδράσεις με το κοινό και την αγορά-στόχο σας θα κυλήσουν όσο το δυνατόν πιο ομαλά.

Σε αυτό το σημείο έρχονται οι διεπαφές χρήστη.

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

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

Αυτό μπορεί να φαίνεται τρομακτικό στην αρχή. Μην ανησυχείτε όμως! Συγκεντρώσαμε και καταρτίσαμε μια λίστα με τα 7 κορυφαία πράγματα που πρέπει να θυμάστε όταν δημιουργείτε διεπαφές χρήστη. Αυτές οι συμβουλές σχεδιασμού, οι οποίες προέρχονται απευθείας από την έρευνα για την αλληλεπίδραση ανθρώπου-υπολογιστή (HCI), έχουν αποδειχθεί αποτελεσματικές για εκατοντάδες σχεδιαστές σε πολλούς βιομηχανικούς τομείς.

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

Συμβουλή σχεδιασμού #1: Γνωρίστε και κατανοήστε τους χρήστες σας

Πάνω απ' όλα, πρέπει να γνωρίζετε ποιοι είναι οι χρήστες σας. Πρέπει να τους γνωρίζετε σαν την παλάμη του χεριού σας. Τι σημαίνει αυτό;

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

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

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

Συμβουλή σχεδιασμού #2: Καθορίστε τον τρόπο με τον οποίο οι χρήστες θα αλληλεπιδρούν με την επιλεγμένη διεπαφή

Αφού γνωρίζετε τους χρήστες σας, πρέπει να επιλέξετε την πλατφόρμα για την οποία σχεδιάζετε μια διεπαφή. Είναι τηλέφωνο ή φορητός υπολογιστής; Ή επιτραπέζιος υπολογιστής; Ή ίσως ακόμη και Apple Watch; Ό,τι και αν είναι, πρέπει να είστε σίγουροι γι' αυτό πριν ξεκινήσετε να σχεδιάζετε οτιδήποτε.

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

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

Αλλά ακόμη και αυτό μπορεί να πάει στραβά μερικές φορές...

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

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

Τι είναι οι άμεσες αλληλεπιδράσεις;

  • ‍Πατώντας ένα κουμπί
  • Κίνηση σε μια οθόνη
  • Σύρσιμο αντικειμένων με τα δάχτυλα

Τι είναι οι έμμεσες αλληλεπιδράσεις;

  • Χρήση εντολών/συντομεύσεων πληκτρολογίου
  • Δείξιμο και κλικ με ποντίκι ή γραφίδα
  • Πληκτρολόγηση σε πεδίο φόρμας ή έγγραφο

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

Συμβουλή σχεδιασμού #3: Επικοινωνήστε με σαφήνεια και ορίστε τις προσδοκίες

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

Γι' αυτό είναι σημαντικό να γνωστοποιείτε στους χρήστες τι ακριβώς κάνει κάθε στοιχείο του UI σας και ποιες θα είναι οι επακόλουθες επιπτώσεις.

Δείτε επίσης: Photoshop vs. Procreate το 2022

Μερικοί τρόποι με τους οποίους μπορείτε να το κάνετε αυτό είναι οι εξής:

  • Επισημάνετε το κουμπί που αντιστοιχεί σε αυτό που θα ήθελε ιδανικά ο χρήστης. Για παράδειγμα, το κουμπί "Αγοράστε τώρα" σε ιστότοπους ηλεκτρονικού εμπορίου.
  • Χρησιμοποιήστε σύμβολα, όπως έναν κάδο απορριμμάτων για να διαγράψετε κάτι ή μια δισκέτα για να αποθηκεύσετε ένα στοιχείο.
  • Χρησιμοποιήστε το χρώμα. Το κόκκινο εφιστά την προσοχή σε κάτι σημαντικό ή στο να σταματήσετε ενώ το πράσινο σημαίνει "φύγε".
  • Γράψτε ένα σαφές κείμενο για τα κουμπιά. Περιγράψτε τι θα κάνει το κουμπί με απλό και συνοπτικό τρόπο.
  • Δώστε προειδοποιήσεις ή ζητήστε επιβεβαίωση. Δηλώσεις όπως "Είσαι σίγουρος" έχουν μεγάλη σημασία!

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

Συμβουλή σχεδιασμού #4: Τοποθέτηση και μέγεθος στοιχείων

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

Αυτό είναι απλώς μια απλοποιημένη εκδοχή του νόμου του Fitts, μιας αρχής της αλληλεπίδρασης ανθρώπου-υπολογιστή (HCI), που ορίζει ότι: "Ο χρόνος για την απόκτηση ενός στόχου είναι συνάρτηση της απόστασης και του μεγέθους του στόχου".

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

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

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

Δείτε επίσης: Πώς να σχεδιάσετε ένα σκύλο

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

Συμβουλή σχεδιασμού #5: Κάντε τη διεπαφή σας εύκολη στην εκμάθηση

Τι είναι καλύτερο από το να σχεδιάζεις κάτι που οι χρήστες το μαθαίνουν αφού το χρησιμοποιήσουν μόνο μία φορά; Αν είσαι σχεδιαστής, σχεδόν τίποτα.

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

Το UI του Tinder είναι ένα τέλειο παράδειγμα μιας εύχρηστης διεπαφής.

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

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

Συμβουλή σχεδιασμού #6: Αξιοποιήστε τα δεδομένα σας

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

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

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

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

Συμβουλή σχεδιασμού #7: Δώστε ανατροφοδότηση

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

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

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

Πηγαίνετε το UI Design σας στο επόμενο επίπεδο

Με αυτές τις Συμβουλές Σχεδιασμού, είστε πλέον καλά εξοπλισμένοι για να δημιουργήσετε εκπληκτικό UI που θα λατρέψουν οι χρήστες σας!

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

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

Αν σας αρέσει να χρησιμοποιείτε το Vectornator, βαθμολογήστε την εφαρμογή και μοιραστείτε την κριτική σας. Σας ευχαριστούμε που είστε μέρος της κοινότητάς μας! ❤️




Rick Davis
Rick Davis
Ο Rick Davis είναι έμπειρος γραφίστας και εικαστικός με πάνω από 10 χρόνια εμπειρίας στον κλάδο. Έχει συνεργαστεί με διάφορους πελάτες, από μικρές νεοφυείς επιχειρήσεις έως μεγάλες εταιρείες, βοηθώντας τους να επιτύχουν τους σχεδιαστικούς τους στόχους και να ανυψώσουν το brand τους μέσω αποτελεσματικών και εντυπωσιακών γραφικών.Απόφοιτος της Σχολής Εικαστικών Τεχνών της Νέας Υόρκης, ο Rick είναι παθιασμένος με την εξερεύνηση νέων τάσεων και τεχνολογιών σχεδιασμού και συνεχώς υπερβαίνοντας τα όρια του δυνατού στον τομέα. Έχει βαθιά εξειδίκευση στο λογισμικό γραφιστικής και είναι πάντα πρόθυμος να μοιραστεί τις γνώσεις και τις γνώσεις του με άλλους.Εκτός από τη δουλειά του ως σχεδιαστής, ο Rick είναι επίσης αφοσιωμένος blogger και είναι αφοσιωμένος στην κάλυψη των τελευταίων τάσεων και εξελίξεων στον κόσμο του λογισμικού γραφιστικής. Πιστεύει ότι η ανταλλαγή πληροφοριών και ιδεών είναι το κλειδί για την ενίσχυση μιας ισχυρής και ζωντανής κοινότητας σχεδιασμού και είναι πάντα πρόθυμος να συνδεθεί με άλλους σχεδιαστές και δημιουργικούς στο διαδίκτυο.Είτε σχεδιάζει ένα νέο λογότυπο για έναν πελάτη, είτε πειραματίζεται με τα πιο πρόσφατα εργαλεία και τεχνικές στο στούντιό του είτε γράφει ενημερωτικές και συναρπαστικές αναρτήσεις ιστολογίου, ο Rick δεσμεύεται πάντα να προσφέρει την καλύτερη δυνατή δουλειά και να βοηθά άλλους να επιτύχουν τους σχεδιαστικούς τους στόχους.