Design Archives - Webshark Blog http://blog.webshark.hu/category/design/ ... jquery, ajax, design, psd, plugin, modul, web2, social, miegymás... Fri, 23 Sep 2022 16:13:32 +0000 hu hourly 1 https://wordpress.org/?v=6.1.4 Hogyan javítsd a felhasználói élményt az „interakciós költség” csökkentésével? http://blog.webshark.hu/2022/09/23/hogyan-javitsd-a-felhasznaloi-elmenyt-az-interakcios-koltseg-csokkentesevel/ Fri, 23 Sep 2022 16:13:31 +0000 http://blog.webshark.hu/?p=10295 Amikor az emberek valamilyen célt el akarnak érni, akkor általában a könnyebb utat választják. Ezért teszik ezt, hogy minimalizálják az interakciós költségeket. Hogyan lehet ennek elébe menni a webdesignban, és olyan weboldalt kínálni nekik, ahol nem kell keresniük a könnyebb utat? A Nielsen Norman meghatározása szerint az interakciós költség azon szellemi vagy fizikai erőfeszítések összessége, […]

The post Hogyan javítsd a felhasználói élményt az „interakciós költség” csökkentésével? appeared first on Webshark Blog.

]]>
Amikor az emberek valamilyen célt el akarnak érni, akkor általában a könnyebb utat választják. Ezért teszik ezt, hogy minimalizálják az interakciós költségeket. Hogyan lehet ennek elébe menni a webdesignban, és olyan weboldalt kínálni nekik, ahol nem kell keresniük a könnyebb utat?

A Nielsen Norman meghatározása szerint az interakciós költség azon szellemi vagy fizikai erőfeszítések összessége, melyeket a felhasználók egy weboldallal történő interakció során tesznek, annak érdekében, hogy elérjék céljaikat. Az interakciós költség a weboldal használhatóságát fejezi ki. Minél nagyobb erőfeszítést kell tennie egy látogatónak a weboldallal történő interakcióban a céljai eléréséért, annál kevésbé használható termékről beszélhetünk.

Az előbbi definícióból az is látható, hogy az interakciós költségnek két típusa van: a szellemi és a fizikai.

Szellemi interakciós költség

A szellemi interakciós költség az általunk már többször is emlegetett kognitív terhelésnek felel meg, és azon szellemi erőfeszítések összessége, mely egy termék működtetéséhez szükséges. Amikor egy feladat elvégzése rendkívüli figyelmet vagy memóriát igényel, akkor a szellemi erőfeszítés és az interakciós költség magas.

A szellemi interakciós költség a szemkövetéses vizsgálatok segítségével is mérhető, ugyanis ezekből kiderül, hogy mire összpontosítja vizuális figyelmét a felhasználó, mivel foglalkozik, és mi az, amit figyelmen kívül hagy.

Egy bonyolult navigációs menü, egy nehezen befogadható tartalom, egy ismeretlen mentális modell vagy interakciós minta mind magas szellemi interakciós költségre lehet példa.

A szellemi interakciós költség ugyanakkor csökkenthető, többek között a munkamemória hatékonyabb kihasználásával. George Miller pszichológus szerint egy átlagos személy mindössze 7 dolgot (plusz-mínusz 2) tud a munkamemóriájában tartani. Amennyiben tehát az információt feldaraboljuk kisebb, fogyasztható egységekre, akkor hatékonyabban használjuk ki a munkamemóriát.

Mit jelent ez a gyakorlatban?

  • Rövidebb bekezdéseket
  • Rövidebb sorokat
  • Átláthatóbb vizuális hierarchiát, ahol a kapcsolódó elemek csoportosítva vannak

Szintén segít, ha könnyebben olvasható és érthetőbb módon tálaljuk a tartalmakat. Hiszen, mint tudjuk, egy-egy weboldalon senki nem olvas el minden szót, hanem csak gyorsan átfutják azt, releváns információkat keresve (melyek segítenek elérni a célt). Ennek érdekében konkrét, informatív, világos és lényegre törő szövegeket érdemes használni:

  • rövidebb mondatokat
  • alcímezett szövegegységeket
  • egyszerű szavakat

Emellett pedig segíteni kell a megértést olyan elemekkel, mint a jól látható mezőcímkék vagy menüelemek, egyszerűbb és rövidebb űrlapokkal, ismert designmintákkal, melyek illeszkednek a felhasználók meglévő mentális modelljeihez.

Fizikai interakciós költség

A fizikai interakciós költség az a fizikai erőfeszítés, melyet a felhasználónak meg kell tennie egy feladat végrehajtásához. Az egyik kapcsolódó elv Fitts törvénye, mely szerint egy feladat – például az egérmutató célba juttatása – végrehajtásához szükséges idő attól függ, hogy mekkora a céltól való távolság és milyen méretű a cél. Tehát minél nagyobb a távolság, és minél kisebb a cél mérete, annál hosszabb időbe telik a cél elérése. Habár Fitts törvénye nem digitális felületek használatára lett kitalálva, alkalmazható a gombok méretének és távolságának optimalizálásához nagyobb felületek esetében.

A fizikai interakciós költség feladatelemzéssel mérhető. A feladatelemzés egy olyan folyamat, melynek során megfigyelik a felhasználót, hogy lássák, miként teljesít egy feladatot és éri el a célját. Az egyik leggyakoribb és legismertebb feladatelemzési módszer a hierarchikus feladatelemzési diagram megrajzolása. A diagram egy céllal és egy forgatókönyvvel kezdődik, majd megmutatja a főbb feladatokat, melyeket végre kell hajtania a felhasználónak a cél eléréséhez.

A hierarchikus feladatelemzés azért segíthet csökkenteni a fizikai interakciós költséget, mivel megmutatja:

  • a feladatok számát, melyből kiderülhet, hogy van-e lehetőség csökkenteni azt, így egyszerűbbé tenni a folyamatot
  • a feladatok gyakoriságát, vagyis, hogy bizonyos feladatokat milyen gyakran kell megismételni
  • a feladat kognitív összetettségét: nagy terhelést jelent a figyelemre és a memóriára?
  • a feladat fizikai követelményeit, tehát, hogy a fizikai követelmények befolyásolják a felhasználó teljesítményét és kényelem-érzetét
  • a feladat végrehajtási idejét, azt hogy egyes lépések megtétele mennyi időt vesz igénybe

A weboldalaknál ezeket a törvényszerűségeket és megoldásokat mindig érdemes észben tartani, hogy kisebb interakciós költséggel használható weboldalt hozzunk létre.

The post Hogyan javítsd a felhasználói élményt az „interakciós költség” csökkentésével? appeared first on Webshark Blog.

]]>
7 elv a webdesignban, amit sokszor rosszul alkalmaznak a gyakorlatban http://blog.webshark.hu/2022/09/08/webdesign-elvek/ Thu, 08 Sep 2022 17:16:05 +0000 http://blog.webshark.hu/?p=10256 Akad néhány olyan szabály, melyeket a UX és a webdesign a tudományból és a pszichológiából emelt át. Ugyanakkor, mire ezek a tudományos kutatásokból elérnek egy céges weboldalakat készítő designerig, sok torzuláson esnek át, és talán már egyáltalán nem érvényesek, legalábbis nem használhatók átgondoldatlanul. A webdesign és a UX kapcsán mi is többször emlegettünk már olyan […]

The post 7 elv a webdesignban, amit sokszor rosszul alkalmaznak a gyakorlatban appeared first on Webshark Blog.

]]>
Akad néhány olyan szabály, melyeket a UX és a webdesign a tudományból és a pszichológiából emelt át. Ugyanakkor, mire ezek a tudományos kutatásokból elérnek egy céges weboldalakat készítő designerig, sok torzuláson esnek át, és talán már egyáltalán nem érvényesek, legalábbis nem használhatók átgondoldatlanul.

A webdesign és a UX kapcsán mi is többször emlegettünk már olyan elveket, melyeket könnyen elő lehet kapni tervezésnél. Nem kell gondolkodni a dolgokon, hiszen valaki már kitalálta az optimális megoldást, tudjuk mihez tartani magunkat, ráadásul tudományosan bizonyítva is van. A probléma csak az, hogy az a leegyszerűsített elv, amit mi gondolkodás nélkül alkalmazunk, az adott formában lehet, hogy már nem érvényes – hívta fel a figyelmet a Webdesigner Depot szerzője, aki felsorolt 7 olyan elvet, melyet sokan rosszul alkalmaznak.

