Viimeisten neljän vuoden aikana olen suunnitellut kojelaudat ja sovellukset, ja olen oppinut käsittelemään eri osastoja ja hyödyntämään tietämystään, jotta tuotesuunnittelu tehostuu.

Tänään aion jakaa kaikki vaiheet, jotka olen rakentanut päivittäiseen rutiiniini, ja uskon, että olen tehnyt minulle paremman suunnittelijan.

Esikäsittely-

1. Hanki mahdollisimman paljon tietoa (pyydä kolmea esimerkkiä)

Mikään ei anna minulle selkeämpää kuin nähdä todellinen esimerkki. Kun työskentelen uuden asiakkaan tai uuden tuotteen aloitussivulla, mielestäni helpoin lähtökohtana on pyytää asiakkaalta kolme tai neljä inspiroivaa sivua, koska se todella auttaa molempia osapuolia. Asiakkaan vieminen ideoihin pöydälle antaa sinulle mahdollisuuden helposti ymmärtää, mitä he pitävät ja mitä he odottavat lopullisesta suunnittelusta.

Jos työskentelet useiden ryhmien kanssa, sinun on pyrittävä viettämään yhtä paljon aikaa tuotteen kehittäjien kanssa kuin suunnittelija kollegoillesi. Olen oppinut, että avain tehokkaaseen suunnittelupäätökseen on varmistaa, että puhut Dev-tiimin kanssa niin paljon kuin pystyt. Minun tapauksessani on ollut tapauksia, joissa löydettiin ratkaisu ongelmaan, jota en voinut keksi itse.

Tavoitteena on poistaa mahdollisimman monta kysymystä ennen kuin siirryt kehitykseen.

2. Opi henkilöistä

Aluksi minun on sanottava, että olin epäilevä henkilöistä, mutta nyt minulla on järkevää minulle.

Joten äärimmäisen ristiriidassa vanhempaan prosessiin näen, kuinka persoonallisuus on erittäin tärkeä tuoteominaisuuksissa, varsinkin kun ratkaisussa on monia erilaisia ​​reuna-asioita. Se auttaa sinua ymmärtämään, kuka sinä todella suunnittelet. Pyrin noin neljästä viiteen henkilöön.

3. Määritä täsmälliset tavoitteet - mitä tarkalleen meidän pitäisi seurata?

Mielestäni suurin osa suunnittelijoista / asiakkaista sivuuttaa tämän vaiheen, mutta molempien osapuolten suunnittelun tärkeimpiä näkökohtia on ymmärtää suunnitellun tuotteen tavoitteet. Meillä on taipumus hypätä suoraan pikseleihin ja nopeasti kopioida projektin käyttöliittymä. Jos kyseessä on uusi sivusto tai uusi ominaisuus, varmista, että asetat selkeät tavoitteet, jotka haluat saavuttaa ensin.

Koska kaikki on seurattavaa, kerro tarkat kohdat, jotka aiot seurata. Esimerkiksi nämä voivat vaihdella uusista rekisteröityneistä asiakkaista useisiin asiakkaisiin, jotka käyttävät Paypalia tai ostoksia luottokorteilla. Varmista aina, että tiedät kuinka korkealle tavoitat alussa!

(Tällöin tarvitset Mixpanelin kanavien määrittämistä tässä prosessissa.)

4. Aseta projektikansio ja aloita moodboardin rakentaminen

On paljon sivustoja inspiraatiota - Dribbble , Behance , Pttrns jne. Se on todella helppo löytää samankaltaisia ​​hankkeita kuin olet työskennellyt. Lisäksi voi olla jo ratkaisu ongelmiin, jota sinulla on ja jonka yrität ratkaista.

Kun aloitan uuden projektin tekemisen, asen aina kansion, jossa on kansioita nimeltä Source Files , Screens & Export , Inspiration & Resources . Säästän kaiken mitä löydän Internetistä Inspiration-kansioon voidakseni käyttää sitä myöhemmin luoda perusmoodoodeja. Tämä kansio voisi olla täynnä mitään plugins, mallit tai jopa täysi tapaustutkimuksia Behance.

