Labākā mājaslapas prakse – 9 vissvarīgākie elementi (+ piemēri)

Neatkarīgi no tā, vai veidojat uzņēmuma vai personisku vietni, iespējams, prātā nāk daudzi jautājumi. Viens no lielākajiem: Kā jūs izveidojat mājas lapu kas faktiski liek apmeklētājiem darīt to, ko jūs vēlaties?


Ja vēlaties pēc iespējas vairāk izmantot savus apmeklētājus, ir dažas lietas, kuras jūs noteikti jādara.

Visā savas karjeras laikā esmu izveidojis un optimizējis desmitiem mājas lapu daudzās nozarēs un izpētījis simtiem citu. Ir zināma paraugprakse, kurā dalās visas galvenās lapas ar vislielāko reklāmguvumu, un jūs gatavojaties tās uzzināt jau tagad. Jūsu vietnei būs vislabākā iespējamā mājas lapa.

Novietojiet savu galveno mērķi augstāk

Kad kāds apmeklē jūsu mājas lapu, viņu interesē, ko jūsu bizness var piedāvāt. Daudzos gadījumos jums ir tikai viena iespēja izplatīt jūsu ziņojumu un dodiet viņiem iemeslu palikt jūsu vietnē.

Jūs atradīsit dažus izņēmumus, taču gandrīz visām lieliskajām mājas lapām ir CTA (aicinājums uz darbību) virs reizes (saturs, kas parādās bez nepieciešamības ritināt).

Iespējams, ir vairāki apmeklētāju rezultāti, par kuriem jūs priecājaties (piemēram, viņi apmeklē jūsu emuāru, kontaktinformācijas lapu vai produktu lapas), taču jums izvēlies vissvarīgāko lai koncentrētos uz virs reizes.

Pārējo var aizvietot citur lapā vai pat virs pirmā ekrāna ar mazāku uzsvaru.

Šeit ir daži tipiski dažādu veidu vietņu galveno mērķu piemēri:

  • Emuāri. Apkopojiet apmeklētāja e-pasta adresi.
  • Programmatūra. Lieciet apmeklētājam reģistrēties jūsu rīkam.
  • E-komercija. Lieciet apmeklētājam apmeklēt jūsu veikalu vai produkta lapu.

Apskatīsim katra piemēru.

Backlinko ir plaši pazīstams SEO emuārs. Mājaslapas galvenais mērķis ir skaidrs: iegūt savu e-pasta adresi.

ielieciet savu galveno-mērķi-virs-reizes

Wix ir viens no populārākajiem vietņu veidotājiem uzņēmumiem, izmantojot veidnes visu veidu vietnēm (piemēram, konsultācijas, mājdzīvnieki, nekustamais īpašums utt.).

Gadās, ka ir lieliska sava mājas lapa:

ielieciet savu galveno-mērķi-virs-reizes1

CTA ar “Start Started” ļauj jums reģistrēties un izmantot rīku vietnes izveidošanai.

Noslēgumā apskatīsim e-komercijas mājaslapas piemēru.

Zemāk ir veidne, ko piedāvā Weebly, kas ir vēl viens vietņu veidotājs, kas vairāk koncentrējas uz e-komercijas uzņēmumiem.

ielieciet savu galveno mērķi-virs-reizes2

Virs pirmās malas ir skaidrs CTA, lai jūs varētu nokļūt “Iepirkt kolekciju” un apmeklēt tiešsaistes veikalu.

Pro padomi:

  • Nelietojiet slīdņus un karuseļus. Lai arī viņi var izskatīties izdomāti, apmeklētāji tos neizmanto. Jums ir daudz labāk pārvietot saturu uz leju tīmekļa lapā, lai lietotājs varētu to ritināt.
  • Ja iespējams, izmantojiet attēlus ar cilvēku sejām. Cilvēki tiek piesaistīti citiem, tāpēc šie attēli piesaista jūsu uzmanību. Mēs arī sekojam cilvēku acīm attēlos, tāpēc, ja jūsu attēlā redzamā seja (-as) ir vērsta uz jūsu CTA, vēl labāk.

Samaziniet iespējamo darbību skaitu apmeklētājiem

Cilvēki vēlas izdarīt pareizo izvēli, tāpēc ir pārāk daudz iespēju var palielināt viņu satraukumu.

Britu psihologs Viljams Hiks atklāja, ka jo vairāk izvēles iespējas cilvēkam tiek dotas, jo ilgāks laiks viņiem būs nepieciešams lēmuma pieņemšanai. Tagad to sauc par Hika likums, un tas tiešām ir veselais saprāts.