Jakob törvénye

Jakob törvénye a nevét a híres UX-szakemberről, Jakob Nielsenről kapta, és azt mondja ki, hogy a felhasználók idejük nagy részét más weboldalakon töltik (nem a Tiéden), ezért azokat a weboldalakat részesítik előnyben, melyek ugyanúgy működnek, mint az általuk már megismert weboldalak.

Jakob törvénye ez alapján azt üzeni a designereknek, hogy felesleges a kísérletezés, a használhatóság nevében egyszerűen át kell venni a már bevett webdesign-mintákat az ismert weboldalaktól.

Ugyanakkor, bár az igaz, hogy a felhasználók könnyebben megértik az ismerős design-mintákat, ez nem jelenti azt, hogy mindenképpen kedvelnék is a megszokott elrendezésű weboldalakat.

Arra is vannak kutatások, hogy az új élmények nagyban meghatározzák az emberek hangulatát, javítják a memóriájukat. Ha a célod az, hogy egy emlékezetes, az emberekben maradandó nyomot hagyó weboldalt készíts, melyről pozitív benyomásuk támad az embereknek, akkor érdemes valami újdonsággal előrukkolni, és nem a megszokott sablont ismételni.

Célgradiens hipotézis

A célgradiens hipotézis szerint minél közelebb kerül a felhasználó a céljához, annál valószínűbb, hogy el is éri azt. Ez egy elég logikusnak tűnő elmélet, ami különösen a webáruházaknál lehet érvényes, ami azzal jár, hogy a vásárlás első szakaszát megpróbálják rendkívül egyszerűvé tenni, majd a bonyolultabb részeket a legvégére hagyni. Tipikusan ilyen megoldás, amikor nem terhelik a vevőt olyan „felesleges” információkkal a termékoldalon vagy a kosárba rakásnál, mint a szállítási díj. Az majd csak a legvégén derül ki.

Ugyanakkor azt is tudjuk, hogy a webáruházaknál rendkívül nagy a kosárelhagyás aránya (70 százalék feletti értékről beszélünk átlagosan). Nem tudjuk, hogy egy webáruházban pontosan mi tántorítja el az embereket a vásárlástól. Lehet, hogy sokan úgy kezelik a kosarat, hogy a kedvenc termékeiket gyűjtik össze benne, mert „kedvenc termék” funkció nincs az adott webáruházban. Persze az is lehet, hogy a látogató az utolsó pillanatban gondolja meg magát, amikor meglátja a teljes összeget, esetleg a vártnál jóval magasabb szállítási költség vagy bizonyos kiszállítási lehetőségek hiánya bátortalanítja el.

A lényeg az, hogy azzal, hogy a folyamat végére hagyjuk a nehezebb dolgokat vagy csak lényegi információkat, hogy azok ne zavarják a „vásárlás élményét”, nem biztos, hogy jót teszünk.

Miller törvénye

Talán az egyik leginkább félreértett szabály Miller törvénye, mely azt állítja, hogy az átlagos felhasználó mindössze 7 (plusz-mínusz kettő) dolgot tud a munkamemóriájában tartani. Nem az a gond, hogy ez ne lenne igaz, hanem az, hogy a webdesignban sokszor a navigáció kialakításánál jut érvényre, mégpedig a navigációs menü elemeinek korlátozásában.

Természetesen nem érdemes a navigációs menüt a végtelenbe nyújtani, ennek azonban nem Miller törvénye az oka, az ugyanis nem a megjelenített elemekre vonatkozik. Itt az átláthatatlanság vagy a lehetőségek nagy száma miatti döntési képtelenség lesz a korlátozó tényező. Miller törvénye pedig csak az olyan UI-elemekre vonatkoztatható, mint például a karuszelek.

Esztétikai-használhatósági hatás

Mi is emlegettük már korábban, hogy a szép weboldalakat általában használhatóbbnak tartják az emberek. Vagy legalábbis arra számítanak, hogy jól használható lesz, ha szépnek tűnik a weboldal.

A designerek ezért sokszor hivatkoznak erre a használhatatlanság határát súroló, de általuk esztétikusnak tartott megoldások alkalmazásánál. Gondoljunk például a különböző alig kontrasztos, maximálisan minimalista oldalakra, ahol alig lát vagy talál meg valamit a felhasználó.

Fontos tehát figyelembe venni, hogy csak azért, mert valami szép, még nem lesz jól használható. Lehet, hogy a felhasználó várakozásai pozitívak, ahogy meglátja egy szép weboldal főoldalát, azonban könnyen eljut a csalódottságig, ami nem lesz előnyös a weboldal számára.

Csúcs-vég szabály

A csúcs-vég szabály arról szól, hogy a felhasználók egy élmény csúcspontja és a vége alapján határozzák meg annak minőségét, nem pedig a használat során jellemző átlagos élményszintet veszik figyelembe. A designerek ezért sokszor használják ezt a szabályt, amikor egy élmény elsődleges célját, illetve a záró élményt megtervezik. Ez a kettő pont, egy webáruház esetében például a termék kosárba rakása, illetve a végső megrendelés lehet.

A csúcs-vég szabály ugyan létezik és érvényes, ugyanakkor nem lehet olyan nyitott élményekre alkalmazni, mint amilyen egy weboldal használata. Ilyenkor ugyanis nehéz meghatározni, hogy hol van egy felhasználó esetében a kiinduló és a záró pont. Persze fel lehet fogni minden egyes interakciót a weboldalon csúcspontként, és az is feltételezhető, hogy melyik ezek közül a legfontosabb, de ez nem biztos, hogy érvényes lesz.

Fitts törvénye

Az 1950-es években Fitts azt állapította meg, hogy egy célpont távolsága és mérete hatással van arra, hogy mennyire hatékonyan sikerül kiválasztania a felhasználónak az adott célpontot. Ez a mobilalkalmazásoknál akként lett interpretálva, hogy egy kisebb gombot nehezebb megérinteni, és ha messze van az a kisebb gomb, akkor még nehezebbé válik. Ugyanakkor mobiloknál nem igazán vannak olyan távolságok, melyek befolyásolnák az érintési pontosságot.

Fitts törvénye persze jól alkalmazható asztali gépes, monitoros megjelenésnél, mivel egy nagyméretű monitoron már vannak olyan távolságok, melyek hatással lehetnek a pontosságra. Ugyanakkor monitorok esetében jellemzően egeret használunk, ami lehetővé teszi a megfelelő korrekciót a kattintás előtt, hiszen nem a levegőben érkező ujjról van szó, hanem egy szépen kirajzolódó kurzornyílról.

Mobilon pedig az érinthető elemeknek elég nagynak kell lenniük ahhoz, hogy könnyen kiválaszthatók legyenek, ennek érdekében megfelelő távolságot is érdemes tartani közöttük, ugyanakkor az elhelyezkedésük távolságának csekély hatása van a használatra.

Occam borotvája

Occam borotvája elv szerint két választási lehetőség (magyarázat) közül a „kevesebb feltételezést” tartalmazó (leegyszerűsítve: az egyszerűbb) választás a jobb. Ugyanakkor a webdesignban nem kell feltételezésekkel dolgozni, ugyanis van lehetőség tesztelésre, mérésre, elemzésre. Vagy, ha nincs is lehetőségünk tesztelésre, akkor is dolgozhatunk más designerek gyakorlati tapasztalatait figyelembe véve.

Occam borotvája tehát egy klasszikus design-csapda, és a csapda elkerülése annak felismerésével történik, hogy nem a webdesigner feltételezései számítanak, hanem a felhasználó. Tehát az elvet a tervezési folyamat során nem lehet használni.

The post 7 elv a webdesignban, amit sokszor rosszul alkalmaznak a gyakorlatban appeared first on Webshark Blog.

]]>
Néhány új technika, amit érdemes lehet használni, ha weboldalt készítenél (Frissítve, 2022.09.14.) http://blog.webshark.hu/2022/07/21/weboldal-keszites-technikak/ Thu, 21 Jul 2022 18:14:30 +0000 http://blog.webshark.hu/?p=10171 Ahogy a legtöbb iparágban zajlik a fejlődés, úgy a weboldaltervezés is folyamatosan változik, megjelennek új technikák, megoldások, melyekkel még jobb weboldalakat lehet készíteni. (Frissítés, 2022.09.14. – Bővítettük ezt a fejezetet: Mi az az empátia-térkép? És hogyan használható a webdesignban? használható oldaltérkép?) Most nem új szoftverekről vagy a technológiai háttérről lesz szó, hanem olyan UX tervezésben […]

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.

]]>
Ahogy a legtöbb iparágban zajlik a fejlődés, úgy a weboldaltervezés is folyamatosan változik, megjelennek új technikák, megoldások, melyekkel még jobb weboldalakat lehet készíteni. (Frissítés, 2022.09.14. – Bővítettük ezt a fejezetet: Mi az az empátia-térkép? És hogyan használható a webdesignban? használható oldaltérkép?)

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ó.

