13 Cele mai bune practici de proiectare a site-urilor web pentru 2021

în zilele noastre, puteți pune în funcțiune un site web în câteva minute. Dar există o diferență între un site web fiind live și acesta fiind optimizat.

de ce contează designul? Este nevoie de doar 0,05 secunde pentru ca oamenii să-și formeze o opinie despre site-ul dvs. web. Da, ați citit corect-50 de milisecunde pentru ca cineva să fie suflat sau respins de site-ul dvs. web. Cea mai mare parte a acestei opinii este formată din proiectare.

designul site-ului are, de asemenea, un impact asupra conversiilor, credibilității și, în cele din urmă, face sau distruge succesul site-ului dvs. Niciun site web nu este perfect, dar ar trebui să îl optimizați cât mai mult posibil.

Iată ceva de luat în considerare și: după o experiență proastă, este puțin probabil ca 88% dintre consumatori să se întoarcă pe un site web. În plus, un studiu recent a constatat că 77% dintre agenții spun că un design web slab este cea mai semnificativă slăbiciune a clienților lor.

linia de fund: Dacă designul dvs. web nu este optimizat pentru experiența utilizatorului (UX), va fi în detrimentul succesului dvs. De aceea am scris acest ghid.

mulți factori intră în proiectarea unui site web. Acestea sunt cele mai importante treisprezece elemente care trebuie prioritizate în 2021. Dacă urmați aceste bune practici, performanța site-ului dvs. se va îmbunătăți drastic.

utilizați această listă de verificare pentru a vă asigura că aveți un design câștigător

1. minimizați textul
2. Afișați, nu spuneți
3. folosiți propoziții scurte
4. încercați paragrafe mai scurte
5. alegeți o schemă de culori care se potrivește
6. faceți CTA clar
7. consolidați acțiunile cu familiaritate
8. simplificați navigarea
9. optimizați designul pentru mobil
10. prioritizați SEO
11. monitorizați viteza de încărcare a paginii
12. rulați continuu teste A/B

minimizați textul

nu vă umpleți paginile cu blocuri masive de text.

nu vorbesc despre postări pe blog, care uneori trebuie să meargă în profunzime (ca aceasta!). Vorbesc despre paginile dvs. web (de exemplu, pagina de pornire, pagina de destinație). Păstrați textul la minimum aici.

vrei să le spui vizitatorilor site-ului tău totul despre tine, compania ta, marca ta și produsele tale. Dar trebuie să înveți cum să spui acea poveste în doar câteva propoziții sau—chiar mai bine— câteva cuvinte.

arată, nu spune

vizuale nu numai ajuta să te desparți conținutul scris, dar ele pot oferi, de asemenea, o explicație mai profundă. Arată-le vizitatorilor despre ce ești vorba. Vor înțelege mai mult într-un timp mai scurt.

pagina de produs a lui Harry întruchipează ambele prime două principii de proiectare:

de exemplu, să presupunem că site-ul dvs. vinde aparate de ras, lame, cremă de ras și alte produse de bărbierit pentru bărbați.

operați pe un model de afaceri de abonament și livrați aceste produse clienților dvs. lunar. Designul aparatelor de ras este foarte frumos — sunt realizate din lemn de esență tare sculptat și sunt suficient de drăguțe pentru a le oferi cadou.

în loc să intrați în toate aceste detalii pe pagina dvs. de pornire, puteți pur și simplu să aveți o fotografie a acestor produse cu text care spune ceva de genul „livrat la ușa dvs.”Îți transmiți mesajul în doar patru cuvinte.

sigur, puteți intra în mai multe detalii cu cât vizitatorul intră mai adânc în paginile dvs., dar nu este necesară o descriere lungă a textului.

folosiți propoziții scurte

propozițiile scurte sunt mai ușor de citit.

nu bombardați vizitatorii cu bucăți mari de text. Nu vor ști de unde să înceapă să citească și nu vă vor putea digera conținutul.

amestecă-l. Dacă aveți nevoie de o propoziție lungă, urmați-o cu una scurtă. Varietatea ajută.

încercați paragrafe mai scurte

utilizați pauze de paragraf în avantajul dvs. Este în regulă să scriu paragrafe mai lungi, dar îmi place să păstrez paragrafele de pe pagina mea de pornire la câteva propoziții.

