Κοιτάζοντας τον Horizon: Γιατί χτίσαμε ένα σύστημα σχεδιασμού

Σύστημα σχεδίασης Horizon, Μέρος 1

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

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

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

Για να μάθετε περισσότερα σχετικά με την έλλειψη συνοχής, ένας ερευνητής χρήστης στην ομάδα μας, Wilson Chan, διεξήγαγε πολυάριθμες συνεντεύξεις μεταξύ της ομάδας σχεδιασμού που αναζητούσε πού θα μπορούσαμε να κάνουμε βελτιώσεις. Θα μοιραζόμαστε σύντομα αυτό που μάθαμε σε μια θέση εδώ.

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

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

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

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

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

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

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

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

Στόχος 3: Κοιτάξτε προς το μέλλον χωρίς να αναδημιουργήσετε τον τροχό
Η γνώση του πώς και πότε η εξέλιξη ενός υπάρχοντος στοιχείου ή ενός σχεδίου αλληλεπίδρασης μπορεί συχνά να είναι ασαφής. Αυτό επιλύουμε προσδιορίζοντας μια διαδοχική φάση εξερεύνησης στο πλαίσιο της διαδικασίας σχεδιασμού του προϊόντος μας: Χρήση, Προσαρμογή και στη συνέχεια Δημιουργία.

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

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

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

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

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

Αυτή είναι η πρώτη θέση στο blog στη σειρά "Horizon Design System". Ανυπομονούμε να μοιραστούμε περισσότερα σχετικά με τη διαδικασία και την πρόοδό μας στις μελλοντικές θέσεις. Εν τω μεταξύ, αν έχετε ερωτήσεις, αφήστε μας μια απάντηση. Ή στείλτε μας ένα Tweet!

Εικόνες στούντιο ευγενική προσφορά του Josh Wilburne. Επικεφαλίδα εικονογράφηση ευγενική προσφορά της Michie Cao.