Tuotteen ja hallintapaneelin suunnittelun 26 vaihetta

Mitä olen oppinut 4-vuotisen matkan aikana tuotesuunnittelijaksi ja kojelaudan suunnittelijaksi

Olen viimeisen neljän vuoden ajan jatkanut kojetaulujen ja sovellusten suunnittelua ja olen oppinut toimimaan eri osastojen kanssa ja hyödyntämään heidän tietämystä tehdäkseen tuotesuunnitteluista sekä parempia että tehokkaampia.
 
Tänään aion jakaa kaikki oppimani ja sisällytetyt päivittäiseen rutiiniini vaiheet. Nämä vaiheet ovat mielestäni auttaneet minua parantamaan suunnittelijaa, ja haluan kertoa niistä kanssasi.

1. Esikäsittely

Hanki mahdollisimman paljon tietoa (kysy kolme esimerkkiä)

Minulle mikään ei anna minulle enemmän selkeyttä kuin nähdä todellinen toimiva esimerkki. Kun työskentelen uuden asiakkaan kanssa tai aivan uuden tuotteen aloitussivulla, minusta on helpoin pyytää asiakasta toimittamaan kolme tai neljä inspiroivaa sivua, koska tämä todella auttaa molempia osapuolia. Saa asiakkaasi laittamaan ideoita pöydälle antaa sinulle mahdollisuuden ymmärtää helposti, mistä he pitävät ja mitä he odottavat valmiista suunnittelusta.
 
Jos työskentelet useiden joukkueiden kanssa, sinun tulisi pyrkiä viettämään tuotteeseen yhtä paljon aikaa kehittäjien kanssa kuin suunnittelijakollegoidesi kanssa. Se mitä olen oppinut työskenteleessäni Tapdaqilla, avain tehokkaan suunnittelupäätöksen tekemiseen on varmistaa, että puhut dev-tiimin kanssa niin paljon kuin pystyt. Minun tapauksessani on aina tapauksia, joissa ratkaistaan ​​ongelma, jolloin en voinut löytää ratkaisua itse. Sanon, että tavoitteena on poistaa mahdollisimman monta kysymystä ennen kuin siirryt kehitykseen.

Lisätietoja persoista

Aluksi minun on sanottava, että olin skeptinen henkilöiden suhteen, mutta nyt se kaikki on minulle järkevää.
 
Joten täysin vastakohtana vanhemmalle prosessilleni, näen kuinka persoonat ovat erittäin tärkeitä työskennellessäni tuoteominaisuuksien parissa, varsinkin kun ratkaisussa on monia erilaisia ​​reunatapauksia. Se auttaa sinua ymmärtämään, kenelle oikeasti suunnittelet. Tavoitteena on noin neljä tai viisi henkilöä. Paras tapa saada henkilöitä todellisiksi käyttäjiksi, tämä voi auttaa sinua tunnistamaan ongelmat keskustelemalla tai kävelemällä ratkaisusi kanssa heidän kanssaan puhelun aikana tai henkilökohtaisesti.

Persona Template - Lataa se täältä: http://janlosert.com/assets/persona-template.zip

Aseta tarkat tavoitteet - mitä tarkalleen meidän pitäisi seurata?

Luulen, että useimmat suunnittelijat / asiakkaat jättävät tämän vaiheen huomiotta, mutta yksi suunnittelun tärkeimmistä puolista molemmille osapuolille on ymmärtää suunnittelemasi tuotteen tavoitteet. Meillä on taipumus hypätä suoraan pikseliin ja toteuttaa projektin käyttöliittymä nopeasti. Jos kyseessä on aivan uusi verkkosivusto tai uusi ominaisuus, muista asettaa selkeät tavoitteet siitä, mitä haluat saavuttaa.
 
Koska kaikki on jäljitettävää, puhu tarkista kohdista, joita seuraat. Ne voivat esimerkiksi vaihdella uusista ilmoittautumisista useisiin asiakkaisiin, jotka käyttävät Paypal vs. luottokorttimaksuja. Varmista aina, että tiedät, kuinka korkealle tavoitteet alussa!
 
Loppusanat - Tarvitset tätä joka tapauksessa, kun haluat määrittää suppiloja Mixpaneliin myöhemmin tässä prosessissa.

Projektin rakenne

Asenna projektikansio ja aloita Moodboardin kerääminen

