Ποια είναι η διαφορά μεταξύ του σχεδιασμού UX και UI;

Και μερικές συμβουλές για να ξεκινήσετε και με τους δύο.

Πιστωτικές κάρτες εικόνας

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

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

Ας αρχίσουμε!

Πρώτα απ 'όλα, ας απαντήσουμε στην ερώτηση: Τι ακριβώς είναι ο σχεδιασμός UI και ο σχεδιασμός UX, και ποια είναι η διαφορά μεταξύ των δύο;

Image Credit

Με απλά λόγια, το UI είναι πώς φαίνονται τα πράγματα, το UX είναι το πώς λειτουργούν τα πράγματα. Το UX είναι μια διαδικασία, ενώ το UI είναι παραδοτέο. Ας επεξεργαστούμε περαιτέρω ...

Σχεδιασμός διεπαφής χρήστη

Ο σχεδιασμός διεπαφής χρήστη (UI) είναι ένα μεγάλο πεδίο. Θεωρητικά, το UI είναι ένας συνδυασμός περιεχομένου (έγγραφα, κείμενα, εικόνες, βίντεο κ.λπ.), μορφή (κουμπιά, ετικέτες, πεδία κειμένου, πλαίσια ελέγχου, αναπτυσσόμενες λίστες, γραφικός σχεδιασμός κλπ.) Και συμπεριφορά Κάνω κλικ / σύρετε / πληκτρολογήστε).

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

Όταν ξεκίνησα, κάτι που έμαθα από τον μέντορά μου είναι να πάρω ένα ταξίδι ξεναγού στο προϊόν σας. Φανταστείτε την εφαρμογή / τον ιστότοπό σας ως ταξίδι. Κάθε χρήστης που μεταφορτώνει την εφαρμογή σας απευθείας από την ανίχνευση του στο App Store / web, μέσω της χρήσης του, την επίτευξη στόχων ή την ολοκλήρωση εργασιών εντός της εφαρμογής, πραγματοποιείται σε ένα ταξίδι. Και αυτό το ταξίδι θα πρέπει να είναι απολαυστικό.

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

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

Σχεδιασμός δεν είναι μόνο για να μάθουν να χρησιμοποιούν λογισμικό σχεδιασμού - αν και αυτό είναι σίγουρα σημαντικό. Το λογισμικό είναι σαν το σπαθί του σχεδιαστή. Χρειάζεται το σπαθί για να πολεμήσετε τη μάχη, αλλά αυτό δεν είναι μόνο που πρέπει να μάθετε να χρησιμοποιείτε. Πρέπει να μάθετε τις στρατηγικές, τις διαδικασίες, τα τεχνάσματα και τις συμβουλές του αγώνα / παιχνιδιού για να μπορέσετε να το κερδίσετε. Στο σχεδιασμό του UI, θα πρέπει να ερευνάτε, να πειραματίζετε, να δοκιμάζετε και να κατανοείτε τους χρήστες σας και το ταξίδι τους καθ 'όλη τη χρήση του προϊόντος σας.

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

Πράγματα που πρέπει να θυμάστε για τη δημιουργία ευχάριστου περιβάλλοντος χρήστη

  1. Σε μια οθόνη, οι άνθρωποι θα διαβάζουν πάντα το μεγαλύτερο, το πιο τολμηρό και το πιο λαμπρό πρώτο.
Πιστωτικές κάρτες εικόνας

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

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

2. Η σημασία της ευθυγράμμισης.

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

Πιστωτικές κάρτες εικόνας

Στις εικόνες παραπάνω, η εικόνα στα αριστερά έχει 1 γραμμή ευθυγράμμισης. Ενώ η εικόνα στο δεξιό τμήμα έχει 4 γραμμές ευθυγράμμισης.

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

Η εικόνα στα αριστερά έχει πάρα πολλές γραμμές ευθυγράμμισης, ενώ η μία στα δεξιά έχει μόνο μία και φαίνεται πιο ευχάριστη στο μάτι! Πιστωτικές κάρτες εικόνας

Υπάρχουν δύο βασικοί τύποι ευθυγράμμισης: Ευθυγράμμιση άκρων και ευθυγράμμιση κεντρικού άξονα.

  • Η ευθυγράμμιση των άκρων είναι εκεί όπου έχετε όλα τα στοιχεία που έχουν μία πλευρά ή άκρη που είναι επάνω σε μία γραμμή.
  • Η ευθυγράμμιση του κεντρικού άξονα είναι εκεί όπου κατατάσσετε όλα τα στοιχεία από το μέσο σημείο τους.
Πιστωτικές κάρτες εικόνας

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

3. Γίνετε αρχιτέκτονας προσοχής.

