Category Archives: Navigaatio

Mitä voimme oppia Facebook-sovelluksen kotinäkymän kehityksestä?

Applen tarjoama standardiratkaisu iPhone-sovelluksen osiosta toiseen liikkumiseen on enimmillään viisipaikkainen tab bar. Jos on tarvetta useammalle osiolle, viimeiseksi valinnaksi voidaan laittaa kolme pistettä, ja sijoittaa tämän taakse listamuodossa lisäkohteita.

Apple tulee omissa sovelluksissaan toimeen tällä ratkaisulla, mutta usein on tarvetta toteuttaa navigaatio jotenkin muuten. Tärkeitä kohteita saattaa olla enemmän kuin viisi tai näytön pinta-ala haluttaisiin tehokkaammin käyttöön, eikä näytön alalaitaa raaskita varata navigointipalkille.

Facebookin iPhone-sovellus käytti alkuaikoinaan myös tätä ratkaisua. Ohessa kuvakaappaus versiosta 2.0 (cnet.com).

Kuvassa pistää erityisesti silmään vaikeakäyttöinen vieritettävä navigointipalkki välilehtirakenteen alapuolella. Muistan, ettei sen kanssa ollut mukava näpertää. Tab bar, välilehdet, vieritettävä palkki – on siinä hierarkiaa kerrakseen! Ei ihme, että Facebook päätti panna navigaation uusiksi sovelluksen 3.0-versiossa.

Versiossa 3.0 esiteltiin sittemmin varsin laajasti käytetty kotinäkymäpatterni, jossa päänavigaatio on koko ruudun kokoinen. Skaalautuminen hoidetaan samaan tapaan kuin iPhonen kotinäytöllä, näyttö kerrallaan vaakasuunnassa vierittämällä. (kuva Ars Technica)

Etuna on, että kohteita mahtuu näkyviin enemmän kuin tab bariin ja näkymästä saadaan visuaalisempi. Valikko ei myöskään haaskaa tilaa muilta näkymiltä. Haittapuolena on, että valikko täytyy avata erillisellä painalluksella.

Päädyimme vastaavaan ratkaisuun viime kesänä myös Taloussanomien iPhone-version kanssa. Ensin toteutetussa iPad-versiossa tärkeimmät osiot olivat mahtuneet näkyviin vaakasuuntaiseen palkkiin, mutta puhelimen ruudulla olisi tullut ahdasta emmekä halunneet tuoda ylimääräistä palkkia pystysuuntaista tilaa viemään, joten toteutimme kotinäkymäratkaisun.

Facebookiin tapaan sovellus aukeaa ensisijaisesti tärkeimpään uutisnäkymään, ja kotinäkymään pääsee erikseen painamalla. Käytimme painikkeen symbolina Facebookista poiketen talon kuvaa, sillä Facebookin käyttämä kuva toi liikaa mieleen list/grid-painikkeen.

Pian saimme huomata, että ratkaisu oli juuri mennyt muodista. Facebookin nykyinen versio toi mukanaan uuden version kotinäkymästä. Se ei enää olekaan erillinen koko ruudun näkymä, vaan näytön reunasta aukeava osittain valitun näkymän alle peittoon jäävä lista. Vierityssuunnaksi on valittu jälleen Applen standardin more-näkymän tapaan pystysuunta.

Jos vanha kotinappi näytti grid-valinnalta, uusi näyttää vastaavasti list-napilta…

Raa’asti painallusten määrällä analysoiden tämä lähestymistapa ei ole sen tehokkaampi kuin aiempi koko ruudun kotinäkymä. Yhtä lailla se vaatii yhden painalluksen aueatakseen ja samaan tapaan se estää nykyisen näkymän käytön valikon ollessa auki. Henkinen etäisyys osittain nykyisen näytön takaa aukeavaan valikkoon sen sijaan tuntuu lyhyemmältä.

Valikon vaikutelma ei ole yhtä visuaalinen kuin koko ruudun kotinäkymän ja mikä yllättävintä, listaan ei mahdu sen enempää kohteitatakaan. Aiempaan kotinäkymään mahtuu hakuluukku ja yhdeksän kohdetta. Uudessa listassa on hakuluukun lisäksi vain kahdeksan kohdetta.

Niin tai näin, uusi patterni on jo osoittautunut suosituksi. Google on ottanut sen käyttöönsa iPhonen Gmail-sovelluksessa oleellisella parannuksella: valikon saa näkyviin ja piiloon valikkonapin lisäksi sormella pyyhkäisemällä.

Viimeiseen asti hiotusta käyttöliittymästään tunnettu oman elämänsä facebook Path on toteuttanut kenties hienoimman version tästä lähestymistavasta. Valikko aukeaa Gmailin tapaan pyyhkäisyeleellä, mutta toimii huomattavasti pehmeämmin joustopomppuineen kaikkineen. Vastaavasti osiosta toiseen siirryttäessä se animoituu hetkeksi pois näkyvistä ja palaa takasin niin, että näkymä on jo valmiiksi piirretty.