• UI & UX

Pareto-periaate web-suunnittelussa - suunnittele tehokkaampi verkkosivusto 80/20-säännön avulla.

  • Lene Wandrey
  • 1 min read
Pareto-periaate web-suunnittelussa - suunnittele tehokkaampi verkkosivusto 80/20-säännön avulla.

Perfektionistina olemisen ongelma verkkosuunnittelussa

Perfektionismi voi olla haaste monille graafisille ja verkkosuunnittelijoille. Täydellisyyden tavoittelu on ihailtavaa, mutta se voi johtaa turhautumiseen, sillä loputtomiin muutoksia ja hienosäätöjä tarvitaan, kunnes verkkosivuston jokainen elementti on täydellinen. Monien suunnittelijoiden on helppo uppoutua suunnitteluprosessiin ja menettää ajantajunsa, kun he valitsevat kirjasintyyppejä, väripaletteja ja miettivät satoja pikselin täydellisyyttä vaativia suunnittelupäätöksiä. Toki on tärkeää tehdä hyvää työtä, mutta suunnittelijana on helppo menettää fokus siitä, mitä tämä tarkoittaa? Verkkosivuston ei pitäisi olla suunnittelijain tavoitteista kiinni, vaan asiakkaan toivomasta lopputuloksesta ja samalla ajan, resurssien ja energian rajallisuuden tasapainottamisesta. Jos rajoitteita ei ole asetettu, verkkosivusto voi helposti päätyä liian pitkälle suunnitelluksi, hitaaksi ja sisältää liikaa elementtejä ja ominaisuuksia, jotka hämmentävät käyttäjiä. Kaikkia ominaisuuksia on myös vaikea sovittaa rajalliseen aikaan, joten suunnittelijalta saattaa yksinkertaisesti loppua aika kesken, ja hyvän verkkosivuston toimittamatta jättäminen määräaikaan mennessä on erittäin stressaavaa kaikille osapuolille.

Mikä on Pareto-periaate?

"80/20-sääntö", jota joskus kutsutaan Pareto-periaatteeksi, sanoo, että 80 prosenttia vaikutuksista johtuu 20 prosentista syistä. Pareto-periaatteen esitteli ensimmäisen kerran italialainen taloustieteilijä Vilfredo Pareto vuonna 1895, kun hän havaitsi, että 80 prosenttia Italian varallisuudesta oli vain 20 prosentilla sen väestöstä. Hän huomasi myös, että 20 prosenttia hänen puutarhassaan olevista hernepavuista tuotti 80 prosenttia herneistä! Pareto-periaatteen mukaan muutamat keskeiset tekijät tuottavat suurimman osan tietystä tuloksesta. Sittemmin sitä on sovellettu monilla muilla aloilla, kuten liike-elämässä, taloustieteessä ja psykologiassa, ja se voi olla käytännöllinen myös jokapäiväisessä elämässä.

Oletko koskaan huomannut, että suurin osa tuloistasi tulee muutamalta samalta vakituiselta asiakkaalta? Tai että tunnut käyttävän aina samoja vaatekappaleita, vaikka suurin osa vaatekaapistasi jää käyttämättä? Vaikka suhde ei aina olekaan täsmälleen 80/20 ja poikkeuksia on aina olemassa, se on loistava työkalu, joka auttaa ihmisiä tunnistamaan, millä toimilla on suurin vaikutus heidän menestykseensä, ja priorisoimaan ne sen mukaisesti.

Pareto-periaate verkkosuunnittelussa ja digitaalisessa markkinoinnissa

Verkkosuunnitteluun sovellettavan Pareto-periaatteen mukaan suurin osa tuloksista saadaan pienestä määrästä keskeisiä ominaisuuksia. Markkinoinnissa jotkin kampanjat menestyvät paljon paremmin kuin toiset. Parhaan tuloksen saavuttamiseksi on järkevää keskittyä ensin näihin muutamiin keskeisiin ominaisuuksiin ja varmistaa, että niihin kiinnitetään eniten huomiota, kun taas vähemmän tärkeät osat voidaan tehdä nopeammin. Yksi tapa hyödyntää Pareto-periaatetta on keskittyä käyttäjäkokemukseen ja käytettävyyteen - kiinnittämällä huomiota siihen, miten käyttäjät toimivat verkkosisällön kanssa, ja varmistamalla, että he löytävät tarvitsemansa, voit todennäköisesti saada suurempia tuloksia kuin jos keskittyisit pelkkään estetiikkaan. Se opettaa meille, että täydellisyys ei aina ole välttämätöntä ja että on mahdollista saada aikaan entistäkin tehokkaampi verkkosivusto optimoimalla tärkeät 20 prosenttia ominaisuuksista.

