7.4.2016 | Verkkopalvelukehitys

Web Design – viisi trendiä vuodelle 2016

Verkkosivustojen layoutit kertovat aikansa yleisistä visuaalisista trendeistä, mutta myös heijastavat teknologiaa, joka ihmisillä on käytettävissään. Verkko- tai mobiilipalvelu eroaa perinteisestä mediasta interaktiivisuutensa takia, ja käyttäjän ajatusmaailman muutos määrittää myös suurelta osin web designin kehityskulkua. Missä ollaan nyt – ja minne ollaan menossa?

1. Tervemenoa kuvakaruselli, tervetuloa videotausta

Vielä jokin aika sitten kuvakaruselli oli yksi yleisimpiä elementtejä verkkosivustoilla. Siitä tuli niin suosittu, että sen käyttö alkoi olla jo itsetarkoituksellista. Pahimmillaan kuvakaruselli varaa suurimman osan sivuston tärkeimmästä sisältöalueesta kuvapankista ostetuille fiilistelykuville.

Nyt kuvakarusellin kultakausi alkaa olla ohi. Laskeutumissivujen visuaalisena avainelementtinä hyödynnetään yhä useammin html5-videotaustaa. Uusien selainten tuki videoelementille on mahdollistanut videon entistä luovemman hyödyntämisen web designissa. Enää ei tarvita hankalia Flash- tai Silverlight-soittimia, vaan modernit selaimet pyörittävät videoita siinä missä kuvaa ja tekstiäkin.

Taustavideota hyödyntää mm. Dagmarin Samsung S5 Neo –puhelimelle toteuttama kampanjasivusto.

2. Mobile First – vai Mobile Only?

Älypuhelimen ja tabletin räjähdysmäisesti kasvanut osuus päätelaitteista nosti 2010-luvulla web designin kuumimmaksi trendiksi Mobile First -ajattelun. Siinä missä verkkosivuston ulkoasun suunnittelu oli ennen lähtenyt pöytäkoneen käyttäjästä, nyt mentiin mobiililaitteen käyttäjä edellä. Mobile First -ajattelu toi verkkosivustojen peruselementeiksi avautuvan mobiilinavigaation, pitkät one-pagerit, klikkausten määrän vähenemisen ja yksinkertaistuneen valikkorakenteen. Havaittiin, että mobiilikäyttäjän priorisointi tuotti useimmiten selkeän ja miellyttävän käyttöliittymän myös isommille ruuduille.

Mobiilikäyttöliittymän valuminen kaikkeen web designiin ei osoita laantumisen merkkejä. Monet verkkosivustot ovat jopa kokonaan luopuneet esimerkiksi perinteisestä ylänavigaatiosta, ja näyttävät myös desktop-käyttäjälle pelkän mobiilinavigaation. Tämä kertoo siitä, että mobiili-webin käyttö alkaa olla jo niin tuttua, että samoja konventioita sovelletaan luontevasti myös silloin, kun verkkoa käytetään isolla ruudulla. Perinteiset web-elementit, kuten monitasoiset drop-down-valikot sen sijaan tuntuvat mobiilikäyttöliittymään tottuneelle vanhanaikaisilta ja raskailta.

3.Typografia ja vektorit

Vielä joitakin vuosia sitten web-kehittäjät olivat sidottuja muutamiin web-ystävällisiin fontteihin, jotka yhä edelleen hallitsevat valtaosaa verkkosivuista. Selainten ja css:n kehittyminen on sittemmin mahdollistanut typografian paremman hyödyntämisen ja nostanut sen yhdeksi verkkosivuston visuaalisen ilmeen avaintekijöistä. Viimeistään Google Fonts, joka toi satoja ilmaisia fontteja jokaisen web-kehittäjän saataville, räjäytti verkkosivustoilla käytettyjen fonttien määrän.

