Įsivaizduokite, kad įeinate į prekybos centrą ieškodami naujų darbo drabužių. Pastebite dėmėtas grindis, netvarkingas lentynas ir keistą kvapą. Ar liktumėte šioje parduotuvėje ir pirktumėte iš pardavėjo? Parduotuvės dizainas įtakoja tai, kaip elgiasi klientai – tas pats galioja ir tinklalapiams. Apklausos, kurią atliko „Clutch“ ir kurioje dalyvavo 612 žmonių, parodė, kad 83% dalyvių pastebi, kai tinklalapio dizainas yra estetiškas ir atnaujintas. Alternatyviai 50% dalyvių nesilankytų tinklalapyje, jei jie manytų, kad turinys yra nereikšmingas arba neatitinka jų poreikių. Taigi, kaip sukurti tinklalapį, kuris patiks klientams? Tam ir yra šis straipsnis. Mes jums parodysime, kodėl geras tinklalapio dizainas yra esminis ir pasidalinsime 15 tinklalapio dizaino principais, kuriuos galite panaudoti, norėdami sukurti aukštos kokybės tinklalapį.

Kodėl yra svarbus geras tinklalapio dizainas?

Kai naujas potencialus klientas aplanko jūsų tinklalapį, tai jam sudaro pirmąjį įspūdį, kuris formuoja jų ateities sąveikas su jūsų prekiniais ženklais. Tai yra tas momentas, kai jie susidaro pirmąją nuomonę apie jus.

Jūsų tinklalapis taip pat perteikia jūsų prekinio ženklo tapatybę, viziją ir poziciją rinkoje. Jei turite artimus konkurentus, siūlančius panašius produktus, tinklalapis, kuris žmones privers sakyti “nuostabu”, padarys jus įsimenamesniais ir padidins jūsų prekinio ženklo žinomumą, keldami konkurenciją.

Be to, stiprus tinklalapis gali pagerinti jūsų paieškos variklio optimizavimo (PVO) pastangas.

Paieškos varikliai vertina, kaip žmonės reaguoja į tinklapius, juos įvertindami paieškos rezultatus reitinguose. Jei jūsų paieškos rodiklis yra žemas ir žmonės dažnai lankosi daugelyje jūsų tinklalapio puslapių, paieškos varikliai tikriausiai jums suteiks aukštesnę poziciją nei konkurentui su dideliu paieškos rodikliu.

Techninis PVO taip pat yra labai svarbus čia. Tinklalapiai su gerai suprojektuotais pavadinimais, puslapių struktūromis ir nuorodomis yra prieinamesni. Taigi, tiek paieškos varikliai, tiek klientai jiems suteikia pirmenybę. Pažvelkime į kelis svarbius tinklalapių dizaino principus.

15 efektyvaus tinklalapio principų

1. Puslapiai turėtų būti lengvai naršomi.

Remiantis „Clutch“ tyrimu, apie vartotojų patirtis tinklalapiuose, 94% dalyvių sakė tinklalapio naršymas „svarbus tinklalapio funkcionalumas“.

Tas yra visiškai nenuostabu. Jei paieškos variklio naudotojas ateina į jūsų tinklalapį ieškodamas informacijos apie „interjero dizainą“ ir jos neranda, natūralus kitas žingsnis yra paspausti „grįžti atgal“ ir išbandyti kitą tinklalapį.

Kaip įgyvendinti gerai suplanuotą naršymą? Pasisemkite idėjų iš „The Cool Club“ tinklalapio.

Kai įeinate į „The Cool Club“ tinklalapio pradinį puslapį, tinklalapio išdėstymas yra labai aiškus. Jūs galite naršyti į pagrindinius produktų skyrius (tokius kaip „kortų žaidimai“ ir „krepšinio sąrašas“) naudodami mygtukus kairėje pusėje ir galite pereiti į „apie“ ir „kontaktai“ puslapius naudodami mygtukus dešinėje pusėje.

„The Cool Club“ tinklalapio produktų puslapiai taip pat labai lengvai naršomi. Šiuo metu prekinis ženklas turi interaktyvų kortelių rinkinį, kuriame yra 54 įvairūs stiliai ir atitinkami puslapiai. Jums tiesiog reikia slinkti žemyn ir spustelėti ant kortelės, kurią norite pamatyti išsamiau.

