Disaini ja arenduse automatiseerimise võimalikkusest – meie õppetunnid Veera disainisüsteemi ehitamisel
Veera (Veebiraamistik) disainisüsteem on riiklike e-teenuste ehitamiseks mõeldud raamistik. See sisaldab järgmisi osi:
- Figma komponentide teek disaineritele;
- HTML ja CSS komponentide teek arendajatele;
- dokumentatsioon ja juhised komponentide kasutamiseks kõigile.
Trinidad Wisemani ja Riigi Infosüsteemi Ameti (RIA) koostöös valmis 2023. aastal Veera uus versioon.
Trinidad Wisemanis pakume disainisüsteemide loomise teenust: kaardistame vajadused, loome Figma UI-KITi ja arendame front-end komponendid koos selge dokumentatsiooniga.
Veera disainisüsteemi ajaloost
Veera nimeline disainisüsteem nägi ilmavalgust 2018. aastal. Veera esimene versioon põhines tollel hetkel äsja valminud Maksu- ja Tolliameti e-teenuste stiiliraamatul (disaini autoriks Velvet). E-teenuste disainisüsteemi algatus tuli Riigi Infosüsteemi Ameti poolt ja selle eesmärgiks oli:
- vähendada riiklike teenuste kasutajaliideste loomisega seotud ajalisi ja rahalisi kulusid;
- pakkuda kodanikele ühtset ja kvaliteetset kasutajakogemust kõikide e-teenuste üleselt;
- koguda kokku parimad praktikad ja lahendused, et kõik saaksid neid kasutada.
Esimene versioon Veera disainisüsteemist ei olnud palju rohkemat, kui lihtsalt nõue kasutada süsteemi, mida veel justkui ei eksisteerinudki. Saadaval olid PDF-kujul stiiliraamatu versioonid, live-versioonid MTA teenustest ja eesti.ee lehe planeeritava versiooni kujundused.
Esimene Veera versioon oli e-MTA põhine ja eksisteeris ainult PDF kujul
Vasakul esmased katsetused rakendada e-MTA stiile SKAIS-is, keskel 2018 lõpus ilmavalgust näinud eesti.ee portaal, paremal lõpuks avalikkuseni jõudnud SKAIS disain
Trinidad Wisemani esimene kokkupuude nõudega Veerat kasutada, tuli SKAIS2 iseteeninduse projektis. Mitmete iteratsioonide tulemusel jõudsime e-MTA hallidest stiilidest sinise lahenduse juurde, mis on jäänud kasutusse tänaseni.
2020. aastal avalikustati Veera pre-alpha versioon. See sisaldas disaineritele mõeldud komponentide teeki Figmas ja veebipõhist dokumentatsiooni. Saadaval olid ka erineva küpsusastmega koodikomponendid.
Senise süsteemi probleemid
Pre-alpha versioonile omaselt olid paljud disainisüsteemi osad poolikud, tehniliselt aegunud või dokumenteerimata. Iga projekt, kus Veera kasutamist oli nõutud, eeldas et projektitiim pidi omale ise süsteemile vastavad vahendid looma. See tähendas, et ühtesid ja samu probleeme lahendati korduvalt.
Versioon 1.0.0
2023. aasta suvel alanud projektiga võtsime eesmärgiks viia lõpuni pre-alpha versiooniga alustatud töö ja vormistada see korrektsel kujul. Põhinedes oma isiklikule kogemusele Veera kasutamisel, teadsime, et energia ja ressursid on mõistlik suunata olemasoleva lahenduse rafineerimisele. Evolutsioon, mitte revolutsioon - vundament oli ju hea!
Seega sai projekti nimeks Veera 1.0.0.
Kombineerides tellija ootusi ja meie kogemusi sarnaste projektidega, seadsime projektile 7 peamist eesmärki:
- säästa disainerite aega ja vaeva, pakkudes kasutusvalmis komponente, mis on ehitatud kasutades Figma parimaid praktikaid ja tehnilisi võimalusi;
- luua kasutusvalmis ja läbimõeldud tume režiimi värvilahendus;
- toetada arendajaid, pakkudes kasutusvalmis HTML ja CSS komponente, mida on võimalik kasutada ükskõik millise front-end raamistikuga;
- automatiseerida võimalikult palju disainerite ja arendajate vahelist koostööd, võttes kasutusele Figma Design Tokenid (Disainikomponentide peatükis räägime neist lähemalt);
- toetada riiklike e-teenuste ligipääsetavuse tagamist erivajadustega kasutajatele, ehitades ligipääsetavuse võimalikult suures osas komponentidesse sisse;
- toetada kasutajasõbralikku sisu ja pisitekstide loomist, koostades põhjalikud sisuloome juhised;
- dokumenteerida põhjalikult kõik komponendid, töövood ja juhised.
Eesmärgid seatud, asusime asja kallale.
Hetkeolukorra kaardistamine
Selleks, et paremini aru saada, kuidas Veerat seni on kasutatud, viisime läbi komponentide inventuuri. Uurisime projekte, kus on Veerat rakendatud, kogusime kokku ja katalogiseerisime erinevate komponentide näited ja variatsioonid. Selle materjali abil tegime otsused ja leidsime vastused järgmistele küsimustele:
- mitmes suuruses komponente peaksime pakkuma? Otsustasime, et toetame kolme suurust (väike, keskmine ja suur), mida kasutasime näiteks nuppude ja vormiväljade puhul;
- milliseid komponente peaksime üldse toetama? Kui mitmes projektis oli kasutatud komponente, mis puudusid Veera pre-alpha versioonist, siis lisasime need versiooni 1.0.0 komponentide nimekirja.
Veera on mõeldud avaliku sektori e-teenuste ehitamiseks, millel on ka ligipääsetavuse tagamise kohustus. Ligipääsetavat digikeskkonda saavad kasutada võimalikult paljud, sealhulgas tugitehnoloogiaid kasutavad erivajadustega inimesed.
Analüüsisime Veera pre-alpha versioonis olevate komponentide vastavust veebi ligipääsetavuse nõuetele. Leitud puuduste põhjal vormistasime tööülesanded, mis said lahenduse komponentide uuendamise raames.
Intervjueerisime seniseid ja tulevasi Veera kasutajaid, et mõista paremini senise lahenduse kitsaskohti ja kaardistada ootusi uuele loodavale versioonile. Suuri üllatusi intervjuud ei valmistanud. Saime kinnitust, et Veera peamised probleemid on konkureerivad versioonid, aegunud tehnilised lahendused, puudulik dokumentatsioon ja haldusmudeli puudumine. Selle pinnalt saime enesekindlust, et edasi minna ja lahenduse kallale asuda.
Disainikomponendid
Disaineritele pakub Veera Figma komponente. Figma on valdkonna juhtiv kasutajaliidesedisaini tööriist.
Hoolimata Figma eeskujulikust funktsionaalsuste komplektist, oli meil projekti alguses suur küsimus: kuidas täpselt lahendada Veeras Design Tokenite loomine ja kasutamine?