Fonttien ohella selaimet tukevat entistä paremmin myös vektorigrafiikkaa. Vektorien avulla esimerkiksi erilaiset kuvaajat ja infografiikat voidaan esittää interaktiivisina ja skaalautuvina elementteinä perinteisten staattisien kuvien sijaan. Tämä parantaa samaan aikaan sekä visuaalisuutta, käytettävyyttä että skaalautuvuutta – triplavoitto siis. Vektorit ovat myös tiedostokooltaan paljon pienempiä kuin bitmap-kuvat, mikä tekee niitä hyödyntävistä sivuista kevyitä ja nopeita.

4. Älykäs haku lainaa Googlelta

Google oppii yhä paremmin arvaamaan hakijan todelliset päämäärät ja tarjoamaan räätälöityjä hakutuloksia. Myös sivustojen omat hakutoiminnot pyrkivät samaan, vaikka niiden takana ei Googlen kaltainen tekoäly yleensä pyörikään. Ehdottava haku, joka tarjoaa hakutuloksia jo muutaman kirjaimen kirjoittamisen jälkeen alkaa kuulua jo monien verkkosivustojen vakiokalustoon.

Ehdottavaa hakua rikastetaan nykyään myös kuvilla ja ingresseillä. Periaatteet ovat pitkälti samoja kuin sivuston hakukoneoptimoinnissa – myös sisäisen haun käyttäjille halutaan tarjota hakutuloksia, jotka ovat kiinnostavia ja houkuttelevat klikkaamaan. Mm. suomalainen AddSearch on luonut työkalun yksinomaan sivuston sisäisen hakukokemuksen parantamiseen.

5. Verkkosivu tarinankerronnan keinona

Verkon interaktiivisesta luonteesta huolimatta verkkosivut olivat pitkään melko staattisia infopläjäyksiä, jossa käyttäjän osaksi jäi navigoida sivulta toiselle sisältöihin tutustuen. Sittemmin, erityisesti sosiaalisen median vallankumouksen myötä, verkon käyttö on muuttunut radikaalisti ja hyvä verkkosivusto on ennen kaikkea palvelu, jossa käyttäjä on pääosassa.

Interaktiivisuuden lisääntyminen heijastuu myös designiin. Esimerkiksi Helsingin Sanomat hyödyntää ”interaktiivista tarinaa” uutena tapana kertoa uutisista ja ilmiöistä. Kyseessä on eräänlainen pelillistetty artikkeli, jossa lukija omilla valinnoillaan vaikuttaa artikkelin sisältöön esimerkiksi vastaamalla kysymyksiin.

Tarinankerronnan tuominen osaksi designia tarkoittaa sitä, että sivuston käyttökokemus on entistä personoidumpi ja henkilökohtaisempi. Käyttäjää ohjataan vahvasti visuaalisin elementein ja ohjauksin siirtymään seuraavaan vaiheeseen, ja sivuston käyttökokemuksella on selkeä alku, keskikohta ja loppu sen sijaan, että kaikille tarjottaisiin kaikkea kuin valintamyymälässä.

Tällainen design noudattelee pitkälti tarinankerronnan ikiaikaisia periaatteita: koukuttava alku, tarinan kaari, tunteisiin vetoaminen ja yllättävä loppuratkaisu. Entä, jos asiakkaasi kokemus hänen poistuessaan verkkosivustoltasi muistuttaisi hyvän kirjan lukemista?

Lopuksi

Web designissa, kuten muissakin asioissa, trendit ovat aikansa ilmiöitä. Osa jää pysyviksi ja osa korvaantuu uusilla. On vielä vaikea ennustaa, miten esimerkiksi älykellojen tai augmented reality -lasien kaltainen teknologia mahdollisesti yleistyessään vaikuttaa web designiin ja millaisia haasteita web-kehittäjät kohtaavat, kun käyttökokemus jälleen muuttuu. Yksi asia on kuitenkin varma: käyttäjälähtöisyys ei ole trendi vaan klassikko, johon panostamalla et voi hävitä.

 

Tuulikki Laine

Tuulikki Laine

Lisää aiheesta