13 webdesign legjobb gyakorlatok 2021-re

manapság néhány perc alatt elindíthat egy weboldalt. De van egy különbség aközött, hogy egy weboldal él és optimalizált.

miért fontos a tervezés? Csak 0,05 másodpercbe telik, amíg az emberek véleményt alkotnak az Ön webhelyéről. Igen, ezt helyesen olvasta—50 milliszekundum, hogy valakit elfújjon vagy visszaverjen az Ön webhelye. Ennek a véleménynek a nagy része a tervezésből származik.

a webdesign hatással van a konverziókra, a hitelességre és végső soron a webhely sikerére. Egyetlen weboldal sem tökéletes, de a lehető legnagyobb mértékben optimalizálnia kell.

itt van valami, amit figyelembe kell venni: rossz tapasztalatok után a fogyasztók 88% – a valószínűleg nem tér vissza egy weboldalra. Ráadásul egy nemrégiben készült tanulmány megállapította, hogy az ügynökségek 77% – a szerint a rossz Weboldal-tervezés az ügyfelek legjelentősebb gyengesége.

alsó sor: Ha a webdesign nincs optimalizálva a felhasználói élményhez (UX), akkor ez káros lesz a sikerére. Ezért írtam ezt az útmutatót.

számos tényező jár a weboldal tervezésével. Ez a tizenhárom legfontosabb elem, amelyet 2021-ben prioritásként kell kezelni. Ha követi ezeket a bevált gyakorlatokat, webhelye teljesítménye drasztikusan javulni fog.

használja ezt az ellenőrző listát, hogy megbizonyosodjon arról, hogy van egy nyerő design

1. minimalizálja a szöveget
2. mutasd, ne mondd
3. használjon rövid mondatokat
4. próbáljon rövidebb bekezdéseket
5. válasszon egy színsémát, amely megfelel
6. tegye egyértelművé a CTA-t
7. erősítse műveletek ismerete
8. egyszerűsítse a navigációs
9. optimalizálja a tervezési mobil
10. rangsorolása SEO
11. figyelemmel kíséri az oldal betöltési sebesség
12. folyamatosan futtassa a/B tesztek

minimalizálása szöveg

ne töltse ki az oldalakat hatalmas blokkokkal SMS.

nem a blogbejegyzésekről beszélek, amelyeknek néha mélyebbre kell menniük (mint ez!). Az Ön weboldalairól beszélek (pl. honlap, céloldal). Itt tartsa a szöveget minimálisra.

mindent el akarsz mondani a weboldalad látogatóinak rólad, a cégedről, a márkádról és a termékeidről. De meg kell tanulnod, hogyan kell elmondani ezt a történetet néhány mondatban vagy—még jobb— néhány szóban.

Show, don ‘ t tell

a látványok nem csak segítenek az írott tartalom felbomlásában, de mélyebb magyarázatot is adhatnak. Mutassa meg látogatóinak, hogy miről szól. Rövidebb idő alatt többet fognak megérteni.

Harry termékoldala mindkét első két tervezési alapelvet testesíti meg:

tegyük fel például, hogy webhelye borotvákat, pengéket, borotvakrémet és egyéb borotválkozási termékeket árusít férfiak számára.

előfizetéses üzleti modell alapján működik, és ezeket a termékeket havonta szállítja ügyfeleinek. A borotvák kialakítása nagyon szép — faragott keményfából készülnek, és elég szépek ahhoz, hogy ajándékba adják.

ahelyett, hogy belemenne a kezdőlapján szereplő összes részletbe, egyszerűen készíthet egy fényképet ezekről a termékekről, olyan szöveggel, amely valami ilyesmit mond: “házhoz szállítva.”Az üzenetet mindössze négy szóban kapja meg.

persze, annál részletesebben is belemehet, minél mélyebbre kerül a látogató az oldalaiba, de nem szükséges hosszadalmas szöveges leírás.

rövid mondatok használata

a rövid mondatok könnyebben olvashatók.

ne bombázd a látogatókat nagy szövegdarabokkal. Nem fogják tudni, hol kezdjék el az olvasást, és nem fogják tudni megemészteni a tartalmát.

keverjük össze. Ha hosszú mondatra van szüksége, kövesse egy rövid mondattal. A változatosság segít.

próbáljon rövidebb bekezdéseket

használja a bekezdéstöréseket előnyére. Nem baj, ha hosszabb bekezdéseket írok, de szeretem a honlap bekezdéseit néhány mondatban tartani.