Esimerkkinä mainittakoon, että tarkastelimme juuri erään käsintehtyjä tuotteita myyvän pienen verkkokaupan liikennetietoja ja huomasimme useita Pareto-trendejä. Esimerkiksi lähes kaikki heidän kävijänsä käyttävät sivustoa mobiililaitteiden kautta. Suurin osa tuotemyynnistä tulee muutamasta kategoriasta. Facebook oli heidän suurin sosiaalisen median liikenteen lähteensä. Kun tarkastellaan tuotesivun lämpökarttaa, jotkin alueet saavat enemmän sitoutumista. Tyypillinen F-kuvio on jossain määrin havaittavissa, ja vuorovaikutuksen klusterit ovat ylärivillä ja sivun vasemmassa reunassa.

Devices popularity

Dashboard with website analytics data

Mitä näiden tietojen avulla voidaan tehdä tämän asiakkaan myynnin parantamiseksi?

Tässä esimerkissä nopein voitto olisi parantaa alun perin työpöydälle rakennetun verkkosivuston mobiilikäyttöä. Kaikkien sivujen lämpökarttoja voitaisiin tutkia, jotta saataisiin lisätietoja käyttäjien mieltymyksistä. Esimerkiksi UKK-osiosta eniten klikatut kysymykset voitaisiin siirtää etusivulle sen sijaan, että ne piilotettaisiin. Korkean tuoton tuotteita voitaisiin esitellä niillä sivuilla, joita klikataan todennäköisesti eniten.

Aloita aina "miksi

Always start with the Why(Kuvan lähde: Envato Elements)

Alan kokemukseni perusteella olen huomannut, että monet suunnittelijat hyväksyvät mielellään toimeksiannon ja aloittavat suunnittelun, vaikka heiltä puuttuu projektin tarkoitukseen liittyviä keskeisiä tietoja. Kenties toimeksiannon laatija ajatteli, että nämä tiedot olivat itsestään selviä, tai asiakas ei ilmaissut niitä tiiviisti. Ota hetki etäisyyttä, ennen kuin aloitat työskentelyn. Ilman selkeää käsitystä siitä, miksi teet sen, mitä teet, verkkosuunnittelustasi puuttuu suunta. Verkkosivustosi saattaa näyttää sinusta ja jopa asiakkaasta hyvältä, mutta monista tunneistasi huolimatta lopputulos on pettymys, jos sillä ei saavuteta asiakkaan odottamia tuloksia.

Kysy itseltäsi: Miksi tämä sivusto on olemassa? Ketkä ovat verkkosivuston loppukäyttäjät ja miten he toimivat verkkosivustolla? Miten verkkosivusto luo arvoa ja menestystä asiakkaallesi? Miten asiakas mittaa tätä menestystä? Miten verkkosivusto houkuttelee kävijöitä ja kerää liidit? Kun pystyt vastaamaan näihin kysymyksiin ja ymmärrät "miksi", on helpompi asettaa suunnitteluelementtien "mitä" ja "miten" tärkeysjärjestykseen. Kun voit visualisoida halutun lopputuloksen, se auttaa sinua keskittämään energiasi tärkeimpiin alueisiin, joilla se saavutetaan.

Hyväksy web-suunnittelun minimi elinkelpoinen tuote -lähestymistapa.

