10 Alap Webfejlesztési Hiba

Egy weboldal fejlesztése során vannak dolgok, amik elsőre jó ötletnek tűnnek, de ha jobban belegondolunk, rájövünk, hogy nem azok. Néha az ügyfél kéri, néha egy letöltött/vásárolt weboldal-sablonban találunk ilyeneket. Ezeket az alapvető hibákat érdemes elkerülni, ha minőségi weboldalt akarunk készíteni:

Intró oldalak

Nagyjából 15 évvel ezelőtt minden magára valamit is adó weboldalnak volt menő (flash) intrója. Ha valaki nem tudná mi ez: egy szimpla HTML oldal ami egy rövid animációt vagy videót, esetleg egy (vagy több) képet jelenít meg, valamint egy linket/gombot a továbblépéshez az “igazi” weboldalra. Rosszabb esetben a továbblépési lehetőség nem is jelent meg a felhasználó számára, amíg végig nem nézte a teljes animációt.

Ez egy teljesen felesleges extra lépés azon felhasználók számára, akik a valódi, fontos és hasznos információkért keresik fel a weboldalt. Ha esetleg valakinek tetszik is az intró, a második-harmadik-sokadik látogatáskor már biztosan nem fogja érdekelni őt, és számára is csak egy akadály lesz.

A nagyméretű képek, videók (esetleg a Flash média) miatt ezek az oldalak elég lassan töltődnek be, ami szintén rontja a felhasználói élményt. Külön jó, ha a videó automatikusan hanggal indul el (erről bővebben lejjebb).

A UX mellett az SEO miatt sem szerencsés az intró oldal: a kevés tartalom, ami van, ritkán frissül (ha egyáltalán), és ezzel SEO szempontból értéktelenné tesszük az egyik legfontosabb és gyakran linkelt oldalt, a főoldalt (ahol az intró található általában).

Jó tudni

A Flash technológia egykor népszerű volt, de ma már érdemes messziről elkerülni. Semelyik nagy böngésző nem támogatja, biztonsági kockázatokat rejt, és a keresők sem szeretik, mert nem indexelhető a tartalma.

Ez a praktikus folyamatábra segít eldönteni, szükség van-e intróra. angryaussie.wordpress.com

Háttérzene

Hacsak nem zenével vagy zenei szolgáltatással kapcsolatos weboldalról van szó, az automatikusan elinduló háttérzene több okból is kerülendő:

  • Mindenkinek más a zenei ízlése. Nem fog mindenkinek tetszeni az általunk választott zene.
  • Szakszerűtlennek hat. Gondoljunk bele: melyik általunk ismert komoly weboldalnak van háttérzenéje?
  • Zavaró. A látogató nem számít rá, hogy zene fog szólni, és számtalan helyzetben érheti ez kellemetlen meglepetésként.
  • A zene streamelése nagy adatforgalommal járhat, és ez mind a látogató, mind a szolgáltató (a webhely-tulajdonos) számára extra költségeket okozhat.
Átlagos Twitter-reakció az automatikusan elinduló háttérzenékre

Túl sok animáció

Az Elementor és más oldalépítőkben elérhető “scroll-in” animációknak köszönhetően egyre több olyan oldallal találkozhatunk, aminél lefelé görgetéskor jobbról-balról, mindenhonnan animálva beúszó elemeket láthatunk. Ezt a funkciót lehet igényesen is használni, de ahogy más design-döntéseknél, itt is fontos a mértékletesség és a következetesség.

A görgetéskor ide-oda úszó elemeken kívül érdemes szót ejteni a céltalan slider-ekről (más néven carousel-ek), amik központi szerepükhöz képest bizonyítottan kevés kattintást generálnak, és általában még a képernyőfelolvasót használó látogatóknak is gondokat okoznak.

A GDPR szabályozás óta majdnem minden oldalon találkozunk a sütik használatát engedélyező popuppal. Ezeknek a használata szinte elkerülhetetlen, ha cookie-ra van szükség a weboldalon, és jogilag megfelelő weboldalt akarunk készíteni. Más esetekben viszont kihagyhatjuk a zavaró popupokat (más néven modal-okat), amik kizökkentik a látogatót a normális ügymenetéből.

Nem feltétlenül szükséges popup például az alábbi esetekben:

  • Akciós termékek bemutatása.
  • Hírlevélre feliratkozás sürgetése.
  • Értesítések engedélyezése.
  • Chat/support lehetőség.

Ha mindenképp popupot akarunk használni valamilyen okból, akkor győződjünk meg róla, hogy minden eszközön egyszerűen bezárható az ablak, hogy könnyen vissza lehessen térni a weboldalhoz.

A popupok csak elidegenítik a látogatókat

Villogó elemek

A popupokon kívül kerülendő még a nagy, harsány színű, vagy villogó felületek használata, ugyanis azon kívül, hogy zavaróak lehetnek, sok ember teljesen figyelmen kívül hagyja őket az úgynevezett “banner vakság” miatt – megszokták, hogy a nagy, villogó elemek rendszerint reklámok, és automatikusan ignorálják őket.

Görgetést befolyásoló scriptek

A weboldalak görgetését kicsit másképp kezelik a különböző eszközök és rendszerek, de ha a felhasználó megszokja az általa használt eszköz “görgetési dinamikáját”, akkor a legapróbb eltérés is észrevehető, és zavaró lehet. Ezért nem ajánlott az úgynevezett “scroll hijacking“, vagyis amikor a görgetési funkciót módosítjuk Javascript kód segítségével.

Linkek megnyitása új fülön

A látogató bármelyik rendes linket meg tudja nyitni új fülön vagy új ablakban, a helyi menüből jobb-klikkel, vagy a középső egér gombbal. Ha viszont beállítjuk egy linkhez a target="_blank" attribútumot, hogy új fülön nyíljon meg, az mindenképp úgy fog megnyílni, és elvesszük a kontrollt a felhasználótól. Ezért ez a beállítás csak indokolt esetben használandó. Ha minden (külső) linket új fülön nyitunk meg, attól nem fognak tovább maradni a felhasználók az oldalunkon (sőt).

Sorkizárt szövegek

A sorkizárt elrendezés nyomtatásban jól mutat(hat), de weboldalaknál szinte soha nem ajánlott a használata. A böngészőkben nincsenek meg azok az eszközök, amik a szofisztikáltabb szöveg- és kiadványszerkesztőkben a sorkizárt szöveget olvashatóvá és rendezetté teszik (pl. a szavak és betűk térközének kiegyensúlyozott beállítása, rendes szótagolás, az egyes betűk szélességének módosítása, stb.). A böngészők a sorkizárt szöveget egyszerűen úgy oldják meg, hogy a szavak közötti teret megnövelik, és ez nehezen olvashatóvá teszi a szöveget.

Következetlen betűtípusok és színek

Az első dolog, ami feltűnik egy weboldalon, az a színei. Ha túl sok különböző szín van, az szakszerűtlennek és szervezetlennek hat. Ugyanez igaz a betűtípusokra is. Érdemes limitálni a színek és betűtípusok számát: használjunk egy fix színpalettát három-négy színnel, amik tükrözik a brandünket, a betűtípusokat pedig úgy válasszuk ki, hogy a fő szöveg mindenképpen könnyen olvasható, megfelelő méretű legyen. A dekoratív betűtípusokat korlátozzuk a rövidebb címekre.

Semmitmondó stock fotók

A stock fotók széles körben felhasználható fotók gyűjteménye, amiket ingyen vagy olcsón lehet megvenni és használni. Megfelelően használva, a stock fotók nagyon is hasznos kellékei a modern weboldalfejlesztésnek. Tanácsok a stock fotók használatához:

  • Mindenképpen releváns fotókat használjunk.
  • Figyeljünk a részletekre: például egy 2013-as fotón megjelenő mobiltelefon ma már egyértelműen elavultnak fog tűnni.
  • Használjuk a Google képkeresőjét, vagy más képkeresőt (pl. a TinEye-t), hogy megbizonyosodjunk róla, hogy nem túlhasznált képet választottunk.
  • Ellenőrizzük a kép licenszét.
  • Tegyük egyedivé a képet, ha a licensz ezt engedi: vágjuk meg, változtassuk meg a hátteret, tegyünk rá szöveget, stb.
Értelmetlen stock fotóból rengeteget találhatunk

Végszó

Ez csak néhány kiragadott példa volt, de természetesen ezek nélkül is lehet rossz weboldalt készíteni. Írd meg kommentben, hogy szerinted milyen alap hibákat követnek még el a webdesignerek!


A Szerzőről
Piller Balázs senior webfejlesztő, SEO specialista, és a WordPress szakértője. Számos sikeres projektben vett részt vezető fejlesztőként. Az általa írt kód jelenleg több mint 1 000 000 webhelyen fut.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.