Toote ja juhtpaneeli kujundamise 26 sammu

Mida olen õppinud oma 4-aastase tootekujundaja ja armatuurlaua kujundaja reisi ajal

Viimased neli aastat olen jätkanud armatuurlaudade ja rakenduste kujundamist ning õppinud, kuidas suhelda erinevate osakondadega ja kasutada nende teadmisi, et muuta tootedisain paremaks ja efektiivsemaks.
 
Täna jagan kõik sammud, mille olen õppinud ja oma igapäevasesse rutiini lisanud. Need sammud on minu arvates aidanud minust palju paremat disainerit teha ja tahan neid teiega jagada.

1. Eeltöötlus

Hankige võimalikult palju teavet (küsige kolme näidet)

Minu jaoks ei anna miski mulle rohkem selgust kui tõelise toimiva näite nägemine. Uue kliendiga töötades või toote uhiuuel maandumislehel on minu arvates kõige lihtsam paluda kliendil esitada kolm või neli inspireerivat lehte, sest see aitab tõesti mõlemat osapoolt. Pannes oma kliendi ideid lauale panema, saate võimaluse hõlpsalt mõista, mis neile meeldib ja mida nad valmiskujundusest ootavad.
 
Kui töötate mitme meeskonnaga, peaksite püüdma veeta toote arendajatega sama palju aega kui disainerikolleegidega. See, mida ma Tapdaqi kallal töötades olen õppinud, on tõhusa kujundusotsuse tegemise võti selle tagamine, et räägite dev-meeskonnaga nii palju kui saate. Minu puhul on alati juhtumeid, kui mõni probleem on lahendatud, kus ma ei suuda ise seda lahendust leida. Ma ütleksin, et eesmärk on enne arendusse asumist kõrvaldada võimalikult palju küsimusi.

Lisateave persoonide kohta

Alguses pean ütlema, et olin isikute suhtes skeptiline, kuid nüüd on see kõik minu jaoks mõistlik.
 
Nii et täiesti erinevalt oma vanemast protsessist näen, kuidas isiksused on toote omaduste kallal töötades ülitähtsad, eriti kui lahendusel on palju erinevaid servi. See aitab teil mõista, kellele te tegelikult mõeldud olete. Minu eesmärk on umbes neli kuni viis isikut. Parimal viisil isikute saamiseks tegelike kasutajatena aitab see tuvastada probleeme vestluse ajal või kõndides või isiklikult oma lahenduse kaudu.

Persona mall - laadige see alla siit: http://janlosert.com/assets/persona-template.zip

Täpste eesmärkide seadistamine - mida täpselt peaksime jälgima?

Arvan, et enamik disainereid / kliente ignoreerib seda sammu, kuid disaini üks olulisemaid aspekte mõlemale poolele on mõista teie kavandatava toote eesmärke. Me kipume hüppama otse pikslitesse ja vormistame projekti kasutajaliidese kiiresti. Kui see on uhiuus veebisait või uus funktsioon, seadke kindlasti selged eesmärgid, mida soovite saavutada.
 
Kuna kõik on jälgitav, rääkige täpsetest punktidest, mida jälgima hakkate. Näiteks võib see ulatuda uutest registreerumistest kuni paljude klientideni, kes kasutavad krediitkaartidega Paypal vs. Veenduge alati, et teate alguses, kui kõrgele olete püüdnud!
 
P.S. - Seda on teil igal juhul vaja, et hiljem selles protsessis lehtrid seadistada Mixpanelil.

Projekti ülesehitus

Seadke projekti kaust üles ja alustage Moodboardi kogumist

Inspiratsioonisaite on palju - Dribbble, Behance, Pttrns, Pinterest jne. On tõesti lihtne leida sarnaseid projekte, mille kallal töötate. Lisaks võib probleemile, mida kogete ja mida proovite lahendada, olla juba lahendus.
 
Uue projekti kallal alustades seadistan alati kausta nimega kaustad - lähtefailid, ekraanid ja eksport, inspiratsioon ja ressursid. Salvestan kõik, mida leian Internetist, kausta Inspiratsioon, et saaksin seda hiljem kasutada põhiliste tujulaudade loomiseks. See kaust võiks olla täis kõike pistikprogrammide, kogumike või isegi Behance'i juhtumianalüüsidega.

