050-5748041 | ilkka.olander (at) sometek.fi

WordPress kotisivut: 12 suunnittelutrendiä vuodelle 2016

WordPress kotisivut: 12 suunnittelutrendiä vuodelle 2016
tammikuu 26, 2016 Ilkka Olander
WordPress kotisivut - verkkosuunnittelu trendit 2016
V

erkkosuunnittelu muuttuu vauhdilla ja jo vuodessa ehtii tapahtua paljon. Jos olet aikeissa päivittää kotisivut, pidä mielessä seuraavat 12 suunnittelutrendiä.

Muutos tapahtuu asteittain ja vuoden 2015 verkkosuunnittelutrendit, kuten ”mobile first”, flat design 2.0 ja mediarikkaampi kerronta, jatkavat voimistumistaan. Lisäksi vuoden aikana on noussut uusia kuumia puheenaiheita, kuten verkon standardisoituminen (”kaikki näyttää samalta”). Keskityn esimerkeissä erityisesti WordPress –sivustoihin, jotka ovat sekä Suomessa että maailmalla haukanneet markkinasta leijonan osan.

1. WordPressin maailmanvalloitus jatkuu

WordPress pyörittää nyt 26 prosenttia maailman verkkosivuista, mikä tekee siitä ylivoimaisesti suosituimman julkaisujärjestelmän. Mutta sekään ei riitä WordPressin perustaja Matt Mullenwegille, joka on asettanut tavoitteeksi 50% markkinaosuuden. Lukemattomat isotkin brändit luottavat WordPressiin, jonka piti mukamas olla vain ”yksinkertainen blogialusta”. Niin ne ajat muuttuvat.

WordPress kotisivut: suosituin julkaisujärjestelmä

Star Wars -sivut (Disney) ovat WordPress -pohjalla, kuten monen muunkin tunnetun brändin sivut.

Parin viime vuoden aikana WordPress on noussut myös Suomessa ennennäkemättömään suosioon. Kun 2012 perustin Sometekin, vain muutama kilpailija myönsi avoimesti käyttävänsä WordPressiä. Nykyään kaikki mainostavat sitä.

Mitä 2016 tuo tullessaan? Ainakin premium -lisäosien markkina kasvaa 2016 vauhdilla, mikä tarkoittaa jo ennestään maailman laajennettavimman julkaisualustan joustavuuden kasvua. Olipa sinulla tarve verkkokaupalle, sosiaaliselle intranetille, tapahtumakalenterille, ajanvarausjärjestelmälle tai lähes mille tahansa kuvittelemallesi WordPress -sivuston ominaisuudelle, todennäköisesti tarkoitukseen löytyy useita laadukkaita lisäpalikoita.

Lisäksi WordPressin ydintä on kehitetty niin, että mobiilisovellusten integroiminen tulee yhä helpommaksi. Harvalla yrityksellä on tähän asti ollut varaa omaan mobiilisovellukseen, mutta jatkossa tilanne saattaa muuttua: yhä useamman WordPress sivuston seuraksi saattaa kohta tulla oma app. Tällä on paljon merkitystä, sillä yli 80% mobiililaitteiden käytöstä tapahtuu sovelluksissa ja vain pieni osa verkkoselainta käyttäen.

2. Mobiili edellä – oikeasti

Verkon mobiilikäytön määrä ylitti 2015 verkon käytön pöytäkoneilla. Responsiivinen suunnittelu (= yleisin tapa tehdä mobiiliin skaalautuva sivusto) ei ole enää pitkään aikaan ollut ”kiva plussa” vaan välttämättömyys. Tästä huolimatta Suomi on edelleen täynnä yrityssivustoja, jotka eivät taivu kunnolla mobiiliin.

Lähes kaikki WordPress teemat ovat nykyään responsiivisia, mutta se ei vielä riitä. On tavallista, että mobiilisivuston optimointiin uhrataan vain vähän aikaa ja se jää riisutuksi versioksi desktop –sivuista (”täysversio”). Näin ei voi olla enää 2016, kun valtaosa selaa sivujasi mobiililaitteella. Käyttäjät odottavat nyt täysveristä mobiilikokemusta.

Samalla myös isojen ruutujen (esim. älytelevisioiden) käyttö verkon selailuun on kasvamassa. Verkkosivun pitääkin nykyään taipua lähes minkä tahansa kokoiselle ruudulle sulavasti, missä on haastetta kerrakseen.

 

 