Norint sukurti panašiai veiksmingą tinklalapį, išrūšiuokite turinį į aiškias kategorijas, kurias pateiksite antraštėse ir poraštėse, ir suteikite jiems pavadinimus. Tada, suskirstykite puslapius pagal temas, kad žmonės galėtų lengvai peržiūrėti panašias temas.

2. Visada naudokite neigiamą erdvę (baltą ar tuščią vietą) efektyviai.

Neigiamoji erdvė (arba „balta-tuščia vieta“) yra sritis apie puslapio objektus, pavyzdžiui jie turėtų būti užpildyti nuotraukomis, vaizdo įrašais, tekstais ar mygtukais.

Daugybė entuziastingų rinkodaros specialistų skuba užpildyti kiekvieną laisvą vietą ant puslapio, tikėdami, kad suteikdami lankytojams daugiau informacijos juos labiau įtrauks. Tačiau tai dažnai lemia pernelyg įtemptą ir painiojantį puslapio turinį.

Tai yra vieta, kurioje naigiamoji erdvė tampa svarbi. Naudodami neigiamą erdvę, pabrėžiame svarbiausius kiekvieno puslapio elementus, nes spalvos nebuvimas nukreipia lankytojo akis į ryškesnes sritis.

Žinoma, „naudojant neigiamą erdvę“ nereiškia „sukurti nuobodų baltos spalvos tinklalapį“. Vietoj to, galite pasinaudoti erdve naudodami savo prekinio ženklo spalvas, kaip tai daro „Garoa“.

„Garoa“ tinklalapio pradinis puslapis naudoja kreminės spalvos paletę, tuo pačiu pasinaudodamas neigiamąja erdve. Rezultatas yra tas, kad jūsų akys nukreipiamos į įvadinį turinį, esantį centre, pavyzdžiui, „oda rūpintis rudenį“ sekcijoje, o ne į mažiau svarbias dalis.

Įsitikinkite, kad naudojate baltą-tuščią erdvę (neigiamą erdvę), kad pabrėžtumėte hierarchiją savo tinklalapyje.

3. Puslapiai turėtų būti nuoseklūs ir patrauklūs.

Kai perskaitote prekinio ženklo pavadinimus, tokius kaip „Cadbury“, „Hershey’s“ arba „Nike“, tikriausiai iš karto galvoje iškyla jų logotipai, šriftai ir dizaino stiliai. Tai yra nuosekli prekinio ženklo įtaka.

Kuriant savo tinklalapį, puslapius, naudokite nuoseklius elementus, kad suteiktumėte savo prekiniam ženklui aiškią vizualią tapatybę. Tai reiškia:

• Naudoti tuos pačius šriftus, stilius ir spalvas antraščių srityse.
• Išlaikyti vienodą tarpą tarp elementų, puslapių.
• Naudoti spalvų paletę vietoj atsitiktinių spalvų.
• Nustatyti nurodymus ilgoms turinio formoms, tokioms kaip naujienų straipsniai ir tinklaraščio įrašai.
• Naudoti vienodą tinklalapio šabloną visiems puslapiams.

Nuoseklūs puslapiai nebūtinai turi atrodyti visiškai vienodi. Vietoj to, galite subalansuoti nuoseklumą ir įtraukimą, maišydami elementus.

4. Pridėkite papildomų spalvų.

Papildomos spalvos yra spalvų poros, kurias galite sumaišyti, kad dizainas nepasirodytų pernelyg intensyvus ir neestetiškas.

Televizijos ir kompiuterių ekranuose spalvų atvaizdavimo seka yra raudonos, žalios ir mėlynos (RGB) spalvų modelis, o ne šviesiai mėlynos, magentos, geltonos ir juodos (CMYK) spalvų modelį, kuris naudojamas spausdinimui. Dažnai dailininkai naudoja ir raudonos, žalios, mėlynos (RYB) spalvų modelį, kur yra papildomos spalvos raudona-žalia, mėlyna-oranžinė ir geltona-violetinė.

Nesvarbu, kurį modelį renkatės, naudojant papildomas spalvas pasiekiama panaši paskirtis kaip ir naudojant juodą ir balta. Papildomos spalvos suteikia akcentą ir sukuria aiškią vizualią tapatybę jūsų prekiniam ženklui.