2. Madala truuduse saavutamine

Tahvel

Kui keegi mäletab, ei huvitanud ma oma eelmises artiklis eriti palju raamiraami kvaliteeti. Nüüd kasutan järgmisi meetodeid:
 
Kui tahame lisada uut funktsiooni või protsessi ümber kujundada, istume maha ja kõik koosolekul osalejad hakkavad visandama ideid tahvlile, paberile või isegi iPadi. See toiming võimaldab meil seada kõik meeskonna koosseisu disainerite positsiooni. Hiljem lõpetame kahe disainivalikuga, et näha, milline neist töötab kõige paremini. Proovime alati kogu selle kogemuse läbi käia ja protsessi selle osa jooksul arutada enamikku eelisjuhtumeid. On tõesti ülioluline neid käsitleda nüüd, mitte projekteerimisetapis või veelgi hullem - arenduse ajal. See on siis, kui võite selle asemel kaotada palju aega ja energiat.

Kaardistage kogu ekraanikuva teave (milliseid andmeid kasutaja peab sisestama)

See on aeg minna üle tahvli ja loetleda üles kõik kasutaja sisendid ja lood. Kirjutage üles, mida täpselt peaks kasutaja sisestama konkreetsele ekraanile ja kuidas saab kasutaja soovitud eesmärke saavutada.

Kirjutage üles kõik võimalikud olekud

Kuna kõigil armatuurlaudadel, rakendustel või veebisaitide vormidel on erinevad olekud, on see veel üks oluline samm, mida ei tohiks unustada.
 
Projekteerimisel peame kindlasti tegelema kõigi nendega. Tore on, kui meie eskiisfailides või PSD-des on läikivad graafikud ja lahedad profiilipildid. Kuid tõenäoliselt näevad kasutajad teie rakenduse vastaskülge. Eriti kui nad tulevad teie toote juurde. Selleks on vaja valmis olla. Allpool on näide sellest, kuidas käsitleme ühes oma andmekomponentides tühje olekuid.

Tapdaq - reklaamielementide ristriigid

Valmistage esimene diagramm

Kõik see viib madala truuduse viimase osani. Tänu tahvli ülesande tulemusele teame nüüd kõiki võimalikke olekuid, kasutaja sisendeid ja eesmärke. Kõigi interaktsioonide kokkuvõtteks loon diagrammi ja kui aus olla, siis olen mitu korda seda tehes muutnud oma stiili: Liikudes rastritud paigutusega visandifailidest ristkülikuteni, mis sümboliseerivad iga lehte koos nende allpool olevate nimedega. Sellegipoolest oli protsess alati valus, jõuan tavaliselt olukorda, kus tahame midagi hiljem protsessi muuta või lisada. Nende lahendustega olen tavaliselt sunnitud tegema veel palju samme; nagu joonte, noolte ja piltide asukoha muutmine.

Lõppude lõpuks otsustasime kasutada Camunda Modelerit, mis pole just disaini tööriist. See on lihtne rakendus tehniliste diagrammide loomiseks. Mis kõlab veider, kuid see rakendus on välja töötatud põhiskeemide koostamiseks. Mis kõige tähtsam - kõik loodud on täiesti skaleeritav. Mis tahes punkti saate hõlpsalt lohistada ja see loob teile automaatselt read ja nooled. Võite valida ka erinevat tüüpi punktide hulgast, millest võib abi olla, näiteks esiletõstmiseks, kui kasutaja saab Intercomilt meili. Camunda võimaldab eksportida SVG-sse, mis lihtsustab visandil jälgitavate punktide värvimist.

Tapdaq menüü + ekraanide struktuur (eksport Camunda modelerist)

3. Töö / kujundus

Moodboard

Ma saan alustada tujulaua loomisega, kuna kogun kõik pildid oma kausta Inspiratsioon. Peamiselt kasutan tujulaudu, et arutada oma mõtteid kolleegidega ja kirjeldada mõnda visuaalset ideed, enne kui alustan piksliprotsessiga.