Tässä suhteessa yksi viime vuoden kiitetyimmistä tapauksista oli Netflixin brändiuudistus. Katso videosta, miten Netflixin uuden ilmeen elementit mukautuvat joustavasti eri kokoihin aina bussin teippauksista mobiililaitteen ruudulle – säilyen aina tunnistettavana.

3. Standardisoituminen: ”Kaikki sivut näyttää samalta”

WordPress kotisivut - standardisoituminen

Yksi vuoden 2015 puheenaiheita oli, miten yhä useampi verkkosivu näyttää samalta: 1) iso ”hero” –kuva jonka päällä otsikko, teaser teksti ja nappi 2) alla kolme palvelua tai hyötyä ikonipallukoina ja 3) logo- tai testimonialkaruselli. Onkin totta, että internetistä on kadonnut paljon rönsyjä viime vuosina. Sivujen standardisoitumiseen on vaikuttanut monikin asia: valmiiden teemojen, tuotantoelementtien ja UI -kirjastojen kasvanut käyttö sekä verkkomarkkinointiin liittyvän tiedon kasvu.

Suosituimmilla WordPress teemoilla on satoja tuhansia käyttäjiä eikä liene yllätys, että niiden varaan rakennetut sivustot ovat enemmän tai vähemmän samankaltaisia. Nykyään brändien kannattaakin hakea erottuvuutta eri tekijöillä kuin käyttöliittymän elementeillä: sisältö, kuvitus, typografia…

On niitäkin, joiden mielestä verkon standardisoituminen ei välttämättä ole huono asia. Esimerkiksi konversio-optimoijat ovat tuottaneet paljon tietoa siitä, mitkä ratkaisut menestyvät verkossa. He korostavat, että bisnesmielessä ei kannata taistella ihmisten tottumuksia vastaan vaan hyödyntää niitä. Kun tulee sivulle, josta löytyy heti tuttu päänavigointipalkki ja oletusten mukainen sivurakenne, voi suunnata kaiken huomionsa tärkeimpään eli itse sisältöön.

Eihän printtilehdenkään käyttöliittymää keksitä uudestaan joka vuosi. Riittää että sisältö muuttuu. Onko verkko kypsymässä samaan pisteeseen?

4. Flat Design, versio 2.0

Material design & Flat design

Applen ja Microsoftin käyttöjärjestelmistä tuttu Flat Design nousi 2015 suosioon verkossa ja se jatkaa 2016 kypsymistään (Flat Design 2.0 & Material Design). Flat Design toimii erinomaisesti yhdessä minimalistisen suunnittelufilosofian kanssa, jonka tavoitteena on häiriötekijöiden minimointi, selkeä fokus tärkeimpään asiaan sivulla ja sivujen yleinen virtaviivaistaminen. Lyhyesti: ”Less is more”.

Minimalismissa ei ole kyse pelkästään visuaalisesta ilmeestä vaan se vaikuttaa yhtälailla sisältöstrategiaan. Kyse on valinnoista (kill your darlings!) ja siitä, että käyttäjälle osataan kiteyttää olennainen ilman turhaa jaarittelua. Tällöin pitää ymmärtää syvällisesti, mikä käyttäjälle on milläkin hetkellä tärkeää. Katso esimerkiksi miten Zaran laajassa verkkokaupassa navigointia on yksinkertaistettu dramaattisesti näyttämällä käyttäjälle ainoastaan se, mikä on kulloinkin fokuksessa.

5. Animaatiot ja mikrointeraktiot

Animaatiot toimivat hyvin yhdessä minimalistisen trendin kanssa ja parantavat oikein käytettyinä käyttökokemusta. Käyttöliittymän elementtien lähes huomaamattomat animoinnit luovat sulavan, vähemmän töksähtelevän kokemuksen ja ohjaavat huomiotamme hienovaraisesti tärkeisiin toimintoihin. Olennaista on, että animaatioita ei räiskitä wow-efektin vuoksi vaan ne tuovat lisäarvoa käyttäjälle.