Kun verkkosivuja suunniteltaessa on tehtävä niin monia päätöksiä, voi olla vaikea tietää, mistä aloittaa. MVP-lähestymistapa (Minimum Viable Product) tarkoittaa, että sivustolle rakennetaan heti vain sen keskeiset elementit ja niitä hiotaan jatkuvasti asiakaspalautteen avulla ajan mittaan. Näin toimitaan yleensä kustannusten ja ajan säästämiseksi tai kun liikeidea perustuu moniin oletuksiin. Sen sijaan, että kehittäjät yrittäisivät kaikkea kerralla, he voivat priorisoida ominaisuuksia asiakkaiden tarpeiden perusteella ja luoda prototyyppejä mahdollisimman pian. Vaikka sinulla ei olisi aika- tai budjettipaineita, verkkosivuston omaksuminen MVP:ksi on loistava tapa soveltaa Pareto-periaatetta ja torjua perfektionistisia taipumuksia. Henkisesti auttaa tieto siitä, että voit aina lisätä uusia ominaisuuksia myöhemmin, mutta sinun kannattaa keskittyä nyt tärkeimpiin elementteihin.

Mobiili ensin -suunnittelun avulla voit yksinkertaistaa verkkosivustoasi.

Kun suunnittelet verkkosivustoa, haluat tarjota käyttäjille tehokkaan ja intuitiivisen käyttökokemuksen. Paras tapa saavuttaa tämä on suunnitella sivusto "mobile first" -lähestymistavan mukaisesti. Tähän käsitteeseen kuuluu sellaisten verkkosivustojen luominen, jotka on optimoitu ensin mobiililaitteille, eikä niinkään työpöytäsivustoja, jotka on mukautettu mobiililaitteille. Miksi tämä on välttämätöntä? Techjury.netin mukaan vuonna 2022 matkapuhelimet tuottavat 60,66 prosenttia verkkosivustojen liikenteestä, kun taas pöytätietokoneet ja tabletit yhdessä vastaavat 39,34 prosentista. Tämä saattaa vaihdella eri toimialoilla ja eri verkkosivustoilla, mutta suuntaus on huomionarvoinen. Keskittämällä suunnittelun sivuston mobiiliversioon voit kasata onnistumisen mahdollisuudet eduksesi.

Kun alat suunnitella mobiililaitteille, huomaat nopeasti, että tilaa sanamuodoille ja epäselvyyksille on vähemmän. Siihen on melko vaikea sopeutua, jos on suunnitellut pitkään pöytäkoneille. Tämä lähestymistapa sopii kuitenkin hyvin yhteen Pareto-periaatteen kanssa, sillä se auttaa valitsemaan sisällön, jolla on suurin vaikutus. Tästä on kaksi etua: sivustosi on optimoitu käyttäjien suosimalle mobiilialustalle, ja kun mukautat sen työpöydälle, se näyttää visuaalisesti modernilta ja siistiltä. Sivusto on silti myöhemmin mukautettava työpöytäsivustolle, mutta kun työskentelet mobile first -lähestymistavan pohjalta, se on paljon helpompaa, koska sinulla on jo valmiiksi yksinkertaistettu ulkoasu.

Tee tutkimusta ja analysoi kilpailijoiden verkkosivustoja

Verkkosuunnittelun osalta ajattelemme usein, että tutkimus tarkoittaa muiden inspiroivien verkkosivustojen tai kauniita muotoiluelementtejä sisältävien mallien tarkastelua. Verkkosuunnitteluun liittyvä tutkimus on kuitenkin muutakin kuin muiden verkkosivustojen estetiikan ihailua. Tehokkaan verkkosivuston luomiseksi on ymmärrettävä, miten ihmiset käyttävät verkkoa, miten käyttäjät ovat vuorovaikutuksessa erilaisten ulkoasujen kanssa ja miten sisältö järjestetään. Pyytämällä asiakkaalta analytiikkatietoja tai käyttämällä Ranktrackerin kaltaista seurantatyökalua voimme paremmin tunnistaa alueet, joilla on mahdollisuuksia parantaa verkkosivuston suorituskykyä.

Tutkimukseen olisi sisällyttävä alan nykyisten standardien, kohderyhmien ja käyttäjien mieltymysten tarkastelu kilpailija-analyysin avulla. Kilpailijoita voi etsiä kysymällä asiakkaalta tai tekemällä omia hakuja ja katsomalla, mitkä sivustot ovat kärkisijoilla. Kun olet tunnistanut joitakin kilpailijoita, tarvitset luotettavan tietolähteen niistä. Yksi Ranktrackerin suosikkiominaisuuksistani on mahdollisuus lisätä omia tunnistettuja kilpailijoitasi, jolloin se näyttää kilpailijoiden suorituskyvyn sarakkeessa oman verkkotunnuksesi tulosten vieressä. Jos kilpailija sijoittuu paremmaksi kuin sinä omilla avainsanoillasi, kannattaa analysoida heidän verkkosivustonsa, jotta voit oppia heiltä. Voit lisätä kilpailijan yksinkertaisesti liittämällä heidän URL-osoitteensa.