Az empátia-térkép (Forrás: Nielsen Norman Group)

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.

]]>
Mi az a neubrutalizmus a webdesignban? http://blog.webshark.hu/2022/06/02/neubrutalizmus/ Thu, 02 Jun 2022 14:58:05 +0000 https://blog.webshark.hu/?p=10064 Ha azt hiszed, hogy még mindig a brutalizmus a legmenőbb trend a webdesignban, akkor tévedtél: már egy ideje velünk él a neubrutalizmus, mely a brutalizmus és a modern, minimalista oldalak kombinációja. De milyen jellemzői vannak a neubrutalista oldalaknak? Korábban már ejtettünk szót a webdesignban megjelenő brutalizmusról, mely az építészetben már évtizedekkel ezelőtt megjelent brutalista irányzatból […]

The post Mi az a neubrutalizmus a webdesignban? appeared first on Webshark Blog.

]]>
Ha azt hiszed, hogy még mindig a brutalizmus a legmenőbb trend a webdesignban, akkor tévedtél: már egy ideje velünk él a neubrutalizmus, mely a brutalizmus és a modern, minimalista oldalak kombinációja. De milyen jellemzői vannak a neubrutalista oldalaknak?

Korábban már ejtettünk szót a webdesignban megjelenő brutalizmusról, mely az építészetben már évtizedekkel ezelőtt megjelent brutalista irányzatból nyert ihletet. Az eredeti brutalizmusra jellemző, hogy tartózkodik a díszítésektől, nyers, durva befejezetlen felületek, szokatlan formák, kemény anyagok jelennek meg. A Londonban látható, betonból öntött Barbican egy klasszikus példája a brutalizmusnak.

A weben a brutalista oldalak az egyszerűen befogadható, tömegízlésnek megfelelő, kellemes, jól használható oldalak mellett jelentek meg néhány éve a maguk durvaságával, nyersességével és kényelmetlenségével. Ezen az oldalon találsz rájuk néhány példát.

A neubrutalizmus aztán az envantotuts+ bejegyzése szerint ezt a trendet viszi tovább, illetve emeli eggyel magasabb szintre. Megtartotta a brutalizmus jellemzőit, csak épp tovább kombinálta a szokatlan stílust modern animációkkal, illusztrációkkal, tipográfiával. Egyelőre a neubrutalizmus még nem egy hivatalos kifejezés, de a webdesign világában már így emlegetik az új stílusirányzatot, így nem árt képben lenni.

Mi jellemző a neubrutalizmusra?

  • Nem túl szép: lehet, hogy nem tetszik a stílus, de egy kis változatosságot hoz a modern, minimalista weboldalak világába, melyek már évek óta jellemzik a webet. A neubrutalizmus révén egy kicsit „elrontottnak” tűnő képek, szokatlan színek, meglepő designmegoldások jelennek meg a trendet követő weboldalakon. Az biztos, hogy felhívják magukra a figyelmet azzal, hogy kilógnak a modern webdesingtrendekből.
  • Ütköző színek: a neubrutalizmus egy olyan webdesign trend, mely nem fél különbözőnek lenni, és ez a színekben is kifejeződik, melyek nem a „több néha kevesebb” elvét követik. Olyan párosításokat használnak a színeknél, melyek nem igazán felelnek meg a megszokott színsémáknak.
  • Hiányzó színátmenetek: az elmúlt évek legnagyobb szín-trendjébe nem áll bele a neubrutalizmus, marad a flat színeknél és ezek pop-art stílushoz közeli megjelenítésénél.
  • Modern tipográfia: míg a brutalizmusra a furcsa, torz tipográfia volt jellemző, addig a neubrutalizmus inkább a modern tipográfiai szabályokat követi, melyek jobb olvashatóságot hoznak. A furcsa hátterek és színek így találkoznak a jól olvasható, geometrikus szövegekkel.
  • Animációk: ráadásul az animációk révén egy modernebb megjelenést kapnak a neubrutalista oldalak.

Hermione Wright itt indokoltnak látja még kitérni külön is a tipográfiára, ugyanis a neubrutalista oldalakra jellemző, hogy szinte mindegyik furcsa, groteszk betűkkel íródott címsorokat használ. De ha nem is sorolhatók a groteszk betűk közé, olyan display fontokról van szó, melyek szokatlan megjelenésükkel erős hatást gyakorolnak a felhasználóra. Ez jól látható az alábbi példán is:

Egy másik példa lehet a Figma, ahol eltűntek az árnyékok, viszont a képeket éles sötét fekete vonalak veszik körül. Ami a színeket illeti, a narancssárga és a sárga ütköző árnyalatai jelennek meg, melyek nem könnyű befogadni, viszont feltűnőek.

De furcsa színpárosítások ezen az oldalon is megjelennek:

A következő oldal is elég nyersre, és a megszokottól eltérőre sikerült, ami a hagyományos közösségi médiás ikonográfiától való eltérésben is megjelenik:

Ez lenne tehát a legújabb trend, a neubrutalizmus röviden bemutatva, ha tetszik, akkor legyél kreatív, és vágj bele! Persze nem muszáj egyből minden webdesign-elvet a kukába dobni, azonban felhasználhatsz elemeket a neubrutalizmusból, hogy egyedibbé, megkülönböztethetőbbé tedd a weboldalad.

The post Mi az a neubrutalizmus a webdesignban? appeared first on Webshark Blog.

]]>
Hogyan jeleníts meg felhasználói értékeléseket a weboldaladon? (Frissítve, 2022.01.25.) http://blog.webshark.hu/2021/09/09/ertekelesek/ Thu, 09 Sep 2021 18:40:42 +0000 http://blog.webshark.hu/?p=9464 Amikor az emberek meg akarnak vásárolni egy terméket, akkor jelentős mértékben befolyásolja a döntésüket, hogy a többi felhasználó miként értékeli azt. (Frissítés, 2022.01.25. – Egy új fejezettel bővítettünk: Mit tehetsz a negatív értékelésekkel?) A felhasználói értékelések mutatják meg az emberek számára, hogy milyen termék „jó” és „rossz”. A Baymard Intézet vizsgálata szerint a felhasználók 95 […]

The post Hogyan jeleníts meg felhasználói értékeléseket a weboldaladon? (Frissítve, 2022.01.25.) appeared first on Webshark Blog.

]]>
Amikor az emberek meg akarnak vásárolni egy terméket, akkor jelentős mértékben befolyásolja a döntésüket, hogy a többi felhasználó miként értékeli azt. (Frissítés, 2022.01.25. – Egy új fejezettel bővítettünk: Mit tehetsz a negatív értékelésekkel?)

A felhasználói értékelések mutatják meg az emberek számára, hogy milyen termék „jó” és „rossz”. A Baymard Intézet vizsgálata szerint a felhasználók 95 százaléka az értékelésekre támaszkodik a termékek kapcsán.

Az értékelések persze csak akkor működnek jól, ha jelentős a felhasználói bázis: akkor lesz értelme az egyes termékek közötti összehasonlításnak, ha azokra relatíve nagy számú szavazat és értékelés érkezik. Ha a termékek csak egy-két értékelést kapnak, az még nem hat meggyőzően a látogatókra.

Milyen legyen egy jó értékelési rendszer?

Először is, minél egyszerűbb, annál jobb. Ez azt jelenti, hogy könnyen tudjanak értékelni egy adott terméket a felhasználók. Az egyik ilyen egyszerű értékelési megoldás a like-dislike, mint a videóknál a YouTube-on. Ez az úgynevezett bináris értékelési rendszer, a mindent vagy semmit el alapján működik, és leginkább olyan tartalmak esetében működik jól, mint egy cikk, egy zene vagy egy videó.