Moodboard kroonikaekraaniga ja erksate siniste värvidega

Esimene mustand

Kujundamine on alati pidev protsess. Te kavatsete suurepärase tulemuse saavutamiseks palju korrata. Koos esimese kavandiga tuleb ka esimese tagasiside kogumine. Tiimikaaslastelt, klientidelt või potentsiaalsetelt kasutajatelt tagasiside saamiseks ei pea te jõudma täiusliku kujundusega pikslitesse. Nende esimeste mõtete saamiseks ja arutelu alustamiseks segan tavaliselt ekraanid meie praegustest kujundustest. See võimaldab meil vähem kui ühe päeva pärast hakata mängima tõeliselt ilusa kujundusega. Saate teha esimese lihtsa prototüübi, et testida, kas asjad on omavahel hästi ühendatud.

Kirjutage oma koopia (toon)

Kopeerimine on kasutajate otsuste üks peamisi aspekte ja võtan seda kujunduse üliolulise osana. Ma ei ole emakeel, kuid olen siiski võimeline määrama koopia tooni. Pole midagi hullemat kui kena kujundus koos segasete dialoogidega, kus kasutajad näevad vaeva järgmise sammu leidmise nimel.

Esimene interntest

Oma esimese mustandiga saate kiiresti luua prototüübi Marvelappis või Invisioonis. See on asi, mida hakkasin hiljuti tegema ja selgub, et see on veel üks hämmastav valideeriv aspekt. Prototüübi abil saate nüüd hõlpsalt helistada oma meeskonna 3 või 4 inimesega ning jagada prototüübi linki nendega ja proovida esitada mõned küsimused, proovides neile konkreetseid vooge / stsenaariume. Nii saate hõlpsalt testida oma küsitlemisoskusi ja loomulikult testida oma disainilahenduse otsust tegelike kasutajate peal, muretsemata raisatud ressursside ja aja pärast. Tavaliselt kipun valima inimesi, kes pole armatuurlaua arendamisega nii palju seotud. Samuti proovige vältida selle vaatamist, kellel on juba varem olnud võimalus prototüübiga mängida.

Etikett

Me kõik teame, kui raske on korras olla. Kuidas pakkuda veel ühte funktsiooni. Tavaliselt põhjustab see räpane visandi- või PSD-faile. Armatuurlaua kasutajaliidese komplekti kavandamisel olen palju õppinud, eriti erinevuste osas, mis võivad tekkida töötamisel start-up'ina ühe disainerina, meeskonnas töötades või oma digitaaltoodete kallal. Tapdaqis töötades olen kindel oma kolleegide oskuste osas ja isegi kui tean, et üritan kõvasti faile korras hoida, on see mõnikord võimatu! Kui töötate meeskonnas, mõtlen oma PSD-le nagu see, et loon need kellelegi teisele. Kasutan reeglit, et kui kaustas on üle 8 kihi, peaksite looma uue.

Armatuurlaua kasutajaliidese komplekt - kaustade struktuur

Leidsin Sketchi jaoks ühe suurepärase pistikprogrammi, mis päästis minu UI-komplekti kallal töötades tunde. Nimeta ümber - https://github.com/rodi01/RenameIt
 
Saate siiski vaadata neid vanu etikettijuhiseid (igatahes töötab enamus punkte mis tahes kasutatava toimetaja jaoks.) - http://photoshopetiquette.com/

Näpunäide - pange kõik lõuendile

Olen kogu aeg vaeva näinud toredate päiste kujundamisega, samal ajal kui ülejäänud lõuend oli valge. Kujundades õppisin kogu sisu esikohale panema - mängin lihtsalt küljenduse ja tüpograafiaga. On palju lihtsam kujundada toredaid detaile ja mängida kogu kontseptsiooniga koos paigas oleva sisuga.

Looge UI elemendid ja hakake Legoga mängima