Hyvät interaktiot ovatkin usein pieniä ”mikrointeraktioita”. Esimerkiksi kun viet hiiren tykkää –napin päälle, saat vihjeen mitä siitä tapahtuu. Kun klikkaat nappia, sen väri muuttuu, tykkäysmäärä nousee yhdellä ja nimesi lisätään tykkääjien listaan. Hyvien mikrointeraktioiden ansiosta vaikkapa tylsän ja kömpelön lomakkeen käytöstä voi tulla miellyttävää ja sulavaa. Siksi niiden suunnittelusta povataan yhtä vuoden 2016 trendiä. Mobiilisovellukset näyttävät tässä suhteessa suuntaa verkkosuunnittelulle.

Erilaiset animoinnit (parallax, hover-efektit, karusellit) ja mikrointeraktiot alkavat olla tavallisia myös WordPress sivustoilla. Tässä esimerkkinä suunnittelemani ilmailumuseo.fi

verkkosuunnittelu-trendit-mikrointeraktiot

6. Online video jatkaa kasvua

Videoiden katselu verkossa on kasvanut vauhdilla, jopa 800% viimeisen viiden vuoden aikana. Mikään ei olekaan parempi tapa vakuuttaa ihmisiä kuin hyvä kahden minuutin explainer -video. Tässä mallina, miten parissa vuodessa kaikkien huulille noussut Slack sen tekee:

 

 

Toinen trendi on taustavideoiden käyttö. Näissä on omat vaaransa, sillä taustavideot pidentävät lautausaikoja eivätkä näy mobiilissa. Parhaimmillaan ne toimivat tunnelman luojina tehokkaasti. Esimerkiksi Airbnb käyttää taustavideota majoituskohteista onnistuneesti etusivullaan luoden vahvan ”kuvittele itsesi täällä” –elämyksen:

Verkkosuunnittelu trendit: video

7. Joustavat kortit, modulit ja osiot

Pinterestin, Twitterin, Google+:n ja monen muun palvelun popularisoimat ”kortit” jatkavat leviämistään kaikkialle verkkoon. Suunnittelun fokus on siirtymässä enemmän moduleihin ja osioihin, joista kokonaisia sivuja voidaan koostaa joustavasti eri kokoisille ruuduille.

Kortit ovatkin tehokas tapa järjestää suuri määrä sisältöä nopeasti silmäiltäviksi ja houkutteleviksi suupaloiksi. Ne myös skaalautuvat näppärästi mobiiliin ja eri kokoisille näytöille. Erityisen hyvin ne toimivat sivuilla, joilla on paljon sisältöä (esim. uutisia, portfoliotöitä, päivityksiä). Olen itsekin käyttänyt moduleja useammalla suunnittelemallani sivustolla, tässä tuore esimerkki hefmec.fi:

Verkkosuunnittelu trendit: modulit ja kortit

8. Hei me skrollataan

Viimeistään nyt on selvää, että kaikkea tärkeää ei tarvitse ahtaa sivun yläreunaan (above the fold), vaan käyttäjät ovat mobiililaitteiden myötä tottuneet skrollaamaan. Itseasiassa skrollaus on paljon nopeampaa kuin linkkien klikkailu. Lisäksi pitkiin sivuihin saa myös punottua koukuttavaa tarinankerrontaa. Kuningaslaji tässä on loputtomasti skrollaava uutisvirta (vrt. Facebook, Twitter, Pinterest), joka voi pitää käyttäjät uskomattoman pitkiä aikoja sivulla.

9. Verkkosivu kuin diaesitys

Yksi nouseva trendi on koko ruudun diaesitykset, joissa on vahva tarinankerronnan elementti. Esityksessä navigoidaan eteen / taaksepäin ja jokainen dia täyttää koko ruudun uudella sisällöllä. Tällä kertaa skrollattavaa ei ole laisinkaan ja esitystapa muistuttaa hieman printtiesitettä (diat = sivuja). Katso miten Facebook ja Apple näyttävät esimerkkiä:

Verkkosuunnittelu trendit: diaesitykset

10. Isot ”hero” taustakuvat

Meitä tervehtii etusivulla yhä useammin iso koko ruudun täyttävä ”hero” –taustakuva. Parhaimmillaan ne houkuttelevat vastaansanomattomalla visuaalisuudella tai kiteyttävät mieleenpainuvasti ja elämyksellisesti olennaisimman. Toisaalta ne eivät ihan joka paikkaan sovi, sillä isot kuvat ovat hitaita ladata ja hidastavat itse sisällön pariin pääsemistä. Onneksi WordPressin viimeisin versio osaa tarjota mobiililaitteille automaattisesti pienempiä kuvia, mikä parantaa latausaikoja.