Egy másik értékelési megoldás a csillagozás, mely jellemzően egy egytől ötig terjedő skálán történik. Ilyenkor az egy csillag azt jelenti, hogy az adott termék rossz, míg az ötcsillagos értékelés mutatja a kiváló terméket. Ezt a módszert jellemzően a webáruházak használják.

Ötcsillagos értékelés

Előfordulnak ugyanakkor több csillagot magukba foglaló skálák is, jellemzően egytől tízig lehet csillagozni például filmeket. Ez egy kifinomultabb értékelést tesz lehetővé a felhasználók számára.

Amikor a felhasználó értékel egy terméket, akkor az oldalnak vissza kell jeleznie számára, hogy az értékelést rögzítette a weboldal.

Emellett az értékelésnek világosan kell kommunikálnia azt is, hogy éppen mit értékel a felhasználó. Tehát, amikor valaki vesz egy terméket egy webáruházban, akkor biztosan kell tudnia, hogy magának a terméknek a minőségét, kinézetét, stb. értékeli, vagy pedig a webáruház szolgáltatását.

Végül pedig minden értékelési rendszernél fontos annak hitelessége is. Amikor az emberek egy weboldalon csak pozitív értékelésekkel találkoznak, akkor gyanút fognak az értékelés hitelességét illetően. Az embereknek azt kell érezniük, hogy megbízhatnak a többi ember értékelésében, ezért soha se próbáld meg manipulálni egy-egy termék értékelését annak érdekében, hogy jobb színben tüntesd fel, mert visszaüthet: bizalmatlanná válnak az érdeklődők.

Hogyan szerezz értékeléseket?

Az itt következő tanácsok a leginkább webáruházak értékelési rendszerei esetében használhatók.

  • Az értékelési lépést a vásárlás utánra hagyd: vagyis akkor értékelhessen egy terméket a felhasználó, ha már megvette azt, és használja egy ideje. Így sokkal értékesebb véleményt fogalmazhat meg.
  • Tedd lehetővé a fotófeltöltést: a képek hatásosabbak, mint a szavak. A felhasználói értékelések pedig sokkal értékesebbé válnak a képek révén, a látogatók könnyebben megérhetik, mit is akar mondani az értékelő. Ráadásul a fotók növelik az értékelés hitelességét is.
  • Meghatározhatsz speciális értékelési szempontokat is, hogy részletesebb visszajelzést szerezhess a vevőktől.

Hogyan jelenítsd meg az értékeléseket a weboldaladon?

Amikor a felhasználók egy termék értékelésére kíváncsiak, akkor első körben egy teljes képet szeretnének látni erről. Ha ez megvolt, utána elmélyednek a részletekben: elolvasnak egy-egy véleményt, hogy pontos képet kapjanak a termékről. Ezért fontos, hogy az értékelési rész tetején megjelenjen az értékelések összefoglalása. Sokan kíváncsiak arra, hogy ezt miként számítja ki a weboldal, ezért ajánlott, hogy erről is tájékoztatást adj az értékelések mellett.

Megjelenik az összefoglalás, átlaggal, szűrési lehetőséggel

Emellett a felhasználók azt is igénylik, hogy belekattinthassanak az értékelések összefoglalójába, vagyis tudjanak értékeléseket szűrni a csillagok száma alapján.

Érdemes lehet kiemelni a leghasznosabb pozitív és negatív értékelést is, hiszen a legtöbb felhasználó, aki kíváncsi az értékelésekre, elsősorban azt szeretné látni, hogy milyen előnyökkel és hátrányokkal kell szembenéznie a termék esetében. Ha a legjobban használható kedvező és kritikus szavakat is kiemeled nekik, azzal időt spórolsz meg számukra.

Kiemeli a leghasznosabb véleményt

Rábízhatod egyébként a felhasználókra, hogy maguk válasszák ki a leghasznosabb értékelések azáltal, hogy az egyes értékeléseket is értékelni lehet, egy egyszerű, bináris rendszerben, tehát kedvelésekkel és dislike-okkal.

Végül pedig tedd lehetővé az érdeklődők számára azt is, hogy szűrni tudjanak az értékelések között nem csak a csillagok száma alapján, hanem mondjuk előre rendezhessék a legújabb értékeléseket, a leghasznosabb értékeléseket, vagy éppen a fotót is tartalmazó értékeléseket.

Frissítés, 2022.01.25.:

Mit tehetsz a negatív értékelésekkel?

Lehet akármilyen jó a terméked vagy a szolgáltatásod, biztosra vehető, hogy becsúszik az értékelések közé egy-két rosszabb minősítés is. Ha sok van belőlük, akkor az komoly gondot jelez, és máshol kell keresni a megoldást, de ha csak néhány negatív értékelés rontja a megítélésed, akkor ezeket kell kezelni.

De kezdjük ott, hogy egy kutatás szerint az emberek 97 százaléka hasznosnak találja a szöveggel és pontszámmal (akár csillagokkal) ellátott értékeléseket. 54 százalékuk csak akkor lép kapcsolatba egy céggel (vásárol, rendel tőle), ha legalább 3-5 értékelést elolvasott előbb. Sokan persze ennél is több értékelésen rágják át magukat, és mérlegelik, hogy megbízható-e a cég, melyet kiszemeltek.

Ezért nem igazán jó, ha az értékelések között negatív értékelések is megjelennek. De mit lehet ebben a helyzetben tenni? Leginkább azt, hogy válaszolsz, reagálsz rájuk. A már említett kutatás ugyanis megállapította, hogy 10-ből 9 ember nagy eséllyel szemet huny egy kedvezőtlen értékelés felett, amennyiben az érintett cég reagált arra, mégpedig úgy, hogy ezzela reakcióval megfelelően kezelte a felmerülő problémát.

Reagálás és jól kezelt probléma esetén egyébként arra is lehet számítani, hogy ez hatással lesz értékelőre is, aki felülvizsgálja korábbi értékelését, és javít rajta, ha megfelelő kiszolgálást és figyelmet kap panasza kezelésénél. Legalábbis az esetek harmadában ez történik, amennyiben a cég megfelelően reagál 24 órán belül az értékelésre.

Érdemes itt megemlíteni azt is, hogy míg az emberek 97 százaléka bízik a szöveges és egyszerre pontszámos értékelésekben, 59 százalékuk egyáltalán nem bízik a szöveg nélküli csillagozásos értékelésekben. Ezeket ugyanis nem tartják kellően hitelesnek.

Ez azért fontos, mert sokszor lehet találkozni olyan egycsillagos értékelésekkel, melyeknél nincs szöveg, tehát a felhasználó nem indokolja meg semmivel a döntését. E mögött bármilyen motiváció meghúzódhat, és ezt az emberek is tudják. Ez annyiból szerencsés, mivel az ilyen egycsillagos, szöveg nélküli értékelésekre még válaszolni sincs módod, hiszen mit is írhatnál, ha nincs megfogalmazva a probléma?

Az említett vizsgálat egyébként arra is kitér, hogy a látogatók leginkább a közepes hosszúságú, mintegy 16-50 szavas értékeléseket tartják a leghasznosabbnak.

Végül azt is érdemes megemlíteni, hogy az emberek fele nem igazán bízik akkor az értékelésekben, ha tudja, hogy az érintett cég kéri azt az ügyfeleitől. A válaszadók 64 százaléka ugyanis ilyenkor azt gondolja, hogy az ilyen vélemények elfogultak. Ennek ellenére persze az emberek 71 százaléka hajlandó értékelés adni, amennyiben a cég árengedménnyel vagy más ösztönző alkalmazásával bírja rá erre.

The post Hogyan jeleníts meg felhasználói értékeléseket a weboldaladon? (Frissítve, 2022.01.25.) appeared first on Webshark Blog.

]]>
Hogyan használj egyéni egérmutatókat a weboldaladon? http://blog.webshark.hu/2021/08/19/egermutato/ Thu, 19 Aug 2021 16:55:03 +0000 http://blog.webshark.hu/?p=9414 Komoly trend a webdesignban most az egyéni egérmutatók vagy egérkurzorok használata, melyek első pillantásra csak a weboldalak egy újabb stíluselemének tűnnek, de ennél több rejlik bennük. Amikor egy weboldalt monitoron nézel, akkor az egérmutató egy fontos elem, hiszen ez köti össze a felhasználót a weboldallal, ennek használatával tud cselekedni, hozzáférni a weboldal funkcióihoz. Ha elég […]

