Επανασχεδιασμός του Pinterest, μπλοκ με μπλοκ

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

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

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

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

  1. Το UI μας ήταν ασυνεπές
  2. Το οπτικό μας σύστημα ήταν γεμάτο
  3. Το μάρκετινγκ μας αισθάνθηκε αποσυνδεδεμένο από το προϊόν μας

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

Όπως αποδεικνύεται, είναι δύσκολο να σχεδιάσετε σταθερά και όμορφα πράγματα σε κλίμακα.

Ένα θέμα αρχών

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

Έχω υποχωρήσει σε μια σκοτεινή γωνία του υπογείου του Pinterest και πέρασα τις επόμενες εβδομάδες παίζοντας με σχέδια. Δεν ήμουν ούτε σίγουρος τι έκανα από την αρχή - βασικά ήταν σαν τη δική μου μεγαλόπρεπη εκδοχή χτυπώντας μπλοκ μαζί. Άρχισα να ασχολούμαι με ερωτήσεις όπως: Γιατί αγαπούν τους Pinterest; Τι κάνει το προϊόν μας μοναδικό; Ποια είναι η προσωπικότητά μας; Τι είμαστε όλοι μας;

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

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

-

  1. Διαυγής

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

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

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

2. Κινούμενα

Είναι πολύχρωμο
Η προσωπικότητα είναι τολμηρή και ξεχωρίζει.

Είναι οπτικά απόκριση
Οι εμπειρίες αλληλεπιδρούν με φυσικό τρόπο.

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

3. Άθραυστο

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

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

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

-

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

Τα βασικά

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

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

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

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

Οι πρώτες εξερευνήσεις και ιδέες

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

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

Σχεδιάζοντας ένα νέο σύνολο προτύπων

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

Θέλαμε να ξεκινήσουμε με ένα περιορισμένο σύστημα, γι 'αυτό αποφασίσαμε να αντιμετωπίσουμε πρώτα την εφαρμογή iOS μας. Για το πρώτο μας πέρασμα, εστιάσαμε στον οπτικό σχεδιασμό - η αναδιαμόρφωση της αρχιτεκτονικής των πληροφοριών θα έρθει αργότερα. Μπορείτε να διαβάσετε τα πάντα σχετικά με τον επανασχεδιασμό του iOS και την επαναδημιουργία του συντονισμένου backend στο WIRED.

Μαζί με τον επανασχεδιασμό της εφαρμογής, δημιουργήσαμε επίσης αυτό που καλούμε τα πρότυπα σχεδιασμού προϊόντων της Pinterest, τα οποία περιλαμβάνουν:

Σύστημα-Σχήματα, τυπογραφία, χρώματα, πλέγματα
Δομή - Η διάταξη των εξαρτημάτων
Περιβάλλον - Όλα τα μικρά κομμάτια του κόσμου που σχεδιάζουμε

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

Παρακάτω είναι μερικοί από τους τρόπους με τους οποίους τα νέα πρότυπα σχεδίασης έχουν διαμορφωθεί σε όλο το Pinterest.

Η επική ομάδα που το έκανε να συμβεί

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

Είχαμε επίσης μια μικρή ομάδα σχεδιαστών ρωγμών (Annie Teng, Jay Marsh, Kimberly Fellman, Linus Wahlstedt, Long Cheng, Patrik Goethe, Rick Chatas, Susan Kare, Tom Watson, Woosung Kang) που συνεργάστηκαν μαζί μου και τους καταπληκτικούς μηχανικούς μας να επαναλάβετε μαζί τις αποφάσεις σχεδιασμού, να βρείτε τις σωστές μεταβάσεις και καμπύλες, να κάνετε πρωτότυπα διαφορετικές χειρονομίες και ούτω καθεξής. Αυτό ήταν πραγματικά το καλύτερο μέρος της διαδικασίας. Η εργασία σε ομάδες, ενσωματώνοντας ανατροφοδότηση από πολλαπλές προοπτικές (μια διαδικασία γνωστή στο Pinterest ως "πλέξιμο") έκανε τα αποτελέσματα εκθετικά ισχυρότερα. Είχαμε επίσης πολύ διασκέδαση.

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

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

Ελπίζω να είστε τόσο ενθουσιασμένοι όσο είμαστε για το πού θα καταλήξουν όλοι.

-

Χάρη στον Αδάμ Μπαρτον, Άλλεν Ουίλιαμς, Άρλαντ Τζαντζάιγκ, Άντινα Μπράμπανκ, Όστιν Τσανγκ, Όρντιν Λούντεν, Μπιλ Κούντς, Μπρεντάν Ράιαν, Μπιν Λιού, Χρι Ντάνφορντ, Τσανγκσού Λιου, Τσούνιαν Γουάνγκ, Ο Evany Thomas, ο Huy Nguyen, ο Frank Fumarola, ο Γκαρέτ Μουν, ο Γιώργος Λιού, ο Γκόρντον Τσεν, ο Τζέισον Κόστα, ο Τζέφ Φέρις, ο Τζένη Λιού, ο Τζον Μιλινόβιτς, ο Ιούνιος Άντριους, ο Λέον Λιού, , Maura Lynch, Max Gu, Μιχάλης Σπίντερ, Νικολέ Χέτλεϊ, Νίπουν Μαλόθρα, Ραχούλ Μάλι, Ρίκι Κανκρό, Ροσί Σαντιάγκο, Ρόμι Φάιντ, Σαμουήλ Χσιούνγκ, Σκοτ ​​Βίκινγκ, Σέιτ Βαϊσφελντ, Στίβεν Ράμκουμαρ, Qu, Wendy Lu, Yu Yang, Yuchen Liu, Yuliang Lin, Γιουνάν Γου για να συμβεί αυτό.

-

Αντρέας