Kasutajaliidese prototüüpimine – 14 viisi, kuidas seda paremini teha
Käesolevas artiklis selgitame lahti kasutajaliidese prototüüpimise põhimõtted ja metoodikad. Ühtlasi anname sulle 14 soovitust, kuidas oma prototüüpimise protsessi paremaks teha.
Kui töötad n-ö sega-meeskonnas ning teemaks tuleb kasutajaliidese prototüüpimine, leiate end tõenäoliselt mingil hetkel mõtlemas, kas on parem teha prototüüp kohe koodi tasandil või mitte. Kuna disainerid töötavad tihtipeale koos arendajatega, siis on see mõistatav.
Arendajate vaatenurgast vaadates on tore saada endale kood, mida on võimalik kohe ka kasutada. Samas hävitab see hetkega nii prototüüpimise mõtte kui ka olemuse.
Nimelt on kasutajaliidese prototüüpimise eesmärgiks mängida läbi erinevaid ideid ja variatsioone. Ideede läbimängimine on aeganõudev, mistõttu ei saa seda tegelikult kodeerides teha, sest ka koodi kirjutamine võtab üksjagu aega. Samuti peavad disainerid olema kiired, eksperimenteerimisaltid ning valmis prototüüpi iga hetk prügikasti heitma ja uut tegema.
Disainides kasutajaliidest koodi tasandil, ei ole seda sugugi lihtne ära visata, kuna sa oled investeerinud sellesse liialt aega. Oled kirjutanud aeganõudvat HTML-i, CSS-i ning Javascripti; lisaks mänginud veel erinevate JQuery pistikprogrammidega. Need kõik on tehnilised detailid, mis peaksid tulema mängu alles arendamise faasis.
Meie kogemus
Trinidad Wisemanis teeme projekte Axure RP nimelises prototüüpimiskeskkonnas, mis annab meile vabaduse prototüüpida ka kõige mahukamaid (näiteks eesti.ee portaal) veebikeskkondi kiirelt ja iteratiivselt. Tulemuseks on läbiklikatavad high-fidelity prototüübid, mis on interaktiivsed ning mida on võimalik ka testida.
Interaktiivsus seisneb selles, et loodav veeb näeb välja ja töötab nagu päris, kuid andmebaasi taga ei ole, mistõttu andmed ei salvestu. Mõnikord on ainult üks väike osa sellest funktsionaalne. Arenduse töö muutub oluliselt kergemaks ja prototüübi olemasolu annab neile vabaduse keskenduda sisulistele küsimustele.
Oluline on märkida, et kodeerimine võtab prototüüpimisega võrreldes keskmiselt 6-12 korda rohkem aega! Kui see on kord valmis, siis hakkavad inimesed alateadvuslikult kriitikat vältima ning oma tööd kaitsma.
Järgnevalt toome sinuni 14 viisi, kuidas prototüüpimist paremini teha:
#1. ole kiire ja kaval.
Prototüüp on loodud muutuma ega pea olema täiuslik. Tee oma esimene prototüüp paberil, täienda seda jooksvalt ning kui oled sellega rahul, liigu edasi keerulisemate metoodikate juurde.
#2. mine samm-sammult keerukamaks.
Alusta navigatsioonist ja jätka ruumi planeerimisega, liikudes edasi detailsemate elementide, interaktsioonide ja hiljem visuaalse disaini juurde. Selleks, et saada õigeid tulemusi, pead sa ehitama oma kasutajaliidese prototüüpi samm-sammult.
#3. testi varakult.
Kasutatavuse testimise eesmärgiks on parendada sinu prototüüpi. Testimise tulemused ei ütle sulle, kui hea disainer sa oled, vaid mida sa peaksid tegema selleks, et oma kasutajaliidest paremaks teha.
#4. näita seda oma meeskonnaliikmetele.
Kui prototüüp on juba viimistletud, ei soovi sa seista silmitsi mõne tüütu viimase hetke üllatusega. Äripool, arendajad ja teised meeskonnakaaslased on sinu parimad sõbrad - räägi nendega.
#5. kasuta mõnda prototüüpimiskeskkonda, näiteks Axure RP-d.
Paberprototüübid on toredad, kui teed väiksemat veebilehte või rakendust, kuid suuremate projektide tegemiseks need ei sobi. Suure süsteemi ja mahuka interaktsiooni korral kasuta parem mõnda selleks mõeldud tööriista. Lisaks ei ole hea tava minna koosolekule näitama vaid hulka paberitele joonistatud ekraanivaateid.
#6. lõpetatud disain vs joonis (sketch).
Näidates inimestele valmis või peaaegu valmis versiooni, annavad nad tagasisidet nii värvi, nuppude, kuju kui ka teiste detailide kohta. Teisisõnu elementide kohta, mis on hetkel teisejärgulised ja tulevad mängu alles disainimise faasis.
Siin hakkab prototüüp oma efektiivsust kaotama ning inimestele tuleb selgelt öelda, et hetkel näidatakse kõigest interaktiivset joonist. See tähendab, et kasutajaliidese prototüüp peaks jätma mulje, et tegu ei ole lõppversiooniga.
Parem las ta olla must-valge kui värviline, seda on võimalik igas prototüüpimistarkvaras vastavalt muuta. Samas ei tasu ka liiale minna: kasuta lihtsat veebifonti ning väldi liigse illustratsiooni mulje jätmist.
#7. näita pilte nii vara kui võimalik.
Soovides ärijuhtidelt tagasisidet, saad sa selle juhul, kui näitad neile konkreetseid pilte.
#8. tööta prototüübiga kuni kõik on elementide osas kokkuleppe saavutanud.
Kindlasti mitte varem. Kui hakkad kodeerima või visuaalset disaini tegema, muutub töö ebaefektiivseks ning sealt enam tagasiteed ei ole.
#9. kui kasutad tarkvara, siis joonda oma elemendid ära.
Prototüüp ei pea olema lõpuni disainitud, kuid see ei tohiks olla ka liiga segane.
#10. kui disainid infosüsteeme, väldi lorem ipsumit.
Kasuta päris näiteid päris vormidelt ja päris sisu. Selle puudumisel kopeeri need üle analoogsest süsteemist ning anna andmetele kontekst. Prototüübis olev infoarhitektuur peab töötama ka päris maailmas.
#11. kasutades prototüüpimiskeskkonda, lisa juurde ka kommentaarid.
Enamikel neist on olemas kommentaaride lisamise võimalus. See vähendab hilisemat mõistatamist ning aitab hiljem näha, miks sellisel hetkel just sellised otsused vastu võeti.
#12. soovides tagasisidet, näita oma prototüüpi ja tee selgitustööd.
Kutsu inimesed enda juurde ja näita neile kasutajaliidest või võta oma rüperaal välja ja mine neile külla. Ära saada e-kirju, sest igaühel on olemas arvamus. Parim variant on kutsuda kõik kokku ning lasta neil rääkida nii läbi sinu kui ka koos sinuga.
#13. mängi oma prototüübiga.
Kliki nuppudel, täida vorme, ürita midagi leida ehk kasuta seda lõppkasutaja vaatenurgast. Sa võid leida mitmeid ebaloogilisi kohti enne, kui sa selle kasutajatele üle annad. Kõlab väga loogiliselt, aga paljud disainerid seda tegelikult ei tee.
#14. ole järjepidev.
Olles valmis saanud juba mitmed lehed, ära muuda midagi vormis või selle loogikas. Kui sulle tuleb lõpufaasis hea idee, siis on kaks varianti: kas muudad terve veebilehe kasutusloogikat või jätad muutuse tegemata. Kõige halvem on jätkata järgmistel lehtedel sama vormi, loogika või disainielementidega, samas kui teised lehed jäävad endiseks.
Kuidas edasi?
Need on mõned põhimõtted, mille järgi me Trinidad Wisemanis toimetame. Suur osa neist on tulnud kogemustega ning mitmete vastu eksisime me alguses ka ise. Kindlasti on ka tehnilisemaid trikke, kuid enne peab mõistma põhiprintsiipe. Alusta sketchidest, seejärel täienda ning testi neid kuni prototüüp valmis saab.
Soovides arendajatele head meelt valmistada, võid lõppversiooni ka koodis ära teha, kuid pea meeles, et kogu eelnev töö peab olema tehtud prototüüpimiskeskkonnas.