Mennään vähän uskollisuutta

5. Valkotaulu

Jos haluamme lisätä uuden ominaisuuden tai uudistaa prosessin, istumme alas ja kaikki kokouksessa alkaa piirtää ideoita taululle, paperille tai jopa iPadille. Tämän toiminnon ansiosta voimme laittaa kaikki ryhmän suunnittelijalle. Myöhemmin päädymme kahteen suunnitteluvaihtoehtoon nähdäksesi mikä toimii parhaiten.

Pyrimme aina kokeilemaan koko kokemusta ja keskustelemaan useimmista reuna-asioista tämän prosessin osan aikana. On todella tärkeää käsitellä niitä nyt, toisin kuin suunnitteluvaiheessa tai vielä pahempaa, kehitysvaiheen aikana. Silloin voit menettää paljon aikaa ja energiaa.

6. Karttaa kaikki näytöt (mitä tietoja käyttäjä tarvitsee syöttää)

Tämä on aika siirtyä taululle ja luetella kaikki käyttäjän panokset ja tarinat. Kirjoita, mitä tarkalleen käyttäjän tulee lisätä tietylle näytölle ja miten käyttäjä voi saavuttaa halutut tavoitteensa.

7. Kirjoita kaikki mahdolliset tilat

Koska kaikki hallintapaneelit, sovellukset tai verkkosivustojen muodot ovat erilaisia, tämä on toinen tärkeä askel, jota sinun ei pidä unohtaa.

Suunnittelun aikana meidän on varmasti vastattava kaikkiin niihin. On hienoa saada kiiltävät kuvaajat ja viileät profiilikuvat Sketch-tiedostoistamme tai PSD-tiedostoihimme. Todennäköisesti käyttäjät näkevät sovelluksen vastakkaisen puolen. Varsinkin kun he tulevat tuotteeseesi. On välttämätöntä olla valmis. Alla on esimerkki siitä, miten käsitellään tyhjiä tiloja yhdessä tietomateriaaleissamme.

05

8. Valmista ensimmäinen kaaviosi

Kaikki tämä johtaa lopulliseen osaan uskollisuudesta. Valkotaulun tuloksen ansiosta tiedämme nyt kaikki mahdolliset valtiot, käyttäjän panokset ja tavoitteet. Yhteenvetona kaikki vuorovaikutukset Luo kaavion ja olemaan rehellinen Olen muuttanut tyylin tekemällä tätä monta kertaa: Siirtyminen Sketch-tiedostoista rasteroitujen ulkoasujen kanssa vain suorakulmioiksi, jotka symboloivat jokaista sivua alla olevilla nimillä. Sanottiin, että prosessi oli aina tuskallista, päädyin yleensä tilanteeseen, jossa haluamme muuttaa tai lisätä jotain myöhemmin prosessissa. Näiden ratkaisujen kanssa olen yleensä pakotettu tekemään monia muita vaiheita; kuten rivien, nuolten ja kuvien paikkojen muuttaminen.

Äskettäin olen käyttänyt Camunda Modeler , joka ei ole aivan suunnittelutyökalu; se on yksinkertainen sovellus teknisten kaavioiden luomiseen. Mitkä äänet ovat outoja, mutta tämä sovellus on kehitetty auttamaan sinua luomaan perusdiagrammeja. Tärkeintä on, että kaikki luotu on täysin skaalautuva. Voit helposti vetää ja pudottaa minkä tahansa pisteen ja se luo automaattisesti linjat ja nuolet sinulle. Voit myös valita eri tyyppisistä pisteistä, jotka voivat olla hyödyllisiä korostettaessa, kun esimerkiksi käyttäjä saa Intercomiltä sähköpostia. Camunda vie SVG: n, mikä tekee siitä helppoa värikäsitettävien pisteiden sketchissä.

06

Työ / suunnittelu

9. Moodboard

Olen voinut aloittaa tunnelman luomisen, kun kerään kaikki kuvat Inspiration-kansiooni. Käytän mielialalevyjä lähinnä keskustelemaan ajatuksistani kollegoiden kanssa ja kuvaamaan joitain visuaalisia ideoita, ennen kuin aloitan pikseliprosessin kanssa.