Inspiraatiosivustoja on paljon - Dribbble, Behance, Pttrns, Pinterest jne. On todella helppoa löytää samanlaisia ​​projekteja kuin ne, joiden kanssa työskentelet. Lisäksi jo olemassa olevalle ongelmalle voi olla ratkaisu, jota yrität ratkaista.
 
Kun aloitan uuden projektin työskentelyn, asennan aina kansion, jonka kansiot ovat nimeltään - lähdetiedostot, näytöt ja vienti, inspiraatio ja resurssit. Tallenn kaiken, mitä löydän Internetistä, Inspiraatio-kansioon, jotta voin käyttää sitä myöhemmin perustietojen luomiseen. Tämä kansio voisi olla täynnä mitä tahansa plugineista, värimalleista tai jopa täydellisistä Behancen tapaustutkimuksista.

2. Alhainen uskollisuus

Valkotaulu

Jos joku muistaa, en välittänyt paljon edellisen artikkelini kehysten laadusta. Nyt käytän seuraavia menetelmiä:
 
Jos haluamme lisätä uuden ominaisuuden tai suunnitella uudelleen prosessin, istumme alas ja kokouksessa kaikki alkavat luonnostella ideoita taululle, paperille tai jopa iPadille. Tämän toiminnon avulla voimme asettaa kaikki tiimin jäsenet suunnittelijan asemaan. Myöhemmin päädymme kahteen suunnitteluvaihtoehtoon nähdäksemme, mikä toimii parhaiten. Yritämme aina käydä läpi koko kokemuksen ja keskustella useimmista reunatapauksista prosessin tämän osan aikana. On todella tärkeää käsitellä niitä nyt toisin kuin suunnitteluvaiheessa tai vielä pahempaa, kehitysvaiheessa. Silloin voit menettää paljon aikaa ja energiaa sen sijaan.

Kartoita kaikki näytötiedot (mitä tietoja käyttäjän on syötettävä)

Tämä on aika mennä taulun ulkopuolelle ja luetella kaikki käyttäjän kirjoittamat tiedot ja tarinat. Kirjoita muistiin, mitä käyttäjän tulisi lisätä tiettyyn ruutuun ja kuinka käyttäjä voi saavuttaa halutut tavoitteet.

Kirjoita kaikki mahdolliset tilat muistiin

Koska kaikilla kojetauluilla, sovelluksilla tai verkkosivustojen lomakkeilla on eri tilat, tämä on toinen tärkeä vaihe, jota sinun ei pitäisi unohtaa.
 
Suunnittelussa meidän on varmasti puututtava kaikkiin niihin. On hienoa, että Sketch- tai PSD-tiedostoissa on kiiltäviä kuvaajia ja hienoja profiilikuvia. Todennäköisesti käyttäjät näkevät sovelluksesi vastakkaisen puolen. Varsinkin kun he tulevat tuotteeseesi. Se on välttämätöntä valmistautua. Alla on esimerkki siitä, kuinka käsittelemme tyhjiä tiloja yhdessä tietokomponenteissamme.

Tapdaq - Cross Promotion -widget-valtiot

Valmista ensimmäinen kaavio

Kaikki tämä johtaa alhaisen uskollisuuden viimeiseen osaan. Valkotaulun tehtävän tuloksen ansiosta tiedämme nyt kaikki mahdolliset tilat, käyttäjän panokset ja tavoitteet. Kaikkien vuorovaikutusten yhteenvetona luon kaavion ja olen rehellinen, jos olen muuttanut tämän tyyliä monta kertaa: Siirryn luonnostelluilla piirroksilla varustetuista Sketch-tiedostoista vain suorakaiteen muotoon, joka symboloi jokaista sivua niiden alla olevilla nimillä. Prosessi oli kuitenkin aina tuskallinen, päädyin yleensä tilanteeseen, jossa haluamme muuttaa tai lisätä jotain myöhemmin prosessiin. Näiden ratkaisujen avulla olen yleensä pakotettu tekemään paljon enemmän vaiheita; kuten viivojen, nuolien ja kuvien sijainnin muuttaminen.

Loppujen lopuksi käytimme Camunda-mallinninta, joka ei ole tarkalleen suunnitteluväline. Se on yksinkertainen sovellus teknisten kaavioiden luomiseen. Mikä kuulostaa outolta, mutta tämä sovellus on kehitetty auttamaan sinua rakentamaan peruskaavioita. Tärkeintä on, että kaikki luotu on täysin skaalautuva. Voit helposti vetää ja pudottaa mitä tahansa pistettä, ja se luo automaattisesti viivat ja nuolet sinulle. Voit myös valita erityyppisistä pisteistä, joista voi olla apua esimerkiksi korostaessaan, kun käyttäjä saa sähköpostia Intercomilta. Camunda sallii viennin SVG: hen, mikä helpottaa jäljitettävien pisteiden värittämistä Sketchissä.

Tapdaq-valikko + näytöiden rakenne (Vie Camunda-mallinnusohjelmasta)

3. Työ / Suunnittelu

moodboard

Voin aloittaa moodboardin luomisella, kun kerän kaikki kuvat Inspiraatio-kansioon. Käytän tunnelmatauluja pääasiassa keskustelemaan ajatuksistasi kollegoideni kanssa ja kuvaamaan joitain visuaalisia ideoita, ennen kuin aloitan pikseliprosessin.

Moodboard Chronicle Display -näytöllä ja kirkkain sinisillä väreillä

Ensimmäinen luonnos

Suunnittelu on aina jatkuva prosessi. Aiot iteroida paljon matkallasi loistavaan tulokseen. Ensimmäisen luonnoksen mukana tulee myös ensimmäisen palautteen kerääminen. Sinun ei tarvitse päästä täydelliseen pikselisuunnitteluun voidaksesi saada palautetta joukkuetovereidesi, asiakkaiden tai potentiaalisten käyttäjien toimesta. Sekoitan näytöt nykyisistä malleistamme saadaksesi ensimmäiset ajatuksensa ja aloittaaksesi keskustelun. Tämän avulla voimme aloittaa leikkimisen todellisen näköisillä malleilla alle päivässä. Voit tehdä ensimmäisen yksinkertaisen prototyypin testataksesi, liittyvätkö asiat hyvin yhteen.

Kirjoita kopio (ääni)

Kopiointi on yksi käyttäjien päätösten avainkysymyksistä, ja pidän sitä tärkeänä osana suunnittelua. En ole äidinkielenään puhuja, mutta pystyn silti asettamaan kopion äänen. Ei ole mitään pahempaa kuin mukava muotoilu, jossa on hämmentäviä valintaikkunoita, joissa käyttäjät pyrkivät löytämään seuraavan askeleen.

Ensimmäinen harjoittelu

Ensimmäisellä luonnoksellasi voit luoda nopeasti prototyypin Marvelappiin tai Invisioon. Aloitin tekemisen äskettäin, ja osoittautuu, että se on toinen hämmästyttävä validoiva näkökohta. Prototyypin avulla voit nyt helposti soittaa puhelun 3 tai 4 henkilön kanssa ryhmästäsi jakaa prototyyppilinkin heidän kanssaan ja yrittää kysyä muutama kysymys samalla kun testataan heille tiettyjä virtauksia / skenaarioita. Tällä tavoin voit helposti testata kuulustelutaitosi ja ilmeisesti testata suunnittelupäätöksesi todellisille käyttäjille huolehtimatta hukkaan resursseista ja ajasta. Olen yleensä taipuvainen valitsemaan ihmisiä, jotka eivät ole kovinkaan paljon mukana kojelaudan kehittämisessä. Yritä myös välttää katselemasta jotakuta, jolla on jo ollut mahdollisuus pelata prototyypin kanssa aiemmin.

Etiketti

Me kaikki tiedämme, kuinka vaikeaa on pysyä siisteänä. Kuinka toimittaa vielä yksi ominaisuus. Tämä johtaa yleensä sotkuisiin Sketch- tai PSD-tiedostoihin. Olen oppinut paljon suunnittelemalla hallintapaneelin käyttöliittymäpakettia, etenkin eroista, jotka liittyvät työskentelyyn ainoana suunnittelijana käynnistyksessä, ryhmissä tai digitaalisten tuotteideni kanssa. Työskennellessäni Tapdaqissa olen vakuuttunut kollegoideni taidoista ja jopa tiedän yrittäessäni pitää tiedostot siistinä, joskus se on mahdotonta! Kun työskentelet kuitenkin ryhmässä, ajattelen PSD: täni, kuten luon ne jollekin toiselle. Käytän sääntöä, että jos kansiossa on enemmän kuin 8 tasoa, sinun on luotava uusi.

Dashboard UI Kit - Kansioiden rakenne

