Crash Course: Σχεδιασμός UI

Μια ανακεφαλαίωση του εργαστηρίου σχεδιασμού μου PennAppsXV.

UI εναντίον UX

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

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

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

Το πρώτο επίπεδο σχεδιασμού του προϊόντος

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

  1. Ποιο είναι το πρόβλημα που προσπαθείτε να λύσετε;
  2. Ποιες είναι οι ανάγκες των χρηστών σας;
  3. Πώς προσαρμόζεται το προϊόν σας σε επιχειρηματικό πλαίσιο (στόχοι προϊόντων);

Το δεύτερο αεροπλάνο:

Το δεύτερο επίπεδο σχεδιασμού προϊόντος

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

  1. Πώς μπορείτε να λύσετε τα προβλήματα μέσω της πλατφόρμας; Ποιες είναι οι δυνατότητες και πώς μπορείτε να τους δώσετε προτεραιότητα;

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

Το τρίτο επίπεδο:

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

Το επόμενο αεροπλάνο είναι όπου τα πράγματα γίνονται λιγότερο αφηρημένα και πιο συγκεκριμένα:

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

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

Και τέλος, το πιο συγκεκριμένο αεροπλάνο:

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

Αυτό είναι το αεροπλάνο όπου θα βρείτε UI Designers και Visual Designers που κάνουν το μεγαλύτερο μέρος της δουλειάς τους χρησιμοποιώντας εργαλεία όπως το Sketch, το Photoshop, το Adobe Experience Design, το Illustrator ή το Figma.

Στη συνέχεια, ας πηδήσουμε σε κάποιες βασικές αρχές του UI Design.

Αρχή # 1: Η πρώτη είναι η σαφήνεια.

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

Γιατί είναι εδώ; Βγάζει νόημα; Ποιες άλλες δυνατότητες μπορώ να διερευνήσω;

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

Αρχή # 2: Να παρέχετε σαφή, ουσιαστική ανατροφοδότηση

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

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

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

Αρχή # 3: Η συνοχή έχει σημασία.

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

Αρχική σελίδα XfinityXfinity TV PageΣελίδα Xfinity Personal

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

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

Πηγή: https://dribbble.com/shots/1817828-Style-Guide

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

Αρχή # 4: Σε περίπτωση αμφιβολίας, χρησιμοποιήστε καθιερωμένα μοτίβα σχεδίασης.

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

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

Το σχέδιο ανάγνωσης σε σχήμα F.

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

Σημαίνει ότι πρέπει να τοποθετήσετε το πιο σημαντικό περιεχόμενο στην επάνω αριστερή γωνία.

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

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

Αρχή # 5: Χρήση οπτικής ιεραρχίας.

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

Πηγή: https://dribbble.com/shots/1315388-Dashboard-Web-App-Product-UI-Design-Job-Summary

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

I. Τυπογραφία

Τι κάνει καλή τυπογραφία; Οι δύο βασικοί παράγοντες είναι η αναγνωσιμότητα και η αναγνωσιμότητα.

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

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

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

τι λες για τώρα?

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

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

ΙΙ. Λευκός χώρος (αρνητικός χώρος AKA)

Έχει κοιτάξει κάποιος ένα μενού / μια ιστοσελίδα / μια διεπαφή και σκέφτηκε: "Αυτό φαίνεται και αισθάνεται ωραία, αλλά δεν είμαι σίγουρος γιατί;" Καλά τώρα το κάνετε. Η απάντηση είναι λευκός χώρος. Ο λευκός χώρος βοηθά με την αναγνωσιμότητα και την κατανόηση πάρα πολύ. Μια μελέτη (Lin, 2004) διαπίστωσε ότι η καλή χρήση του λευκού χώρου μεταξύ των παραγράφων και του αριστερού και του δεξιού περιθωρίου αυξάνει την κατανόηση κατά σχεδόν 20%. Οι αναγνώστες βρίσκουν ευκολότερο να εστιάζουν και να επεξεργάζονται γενναιόδωρα περιεχόμενο σε απόσταση.

Θετικός χώρος = Σκύλος. Αρνητικός χώρος = Κατ.

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

Πηγή: https://dribbble.com/shots/2047524-V5-0-Website-Redesign

Όμορφα χαρτοφυλάκια Τώρα ας ρίξουμε μια πιο προσεκτική ματιά:

Παρατηρήστε πώς υπάρχουν 4 σαφείς μπλοκ περιεχομένου. Ας το καταργήσουμε περαιτέρω:

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

III. Χρώμα

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

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

Πηγή: Dribbble

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

Μπορείτε επίσης να χρησιμοποιήσετε τα χρώματα για την ομαδοποίηση παρόμοιων στοιχείων διεπαφής:

Πηγή: Dribbble

Τέλος, λιγότερα είναι περισσότερα. Όσο περισσότερα χρώματα υπάρχουν, τόσο μικρότερο θα είναι το κάθε χρώμα που θα έχει. Ένα εξαιρετικό παράδειγμα είναι ο πρόσφατος επανασχεδιασμός του Instagram:

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

Άλλοι πόροι:

Σας ευχαριστώ στον Kevin Yang και τον Chen Ye για ένα φοβερό Σαββατοκύριακο της PennApps! Και το Figma για την παροχή ενός τρομερού και διαισθητικού εργαλείου σχεδιασμού που χρησιμοποιήσαμε στο εργαστήριό μας.

HH Design είναι μια κοινότητα γύρω από το σχεδιασμό στο πλαίσιο της τεχνολογίας.

συμβάλλει