Ακολουθούν δύο τρόποι για να ερμηνεύσετε αυτό το θέμα: 1) Πρέπει να προσελκύσετε την προσοχή του χρήστη με το σχέδιό σας. 2) Πρέπει να δώσετε προσοχή σε κάθε μικρό πράγμα στα σχέδιά σας.
Για να είσαι σπουδαίος σχεδιαστής, πρέπει να κάνεις και τα δύο. Το τελευταίο σας επιτρέπει να επιτύχετε το πρώτο.

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

Τρόποι χρήσης κειμένου για να προσελκύσετε την προσοχή του χρήστη:

  • Κάντε το μέγεθός του μεγαλύτερο ή μικρότερο.
  • Βολικό ή φωτεινότερο χρώμα. Ή να την απενεργοποιήσετε.
  • Χρησιμοποιήστε ένα τυπογραφικό με ένα βαρύ βάρους σε σχέση με κάτι που είναι λεπτό ή ελαφρύ.
  • Επικεφαλίστε τις λέξεις. Με κεφαλαία ή πεζά μερικές λέξεις.
  • Αυξήστε την απόσταση μεταξύ καθενός από τα γράμματα για να φτάσετε το συνολικό μέγεθος των λέξεων περισσότερο χώρο.

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

Διαβάστε περισσότερα για το UI Design εδώ. Το Behance και το Dribbble είναι τέλειες πλατφόρμες για να βρείτε καλό σχέδιο για να εμπνευστείτε.

Σχεδίαση εμπειρίας χρήστη

Ο σχεδιασμός της εμπειρίας χρήστη (UX) είναι να δημιουργήσετε εμπειρίες χωρίς πόνο και ευχάριστες εμπειρίες.

Εδώ είναι 7 ερωτήσεις για να αναρωτηθείτε εάν το UX του προϊόντος σας είναι καλό:

  1. Ευχρηστία: Ποιος είναι ο χρήστης που χρησιμοποιεί την εφαρμογή μου; Ποια είναι η βασική λειτουργικότητα της εφαρμογής μου; Τι πρέπει να κάνω για να μπορέσω να χρησιμοποιήσω την εφαρμογή μου;
    Τώρα πώς μπορώ να ελαχιστοποιήσω τον αριθμό των βημάτων που χρειάζεται ο χρήστης για να το επιτύχει μέσα στην εφαρμογή μου; Ποιο είναι το κύριο πράγμα που οι χρήστες θέλουν να επιτύχουν με την εφαρμογή μου; Πώς μπορώ να κάνω την εμπειρία της επίτευξης αυτής ως ομαλής, γρήγορης και ευχάριστης;
  2. Προφίλ χρηστών: Πρέπει να γνωρίζετε ποιοι είναι οι χρήστες σας και τι θέλετε να επιτύχουν χρησιμοποιώντας την εφαρμογή σας. Ο καλύτερος τρόπος για να το κάνετε αυτό είναι να δημιουργήσετε προφίλ στους χρήστες σας.
    Πρέπει να κάνετε λίγες ασκήσεις σκέψης για να καταλάβετε την αγορά σας. Περιορίστε το κοινό σας στόχου / χρήστη.
    Το κύριο ερώτημα που πρέπει να συζητήσετε είναι: Ποια είναι η βασική λειτουργικότητα της εφαρμογής μου; Προφίλ τους χρήστες σας να επανεκτιμήσουν συνεχώς την ερώτηση.
  3. Ζητώντας άδειες: Εάν η εφαρμογή για κινητά έχει ειδοποιήσεις push, χρειάζεται υπηρεσίες τοποθεσίας, ενοποίηση με κοινωνικά μέσα, ηλεκτρονικό ταχυδρομείο κ.λπ., γνωρίζετε ότι χρειάζεστε την άδεια του χρήστη για ένα μήνυμα προειδοποίησης που εμφανίζεται στην οθόνη όταν χρησιμοποιεί την εφαρμογή σας. Αντί να ρωτάς όλους τους ίδιους που θα συντρίψουν τον χρήστη, χρησιμοποιήστε το εφέ Benjamin Franklin. Πριν ζητήσετε από κάποιον μια μεγάλη χάρη, ζητήστε του μια μικρή χάρη. Και σπρώξτε αργά τον χρήστη προς μια συγκεκριμένη κατεύθυνση.
    Βεβαιωθείτε ότι η εφαρμογή σας στέλνει την ειδοποίηση εξουσιοδότησης μόνο όταν ο χρήστης πρόκειται να χρησιμοποιήσει τη συγκεκριμένη λειτουργία και όχι όταν ξεκινά την εφαρμογή.
  4. Μορφή ενάντια στη λειτουργία: Το σχέδιο δεν αφορά πάντα τη μορφή - το όμορφο σχέδιο χρωμάτων, τις γραμματοσειρές, τη διάταξη και τα παρόμοια. Πρόκειται επίσης για τη λειτουργικότητα. Πάντα πηγαίνετε για λειτουργία πάνω από τη φόρμα.
  5. Συνέπεια: Είμαι συνεπής σε όλη την εφαρμογή μου; Είναι η εφαρμογή μου συνεπής με το εμπορικό σήμα μου; Η ασυνέπεια στο σχέδιο δημιουργεί σύγχυση. Ένας μπερδεμένος χρήστης είναι ένας δυστυχισμένος χρήστης.
    Σκεφτείτε τη συνέπεια, όχι μόνο από άποψη εμφάνισης, αλλά και από πλευράς λειτουργικότητας.
  6. Απλότητα: Μπορώ να το καταστήσω απλούστερο;
    Βεβαιωθείτε ότι η εφαρμογή σας είναι γιαγιά-proof, δηλαδή, οι ηλικιωμένοι μπορούν να το καταλάβουν και να το χρησιμοποιήσουν.
    Μια κακή εφαρμογή που προκαλεί σύγχυση θα ήταν σειρές με σειρές κουμπιών, πολλά διαφορετικά χρώματα και ένα στενά συνδεδεμένο περιβάλλον εργασίας χρήστη.
  7. Μην με κάνει να σκέφτομαι: Κάνω τα πράγματα δύσκολα για τον χρήστη μου;
    Οι άνθρωποι δεν τους αρέσει να συγχέονται.
    Όταν προγραμματίζουμε, προσπαθούμε να κάνουμε τον κώδικα μας όσο το δυνατόν πιο ελαφρύ και αποτελεσματικό.
    Όταν σχεδιάζουμε, προσπαθούμε να κάνουμε τη διεπαφή τόσο ξεκάθαρη όσο και όσο λιγότερο πιθανή. Και όμορφη!
    Προσπαθήστε να κάνετε τη διατύπωσή σας όσο το δυνατόν πιο σαφής.

Σημεία που πρέπει να σημειώσετε για ένα μεγάλο UX:

  1. Μην διαθέτετε μακρά σεμινάρια κατά την εκκίνηση της εφαρμογής, εξηγώντας τον τρόπο χρήσης της εφαρμογής. Αντ 'αυτού, θέλετε να δώσετε στους χρήστες σας πληροφορίες σχετικά με το πότε και πότε χρειάζεται. Κάντε το με βάση τα συμφραζόμενα. Δώστε συμβουλές και συμβουλές. Προσπαθήστε να οικοδομήσετε το σχέδιο όπου ο χρήστης υπολογίζει την εφαρμογή μέσα σε λίγα δευτερόλεπτα χωρίς να χρειάζεται ένα ξεκάθαρο φροντιστήριο. Εκεί έρχονται οι διαισθητικές αρχές σχεδιασμού!
  2. Όταν κάτι είναι τόσο ριζωμένο στο μυαλό των χρηστών του κινητού τηλεφώνου, όπως το τράβηγμα για ανανέωση ή το τσίμπημα για μεγέθυνση - ακολουθήστε αυτούς τους κανόνες για την εφαρμογή σας. Και ΔΕΝ χρησιμοποιείτε αυτές τις ενέργειες για κάποιο άλλο στόχο. Όπως το τραβήξτε για να προσθέσετε μια νέα καταχώριση στο ημερολόγιο, παίρνει πολύ σύγχυση. Μια εφαρμογή για το περιοδικό που χρησιμοποιούσα έκανε αυτό και ήταν συγκεχυμένη.
  3. Μη συμπεριφέρεστε στους χρήστες σας όπως τα κουτιά ηλίθιοι. Μην δίνετε στο χρήστη μια ειδοποίηση / ειδοποίηση για να επιβεβαιώσετε συχνή δράση. Ζητήστε επιβεβαίωση μόνο για επιβλαβείς ενέργειες που οι χρήστες ενδέχεται να μετανιώσουν - όπως τη διαγραφή κάτι ή την πραγματοποίηση αγοράς.
    Τα περιττά αναδυόμενα παράθυρα και οι ειδοποιήσεις διακόπτουν τη ροή και οδηγούν σε κακή εμπειρία χρήστη. Μην κάνετε τους πελάτες σας να νιώθουν ηλίθιοι.

Διαβάστε περισσότερα για το UX Design εδώ και εδώ.

Τελικές σκέψεις

Ελπίζω το άρθρο να σας βοηθήσει να καταλάβετε τις βασικές έννοιες στο σχεδιασμό UI και UX. Θα ήθελα να ακούσω οποιαδήποτε σχόλια ή οποιεσδήποτε σκέψεις σχετικά με τη θέση. Μπορείτε να μου στείλετε ένα email στο harshita@harshitaapps.com!

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

Τερματισμός της θέσης με ένα από τα αγαπημένα μου αποσπάσματα σχετικά με το σχεδιασμό ...

"Το σχέδιο δεν είναι μόνο αυτό που μοιάζει και αισθάνεται σαν. Σχεδιασμός είναι πώς λειτουργεί "
-Ο Steve Jobs