de asemenea, este important să nu exagerați. Prea mult de un lucru bun, este de fapt un lucru rău.

Începeți fiecare paragraf cu informații noi, deci dacă cineva derulează, poate spune rapid dacă trebuie să citească acel paragraf.

eliminarea textului inutil din paginile dvs. reduce dezordinea și pune mai mult accent pe apelul la acțiune.

având CTA iasă în evidență singur în propriul paragraf este mai de impact decât îngroparea într-o grămadă de text.

un instrument foarte util în această situație sunt gloanțele. În loc să adăugați paragrafe și să scrieți în formă lungă, luați în considerare utilizarea listelor. În aceste liste, utilizați bullet points.

studiile arată că mai mulți oameni se vor uita la liste cu puncte glonț decât alte formate. Acest lucru se datorează faptului că ajută la îmbunătățirea scanabilității unei pagini și vă permit să evidențiați cele mai importante puncte pe care doriți să le faceți.

alegeți o schemă de culori care se potrivește strategiei dvs. de branding

alegerile de culoare pe care le faceți pe site-ul dvs. web sunt mai importante decât credeți.

vizitatorii judecă site-ul dvs. în mai puțin de 90 de secunde. Cea mai mare parte este rezultatul culorilor pe care le alegeți.

cel mai bun mod de a alege schema de culori a site-ului dvs. web este cu branding. Consultați logo-ul dvs. Culorile de pe site-ul dvs. web se potrivesc cu imaginea mărcii dvs.?

Iată un exemplu. Gândește-te la Starbucks.

când auziți acest nume de marcă, sunt sigur că aveți o imagine în cap. Poate este logo-ul, un semn sau o locație a magazinului.

asociați vreo culoare cu acest nume? Acum să ne uităm la site-ul lor.

nu este de mirare că au mers cu o schemă de culori verzi.

această alegere de design se potrivește cu logo-ul și imaginea mărcii, ceea ce consolidează ceea ce consumatorii asociază deja cu marca. Păstrând lucrurile consecvente, nu există confuzie. Ar fi ciudat dacă ați vizitat acest site și culorile au fost Galben și roșu. Asta nu are nimic de-a face cu marca lor.

vom vorbi mai mult despre întărire în profunzime pe măsură ce continuăm.

asigurați-vă CTA clar și evident

CTA-urile nu trebuie îngropate. Ei trebuie să fie mari, îndrăzneți și puternici și trebuie să iasă în evidență în mod clar ca acțiunea pe care vizitatorii dvs. ar trebui să o ia în continuare.

cu toate acestea, majoritatea site-urilor web nu au un buton CTA care poate fi reperat în mai puțin de trei secunde. Există șanse mari să cazi în grupul care durează mai mult. Asta nu e categoria în care vrei să fii.

nu puteți genera conversii fără un buton CTA eficient.

nu văd aproape niciodată un CTA pe paginile interioare ale unei afaceri (paginile care explică ce face marca dvs. și ce oferiți). Acesta este un defect major de proiectare. Nu vă puteți aștepta ca vizitatorii să navigheze înapoi la pagina dvs. de pornire pentru a converti.

Aruncati o privire la acest CTA de la turnesol.

uite cât de simplu este acest design. Există un text minim pe ecran, astfel încât mesajul este clar.

ca urmare, CTA „înscrieți-vă gratuit” iese în evidență. De fapt, Litmus chiar a pus-o în mai multe locații de pe ecran.

unde ar trebui să puneți CTA diferă de la o pagină la alta. De exemplu, postările de pe blog ar trebui să aibă CTA în sus, astfel încât cititorii să o vadă rapid și, de asemenea, în partea de jos după ce au citit postarea.

mergeți mai adânc: doriți să vă optimizați CTA-urile? Iată 11 moduri de a vă îmbunătăți apelurile la acțiune.

consolidați acțiunile cu familiaritate

dacă mesajul dvs. este același, CTA-ul dvs. ar trebui să fie același pe fiecare pagină.

gândiți-vă la modul în care oamenii navighează pe site-ul dvs. web. Chiar dacă configurați un anumit flux, nu toată lumea va ateriza pe o pagină și va converti în câteva secunde. Ei pot naviga în jurul pentru un pic mai întâi.