The post Hogyan használj egyéni egérmutatókat a weboldaladon? appeared first on Webshark Blog.

]]>
Komoly trend a webdesignban most az egyéni egérmutatók vagy egérkurzorok használata, melyek első pillantásra csak a weboldalak egy újabb stíluselemének tűnnek, de ennél több rejlik bennük.

Amikor egy weboldalt monitoron nézel, akkor az egérmutató egy fontos elem, hiszen ez köti össze a felhasználót a weboldallal, ennek használatával tud cselekedni, hozzáférni a weboldal funkcióihoz. Ha elég kreatív vagy, akkor fel tudod használni a megváltoztatott egérmutatót arra, hogy javítsd a weboldalad interaktivitását, illetve további cselekvésre bírd a látogatóidat.

Mi az az egyedi egérmutató?

Egyedi kurzornyílról akkor beszélünk, amikor az egér eredeti nyíl-ikonját megváltoztatjuk. Ezt megteheted az operációs rendszer beállításai között is, de ugyanígy meg lehet tenni a böngészőben is az egyes weboldalak által irányítottan.

Ehhez kell a HTML, a CSS és egy kicsit a JavaScript segítsége, de viszonylag egyszerűen létrehozható egy egyedi kurzor-design a weboldaladra. Az egérmutatón kívül azonban olyan elemeket is megváltoztathatsz a weboldaladon, mint a hover-animációk, a kattintási-effektek, ezáltal pedig jelentősebb hatást gyakorolhatsz a látogatódra a weboldaladdal, mint az alapértelmezett beállítású weboldallal.

Miért érdemes?

Egy egyedi animációkkal, parallax-effektekkel, egyéb mozgó elemekkel szépen felépített oldalon az élményt egy egyedi egérmutatóval tudod igazán teljessé tenni, vagyis a felhasználói élmény javulásával és az erőteljesebb hatással az eredmények is jobbak lesznek.

Egy egyedi egérmutató nem csak figyelemfelkeltőbb vagy szórakoztatóbb lehet az emberek számára, de még abban is segíthet, hogy megmutassa: mikor hová kattintsanak, és ott mit csináljanak. De a lényeg, hogy a weboldaladat kiemeli a tömegből, márpedig a megkülönböztethetőség fontos tényező a marketingben is.

Mire figyelj a tervezésénél?

Mielőtt nekiállnál kitalálni valamilyen egyedi egérmutatót, érdemes néhány szempontot figyelembe venni, hogy ne essél túlzásba, és ne tedd használhatatlanná a weboldaladat.

Összpontosíts az interakciókra!

Az egyedi egérmutatóval nem csak az a célod, hogy megmutasd, milyen kreatív vagy, hanem az, hogy több interakciót érj el. Rá kell bírnod a felhasználókat, hogy többet kattintsanak az oldalon, kattintsanak a hivatkozásokra, gombokra, képekre.

Ezért nem elsősorban az a fontos, hogy az egérmutató különleges legyen, hanem az, hogy a szabványmegjelentéstől való eltérése tovább javítsa a felhasználói élményt. Az ugyanakkor kétségtelen, hogy a legtöbb esetben az eltérő vizuális megjelenés lesz az egyetlen indok, ami egy egyedi egérmutató mögött áll.

Használj többféle designt!

Első pillantásra nagyon szórakoztató lehet neked és a felhasználónak is olyan kurzort használni, aminek rendkívül furcsa a formája, és megmosolyogtatja a látogatókat. Ez az öröm azonban csak addig tart, amíg az első kisebb linkre rá nem kell kattintani.

Egy egyedi mutatóval, ez nem feltétlenül fog menni, ezért a megoldás az, hogy például menük esetében alakuljon át az egérmutató egy egyszerűbb, de jobban használható mutatóvá. Ez segít elkerülni a felhasználói frusztrációt.

Gondold át, hogy érdemes-e!

Az egyedi egérmutatók nem alkalmasak minden weboldalon a használatra. Van oka annak, hogy a nagy weboldalakon soha nem fogsz egyedi kurzorral találkozni, és ez nem az, hogy nem képesek technikailag kivitelezni, vagy nincs elég fantáziájuk.

Az egyedi kurzorok általában olyan, attraktív, egyedi weboldalakon mutatnak jól, vagy hasznosak, melyek egy különleges terméket vagy szolgáltatást mutatnak be, illetve fel akarják hívni a figyelmet a cég egyediségére.

Ne feledd: nem működik mobilon!

Azt ne felejtsd el, hogy mobilon nem használunk egérmutatókat, ezért ne jelenjenek meg, mert csak zavarni fogják az embereket, hiszen nem láthatók jól és feleslegesek.

Néhány példa egyedi egérmutatóra

Az egyik legeredetibb példa a 14islands oldalán látható, ahol a weboldal minden részén átalakul a mutató: ahol videó van, ott lejátszás ikonná, hogy jelezze, kattints a megtekintéshez, ahol pedig további részleteket érhetsz el, ott kiadja erre az utasítást a „View” megjelenítésével. A legjobb azonban az oldal alja, ahol átalakul ceruzává az egérmutató, és rajzolhatsz az oldalra, ami aztán egy idő után eltűnik.

Egy jó példa egyedi egérmutatóra

A Komnata kreatív ügynökség weboldalán is hasonló rajzolós megoldással találkozhatsz. Ennél többet ugyan nem tesz az egyedi egérmutató, ezzel viszont elfoglalja magát egy időre a látogató, és mindenképpen emlékezetébe vésődik a cég weboldala.

Az Sssolitaire oldalán nem az egérmutató alakul át, csak megjelenik körülötte egy körben forgó utasítás, mely jelzi, hogy mit lehet tenni az adott oldalon. És persze, ha megteszed, akkor jön a meglepetés.

A felhasználó irányítására használják az egérmutatót ezen az oldalon is, ahol aszerint alakul át, hogy épp milyen funkciót tartalmaz az adott terület a weboldalon, arra ad utasítást, ami elérhető.

Egy másik példa átalakuló egérmutatóra

A Mutt Agency oldalán a bejegyzés írásakor arra látunk példát, amikor az egérmutató átalakul felfelé mutató nyíllá, amikor felfelé mozdul, illetve lefelé mutató nyíllá, amikor lefelé. Ez segítheti a navigációban a felhasználókat, illetve arra ösztönzi őket, hogy felfedezzék a weboldalt.

A CQQL Records oldalán egy egészen másféle nyíllal találkozol, melynek egyedül az eltérő megjelenés, a weboldal vizuális designjához való igazodás a célja.

Az Andy Warholnak szentelt oldalon nincs igazán többletfunkciója az áttetsző körré alakuló egérmutatónak, csak hogy eltérjen a megszokottól, valami ötletes vizuális megoldást adjon az oldalnak azzal, hogy ellentétes színek jelennek meg alatt.

Hogyan hozd létre az egyedi egérmutatót?

Többféle megoldás is működhet, ha egyedi kurzor létrehozásáról van szó. Használhatod önmagában a CSS-t, de keverheted egy kis JavaScripttel is, ha egy haladóbb megjelenést akarsz elérni animációkkal és effektekkel.

Egy jó megoldás a CSS-ben a „cursor property” beállítása, mely már elég sok lehetőséget kínál számodra. Ennél egyszerűbb lehet, ha kimásolsz egy kódrészletet, például innen, és ezzel gyakorolsz. Ugyanakkor persze a YouTube-on számot tutorial videót is elérhetsz, melyek segítenek ebben.

Összességében elmondható, hogy ha már ismered a CSS-t és a JavaScriptet, akkor rendkívül eredeti és szép egérmutatókat hozhatsz lére a weboldaladra. A kulcs azonban, hogy tudnod kell, mikor használhatod őket, illetve mikor érdemes használnod.