Löysin yhden loistavan laajennuksen Sketchille, joka säästää tunteja työskennellessäni käyttöliittymäpakettien parissa. Nimeä uudelleen - https://github.com/rodi01/RenameIt
 
Voit silti katsoa näitä vanhoja etikettiohjeita (Joka tapauksessa suurin osa pisteistä toimii millä tahansa käyttämälläsi editorilla.) - http://photoshopetiquette.com/

Vinkki - laita kaikki kankaalle

Olen aina kamppaillut mukavien otsikoiden suunnittelussa, kun taas muut kankaat olivat valkoisia. Suunnitellessani opin oppilaitokset asettamaan kaiken sisällön paikoilleen - vain pelata asettelun ja typografian kanssa. On paljon helpompaa suunnitella mukavia yksityiskohtia ja leikkiä koko konseptilla sisällön ollessa paikallaan.

Luo käyttöliittymäelementit ja aloita pelaaminen Legon kanssa

Olen todennäköisesti myöhässä juhliin ja tämä kuulostaa jo vanhentuneelta, kun kirjoitan sitä. Syy, miksi emme ole tehneet mitään lankakehystä matkalla täällä, on yksinkertainen. Luonnoksessa 39 on jotain, mikä on mielestäni uskomatonta ja joka on ”muotoja, joilla on koon muuttavat ominaisuudet”. Se pakotti minut viimein luomaan kaikki 50+ Tapdaq-näyttöä. Tämä on jotain, joka tekee suunnittelusta helpon kaikille joukkueen jäsenille. Sketch-tiedostomme on nyt puhdas vetämällä ja pudottamalla. Voit antaa kenelle tahansa joukkuetoveristasi helposti tyhjän kankaan ja he voivat luoda melkein uskollisia luonnoksia. Tämän ansiosta voimme ohittaa kaikki langankehystystyökalut ja aloittaa melkein todellisen näköisiltä pikseliltä.

Tämä kulkee käsi kädessä myös sen kanssa, että pystymme itse muuttamaan metallilangan kehät todellisiksi kuvioiksi. Minkä tahansa PM: n avulla voidaan luoda kehys ja sitten voin helposti ottaa sen haltuun ja muuntaa sen uskollisuudeksi.

Vedä ja pudota -elementit Tapdaq-luonnostiedostoon

4. Omaisuus ja toimitus

Kun olet valmis suunnittelemaan ja iteraamaan ensimmäisen palautteen perusteella, et ole vielä valmis. Nyt on aika luovuttaa mallisi suunnittelijoille / kehittäjille.

tekniset tiedot

Yksi päätavoitteistani on pystyä aina kommunikoimaan päätöksistäni joukkueen kanssa ja vähentämään kehittäjien vaikeuksia niin paljon kuin pystyn, jotta voimme tarjota heille parhaat mahdolliset resurssit. Se on mielestäni ehdottomasti tärkein osa työtäni suunnittelijana.
 
Koska dokumentoimme kaiken vuorovaikutuksen ja olemme kaikki valmiita prosessimme alusta alkaen, silmälasien luominen on pala kakkua. Minulla on tapana kirjoittaa tietoja Google-dokumenteissa tai Sketch-tiedostojen näytöiden alapuolella. On mukavaa käsitellä mallejasi selityksillä kaikista ominaisuuksista, jotta kuka tahansa voi tarttua tiedostoosi tulevaisuudessa.

Kaavio

Teimme tämän tekniikan, kun olen työskennellyt Badossa esittelijöinä ryhmän ja sidosryhmien kanssa. Tämä tekniikka on mukava tulostaa malleja ja keskustella niistä ryhmän kanssa. Mutta nykyään mielestäni on parempia vaihtoehtoja. Kuten valmistamalla lopullinen prototyyppi.

Sagram Analytics App -sovelluksen täysi kaavio

Lopullinen prototyyppi

Yksi tärkeimmistä asioista minulle on pitää kaikki vuorovaikutukset valmiina prototyyppinä. Minulla on yleensä lopputuloksena 3–5 prototyyppiä matkalla lopulliseen kokoonpanoon niille pienille tilaisuuksille joukkuetovereiden kanssa, jotka haluavat näyttää tiettyjä virtauksia. Minulla on tapana valmistella kaikki Sketch-tilat yhdeksi kuvatauluksi ja kopioida sitten nuo piirustukset niin, että jokainen tila on valmis vietäessä.
Kuten aiemmin sanottiin, voit käyttää joko Marvelappia tai Invisiota. On hienoa lisätä kommentteja kuvioiden osiin laajentaaksesi eritelmääsi paljon enemmän, jotta jopa copywriter voi helposti tarkistaa oikeat pikselit ja virtaukset, jos jokainen kopio ja valintaikkuna toimivat tarpeen mukaan.