Bet kā jūs varat piemērot šo principu savas mājas lapas uzlabošanai? Padomājiet par iespējamo darbību skaitu, ko var veikt jūsu apmeklētāji:

  • Jebkurā ekrāna daļā atļaujiet veikt tikai vienu vai divas iespējamās darbības, maks.
  • Visā jūsu mājas lapā atļaujiet tikai dažas iespējamās darbības – īkšķa likumu, mēģiniet koncentrēties ne vairāk kā uz piecām darbībām.

Ja kāda saite nav kritiska, bet vēlaties to iekļaut, ievietojiet to izvēlnē vai kājenē.

Asana, projekta vadības rīks, veic labu darbu pārspīlēt tās vietnes apmeklētājus ar pārāk daudzām iespējām:

samazināt apmeklētāju potenciālo darbību skaitu

Asana prioritātes piešķir svarīgākajām darbībām, kas atrodas virs pārsega, un zemāk lapā ievieto saites uz citām svarīgām vietnes daļām. Tie ietver CTA, lai:

  • Noskatieties demonstrācijas video.
  • Skatiet klientus, kuri izmanto Asana.
  • Izpētiet instrumenta portfeļa funkciju.
  • Lejupielādējiet pārskatu par sadarbības vadību.
  • Izmēģiniet Asanu bez maksas (vēlreiz).

Kopumā mājaslapā ir izceltas piecas galvenās darbības.

Es neieteiktu iet daudz augstāk par vairumā gadījumu, kaut arī tas ir atkarīgs no jūsu uzņēmuma veida. Emuārā vai žurnālā, iespējams, var atbrīvoties no 10-20 saitēm uz saturu citās viņu vietnes daļās.

Rakstiet vienkāršus un skaidrus virsrakstus

Kopš mārketinga sākuma vienmēr ir bijis arguments par to, vai saturs vai dizains ir “karalis”. Patiesība ir tāda, ka abas vietnes ir kritiskas, it īpaši mājaslapā.

Lai gan lielākā daļa labākās prakses ir vērsta uz dizainu, šī koncentrējas uz vissvarīgākais teksts jūsu lapā: virsraksts (un, iespējams, apakšvirsraksts).

Ja apmeklētājs dažu sekunžu laikā pēc nokļūšanas jūsu mājas lapā nevar saprast jūsu piedāvāto, viņš tūlīt aiziet. Šiem vienam vai diviem teikumiem ir milzīga ietekme uz jūsu mājas lapas efektivitāti.

Lai to ilustrētu, apskatīsim mājas lapas piemēru, kuru varētu izmantot daudz no virsraksta palīdzības. Pārbaudiet AAK vietnes augšpusē esošo apgabalu:

rakstīt-vienkārši-skaidri-virsrakstus

Ko jūs domājat darīt uzņēmums??

Arī man nebija ne mazākās nojausmas.

Acīmredzot AAK pārdod ilgtspējīgi iegūtus taukus un eļļas.

Vai tas bija skaidrs no plkst “Kopā radīsim iedvesmas mirkļus” tev?

Tātad, kā jūs uzrakstāt lielisku virsrakstu? Izgrieziet buzzwords un esiet skaidrs. Skaidrība ir svarīgāka nekā radošums, tāpēc vispirms koncentrējieties uz to.

Dažiem uzņēmumiem tas ir vieglāk nekā citiem.

Piemēram, santehniķim ir bizness, kuru ir viegli aprakstīt. Šis ir diezgan laba vietējā uzņēmuma mājaslapas virsraksta piemērs:

rakstīt-vienkārši-skaidri-virsrakstus1

Ja lapā nonāk kāds no Toronto, viņi zina, ka atrodas īstajā vietā “Toronto ārkārtas santehniķim”.

Apskatīsim dažus labus tiešsaistes uzņēmumu virsrakstus.

rakstīt-vienkārši-skaidri-virsrakstus2

Codecademy: “Pievienojieties miljoniem, kas mācās kodēt …”

Virsraksts ir skaidrs, un ikviens, kurš piesakās mājaslapā, uzreiz sapratīs, ka Codecademy māca cilvēkiem programmēt.

Šeit ir daži citi labie varianti:

  • Asana: “Asana ir tā darba vadības platforma komandas izmanto, lai koncentrētos uz mērķiem, projektiem un ikdienas uzdevumiem, kas audzē biznesu. ”
  • WordPress:Veidojiet vietni, veidot kustību. ”
  • Copyblogger:Vārdi ka darbs viedākam digitālajam mārketingam un pārdošanai.”