Olen ilmselt hilinenud peole ja see kõlab selle kirjutamise ajal juba vananenud. Põhjus, miks me pole siin teekonnal ühtegi juhtmekujundust teinud, on lihtne. Joonisel 39 on midagi, mis on minu arvates uskumatu ja mis on "suuruse muutmise omadustega kujundid". See sundis mind lõpuks kõik 50+ Tapdaqi ekraani uuesti looma. See on asi, mis muudab kujundamise hõlpsaks kõigile meeskonna liikmetele. Meie visandifail on nüüd puhas lohistamine. Saate hõlpsalt anda mõne oma meeskonnakaaslase tühja lõuendi ja nad saavad luua peaaegu lojaalseid mustandeid. Tänu sellele suudame kõik juhtme raamimise tööriistad vahele jätta ja alustada peaaegu reaalse välimusega pikslitega.

See käib ka käsikäes sellega, et suudame traatraamid reaalseteks kujundusteks muuta. Iga PM võib luua juhtraami ja siis saan selle hõlpsalt üle võtta ja muuta hiiglaslikuks.

Elementide lohistamine loendis Tapdaq Sketch File

4. Varad ja kohaletoimetamine

Kui olete esimese tagasiside põhjal kujundamise ja iteratsiooni valmis teinud, pole seda veel tehtud. Nüüd on aeg anda oma disainilahendused üle oma inseneridele / tehnikutele.

Spetsifikatsioonid

Minu üks peamisi eesmärke on alati võimalus oma otsustega meeskonnaga suhelda ja võimalikult palju vähendada meie arendajate raskusi, et pakkuda neile parimate võimalike ressursside kasutamist. See on minu jaoks kindlasti kõige olulisem osa minu tööst disainerina.
 
Kuna me dokumenteerisime kogu interaktsiooni ja kõik on meie protsessi algusest valmis, on spetsifikatsioonide loomine tükk. Tavaliselt kirjutan spetsifikatsioone Google'i dokumentidesse või visandifailide ekraanide alla. Tore on käsitleda oma kavandit kõigi funktsioonide selgitustega, et tulevikus saaks igaüks teie failist haarata.

Skeem

Seda tehnikat kasutasime sel ajal, kui olen Badoos meeskonna ja sidusrühmadega esitlusi teinud. See tehnika on kena disainilahenduste printimiseks ja meeskonnaga arutamiseks. Kuid tänapäeval on minu arvates paremaid võimalusi. Nagu näiteks lõpliku prototüübi valmimine.

Sagram Analyticsi rakenduse täielik skeem

Lõplik prototüüp

Minu jaoks on üks võtmeasju, et kogu suhtlus oleks prototüübis alati valmis. Lõpuks on mul tavaliselt 3–5 prototüüpi, et koos meeskonnakaaslastega väikest sessiooni pidada või mõnda konkreetset voogu näidata. Ma kipun ette valmistama kõik eskiisi olekud ühes artboardis ja seejärel dubleerima need artboards, et kõik olekud oleksid eksportimisel valmis.
Nagu varem öeldud, võite kasutada kas Marvelappi või Invisiooni. Tore on lisada oma kujunduse osadele kommentaare, et laiendada oma spetsifikatsiooni veelgi, nii et isegi copywriteril on lihtne minna kontrollima reaalseid piksleid ja voogusid, kui iga koopia ja dialoog töötab vastavalt vajadusele.

Quicktime'i video> märkmed

Kui ma ei esitle meeskonnale või kliendile Hangoutis asju, saadan ekraanile jagatava video, milles tutvustatakse prototüüpi ja selgitatakse kõike, mida ma olen kavandanud. See on minu jaoks kena kinnitus enne iga esitlust, et ma tean vastust igale küsimusele ja võimalikule väljamõeldud suhtlusele, mille otsustasin kujundada. Saab kenasti kasutada ka kaugjuhtimisega meeskondades töötades. Kõigil on igal ajal võimalus kogu interaktsiooni mõtlemist korrata.

Animeeri

Tore lõppkujundus teie kujundusele, mida saate kasutada After Effectsi või põhimõtte järgi. Hea on selgitada, kuidas soovite, et see ja see liiguks või hõljuks.

Stiilijuhend

