Datapainotteisen web-sovelluksen mobiilikäyttöliittymän suunnittelu ja toteutus Turun yliopisto Tietotekniikan laitos Diplomityö Ohjelmistotekniikka Laatija: Rasmus Viloma Elokuu 2025 Turku Turun yliopiston laatujärjestelmän mukaisesti tämän julkaisun alkuperäisyys on tarkastettu Turnitin OriginalityCheck -järjestelmällä. Diplomityö Oppiaine: Ohjelmistotekniikka Tekijä: Rasmus Viloma Otsikko: Datapainotteisen web-sovelluksen mobiilikäyttöliittymän suunnittelu ja toteutus Ohjaajat: Seppo Helle, Kaapo Seppälä Sivumäärä: 67 sivua Päivämäärä: Elokuu 2025 Tämän työn tavoitteena on selvittää datapainotteisen web-sovelluksen mobiilikäyttöliittymän kehitykseen liittyviä haasteita ja rajoitteita sekä kehittää uusia menetelmiä niiden korjaamiseksi ja käyttökokemuksen parantamiseksi. Työn keskipisteenä on Stockle, joka on kuluttaja-asiakkaille tarkoitettu SaaS-pohjainen dashboard-sovellus osakeomistusten seurantaan ja analysointiin. Dashboard-tyyppisen mobiilikäyttöliittymän skaalautuvuuden ongelmat liittyvät tyypillisesti mobiililaitteiden fyysisiin rajoitteisiin, työpöytäversion käyttöliittymän monimutkaiseen rakenteeseen sekä datan visualisointi komponentteihin, kuten taulukoihin sekä erilaisiin kaavioihin. Työssä käydään läpi käyttöliittymäsuunnittelun periaatteita ja teoriaa, joiden pohjalta pyritään löytämään ratkaisuja havaittuihin ongelmiin sekä suunnitellaan ja toteutetaan Stocklen uusi mobiilikäyttöliittymä. Tehtyjen muutoksien vaikutuksia tutkittiin Stocklen käyttäjille toteutetulla käyttökokemusta mittaavalla kyselytutkimuksella. Kysely koostui neljästä osasta, jotka sisälsivät avoimia ja suljettuja kysymyksiä liittyen käyttäjäprofiiliin, käyttöliittymän rakenteeseen ja navigointiin, datan visualisointiin ja yleiseen käytettävyyteen. Kyselytutkimuksesta saatujen tulosten perusteella voitiin todeta, että mobiilikäyttöliittymään tehdyt muutokset olivat pääosin onnistuneita ja niillä saatiin aikaiseksi merkittäviä parannuksia sovelluksen käyttökokemukseen liittyen. Avainsanat: mobiilikäyttöliittymä, käyttöliittymäsuunnittelu, käyttökokemus, web-sovellus, kyselytutkimus Sisällysluettelo 1 Johdanto 1 2 Käyttöliittymäsuunnittelun periaatteet 3 2.1 Visuaalinen havainto 3 2.1.1 Näköaistin toiminta 3 2.1.2 Hahmolait 4 2.2 Visuaaliset ominaisuudet 7 2.2.1 Väri 7 2.2.2 Muoto 8 2.2.3 Sijainti 8 2.2.4 Liike 8 2.3 Dashboard-käyttöliittymä 9 2.4 Käyttöliittymän asettelu 10 2.4.1 Rakenne 10 2.4.2 Visuaalinen hierarkia 11 2.4.3 Suunnittelutavat 12 2.5 Vuorovaikutus 13 2.6 Visualisointi 14 3 Sovelluksen esittely 18 3.1 Toimintakonsepti 18 3.2 Käyttöliittymän rakenne 20 3.3 Keskeiset ominaisuudet 21 3.3.1 Portfolion seuranta 21 3.3.2 Omistamattomien sijoitusinstrumenttien seuranta 27 3.3.3 Yksittäisen position seuranta 28 3.3.4 Näkymien ja transaktioiden luominen 29 3.4 Nykytila 30 4 Mobiilikäyttöliittymän suunnittelu 32 4.1 Tavoite 32 4.2 Haasteet ja rajoitteet 32 4.3 Suunnitteluperiaatteet 34 4.3.1 Vuorovaikutus 34 4.3.2 Visuaalinen hierarkia 35 4.3.3 Johdonmukaisuus ja priorisointi 35 4.3.4 Navigointi 36 4.4 Suunnitteluprosessi 36 4.4.1 Näytön suunta 36 4.4.2 Rakenne 37 4.4.3 Visualisointi 39 5 Mobiilikäyttöliittymän toteutus 41 5.1 Rakenne 41 5.2 Navigointi 42 5.3 Visualisointi 45 6 Käytettävyystutkimus 48 6.1 Tutkimusmenetelmä 48 6.2 Tutkimuksen kysymykset 48 6.3 Tulokset ja analysointi 52 6.3.1 Käyttäjäprofiili 52 6.3.2 Käyttöliittymän rakenne ja navigointi 55 6.3.3 Datan visualisointi 59 6.3.4 Yleinen käytettävyys ja palaute 62 6.4 Johtopäätökset 64 6.5 Tulevaisuus 65 7 Yhteenveto 67 Lähteet 68 Liitteet 70 Liite 1. Formbricks kyselytutkimus 70 1 1 Johdanto Datapainotteisten web-sovellusten käyttöliittymien suunnittelu ja optimointi mobiililaitteille on haasteellista monesta syystä. Nämä sovellukset koostuvat tyypillisesti vuorovaikutteisista visualisointikomponenteista, kuten kaavioista ja taulukoista, jotka toimivat parhaiten leveämmillä näytöillä. Visualisointikomponenttien esittäminen kapeilla näytöillä vaatii usein täysin uusia suunnitteluratkaisuja sekä kompromisseja. Mobiililaitteiden fyysisten rajoitteiden lisäksi, haasteita tuovat hiiren ja näppäimistön vuorovaikutuksen korvaaminen kosketuspohjaisella vuorovaikutuksella. Onnistuneessa mobiilikäyttöliittymän suunnittelussa käyttäjäkeskeisyys ja adaptiivinen suunnittelu ovat ratkaisevia käsitteitä. Stockle on osakesijoitusten hallintaan tarkoitettu sovellus, jonka avulla käyttäjät voivat hallita ja analysoida omia osakesijoituksiaan hyödyntäen erilaisia datan visualisointikomponentteja. Käyttäjäanalytiikan mukaan lähes puolet käyttäjistä kirjautuvat sovellukseen ensimmäisen kerran mobiililaitteella. Tällä hetkellä sovelluksen nykyinen mobiilikäyttöliittymä ei tarjoa vastaavaa käyttökokemusta kuin työpöytäversio, mikä vaikuttaa negatiivisesti käyttäjien ensivaikutelmaan ja se näkyy korkeana poistumisprosenttina (engl. bounce rate) käyttäjäanalytiikassa. Tutkimuksessa keskitytään tunnistamaan nykyisen mobiilikäyttöliittymän skaalautuvuuden ongelmia ja kehittämään uusia menetelmiä niiden korjaamiseksi. Tavoitteena on parantaa Stocklen käytettävyyttä mobiililaitteilla, erityisesti sovelluksen rakenteen ja visualisointikomponenttien skaalautuvuuden osalta. Tutkimuksen teoreettisessa osuudessa pyritään löytämään erilaisia suunnitteluperiaatteita ja menetelmiä, joilla voidaan parantaa mobiilikäyttöliittymän käyttökokemusta. Lisäksi esitellään Stocklen toimintakonseptia ja ominaisuuksia sekä tarkastellaan sovelluksen käyttökokemuksen tilaa ennen tehtyjä muutoksia. Käytännön osuudessa suunnitellaan ja toteutetaan uusi mobiilikäyttöliittymä löydettyjen havaintojen pohjalta. Toteutetun mobiilikäyttöliittymän käyttökokemuksen muutoksia tutkitaan Stocklen käyttäjille tehdyllä kyselytutkimuksella. Lopputuloksena pyritään saavuttamaan merkittävä parannus mobiilikäyttöliittymän käyttökokemuksessa. Työn tutkimuskysymyksiä ovat: 1. Millaisia käyttökokemukseen liittyviä haasteita voidaan kohdata suunnittelussa ja teknisessä toteutuksessa, kun datapainotteinen web-sovellus skaalataan mobiilikäyttöliittymään? 2 2. Millaisia ratkaisuja havaittuihin haasteisiin löytyy, jotta sovelluksen käyttökokemus ja toiminnallisuus säilyisi? 3. Millainen vaikutus mobiilikäyttöliittymään tehdyillä muutoksilla oli käytettävyystestin perusteella? Tämä työ koostuu yhteensä seitsemästä eri luvusta. Tulevissa luvuissa käydään läpi käyttöliittymäsuunnittelun periaatteita, Stocklen toimintakonseptia, uuden mobiilikäyttöliittymän suunnittelua sekä toteutusta. Työssä toteutettiin myös kyselytutkimus, jossa tutkittiin sovelluksen mobiilikäyttöliittymään tehtyjen muutosten vaikutusta käyttäjien käyttökokemukseen. Viimeisissä luvuissa analysoidaan kyselytutkimuksen tuloksia sekä tehdään yhteenveto työn tutkimuskysymyksiin löydetyistä ratkaisuista. 3 2 Käyttöliittymäsuunnittelun periaatteet Tässä luvussa tarkastellaan käyttöliittymäsuunnittelun teoreettisia perusteita, keskittyen visuaalisen havainnon ja hahmottamisen toimintaan sekä visuaalisiin ominaisuuksiin. Luvussa perehdytään myös käyttöliittymäsuunnittelulle olennaisiin ominaisuuksiin, kuten rakenteen ja hierarkian suunnitteluun sekä Stocklessa esiintyviin vuorovaikutus- ja visualisointikomponentteihin. Luvun tavoitteena on muodostaa teoreettinen pohja työn myöhemmille luvuille, joissa käsitellään Stocklen mobiilikäyttöliittymän suunnittelua ja toteutusta. 2.1 Visuaalinen havainto 2.1.1 Näköaistin toiminta Käyttöliittymäsuunnittelussa on keskeistä ymmärtää ihmisen visuaalisen havainnoinnin prosessi, joka ohjaa käyttäjien tapaa tulkita ja käsitellä käyttöliittymien visuaalisia elementtejä. Visuaalinen havainto on monivaiheinen prosessi, joka muodostuu ihmisen aivoissa, jonne silmän aistinsolut välittävät informaatiota näköhermon kautta. Ulkoiset visuaaliset ärsykkeet sekä yksilön aiemmat kokemukset, vaikuttavat aktiivisesti havainnointiprosessin toimintaan. Havainnointiprosessi alkaa jo verkkokalvolla, jossa tapahtuu esikäsittelyä ja valintaa siitä, mitä tietoa välitetään aivoille jatkokäsittelyyn. Näin ollen aivot eivät vastaanota visuaalista informaatiota passiivisesti, vaan verkkokalvon suorittama esikäsittely varmistaa, että signaali on jo kertaalleen käsitelty ennen sen siirtymistä aivoihin, mikä tekee prosessista aktiivisen ja yksilöllisen (Koponen, Hilden, & Vapaasalo, 2016). Ihmisen muistijärjestelmä koostuu kolmesta eri vaiheesta, joita ovat: ikoninen muisti, työmuisti ja pitkäkestoinen muisti. Edellä mainitut kolme vaihetta mahdollistavat visuaalisen tiedon vastaanottamisen, käsittelyn ja säilytyksen tulevaa käyttöä varten. Ensimmäisessä vaiheessa tiedon prosessointi tapahtuu lyhytaikaisessa, ikonisessa muistissa, jossa verkkokalvon ja näköhermon kautta saapuva visuaalinen tieto säilyy alle sekunnin ajan. Prosessi tapahtuu täysin automaattisesti ja tiedostamattomasti, riippumatta siitä, mihin huomiota kohdistetaan. Tällöin havainnoidaan visuaalisia peruspiirteitä eli kohdennettavia, kuten muotoja, värejä ja liikettä. Ihminen pystyy havaitsemaan edellä mainitut piirteet pääosin erillisinä, jolloin niiden samanaikainen havainnointi ei vaikuta toisiinsa negatiivisesti. 4 Toisessa vaiheessa ikonisesta muistista saatu tieto siirtyy työmuistiin, jossa tietoa yhdistellään merkityksellisiksi visuaalisiksi kokonaisuuksiksi, joita käytetään tietoiseen ajatteluun ja päätöksentekoon. Työmuisti on selvästi ikonista muistia hitaampi ja sen kapasiteetti on rajallinen, sillä se pystyy käsittelemään kerrallaan vain muutaman yksikön tietoa. Tieto säilyy työmuistissa muutamista sekunneista tunteihin. Työmuistin kapasiteetin rajallisuus edellyttää, että visuaaliset kokonaisuudet ovat selkeitä ja helposti tunnistettavia. Ilman toistoa tieto häviää nopeasti, mutta toistamalla se voidaan siirtää kolmanteen vaiheeseen eli pitkäkestoiseen muistiin. Pitkäkestoisessa muistissa tieto säilyy lähes pysyvästi, ja se perustuu hermoverkoston yhteyksiin, joissa tiedot linkittyvät toisiinsa assosiaatioiden avulla ja yhdellä tietoyksiköllä voi olla muistissa useampi assosiaatio. Tämän ansiosta aiemmin opitut muodot, kuviot ja symbolit voidaan tunnistaa nopeasti (Few, Show Me the Numbers - Designing Tables and Graphs to Enlighten, 2012). 2.1.2 Hahmolait Hahmolait (engl. Gestalt principles) ovat 1920-luvulla Saksassa kehitettyjä hahmopsykologian periaatteita, jotka kuvaavat ihmisen visuaalisen hahmottamisen ja havaintokyvyn toimintaa, erityisesti hahmojen, muotojen ja järjestyksen jäsentämisessä. Käyttöliittymäsuunnittelussa hahmolakeja käytetään käyttöliittymän elementtien järjestämiseen loogisiksi kokonaisuuksiksi, jotka parantavat käyttöliittymän selkeyttä ja käytettävyyttä. Saksankielinen termi "gestalt" viittaa kokonaisuuteen, muotoon tai hahmoon. Hahmopsykologian tutkijoiden mukaan ihmisen aivot pyrkivät organisoimaan näköhavaintoja automaattisesti säännönmukaisiksi kuvioiksi ja rakenteiksi, vaikka näkökentässä ei olisikaan selkeitä rajoja tai ääriviivoja. Tutkijoiden havaintojen pohjalta kehitettiin joukko periaatteita, jotka kuvaavat, mitkä visuaaliset ominaisuudet johtavat havaittavien elementtien ryhmittymiseen (Few, Information Dashboard Design: Displaying data for at-a-glance monitoring, 2013). Alla esitettynä kahdeksan yleisintä hahmolakia, jotka tarjoavat useita hyödyllisiä näkökulmia ja joita voidaan hyödyntää suoraan esimerkiksi dashboard-sovellusten suunnittelussa. Niiden avulla voidaan ohjata tiedon esittämistä visuaalisesti, kuten järjestämällä tietoa loogisiksi kokonaisuuksiksi, erottelemalla eri tietokokonaisuuksia tai korostamalla tiettyä tietoa selvästi 5 muusta tiedosta eroavaksi. Hahmolakien suomenkieliset käännökset on otettu teoksesta Tieto näkyväksi (Koponen, Hilden, & Vapaasalo, 2016). 1. Läheisyyden laki (engl. The Principle of Proximity) Lähekkäin sijoitetut objektit mielletään kuuluvan samaan ryhmään, vaikka ne eroaisivat toisistaan muodon, värin tai koon suhteen. Käyttöliittymän suunnittelussa läheisyyden laki on erityisen tärkeä, kun pyritään jäsentelemään tietoa ja luomaan loogisia hierarkioita tai ryhmittymiä sovelluksen käyttöliittymän asettelun sisällä. Periaatteen avulla voidaan muodostaa epäsuoria yhteyksiä eri elementtien välille ilman, että tarvitaan selkeitä rajauksia tai liitoksia. 2. Samankaltaisuuden laki (engl. The Principle of Similarity) Objektit, joilla on samankaltaisia visuaalisia ominaisuuksia, kuten muoto, väri, koko tai suunta, hahmotetaan liittyvän toisiinsa tai kuuluvan samaan ryhmään. Samankaltaisuuden periaate on keskeinen visuaalisten hierarkioiden luomisessa ja tiedon jäsentämisessä. Samankaltaisuuden avulla voidaan luoda malleja, osoittaa yhteyksiä eri elementtien välillä sekä ohjata käyttäjää käyttöliittymässä. Tämä periaate on erityisen hyödyllinen käyttöliittymäsuunnittelussa, sillä sen avulla voidaan luoda esimerkiksi helposti tunnistettavia kuvakkeita ja jäsentää tietoa eri kategorioihin. 3. Jatkuvuuden laki (engl. The Principle of Continuity) Objektit, jotka muodostavat yhtenäisen tai kohdistetun linjan, mielletään yhteenkuuluviksi, vaikka ne risteäisivät muiden objektien kanssa. Ihmisen aivot pyrkivät jatkamaan sujuvia kuvioita ja muotoja, välttäen äkillisiä suunnanmuutoksia. Käyttöliittymäsuunnittelussa jatkuvuuden periaate on tärkeä sujuvamman käyttökokemuksen luomisessa, käyttäjän ohjaamisessa sekä huomiota kiinnittäessä ja navigointia parantaessa, mikä tekee suunnittelusta intuitiivisempaa ja yhtenäisempää. Jatkuvuuden periaatetta voidaan hyödyntää kohdistamalla elementtejä, käyttämällä visuaalisia suuntavihjeitä ja luomalla visuaalisia polkuja. 4. Sulkeutuvuuden laki (engl. The Principle of Closure) Objektit, jotka voidaan tulkita joko avoimiksi, epätäydellisiksi tai epätavallisiksi muodoiksi, havaitaan kuitenkin usein kokonaisina ja säännöllisinä muotoina, sillä ihmisillä on luonnollinen taipumus välttää keskeneräisiä ja epäselviä visuaalisia ärsykkeitä. Sulkeutuvuuden laki viittaa siihen, että hahmotamme avoimista ja 6 epätäydellisistä muodoista säännöllisiä kuvioita, vaikka niistä puuttuisikin kuviolle tai muodolle olennaisia osia. 5. Yhteisen alueen laki (engl. The Principle of Common Region) Objektit, jotka sijaitsevat selkeästi rajatulla alueella, havaitaan helposti kuuluvan yhteiseen kokonaisuuteen, ja niiden oletetaan jakavan yhteisiä ominaisuuksia tai toimintoja. Rajattu alue voi muodostua ääriviivoista, taustaväristä tai taustakuviosta, kuitenkin niin, että se on selkeästi erottuva alueen sisällöstä. Ihmisen visuaalinen havainnointikyky pyrkii luonnostaan järjestämään ja kategorisoimaan näköärsykkeitä ryhmittelemällä niitä yhteisen alueellisen kontekstin mukaan. Yhteisen alueen periaate on keskeinen visuaalisen informaation järjestämisessä, sillä se auttaa ryhmittelemään selkeästi rajatulla alueella sijaitsevat objektit yhtenäisiksi kokonaisuuksiksi, mikä edistää tiedon hahmottamista ja ymmärtämistä. 6. Yhdistyneisyyden laki (engl. The Principle of Connectedness) Objektit, jotka on yhdistetty toisiinsa esimerkiksi viivojen avulla, havaitaan kuuluvan samaan ryhmään selkeämmin kuin objektit, joilla ei ole näkyvää yhteyttä. Yhdistyneisyyden laki helpottaa käyttäjää ymmärtämään käyttöliittymän eri elementtien välisiä suhteita, ja sen avulla voidaan ohjata käyttäjän katsetta, luoda liikkeen tuntua, edistää visuaalista johdonmukaisuutta sekä korostaa keskeistä tietoa. 7. Yhteisen liikkeen laki (engl. The Principle of Common fate) Objektit, jotka liikkuvat samaan suuntaan, samalla nopeudella tai samankaltaisella liikeradalla, havaitaan usein kuuluvan yhteen ja muodostavan yhtenäisen kokonaisuuden. Yhteisen liikkeen periaate auttaa hahmottamaan monimutkaisia visuaalisia ärsykkeitä selkeämmin ja jäsennellymmin, mikä parantaa informaation ymmärrettävyyttä. 8. Hyvän muodon laki (engl. The Principle of Good Figure) Objektit, jotka ovat visuaalisesti monimutkaisia, pyritään automaattisesti havainnoimaan yksinkertaisempina ja helpommin ymmärrettävinä muotoina. Hyvän muodon laki, joka tunnetaan myös nimellä Prägnanzin laki, pyrkii vähentämään monimutkaisuutta, ohjaamalla aivoja tulkitsemaan visuaalisia ärsykkeitä siten, että ne näyttäytyvät mahdollisimman yksinkertaisina, symmetrisinä ja järjestäytyneinä, vaikka alkuperäiset objektit voisivat olla visuaalisesti monimutkaisempia (Nielsen, 2024). 7 2.2 Visuaaliset ominaisuudet Käyttöliittymän ja sen elementtien ennakoitavuus sekä johdonmukaisuus tukevat käyttäjän kykyä muodostaa mielikuva siitä, miten käyttöjärjestelmä toimii ja käyttäytyy erilaisissa tilanteissa. Aiemmat kokemukset ja tuttuus muiden käyttöliittymien kanssa voivat lyhentää oppimiskäyrää sekä parantaa käyttökokemusta. Helposti ennakoitavan käyttöliittymän avulla käyttäjät voivat olettaa järjestelmän toimivan oletusten tai aikaisempien kokemusten mukaisesti, mikä vähentää kognitiivista kuormitusta ja tarvetta oppia uusia toimintoja. Johdonmukaisuus puolestaan luo visuaalista ja toiminnallista yhtenäisyyttä käyttöliittymän eri elementtien välillä, joka taas helpottaa järjestelmän omaksumista sekä tukee yhtenäistä käyttökokemusta. Ennakoitavuutta ja johdonmukaisuutta voidaan parantaa hyödyntämällä visuaalisia ominaisuuksia, kuten värejä, muotoja, sijaintia ja liikettä. Näiden ominaisuuksien avulla voidaan myös korostaa visuaalista hierarkiaa (engl. visual hierarchy), jonka tarkoitus on priorisoida visuaalisesti käyttöliittymän elementtejä ja ohjata käyttäjän huomiota tärkeimpiin toimintoihin. Visuaaliset vihjeet (engl. visual cues) puolestaan tukevat käyttäjää esimerkiksi navigoinnissa ja helpottavat interaktiivisten elementtien tunnistamista, jotka ovat keskeisiä käyttöliittymän toiminnallisuuden kannalta. 2.2.1 Väri Väri muodostuu kolmesta keskeisestä ominaisuudesta: sävystä, kylläisyydestä ja kirkkaudesta. Sävy viittaa värin perusominaisuuteen, joka määrittää sen sijainnin värispektrissä, esimerkiksi punainen, sininen tai keltainen. Kylläisyys kuvaa värin voimakkuutta tai puhtautta, jolloin sen asteikko vaihtelee täysin harmaasta sävyn täyteen voimakkuuteen. Kirkkaus eli valööri, määrittää värin vaaleuden tai tummuuden asteikolla tummasta vaaleaan. Stephen Few käyttää termiä intensiteetti viitatessaan värin kylläisyyden ja kirkkauden yhdistelmään. Few korostaa, ettei kylläisyyden ja vaaleuden teknistä eroa ole tarpeen täysin ymmärtää, vaan näitä ominaisuuksia voidaan käsitellä yhteisesti intensiteetin käsitteen kautta. Värien havaitseminen ei myöskään ole absoluuttista, vaan se on merkittävästi riippuvainen ympäröivästä kontekstista (Few, Information Dashboard Design: Displaying data for at-a-glance monitoring, 2013). Näitä värin ominaisuuksia voidaan hyödyntää tehokkaasti käyttöliittymissä, erityisesti tiedon erottelussa ja korostamisessa, mikä parantaa visuaalista ilmaisua ja käyttäjäkokemusta. 8 2.2.2 Muoto Muoto koostuu useista eri ominaisuuksista, kuten pituudesta, leveydestä, suunnasta, geometrisuudesta, koosta, erikoismerkeistä ja rajatuista alueista. Pituutta, leveyttä ja suuntaa voidaan hyödyntää esimerkiksi kuvaajissa ja mittareissa kvantitatiivisten arvojen korostamiseen. Kokoa puolestaan käytetään esitettävän tiedon tärkeyden ilmaisemiseen visuaalisissa elementeissä, kuten teksteissä ja kuvioissa, jolloin elementtien koko heijastaa tiedon merkitystä ja painoarvoa. Yksinkertaiset muodot, ikonit ja erikoismerkit voivat puolestaan houkutella käyttäjän huomion, erityisesti silloin, kun se ei muuten automaattisesti kiinnittyisi tärkeisiin kohteisiin. Lisäksi sulkeminen, kuten kehys tai taustaväri, on tehokas keino ryhmitellä tietoa ja korostaa sen merkitystä (Few, Information Dashboard Design: Displaying data for at-a-glance monitoring, 2013). 2.2.3 Sijainti Ihmisen kyky hahmottaa tilaa perustuu ensisijaisesti kaksiulotteisiin ulottuvuuksiin. Tämä tarkoittaa, että pystysuuntaiset ja vaakasuuntaiset sijainnit pystytään havaitsemaan tarkemmin, mutta syvyyden havaitseminen tuottaa selvästi enemmän haasteita. Kaksiulotteisilla näytöillä on mahdollista luoda illuusio kolmiulotteisuudesta hyödyntämällä 3D-projektiota, jossa kolmiulotteinen tila simuloidaan kaksiulotteisella pinnalla. Kolmiulotteisuutta tulisi kuitenkin välttää esimerkiksi kvantitatiivisen tiedon visualisoinnissa, sillä syvyyden tulkinta vaatii enemmän kognitiivista prosessointia ja voi aiheuttaa vääristyksiä, kuten päällekkäisyyksiä ja perspektiiviharhoja. Tämä heikentää tiedon tarkkuutta sekä sen tulkintaa. Näin ollen kaksiulotteinen esitys on huomattavasti selkeämpi kvantitatiivisen tiedon visualisoinnissa, erityisesti kuvaajissa, joissa datapisteet sijoittuvat määrälliselle asteikolle (Few, Information Dashboard Design: Displaying data for at-a-glance monitoring, 2013). 2.2.4 Liike Ihmisen näköaisti on kehittynyt reagoimaan herkästi äkillisiin muutoksiin näkökentässä, kuten esimerkiksi vilkkuviin objekteihin käyttöliittymässä. Liike on tehokas visuaalinen ominaisuus, jonka avulla voidaan ohjata käyttäjän huomiota nopeasti. Käyttöliittymissä liikettä voidaan hyödyntää erityisesti reaaliaikaisen tiedon esittämisessä. Tällöin toistuva liike voi toimia signaalina tiedon reaaliaikaisuudesta tai kiireellisistä toimenpiteistä, jotka edellyttävät nopeaa reagointia. Liikkeellä voidaan myös viestiä käyttäjälle käyttöliittymässä tapahtuvista prosesseista, kuten esimerkiksi latausprosessin edistymisestä tai virhetilanteista. 9 Liikettä tulee kuitenkin käyttää harkiten, sillä liiallinen tai häiritsevä liike saattaa ärsyttää käyttäjiä ja siten heikentää käyttöliittymän käytettävyyttä. 2.3 Dashboard-käyttöliittymä Stocklen käyttöliittymänä toimii dashboard-tyyppinen käyttöliittymä, joka mahdollistaa käyttäjän osakeomistuksista muodostettujen laajojen datamassojen hallinnan ja reaaliaikaisen visualisoinnin. Nykypäivän dashboard-käyttöliittymät määritellään tyypillisesti web- pohjaisiksi, vuorovaikutteisiksi ja usein reaaliaikaisiksi visualisointityökaluiksi. Ne kokoavat suuria määriä monimutkaista dataa useista eri lähteistä, kuten tiedostoista, tietokannoista tai ohjelmointirajapainoista. Dashboardien ensisijainen tarkoitus on esittää kerättyä dataa yhtenä kokonaisvaltaisena näkymänä, jossa käyttäjälle olennainen tieto on koottu ja jäsennelty yhdelle näytölle siten, että se on nopeasti havainnoitavissa tavoitteiden saavuttamiseksi (Few, Information Dashboard Design: Displaying data for at-a-glance monitoring, 2013). Dashboard-käyttöliittymässä datan visualisointiin käytetään erilaisia visuaalisia elementtejä, kuten kuvaajia, taulukoita, mittareita, listoja tai karttoja. Visuaalisten elementtien tavoite on auttaa käyttäjiä havaitsemaan datasta malleja, trendejä tai poikkeavuuksia, sekä tehdä datan ymmärtämisestä intuitiivisempaa. Hyvin suunniteltu ja visualisoitu dashboard-käyttöliittymä antaa käyttäjille mahdollisuuden analysoida, esittää ja seurata suuria määriä dataa helposti ymmärrettävässä ja visuaalisesti miellyttävässä muodossa. Dashboard-käyttöliittymän päätavoitteena on tehostaa ja nopeuttaa datan tulkintaa, mikä puolestaan tukee käyttäjien tietoista päätöksentekoa. Dashboard-käyttöliittymien suunnittelu pienemmille näytöille, kuten mobiililaitteille ja tableteille asettaa merkittäviä haasteita, jotka liittyvät rajalliseen näyttötilaan, vuorovaikutustapoihin ja tiedon visuaaliseen esittämiseen. Vaikka dashboardin ensisijainen tarkoitus on tarjota kattava näkymä monimutkaisesta datasta, on kuitenkin olennaista varmistaa, että visuaaliset elementit, kuten kuvaajat, taulukot ja mittarit ovat selkeästi ymmärrettäviä myös pienikokoisilla näytöillä. Rajallinen näytön koko edellyttää visuaalisten elementtien huolellista valintaa ja optimointia siten, että niiden informaatioarvo säilyy, eikä käyttöliittymä vaikuta ylikuormitetulta. Lisäksi navigointirakenteen on oltava yksinkertainen ja intuitiivinen, jotta käyttäjät voivat vaivattomasti siirtyä eri näkymien välillä. Erityistä huomiota tulee kiinnittää vuorovaikutuksen toteuttamiseen kosketusnäytöillä, sillä käytettävyyteen ja vuorovaikutuksen tarkkuuteen voi kohdistua riskejä, mikäli suunnittelu ei 10 ole optimoitua mobiilikäyttöön. Lopullisena tavoitteena on kuitenkin mahdollistaa datan tehokas tulkinta ja päätöksenteko myös silloin, kun käytössä on pienempi näyttö. 2.4 Käyttöliittymän asettelu 2.4.1 Rakenne Käyttöliittymän asettelulla (engl. interface layout) tarkoitetaan visuaalisten elementtien järjestystä ja organisointia sovelluksen käyttöliittymässä. Web-sovelluksen työpöytäversiossa käyttöliittymän asettelun perusrakenne muodostuu ikkunoista, jotka jakautuvat kahteen tyyppiin, ensisijaiseen pääikkunaan ja yhteen tai useampaan toissijaiseen ikkunaan. Pääikkuna muodostaa sovelluksen perustan ja se jakautuu pienempiin, loogisesti ryhmiteltyihin alueisiin. Näitä alueita ovat navigointialue, sisältöalue, sovelluspalkki ja sivupalkki, jotka sisältävät keskeisiä vuorovaikutteisia toimintoja ja ominaisuuksia. Toissijaiset ikkunat muodostuvat tyypillisesti dialogeista ja niiden tarkoitus on toimia pääikkunan tukena, tarjoamalla pääsyn harvemmin käytettyihin sisältöön tai ominaisuuksiin (Cooper, Reimann, Cronin & Noessel, 2014). Navigointialueen tarkoituksena on toimia sovelluksen keskeisenä hallintaelementtinä, jonka avulla käyttäjät voivat intuitiivisesti navigoida sovelluksen eri osioiden välillä. Navigointialue luo selkeän hierarkian eri toiminnallisuuksien ja osioiden välille, mikä helpottaa käyttäjiä hahmottamaan sovelluksen rakenteen ja löytämään tarvitsemaansa tietoa nopeammin. Käytettävän laitteen näytön leveydestä riippuen navigointialue voidaan muodostaa kolmesta eri komponentista: navigointilaatikosta, navigointikiskosta tai navigointipalkista (Google, 2024). Nämä komponentit sisältävät tyypillisesti linkkejä, valikoita ja muita pienempiä vuorovaikutteisia komponentteja, joiden avulla käyttäjät voivat hallita sovelluksen keskeisiä toimintoja, kuten navigointia tai vuorovaikutusta eri osioiden välillä. Sisältöalueen rakenne voi koostua yhdestä, kahdesta tai kolmesta rinnakkaisesta paneelista. Googlen kehittämän Material Design 3 -muotokielen ohjeistuksen mukaisesti yhden paneelin käyttö on suositeltavaa puhelimien ja tablettien näytöillä, kun taas suuremmilla näytöillä, kuten työpöytänäytöillä, voidaan käyttää yhtä, kahta tai kolmea paneelia. Sisältöalueella vähintään yhden paneelin tulee olla leveydeltään dynaaminen, jolloin se mukautuu näytön leveyden mukaan. Mikäli käytössä on enemmän kuin yksi paneeli, toinen paneeleista voi olla dynaaminen tai kokonaan kiinteä. Sisältöalueen paneelit voivat olla sisällöstä riippuen vieritettäviä horisontaalisessa tai vertikaalisessa suunnassa. Paneelit sisältävät myös valtaosan 11 sovelluksen vuorovaikutteisista komponenteista, kuten tekstisisällöt, listat, kortit, painikkeet, kuvaajat ja taulukot (Google, 2024). Sovelluspalkki (engl. app bar) sisältää toimintoja ja tietoa, jotka ovat tyypillisesti kontekstisidonnaisia, jolloin ne usein liittyvät aktiivisena olevaan sisältöalueeseen. Näitä toimintoja ovat esimerkiksi navigointielementit, kuten linkkipolut (engl. breadcrumbs) ja sisältöalueen otsikot. Se voi sisältää myös muita toimintoja, joilla pääsee käsiksi sovelluksen muihin keskeisiin toiminnallisuuksiin. Sovelluspalkin koko näytön mittainen leveys ja sen sijoittuminen näytön yläosaan takaa sen hyvän näkyvyyden ja helpon saavutettavuuden käyttäjälle. Sivupalkki (engl. sidebar) on vuorovaikutteinen paneeli, joka sijoittuu pääikkunan oikeaan tai vasempaan reunaan. Sen tarkoitus on toimia tukena sisältöalueelle tarjoamalla lisätietoja, toimintoja tai navigointivaihtoehtoja ilman, että ne keskeyttävät vuorovaikusta sisältöalueen kanssa. Sivupalkille tyypillisiä ominaisuuksia ovat sen kiinteä leveys, vaihtuva näkyvyys ja sisällön vierittäminen ainoastaan vertikaalisessa suunnassa (Google, 2024). Pienemmillä näytöillä sivupalkin tulisi olla kelluva, jolloin sen sisältö asettuu sisältöalueen päälle estäen muiden sovellustoimintojen suorittamisen paneelin ollessa näkyvillä. 2.4.2 Visuaalinen hierarkia Visuaalisen hierarkian tarkoitus on luoda käyttäjille intuitiivinen asettelumalli (engl. layout), jossa visuaaliset elementit järjestetään strategisesti niin, että ne ohjaavat käyttäjän huomiota ennalta määritettyjen prioriteettien mukaan. Visuaalisessa hierarkiassa on tärkeää ymmärtää käyttäjän tarpeita, jotta hierarkiasta voidaan muodostaa looginen kokonaisuus, joka korostaa käyttöliittymän ensisijaisia tavoitteita asettamalla sen elementeille erilaisia painoarvoja (Tidwell, Brewer, & Aynne, 2020). Hierarkian prioriteetteina voi toimia esimerkiksi navigointijärjestys tai esitettävän tiedon tärkeysjärjestys. Parhaimmillaan visuaalinen hierarkia toimii käyttöliittymässä visuaalisina opasteina, jotka ohjaavat käyttäjää huomaamattomasti. Visuaalisen hierarkia periaate perustuu kognitiivisen psykologian ja havaintoteorian käsityksiin siitä, miten ihminen vastaanottaa ja jäsentää visuaalista informaatiota silmien ja aivojen välityksellä. Visuaalisen hierarkian keskeisimmät ominaisuudet ovat koko, väri, kontrasti, tyhjä tila (engl. white space) ja sijoittelu. Elementtien sijoittelussa on olennaista huomioida ihmisen luontainen lukemisjärjestys, joka etenee tyypillisesti ylhäältä alas ja vasemmalta oikealle, 12 poikkeuksena kulttuuriset erot kielissä, joissa lukeminen tapahtuu oikealta vasemmalle. Tämän vuoksi tärkeimpien elementtien tulisi sijaita käyttöliittymässä vasemmassa ylänurkassa (Apple, 2024). Suuremmat elementit kiinnittävät käyttäjän katseen herkemmin, ja värisävyjen intensiivisyys korostaa tehokkaasti elementtien visuaalista painoarvoa. Kontrastilla voidaan luoda erottuvuutta sekä syvyyttä elementtien välillä. Edellä mainitut ominaisuudet ovat edellytys toimivalle visuaaliselle hierarkialle, joka mahdollistaa sujuvan käyttökokemuksen sekä edistää loogisen kokonaisuuden muodostumista. Vuorovaikutteisten elementtien hierarkiassa on tärkeää varmistaa riittävä tila elementtien ympärillä, jotta ne ovat selkeästi havaittavissa ja käytettävissä. Liian tiiviisti sijoitetut elementit voivat merkittävästi heikentää käyttökokemusta, sillä niiden visuaalinen erottelu on vaikeampaa, mikä taas saattaa vaikeuttaa kriittisten toimintojen suorittamista käyttöliittymässä (Apple, 2024). Typografian osalta fontin koko, paino ja riviväli luo rakenteellisia tasoja, joilla voidaan priorisoida esitettävää tietoa ja luoda selkeä hierarkia tekstisisältöön. 2.4.3 Suunnittelutavat Responsiivinen suunnittelu (engl. responsive design) viittaa käyttöliittymäsuunnittelun periaatteeseen, jonka tarkoituksena on mukauttaa web-sovelluksen asettelu ja rakenne dynaamisesti käyttäjän laitteen näytön koon, resoluution ja suunnan mukaisesti (Schade, Responsive Web design (RWD) and user experience, 2020). Web-sovellusten käyttöliittymän responsiivisuuden toteutukseen käytetään CSS-muotoilukielen katkaisupisteitä (engl. breakpoint), jotka useimmiten tarkoittavat ennalta määritettyjä näytön leveyspisteitä, jolloin sovelluksen asettelu muuttuu. Katkaisupisteitä hallitaan CSS:n mediakyselyjen (engl. media query) avulla, jolloin jokaiselle pisteelle voidaan määritellä yksilöllisiä CSS-tyylejä näytön leveyden perusteella. Tämä tarkoittaa, että responsiivisessa suunnittelussa kaikki laitteet, leveydestä riippumatta, hyödyntävät samaa lähdekoodia, jossa käyttöliittymä mukautuu dynaamisesti käytettävän laitteen mukaan. Responsiivinen suunnittelu ei kuitenkaan ole aina optimaalinen vaihtoehto sovelluksen skaalauksessa. Stocklen kaltaisessa dashboard-käyttöliittymässä, joka sisältää monimutkaisia rakenteita ja asetteluita, responsiivisuus voi vaikuttaa jopa heikentävästi sen käytettävyyteen. Adaptiivinen suunnittelu taas perustuu ennalta määriteltyihin käyttöliittymän asettelumalleihin. Se eroaa responsiivisesta suunnittelusta siten, että se ei pyri dynaamiseen 13 mukautuvuuteen saman lähdekoodin kautta, vaan sen sijaan se käyttää staattisia laitekohtaisia asetteluja, jotka ovat optimoituja tietyille laitteille ja näyttökokoluokille. Adaptiivisessa suunnittelussa voidaan huomioida tarkemmin laitteiden teknisiä rajoitteita ja luoda erillisiä käyttöliittymäversioita eri näyttökokoluokille, kuten mobiililaitteille, tableteille ja tietokoneille. 2.5 Vuorovaikutus Vuorovaikutus on keskeinen osa käyttöliittymän suunnittelussa, joka määrittää, miten käyttäjä kommunikoi sovelluksen kanssa ja suorittaa haluamiaan toimintoja. Tässä luvussa käsitellään Stocklessa esiintyvien vuorovaikutuskomponenttien määritelmiä, joilla voidaan ohjata vuorovaikutukseen liittyviä toimintoja. Painike (engl. button) on vuorovaikutuskomponentti, joka käynnistää määritellyn toiminnon käyttäjän vuorovaikutuksen seurauksena. Painikkeita hyödynnetään esimerkiksi siirtymiseen eri näkymiin, toiminnon vahvistamiseen tai prosessin käynnistämiseen ja ne tarjoavat selkeän visuaalisen vihjeen suoritettavasta toiminnosta. Tekstikenttä (engl. text field) on vuorovaikutuskomponentti, jota käytetään tekstimuotoisen tiedon tallentamiseen. Tyypillisesti tekstikenttä on suorakaiteen muotoinen rajattu alue ja se sisältää otsakkeen, joka kertoo käyttäjälle tekstikenttään syötettävästä tiedosta. Tekstikentästä on olemassa myös vain luku -versio, jonka sisältöä ei pysty muuttamaan. Pudotusvalikko (engl. dropdown menu) on vuorovaikutuskomponentti, joka avautuu valintapainiketta napsauttaessa. Valintapainikkeen alapuolelle avautuva valikko sisältää ennalta määritetyn listan vaihtoehtoja, joista käyttäjä voi valita yhden vaihtoehdon. Pudotusvalikon valintapainike sisältää tavallisesti visuaalisen vihjeen, kuten ikonin, joka viestii valikon avautumisesta. Dialogi (engl. modal) on modaalinen ikkuna, joka avautuu sovelluksen pääikkunan päälle. Sen tarkoitus on väliaikaisesti keskeyttää vuorovaikutus sovelluksen pääikkunan kanssa, kunnes dialogissa olevan toiminto on suoritettu tai ikkuna on suljettu. Dialogista on olemassa erilaisia variaatioita, kuten sivuilta (engl. drawer) tai alareunasta avautuva ikkuna (engl. Bottom sheet), jotka ovat yleisempiä mobiilikäyttöliittymissä. Välilehdet (engl. tabs) muodostavat vuorovaikutteisten komponenttien ryhmän. Jokainen välilehti koostuu välilehtipainikkeesta (engl. tab) ja välilehtipaneelista (engl. tab panel). 14 Välilehtipaneeli on välilehden sisällölle tarkoitettu komponentti ja valitun välilehtipainikkeen aktivoima paneeli on näkyvillä aina yksi kerrallaan. 2.6 Visualisointi Visualisointi yleisesti perustuu usein abstraktiin tietoon, kuten tilastoihin, tai tietoon, joka ei ole helposti havaittavissa tavallisella näköaistilla. Visualisoinnin tarkoituksena on keskittyä uuden tiedon löytämiseen sen sijaan, että vain välitettäisiin jo olemassa olevaa tietoa. Sen tehtävänä on auttaa käyttäjää löytämään itse kiinnostavia piirteitä aineistosta sen sijaan, että se välittäisi ennalta määriteltyjä viestejä (Koponen, Hilden, & Vapaasalo, 2016). Yleisimmät visuaaliset elementit datan esittämiseen ovat erilaiset kaaviot ja taulukot, joilla voidaan kuvata erilaisia tietolajeja ja mahdollistaa monipuolista tiedon vertailua. Visualisointielementin tyyppi valikoituu ensisijaisesti tiedon laadun ja rakenteen mukaan. Esitettävä tieto voidaan luokitella karkeasti kahteen tyyppiin: jatkuvaan tietoon ja epäjatkuvaan eli diskreettiin tietoon. Jatkuva-arvoisella tiedolla tarkoitetaan arvoja, jotka voivat ottaa minkä tahansa arvon tietyllä asteikolla, kuten lämpötila tai aika. Jatkuvan datan visualisointiin voidaan käyttää esimerkiksi linja- tai aluekaavioita, jotka havainnollistavat muutosten kehittymistä ajan myötä. Myös histogrammeja voidaan hyödyntää jatkuvan datan visualisointiin, sillä ne kuvaavat, miten data jakautuu tietyllä asteikolla, joka taas mahdollistaa jakauman trendien tarkastelun ja analysoinnin. Diskreetti data koostuu erillisistä arvoista tai kategorioista, kuten lukumääristä, luokista tai tapahtumien määristä. Tällaisen datan visualisointiin soveltuvat erityisesti pylväskaaviot ja piirakkakaaviot, jotka havainnollistavat eri kategorioiden suhteellisia osuuksia tai esiintymistiheyksiä. Taulukot soveltuvat myös diskreetin datan visualisointiin, erityisesti silloin, kun on tarkoitus esittää tarkkoja lukuja ja tärkeitä yksityiskohtia selkeästi. Taulukko Taulukko (engl. table) on tiedon järjestämiseen ja esittämiseen tarkoitettu rakenteellinen esitysmuoto. Taulukolle ominaista on, että tieto asetellaan riveihin ja sarakkeisiin, ja se esitetään tekstimuodossa, kuten tekstinä ja numeroina (Few, Show Me the Numbers - Designing Tables and Graphs to Enlighten, 2012). Soluissa olevia arvoja voidaan lisäksi visualisoida erilaisten visuaalisten elementtien, kuten värien, ikonien tai 15 pienoisviivakuvioiden (engl. sparkline) avulla. Rivit ja sarakkeet erotellaan viivoilla tai taustan värityksillä, mikä selkeyttää tiedon jäsentelyä ja parantaa luettavuutta. Taulukoita käytetään erityisesti silloin, kun pyritään esittämään tarkkoja arvoja sekä havainnollistamaan arvojen ja kategorioiden välisiä suhteita. Tämä tekee taulukoista ihanteellisia yksittäisten arvojen etsimiseen ja vertailuun. Jotta sarakkeiden tai yksittäisten solujen vertailu olisi mahdollisimman vaivatonta, on suositeltavaa tasata teksti vasemmalle ja numerot oikealle (Koponen, Hilden & Vapaasalo, 2016). Tekstin vasemmalle tasaaminen parantaa sisällön luettavuutta ja helpottaa skannaamista, kun taas numeroiden oikealle tasaaminen mahdollistaa numeeristen arvojen helpomman vertailun, numeroiden suurusluokkien asettuessa visuaalisesti kohdakkain. Mikäli sarakkeessa on eripituisia desimaaliarvoja, on suositeltavaa käyttää kaikissa arvoissa samaa määrää desimaaleja, myös nollia, jotta arvojen vertailtavuus säilyy. Tämä periaate pätee kaikkiin mittayksiköihin, mukaan lukien valuutat ja prosentit (Few, Show Me the Numbers - Designing Tables and Graphs to Enlighten, 2012). Pylväskaavio Pylväskaavio (engl. bar chart) on suosittu ja helposti tulkittava kaaviotyyppi, joka soveltuu erityisesti jatkuva-arvoisten muuttujien vertailuun eri kategorioiden välillä. Pylväskaavioita kahta päätyyppiä: pysty- ja vaakapylväskaaviot. Pystypylväsdiagrammissa pystyakseli edustaa jatkuva-arvoista muuttujaa, kun taas vaakapylväsdiagrammissa sama muuttuja esitetään vaakasuunnassa, ja pystyakseli sisältää kategoriset muuttujat (Koponen, Hilden, & Vapaasalo, 2016). Akseleiden ala- ja ylärajauksella voidaan korostaa visuaalisesti muuttujien välisiä eroja. Rajauksessa tulee kuitenkin huomioida, että se ei ole liioitteleva tai vähättelevä, jotta tulkinta ei johda lukijaa harhaan. Pylväskaaviosta on olemassa useita variaatioita, joista yleisimpiä ovat ryhmitelty ja ositettu pylväskaavio. Ryhmitelty pylväskaavio mahdollistaa useiden tietojoukkojen rinnakkaisen esittämisen siten, että eri tietojoukot erotetaan toisistaan värikoodeilla. Tämä parantaa eri ryhmien välisten arvojen vertailtavuutta. Ositettu eli summapylväskaavio puolestaan näyttää yksittäisen kategorian arvot pinottuina yhdeksi pylvääksi, mikä auttaa havainnollistamaan, miten kokonaisarvo jakautuu eri osatekijöiden kesken. Vaakapylväskaavio toimii paremmin tilanteessa, jossa tarvitaan selkeä ja tilaa säästävä tapa esittää tietoa erityisesti silloin, kun kategorioita on paljon tai niiden nimet ovat pitkiä. Se 16 helpottaa kategorioiden välisen järjestyksen hahmottamista ja parantaa pitkien kategorianimien luettavuutta. Viivakaavio Viivakaavio (engl. line chart) on yksi yleisimmistä jatkuvan datan esittämiseen soveltuvista kaaviotyypeistä, sillä se on helposti luettava ja esitykseltään selkeä. Viivakaaviossa pysty- ja vaaka-akseleilla on aina jatkuva-arvoinen asteikko ja samaan asteikkoon voidaan sijoittaa useampi viiva. Viivakaavio koostuu datapisteistä, jotka yhdistetään toisiinsa suorilla viivoilla. Havaintopisteiden välinen viiva voi olla myös pyöristetty tai porrastettu, riippuen siitä, miten pisteiden välinen muutos halutaan esittää. Pyöristetyllä viivalla voidaan korostaa kuvion yleistä trendiä, kun taas porrastettu viiva sopii tilanteisiin, joissa halutaan korostaa enemmän pisteiden välistä äkillistä muutosta (Koponen, Hilden, & Vapaasalo, 2016). Viivakaaviosta on olemassa myös erilaisia variaatioita, kuten esimerkiksi tavallinen aluekaavio (engl. area chart), pinottu aluekaavio ja 100 % pinottu aluekaavio. Aluekaavio eroaa tavallisesta viivakaaviosta siten, että viivan ja vaaka-akselin väliin muodostetaan väritetty alue ja pystyakselin asteikko alkaa aina nollasta. Tavallisessa aluekaaviossa tulisi välttää useamman tietojoukon käyttöä, sillä tietojoukot voivat peittää toisensa, mikä voi johtaa harhaan lukijoita (Schwabish, 2021). Pinottu aluekaavio esittää useamman tietojoukon siten, että ne on asetettu päällekkäin, jolloin kunkin joukon arvot lasketaan yhteen alempien joukkojen kanssa. Tämä auttaa visualisoimaan, miten eri osatekijät vaikuttavat kokonaisuuteen. 100 % pinottu aluekaavio taas normalisoi kaikki tietojoukot siten, että ne kattavat aina 100 % pystyakselista, riippumatta alkuperäisten arvojen suuruudesta. Ympyräkaavio Ympyräkaavio, joka tunnetaan myös nimellä piirakkakaavio (engl. pie chart), on nimensä mukaisesti ympyrän muotoinen kaavio, joka jakautuu sektoreihin, jotka esittävät eri osatekijöiden suhteellisia osuuksia kokonaisuudesta. Jokainen sektori edustaa tiettyä kategoriaa, ja koko ympyrä vastaa aina 100 % tarkasteltavasta kokonaisuudesta. Ympyräkaavio sopii tapauksiin, jossa sektoreita on korkeintaan viidestä seitsemään ja jokainen sektori on astekulmaltaan yli yhden prosentin suuruinen. Pienet erot sektoreiden välillä ovat vaikeasti havaittavissa ja ne tekevät kaaviosta vaikeasti tulkittavan, joka taas vähentää kaavion informaatioarvoa (Koponen, Hilden, & Vapaasalo, 2016). 17 Ympyräkaavion sektoreiden välisten erojen vertailtavuutta voidaan parantaa muuttamalla kaavio rengaskaavioksi. Rengaskaaviossa ympyrän keskiosa poistetaan, mikä helpottaa sektoreiden kokojen hahmottamista kaaren pituuden perusteella, toisin kuin pinta-alan ja kulman perusteella (Koponen, Hilden, & Vapaasalo, 2016) 18 3 Sovelluksen esittely Tässä luvussa esitellään Stocklen toimintakonsepti, työpöytäversion käyttöliittymän rakenne sekä sijoitusten seurantaan liittyvät ominaisuudet. Luvun lopussa tarkastellaan Stocklen mobiilikäyttöliittymän nykytilaa ja pohditaan lyhyesti mahdollisia keinoja sen käyttökokemuksen parantamiseksi. 3.1 Toimintakonsepti Stockle on sijoitusten hallintaan kehitetty SaaS-pohjainen web-sovellus, joka mahdollistaa käyttäjille osakeomistusten kehityksen seuraamisen ja analysoinnin monipuolisten työkalujen avulla yhdellä alustalla. Sovellus muuttaa käyttäjän syöttämästä datasta selkeitä ja visuaalisesti informatiivisia esityksiä, jotka tukevat tehokasta tiedon tulkintaa ja analysointia. Stocklen päätavoitteena on yksinkertaistaa sijoitusten seurantaa ja tukea käyttäjän päätöksentekoa tarjoamalla työkalut informoitujen ja perusteltujen sijoitusratkaisujen tekemiseen. Sovelluksen käyttö alkaa käyttäjätilin luomisella, jossa käyttäjä syöttää valitsemansa sähköpostiosoitteen. Rekisteröitymisen jälkeen käyttäjä siirtyy sovelluksen dashboard- käyttöliittymään, jossa on mahdollista luoda yksi tai useampi Portfolio-näkymä. Portfolio terminä tarkoittaa sijoitustiliä, joka on tyypillisesti hajautettu kokoelma erilaisia sijoitusinstrumentteja, kuten osakkeita, ETF-rahastoja, joukkovelkakirjoja sekä muita omaisuuseriä. Tyypillisesti sijoitustilin sisältö heijastaa sijoittajan riskin sietokykyä ja tuottotavoitetta tietyllä aikavälillä. (Investopedia, Financial Portfolio: What It Is and How to Create and Manage One, 2024). Stocklessa jokainen käyttäjän luoma portfolio vastaa käyttäjän hallitsemaa yksittäistä sijoitustiliä, joka sisältää pääasiassa osake-, indeksi- ja ETF- rahastopositioita. Positio (engl. position) vastaa yksittäistä sijoitusta ja siihen liittyvien osuuksien määrää, joita käyttäjä omistaa tai on aiemmin omistanut. Omistuksessa olevat positiot määritellään avoimiksi positioiksi, kun taas realisoidut eli myydyt positiot määritellään suljetuiksi positioiksi (Investopedia, Position Definition - Short and Long Positions in Financial Markets, 2024). Sovelluksen toiminnallisuuden kannalta on olennaista, että käyttäjä luo vähintään yhden portfolion, joka myös sisältää vähintään yhden avoimen tai suljetun position. Portfolion täyttäminen tapahtuu lisäämällä sijoitustiliä vastaavat positiot yksittäisinä osto- ja myyntitransaktioina. Transaktioiden lisäämiseen käyttäjä voi hyödyntää kahta vaihtoehtoista 19 toimintoa: Import-ominaisuutta, jonka avulla transaktiot tuodaan CSV-tiedoston muodossa tai manuaalista Transaction-lomaketta, jossa tiedot syötetään yksitellen käyttöliittymässä. Syötetyt transaktiot tallennetaan sovelluksen pilvipohjaiseen tietokantaan rajapinnan kautta. Tallennusprosessin jälkeen käyttäjän lisäämät transaktiot palautuvat käyttöliittymään saman rajapinnan välityksellä. Tämän jälkeen käyttäjä voi aloittaa sovelluksen tarjoamien analyysityökalujen sekä muiden ominaisuuksien käytön. Portfolio-näkymien lisäksi käyttäjällä on myös käytettävissään Overview ja View-näkymät. Ne jakavat yhtenäisen rakenteen ja perusominaisuudet Portfolio-näkymän kanssa, mutta eroavat kuitenkin toisistaan esitettävän datan osalta. Overview-näkymä yhdistää kaikki käyttäjän hallinnassa olevat Portfolio-näkymät yhdeksi kokonaisuudeksi, tarjoten näin laajemman yleiskatsauksen ja analyysin käyttäjän kaikista osakeomistuksista eri sijoitustileillä. View-näkymässä voidaan taas poimia yksittäisiä positioita useammasta eri portfoliosta ja yhdistää ne esimerkiksi vallitsevan teeman, sijoitusstrategian tai muun määritellyn kriteerin mukaisesti. Kaikki edellä mainitut näkymät sisältävät yhteensä kuusi välilehteä: Positions, Performance, Allocation, Dividends, Cash Flow ja Transactions. Lisäksi näkymissä on piilotettava sivupaneeli, joka esittää valitun näkymän keskeisiä mittareita ja metadataa widget-elementtien muodossa. Tässä diplomityössä käyttöliittymän näkymien, välilehtien, widgetien ja muiden komponentien osalta käytetään niiden englanninkielisiä termejä, koska Stockle-sovellus on saatavilla ainoastaan englannin kielellä. Stocklessa on myös Watchlist-näkymä, johon käyttäjä voi tallentaa kiinnostuksen kohteena olevia osakkeita ja muita sijoitusinstrumentteja. Watchlist mahdollistaa osakkeiden hinnankehityksen seuraamisen sekä markkinoilla tapahtuvien muutoksien ja trendien tarkkailun. Stocklesta on saatavilla kolmea eri sovellusversiota: Free, Pro ja Unlimited (taulukko 1). Näistä Free-versio on maksuton, kun taas Pro- ja Unlimited-versiot toimivat kuukausimaksullisella veloitusmallilla. Maksulliset versiot antavat käyttäjälle laajempia toiminnallisuuksia sekä poistavat sovelluksen käyttöön liittyviä rajoituksia, mahdollistaen näin joustavamman käytön. Taulukko esittää sovellusversioiden keskeiset ominaisuudet ja niiden väliset erot. 20 Taulukko 1. Stocklen eri versioiden ominaisuudet ja hinnoittelumalli Ominaisuus / Versio Free Pro Unlimited Portfolios 2 5 10 Views 1 3 10 Transactions 20 200 Unlimited Positions 10 50 150 Price 0 €/month 4,99 €/month 8,99 €/month 3.2 Käyttöliittymän rakenne Stocklen käyttöliittymä sisältää pääikkunan, joka jakautuu kahteen alueeseen: navigointi- ja sisältöalueeseen (kuva 3.1). Navigointialue muodostuu laajentuvasta navigointilaatikosta, joka sisältää navigointilinkit jokaiselle sisältöalueella esitettävälle näkymälle. Sisältöalue puolestaan koostuu sovelluspalkista ja kahdesta paneelista: ensisijaisesta pääpaneelista ja toissijaisesta, laajennettavasta sivupaneelista. Sivupaneeli sisältää erilaisia widgettejä (engl. widget) ja sen näkyvyys määräytyy sisältöalueen mukaan. Lisäksi käyttöliittymä hyödyntää useita toissijaisia ikkunoita eli dialogeja, jotka tarjoavat lisätoimintoja pääikkunan tueksi. 21 Kuva 3.1 Stocklen käyttöliittymän pääikkuna 3.3 Keskeiset ominaisuudet 3.3.1 Portfolion seuranta Positions-välilehti Positioiden yksityiskohtainen seuranta tapahtuu Positions-välilehdellä (kuva 3.2). Välilehti koostuu sivun yläreunassa olevista KPI-korteista sekä kahdesta laajasta datataulukosta, jotka sisältävät valitun näkymän kaikki avoimet ja suljetut osakepositiot. Taulukon rivit vastaavat yksittäistä positiota ja rivin kolumnit esittävät positiolle kriittisiä tietoja, kuten osakkeiden kappalemäärä, päivätuotto, hankinta-arvo, markkina-arvo, kokonaistuotto, osinkojen määrä ja tuotto, osakkeen trendi sekä position paino suhteutettuna näkymän kokonaismarkkina-arvoon. 22 Kuva 3.2. Positions-välilehti Performance-välilehti Performance-välilehdellä voidaan tarkastella positioiden yhteenlasketun arvon ja tuoton kehitystä neljän eri kaavion avulla: markkina-arvo (engl. market value), aikapainotettu tuotto (engl. time-weighted return), yksinkertainen tuotto (engl. simple return) ja kausituotto (engl. period return) (kuva. 3.3). Jokainen kaavio kuvaa rahallista ja prosentuaalista havaintopisteiden välistä muutosta valitulla aikavälillä. Kaaviot esitetään yksitellen ja tarkasteltavaa kaaviota voidaan vaihtaa alasvetovalikon avulla. Kaavioista kolme ensimmäistä ovat aluekaavioita, jotka sisältävät kahdesta kolmeen eri datasarjaa. Kausituotto-kaavio puolestaan on pylväskaavio, joka sisältää vain yhden datasarjan. Kaikissa kaavioissa vaaka- akseli kuvaa tarkasteltavaa aikaväliä, joka voidaan määrittää segmentoidusta ohjauskomponentista (engl. segmented control). Valittavissa olevat aikavälit vaihtelevat yhdestä kuukaudesta viiteen vuoteen, mahdollistaen sekä lyhyen että pitkän aikavälin tarkastelun. Kuvaajien pystyakselin asteikko määräytyy tarkasteltavan kuvaajan mukaan ja esitetään joko prosentuaalisena arvona tai rahallisena arvona, joka vastaa sovelluksessa käyttäjän valittavissa olevaa pohjavaluuttaa. Kaikki kuvaajat ovat vuorovaikutteisia ja yksittäisiä havaintopisteitä voidaan tarkastella suoraan kuvaajassa. Lisäksi markkina-arvo - kuvaajassa on lisäominaisuus, jonka avulla voidaan tarkastella kahden havaintopisteen välistä 23 eroa. Tämä ero esitetään sekä rahallisena että prosentuaalisena arvona, mikä mahdollistaa tarkemman tarkastelun arvon kehityksestä valittujen havaintopisteiden välillä. Kuva 3.3. Performance-välilehti Allocation-välilehti Allocation-välilehti sisältää kolme erillistä elementtiä: rengaskaavion, taulukon sekä taulukkotyyppisen laajennettavan listan (kuva 3.4). Edellä mainitut elementit visualisoivat tietoa valitun näkymän positioiden painotuksesta ja jakautumisesta. Elementeissä esitettävää dataa voidaan ryhmitellä ja lajitella välilehden yläreunassa sijaitsevista alasvetovalikoista. Mahdollisia ryhmittelyn parametreja ovat: position tyyppi, maa, valuutta, pörssi, markkina- arvo ja kaupankäyntitunnus (engl. ticker). Ympyräkaaviossa esitettävien lohkojen arvoksi voidaan valita joko markkina-arvo tai hankinta-arvo. Laajennettava lista esittää ryhmiin kuuluvien positioiden yhteenlasketut ja yksittäiset markkina- ja hankinta-arvot sekä tuottoluvut allekkain. 24 Kuva 3.4. Allocation-välilehti Dividends-välilehti Dividends-välilehdellä voidaan analysoida positioista saatujen ja saatavissa olevien osinkojen tunnuslukuja sekä kokonaissummia (kuva 3.5). Dividends-välilehti pitää sisällään kolme erilaista visualisointielementtiä: KPI-kortit, pinottu pylväskaavio ja matriisitaulukko. KPI- kortit esittävät saatujen osinkojen kokonaisarvon, osinkotuottoprosentit suhteutettuna markkina-arvoon ja hankinta-arvoon, sekä vuosittaisen saadun osingon määrän. Pylväskaaviossa on kaksi suodatinta: positio- ja aikajaksosuodatin. Näiden avulla voidaan rajata kaaviossa esitettävää dataa. Kaaviossa pinottujen pylväiden pituus vastaa valitun aikajakson aikana maksettujen osinkojen kokonaissummaa. Yksittäisen pylvään osatekijät muodostuvat positiolle maksettujen osinkojen kokonaissummasta. Matriisitaulukossa rivit ja sarakkeet esittävät positioiden vuosittaisia osinkoja ja yksittäinen solu vastaa position vuosittaisen osinkojen kokonaissummaa. Taulukko sisältää myös kaksi summariviä. Pystyakselin summarivi näyttää position osinkojen kokonaissumman kaikilta vuosilta ja vaaka-akselin summarivi kuvaa kaikkien positioiden osinkojen kokonaissummaa yksittäisen vuoden aikana. 25 Kuva 3.5. Dividends-välilehti Cash Flow-välilehti Cash Flow-välilehti poikkeaa muista edellä mainituista, sillä se on rakenteeltaan ja elementeiltään yksinkertaisempi (kuva 3.6). Se koostuu pylväskaaviosta ja yksinkertaisesta taulukosta, jotka visualisoivat samaa datasarjaa. Datasarja sisältää kuusi eri parametria, joista yksi on vuosiluku ja loput rahallisia arvoja: sijoitettu pääoma, tuotto, osingot, kulut sekä tulot. Näiden kahden elementin keskeinen ero on niiden esitystapa: pylväskaavio havainnollistaa parametrien arvojen vaihteluita visuaalisesti ja antaa kokonaiskuvan kassavirran suuruudesta, kun taas taulukko esittää saman tiedon numeerisessa muodossa, tarkoituksena korostaa arvojen tarkkuutta ja yksityiskohtia. 26 Kuva 3.6. Cash Flow-välilehti Transactions-välilehti Transactions-välilehdellä on mahdollista hallita syöttämiään osakkeiden osto- ja myyntitapahtumia sekä tarkastella osinko- ja splittaustapahtumia (kuva 3.7). Välilehti sisältää jokaiselle neljälle tapahtumatyypille oman taulukon, jossa tapahtumia voi lajitella sarakkeiden arvojen mukaan. Osto- ja myyntitapahtumien taulukoissa käyttäjä voi muokata ja poistaa syöttämiään tapahtumia. 27 Kuva 3.7. Transactions-välilehti Metrics-sivupalkki Metrics-sivupalkki on käytettävissä kaikissa kolmessa näkymässä ja se koostuu kolmesta käyttöliittymäelementistä: Key Metrics, Daily Performance ja Recent Activity. Key Metrics- elementti koostuu metadataa sisältävästä datalistasta, jonka arvot lasketaan valitun näkymän avoimista ja suljetuista positioista. Daily Performance-elementti on lista näkymän osakkeista, jotka on järjestetty päivän hintakehityksen mukaan parhaimmasta huonoimpaan. Recent Activity-elementti toimii aikajanana, joka kuvaa näkymän viimeaikaisia tapahtumia, kuten myynti- ja ostotapahtumia, osinkoja sekä osakesplittejä. 3.3.2 Omistamattomien sijoitusinstrumenttien seuranta Käyttäjä pystyy luomaan sovelluksessa yhden tai useamman Watchlist-näkymän (kuva 3.8). Watchlist on käyttäjän määrittelemä kokoelma sijoitusinstrumentteja, kuten osakkeita, indeksirahastoja tai ETF-rahastoja, joiden kehitystä halutaan seurata joko tulevia sijoituspäätöksiä varten tai niiden suorituskyvyn arvioimiseksi. Watchlist-näkymiä voidaan hyödyntää myös samalla sektorilla toimivien sijoitusinstrumenttien keskinäisessä vertailussa (Investopedia, Watchlist: Definition, Purpose, and How To Create One, 2022). Stocklessa 28 Watchlist-näkymä koostuu mukautuvasta datataulukosta, jonka sarakkeita käyttäjä voi lajitella sekä muuttaa näiden järjestystä tai näkyvyyttä. Watchlist-näkymän sijoitusinstrumenttien hallinta suoritetaan modaalisessa ikkunassa, josta käyttäjä voi etsiä uusia tai muokata aiempia sijoitusinstrumentteja. Kuva 3.8. Watchlist-näkymä 3.3.3 Yksittäisen position seuranta Yksittäisten positioiden seuranta tapahtuu siihen tarkoitetussa modaalisessa ikkunassa, joka koostuu neljästä erillisestä käyttöliittymäelementistä: Intraday, Delayed, Metrics ja Lots (kuva 3.9). Intraday-elementti esittää osakkeen keskeiset tunnistetiedot, kuten kaupankäyntitunnuksen, yhtiön nimen, ISIN-tunnuksen, maan, pörssin ja valuutan. Lisäksi se näyttää reaaliaikaisen hinnan ja päiväkohtaisen hinnanmuutoksen. Delayed-elementti mahdollistaa osakkeen hintakehityksen tarkastelun aluekaavion avulla sekä sisältää teknisen analyysin indikaattorilukuja. Käyttäjä voi seurata myös position yksittäisten osto- ja myyntierien (engl. lots) kehitystä. Erät ovat yksityiskohtaisempi läpileikkaus koko positiosta ja ne muodostuvat vastaavasti osto- ja myyntitransaktioista. Metrics-elementti esittää keskeisiä avainlukuja, jotka muodostuvat osto- 29 ja myyntierien yhteenlasketuista arvoista. Lots-elementti esittää yksittäiset osto- ja myyntierät eriteltyinä datataulukoihin. Kuva 3.9. Yksittäisen valitun position modaalinen ikkuna 3.3.4 Näkymien ja transaktioiden luominen Näkymät ja transaktiot luodaan modaalisissa ikkunoissa, jotka sisältävät yksilöllisiä lomakkeita luontiin, muokkaamiseen ja poistamiseen liittyviä toimintoja varten. Kuvassa 3.10 näkyy modaalinen ikkuna, joka sisältää transaktion luomiseen käytettävän lomakkeen. Nämä lomakkeet koostuvat erilaisista syötekentistä, jotka vaihtelevat yksinkertaisista teksti- ja numerokentistä pudotusvalikoihin. 30 Kuva 3.10. Osto- ja myyntitransaktioiden lomakkeet modaalisessa ikkunassa 3.4 Nykytila Stockle on ensisijaisesti suunniteltu käytettäväksi suuremmilla näytöillä, kuten tietokoneilla. Kehityksessä on hyödynnetty responsiivista suunnittelua, joka on tähän asti mahdollistanut sen käytön muillakin laitteilla, kuten tableteilla ja mobiililaitteilla. Responsiivisesta suunnittelusta johtuen käytettävyyttä ei kuitenkaan ole täysin optimoitu mobiililaitteille. Käyttäjäanalytiikan perusteella tämä vaikuttaa negatiivisesti mobiilikäyttäjien käyttökokemukseen ja saattaa alentaa pidempi aikaisen käytön todennäköisyyttä. Heikomman käyttökokemuksen taustalla ovat käyttöliittymän rakenne sekä tietyt käyttöliittymäelementit, kuten suurikokoiset taulukot ja kuvaajat, monimutkaiset lomakkeet sekä navigaation rakenne, jotka eivät skaalaudu riittävän hyvin pienemmille näytöille, vaikeuttaen sovelluksen käyttöä mobiililaitteilla. Sovelluksen käyttäjäkunta koostuu pääasiassa kansainvälisistä kuluttaja-asiakkaista, joista merkittävä osa sijaitsee Pohjois-Amerikan ja Euroopan maissa. Kuukauden aikana kerätyn käyttäjäanalytiikan perusteella 56 % käyttäjistä käyttää sovellusta tietokoneella, 43 % mobiililaitteella ja 1 % tabletilla. 31 Paremman käyttökokemuksen saavuttamiseksi mobiililaitteilla sovelluksen kehityksessä tulisi hyödyntää adaptiivista suunnittelua, jossa käyttöliittymä mukautetaan eri laitteille erillisten suunnitteluperiaatteiden mukaisesti. Tämä mahdollistaisi mobiilikäyttäjille paremman käytettävyyden, mikä puolestaan voisi parantaa käyttäjien sitoutumista ja laajentaa sovelluksen aktiivista käyttäjäkuntaa. 32 4 Mobiilikäyttöliittymän suunnittelu Tässä luvussa käsitellään Stockleen toteutettavan mobiilikäyttöliittymän suunnittelua. Luku alkaa tavoitteiden laatimisella, jonka jälkeen siirrytään käsittelemään suunnittelussa ilmenneitä haasteita ja rajoitteita. Luvun lopussa käydään läpi valittuja suunnitteluperiaatteita sekä näiden pohjalta laadittua suunnitteluprosessia. 4.1 Tavoite Uuden mobiilikäyttöliittymän keskeisin tavoite on parantaa nykyisen käyttöliittymän käytettävyyttä ja toimivuutta, jotta käyttäjät eivät keskeyttäisi sovelluksen käyttöä sen puutteellisen käyttökokemuksen vuoksi. Tarkoituksena on luoda intuitiivinen ja sujuva käyttöliittymä, joka vastaa toiminnallisuudeltaan tietokoneen selaimessa toimivaa työpöytäversiota, joka on Stocklen ensisijainen kehitysalusta. Toimivan mobiilikäyttöliittymän avulla pyritään saamaan käyttäjiä ohjautumaan työpöytäversion käyttäjiksi, joka tarjoaa huomattavasti kattavamman ja monipuolisemman käyttökokemuksen sovelluksen ominaisuuksista. Suunnitteluprosessin on tarkoitus keskittyä olemassa olevien ominaisuuksien optimointiin ilman uusien toimintojen lisäystä, jotta käyttöliittymäversiot vastaisivat suurimmilta osin toisiaan, eikä käyttäjän tarvitsisi opetella uusia ominaisuuksia. Optimoinnissa voidaan tarvittaessa karsia tai poistaa kokonaan sellaisia toimintoja ja ominaisuuksia, jotka eivät täytä mobiilikäytettävyyden vaatimuksia tai jotka osoittautuvat toiminnallisesti epäkäytännöllisiksi mobiililaitteilla. 4.2 Haasteet ja rajoitteet Mobiilikäyttöliittymien suunnittelussa ja käytössä ilmenee monia haasteita ja rajoitteita, jotka vaikuttavat merkittävästi käyttökokemukseen ja käytettävyyteen. Nämä haasteet liittyvät ensisijaisesti dynaamisiin ja fyysisiin tekijöihin, kuten käytettävään laitteeseen, vuorovaikutusmenetelmiin, vuorovaikutustapoihin sekä käyttöympäristöön (Lee, Dachselt, Isenberg, & Choe, 2021). Käytettävän laitteen haasteisiin liittyy erityisesti pienikokoisen näytön rajallinen tila käyttöliittymäelementeille ja sisällölle. Mobiilikäyttöliittymässä käyttäjällä on näkyvissä vain pieni osa suuremman näytön sisällöstä, jolloin se vaatii käyttäjältä vuorovaikutteisesti enemmän aikaa ja työtä saadakseen saman määrän tietoa. Tämä lisää vuorovaikutuskustannuksia (engl. interaction cost), jonka määritelmänä on käyttäjän tekemän 33 kognitiivisen ja fyysisen työn kokonaismäärä, joka vaaditaan toiminnon suorittamiseksi käyttöliittymässä (Budiu, Interaction Cost, 2024). Vuorovaikutuskustannusten kasvu lisää käyttäjän kognitiivista kuormaa, erityisesti lyhytkestoisen muistin osalta, sillä käyttäjän on pidettävä mielessä myös aiempi sisältö, joka ei ole samanaikaisesti näkyvissä (Budiu, Mobile User Experience: Limitations and strengths, 2019). Vuorovaikutusmenetelmien haasteet liittyvät enimmäkseen kosketuspohjaiseen toimintaan. Mobiililaitteiden web-selaimet eivät kykene hyödyntämään kaikkia laitteen natiiveja eleiden tunnistusominaisuuksia, jolloin elepohjaiset vuorovaikutukset voivat olla epätarkkoja ja altistua todennäköisemmin virheille. Vuorovaikutteisten elementtien, kuten painikkeiden ja valikoiden koon pienentäminen näytön rajallisen tilan vuoksi voi heikentää käyttöliittymän käytettävyyttä. Tämä pienentää kosketusalueita (engl. touch target) jolloin riskinä voi olla, että käyttäjä kohdistaa kosketuksensa virheellisesti, mikä taas kasvattaa vuorovaikutusvirheiden esiintyvyyttä ja vaikuttaa negatiivisesti kokonaisvaltaiseen käyttökokemukseen (Lee, Dachselt, Isenberg, & Choe, 2021). Vuorovaikutustavat ja käyttöympäristö luovat myös omat haasteensa mobiilikäyttöliittymän suunnittelussa, sillä mobiililaitteita käytetään usein erilaisissa olosuhteissa ja ympäristöissä. Käyttäjät toimivat vaihtelevissa ympäristöissä, kuten esimerkiksi kirkkaassa valaistuksessa tai hämärässä, ulko- tai sisätiloissa, liikkeessä tai staattisessa tilassa, jolloin vallitsevat olosuhteet saattavat vaikuttaa negatiivisesti käyttöliittymän käytettävyyteen, esimerkiksi pienten tekstien luettavuuteen tai vuorovaikutuselementtien ergonomiseen valintaan (Lee, Dachselt, Isenberg, & Choe, 2021). Mobiililaitteiden vuorovaikutustavat tuovat myös omat rajoitteensa. Interaction Design Foundationin mukaan 94 % käyttäjistä pitää puhelintaan pystyasennossa, usein käyttäen vain yhtä kättä (Interaction Design Foundation, 2016). Tämä luo haasteita erityisesti luonnollisen peukalovyöhykkeen (engl. thumb zone) ulottuvuuden suhteen, sillä se ei usein riitä kattamaan koko näyttöä, mikä rajoittaa käyttöliittymän elementtien sijoittelua ja saavutettavuutta (kuva 4.1). Ulottuvuuteen vaikuttavia tekijoitä ovat laitteen fyysinen koko ja paino sekä käyttäjän anatomiset ominaisuudet, kuten kämmenen koko tai peukalon pituus. Kahden käden käyttö parantaa tarkkuutta ja käytettävyyttä, mutta samalla se voi vaatia enemmän tilaa ja heikentää laitteen liikuteltavuutta (Lee, Dachselt, Isenberg, & Choe, 2021). 34 Kuva 4.1. Peukalovyöhykkeen ulottuvuusalueet. Kuva: Smashing Magazine 4.3 Suunnitteluperiaatteet Mobiilikäyttöliittymän suunnittelu edellyttää tasapainottelua käytettävyyden, tehokkuuden ja kokonaisvaltaisen käyttökokemuksen välillä. Prosessissa on otettava huomioon sekä tekniset rajoitteet että käyttäjän kognitiiviset kyvyt. Mobiililaitteiden pienikokoiset näytöt vaativat käyttöliittymältä visuaalista selkeyttä ja intuitiivisuutta. Tässä luvussa käsitellään keskeisiä suunnitteluperiaatteita onnistuneen ja toimivan lopputuloksen saavuttamiseksi. 4.3.1 Vuorovaikutus Mobiilikäyttöliittymän vuorovaikutuksen suunnittelussa keskeisenä tavoitteena on optimoida elementtien sijoittelu ja käytettävyys. Fittsin lain (engl. Fitts’s law) mukaisesti vuorovaikutteiset kosketuskohteet, kuten painikkeet tai kuvaajat, tulisi sijoittaa niin, että ne ovat helposti saavutettavissa (Yablonski, 2024). Sijoittelussa voidaan priorisoida peukalovyöhykkeen aluetta, joka vastaa käden luonnollista ja ergonomista asentoa. Kosketuskohteiden (engl. touch target) tulisi vastata suositeltua vähimmäiskokoa virhekosketusten minimoimiseksi. Apple suosittaa kosketuskohteille vähintään 44x44 pisteen (pt) kokoa, joka vastaa noin 1,5x1,5 cm, kun taas Nielsen Norman Group suosittaa 1x1 cm kokoa (Yablonski, 2024). Vähimmäiskoon lisäksi tulisi huomioida riittävä tila vuorovaikutuselementtien ympärillä. Vuorovaikutusta voidaan parantaa myös välttämällä kirjoittamista, korvaten tekstisyötteitä valintapohjaisilla ratkaisuilla, kuten pudotusvalikoilla. 35 4.3.2 Visuaalinen hierarkia Mobiilikäyttöliittymän suunnittelu vaatii visuaalisen hierarkian huolellista uudelleenmuotoilua siten, että sovelluksen looginen kokonaisuus ja toimintamalli säilyvät käyttäjälle intuitiivisesti ymmärrettävinä. Mobiililaitteen näytön rajallisen tilan vuoksi visuaalisessa hierarkiassa on tärkeää priorisoida visuaalisia rakenteita sekä ryhmittelyä, jotta käyttäjä voi nopeammin hahmottaa sovelluksen ensisijaiset toiminnot ja ymmärtää niiden merkityksen. Hierarkian toteutuksessa voidaan soveltaa hahmopsykologian periaatteita, kuten Gestalt-teorian läheisyyden- ja samankaltaisuudenlakeja. Näiden lisäksi hierarkian priorisointiin voidaan vaikuttaa visuaalisesti esimerkiksi värisävyjen, tilankäytön optimoinnin, ruudukkoasettelujen sekä tilanjakajien avulla, jotka ohjaavat käyttäjän huomiota ja parantavat käyttöliittymän hahmotettavuutta. 4.3.3 Johdonmukaisuus ja priorisointi Johdonmukaisuus (engl. consistency) on mobiilikäyttöliittymän suunnittelun keskeinen periaate, joka tukee käytettävyyttä ja käyttökokemusta. Johdonmukaisuuden saavuttamisessa voidaan soveltaa Jakob Nielsenin kehittämää käytettävyysheuristiikkaa, Jakobin lakia (engl. Jakob’s Law), joka painottaa jo ennalta tuttujen käyttöliittymäratkaisujen ja visuaalisten vihjeiden hyödyntämistä, parantaen uuden ympäristön käyttökokemusta. Laki pohjautuu oletukseen, että käyttäjät siirtävät aiemmista sovelluksista muodostuneita kokemuksiaan ja oletuksiaan, mikä nopeuttaa tuttujen mallien omaksumista uudessa ympäristössä sekä vähentää kognitiivista kuormitusta (Yablonski, 2024). Kognitiivista kuormitusta mobiilikäyttöliittymässä voidaan vähentää myös priorisoimalla ensisijaisia toimintoja ja jakamalla käyttöliittymän eri alueita pienempiin ryhmiin, karsien samalla toissijaisia toimintoja sekä sisältöä. Millerin lain (engl. Miller’s Law) mukaan ihminen kykenee käsittelemään keskimäärin 7 ± 2 informaatio-objektia kerrallaan, joten käyttöliittymän tulee esittää tietoa tiiviisti ja loogisesti ryhmiteltynä (Yablonski, 2024). Tätä voidaan tukea erilaisilla käyttöliittymämalleilla, kuten kokoontaitettavilla osioilla (engl. collapsibles) sekä progressiivisella paljastamisella (engl. progressive disclosure), jolloin käyttäjälle näytetään vain ensisijaista tietoa ja toissijaista tietoa avataan tarpeen mukaan. Toissijaisten ominaisuuksien karsimisella voidaan parantaa myös käyttöliittymän ennustettavuutta, joka kytkeytyy Hickin lakiin (engl. Hick’s law). Laki osoittaa, että päätöksentekoon kuluva aika kasvaa vaihtoehtojen määrän lisääntyessä. 36 4.3.4 Navigointi Navigointi on yksi keskeisimmistä osista mobiilikäyttöliittymän suunnittelussa, sillä se pääasiassa määrittää, kuinka käyttäjät liikkuvat sovelluksessa ja löytävät haluamansa sisällön tai toiminnot. Pienen näytön ja kosketuspohjaisen vuorovaikutuksen vuoksi navigoinnin suunnittelussa on otettava huomioon ergonomiset sekä käytettävyyteen liittyvät näkökulmat, jotta navigointi olisi intuitiivista, tehokasta ja helposti saavutettavissa. Googlen Material Design 3 -muotokielen mukaan pienemmillä näytöillä tulisi käyttää navigointipalkkia (engl. navigation bar), joka on yksi yleisimmin käytetyistä navigointimalleista mobiilikäyttöliittymissä. Navigointipalkki sijoittuu näytön alareunaan ja se sisältää tyypillisesti 3–5 ensisijaista navigointielementtiä, joista jokainen elementti on visualisoitu navigointikohdetta kuvaavalla ikonilla. Hickin lakiin perustuen, ikonien tueksi voidaan liittää navigointikohteeseen liittyviä vihjeitä, kuten tekstietikettejä, jotka auttavat käyttäjiä tunnistamaan valittavissa olevia navigointikohteita ja toimintoja niiden takana (Yablonski, 2024). Navigointipalkin malli on käyttäjälle ergonominen, sillä navigointipalkin kosketuskohteet on sijoiteltu peukalovyöhykkeen alueelle, jolloin se tukee käyttäjän ergonomiaa ja nopeaa vuorovaikutusta. 4.4 Suunnitteluprosessi Suunnitteluprosessiin liittyi myös toinen sovelluksen kehittäjistä, jonka kanssa kaikki suunnitteluun ja toteutukseen liittyvät päätökset tehtiin yhteistuumin. Yhteisellä näkemyksellä saatiin laajempi kuva suunnitteluprosessissa priorisoitaviin asioihin. 4.4.1 Näytön suunta Mobiilikäyttöliittymän suunnitteluprosessin alussa on keskeistä analysoida näytön suunnan vaikutuksia käyttökokemukseen ja sen toimivuuteen. Näytön pystysuunnan suosioon vaikuttavat erityisesti ergonomiset tekijät, kuten yhden käden käyttö ja sen luonnollisuus, sekä sisältötyypit, jossa korostuu nopeatempoinen vuorovaikutus ja selaaminen. Esimerkiksi sosiaalisen median sovelluksissa yleistynyt pystyvideoformaatti, jossa lyhyitä videoita selataan nopeasti, tukee tätä trendiä. Vaakasuunta on taas yleisempi passiivisemmissa käyttötilanteissa, kuten pidempien videoiden katselussa, sekä tablettilaitteilla, joissa näytön koko on huomattavasti mobiililaitetta suurempi. Näin ollen, mobiilikäyttöliittymän 37 suunnittelussa tulisi priorisoida pystysuunnan optimointia, jotta voidaan vastata valtaosan käyttäjien vakiintuneisiin käyttötapoihin. 4.4.2 Rakenne Mobiilikäyttöliittymän suunnittelussa tulee huomioida pienemmän näytön asettamat rajoitteet, jotka edellyttävät käyttöliittymän rakenteen uudelleenmuotoilua. Kuvassa 4.2 tietokoneen web-selaimelle suunniteltu käyttöliittymä on jaettu pienempiin alueisiin, jotka edustavat käyttöliittymän keskeisempiä alueita sekä vuorovaikutuselementtejä. Kuvassa 4.3 on hahmotelma mobiilikäyttöliittymän adaptiivisesta rautalankamallista (engl. wireframe), jossa käyttöliittymän eri alueet on väritetty kuvan 4.2 mukaisesti. Rautalankamalli viittaa yksinkertaistettuun ja pelkistettyyn visuaaliseen hahmotelmaan, joka kuvaa suunniteltavan sovelluksen käyttöliittymää ja sen rakennetta (Interaction Design Foundation, 2016). Kuva 4.2. Stocklen käyttöliittymän alueet jaoteltuna ja värikoodattuna. Värikoodaus on tehty alueiden havainnollistamiseksi. 38 Kuva 4.3. Mobiilikäyttöliittymän värikoodattu rautalankamalli. Keltainen alue edustaa sovelluspalkkia, sininen alue sisältöaluetta, vihreä alue navigointialuetta ja punainen alue sovelluksen toissijaisia ikkunoita, kuten dialogeja Mobiilikäyttöliittymän rautalankamallissa (kuva 4.3) navigointialue (vihreä alue) on sijoiteltu näytön alareunaan, jolloin se vastaa navigointipalkkia, joka on mobiilisovelluksille ominainen suunnittelumalli. Navigointialueen sijoittelu näytön alareunaan tukee myös käyttöliittymän intuitiivisuutta ja helpottaa sovelluksen käyttöä yhdellä kädellä, sillä alue ja sen sisältö ovat peukalovyöhykkeen alueella helposti saavutettavissa. Sovelluspalkki (keltainen alue) sijoittuu näytön yläreunaan molemmissa käyttöliittymissä. Sovelluspalkin ensisijainen tehtävä mobiilikäyttöliittymässä on toimia opasteena, joka viestii käyttäjälle aktiivisen sijainnin sovelluksessa sekä kuvastaa selattavan sisällön hierarkiaa, esimerkiksi sivun otsikon tai navigointipolun avulla. Palkkiin voidaan sisällyttää myös tarvittaessa joitain toiminnallisia elementtejä, kuten painikkeita asetuksille, jotka eivät kuitenkaan ole ensisijaisia, sillä palkin sijainti on vaikeammin saavutettavissa käytettäessä mobiililaitetta yhdellä kädellä. Sisältöalue (sininen alue) pitää sisällään keskeisen informaation ja vuorovaikutteiset elementit, kuten kortit, kuvaajat ja taulukot. Mobiilikäyttöliittymässä näyttötilan rajallisuus edellyttää tarkkaa suunnittelua ja optimointia, jotta voidaan maksimoida esitettävän 39 informaation määrä. Optimoinnissa tulee kuitenkin ottaa huomioon, että käyttöliittymän toiminnallisuus ja intuitiivisuus pysyvät ennallaan, eivätkä ne vaadi käyttäjiltä uusien toimintamallien omaksumista. Näyttötilaa voidaan optimoida laajentamalla sisältöalueen korkeutta ja leveyttä niiden äärirajoille sekä tiivistämällä tyhjää tilaa käyttöliittymän elementtien ympäriltä, säilyttäen kuitenkin erottuvuuden ja yhteenkuuluvuuden elementtien kesken. Mobiilikäyttöliittymässä sisältöalueen vierittämisessä tulisi suosia pystysuuntaista vierittämistä vaakasuunnan sijaan, sillä vaakasuuntainen vierittäminen voi aiheuttaa haasteita kosketuspohjaisen navigoinnin tarkkuudessa ja sujuvuudessa. Vierittämisessä on tärkeää huomioida niin kutsuttu ”false floor”-efekti. Tämä ilmiö viittaa tilanteeseen, jossa käyttäjä saattaa virheellisesti olettaa, että sisältö ei ole vieritettävissä ja näin ollen osa informaatiosta jää huomaamatta. Mobiilikäyttöliittymän rautalankamallissa sivupaneeli ja dialogit (punainen alue) on korvattu bottom sheet -ikkunalla. Tämä komponentti on yleisesti käytetty ratkaisu lisätietojen ja toimintojen esittämiseen mobiilikäyttöliittymissä, sillä se on helposti saavutettavissa ja se tukee intuitiivista käyttöä kosketuseleiden avulla. Ikkuna avautuu näytön alareunasta ja sen korkeus määräytyy dynaamisesti sisällön perusteella. Mikäli sisällön korkeus ylittää komponentin maksimikorkeuden, sisältöä voidaan vierittää pystysuunnassa tarpeen mukaan. 4.4.3 Visualisointi Mobiilikäyttöliittymässä suurien datamäärien visualisointi on keskeinen haaste, sillä pienemmät näytöt ja vaihtelevat resoluutiot edellyttävät visualisointikomponenttien dynaamista mukautumista. Visualisointikomponenttien, kuten taulukoiden ja kaavioiden, sovittamiseen pienemmille näytöille on olemassa useita vaihtoehtoja, joilla voidaan parantaa ja ylläpitää näiden komponenttien käytettävyyttä. On kuitenkin tärkeää huolehtia, että visualisointikomponentit pysyvät esitettävän datan osalta luotettavina ja tarkkoina. Toisin kuin sisältöalueen vierittämisessä, yksinkertainen ja tehokas tapa parantaa taulukon käytettävyyttä on vaakavierityksen mahdollistaminen, jolloin käyttäjä voi tarkastella taulukon kaikkia sarakkeita vierittämällä vaakasuunnassa. Vaakavierityksessä taulukon tulisi sisältää visuaalisia vihjeitä, kuten varjostuksia, jotka osoittavat käyttäjälle vieritysmahdollisuudesta nähdäkseen enemmän taulukon sarakkeita. Mikäli taulukko sisältää vähintään yhden sarakkeen, joka toimii rivin tunnisteena, kyseinen sarake tulisi lukita kiinteäksi taulukon vasempaan reunaan (Schade, Mobile Tables: 40 Comparisons and Other Data Tables, 2017). Tämä vähentää kognitiivista kuormitusta ja parantaa tiedon tulkintaa, sillä käyttäjän vierittäessä taulukkoa vaakasuunnassa lukittu sarake säilyttää tarkasteltavan rivin kontekstin käyttäjän muistissa. Lisäksi käyttäjälle voidaan tarjota mahdollisuus valita ja järjestellä sarakkeita, mikä vähentää näytöllä esitettävän tiedon määrää ja parantaa taulukon intuitiivisuutta. Sarakkeiden asettelua voidaan optimoida tiivistämällä tyhjää tilaa, kuitenkin varmistaen, että sisältö pysyy selkeästi luettavana ilman tarvetta zoomata taulukkoa. Vaihtoehtoisena ratkaisuna taulukon esittämiselle on muodostaa taulukon riveistä vieritettävä lista, joka koostuu korttielementeistä. Kortteihin sisällytetään käyttäjälle keskeisimmät ja olennaisimmat tiedot, sillä korttien rajallisen tilan vuoksi kaikkia taulukon rivien tietoja ei ole mahdollista esittää yhdessä kortissa samanaikaisesti. Kaavioiden mukautumisessa mobiilikäyttöliittymään haasteita on kuitenkin huomattavasti enemmän, sillä kaavioiden esittämiseen ei ole juurikaan vaihtoehtoisia keinoja. Yksi menetelmä kaavioiden käytettävyyden parantamiseksi on vähentää näytettävän datan määrää esimerkiksi yhdistämällä datapisteitä tai tiivistämällä aikavälien tiheyttä. Datan yksinkertaistaminen ja aggregointi ei ole kuitenkaan aina mahdollista, sillä esitettävä data ja sen konteksti saattavat edellyttää yksityiskohtien säilyttämistä. Myös kaavioiden visuaalisen tilankäytön optimoinnilla voidaan vaikuttaa kaavioiden käytettävyyden parantamiseen. Kaavion ympäriltä voidaan tarvittaessa tiivistää tilaa tai piilottaa kaavion toissijaisia elementtejä, kuten Y-akselin otsikot, jolloin varsinaisen datan esittämiseen vapautuu enemmän tilaa. Optimoinnissa tulee kuitenkin huolehtia, että kaavion mittasuhteet kokoon nähden säilyvät ennallaan, sillä mittasuhteiden vääristyminen voi vaikeuttaa datapisteiden välistä vertailua ja aiheuttaa virheellistä tulkintaa. 41 5 Mobiilikäyttöliittymän toteutus Tässä luvussa esitellään toteutetun mobiilikäyttöliittymän rakenteen ja navigoinnin muutokset. Lisäksi tarkastellaan myös sovelluksen visualisointikomponentteihin tehtyjä muutoksia sekä toteutuksessa kohdattuja haasteita. 5.1 Rakenne Mobiilikäyttöliittymän toteutuksessa sovelluksen pääikkunan rakennetta muokattiin edellisen luvun rautalankamallin mukaisesti. Näkyvin muutos sovelluksen aikaisempaan versioon verrattuna oli käyttöliittymän rakenne, jossa yhtenäisen ja responsiivisen rakenteen sijaan mobiilikäyttöliittymästä luotiin erillinen adaptiivinen rakenne. Tämä uudistus mahdollisti mobiilikäyttöliittymille paremmin soveltuvien komponenttien, kuten navigointipalkin sekä bottom sheet-komponentin, hyödyntämisen osana käyttöliittymän ydinrakennetta. Rakenteen adaptiivisuuden vuoksi osa käyttöliittymän vuorovaikutteisista komponenteista jouduttiin sijoittelemaan uudelleen, joka saattaa aiheuttaa käyttökokemuksessa epäjohdonmukaisuutta. Navigointipalkki sijoitettiin näytön alareunaan ja se korvaa sovelluksen työpöytäversiossa esiintyneen navigointialueen. Uudessa rakenteessa vieritettävä sisältöalue sijoittuu sovelluspalkin ja navigointipalkin väliin, jolloin molempien palkkien sisältämät navigointitoiminnot ovat jatkuvasti käyttäjän saatavilla. Mobiilikäyttöliittymään uutena lisätty bottom sheet -komponentti korvaa kaikki käyttöliittymän toissijaiset ikkunat. Pääikkunan sivupalkin korvaava bottom sheet -komponentti avautuu sovelluspalkin oikean yläreunan painikkeesta. Sen sisältämien widget-komponenttien sisältö pysyi ennallaan ja ne on jaettu kolmeen erilliseen välilehteen, joita voidaan tarkastella yksitellen (Kuva 5.1). 42 Kuva 5.1. Sivupalkin widgetit bottom sheet -ikkunassa 5.2 Navigointi Mobiilikäyttöliittymässä navigointipalkin tavoitteena on varmistaa, että navigoinnin toiminnallisuus noudattaa muista käyttöliittymistä tuttuja periaatteita ja se on rakenteellisesti mahdollisimman yksinkertainen ja kompakti. Tämän periaatteen mukaisesti navigointialueen toiminnot jaettiin erillisiin osioihin, toisin kuin työpöytäsovelluksen käyttöliittymässä, jossa navigointialueen toiminnallisuus on keskitetty yhteen alueeseen. Navigointipalkki koostuu kolmesta kuvakepainikkeesta, jotka edustavat sovelluksen keskeisimpiä toimintoja (kuva 5.2). Vasemmanpuoleisin painike avaa sovelluksen ensisijaisen navigointivalikon, joka sisältää navigointilinkit käyttäjän Overview-, Portfolio-, View- ja Watchlist-näkymiin. Linkkiä napauttaessa valikko sulkeutuu ja käyttäjä siirtyy valittuun näkymään. Näkymien sisältämien välilehtien navigointivalikko avautuu näytön yläreunassa sijaitsevan sovelluspalkin keskimmäisestä painikkeesta ja se on toiminnallisuudeltaan ja rakenteeltaan hyvin samankaltainen ensisijaisen navigointivalikon kanssa. 43 Kuva 5.2. Mobiilikäyttöliittymän navigointipalkki Navigointipalkin keskimmäisestä painikkeesta avautuu sovelluksen komentovalikko, joka vastaa pääosin työpöytäsovelluksen versiosta (kuva 5.3). Komentovalikosta on kuitenkin poistettu ominaisuuksia, joita ei voida tukea mobiilikäyttöliittymässä tai jotka eivät ole muuten olennaisia sen käytössä, kuten esimerkiksi osto- ja myyntitransaktioiden CSV- tiedostojen tuontiominaisuus. Navigointipalkin oikeanpuoleisesta painikkeesta avautuu lomakkeet osto- ja myyntitransaktioille. Lomakkeiden syöttökenttien ja painikkeiden kokoa on suurennettu, jotta kenttien kosketusalue olisi suurempi kenttää napauttaessa. Kummastakin lomakkeesta on poistettu ominaisuus, joka mahdollisti useamman transaktion syöttämisen kerrallaan. Syy ominaisuuden poistamiselle oli tavoite pitää mobiilikäyttöliittymän lomakkeet mahdollisimman yksinkertaisina ja helppoina käyttäjille, sekä välttää ylimääräistä visuaalista tai toiminnallista kuormitusta, joka saattaisi vaikuttaa negatiivisesti sovelluksen käyttökokemukseen. 44 Kuva 5.3. Vasemmanpuoleisessa näkymässä esitetään navigointipalkista avautuvat osto- ja myyntitransaktioiden lomakkeet. Oikeanpuoleisessa näkymässä esitetään komentovalikko. Kuvien alareunassa näkyvä harmaa alue on mobiililaitteen selaimen alapalkki, joka ei liity sovelluksen käyttöliittymään 45 Kuva 5.4. Navigoinnin bottom sheet -ikkunat. Vasemmanpuoleisessa näkymässä on eri näkymien välinen. Kuvien alareunassa näkyvä harmaa alue on mobiililaitteen selaimen alapalkki, joka ei liity sovelluksen käyttöliittymään. 5.3 Visualisointi Välilehtien datan visualisointielementeissä tehtiin merkittäviä muutoksia ja kompromisseja, jotta kaikki välilehdet voitiin mukauttaa mobiilikäyttöliittymään sopiviksi. Positions- ja Dividends-välilehdillä KPI-kortit toteutettiin vaakasuuntaisesti vieritettäviksi, mikä säästää tilaa välilehdillä oleville taulukoille (kuvat 5.5 ja 5.6). Positions-, Dividends-, Cash Flow- ja Transactions-välilehtien taulukoiden toteutuksissa pohdittiin suunnitteluvaiheessa esitettyjä vaihtoehtoisia toteutustapoja, mutta päätettiin pitäytyä taulukoiden muodossa, jotta sarakkeiden lajitteluominaisuus voitiin säilyttää ennallaan ja taulukot pysyivät yhtenäisinä sovelluksen työpöytäversion kanssa, vähentäen käyttäjän kognitiivista kuormitusta. Taulukoiden sarakkeiden välejä tiivistettiin sekä sarakkeiden leveyksiä kavennettiin, jotta vaakasuuntaista vierittämistä olisi vähemmän, mutta sarakkeet kuitenkin erottuvat vielä toisistaan selkeästi. Taulukoiden oikeaan reunaan ja alareunaan lisättiin korostettu häivytysefekti, joka viestii käyttäjälle taulukoiden vieritettävyydestä visuaalisen vihjeen avulla. 46 Performance ja Allocation-välilehdillä kaavioiden kokoa mukautettiin mobiilikäyttöliittymään soveltuviksi, kaavioiden ympärillä olevaa tyhjää tilaa vähennettiin, sekä kaavioiden akseleiden asteikkoja joko piilotettiin tai niiden tiheyttä pienennettiin niin, että asteikkojen arvot mahtuvat kapeammalle näytölle. Kaavioiden osalta merkittäväksi haasteeksi muodostui kosketuseleiden vuorovaikutus, koska kaaviokomponentit pystyvät tunnistamaan vain yhden kosketuspisteen kerrallaan. Tämän vuoksi Performance-välilehden Market value- aluekaaviosta poistettiin ominaisuus, joka mahdollisti kahden datapisteen välisen eron vertailemisen. Lisäksi Cash Flow-välilehdellä pylväskaavio päätettiin piilottaa, koska ryhmiteltyjen pylväiden leveys pieneni suuremmalla datapisteiden määrällä niin merkittävästi, että pylväät eivät olisi olleet enää käyttäjän tulkittavissa. Dividends-välilehdeltä piilotettiin summapylväskaavio, joka kuvaa aikajakson aikana maksettujen osinkojen kokonaissumman. Suunnitteluvaiheessa todettiin, että kaavion säilyttäminen veisi liikaa tilaa välilehdellä olevalta taulukolta ja kaavion koon pienentäminen heikentäisi sen luettavuutta merkittävästi. Tästä syystä kaavio päätettiin piilottaa mobiilikäyttöliittymän välilehdeltä ja vapautettu tila priorisoitiin taulukon käyttöön. Allocation-välilehdellä tehtiin myös kompromisseja visualisoitavan datan osalta. Välilehdeltä piilotettiin laajennettava lista, joka esittää ryhmiteltyjen positioiden yhteenlasketut ja yksittäiset markkina- ja hankinta-arvot sekä tuottoluvut allekkain. Lista päätettiin piilottaa, koska sen mukauttaminen mobiilikäyttöliittymään sellaisenaan ei olisi ollut mahdollista ilman merkittäviä muutoksia sen rakenteeseen ja toiminnallisuuteen. Lisäksi välilehdellä oleva taulukko sisältää vastaavaa dataa yksinkertaisemmassa muodossa. 47 Kuva 5.5. Mobiilikäyttöliittymään skaalatut Positions, Performance ja Allocation välilehdet Kuva 5.6. Mobiilikäyttöliittymään skaalatut Dividends, Cash Flow ja Transactions välilehdet 48 6 Käytettävyystutkimus Tässä luvussa esitellään käytettävyystutkimuksen toteutus. Luvussa käydään läpi käytetty tutkimusmenetelmä, esitetään kyselyyn valitut kysymykset sekä analysoidaan kyselystä saadut tulokset. Lopuksi tarkastellaan tulosten merkitystä, pohditaan niiden yhteyttä työn tutkimuskysymyksiin ja arvioidaan havaintojen perusteella tehtäviä kehitysehdotuksia. 6.1 Tutkimusmenetelmä Mobiilikäyttöliittymän käytettävyystestaus päätettiin toteuttaa kvantitatiivisella kyselymenetelmällä (engl. survey), jonka tarkoituksena oli kerätä ainestoa, jota voitiin muuttaa tilastolliseen muotoon tutkimustulosten analysoimiseksi. Tutkimus keskittyi pääosin mobiilikäyttöliittymän rakenteen ja navigoinnin muutoksiin sekä datan visualisointikomponentteihin, kuten taulukoihin ja kuvaajiin. Tavoitteena oli tunnistaa uuden mobiilikäyttöliittymän vahvuuksia sekä kehityskohteita käyttäjäpalautteen perusteella, jotta käyttäjäkokemusta voitaisiin parantaa tulevaisuudessa. Kyselytutkimus toteutettiin sähköisesti ja etänä, käyttäen Formbricks-työkalua, joka on avoimeen lähdekoodiin perustuva SaaS-pohjainen sovellus (Formbricks GmbH, 2025). Valittu työkalu mahdollisti dynaamisten kyselyiden luomisen ja sekä vastausten tallentamisen CSV-muodossa myöhempää analysointia varten. Kyselyyn valittiin satunnainen joukko osallistujia Stocklen käyttäjistä ja kutsu kyselyyn lähetettiin käyttäjille sähköpostin välityksellä. Kyselyyn osallistuneet käyttäjät edustivat eri ikäryhmiä, teknisiä osaamistaitoja, sekä mobiililaitteita ja niiden käyttöjärjestelmiä. Osallistujien omien mobiililaitteiden käyttö mahdollisti realistisen testausympäristön, joka vastasi todellisia käyttöolosuhteita. Ennen kyselyyn vastaamista osallistujia kehotettiin tutustumaan sovellukseen ja sen ominaisuuksiin omilla mobiililaitteillaan. Kysely suoritettiin anonyymisti englannin kielellä, sillä sovellus on kansainvälinen ja sen käyttöliittymän ainoana kielenä toimii englanti. Kyselyyn vastanneille osallistujille tarjottiin alennuskoodi yhden kuukauden Pro-version lunastamiseen. 6.2 Tutkimuksen kysymykset Kyselytutkimuksessa oli tarkoituksena vastata tutkimuskysymyksiin, jotka liittyivät Stocklen mobiilikäyttöliittymän käytettävyyteen eri osa-alueilla. Kysely koostui 27 kysymyksestä, jotka jaettiin neljään osioon: käyttäjäprofiili, käyttöliittymän rakenne ja navigointi, datan 49 visualisointi sekä yleinen käytettävyys ja palaute. Kysymyksistä 24 oli suljettuja ja 3 avoimia kysymyksiä. Suljetuissa kysymyksissä esitettiin väittämiä sovelluksen eri ominaisuuksien käytettävyydestä ja vastausten keruuseen käytettiin 5-portaista Likert-asteikkoa (1= täysin eri mieltä, 3 = neutraali, 5 = täysin samaa mieltä). Avoimissa kysymyksissä käytettiin vapaita tekstikenttiä, joiden tarkoitus oli kerätä vapaamuotoista ja syvällisempää palautetta suljettujen kysymyksien pohjalta. 1. Käyttäjäprofiilia koskevat kysymykset a. What is your age? Kuinka vanha olet? b. What is the operating system of your mobile device? Mikä on mobiililaitteesi käyttöjärjestelmä? c. What internet browser do you primarily use on your mobile device? Mitä internetselainta käytät mobiililaitteellasi? d. How long have you used Stockle? Kuinka kauan olet käyttänyt Stocklea? e. How often do you use Stockle’s desktop version? Kuinka usein käytät Stocklen työpöytäversiota? f. How often do you use Stockle’s mobile version? Kuinka usein käytät Stocklen mobiiliversiota? 2. Käyttöliittymän rakennetta ja navigointia koskevat kysymykset a. The mobile user interface structure and layout are clear and easy to understand Mobiilikäyttöliittymän rakenne ja ulkoasu ovat selkeitä ja helppoja ymmärtää b. The necessary functionalities and views in the mobile user interface are easily accessible Tarvittavat toiminnot ja näkymät mobiilikäyttöliittymässä ovat helposti saatavilla 50 c. Menus and buttons in the mobile user interface are placed logically and appropriately Valikot ja painikkeet mobiilikäyttöliittymässä on sijoitettu loogisesti ja asianmukaisesti d. Navigation in mobile user interface feels intuitive and natural Navigointi mobiilikäyttöliittymässä tuntuu intuitiiviselta ja luonnolliselta e. The interactive elements, such as buttons and text fields, in the mobile user interface are sized appropriately for easy finger tapping and use Mobiilikäyttöliittymän vuorovaikutteiset elementit, kuten painikkeet ja tekstikentät, ovat kooltaan sopivia helppoon sormikosketukseen ja käyttöön f. The bottom sheet in mobile user interface feels intuitive and natural to use Mobiilikäyttöliittymän bottom sheet -ikkuna tuntuu intuitiiviselta ja luonnolliselta käyttää g. The touch gestures, such as swiping to close, for the bottom sheet in the mobile user interface function smoothly and are easy to understand Mobiilikäyttöliittymän bottom sheet -ikkunan kosketuseleet, kuten pyyhkäisy sulkemiseen, toimivat sujuvasti ja ovat helppoja ymmärtää h. The content of inside the bottom sheet in mobile user interface is clear and easy to read Mobiilikäyttöliittymän bottom sheet -ikkunan sisältö on selkeää ja helppolukuista i. Provide open-ended feedback on the mobile user interface, navigation, and bottom sheet, especially concerning the previous statements Anna avointa palautetta mobiilikäyttöliittymästä, navigoinnista ja pohjaikkunasta, erityisesti liittyen edellisiin väittämiin 3. Datan visualisointia koskevat kysymykset a. The data tables in the mobile user interface are easy to navigate, and the information is easily accessible Mobiilikäyttöliittymän datataulukot ovat helppoja navigoida, ja tieto on helposti saatavilla 51 b. Scrolling through the data table columns in the mobile user interface feels smooth and intuitive Mobiilikäyttöliittymän datataulukoiden sarakkeiden vierittäminen tuntuu sujuvalta ja intuitiiviselta c. The rows and columns of data tables in the mobile user interface are clearly distinguishable Mobiilikäyttöliittymän datataulukoiden rivit ja sarakkeet ovat selkeästi erotettavissa d. The cell values in the data tables of the mobile user interface are clear and easy to read Mobiilikäyttöliittymän datataulukoiden solujen arvot ovat selkeitä ja helppolukuisia e. The charts in the mobile user interface are clear and easy to understand Mobiilikäyttöliittymän kaaviot ovat selkeitä ja helppoja ymmärtää f. The data point values in the charts of the mobile user interface are easy to read Mobiilikäyttöliittymän kaavioiden datapisteiden arvot ovat helppolukuisia g. The charts in the mobile user interface support touch gestures and operate as intended Mobiilikäyttöliittymän kaaviot tukevat kosketuseleitä ja toimivat tarkoitetulla tavalla h. Provide open-ended feedback on the visualization components, such as data tables and charts, in the mobile user interface, especially concerning the previous statements Anna avointa palautetta mobiilikäyttöliittymän visualisointikomponenteista, kuten datataulukoista ja kaavioista, erityisesti liittyen edellisiin väittämiin 4. Yleistä käytettävyyttä koskevat kysymykset ja vapaa palaute a. How would you rate your experience with the usability and functionality of Stockle’s mobile user interface? 52 Kuinka arvioisit kokemuksesi Stocklen mobiilikäyttöliittymän käytettävyydestä ja toiminnallisuudesta? b. How likely are you to use Stockle's mobile user interface more frequently in the future? Kuinka todennäköisesti käytät Stocklen mobiilikäyttöliittymää useammin tulevaisuudessa? c. How well does Stockle's mobile user interface meet your expectations compared to the desktop version? Kuinka hyvin Stocklen mobiilikäyttöliittymä vastaa odotuksiasi verrattuna työpöytäversioon? d. Provide open-ended feedback on the usability and functionality of the mobile user interface, especially in relation to the previous statements Anna avointa palautetta mobiilikäyttöliittymän käytettävyydestä ja toiminnallisuudesta, erityisesti liittyen edellisiin väittämiin 6.3 Tulokset ja analysointi Kyselytutkimukseen osallistui yhteensä 35 henkilöä, joista 9 jätti kyselyn kesken ja 26 suoritti sen loppuun asti. Ennen analyysivaihetta kaikkien osallistujien vastaukset käytiin läpi ja keskeneräiset vastaukset poistettiin aineistosta, jotta ne eivät heikentäisi datan laatua tai tulosten luotettavuutta. 6.3.1 Käyttäjäprofiili Kyselyyn vastanneista suurin ikäryhmä oli 25–34-vuotiaat, joiden osuus oli 58 %. Toiseksi suurimman ryhmän muodostivat 35–44-vuotiaat, joita oli 23 % vastaajista (kuva 6.1). Nämä kaksi ikäryhmää yhdessä korostavat nuorten aikuisten merkittävää osuutta Stocklen käyttäjäkunnassa. Mobiililaitteiden käyttöjärjestelmistä iOS oli selvästi yleisin 77 %:n osuudella, kun taas Androidin osuus oli 23 % (kuva 6.2). iOS:n vahva asema näkyi myös mobiililaitteiden internet-selainten käytössä: yleisin selain oli Safari (46 %), jota seurasivat Chrome (31 %) ja Brave (19 %) (kuva 6.3). 53 Kuva 6.1. What is your age? Kuva 6.2. What is the operating system of your mobile device? Kuva 6.3. What internet browser do you primarily use on your mobile device? 54 Enemmistö vastaajista (69 %) oli suhteellisen uusia käyttäjiä, jotka olivat liittyneet sovelluksen käyttäjiksi viimeisen vuoden aikana (kuva 6.4). Sovelluksen käyttöaktiivisuutta mittaavissa kysymyksissä, yli puolet vastaajista (58 %) ilmoitti käyttävänsä Stocklen työpöytäversiota kerran viikossa tai useammin (kuva 6.5). Mobiiliversion osalta vastaava osuus oli selvästi pienempi, 35 % (kuva 6.6). Tämän lisäksi puolet vastaajista (50 %) käytti mobiiliversiota harvemmin kuin kerran kuukaudessa tai ei lainkaan. Työpöytäversion korkeampi käyttöaste mobiiliversioon verrattuna saattaa selittyä sen paremmalla soveltuvuudella analyyttisen tiedon tarkasteluun, etenkin kun isolla näytöllä tarkastellaan kuvaajia ja kaavioita. Mobiiliversion vähäinen käyttö voisi puolestaan viitata siihen, että aiempaa mobiilikäyttöliittymän versiota ei ole täysin optimoitu pienille näytöille, jolloin se on ollut merkittävästi työpöytäversiota heikompi sekä käytettävyydeltään että toiminnallisuuksiltaan. Kuva 6.4. How long have you used Stockle? 55 Kuva 6.5. How often do you use Stockle’s desktop version? Kuva 6.6. How often do you use Stockle’s mobile version? 6.3.2 Käyttöliittymän rakenne ja navigointi Mobiilikäyttöliittymän rakenne ja ulkoasu koettiin pääosin selkeiksi ja helposti ymmärrettäviksi, mikä sai vastaajien keskiarvoksi 4,1 (kuva 6.7). Myös tarvittavat toiminnallisuudet ja näkymät olivat suurimman osan (81 %) vastaajien mielestä helposti saavutettavissa ja kysymys sai keskiarvoksi 4,1 (kuva 6.8). 56 Kuva 6.7. The mobile user interface structure and layout are clear and easy to understand Kuva 6.8. The necessary functionalities and views in the mobile user interface are easily accessible Valikkojen ja painikkeiden sijoittelusta 76 % vastaajista sekä vastauksien keskiarvo (4,0) puolsi sijoittelun loogisuutta. Yksi vastaajista piti sijoittelua kuitenkin jokseenkin epäloogisena (kuva 6.9). Vuorovaikutteisten elementtien kosketusalueen pinta-alaa arvioivassa kysymyksessä vastaajista kaikki, lukuun ottamatta yhtä, arvioivat kosketusalueen pinta-alan olevan riittävä. Yli neljännes vastaajista suhtautui asiaan neutraalisti, mikä viittaisi lisäkehityksen tarpeeseen. Lisäksi yksi vastaaja arvioi myös, että elementtien kosketusalueet ovat liian pieniä, mikä osaltaan tukisi lisäkehityksen tarvetta (kuva 6.10). 57 Kuva 6.9. Menus and buttons in the mobile user interface are placed logically and appropriately Kuva 6.10. The interactive elements, such as buttons and text fields, in the mobile user interface are sized appropriately for easy finger tapping and use Navigointiin ja bottom sheet -komponenttiin liittyvissä kysymyksissä vastausten hajonta pysyi hyvin samankaltaisena kuin aiemmissa saman aihealueen kysymyksissä. Sovelluksen navigointi arvioitiin yleisesti intuitiiviseksi ja sujuvaksi, mutta keskiarvon (3,8) perusteella olisi vielä parantamisen varaa (kuva 6.11). Vastaajista suurin osa (88 %) koki bottom sheet - komponentin pääosin intuitiiviseksi ja helppokäyttöiseksi. Loput vastaajista kokivat jonkinlaisia haasteita sen käytettävyydessä (kuva 6.12). Vastaavasti bottom sheet - komponentin kosketuseleiden toimivuutta ja sujuvuutta arvioitaessa ne koettiin yleisesti myönteisiksi (73 %), kun taas 27 % vastaajista suhtautui asiaan neutraalisti tai kielteisesti, mikä voi viitata epävarmuuteen tai kokemuksen puutteeseen (kuva 6.13). Bottom sheet - komponentin sisältö koettiin enimmäkseen selkeäksi ja helposti luettavaksi, vaikka yksi vastaajista ilmaisi osittaista erimielisyyttä havainnon suhteen (kuva 6.14). 58 Bottom sheet -komponentissa havaittuihin haasteisiin vaikuttaa todennäköisesti sen haastava toimintaympäristö. Vaikka kyseinen komponentti on yleistynyt merkittävästi nykyaikaisissa mobiilikäyttöliittymissä, sen sulava toiminnallisuus on selainpohjaisessa ympäristössä haasteellista toteuttaa. Tämä osittain johtuu mobiiliselaimen kosketuseleiden tulkintatavasta, joka ei toimi yhtä luontevasti ja tarkasti kuin täysin natiivissa mobiilisovelluksessa. Kuva 6.11. Navigation in mobile user interface feels intuitive and natural Kuva 6.12. The bottom sheet in mobile user interface feels intuitive and natural to use 59 Kuva 6.13. The touch gestures, such as swiping to close, for the bottom sheet in the mobile user interface function smoothly and are easy to understand Kuva 6.14. The content of inside the bottom sheet in mobile user interface is clear and easy to read 6.3.3 Datan visualisointi Datan visualisointiin liittyvissä kysymyksissä keskityttiin arvioimaan Stocklen mobiilikäyttöliittymässä esiintyvien datan visualisointikomponenttien käytettävyyttä, selkeyttä ja interaktiivisuutta. Yli 80 % vastaajista koki taulukoissa olevat tiedot pääosin helposti saavutettaviksi (kuva 6.15). Sarakkeiden vierityksen intuitiivisuutta koskevassa kysymyksessä noin 27 % arvioi taulukoiden vierityksen jonkin verran haasteelliseksi (Kuva 6.16). Avoimessa palautteessa korostettiin erityisesti taulukoiden vierityspalkin puuttumista, mikä saattaa heikentää käyttäjän kykyä havaita taulukon vaakasuuntainen vieritysominaisuus. Tämä havainto viittaa myös luvussa 4.4.2 mainittuun ”false floor”-efektiin, jossa käyttäjältä jää huomaamatta taulukon vieritettävyys. Vaikka taulukon ala- ja oikeaan reunaan on lisätty 60 häivytysefekti, jonka tarkoitus on toimia visuaalisena vihjeenä taulukon vieritysmahdollisuudesta, se ei välttämättä ole kaikille täysin selvää. Kuva 6.15. The data tables in the mobile user interface are easy to navigate, and the information is easily accessible Kuva 6.16. Scrolling through the data table columns in the mobile user interface feels smooth and intuitive Kysymykset, jotka koskivat taulukoiden rivien ja sarakkeiden erottuvuutta sekä solujen arvojen selkeyttä ja helppolukuisuutta, saivat enimmäkseen myönteisiä arvioita. Kuvissa 6.17 ja 6.18 esitetään vastaajien jakaumat ja kummankin kysymyksen keskiarvo ylittää neljän, mikä viittaa taulukoiden visuaaliseen selkeyteen ja helppoon luettavuuteen. 61 Kuva 6.17. The rows and columns of data tables in the mobile user interface are clearly distinguishable Kuva 6.18. The cell values in the data tables of the mobile user interface are clear and easy to read Kysymyksessä, jossa arvioitiin kaavioiden selkeyttä ja ymmärrettävyyttä, yli 80 % vastaajista vastasi olevansa samaa mieltä tai täysin samaa mieltä väittämän kanssa ja kysymyksen keskiarvoksi muodostuikin tasan 4 (kuva 6.19). Kaavioiden datapisteiden luettavuuden osalta lähes 40 % vastaajista antoi neutraalin arvion, mikä viittaa tarpeeseen kehittää kaavioiden datapisteiden arvojen luettavuutta (kuva 6.20). Myös kaavioiden kosketuseleiden toiminnallisuus sai keskimääräistä heikompia arvioita, joista lähes puolet (46 %) oli neutraaleja (kuva 6.20). Avoimissa palautteissa mainittiin, että kaavioiden kosketuseleet koettiin hieman kömpelöiksi. Tämä palaute voisi liittyä tässä työssä aiemmin esitettyyn havaintoon kaavioiden rajallisesta kosketuseleiden tuesta. 62 Kuva 6.19. The charts in the mobile user interface are clear and easy to understand Kuva 6.20. The data point values in the charts of the mobile user interface are easy to read Kuva 6.21. The charts in the mobile user interface support touch gestures and operate as intended 6.3.4 Yleinen käytettävyys ja palaute Yleistä käytettävyyttä ja palautetta koskevissa kysymyksissä käytettävyys ja toiminnallisuus arvioitiin yleisesti myönteiseksi, vastausten keskiarvon ollessa 4,04 ja 80 % vastaajista antoi 63 arvosanan 4 tai 5 (kuva 6.22). Kysymyksessä ”How likely are you to use Stockle's mobile user interface more frequently in the future?” selvitettiin käyttäjien näkemystä lisätä mobiilikäyttöliittymän käyttöä tulevaisuudessa. Vastausten keskiarvon (4,1) ja jakauman perusteella suurin osa käyttäjistä arvioi lisäävänsä mobiilikäyttöliittymän käyttöaktiivisuutta aikaisempaan verrattuna. Viidesosa (20 %) vastaajista arvioi mobiilikäyttöliittymän käyttöaktiivisuutensa pysyvän ennallaan (kuva 6.23). Kuva 6.22. The mobile user interface structure and layout are clear and easy to understand Kuva 6.23. How likely are you to use Stockle's mobile user interface more frequently in the future? Viimeisessä kysymyksessä arvioitiin työpöytä- ja mobiiliversioiden vastaavuutta keskenään, joka sai keskiarvon 3,9 (kuva 6.24). Tämä osoittaa, että täydellistä vastaavuutta ei ole versioiden välillä saavutettu, mikä todennäköisesti selittyy mobiiliversiosta karsituilla ominaisuuksilla. 64 Kuva 6.24. How well does Stockle's mobile user interface meet your expectations compared to the desktop version? 6.4 Johtopäätökset Kyselytutkimuksen tulokset antavat melko hyvän kokonaiskuvan Stocklen mobiilikäyttöliittymän nykytilasta ja sen tulevaisuuden kehitystarpeista. Kokonaiskuvaa tarkasteltaessa tulee kuitenkin huomioida, että vastauksien välisiin eroihin vaikutti vastaajien aikaisempi käyttökokemus, vastaajien käyttämät käyttöjärjestelmät, selaimet sekä mobiililaitteen näytön koko. Kyselytutkimuksen rajoitteeksi muodostui otannan pieni koko, mikä vaikeuttaa tilastollisesti luotettavien johtopäätösten tekemistä. Vastaajamäärän vähäisyys johtui ennen kaikkea vaikeudesta saada käyttäjiä osallistumaan kyselytutkimukseen. Vaikka kyselyyn osallistujille oli etukäteen luvattu palkkio, se ei osoittautunut riittävän suureksi kannustimeksi kyselyyn osallistumiselle. Todennäköisesti houkuttelevammalla palkitsemismallilla olisi voitu parantaa vastaajien aktiivisuutta, mutta samalla se olisi kasvattanut huomattavasti sovelluksen ylläpitoon liittyviä kustannuksia. Lisäksi laadullisen palautteen määrä jäi melko vähäiseksi, minkä seurauksena syvempi kuva käyttäjien kokemuksista ja konkreettisista kehitysehdotuksista jäi saamatta. Ensimmäisen tutkimuskysymyksen osalta voidaan todeta, että suurimmat haasteet liittyivät mobiililaitteiden fyysisiin ominaisuuksiin, erityisesti näytön tilan rajallisuuteen sekä pystysuuntaiseen asetteluun. Edellä mainituilla rajoitteilla oli merkittävä vaikutus mobiilikäyttöliittymän suunnitteluratkaisuihin ja ne edellyttivät käyttöliittymän rakenteen yksinkertaistamista, elementtien uudelleensijoittelua sekä ominaisuuksien priorisointia ja 65 karsimista. Lisäksi kosketuspohjaiset vuorovaikutustavat osoittautuivat ongelmallisiksi, erityisesti visualisointikomponenttien osalta, joissa kaikki työpöytäversion toiminnot eivät olleet teknisesti mahdollisia toteuttaa. Kyselytutkimuksesta saadut tulokset tukivat näitä havaintoja, sillä käyttäjät kokivat kosketuspohjaisten komponenttien käytettävyyden osittain puutteelliseksi. Toisen tutkimuskysymyksen kohdalla kyselyn tulokset osoittivat, että mobiilikäyttöliittymään tehdyt muutokset olivat pääosin onnistuneita. Mobiilikäyttöliittymään tehty adaptiivinen rakenne mahdollisti sille tyypillisten komponenttien käyttöönoton. Vaikka rakenteen muutos adaptiiviseksi edellytti joidenkin vuorovaikutteisten komponenttien uudelleensijoittelua sekä ominaisuuksien karsimista, kyselytulosten perusteella tehdyillä ratkaisuilla ei näyttänyt olevan heikentävää vaikutusta sovelluksen käyttökokemukseen tai sen toiminnallisuuteen. Sen sijaan kaavioiden datapisteiden luettavuus ja kosketuseleiden toiminnallisuus nousivat selkeämmiksi jatkokehityksen kohteiksi. Kolmanteen tutkimuskysymykseen vastattaessa voidaan todeta, että kyselyyn osallistuneet käyttäjät kokivat uuden mobiilikäyttöliittymän suurimmilta osin selkeäksi ja toimivaksi. Useimmat vastaajista ilmoittivat myös aikovansa käyttää mobiiliversiota aktiivisemmin tulevaisuudessa. Tämä havainto tukee näkemystä, että mobiilikäyttöliittymän parantamiseksi tehdyt muutokset olivat onnistuneita ja ne lisäsivät sovelluksen käytettävyyttä aiempaan verrattuna. 6.5 Tulevaisuus Tutkimuksen keskeisiksi rajoitteiksi muodostuivat kyselytutkimuksen pieni otanta sekä laadullisten palautteiden vähäinen määrä. Näiden vuoksi tutkimuksesta saatujen tulosten yleistettävyys jäi melko rajalliseksi. Tulevaisuutta ajatellen olisi tärkeää saada kerättyä suurempi joukko kyselyyn osallistujia sekä monipuolisempaa laadullista palautetta. Koska Stocklen käyttäjäkunta on hajautunut ympäri maailmaa, perinteisten käytettävyystestien tai haastatteluiden järjestäminen ei ole kovin realistinen vaihtoehto. Jatkotutkimuksessa tiedon keruu voitaisiin sen sijaan integroida suoraan Stocklen käyttöliittymään, jolloin käyttäjät voisivat antaa palautetta ja kehitysehdotuksia välittömästi käyttökokemuksensa yhteydessä. Kyselyjen tueksi olisi hyödyllistä ottaa käyttöön myös kehittyneempi analytiikka, jonka avulla voitaisiin kerätä tietoa esimerkiksi käyttäjien aktiivisuudesta, sovelluksessa vietetystä ajasta, eri ominaisuuksien käyttötiheydestä, työpöytä- 66 ja mobiiliversioiden käyttöaktiivisuudesta sekä käyttäjäkunnan maantieteellisestä jakaumasta. Kehittyneemmän analytiikka avulla voitaisiin samalla vähentää käyttäjiltä vaadittujen vastauksien määrää, mikä voisi osaltaan kannustaa osallistumaan tutkimuksiin, jos kyselyt olisivat nykyistä lyhyempiä ja kevyempiä täyttää. Lisäksi jatkokehityksessä olisi mahdollista hyödyntää A/B-testauksen kaltaisia menetelmiä, joissa eri käyttöliittymäratkaisuja tarjotaan rinnakkain eri käyttäjäryhmille. Näin voitaisiin arvioida esimerkiksi tämän työn kyselytutkimuksessa esiintyneitä haasteita, kuten kaavioiden luettavuutta, kosketuseleiden käytettävyyttä ja navigointiratkaisujen toimivuutta. 67 7 Yhteenveto Tämän diplomityön tavoitteena oli suunnitella ja toteuttaa Stocklen datapainotteisen työpöytäversion skaalaus mobiilikäyttöliittymäksi sekä selvittää siihen liittyviä haasteita, ratkaisuja ja muutosten vaikutuksia käyttökokemukseen. Työn yhteenvetona voidaan todeta, että se täyttää kaikki sille asetetut tavoitteet sekä vastaa määriteltyihin tutkimuskysymyksiin. Työn teoreettisessa osuudessa käsiteltiin käyttöliittymäsuunnittelun teoreettisia perusteita ja ominaisuuksia, minkä pohjalta suunniteltiin ja toteutettiin työn käytännönosuus, adaptiivinen mobiilikäyttöliittymä. Suunnittelun ja toteutuksen lopputuloksena syntynyttä mobiilikäyttöliittymää ja sen käytettävyyttä tutkittiin käyttäjille tehdyllä kyselytutkimuksella. Tutkimuksen tulokset antoivat hyvän kuvan mobiilikäyttöliittymän käyttökokemuksesta ja toteutusta pidettiin pääosin onnistuneena sekä toimivana. Tutkimuksen jatkokehityksen osalta todettiin, että keräämällä laajempi joukko osallistujia sekä painottamalla enemmän laadullista palautetta, voitaisiin saavuttaa laadukkaampia ja luotettavampia tutkimustuloksia. Vaikka datapainotteisten web-sovellusten mobiilikäyttöliittymien suunnittelussa ja toteutuksessa on useita haasteita, tutkimus osoittaa, että huolellisella suunnittelulla ja käyttöliittymäsuunnittelun periaatteita noudattamalla voidaan saavuttaa toimiva kokonaisuus, jossa käyttökokemus ja toiminnallisuus säilyvät. 68 Lähteet Formbricks GmbH. (2025). The Open Source Qualtrics Alternative. Retrieved from Formbricks: https://formbricks.com ScientiaMobile, Inc. (2017, November 7). Smartphone and Tablet Portrait Orientation Usage 2017 Q3. Retrieved from ScientiaMobile: https://www.scientiamobile.com/smartphone-tablet-portrait-orientation-usage-2017- q3/ Interaction Design Foundation. (2016, September 25). What are Wireframes? Retrieved from Interaction Design Foundation - IxDF: https://www.interaction- design.org/literature/topics/wireframe Google. (2024). Material Design. Retrieved from Google: https://m3.material.io/ Investopedia. (2024, May 31). Position Definition - Short and Long Positions in Financial Markets. Retrieved from Investopedia: https://www.investopedia.com/terms/p/position.asp Investopedia. (2022, April 08). Watchlist: Definition, Purpose, and How To Create One. Retrieved from Investopedia: https://www.investopedia.com/terms/w/watchlist.asp Investopedia. (2024, June 6). Financial Portfolio: What It Is and How to Create and Manage One. Retrieved from Investopedia: https://www.investopedia.com/terms/p/portfolio.asp Nielsen, J. (2024, September 12). Gestalt Principles for Visual UI Design. Retrieved from UX Tigers: https://www.uxtigers.com/post/gestalt-principles Schade, A. (2017, September 17). Mobile Tables: Comparisons and Other Data Tables. Retrieved from Norman Nielsen Group: https://www.nngroup.com/articles/mobile- tables/ Yablonski, J. (2024). Laws of UX. Sebastopol, CA: O’Reilly Media. Budiu, R. (2019, May 6). Mobile User Experience: Limitations and strengths. Retrieved from Norman Nielsen Group: https://www.nngroup.com/articles/mobile-ux/ Budiu, R. (2024, October 14). Interaction Cost. Retrieved from Nielsen Norman Group: https://www.nngroup.com/articles/interaction-cost-definition/ Schade, A. (2020, April 30). Responsive Web design (RWD) and user experience. Retrieved from Nielsen Norman Group: https://www.nngroup.com/articles/responsive-web- design-definition/ 69 Cooper, A., Reimann, R., Cronin, D., & Noessel, C. (2014). About face: The essentials of interaction design. Indianapolis: John Wiley & Son Inc. Ware, C. (2020). Information Visualization: Perception for Design. Morgan Kaufmann. Few, S. (2013). Information Dashboard Design: Displaying data for at-a-glance monitoring. El Dorado Hills, CA: Analytics Press. Few, S. (2012). Show Me the Numbers - Designing Tables and Graphs to Enlighten. Burlingame, California: Analytics Press. Schwabish, J. (2021). Better Data Visualizations: A Guide for Scholars, Researchers, and Wonks . New York: Columbia University Pres. Koponen, J.;Hilden, J.;& Vapaasalo, T. (2016). Tieto näkyväksi: informaatiomuotoilun perusteet. Helsinki: Aalto-yliopisto. Bach, B., Freeman, E., Abdul-Rahman, A., Turkay, C., Khan, S., Fan, Y., & Chen, M. (2023). Dashboard Design Patterns. Apple. (2024, September 9). Human interface guidelines: Visual hierarchy. Retrieved January 2025, from Apple Developer: https://developer.apple.com/design/human-interface- guidelines/layout#Visual-hierarchy Interaction Design Foundation. (2016, June 1). Mobile User Experience (UX) Design. Retrieved from Interaction Design Foundation - IxDF: https://www.interaction- design.org/literature/topics/mobile-UX-design Tidwell, J., Brewer, C., & Aynne, V. (2020). Designin Interfaces: Patterns for Effective Interaction Design . Sebastopol, CA 95472: O'Reilly Media, Incorporated. Lee, B., Dachselt, R., Isenberg, P., & Choe, E. K. (2021). Mobile Data Visualization. Chapman and Hall. 70 Liitteet Liite 1. Formbricks kyselytutkimus 71 72 73 74 75 76 77 78 79