The post Hogyan használj egyéni egérmutatókat a weboldaladon? appeared first on Webshark Blog.

]]>
Te is tökéletes weboldalt szeretnél? http://blog.webshark.hu/2021/07/22/te-is-tokeletes-weboldalt-szeretnel/ Thu, 22 Jul 2021 16:47:35 +0000 http://blog.webshark.hu/?p=9294 Sok emberben erősen él a tökéletességre törekvés, ami megjelenik ott is, hogy tökéletes weboldalt szeretnének. De ahogy a való életben sem tökéletes semmi, úgy a webdesignban is csak magadnak okozol gondot, ha irreális célt tűzöl ki magad elé. 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 […]

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

]]>
Sok emberben erősen él a tökéletességre törekvés, ami megjelenik ott is, hogy tökéletes weboldalt szeretnének. De ahogy a való életben sem tökéletes semmi, úgy a webdesignban is csak magadnak okozol gondot, ha irreális célt tűzöl ki magad elé.

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.

]]>
Mit tud a Google új designnyelve, a Material You? http://blog.webshark.hu/2021/06/03/material-you/ Thu, 03 Jun 2021 17:10:10 +0000 http://blog.webshark.hu/?p=9094 A Google nemrég bemutatta új designrendszerét, a Material You-t, mely a Material Designt váltja, először Androidon, majd az összes Google-termékben. De miben különbözik a Material You az elődjétől? A Google által készített alkalmazások régen borzalmas designnal készültek. Ronda volt az Android, rondák a Google-oldalak. 2014-ban a felhasználói élménnyel kapcsolatos hiányosságok kiküszöbölésére megszületett a Google-nél az […]

The post Mit tud a Google új designnyelve, a Material You? appeared first on Webshark Blog.

]]>
A Google nemrég bemutatta új designrendszerét, a Material You-t, mely a Material Designt váltja, először Androidon, majd az összes Google-termékben. De miben különbözik a Material You az elődjétől?

A Google által készített alkalmazások régen borzalmas designnal készültek. Ronda volt az Android, rondák a Google-oldalak. 2014-ban a felhasználói élménnyel kapcsolatos hiányosságok kiküszöbölésére megszületett a Google-nél az egységes megközelítés a tervezésre: a Material Design, amiről mi is írtunk megjelenése után.

Hogyan változott a megközelítés a Material You-nál?

A Material Design alapján újratervezték a Google valamennyi alkalmazását, így a korábbi ronda oldalakat világos kártyákkal cserélték le. A támogató animációk egyszerűek és hatékonyak lettek. A Google ezt a deisgnnyelvet megosztotta a fejlesztőkkel is, így mások is alkalmazhatták az alkalmazásaikban az elveket.

A problémát az jelentette, hogy az új designnyelv nem hagyott sok teret a kreativitásra. Ezt a problémát kellett tehát kiküszöbölni, amit a Google tervezéssel foglalkozó alelnöke, Matias Duarte is érzékelt. Mint mondta, következetes rendszert alkot a Material Design, de az anyagszerűség, a megjeleníteni kívánt „papír” túlságosan is dominált a felületeken, ami egy kicsit unalmassá tette azt.

A Google ezt a problémát évekig próbálta megoldani, végül megszületett a megoldás: az Android 12-vel érkező Material You, a Material Design utódja, melyet az Android 12 beta verziójában már ki is lehet próbálni.

A Material You bőkezűen használja a negatív tereket és a vizuális egyszerűséget, mely a Material Designra is jellemző volt. Ugyanakkor dinamikus animációk is kerültek bele bőven, valamint kevésbé szigorú az ikonoknál és a rácshoz igazodásnál.

Személyre szabható lett a design

De ami a legfontosabb, és ami a „You” részt illeti, sokkal inkább személyre szabható a megjelenés, mint elődjénél. Ez pedig azért jó, mert a felhasználók így sokkal inkább magukénak érezhetik a rendszert.

Korábban nem látott lehetőséget kínál a kontraszt, a méret, a szövegek és ikonok vonalszélességének változtatására. Ha például a felhasználó beállít egy hátteret, akkor a rendszer automatikusan elemzi a színeket és egyedi színpalettákat kínál a felhasználói felülethez.

Duarte szerint a design és a technológia jövője azt, hogy mindenki személyre szabott designt kap a jövőben. A Material You-val pedig elkezdődött egy olyan folyamat, mely ebbe az irányba mutat.

Minderre mondhatod, hogy a személyre szabott operációs rendszerben semmi új nincs, hiszen már az első Macintosh is lehetővé tette különböző háttérképek és betűtípusok kiválasztását, de ugyanígy a korai Windows-verzióknál is megváltoztathattuk a felület színeit.

A különbséget ehhez képest az jelenti a Material You-nál, hogy a felület élőnek tűnik, minden interaktív, a design reagál, mozog, változik. Ehhez a rugalmassághoz adódik még hozzá, hogy a felület elemei nem statikus képekből állnak össze, hanem könnyen módosíthatók. A designspecifikációk ezért már nem egy dokumentumba kerülnek, hanem le vannak kódolva. Ezáltal pedig a felületnek nagyobb része változtatható valós időben.

Az, hogy a felületet a felhasználó minden részletében alakíthatja, talán tehernek tűnhet egyesek számára, ezért kínál a Google olyan opciót, mellyel egyszerűbbé tehető a rendszer megjelenésének beállítása. Ide tartozik, hogy a háttérképhez igazítja a rendszer a színeket az Android 12-ben. Márpedig az emberek 60 százaléka rendszeresen változtatja a háttérképét a mobilján, és ez a kép sokszor személyes. Így pedig a rendszer valamennyi színe egyedivé válik.

Milyen jellemzői vannak még a Material You-nak?

Lekerekített sarkok

A Material You-ban mindenhol lekerekített sarkokkal találkozhatsz a felhasználói felület egyes elemeinél. Némelyik sarok teljesen, más kevésbé lekerekített, de a megjelenés sokkal simábbnak és kellemesebbnek tűnik.

Egyszerű és egyedi formák

A Material You-ban sokféle formával találkozhatsz, akadnak közöttük egyszerűek, ugyanakkor vannak egyedi megjelenésűek is. A Google tervezői ezzel arra az új trendre reagáltak, mely a formákat állította középpontba. A widgetek számára is különféle, néha egészen meglepő formákat kínálnak, így a Material Designhoz képest tényleg sokkal egyedibbnek tűnik a megjelenés.

Nagyobb és világosabb

Nagyobbá váltak az egyes elemek a Material You-ban, így nőttek a widgetek, a gombok, a navigációs panel. Ezáltal kevesebb dolog terheli a felhasználót, azonban ezek a fontosabbak közül kerülnek ki. Az egész mögött az egykezes használatra optimalizálás áll. Minél nagyobb egy elem, annál könnyebb érintéssel kezelni, csúsztatni a hüvelykujjunkkal.

Monokróm és telített színek

A monokróm és telített színek által sokkal erőteljesebbnek tűnik a felületek megjelenése. A már említett, háttérképhez igazodó színek is azáltal működnek, hogy a Google lehetővé teszi a felület színeinek nagyobb telítettségét és a monokróm megjelenést.

Nagyobb szövegek

A nagyobb szövegek könnyebben olvashatók, jobban átláthatók. A szövegek méretének növekedése már jó pár éves trend, mely még mindig jelen van a webdesignban, hiszen fontos az akadálymentesség, a jó olvashatóság, érthetőség.

És bár a Material You az Android 12-vel érkezik, a teljes Google-világban meg fog jelenni az elkövetkező években. Egyelőre viszont még beta állapotú a Material You, ezért várhatók benne változások, akár új jellemzők, tulajdonságok is megjelenhetnek.

The post Mit tud a Google új designnyelve, a Material You? appeared first on Webshark Blog.

]]>
Milyen tényezők befolyásolják a weboldalad hitelességét? És hogyan javíthatsz rajta? (Frissítve, 2022.04.11.) http://blog.webshark.hu/2021/05/27/hitelesseg/ Thu, 27 May 2021 17:22:12 +0000 http://blog.webshark.hu/?p=9067 Ha a weboldaladdal meg akarod győzni a látogatókat, konverziókat akarsz elérni, leadeket és ügyfeleket szerezni, akkor hiteles weboldalra van szükséged. De mit jelent a hitelesség a weben? És hogyan érhető el? (Frissítés, 2022.04.11.: Most kibővítettük néhány új ponttal a hitelességet rontó tényezők listáját). Az emberek meglehetősen bizalmatlanok a neten is, miközben a cégek és a […]

The post Milyen tényezők befolyásolják a weboldalad hitelességét? És hogyan javíthatsz rajta? (Frissítve, 2022.04.11.) appeared first on Webshark Blog.

]]>
Ha a weboldaladdal meg akarod győzni a látogatókat, konverziókat akarsz elérni, leadeket és ügyfeleket szerezni, akkor hiteles weboldalra van szükséged. De mit jelent a hitelesség a weben? És hogyan érhető el? (Frissítés, 2022.04.11.: Most kibővítettük néhány új ponttal a hitelességet rontó tényezők listáját).

