Kuinka luoda tyyliopas: Aloita käyttöliittymästä

Kysymyksiä ja vastauksia AdRollin UX-suunnittelijan kanssa siitä, miksi teimme sen ja mitä opimme

Tämä blogi on ensimmäinen sarjassa, joka kuvaa tyylioppaan matkaa sen luomisesta tiimien kypsän käyttöliittymäkehyksen tarjoamiseen ja lopulta tislaamaan tuotteillemme ainutlaatuisen äänen ja sävyn.

Hei! Olen Arya Srinivasan, AdXr: n UX-tutkija. Istuin Mason Lee: n, UX-suunnittelijan, joka työskentelee AdRollin alkuperäisten mainosten sovellusliittymätuotteen kanssa, kanssa puhua hänen työstään AdRoll-tyylioppaan kehittämisessä.

Arya: Miksi aloitit tyyliopasprojektin aloittaaksesi asiat? Mikä oli ongelma, joka vaati ratkaisua?

Mason: Ongelmana oli suunnittelun epäjohdonmukaisuus, sekä tuotteiden välillä että yhden tuotteen sisällä. Esimerkiksi painikkeen, jonka pitäisi näyttää samalta kaikkialta, mutta joka todellakin vaihtelee väriltään, fontin painolta ja reunustyyleiltä.

Painikkeet näyttävät erilaisilta yksittäisten suunnittelijoiden pilkoissa ja sovelluksissamme.

AdRollin nopea kasvu merkitsi, että keskityimme nopeuteen. Olemme nyt suurempi yritys, jolla on useita tuotteita, joten suunnittelijana uskon, että meidän on tärkeää korostaa johdonmukaisuutta tuotteidemme esittelyssä: suunnittelun kautta.

Suunnitteluun keskittymiseen meidän oli ensin korjattava olemassa olevat epäjohdonmukaisuudet. Täällä olevat UX-suunnittelijat keskittyvät tyypillisesti yhteen tai kahteen tuotteeseen, joten perustamaan viikoittaisen ”UI Smackdown” -kokouksen keskustelemaan käyttöliittymän ohjeista, jotta ryhmämme ajattelee kaikkien tuotteiden suunnittelua.

Jokaisessa kokouksessa tarkastelimme suunnittelun epäjohdonmukaisuuksia päättäästä yhdestä mallista. Muutaman kokouksen jälkeen suunnittelijat kysyivät minulta oikeita värejä tai pehmusteita jne. Tarvitsimme keskitetyn asiakirjan, johon sisältyy kaikki vastaukset, joten rakensin UI-kehyksen Sketchissä suunnittelijoiden lähteeksi. Aina kun huomaa, että puuttuu komponentti tai haluamme sisällyttää uuden komponentin, keskustelemme siitä ja lisäämme sen master UI Framework-tiedostoon.

Arya: Mainitsit, että haluat AdRollin olevan suunnittelukeskeinen yritys - mitä tarkoitat sillä?

Mason: Haluan, että AdRoll asettaa suunnittelun eturintamaan, jotta se olisi kilpailukykyinen erottaja - jonka asiakkaat tunnustavat hyvin suunnitelluksi tuotteeksi, joka todella ratkaisee heidän tarpeensa.

Arya: Mitkä olivat välittömät tavoitteesi tyylioppaan suhteen? Onko sinulla pitkän aikavälin visio tälle projektille?

Mason: Lyhyen aikavälin tavoitteeni on saada suunnittelun johdonmukaisuus suunnittelijoiden välillä standardisoimalla käyttöliittymäkomponentit. Haluan suunnittelijoiden puhua samaa kieltä suunnittelusta puhuttaessa. Esimerkiksi, modaalissa tai pudotusvalikossa insinöörit rakentavat suunnittelijan ehdotuksen perusteella. Jos suunnitteluselementit ovat erilaisia ​​suunnittelijoiden välillä, insinöörit tekevät saman elementin eri tavoin.

Keskipitkän aikavälin tavoitteeni on, että tämä tyyli määritetään koodissamme "RollUp" -kohdassa. AdRoll: n sisäinen käyttöliittymäkomponenttikirjasto. Jos meillä on ennalta määritetty tyylisivu, kaikkien insinööridemme täytyy tehdä se kopioida se. Suunnittelijat ja insinöörit voivat puhua samaa kieltä.

Arya: Onko sinulla ongelmia luotaessa tyyliopasta? Kuinka ratkaisit ne?

Mason: Yksi suurimmista esteistä oli buy-inin hankkiminen ihmisiltä tuotetiimeiltä. Jotta kaikki olisivat mukana, perustin kokouksen, jossa oli selkeä luettelo esityslistan aiheista. Esitin suunnittelun epäjohdonmukaisuuksia, kuten erilaiset pudotusvalikot tuotteiden välillä. Visuaalisen näytön antaminen laukaisee keskustelut, ja lopulta ihmiset välittävät tuotteestaan ​​ja haluavat johdonmukaisuuden.

Toinen haaste oli sääntöjen päättäminen. Kun puhutaan komponentin standardisoinnista, sitä tulisi soveltaa missä tahansa, kaikissa tilanteissa. Sinun on ajateltava jokaista reunatapausta. Komponentin on oltava joustavaa, mutta samalla ominaisuus-riittävän täydellistä, jotta se on helppo käyttää, kuluttaa ja soveltaa.

