Σταματήστε το σχεδιασμό διεπαφών, Ξεκινήστε το σχεδιασμό εμπειριών

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

Κακή διαδικασία, ακατάστατα αποτελέσματα

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

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

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

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

Αυτή είναι ακριβώς η ίδια σελίδα ιδιωτικού προφίλ που εμφανίζεται σε Android, iOS, MWeb και Web. Γιατί είναι τόσο διαφορετικό;

Χάρι στην αρμονία

Θυμάμαι τον εαυτό μου: "Πώς διαχειρίζονται, για μια ίδια σελίδα, διαφορετικά σχέδια με διαφορετικές λογικές σε διαφορετικές πλατφόρμες;". Η απάντηση είναι σχετικά απλή: δεν διαχειριζόταν.

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

Αποφασίσαμε να λύσουμε το πρόβλημά μας και η λύση που καταλήξαμε είναι πολύ απλή:

Μεταφορά του Lego στο σχεδιασμό: Τα τούβλα lego είναι τα ισοδύναμα των τούβλων των συστατικών του UI.

LEGOS! Έχετε ακούσει πιθανώς τη μεταφορά της Lego στο σχεδιασμό ήδη, τα τούβλα lego είναι τα ισοδύναμα των τούβλων των εξαρτημάτων μας. Αν πάρω ένα κιβώτιο του ίδιου Legos μπορώ να οικοδομήσω όλα αυτά ...

... ένα υδροπλάνο, ένα μυϊκό αυτοκίνητο και ακόμη και ένα γαμημένο T-Rex!

Έτσι δημιουργήσαμε μια βιβλιοθήκη UI Lego Bricks για να επιτρέψουμε στους σχεδιαστές μας να κάνουν το ίδιο! Τώρα με τα τετράγωνα μπλοκ μας ...

Δείγμα σχεδιαστές τούβλων UI χρησιμοποιεί στο BlaBlaCar.

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

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

Πόσος χρόνος πραγματικά σώσει;

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

Αυτή είναι η σελίδα που ζητήσαμε από τους σχεδιαστές μας να χτίσουν με και χωρίς τούβλα lego.

Τα χρονομετρήσαμε ενώ έκαναν το έργο και τα αποτελέσματα ήταν πραγματικά θετικά: κατά μέσο όρο θα ξοδεύουν 24 λεπτά για να χτίσουν τη σελίδα χωρίς Lego Bricks ενώ θα περνούσαν μόνο 13 λεπτά με τα Lego Bricks. Δεν λέμε ότι προσπαθούμε να επικεντρωθούμε στην παραγωγικότητα, αυτό δεν είναι το σημείο, αλλά οι σχεδιαστές μας ξόδεψαν κατά 50% λιγότερο χρόνο σκέπτοντας pixels και 50% περισσότερο χρόνο σκέπτοντας την εμπειρία και αυτό ακριβώς θέλουμε.

Δεν υπάρχει άλλη επαναλαμβανόμενη εργασία

Στο BlaBlaCar δεν είμαστε ποτέ ικανοποιημένοι και αφού χρησιμοποιήσαμε τα UI Bricks για λίγο, και βελτιώνοντάς τα με μερικές μικρές επαναλήψεις, σκεφτήκαμε "Σίγουρα μπορούμε να εξοικονομήσουμε ακόμα περισσότερο χρόνο!"

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

Ένα συστατικό = Πολλαπλές πλατφόρμες

Όλοι γνωρίζουμε πόσο ενοχλητικό είναι να οικοδομήσουμε μια σελίδα για το iOS για να την κατασκευάσουμε ξανά για το Android και το Mobile Web. Δουλέψαμε σκληρά για να δημιουργήσουμε μια βιβλιοθήκη στοιχείων που θα ήταν ίδια για κάθε πλατφόρμα, ενώ θα ήταν συμβατή με την πλατφόρμα. Τώρα, οι σχεδιαστές μας μπορούν να σχεδιάσουν μόνο για μία πλατφόρμα, ασφαλής, γνωρίζοντας ότι, για παράδειγμα, ένας προγραμματιστής front-end μπορεί να χρησιμοποιήσει ένα σχέδιο iOS ή Android για να δημιουργήσει την ίδια σελίδα για τον κινητό ιστό.

Πραγματοποιήστε συντομεύσεις

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

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

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

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

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

Οι κανόνες που ακολουθήσαμε

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

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

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

  • Μεταφορά: επιλέξτε μια ισχυρή μεταφορά για να βοηθήσετε τους ανθρώπους να καταλάβουν γρήγορα τι μιλάτε χωρίς να το εξηγήσετε. Επιλέξαμε το LEGOS αλλά υπάρχουν και άλλες ιδέες που μπορείτε να χρησιμοποιήσετε (χημεία, φόρδωση, οικολογία ...)
  • Επικοινωνία: αυτός είναι ένας σημαντικός κανόνας για το πώς να μην αποτύχει το σχέδιό σας. Επικοινωνήστε όσο το δυνατόν νωρίτερα με όλους στην εταιρεία: προγραμματιστές, PM, επιστήμονες δεδομένων, σχεδιαστές, διευθύνων σύμβουλος ... Αφήστε τους να συμμετάσχουν στο έργο.
  • Κοινή γλώσσα: οτιδήποτε δεν έχει όνομα δεν υπάρχει. Βεβαιωθείτε ότι όλοι ευθυγραμμίζονται με τα ονόματα που δίνετε στα συστατικά στοιχεία. Δεν χρειάζεται να είναι πολύ τεχνικό, το σημαντικό είναι ότι όλοι καλούν ένα συστατικό με τον ίδιο τρόπο.
  • Κανόνες: για κάθε επιλογή UI πρέπει να κάνετε έναν σαφή κανόνα. Αν δεν μπορείτε να εξηγήσετε μια επιλογή, βρείτε έναν κανόνα. (Θα μιλήσω περισσότερο για αυτό σε ένα άλλο άρθρο)
  • Δεν υπάρχουν εξαιρέσεις: Εξαίρεση είναι αυτό που μπορεί γρήγορα να σας οδηγήσει σε πλήρη ασυνέπεια. Συνεχίστε με τους κανόνες και τα σχέδια των εξαρτημάτων σας και ακόμα και αν φαίνεται αρχικά περίεργος, μην κάνετε καμία εξαίρεση. Εξαιρέσεις φροντίζουν όταν το προϊόν σας είναι πλήρως ευθυγραμμισμένο με τις οδηγίες σας.

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