07

10. ensimmäinen luonnos

Suunnittelu on aina jatkuva prosessi. Menet iteraatiota paljon matkalla erinomaiseen tulokseen. Kun ensimmäinen luonnos on myös tapa kerätä palautetta. Sinun ei tarvitse tulla pikselin täydelliseen muotoiluun, jotta saisit palautetta palautteestasi joukkuetovereilta, asiakkailta tai mahdollisilta käyttäjiltä. Jotta saataisiin ensimmäiset ajatukset ja aloittaa keskustelu, olen yleensä sekoittunut nykyisistä malleistamme. Tämä antaa meille mahdollisuuden aloittaa pelaaminen todellisella näköisellä mallilla alle päivässä. Voit tehdä ensimmäisen yksinkertaisen prototyypin testaamaan, jos asiat yhdistyvät hyvin yhteen.

11. Kirjoita kopio

Kopiointi on yksi käyttäjien päätösten keskeisistä näkökohdista ja otan sen tärkeäksi osaksi suunnittelua. Ei ole mitään pahempaa kuin mukava muotoilu, jossa hämmentävät dialogit, joissa käyttäjät kamppailevat löytämään seuraavan vaiheen.

12. Ensimmäinen sisäistesti

Ensimmäisellä luonnoksella voit nopeasti luoda prototyypin sisään ihme tai Invision . Tämä on jotain, jonka aloin tehdä äskettäin ja käy ilmi, että se on toinen uskomaton vahvistus. Prototyypin avulla voit helposti muodostaa puhelun kolmella tai neljällä ihmisellä tiimistäsi ja jakaa prototyypin linkin heidän kanssaan ja yrittää esittää muutamia kysymyksiä ja testata niitä tietyillä virroilla / skenaarioilla.

Tällä tavoin voit helposti testata kyseenalaistamisosaamisesi ja testata tosiasiallisesti suunnittelupäätöksiä todellisilta käyttäjiltä huolimatta hukkaan menneistä resursseista ja ajasta. Minulla on tapana valita ihmisiä, jotka eivät ole kovin paljon mukana kojelaudan kehittämisessä. Yritä myös välttää katsomassa jotakuta, jolla on jo ollut mahdollisuus pelata prototyypin kanssa aiemmin.

13. Etiketti

Me kaikki tiedämme, kuinka vaikeaa on siistää. Kuinka toimittaa vielä yksi ominaisuus. Tämä johtaa yleensä sotkuiseen Sketch- tai PSD-tiedostoihin. Olen oppinut paljon eroista työskentelystä yhtenä suunnittelijana käynnistyessä, työskentelemässä tiimeissä tai työskentelemässä omissa digitaalisissa tuotteissani.

Kun työskentelet tiimissä, ajattele PSD: istäsi, kuten luodessasi niitä jollekin toiselle. Käytän sääntöä, että jos sinulla on yli 8 kerrosta kansiossa, luo uusi.

08

Löysin yhden loistavan plugin Sketchille, joka säästi minulle tunteja, kun työskentelin UI-sarjoillani: Nimeä se uudelleen .

Vinkki: Aseta kaikki kankaalle. Olen aina yrittänyt suunnitella mukavia otsikoita, kun taas muut kankaat olivat valkoisia. Suunnittelun aikana opin kaiken sisältöä ensin - pelata vain layoutin ja typografian avulla. On paljon helpompaa suunnitella hienoja yksityiskohtia ja pelata koko konseptia sisällön kanssa.

14. Luo käyttöliittymän elementit ja aloita leikki Legon kanssa

