26 skref til fullkominnar vöruhönnun
Undanfarin fjögur ár hefur ég verið að hanna mælaborð og forrit og ég hef lært hvernig á að takast á við mismunandi deildir og nýta þekkingu sína til þess að gera vöruhönnun skilvirkari.
Í dag ætla ég að deila öllum þeim skrefum sem ég hef byggt inn í daglegt líf mitt, sem ég tel að hafi gert mig betri hönnuður.
Fyrirfram ferli
1. Fáðu eins mikið af upplýsingum og hægt er (biðja um þrjár dæmi)
Fyrir mig, ekkert veitir meiri skýrleika en að sjá alvöru vinnandi dæmi. Þegar ég er að vinna með nýjum viðskiptavini eða á nýjan áfangasíðu fyrir vöru finnur ég það sem auðveldasta upphafspunkturinn er að biðja viðskiptavininn um að bjóða upp á þrjár eða fjórar innblásturssíður, því þetta hjálpar bæði báðum aðilum. Að fá viðskiptavininn til að setja hugmyndir á borðið gefur þér tækifæri til að skilja auðveldlega hvað þeir vilja og hvað þeir búast við frá lokinni hönnun.
Ef þú ert að vinna með mörgum liðum ættirðu að miða að því að eyða eins miklum tíma með verktaki á vöru eins og þú gerir með hönnuðum samstarfsmönnum þínum. Það sem ég hef lært er að lykillinn að því að gera skilvirka hönnunarákvörðun er að tryggja að þú talir við dev liðið eins mikið og þú getur. Í mínu tilfelli, þar hafa verið tilfelli þar sem lausn á vandamáli komst að því að ég gat ekki komið upp með sjálfum mér.
Markmiðið er að útrýma eins mörgum spurningum og mögulegt er áður en þú ferð í þróun.
2. Lærðu um persónur
Í fyrsta lagi verð ég að segja að ég væri efins um persónurnar, en nú er allt vit í mér.
Svo í fullri öfugt við eldri ferlið, get ég séð hvernig persónurnar eru frábærar mikilvægar þegar unnið er að eiginleikum vöru, sérstaklega þegar lausnin hefur margar mismunandi brúnatriði. Það hjálpar þér að skilja hverjir þú ert í raun að hanna fyrir. Ég miðar að því að hafa um það bil fjögur til fimm persónur.
3. Settu nákvæma markmið - hvað ættum við að fylgjast með?
Ég held að flestir hönnuðir / viðskiptavinir geti hunsað þetta skref, en einn mikilvægasti þátturinn í hönnun fyrir báða aðila er að skilja markmið vörunnar sem þú ert að hanna. Við höfum tilhneigingu til að hoppa beint inn í punktar og fljótt útbúa verkefnið. Ef það er glæný vefsíða eða nýr eiginleiki, vertu viss um að setja skýra markmið um það sem þú vilt ná fyrst.
Þar sem allt er trackable, tala um nákvæmlega stig sem þú ert að fara að fylgjast með. Til dæmis gætu þetta verið allt frá nýjum skilaboðum, til fjölda viðskiptavina sem nota Paypal á móti kaupum með kreditkortum. Vertu alltaf viss um að þú veist hversu mikið þú ert að stefna að í byrjun!
(Þú þarft þetta engu að síður til að setja upp þjálfar á Mixpanel seinna í þessu ferli.)
4. Settu upp verkefnamöppu og byrjaðu að byggja upp moodboard
Það eru fullt af stöðum fyrir innblástur - Dribbble , Behance , Pttrns o.fl. Það er mjög auðvelt að finna svipaða verkefni við þann sem þú ert að vinna með. Að auki getur verið lausn á vandamálum sem þú ert að upplifa og reynir að leysa.
Þegar ég byrjar að vinna að nýju verkefni set ég alltaf upp möppu með möppum sem heitir - Source Files , Screens & Export , Inspiration & Resources . Ég vista allt sem ég finn á Netinu til Inspiration möppu til að geta notað það síðar til að búa til undirstöðu moodboards. Þessi mappa gæti verið fyllt með allt frá viðbótum, sýnishornum eða jafnvel fullum tilfellum frá Behance.
Að fara í lágt tryggð
5. Whiteboard
Ef við viljum bæta við nýjum eiginleikum eða endurhanna ferli sitjum við niður og allir á fundinum byrja að skissa hugmyndir á whiteboard, pappír eða jafnvel iPad. Þessi aðgerð gerir okkur kleift að setja alla á liðið í stöðu hönnuðarinnar. Síðar endar við með tveimur hönnunarvalkostum til að sjá hver einn virkar best.
Við reynum alltaf að fara í gegnum alla upplifunina og ræða mest af brúnunum á þessum hluta ferlisins. Það er mjög mikilvægt að taka á móti þeim núna í mótsögn við hönnunarstigið, eða jafnvel verra, á þróunarsviðinu. Það er þegar þú getur tapað miklum tíma og orku.
6. Kortið út alla skjáana þína (hvaða gögn þarf notandi að nota)
Þetta er kominn tími til að fara út fyrir whiteboard og skrá alla inntak og sögur notandans. Skrifaðu niður hvað nákvæmlega notandi ætti að setja inn í tiltekna skjá og hvernig notandi getur náð markmiðum sínum.
7. Skrifaðu niður allar mögulegar aðstæður
Vegna þess að allar töflur mælaborða, forrita eða vefsíðna hafa mismunandi ríki, þetta er annað mikilvægt skref sem þú ættir ekki að gleyma.
Meðan við hönnun þurfum við að vera viss um að takast á við þau öll. Það er gaman að hafa glansandi myndrit og flottar prófíl myndir í skýringarmyndum okkar eða PSDs. Hins vegar eru líklega notendur að sjá hina hliðina á forritinu þínu. Sérstaklega þegar þeir koma til vörunnar. Það er nauðsynlegt að vera tilbúinn. Hér fyrir neðan er dæmi um hvernig við takast á við tómt ríki í einum af gögnum okkar.
8. Undirbúa fyrsta skýringuna þína
Allt þetta leiðir til lokaþáttar lítillar tryggðar. Þökk sé niðurstöðu whiteboard verkefni vitum við nú öll möguleg ríki, inntak notenda og markmið. Til að samanteka öll samskipti búa ég til skýringarmynd og til að vera heiðarlegur. Ég hef breytt stíllinn með því að gera þetta oft: Að fara frá Sketch skrár með rasterized skipulagi til bara rétthyrninga sem tákna hverja síðu með nöfnunum hér að neðan. Með því að segja, ferlið var alltaf sárt, endar ég venjulega í aðstæðum þar sem við viljum breyta eða bæta við eitthvað síðar í ferlinu. Með þessum lausnum er ég venjulega neyddur til að gera margar fleiri skref; svo sem að breyta stöðum línum, örvum og myndum.
Nýlega hef ég notað Camunda Modeler , sem er ekki einmitt hönnunar tól; það er einfalt forrit til að búa til tæknilega skýringarmyndir. Sem hljómar skrýtið, en þetta forrit er þróað til að hjálpa þér að byggja upp grunnskýringarmyndir. Mikilvægast er að allt sem búið er til er fullkomlega stigstærð. Þú getur auðveldlega dregið og sleppt einhverju punkti og það mun sjálfkrafa búa til línur og örvar fyrir þig. Þú getur einnig valið úr mismunandi gerðum punkta sem geta verið gagnlegar til að auðkenna þegar notandi fær til dæmis tölvupóst frá kallkerfi. Camunda útflutningur til SVG sem gerir það auðvelt að lita rekjanleg stig í skissu.
Vinna / hönnun
9. Moodboard
Ég get byrjað með að búa til skapborð, þar sem ég safna öllum myndum í Inspiration möppuna mína. Ég nota mood boards aðallega til að ræða hugsanir mínar með samstarfsfólki og lýsa nokkrum sjónrænum hugmyndum, áður en ég byrjar með pixla ferlið.
10. Fyrsta drög
Hönnun er alltaf áframhaldandi ferli. Þú ert að fara að æfa mikið á leiðinni til góðs árangurs. Með fyrstu drögum er einnig leið til að safna endurgjöf. Þú þarft ekki að koma til fullkominnar hönnunar pixla til þess að byrja að fá ábendingar frá teymiðum, viðskiptavinum eða hugsanlegum notendum. Til að fá fyrstu hugsanir sínar og til að hefja umræðu blandar ég venjulega skjái frá núverandi hönnun. Þetta gerir okkur kleift að byrja að spila með alvöru útlit hönnun á minna en einn dag. Þú getur gert fyrsta einfalda frumgerð til að prófa hvort hlutirnir tengist vel saman.
11. Skrifaðu afritið þitt
Afrita er ein lykilatriði ákvarðana notenda og ég tek það sem lykilatriði í hönnuninni. Það er ekkert verra en góð hönnun með ruglingslegum glugga þar sem notendur eru í erfiðleikum með að finna næsta skref.
12. Fyrsta innri próf
Með fyrstu drögunum geturðu fljótt búið til frumgerð í Undur eða Invision . Þetta er eitthvað sem ég byrjaði að gera nýlega og það kemur í ljós að það er annar ótrúleg sannprófunarþáttur. Með frumgerð getur þú nú auðveldlega sett upp símtal með 3 eða 4 einstaklingum úr hópnum þínum og deildu frumgerðarslóðinni með þeim og reyndu að spyrja nokkurra spurninga en prófaðu á þeim tilteknu flæði / atburðarásum.
Þannig getur þú auðveldlega prófað fræðasviði þína og augljóslega prófað hönnunarmörk þína á raunverulegum notendum án þess að hafa áhyggjur af sóun á auðlindum og tíma. Ég hef tilhneigingu til að velja fólk sem er ekki mikið þátt í þróun mælaborða. Reyndu líka að forðast að horfa á einhvern sem hefur þegar fengið tækifæri til að spila með frumgerðinni áður.
13. Eintök
Við vitum öll hversu erfitt það er að vera snyrtilegt. Hvernig á að skila enn aðra eiginleika. Þetta leiðir venjulega til sóðalegur Sketch eða PSD skrár. Ég hef lært mikið um muninn á því að vinna eins og einn hönnuður í gangi, vinna í hópum eða vinna á eigin stafrænar vörur.
Þegar þú vinnur í hópi skaltu hugsa um PSD þinn eins og þú ert að búa til fyrir einhvern annan. Ég nota regluna að ef þú hefur meira en 8 lög í möppu þá ættirðu að búa til nýjan.
Ég fann eitt frábært tappi fyrir skissu, sem bjargaði mér klukkustundum á meðan ég vann á UI-pakkana mínum: Endurnefna það .
Ábending: Setjið allt á striga. Ég hef alltaf átt í erfiðleikum með að hanna fallegar hausar en ég var hvítur af restinni af striga. Meðan ég hönnuði lærði ég að setja allt efni á sinn stað fyrst - bara spilaðu með skipulagi og letri. Það er miklu auðveldara að hanna fallegar upplýsingar og spila með öllu hugtakinu með innihaldi í stað.
14. Búðu til UI-þætti og byrjaðu að spila með Lego
Ég er líklega seinn til aðila og þetta mun nú þegar líða gamaldags á meðan ég er að skrifa það. Ástæðan fyrir því að við höfum ekki gert vírframleiðslu á ferðinni hér er einfalt. Skýring 39 kemur með eitthvað sem ég hef fundið ótrúlegt og það er "form með stærðarmöguleika". Þetta er eitthvað sem gerir hönnun auðvelt fyrir alla á liðinu. Sketch skrá okkar er hreint draga og sleppa núna. Þú getur auðveldlega gefið einhverjum af teymönnum þínum autt striga og þeir geta búið til næstum hæfileikarútreikningar. Þökk sé þessu getum við sleppt öllum vírframleiðsluverkfærum og byrjað með næstum alvöru útlitstígum.
Þetta fer líka í hendur við að við getum raunverulega umbreytt vírframleiðslu í alvöru hönnun. Allir PM geta búið til vírframa og þá get ég auðveldlega tekið það yfir og breytt í hæfileikann.
Eignir og afhending
Þegar þú ert búinn að hanna og endurtekninga á grundvelli fyrstu athugasemda ertu ekki enn búinn að gera það. Nú er kominn tími til að höndla hönnunina þína til verkfræðinga / devs.
15. Upplýsingar
Ein helsta markmið mitt er að alltaf geti sent ákvörðunum mínum með liðinu og hægt að draga úr erfiðleikum fyrir forritara okkar eins mikið og ég get til að veita þeim bestu mögulegu auðlindir. Það fyrir mig er örugglega mikilvægasti hlutinn í starfi mínu sem hönnuður.
Þar sem við skjalfestu öll samskipti og hafa allt sem er tilbúið frá upphafi ferlisins okkar, búa til sérstakur er stykki af köku. Ég hef tilhneigingu til að skrifa sérstakur í Google Skjalavinnslu eða undir skjánum í Sketch files. Það er gaman að höndla hönnunina með skýringum á öllum eiginleikum svo að hver sem er geti gripið skrána þína í framtíðinni.
16. Skýringarmynd
Þessi tækni er góð til að prenta út hönnun og ræða þá við liðið. En nú á dögum held ég að það séu betri möguleikar. Svo sem að hafa tilbúið endanlegan frumgerð.
17. Loka frumgerð
Einn af helstu hlutum fyrir mig er að alltaf hafa alla samskipti tilbúin í frumgerð. Ég endar venjulega með 3-5 mótatgerðir á leiðinni til síðasta fyrir þá litlu fundi með teammates eða að sýna tiltekna flæði. Ég hef tilhneigingu til að undirbúa öll ríki í skissu í einni töflureikni og þá afrita þessi skjáborð til að fá hvert ríki tilbúið við útflutning.
Það er frábært að bæta við athugasemdum við hluti af hönnuninni þinni til að auka forskriftina þína miklu meira svo að jafnvel auglýsingatextahöfundur geti auðveldlega farið og athugað alvöru punkta og flæði ef hvert eintak og gluggi virkar eftir þörfum.
18. Kvikmyndataka> Skýringar
Þegar ég er ekki að kynna efni í samtali við liðið eða viðskiptavininn sendi ég screenshare myndband af mér að fara í gegnum frumgerðina og útskýrir allt sem ég hef hannað. Það er góð staðfesting fyrir mig fyrir kynningu sem ég þekki svarið á einhverjum spurningum og hugsanlegum ímyndaverkum sem ég hef ákveðið að hanna. Gæti einnig verið fallega notað þegar unnið er í afskekktum liðum. Allir hafa aðgang að því að endurspegla alla samskipti hugsun hvenær sem er.
19. Búa til
Sem falleg endanleg snerting þú getur notað Eftir áhrif eða Meginreglan . Það er gott að útskýra hvernig þú vilt þetta eða það að færa.
20. Styleguide
Annað mikilvægt atriði fyrir verkfræðinga er að vita hvernig hlutirnir bregðast við í mismunandi tilfellum. Hugsaðu um villuskilríki inntaks eða hvar á að birta villuboð. Á sama hátt hvernig öruggasti sendi hnappurinn mun líta út, hvar á að setja spinner osfrv.
Það er frábær auðvelt fyrir verkfræðinga að fara bara í gegnum Táknið þitt og töflurnar þættir einn í einu áður en þeir byrja jafnvel að kóða alla skjái þökk sé skissa skrá sem Lego blokkir.
Lokapróf
Þar sem við erum búin að afhenda hönnun okkar til verkfræðinga getum við einbeitt okkur að síðasta hluta ferlisins - prófanir okkar!
21. Inspectlet / HotJar
Eftir að hönnunin er breytt í vinnuskóða gleymdu ekki að láta í té Inspector eða HotJar JS brot. Ég er alltaf spenntur (eða svekktur) til að sjá hvernig notendur fara í gegnum mælaborðið okkar eða hvað eru þeir að gera á vefsíðasíðunni minni. Inspectlet er ótrúlegt í að taka upp alla notendasýninguna þína. Virkar einnig vel fyrir stærri verkefni.
Það kemur með auðveldri "/ síðu" síun sem hjálpar þér að horfa á fundi tiltekins eiginleika eða flæði.
22. Mixpanel
Mixpanel virkar vel til að staðfesta markmið okkar (þau sem við skipuleggjum í upphafi ferlisins). Mixpanel hjálpar til við að sjá hversu margir notendur ljúka tilteknu flæði. Hversu margir notendur slepptu áður en þú setur upp reikninginn. Hversu margir fóru frá helstu áfangasíðu til að geyma og verðmætustu vöru okkar.
23. Google Analytics
Ég er ekki fær um að kóða stóra hluti, en að minnsta kosti get ég unnið með CSS skrám og með einföldum kóða. Undanfarið hef ég áhuga á að sjá hvar notendur smella og á meðan að horfa á Hotjar heatmaps svo ég hef ákveðið að setja upp einfaldan smelli rekja spor einhvers í Google Analytics eins og heilbrigður. Þú getur auðveldlega fylgst með smellum notenda á vefsíðunni þinni líka.
Þetta hjálpar mér að auðveldlega kortleggja hegðun notandans. Til dæmis komst ég að því að fólk notaði toppur flakk á síðuna mína 5x meira yfir hápunktur hlekksins í innri texta. Því miður telur það ekki smelli frá notendum með AdBlock.
24. Samtal
Þegar við komumst að fyrstu flæði okkar voru við að tala um hluti af flæði þar sem notandi fær tölvupóst frá Kallkerfi . Ábyrgð okkar hér er að tryggja að öll afrit og skilaboðin sjálfar skili og er í raun gagnlegt fyrir gesti. Gakktu úr skugga um að tölvupósturinn þinn sé að leiðbeina notandanum til góðs árangurs þíns og reyndu alltaf að veita ákveðnar greinar og upplýsingar um hvernig á að halda áfram í flæði.
Síðustu orðin
25. Leyfi dribbble á bak við
Frá því sem ég hef lært og hvernig hönnunin mín hefur breyst á undanförnum 4 árum, hef ég fengið að því marki þar sem Dribbble er ekki endilega staðurinn sem þú vilt búa til hönnunina þína fyrir. Ég hef alltaf stefnt að því að hafa góða punkta með kynþokkafullum prófílmyndum, en það er ekki það sem raunverulegir notendur þurfa og vilja nota.
Hér er dæmi, til vinstri sérðu eitthvað sem ég hannaði fyrir Dribbble. Til hægri sjáum við eitthvað sem ég hannaði þegar ég var í tíma að horfa á fólk sem breytti sniðum sínum og áttaði sig á því að sjónin mín væri ekki að skila því sem þeir þurftu.
Þú getur fengið 500 líkar fyrir björtu brjálaður fjör kartöflu eða rennibrautar en það sem skiptir miklu máli er að notendur þínir muni finna hvernig á að stjórna tíðni tölvupóstskeyta fyrirtækisins eða hvernig á að sía frammistöðu sína.
[- Þessi færsla var upphaflega birt á miðlungs , endurgefin með leyfi höfundarins. -]