Inseneride teine ​​oluline punkt on teada, kuidas asjad eri stsenaariumides reageerivad. Mõelge sisendi tõrke olekust või veateate kuvamise kohast. Sama, kuidas väljalülitatud oleku nupp välja näeb, kuhu pöörlejat sisestada jne. Inseneride jaoks on ülilihtne käia lihtsalt läbi oma sümbolite kausta ja stiili ükshaaval, enne kui nad saavad pärast visandifaili isegi kõiki ekraane kodeerima hakata. nagu Lego blokeerib. Stiilijuhend ja kõigi elementide visuaalne ülevaade on tegelikult minu armatuurlaua kasutajaliidese komplekti järgmise värskenduse jaoks üks nõutavamaid funktsioone / kujundusi.

Tapdaqi kasutajaliidese ülevaade - stiilijuhend

5. Lõpp ja test

Kuna oleme oma disainilahendused inseneridele üle andnud, saame keskenduda protsessi viimasele osale - meie otsuste testidele!

Inspectlet / HotJar

Pärast kujunduse muutmist töötavaks koodiks ärge unustage lisada oma Inspectleti või HotJari JS-i katkendid. Olen alati põnevil (või pettunud), kuidas kasutajad meie juhtpaneelil navigeerivad või mida nad mu portfellilehel teevad. Inspectlet on hämmastav kogu teie kasutajaseansi hõivamisel. Sobib suurepäraselt ka suuremate projektide jaoks. Kaasas lihtne / / lehe filtreerimine, mis aitab teil vaadata konkreetse funktsiooni või voo seansse. Me kasutame Tapdaqis Inspectlet. Oma isikliku portfelli jaoks kasutan HotJari tasuta funktsioone soojuskaartide genereerimiseks ja vähemalt mõne minu portfelli sirvinud kasutaja registreerimiseks.

Mixpanel

Mixpanel töötab suurepäraselt meie eesmärkide kinnitamisel (need, mille püstitame oma protsessi alguses). Mixpanel aitab näha, kui palju kasutajaid konkreetseid vooge täidab. Kui palju kasutajaid enne konto loomist langes. Mitu inimest läks peamiselt sihtlehelt poodi ja meie kõige väärtuslikuma toote juurde.

Google Analytics

Ma ei ole võimeline suuri asju kodeerima, kuid vähemalt olen võimeline töötama CSS-failide ja lihtsa koodiga. Viimasel ajal tekkis mul huvi näha, kus kasutajad klõpsavad, ning otsustades Hotjari soojuskaarte, otsustasin ka Google Analyticsi seadistada klõpsu jälgimise põhihiirkonna. Samuti saate hõlpsalt jälgida iga kasutaja klõpsatust oma veebisaidil. Siin on klikkide jälgimise näidiskood - http://pastebin.com/tdmFZN2k

`` `

** 1. Kleebi skript oma koodi **


 funktsiooni pala (nimi, silt) {
 ga ('saada', 'sündmus', nimi, 'klõps', silt, {
 hitCallback: function () {
 console.log ('Sündmus saadeti Google Analyticsi');
 }
 });
 }

** 2. Lisage oma linkidele klõpsatus **

link

`` `

Google Analyticsi jälgimiskoodGoogle Analyticsi jälgimistulemused

Nagu näete, jälgin iga nuppu, linki ja igale kinnituspunktile kinnitan alati erineva sildi. See aitab mul hõlpsalt kaardistada kasutaja käitumist. Näiteks sain teada, et inimesed kasutasid sissejuhatavas tekstis esiletõstetud lingi kohal 5x rohkem navigeerimist. Kodeerige see fragment ka oma veebisaidile.
 
P.S. Kahjuks ei arvestata AdBlocki kasutajate tehtud klikke.
Tänu @snapeuh selle seadistamisel suure abi eest.

Intercom

Kui me leppisime kokku oma esialgsetes voogudes, siis rääkisime sellest osa voogudest, kus kasutaja saab Intercomilt e-kirja. Meie ülesanne on tagada, et kogu koopia ja kiri ise oleks mõttekas ja külastajale tegelikult abiks. Veenduge, et teie e-kirjad suunaksid teie kasutajat teie tulemusele ja proovige alati pakkuda konkreetseid tugiartikleid ja teavet selle kohta, kuidas voos jätkata.

