iPhone X on pian täällä. Mitkä sen uusista ominaisuuksista tuovat eniten muutosta suunnittelijan työhön?
iPhone X sisältää runsaasti uudistuksia, jotka vaikuttavat vahvasti sovellusten suunnitteluun. Mitkä uudet elementit tuovat eniten muutosta suunnittelijan työhön?
Apple on tuomassa markkinoille uudet iPhone 8 ja X -puhelinmallit. Siinä missä iPhone 8 tuntuu tutummalta ja lähinnä aikaisempien mallien parannellulta versiolta, pyrkii iPhone X jo Applen julistuksen mukaan olemaan tulevaisuuden laite.
Omenaimperiumin tuotteelle ominaisesti vastaanotto on vaihdellut innostuneesta huvittuneeseen. Joidenkin mielestä kyseessä on vain todella kallis emojikone, kun toiset taas ovat tilaamassa sen saman tien.
Meille suunnittelijoille uuden laitteen julkaisu tarkoittaa myös uuden opiskelua sen suhteen, mikä laitteissa muuttuu työmme kannalta. Tämä artikkeli esittelee pääpiirteittäin, mitä iOS-käyttökokemuksen rakentamisessa on jatkossa otettava huomioon.
Välittömästi erottuvin asia uusissa puhelimissa on niiden koko. Siinä missä iPhone 8 säilyttää jo aiemmista iPhoneista tutun koon 375 x 667 pt, kasvattaa iPhone X korkeuttaan peräti 145 pt:n verran. Tämä tarkoitaa sitä, etteivät iPhone X:n mitat skaalaudu muihin malleihin aivan luonnostaan.
Malleissa on nyt siis keskenään eri kuvasuhde. Suunnittelijalle tämä tulee vastaan esimerkiksi koko näytön täyttävien kuvien tuottamisessa. Jotta kuvat toimivat molemmissa, pitää siis jatkossa suunnitella fullscreen-kuvia, joissa tärkeä informaatio osuu molempien laitteiden ruutuihin. Käytännössä tämä tarkoittaa kaiken oleellisen informaation sijoittamista kuvan keskelle.iPhone 8 ja muut samankokoiset vanhemmat mallit joko leikkaavat korkeamman iPhone X:n kuvista pois alhaalta ja ylhäältä – tai mahduttavat kuvan näytölle, mutta lisäävät palkit näyttöön. iPhone X taas leikkaa kuvista leveyttä fullscreen-kuvissa tai lisää palkit.
Vanhojen sovellusten käyttöliittymät toimivat iPhone 8:lla aivan kuin ennenkin, mutta iPhone X:n kohdalla näkymät vaativat päivitystä. Kuvat kannattaa päivittää joko näytettäväksi kokonaisina ja antaa lippulaivamallin käyttäjien elää mustien palkkien kanssa tai vaihtoehtoisesti muokata designia laajemmin siten, että informaatio näkyy molemmissa malleissa.
Apple suosittelee asseteille PDF-muotoa. Vektorimallisia assetteja suositellaan, koska ne ovat kevyempiä ja skaalautuvat hienosti jokaiseen kokoon.
Mikäli asseteista päättää kuitenkin tehdä bitmap-kuvia, on vanhoja malleja varten edelleen syytä tehdä 1x ja 2x -kokoiset kuvat – siinä missä iPhone X taas tarvitsee Retina-näyttöään varten 3x-kokoiset assetit.Suunnittelijan sydämen saa sykkimään se, että näytön esittämä väriskaala on aiempaa rikkaampi, joten visuaaliset kokemukset näyttävät entistäkin hienommilta.
Myös uudistuneiden UI-elementtien, kuten näytön pyöristettyjen kulmien, status barin ja koti-näppäimen tuomat muutokset tulee huomioida. Ne ovat osasyy siihen, miksi oleellisen informaation sijoittaminen keskelle näyttöä on niin tärkeää.
Suurin uutuus käyttöliittymän suhteen on fyysisen koti-näppäimen vaihtuminen näytön alareunaan piirtyvään viivaan. Koti-näppäintä ei suositella piilotettavaksi muutoin kuin hetkellisesti. Tämä on ymmärrettävää, sillä käyttäjän on päästävä sen avulla pois sovelluksesta milloin tahansa.
Suurin uutuus käyttöliittymän suhteen on fyysisen koti-näppäimen vaihtuminen näytön alareunaan piirtyvään viivaan.
Vaikka uusi kotinäppäin onkin ulkoasultaan suhteellisen hienovarainen viiva, ei erityisiä visuaalisia korostuksia tähän indikaattoriin ole syytä luoda. Näppäimen tulee antaa tilaa muulle käyttöliittymälle ja sen ympäristö on hyvä rauhoittaa muilta painikkeilta. Tärkeää on lisäksi huomioida se, että koti-näppäimen taustaväri saa riittävästi kontrastia, jotta näppäin erottuu tilanteessa kuin tilanteessa.Koti-näppäin voidaan sijoittaa tarvittaessa ns. edge protection -toiminnon alle. Mikäli sovelluksessa käytetään paljon pyyhkäisyliikkeitä ylös ja alas, voidaan edge protection asettaa koti-näppäimen “suojaksi”. Tällöin näytön alaosaa pitää swaipata kahdesti, jotta koti-näppäin tulee esiin.
Status bar on navigaatiopalkkien tapaan korkeamman mallinen kuin aiemmin. Apple suosittelee, ettei status baria piilotettaisi, minkä pidemmän mallinen näyttö nyt luontevasti mahdollistaakin. Apple perustelee tätä käyttäjäkokemuksen johdonmukaisuudella ja haluaa pitää status barin näkyvillä aina saman korkuisena esimerkiksi puheluiden aikana.
Siinä missä aiemmin sormenjälkitunnistus avasi puhelimen lukituksen, se tapahtuu nyt tunnistamalla kasvot.Aivan ensimmäisenä suunnittelijoiden on otettava sovellusten päivityksissä huomioon se, etteivät iPhone X:n käyttäjät voi käyttää tunnistukseen sormenjälkeä.Kasvojen tunnistus johtaa tietysti siihen, että laitteita tullaan yhä enenevissä määrin käyttämään ilman kosketusta. Tämä tarkottanee jatkossa siirtymistä yhä enemmän ääniohjauksen pariin.
Suuri näyttökoko tuo mukanaan omanlaisensa ongelmat. Pienikätisille ulottuminen on hankalampaa. Tämä pitää huomioida esimerkiksi sijoittamalla käyttöliittymän elementit puhelimen näytöllä harkitusti.
Apple toivoo, että sovellusten koherenttiutta ja yhdenmukaista käyttäjäkokemusta rakennettaisiin siten, että sovelluksissa pyrittäisiin pitämään elementit mahdollisimman symmetrisesti sekä vaaka- että pystyasennoissa. Tätä koherenttiutta voi lisätä myös minimoimalla näytön pyörittämistä vaativat toiminnot. Apple perustelee tätä sillä, että ihmisen lihasmuistin hyödyntäminen käyttökokemuksessa on tärkeää ja elementtien olisi senkin vuoksi hyvä sijaita samoilla sijainneilla molemmissa tiloissa.
Mikäli haluat sukeltaa syvemmälle aiheeseen, tutustu Applen omiin materiaaleihin täällä ja täällä.
