Az alternatív lehetőségek száma nőtt ugyan az online térben, azonban a weboldalak továbbra is megkerülhetetlenek, mivel egy saját magunk által kezelhető, birtokolható, önálló digitális élményt kínálnak. Szemben a korábban felsorolt technológiák egy jelentős részével, a weboldalaknál közel teljes irányításunk alatt lehet a forráskód, ami sokkal komolyabb lehetőséget kínál a fejlesztők és designerek számára a közönség meggyőzésére, mint amit például a közösségi média platformok tudnak nyújtani.

És itt nem csak arról van szó, hogy a jó minőségű weboldalak segítségével hatékonyan növelhetik forgalmukat a cégek, hanem arról is, hogy ennek a forgalomnak a minőségét is javíthatják. Egy jó felhasználói élmény kínáló weboldal nagyon hatékony lehet abban, hogy a weboldalon tartsa a látogatókat, ahol aztán újabb tartalmakat fedezhetnek fel.

Weboldalak és közösségi média

A legtöbb cég számára ma már a közösségi média az egyik legfontosabb lehetőség az emberekkel való kapcsolat kialakítására és fenntartására. És bár sokan töltik az idejüket a közösségi médiában, az nem alkalmas egy átgondolt döntéshez szükséges információk megszerzéséhez vagy feladatok megoldásához.

A weboldalak a közösségi médiával szemben olyan előnyökkel rendelkeznek, mint a

• rugalmasság – a leginkább személyre szabható felületek, melyek pontosan képesek tükrözni egy cég értékeit.
• tulajdonjog – vagyis a weboldaladon a saját tartalmaidat teheted közzé, azt birtokolhatod, míg a közösségi médiában közzétett tartalommal az adott platform rendelkezik, azt saját elképzelései szerint terjesztheti vagy akár el is távolíthatja.
• felfedezhetőség – a weboldalak felfedezhetők a különböző keresőmotorok segítségével, melyek versenyeznek azért, hogy a legjobb találati listát kínálják egy-egy keresésre. Ugyanez a közösségi média platformokról nem mondható el.
• skálázhatóság – a weboldalak kihasználhatják a legújabb technológiákat annak érdekében, hogy javítsák a felhasználói élményt, míg a közösségi média platformok felhasználói élménye a vezetőség döntésén múlik.

Weboldalak és alkalmazások

Amikor a weboldalak kapcsán azt mondjuk, hogy a segítségükkel az internet egy részét birtokolhatjuk, akkor ugyanez felmerülhet az appok esetében is. Ugyanakkor azt is figyelembe kell venni, hogy az appok külső szolgáltatók által vannak szabályozva. Tehát, míg egy weboldal bármilyen webböngészővel bíró eszközről elérhető, addig egy app egy bizonyos operációs rendszerhez vagy platformhoz kapcsolódik. Az alkalmazásod terjesztéséhez be kell tartanod az áruház tulajdonosának követelményeit, amelyek ráadásul bármikor megváltoztathatók anélkül, hogy megkérdeznék a véleményedet róla.

Az appokkal szemben is érvényes az, hogy nagyobb rugalmasságot és skálázhatóságot kínálnak a weboldalak, mint az alkalmazások. Emellett költséghatékonyabbak: egy egyszerű weboldal akár egy hétvége alatt összerakható és elindítható, de a fenntartása is kevesebbe kerül, mint egy alkalmazásé. Ráadásul a felhasználók számára is könnyebben elérhető egy weboldal, hiszen csak kattintani kell egy linkre, vagy beírni a címét, míg egy alkalmazást le kell tölteni vagy meg kell vásárolni.

Weboldalak és podcastek vagy vlogok

Az kétségtelen, hogy a videók és részben a podcastek az elmúlt években jelentős teret hódítottak. Valóban hatékonyan képesek megragadni az emberek figyelmét, ugyanakkor passzív élményt kínálnak a nézőknek. Még akkor is, ha valamiképpen nyitottak a felhasználói interakcióra, alapvetően a passzív befogadásról szólnak ezek a típusú tartalmak.

Hozzájuk képest egy weboldal költséghatékonynak tekinthető, hiszen egy jó podcast-sorozathoz vagy a vlog-készítéshez komoly technikai háttérre lehet szükség, a gyártási munkák költségéről nem is beszélve. Azt is figyelembe kell emellett venni, hogy amíg egy jól megírt, örökzöld tartalom a weboldalakon évekig releváns maradhat, addig egy videó vagy egy podcast-rész gyorsan el tud tűnni a süllyesztőben.

A weboldalakon persze megjelenhetnek, beágyazthatók podcastek és videók is, ahogy bármilyen tartalom, miközben a podcastek vagy videók esetében csak egy podcastről vagy videóról van szó, semmi többről. Végül pedig arról sem szabad megfeledkezni, hogy egy weboldal sokkal kisebb méretű lehet, mint a podcastek vagy még inkább a videók, ami azt jelenti, hogy könnyebben és olcsóbban elérhetők a felhasználók számára, különösen, ha mobilnetet használnak.

Összességében tehát azt mondhatjuk, hogy 2023-ban továbbra sem mondhat le egyetlen cég sem a saját weboldalról, azok változatlanul az üzleti stratégia részét kell, hogy képezzék. Mint látható, számos előnyük van más technológiákkal szemben, elsősorban a rugalmasság, a költséghatékonyság, és a keresőoptimalizálhatóság.

Sokkal jobban a cég igényeire szabhatók, mint egy közösségi média oldal, és habár egy mobilalkalmazás lehet funkciókban gazdagabb egy weboldalnál, sok korlátozással kell szembenézni a különböző platformok és eszközök miatt.

A weboldalak tehát velünk maradnak és tovább fejlődnek az elkövetkező években is, annak ellenére, hogy mindig felbukkannak újabb és újabb ötletek a digitális tartalom terjesztésére.

The post Fontos még a webdesign 2023-ban? appeared first on Webshark Blog.

Most nem új szoftverekről vagy a technológiai háttérről lesz szó, hanem olyan UX tervezésben használható gyakorlatokról, melyek egyre többször jelennek meg a weboldalkészítésnél. Nem is feltétlenül vadonatújak ezek, hiszen már évekkel ezelőtt is találkozhattunk velük, azonban sokan még mindig csak ismerkednek velük. Mi is csak felvillantjuk ezeket most, ha valamelyik használhatónak tűnik, akkor érdemes mélyebben megismerkedni vele.

Felhasználói folyamat tervezése

A felhasználói utak olyan folyamatok, melyeket úgy terveznek, hogy a felhasználók bizonyos cselekvéseket egymást követően végrehajtsanak. Ezeket a cselekvéseket persze alapvetően a weboldaltulajdonos szeretné látni a látogatóktól. A felhasználói folyamatban való gondolkodás segít mindenesetre segít a felhasználói igények meghatározásában, és megfelelő keretet biztosít a tartalom elkészítéséhez.

Storyboard – mi az a storyboarding? És hogyan vágj bele?

A storyboardokat régen a filmkészítésben használták azért, hogy előre felvázoljanak bizonyos jeleneteket, vizuális formában, illetve még azt megelőzően megalkossák a film saját világát, hogy elkezdenék a munkát. De a weboldalkészítésnél is hasznosak lehetnek, amikor meg kell tervezni a felhasználói élményt.

A stroyboard azonban nem drótváz készítését jelenti, hanem a felhasználók történetének felvázolását, hogy érthetőbb legyen, miért és hogyan lépnek kapcsolatba a weboldallal. Ahhoz ugyanis, hogy jobban megértsd a felhasználóid világát, és hogy miként teheti jobbá a terméked az életüket, szükség lehet a sztorijuk megalkotására.

A történetek vizuális formában való összeállítása több ok miatt is hasznos:

• Vizuális formába öntesz gondolatokat, így érthetőbbé válnak, hiszen a képek kommunikációja hatékonyabb, mint a leírt szavaké.
• Sokkal maradandóbbak, hiszen a történeteket 22-szer könnyebben jegyezzük meg, mint a szimpla tényeket.
• A történetekhez jobban tudnak kapcsolódni az emberek is, együttérzőbbé válnak a megjelenő karakterekkel, amikor látják, hogy a kihívások, melyekkel szembesülnek a való életben, hasonlóak az övéikhez.
• A történetek jobban felkeltik a figyelmet, az emberek kíváncsiságát, akik általában meg akarják tudni, hogyan is végződik a történet.

