Come creare una guida di stile: iniziare con un framework dell'interfaccia utente

Domande e risposte con UX Designer di AdRoll sul perché l'abbiamo fatto e cosa abbiamo imparato

Questo post sul blog è il primo di una serie che racconta il viaggio della guida di stile, dalla sua creazione, alla fornitura di un framework UI maturo per i nostri team, e alla fine alla distillazione di una voce e un tono unici per i nostri prodotti.

Ciao! Sono Arya Srinivasan, ricercatrice UX di AdRoll. Mi sono incontrato con Mason Lee, un designer UX che lavora sul prodotto API di annunci nativi di AdRoll, per parlare del suo lavoro nello sviluppo della guida di stile di AdRoll.

Arya: Per dare il via alle cose, perché hai iniziato il progetto di guida di stile? Qual era il problema che doveva essere risolto?

Mason: il problema era l'incoerenza di progettazione, sia tra i prodotti sia all'interno di un singolo prodotto. Ad esempio, un pulsante che dovrebbe apparire uguale ovunque, ma in realtà varia in colore, spessore del carattere e stile del bordo.

I pulsanti sembrano diversi nelle derisioni dei singoli designer e nelle nostre applicazioni.

La rapida crescita di AdRoll ci ha fatto concentrare sulla velocità. Ora siamo un'azienda più grande con più prodotti, quindi come designer credo sia importante per noi sottolineare la coerenza nel modo in cui presentiamo i nostri prodotti: attraverso la progettazione.

Per concentrarci sulla progettazione, abbiamo prima bisogno di correggere le incoerenze esistenti. I progettisti di UX qui in genere si concentrano su uno o due prodotti, quindi per convincere il nostro team a pensare al design su tutti i prodotti, ho organizzato un incontro settimanale "UI Smackdown" per discutere le linee guida dell'interfaccia utente.

In ogni incontro, abbiamo esaminato le incongruenze del design per decidere su un singolo design. Dopo alcune riunioni, i progettisti mi chiedevano ancora il colore o l'imbottitura corretti, ecc. Avevamo bisogno di un documento centrale con tutte le risposte, quindi ho creato il nostro UI Framework in Sketch come risorsa per i progettisti. Ogni volta che ci rendiamo conto che c'è un componente mancante o che vogliamo includere un nuovo componente, ne discutiamo e lo aggiungiamo al file principale dell'interfaccia utente.

Arya: Hai detto che vuoi che AdRoll sia un'azienda incentrata sul design - cosa intendi con questo?

Mason: Voglio che AdRoll metta in primo piano il design in modo che sia un differenziatore competitivo - riconosciuto dai clienti come un prodotto ben progettato che risolve davvero le loro esigenze.

Arya: Quali erano i tuoi obiettivi immediati per la guida di stile? Hai una visione a lungo termine per questo progetto?

Mason: Il mio obiettivo a breve termine è quello di avere coerenza progettuale tra i designer standardizzando i nostri componenti dell'interfaccia utente. Voglio che i designer parlino la stessa lingua quando parlano di design. Ad esempio, in un menu a discesa o modale, gli ingegneri costruiscono in base a come suggerisce il progettista. Se gli elementi di progettazione sono diversi tra i progettisti, gli ingegneri faranno lo stesso elemento in modi diversi.

Il mio obiettivo a medio termine è quello di definire questo stile nel nostro codice in "RollUp", la libreria di componenti dell'interfaccia utente interna di AdRoll. Se abbiamo un foglio di stile predefinito, tutto ciò che i nostri ingegneri devono fare è copiarlo. Designer e ingegneri possono parlare la stessa lingua.

Arya: Hai riscontrato problemi durante la creazione della guida di stile? Come li hai risolti?

Mason: uno dei maggiori ostacoli è stato ottenere il buy-in da parte delle persone attraverso i team di prodotto. Per coinvolgere tutti, ho organizzato un incontro con un elenco chiaro di argomenti all'ordine del giorno da trattare. Ho presentato incoerenze nella progettazione, come la variazione dei menu a discesa tra i prodotti. Fornire prove visive innesca conversazioni e, alla fine, le persone si preoccupano del loro prodotto e vogliono coerenza.

Un'altra sfida era decidere le regole. Quando si parla di standardizzare un componente, dovrebbe essere applicabile ovunque, in ogni contesto. Devi pensare a ogni caso limite. Il componente deve essere flessibile, ma allo stesso tempo sufficientemente completo per essere facilmente utilizzabile, consumabile e applicabile.