Pro padomi:

  • Varat pārbaudīt virsraksta skaidrību, parādot savu mājas lapu kādam, kurš to vēl nekad nav redzējis. Ja viņi piecu sekunžu laikā nevar saprast, ko jūs darāt, tas nav pietiekami skaidrs.
  • Mērķis ir padarīt virsrakstus pēc iespējas kodolīgākus (ne vairāk kā divus teikumus).

Esiet dāsns ar balto atstarpi starp elementiem

Baltā telpa ir vienkārši tukša vieta ekrānā, kas, pareizi lietojot, var padarīt jūsu saturu:

  • Izskaties labāk. Baltā telpa padara saturu izskatīgāku.
  • Esiet sagremojamāki. Kad saturs tiek izkliedēts, tas ir mazāk apgrūtinošs lasītājiem un vieglāk zināt, uz ko koncentrēties.
  • Plūst skaidrāk. Izmantojot balto atstarpi, jums ir skaidras sadaļas, tāpēc jūs varat vadīt apmeklētājus, izmantojot loģisku ideju secību, kas viņiem sniedz vērtīgu informāciju.

Visās labajās mājas lapās ir daudz baltas vietas, neatkarīgi no tā, vai tās atrodas starp sadaļām vai pašā saturā (piemēram, atstarpe ap teksta rindiņām, virsrakstiem, attēliem utt.).

Tiek izmantots attēlu tapšanas rīks Snappa daudz baltas vietas savā mājas lapā, lai skaidri sadalītu tekstu, attēlus un satura sadaļas.

esiet dāsns ar balto atstarpi starp elementiem

Ņemiet vērā, ka “baltā telpa” ir tikai parasts termins tukšai vietai. Tas nenozīmē, ka jūsu fonam jābūt baltam; tā var būt jebkura krāsa.

Visu laiku ir redzams aicinājums uz darbību

Dažādi apmeklētāji ir gatavi rīkoties dažādos laikos. Dažiem ir vajadzīga vairāk informācijas nekā citiem, un viņi tūlīt nepierakstīsies vai nenoklikšķinās.

Bet jums vajadzētu viegli rīkoties kad vien viņi ir gatavi.

Tāpēc vienā mājas lapā redzēsit vairākus CTA. Daudzi CTA var būt paredzēti tam pašam mērķim.

Neejiet pāri bortam, bet mēģiniet, lai jūsu mājas lapā vienmēr būtu redzams vismaz viens CTA (tipiskam darbvirsmas ekrānam).

Tesla mājas lapa ir labs šīs koncepcijas piemērs. Sākas ar skaidru CTA, lai pasūtītu automašīnu:

“visu laiku ir redzams aicinājums uz darbību”

Ritinot uz leju līdz nākamajai sadaļai, ir divi jauni CTA, ar uzsvaru uz svarīgāko, kas liek jums apmeklēt veikalu (tā vietā, lai pasūtītu konkrētu produktu)..

ir “aicinājums uz rīcību” vienmēr redzams1

Ritiniet vēlreiz uz leju, un tur ir iezīmēta poga citai produktu sērijai, ko pārdod Tesla, to saules paneļiem un barjeras sienām. Pastāv sekundārā CTA, ja apmeklētājiem ir nepieciešama papildu informācija.

ir “aicinājums uz rīcību” redzams visu laiku2

Tesla mājaslapā ir vēl daži ekrāni, katrs ar savu CTA (vai diviem).

Pro padomi:

  • Izmantojiet pazīstamus CTA. Apmeklētāji saprot, ko nozīmē “pievienot grozam” un “izmēģināt bez maksas”, jo viņi tik daudz reizes ir redzējuši līdzīgus. Jūs varat būt nedaudz radošs, bet pazīstami CTA parasti darbojas vislabāk (tāpēc izlaidiet nepazīstamus, piemēram, “iedvesmojieties!”).
  • Izmantojiet trešdaļu likumu. Sadaliet ekrānu vai attēlu deviņās daļās. Skatītāja acis automātiski tiek piesaistītas šo līniju krustojumiem (zemāk aplis ar zaļu krāsu). Ievietojiet CTA un virsrakstus tuvu tie krustojumi, lai pārliecinātos, ka viņi vispirms tiek pamanīti.

Apskatiet Snappa vietnes normu par trešdaļu darbību:

ir “aicinājums uz rīcību” vienmēr redzams3

Izmantojiet kontrastu, lai tiešu lietotāja uzmanību

Efektīva dizaina galvenā sastāvdaļa ir kontrasts.

