UX- ja UI-design – mitä sinunkin tulisi tietää web design -jargonista

Työskentely nopeasti kehittyvällä alalla takaa sen, että työ saa jatkuvasti uusia ulottuvuuksia ja trendejä. Myös termistö kehittyy, ja koska trendit lähtevät monesti liikkeelle englantia puhuvan väestön keskuudesta, ovat termit luonnollisesti ensin englanniksi. Ammattislangin ja -termistön kehittyessä hurjaa vauhtia, käännöksiä ei usein tehdä ja termit vakiintuvat suomalaiseenkin suuhun englanninkielisinä. Kaksi tällaista ratkaisevaa työmme uutta ulottuvuutta ja termiä ovat UX- ja UI-design. Tässä blogiartikkelissa avaan perustasolla mitä nämä käsitteet tarkoittavat, ja miten ne liittyvät ratkaisevasti Sinisen Härän verkkosivustoprojekteihin.

UX-design eli User Experience Design

Voidaan vapaasti suomentaa esimerkiksi käyttöliittymän suunnitteluksi, käyttäjäkokemuksen muotoiluksi tai palvelun muotoiluksi. Käyttäjäkeskeinen UX-design kattaa sateenvarjon lailla alleen monia erilaisia alueita, joiden avulla pyritään parempaan käyttäjäkokemukseen. Muutamia mainitakseni:

– Käyttäjätutkimus ja palvelun testaaminen käyttäjillä. Palvelua kehitetään käyttäjille sopivaksi keräämällä dataa käyttäjistä ja heidän preferensseistään, joiden perusteella pystytään tekemään oletuksia ja käyttäytymismalleja kehityksen pohjalle. Datan perusteella voidaan ratkoa niitä ongelmia, mitä käyttäjät kohtaavat. Palvelun testaamisen järjestäminen oikeilla käyttäjillä esimerkiksi prototyyppivaiheessa on myös UX-designia, toimiiko datan perusteella tehdyt hypoteesit oikeasti ja miten käyttäjä kulkee suunniteltuja polkuja.

Informaatioarkkitehtuuri, eli verkkopalvelun hierarkia, vielä käytännöllisemmin valikkorakenteen suunnittelu. Eli miten asiat ja informaatio jäsennellään ja rakennetaan ymmärrettävään muotoon.

Wireframing, eli rautalankamalli on yksi vaihe suunnittelussa. Tässä vaiheessa keskitytään nimenomaan verkkosivuston tai -palvelun toimivuuteen, käyttäjän polkuihin saavuttaa tavoite ja niin edelleen. Rautalankamalli on ikään kuin luuranko, ja visuaalinen UI-puoli on vaatetus.

Analytiikka ja mittarit ovat oma taiteenlajinsa, mutta liittyvät vahvasti käyttäjätutkimukseen. Erilaiset työkalut, kuten lämpökartat, antavat arvokasta dataa käyttäjistä, mikäli sitä osaa tulkita ja hyödyntää palvelun kehityksessä.

Copywriting, eli tekstin tuotto. Tekstisisältö ohjailee ja helpottaa käyttäjää verkkopalveluissa ratkaisevasti, joten myös tekstin suunnittelu on osa UX-designia.

UI-design eli User Interface Design

Vapaasti suomennettuna ulkoasun suunnittelu, eli visuaalinen puoli suunnittelusta. Ulkoasun suunnittelu on myös osa käyttäjäkokemusta ja käyttöliittymän suunnittelua, joten kahtiajako UX:n ja UI:n välillä ei ole tasapuolinen. Maalaisjärjelläkin ajateltuna visuaalinen puoli vaikuttaa ratkaisevasti käyttäjän kokemukseen. Ulkoasun suunnittelu on eriytetty kuitenkin omaksi palveluksi sen takia, että myös tämä suunnitteluprosessi on täynnä omia sääntöjään, lainalaisuuksiaan ja kommervenkkejään, joihin visuaalinen suunnittelija/UI designer/graafikko/tmv. on erikoistunut. Muutamia näistä mainitakseni:

Värien käyttö sivustolla niin, että se on yrityksen graafisen ohjeiston mukaista, mutta myös käyttäjäystävällistä. Esimerkkinä tilauksen lähetys verkkokaupassa: ”Lähetä”-napin ei tulisi koskaan olla punainen, koska miellämme punaisen napin tarkoittavan asioita, kuten keskeytä tai tyhjennä valinnat.

Fonttien käyttö sivustolla jälleen niin, että mukaillaan yleistä ilmettä, mutta ei tuhota käytettävyyttä hankalasti luettavilla fonteilla.

Kuvien käyttö mukaillen tavoiteltavia tunnetiloja ja toimintoja.

– Ulkoasun suunnittelun on tarkoitus toki myös luoda palvelulle arvoisensa ilme, ja olla näin osaltaan tukemassa tavoitteita.

Miten termit liittyvät Sinisen Härän verkkosivustoprojekteihin?

Kuten yllä on avattu, niin UX- ja UI-design eivät ole verkkosivustoprojekteista eroteltavia palveluita, vaan kriittisiä osia verkkopalveluiden suunnittelussa. Kun Sinisellä Härällä asiantuntijuus on kasvanut, on myös UX- ja UI-designin menetelmiä ja toimintatapoja integroitu osaksi prosessejamme. Nykyinen käytäntömme viedä projektit läpi sisältääkin paljon aiempaa enemmän erilaisia ja aiempaa parempia suunnittelun menetelmiä liittyen esimerkiksi wireframingiin, mittareihin sekä hierarkiaan. Näin voimme paremmin taata verkkopalveluiden toimivuuden ja tavoitteisiin pääsemisen. Meille verkkosivut eivät ole vain käyntikortti, vaan tärkeä, joskus ratkaisevakin pala yrityksen markkinointia.

TLDR: et voi rakentaa verkkosivustoja tekemättä UX- ja UI-designia. Se, miten paljon näihin panostetaan vaikuttaa ratkaisevasti lopputuloksen laatuun.

 

Lataa ilmainen verkkosivujen ostajan opas




Onko teidän yrityksessänne verkkosivu-uudistus käsillä? Siinä tapauksessa, lataa ihmeessä ilmainen oppaamme. Opas on tehty auttamaan yrityksiä verkkosivujen ostamisessa, ja siinä käydään läpi kilpailutuksessa huomioon otettavia asioita aina tarjouspyynnön laatimisesta toteuttajien vertailuun.

Lataa ilmainen opas!

Sivuston nopeuden optimointi

Nopeus on tämän päivän ehdoton edellytys toimivalle sivustolle – varsinkin jos odottaa hyviä tuloksia. Käyttäjät ovat verkossa entistä malttamattomampia ja poistuvat hitaalta sivustolta yllättävänkin nopeasti. Ihmiset haluavat kaiken ja heti, ja tätä todistaakin se, että jos sivustosi latautuu yli kolme sekuntia, jopa 53% sivustosi vierailuista jää kesken. Samasta tutkimuksesta käy ilmi myös, että joka toinen sivustojen käyttäjistä odottaa sivuston latautuvan alle kahdessa sekunnissa. Artikkelin lopusta löytyy linkki, josta pääset testaamaan oman sivustosi nopeutta, mutta käydään läpi ensin nopeuteen vaikuttavia tekijöitä.

Sivuston nopeuteen vaikuttavat tekijät

Google ja muut hakukoneet arvostavat nopeita sivustoja entistä enemmän, mikä taas tarkoittaa sitä, että nopeat sivustot saavat lähtökohtaisesti parempia sijoituksia myös hakutuloksissa. Sivuston nopeuteen vaikuttaa kokonaisuudessaan todella moni tekijä ja netistä löytyykin monia artikkeleita aiheesta. Ei käydä niitä kaikkia tässä artikkelissa läpi, koska aihe on sen verran laaja. Yksi maininnan arvoinen artikkeli, joka käsittelee aihetta tarkemmin on kuitenkin esimerkiksi Elementorin kirjoittama How to Speed Up Your WordPress Website.

Sininen Härkä ottaa sivustojen nopeuden tosissaan ja rakennammekin kaikki verkkosivustot yleisiä parhaita käytäntöjä käyttäen.

  1. Suosittelemme, että kaikki sivustot hostataan WordPress-optimoiduilla webhotelleilla
  2. Käytämme omaa kustomoitua, optimoitua ja kevyttä teemaa
  3. Pidämme huolen siitä, että kaikki* sivustolle ladattavat kuvat optimoidaan
  4. Pyrimme välttämään ylimääräisiä lisäosia ja minimoimaan niiden määrän
  5. Käytämme palvelintason välimuistityökaluja latausaikojen minimoimiseksi
  6. Tarvittaessa käyttöön otetaan myös CDN (Content Delivery Network)
  7. GZIP kompressointi käytössä jokaisella sivustolla

*Emme voi taata kaikkien kuvien manuaalista optimointia, jos sitä ei ole erikseen budjettiin laskettu, mutta asia käydään läpi jokaisen asiakkaan kanssa parhaan käytännön löytämiseksi.

Tavoitteenamme on nopein mahdollinen alusta WordPress-sivustoille. Litespeed-palvelin ja LiteSpeed Cache -välimuisti sekä taustalla toimiva SSD-levyjärjestelmä ja skaalautuva pilvialusta tekevät sivuistasi salamannopeat. Nämä kaikki nopeuttavat sivuston toimintaa jo itsessään, mutta sivuston nopeutta voidaan viedä vielä uudelle tasolle sivustokohtaisten asetusten avulla.

Sivuston nopeusoptimointityökalut

Tarjoamme seuraavia sivuston nopeuteen positiivisesti vaikuttavia työkaluja sivustoprojektien yhteydessä, mutta myös jälkeenpäin käyttöönotettuna. Jokainen tekniikka testataan ja otetaan käyttöön asiakaskohtaisesti. Esimerkiksi sininenharka.fi-sivuston latausnopeus putosi paketin avulla keskimäärin n. 4,9 sekunnista alle sekuntiin, mikä on sanomattakin valtava muutos.

Kuvien optimointi

Liian suuret kuvatiedostot on varmastikin tämän päivän yleisin ja suurin ongelma, joka hidastaa sivustoja. Kuvat kannattaa optimoida kuvakoon ja SEO:n puolesta jo ennen sivustolle lataamista, mutta automaattinen koneellinen kuvien optimointi pakkaa ja pienentää kuvien kokoa entisestään latausaikojen minimoimiseksi.

Lazy Load -kuvien lataus

Lazy Load lataa yksittäisillä sivuilla olevat kuvat ja iframet vasta sitten, kun niitä tarvitaan eli juuri ennen kuin käyttäjä selaa niiden kohdalle. Asynkronisesti kuvia lataamalla selain säästää aikaa, koska se lataa vain sen median, joka tarvitaan nykyisen näkymän täyttämiseen.

CSS/Javascript -tiedostojen yhdistäminen

Kaikessa yksinkertaisuudessaan nerokas tekniikka yhdistää useita JavaScript- tai CSS-tiedostoja yhteen. Tiedostojen yhdistäminen vähentää selaimen tekemien pyyntöjen määrää ja poistaa mahdollisesti kaksoiskoodin, mitkä näkyvät nopeuden parantumisena.

CSS/Javascript/HTML -tiedostojen minimointi

Tiedostojen minimointi poistaa CSS-, JavaScript- ja HTML-tiedostoista kaiken ylimääräisen, kuten turhat rivivälit, ylimääräiset merkit ja kommentit. Minimoimalla lähdekoodin, minimointi mahdollistaa sen nopeamman käsittelyn ja esittämisen verkossa.

Palvelintason kokosivun välimuisti

Kommunikoi suoraan LiteSpeed Web Serverin kanssa dynaamisesti luotujen web-sivujen staattisten kopioiden tallentamiseksi. Palvelintason välimuisti toimii huomattavasti nopeammin kuin vain sivuston puolella käytössä oleva välimuistityökalu.

Yksityinen välimuisti

Kykenee tallentamaan sivun henkilökohtaisia kopioita tilanteissa, joissa sisältö on tarkoituksenmukainen vain sen pyytävän käyttäjän kannalta.

Tietokannan optimointi

Pitää WordPress-tietokannan ohuena, karsittuna ja mahdollisimman tehokkaana. Työkalu nopeuttaa tietokantakyselyjä poistamalla ajan mittaan kertyvää sotkua, kuten vanhojen sivujen ja postausten versioita.

Edge Side Includes (ESI) -tuki

ESI mahdollistaa sen, että koko yksittäisen sivun välimuistia ei tarvitse tyhjentää aina, kun joku sivun osio päivittyy, riittää, että vain osa sivusta päivitetään.

Sivuston nopeustesti

Nyt sitten se mitä osa lukijoista ei välttämättä malttanut odottaa, vaan selasi suoraan tänne. Oman sivuston latausnopeus – tietysti!

Voit testata sen esimerkiksi täältä:

https://tools.pingdom.com/

Valitse ”Test from” -kohtaan esim. UK tai Saksa, jos asiakkaasi tulevat pääsääntöisesti Suomesta. Jos asiakkaasi tulevat ympäri maailmaa, voit testata latausnopeuksia myös muista maista.

Mainittakoon kuitenkin sen verran, että vaikka Pingdomin ja muiden vastaavien työkalujen, kuten GT-Metrixin ja Google Page Speed Insightsin onkin tarkoitus antaa teknisiä vinkkejä nopeuden kehittämiseksi – sivuston latausnopeus on ennen kaikkea pisteitä tärkeämmässä roolissa. Monet sivustojen kehittäjät ovat jopa sitä mieltä, että pisteillä ei ole mitään väliä, kunhan sivusto toimii nopeasti.

Härkävinkki

Jos olet kiinnostunut oman sivuston nopeuden kehittämisestä tai konversio-optimoinnista, ole rohkeasti yhteydessä, niin katsotaan mitä voidaan asialle tehdä.

Näytä