UI/UX-trendejä vuodelle 2023

Löytyykö pitkään valta-asemassa olleelle flat design -trendille haastajaa? Jatkuuko dark moden suosio? Mitä ihmettä on lasimorfismi? Tuleeko millennium uudestaan?  

Dark mode 

Mobiilisovelluksista viime vuosina tutuksi tullut mustan taustan käyttö yleistyy edelleen myös verkkosivustoilla. Tumma tausta rasittaa silmiä vähemmän ja on sitä kautta käyttäjäystävällisempi. Tumma tausta myös kuluttaa vähemmän energiaa. 
 
Hyvää palvelua käyttäjille on tarjota mahdollisuutta valita dark moden ja vaalean taustan välillä varsinkin palveluissa, joita käyttäjä potentiaalisesti käyttää paljon.  

Dark mode -trendissä yksi suunnannäyttäjistä on ollut kolmen suomalaisen perustama startup Linear, joka on lyhyessä ajassa saavuttanut kulttimaisen aseman loppuun asti hiotulla käyttökokemuksella ja designilla. Digitaalisen tuotekehityksen työkaluna toimivan Linearin designtiimiä vetää Karri Saarinen, joka on aiemmin työskennellyt mm. Airbnb:llä. Linearin muotokielen inspiroimia palveluita on kerättynä linears.art -sivustolle. Torille! 

Ekologisuus 

Trendi, joka takuuvarmasti vahvistuu, on ekologisuuden huomioiminen verkkopalveluiden suunnittelussa. Tämä on asia johon ollaan laajemmin vasta heräämässä. Jokainen sivulataus ja jokainen siihen liittyvä bitti kuluttaa energiaa niin palvelimen päässä kuin loppukäyttäjän laitteessa. Siksi on tärkeää, että verkkopalveluista tehdään mahdollisimman optimoituja. Tämä vaikuttaa oleellisesti myös palveluiden käyttöliittymään ja ulkoasuun. Kuvat aiheuttavat yleensä suurimman osana ladattavasta datamäärästä, mikä osaltaan on vaikuttamassa siihen, että yksi nousevista trendeistä on vahvemmin typografiaan perustuvat ulkoasut (tästä myöhemmin lisää). 

Kevyt, nopeasti latautuva sivusto ei ole vain ympäristöteko, mutta myös järkevää hakukonelöydettävyyden kannalta. Google arvottaa sivustot, jotka latautuvat nopeasti ja ovat mobiiliystävällisiä lähtökohtaisesti korkeammalle kuin sivustot, joiden latausajat ovat pidempiä.  
 
Jos aihe kiinnostaa enemmän, löytyy blogistamme muutama kirjoitus verkkopalveluiden hiilijalanjäljen minimoimisesta (Kuinka suunnitella vähäpäästöisempiä verkkopalveluita ja Ekologisempia verkkopalveluita). 

Sovellusmainen design 

Mobiilisovelluksien käyttökokemus on usein paljon vahvempi kuin verkkopalveluissa. 

Verkkopalvelut ovat kuromassa kuitenkin eroa kiinni tuomalla mukaan enemmän käyttöliittymällisiä animaatioita ja mikro-animaatioita, joissa esimerkiksi käyttäjän toiminta käynnistää kevyen animaation.

Samoin verkkosivustojen latausnopeuksissa pystytään nykyään esimerkiksi Jamstack-arkkitehtuurin avulla saavuttamaan taso, joka pääsee hyvin lähelle mobiilisovelluksen käyttökokemusta. Sivulta toiselle siirtyminen tapahtuu silmänräpäyksessä, mikä tekee käyttökokemuksesta sulavan. Testaa vaikka Jamstack-arkkitehtuurilla rakentamiamme sivustoja kuten eQ Haku ja Technopolis. 

3D-kuvitukset  

3D-kuvitukset tekevät paluuta samalla kun flat desiginin valtakausi hiipuu. 3D-kuvituksella on helppo erottautua massasta ja saada käyttäjän huomio. Hyviä esimerkkejä 3D-kuvituksen käytöstä löytyy esimerkiksi täältä ja täältä. 

Räätälöidyt kursorit 

Kuten moni muu millennium-ajalta tuttu asia, myös räätälöidyt kursorit tekevät paluuta. Räätälöity kursori on helppo tapa yllättää käyttäjä ja saada hymy kasvoille. Räätälöity kursori on toki gimmick-osaston asioita, joita emme suosittele asiointipalveluihin tai sivuille, joilla käyttäjä todennäköisesti vierailee useasti, mutta esimerkiksi lyhytkestoisilla landing pageilla tai kampanjasivuilla se voi olla oiva tehokeino käyttäjän huomion saamiseen ja sitouttamiseen. 
 
