Valitse kieli
Yleistä
Tehtävänä oli toteuttaa työnäyte Figmalla valmistamalla erilaisia komponentteja ja luoda ne interaktiivisiksi. Tarkoituksena ei ollut luoda valmista työtä, vaan osoittaa, millaisisa komponentteja osaan luoda ja prototypioida.
Toiminnot
Valmistin työnäytteeksi Kekri-Kööri-sovelluksen, jossa käytin erilaisia mikrointeraktioita, hyödynsin design tokeneita, autolayoutteja ja tein erilaisia variaatioita. Näiden avulla sain luotua esimerkin, millainen sovellus voisi olla ja miten vuorovaikutus toimii sovelluksen ja käyttäjän välillä.
Valmistin erilaisia variantteja, jotka muuttuvat käyttäjän toiminnon mukaan; esimerkiksi painikkeet muuttavat väriä, kun kursori siirretään painikkeen päälle.
Keskeiset toiminnot
Variantit ja layout
Prototyypissä on useita erilaisia variantteja esimerkiksi painikkeille; tila, jolloin painike ei ole aktiivinen, valittu-tila ja painike, jota on painettu.
Etusivulla vaihtuva teksti on tehty layouttia ja erilaisia variantteja hyödyntäen.
Design tokenit ja ehdolliset variantit
Design tokeneita käytin mm. karuselli-komponentin teossa. Siinä määrittelin värit ja tekstit. Ehdollisissa varianteissa käytin hyödykseni luomia design tokeneita värin määrittelyyn erilaisissa painikkeissa.
Kekri-Köökit-näkymässä näkee, millaisia ruokia käyttäjä voisi tehdä. Karusellia liikuttamalla näkee erilaisia vaihtoehtoja, ja alla oleva murupolku näyttää, missä kohti käyttäjä on menossa. Palloja klikkaamalla käyttäjä voi siirtyä karusellin eri kohteisiin.
Mikrointeraktiot ja slotit
Prototyypistä löytyy mikrointeraktioita, jotka toimivat käyttäjän kanssa vuorovaikutuksessa. Tällaisia ovat mm. erilaiset painikkeet, kytkimet ja viuhka- tai haitarikomponentti, jotka muuttuvat jollain tavalla, kun käyttäjä esimerkiksi klikkaa kohdetta.
Slotteja käytin Kekri-Kestit-sivulla, jossa on komponentti, jossa on kuva ja teksti.
Työnäyte
Yhteenveto
Mitä opin?
Design tokenit oli uusi juttu minulle, ja se tuntui kovin sekavalta. Kuitenkin kun design tokeneita alkoi tekemään, alkoi se käymään enemmän järkeen; vaikka työmäärä saattaa olla iso, voi tehdä pohjan, jota voi muokata tarpeen tullen projektin mukaan. Se selkeytti omaa hahmottamista suunniteltavasta käyttöliittymästä.
Miten käyttäisin työkalua muotoilutyössä?
Slotit helpottivat työskentelyä paljon, kun ei tarvinut monistaa samaa elementtiä ja muokata sitä käsin, ja niistä ehdottomasti on hyötyä esim. verkkokaupoissa.