Πίνακας περιεχομένου
Πώς έγινε η αλλαγή από το autocomplete στo AI SEARCH και δημιουργήθηκε ένα εργαλείο που αλλάζει τον τρόπο με τον οποίο οι designers βρίσκουν και αξιοποιούν μια ήδη υπάρχουσα εργασία.
Πέρα από το δύσκολο έργο του σχεδιασμού ενός interface, πολλοί σχεδιαστές ξοδεύουν πολύ χρόνο σε κάτι που δεν θα έπρεπε να είναι τόσο δύσκολο: στην εύρεση ενός ήδη υπάρχοντος σχεδίου.
Στη Figma, παρατήρησαν ότι οι σχεδιαστές έχαναν χρόνο προσπαθώντας να εντοπίσουν τα αρχεία πηγής όταν είχαν μόνο ένα screenshot, που αποδεικνύεται από εκατοντάδες μηνύματα στο Slack με σχεδιαστές να ζητούν βοήθεια. Γι’ αυτό εισήγαγαν την αναζήτηση με τη βοήθεια της τεχνητής νοημοσύνης στο Config 2024.
Η αλλαγή από το autocomplete στο AI Search
Σύμφωνα με τη Figma: «Πιστεύουμε ότι η τεχνητή νοημοσύνη θα πρέπει να λύσει τα βασικά μέρη της δουλειάς σας, απελευθερώνοντάς σας να κάνετε περισσότερη σκέψη και να εστιάσετε στις ανάγκες των χρηστών.
Έχοντας αυτό κατά νου, ξεκινήσαμε ένα τριήμερο hackathon AI τον Ιούνιο του 2023. Μέχρι το τέλος του, είχαμε 20 ολοκληρωμένα έργα, συμπεριλαμβανομένου ενός ιδιαίτερα φιλόδοξου με λειτουργικό πρωτότυπο: το design autocomplete. Αυτός ο βοηθός τεχνητής νοημοσύνης θα πρότεινε στοιχεία, όπως ένα κουμπί “Έναρξη” για μια ροή ενσωμάτωσης, καθώς εργάζεστε. Υπήρχε τόσο καλό μομέντουμ που το προσθέσαμε αμέσως στον οδικό χάρτη προϊόντων μας και προετοιμαστήκαμε για να το φτιάξουμε.
Το πρώτο μας βήμα ήταν να μοιραστούμε το πρωτότυπο εργασίας με εσωτερικές ομάδες και σχεδιαστές συνεντεύξεων που το χρησιμοποίησαν σε συνεδρίες έρευνας χρηστών. Καθώς επαναλαμβάναμε τη λειτουργία με βάση τα σχόλιά τους, αρχίσαμε να χτίζουμε παράλληλα τα θεμέλια της αναζήτησης AI για να την ενεργοποιήσουμε στα παρασκήνια. Γνωρίζαμε με βάση το Retrieval Augmented Generation (RAG) ότι μπορούμε να βελτιώσουμε τις εξόδους AI με παραδείγματα από την αναζήτηση. Εάν η αυτόματη συμπλήρωση σχεδίασης μπορούσε να βρει σχέδια παρόμοια με αυτά που εργαζόταν ένας σχεδιαστής, θα μπορούσε να προτείνει καλύτερα το επόμενο στοιχείο.
Καθώς επαναλαμβάναμε την αυτόματη συμπλήρωση (autocomplete) βάσει εσωτερικών σχολίων και δοκιμών, εμφανίστηκαν επαναλαμβανόμενα μοτίβα. Για παράδειγμα, όταν ξεκινούν ένα έργο, οι σχεδιαστές δεν ξεκινούν απλώς από το μηδέν, αλλά ριφάρουν συνεχώς την υπάρχουσα δουλειά. Επισκέπτονται ξανά προηγούμενες εξερευνήσεις, σκάβουν παλιές ιδέες και τις χρησιμοποιούν για να προωθήσουν τη δική τους δουλειά. Στην πραγματικότητα, το 75% όλων των αντικειμένων που προστέθηκαν στον καμβά της Figma προέρχονται από άλλα αρχεία. Το πρόβλημα είναι ότι η εύρεση αυτών των σχεδίων απαιτεί συχνά τη γνώση της οργανωτικής δομής και του ποιος έχει δουλέψει σε τι, καταναλώνοντας χρόνο και διακόπτοντας τη ροή τους. Αναρωτηθήκαμε: Είναι η αυτόματη συμπλήρωση αυτό που πρέπει να εστιάζουμε;
Πριν απαντήσουμε σε αυτήν την ερώτηση, στρέψαμε την προσοχή μας στο πώς θα μπορούσαμε να βελτιώσουμε την αναζήτηση, με βάση τις ροές εργασίας και τις συμπεριφορές των σχεδιαστών. Προσδιορίσαμε δύο βασικές ροές εργασίας για τις οποίες θα έπρεπε να επιλύσουμε: τη λειτουργία εξερεύνησης, όταν οι σχεδιαστές συλλέγουν λύσεις σε προβλήματα των χρηστών και τη λειτουργία εκτέλεσης, όταν προσπαθούν να βγάλουν κάτι στον καμβά γρήγορα.
Οι σχεδιαστές ταλαντεύονται μεταξύ αυτών των τρόπων λειτουργίας, επομένως έπρεπε να αντιμετωπίσουμε δύο βασικά ζητήματα:
- Τα design elements δεν είναι πάντα ανιχνεύσιμα στο σωστό σημείο. Το να βρεθεί κάτι στο ενδιάμεσο, όπως ένα πλαίσιο που συνδυάζει πολλά στοιχεία, θα ήταν χρονοβόρο και διατάρασσε τη δημιουργική τους ροή.
- Είναι δύσκολο να πει κανείς εάν ένα αποτέλεσμα αναζήτησης είναι σχετικό μόνο από μια μικρογραφία. Χωρίς να γνωρίζουν εάν ένα αποτέλεσμα έχει τη σωστή σχεδίαση ή την πιο πρόσφατη έκδοση, οι σχεδιαστές πρέπει να ανοίξουν το αρχείο για έλεγχο αντί να σαρώνουν γρήγορα τις μικρογραφίες.
Αυτή η έρευνα κατέστησε σαφές ότι η αναζήτηση ήταν ένα σοβαρό πρόβλημα. Ενώ η αυτόματη συμπλήρωση μπορούσε να περιμένει, η καλύτερη βελτιωμένη αναζήτηση και πλοήγηση δεν ήταν δυνατή.
Οριοθέτηση μιας προσέγγισης για το search
Γνωρίζαμε ότι χρειαζόμασταν μια εστιασμένη προσέγγιση που θα προσέφερε αξία ενώ θα μας προετοίμαζε για μελλοντικές λειτουργίες όπως το autocomplete. Η έρευνά μας έδειξε τρεις βασικές περιπτώσεις χρήσης:
- Αναζήτηση πλαισίου, στην οποία ένας σχεδιαστής προσπαθεί να βρει ένα συγκεκριμένο σχέδιο για επεξεργασία και riff
- Παραλλαγές πλαισίου, στις οποίες ένας σχεδιαστής αναζητά διαφορετικούς τρόπους για να σχεδιάσει ένα συγκεκριμένο κομμάτι UI, είτε από προηγούμενες εξερευνήσεις είτε από υπάρχοντα μοτίβα που χρησιμοποιούν εγκεκριμένα στοιχεία
- Ευρεία έμπνευση, στην οποία ένας σχεδιαστής αναζητά θεματικά παρόμοιες έννοιες και διαφορετικές προσεγγίσεις για να τους δώσει μια αρχή.
Αποφασίσαμε να ξεκινήσουμε με τις πιο κοινές ανάγκες αναζήτησης που συνδέονται με τη δημιουργία, όπως η εύρεση συγκεκριμένων σχεδίων, πριν αντιμετωπίσουμε λιγότερο συχνές περιπτώσεις χρήσης ιδεών, όπως η εξερεύνηση επιλογών κατά την έναρξη του έργου. Αυτό μας επιτρέπει να βασιστούμε στις υπάρχουσες συνήθειες των χρηστών και να μαθαίνουμε πιο γρήγορα.
Θέλαμε επίσης να αξιοποιήσουμε στοιχεία του AI Search, όπως η αντίστροφη αναζήτηση εικόνων, για να προσφέρουμε γρήγορα κάτι χρήσιμο στους χρήστες μας.
Οι προκλήσεις ενός ατέλειωτου καμβά
Γρήγορα μάθαμε ότι δεν μπορούσαμε να κάνουμε index και να αναζητήσουμε τα πάντα, καθώς θα ήταν πολύ δαπανηρό. Γνωρίζοντας ότι οι σχεδιαστές συχνά σταματούν την προηγούμενη δουλειά όταν ξεκινούν ένα νέο σχέδιο, εστιάσαμε στην εμφάνιση πλαισίων ανώτατου επιπέδου που μοιάζουν με UI σχέδια.
Αυτό που δεν περιμέναμε ήταν ότι οι σχεδιαστές οργανώνουν συχνά τη δουλειά τους σε ενότητες ή άλλα πλαίσια, καθιστώντας δύσκολο τον εντοπισμό UI σχεδίων. Το λύσαμε χρησιμοποιώντας μεθόδους, όπως την εξέταση κοινών διαστάσεων UI πλαισίου και την εξέταση πλαισίων μη κορυφαίου επιπέδου εάν πληρούσαν τις σωστές συνθήκες.
Αλλά ο εντοπισμός UI σχεδίων σε ένα αρχείο ήταν ακόμα δύσκολος.
Τέλος, έπρεπε να δημιουργήσουμε μια ιεραρχία για τα UI σχέδια μέσα σε ένα αρχείο. Χρειαζόμασταν να βγάλουμε στην επιφάνεια το πρώτο χωρίς να βυθίσουμε τα αρχειοθετημένα σχέδια. Μια γρήγορη λύση ήταν να σταματήσουμε το indexing σχεδίων μέχρι να μάθουμε ότι ένας σχεδιαστής είχε τελειώσει με τα σχέδια. Κάναμε index μόνο όταν ένα αρχείο δεν είχε υποστεί επεξεργασία για τέσσερις ώρες. Αυτή η προσέγγιση κράτησε την ημιτελή εργασία έξω από τα αποτελέσματα αναζήτησης και αύξησε τις πιθανότητες να εμφανιστούν ολοκληρωμένα σχέδια. Μείωσε επίσης το φορτίο στα συστήματά μας.
Αξιολόγηση της ποιότητας του AI για τη Figma
Για να γίνει ένα μοντέλο τεχνητής νοημοσύνης, πρέπει να μετρηθεί η απόδοσή του σε «evals», δοκιμές που καταγράφουν πόσο καλά τα καταφέρνει το μοντέλο σε μια συγκεκριμένη εργασία σε διάφορες καταστάσεις. Για εμάς, αυτό σήμαινε να ελέγξουμε την ποιότητα των αποτελεσμάτων αναζήτησης για τυπικά ερωτήματα. Επιλέξαμε τα ερωτήματά μας μιλώντας με εσωτερικούς σχεδιαστές και αναλύοντας τον τρόπο με τον οποίο οι χρήστες χρησιμοποιούσαν το πρόγραμμα περιήγησης αρχείων της Figma.
Για να καλύψει το πλήρες φάσμα των αναγκών των σχεδιαστών, η λύση μας έπρεπε να προσφέρει σχετικά αποτελέσματα σε όλους τους τομείς, από ακριβείς αντιστοιχίσεις έως εξαιρετικά παρόμοια αποτελέσματα έως κάπως διαφορετικές επιλογές.
Η έρευνά μας έδειξε ότι οι χρήστες προτιμούν να ξεκινούν με κάτι πιο κοντινό ή πιο παρόμοιο, ακόμα και όταν τελικά αναζητούν διαφορετικά αποτελέσματα. Με άλλα λόγια, αν δεν μπορούσαμε να αποδείξουμε ότι μπορούσαμε να βρούμε τη βελόνα στα άχυρα, οι σχεδιαστές δεν θα εμπιστεύονταν το εργαλείο για μια ευρύτερη εξερεύνηση.
Χρησιμοποιώντας το δημόσιο plugin API μας, δημιουργήσαμε ένα εργαλείο για τη βαθμολόγηση των αποτελεσμάτων αναζήτησης σε έναν άπειρο καμβά. Προσθέσαμε ακόμη και συντομεύσεις πληκτρολογίου για να κάνουμε την επισήμανση παιχνιδάκι.
Ο ατελείωτος καμβάς και το plugin API του Figma διευκόλυναν τις αξιολογήσεις του AI Design οπτικά. Οι εσωτερικοί χρήστες μπορούν να επισημάνουν τα αποτελέσματα ως σωστά ή λανθασμένα και να δουν εάν το μοντέλο αναζήτησής τους έχει βελτιωθεί.
Βάζοντας σε τάξη όλες τις λεπτομέρειες για το AI Search
Μόλις αντιμετωπίσαμε απρόβλεπτες προκλήσεις και καταλήξαμε στην ποιοτική προσέγγισή μας, ασχοληθήκαμε με το σχεδιασμό. Ενώ θα ήταν απλούστερο να δημιουργηθεί για μια γραμμική ροή εργασίας πραγματικότητα είναι πιο σύνθετη. Οι σχεδιαστές ταλαντεύονται μεταξύ των λειτουργιών καθώς προχωρούν από την αρχή μέχρι το τέλος.
Αντί να προσπαθούμε να μαντέψουμε σε ποια λειτουργία βρίσκονται και πότε, αποφασίσαμε ότι το Figma θα προσφέρει μια σειρά αποτελεσμάτων και θα επιτρέψει στους χρήστες να επιλέξουν αυτό που ταιριάζει περισσότερο στις ανάγκες τους. Εστιάσαμε στη δημιουργία μιας ενοποιημένης διεπαφής για τη βελτίωση των αποτελεσμάτων αναζήτησης, ανεξάρτητα από τον τύπο εισόδου. Προσθέσαμε λειτουργίες όπως φίλτρα «δημιουργήθηκαν από» και metadata—όπως ποιο αρχείο, από ποιον, πόσο πρόσφατα υποβλήθηκε σε επεξεργασία.
Καθ’ όλη τη διάρκεια της διαδικασίας σχεδιασμού, εξερευνήσαμε χιλιάδες έννοιες. Μια ιδέα που ονομάσαμε «rabbit holing» επιτρέπει στους σχεδιαστές να βουτήξουν βαθύτερα σε έναν τύπο αποτελέσματος κάνοντας κλικ σε αυτόν. Τελικά το καταργήσαμε για να διατηρήσουμε την εμπειρία αναζήτησης «Actions» απλή.
Η κυκλοφορία του AI Search
Μετά από μήνες συνεχούς ανάπτυξης και βελτίωσης, συμπεριλαμβανομένης μιας κλειστής έκδοσης beta και συνεχούς βελτίωσης με τη χρήση του eval plugin μας, ήμασταν έτοιμοι για μια ευρύτερη κυκλοφορία. Κοιτάζοντας πίσω, η πραγματοποίηση αυτού του έργου οφείλεται σε τέσσερις βασικές αρχές:
- AI για υπάρχουσες ροές εργασίας: Εφαρμόσαμε τεχνητή νοημοσύνη για να βελτιώσουμε τις εργασίες που ήδη εκτελούν οι χρήστες, όπως η περιήγηση αρχείων και η αντιγραφή πλαισίων στο τρέχον αρχείο τους.
- Γρήγορη ενημέρωση: Αποστέλλουμε συνεχώς ενημερώσεις στο περιβάλλον σταδίου μας, χρησιμοποιώντας πληροφορίες από την εσωτερική μας έκδοση beta για να βελτιώσουμε τις λειτουργίες.
- Συστηματικοί έλεγχοι ποιότητας: Αναπτύξαμε προσαρμοσμένα εργαλεία αξιολόγησης για την παρακολούθηση και τη βελτίωση της ακρίβειας των αποτελεσμάτων αναζήτησης.
- Διεπιστημονική ομαδική εργασία: Η επιτυχία μας προήλθε από τη στενή συνεργασία σε προϊόντα, περιεχόμενο, μηχανική και έρευνα.
Καθώς κοιτάμε το μέλλον, είμαστε ενθουσιασμένοι με τη δυνατότητα να αξιοποιήσουμε αυτές τις δυνατότητες αναζήτησης. Ο οδικός μας χάρτης περιλαμβάνει σχέδια για τη μεταφορά της οπτικής και σημασιολογικής αναζήτησης στην Κοινότητα της Figma.
Εστιάζοντας σε πραγματικά προβλήματα των χρηστών και βελτιστοποιώντας με βάση τα σχόλια και τα δεδομένα, έχουμε θέσει μια γερή βάση για εργαλεία σχεδίασης με τεχνητή νοημοσύνη που βελτιώνουν πραγματικά τη δημιουργική διαδικασία».
