Kuuntele blogi
Vuosi 2017 on kulman takana, joten on aika tutkailla tulevan vuoden käyttöliittymäsuunnittelun (UI) trendejä. Poimin alle mielenkiintoisimmat uudet trendit, joita tulee näkymään ensi vuoden suunnittelussa. Mukana on myös muutama tuttu vuoden 2016 verkkosivutrendeistä, jotka tulevat kehittymään entisestään.
Flat design ja material design ovat muuttaneet suunnittelua niin, että sivut näyttävät keskenään samanlaisilta eivätkä erotu toisistaan. Personointi nousee tästä syystä tärkeämmäksi, jotta erotutaan joukosta. Sivuille valitaan jatkossa brändin mukainen ilme, joka viestii juuri oikealla ja halutulla tavalla. Näin käyttäjä tunnistaa sivun muiden joukosta ja ymmärtää viestin paremmin. Kun persoonallisuutta lisätään, se herättää helpommin myös katsojan huomion.
Personoinnin myötä vahvat väripaletit ja gradientit palaavat flat designille tyypillisten sameiden ja hillittyjen värien tilalle. Hyvänä esimerkkinä Instagramin uusi ilme. Tämä trendi tulee vaikuttamaan niin typografiaan, kuin myös kuviin ja videoihin.
Kuvan lähde: realfuturefair.com
Ihmiset ovat kyllästyneet kuvapankkikuviin, joten kuvia on aika etsiä muualta, vaikka blogeissa ja sosiaalisessa mediassa näitä tullaan silti vielä näkemään. Kuvapankkikuvien käyttö nettisivuilla on riskaabelia, sillä kuva voi löytyä kilpailijankin sivulta. Kustomoitu kuva muuttaa nettisivun erityiseksi, joka tukee brändiä ja luo sille oikean visuaalisen kielen ja äänensävyn. Niillä myös erottaudutaan tehokkaasti joukosta. Muutamassa sekunnissa sivun täytyy pystyä näyttämään käyttäjälle sen, mitä sillä on tarjota juuri heille. Kustomoiduilla kuvilla voi viestiä tehokkaammin käyttäjän kanssa. Valokuvien ottaminen on nykyään niin helppoa puhelimien kulkiessa mukana, että niiden käyttö sivuilla yleistyy ainakin joillain aloilla.
Typografia tulee olemaan tärkeämpää kuin ennen. Typografian suunnittelu ja mahdollisuudet ovat parantuneet, kun Google Fonts ja monet muut palvelut lisäävät uusia fontteja jatkuvasti. Ilmaisten fonttien kasvava valikoima antaa brändeille mahdollisuuden omaksua rohkeasti rikasta typografiaa ja käyttää tätä osana personointia.
Kuvan lähde: austinbeerworks.com
Gridi on ollut pitkään pohjana käyttäjäkokemus- ja käyttöliittymäsuunnittelulle johdonmukaisena, tasapainoisena ja järjestelmällisenä sekä käyttäjille tuttuna. Pitkään on esim. etsi-kenttä, puhelinnumero ja valikko olleet tietyssä paikassa sivua. Tämä linja on muuttumassa sillä gridipohjainen suunnittelu voi olla rajoittava ja jäykkä rajaten luovia, perinteitä rikkovia vaihtoehtoja pois. Tämän vuoksi kokeellinen, gridiä rikkova suunnittelu on nousussa. Vapaampi suunnittelu, rajojen rikkominen ja omaperäisyys luovat uusia mahdollisuuksia ja antavat tilaa uusille ideoille. On kuitenkin muistettava ettei käyttäjiä pidä hämmentää. Vapaammassa suunnittelussakin on muistettava käyttäjäkokemus sekä käytettävyys pienemmillä näytöillä.
Kuvan lähde: lookbook.quechua.com
Video dominoi trendejä, ei ainoastaan sisältönä vaan myös taustakuvina ja liikegrafiikkana (motion graphics). Kuva on käyttäjän huomion herättämiseksi yksi tehokkaimmista keinoista, sillä näkö on aisteistamme voimakkain. Kun kuvaan lisätään liike, on huomioarvo vielä suurempi. Dynaamiset, koko näytön videot tukevat hyvin visuaalista tarinankerrontaa sekä sitouttaa käyttäjän tehokkaammin. Kun videoon lisätään vielä interaktiivisuus, on kokemus kokonaisvaltaisempi ja uniikimpi. Koko näytön video toimii hyvin esimerkiksi pääotsikon taustalla. On kuitenkin muistettava olla ärsyttämättä käyttäjää liian pitkillä ja raskailla videoilla. Animaatioissa kannattaa myös hyödyntää rauhallisia liikkeitä ja yksinkertaisuutta. Liian suuri tiedostokoko voi johtaa sivun hitaampaan latausnopeuteen, ja koska käyttäjä ei jaksa odottaa kuin pari sekuntia sivun lataamista, riskinä on kävijän poistuminen sivuilta.
Kuvan lähde: variousways.com
Cinemagraphs-kuva on animaatio, joka rakennetaan valokuvasta ja luuppaavasta videosta. Cinemagraphicsistä on tullut suosittua sosiaalisessa mediassa, mutta käyttöliittymäsuunnittelussa sitä ei ole vielä juurikaan näkynyt. Cinemagraphics tulee lisääntymään videoiden myötä, sillä se on kevyempi vaihtoehto liikkuvan kuvan hyödyntämiseen videoiden sijaan.
Voit tutustua cinemagraphics-kuviin esimerkiksi täällä: cinemagraphs.com
Kuvan lähde: giphy.com
Responsiivinen suunnittelu on tullut jo tutuksi, tiedämme miten sitä voi hyödyntää ja osaamme huomioida käyttäjän tarpeita paremmin. Responsiivinen suunnittelu tulee silti vielä kehittymään ja käyttäjäkokemus muuttuu vielä paremmaksi. Responsiivisen suunnittelun vaikutus tulee olemaan jatkossa vielä suurempi, sillä Google on nostanut mobile first -suunnittelun tärkeyttä luomalla erillisen mobiili-indexin, joka nostaa mobiiliystävälliset sivut hakutuloksissa ylemmäksi. Näin ollen on hyvä muistaa seuraavat asiat, jotka parantavat hakutulosta:
Online-mainostajat ovat jo jonkin aikaa kustomoineet sisältöä käyttäjän kiinnostuksen mukaan. Nyt vuorossa on nettisivujen sisällön mukautuminen käyttäjän iän mukaan. Metadata, joka muuttaa sivuja ikäkohtaisesti, lisääntyy. Se voi sisältää mm.
Kevyempi suunnittelu vastauksena ylenpalttiselle suunnittelulle. Tämä suuntaus nostaa päätä, kun haetaan kevyttä ja aikaa säästävää käyttäjäkokemusta. Poistetaan turhat animaatiot, siirtymät, lataussivut ja isot kuvat. Optimoidaan koodi, kuvat ja riisutaan laajennukset. Tuodaan navigaatio esille, jotta valinta käy nopeasti. Tavoitteena on nopeammin latautuvat sivut, valinnat ja selkeys.