de exemplu, să presupunem că aveți un site web de comerț electronic. Nu ar trebui să schimbați butonul CTA de la pagină la pagină, care ar arăta astfel:

• Pagina principala: Plateste Acum
• pagina Categorie: cumpara-l azi
• pagina produsului: Faceți clic pentru a achiziționa

dacă un vizitator vede unul dintre aceste butoane pe pagina dvs. de pornire, celălalt pe o pagină de categorie și al treilea pe o pagină de produs, nu există nicio întărire.

în schimb, păstrați mesajele și stilul consecvent. Iată un bun exemplu de la marca de bijuterii și accesorii MVMT.

nu contează dacă sunteți pe pagina lor de ochelari, ceasuri sau bijuterii. Veți vedea același” magazin acum ” CTA pentru produsele lor.

fiecare pagină rămâne, de asemenea, în concordanță cu designul minimalist, alb-negru al site-ului web.

aplicați acest principiu de proiectare și pe site-ul dvs. web.

depășește butonul CTA. Ideea este de a avea acest tip de armare cu cât mai multe elemente posibil.

consecvența în limbaj, mesagerie și design consolidează identitatea mărcii dvs. și lasă o impresie de durată în mintea vizitatorilor dvs.

Simplificați navigarea

nu ar trebui să fie dificil pentru un vizitator al site-ului să găsească ceea ce caută pe site-ul dvs.

pune-te în locul lor. De ce vizitați site-ul? Cum îndepliniți această sarcină? Poate doriți să cumpărați ceva, să obțineți mai multe informații sau să vedeți ce este de oferit. Oricare ar fi motivul, dacă vizitatorii nu-și pot da seama repede, vor pleca.

există prea multă concurență acolo. Utilizatorii nu au nici un motiv pentru a pune sus cu navigare site-ul greoi. Tot ce trebuie să faceți este să părăsiți site-ul dvs. și să găsiți ceea ce au nevoie în altă parte.

nu încercați să reinventați roata cu un design complex. Stick cu formatul standard.

de exemplu, majoritatea site-urilor web plasează meniul de navigare orizontal în partea de sus a fiecărei pagini. Dacă meniul dvs. este în altă parte, s-ar putea să vă confunde vizitatorii.

cu cât sunt mai puține opțiuni din meniu, cu atât mai bine. În caz contrar, va fi prea greu pentru oameni să găsească ceea ce au nevoie. Acest concept este cunoscut sub numele de legea lui Hick.

cu cât oferiți mai multe opțiuni cuiva, cu atât îi va lua mai mult timp pentru a lua o decizie. De aceea, proiectele și navigările complexe vă vor zdrobi ratele de conversie.

există un experiment celebru despre acest lucru, denumit studiul jam, care discută paradoxul alegerii.

experimentul a fost realizat la un magazin alimentar local. Consumatorilor li s-au prezentat 24 de gemuri pentru a le proba într-o zi și șase gemuri în ziua următoare:

• afișajul mai mare din prima zi a atras 60% dintre cumpărători, dar doar 3% dintre acești oameni au făcut o achiziție.
• afișarea mai mică a șase blocaje în a doua zi a atras 40% dintre cumpărători, dar 30% dintre aceștia au făcut o achiziție.

prin limitarea opțiunilor, conversiile au fost de zece ori mai mari. Același concept poate fi aplicat navigării pe site-ul dvs. web.

Eliminați opțiunile de meniu inutile. De exemplu, în loc să aveți un buton „acasă”, trebuie doar să utilizați sigla site-ului web pentru a vă conecta înapoi la ecranul de pornire.

aruncați o privire pe pagina principală a Square.

designul este super curat. Opțiunile de meniu sunt extrem de limitate. Acest lucru facilitează vizitatorilor să aleagă o selecție care să se potrivească nevoilor lor.

veți observa că există un text minim pe ecran, iar CTA este clar și evident.

acest tip de design face aproape imposibil ca vizitatorii site-ului să se piardă sau să se confunde atunci când navighează.

pentru cei dintre voi care au o mulțime de opțiuni pe site-ul dvs. web, cum ar fi un magazin de comerț electronic, puteți adăuga o bară de căutare pentru a simplifica procesul de navigare fără a utiliza un meniu complicat. O mulțime de companii de software își pun caracteristicile într-o filă de caracteristici, mai degrabă decât să aibă o filă individuală pentru fiecare caracteristică.