Az emberek meglehetősen bizalmatlanok a neten is, miközben a cégek és a webáruházak próbálják minden áron megszerezni a figyelmüket, elárasztják őket hirdetésekkel, melyekből leginkább az látszik, hogy sokat tudnak róluk.

Ilyen helyzetben az emberekben felmerül, hogy a sok ajánlat közül melyikben bízhatnak meg. Próbálják megtalálni a hitelesnek tűnő cégeket, mielőtt bármilyen termékükért is pénzt adnának. A hitelesség a weboldalnál kezdődik, a felhasználók keresik annak jeleit, hogy megbízhatnak-e egy cégben vagy sem.

Ráadásul nem csak az emberek figyelme van kihegyezve a hitelességre, hanem a Google-é is, melynek kifinomult algoritmusa alaposan elemzi a weboldalakat és figyel azok minőségére, megbízhatóságára. A weboldaladnak tehát nem csak a felhasználókat, hanem a mesterséges intelligenciát használó algoritmusokat is meg kell győznie, ami nem egy egyszerű feladat.

A weboldalad hitelessége emiatt a rangsorolásodra is hatással van. A Google minden erejével arra törekszik, hogy az embereknek releváns, megbízható weboldalakat mutasson a találati oldalakon. És ezt a feladatát rendkívül komolyan veszi, még biztonsági figyelmeztetéseket is kiad, hogy a felhasználókat megóvja a nem biztonságos weboldalaktól.

De milyen tényezők befolyásolják a hitelességedet?

Technikai hibák, bugok

Akadnak a weboldaladon olyan technikai problémák, furcsaságok, melyek megijeszthetik a látogatókat? Hibák esetén még olykor a Google is jelezni szokott, ami egyből csökkenti annak esélyét, hogy jó helyen jelenj meg a találati oldalakon. A technikai problémák, az ilyen-olyan bugok, vagy csak apró hibák, melyekre valamiért nem figyelsz fel vagy csak nem rakod rendbe, drasztikusan rombolják a weboldalad és a céged hitelességét.

Ha egy látogató technikai hibába fut bele az oldaladon, az meglehetősen frusztráló számára, és aláássa a kialakuló bizalmat a weboldalad, az ott megjelenő információk, sőt a céged iránt is. Ma már a felhasználók nem akarnak időt pazarolni arra, hogy működésre bírjanak egy weboldalt, esetleg feleslegesen próbálkozzanak a használatával. Azonnal távoznak, mert a konkurencia már minden területen hatalmas, így van miből válogatniuk.

Éppen ezért érdemes figyelni a weboldalad helyes működésére, sőt akár külső szakértővel vagy egy digitális eszközzel monitorozni, hogy nem bukkan-e fel valamilyen technikai probléma. Szintén fontos része ennek a megbízható hosting szolgáltatás, mely beépített biztonsági funkciókat is tartalmaz, ami jópár hiba előfordulását kizárja.

A webdesign használhatósága és következetessége

Míg néhány éve még meglehetősen szabad volt a web a felhasználói felületek kialakítását illetően, mára elég szigorú minőségi követelmények alakultak ki. A felhasználók meglehetősen igényesek egy weboldal megjelenésére, kivitelezésére és használatára, hiszen egy jó minőségű weboldalon könnyebb navigálniuk, gyorsan megtalálják az általuk keresett információkat, funkciókat.

A weboldal elrendezése, designja, színei, betűtípusai ezért mind hatással vannak a hitelességére. A weboldal esztétikája elsődleges szemponttá vált, a webdesign a márkádra is erőteljes hatást gyakorol, az emberek pedig elvárják a kreatív, de következetes és profi megjelenést a weboldalaktól.

Ha ezt nem találják meg nálad, akkor nem is szívesen használják a weboldalad, főleg ha megtalálják másnál is ugyanazt, amit Te kínálsz. Ennek ellenére sok weboldaltulajdonos apróságnak tartja a felhasználói élménnyel, a betűtípusokkal vagy a színekkel való bajlódást, pedig meghatározó jelentőségük van a cégedről alkotott kép kialakításában.

A tartalom minősége, olvashatósága

A felhasználók gyakran információért keresik fel a weboldalad, melyet tartalomként tálalsz nekik. Éppen ezért nem mindegy a tartalom minősége, mely a hitelességed is befolyásolja. Ehhez kell az igényes, mély, jól kidolgozott, eredeti tartalom.

Amennyiben a témád igényli és a lehetőségeid engedik, mindenképpen érdemes az írott szövegen túl más médiatípusokat is használni: saját fotókat, videókat, podcastokat is.

Természetesen mindez nem sokat ér, ha nem eléggé releváns, amihez egy kulcsszókutatás nyújt segítséget. Ezzel tudod megállapítani, hogy összhangban van-e a tartalom, a célközönség és a felhasználói szándék. Végül pedig a hitelesség érdekében fontos figyelni az olvashatóságra is.

A weboldalad tekintélye

Nyilván számodra sem hat a meglepetés erejével az a kijelentés, hogy a Google a keresőtalálati oldalakon elsősorban a tekintélyes és népszerű weboldalak megjelentetését preferálja, így ezek szerzik meg a jobb helyeket. De hogyan lehet a weboldalad „tekintélyes”?

Ez már egy komoly stratégiát igényel – és persze jelentős befektetést -, különösen, ha erős a konkurencia. Ha csak a SEO-t tekintjük, akkor megkerülhetetlen a minőségi linkek szerzése, olyan linkeké, melyek valóban hiteles, komoly és nagy látogatottságú, mégis releváns oldalakról mutatnak rád.

Ez egy rendkívül nehéz és költséges feladat, ha jelentős a verseny: komoly erőfeszítést, sok időt és profi hozzáállást követel. Nem lehet megoldani havi néhány ezer forintos linképítésnek hívott black hat SEO-val. Ugyanakkor, ha biztosítod hozzá a megfelelő erőforrásokat, akkor egy idő után a weboldalad forgalma és tekintélye is növekedésnek indul.

Nem vagy megtalálható a Google keresőben

Ha a weboldalad nem jelenik meg a keresőben, vagyis egy kereséssel nem találnak rá az emberek, akkor erősen leromolhat a tekintélyed a szemükben. Olyan oldalakra jellemző, hogy nem jelennek meg a találati oldalakon, melyek spam oldalak, átverik az embereket. (Bár persze az is igaz, hogy ilyen oldalak is megjelennek elég gyakran a keresőben).

Itt persze alapvetően a márkakeresésekről van szó, tehát nem arról, hogy milyen kulcsszavakra hányadik helyen szerepelsz. Márkakeresésre általában a kapcsolódó weboldalt hozza fel első helyen a Google. Ha nem, akkor baj van.

SSL tanúsítvány

A hitelesség-növelő tényezők közé tartozik a https használata is, mivel a Google számára ma már rendkívül fontos az, hogy a weboldalak a https-protokollt használják. Ezért is figyelmeztet a böngészője – de más böngészők is – a http-oldalakra, még abban az esetben is, ha azok nem kezelnek érzékeny felhasználói adatokat.

A https a felhasználók személyes adatait és pénzügyi információit védi, ami miatt például egy webáruházban nyilván kötelező a használata, ugyanakkor egy blog esetében, ahová még be sem kell jelentkeznie a felhasználónak, erősen kérdéses a szükségessége.

Mindenesetre, ha hitelességre törekszel, be kell szerezned a tanúsítványt, mivel a felhasználók egy része csak a figyelmeztetést látja, így nem merik használni a weboldalad, mert félnek például attól, hogy vírus kerül a gépükre vagy mobiljukra.

Hiányzó kapcsolati információk

A hitelesség érdekében a weboldalaknak kapcsolati információt is tartalmazniuk kell. Szívesen vásárolsz olyan webáruházban, amelynél nem találsz semmilyen címet, telefonszámot, kapcsolati adatot? Az persze más kérdés, hogy ezek fals adatok is lehetnek.

Mindenesetre a kapcsolati információknak ideális esetben tartalmazniuk kellene a fizikai címet, a telefonszámot, az e-mail címet. Egy kapcsolati űrlap általában nem elegendő, különösen, ha egy webáruházról vagy egy céges weboldalról van szó. Ha pedig blogról van szó, akkor nem árt, ha van némi információ a bejegyzések szerzőjéről is.

Spam hirdetések

Habár a hirdetések általában idegesítik a felhasználók, a weboldalak egy részének hirdetéseket kell közzétennie, hogy életben tudjon maradni. Ugyanakkor nem mindegy, hogy milyenek ezek a hirdetések. Ha félrevezető, spam hirdetésekkel van tele az oldal, az rontja a hitelességét.

Az ilyen hirdetések általában rosszul megfogalmazott, de kattintásra ösztönző szövegeket használnak, olyan ígéretekkel, melyek biztosan nem teljesíthetők. Ha ilyenekkel találkozik egy felhasználó a weboldaladon, akkor nem fogja túl magasra értékelni.

Hiányszó adatvédelmi szabályzat és használati feltételek

Minden törvényesen működő webolalon lennie kell adatvédelmi szabályzatnak, és bizonyos esetekben tartalmaznia kellene a szerzői jogra vonatkozó információkat és a használati feltételeket is. Az szintén probléma lehet, ha ezek megvannak, de hiányosak, esetleg egyszerűen átmásolták valahonnan, vagy tele vannak hibával. Ha a felhasználók ezekre ránéznek, akkor meglétükből és tartalmukból leszűrnek következtetéseket, így jó, ha figyelsz rájuk.

Spam linkek

Szintén nem veszi ki jól magát egy weboldalon, ha tele van spamlinkekkel, melyek gyanús, rossz minőségű weboldalakra vezetik a felhasználót. A kifelé mutató linkjeidnek javítania kell a felhasználói élményt, releváns oldalakat mutatni, nem pedig átverni a felhasználót.

Nyelvtani hibák a szövegben

Hibák előfordulhatnak minden szövegben, de ha egy weboldal tele van helyesírási hibákkal, akkor az erősen lerontja irányába a bizalmat.

Összességében tehát elmondható, hogy több tényezőre is összpontosítaniuk kell a weboldaltulajdonosoknak, ha növelni akarják a hitelességüket a weben. Ezek a stratégiák komoly munkát, több területen jelentős szakmai tudást, némi kreativitást, valamint pénzt és időt is követelnek.

The post Milyen tényezők befolyásolják a weboldalad hitelességét? És hogyan javíthatsz rajta? (Frissítve, 2022.04.11.) appeared first on Webshark Blog.

]]>
Hogyan kerüld el a felesleges hely-pazarlást a weboldaladon? http://blog.webshark.hu/2021/02/04/hogyan-keruld-el-a-felesleges-hely-pazarlast-a-weboldaladon/ Thu, 04 Feb 2021 17:58:30 +0000 http://blog.webshark.hu/?p=8768 Habár technikailag egy weboldal készítése során végtelen mennyiségű tér áll rendelkezésedre, amiből gazdálkodhatsz, a felhasználók figyelme véges. A látogatók elsősorban arra reagálnak, amivel az első néhány másodpercben találkoznak egy weboldalon. Ezért meg kell fontolni, hogy mi kerüljön ebbe a néhány másodperc alatt átlátható keretbe. Különösen azért, mert amit a felhasználó az első néhány másodpercben nem […]

The post Hogyan kerüld el a felesleges hely-pazarlást a weboldaladon? appeared first on Webshark Blog.

]]>
Habár technikailag egy weboldal készítése során végtelen mennyiségű tér áll rendelkezésedre, amiből gazdálkodhatsz, a felhasználók figyelme véges.

A látogatók elsősorban arra reagálnak, amivel az első néhány másodpercben találkoznak egy weboldalon. Ezért meg kell fontolni, hogy mi kerüljön ebbe a néhány másodperc alatt átlátható keretbe. Különösen azért, mert amit a felhasználó az első néhány másodpercben nem vesz észre, azt már lehet, hogy soha nem is fogja.

Itt persze nem arról van szó, hogy az eddig gyakran emlegetett white space-szel vagy negatív térrel kezdjünk spórolni, hiszen annak – ha nem esünk túlzásba – fontos funkciója van: vezeti a felhasználót. Olyan elemekről van szó, melyek úgy vesznek el teret, hogy nem adnak semmilyen értéket.

De hogyan tudod eldönteni, hogy mi az értékes elem a weboldaladon, és mi az, ami csak foglalja a helyet? A Speckyboy egy bejegyzésében most adott néhány támpontot ahhoz, hogy milyen elemek létjogosultságát érdemes felülvizsgálni.

Óriási képek, melyek elvonják a figyelmet a tartalomról

Az óriási képek korát éljük a weben, a hero image-ek elterjedtek, de egyre több helyen érnek a kijelző széléig már a képek. Ezek lehetnek szépek, sőt lenyűgözőek, ugyanakkor fontos azt is figyelembe venni, hogy milyen hatással vannak a tartalom többi részére.

Át kell gondolni, hogy van-e valódi funkciója a képnek, azon túl, hogy jól néz ki. Hozzásegíti a felhasználót a tartalom megértéséhez? Ha a kép kiszorítja a tartalmat, és a felhasználónak emiatt kell görgetnie, az problémát jelent, ahogy az is, ha elvonja a figyelmét a látogatónak a tartalomról. Szöveg vagy még inkább call to action mögé nem szabad összetett képet elhelyezni, mert rontja az olvashatóságot.

Persze, jó ha egy képre felfigyelnek az emberek, ha megfogja őket, ugyanakkor cél nélkül csak feleslegesen foglalják a helyet fontosabb elemek elől.

Hajtás feletti rész információ nélkül

Egy jól összerakott hajtás feletti rész magára vonja a látogatók figyelmét. Egy fotó vagy videó, vagy csak egy kontrasztos háttér jól elválasztja a weboldal többi részétől. Ezért is kerülnek ide a legfontosabb információk, ajánlat, üzenet. Az, amit leginkább közölni akarunk a felhasználóval.

Ugyanakkor sokszor lehet látni olyan weboldalakat, ahol ez a hajtás feletti rész gyakorlatilag kihasználatlanul marad. Lehet, hogy van szöveg, de semmitmondó, egészen lényegtelen az ajánlatot tekintve. Nincs olyan rész, ahová kattinthatna a felhasználó, vagy ami cselekvésre késztetné az oldalon.

Pedig a hajtás feletti résznek pontos iránymutatást kell nyújtania a látogató számára. Szükség van a világos üzenetre, ami cselekvésre sarkallja a felhasználót. Ez lehet annyi, hogy kapcsolatba lép vele, hogy meglátogatja a termékoldalt, bármi.

Hosszú, egybefüggő szövegtömbök

A felhasználók ideje értékes, ezért is csak átfutják a weboldalakat, nem pedig elolvassák szóról-szóra. Ha nem tudnak megkapaszkodni semmiben, csak egy hatalmas szövegfolyamot látnak, azt nem tudják átfutni sem. Ilyenkor gyakorlatilag feleslegesen írtad meg a szöveget az oldalra, mert az emberek nem olvassák, legfeljebb a Google (persze ez is egy szempont). Az ilyen szövegtömbök feleslegesen foglalják a helyet, mert semmi funkciójuk.

Persze nem kell mindjárt kidobni az egész szöveget, hanem meg kell próbálkozni a tagolásával alcímeket használva, melyeken megakad a felhasználó tekintete, és mindjárt meg tud benne kapaszkodni. Fontos az is, hogy bekezdésekre bontsd, és más vizuális elemekkel adj ritmust a szövegnek.

Népszerű a konténerek használata a szövegrészeknek, melyek vizuálisan is elkülönülnek egymástól, így sokkal befogadhatóbbá válik egy-egy szövegrészlet az emberek számára. Szintén érdemes bevetni az olyan elemeket a tagolásba, mint a képek, a kiemelt idézetek, a felsorolások, melyek mind megbontják a szöveg egyhangúságát.

Összességében tehát elmondható, hogy habár rengeteg hely áll rendelkezésre a weben, azt meg kell próbálni hatékonyan kihasználni. Át kell gondolnod, hogy mi az az elem, ami a legfontosabb, amit felülre akarsz helyezni. Mi az, amit a látogatnak feltétlenül tudniuk kell, amikor megérkeznek az oldaladra? Az szerepel legelöl és középen? Úgy, hogy nem nyomja el semmilyen más weboldalelem? Ha a felhasználók számára egy jól látható utat sikerül kirajzolnod, ahogy megérkeznek a weboldalra, melyről semmilyen felesleges elem nem téríti el őket, akkor van esélyed arra, hogy meg is tartsd őket.

The post Hogyan kerüld el a felesleges hely-pazarlást a weboldaladon? appeared first on Webshark Blog.

]]>