Quicktime Video> Muistiinpanot

Kun en esittele juttuja Hangoutissa joukkueelle tai asiakkaalle, lähetän näytölle jaetun videon minusta, joka käy läpi prototyypin ja selittää kaiken, mitä olen suunnitellut. Minulle on hieno vahvistus ennen jokaista esittelyä, että tiedän vastauksen mihin tahansa kysymykseen ja mahdollisiin kuvitteellisiin vuorovaikutuksiin, jotka olen päättänyt suunnitella. Voidaan myös käyttää hienosti työskennellessäsi etätiimeissä. Jokaisella on mahdollisuus toistaa koko vuorovaikutteinen ajattelu milloin tahansa.

elävöittää

Mukava viimeinen ripaus suunnittelusi, jota voit käyttää After Effects tai Periaate. On hyvä selittää, kuinka haluat tämän ja sen liikkuvan tai liikkumaan.

Tyyliopas

Toinen tärkeä kohta insinöörien kannalta on tietää miten asiat reagoivat eri tilanteissa. Ajattele syöttövirheen tilaa tai missä virheviesti näytetään. Sama kuin se, kuinka lähetä-painikkeen käytöstä poistettu tila näyttää, mistä laittaa kehruu syöttöön jne. On erittäin helppoa, että insinöörit käyvät vain Symbolit-taulun ja tyylin läpi yksi kerrallaan, ennen kuin he jopa alkavat koodata kaikkia näyttöjä Sketch-tiedoston ansiosta. kuten Lego estää. Tyyliopas ja visuaalinen yleiskuvaus kaikista elementeistä on oikeastaan ​​yksi pyydetyimmistä ominaisuuksista / malleista seuraavalle päivitykselle Kojelaudan käyttöliittymäpaketti.

Tapdaq-käyttöliittymän yleiskatsaus - Styleguide

5. Lopullinen ja testi

Koska olemme valmiita luovuttamaan suunnittelumme suunnittelijoille, voimme keskittyä prosessin viimeiseen osaan - päätöksemme kokeisiin!

Inspectlet / HotJar

Kun mallit on muutettu toimivaksi koodiksi, älä unohda sisällyttää Inspectlet- tai HotJar JS -pätkääsi. Olen aina innoissani (tai turhautuneena) nähdäkseni, kuinka käyttäjät liikkuvat kojetaulun kautta tai mitä he tekevät portfolioni sivulla. Inspectlet on uskomaton kaappaamalla kaikki käyttäjän istunnot. Toimii hyvin myös isoissa projekteissa. Sen mukana tulee helppo “/ page” -suodatus, jonka avulla voit katsoa tietyn ominaisuuden tai virtauksen istuntoja. Käytämme Inspectletiä Tapdaqissa. Henkilökohtaisessa portfoliossani käytän HotJarin ilmaisia ​​ominaisuuksia lämpökarttojen luomiseen ja ainakin muutaman salkkuani selailevan käyttäjän tallentamiseen.

Mixpanel

Mixpanel toimii erinomaisesti tavoitteidemme (niiden, jotka asetamme prosessimme alussa) validoinnissa. Mixpanel auttaa näkemään, kuinka moni käyttäjä suorittaa tietyt virrat. Kuinka moni käyttäjä pudotti ennen tilin perustamista. Kuinka monta ihmistä meni pääsivulta säilöön ja arvokkaimpaan tuotteeseemme.

Google Analytics

En pysty koodaamaan suuria asioita, mutta ainakin osaan työskennellä CSS-tiedostojen ja yksinkertaisen koodin kanssa. Viime aikoina olin kiinnostunut siitä, missä käyttäjät napsauttavat, ja katsellessani Hotjarin lämpökarttoja olen päättänyt asentaa myös napsautuksen peruseurannan myös Google Analyticsiin. Voit helposti seurata myös kaikkia käyttäjän napsautuksia verkkosivustollasi. Tässä on esimerkki napsautusten seurannasta - http://pastebin.com/tdmFZN2k

`` `

** 1. Liitä komentosarja koodiin **