Optimizați-vă designul pentru Dispozitive mobile

Mobile este modul în care majoritatea lumii accesează Internetul. Asta înseamnă că dacă nu sunteți optimizat pentru mobil, site-ul dvs. web nu va funcționa bine.

Aruncati o privire la aceste date de la Hootsuite:

motoarele de căutare recunosc acest lucru și recompensează site-urile care sunt compatibile cu dispozitivele mobile. Iată câteva statistici pentru a atinge punctul acasă:

• Google știe că 87% dintre proprietarii de smartphone-uri își folosesc dispozitivele pentru a rula o căutare pe Internet cel puțin o dată pe zi.
• 58% din toate căutările Google sunt efectuate de pe un dispozitiv mobil
• rezultatul: 70% din rezultatele primei pagini de pe Google sunt optimizate pentru Dispozitive mobile.

SEO mobil este cel mai important lucru pe care îl puteți face pentru a vă poziționa bine pe Google. Serios.

dacă site-ul dvs. web nu arată bine pe un smartphone, oamenii nu vor dori să rămână în jur. Deci, asigurați-vă că design-urile site-ului dvs. web sunt compatibile cu dispozitivele mobile.

mergeți mai adânc: doriți să aflați cum să vă optimizați site-ul web pentru mobil? Consultați ghidul nostru complet pentru un site web prietenos pentru mobil.

prioritizează SEO

tot ceea ce faci pe site-ul tău trebuie să revină la SEO.

și nu este suficient să adăugați doar cuvinte cheie aici și acolo. Este un sistem la nivel de site web de îmbunătățire a conținutului și direcționarea neîncetată a unor subiecte specifice pentru a vă construi autoritatea site-ului în acea zonă.

de exemplu, o pagină de destinație pentru un site de comerț electronic va dori să se concentreze pe anumite elemente de pe pagină, cum ar fi:

• uzabilitate. Cât de ușor este pentru vizitatorii dvs. să folosească și să navigheze.
• mobil. Cum arată și funcționează site-ul dvs. pe un dispozitiv mobil.
• optimizarea cuvintelor cheie. Cuvintele și frazele pe care doriți să rang pentru.
• legături interne. Cât de des vă conectați la alte pagini de pe site-ul dvs. web.
• Titlu. Acesta este adesea cel mai mare text de pe o pagină web. Ca atare, face cea mai mare parte a ridicării grele pe pagina dvs. de destinație.

creați un sitemap XML. Acest lucru va face mai ușor pentru crawlerele motoarelor de căutare să analizeze conținutul de pe site-ul dvs. web. Un sitemap va arăta roboților locația paginilor de pe site-ul dvs., când pagina a fost actualizată ultima dată, frecvența de actualizare și relația cu alte pagini de pe site-ul dvs.

un sitemap adecvat arată Google că nu aveți conținut duplicat, ceea ce vă poate deteriora clasamentul SEO.

când proiectați site-ul dvs., există o mulțime de elemente mai puțin evidente care contribuie și la clasarea pe Google.

am trecut deja peste câteva aspecte pe care le puteți îmbunătăți pe pagina în sine. Dar alte elemente includ:

• domeniu. Adresa dvs. URL este destul de consecventă cu rangul dvs. Factorii cheie includ faptul că aveți cuvântul cheie în domeniu, cât de vechi este domeniul și care este extensia dvs. de domeniu (de exemplu, de înaltă calitate, cum ar fi. com, .net, .gov,.org versus extensii netradiționale).
• calitatea Site-ului. Site-ul dvs. trebuie să fie de ajutor pentru vizitatori. Factorii cheie includ o pagină ‘Despre noi’, o pagină ‘Contactați-Ne’, cât de frecvent actualizați site-ul dvs. web, cât de ușor este să navigați pe site-ul dvs. web, timpul de funcționare (cât de des se blochează site-ul dvs. web) și certificatele SSL.
• backlink-uri. Aceasta se referă la frecvența la care site-ul dvs. web este legat de alte site-uri web. Este un factor crucial pentru clasarea bine pe Google. Factorii cheie includ numărul de pagini de legătură, calitatea și autoritatea site-urilor web care vă leagă, textul ancoră pe care îl folosesc pentru a vă lega și dacă aceste linkuri provin sau nu din domenii .edu sau .gov.