az is fontos, hogy ne vigyük túlzásba. Túl sok jó dolog, valójában rossz dolog.

Kezdje az egyes bekezdéseket új információkkal, így ha valaki görget, gyorsan meg tudja mondani, hogy el kell-e olvasnia az adott bekezdést.

a felesleges szöveg eltávolítása az oldalakon csökkenti a rendetlenséget, és nagyobb hangsúlyt fektet a cselekvésre.

ha a CTA önmagában kiemelkedik a saját bekezdésében, akkor hatásosabb, mint egy csomó szövegbe temetni.

ebben a helyzetben nagyon hasznos eszköz a golyók. Bekezdések hozzáadása és hosszú formátumú írás helyett fontolja meg a listák használatát. Ezekben a listákban használjon felsoroláspontokat.

a tanulmányok azt mutatják, hogy több ember fogja megnézni a listákat felsorolásokkal, mint más formátumok. Ez azért van, mert segítenek javítani az oldal szkennelhetőségét, és lehetővé teszik, hogy kiemelje a legfontosabb pontokat.

válasszon olyan színsémát, amely megfelel a márkaépítési stratégiájának

a webhelyén választott szín sokkal fontosabb, mint gondolná.

a látogatók kevesebb, mint 90 másodperc alatt ítélik meg webhelyét. Ennek nagy része a választott színek eredménye.

a webhely színsémájának kiválasztásának legjobb módja a márkajelzés. Lásd a logóját. A webhely színei illeszkednek-e a márka imázsához?

íme egy példa. Gondolj a Starbucksra.

amikor meghallja ezt a márkanevet, biztos vagyok benne, hogy van egy kép a fejében. Lehet, hogy ez a logó, egy jel vagy egy üzlet helye.

társít-e bármilyen színt ezzel a névvel? Most nézzük meg a weboldalukat.

nem meglepő, hogy zöld színsémával mentek.

ez a design választás illeszkedik a logójukhoz és a márkaarculathoz, ami megerősíti azt, amit a fogyasztók már társítanak a márkához. A dolgok következetességének megőrzésével nincs zavar. Furcsa lenne, ha meglátogatta ezt a weboldalt, és a színek sárga és piros voltak. Ennek semmi köze a márkához.

a megerősítésről részletesebben fogunk beszélni, ahogy folytatjuk.

tegye egyértelművé a CTA-t

a CTA-kat nem szabad eltemetni. Nagynak, merésznek és hatalmasnak kell lenniük, és egyértelműen ki kell tűnniük, mivel a látogatóknak a következő lépéseket kell tenniük.

mégis, a legtöbb webhelyen nincs olyan CTA gomb, amelyet kevesebb, mint három másodperc alatt észrevehet. Jó esély van arra, hogy beleesik abba a csoportba, amely hosszabb ideig tart. Nem ebben a kategóriában akarsz lenni.

hatékony CTA gomb nélkül nem hajthat végre konverziókat.

szinte soha nem látok CTA-t egy vállalkozás belső oldalain (azok az oldalak, amelyek elmagyarázzák, mit csinál a márkád és mit kínálsz). Ez egy nagy tervezési hiba. Nem várhatja el, hogy a látogatók visszatérjenek a kezdőlapra a konvertáláshoz.

vessen egy pillantást erre a Lakmuszból származó CTA-ra.

Nézd, milyen egyszerű ez a design. A képernyőn minimális szöveg van, így az üzenet egyértelmű.

ennek eredményeként kiemelkedik a CTA “ingyenes regisztráció”. Valójában a lakmusz még a képernyőn is egynél több helyre tette.

a CTA elhelyezésének helye oldalanként eltérő. Például a blogbejegyzéseknek felül kell lenniük a CTA-val, hogy az olvasók gyorsan és alul is láthassák, miután elolvasták a bejegyzést.

menj mélyebbre: szeretné optimalizálni a CTA-kat? Itt vannak 11 a cselekvésre való felhívás javításának módjai.

erősítse meg a műveleteket ismerősséggel

ha az üzenet ugyanaz, a CTA-nak minden egyes oldalon azonosnak kell lennie.

gondoljon arra, hogyan navigálnak az emberek a webhelyén. Még akkor is, ha egy bizonyos folyamatot állít be, nem mindenki leszáll egy oldalra, és másodpercek alatt konvertál. Lehet, hogy először egy kicsit böngésznek.

tegyük fel például, hogy van e-kereskedelmi webhelye. Nem szabad megváltoztatnia a CTA gombot oldalról oldalra, ami így néz ki:

• Kezdőlap: Pénztár most
• Kategória oldal: Vedd meg még ma
• Termék oldal: Kattintson a vásárláshoz

ha egy látogató látja az egyik gombot a Kezdőlapon, a másikat egy kategóriaoldalon, a harmadikat pedig egy termékoldalon, akkor nincs megerősítés.

ehelyett tartsa konzisztens az üzenetküldést és a stílust. Íme egy jó példa az MVMT ékszer-és kiegészítők márkájából.

nem számít, ha a szemüvegükön vagy, órák, vagy ékszer oldal. Ugyanazt a “SHOP NOW” CTA-t fogja látni a termékeikért.

minden oldal összhangban van a weboldal Általános minimalista, fekete-fehér kialakításával.

alkalmazza ezt a tervezési elvet a webhelyén is.

túlmutat a CTA gombon. Az ötlet az, hogy ez a fajta megerősítés a lehető legtöbb elemmel rendelkezzen.

a nyelv, az üzenetküldés és a dizájn következetessége megerősíti a márka identitását, és maradandó benyomást hagy a látogatók fejében.

egyszerűsítse a navigációt

a webhely látogatóinak nem lehet nehéz megtalálni azt, amit keresnek az Ön webhelyén.

Tedd magad a cipőjükbe. Miért látogatja meg a weboldalt? Hogyan végzi el ezt a feladatot? Lehet, hogy vásárolni szeretne valamit, további információkat szeretne kapni, vagy megnézheti, mit kínál. Bármi is legyen az oka, ha a látogatók nem tudják gyorsan kitalálni, akkor elmennek.

túl sok a verseny odakint. A felhasználóknak nincs okuk elviselni a nehézkes webhely-navigációt. Csak annyit kell tennie, hogy elhagyja a webhelyet, és valahol máshol találja meg, amire szüksége van.

ne próbálja meg újra feltalálni a kereket összetett kialakítással. Ragaszkodjon a szabványos formátumhoz.

például a legtöbb webhely vízszintesen helyezi el a navigációs menüt az egyes oldalak tetején. Ha a menüje valahol máshol van, megzavarhatja a látogatókat.

minél kevesebb lehetőség van a menüben, annál jobb. Ellenkező esetben túl nehéz lesz az embereknek megtalálni azt, amire szükségük van. Ezt a fogalmat Hick törvényének nevezik.

minél több lehetőséget ad valakinek, annál hosszabb ideig tart a döntés meghozatala. Ez az oka annak, hogy az összetett tervek és navigációk összetörik a konverziós arányokat.

van egy híres kísérlet erről, a továbbiakban: a jam tanulmány, amely a választás paradoxonját tárgyalja.

a kísérletet egy helyi élelmiszerboltban végezték. A fogyasztóknak egy napon 24 lekvárt, másnap pedig hat lekvárt mutattak be:

• a nagyobb kijelző az első napon a vásárlók 60% – át vonzotta, de ezeknek az embereknek csak 3% – a vásárolt.
• a hat lekvár kisebb kijelzője a második napon a vásárlók 40% – át vonzotta, de 30% – uk vásárolt.

a választási lehetőségek korlátozásával a konverziók tízszer magasabbak voltak. Ugyanez a koncepció alkalmazható a webhely navigációjára is.

távolítsa el a felesleges menüopciókat. Például a “Kezdőlap” gomb helyett csak a webhely logójával hivatkozhat vissza a kezdőképernyőre.

tekintse meg a Square honlapját.

a design szuper tiszta. A menüopciók rendkívül korlátozottak. Ez megkönnyíti a látogatók számára az igényeiknek megfelelő választás kiválasztását.

észre fogod venni, hogy minimális szöveg van a képernyőn, és a CTA világos és nyilvánvaló.

ez a fajta kialakítás szinte lehetetlenné teszi a weboldal látogatói számára, hogy eltévedjenek vagy összezavarodjanak navigálás közben.

azok számára, akiknek rengeteg lehetősége van a webhelyén, például egy e-kereskedelmi boltban, hozzáadhat egy keresősávot a navigációs folyamat egyszerűsítéséhez bonyolult menü használata nélkül. Sok szoftvercég a funkciókat egy funkciók fülre helyezi, nem pedig az egyes funkciókhoz külön lapot.

optimalizálja a mobil eszközök tervezését

a mobil az, ahogyan a világ többsége hozzáfér az internethez. Ez azt jelenti, hogy ha nem optimalizált a mobilra, akkor a webhelye nem fog jól teljesíteni.

nézze meg ezeket az adatokat a Hootsuite-tól:

a keresőmotorok felismerik ezt, és jutalmazzák a mobilbarát webhelyeket. Itt van még néhány statisztika, hogy elérje a pontot otthon:

• a Google tudja, hogy az okostelefon-tulajdonosok 87% – a használja eszközeit internetes keresés futtatására legalább naponta egyszer.
• az összes Google-keresés 58% – a mobileszközről történik
• az eredmény: a Google első oldalainak 70% – a mobileszközökre van optimalizálva.

mobil SEO a legfontosabb dolog, amit tehetünk annak érdekében, hogy rangsorban is a Google. Komolyan.

ha webhelye nem néz ki jól okostelefonon, az emberek nem akarnak maradni. Tehát győződjön meg arról, hogy webhelye mobilbarát.

menj mélyebbre: szeretné megtanulni, hogyan optimalizálhatja webhelyét mobilra? Nézze meg a mobilbarát weboldal teljes útmutatóját.

rangsorolja a SEO-t

minden, amit a webhelyén tesz, vissza kell térnie a SEO-hoz.

és nem elég csak kulcsszavakat hozzáadni ide-oda. Ez egy weboldal-szintű rendszer, amely javítja a tartalmat, és könyörtelenül megcélozza a konkrét témákat, hogy felépítse webhelyének tekintélyét ezen a területen.

például egy e-kereskedelmi webhely céloldala bizonyos oldalelemekre szeretne összpontosítani, például:

• használhatóság. Mennyire könnyű a látogatók számára a navigálás és a használat.
• mobil. Hogyan néz ki és teljesít a webhelye egy mobil eszközön.
• kulcsszó optimalizálás. Azok a szavak és kifejezések, amelyeket rangsorolni szeretne.
• belső linkek. Milyen gyakran hivatkozik a webhely más oldalaira.
• főcím. Ez gyakran a legnagyobb szöveg egy weboldalon. Mint ilyen, a céloldal nehéz emelésének nagy részét elvégzi.

hozzon létre egy XML webhelytérképet. Ez megkönnyíti a keresőmotor-robotok számára a webhely tartalmának elemzését. A webhelytérkép megmutatja a botoknak az oldalak helyét a webhelyén, az oldal utolsó frissítésének időpontját, a frissítés gyakoriságát, valamint a webhely más oldalaival való kapcsolatot.

a megfelelő webhelytérkép azt mutatja, hogy a Google nem rendelkezik ismétlődő tartalommal, ami károsíthatja a SEO rangsorolását.

a webhely tervezésekor rengeteg kevésbé nyilvánvaló elem van, amelyek figyelembe veszik a rangsorolást a Google-on is.

már áttekintettünk néhány szempontot, amelyeket javíthat magán az oldalon. De más elemek a következők:

• tartomány. Az URL elég következményes a google rangsorában. A kulcstényezők közé tartozik, hogy a kulcsszó szerepel a domainben, hány éves a domain, és mi a domain kiterjesztése (például kiváló minőségű, például. com,. net, .gov,.org versus nem hagyományos kiterjesztések).
• webhely minősége. Webhelyének hasznosnak kell lennie a látogatók számára. A legfontosabb tényezők közé tartozik a ‘Rólunk’ oldal, a ‘kapcsolat’ oldal, milyen gyakran frissíti webhelyét, milyen könnyű navigálni a webhelyén, üzemidő (milyen gyakran összeomlik webhelye) és SSL tanúsítványok.
• linkek. Ez arra a gyakoriságra vonatkozik, amelyre az Ön webhelyét más webhelyek összekapcsolják. Ez döntő tényező a rangsorban is a Google. A legfontosabb tényezők közé tartozik a linkelő oldalak száma, az Önhöz linkelő webhelyek minősége és jogosultsága, a horgonyszöveg, amelyet az Ön linkelésére használnak, és hogy ezek a linkek .edu vagy .gov domainekből származnak-e vagy sem.

figyelje az oldal betöltési sebességét

