Uusi sovellusprojekti - Näin se toimii

Moi! Minä olen Aija, olen Simplifiedilla päädevaajana. Sain tehtäväksi tehdä sovelluksen, joka toimii lisäpalveluna nykyisille asiakkaillemme. Tämä oli myös loistava tilaisuus kertoa käytännössä, miten me tehdään sovelluksia. Tämä on osa 4, uudet osat julkaistaan täällä blogissa, sekä uutiskirjeessä (johon voit liittyä tekstin lopussa).

Tervetuloa seuraamaan sovellusprojektia!

Kertaus edellisistä osista

Ensimmäisessä osassa käytiin läpi ideointivaihetta, tarkempi suunnitelma sovellusprojektille, tehtiin projektiin rajauksia ja kirjattiin ylös tärkeimmät asiat, joita sovelluksen täytyy tehdä ollakseen hyödyllinen.

Seuraavissa osissa käytiin läpi alustavaihtoehtoja ja syitä, miksi päädyimme tässä projektissa valitsemaan Flutterflown, sekä kerroin, miten tietokannat toimivat ja miltä Flutterflown tietokanta, sekä Googlen Firebase tietokanta toimivat pintapuolisesti.

Nyt olemme saaneet siis sovelluksen ideoitua, sovelluksen tärkeimmät tehtävät määritettyä, valittua sopiva alusta sekä rakennettua tietokanta.

Seuraavaksi tarkastellaan sitä, miltä haluamme sovelluksen näyttävän, eli puhutaan käyttöliittymäsuunnittelusta (UI design), sekä käyttökokemussuunittelusta (UX design).

UI-suunnittelu

Käyttöliittymäsuunnittelu, eri User interface design, sisältää muun muassa näyttöjen ja elementtien suunnittelun ja visuaalisen ilmeen määrittelyn. Suunnittelemme siis sitä, miltä sovellus käyttäjälle näyttää. Sovelluksen ilmeen tulee olla selkeä ja johdonmukainen, jotta käyttäjän on helppo ymmärtää, mitä hän milläkin sivulla näkee ja mitä hänen kuuluisi tehdä.

Sovelluksen kuuluu myös usein skaalautua saumattomasti kaikille laitteille, eli tietokoneeseen, tablettiin ja puhelimiin. Käytännössä tämä tarkoittaa sitä, että jokaisesta näkymästä tehdään kolme eri versiota, joiden asettelut ja elementtien järjestys voi vaihdella tarpeen mukaan.

UX-suunnittelu

Käyttökokemussuunnittelu, eri User experience design eroaa UI-suunnittelusta siinä, että siinä keskitytään erityisesti siihen, että sovellus ei ainoastaan näytä hyvältä, vaan siihen, miten sovelluksen käytöstä saadaan mahdollisimman helppoa, intuitiivista ja sujuvaa.

Hyvä UX-suunnittelu auttaa käyttäjää navigoimaan nopeammin eri sivuille, poistaa turhia klikkauksia ja jättää pois tarpeettomia elementtejä, sekä pitää huolen että kokemus on saumaton ja yhdenmukainen läpi sovelluksen.

UX-suunnittelussa hyödynnetään käyttäjäpolkuja (user flow), eli sitä, miten käyttäjä liikkuu käyttäessään sovellusta. Havainnollistamaan tätä, esimerkki Headspace-sovelluksen muutamista näkymistä:

1. Miten aloittaa sovelluksen UI-suunnittelu

Meillä on tapana tilata sovellusprojekteihin apua ulkopuolisilta UI/UX-design ammattilaisilta, mutta tässä tapauksessa, kun sovellus on meidän oma projekti meidän omaan käyttöön, mennään omin voimin. Ensimmäinen askel on suunnitella ja määritellä sovelluksen yleistä ilmettä, kuten värejä ja muotoja.

Koska minä en ole varsinaisesti designeri, ja vaikka olisinkin, pyörää ei kannata tässäkään asiassa keksiä uudelleen. Kannattaa lähteä liikkeelle siitä, että etsii inspiraatiota ilmeeseen erinäisiltä sivustoilta. Tässä voidaan käyttää apuna esimerkiksi ulkopuolisia UI design kirjastoja tai vaikka Dribbble-sivustoa.

Minä päädyin tässä kohdassa etsimään sopivan näköistä designia Mobbin.com-sivustolta.

2. Ilme ja värit

Ensin etsitään sopivan tyylistä designia ja katsotaan, millaisia väriyhdistelmiä voitaisiin käyttää. Näissä on parhaita käytäntöjä, värit ja vastavärit sekä yleisesti käytetyt väriyhdistelmät, joita kannattaa hyödyntää. Parasta on tietysti se, jos sovelluksessa on jotain uniikkia, eikä se näytä täysin samalta, kuin esimerkiksi Airbnb tai Wolt.

Tässä kannattaa yrittää miettiä adjektiiveja: Tumma vai vaalea, Värikäs vai rauhallinen, pyöreät vai kovat muodot...

Väriyhdistelmiä voi etsiä myös esimerkiksi Coolors-väripalettityökalulla. Paina välilyöntiä, jotta värit vaihtuvat, lukitse hyviä värejä ja etsi, kunnes löydät sinulle sopivan yhdistelmän.

Tähän sovellukseen valittiin meidän Simplified IT:n violetti ja vihreä ja seuraavan näköistä esimerkkidesignia:

Wireframet

Wireframella tarkoitetaan visuaalisia kaavioita, jotka kuvaavat sovelluksen rakennetta ja toiminnallisia osia, kuten valikoita ja painikkeita, ennen niiden visuaalista toteutusta. Siis suunnitelma, jonka perusteella sovellusta voidaan lähteä toteuttamaan.

Kun yleinen ilme on valittu, seuraava vaihe on elementtien lisääminen ja niiden järjestysten miettiminen. Sovelluksen täytyy olla helposti navigoitava ja ymmärrettävä, joten tietyt elementit, kuten valikot, on hyvä laittaa sinne, missä ihmiset ovat tottuneet ne näkemään. Joko hampurilaisvalikkoon ylös oikealle, tai alareunaan.

Esimerkkejä wireframetyökaluista ovat Figma, Miro, Moqups, sekä Justinmind.

Tässä projektissa käytetään Miroa. Keräsin insipraationäyttöjä ja mietin käyttäjäpolkuja. Tässä tapauksessa, kun sekä suunnittelen että teen sovelluksen itse, minulle riittää suurpiirteisempi design. Eli värien ja elementtien ei tarvitse olla ihan kohdallaan, että saan kiinni siitä, mitä olen hakemassa mihinkin näkymään.

Tämä on tietysti myös Low-coden etu, perinteisessä koodissa ei kannata kirjoittaa riviäkään koodia, ennen kuin design on valmis, mutta näillä työkaluilla muutosten tekeminen on nopeaa, joten kaikkea ei välttämättä tarvitse tehdä valmiiksi etukäteen.

Ja tältä se näyttää!

Tässä ollaan vielä hyvin simppelissä alkuvaiheessa, mutta sovelluksen ulkomuoto alkaa hahmottua. Flutterflowssa sovellus tehdään mobiilisovellusten yleisen tavan mukaan sekä vaalealle ja tummalle teemalle. Nämä värit sopvat molempiin. Haluttiin korporaatiomaisten laatikoiden sijasta pyöreyttä ja pehmeyttä.