Digitaalne heaolu tööriist Tundetester

Digitaalne heaolu tööriist Tundetester

UX/UI disain

4. dets 2024

Digitaalne tööriist on veebipõhine teadmisteplatvorm, mille eesmärk on pakkuda noortele teavet ja tuge keerulistes eluolukordades ja emotsioonidega toimetulekuks. Sisu on jagatud kolmeks vanuserühmaks ja täiendavalt kategoriseeritud kolmeks põhiosaks. Eesmärk on pakkuda kiiret, vanusele vastavat ja noortesõbralikku teavet levinud probleemide kohta ning suunata nad tõsisemate probleemide korral, mida nad ei pruugi iseseisvalt lahendada, lasteabisse pöörduma.

Tööriist, mille nimi on "Tundetester", oli algselt kujundusagentuuri poolt loodud interaktiivse PDF-ina. Kuid 2023. aastal, kui lasteabi käivitas oma uue veebilehe, tekkis soov integreerida digitaalne tööriist lehega. See nõudis täiendavat ligipääsetavust, kasutajakogemuse ja -liidese täiustusi. Algsetel PDF-vaadetel oli mitmeid ligipääsetavuse ja järjepidevuse probleemi, mis olid nii arenduse kui ka kasutamise seisukohalt olulised.

Kujundus

Kasutajateekond

Agentuuri loodud PDF-vaated anti mulle Figma failidena, mida hakkasin organiseerima. Minu esimene samm oli kaardistada kasutajateekond, mida noor inimene võiks läbida, et saada vajalikku teavet Tundetesterist, asetades end kasutaja rolli, et luua informatiivne ja optimaalne kogemus.

Stiilijuhend

Järgmisena koostasin komponentide loendi, mida erinevates vaadetes vaja läks. Loodud vaated erinevate lehtede jaoks olid aluseks stiilijuhendi väljatöötamiseks, mis hõlmas komponente, tüpograafiat ja värve. Viitasin tüpograafia ja värvide valikul antud PDF-kujundusele ja lasteabi CVI-le. Eesmärk oli saavutada lõpptulemus, mis vastaks ligipääsetavuse standarditele ning vastaks lasteabi stiilile.

Alates algusest pidin tegelema originaalses PDF-s tuvastatud probleemidega. Pöörasin erilist tähelepanu interaktiivsetele elementidele, kuna algsed nuppude kujundused ei vastanud WCAG nõuetele ja olid taustast eristamatud. Kujundasin need nupud täielikult ümber, muutes algsed valged, õhukesepiirilised nupud heleda kollase täidisega, tumesinise ääre ja tekstiga variantideks.

Pärast esialgse stiilijuhendi loomist hakkasin PDF-vaateid veebile kohandama. Kogu selle protsessi käigus täiustasin pidevalt stiilijuhendit.

Illustratsioonid

Kujunduste uuendamise ajal märkasin illustratsioonide korduvat kasutamist, hoolimata sellest, et alakategooriad käsitlesid erinevaid teemasid. Võtsin aega iga kategooria jaoks ainulaadsete illustratsioonide loomiseks, et paremini esindada nende sisu, lisades mitmekesisust ja säilitades noorte tähelepanu. Inspireerusin olemasolevatest illustratsioonidest, mis koosnesid peamiselt ikoonilaadsetest pisipiltidest, tagades, et iga alakategooria illustratsioon sobiks teemaga, säilitades samas noorusliku ja mängulise lähenemise.

Prototüüpimine

Naastes digitaalse tööriista juurde, lõin esmalt ühe vanuserühma jaoks prototüübi, enne kui jätkasin teistega. Prototüüp osutus hästi läbimõeldud, loogiliseks ja kooskõlas lasteabi stiilijuhendiga, pakkudes sujuvat kasutajakogemust. Arvestades, et liikusin interaktiivsest PDF-st, oli ainuke märgatav probleem digitaalset tööriista lõppvaates, mis suunas kasutaja pöörduma mitmete spetsialistide poole vastavalt probleemile. Arvestades noorte eelistust anonüümsele veebipõhisele abile, otsustasin, et kõik lõplikud vaated suunaksid kasutajad esialgu anonüümsele abile lasteabi veebilehe kaudu, kus saab vestelda või helistada. Minu meeskond nõustus selle otsusega.

Algse PDF-i viimases jaotises oli kaks vaadet: ühes soovitati edasisi samme ja teises esitati julgustav sõnum. Et muuta tööriist kiireks teabeallikaks, ühendasin need üheks vaateks, säilitades rõõmsa kollase tausta, julgustava sõnumi ja edasise juhendamise.

Pärast prototüübi viimistlemist ühe vanuserühma põhjal jätkasin teistega, luues täielikud prototüübid nii lauaarvuti kui ka mobiilivaadete jaoks. Kuigi ma ei teinud laiaulatuslikke teste, andsid minu meeskonnakaaslased, sealhulgas nõustajad ja teenuse juht, tagasisidet. See otsus põhines tööriista varasemal olemasolul ja testimisel PDF-vormingus.

Pärast sisusektsioonide prototüüpide loomist pidin kaaluma, milline näeks välja sisenemine digitaalsesse tööriista. Varem olid igal vanuserühmal eraldi PDF-failid, millest kaks esimest slaidi olid samad - kaanepilt ja tervitus. Otsustasin luua ühtsed sisenemisvaated digitaalsele tööriistale, lisades vanusevaliku võimaluse.

Talituse juhataja kiitis prototüübi heaks, ja me valmistusime suhtlema arendustiimiga edasiste sammude osas.

Täiendavad tegevused

