Συστήματα Σχεδίασης Sprint 0: Το Silver Bullet της Ανάπτυξης Προϊόντων.

Μια σύντομη εισαγωγή: Είμαι ο Marcin: πρώην διευθυντής UX και πλέον συνιδρυτής και διευθύνων σύμβουλος της UXPin - η πλατφόρμα σχεδιασμού UX πλήρους στοίβας. Σε αυτή τη σειρά μηνυμάτων, αναφέρομαι στο ταξίδι της UXPin για τη δημιουργία του δικού μας συστήματος σχεδιασμού. Ξεκινάμε συζητώντας τα βασικά στοιχεία των συστημάτων σχεδιασμού (γιατί; τι;) και στη συνέχεια κινούμαστε με σπριντ, με σπριντ, μέσα από όλη τη διαδικασία κατασκευής και συντήρησης ενός πλήρους συστήματος.

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

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

Μεταξύ Ιουλίου και Αυγούστου 2016, διεξήγαγα συνέντευξη από 40+ επιχειρηματίες σχεδιαστές, προγραμματιστές και ηγέτες προϊόντων για τις πιό πιεστικές προκλήσεις. Ήθελα μια σαφέστερη εικόνα του τόπου στον οποίο ο σχεδιασμός και η ανάπτυξη ήταν επικεφαλής. Τίποτα δεν ζωγραφίζει ένα σαφέστερο όραμα του αύριο παρά τους πόνους του σήμερα.

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

Αυτή τη φορά, το τελικό αποτέλεσμα μας οδήγησε σε μια απροσδόκητη αποκάλυψη.

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

Αυτό το πρόβλημα είναι η έλλειψη συνοχής σχεδιασμού. Η απειλή κάθε προϊόντος.

Έλλειψη συνοχής σχεδιασμού: το μεγαλύτερο ζήτημα στο σχεδιασμό προϊόντων;

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

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

Θέλαμε να μάθουμε περισσότερα. Θέλαμε επίσης να επικυρώσουμε τα ευρήματα.

Έτσι, δύο εβδομάδες μετά τις συνεντεύξεις μας, διεξήγαμε μια έρευνα μεγάλης κλίμακας σχετικά με την κατάσταση του σχεδιασμού των επιχειρήσεων. Από τους 3.175 ερωτηθέντες, το 59% επεσήμανε τη «βελτίωση της συνοχής του UX» ως την πρόκληση που αντιμετωπίζουν σήμερα στη διαδικασία UX:

Αποτελέσματα της μελέτης UXPin της κατάστασης της επιχείρησης UX

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

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

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

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

Είναι ένας φαύλος κύκλος.

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

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

Διαχείριση του χάους

Πώς λοιπόν οι ομάδες αυτές εργάζονται για την ελαχιστοποίηση ασυνεπειών;

Οι συμμετέχοντες της μελέτης μας ήταν πολύ συνεπείς στις απαντήσεις τους: δημιουργία και διατήρηση ενός συστήματος σχεδιασμού. Ο τομέας επιχειρήσεων (προϊόντα B2B) της αγοράς σχεδιασμού φαίνεται να υπάρχει ήδη:

Αποτελέσματα της μελέτης UXPin της κατάστασης της επιχείρησης UX

Το 69% των επιχειρήσεων είτε διαθέτουν σύστημα σχεδιασμού είτε εργάζονται επί του παρόντος σε ένα. Εταιρείες όπως η Saleforce, η IBM, η Airbnb και η Atlassian οδηγούν το πλήθος με πολύ ώριμες εφαρμογές ζωντανών συστημάτων σχεδιασμού.

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

Αποσυναρμολόγηση συστημάτων σχεδιασμού

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

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

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

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

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

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

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

Τι είναι μια τυπική δομή; Για να ανακαλύψουμε, αναλύσαμε 39 δημόσια διαθέσιμα συστήματα σχεδιασμού.

Αποτέλεσμα της έρευνας του UXPin

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

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

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

Ένα σύστημα σχεδίασης όμως δεν τίθεται σε πέτρα. Θα πρέπει να εξελιχθεί με το προϊόν και πάντα να αντανακλά την αλήθεια.

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

Σχεδιασμός συνέπειας στο UXPin: γιατί πραγματικά χρειαζόμασταν ένα σύστημα σχεδιασμού

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

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

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

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

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

Το UXPin Stylesheets Repository παρουσιάζει ένα καλό επίπεδο modularity

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

Το ταξίδι μπροστά

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

Μέρη του συστήματος υπάρχουν ήδη, τα τμήματα είναι σταδιακά επεξεργασμένα. Εδώ είναι ο τρέχων χάρτης πορείας μας:

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

Μείνετε συντονισμένοι!

Ψάχνετε για όλα τα άρθρα αυτής της σειράς; Εδώ είναι:

  • Συστήματα Σχεδίασης Sprint 0: Το Silver Bullet της Ανάπτυξης Προϊόντων.
  • Συστήματα Σχεδίασης Sprint 1: Το Αποθέμα Διεπαφής
  • Σύστημα Σχεδίασης Sprint 2: Μια παλέτα χρωμάτων για να τις διαχειριστείτε όλα
  • Σύστημα Σχεδίασης Sprint 3: Διαχείριση των Βασικών
  • Σύστημα Σχεδίασης Sprint 4: Αρχές σχεδιασμού
  • Σύστημα Σχεδίασης Sprint 5: Διαχείριση Τυπογραφίας
  • Σύστημα Σχεδίασης Sprint 6: Τα γρηγορότερα εικονίδια στη Γη

Και βρίσκεστε σε πιο εμπεριστατωμένες σκέψεις για το Design Systems:

  • Το σύστημα ελάχιστου βιώσιμου σχεδιασμού
  • Τα συστήματα σχεδιασμού είναι μια γλώσσα. Και αυτό αλλάζει συνεχώς την ανάπτυξη λογισμικού
Συμμετοχή: https://www.uxpin.com/design-systems-early-access