Van az a pillanat, amikor megnyitsz egy weboldalt, nézed pár másodpercig, aztán reflexből rányomsz a kis X-re. Nem azért, mert gonosz vagy, hanem mert egyszerűen nem érted, hol vagy, mit akarnak tőled, vagy miért néz ki úgy az egész, mintha még a modemes korszakra tervezték volna.
A vicces az, hogy a legtöbb ilyen „webdesign baki” nem gonoszságból születik, hanem jó szándékból, rossz fókuszokkal. Valaki szép, „menő” oldalt akar. Csak közben elfelejti, hogy a látogató nem esztétikai zsűri, hanem ember, aki gyorsan választ vár:
mit kap, mennyiért, és hogyan tud továbblépni.
A jó hír: előttünk már rengetegen elcsúsztak ezen. Vannak legendás webdesign bakik, amiket ma már múzeumi darabként nézünk, és vannak frissebbek, amelyek csendben ölik a konverziót. Ha ezeket megérted, a saját oldaladon is sok drága kört megspórolsz.
Villogó káosz: amikor a dizájn hangosabb, mint az üzenet
Ha valaha ránéztél az eredeti Space Jam oldalra a ’90-es évekből, pontosan tudod, miről van szó. Csillogó háttér, véletlenszerű ikonok, színes szövegek, minden mozog, villog, forog. Ugyanez ment GeoCitiesen és a MySpace-aranykorban is: animált gifek, automatikusan induló zene, csillám, tűzijáték, háttérben csillagos ég, előtérben háromféle betűtípus.
Akkor ez menő volt. Ma inkább nosztalgikus horror.
A lényeg viszont ma is ugyanaz: ha minden egyszerre akar figyelmet, végül semmi sem kap.
A felhasználó nem fogja kibogarászni az üzenetedet a vizuális zajból. Pár másodperc után zár, és kész.
Ma ugyanez a hiba „csak” modernebb csomagolásban jelenik meg:
túl sok szín, túl sok doboz, túl sok „nézd ide, klikkelj rám” felirat, pop-up a pop-upon, chat buborék, süti sáv, hírlevél-feliratkozó, exit intent. Közben a lényeg – mivel foglalkozol, miben segítesz – elveszik.
Ha a saját weboldaladra nézel, érdemes feltenni magadnak három kérdést:
- első ránézésre egyáltalán látszik, mivel foglalkozol?
- van-e egy domináns fókusz, vagy minden egyszerre akar üvölteni?
- tudod-e egy mondatban elmondani, mit kellene észrevenni elsőnek?
Ha a válasz bizonytalan, máris közel jársz egy klasszikus webdesign bakihoz.
A Flash-intro és a „várj még, mindjárt betölt” korszak
Volt egy idő, amikor az számított menőnek, ha a weboldalad úgy indult, mint egy rövidfilm:
logórepülés, zene, animáció, loading bar, majd valahol a végén egy kicsi „Skip intro” gomb.
Papíron ez látványos. A gyakorlatban viszont így nézett ki a folyamat:
- felhasználó megnyitja az oldalt
- vár
- még vár
- ideges lesz
- bezárja
Ma már ritkán látunk klasszikus Flash-introkat, de a mentalitás sok helyen megmaradt. Csak más eszközökkel:
– óriási, lassan betöltő videó a háttérben
– üres hero, egy homályos szlogennel
– semmi értelmes információ az első képernyőn
Szép, drága és teljesen felesleges, ha közben a látogató nem érti, mit kap tőled.
Én ilyenkor egy nagyon egyszerű szűrőt használok:
ha az első blokk után nem tudom kimondani egyetlen mondatban, hogy „kinek, miben és hogyan segít ez az oldal”, akkor a dizájn vagy a szöveg mellé ment. És teljesen mindegy, milyen gyönyörűek a fotók.
Amikor a rendszer szétesik: bugos űrlapok, fagyó webshopok
Nem minden webdesign baki látványos. Vannak azok a hibák, amiket csak az vesz észre, aki tényleg használni próbálja az oldalt.
Gondolj egy egyszerű helyzetre: valaki kitölti az ajánlatkérő űrlapodat, megnyomja a gombot, és… semmi.
Vagy fut egy piros hibaüzenet, de nem egyértelmű, mit kell javítani.
Vagy a fizetési oldalon lefagy a folyamat, és a vásárló nem tudja, sikeres volt-e a tranzakció.
A nagyvilágban ilyen szinten égett be a köztudatba a Healthcare.gov indulása 2013-ban: lassú oldal, hibák, fagyások, elérhetetlen funkciók. Nálunk ez nem lesz címlapsztori, de a hatása ugyanaz: aki elakad, az nem fog visszajönni.
Itt már nem arról van szó, hogy „nem tetszik a dizájn”, hanem arról, hogy a weboldal elvágja a pénz útját.
Lehet akármilyen jó a szöveg, a fotó, a márka – ha az űrlap vagy a checkout nem működik tökéletesen, oda a bizalom.
Ezért amikor oldalt tervezek vagy átnézek, külön ráállok ezekre:
- működik-e minden lépés mobilon is, nem csak asztalin?
- kap-e a felhasználó egyértelmű visszajelzést (siker, hiba, következő lépés)?
- mennyi mezőt kérsz el ahhoz képest, amennyi tényleg szükséges?
Sokszor már azzal nő a konverzió, hogy kiveszünk 3–4 felesleges mezőt, és érthetővé tesszük a hibajelzéseket.
Márkaidentitás a kukában: redesign, ami túl nagyot ugrik
A Gap logóváltása 2010-ben tankönyvi példa lett arra, hogyan nem szabad márkát frissíteni.
Egy ikonikus, évtizedek óta ismert logót cseréltek le hirtelen egy „modernebb” verzióra.
A közönség reakciója: felháborodás, mémek, nyomás. A cég pár nap után visszavonult, és visszatért a régi logóhoz.
Mi köze ennek a te weboldaladhoz?
Nagyon is sok. Ugyanezt látom akkor, amikor:
- hirtelen sablont váltanak, és a márka teljesen felismerhetetlenné válik
- a Facebook más stílusban kommunikál, mint a honlap
- a hirdetés ígérete nem stimmel azzal, amit a landing oldalon látunk
A látogató pedig nem fog ezen gondolkodni. Csak azt érzi: valami nem stimmel, nem biztos benne, hogy jó helyen jár.
Egy redesignnál nem az a kérdés, hogy „mi most a trendi”, hanem az, hogy hol tart a márka, és merre szeretne menni. Néha elég finoman tisztítani, egységesíteni, és nem kell mindent kidobni.
Amikor újratervezzük egy cég weboldalát, mindig megnézem:
- miben ismeri fel a saját márkáját (színek, hangnem, fotóstílus, logó)
- mi az, ami már zavaróan elavult
- hogyan tudunk úgy frissíteni, hogy a törzsközönség mégis otthon érezze magát
Modern webdesign bakik: mobil, menü, üresen szép oldalak
A régi villogós káosz ma már ritkább. Helyette jöttek az új típushibák, amik sokkal alattomosabbak.
Mobil, ami csak „elvan”
Ma a legtöbb piacon a forgalom jelentős része mobilról érkezik. Ehhez képest még mindig rengeteg olyan oldalt látni, ahol mobilon:
- a szöveg túl kicsi
- a gomb alig eltalálható
- a blokkok egymásra csúsznak
- vízszintesen is görgetni kell
A tulajdonos ilyenkor azt mondja: „Nálam jól néz ki.”
Igen, egy nagy monitoron, egérrel.
Mobilon viszont teljesen másképp viselkedik az ember: egy kézzel görget, közben utazik, sorban áll, figyelme szétesik. Ha ehhez még a weboldal is akadálypálya, pillanatok alatt bukod.
Ezért mobilra nem „lebutítok”. Inkább célzottan átrendezem: mi legyen felül, mi mehet lejjebb, milyen hosszú lehet egy blokk, hogyan tördeljük a szöveget, hogy ne fárasszon.
Menü, ami túl okos akar lenni
A másik kedvenc: kreatív, de használhatatlan menü.
Egy kis ikon itt, egy rejtett navigáció ott, oldalról becsúszó, csak épp azt nem érti a látogató, hová kell kattintani, hogy eljusson az „Árak” vagy a „Kapcsolat” részhez.
Ez ügynökségi portfólióknál díjat hozhat. Egy KKV weboldalnál csak frusztrációt.
Őszintén: a menünek nem kell művészinek lennie. Az a dolga, hogy vezet.
A kreativitás mehet a fotóba, tipóba, ikonokba, mikroanimációkba – a menü maradjon pofonegyszerű.
Szép, modern, de semmit nem mond
Talán ez a leggyakoribb modern webdesign baki.
Letisztult layout, jó fotó, trendi betűk, és egy ilyen mondat a hero részben:
„Innovatív digitális megoldások a jövő vállalkozásainak.”
Ez bárki lehet. Szoftvercég. Webdesigner. Tanácsadó. Online jógaakadémia.
Ha a látogató nem tudja 2–3 másodperc alatt megfogalmazni, mivel foglalkozol, akkor hiába jó a tipográfia. A dizájn ebben az esetben csak díszlet, mögötte nincs elég tartalom.
Amikor szöveget írok egy hero részhez, mindig három kérdésre keresem a választ:
- ki vagy?
- konkrétan miben segítesz?
- mit csináljon az, aki ezt elolvasta és érdekli, amit kínálsz?
Ha ez a három nincs meg, a legszebb weboldal is üresnek érződik.
Hogyan dolgozom, amikor weboldalt tervezek?
Napi szinten találkozom ezekkel a hibákkal. Nem archív képernyőfotókon, hanem élő, futó vállalkozások oldalain, ahol tényleg pénz múlik azon, hogy a látogató marad-e vagy kilép pár másodperc után.
Amikor WordPress + Elementor alapon weboldalt építek, nem egy sablont „sminkelgetek”. Inkább így néz ki a folyamat a fejemben:
Először azt tisztázzuk, mit kellene a látogatónak az első 3 másodpercben értenie.
Ki vagy, miben segítesz, és mi legyen a következő lépés, ha érdekli, amit kínálsz.
Utána jön a struktúra: hogyan épüljön fel a menü, milyen sorrendben jönnek a fő blokkok, honnan hova vezessenek az űrlapok, hova érkezzen a feliratkozás vagy ajánlatkérés.
Ez az a váz, amire érdemes ráépíteni bármit.
Csak ezután kerül rá a vizuál: a színek, a tipográfia, a képek, a finom animációk. A cél nem az, hogy elvigyék a fókuszt, hanem hogy támogassák azt az üzenetet, amit az elején közösen tisztáztunk.
A sebesség, a mobilnézet, az űrlapok és a checkout nálam nem „technikai apróság”, hanem a konverzió része.
Ha itt hiba van, azt előbb-utóbb megmutatják a statisztikák – és a bankszámla is.
Ha úgy érzed, a saját oldalad valahol félúton ragadt a régi villogós káosz és a modern, de üres dizájn között, ezzel egyáltalán nem vagy egyedül. A legtöbb vállalkozás weboldala ilyen állapotból indul.
A valódi kérdés az, hogy így hagyod, vagy ránézünk szakmai szemmel, és kipofozzuk úgy, hogy érthető, gyors és bizalmat keltő felület legyen belőle.