Hogy néz ki mindez a webdesignban? A storyboard segítségével vizuális módon előre felvázolhatod, hogy milyen lehet a felhasználó tapasztalata a termékkel (weboldallal). Tehát úgy gondolkodsz a termékedről, mintha az egy filmben jelenne meg, és látnád magad előtt, hogy az emberek miként fogják használni, hogyan lépnek interakcióba vele.

A történetek felvázolása azért különösen fontos a tervezésnél, mivel emberközpontúvá teszi azt: az adatoknak emberi arca lesz. Az elképzeléseket megjeleníti a valós (bár elképzelt) életben, a tervezők így könnyebben beleképzelhetik magukat a felhasználók cipőjébe, és úgy látják a megoldásaikat, ahogy az emberek.

Ha belevágnál egy storyboard elkészítésébe, akkor arra törekedj, hogy az logikus, érthető és meggyőző legyen. Meg kell értened a történet alapjait, mindegy egyes építőkövét, mert így tudod hatékonyabban és meggyőzőbben megalkotni a sztorit. Világosan kell látnod azt a karaktert, aki köré a történet épül (viselkedését, megjelenését, várakozásait), ugyanígy a környezetét, ahol zajlik a történet, valamint a sztori felépítését: vagyis a kezdetét, a végét, tehát, hogy mi indítja el a karaktert és mi a célja, és ezáltal milyen előnyöket szerez.

Ami a gyakorlati kivitelezést illeti:

• érdemes egyszerű szöveges leírással kezdeni, mely felbontja a történetet rövidebb szakaszokra.
• ezután a szakaszokhoz érzelmeket rendelni, megmutatni (akár csak smiley-kkal), mit játszódik a karakterek fejében.
• végül pedig ezeket a szakaszokat, pillanatokat vizuális formába önteni.

A lehető legrosszabb ötlet technikája

Ez valóban azt jelenti, amiről az alcím szól: egy ötletelés során fel kell vetni azokat a rossz UX-megoldásokat, melyeket a weboldallal kapcsolatban csak el lehet képzelni. Ha mélyebb betekintést nyernek az új, és egyben rossz ötletekbe a fejlesztők, az segít abban, hogy megnyugodjanak és magabiztosabbak legyenek. A rossz ötletek felsorakoztatása javítja a kreativitást, vagyis könnyebben jönnek a jó ötletek.

Miért is működik a „lehető legrosszabb ötlet” technika? Azért, mert amikor egyszerű ötletbörzére kerül sor, ahol elvileg mindenki hozzászólhat a témához, sokan vannak, akik a többek miatt nem mernek megszólalni, mert félnek, hogy csak lejáratják magukat egy rossz ötlettel. Ez viszont azért nem szerencsés, mert így lesznek olyan – egyébként jó ötletek – melyek fel sem merülnek, aztán egy idő után a kiötlőjük is elfeledkezik róluk.

A lehető legrosszabb ötlet technikai ezt a feszélyezettséget próbálja oldani azzal, hogy megfordítja a dolgot, és nem a legjobb ötletet keresik, hanem a legőrültebbet vagy legbénábbat. Egy ilyen helyzetben senki nem tud butának tűnni, hiszen mindenki hülyeségeket sorol körülötte. Mindenesetre az ötletelés során oldódik a hangulat, megszűnik a feszültség.

A technikát egyébként Bryan Mattimore, a The Growth Engine Company társalapítója nevezte el így. A céljuk az volt, hogy a hagyományoktól elrugaszkodva beindítsák az ötletelést. A technika révén lenyugodtak a résztvevők, eltűntek a mentális gátak, melyek miatt nem tudtak szabadon áramlani a gondolatok. A sok nevetséges ötlet után viszont lassan elkezdett kialakulni, hogy működő dolgokhoz is el tudnak jutni.

De hogyan is néz ki a gyakorlatban ez a technika?

1. Soroljatok fel annyi rossz ötletet, amennyit csak tudtok.
2. Rögzítsétek a rossz ötletek valamennyi jellemzőjét.
3. Azt is gondoljátok át, hogy mitől is annyira rossz egy adott rossz ötlet.
4. Ezután keressétek meg a rossz ötlet ellentétét.
5. Gondoljátok át azt is, hogy mivel lehet helyettesíteni egy rossz ötletet.
6. Végül próbáljatok meg kombinálni több rossz ötletet is.

Tehát, mint látható, nem elég csak felsorolni néhány hülyeséget, ezeket analizálni is kell: meg kell állapítani, hogy mitől hibásak, így lehet eljutni olyan gondolatokig, melyek aztán a jó ötletek alapját jelenthetik.

Moderált és moderálatlan tesztelés

Ha olvastál már a UX-ről, akkor tudod, hogy mennyire fontos rész a tesztelés ahhoz, hogy egy jó felhasználói élmény készülhessen. Tesztelni azonban sokféleképpen lehet, és fel lehet osztani a tesztek típusait úgynevezett moderált és a moderálatlan tesztelésre. Mindkettő hasznos egy jó weboldal kialakításában.

Milyen a webdesignhoz használható oldaltérkép?

A legtöbben az oldaltérkép kapcsán arra az XML oldaltérképre gondolnak, melyet a keresőmotorok is használni tudnak a weboldal feltérképezésére, vagy a láblécben található navigációs segédeszközre, melyek a felhasználók tájékozódása érdekében helyeznek el. Ugyanakkor a weboldaltervezésnél egy olyan oldaltérképre van szükség, mely áttekintést ad a weboldal működéséről, érthetőbbé teszi azt. Ez az oldaltérkép inkább egy folyamatábra, nem pedig linkek listája.

Az oldaltérképnek tehát több jelentése is van, és itt most nem abban az értelemben használjuk, mint egy listát, ami tartalmazza a webhely valamennyi oldalát. Webdesign szempontból egy olyan segítséget jelenthet az oldaltérkép, melynek révén a fejlesztők elkerülhetik a hibás navigáció kialakítását és a rossz tervezési döntéseket.

Valójában csak arról van szó, hogy egy másfajta nézőpontból közelít az oldalakhoz, hiszen a tervezés felhasználói élmény és interakciók alapján történik, így ezeket helyezi a középpontba. A lényeg ugyanis nem az egyes oldalak listája vagy azok tartalma (nem információs architektúra), hanem a közöttük lévő kapcsolatok, melyek kifejezik azt, hogy a rendszer miként működik, és nem csak azt, hogy hogyan néz ki.

Ugyanakkor itt nem egy drótvázról van szó, mivel a teljes rendszert (weboldalt) próbáljuk az oldaltérkép segítségével áttekinteni – nem csak annak bizonyos részeit -, megrajzolni a feladatok folyamatát, illetve megmutatni, hogy az egyes oldalak milyen funkciókat tartalmaznak. Ennek révén kaphatunk egy teljes áttekintést a webhely működéséről, és hogy a tartalmak miként illeszkednek össze.

Az oldaltérképen tipikusan dobozok jelennek meg, melyek az egyes oldalakat vagy oldalállapotokat mutatják, ezeket nyilak vagy vonalak kötik össze, melyek jelzik a kapcsolódásokat. Nem az egyes tartalmak elhelyezkedését szemlélteti tehát, hanem a felhasználói utat rajzolja meg.

Elkészítése időrendben a tartalmak összeállítása, illetve az egyes oldalak drótvázának felrajzolása közé esik. A tartalmi lista megmutatja, hogy mi az a tartalom, ami már létezik (ha még nem létezik, akkor el kell készíteni tervezés előtt), ugyanakkor itt még nem szempont, hogy ezeket hogyan rendezzük el az oldalon. Drótvázat azonban csak az oldaltérkép elkészítése után érdemes rajzolni, ez ugyanis már magában foglalja a navigációt, ami az oldaltérkép révén válik csak világossá.

Mindezek alapján látható, hogy hasznos lehet egy oldaltérkép, ennek ellenére a gyakorlatban még nem nagyon használják a tervezés során. Ennek oka nem csak a megszokotthoz ragaszkodás, vagy a munka leegyszerűsítése, gyorsítása, hanem az is, hogy a reszponzív megjelenés miatt kijelzőmérettől függően akár az oldalak száma is változhat egy webhely esetében, így túl bonyolultnak találják az elkészítést. Ugyanakkor bármilyen okból spórolják is meg a fejlesztés során az oldaltérképet, egy nagyobb oldal esetében emiatt megjelenhetnek hiányzó részek vagy épp felesleges, magukra hagyott elemek, mivel a kapcsolatokat enélkül nem lehet pontosan átlátni. Így később kell majd korrigálni a problémákat.