Ecco un esempio della flessibilità della nostra guida di stile. La nostra decisione iniziale per il riempimento in questo menu a discesa di geotargeting era troppo grande, quindi abbiamo rivisto la guida di stile per tenere conto di questo caso d'uso.Prima (a sinistra), Dopo (a destra)

Voglio davvero chiamare un'altra sfida! La denominazione può essere difficile. Come ho detto prima, desidero che progettisti e ingegneri parlino la stessa lingua, ma questo deve essere fatto con attenzione. Per qualcosa di semplice come un menu a discesa, in realtà abbiamo diverse varianti (una con caselle di controllo, un'altra con caselle di controllo e un blocco di testo e un'altra è un menu a discesa standard). Come possiamo nominare tre diversi menu a discesa in modo che ci sia una comprensione universale di quale sia?

La semantica è impegnativa; la nostra denominazione deve avere un senso. Abbiamo usato alcuni fantastici strumenti di collaborazione per ottenere un consenso quando decidiamo un nome. Ad esempio, Wake ci ha aiutato a raccogliere tutte le domande e i problemi aperti, discutere le soluzioni, monitorare le decisioni sull'interfaccia utente di Smackdown e continuare la conversazione con il team di prodotto più grande attraverso l'integrazione con Slack.

Come abbiamo usato Wake per discutere incoerenze dell'interfaccia utente e collaborare alle regole dei componenti.

Arya: C'è qualcosa di unico nell'interfaccia utente di AdRoll, che hai dovuto considerare quando hai creato la guida di stile?

Mason: La nostra dashboard è molto ricca di dati. Inoltre, il flusso di creazione della campagna offre agli inserzionisti un sacco di leve da tirare. Al fine di soddisfare le esigenze degli inserzionisti meno esperti, miriamo ad avere impostazioni predefinite efficaci. Nei nostri prodotti, i componenti hanno funzioni complesse ma sembrano semplici e facili da usare.

Arya: Ci sono alcune cose che vorresti sapere quando hai iniziato a creare la guida di stile?

Mason: Vorrei avere una comprensione più profonda di come funzionano tutti i nostri prodotti sin dall'inizio. Ad esempio, condividiamo come funzionano i nostri rispettivi prodotti nella nostra riunione di critica del design settimanale, quindi so come SendRoll (il nostro prodotto di retargeting e-mail) funziona in superficie, ma non ho la profonda conoscenza di SendRoll che fa il suo designer. Penso che la comprensione sfumata del prodotto sia sicuramente utile quando si lavora sulla guida di stile, perché ho quindi una migliore comprensione di tutti i potenziali casi d'uso.

Arya: Allora, qual è il modo migliore per raggiungere quella comprensione comune del processo di un designer e del suo prodotto?

Mason: Anche se siamo veramente concentrati sulla spedizione dei nostri prodotti, facciamo un buon lavoro nel condividere il nostro processo di progettazione nel nostro incontro settimanale di critica del design. Penso che possiamo essere più bravi a chiudere il ciclo dopo ogni incontro: in che modo il designer ha incorporato il feedback dell'incontro? Una volta che il prodotto è stato spedito e utilizzato dai nostri inserzionisti, potremmo anche condividere il modo in cui gli inserzionisti utilizzano i prodotti in base alle informazioni di analisi.

Arya: Ci sono state delle risorse a cui hai fatto riferimento mentre lavoravi a questo progetto?

Mason: Ho letto Atomic Design di Brad Frost, ho fatto ricerche online e ho parlato con altri designer UX su MeetUps. Se ritieni che una determinata azienda pratichi un buon design, è molto probabile che abbiano parlato della loro guida di stile da qualche parte online.

Arya: qual è lo stato della nostra guida di stile?

Mason: ho acquisito e rivisitato tutti gli elementi dell'interfaccia utente che utilizziamo nei nostri diversi prodotti e li ho raggruppati in basi, componenti, modelli e pagine, che serviranno come fonte di verità per i nostri progetti dell'interfaccia utente.

Puoi controllare gli elementi dell'interfaccia utente di base e componente su Dribbble. Se hai familiarità con Atomic Design, ho raggruppato i livelli di "atomo" e "molecola" in quelli che chiamo "componenti". Ad esempio, combinando il titolo del modulo e l'input è facile per gli altri progettisti copiare facilmente un modulo completo campo.

Grazie per aver letto!

Cerca questi argomenti imminenti mentre sviluppiamo la nostra guida di stile:

  • In che modo un framework UI semplifica la collaborazione
  • Sviluppo di nuovi fogli di stile basati su UI Framework
  • Come creare un sito Web della Guida di stile
  • Il viaggio alla ricerca della nostra voce e tono