Tai galite pamatyti „Swab The World“ tinklalapyje.

Žemiau pateiktoje ekrano kopijoje, kraujo vėžio labdaros tinklalapis naudoja žalios ir magentos spalvos atspalvius. Kai lankotės skirtingose tinklalapio sekcijose, šios spalvos keičiasi į kitas papildomas spalvų derinius (bet visos spalvos turi panašumų į prekinį ženklą).

Papildomos spalvos yra lengvas principas, kurį galite naudoti savo dizaine. Jei norite išlaikyti paprastumą, pasirinkite dvi papildomas spalvas ir pridėkite jas prie kontrastingų elementų. Taip pat galite naudoti kelis spalvų atspalvius kiekviename puslapyje.

5. Kurkite savo dizainą atsižvelgdami į savo auditoriją.

Jeigu pažvelgsite į „The Cool Kids“, „Garoa“ ir „Swab The World“ tinklalapius, galite pastebėti, kad kiekvienas tinklalapis turi unikalų „jausmą“. Šis jausmas kyla iš tinklalapio dizaino pritaikymo auditorijai.

Personalizacija – galutinis tikslas. Daugelis iš mūsų mėgsta pirkti produktus ir paslaugas iš prekinių ženklų, su kuriais jaučiamės susiję ir kurie atitinka mūsų įsitikinimus. Iš tikrųjų tyrimai rodo, kad 72% vartotojų vertina įsigijimus iš įmonių, kurios „atitinka jų įsitikinimus ir vertybes“. Todėl jei kas nors lanko jūsų tinklalapį ir mato ten atspindinčias jų vertybes, tikslus ir prioritetus, jie labiau linkę pirkti iš jūsų.

Norėdami pritaikyti tinklalapio dizainą savo auditorijai, apsvarstykite šiuos dalykus:

• Kokie vaizdai rezonuoja su jūsų tikslinės rinkos auditorija?
• Kokios nuotaikos tinka jūsų auditorijai (pavyzdžiui, profesionali, minimalistinė, linksma, ir t.t.)?
• Kokiomis temomis jūsų tikslinė rinkos auditorija ateina į jūsų tinklalapį pamatyti?
• Kaip galite perteikti savo prekinį ženklą per tinklalapio dizainą?

Jeigu galite naudoti tinklalapių automatizavimą siekiant pateikti asmeninę patirtį, pagrįstą naudotojo profiliu ir su jūsų prekių ženklu, tai suteiks papildomų taškų.

Gali būti naudinga pasisemti įkvėpimo iš konkurentų ar jų prekinių ženklų, kurie pardavinėja skirtingus produktus jūsų tikslinės auditorijos segmentui.

6. Šriftai turėtų būti įskaitomi ir prieinami.

Šriftai, kuriuos naudojate savo tinklalapyje, nulemia, ar jūsų lankytojai gali perskaityti tai, ką parašėte, ar ne. Galima drąsiai teigti, kad jie yra labai svarbūs.

Pirmas dalykas, kurį verta apsvarstyti renkantis šriftą, yra tinklalapio saugumas. Tinklalapio saugūs šriftai yra palaikomi operacinėmis sistemomis ir interneto naršyklėmis, todėl jie veiks daugelyje įrenginių.

Taip pat būtina atsižvelgti į prieinamumą. Prieinami šriftai turėtų būti aiškūs ir lengvai skaitomi tiek dideliu, tiek mažu dydžiu. Pavyzdžiui, rankraščiais paremti šriftai nėra labai prieinami, tuo tarpu „Times New Roman“ šriftas yra pakankamai prieinamas.

Be to, stebėkite kitų tinklalapių šriftų tendencijas renkantis šriftą. 2021 m. duomenų mokslininkas Michael Li išanalizavo šriftus daugiau nei 1 000 tinklalapių. Jis nustatė šias tendencijas:

• 85% šriftų neturi serifų (mažų priedų raidėms, kaip tai būna naujienų rūšiuotėse).
• Top penki šriftai apima: Sans Serif, Arial, Helvetica, Helvetica Neue ir Roboto.
• H1 antraštės turi 58% tikimybę neturėti serifų (palyginti su 93% paraštės teksto).
• Dvi labiausiai paplitusios paraštės šriftų dydžio vertės yra 14 px ir 16 px.