Add competitors in Rank Tracker

Rank Tracker board

Napsauta ja lue hyvä ja perusteellinen artikkeli siitä, miten kilpailuanalyysi tehdään.

Kun teet kaikki tutkimuksesi, laadi "unelmaluettelo" kaikista mahdollisista ominaisuuksista ja elementeistä, joita voisit sisällyttää (älä huoli, rajaat nämä vielä pois, mutta on hyödyllistä saada kaikki ideat yhteen).

Suunnittelu: Suunnittelun keskeisten piirteiden tunnistaminen

Planning: Identifying Key Design Features(Kuvalähde: Envato Elements)

Verkkosivuston suunnittelun tulisi perustua sen käyttötarkoitukseen. Tarkastele kaikkia elementtejä/ominaisuuksia unelmiesi luettelosta ja valitse ne, joiden uskot auttavan asiakastasi saavuttamaan tavoitteensa. Ota tyhjää paperia ja aloita karkeiden rautalankamallien piirtäminen verkkosivustoa varten. Yhdistä jokainen elementti, jonka aiot sisällyttää sivustoon, lopputulokseen: jos et löydä sille selkeää tarkoitusta, jätä kyseinen osa pois. Älä mieti suunnittelun estetiikkaa, vaan keskity siihen, mikä on parasta käyttäjäkokemuksen ja käytettävyyden kannalta.

Toisin kuin yleisesti uskotaan, ensimmäisiä rautalankamalleja ei tarvitse suunnitella hienoilla suunnitteluohjelmilla. Analoginen lähestymistapa, jossa käytetään kynää ja paperia, toimii mainiosti, ja joskus jopa paremmin, koska itse ohjelmisto ei häiritse sinua. Paperi on anteeksiantavampaa ja vähemmän pysyvää; sitä on nopeampi käyttää, mikä saattaa auttaa luovan prosessin aikana. Jos sinun on esiteltävä rautalankamallit asiakkaallesi, se voidaan tehdä ammattimaisemmin, kun olet työstänyt karkeapiirrokset läpi.

Tee ensin mock-up, älä suunnittele web-alustalla ajan säästämiseksi.

Vanhan sanonnan mukaan lentokonetta ei voi lentää sen rakentamisen aikana. Tämä pätee myös verkkosuunnitteluun: jos yrität rakentaa verkkosivustoa, kun vielä mietit sisältöä, ominaisuuksia ja suunnittelua koskevia päätöksiä, se johtaa turhautumiseen. Jotta asiat pysyisivät tehokkaina, tarvitset suunnitelman. Jokaisen sivun mallinnuksen luominen vaikuttaa aikaa vievältä ja intuition vastaiselta, mutta se palvelee monia tarkoituksia ja säästää aikaa pitkällä aikavälillä. Mock-upien avulla asiakkaasi voi visualisoida verkkosivuston ennen kuin web-kehitys edes alkaa. Hän voi kokeilla eri väri- ja fonttivaihtoehtoja ja ennakoida helposti, mitä on muutettava. Mock-upista keskusteleminen luo paljon mahdollisuuksia keskusteluille ja kysymyksille. Se lisää mahdollisuuksia siihen, että asiakkaasi on tyytyväinen, kun hän näkee live-sivuston ensimmäistä kertaa. Mikä tärkeintä, mock-upin avulla voit rakentaa verkkosivuston paljon nopeammin, kun pääset kehitysvaiheeseen, koska lähes kaikki luovat päätökset on jo tehty.

Työskentele sisällön kanssa, joka sijoittuu hyvin hakukoneissa.

Joskus asiakas vaatii sinua aloittamaan suunnittelun "paikanvaraustekstillä", koska hän luulee, että tehtäväsi on vain suunnitella esteettiset elementit. Jos mahdollista, vältä suunnittelutyön tekemistä geneerisen paikanvaraustekstin avulla. Vaikka muotoilusi saattaa näyttää kauniilta, verkkosivustollasi ei ole tarkoitusta, jos jätät huomiotta tärkeän ainesosan, kuten hyvin kirjoitetun sisällön.

Verkkosivusto on arvokas vain, jos se saa kävijöitä, ja hakukoneoptimointi (SEO) on tapa, jolla hakukoneet löytävät verkkosivustosi orgaanisesti. Sivun sanamuotovalinnat ovat ratkaisevia SEO:n kannalta, ja suunnitteluelementtien tulisi tukea sanamuotoa. Jos tiedät etukäteen, mitkä ovat avainsanat, se antaa sinulle lisäymmärrystä. Jos teet sisällön laatimista yhteistyössä copywriterin kanssa, varmista, että hän tuntee SEO:n. Vaikka et olisikaan SEO-asiantuntija, perehdy aiheeseen, jotta voit olla tietoisempi siitä verkkosuunnitteluprosessin aikana.

Jotkin avainsanojen hakutyökalut ovat monimutkaisia (varsinkin jos olet uusi SEO:ssa), mutta Ranktracker Keyword Finder on hyvin yksinkertainen ja intuitiivinen: lisäät vain avainsanat luetteloon, ja se näyttää tulokset värikoodattuna avainsanan vaikeuden mukaan. Hyvän SEO:n kannalta haluat valita avainsanoja, joilla on vähän kilpailua mutta riittävästi hakuvolyymia, joten on erittäin hyödyllistä, että hakuvolyymit näytetään heti.

Keyword Finder

Ennen kuin aloitat, yritä siis saada ainakin luonnos sanamuodosta. Jos olet itsenäinen suunnittelija, sinun on todennäköisesti myös autettava asiakasta selvittämään, mihin sanamuoto sopii parhaiten verkkosivustolla. Suunnitteluprosessin todellisuus on, että sanamuoto saattaa muuttua muutaman kerran, mutta on paljon parempi, että sinulla on jokin lähtökohta kuin ei mitään.

Yksinkertaistetaan fontteja, värejä, hierarkiaa ja visuaalisia elementtejä koskevia valintoja.

Jos olet vähemmän kokenut suunnittelija tai haluat vain säästää aikaa, on hyödyllistä työskennellä mallien kanssa ja käyttää niitä pohjana. WordPressin kaltaiselle CMS-järjestelmälle on tarjolla tuhansia hienoja malleja kohtuulliseen hintaan. Näissä on jo valmiiksi fontit, värit, hierarkia ja visuaaliset elementit, jotka on suunniteltu yhtenäiseen tyyliin. Jos olet huolissasi omaperäisyydestä, voit olla varma, että lopputuloksesi näyttää erilaiselta kuin malli, koska mukautat sen rautalankamalliisi. Jos sinulla on aluksi joitakin suunnittelun lähtökohtia ja yleinen tyyli, se voi auttaa sinua löytämään suunnan ja vähentää päätöksentekoväsymystä. Älä ota mukaan liikaa värejä: voit turvallisesti rajoittaa verkkosivuston värit kahteen väriin tai enintään kolmeen. Tutustu The 20 Best Color Combinations to Try on Your Website -julkaisuun, josta löydät hyviä ideoita ja trendejä verkkosivuston värien valinnassa.

Johtopäätökset: Vaikutuksen maksimointi

Kun suunnittelija tietää, mihin keskittyä, hän voi hallita perfektionistisia taipumuksiaan ja silti saavuttaa menestystä. Pareto-periaate on verkkosuunnittelun nyrkkisääntö, jonka mukaan 80 prosenttia käyttäjäkokemuksesta voidaan saavuttaa 20 prosentilla vaivasta. Tämä tarkoittaa, että verkkosuunnittelijoiden on keskityttävä sisällön, sivun suunnitteluelementtien, käytettävyyden ja muiden tekijöiden optimointiin luodakseen tehokkaan verkkosivuston, joka sijoittuu hyvin hakukoneissa.

Lene Wandrey

Lene Wandrey

Lene Wandrey is a tech-loving artist, graphic designer and entrepreneur living in South Africa. She's the founder of hot-designs.com. She is passionate about design and productivity.

Link: hot-designs.com

Kokeile Ranktrackeria ILMAISEKSI