A gyakori weboldalhibák közé tartozik a rossz mobilos használhatóság, a lassú vagy akadozó működés, az átláthatatlan szerkezet, a bizonytalan ajánlat és a hibás keresési vagy adatkezelési beállítás. Először azt javítsd, ami akadályozza a látogatót a megértésben és a következő lépésben. A hibát saját mérésből és működési tesztből azonosítsd; egy általános százalék vagy dizájntrend önmagában nem diagnózis.
Ezeket most 9 kategóriába szedtem össze neked.
A korábbi videós változatot is megnézheted. A változó technikai tudnivalókhoz és a pontosított állításokhoz a frissített szöveget is olvasd el:
Nézd meg itt:
És most nézzük, melyek a tipikus weboldal hibák:
1. Weboldal hiba: Nem reszponzív, nem mobilbarát az oldal
A mobilos használhatóságot a saját oldaladon ellenőrizd. Az eszközarányt a saját analitikád mutathatja meg; egy általános, forrás nélküli 50–70%-os arány nem írja le biztosan a közönségedet. Az oldal kis kijelzőn is legyen olvasható és végig használható.
Nézd meg, olvasható-e a szöveg nagyítás nélkül, működik-e a menü, elférnek-e a gombok, és kitölthető-e az űrlap. Egy hibás mobilos felület akadályozhatja az érdeklődést vagy a vásárlást, de a lemorzsolódást a saját folyamatodban kell vizsgálni.
Legyen mobilra optimalizált, reszponzív a weboldalad.
2. Weboldal hiba: Túl lassú weboldal
A lassú megjelenés és az akadozó működés is megnehezítheti a használatot. Külön vizsgáld, mikor látszik a fő tartalom, mikor reagálnak a vezérlők, és elmozdulnak-e az elemek betöltés közben.
Nincs olyan általános hárommásodperces határ, amely után minden látogató biztosan távozik. A saját oldalt több eszközön és reális hálózati körülmények között mérd; a laboreredményt és a valódi látogatói adatot külön kezeld.
A Google Core Web Vitals útmutatója a fő tartalom megjelenését LCP-vel, a reakcióidőt INP-vel, a vizuális stabilitást CLS-sel jellemzi. A „jó” küszöbök LCP ≤ 2,5 másodperc, INP ≤ 200 ms, CLS ≤ 0,1, a látogatások 75. percentilisén, eszköztípusonként vizsgálva. Ezek külön mutatók, nem egyenlők a teljes oldal betöltési idejével vagy egy bevételígérettel.
Nagyon fontos, különösen mobilon, hogy gyorsan töltsön be az oldal.
3. Weboldal hiba: Átláthatatlan oldal
Vizuális hierarchia hiánya, nem tudni mi a címsor
Egy weboldalt a vizuális hierarchia hiánya tudja átláthatatlanná tenni. Ez elsősorban a címsorokban szokott jelentkezni. Amikor is a címsorok nem különülnek el a sima folyószövegtől. Példuául alig nagyobbak, alig másabbak, és igazából ugyanolyanok, mint a folyószöveg.
A címsoraid mindenféleképpen jól különüljenek el!
Ehhez a címsoraid legyenek…
- a címsor szerepéhez illő, jól olvasható betűtípus,
- a háttérhez képest jól olvasható szín,
- félkövérek,
- nagyobb méretűek
Ezekből következetes hierarchiát alakíts ki. Nem szükséges minden címsorhoz eltérő betűtípus vagy szín; a vizuális megjelenés mellett a HTML címsorszintjei is tükrözzék a szerkezetet.
Hagyj megfelelő teret mind a címsor előtt, mind a címsor után. Ezekkel tudod megmutatni azt, hogy ez egy felsőbbrendű mondat, egy felsőbbrendű szöveg.
Sokan először átfutják az oldalt, ezért a címsorokból derüljön ki a lényeg. Az itt korábban szereplő 90%-os arányra nincs igazolt, minden weboldalra érvényes bizonyíték; ne ebből tervezz.
Olvashatatlan betűtípus és betűméret
Átláthatatlanná tudja tenni a weboldalt az olvashatatlan betűtípus és az olvashatatlan betűméret is.
Tehát egyrészt, hogyha túl kicsik a betűk.
A 16–18 pixeles folyószöveg lehet tervezési kiindulópont, de nem minden betűtípusra és helyzetre érvényes szabály. A tényleges olvashatóságot, a sortávolságot, a kontrasztot és a nagyíthatóságot együtt ellenőrizd.
A betűtípus a folyószövegnél rendkívül fontos.
Folyószövegnél semmiféleképpen ne használj kacifántos, díszes betűtípusokat, mert olvashatatlanná teszi a szöveget!
A címsor is maradjon olvasható. Díszes betűtípust akkor válassz, ha az adott szöveggel, mobilon és nagyításkor is működik. Nincs általános, öt szónál húzott olvashatósági határ.
White space (negatív területek) hiánya
Az egyik leggyakoribb hibaként szokott jelentkezni, hogy egyszerűen nincsenek az oldalon white space-ek, azaz negatív terek (üres területek).
Az üres terület az, ami mondjuk
- egy blokkon belül van, a blokk tetejétől a címsorig,
- vagy a blokk alján a szöveg végéig,
- vagy az alsó kép aljáig,
- vagy ami a kép körül van, a kép és a szöveg közötti terület,
- a szöveg és a monitor/képernyő széle közötti terület.
Tehát azok a területek, amiken nincsen semmilyen grafikai vagy szöveges vagy egyéb elem, ezek a white space-ek.
Hagyj elegendő üres területet a weboldal elemei között!
Az üres tér az összetartozó elemek csoportosítását és az olvasási sorrendet segítse. Túl nagy térköz is szétszakíthat egy gondolatot, vagy fölöslegesen messzire tolhatja az űrlapot és a következő lépést.
A térközöket blokkon belül és blokkok között is tudatosan használd. Több kijelzőméreten nézd meg, hogy egyértelmű marad-e, melyik cím melyik szöveghez és gombhoz tartozik.
Túl hosszú mondatok és bekezdések
A túl hosszú mondatok és rendezetlen bekezdések megnehezíthetik az olvasást. A célközönséged számára ismerős nyelven írj, a szükséges szakkifejezéseket pedig magyarázd meg.
Rövid mondatokat és rövid bekezdéseket használj!
Egy bekezdés lehetőleg egy gondolatot fejtsen ki. A hosszát a mondanivaló és az olvashatóság alapján válaszd meg; a két-három mondat jó kiindulópont lehet, nem kötelező darabszám. Felsorolást ott használj, ahol valóban összehasonlítható pontokat sorolsz.
Ezek is mind segítik a weboldal átláthatóságát. Amennyiben tényleg szöveg szöveg hátán van, akkor ott mindenféleképpen érdemes képi elemeket alkalmazni, hogy egy kicsit meg tudjon pihenni a szem.
Viszont túlzásba sem érdemes vinni a képi elemeket. Nagyon fontos, hogy minden képi elemnek meglegyen a maga szerepe egy weboldalon. És ha ez éppen az, hogy egyáltalán megtöri a szöveget és meg tudjon pihenni a szem, akkor az a szerepe ennek a képnek.
A weboldalt átláthatatlanná teszi a tagolatlanság.
Tagold a szöveget listákkal, rövidebb bekezdésekkel, mondatokkal, képekkel!
Átláthatatlanná teszi a weboldalt a színorgia is, amikor túl sok színt használunk.
Alakíts ki következetes színrendszert a hátterekhez, szövegekhez és fontos vezérlőkhöz. A két-három hangsúlyszín tervezési segítség lehet, de a kontraszt és a szerepek következetessége fontosabb egy rögzített színszámnál.
Illetve lehet ezeknek finoman alkalmazni az árnyalatait.
Használhatod a feketét-fehéret és annak árnyalatait (a szürke ötven árnyalatát :)). Viszont az egyéb színeket, azt ne vidd túlzásba.
Ha fotók, vagy olyan grafikai elemek vannak, amik egyszerűen színesek, az nem probléma.
Csak az, amikor mondjuk a címsor az piros, az alcím a zöld, a szöveg meg sötétkék, aztán a következő címsor az rózsaszín, utána a szöveg az piros, utána megint valami hupilila. Így semmiféleképpen ne csináld!
A címsorok legyenek ugyanolyan színűek. Tehát ha a kék az elsődleges színed, akkor mindig kéket használj, vagy ha mondjuk éppen kék hátterű a blokkod, akkor ott használhatod a fehér színt a címsorban. De ne legyen az, hogy az egyik címsor kék, a másik zöld, a harmadik piros, a negyedik sárga. Konzekvens legyen, ez a lényeg!
A hasonló elemek mindig hasonló stílusban legyenek megjelenítve!
Ami még átláthatatlanná teszi a weboldalakat az az, hogy egyszerűen túl sok minden van egy képernyőn. Erről írtam részletesebben egy korábbi blogbejegyzésben, érdemes elolvasnod azt a blogbejegyzést is.
Az adott képernyőn a feladathoz szükséges elemek legyenek könnyen áttekinthetők.
Az egyszerűség nem azt jelenti, hogy minél kevesebb információ maradjon. A döntéshez szükséges részleteket jól tagoltan, az összetartozó elemeket együtt mutasd meg.
4. Weboldal hiba: A vásárló helyett a cégről vagy a termékről szól az oldal
Nagyon gyakori, hogy a cégről, a vállalkozásról, a vállalkozóról, illetve a termékről szól, és nem pedig a potenciális vásárlóról. Sokan arról írnak, hogy mit csinálnak, mióta vannak a piacon, milyen minőségi terméket árulnak… De nagyon kevés szó esik a vásárlóról. Arról, hogy „Neked kedves weboldalt böngésző, milyen előnyeid származnak ebből? Mit találsz itt, milyen problémádra találsz itt megoldást, milyen boldogsági állapotba tudlak téged elrepíteni.”
A vállalkozásodról szóló tényeknek is van helyük: az azonosítható szolgáltató, a szakmai háttér és az ellenőrizhető referenciák hitelesítik az ajánlatot. Ezeket kapcsold ahhoz, miért fontosak a leendő ügyfél számára.
Próbáld meg a weboldalad szövegezésében minél inkább a potenciális célcsoportodat, a potenciális vevődet előtérbe helyezni.
Őróla beszélj, az ő problémáiról, az ő vágyairól, az ő megoldásáról, és hogyan segít neki ez az egész? Mit talál itt? Mivel lesz több? Ezekről próbálj írni a weboldalon, és ilyen irányból közelíts meg mindent, legyen az egy egyszerű termékleírás, legyen az tényleg bármi a weboldalon. A lényeg, hogy gondold át, hogy hogyan lehetne a jelenlegi szövegedet egy ilyen szemüvegen keresztül átfogalmazni.
5. Weboldal hiba: Keresőoptimalizálás hiánya
A SEO ellenőrzését ne egyetlen mezőre szűkítsd. Vizsgáld az oldal elérhetőségét, indexelhetőségét, a helyes canonicalt, a tartalom és a keresési szándék kapcsolatát, valamint a belső hivatkozásokat is.
A meta description az oldal rövid összefoglalója lehet. Hasznos egyedi leírást adni, de a Google nem köteles pontosan ezt megjeleníteni a találat alatt.
A Google találati leírásokról szóló útmutatója szerint a snippet a tartalomból is készülhet, és keresésenként eltérhet. Nem általános WordPress-szabály, hogy mindig az első két mondat vagy 150 karakter jelenik meg. WordPressnél a téma és a SEO-bővítmény beállításait is ellenőrizd.
A leírás pontosan foglalja össze az adott oldal hasznát. Ne csak kulcsszót sorolj, és ne ígérj többet annál, mint amit az olvasó a kattintás után tényleg megtalál.
Legyen a weboldaladnak keresőoptimalizált meta description-je.
Az URL legyen érthető és következetes. A Google URL-útmutatója leíró felépítést javasol; a puszta rövidségből nem következik jobb helyezés. Egy működő címet ne változtass meg csak azért, hogy néhány karakterrel rövidebb legyen.
Használj érthető URL-eket; címváltozásnál az átirányítást és a belső linkeket is tervezd meg.
6. Weboldal hiba: Távolságtartó szöveg
A megszólítás és a hangnem akkor működik jól, ha illik a célközönségedhez, az ajánlatodhoz és a márkádhoz.
Én ezen a blogon tegeződöm, mert közvetlenül szeretnék beszélni hozzád. Más vállalkozásnál a következetes, világos magázódás is jó választás lehet. Egyik forma sem ad önmagában garantált bizalmi vagy konverziós előnyt.
Ha tegeződést választasz, maradj következetes a címsorokban, a gombokon, az űrlapokban és a visszaigazolásokban is. Ugyanez igaz a magázódásra.
A célközönséghez illő, következetes hangnemben írj!
A közvetlenséghez nem kell erőltetett szleng. Pontos, természetes mondatokkal mondd el, miben segítesz és mi lesz a következő lépés.
Legyen azonosítható, ki áll a szolgáltatás mögött. Az elérhetőség, a valós szakmai háttér és a munkában betöltött szerep többet mond egy általános „szakértő csapat” jelzőnél.
Vállald fel az arcodat, mutasd meg magad!
Egy valós fotó és egy rövid, ide illő bemutatkozás segíthet megismerni a szolgáltatót. Ügyfélnevet, végzettséget, tapasztalatot és eredményt csak pontos, ellenőrizhető háttérrel állíts; fiktív szakértőt ne készíts a bizalom kedvéért.
Nekem is a rólam oldal tényleg szinte magánjellegű az egész. A fél életutam megtalálható benne, és ez segíti azt, hogy tudjanak kapcsolódni az emberek, hogy ne egy vadidegent vagy egy arctalan valamit lássanak a weboldalamon, hanem egy élő hús-vér embert, aki ugyanolyan, mint az az ember, aki a monitor túloldalán ül.
A személyes bemutatkozás az átláthatóság egyik eszköze. Nem helyettesíti az ajánlat pontos feltételeit, a bizonyítékokat vagy a működő ügyfélfolyamatot.
A munkád kulisszáit is megmutathatod, ha azok érdemben segítenek megérteni, hogyan dolgozol. Ügyféladatot vagy zárt munkafelületet csak a szükséges engedéllyel ossz meg.
7. Weboldal hiba: Unalmas weboldal
Bizonyára te is számtalanszor találkoztál már olyan honlapokkal, amelyen úgy indul az egész, hogy „Üdvözöljük honlapunkon!”
Az „Üdvözöljük honlapunkon!” önmagában keveset mond arról, miben segítesz. A nyitó szöveg inkább az ajánlatot, a célközönséget és a következő lépést tegye érthetővé.
Egy weboldalnál a legeslegfontosabb elem az a főcímsor, ami egy aloldalon, a legelső mondat. Ez az elem az, aminek meg kell ragadnia az olvasó figyelmét és ennek az egy mondatnak vagy egy kifejezésnek el kell érnie azt, hogy a látogató tovább olvassa az oldalt.
Éppen ezért ennek az első mondatnak nem annak kell lenni, hogy „Üdvözöljük a honlapunkon!”
A főcím röviden, pontosan mondja el, kinek miben segít az ajánlat. Nincs minden oldalra érvényes öt-tíz szavas kötelező terjedelem.
Egy olyan egyszerű, rövid, lényegretörő mondatnak, ami pontosan megmutatja, hogy mi a te terméked, szolgáltatásod, és hova juttatja el a potenciális vásárlót, milyen ígérettel tudsz szolgálni az ő számára.
Az elavultnak ható megjelenést érdemes megvizsgálni, de a stílus kora önmagában nem bizonyítja a vállalkozás szakmai minőségét. Az olvashatóságot, a működést, a friss adatokat és a látogatók feladatainak teljesülését ellenőrizd.
A fontos tartalmat és funkciókat változáskor, illetve rendszeres karbantartáskor vizsgáld felül. Egy öt évre rögzített várakozás nem alkalmas hibás űrlap, elavult ajánlat vagy biztonsági frissítés kezelésére.
A felülvizsgálatot a használhatóságra, a működésre és a valós adatokra építsd!
A sok információt világos szerkezettel kell kezelni. Oldalsáv, felső menü vagy más navigáció is működhet, ha a látogató könnyen megtalálja, amit keres.
A bal oldali menü önmagában nem elavult, a felső menü pedig önmagában nem jó. A szerkezetet az oldalak számához, a feladatokhoz és a mobilos használathoz igazítsd.
Webáruházban például a kategóriák és szűrők lehetnek fontosak. Más oldaltípusnál más útvonal segíthet; az elrendezést valódi használati helyzetekkel teszteld.
Szintén gyakori probléma az érzelemmentes kommunikáció.
Az olvasó valós helyzetéből indulj ki: mit szeretne elintézni, mi akadályozza benne, és milyen következményt tudsz igazolhatóan megmutatni? A metafora segítheti a megértést, de nem pótolja a tényeket.
Mutasd meg a valós problémát, túlzás és kitalált következmény nélkül!
Vegyünk egy szemléltető weboldalas példát: a kapcsolatfelvételi űrlap beküldése hibával leáll.
Ilyenkor a látogató nem tudja elküldeni az üzenetét, vagy nem tudja, megérkezett-e. A hiba leírásához ezt a ténylegesen tesztelt működést mutasd meg; ne találj ki mellé elvesztett ügyfélszámot vagy bevételt.
A javítás célja lehet a sikeres beküldés, a jól érthető visszajelzés és az értesítés igazolt kézbesítése. Ez a példa nem valós ügyféleredmény vagy általános növekedési ígéret.
A problémát a megfelelő helyen vizsgáld: a kattintás, a szerver által elfogadott beküldés, az e-mail-kézbesítés és a későbbi üzleti eredmény külön lépés.
A kívánt állapotot is konkrétan írd le!
Az ígért változás igazodjon ahhoz, amit a szolgáltatásod valóban elvégez.
A példában a cél az, hogy az űrlap tesztelten fogadja az üzenetet, érthető státuszt adjon, és a megbeszélt címzetthez megérkezzen az értesítés. Ettől még a későbbi megrendelés nem garantált.
Valószínűleg te magad is valamennyire ismered a potenciális vásárlóid fájdalompontjait és vágyait. Azonban istenigazából csak piackutatással fogod tudni kideríteni, hogy mi van VALÓBAN a vevőid fejében.
Hiszen az egy dolog, hogy te mit gondolsz, mi lehet a vásárlód, a potenciális vásárlód fejében. Az igazság azonban az, hogy ez nagyon is különbözhet a valóságtól.
Időről időre készíts piackutatást!
8. Weboldal hiba: Hiányzó jogi elemek
Az adatkezelési, cookie- és szerződéses tájékoztatást a weboldal tényleges működéséhez kell igazítani. A szükséges információk és dokumentumok köre függ például az adatgyűjtéstől, a használt sütiktől és attól, történik-e online értékesítés. Nem minden webhelyre ugyanaz a sablonlista alkalmazható.
A tájékoztatás legyen könnyen elérhető, és egyezzen a tényleges űrlapokkal, külső szolgáltatókkal és folyamatokkal. Egy másik oldalról átmásolt szöveg önmagában nem igazolja a megfelelést.
A kötelező jogi elemeket helyezd ki az oldaladra.
A Your Europe hivatalos cookie-útmutatója megkülönbözteti a hozzájárulást igénylő és a feltétlenül szükséges sütik körét. A szükséges hozzájárulás kezelése technikai feladat is, nem pusztán egy dokumentum elhelyezése. A konkrét dokumentumokat és működést az adott vállalkozásra kell ellenőrizni.
9. Weboldal hiba: Indokolatlan vagy gondozatlan bővítmények
A bővítményeknél a feladatot, a minőséget, a karbantartást és a mért terhelést nézd. A darabszám önmagában nem megbízható sebességi vagy biztonsági diagnózis.
A WordPress teljesítményoptimalizálási útmutatója alapján a tényleges szűk keresztmetszetet kell keresni. Egy fölösleges vagy nehéz kiegészítő okozhat gondot, de nem minden további bővítmény lassít azonos módon.
A szükséges funkcióhoz karbantartható, ellenőrizhető megoldást válassz!
Egyedi kód és bővítmény is lehet jó megoldás. Mindkettőnél fontos a tesztelés, a dokumentálás, a frissíthetőség és a biztonságos működés.
A WordPress biztonsági útmutatója a frissítésekre, a megbízható forrásokra, a hozzáférésekre és a mentésekre is kitér. Egy biztonsági bővítmény vagy az egyedi kód önmagában nem jelent teljes védelmet.
Bővítményütközés gyanújánál mentés és visszaállítási terv mellett, lehetőleg elkülönített tesztkörnyezetben keresd az okot. Éles oldalon ne kapcsolgasd találomra a fizetéshez, űrlaphoz vagy más fontos folyamathoz tartozó kiegészítőket. A tényleges hibát és a javítás eredményét külön ellenőrizd.
Szívesen olvasnál még hasonlókról? Rendszeresen megjelenő hírleveleimben ilyen és egyéb, vállalkozással, online marketinggel, web-/landing oldal készítéssel kapcsolatos fontos tudnivalókat osztok meg. Ha szeretnéd kimaxolni a vállalkozásodban lévő potenciált, akkor iratkozz fel ezekre a hasznos levelekre itt! 👇
Ha a fenti hibák közül a te weboldalad is tartalmaz egy-kettőt, és úgy érzed, jól jönne a kijavításukhoz egy külső, szakmai segítség, akkor vedd fel velem a kapcsolatot, és segítek bennük:
