Azok, akik egy ideje már követnek vagy figyelemmel kísérik a bejegyzéseimet tudják, hogy elsősorban weboldalakkal foglalkozom. Rengeteg weboldalt látok a munkám közben és akkor is, amikor csak úgy böngészek a neten, programokat, szolgáltatásokat vagy éppen terméket keresek, és újra- és újra ugyanazokba a tipikus hibákba „futok bele”. Ezért egy sokak számára érdekes témát hoztam, ami nem más, mint a legnagyobb és leggyakoribb weboldal hibák.
Ezeket most 9 kategóriába szedtem össze neked.
Inkább videós formában szeretnéd megismerni, hogy melyek a tipikus weboldal hibák?
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
Az első és egyben legfontosabb (és sajnos borzasztó gyakori) weboldal hiba az az, hogy nem reszponzív, nem mobilbarát. Még mindig találkozok ilyen oldalakkal, nem is kevéssel, és mindig fogom a fejem, hogy úristen, 2021-et írunk. Még mindig vannak olyan weboldalak, amelyeket nem optimalizáltak mobiltelefonra, holott ma már a felhasználók, a weboldal böngésző emberek 50-60, némely esetben a 70%-a mobilról érkezik.
Hogyha mobilon nem úgy jelenik meg a weboldalad, hogy az könnyen átlátható, könnyen kezelhető legyen, hanem miniatűr betűkkel van írva, és rá kell nagyítani, hogy olvasható legyen, akkor az nagyon-nagyon el tudja szúrni a felhasználói élményt, és innentől kezdve igazából a vásárlást is. Búcsút mondhatsz neki, tényleg.
Legyen mobilra optimalizált, reszponzív a weboldalad.
2. Weboldal hiba: Túl lassú weboldal
A helyzet az, hogy egy-két másodpercünk van arra, maximum talán három, hogy a potenciális vásárlónknak, aki böngészi a netet, betöltsük a weboldalunkat, és egyáltalán meglássa azt az üzenetet, amit szánunk neki, és amivel reményeink szerint meggyőzzük legalább afelől, hogy tovább olvassa az oldalunkat.
Ha túl lassan tölt be az oldalunk, tehát nem egy-két, maximum három másodperc alatt, akkor tuti fix, hogy ott fogja hagyni. Még azelőtt, hogy egyáltalán megjelent volna az első kép, vagy az első mondat. Már megy is vissza, és görgeti tovább a Facebookot, mert mondjuk éppen onnan tévedt oda.
Jellemzően az a jó, ha egy másodperc alatt be tud tölteni egy oldalt. Mobilon ez meg hatványozottan igaz, mert amikor asztali gép előtt ülünk, akkor azért egy nyugodtabb környezetben vagyunk jellemzően, egy nyugodtabb lelkiállapotban, és akár tudunk várni 5 másodpercet is, hogy betöltsön az oldal. De amikor buszon vagyunk, sétálunk, jövünk-megyünk, akkor tényleg másodpercek kérdése az egész.
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…
- más betűtípussal írva,
- más színűek,
- félkövérek,
- nagyobb méretűek
Ezeket egyszerre, külön-külön és vegyesen is alkalmazhatod.
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.
A weboldalad látogatóinak 90%-a csak a címsorokat olvassa el. Ha a címsorok alapján meggyőzte őket a weboldalad, akkor elkezdenek egy kicsit molyolni a szövegben.
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.
(Egyébként azt tudom mondani ökölszabályként, hogy manapság jellemzően 16-18 pixel az ideális méret a folyószövegre.)
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ímsorok esetében használhatunk díszesebb betűtípust, de csak abban az esetben, hogyha maga a címsor viszonylag rövid (2-4, maximum 5 szóból áll). Hogyha ennél hosszabb címsorokat alkalmazol, akkor abban az esetben szintént valami nagyon egyszerű betűtípust használj annak érdekében, hogy olvasható maradjon.
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!
A white space-eket valójában nagyon nehéz eltúlozni. Nagyon nehéz elérni az, hogy túlságosan nagy white space-t, túl nagy fehér, üres területet hagysz. Tehát ezt biztosan nem fogod túlzásba vinni.
Nézd át az oldaladat, és hogyha lehet, akkor inkább húzd szét nagyobbra az oldaladon lévő elemek körülötti területeket a saját weboldaladon. Miután ezt megtetted, nézd meg, hogy sokkal, de sokkal átláthatóbb lesz, és sokkal könnyebb feldolgozni az embernek azokat a blokkokat, azokat a szövegeket, képeket, amelyeken megfelelő üres terület van, ahol megpihenhet az ember szeme.
Túl hosszú mondatok és bekezdések
A weboldalt átláthatatlanná teszik még a hosszú mondatok, hosszú bekezdések is. Mindenféleképpen igyekezz minél egyszerűbben fogalmazni! Próbálj úgy fogalmazni, hogy még egy 5 éves is megértse.
Rövid mondatokat és rövid bekezdéseket használj!
Nagyon sok esetben, ahol összetett mondatok vannak, azokat igazából simán külön mondatokban lehetne írni. Értelmes maradna ugyanúgy is a szöveg, nagyon is, és sokkal könnyebben feldolgozható. Próbálj meg minél rövidebb mondatokat használni, és inkább több bekezdést. Egy bekezdésben két-három, maximum 4 mondat legyen jellemzően, és utána legyen egy kicsit nagyobb sorkihagyás, amikor a következő bekezdés érkezik. Ezáltal átláthatóbbá tudod tenni a szöveget. Tovább tudod tagolni felsorolásokkal, akár pettyezett, akár szánozott listákkal.
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.
Jellemzően kettő, maximum három visszatérő színt használj!
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.
Próbálj egyszerűségre törekedni és arra, hogy amikor görgetsz a weboldaladon minél kevesebb dolog legyen látható!
Egyszerűen muszáj az ez ahhoz, hogy átlátható és könnyen feldolgozható legyen a weboldalad, ahhoz hogy egyáltalán legalább egy részét elolvassák a látogatóid.
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.”
Tehát ahelyett, hogy magadról írsz nyilván, vannak azok a helyek, ahol meg azok a mondatok, ahol ezek elkerülhetetlen, és nyilván főleg, amikor rólam oldalról, rólunk oldalról van szó, akkor ez elég nehezen kiküszöbölhető, de még ott is megoldható az a lényeg.
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 legnagyobb hiba, amit én szoktam látni az az, hogy meta description, vagy meta leírás (ez az a szöveg, ami, a Google kereső találati listáján a weboldalat címe alatt jelenik meg) nincs megfelelően beállítva.
Ezt külön be kell állítani, hogyha ezt te nem állítod be külön, akkor ha WordPress oldalad van, akkor magától be fogja húzni az oldaladnak, vagy a blogcikkednek az első 1-2 mondatát vagy attól függően, hogy ez milyen hosszú az első 150 karakterét. Viszont egyrészt ez nem feltétlenül tartalmazza a kulcsszavadat. És ami nagyon fontos, hogy nem feltétlenül figyelemfelkeltő, nem feltétlenül ösztönzi a potenciális vásárlót, tehát, a böngésző embert arra, hogy megnyissa azt az oldalt.
Tehát nagyon fontos egyrészt, hogy úgymond keresőoptimalizált legyen maga ez a meta leírás is, másrészt, hogy egy olyan üzenetet, egy olyan ígéretet adjon át, ami ösztönzi arra az éppen aktuális böngésző emberkét, hogy rákattintson erre a weboldalra.
Legyen a weboldaladnak keresőoptimalizált meta description-je.
Gyakori hiba, hogy rendkívül hosszú az url. A Google a rövid url-eket díjazza és azt, hogy az url-ben benne van maga a kucsszó, amire az adott oldal vagy az adott blog cikk optimalizálásra került.
Használj rövid, kulcsszavas url-eket.
6. Weboldal hiba: Távolságtartó szöveg
A honlapok szövegezése sok esetben nagyon távolságtartó, rendkívül gyakori a magázódás.
Ez bizonyos kategóriákban, iparágakban (pl. ügyvéd, orvos) vagy nagyon komoly témák esetében még rendben van. Azonban, ha a te szolgáltatásod, terméked nem tartozik ebbe a csoportba, azt javaslom inkább tegeződj. Sokkal közvetlenebb hangnemet tudsz így megütni a monitor túlsó oldalán ülő emberrel. Neki is sokkal könnyebb lesz hozzád kapcsolódni. Sokkal könnyebben épül a bizalom.
Tehát nem „Önhöz” és „Önökhöz” szólunk. Mert ez így nagyon hivatalos, távolságtartó, rideg-hideg kommunikáció, amelyhez kevésbé tud kapcsolódni az ember, nehezebben épül fel a bizalom.
Tegező hangnemben írd meg a weboldalad szövegezését!
Sokkal könnyebb kapcsolódni egy lazább, közvetlenebb, lezserebb stílushoz, amit igazából a hétköznapokban is használunk, hiszen a barátainkkal, párunkkal, szüleinkkel, munkatársainkkal sem magázódva beszélünk, hanem tegeződve.
A távolságtartást mélyíti az is, ha az az ember vagy csapat, aki a weboldal mögött áll nem vállalja fel az arcát. Nem meri megmutatni vagy úgy gondolja, hogy nem illik oda. Pedig nagyon kevés olyan iparágat tudok elképzelni, ahol nem illene oda. Az emberek sokkal könnyebben kapcsolódnak, ha látják, hogy ki az az ember, ki az a csapat, aki egy adott termék vagy szolgáltatás mögött áll.
Vállald fel az arcodat, mutasd meg magad!
Ha eddig még esetleg nem lenne rólad, vagy a csapatotokról kint legalább egy fotó a weboldalon, legalább a Rólam/Rólunk oldalon, akkor mindenféleképpen tegyétek ki. Érdemes hozzáfűzni némi személyességet is, akár egy személyes történetet, akár azt, hogy mi a hobbitok. Sokkal könnyebben tudnak ezekhez kapcsolódni az emberek.
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.
Önmagunkkal, illetve egy élő emberi lénnyel sokkal könnyebben tudunk azonosulni, és kapcsolódni, mint egy arctalan, lelketlen márkával. Sokkal könnyebben építünk bizalmat ilyen módon.
Egyébként a közösséi média posztjaidban is érdemes néha backstage jellegű (mi történik a színfalak mögött) tartalmakat közzé tenni. Sokkal könnyebben tudnak kapcsolódni hozzád az emberek.
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!”
Rengeteg honlap még mind a mai napig ilyen szövegezéssel indult. Mi a probléma ezzel? Egyrészt az, hogy majdnem minden második honlap tényleg ezzel indul, ezáltal abszolút sablonos, nem tűnik ki a tömegből. A másik az, hogy semmilyen információt nem hordoz.
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!”
Címsorként érdemes gy olyan nagyon rövid mondatot megfogalmaznod, max. 5-10 szóban, ami megragadja a terméked lényegét, előnyét vagy elmélyíti a vásárló problémáját.
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.
Nagyon sok olyan weboldallal találkozom, ami még a 90-es, vagy 2000-es évekbeli dizájnnal rendelkezik, ódivatú, nem fejlődik. Ez nekem – és nyilván másoknak is – azt sugallja, hogy a cég, akié ez a honlap nem ad magára, nem fejlődik, és a legjobb szolgáltatást/terméket nyújtja, hiszen nem ezt sugallja a megjelenés. Úgyhogy a potenciális vásárlóid nagyon gyorsan be is fogják zárni a weboldaladat, hogyha az is hasonlóan néz ki.
Ügyelj arra, hogy ha nem is feltétlenül a legmodernebb design az, amivel éppen most rendelkezel, de időről időre, legalább öt évente legyen felülvizsgálva a weboldalad, mind kinézetben, mind szövegezésben.
Igyekezz követni időről időre a trendeket!
Az ilyen régi típusú oldalaknak az egyik jellemzője, hogy rengeteg információ van egyetlen oldalon. Tipikusan régies, elavult megjelenés, amikor bal oldalsávot alkalmazunk.
A mai trendek alapján a menüsor egy felső horizontális csíkban helyezkedik el. A bal oldali menüsor már elavult.
(Kivételt képeznek ez alól a webshopok. A bal oldalsáv, bal oldali menüsor webshopok esetében jól szokott működni. Sőt, ott még szükség is van rá, hogy legyen elég lehetőség a megfelelő termék szűrésre.
Szintén gyakori probléma az érzelemmentes kommunikáció.
Az érzelem kifejezésére nagyon jók a hasonlatok, metaforák illetve az, ha a potenciális vásárlód olaláról közelíted meg az egészet. Gondolj bele igazán, hogy mi az ő problémája? Hol van most? És ha nem foglalkozik most ezzel a problémával, akkor hova fog eljutni? Fél-egy-öt-tíz év múlva.
Mélyítsd el a vásárló fájdalompontját!
Klasszikus példaként szoktam hozni az egyszerű hátfájást.
Hogyha hosszú távon, évekig fáj a háta, és nem változtat rajta időben, akkor ez az egész életére kihat. Lehet, hogy mondjuk nem tud játszani a gyerekeivel, nem tudja űzni azt a sportot, amiért él, hal. Lehet, hogy alig fog tudni járni. Lehet, hogy a végén már mankót kell használnia, ha most nem foglalkozik ezzel a problémával, és nem tesz meg mindent annak érdekében, hogy megszüntesse a hátfájását.
Erre például a te szolgáltatásod vagy terméked megoldást nyújthat, ha mondjuk masszőr vagy, vagy hátfájás elleni krémet árulsz.
Tehát mélyítsd el ezt a problémát! Hova juthat el, ha most nem foglalkozik vele hosszú távon? Le kell mondania nagyon-nagyon sok mindenről, és folyamatosan ott lesz a fájdalom.
Tehát így mélyítsd el a problémát. VAGY! Beszélj neki a boldog jövőről!
Arról a boldog jövőről, amit a te terméked, a te szolgáltatásod tud adni neki.
Elmulasztja a hátfájást, és boldogan tud játszani a gyerekeivel, vagy hódolni tud annak a sportnak, amit ő annyira szeret.
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
Tipikus és gyakori weboldal hiba, hogy hiányoznak a kötelező jogi elemek, úgy mint cookies (süti) tájékoztató, ÁSZF (általános szerződési feltételek), illetve az adatkezelési tájékoztató.
Hát ez nem egy nagyon érzelmes és nem egy nagyon felüdítő téma, ez tény és való. Viszont ahhoz, hogy ne büntessenek minket, nagyon is fontos. Addig erre a korsó kútra, amíg el nem törik. Lehet, hogy most még neked sincsenek kint a weboldaladon ezek a kötelező jogi elemek és még sosem volt ebből problémád, de én azt javaslom, hogy minél előbb helyezd el ezeket.
A kötelező jogi elemeket helyezd ki az oldaladra.
Cookies, ÁSZF, adatkezelési tájékoztató. Ezeknek a tájékoztatóknak a szövegezését jogásszal egyeztesd.
9. Weboldal hiba: Túl sok bővítmény van a honlapon
Gyakori hiba, hogy számtalan bővítmény van a weboldalra telepítve. Ez azon túl, hogy egy idő után már lehetetlen kibogozni, hogy ki kivel van, rendkívül le is lassíthatja a weboldalt.
Minden egyes bővítmény, amit hozzáadsz a weboldaladhoz, az potenciálisan lassítja a weboldalad és egy újabb potenciális feltörési lehetőség a hackereknek.
Amit csak lehet, azt igazából kódból érdemes megoldani.
Igen. CSS, HTML, jQuery.
Nyilván vannak különféle biztonsági bővítmények és egyéb megoldások, de még ha mindent meg is teszel annak érdekében, hogy maximálisan biztonságos legyen a weboldalad, akkor is minden egyes bővítmény egy-egy újabb feltörési lehetőség,
A túl sok bővítmény ráadásul nagyobb eséllyel tud összeakadni. Ezek mégiscsak ilyen kis mini programok a weboldaladban. Ha összeakadnak elrontják a weboldalad, szétesik a weboldal, nem úgy jelenik meg, ahogy kéne, nem működik valami funkció, nem jelennek meg a képek, nem játssza le a videót, nem működik a menü. Komoly problémát tud okozni, ha összeakadnak a bővítmények egy weboldalon, úgyhogy minél kevesebb bővítményt kell alkalmazni és időről időre érdemes felülvizsgálni ezeket, hogy tényleg valójában mire van feltétlenül szükség?
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!
Ha mélyebben érdekel a téma, szeretnél másokkal is beszélgetni erről, vagy kérdésed van hozzá, akkor lépj be a ProduktON! közösségbe Facebookon, ahol hozzád hasonló magyar kisvállalkozókkal beszélgethetsz, és ingyenesen kérdezhetsz tőlem weboldalas, marketinges szakmai témákban, és természetesen az én segítségemre is számíthatsz, mindezt egyelőre teljesen ingyenesen.
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:
