13 Website Design Best Practices For 2021

nykyään verkkosivuston saa käyntiin muutamassa minuutissa. Mutta on olemassa ero, että sivusto on live ja se on optimoitu.

miksi muotoilulla on merkitystä? Se kestää vain 0.05 sekuntia ihmiset muodostavat mielipiteen sivustosi. Kyllä, luit että oikein-50 millisekuntia joku puhalletaan pois tai vastenmielinen sivustosi. Suurin osa tästä mielipiteestä muodostuu suunnittelusta.

Verkkosivujen suunnittelu vaikuttaa myös muunnoksiisi, uskottavuuteesi ja lopulta tekee tai rikkoo sivustosi menestyksen. Mikään sivusto ei ole täydellinen, mutta sinun pitäisi optimoida se mahdollisimman paljon.

tässäkin on huomioitavaa: huonon kokemuksen jälkeen 88 prosenttia kuluttajista ei todennäköisesti palaa verkkosivuille. Päälle, että, tuore tutkimus totesi, että 77% virastojen sanovat, että huono Verkkosivujen suunnittelu on merkittävin heikkous niiden asiakkaiden.

Pohjanpalo: Jos web design ei ole optimoitu käyttökokemusta (UX), se tulee olemaan haitallista menestystä. Siksi kirjoitin tämän oppaan.

monet tekijät liittyvät verkkosivuston suunnitteluun. Nämä ovat kolmetoista tärkeintä elementtiä priorisoida vuonna 2021. Jos noudatat näitä parhaita käytäntöjä, sivustosi suorituskyky paranee huomattavasti.

käytä tätä tarkistuslistaa varmistaaksesi, että sinulla on voittava malli

1. minimoi teksti
2. Näytä, älä kerro
3. käytä lyhyitä lauseita
4. kokeile lyhyempiä kappaleita
5. valitse värimaailma, joka sopii
6. tee CTA selväksi
7. vahvista toimintoja, joiden tunnettavuus on
8. navigoinnin yksinkertaistaminen
9. optimoi suunnittelusi mobiililaitteille
10. priorisoi SEO
11. seuraa sivusi latausnopeutta
12. aja jatkuvasti A/B-testejä

minimoi teksti

älä täytä sivujasi massiivisilla palikoilla teksti.

en puhu blogikirjoituksista, joissa on joskus mentävä syvällisesti (kuten tämä!). Puhun web-sivuistasi (esim.Kotisivu, aloitussivu). Pidä teksti minimissä täällä.

haluat kertoa verkkosivustosi kävijöille kaiken itsestäsi, yrityksestäsi, brändistäsi ja tuotteistasi. Mutta sinun täytyy oppia kertomaan se tarina vain muutamalla lauseella tai— vielä parempi-muutamalla sanalla.

Näytä, älä kerro

grafiikka ei ainoastaan auta sinua hajottamaan kirjoitettua sisältöä, vaan ne voivat myös tarjota syvällisempää selitystä. Näytä vieraillesi, mitä olet. He ymmärtävät enemmän lyhyemmässä ajassa.

Harryn tuotesivu ilmentää näitä kahta ensimmäistä suunnitteluperiaatetta:

sanotaan esimerkiksi, että sivustosi myy partateriä, teriä, partavaahtoa ja muita parranajotuotteita miehille.

toimit tilausliiketoimintamallilla ja toimitat näitä tuotteita asiakkaillesi kuukausittain. Partakoneesi muotoilu on erittäin komea-ne on tehty veistetystä jalopuusta ja ne on mukava antaa lahjaksi.

sen sijaan, että menisit tämän yksityiskohdan yksityiskohtiin kotisivullasi, voit yksinkertaisesti pitää näistä tuotteista valokuvan, jossa lukee jotain ”toimitettuna kotiovellesi.”Saat viestisi perille vain neljällä sanalla.

toki sitä tarkemmin voi mennä, mitä syvemmälle sivuihin vierailija joutuu, mutta pitkää tekstikuvausta ei tarvita.

käytä lyhyitä lauseita

lyhyitä lauseita on helpompi lukea.

älä pommita kävijöitä isoilla tekstinpätkillä. He eivät tiedä, mistä aloittaa lukemisen, eivätkä pysty sulattamaan sisältöäsi.

sekoita. Jos tarvitset pitkän lauseen, seuraa sitä lyhyellä. Vaihtelu auttaa.

kokeile lyhyempiä kappaleita

käytä kappaleen taukoja eduksesi. On OK kirjoittaa pidempiä kappaleita, mutta haluan pitää kotisivuni kappaleet muutaman lauseen mittaisina.