Kontrasts ļauj jums izcelt svarīgas jūsu mājas lapas daļas. Parasti tiem vajadzētu būt jūsu CTA un, iespējams, arī virsrakstiem.

Apsveriet Moz mājas lapu zemāk. Kas jums visvairāk izceļas?

lietojiet kontrastu, lai tiešu lietotāja uzmanību

Mana acs vispirms ir vērsta uz spilgti dzeltenajām pogām, un pēc tam uz lielo zilo virsrakstu.

Tas notiek tāpēc, ka starp dzelteno pogu un tumšo fona attēlu ir augsts kontrasts.

Pro padomi:

  • Ja vēlaties pārbaudīt pašreizējās mājas lapas CTA kontrastu, atrodiet kontrasta koeficienta kalkulatoru un ievadiet savu pogu vai saišu krāsu atbilstoši fona krāsai. W3C saka, ka ir vismaz 3: 1 attiecība uz liela teksta vai elementiem (kādas pogas parasti ir) vai 4.5: 1 attiecība uz mazu tekstu (līdz 18 pikseļiem).

lietojiet kontrastu, lai tiešu lietotāja uzmanību1

  • Ja jūs nezināt, kā izvēlēties krāsas ar lielu kontrastu, vienkāršākais veids ir Google izmantot “vietnes krāsu atlasītāju”. Jebkurš no populārajiem to darīs. Jūs ievadīsit pamatkrāsu, un tā dos jums kombināciju no divām līdz četrām citām krāsām, kas tai labi der.

Iekļaujiet sociālo pierādījumu, lai atvieglotu apmeklētāju prātus

Sociālais pierādījums ietver jebko, kas parāda citus cilvēkus, piemēram, jūsu uzņēmumu. Atsauksmes, lietotāju statistika, pārskati, gadījumu izpēte un tā tālāk.

Lielākoties cilvēkiem patīk lietas, par kurām citi saka, ka tās ir labas.

Apskatiet HubSpot mājaslapas sadaļu, lai iegūtu piemēru:

iekļaujiet sabiedrisko pierādījumu, lai atvieglotu apmeklētāju prātu

Viņiem ir diezgan daudz iespaidīgu statistiku:

  • Apmeklējumu skaits HubSpot emuāros
  • Sociālo sekotāju skaits
  • Integrāciju skaits
  • Klientu skaits (un lielo klientu vārdi)

Citam piemēram, Mākoņi (mitināšanas uzņēmums) savā mājaslapā ir vairākas atsauksmes:

iekļaut sabiedrisko pierādījumu, lai atvieglotu apmeklētāju prātu1

Pro padomi:

  • Ja veidojat pavisam jaunu vietni, iespējams, jums vēl nav pārskatu vai lietotāju statistikas. Ja tas tā ir, sazinieties ar draugiem, bijušajiem līdzstrādniekiem vai agrīnajiem lietotājiem un mēģiniet iegūt kaut ko, ko jūs varat iekļaut.
  • Iestatiet Google brīdinājumu savas vietnes nosaukumam (vai uzņēmuma nosaukumam, ja tas atšķiras), lai uzraudzītu, kad jūs piemin citi. Varat teikt, ka šīs citas vietnes jūs esat pieminējis vai pieminējis kā sociālu pierādījumu.

Optimizējiet attēlus, lai samazinātu ielādes laiku un palielinātu lipīgumu

Saskaņā ar neseno Google publicēto ziņojumu, 53% mobilo ierīču apmeklētāju pamet lapu, ja tā netiek ielādēta trīs sekunžu laikā.

Izrādās, ka vidējais lapas ielādes laiks mobilajā ierīcē ir 22 sekundes.

Mēs veidojam vietnes galddatoros, parasti ar lielisku interneta savienojumu, tāpēc šīs vietnes parasti tiek ielādētas dažu sekunžu laikā.

Bet ne visiem ir liels savienojuma ātrums. Pat mans 4G tālrunis dažreiz ir nomākti lēns, un daudziem cilvēkiem ir 3G savienojums vai sliktāks.

Tātad, kā jūs ātri ielādējat savu mājas lapu? Jums jāņem vērā divi faktori:

  • Jūsu mitināšanas kvalitāte
  • Jūsu mājas lapas lielums

Ja izmantojat tādu vietņu veidotāju kā Wix vai Vietne123, par mitināšanu rūpējas par jums, un parasti tā ir pietiekami kvalitatīva, lai jums par to nebūtu jāuztraucas. Tas atstāj jūsu mājas lapas lielums kā galveno satraukumu.