Koosolekul tekkis küsimus, kas sama disainiraamistikku saab kasutada tulevaste sarnaste, aga muu temaatikaga digitaalsete tööriistade jaoks. Arendustiim kinnitas, et see on võimalik. Otsustasime lisada praeguse tööriista kujundusele erinevad stiilitaustad, mida saaks lisada elava saidi valikutesse, hõlbustades tulevaste tööriistade loomist.

Pärast vajalike muudatuste tegemist andsin tööfaili arendustiimi projektijuhi kätte. Hiljem otsustati teha lõplikud vaated prototüübist allalaaditavaks, võimaldades noortel salvestada julgustav sõnum oma isiklikesse seadmetesse. Seega lisasin allalaadimisnupule komponendi ja paigutasin selle lõplikes vaadetes sobivalt.

TEHIK-u hankeprotsessi käigus oli mul võimalus avaldada oma arvamust tehnilise kirjelduse sõnastuse ja spetsifikatsioonide osas.

Arendus

UX/UI disainerina keskendus minu roll Tundetesteri visuaalsetele ja kasutajakogemuse aspektidele, tehes tihedat koostööd arendustiimidega. TEHIK-u meeskond vastutas lasteabi olemasoleva koodibaasi integreerimise eest uue koodiga ning platvormi tehniliste spetsifikatsioonide haldamise eest, samas kui Trinidad Wiseman teostas front- ja back-end arendustöid.

Koostöö toimus iganädalaste koosolekute ja igapäevase suhtluse kaudu Teamsis ja Figma-s, kus arenduse edenemist arutati ning tehti vajalikud kohandused. Minu roll jäi kogu arenduse protsessi jooksul aktiivseks, tagades, et disain vastas kasutajate ootustele, lasteabi nõuetele ja ligipääsetavuse standarditele.

Raamistik

Raamistik loodi võimalikult taaskasutatavaks ja paindlikuks, et tagada lihtne rakendamine tulevaste sarnaste tööriistade jaoks, kuna nii Politsei- ja Piirivalveamet kui ka Sotsiaalministeerium ilmutasid selle vastu huvi.

Kuna algselt oli sisu juba PDF-vormingus ja visuaalselt veebiversiooniga sarnane, ei korraldatud prototüübiga ulatuslikku kasutajatestimist. Küll aga testisime kujundust erinevatel seadmetel ja brauseritel, et tagada ligipääsetavus ja kasutajasõbralikkus.

Ligipääsetavus

Arenduse käigus pöörati erilist tähelepanu ligipääsetavusele, et kõik visuaalsed ja funktsionaalsed elemendid vastaksid WCAG nõuetele.

Ma tundsin Trinidadilt suurt tuge, sest nad on Eestis tuntud oma tugeva ligipääsetavuse alaste teadmiste poolest. Koostöös nendega teostasin vajalikud disainikohandused, näiteks pealkirja hierarhia ja taustagraafika muutmine, et tagada kokkusobivus erinevatel seadmetel ja ekraanisuurustel.

Testimine ja täiustus

Testimise käigus selgus, et nuppude suurust tuleb vähendada ja tausta pilte kohandada, kuna tekst kattus väiksematel ekraanidel taustapiltidega, tehes selle raskesti loetavaks.

Lõpliku toote testi käigus avastasime, et mõned lõppvaated vajavad lisanuppu, nagu allalaadimisvõimalust ja "Tagasi algusesse" nuppu. Lisaks puudus allalaadimisnupp mobiilivaates. Samuti pidime lisama ESF-i logo, mis pidi olema digitaalse tööriista avavaates. Lõplikud muudatused teostati koostöös arendustiimiga, kes lõid ka tehnilise dokumentatsiooni koodi kohta ja algelise kasutusjuhendi.

Pärast ühe kasutajateekonna loomist Tundetestri raamistikule tegime väikese grupi noorte kasutajatega teste ja kogusime tagasisidet. Noored kasutajad hindasid sõbralikku ja mängulist keskkonda, ja neile meeldisid illustratsioonid. Vanemad kasutajad avaldasid aga soovi keerukamate teemade ja täiskasvanulikumalt esitatud sisu järele. See tagasiside oli kasulik ja oleme plaaninud sisu erinevate vanuserühmade jaoks korraldada.

Enesekaemus

Arendajatega koostöö õpetas mulle, kui olulised on disaini pisidetailid ja kui palju arendajad neile tähelepanu pööravad. Samuti õppisin, et on ülioluline disainida igasuguste ekraanisuuruste jaoks, isegi kui disain on esialgu mõeldud töölauavaates, kuna ka väiksemate töölaua ekraanide puhul võivad ilmneda kasutusprobleemid.

Koostöö arendajatega pani mind oma tööle kriitilisemalt otsa vaatama ja sundis keskenduma ja analüüsima disainidetaile. Lisaks oli äärmiselt nauditav töötada meeskonnaga, kes on nii kannatlik ja mõistev. Koostöö sujus, ja kõik osapooled olid väga koostööaltid, toetades teineteise tööd hästi.

Samuti õppisin, et on oluline seista oma sihtrühma eest, ja kui sinu positsioon on õigustatud ning sa suudad oma otsuseid põhjendada, usaldavad ja kuulavad inimesed sind. Kuid see eeldab tõsist ettevalmistust ja analüüsi, et olla teadlik oma sihtgrupi vajadustest ja käitumismustritest.

Mul on väga hea meel, et sain osaleda selles projektis algusest lõpuni läbi oma praktika kahe etapi ja mulle usaldati ka lõplik otsustusõigus arendusfaasis.