tudom, mire gondolnak néhányan. Mi köze van az oldal betöltési sebességének a webdesignhoz? Mindent.

persze, a betöltési idők a webhely hosting tervéhez, a szerverhez, a forgalomhoz és az ilyen jellegű dolgokhoz kapcsolódnak. A tervezési döntések azonban befolyásolhatják a betöltési időket is.

minden alkalommal, amikor hozzáad egy elemet a webhelyéhez, különösen képeket, videókat és más összetett médiafájlokat, ez befolyásolhatja a betöltési időket. Mint ilyen, lelassíthatja a HTTP kéréseket.

a lassú betöltési idő magas elhagyási arányhoz vezet. Ezt nem hagyhatod figyelmen kívül. Ha az oldalak betöltése túl sokáig tart, az hatalmas probléma lesz.

továbbá az emberek 25% – A elhagyja azokat a webhelyeket, amelyek betöltése több mint négy másodpercet vesz igénybe. Igen, négy másodperc. Ez minden, amid van, vagy 25-öt veszítesz minden 100 látogatóból. A legtöbb látogató arra számít, hogy egy oldal legfeljebb két másodperc alatt betöltődik.

szóval hogyan lehet alkalmazni ezt a web design?

• csökkentse a képek fájlméretét
• használja ki a böngésző gyorsítótárazási eszközeit
• csökkentse a HTTP kéréseket
• javítsa a TTFB-t (az első bájtig eltelt idő)
• kicsinyítse és kombinálja a fájlokat

rengeteg eszköz áll rendelkezésre az interneten, hogy segít elérni ezeket a dolgokat. Például nézze meg a WordPress Rocket plugint, mint erőforrást a fájlok tömörítéséhez és kombinálásához. Használja a Google Page Speed Insights eszközét, amely segít nyomon követni a betöltési időket, amikor megváltoztatja a webhely tervezését.

folyamatosan futtasson A/B teszteket

amikor a weboldal tervezéséről van szó, nem lehet csak úgy beállítani és elfelejteni.

mint korábban mondtam, egyetlen weboldal sem tökéletes. Mindig vannak olyan módon, hogy javítsa a design.

ezért kell futtatnia az A/B teszteket. Ezek lehetővé teszik, hogy rendszeresen javítson a webhelyén, és tesztelje az elemeket, hogy lássa, mi működik a legjobban, és ami még fontosabb, mi nem működik egyáltalán.

a webhely tervezésének szinte minden eleme tesztelhető. Létrehozhat például két különböző céloldalt, amelyek különböző CTA-kkal rendelkeznek, de egyébként azonosak. Ha az egyik céloldal jobban teljesít, mint a másik, akkor tudni fogja, hogy a CTA valószínűleg elvégzi a munkát.

íme néhány gyors javaslat a helyes irányba való induláshoz:

• tesztelje a CTA gomb helyét
• tesztelje a CTA gomb színét
• tesztelje a CTA másolatot
• tesztelje a céloldalakon használt képeket
• tesztelje a szöveg szövegváltozatait a képernyőn
• tesztelje a navigációs sáv méretét

olyan sok lehetőség van, hogy egész nap erről beszélhetnék. Azok számára, akik nem ismerik az A/B teszteket, vagy segítségre van szükségük, nézze meg az útmutatómat mindenről, amit tudnia kell, mielőtt elkezdené az A / B tesztelést.

következtetés

azt mondani, hogy egy weboldal tervezése fontos, alulbecslés lenne. A webdesign választása végső soron hatással lesz arra, hogy webhelye sikeres-e vagy sem.

• mindenki honlapján lehet javítani. Használja ezt a listát útmutatóként erőforrásként, hogy segítsen ezen fejlesztések végrehajtásában.
• nem kap túlterheltek. Nem azt mondom, hogy ezeket a tervezési javaslatokat egyik napról a másikra végre kell hajtania, de valahol el kell kezdenie.
• ezeket az ötleteket nem a semmiből húztam elő. A listán szereplő mindent a tervezési elvekkel kapcsolatos kutatások és statisztikák támasztják alá.

ne feledje: minden weboldal egy folyamatban lévő munka. Ha a munkát, és mindig finomhangolása a honlapon, fogsz javítani a szélén a versenytársak.

nem számít, hogy webhelye vadonatúj-e, vagy már egy évtizede létezik. Ezek a webdesign legjobb gyakorlatai, amelyeket 2021-ben be kell tartania.