on myös tärkeää olla liioittelematta. Liika hyvä asia on itse asiassa huono asia.

Aloita jokainen kappale uudella tiedolla, joten jos joku vierittää, hän voi nopeasti kertoa, pitääkö kyseinen kappale lukea.

tarpeettoman tekstin poistaminen sivuilta vähentää sotkua ja korostaa enemmän soittamista.

CTA: n erottuminen yksin omassa kappaleessaan on vaikuttavampaa kuin sen hautaaminen kasaan tekstiä.

erittäin hyödyllinen väline tässä tilanteessa ovat luodit. Kappaleiden lisäämisen ja pitkämuotoisen kirjoittamisen sijaan kannattaa harkita listojen käyttöä. Käytä luetteloissa bullet-pisteitä.

tutkimusten mukaan enemmän ihmisiä katsoo listoja, joissa on luotipisteitä kuin muissa formaateissa. Tämä johtuu siitä, että ne auttavat parantamaan sivun scannability ja voit korostaa tärkeimmät kohdat haluat tehdä.

valitse värimaailma, joka sopii brändäysstrategiaasi

verkkosivuillasi tekemäsi värivalinnat ovat tärkeämpiä kuin luulet.

kävijät arvioivat verkkosivusi Alle 90 sekunnissa. Suurin osa siitä johtuu valitsemistasi väreistä.

paras tapa valita sivuston värimaailma on brändäys. Katso logoasi. Sopivatko verkkosivustosi värit brändisi imagoon?

tässä esimerkki. Ajattele Starbucksia.

kun kuulet tämän tuotenimen, mielikuva on varmasti päässäsi. Ehkä se johtuu logosta, kyltistä tai kaupan sijainnista.

yhdistätkö nimeen yhtään väriä? Katsotaanpa heidän nettisivujaan.

ei ole yllätys, että ne menivät vihreä värimaailma.

tämä mallivalinta vastaa heidän logoaan ja brändikuvaansa, mikä vahvistaa sitä, mitä kuluttajat jo yhdistävät brändiin. Pitämällä asiat johdonmukaisina, ei synny sekaannusta. Olisi outoa, jos kävisit tällä sivustolla ja värit olisivat keltainen ja punainen. Sillä ei ole mitään tekemistä heidän brändinsä kanssa.

vahvistuksista puhutaan syvemmin, kun jatketaan.

tee CTA: Stasi selvä ja ilmeinen

CTA: ta ei pidä haudata. Niiden on oltava suuria, rohkeita ja voimakkaita, ja niiden on selvästi erottuttava siitä toiminnasta, jota Vierailijoidesi pitäisi tehdä seuraavaksi.

silti useimmilla verkkosivustoilla ei ole CTA-nappia, jonka voi bongata alle kolmessa sekunnissa. On hyvin mahdollista, että putoat ryhmään, joka kestää kauemmin. Et halua olla siinä kategoriassa.

muunnoksia ei voi ajaa ilman tehokasta CTA-painiketta.

en juuri koskaan näe CTA: ta yrityksen sisäsivuilla (sivuilla, joissa kerrotaan, mitä brändisi tekee ja mitä tarjoat). Tämä on suuri suunnitteluvirhe. Et voi odottaa kävijöitä navigoida takaisin kotisivullesi muuntaa.

katso tätä LITMUKSEN CTA: ta.

katso, miten yksinkertainen tämä on. Ruudulla on minimaalista tekstiä, joten viesti on selkeä.

tämän seurauksena CTA: n ”rekisteröidy ilmaiseksi” erottuu joukosta. Itse asiassa, Litmus jopa laittaa sen useampaan paikkaan ruudulla.

se, mihin CTA: n pitäisi laittaa, vaihtelee sivulta toiselle. Esimerkiksi, blogikirjoituksia pitäisi olla CTA ylhäällä niin lukijat näkevät sen nopeasti ja myös alareunassa, kun he ovat lukeneet postitse.

mene syvemmälle: Haluatko optimoida Ctasi? Tässä on 11 tapaa parantaa kutsuja toimintaan.

Vahvista toimia, joiden tunnettavuus on

jos viestisi on sama, CTA: n pitäisi olla sama joka sivulla.

mieti, miten ihmiset navigoivat verkkosivuillasi. Vaikka määrittäisit tietyn virtauksen, kaikki eivät laskeudu sivulle ja muutu sekunneissa. Ne saattavat ensin vähän selata ympäriinsä.

esimerkiksi sanotaan, että sinulla on verkkokauppasivusto. Sinun ei pitäisi muuttaa CTA-painiketta sivulta sivulle, joka näyttäisi tältä:

• kotisivut: Checkout now
• Category page: Buy it today
• Product page: Klikkaa ostaaksesi

jos kävijä näkee yhden noista painikkeista etusivullasi, toisen luokkasivulla ja kolmannen tuotesivulla, vahvistusta ei ole.

pidä sen sijaan viestittely ja tyyli yhtenäisenä. Tässä hyvä esimerkki koru-ja asustemerkki MVMT: ltä.

sillä ei ole väliä, jos olet heidän silmälasit, kellot tai koruja sivulla. Tulet näkemään saman” SHOP NOW ” CTA tuotteilleen.

jokainen sivu noudattaa myös heidän verkkosivustonsa yleistä minimalistista, mustavalkoista muotoilua.

sovella tätä suunnitteluperiaatetta myös verkkosivustollesi.

se ylittää CTA-painikkeen. Ajatuksena on saada tällainen vahvistaminen mahdollisimman monella elementillä.

johdonmukaisuus kielessä, viestittelyssä ja muotoilussa vahvistaa brändi-identiteettiäsi ja jättää lähtemättömän vaikutuksen Vierailijoidesi mieliin.

navigoinnin yksinkertaistaminen

sivuston kävijän ei pitäisi olla vaikeaa löytää sivustoltasi etsimäänsä.

Laita itsesi heidän kenkiinsä. Miksi vierailet sivustolla? Miten suoritat tuon tehtävän? Ehkä haluat ostaa jotain, saada lisätietoja tai nähdä, mitä on tarjota. Oli syy mikä tahansa, jos vierailijat eivät saa sitä nopeasti selville, he lähtevät.

kilpailua on aivan liikaa. Käyttäjillä ei ole mitään syytä sietää kömpelöä verkkosivujen navigointia. Kaikki mitä heidän tarvitsee tehdä, on jättää sivustosi ja löytää mitä he tarvitsevat jossain muualla.

älä yritä keksiä pyörää uudelleen monimutkaisella rakenteella. Pysy vakiomuodossa.

esimerkiksi useimmat sivustot sijoittavat navigointivalikon vaakasuoraan jokaisen sivun yläreunaan. Jos ruokalistasi on jossain muualla, se saattaa hämmentää kävijöitäsi.

mitä vähemmän vaihtoehtoja valikossa on, sen parempi. Muuten ihmisten on liian vaikea löytää tarvitsemaansa. Tämä käsite tunnetaan Hickin lakina.

mitä enemmän vaihtoehtoja annat jollekin, sitä kauemmin kestää tehdä päätös. Siksi monimutkaiset mallit ja navigaatiot murskaavat muuntokurssisi.

tästä on olemassa kuuluisa kokeilu, jota kutsutaan hillotutkimukseksi, joka käsittelee valinnan paradoksia.

kokeilu toteutettiin paikallisessa ruokakaupassa. Kuluttajille esitettiin yhtenä päivänä 24 hillaa näytettä varten ja seuraavana päivänä kuusi hillaa.:

• suurempi näyttö ensimmäisenä päivänä houkutteli 60% shoppailijoista, mutta vain 3% heistä teki ostoksen.
• kuuden Hillan pienempi näyttö toisena päivänä houkutteli 40% ostajista, mutta 30% heistä teki ostoksen.

valintoja rajoittamalla käännytykset olivat kymmenkertaisia. Tätä samaa konseptia voidaan soveltaa verkkosivustosi navigointiin.

Poista turhat valikkovaihtoehdot. Esimerkiksi, sen sijaan, että ”Koti” – painiketta, vain käyttää sivuston logo linkki takaisin aloitusnäyttöön.

Katso Squaren kotisivut.

muotoilu on erittäin puhdas. Valikkovaihtoehdot ovat äärimmäisen rajalliset. Näin kävijöiden on helppo valita tarpeisiinsa sopiva valikoima.

huomaat, että ruudulla on minimaalista tekstiä, ja CTA on selkeä ja ilmeinen.

tämän tyyppinen muotoilu tekee verkkosivujen kävijöiden lähes mahdottomaksi eksyä tai hämmentyä suunnistaessaan.

Niille teistä, joilla on paljon vaihtoehtoja verkkosivustollanne, kuten verkkokauppa, voitte lisätä hakupalkin navigoinnin yksinkertaistamiseksi ilman monimutkaista valikkoa. Monet ohjelmistoyritykset laittavat ominaisuutensa ominaisuudet-välilehteen sen sijaan, että jokaisella ominaisuudella olisi oma välilehtensä.

optimoi suunnittelusi mobiililaitteille

mobiililaitteilla suurin osa maailmasta käyttää Internetiä. Tämä tarkoittaa, jos et ole optimoitu mobiili, sivustosi ei tule toimimaan hyvin.

Katso näitä tietoja hootsuitesta:

hakukoneet tunnistavat tämän ja palkitsevat mobiiliystävällisiä sivustoja. Tässä muutamia tilastoja lyödä pisteen kotiin:

• Google tietää, että 87 prosenttia älypuhelinten omistajista käyttää laitteitaan nettihaun suorittamiseen vähintään kerran päivässä.
• 58% kaikista Google-hauista tehdään mobiililaitteella
• tulos: 70% Googlen ensimmäisen sivun tuloksista on optimoitu mobiililaitteille.

Mobile SEO on tärkein asia, jonka voi tehdä sijoittuakseen hyvin Googlessa. Vakavasti.

jos sivusto ei näytä hyvältä älypuhelimella, ihmiset eivät halua jäädä paikalle. Niin, varmista, että sivustosi mallit ovat mobiiliystävällisiä.

mene syvemmälle: Haluatko oppia optimoimaan sivustosi mobiilikäyttöön? Tutustu täydellinen opas mobiili ystävällinen verkkosivuilla.

priorisoi SEO

kaiken sivustollasi tekemäsi täytyy kääntyä takaisin hakukoneoptimointiin.

eikä riitä, että vain lisätään avainsanoja sinne tänne. Se on sivuston laajuinen järjestelmä parantaa sisältöä ja säälimättömästi kohdistaminen tiettyihin aiheisiin rakentaa sivuston viranomaisen tällä alalla.

esimerkiksi verkkokauppasivuston aloitussivu haluaa keskittyä tiettyihin sivun elementteihin, kuten:

• käytettävyys. Kuinka helppoa se on kävijöitä käyttää ja navigoida.
• Mobile. Miten sivustosi näyttää ja toimii mobiililaitteella.
• avainsanojen optimointi. Sanoja ja lauseita, jotka haluat sijoitus.
• Sisäiset linkit. Kuinka usein linkität muille sivuille sivustossasi.
• Otsikko. Tämä on usein suurin teksti web-sivulla. Sellaisenaan se tekee suurimman osan raskaista nostoista aloitussivullasi.

luo XML-sivukartta. Tämä helpottaa hakukoneiden indeksoijien analysoida sivustosi sisältöä. Sivukartta näyttää botit sijainti sivuja sivustosi, kun sivu on viimeksi päivitetty, päivitystaajuus, ja suhde muihin sivuihin sivustosi.

kunnollinen sivukartta näyttää Googlelle, että sinulla ei ole päällekkäistä sisältöä, mikä voi vahingoittaa SEO-rankingiasi.

kun suunnittelet sivustoasi, on olemassa TON vähemmän ilmeisiä elementtejä, jotka tekijä osaksi ranking Google, liian.

olemme jo käyneet läpi muutamia asioita, joita voit parantaa itse sivulla. Mutta muita elementtejä ovat:

• Domain. URL on melko consequential google sijoitus. Avaintekijöitä ovat ottaa avainsanan verkkotunnuksen, kuinka vanha verkkotunnus on, ja mitä verkkotunnuksen laajennus on (esim .laadukkaita kuten .com,. net,. Gov,.org vs. ei-perinteiset laajennukset).
• alueen laatu. Sivustosi on oltava hyödyllinen kävijöitä. Avaintekijöitä ovat ”Tietoja meistä” – sivu, ”Ota meihin yhteyttä” – sivu, kuinka usein päivität verkkosivustoasi, kuinka helppoa on selata verkkosivustoasi, käytettävyysaika (kuinka usein verkkosivustosi kaatuu) ja SSL-varmenteet.
• käänteisiä. Tämä viittaa taajuuteen, johon muut verkkosivustot linkittävät sivustosi. Se on ratkaiseva tekijä ranking hyvin Google. Avaintekijöitä ovat linkittävien sivujen määrä, sinuun linkittävien verkkosivustojen laatu ja auktoriteetti, ankkuriteksti, jota he käyttävät linkittääkseen sinuun, ja ovatko nämä linkit peräisin .edu-tai .gov-verkkotunnuksista.

seuraa sivusi latausnopeutta

tiedän, mitä jotkut teistä ajattelevat. Mitä tekemistä sivun latausnopeudella on web-suunnittelun kanssa? Kaikki.

Toki latausajat liittyvät verkkosivustosi hostaussuunnitelmaan, palvelimeen, liikenteeseen ja sen kaltaisiin asioihin. Suunnitteluvalinnat voivat kuitenkin vaikuttaa myös latausaikoihin.

joka kerta, kun lisäät sivustoosi elementin, erityisesti kuvia, videoita ja muita monimutkaisia mediatiedostoja, latausaikasi voivat muuttua. Sellaisenaan se voi hidastaa HTTP-pyyntöjä.

hitaat lastausajat johtavat suuriin hylkäysprosentteihin. Et voi sivuuttaa tätä. Jos sivujen lataaminen kestää liian kauan, siitä tulee valtava ongelma.

lisäksi 25 prosenttia ihmisistä hylkää sivustot, joiden lataaminen kestää yli neljä sekuntia. Kyllä, neljä sekuntia. Siinä kaikki, tai menetät 25 jokaisesta 100 kävijästä. Useimmat kävijät odottavat sivun latautuvan kahdessa sekunnissa tai vähemmän.

Joten miten voit soveltaa tätä web-suunnitteluusi?

• Pienennä kuviesi tiedostokokoa
• Hyödynnä selaimen välimuistityökaluja
• vähennä HTTP-pyyntöjä
• Paranna TTFB: tä (ensimmäisen tavun aika)
• Minify ja yhdistä tiedostosi

verkossa on paljon työkaluja saatavilla auttaa sinua saavuttamaan nämä asiat. Esimerkiksi, tutustu WordPress Rocket plugin resurssina minifying ja yhdistämällä tiedostoja. Käytä Googlen Page Speed Insights-työkalua, jonka avulla voit seurata latausaikojasi aina, kun teet suunnittelumuutoksia verkkosivustollasi.

aja jatkuvasti A / B-testejä

kun on kyse verkkosivujen suunnittelusta, sitä ei voi vain asettaa ja unohtaa.

kuten aiemmin sanoin, mikään sivusto ei ole täydellinen. On aina tapoja, joilla voit parantaa suunnittelua.

siksi pitää tehdä A / B-testit. Näiden avulla voit tehdä säännöllisiä parannuksia sivustoosi ja testata elementtejä nähdäksesi, mikä toimii parhaiten ja mikä tärkeintä, mikä ei toimi lainkaan.

lähes jokainen osa sivuston suunnittelu voidaan testata. Voit esimerkiksi luoda kaksi eri aloitussivua, joilla on erilaiset Ctat, mutta jotka ovat muuten samat. Jos yksi aloitussivu toimii paremmin kuin muut, tiedät, että sen CTA on todennäköisesti saada työtä.

tässä muutamia nopeita ehdotuksia, joilla pääset alkuun oikeaan suuntaan:

• testaa CTA-nappisi sijainti
• testaa CTA-nappisi väri
• testaa CTA-kopio
• testaa aloitussivuilla käyttämäsi kuvat
• testaa tekstin sanamuodot näytöllä
• testaa navigointipalkin koko

vaihtoehtoja on niin paljon, että voisin puhua tästä koko päivän. Niille teistä, jotka eivät tunne A / B-testejä tai tarvitsevat apua, tutustu oppaaseen kaikesta, mitä sinun tarvitsee tietää ennen kuin aloitat A/B-testauksen.

johtopäätös

sanomalla, että verkkosivuston suunnittelu on tärkeää, olisi vähättelyä. Web design valintoja lopulta vaikuttaa onko sivusto on onnistunut.

• kaikkien verkkosivuja voi parantaa. Käytä tätä luetteloa oppaana resurssina, joka auttaa sinua tekemään näitä parannuksia.
• älä häkelty. En sano, että kaikkia näitä suunnitteluehdotuksia pitäisi toteuttaa yhdessä yössä, mutta jostain on aloitettava.
• En vetänyt näitä ideoita tyhjästä. Kaiken tämän listan takana on suunnitteluperiaatteisiin liittyvä tutkimus ja tilastot.

muista: jokainen sivusto on työn alla. Jos laitat työtä ja aina hienosäätää sivustosi, aiot parantaa reuna kilpailijoiden kanssa.

sillä ei ole väliä, onko sivustosi upouusi vai onko se ollut olemassa jo vuosikymmenen ajan. Nämä ovat web designin parhaita käytäntöjä, joita sinun on noudatettava vuonna 2021.