Frissítés, 2022.09.14.:

Empátia-térkép: mi az az empátia-térkép? És hogyan használható a webdesignban?

Még mielőtt vizuális formába öntenéd a weboldalad, érdemes lehet egy úgynevezett empátiatérképet készíteni annak érdekében, hogy jobban megértsd a leendő felhasználóidat. Az empátia-térkép annak vizualizációja, hogy milyen attitűdjei vannak a felhasználóknak és miként viselkednek. Ez pedig segít a weboldaltervezés előtt mélyebben megérteni a felhasználókat, illetve rámutat arra, hogy hol vannak hiányosságok az adatoknál.

A Nielsen Norman Group definíciója szerint az empátia-térkép egy kollaboratív vizualizáció, mellyel megfogalmazhatjuk, hogy mit tudunk egy bizonyos típusú felhasználóról, annak érdekében, hogy közösen megértsük az igényeit, ezáltal pedig segítsen a döntéshozatalban.

Tehát, mint a neve is jelzi, az empátia-térkép abban segít elsősorban, hogy empátiát, együttérzést alakítson ki a felhasználók irányába. Valós adatokon alapul, ezáltal

• megszünteti a téves elképzeléseket, és a csapat összes tagja ugyanazt fogja látni a felhasználókról
• feltárja a vizsgálataink hiányosságait
• megmutatja a felhasználói igényeket, melyeknek talán még ők sincsenek tudatában
• világossá teszi, hogy mi mozgatja őket
• egy értelmes fejlesztés felé irányítja a csapatot.

Az empátia-térképet a tervezés egészen korai szakaszában érdemes elkészíteni.

Hogyan néz ki?

A gyakorlatban egy empátia-térkép egy négy részre osztott négyzet (mond, gondolkodik, tesz, érez) a felhasználói personával a közepén. Az empátiatérkép segítségével egyetlen pillantással, teljes egészében áttekinthetjük, ki is a felhasználó.

A „mond” (Says) négyzet azt tartalmazza, amit a felhasználó hangosan kimond, például egy interjú vagy egy használhatósági tanulmány során. Ideális esetben itt idézetek is megjelennek a felhasználótól.

A „gondol” (Thinks) négyzet arról szól, hogy mit gondol a felhasználó egy termék használata során. Itt meg kell fogalmaznunk, hogy mi foglalkoztathatja a felhasználót, mi az, ami lényeges számára? Az is elképzelhető, hogy ugyanaz a tartalom kerül ide, mint az előző négyzetbe. Ugyanakkor lehetséges, hogy vannak olyan dolgok, melyeket nem mond ki. Ezért meg kell próbálni megérteni, hogy mi az, amit magában tart, mi lehet ennek az oka?

A „csinál” (Does) négyzet a felhasználó által végrehajtott műveleteket tartalmazza. A vizsgálat alapján mit tesz? És hogyan teszi mindezt? Tehát például: „többször is frissíti az oldalt”, „összehasonlítja az árakat”.

Az „érez” (Feels) négyzet a felhasználó érzelmi állapotáról szól. Mi miatt aggódik a felhasználó? Mitől lesz izgatott? Milyennek érzi az élményt? Tehát például „türelmetlen: mert az oldalak lassan töltődnek be”, „aggódik: fél, hogy valamit rosszul csinált”).

Mivel a felhasználók is emberek, így találsz majd ellentmondásokat az egyes négyzetek között. Például más mondanak, mint amit tesznek, vagy gondolnak. De pont ezáltal lesz értékes az empátia-térkép, hiszen felfedi az ilyen ellentmondásokat. Persze lesz olyan is, amikor az egyes négyzetek szinte ugyanazt tartalmazzák, például a gondolatok és az érzések esetében, ez azonban nem probléma. A lényeg, hogy nem marad ki egyetlen fontos dimenzió sem. Probléma akkor van, ha üresen marad valamely négyzet, mert az azt jelzi, hogy további vizsgálatokra van szükség, mielőtt belekezdenél a designba.

Empátia-térképet persze nem muszáj minden felhasználóra külön készíteni, az aggregált empátia-térkép teljes felhasználói szegmenseket mutathat be. Igaz, ez is úgy készül, hogy az olyan egyedi empátia-térképeket összesítik, ahol a felhasználók hasonlóan viselkedik, így egy csoportba rendezhetők. Ebből aztán előállítható egy persona is.

Felhasználói út térkép

Minél összetettebb a weboldalad, annál fontosabb, hogy elkészítsd a felhasználói utak térképét. És itt valóban egy vizuális formában megjelenő térképről van szó, mely jelentős segítséget ad a felhasználók fogadásában és megtartásában. Ezt úgy éri el, hogy komoly betekintést enged az ügyfelek felmerülő problémáiba, amikor kapcsolatba lépnek a weboldaladdal vagy a cégeddel. A felhasználói útról ebben az anyagunkban már részletesebben is írtunk.

5 másodperces teszt

Az 5 másodperces teszt az első benyomásról szól és annak javításáról szól. Ez egy olyan teszt, mely egy felhasználó számára mindössze öt másodpercet vesz igénybe, viszont nagyban hozzájárulhat egy világosabb és használhatóbb weboldal kialakításához. Öt másodperc alatt meghatározható, milyen a felhasználó első benyomása a weboldalról, miután olyan kérdésekre kell válaszokat adnia, hogy vajon mi lehet a szándéka az oldalnak, melyek a fő elemei, ki lehet a célközönség, megbízhatónak látszik-e az oldal és a cég, és egyébként milyen benyomása alakult ki a designról.

Ezek lennének tehát a lehetőségek, melyek még nem épültek be a weboldalkészítés mindennapi gyakorlatába, ugyanakkor némelyiket vagy akár többet is közülük bizonyos esetekben érdemes lehet alkalmazni. A későbbiekben ezek közül többet is részletesebben bemutatunk majd.

The post Néhány új technika, amit érdemes lehet használni, ha weboldalt készítenél (Frissítve, 2022.09.14.) appeared first on Webshark Blog.

Abba most nem megyünk bele, hogy mi húzódik egy-egy ember személyiségének mélyén, amiért az életében a tökéletest hajszolja. Inkább szűkítjük a fókuszt, és azt nézzük meg, hogy miért nem működőképes a webdesign esetében (sem) a tökéletességre törekvés.

Ha már részt vettél weboldal készítésében, akkor valószínűleg találkoztál azzal a felismeréssel, hogy amikor a lehető legjobb, mondhatni tökéletes weboldal elkészítésére törekszel, akkor a projekt elkezdi felemészteni az időt és az energiát, és mindig találsz egy újabb részletet, amin lehetne javítani, mielőtt élesítenétek az oldalt.

A világban mindennel így van ez. Nem létezik olyan, hogy tökéletes ember, tökéletes autó vagy laptop. Ideig-óráig érezheted azt, hogy megtaláltad a tökéletességet, de egy idő után mindig felmerülnek problémák, amikor valami nem úgy működik, ahogy azt Te igazán szeretnéd, hogy működjön. Nem csak a technikai dolgokkal van ez így, hanem mindennel.

Mivel a tökéletesség nem létezik, így az nem elérhető, vagyis egy ilyen igénnyel készülő weboldal soha sem készül el. A tökéletességre törekvéssel csak problémákat okozol magadnak egy weboldal esetében is. De már a törekvés is komoly veszteségeket okozhat az időt tekintve.

Más célokat kell tehát kitűznöd. Amikor egy weboldalról van szó, akkor ez lehet egy reális értékesítési cél, vagy bármely más igény kielégítése, mely felmerül a Te vagy az ügyfeleid részéről. Ennek a célnak kell a szemed előtt lebegnie, bármilyen ötlet felmerül a weboldal kapcsán. Fel kell tenni minden esetben a kérdést, hogy „ez a változtatás közelebb visz a kitűzött célhoz?”

Ami biztosan nem visz közelebb egy olyan célhoz, mint például egy értékesítési cél, az a tökéletesség. Ami általában működni szokott egy konverzióra összpontosító weboldalnál, az az egyszerűség, mely általában hatékonysággal jár együtt. Az ilyen weboldal faék egyszerűségű is lehet, ha hozza a számokat. Mondhatjuk, hogy tökéletes weboldal? Nem. A célját betölti, de javítani mindig lehet rajta.

Amikor egy weboldal elkészül, nem lehet száz százalékos pontossággal megmondani, hogy a legjobbat sikerült-e összehozni. Ezt a gyakorlat fogja megmutatni. Lehet persze rá készülni: teszteléssel. A valós visszajelzések megmutatják a weboldal használhatóságát, melyet aztán lehet javítani. Az így létrejövő weboldal viszont nem egészen olyan lesz, mint amit Te elképzeltél, tökéletesnek gondoltál.

A tesztek egyik legnagyobb tanulsága egyébként az, hogy szinte soha nem tudod száz százalékos pontossággal megmondani, hogy mit akarnak az emberek, pontosan mire van szükségük. Ezért egy olyan, tökéletesnek szánt rendszeren dolgozni, mely a Te vagy a csapatod gondolatai alapján áll össze, időpazarlás. Érdemes inkább ott elkezdeni a munkát, hogy egy olyan egyszerű megoldást készítesz, mely feltehetően közelebb visz a célodhoz. Ezt pedig a valós igények fényében aztán módosítod. Újra és újra.

Végül pedig érdemes azt is megjegyezni, hogy a tökéletességre törekvés gyakran teljesen észrevehetetlen marad. Hiába ölsz bele egy termékbe rengeteg időt, az emberek talán észre sem fogják venni mögötte a sok munkát. Ők nem feltétlenül azt várják, amit adsz nekik, nem feltétlenül látták, hogy milyenek voltak az első verziói a terméknek, így nem is tudják összehasonlítani és felmérni a fejlődés nagyságát.

Még ha rengeteg időt bele is öltél a részletek kidolgozásába, a legtöbb ember számára ezek érdektelenek, annyit várnak csak, hogy a fő funkciók megfelelően működjenek. Lehet, hogy az időd 80 százalékát a részletek, apróságok kidolgozására fordítottad, de a valódi eredményt 20 százaléknyi munka fogja hozni, melynek során a reális cél lebegett a szemed előtt.

Amiatt pedig ne aggódj, hogy ha feladod a tökéletességre, akkor az egész projekt bukás lesz, ugyanis az általad elképzelt tökéletesség csak számodra az. A többi ember számára egészen más, és a Te terméked is máshogy látják, mint Te. Ne feled, hogy az ügyfeled, a felhasználó nem Te vagy. Ezért nincs értelme egy weboldalt a saját feltételezéseid és véleményed alapján felépíteni.

Ha félreteszed a tökéletesség ideáját, akkor sokkal hatékonyabbá válhatsz, és jobb eredményeket érhetsz el. Hiszen a weboldalad előbb elkészül, előbb kezdi hozni a visszajelzéseket, aztán az eredményeket, ha figyelembe is veszed ezeket. A lényeg tehát az, hogy egy egyszerű, de hatékony megoldás mindig jobb, mint a nem létező tökéletesség hajszolása.

The post Te is tökéletes weboldalt szeretnél? appeared first on Webshark Blog.

Amikor az emberek weboldalakról beszélnek – vagy akár amikor mi írunk róluk -, akkor a statikus-dinamikus szembeállítás kérdése ritkán merül fel. Ugyanakkor, nem árt tudni róla annak, aki egy kicsit jobban belebonyolódik a webdesign világába.

Amikor weboldalakról vagy weboldalak tervezéséről beszélünk, akkor alapvetően azt bonjuk ki részletesen, hogy mitől lesz jó egy weboldal, hogyan lesz hatékony a webdesign, mi az, ami javítja a felhasználói élményt, hogyan használjuk a színeket, a betűket, a távolságokat vagy hogyan készítsünk tartalmat az oldalra. Azon ugyanakkor nem sokat szoktunk gondolkodni, hogy akkor valakinek dinamikus vagy statikus weboldalra lenne szüksége.

De mit is jelent az egyáltalán, hogy egy weboldal statikus vagy dinamikus? Egyszerűen fogalmazva a statikus oldal nem változik a felhasználói interakciók hatására, míg a dinamikus képes a változásra.

A statikus weboldalon tehát az elemek rögzítettek, illetve nem képesek a változásra annak hatására, hogy azon mit tesznek a felhasználók. Az ilyen weboldalak egy meghatározott számú aloldallal kerülnek kialakításra, és amíg a weboldal tulajdonosa ezek számát nem növeli, illetve tartalmukat nem módosítja, addig változatlanok.

Tehát, ha van egy kisebb weboldalad, mondjuk egy céges weboldal, ami bemutatja a céged működését, amivel szeretnél információkat átadni magadról az érdeklődő olvasóknak, akkor neked is statikus weboldalad van, és lehet, hogy nincs is többre szükséged.

Ezzel szemben a dinamikus weboldalak többet tudnak, mint a pusztán információs célzatú statikus megoldások. Úgy is hívják őket, hogy adatbázis-vezérelt weboldalak, aminek az az oka, hogy a megjelenő információk annak függvényében változnak egy-egy felhasználó számára, hogy mit tesz, esetleg honnan érkezik az adott felhasználó. Az ilyen weboldalak egyes oldalai tehát valós időben generálódnak le egy-egy felhasználó számára a róla gyűjtött adatok figyelembevételével.

Az ilyen weboldalak szerveroldali és kliensoldali szkripteket is használnak, a tartalmakat egy adatbázisból, vagy egy tartalomkezelő rendszer (CMS) segítségével jelenítik meg egy adott felhasználó számára. A webáruházak, a közösségi média oldalak is ebbe a körbe tartozhatnak, így dinamikus weboldal például a Facebook, az Amazon vagy a Netflix.

Amit még érdemes tudni a kétféle típusú weboldal közötti különbségről, hogy a statikus weboldalak megjelenítéséhez a HTML, a CSS, a JavaScript használata is elegendő lehet, míg dinamikus weboldalaknál olyan szerveroldali nyelveket is használnak, mint a PHP, a SERVLET, a JSP, az ASP.NET, stb.

Szintén lényeges tényező a kettő költsége közötti különbség, hiszen egy statikus weboldalnak egyszerűbb a fejlesztése és a fenntartása, így a költsége is jóval alacsonyabb, mint a dinamikusé, ahol a funkciók száma is jellemzően nagyobb.

Amit még esetleg érdemes megemlíteni, hogy keresőoptimalizálás szempontjából is jóval egyszerűbb a helyzet egy statikus weboldallal, többek között a gyorsabb betöltődés miatt, míg a dinamikus weboldalaknál egy-egy oldal dinamikusan generált jellege miatt nem feltétlenül lehet egy adott kulcsszóra optimalizálni, de gondot okoz az is, hogy ezek sokszor úgynevezett végtelen görgetésű oldalak, ahol a tovább tartalmak lefelé görgetésre generálódnak.

Alapvetően ennyit érdemes tudni, és nem igazán kérdés, hogy melyiket válaszd, hiszen vagy az egyikre, vagy a másikra van szükséged a weboldalad jellegéből kifolyólag.

Mindenesetre az elmondható, hogy egy dinamikus megoldás elkészítése, elindítása jóval összetettebb folyamat, ugyanakkor a későbbieket tekintve már lehet, hogy egyszerűbbé válik.

Tehát, ha egy szimplán információs weboldalra van szükséged, ahol bemutatod a céged, a termékeid és a szolgáltatásaid, ahol nincs szükség interaktivitásra, akkor egy statikus weboldal tökéletesen megfelel az igényeidnek, viszont ha egy komolyabb webáruházat készítesz, akkor már dinamikus weboldalban kell gondolkodnod.

The post Mi a különbség statikus és dinamikus weboldalak között? appeared first on Webshark Blog.

Az első dolog az, hogy a megfelelő technológiát kell kiválasztanod a weboldal elkészítésére. Egy olyan sablont és megoldást kell találnod, mely kellően rugalmas annak érdekében, hogy maximálisan a saját igényeidre szabd a témát. Ez azt jelenti, hogy minden elemét képes legyél úgy alakítani, hogy az összhangban legyen a céged image-ével és elősegítse a konverziókat. Ha valahol akadályokba ütközöl, kompromisszumokat kell kötnöd, akkor az a rendszer nem megfelelő a céljaid számára, és minimum egy új sablont kell keresned.

Ha úgy érzed, hogy megtaláltad a megfelelő technológiát és témát, akkor még mindig ott a gond, hogy senki sem született azzal a képességgel, hogy elsőre (vagy akár másodikra) tökéletes weboldalakat faragjon. A weboldalkészítéshez kell a tudás és a tapasztalat. Ha ezek híján vagy, akkor könnyen elkövetkezhetsz nagyon egyszerű hibákat is. Lássunk ezek közül néhányat!

1. Pontos célok nélkül ne kezdj bele!

Minden weboldalnak van valamilyen célja. Akár egy kis, céges weboldalt hozol létre, akár egy webáruházat, akár egy blogot, ennek valamilyen oka. Ezt az okot érdemes világosan megfogalmazni a magad számára, mert sokat segít a weboldalad kialakításánál. Írd le tehát a célokat, amiket a weboldaladdal el szeretnél érni.

Például azt, hogy új ügyfeleket akarsz vele szerezni az online térben, vagy először egy közösséget akarsz építeni egy termék vagy szolgáltatás köré. Vagy egy blogot akarsz írni, ami pénzt termel a számodra hirdetésekből és termékmegjelenítésekből.

Itt azonban ne állj meg, minden egyes aloldalad esetében fogalmazd meg azt a célt, amiért az adott aloldalt elkészíted. Annak ugyanis nincs értelme, hogy minden aloldalad ugyanazt a célt szolgálja. Tehát például egy webáruház termékoldalainak az a célja, hogy vevőket szerezzenek, ugyanakkor más oldalak bizalmat építenek, míg megint más oldalak e-mail feliratkozókat gyűjtenek. És ezek mind egy nagy célnak vannak alárendelve.

2. Na csak a desktop megjelenésre figyelj!

Még mindig sokan vannak olyanok, akik leülnek az asztali gépük, laptopjuk elé, és a weboldalt arra a felületre tervezik meg, ami előtt ülnek, teljesen elfeledkezve a mobilos megjelenésről. Pedig a felhasználók ma már több időt töltenek a neten mobilon, mint asztali gépen. Ha egy olyan weboldalt készítesz, mely csak asztali gépen működik jól, akkor nagyon sok konverzióról le kell mondanod.

Tehát, amikor sablont választasz a weboldaladhoz, akkor figyelj arra, hogy az reszponzív legyen. A reszponzív weboldalak minden eszközön megfelelő élmény képesek nyújtani a látogatóknak. Elsősorban azáltal, hogy az adott eszköz kijelzőméretének megfelelően rendezik el a weboldal-elemeket.

Egy reszponzív template sok gondot levesz a válladról, arra azonban ilyenkor is figyelned kell, hogy az általad elképzelt weboldal-elemek minden kijelzőméretnél értelmezhető és élvezhető megjelenésüek legyenek. Ezért, amikor készül, illetve amikor elkészül a design, tesztelned kell különböző kijelzőméreteknél, hogy megfelelő-e az eredmény, vagy pedig valahol, valamit módosítani kellene. Főleg arra figyelj, hogy a szövegek jól olvashatók, a linkek és a gombok könnyen kattinthatók és a képek és értelmezhetők-e mobilon.

3. Ne hanyagold el a személyre szabást!

Egy sablon használata azért jó, mert a munka egy jelentős része már el van végezve. A rossz oldala pedig az, hogy találsz még több száz olyan weboldalt, mely ugyanazt a template-et használja. Ezért kell olyan sablont választanod, mely rugalmas, és minden elemében személyre szabható. És élned is kell ezzel a lehetőséggel annak érdekében, hogy minél egyedibb legyen a weboldalad.

Tehát figyelj a színekre, változtasd meg az elrendezést, használj eredeti képeket és videókat! És természetesen a szöveget se másold egy másik oldalról. Így lehetséges az, hogy miközben valaki más designjából indulsz ki, a végén mégis úgy tekinthetsz a weboldalra, mint a sajátodra.

4. Ne magadnak tervezd!

Ez lehet, hogy zavarba ejtő az előző pontot figyelembe véve, mégis fontos, hogy ne magadnak, hanem a célközönségednek tervezz! Márpedig szinte biztos, hogy nem Te vagy a saját célcsoportod. Nem ugyanaz a tudásod, a hozzáállásod, a helyzeted, mint azoké, akikhez szólni szeretnél a weboldaladdal. Így felesleges és hibás megközelítés, ha azt veszed figyelembe, hogy neked mi tetszik és neked mire lenne szükséged a weboldalon.

Tehát nem olyan weboldalt kell készítened, ami szerinted jól néz ki. Olyan weboldalra van szükséged, ami a látogatóidnak, illetve a célközönségednek tetszeni fog. Ezért még a weboldalkészítés előtt át kell gondolnod, hogy ki is a célközönséged, és mit szeretne látni. Van valami közös jellemzőjük? Ha ezt világosan meghatározod, akkor sokkal nagyobb eséllyel tudsz olyan weboldalt készíteni, ami vonzó is lesz számukra.

5. Figyelj a tartalmak elrendezésére!

A weboldaladon könnyen meg kell találniuk a felhasználóknak azt, amit keresnek. Ennek érdekében próbáld úgy elrendezni az információkat, ahogy azt megszokták. Könnyebb dolgod van, ha kicsi a weboldalad, de ha egy rakás aloldalt kell elrendezned, akkor már jobban oda kell figyelned az információs architektúra kialakítására. Gondold át, hogy a weboldaladra érkezők elsősorban mit keresnek, és úgy rendezd el az elemeket, hogy ezeket egyből megtalálják.

6. Figyelj az oldal hierarchiájára!

Minden aloldalon vannak fontosabb és kevésbé fontos részek. Azokat az elemeket, amiket mindenképpen szeretnél megmutatni a látogatóknak egy-egy aloldalon, helyezd el annak felső részére. A kevésbé fontos információkat pedig lejjebb.

Ennek oka, hogy habár ma már nagyobb kedvvel görgetnek az emberek lefelé a weboldalakon, mint néhány éve, azért a legtöbb időt még mindig a “hajtás felett” töltik. A figyelmüket tehát itt kell megragadni.

7. Maradjon következetes a vizuális design!

Egy weboldal minden aloldalának és elemének azonos stílusúnak kell lennie. Ez jelzi ugyanis a felhasználóknak, hogy még mindig egy adott weboldalon járnak. Tehát, ha rákattintanak egy linkre, de ugyanazokat a színeket, betűket látják az oldalon, akkor tudják, hogy nem tévedtek át egy másik weboldalra.

Ha viszont egy linkre kattintva azt látják, hogy megváltozott a háttér, mások a színek, a formák, a betűtípusok és -méretek, eltérő a menü, akkor azt feltételezik, hogy már egy másik weboldalon járnak. Annak érdekében, hogy ezt elkerüld, törekedj maximális következetességre a vizuális design kialakításánál.

8. Inkább ne használj stockfotókat!

Ennek a témának már szenteltünk egy külön fejezetet a fotókkal foglalkozó bejegyzésünkben, úgyhogy érdemes átolvasni. A stockfotók nem élből elvetendők, bár ha teheted, mindenképpen eredeti képeket használj. Ugyanakkor, ha rákényszerülsz a stockfotók használatára, akkor próbálj eredetibb, életszerűbb darabokat válogatni közülük, lehetőleg olyanokat, melyek nem szerepelnek még több száz másik weboldalon. És aztán tervezd meg, hogy miként fogod ezeket fokozatosan lecserélni egyedi fotókra.

9. Nem figyelsz eléggé a szövegre!

A weboldalad szövege a legfontosabb elem a konverziókat tekintve. Ha nem fordítasz rá kellő figyelmet, és odavetsz valami általános szöveges tartalmat a felhasználóid elé, akkor ne várd, hogy meg fogod győzni őket. A szöveg elkészítésére időt kell szakítanod. Olyan tartalomra van szükséged, ami cselekvésre készteti őket. Elsősorban arra kell fókuszálnod, hogy mire lehet szükségük, milyen problémáikat akarják megoldani, mert neked erre kell megoldást kínálnod. És nem pedig magadról, a cégedről vagy a termékeidről beszélned.

Emellett persze még számtalan tényező fontos a szövegeknél, így az egyszerű és világos megfogalmazások, a CTA-k ereje, a megfelelő helyesírás, a szöveg formázása. Utóbbi kapcsán érdemes tudni, hogy a felhasználók inkább csak átfutják a weboldalakat, így olyan jelzéseket kell adni nekik, melyek a kulcsfontosságú részeknél magukra vonják a figyelmüket. Kell a megfelelő struktúra, a címek, alcímek rendszere, a felsorolások, a stratégiai pontokra elhelyezett, megerősítő képek, kiemelések, stb. És persze nem árt a SEO-szempontokat is figyelembe venni. Ami nem azt jelenti ma már, hogy valamilyen általad elképzelt kulcsszót minél többször beleerőltetsz a szövegbe, vagy még ennél is rosszabb esetben azon kívül.

10. Ne feledkezz meg a whitespace-ről!

Ennek a témának is szenteltünk már egy önálló bejegyzést, mert hogy a whitespace nem üres tér, amit ki kell tölteni, hanem designelem, aminek nagyon komoly funkciója van, így gondosan kell adagolni. A whitespace vezeti a felhasználók tekintetét, felhívja figyelmüket a fontos dolgokra, miközben meghatározza a weboldal megjelenését, összképét is. Ráadásul a whitespace minden egyes weboldalelem között megtalálható (képek, gombok, címek, sorok, betűk, stb.), és egyáltalán nem mindegy, hogy mikor, mekkora.

11. A SEO-ra is figyelned kell!

Habár a szövegírásnál már említettük a SEO-t, ezen túl is sok olyan tényező van egy weboldalon, mely meghatározza annak keresőoptimalizáltságát. A címeken és a szövegtörzsön kívül figyelj az URL-ekre, a meta címsorokra, leírásokra, a képek alt textjére, fájlnevére, a felhasználói élményre, a belső linkrendszer felépítésére, a weboldal sebességére, stb. Hosszú lenne mindent felsorolni, itt van segítségül egy bejegyzésünk, amiben részletezzük.

12. Tedd egyedivé!

Egy weboldal attól lesz egyedi és megjegyezthető, ha van benne valami eredeti. Olyan karaktert kell neki adnod, ami által emlékezni fognak rá a látogatók. Próbáld tehát belecsempészni a saját látásmódodat. Ez megjelenhet az eredeti színekben, a képekben, az egyedi megfogalmazásokban. Ugyanakkor ne ess a ló túloldalára, és igyekezz professzionális maradni.

13. Végül, tesztelj!

Ez az, amire általában nem marad sem idő, sem pénz, mert ha kész a weboldal, az kerüljön minél előbb a közönség elé. Pedig tesztek nélkül nem fogod tudni, hogy optimális-e a weboldalad megjelenése és felépítése a célközönséged számára, fogalmad sem lesz róla, hogy tudják-e használni, vagy beleütköznek olyan akadályokba, melyek eltántorítják őket a konverziótól.

Ha mást nem is teszel, olvasd el a usability tesztekről írtakat, és kérj meg néhány ismerőst, hogy végezzen el néhány alapfeladatot a weboldaladon, miközben Te figyeled őket. Ez megmutatja, hogy hol vannak a gyenge pontok, hol bizonytalanodnak vagy vesznek el a weboldalon a látogatók. Arra is figyelj, hogy mindez ne csak asztali gépen történjen, hanem többféle eszközön és böngészőn, eltérő körülmények között. Hiszen egy weboldalt nem ugyanúgy lehet használni egy zsúfolt strandon a tengerparton egy mobilon, mint este a laptopodon a dolgozószobában.

Látható tehát mindezekből, hogy ma már ugyan rendelkezésre állnak olyan eszközök, melyekkel akár néhány óra alatt össze lehet rántani egy weboldalt, arról azonban szó sincs, hogy ezek az eszközök garantálnák a hatékonyságát és használhatóságát. Ehhez ugyanis több kell. Ha a fenti hibákat kiküszöbölöd, akkor nagyon nagy gondok talán már nem lesznek vele, de még akkor is csak a felszínét karcolod a weboldalkészítés mélységeinek.

The post Ezeket a hibákat kerüld el, ha magad készíted a weboldalad! appeared first on Webshark Blog.

1. Sok a mobilos látogatód? Tegyél eléjük desktop oldalt!

Nincs annál idegesítőbb, mint amikor nagykijelzős mobiltelefonunk böngészője egy olyan weboldalt tölt be, aminek sem mobilnézete, sem nem reszponzív, sem nem adaptív, és ha mégis hajlandóak vagyunk rázoomolni a szövegre, akkor is ide-oda kell rángatni a kijelzőn az ujjunkat, hogy akár egy sort is el tudjunk olvasni. És az is csak akadozva megy. Ez a leghatékonyabb tömegpusztító fegyver. Neked is bevált, ugye?

2. Lassítsd le az oldalad!

A mobilról érkező látogatók elriasztásának másik eszköze – ha netán mégis van mobil-barát oldalad -, hogy kellően nagy méretű oldalt készítesz. Aminek betöltési sebessége egyáltalán nincs optimalizálva, semmiféle tömörítés nincs, így 5-6 vagy akár 10 másodpercet is igénybe vesz, mire egy mobiltelefonon betöltődik, lehetőleg terhelve a telefont és a mobilnetet is. Olyannyira, hogy a látogató csak szorítsa minél tovább a mobilját, gyöngyözzön a homlokán az izzadság, mire összeáll a weboldalad a kijelzőjén. De ha mégis akad olyan, aki megvárja ezt a pillanatot, akkor se add fel, itt a következő tippünk.

3. Legyél igazi művész!

Rúgd fel a megszokottat, az unalmast, legyél eredeti, amikor weboldalad tervezitek! Minden máshogy legyen, ahogy azt a látogatók megszokhatták, hiszen az egyformaság unalmas. Az a legjobb, ha a weboldaladra érkezéskor egyszerűen fogalmuk sincs a látogatóknak, hogy

• miről szól az oldalad,
• mit kínálsz nekik,
• hol kezdjék a navigálást,
• sőt, egyáltalán nem találják a menüt.

Ehhez azért elég kreatívnak kell lenned, kerülnöd kell mindenféle hagyományos elrendezést, lehetőleg a szövegeket is. De ha mégis van ilyesmi, akkor a címek ne legyenek észrevehetők és a kisbetűs mondatok legyenek minél semmitmondóbbak. A legjobb persze, ha csak képekben tobzódik a weboldalad, és azok kellően absztraktak, művésziek, emberek, arcok meg se jelenjenek rajtuk, annak érdekében,hogy semmiféle fogódzót ne találjon a látogató.

A logód úgy helyezd el, hogy eszükbe se jusson, hogy az lenne a logód, és a menüt is szerencsés oda rakni, ahol senki sem keresné. Ezért a bal felső sarkot mindenképpen kerüld el, a többi rád van bízva. Mindezt azért, hogy meg kelljen küzdenie a látogatónak az azonosításért, vagyis érted. Ne add könnyen magad! Mindennek legyen valami szokatlan helye, a navigáció egy labirintusra hasonlítson. A legjobb, ha új technikákkal kísérleteztek, valami designcsodát hoztok létre, ahol minden úgy siklik és mozdul, ahogy senki sem várná. Például egy bénán összerakott parallax designnál nincs kegyetlenebb. A kulcsszó: eredetiség!

4. Az atombomba: a zenélő weboldal

Zenét a látogatónak, hangot, fényeket, hadd szóljon az a site! Leállíthatatlanul: tehát semmiképpen ne legyen rajta, vagy ne legyen megtalálható a kikapcsolás lehetősége. Reméljük nem kell magyarázni, miért ez számít a weboldalak atombombájának. Sajnos az eredeti technika kezd kiszorulni, egyre kevesebben bátrak, de azért léteznek ennek modernebb variánsai, ilyen például az automatikusan induló videó. Igazi pusztító, amikor valakinél fel van tekerve a hangerő, és a Te videódat, zenédet kénytelen hallgatni végig, amíg ott van az oldaladon. Nem is fog sokáig maradni, Te pedig fellélegezhetsz.

5. Variálj 4-5 féle betűtípust, lehetőleg különböző színekben és méretben!

Ha mindezek már adottak, akkor további fegyverekhez kell nyúlnod a látogatók elriasztására. Az egyik például az, hogy mindenféle konzisztencia nélkül, többféle betűtípust használsz az oldalon. A többféle szín, méret csak még hatékonyabbá teszi ezt a változatosságot. Lendületes, izgalmas és kreatív lett az oldalad, igaz? Gyors lesz a látogatók távozása is. És ezt a menekülést lehet tovább gyorsítani, csak megfelelő hátteret kell választani a szöveghez, például, hogy alig legyen kontrasztkülönbség, vagy pedig egy erős háttérszínre írod rá a színes szöveget. Lehetőleg kellően apró betűkkel.

6. Használj erőszakos, bezárhatatlan pop-up ablakokat!

Az a legjobb, ami mindjárt az oldaladra érkezés után felnyílik, a kijelző közepén elhelyezkedve betölti a teljes képernyőt, és sehogy sem lehet megtalálni a kis X ikont vagy bezárás feliratot, mert nem a jobb felső sarokba helyezed, hanem valami eldugott helyre. Csak ügyesen! Simuljon bele a designba, és egy meglepő helyen telepedjen meg. Nagy sikere lesz. Ez a technika bannerrel is működik.

7. A call to action gombod legyen láthatatlan

Nincs annál szofisztikáltabb kiszúrás a látogatóval, mint amikor végigolvassa a szerencsétlen a szövegedet, majd kifolyik a szeme, közben szól a zene, ennek ellenére rendelni akar tőled, fel akar iratkozni, viszont Te apróbetűsen, szürkén, láthatatlanul helyezed el a call to action gombot. Azaz, ha akarja, akkor se tud rendelni, vagy bármit mozdulni előre, mert egyszerűen nem találja, hogy ezt hol teheti meg. Sem fent nincs, sem lent, valahol középen a szövegben lehet, vagy talán egy kép, esetleg alatta a link? Merthogy minek is rendelje meg? Csak a macera van vele.

8. A formjaidban még a látogató macskájának nevét is kérdezd meg!

De, ha mégis megtalálja a láthatatlan linkedet és feldobod neki a formot, akkor már csak egy lehetőséged marad: legyen végtelenül hosszú, több oldalon, több kattintással kitölthető. Csak így van esélyed arra, hogy valaki a felénél megunja, és inkább egy másik oldalon szerezze meg ugyanazt, amit nálad akart. Lehetőleg minden apró részletet bele kelljen írnia, hosszasan kígyózzanak lefelé a kitöltendő mezők, és egymás után az oldalak a folyamatban.

És még egy aljas trükk a végére, amit, ha minden kötél szakad, még bevethetsz: ha valaki ki is töltötte, és lenyomja az OK-t, akkor küldj egy hibaüzenetet, mert kihagyott egy mezőt, amit Te gondosan úgy helyeztél el, hogy ne vegye észre. Viszont ekkor töröld ki az összes válaszát, hogy újra ki kelljen tölteni az egészet. Ezt szeretni fogják, hidd el!

Te melyik riasztót építetted már be a weboldaladba?

The post 8 tipp: hogyan kergessük el látogatóinkat a weboldalunkról? appeared first on Webshark Blog.

A parallax megoldások a videójátékok világában jelentek meg, de ennek már van harminc éve is. Már ekkor akadtak olyan játékok, ahol a háttér lassabban mozgott, így a tér illúzióját keltette. A webdesignban 2011-ben bukkant fel a HTML5-nek köszönhetően. Mindezek mellett még mindig újnak és eredetinek hat a weboldalakon, talán amiatt is, hogy kevés oldal merte megkockáztatni a használatát.

Mi az a parallax design?

A parallax design lényege, hogy több “réteg” jelenik meg egyszerre egy weboldalon, szinte 3D-s lesz a látvány. Azért, mert a rétegek eltérő sebességgel mozognak, amikor scrollozunk lefelé vagy csak mozgatjuk az egeret: például a háttér lassabban mozdul, mint az előtérben lévő képek. Ezáltal kelt térhatást, ami lenyűgöző tud lenni a megszokott kétdimenziós, szöveg-kép felépítésű weboldalak ezrei között.

További “trükkökre” is képes azonban a parallax design: nemcsak függőlegesen mozoghat, hanem akár vízszintesen is, sőt bármilyen irányban, valamint a felhasználók egy-egy linkre kattintással látványos ugrásokat tehetnek az oldalon. Ami képes magával ragadni az embert, vagyis vonzóbbá, látványosabbá tehetjük a weboldalunkat vele, a kijelző előtt tarthatjuk a felhasználót, aki így több időt tölt az oldalunkon.

Mire használható a parallax design 2021-ben?

Általában a designerek és a weboldaltulajdonosok azért nyúlnak a parallax megjelenéshez, mert egy „magával ragadó” élményt szeretnének kínálni a látogatók számára. Azt feltételezik ugyanis, hogy ezáltal kreatívabb megjelenésű és megjegyezhetőbb lesz az oldal. Ennél azonban többet tud a parallax oldal.

Parallax-görgetéssel mondhatunk el egy történetet

A parallax görgetés felhasználására az egyik legkézenfekvőbb lehetőség a történetmesélés. A felhasználók egyre inkább érzelmi kapcsolatot szeretnének kialakítani a márkákkal is, melyektől vásárolnak valamit. Már öt éve is azt mutatták a kutatások, hogy az emberek 81 százaléka azt várja a márkáktól, hogy mondjanak el nekik egy történetet, és ez a trend azóta is változatlan.

A látogatások számának növelésére

Ha egy weboldal hatékonyan mondja el a történet egy parallax animáció alkalmazásával, akkor az nagy eséllyel azt eredményezi, hogy a látogatók tovább maradnak a weboldalon. Márpedig minden weboldal célja az, hogy csökkentse a visszafordulási arányt és növelje a weboldalon eltöltött időt. Tehát lehet, hogy a parallax effekt növeli a betöltődési időt, ami nem kedvező a felhasználói élmény vagy a SEO szempontjából, ezzel szemben áll azonban, hogy – ha jól van kivitelezve – megfogja a felhasználót, növeli az aktivitását az oldalon.

Könnyebbé teszi az információ átadását

Az emberek vizuális lények. Sokkal jobban szeretnek képek segítségével, vonzó és izgalmas vizuális megjelenéssel információt befogadni, mint egyhangú szövegek által. Ez az oka annak is, hogy a vizuális tartalmak sokkal több közösségi megosztást szereznek, mint az egyszerű írott szövegek, legyenek azok bármennyire is informatívak. A parallax animációk segítségével pedig az információk vizuálisan izgalmasabbá tehetők, így hatékonyabban átadhatók az embereknek.

Hiszen ahelyett, hogy sok egyforma bekezdéssel találkoznának a felhasználók a weboldalon, képeket, grafikonokat és nem mellesleg szöveget látnak életre kelni a parallax hatás által.

Mozgóképpé alakítható a weboldal

Az előbbi gondolatot folytatva, a parallax animációk révén élővé válik a weboldal, ahol így gyakorlatilag mozgás jelenik meg, akárcsak korunk legfelkapottabb médiaformátumában: a videókban. A parallax effektek révén a weboldal olyanná válhat, mintha egy videós prezentáció lenne, anélkül persze, hogy valóban el kellene helyezni benne egy videót.

Ugyanakkor van egy előnye a videókkal szemben: maximálisan a felhasználók kezében van az irányítás, hiszen a görgetéssel szabályozhatják a mozgást. Ez pedig sokkal felhasználóbarátabb, mint egy automatikusan elinduló videó, ahol pause gombot kell lenyomni a megállításhoz, vagy a csúszkával lehet előrébb és hátrébb mozogni.

Felhívhatja valamire a figyelmet

Ugyanakkor a parallax használatával felhívható a figyelem bizonyos weboldalelemekre is. Hiszen amikor egy elem más sebességgel mozog, mint a többi, akkor arra irányul a figyelem. Az emberek tekintete automatikusan a gyorsabban mozgó részre összpontosul, így nem kell azt keresniük.

Emlékezetessé tenni a weboldalt

Mit szeretne minden weboldaltulajdonos elérni a weboldalával? Azt, hogy lenyűgözze az embereket és emlékezzenek rá, hogy aztán később is eszükbe jusson és visszatérjenek vásárolni. Habár a parallax mozgás már nem annyira egyedi, mint évekkel ezelőtt volt, azért egy kreatív kivitelezés még mindig emlékezetes lehet a látogatók számára. Ha pedig a Te weboldalad emlékezetesebb és lenyűgözőbb, mint a konkurenciáé, akkor rád fognak emlékezni az emberek.

Vannak korlátai