Lai gan vairākas lietas var padarīt jūsu mājas lapu lielāku nekā nepieciešams (piemēram, nesaspiesti statiskie faili, neoptimizēts JavaScript), līdz šim visizplatītākā problēma ir nepoptimizēti attēli.

Labā ziņa ir tā, ka attēlu optimizēšana ir vienkārša.

Iepazīsimies ar hipotētisku piemēru, kāpēc tas ir tik svarīgi.

Es devos uz Pexels (bezmaksas attēlu attēlu vietni) un atradu lielisku attēlu manas vietnes mājaslapai (parādīta zemāk). oriģinālais attēls ir 2,02 MB, kuras lēna savienojuma izveidošanai vajadzēs vairākas sekundes.

optimizēt attēlus, lai samazinātu, iekraušanas laiku un palielinātu lipīgumu

Es ātri meklēju tiešsaistes attēlu kompresors un ievietojiet attēlu caur rīku. Tas samazināja izmēru par 56%, bez ievērojama kvalitātes pazemināšanās, un mēs esam līdz 902 KB.

Bet izrādās, ka man mājas lapā nav vajadzīgs pilna izmēra attēls, tikai tāds, kura platums ir 1000 pikseļi.

Tāpēc es meklēju citu vienkāršu tiešsaistes rīku, kas varētu palīdzēt (t.i., “tiešsaistes attēlu resizer”):

optimizēt attēlus, lai samazinātu, iekraušanas laiku un palielinātu lipīgumu1

Mēs sākās ar 2 MB, un tagad ir līdz 75 KB, bez ievērojamas kvalitātes pazemināšanās (pirms un pēc zemāk). Optimizēto attēlu var ielādēt sekundes laikā pat ar lēniem savienojumiem.

optimizēt attēlus, lai samazinātu, iekraušanas laiku un palielinātu lipīgumu2

Tas ir mazliet ārkārtējs gadījums, bet tas nav tik reti, kā jūs varētu domāt.

Pro padomi: Attēlu optimizēšana ir viegli laimests, kas var ļoti ietekmēt jūsu reklāmguvumu līmeni. Tas ir viss, kas jums jādara, lai parādītu attēlus jūsu mājas lapā. Dariet tos jebkurā secībā:

  • Mainiet attēla izmēru līdz mazākajam platumam, kas jums būs nepieciešams apmeklētājam.
  • Palaidiet attēlu caur a saspiešanas rīks.

Padariet savu mājas lapu reaģējošu uz mobilo

Apskatiet jebkuras vietnes analītiku, un pamanīsit, ka mobilo ierīču lietotāju procentuālā daļa veido lielu apmeklētāju daļu.

Ja jūsu mājas lapa kāda lietotāja tālrunī vai planšetdatorā izskatās dīvaini, jūs nokavējat iespējamos reklāmguvumus.

Adaptīva vietne pielāgojas ekrāna lielumam un labi tiek parādīta visu izmēru ekrānos. Tas tiek darīts caur CSS un reizēm ar JavaScript.

padarīt jūsu mājas lapu mobilu, reaģējošu

Ja jums tie nepatīk, es ieteiktu izmantot vietņu veidotāju. Izlasiet mūsu rakstu par labākajiem adaptīvo vietņu veidotājiem.

Kā jūs veidojat mājas lapu ar augstu reklāmguvumu līmeni?

Ja jūs jau zināt, kā izveidot vietnes, tagad mums ir jauks, mazs kontrolsaraksts vissvarīgākās daļas augstas kvalitātes mājas lapa:

  • Primārais mērķis ir virs pirmā reize.
  • Apmeklētāju nepārslogo vairākas CTA.
  • Galvenais virsraksts ir viegli saprotams.
  • Sadaļas tiek dalītas ar balto atstarpi.
  • Vairāki CTA visā lapā.
  • Kontrasts, ko izmanto, lai CTA izceltos.
  • Iekļauts sociālais pierādījums.
  • Attēli ir optimizēti.

Bet, ja jūs nezināt, kā izveidot vietni vai to kodēt no nulles, vienkāršākais veids, kā izveidot un darboties dažu stundu laikā, ir izmantojiet vietņu veidotāju.

Ir daudz labu, katrs no tiem ir paredzēts dažādiem mērķiem. Šeit ir visvienkāršākie, ko esmu izmantojis iepriekš, un es ieteiktu:

  • E-komercijas vietnei izmantojiet Weebly.
  • Izmantojiet vietni, kas paredzēta konkrētai nozarei (piemēram, nekustamais īpašums, māksla, restorāns) Wix.
  • Lai pēc iespējas vienkāršāk izveidotu vietni, izmantojiet Vietne123.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector