Πώς να δημιουργήσετε έναν οδηγό στυλ: Ξεκινήστε με ένα περιβάλλον UI

Q & A με τον σχεδιαστή UX της AdRoll για το γιατί το κάναμε και τι μάθαμε

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

Γεια! Είμαι η Arya Srinivasan, ερευνητής της UX στο AdRoll. Κατέβηκα μαζί με τον Mason Lee, έναν σχεδιαστή UX που εργαζόταν στο προϊόν API των εγγενών διαφημίσεων της AdRoll, για να μιλήσει για το έργο του που ανέπτυξε τον οδηγό στυλ της AdRoll.

Arya: Για να ξεκλειδώσετε τα πράγματα, γιατί ξεκινήσατε το έργο του οδηγού στυλ; Ποιο ήταν το πρόβλημα που χρειάστηκε να επιλυθεί;

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

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

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

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

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

Arya: Αναφέρατε ότι θέλετε η AdRoll να είναι μια εταιρία σχεδίασης - τι εννοείτε με αυτό;

Mason: Θέλω την AdRoll να θέσει το ντιζάιν στο προσκήνιο έτσι ώστε να είναι ανταγωνιστικό διαφοροποιητικό - αναγνωρισμένο από τους πελάτες ως ένα καλά σχεδιασμένο προϊόν που πραγματικά λύνει τις ανάγκες τους.

Arya: Ποιοι ήταν οι άμεσοι στόχοι σου για τον οδηγό στυλ; Έχετε ένα μακροπρόθεσμο όραμα για αυτό το έργο;

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

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

Arya: Παρουσιάσατε προβλήματα κατά τη δημιουργία του οδηγού στυλ; Πώς τα λύσατε;

Μασον: Ένα από τα μεγαλύτερα εμπόδια ήταν να πάρει το buy-in από τους ανθρώπους στις ομάδες προϊόντων. Για να συμμετάσχω όλοι, συνέστησα μια συνάντηση με έναν σαφή κατάλογο των θεμάτων της ημερήσιας διάταξης που θα καλύπτει. Παρουσιάστηκα ασυνέπειες στο σχεδιασμό, όπως τα διαφορετικά μενού που βρίσκονται ανάμεσα στα προϊόντα. Η παροχή οπτικών στοιχείων προκαλεί συνομιλίες, και τελικά, οι άνθρωποι νοιάζονται για το προϊόν τους και θέλουν συνέπεια.

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

Ακολουθεί ένα παράδειγμα της ευελιξίας του οδηγού στυλ. Η αρχική μας απόφαση για το padding σε αυτό το dropdown geotargeting ήταν πολύ μεγάλη, γι 'αυτό αναθεωρήσαμε τον οδηγό στυλ για να υπολογίσουμε τη συγκεκριμένη περίπτωση χρήσης.Πριν από (αριστερά), Μετά (δεξιά)

Θέλω πραγματικά να κάνω μια ακόμη πρόκληση! Το όνομα μπορεί να είναι δύσκολο. Όπως είπα προηγουμένως, θέλω οι σχεδιαστές και οι μηχανικοί να μιλούν την ίδια γλώσσα, αλλά αυτό πρέπει να γίνει προσεκτικά. Για κάτι τόσο απλό όσο ένα dropdown, έχουμε στην πραγματικότητα αρκετές παραλλαγές (το ένα με πλαίσια ελέγχου, το άλλο με πλαίσια ελέγχου και ένα μπλοκ κειμένου και το άλλο είναι ένα τυπικό αναπτυσσόμενο μενού). Πώς ονομάζουμε τρία διαφορετικά dropdowns, ώστε υπάρχει μια καθολική κατανόηση του ποιο είναι ποιο;

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

Πώς χρησιμοποιήσαμε το Wake για να συζητήσουμε τις ασυνέπειες του UI και να συνεργαστούμε σε κανόνες συνιστωσών.

Arya: Υπάρχει κάτι μοναδικό στο UI του AdRoll, το οποίο έπρεπε να εξετάσετε κατά τη δημιουργία του οδηγού στυλ;

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

Arya: Υπάρχουν κάποια πράγματα που θέλετε να γνωρίζετε όταν ξεκινήσατε να δημιουργείτε τον οδηγό στυλ;

Mason: Εύχομαι να έχω βαθύτερη κατανόηση για το πώς όλα τα προϊόντα μας λειτουργούν από την αρχή. Για παράδειγμα, μοιραζόμαστε τον τρόπο με τον οποίο δουλεύουμε το προϊόν μας στην εβδομαδιαία συνάντηση κριτικής σχεδιασμού, οπότε γνωρίζω πώς το SendRoll (το προϊόν επαναπρογράμμισης ηλεκτρονικού ταχυδρομείου) λειτουργεί στην επιφάνεια, αλλά δεν έχω τη βαθιά γνώση του SendRoll που κάνει ο σχεδιαστής. Νομίζω ότι αυτή η λεπτή κατανόηση του προϊόντος σίγουρα βοηθάει όταν εργάζεστε στον οδηγό στυλ, γιατί έχω τότε καλύτερη κατανόηση όλων των πιθανών περιπτώσεων χρήσης.

Arya: Ποιος είναι λοιπόν ο καλύτερος τρόπος για να επιτευχθεί αυτή η κοινή κατανόηση της διαδικασίας του σχεδιαστή και του προϊόντος του;

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

Arya: Υπήρχαν κάποιοι πόροι στους οποίους αναφέρατε κατά την εκτέλεση αυτού του έργου;

Mason: Διάβασα το Atomic Design από τον Brad Frost, έψαξα σε απευθείας σύνδεση και μίλησα με άλλους σχεδιαστές της UX στο MeetUps. Αν νομίζετε ότι μια συγκεκριμένη εταιρεία εφαρμόζει καλό σχεδιασμό, τότε είναι αρκετά πιθανό ότι έχουν μιλήσει για τον οδηγό στυλ κάπου online.

Arya: Ποια είναι η κατάσταση του οδηγού στυλ μας;

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

Μπορείτε να δείτε τα στοιχεία UI της θεμελίωσης και των συστατικών στο Dribbble. Αν είστε εξοικειωμένοι με το Atomic Design, ομαδοποίησα τα επίπεδα "ατόμων" και "μορίων" σε αυτά που ονομάζω "συστατικά". Για παράδειγμα, ο συνδυασμός του τίτλου του εντύπου και της εισόδου καθιστά εύκολο για άλλους σχεδιαστές να αντιγράψουν εύκολα μια συμπληρωμένη φόρμα πεδίο.

Ευχαριστώ για την ανάγνωση!

Αναζητήστε αυτά τα επερχόμενα θέματα καθώς αναπτύσσουμε τον οδηγό στυλ:

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