Δημιουργώντας μια Visual Language: Πίσω από τις σκηνές του συστήματος σχεδιασμού Airbnb

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

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

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

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

Γιατί χρειαζόμαστε συστήματα σχεδιασμού

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

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

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

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

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

Μετάβαση στην εργασία

Για να επιτύχουμε γρήγορα αυτές τις προκλήσεις και να συνεχίσουμε τη διαδικασία λήψης αποφάσεων, συγκεντρώσαμε μια μικρή ομάδα σχεδιαστών και μηχανικών [2]. Εκκαθαρίσαμε τα ημερολόγιά μας, επιφυλάξαμε ένα εξωτερικό χώρο στούντιο λίγο έξω από την Airbnb HQ και αφιερώσαμε τον σχεδιασμό και την κατασκευή του συστήματος γλώσσας σχεδίασης (DLS).

Ο στόχος που θέσαμε για το DLS ήταν να δημιουργήσουμε μια πιο όμορφη και προσβάσιμη γλώσσα σχεδιασμού. Τα σχέδιά μας πρέπει να είναι ενιαίες πλατφόρμες που οδηγούν σε μεγαλύτερη αποτελεσματικότητα μέσω σαφώς καθορισμένων και επαναχρησιμοποιήσιμων στοιχείων. Προκειμένου να εστιάσουμε τις προσπάθειές μας, μειώσαμε την αρχική εμβέλεια στη δημιουργία του συστήματος πρώτα στις μητρικές πλατφόρμες (iOS και Android).

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

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

Universal: Το Airbnb χρησιμοποιείται σε όλο τον κόσμο από μια μεγάλη παγκόσμια κοινότητα. Τα προϊόντα και η οπτική γλώσσα πρέπει να είναι φιλόξενα και προσβάσιμα.

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

Συζήτηση: Η χρήση της κίνησης μας αναπνέει τη ζωή στα προϊόντα μας και μας επιτρέπει να επικοινωνούμε με τους χρήστες με εύκολα κατανοητούς τρόπους.

Τοποθετώντας το θεμέλιο

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

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

Δημιουργία των στοιχείων

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

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

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

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

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

Σύνταξη της βιβλιοθήκης

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

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

Δημιουργήσαμε ένα σύνολο από αυτά τα στοιχεία για τηλέφωνα (iOS και Android) και τα προσαρμόσαμε σε μεγέθη tablet από εκεί. Τα στοιχεία του tablet είναι σε μεγάλο βαθμό τα ίδια με αυτά για κινητά, και σε τεχνικό επίπεδο, ο κώδικας χρειάζεται να υπάρχει μόνο μία φορά σε δύο διαφορετικά στυλ. Με αυτό το σύστημα τα εξαρτήματα μπορούν να διαφέρουν ως προς την εμφάνιση και την τοποθέτησή τους, όπως συμβαίνει και με τον τρόπο με τον οποίο ανταποκρίνεται ο σχεδιασμός για το web. Οι σχεδιαστές μπορούν στη συνέχεια να σχεδιάσουν μια οθόνη μόλις χρησιμοποιήσουν κοινά στοιχεία και μπορούν εύκολα να προσαρμοστούν σε διαφορετικά μεγέθη οθόνης καθώς και σε iOS και Android.

Για το tablet, δημιουργήσαμε μερικές απλές έννοιες σχεδίασης, όπως το Focus Views, το οποίο εστιάζει το περιεχόμενο στη σελίδα, τις μορφές και τις διατάξεις 2-στήλης και του πλέγματος.

Όλα τα στοιχεία και οι απόψεις είναι χτισμένα με το δικό μας πλαίσιο τεχνικής άποψης, το οποίο χειρίζεται αυτά τα στυλ, τα κράτη και την προσαρμοστικότητα. [2]

Διδάγματα

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

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

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

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

συμπέρασμα

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

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

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

Επίσης, απάντησα σε κάποιες ερωτήσεις σχετικά με το Designer News AMA.

Ενημέρωση: Για περισσότερες λεπτομέρειες και πιο πρόσφατες εξελίξεις γύρω από το σύστημα σχεδιασμού μας, παρακολουθήστε τη συζήτησή μου στο συνέδριο Design Systems 2018 στο Ελσίνκι της Φινλανδίας.

Υποσημειώσεις:

[1]: Πολλά μεγάλα έργα είναι για ομάδες και υπάρχουν πάντα πάρα πολλοί άνθρωποι για να ευχαριστήσω αλλά ήθελα να επισημάνω μερικούς ανθρώπους που έκαναν αυτό το έργο:

Bek Stone, Adam Michela, Amber Cartwright, Alex Schleifer, Michael Bachand, Paul Kompfner, Sean Abraham, Salih Abdul-Karim, Michael Sui + πολλοί άλλοι στις ομάδες σχεδιασμού και μηχανικής. Ευχαριστώ τον Josh Leong, την Sola Biu, την Catherine Waite για την ανάγνωση των σχεδίων.

[2]: Θα το αφήσω σε έναν από τους μηχανικούς μας για να γράψω περισσότερα για την τεχνική πλευρά του DLS.

[3]: Στην περίπτωσή μας, θέλουμε οι άνθρωποι να μπορούν να αλλάξουν τα μεγέθη των συμβόλων (π.χ., πρέπει να χωρέσετε σε μεγαλύτερο περιεχόμενο σε μια κεφαλίδα). Αν χρειάζεται να αλλάξετε το μέγεθος ή να αλλάξετε το μέγεθος κάποιου αντικειμένου, το Sketch (2.5) θα τροποποιεί αυτόματα κάθε περίπτωση αυτού του συμβόλου. Αυτό θα σκοτώσει το σκίτσο σας για λίγα λεπτά και ίσως να βρωμίσει το αρχείο σας μόνιμα (μερικές φορές η αναίρεση δεν λειτούργησε). Καταλήξαμε να βάζουμε τα στοιχεία σε ομάδες στρώσεων και να αφήνουμε τους ανθρώπους να τα αντιγράψουν και να τα επικολλήσουν.

Χρησιμοποιούμε επίσης το git / github για να διευκολύνουμε τη διαδικασία ενημέρωσης αρχείων. Δημιουργούμε και προσθέτουμε με το χέρι νέα εξαρτήματα στο αρχείο Sketch της κύριας βιβλιοθήκης μας και υποβάλλουμε αιτήματα έλξης με ένα αρχείο καταγραφής αλλαγών και παράγονται εξαγωγές png που τεκμηριώνουν τις αλλαγές. Μετά από αυτό, το αρχείο Sketch καταλήγει σε έναν κοινόχρηστο φάκελο Box, ο οποίος συνδέεται με τα πρότυπα Sketch, οπότε όλοι έχουν άμεση πρόσβαση στα νέα στοιχεία.