Räätälöityjä kursoreita voit nähdä esimerkiksi täällä, täällä ja täällä. 

Saavutettavuus 

Saavutettavuus on ollut iso megatrendi ja jatkaa vahvana edelleen vuonna 2023. Saavutettavuusvaatimukset koskevat lähinnä julkishallinnon organisaatioiden palveluita, mutta saavutettava palvelu tarkoittaa usein myös parempaa käyttökokemusta myös niille käyttäjille, joilla ei ole rajoitteita. Palvelun suunnittelu saavutettavaksi laajentaa myös palvelun kohderyhmää. 
 
Pyrimme Knowit Experiencella aina lähtökohtaisesti suunnittelemaan ja toteuttamaan saavutettavia palveluita, vaikka asiakkaan toiminta ei kuuluisikaan saavutettavuusvaatimusten piiriin. 

Lasimorfismi  

Lasimorfismi (glassmorphism) on yhdistelmä läpinäkyvyyttä, epätarkkuutta ja läpikuultavaa himmeää lasimaista vaikutusta, jonka avulla saadaan lisää syvyyttä ja visuaalista hierarkiaa käyttöliittymään. Lasimorfismi on ollut trendinä jo 2020-luvun taitteesta lähtien, mutta sitä todennäköisesti nähdään lisää jatkossakin.  
 
Suosittelemme kuitenkin käyttämää lasimorfismia harkiten vain muutamissa elementeissä. Laajasti käytettynä lasimorfismi voi aiheuttaa myös saavutettavuusongelmia.  

Gradientit 

Lasimorfismia yhdistetään usein gradienttien kanssa, jotka tekevät myös vahvaa paluuta verkkosivustoille. 
 
Gradientin suosiota kasvu selittää osin yleinen trendi värien rohkeammasta käyttämisestä. Pirteämmät väripaletit tekevät paluuta ja tarjoavat mahdollisuuden käyttää gradientteja.  

Esimerkiksi Adobe luottaa vahvasti gradienttien voimaan sivustollaan. 
 

Scrollytelling 

Parallax-skrollaaminen on ollut valtatrendi jo pitkään, ja siitä moni on saanutkin jo ähkyn. Vaikka parallax puhtaasti visuaalisena efektinä alkaa oleman menneen talven lumia on parallax edelleen erinomainen yhdistettynä vahvaan tarinankerrontaan ja sitä tullaan näkemään lisää. Monet sanomalehdet, esimerkiksi New York Times ja The Guardian, käyttävät scrollytellingiä artikkeleissaan. Myös Helsingin Sanomat on viime vuosina lähtenyt trendiin mukaan. 
 
Hyviä esimerkkejä scrollytellingistä täällä, täällä, täällä ja täällä. 

Iso typografia ja räätälöidyt fontit 

Näyttävät typografiset ratkaisut ja räätälöidyt fontit tulevat näkymään ruuduilla jatkossa useammin. Yhä enemmän nähdään sivustoja, jotka nojaavat puhtaasti typografiaan. 
 
Lisäksi pitkään vallalla ollut käytäntö, jossa sivun yläosassa on iso hero-kuva ja sen päällä tekstiä on saamassa haastajan puhtaasti isoon ja näyttävään typografiaan luottavista hero-elementeistä.  

Laadukkaasti tehtynä tämä on hyvä huomiokeino ja varmasti toimivampi vaihtoehto kuin geneerisen kuvapankkikuvan iskeminen heron taustalle, joka helposti tappaa käyttäjän mielenkiinnon heti kättelyssä. Hero-alueeseen panostaminen kannattaa, koska se on kriittisin osa verkkosivua, käyttäjä tekee usein päätöksen heron perusteella vierittääkö hän sivua pidemmälle tai klikkaako esimerkiksi herossa olevaa CTA-painiketta. 

Tekstianimaatiot 

Animaatiota on totuttu verkkopalveluissa yleensä näkemään lähinnä kuvituksissa, käyttöliittymäelementeissä ja sivua vieritettäessä. Vuonna 2023 tullaan animaatiota näkemään enemmän myös teksteissä.  

Hyvä esimerkki hyvin hienovaraisesta tekstianimaatiosta löytyy Linearin sivustolta, varsinkin mobiilissa leipätekstin kevyet animaatiot voivat saada aikaan hienon loppusilauksen. Tekstianimaatioita tehdessä kannattaa kuitenkin aina pitää mielessä se, että animaatio ei saa haitata pääasiaa eli tekstin lukemista.