Το σύστημα εικονιδίων που εξελίσσεται από την Etsy

Πώς συστηματοποίησαμε και προσαρμόσαμε τα διαρκώς υπάρχοντα μας εικονίδια

Εικονογράφηση από τον Erik Riley

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

Τα τελευταία χρόνια, η Etsy χρησιμοποίησε μια εικονική γραμματοσειρά για να εξυπηρετήσει τα εικονίδια μας στο διαδίκτυο και στο κινητό. Είναι μια διχαλωτή έκδοση του συνόλου εικονιδίων Standard Set του Symbol Oak που περιλαμβάνει ειδικά εικονίδια Etsy. Οποτεδήποτε χρειαζόμασταν ένα νέο εικονίδιο που προστέθηκε, ο Oak θα το εφάρμοσε για μας και θα μας εξυπηρετήσει μια ενημερωμένη γραμματοσειρά.

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

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

Το νέο μας σύστημα εικονιδίων

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

Το σύστημα που αναπτύξαμε περιλαμβάνει τρία μέρη:

  1. Κατευθυντήριες γραμμές για να καθοδηγούν τους σχεδιαστές σχετικά με τον τρόπο σχεδιασμού των εικονιδίων κατά τρόπο που να εξασφαλίζει συνέπεια και χρηστικότητα.
  2. Ένας οικοδόμος γραμματοσειρών εικονιδίων που δεν εξαρτάται από ένα άτομο που κατασκευάζει τη γραμματοσειρά. Παρόλο που κινήσαμε στα SVG, χρειαζόταν ακόμα μια εικονική γραμματοσειρά για τους σχεδιαστές που θα χρησιμοποιούσαν για mockups.
  3. Μια εύκολη διαδικασία για την προσθήκη νέων εικονιδίων στην παραγωγή και τη χρήση τους στον κώδικα.
Τα νέα εικονίδια Etsy, Etsicons

Κατευθυντήριες γραμμές

Πλέγμα

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

Το πλέγμα iOS7 της Apple στα αριστερά, το αρχικό μου πλέγμα στα δεξιά

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

Αρχές

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

  1. Απλές έννοιες: Μην επικοινωνείτε υπερβολικά. Περιορίστε τις έννοιες σε ένα ανά εικονίδιο. Θα πρέπει να είναι άμεσα κατανοητό.
  2. Ελάχιστη λεπτομέρεια: Η υπερβολική λεπτομέρεια αυξάνει τον κίνδυνο παρερμηνείας.
  3. Ευανάγνωστο: Σε μικρά μεγέθη, τα σχήματα μπορούν να χάσουν ορισμό ή να συνδυαστούν μεταξύ τους καθιστώντας δυσανάγνωστα. Απλά σχήματα με μεγάλη ευκρίνεια των μεγεθών των διαστημάτων.
  4. Αναλογική: Εξετάστε πώς εκφράζεται η επωνυμία Etsy μέσω των μεταφορών που επιλέγετε στα εικονίδια σας. Συχνά, οι αναλογικές μεταφορές αισθάνονται πιο Etsy από ψηφιακές.

Μοτίβα

Για να επιτύχω οπτική συνέπεια, ανέπτυξα επτά σχέδια που πρέπει να ακολουθήσω κατά το σχεδιασμό των εικονιδίων του Etsicon.

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

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

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

Εργαλείο δημιουργίας γραμματοσειρών εικονιδίων

Επειδή ούτε εγώ ούτε οποιοσδήποτε άλλος δεν ήθελε να γίνει ειδικός στο πρόγραμμα γραμματοσειράς Glyphs, έπρεπε να δημιουργήσουμε έναν οικοδόμο εικονιδίων ο οποίος ήταν εντελώς αυτοματοποιημένος. Daniel Espeset, Μηχανικός Προσωπικού στο Etsy και εργάστηκα για τη δημιουργία αυτής της διαδικασίας. Ο Daniel δημιούργησε ένα πρόγραμμα που δημιουργεί μια γραμματοσειρά εικονιδίων από ένα κοινό φάκελο SVG. Οποτεδήποτε ένα αρχείο ενημερώνεται ή προστίθεται, το πρόγραμμα εκτελείται και παράγει μια νέα έκδοση της γραμματοσειράς. Στη συνέχεια, η γραμματοσειρά μοιράζεται σε όλη την ομάδα σχεδιασμού μέσω ενός προγράμματος που ονομάζεται Self Service. Αυτή τη διαδικασία δοκιμάζουμε, αλλά ελπίζουμε να την εφαρμόσουμε σύντομα.

Εφαρμογή SVG

Το εργαλείο μας επιτρέπει στους σχεδιαστές και τους προγραμματιστές την πολυτέλεια να δημιουργούν διεπαφές χωρίς να αγγίζουν το CSS. Αυτό ισχύει και για τις εικόνες μας. Χρειάστηκε να είμαστε έξυπνοι για να δημιουργήσουμε επαναχρησιμοποιήσιμα και προσβάσιμα inline SVG που θα μπορούσαν να ταξινομηθούν και να χρωματιστούν με μαθήματα χρησιμότητας.

Για να γίνει αυτό, ξεκινήσαμε με την προσθήκη της προσαρμοσμένης ετικέτας στα πρότυπα μας. Αντικαταστήσουμε αυτόματα την ετικέτα με το markup για το σωστό εικονίδιο, όταν αποδίδει το html serveride και clientide. Για να καθορίσουμε το εικονίδιο, προσθέτουμε το όνομά του στο χαρακτηριστικό "type". Από προεπιλογή, το εικονίδιο αποκρύπτεται από τους αναγνώστες οθόνης, καθώς οι περισσότερες από τις περιπτώσεις χρήσης μας περιλαμβάνουν ένα εικονίδιο που συνοδεύεται από κείμενο. Μπορούμε επίσης να προσθέσουμε τάξεις χρησιμότητας χρώματος, μεγέθους και διαστήματα. Στο τέλος, η σήμανση μοιάζει με αυτό:

Βελτιωμένη χρηστικότητα

Αυτή τη στιγμή βρισκόμαστε στη διαδικασία μετατροπής όλων των εικονιδίων μας στα νέα Etsicons. Αυτό θα πάρει κάποιο χρονικό διάστημα καθώς υπάρχουν πολλά εικονίδια σε όλες τις εφαρμογές μας. Αλλά έχουμε δει ήδη βελτιώσεις χρηστικότητας όπου έχουν ενημερωθεί. Τα εικονίδια στην εφαρμογή Buy on Etsy είναι ένα από τα πρώτα μέρη που εφαρμόσαμε στο Etsicons. Ήμασταν ευχάριστα έκπληκτοι που το θεώρησαν με θετικό τρόπο μετρήσεις όπως add-to-cart και μετατροπή.

iOS Αγορά με την εφαρμογή Etsy με νέα εικονίδια. Σχεδίαση απόδοσης

Βελτιωμένη διαδικασία

Στον Canon, ο Massimo Vignelli γράφει με ευχαρίστηση ότι οι κανόνες είναι επιτακτικοί για τη χρήση και την κατανόηση μιας γλώσσας.

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

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

Πόροι

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

Κατανόηση των κόμικς

Μια σύντομη ιστορία της εικονογραφίας

Εικονίδιο Ευχρηστία

Δοκιμές Ευχρηστίας των Εικόνων

Εικονίδια σχεδίασης υλικών

Εικονική γραμματοσειρά SVG σε εικονίδιο

Χρήσιμα εργαλεία SVGO [ptimization]

Δημιουργία του διακόπτη μακριά από τις γραμματοσειρές Icon στο SVG: Μετατροπή εικονιδίων γραμματοσειρών σε SVG

Σοβαρά, μην χρησιμοποιείτε γραμματοσειρές εικονιδίων