Σκέψου λιγότερο. Σχεδιάστε καλύτερα.

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

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

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

Ο Αμερικανός ψυχολόγος Barry Schwartz έγραψε στο The Paradox Of Choice ότι η εξάλειψη των επιλογών μπορεί να μειώσει σημαντικά το άγχος. Υποστήριξε ότι πρέπει να έχουμε πρότυπα και κριτήρια, αλλά μην ανησυχείτε για το ενδεχόμενο να υπάρξει κάτι καλύτερο. Ήταν στο πλαίσιο των καταναλωτών, αλλά πιστεύω ότι ισχύει και για τις αποφάσεις σχεδιασμού.

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

1. Περιορισμός μεταβλητών

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

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

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

Κλίμακα & διαχωρισμός

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

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

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

Πλέγματα

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

Ένα σύστημα πλέγματος θα μειώσει τις μεταβλητές στη διάταξη

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

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

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

Τυπογραφία

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

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

Χρώμα

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

Εργαλεία όπως το Adobe Color CC διευκολύνουν την προκαθορισμό μιας παλέτας

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

Εικόνες

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

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

Πόσες διαφορές στην αναλογία και το μέγεθος των εικόνων χρειάζονται πραγματικά;

2. Δημιουργία οδηγού στυλ νωρίτερα

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

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

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

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

3. Προσαρμοσμένη με προτεραιότητα και προσαρμογή

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

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

Προσδιορίστε βασικούς τομείς

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

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

Εστίαση στις περιοχές κλειδιά

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

4. Να κάνει το έργο για όλους

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

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

Η προσβασιμότητα είναι μια ευλογία στη μεταμφίεση

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

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

Δεν πρόκειται μόνο για αναπηρίες

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

5. Χρησιμοποιώντας δοκιμασμένα και δοκιμασμένα μοτίβα

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

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

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

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

Τελική σημείωση

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

Ακολούθησέ με στο τουίτερ