• Habár az előbb azt mondtuk, hogy a parallax a mozgó elemekre irányítja a figyelmet, az is igaz, hogy sok embernél nem tudja kifejteni ezt a hatást. Ennek oka, hogy a célorientált felhasználók gyorsan görgetnek kulcsszavakat keresve az oldalon, és nem várják meg, hogy kibontakozzon a parallax effekt.
• Ehhez jön még hozzá, hogy a nagyobb parallax weboldalaknál sokat kell várni a betöltésre a hatalmas képek és a mozgásért felelős scriptek miatt, amit sok felhasználó nem tesz meg. Mostanában, amikor egyre türelmetlenebb a közönség, nagyobb visszapattanási arányt eredményezhet egy lassan betöltődő oldal, hiszen sokáig nem látnak semmit a felhasználók, csak egy üres oldalt.
• Az is lehet azonban gond, amikor a görgetés sebességéhez igazodik a parallax megjelenítés, hiszen, ha nagyon gyorsan görget a felhasználó, akkor olyan gyorsabb tűnnek fel és el szövegek, hogy el sem tudja őket olvasni.
• Emellett a hosszas scrollozás is zavarhat néhány látogatót, akik ugyancsak idő előtt lelépnek az oldalunkról.
• A túl sok mozgás is gondot okozhat, különösen a szövegeknél: ezáltal nehezebbé válik az olvasás, sőt akár rosszul is lehetnek egyes felhasználók a parallax effekteket használó weboldaltól.
• Ráadásul azt sem szabad elfelejteni, hogy mivel a weboldalakon alapvetően a hirdetések azok, amik mozognak, így sok felhasználó már tudomást sem vesz a mozgó dolgokról, amikor megérkezik egy weboldalra.
• Egyébként pedig akadnak még mindig olyan régi böngészők, melyek nem támogatják a HTML5-öt, és így nem működik rajtuk a parallax design.
• További gondot jelenthet, hogy nem egy mobil-barát technológiáról van szó, de nehezíti a méréseket is az oldalon, valamint a keresőoptimalizálás során is jelenthet gondokat. Már csak azért is, mert a legtöbb esetben a látvány áll az első helyen, ami a tartalom, illetve elsősorban a szöveg kárára válik.
• És végül azt is érdemes észben tartani, hogy a felhasználók nem feltétlenül rajonganak a parallax effektekért. A designerek vagy a webdesign iránt érdeklődők azok, akik értékelik az ilyen törekvéseket, az átlagemberek nem annyira. A tesztekből az derült ki például a Nielsen Norman Group számára, hogy a felhasználók a weboldalak használata közben egyáltalán nincsenek lenyűgözve a parallax megjelenéstől, nem kommentálják azt, és nem is nézegetik lefelé és felfelé scrollozással, hogy milyen lenyűgöző (legalábbis, ha külön nem hívják fel rá a figyelmüket a moderátorok). Az emberek elsősorban a tartalomra összpontosítanak.

Mindez azonban nem szükségszerűség.

Mit tehetünk?

Azt kell megérteni a parallax esetén, hogy az az animációk egy formája, és mint minden animációnál a kevesebb több. Azaz nem muszáj az egész weboldalunkat parallax designnal készíteni, illetve finomabb mozgásokat érdemes használni.

Érdemes azonban azt is figyelembe venni, hogy milyen jellegű az oldalunk. Hiszen a parallax leginkább ott működik, ahol az emberek nem sietnek, hanem ráérősen, egy meghatározott cél vagy feladat nélkül tartózkodnak az oldalon. Ilyen esetekben a parallax segíteni tudja egy történet elbeszélését vagy a márkaidentitás mélyítését.

Másrészt parallax oldal esetén is figyelhetünk külön a SEO-ra, és – ehhez is kapcsolódóan – a mobilon is használható megjelenésre.

Néhány javaslat:

• Ha a felhasználók egy feladattal érkeznek a weboldaladra, akkor a tartalmat a weboldal felső részére helyezd!
• Használj belső navigációs linkeket, hogy az embereknek ne kizárólag a görgetésre kell támaszkodniuk a navigációnál.
• Ne vidd túlzásba az oldalon a parallax-effekteket, csak egy-egy helyen bukkanjanak. A legjobb, ha a háttérbe vagy a weboldal szélére helyezed őket, mert így nem zavarják meg a tartalom befogadását.
• Az is lehetséges, hogy a parallax hatás csak egyes oldalainkon jelenik meg, például a főoldalunk parallax – melyet egyébként sem feltétlenül érdemes vagy egyáltalán lehetséges hatékonyan SEO-zni -, míg az ott található linkekről elérhető aloldalainknál már nem használjuk a parallax designt.
• De akár az is elképzelhető, hogy egyes aloldalaink kapnak csak parallax designt, így például a cégtörténetet bemutató oldal tipikusan ilyen lehet.
• Jó megoldás lehet, hogy ha egyszer a felhasználók végiggörgettek a weboldalon, és lejátszottad nekik az összes parallax effektet, akkor az elemek ezt követően már maradjanak egy végső, fix pozícióban. Azaz visszafelé görgetésnél már ne kezdődjön újra az animáció. Ha arra kényszeríted őket, hogy újra végignézzék a parallax effekteket, akkor még nehezebben találják meg az őket érdeklő információkat, és emiatt csak idegesek lesznek. Ez olyan, mint ha ugyanazt a viccet mondanád el nekik újra meg újra. Persze elképzelhető az is, hogy szeretnék újra hallani.
• SEO szempontból fontos, hogy ne egyetlen oldalt készíts, hanem több aloldalt, melyeket külön-külön optimalizálhatsz.
• Ellenőrizd és oldd meg a reszponzivitást! Soha ne feledkezz meg arról, hogy a parallax effektet használó weboldaladnak nem csak egyetlen kijelzőméretnél kell működnie.

Igaz, a felhasználókat egy parallax oldalon az animáció fogja lenyűgözni, annyira, hogy másra nem is nagyon figyelnek, azonban még működhet a call to action az oldal alján. És talán egy ilyen parallax-élmény után lelkesebben is kattintanak a látogatók a CTA-gombra.

Mindenesetre, ha nem csak a látvány fontos, hanem a konverzió is, akkor igazán figyelni kell arra, hogy ne hajtsuk túl a parallax-hatást, mert egész egyszerűen elveszhetünk a sok animációban és mozgásban, a hullámvasút során elhalványul az üzenet, eltűnik az oldal célja és iránya a felhasználó számára, és egy idő után nem is tudja, hogy mi végre görget még lefelé. A lenyűgöző látvány és a szédülés között kell megtalálni a határt, hogy a parallax design javítsa, ne pedig rontsa az oldalunk hatékonyságát.

Frissítés, 2021.11.17.:

Néhány példa parallax oldalra

A következő példákból elsősorban az derül ki, hogy mennyire alkalmas eszköz a parallax design történetmesélésre. Ugyanakkor talán az is látszik rajtuk, hogy ehhez nagy odafigyelés és alapos tervezésre van szükség.

A NIIKA oldalán azt látod, ahogy a hero kép absztrakt formái finoman elmozdulnak, miközben a szövegek ennél gyorsabban mozognak, úsznak be a képbe, és onnan kifelé. Ahogy haladsz lefelé az oldalon, úgy változik a parallax effekt, ugyanakkor az oldal több pontján is megjelenik.

A CANN egy amerikai italgyártó, melynek weboldalán a különböző rétegek eltérő sebességgel mozognak a görgetés hatására. Az oldal a termék előnyeit igyekszik elsősorban megmutatni a látogató számára. A szövegek nagyok és jól olvashatók a sok és változó szín ellenére, miközben a termék is folyamatosan látható, ahogy az arra utaló buborékok is (minél gyorsabb a görgetés, annál több a buborék). Mindez folyamatos mozgásban, úgyhogy egy valóban látványos, izgalmas oldalt sikerült összehozni, ami miatt a terméket is hasonló értékekkel ruházzuk fel.

A Garden oldalán kevésbé erőteljes a parallax hatás, ugyanakkor a grafika itt is felkelti a figyelmet és az egyediség érzetét kelti. A hajtás feletti rész parallax mozgása után már csak vonalak és ikonok rajzolódnak ki a görgetés hatására. Ez azonban felhívja a figyelmet a fontos információkra, mint például a szolgáltatások vagy az elérhetőség.

A Bertani weboldalának designja is meglehetősen összetett. Láthatók itt videók, képek, váltakozva, vízszintes és függőleges görgetés, ráadásul az egérmutató is egyedi, ahogy a navigáció sem a megszokott az oldalon. Habár elsőre minden másként van rajta, mint egy megszokott weboldalon, így talán nehezebb kiigazodni, ugyanakkor az kétségtelen, hogy látványos, és maradandó nyomot hagy a látogatóban.

Azt legmerészebb álmunkban sem gondoltuk volna, hogy egy tojástermelő gazdának ilyen lehet a weboldala, mint a Crazy About Eggsé. Pedig itt egy holland gazdaságról van szó, melynek weboldala nagyon egyedi színekkel, grafikával és parallax effekttel nyűgözi le a látogatót.

Végül pedig, aki további parallax-példákra kíváncsi, az az Awwward nevű oldalon több száz díjnyertes példát találhat rá, lehet böngészgetni köztük ötletekért és persze az élményekért.

The post Mi az a parallax design? És mikor érdemes használni? (Frissítve, 2021.11.17.) appeared first on Webshark Blog.