Olen todennäköisesti myöhässä puolueelle ja tämä on jo ääni vanhentunut, kun kirjoitan sen. Syy, miksi emme ole tehneet minkäänlaista langankoristelua matkan aikana, on yksinkertainen. Sketch 39: ssä tulee jotain, mitä olen löytänyt uskomattomalta ja joka on "muotoja, joiden kokoa on muutettu". Tämä tekee suunnittelusta helppoa kaikille joukkueelle. Sketch-tiedostomme on puhdas vedä ja pudota nyt. Voit helposti antaa jollekin joukkuetovereillesi tyhjä kangas ja he voivat luoda lähes uskollisia luonnoksia. Tämän ansiosta voimme ohittaa kaikki wireframe-työkalut ja aloittaa lähes todellisilla pikseleillä.

Tämä myös kulkee käsi kädessä, kun voimme todella muuntaa rautalangat todellisiksi malleiksi. Jokainen PM voi luoda rautalangan ja sitten voin helposti ottaa sen yli ja muuttaa hiihdin.

09

Omaisuus ja toimitus

Kun olet valmis suunnittelemaan ja toistamaan ensimmäisen palautteen perusteella, et ole vielä tehnyt. Nyt tulee aika luovuttaa mallit teidän insinööreille / suunnittelijoille.

15. Tekniset tiedot

Yksi tärkeimmistä tavoitteistani on aina pystyä kommunikoimaan päätökseni tiimin kanssa ja pystymään vähentämään kehittäjiemme vaikeuksia niin paljon kuin voin, jotta voimme tarjota heille mahdollisimman hyvät resurssit. Tämä minulle on ehdottomasti tärkein osa työni suunnittelijana.

Koska dokumentoituimme kaiken vuorovaikutuksen ja olemme valmiita prosessimme alusta, luomalla silmälasit on pala kakusta. Minulla on taipumus kirjoittaa teknisiä tietoja Google-dokumentteihin tai Sketch-tiedostojen näytöissä. On mukavaa käsitellä malleja selityksillä kaikista ominaisuuksista, jotta kukaan voi tarttua tiedostosi tulevaisuudessa.

16. Kaavio

Tämä tekniikka on mukava tulostaa malleja ja keskustella niistä tiimin kanssa. Mutta nykyään mielestäni on parempia vaihtoehtoja. Sellaista kuin valmis lopullinen prototyyppi.

10

17. Lopullinen prototyyppi

Yksi tärkeimmistä asioista minulle on aina oltava vuorovaikutus valmiina prototyypissä. Minulla yleensä päätyy 3-5 prototyyppiä matkalla lopulliseen näihin pieniin istuntoihin joukkuetovereiden kanssa tai näyttämään tiettyjä virtauksia. Minulla on taipumus valmistella kaikki valtiot Sketchissä yhdessä taulunäytöksessä ja sitten kopioida nämä taulutartikkelit, jotta jokainen valtio on valmis vientiä varten.

On hienoa lisätä kommentteja osioihin malleista laajentaa määrittelyäsi paljon enemmän, jotta jopa copywriter voi helposti käydä ja tarkistaa todellisia pikseleitä ja virtaa, jos jokainen kopiointi ja valintaikkuna toimivat tarpeen mukaan.

18. Quicktime Video> Huomautuksia

Kun en esitä tavaraa Hangoutissa tiimille tai asiakkaalle, lähetän näytön videon minulle läpi prototyypin ja selittää kaiken, mitä olen suunnitellut. Minulle on hieno vahvistus ennen esittelyä, että tiedän vastauksen mihinkään kysymykseen ja mahdollisiin mielikuvituksellisiin vuorovaikutussuhteisiin, jotka olen päättänyt suunnitella. Voidaan myös käyttää hienosti työskennellessä etärykeissä. Jokaisella on mahdollisuus toistaa koko vuorovaikutusajattelua milloin tahansa.

19. Animaatio

Kiva lopullinen kosketus voi käyttää Jälkivaikutukset tai Periaate . On hyvä selittää, miten haluat tämän tai sen liikuttavan.

20. Styleguide

Toinen ratkaiseva merkitys insinööreille on tietää, miten asiat reagoivat eri skenaarioissa. Ajattele virheilmoituksia tai näytä virheilmoituksia. Vastaavasti miten lähetyspainikkeen vammaisasema näyttää, missä laittaa spinner jne.

Se on erittäin helppokäyttöinen, jotta insinöörit siirtyvät Symbols-taulun ja tyylielementtien läpi yksitellen ennen kuin he alkavat koodata kaikki näytöt, koska Sketch-tiedosto on Lego-lohko.

11

Lopullinen testaus

Koska olemme valmiit luovuttamaan mallimme insinööreille, pystymme keskittymään prosessin viimeiseen osaan - testaamaan päätöksiämme!

21. Inspectlet / HotJar

Kun mallit muuttuvat työkoodiksi, älä unohda sisällyttää Inspectlet tai HotJar JS-katkelmat. Olen aina innoissani (tai turhautuneelta) nähdäksesi, miten käyttäjät käyvät läpi hallintapaneelimme tai mitä he tekevät portfolion sivulla. Inspectlet on hämmästyttävä kaapata kaikki käyttäjän istunto. Sopii myös suurempia projekteja varten.

Siinä on helppo "/ sivu" suodatus, joka auttaa sinua katselemaan tietyn ominaisuuden tai virran istuntoja.

22. Mixpanel

Mixpanel toimii erinomaisesti tavoitteidemme validoimiseksi (ne, jotka asetimme prosessimme alussa). Mixpanel auttaa näkemään kuinka monta käyttäjää täyttää tietyt virrat. Kuinka monta käyttäjää on laskenut ennen tilin määrittämistä. Kuinka moni ihminen meni tärkeimmästä aloitussivusta tallentaa ja arvokkain tuotteemme.

23. Google Analytics

En voi koodata suuria asioita, mutta ainakin voin työskennellä CSS-tiedostoilla ja yksinkertaisella koodilla. Viime aikoina olen kiinnostunut näkemään, mistä käyttäjät napsauttavat ja katselevat Hotjar-lämpöpöytiä, joten olen päättänyt perustaa myös perusasetuksen klikkausseurantaan Google Analyticsissa. Voit helposti seurata jokaisen käyttäjän napsautuksia myös verkkosivustollasi.

Tämä auttaa minua helposti kartoittamaan käyttäjän käyttäytymistä. Huomasin esimerkiksi, että ihmiset käyttivät top-navigointi sivustossani 5x enemmän korostetun linkin sisällä intro tekstissä. Valitettavasti se ei laske napsautuksia käyttäjiltä, ​​joissa on AdBlock.

24. Sisäpuhelin

Kun sovimme alkuperäisistä virroista, puhuimme osasta virtauksia, joissa käyttäjä saa sähköpostia Sisäpuhelin . Velvollisuutemme on varmistaa, että kaikki kopiot ja sanoma itsessään ovat järkeviä ja todella hyödyllisiä kävijälle. Varmista, että sähköpostiosoitteesi ohjaavat käyttäjää innokkaaseen tulokseen ja yrittävät aina tarjota tiettyjä tukitietoja ja tietoja siitä, miten jatkaa virtausta.

Viimeiset sanat

25. Jätä Dribbble taakse

Siitä, mitä olen oppinut ja miten malli on muuttunut viimeisen neljän vuoden aikana, olen joutunut siihen pisteeseen, jossa Dribbble ei välttämättä ole paikka, johon haluat luoda malleja. Olen aina pyrkinyt nauttimaan hienoja pikseleitä, joissa on seksikäs profiilikuvat, mutta se ei ole mitä todellisia käyttäjiä tarvitsee ja käyttävät.

Tässä on esimerkki, vasemmalla näet jotain, jonka olen suunnitellut Dribbbleille. Oikealla näet jotain, jonka suunnitelin kun olin viettänyt jonkin aikaa katsomassa ihmisiä muokkaamalla profiilejaan ja huomannut, että näkemäni ei tuottanut tarvitsemansa.

15

Voit saada 500 tykkää perunan tai liukuvan pizzan kirkkaasta hullu animaatiosta, mutta todella tärkeää on, että käyttäjät löytävät kuinka hallita yrityksen sähköpostiviestejä tai miten suodattaa niiden tehokkuusanalyysit.

[- Tämä viesti lähetettiin alunperin keskipitkällä , julkaistu uudelleen tekijän luvalla. -]