monitorizați viteza de încărcare a paginii

știu la ce vă gândiți unii dintre voi. Ce legătură are viteza de încărcare a paginii cu designul web? Totul.

sigur, timpii de încărcare sunt legați de planul dvs. de găzduire a site-ului web, server, trafic și lucruri de această natură. Cu toate acestea, opțiunile de proiectare pot afecta și timpul de încărcare.

de fiecare dată când adăugați un element pe site-ul dvs., în special imagini, videoclipuri și alte fișiere media complexe, timpul de încărcare poate fi afectat. Ca atare, poate încetini cererile HTTP.

timpii de încărcare lenți duc la rate ridicate de abandon. Nu poți ignora asta. Dacă paginile dvs. durează prea mult pentru a se încărca, va fi o problemă uriașă.

mai mult, 25% dintre oameni abandonează site-urile web care necesită mai mult de patru secunde pentru a se încărca. Da, patru secunde. Asta e tot ce ai, sau vei pierde 25 din fiecare 100 de vizitatori. Majoritatea vizitatorilor se așteaptă ca o pagină să se încarce în două secunde sau mai puțin.

Deci, cum puteți aplica acest lucru designului dvs. web?

• reduceți dimensiunile fișierelor imaginilor dvs.
• profitați de instrumentele de cache ale browserului
• reduceți solicitările HTTP
• îmbunătățiți TTFB (timpul până la primul octet)
• Minify și combinați fișierele

există o mulțime de instrumente disponibile online pentru a vă ajuta să realizați aceste lucruri. De exemplu, consultați pluginul WordPress Rocket ca resursă pentru minimizarea și combinarea fișierelor. Utilizați instrumentul Page Speed Insights de la Google pentru a vă ajuta să monitorizați timpul de încărcare ori de câte ori efectuați modificări de design pe site-ul dvs. web.

rulați continuu teste A/B

când vine vorba de designul site-ului dvs. web, nu îl puteți seta și uita.

așa cum am spus mai devreme, niciun site web nu este perfect. Există întotdeauna modalități de a vă îmbunătăți designul.

de aceea trebuie să executați teste A/B. Acestea vă permit să faceți îmbunătățiri regulate site-ului dvs. web și să testați elemente pentru a vedea ce funcționează cel mai bine și, mai important, ce nu funcționează deloc.

aproape fiecare element al designului site-ului dvs. poate fi testat. De exemplu, puteți crea două pagini de destinație diferite care au CTA-uri diferite, dar altfel sunt aceleași. Dacă o pagină de destinație funcționează mai bine decât cealaltă, veți ști că CTA-ul său este probabil să facă treaba.

iată câteva sugestii rapide pentru a obține ai început în direcția cea bună:

• testați locația butonului CTA
• testați culoarea butonului CTA
• testați copia CTA
• testați imaginile pe care le utilizați în paginile de destinație
• testați variațiile textului textului de pe ecran
• testați dimensiunea barei de navigare

există atât de multe opțiuni, aș putea petrece toată ziua vorbind despre asta. Pentru cei dintre voi care nu sunt familiarizați cu testele A/B sau au nevoie de ajutor, consultați ghidul meu despre tot ce trebuie să știți înainte de a începe testarea A/B.

concluzie

a spune că designul unui site web este important ar fi o subevaluare. Alegerile dvs. de design web vor afecta în cele din urmă dacă site-ul dvs. are sau nu succes.

• site-ul tuturor poate fi îmbunătățit. Utilizați această listă ca ghid ca resursă pentru a vă ajuta să faceți aceste îmbunătățiri.
• nu te lăsa copleșit. Nu spun că trebuie să implementați toate aceste sugestii de design peste noapte, dar trebuie să începeți de undeva.
• nu am scos aceste idei din aer. Totul din această listă este susținut de cercetări și statistici legate de principiile de proiectare.

amintiți-vă: fiecare site web este o lucrare în desfășurare. Dacă puneți munca și reglați întotdeauna site-ul dvs. web, vă veți îmbunătăți avantajul cu concurenții.

nu contează dacă site-ul dvs. este nou sau dacă a fost în jur de un deceniu. Acestea sunt cele mai bune practici de design web pe care trebuie să le urmați în 2021.