Skip to content

UX & UI ‚Äď B2B-yrityksen verkkosivuston suunnittelun 101 ūüéď

Mitä B2B-yrityksen verkkosivuston suunnittelun pitäisi pitää sisällään? Miten UX- ja UI-suunnittelu eroavat toisistaan? Mikä on suurinta, mitä sinivalas pystyy nielaisemaan: henkilöauto, greippi vai merimies?

Peruskysymyksiä, joista tässä artikkelissa keskitytään enimmäkseen UX- ja UI-suunnitteluun. Nämä kaksi suunnittelun osa-aluetta kulkevat hyvin vahvasti käsi kädessä, eikä niitä voi (tai kannata edes yrittää) täysin erotella toisistaan.

T√§m√§n kirjoituksen ja esimerkkikimaran keskeinen ūü•© on se, kuinka verkkomyynti√§ voidaan vauhdittaa UI-suunnittelun avulla, sek√§ miten UX-suunnittelu vaikuttaa siihen, kuinka verkkosivustosta rakennetaan sek√§ toimiva, ett√§ tehokas. 

Mitä UI-suunnittelu on, miten se eroaa UX-suunnittelusta, ja mikä on visuaalisen suunnittelun rooli kolmiodraamassa?

UI on lyhenne sanoista user interface design, kun taas UX on akronyymi user experience designille. Seuraava luonnehdinta kuvaa mielest√§mme n√§iden kahden eroa hyvin: 

‚ÄúUI is the saddle, the stirrups, & the reins. UX is the feeling you get being able to ride the horse.‚ÄĚ‚ÄĒ Dain Miller. 

UX & UI -parivaljakon ero ‚Äúpelkk√§√§n‚ÄĚ visuaaliseen suunnitteluun puolestaan on se, ett√§ ne keskittyv√§t ennen kaikkea verkkopalvelun k√§ytt√∂kokemukseen sek√§ k√§ytett√§vyyteen. Ne eiv√§t siis ole visuaalisen suunnittelun korvaajia, vaan osa kokonaisuutta nimelt√§ design.

K√§yt√§nn√∂ss√§ siis edellisen esimerkin mukaisesti visuaalinen ilme on se, milt√§ hevonen n√§ytt√§√§. Samaa analogiaa jatkaen on ilmiselv√§√§ todeta, ett√§ harvoin hevoselle kuitenkaan riitt√§√§ pelkk√§ kaunis ulkon√§k√∂, ja t√§sm√§lleen sama p√§tee verkkopalveluihin. 

giphy (21)

TL;DR: 

  • UX-suunnittelijan rooli on ennen kaikkea palvelmuotoilullinen: tavoitteena on suunnitella sivusto siten, ett√§ sen k√§ytt√∂kokemus on mahdollisimman hyv√§ ja tarkoituksenmukainen.
  • UI-suunnittelijan teht√§v√§ on rakentaa sivustosta visuaalisesti selke√§ kokonaisuus, joka ohjaa verkkosivulla k√§vij√§n kulkua intuitiivisesti. Voisi siis sanoa, ett√§ UI-suunnittelu k√§√§nt√§√§ UX-suunnitelman k√§ytt√∂liittym√§ksi. 

web design ux ui

Mink√§lainen sivusto myy? ūüí≥

Visuaalinen suunnittelu ei ole matematiikkaa; ei ole yhtä oikeaa täydellistä kaavaa, jolla asiakkaat saadaan automaattisesti villiintymään ja luovuttamaan luottokorttinsa ensimmäiselle vastaantulijalle. (Ja ehkä hyvä niin.)

Onneksi jonkinlaisia yleisiä ohjenuoria kuitenkin löytyy! Tässä lista perusasioista, jotka SaaS-yrityksen verkkosivuston suunnittelussa tulisi ainakin ottaa huomioon:

1. Tavoitteet

Ennen verkkosivun rakenteen ja ilmeen suunnittelua täytyy määritellä tavoitteet, eli miten verkkosivuston on tarkoitus tukea liiketoimintaa. Näin selvitetään, mitä sivuston on lopulta tarkoitus tehdä: esimerkiksi konvertoida sivustokävijöistä free trial-, tai freemium-käyttäjiä, hankkia demoja tai suoraan maksavia asiakkaita, tai tuottaa yksinkertaisesti liidejä myynnille.

Kun tavoitteet on m√§√§ritelty, voidaan siirty√§ suunnittelemaan itse sis√§lt√∂√§ ja sivuston toiminnallisuuksia. ūüĎá

Sivuston toiminnallisuudet

Sivuston tavoitteet m√§√§rittelev√§t suoraan my√∂s sivustolle tarvittavia toiminnallisuuksia, joista osa on kriittisi√§, osa ns. ‚Äúnice to have‚ÄĚ -osastoa, joita voidaan lis√§t√§ sivustolle my√∂hemminkin.

Tyypillisiä korkean prioriteetin toiminnallisuuksia voivat olla muun muassa:

  • integraatiot yrityksen muihin j√§rjestelmiin
  • yhteydenottolomakkeet ja ajanvarauskalenterit
  • chat-toiminnallisuus tai chatbot
  • verkkomaksaminen
  • sis√§lt√∂feedit ja filtterit
  • kieliversiot

Sivuston sisältö

Kun verkkosivun tavoitteena on tuottaa myyntiliidejä tai suoraa verkkomyyntiä, on mietittävä miten verkkosivu palvelee asiakkaita ostopolun eri vaiheissa, ja minkälaista sisältöä sivustolle silloin tarvitaan.

Sitemapin avulla voit määrittää verkkosisällön rakenteen ja miettiä minkälaista sisältöä kullekin sivulle tulee ja missä järjestyksessä, jotta asiakas löytää ostopolun eri vaiheissa tiensä oikeaan suuntaan.

Jotta sivustosta saadaan myyntiä ja brändiä tukeva kokonaisuus, on sisällön oltava kunnossa. Mitkään visuaaliset keinot eivät kompensoi tai pelasta huonoa tai vajavaista sisältöä, mutta hyvin suunniteltua ja kirjoitettua sisältöä voidaan tehostaa visuaalisin keinoin.

example sitemap

 

2. Sivuston rakenne ja intuitiivisuus

Asiakkaat haluavat l√∂yt√§√§ verkkosivulta etsim√§ns√§ tiedon helposti ja nopeasti. Siksi verkkosivuston rakenne kannattaa suunnitella selke√§ksi ja intuitiiviseksi k√§ytt√§√§. 

Varsinkin t√§ss√§ kohtaa UX- ja UI-suunnittelu kulkevat vahvasti k√§si k√§dess√§, sill√§ UX-suunnittelulla m√§√§ritell√§√§n mit√§ sis√§lt√∂√§ ja toiminnallisuuksia sivustolla esitell√§√§n ja miss√§ j√§rjestyksess√§. 

Rautalankamalli eli wireframe

Ennen sivuston varsinaista visuaalista suunnittelua on hyv√§ tehd√§ ns. rautalankamalli, eli wireframe-suunnitelma sivuston rakenteesta ja toiminnallisuuksista. Wireframe ei viel√§ ota kantaa sivuston ilmeeseen, vaan sen tarkoituksena on tehd√§ sivuston alustavaa site mapia yksityiskohtaisempi suunnitelma sis√§ll√∂n rakenteesta ja keskeisist√§ toiminnallisuuksista. 

Wireframien avulla voidaan keskittyä arvioimaan oleellisia asioita rakenteeseen ja toiminnallisuuksiin liittyen, kun huomio ei vielä kiinnity tässä vaiheessa epäolennaisiin asioihin kuten väreihin, tai kuvavalintoihin.

Kun sivuston rakenne ja toiminnallisuudet on suunniteltu, voidaan UI-suunnittelun avulla vahvistaa sivuston lopullista k√§ytt√∂kokemusta. 

(T√§lt√§ se n√§ytt√§√§ k√§yt√§nn√∂ss√§, t√§ss√§ Vilkkaalle tekem√§mme toteutus ūüĎá)

vilkas


Data on yst√§v√§ ūüôŹ

Sivuston rakennetta suunniteltaessa kannattaa arvailun sijaan hyödyntää olemassa olevaa tietoa sekä kävijädataa, jos sitä on saatavilla. Kävijädata antaa usein paljon tietoa siitä, mikä vanhalla sivustolla on toiminut hyvin ja mikä ei. Huomioi tämä uutta sivua suunniteltaessa.

Aina kävijädataa ei ole saatavilla, mutta silloinkaan ei pidä unohtaa asiakkaita. Asiakkaita on fiksua ottaa mukaan jo suunnitteluvaiheessa, testata ja hakea sieltä inputtia itse suunnittelutyöhön sekä sisällön rakenteen, että visuaalisen toteutuksen osalta.

ūüí° Datan sek√§ analytiikan rooliin verkkosivuston suunnittelussa voit tutustua l√§hemmin katselemalla hiljattaista Growth Academy -webinaarimme tallennetta - l√∂yd√§t sen klikkaamalla tuosta. ūüĎá

Webinaari: Verkkosivusto ja analytiikka kasvumarkkinoinnissa

Sivuston rakenne ja informaatioarkkitehtuuri

Ei ole sattumaa, että monet SaaS-yritysten sivustot ovat rakenteeltaan hyvin samankaltaisia: kun asiakkaat ovat tottuneet etsimään tietoa sivustolta tietyllä tavalla, kannattaa tätä ilmiötä hyödyntää.

Tämä perustuu psykologiseen ilmiöön nimeltä Mere-Exposure-efekti. Sen mukaan ihmiset pitävät enemmän asioista jotka ovat heille tuttuja, ja jos joku asia poikkeaa liikaa totutusta, voidaan sitä pitää epäluotettavana.

SaaS-yritysten asiakkaat esimerkiksi ovat tottuneet näkemään hinnoittelun verkkosivustoilla tämän kaltaisessa muodossa:

Esimerkki Githubista

Tässä mielessä on siis erittäinkin ok kopioida hyväksi havaittuja malleja muilta hyvän asiakaskokemuksen saavuttamiseksi.

Tyypillinen SaaS-yrityksen etusivu sisältää usein ainakin nämä:

  • Yl√§navigaatio, jossa t√§rkeimm√§t sivustolinkit
  • P√§√§kuva tuotteesta tai palvelusta 
  • Arvolupaus
  • Call to action (CTA)
  • Social proof -tekij√∂it√§, kuten asiakkaiden logoja, testimoniaaleja tyytyv√§isilt√§ asiakkailta, palkintoja, jne.
  • Demo-video tuotteesta tai palvelusta
  • Muuta selattavaa sis√§lt√∂√§, esim. blogifiidi tai podcast
  • Hinnoittelu tai hintalaskuri
  • Yhteydenottolomake, ajanvarauskalenteri, chat(bot)
  • Alavalikko (footer)

Drift on rakentanut etusivun ylänavigaation sekä
headerin SaaS-yrityksille tyypillisellä tavalla.

Privy on sijoittanut hintalaskurin etusivun alaosaan

3. Visuaalinen ilme

Kun sivuston visuaalista ilmettä ryhdytään suunnittelemaan, on oleellista sekä luonnollista lähteä liikkeelle yrityksen brändistä. Brändi on yrityksen strategian tärkein yksittäinen osa-alue, ja sen tulee luonnollisesti ohjata myös visuaalisia valintoja.

Visuaalisesti hieno ja toimiva verkkosivusto ei viel√§ riit√§ pitk√§ll√§ t√§ht√§imell√§, jos verkkosivusto ei muuten ole linjassa  br√§ndin muiden osa-alueiden kanssa: vahva br√§ndi syntyy vasta, kun asiakkaan kokemus on johdonmukaisesti samanlainen kaikissa kohtaamispisteiss√§. 

4. Sivuston selkeys ja ilmeen yhtenäisyys

Sen lisäksi, että verkkosivuston ilmeen täytyy olla linjassa yrityksen brändi-ilmeen kanssa, täytyy ilmeen olla myös käytettävyyden kannalta selkeä ja johdonmukainen.

V√§rej√§, fontteja, kuvia ja graafisia elementtej√§ tulee k√§ytt√§√§ johdonmukaisesti l√§pi sivuston, jotta kokonaisuus pysyy selke√§n√§ ja helposti hahmotettavana. My√∂s t√§ss√§ on hyv√§ hy√∂dynt√§√§ Mere-Exposure-efekti√§. 

Painikkeiden sekä muiden sivustolla liikkumista ohjaavien visuaalisten elementtien ilme kannattaa suunnitella niin, että niiden tarkoitus on helppo ymmärtää ja että ne ohjaavat sivustolla liikkumista sujuvasti. Yksinkertaisesti sanottuna painikkeen tulisi näyttää siltä, että se ohjaa klikkaamaan, jolloin esim. varmistetaan, että sivustolle määritellyt konversiopisteet erottuvat selkeästi ja toimivat halutulla tavalla.

Painikkeiden väritys kannattaa suunnitella siten, että ne erottuvat selvästi. Esimerkiksi Klausilla sivuston päävärejä ovat sininen ja valkoinen, mutta CTA:t ovat vaaleanpunaisia.

Esteettömyyttä ja intuitiivisuutta eri elementeistä

Sivuston ja sen eri elementtien selkeyteen ja intuitiivisuuteen voidaan vaikuttaa esimerkiksi erilaisilla v√§rivalinnoilla, selke√§ll√§ ja erottuvalla typografialla, elementtien sijoittelulla, rytmill√§ ja niiden muodoilla. 

  • V√§rivalinnoissa ja typografisissa valinnoissa on hyv√§ huomioida, ett√§ sivustoa voivat k√§ytt√§√§ my√∂s n√§k√∂vammaiset tai v√§risokeat.
  • V√§rien on hyv√§ olla tarpeeksi kontrastisia ja toisistaan erottuvia p√§√§elementeiss√§, kuten painikkeissa tai linkeiss√§.
  • Tekstin ja taustav√§rin v√§lill√§ on oltava tarpeeksi suuri kontrasti.
  • My√∂s fontin luettavuuteen ruudulla on hyv√§ kiinnitt√§√§ erityist√§ huomiota.

Luovat ratkaisut

Myös taiteellisemmille ratkaisuille voi olla paikkansa, mutta silloin kun sivuston tavoitteena on ensisijaisesti tehdä myyntiä, kannattaa visuaalisten ratkaisujen kuitenkin perustua ennen muuta siihen, että ne selkeästi ohjaavat asiakkaan toimintaa sivustolla.

Erilaisilla animaatioilla voidaan tuoda sivustolle lis√§√§ mielenkiintoa her√§tt√§vi√§ sis√§lt√∂j√§ ja sill√§ voidaan my√∂s ohjata asiakkaan kulkua sivustolla, mutta turhaa animaatioilla kikkailua on syyt√§ v√§ltt√§√§, jotta kokonaisuudesta ei tule sekava.  

Calendly käyttää animaatioita tehokkaalla ja tarkoituksenmukaisella tavalla

5. Luotettavuuden lisääminen visuaalisin keinoin

Kuten jo aiemmin todettiin, yhten√§inen asiakaskokemus on avain vahvempaan br√§ndimielikuvaan, ja voi lis√§t√§ tuotteen tai palvelun vakuuttavuutta ja luotettavuutta. 

T√§m√§n lis√§ksi verkkosivustolla br√§ndin, tuotteen tai palvelun vakuuttavuutta ja luotettavuutta voidaan vahvistaa my√∂s tietyill√§ yleisesti hyv√§ksi havaituilla visuaalisilla keinoilla. 

Social proof

Palveluyritysten kohdalla selke√§ trendi on tuoda ty√∂ntekij√∂iden kuvat mukaan sivustolle. SaaS-yritysten kohdalla t√§m√§ ei ole yht√§ kriittist√§, mutta ihmisten tuomista mukaan kannattaa joka tapauksessa harkita ainakin jossain m√§√§rin: etenkin, jos  yrityksen riveist√§ l√∂ytyy alalta tunnettuja henkil√∂it√§, joiden henkil√∂br√§ndist√§ halutaan hy√∂ty√§.

Asiakasreferensseihin kannattaa nostaa ihmisten kuvat sekä yritysten logot mukaan aina kun mahdollista. Nimellä ja naamalla kerrottu kommentti on uskottavampi kuin anonyymi kertomus.

Intercom käyttää asiakastarinoissaan yritysten logojen lisäksi kuvia asiakkaistaan.

6. Sivuston mobiilikäytettävyys

Digitaalisia sis√§lt√∂j√§ kulutetaan eneneviss√§ m√§√§rin erilaisilla mobiililaitteilla. Siksi on erityisen t√§rke√§√§ panostaa my√∂s verkkosivun ulkoasuun ja k√§ytett√§vyyteen my√∂s muualla, kuin deskarilla: k√§yt√§nn√∂ss√§ siis siten, ett√§ sivuston yleisilme on selke√§ ja intuitiivinen k√§ytt√§√§ my√∂s pienen laitteen n√§yt√∂ll√§. 

  • T√§m√§ voi tarkoittaa visuaalisten elementtien, kuten t√§rkeimpien konversiopisteiden painikkeiden muotojen pit√§mist√§ yksinkertaisena ja selke√§n√§.
  • Painikkeiden ja linkkien sijoittelua ja kokoa kannattaa mietti√§ niin, ett√§ niit√§ on helppo klikata my√∂s silloin, kun mobiililaitetta k√§ytet√§√§n yhdell√§ k√§dell√§.
  • My√∂sk√§√§n esimerkiksi desktop-versioissa hiirell√§ aktivoituvat ‚Äúhover‚ÄĚ-toiminnot (toiminnallisuus aktivoituu kun hiiri vied√§√§n elementin p√§√§lle) eiv√§t luonnollisestikaan toimi mobiilin√§yt√∂ill√§, joten sivuston elementtien toiminnallisuudet on mietitt√§v√§ niin, ett√§ ne toimivat ja ovat selkeit√§ my√∂s mobiilissa. 