6. Pärast disaini / kuidas ma saan oma tööd juhtida

Eesmärgid

Teekonna viimaseks osaks, mille ma enda jaoks ette võtan, on jagatud töö / Tapdaqiga seotud eesmärkide, isiklike projekti- ja elu-eesmärkide vahel. Kasutan endiselt asju kultiveeritud koodi järgi, et jagada need projektid väikesteks ülesanneteks, mida on lihtne maha kirjutada. Kunagi töötasin korraga 5 erinevat projekti ja lõppes alati pettumusega, kuna ei suutnud midagi üle finišijoone lükata. Tänapäeval on mul eesmärk vabastada iga kuu vähemalt üks asi. See “asi” võib olla ükskõik milline kahest minu portfelli uuest alamlehest, uuest tootest või kliendi uuest sihtlehest. Lihtsalt selleks, et ennast edasi hoida ja viimistlemisega rahul olla.

Algselt pärit Siavash Mahmoudianilt - https://mobile.twitter.com/siavash/status/618093511066435585

Tööruum

Kasutan juba enamuse oma kujunduste jaoks visandit, kuid Instagramis on palju inimesi palunud minu Photoshopi tööala, nii et siin saate minna! http://janlosert.com/assets/workspace.zip

7. Viimased sõnad

See oli ülevaade kõigist sammudest, mida ma oma kujunduse edastamiseks astun. Ma ei järgi ilmselgelt kogu aeg sama rutiini, kuid see annab teile ettekujutuse, kuidas ma töötan.

Jäta tibutamine taha

Selle põhjal, mida olen õppinud ja kuidas minu disainilahendused on viimase 4 aasta jooksul muutunud, olen jõudnud punkti, kus Dribbble on meie disaineritele parim viis meelitada ligi uusi kliente ja näidata oma töid. Kuid see pole tingimata koht, kuhu soovite oma kujunduse luua. Olen alati püüdnud saada kenade pikslitega seksikaid profiilipilte, kuid see pole just see, mida tõelised kasutajad vajavad ja kasutavad. See on üks näide Tapdaqist, midagi, mille olen välja mõelnud mõeldes Instagrami ja Dribbble'i jaoks kena pildistamise peale ja see näeb välja see, kuidas praegune ekraan pärast seda, kui ma olen veetnud tunde vaadates, kuidas inimesed nende profiile redigeerivad, ja pärast seda, kui olen aru saanud, millist teavet nad tegelikult taotlevad ja vajavad.

Konto seaded - enne ja pärast

Võite saada 500 meeldimist kartuli või libiseva pitsa erksa hullumeelse animatsiooni eest, kuid tegelikult on väga oluline, et teie kasutajad leiaksid, kuidas hallata ettevõtte meilide sagedust või kuidas filtreerida nende toimivusanalüütikat.

Tulevik

Minu järgmine missioon on kõige tähtsam sukelduda rohkem UX-i ja uurimistöösse. Et saaksin oma järgmises artiklis jagada ülevaadet UX-i tööriistadest, mida kasutan A / B testimiseks ja andmete kogumiseks. Olen UXi alal veel üsna uus ja mul pole olnud palju võimalusi eelmistel töökohtadel õppida. Kuid praegu on mul kirg jälgida ja jälgida iga kasutaja liikumist iga uue projekti kallal, mille kallal töötan.

Lõpp

Mul on hea meel kuulda teie tööprotsessi kohta, milliseid samme tavaliselt isiklikes projektides ette võtate või kuidas teie meeskondades töötades on protsess erinev. Mulle meeldib näha teiste inimeste tööruume. Ja mis kõige tähtsam, jagage julgelt oma mõtteid kõigi minu protsessi / lisaetappide kohta.
 
Postitan rohkem Tapdaqist ja oma isiklikest projektidest saidil Dribbble.
ja mul on hea meel kuulda teie mõtteid Twitteris.