Fineduvr.fi oli yksi viime vuonna suunnittelemistani sivuista, jolla taustakuvat olivat isossa roolissa:

Verkkosuunnittelu trendit: isot hero taustakuvat

11. Rohkeampaa typografiaa

Ennustin rohkeampaa, isompaa ja maukkaampaa typografiaa jo viime vuonna. Sen voi edelleen lisätä listaan, sillä typografia on edelleen verkossa tylsää printtiin verrattuna.

Typografia on tärkeää, sillä verkkosivujen sisällöstä yli 80% on tekstiä. Jos tekstin ulkoasu on houkutteleva, helppolukuinen, hierarkialtaan toimiva ja mielikuvaltaan osuva, ollaan jo pitkällä. Välttämättä kuvitusta ei edes tarvita.

2016 erottuvuutta ei enää saa turvautumalla samoihin Google fontseihin, joita kaikki käyttävät. Erityisesti orgaaniset, käsinkirjoitetut fontit ovat nyt nousussa. Tästä yhtenä esimerkkinä suunnittelemani ValteriHUB sosiaalinen oppimisympäristö:

Verkkosuunnittelu trendit: typografia

 

12. Etusivun karusellit eivät katoa vieläkään

Etusivun karuselli (=slider) on ratkaisu, joka herättää paljon mielipiteitä puolesta ja vastaan. Asiakkaat näyttävät rakastavan karuselleja (näitä pyydetään usein), mutta analytiikkavelhot haukkuvat sen maan rakoon monestakin syystä: karusellit eivät toimi kunnolla mobiilissa, dioja klikataan harvoin ja konversioprosentti on heikko. Miksi laittaa etusivun paraatipaikalle moinen hökötys?

Itse asetun tässä kiistassa jonnekin välimaastoon. Tiedän yllämainitut ongelmat, mutta silti hyvin suunniteltu karuselli voi olla vaikuttava. Tavoitteena ei välttämättä tarvitse ollakaan, että käyttäjä klikkaisi itsensä eteenpäin. Ohjaukset voivat tapahtua myöhemmin sivulla. Analytiikka ei näytä kaikkea, mitä päässämme tapahtuu – esim. mihin tunnetilaan esitys meidät virittää.

Kyse on ennen kaikkea ensivaikutelmasta, brändäämisestä ja mielikuvista. Siitä, että saadaan käyttäjä innostumaan ja houkuteltua hänet perehtymään sivujen varsinaiseen sisältöön. Jos karusellin tekee oikein ja huomioi sudenkuopat, ne toimivat kyllä. Tässä yksi yritykseni kiteyttää asiakkaani bisnes kolmeen diaan:

Verkkosuunnittelu trendit: hero taustakuvat

Verkkosuunnittelun trendit 2016

Sain kasaan 12 verkkosuunnittelutrendiä ja WordPress sivujen tulevaisuuden näkymää vuodelle 2016. Mitä jäi mainitsematta? Kerro kommenteissa!

Kirjoittaja suunnittelee moderneja WordPress verkkosivuja.

4 Kommenttia

  1. Sari 12 kuukautta ago

    Vakuuttava esitys! En tiedä vielä mitään tekniikasta, sisällöstä kyllä jotain. Haluan ilmoittautua kurssillesi kesäyliopistoon

    • Ilkka Olander Author
      Ilkka Olander 12 kuukautta ago

      Kiitos Sari :), tervetuloa!

  2. Marko 1 kuukausi ago

    Olisi mielenkiintoista lukea, miten asiat ovat muuttuneet vuodessa eli mitkä asiat ovat in tällä hetkellä ja mihin suuntaan kannattaisi nettisivuja muokata, jotta pysyisi trendeissä ja kehityksessä mukana.

    • Ilkka Olander Author
      Ilkka Olander 1 kuukausi ago

      Ajatus oli kirjoittaa myös vuoden 2017 verkkosuunnittelutrendeistä, mutta suuresti ei ole nyt kenttä vuodessa muuttunut. Samat trendit pitkälti vaikuttavat edelleen, mutta uusia teknologioita ripaus mukana, kuten tekoälyä, botteja ja virtuaalitodellisuutta.

Kommentoi

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *

*