Usein kannattaa siis suunnitella joitain elementtej√§  kokonaan "uudestaan" mobiilin√§yt√∂ille, tai jopa joissain tapauksissa j√§tt√§√§ elementtej√§ pois kokonaan, jotta sivun pituus pysyy maltillisena.

7. Tuotteen tai palvelun visualisointi ūüé®

SaaS-tuotteen tai -palvelun kohdalla hinnan lisäksi potentiaalista asiakasta kiinnostaa tietää miten tuote tai palvelu toimii, mitä arvoa se voi tuottaa hänen yritykselleen ja miten se eroaa kilpailijan tarjoamasta vaihtoehdosta.

Nämä seikat täytyy pystyä viestimään selkeästi ja napakasti. Esimerkiksi hyvin toteutetut kuvitetut havainnekuvat tai esittelyvideot tuotteen toiminnallisuuksista ja sen tuottamasta arvosta ovat yleensä hyvä ja toimiva ratkaisu tähän.

Kuvien ja videon avulla tuotteen tai palvelun k√§ytt√∂ on helppo hahmottaa, ja niill√§ voidaan tukea kirjoitettua sis√§lt√∂√§, sek√§ tuoda viestiin lis√§√§ syvyytt√§. Lis√§ksi persoonalliset ja br√§ndin mukaiset tuotekuvitukset ja videot ovat oivallinen keino erottautua kilpailijasta, joka tarjoaa samanlaista tuotetta tai palvelua. 

Kuvitusten tarkoitus

Verkkosivulla käytettävien kuvitusten tehtävä on hyvä miettiä tarkasti, jotta lopputulos on selkeä.

Ennen kuin verkkosivun kuvituksia aletaan varsinaisesti suunnittelemaan, on hyv√§ ensin mietti√§ kuvitusten roolia: onko kuvituksen tarkoitus toimia vain visuaalisena elementtin√§, vai onko ensisijainen teht√§v√§ havainnollistaa tuotteen tietty√§ toiminnallisuutta, palvelun vaihetta tai asiakkaan saamaa hy√∂ty√§? 


Trellon kuvituskuvat liittyvät läheisesti tuotteeseen, mutta ovat kuitenkin
luonteeltaan ennen kaikkea brändielementtejä.

Kun kuvitusten tai videoiden rooli on etuk√§teen tarkkaan mietitty, p√§√§st√§√§n parhaiten toimivaan lopputulokseen. 

Esimerkiksi animaatioiden ja esittelyvideoiden roolia, määrää ja paikkaa on hyvä miettiä tarkkaan. Siinä vaiheessa kun potentiaalinen asiakas on vasta tutustumassa verkkosivun tarjoamaan sisältöön, ei tämä välttämättä vielä jaksa katsoa läpi pitkiä esittelyvideota, vaan haluaa saada nopeasti yleiskuvan tarjotusta tuotteesta tai palvelusta.

Notion käyttää animaatioita tuotteen ominaisuuksien esittelyyn.

8. Jatkuva testaus ja kehittäminen

Toimiva ja myyvä verkkosivusto ei ole koskaan täydellisesti valmis: sivustoa tulee analysoida sekä jatkokehittää sitä mukaa, kun tuote tai palvelu kehittyy, tai uutta tietoa asiakkaiden mielenliikkeistä kertyy.

Jatkuvan kehittämisen avulla voidaan mm. havaita ja kartoittaa sivustolta ne kohdat, joissa asiakkaan ostopolku ei toimi toivotulla tavalla, ja tehdä tähän liittyviä korjaustoimenpiteitä matalalla kynnyksellä.

Parannuksia voidaan tehd√§ my√∂s esimerkiksi testaamalla erilaisia visuaalisia ratkaisuja, joilla asiakkaan liikkumista sivulla voidaan ohjata tehokkaammin. 

 

Ps. Vaikka sinivalas on keskim√§√§rin n. 32 metri√§ pitk√§, on sen nielu l√§pimitaltaan saman kokoinen kuin sen napa ‚Äď suurin piirtein salaattilautasen kokoinen.

Annetuista vaihtoehdoista oikea vastaus on siis greippi. ūüćä ūüź≥