Galite pasirinkti pasinaudoti šia informacija ir pasirinkti šriftą, kuris atitinka tai, ko žmonės ieško tinklalapiuose. Arba, galite pasirinkti kažką skirtingo.

„Virgin“ yra prekės ženklas, kuris pasirinko antrąjį variantą. „Virgin“ naudojo bent penkis šriftus žemiau esančioje nuotraukoje. Šie šriftai atskiria tinklalapio skiltis ir suteikia jiems patrauklią išvaizdą.

7. Sekite Fito ir Hiko įstatymus.

Psichologas Paul Fitts pirmą kartą sukūrė Fito įstatymą 1954 metais, tačiau jis išlieka labai aktualus tinklalapių dizaine 2023 metais. Fito įstatymas teigia, kad taikinio dydis įtakoja, kiek laiko reikia žmogui pasiekti jį.

Tinklalapio dizaino arba vartotojo patirties (User Experience – UX) kontekste tai reiškia, kad žmonėms reikės mažiau laiko, norint paspausti didesnius mygtukus, o daugiau laiko – paspausti mažesnius mygtukus. Todėl, norint pasinaudoti Fito įstatymu, turėtumėte padaryti savo „Call-to-Action“ (CTA) mygtukus itin didelius ir iškilius, kad juos būtų lengviau paspausti.

„Siekimas palengvinti“ yra itin svarbus šiuo atveju. Hiko įstatymas, sukurtas britų psichologo William Edmund Hick ir amerikiečio psichologo Ray Hyman. Įstatymas teigia, kad žmonės tampa pavargę kiekvieną kartą, kai priima sprendimą.

Taigi, kuo daugiau sprendimų prašote lankytojo priimti, tuo didesnė tikimybė, kad jie taps pernelyg pavargę ir nesugebės visiškai vykdyti.

8. Naudokite nekeičiamumą, kad paryškintumėte pagrindinę informaciją.

Kai kas yra „nekeičiama“ („invariant“), tai išsiskiria kaip unikali galimybė iš daugelio labai panašių variantų. Pats akivaizdžiausias invariancijos pavyzdys yra išryškinimas kainodaros puslapio planuose, pavyzdžiui, šiame „Box“.

Tačiau tai nėra vienintelis būdas, kaip galite naudoti invarianciją. Invariancija gali padėti jums nustatyti vizualinę hierarchiją jūsų tinklalapio puslapiuose, kad būtų pabrėžta svarbi informacija ir pritraukti žmones į svarbias jūsų tinklalapio dalis.

Pavyzdžiui, pažvelkite, kaip „Frans Hals Museum“ panaudojo invarianciją, kad sukurtų vizualinę hierarchiją savo tinklalapio pagrindiniame puslapyje:

Hierarchija šiame vaizde yra tokia: „sveiki atvykę“ ženklas, paveikslėliai, „pirkti bilietus“ ženklas, „visos parodos“ ženklas, tada kitas turinys.

Norint naudoti invarianciją ir sukurti savo hierarchiją, reikia pagal svarbą surūšiuoti puslapio elementus. Tada kiekvieno elemento dydį, spalvą ir vietą reikia keisti taip, kad lankytojų akys būtų nukreiptos į kiekvieną elementą norima tvarka.

9. CTA (Call-to-Action) mygtukuose: naudokite aiškų ir patrauklų žodinį išsireiškimą, kurį žmonės norės paspausti.

Mes palietėme didelių ir lengvai paspaudžiamų mygtukų svarbą, tačiau dydis nėra vienintelis dalykas, kurį turėtumėte svarstyti, kuriant mygtukus.

Paspaudžiami mygtukai turi būti aprašomi taip, kad būtų informatyvūs ir įtikinami tuo pačiu metu. Jie sukelia lankytojų smalsumą apie tai, kur mygtukas nukreips, ir suteikia jiems priežastį ten nueiti.

Vienas būdas tai padaryti yra naudoti išsamius mygtukų tekstus, pvz., „spausti čia, kad perskaitytumėte mūsų tinklaraštį“, „raskite mūsų rinkodaros paslaptis čia“ ar „čia yra mūsų 2022 metų ataskaita“. Kitas būdas yra padaryti mygtukus vizualiai įdomius ar unikalius.

10. Pasinaudokite F modeliu arba Z modeliu.

Per 13 metų, tyrėjai iš Nielsen Norman Group (NN Group) naudojo akių stebėjimą, kad pamatytų, kaip daugiau nei 500 žmonių bendrauja su turiniu. Tai juos paskatino sukurti F modelį, kuris sako, kad žmonės pirmiausia praskverbia puslapį žemyn, tada skaito eilutes iš kairės į dešinę. Panašiai kaip čia:

Galite pasinaudoti F modeliu savo tinklalapyje, struktūrizuodami turinį pagal jį arba kitą alternatyvų modelį.

Pavyzdžiui, Facebook pagrindiniame puslapyje naudoja Z modelį. Kai lankotės puslapyje, jūsų akys nukreipiamos į „Facebook“ logotipą, tada į „prisijungimo“ mygtuką, po to į kairėje esantį vaizdą ir galiausiai į „sukurti paskyrą“ mygtuką.

11. Geri tinklalapiai yra greiti ir pritaikyti mobiliesiems įrenginiams.

Ketvirtojo ketvirčio 2021 metais pasauliniu mastu 54,4% tinklalapių lankomumo atėjo iš mobiliojo įrenginio. Todėl, jei jūsų tinklalapis nėra pritaikytas mobiliesiems įrenginiams, jūs galite sumažinti savo lankomumą perpus.

Greitis taip pat įtakoja organinį tinklalapio lankomumą. Google tyrimai rodo, kad 53% žmonių palieka tinklalapį, jei jis užkraunamas ilgiau nei per tris sekundes.

Paprasčiausias būdas padaryti savo tinklalapį pritaikytą mobiliesiems įrenginiams arba greitą, yra pasirinkti greitą tinklalapio šabloną, sukurtą ekspertų dizainerių. Arba, jei norite daugiau dalyvauti tinklalapio dizaine, galite pasirinkti kurti tinklalapį tinkantį visoms įrenginių rūšims.

Tiksliai taip veikia “1917” dizaineriai. “1917” tinklalapis suteikia įtraukiamą patirtį, kad žmonės būtų įsitraukę į filmą. Jis yra specialiai pritaikytas mobiliesiems įrenginiams, nes galite naudoti pirštą, kad judėtumėte po Pirmojo pasaulinio karo trenkiančiais laukais.

Jei jūs pastebėsite, pamatysite, kad “1917” tinklalapis taip pat naudoja F modelį.

12. Padalinkite tekstą į lengvai suprantamas dalis.

Atkreipkite dėmesį į tai: ieškote “minčių žaidimų” ir rasite tinklalapį, kuris atrodo patraukliai. Tačiau, paspaudus, jūsų dėmėsį atkreipia į dideli teksto blokai, kurie sunkiai skaitomi.

Kaip ir daugelis žmonių, paliksite šį tinklalapį (nesvarbu, kokios patrauklios būtų turinio temos!).

Dėmesio stebėjimo tyrimai iš Missouri mokslų ir technologijos universiteto rodo, kad tinklalapių lankytojai vidutiniškai praleidžia 5,59 sekundės skaitydami tekstą. Todėl, jei žmonės negali per tą laiko tarpą perskaityti jūsų teksto, mažai tikėtina, kad jūs juos tinkamai įtrauksite.

Kadangi lankytojai dažnai yra skubantys ir turi daug kitų pasirinkimų, svarbu padalinti tekstą į lengvai suvokiamas dalis, kad būtų lengviau perskaityti ir greičiau gauti reikiamą informaciją. Tai padidins jūsų tinklalapio naudingumą ir pagerins lankytojų patirtį.

Išspręskite šią problemą, dalindami savo tekstą į mažas dalis:

• Naudokite trumpus sakinius.
• Venkite bendrinės kalbos išsireiškimų.
• Pateikite apibrėžimus, bet kokiems pramonės specifiniams žodžiams, kuriuos naudojate.
• Venkite “purpurinio prozos” (nereikalingų metaforų, prieveiksmių ir prideklių).

13. Naudokite tinklelius.

Kai sako “naudokite tinklelius,” tai nereiškia, kad turėtumėte savo tinklalapį padaryti panašų į “Excel” lentelę. Vietoje to, dalinkite savo tinklalapį į atskiras sekcijas, kurios atlieka tam tikrą funkciją, kad lankytojai greitai galėtų rasti reikiamą turinį. Tai padės sukurti tvarkingą ir struktūrizuotą tinklalapio dizainą, kuris palengvins navigavimą ir pagerins lankytojų patirtį.

Taip, tiesioginės tinklelių linijos nėra būtinos norint sukurti struktūrizuotą tinklalapį. Galima sukurti skirtumus tarp tinklelių langų naudojant spalvas, tuščiąją erdvę ir šešėlius, kaip tai padarė Atlason. Atlason pagrindiniame puslapyje pateikia naujausius ir geriausiai parduodamus produktus tinklelių formate. Kadangi lankytojai tikriausiai ieško šių produktų, tinkleliai padeda jiems juos rasti per kelias sekundes. Toks tinklalapio dizainas yra patrauklus, lengvai suvokiamas ir palengvina lankytojų navigaciją.

Vienas iš lengviausių būdų tinklalapyje naudoti tinklelius yra pasirinkti WordPress temą, kuri juos panaudoja. Pavyzdžiai yra “Gridframe”, “Masonry Grid” ir “Shuttle Grid”.

14. Prisiminkite pusiausvyrą.

Tinklalapių dizaino kontekste “pusiausvyra” atsispindi kaip dizaino elementai yra vienas kitam proporcingi ir ar jie sudaro harmoniją. Yra daug būdų sukurti pusiausvyrą savo tinklalapyje, įskaitant keletą šių tinklalapių dizaino principų:

• Pasitelkus simetriją (įskaitant bilateralinę, radialinę arba translacinę simetriją).
• Naudodami komplementarines ar kontrastines spalvas.
• Naudodami elementus su panašiomis formomis ir dydžiais.
• Naudodami pasikartojančius modelius.

Galima matyti pusiausvyrą veikime „Woven“ tinklalapyje. Šis tinklalapis naudoja subalansuotą spalvų paletę, juodą ir baltą, kad sukurtų kontrastą tekste ir simetriją, kuri atkreipia lankytojų dėmesį į turinį. Šie dizaino elementai padeda suteikti tinklalapiui tvarkingą ir harmoningą išvaizdą.

15. Atkreipkite dėmesį į smulkmenas.

Gestalto teorija teigia, kad žmonės suvokia kažką kaip visumą prieš dėmesį skiriant atskiriems elementams. Arba, kaip pasakė Kurt Koffka: “Visuma egzistuoja nepriklausomai nuo dalių.” Nors Gestalto teoriją paprastai susieja su psichologija, ji taip pat taikoma tinklalapių dizainui.

Jums reikia atkreipti dėmesį į smulkmenas savo tinklalapyje, kad užtikrintumėte išsklaidytą ir baigtą dizainą. Kuriant kažką, paprastai lengva sutelkti dėmesį į svarbius elementus, tokius kaip antraštės, vaizdai ir CTA mygtukai, ir pamiršti kitus dalykus, tokius kaip:

• Apačios ir viršutinės žymės (piktogramos).
• Socialinių tinklų mygtukai.
• Kokiu efektyvumu jūs perkėlėte savo tinklalapį į WordPress platformą (jei taikoma).
• Teksto tarpai.
• Rašybos ir gramatikos klaidos.
• Naršyklės suderinamumas.
• Vaizdų dydžiai.

Išvados

Gerai suprojektuotas prekybos centras pagerina klientų patirtį, o prastas gali visam laikui atbaidyti klientus nuo jūsų prekės ženklo. Tas pats pasakyta ir apie tinklalapių dizainą.

Kuriant vizualiai patrauklų tinklalapį reikia daugiau nei tik smagių eksperimentų. Tai gali padėti jums:

• Perduoti profesionalumą.
• Sukurti pasitikėjimą su jūsų lankytojais.
• Išsiskirti iš konkurentų.
• Pristraukti organinį srautą iš paieškos sistemų.
• Naudojant tinklalapių dizaino principus, pateiktus šiame straipsnyje, galite sukurti tinklalapį, kuris įspūdingai nustebins lankytojus.