Tässä on esimerkki tyylioppaamme joustavuudesta. Alkuperäinen päätöksemme täytöstä tässä geotargeting-pudotusvalikossa oli liian suuri, joten muutimme tyyliopasta tämän käyttötavan huomioon ottamiseksi.Ennen (vasen), jälkeen (oikea)

Haluan todella kutsua vielä yhden haasteen! Nimeäminen voi olla vaikeaa. Kuten aiemmin totesin, haluan, että suunnittelijat ja insinöörit puhuvat samaa kieltä, mutta tämä on tehtävä huolellisesti. Jollei niin yksinkertaiselle kuin pudotusvalikolle, meillä on tosiasiallisesti useita muunnelmia (toisessa valintaruudut, toisessa valintaruudut ja tekstilohko ja toinen on tavallinen pudotusvalikko). Kuinka nimetä kolme eri pudotusvalikkoa, jotta ymmärretään, mikä on mikä?

Semantiikka on haastavaa; nimeämisen on oltava järkevää. Käytimme hienoja yhteistyövälineitä yksimielisyyden saavuttamiseksi nimeä päätettäessä. Esimerkiksi Wake auttoi meitä keräämään kaikki avoimet kysymykset ja kysymykset, keskustelemaan ratkaisuista, seuraamaan UI Smackdown -päätöksiä ja jatkamaan keskustelua suuremman tuotetiimin kanssa integroimalla Slackiin.

Kuinka Wake-keskusteluilla keskusteltiin käyttöliittymän epäjohdonmukaisuuksista ja yhteistyöstä komponenttisääntöjen kanssa.

Arya: Onko AdRollin käyttöliittymässä jotain ainutlaatuista, joka sinun oli otettava huomioon luomalla tyyliopasta?

Mason: Kojelauta on erittäin raskas. Lisäksi kampanjan luontivirta antaa mainostajille joukon vipuvapaita. Vähemmän kokeneiden mainostajien tarpeiden tyydyttämiseksi pyrimme olemaan tehokkaat oletusasetukset. Tuotteissamme komponenteilla on monimutkaisia ​​toimintoja, mutta ne näyttävät yksinkertaisilta ja helppokäyttöisiltä.

Arya: Onko joitain asioita, joita haluat tietää kun aloitit tyylioppaan luomisen?

Mason: Toivon, että minulla olisi syvällisempi käsitys siitä, kuinka kaikki tuotteemme toimivat alusta alkaen. Esimerkiksi, jaamme sen, kuinka tuotteemme toimii viikoittaisessa suunnittelukriitikokokouksessa, joten tiedän, kuinka SendRoll (sähköpostin jälkikäsittelytuotteemme) toimii pinnalla, mutta minulla ei ole SendRollilla syvää tietoa, jota suunnittelija tekee. Uskon, että tuotteen vivakattu ymmärtäminen auttaa ehdottomasti työskentelemään tyylioppaan kanssa, koska minulla on sitten parempi käsitys kaikista mahdollisista käyttötapauksista.

Arya: Mikä on paras tapa saavuttaa yhteinen käsitys suunnittelijan prosessista ja hänen tuotteesta?

Mason: Vaikka olemme todella keskittyneet tuotteidemme lähettämiseen, teemme hyvää työtä jakaaksesi suunnitteluprosessimme viikkomallikritiikkikokouksessamme. Mielestäni voimme paremmin sulkea silmukan jokaisen kokouksen jälkeen - kuinka suunnittelija sisällytti kokouksen palautteen? Kun mainostajamme lähettävät tuotteen ja käyttävät sitä, voimme myös jakaa, kuinka mainostajat käyttävät tuotteita analytiikan havaintojen perusteella.

Arya: Oliko olemassa resursseja, joihin viittasit työskennellessäsi tämän projektin aikana?

Mason: Luin Brad Frostin Atomic Design -tapahtumaa, tutkisin verkossa ja puhuin muiden UX-suunnittelijoiden kanssa MeetUpsissa. Jos luulet tietyn yrityksen käyttävän hyvää suunnittelua, on todennäköistä, että he ovat puhuneet tyyliopastaan ​​jossain verkossa.

Arya: Mikä on tyylioppaamme tila?

Mason: Olen vanginnut ja tarkistanut kaikki käyttöliittymäelementit, joita käytämme eri tuotteissamme, ja ryhmitellin ne perustaksi, komponentiksi, kuvioksi ja sivuksi, jotka toimivat totuuden lähteenä UI-malleillemme.

Voit tarkistaa perustaavan ja komponenttiliittymän elementit Dribbblessa. Jos olet perehtynyt atomisuunnitteluun, ryhmittelin atomi- ja molekyylitasot niin kutsuttuihin komponentteihin. Esimerkiksi yhdistämällä lomakkeen otsikko ja syöttö helpottavat muiden suunnittelijoiden helppoa kopioida täytetty lomake ala.

Kiitos lukemisesta!

Varo näitä tulevia aiheita kehitettäessä tyylioppaamme:

  • Kuinka käyttöliittymäkehys yksinkertaistaa yhteistyötä
  • Kehitetään uusia tyylitaulukoita käyttöliittymäkehyksen perusteella
  • Kuinka luoda Style Guide -sivusto
  • Matka ääni- ja ääniomme löytämiseen