Amikor hibaüzenetek megtervezéséről van szó, akad néhány olyan alapelv, melyeket érdemes betartani. A Smashing Magazine egyik bejegyzésének tanácsai közül válogattunk.

Nem minden hibaüzenet azonos fontosságú

A hibaüzeneteket egy felosztás szerint két típusba lehet sorolni. Az egyik típust „csúszásnak” nevezték el, és olyan hibák tartoznak ide, mint amikor a felhasználó végre akar hajtani egy cselekvést, de aztán nem egészen úgy tesz. Ugyanakkor vannak azok a hibák, ahol a felhasználó mentális modellje és a rendszer között eltérés van. A „csúszásokat” egyszerűbb megoldani, bár a felületnek mindkét hibát korrigálnia kell.

A csúszások elkerülése érdekében be lehet állítani olyan korlátokat, mint például egy szövegdoboz szélessége, lehet automatikus kitöltés funkciót használni, alapértelmezett beállításokkal segíteni a felhasználót, és nem erőltetni a formázások betartását.

A hibáknál viszont megerősítést kell kérni, ha valami komoly következménnyel járó hibát készül elkövetni a felhasználó, de érdemes minél előbb jelezni számára az elvárásokat (például, hogy milyen jelszót várunk tőle, vagy mekkora fájlméretet fogad el legfeljebb a rendszer), illetve lehetővé kell tenni azt is, hogy meggondolják magukat (például az e-mail címet vagy a fizetési módot megváltoztassák).

A hibaüzenetek hatékonysága egyébként mérhető:

• egy felhasználói út alatt elkövetett hibák átlagos száma
• a hiba helyreállítási ideje,
• teljesítési arányok és teljesítési idők.

Egy rendszerből a hibák teljesen nem küszöbölhetők ki, mivel nincs hibátlan felhasználói bevitel.

Ne bízd rá magad kizárólag a piros színre!

Amikor hibaüzenetekben gondolkodunk, akkor szinte tudattalanul egy piros színben pompázó szöveg jut eszünkbe. Ez valóban egy bevett megjelenési forma, ugyanakkor nem minden esetben jelzi megfelelően a felhasználó számára azt, hogy valami probléma merült fel. Már csak azért sem, mert sok felhasználó számára gondot jelent a színek megfelelő érzékelése. Ezért a hibaüzenetet a piros színen kívül például ikonnal is jelezni kell. Emellett hasznos lehet az adott rész kiemelése egy vastag függőleges vonallal, ahol a vonal mellett megjelenik a hibaüzenet szövege is.

Az ikon a hibáknál megjelenhet a beviteli mező jobb vagy bal oldalán, akár a beviteli mezőn belül is. Ha az ikon a jobb oldalra kerül, akkor azok a felhasználók, akik mobilon rázoomoltak az űrlap bal oldalára, nem fogják kiszúrni a jobb oldali ikont, mivel az nem látszik a kijelzőjükön. Emiatt a bal oldali megjelenés némileg biztosabbnak tűnik.

Emellett érdemes lehet a felhasználót egy hibaüzenet-összefoglalóval is segíteni. Az összefoglalóban helyet kaphatnak linkek az űrlap azon részeire, ahol a hiba található, melyek segítségével a felhasználó azonnal az adott részhez ugorhat. Ez az összefoglaló megjelenhet akár a lap tetején, akár a gomb felett.

Ami fontos, hogy lehetőleg ne a gomb alatt, a lap alján jelenjen meg az összefoglaló, mivel ezáltal – jellemzően mobilon – nem jelenik meg az üzenet a kijelzőn.

Kerüld az automatikus görgetést és ugrásokat!

Ha egy felhasználó a beküldés gombra kattint, akkor érdemes automatikusan, görgetés által megmutatni a hibát neki? Erre nincs egyértelmű válasz, ugyanakkor sok felhasználót megzavar egy ilyen működés. Bizonyos felhasználók nagyon érzékenyek arra, ha kikerül a kezükből az irányítás. Ugyanez érvényes az automatikus ugrásra is, ami annyival rosszabb az automatikus görgetésnél, hogy még azt sem észlelik, hogyan is kerültek egy bizonyos pontra a felületen.

Az automatikus mozgatást tehát érdemes elkerülni, és egyszerűen csak megmutatni a felhasználóknak a hiba-összefoglalót. Ha ez mégsem lenne elegendő, akkor érdemes megfontolni, hogy automatikus görgetéssel vezeted rá a hibára a felhasználót.

Soha ne takard ki a hibaüzenettel a beviteli mezőt!

Amikor hibaüzenetet jelenítünk meg, akkor arra hívjuk fel az emberek figyelmét, hogy valami probléma merült fel. Ez azonban nem elég, megoldást is kell kínálni számukra. Ez akkor működik jól, ha a felhasználó egyszerre látja a megoldást leíró hibaüzenetet és magát a hibát is. Tehát tudniuk kell szerkeszteni a beviteli mezőt, miközben látják a hibaüzenetet, illetve a tájékoztatást.

A megoldás egyrészt az, hogy a tájékoztatást tartalmazó szöveg ne hoverrel nyíljon meg, hanem csak akkor, ha a felhasználó kattint (vagy érint). Így aztán eltűnni is csak kattintásra fog.

Ugyanakkor használhatunk lenyíló tájékoztatást is alternatívaként, ami a hibajelzés és az utána lévő tartalom között nyílik ki. Így aztán nem is takar ki semmit.

Űrlapoknál a hibaüzenet a beviteli mező felett legyen

Általában a hibaüzenetek a beviteli mező alatt kapnak helyet, vagy ritkábban a jobb oldalon. Ezekkel az elhelyezésekkel azonban több probléma is van. A jobb oldali megjelenést korábban már említettük: kicsúszhat a kijelzőről. Ha viszont alulra kerül, akkor mobilon vagy a virtuális billentyűzet takarhatja ki, vagy szerkesztésnél a böngésző automatikus kiegészítés funkciója.

A hiba feletti megjelenés sem tökéletes megoldás azonban, mivel minden hibaüzenet felbukkanása elmozdítja függőleges irányban az egész űrlapot.

Ne bízd rá magad az animált, lebegő üzenetekre!

Gyakran használják felhasználói felületeken azokat az animált, lebegő üzeneteket, melyek a rendszer állapotának változásáról tájékoztatják a felhasználót. Ezek jellemzően nem űrlapoknál jelennek meg, hanem táblázatoknál vagy irányítópultoknál. Az ilyen üzenetekkel azonban akad néhány használhatósági probléma:

• A felhasználók gyakran nem tudják elolvasni vagy megérteni a teljes hibaüzenetet, ha azok automatikusan eltűnnek egy idő után.
• Általában a kijelző szélén jelennek meg, távol a problémát okozó résztől, így nincs kapcsolat közöttük, ráadásul nem is lehet javítani akkor a hibát, amikor olvassuk az üzenetet.
• A hosszú, lebegő üzenetek gyakran nagy területeket takarnak ki a tartalomból, sőt olykor még azt a részt is, ahol a hiba megtörtént.
• Az ilyen üzenetekre nem fér el hosszabb magyarázó szöveg, kép vagy videó, ha szükség lenne rá. A benne elhelyezett link pedig elvezeti a felhasználót az adott oldalról, mert egy másik lapon nyílik meg.

Tedd lehetővé a felhasználóknak a hibaüzenetek felülbírálását!

Bizonyos űrlapoknál előfordul, hogy nagyon szigorúak a készítők azzal kapcsolatban, hogy mi és hogyan kerülhet egy beviteli mezőbe. A szigorú szabályok betartása néha akkora kihívás elé állítja a felhasználókat, hogy inkább otthagyják az űrlap kitöltését. Ez például nem jön jól, amikor már készen állnak a vásárlásra és csak az adataikat kell megadni. Ilyenkor lehet megoldás, ha lehetővé tesszük a figyelmeztető üzenetek felülbírálását a felhasználóknak. A kérdés az, hogy megéri-e nekünk például egy nem pontosan olyan formában megadott kiszállítási cím, mint ahogy elvárjuk, vagy inkább bukjuk az egész megrendelést.

Persze vannak olyan beviteli mezők, ahol ez nem engedhető meg. Ilyenkor nem marad más megoldás, mint a pontos hibaüzenetek és javítási megoldások.

Adj mintát a helyes bevitelre!

Egy hibaüzenet akkor lesz igazán nagy segítség a felhasználónak, ha arról is tájékoztatja, hogy mit és hogyan kellene csinálnia, azaz mintát ad neki. Tehát a hibaüzenet szövege nem csak annyit mond, hogy valami probléma merült fel, hanem egy példán keresztül mutatja meg, pontosan mit is vár el a felhasználótól.

Mindezek a tanácsok sokszor csak kis változtatásoknak tűnnek, azonban mégis jelentős lehet a hatásuk. És, ha más nem is teszel, legalább próbálj meg nem általános, hanem konkrétabb hibaüzeneteket megjeleníteni a felhasználóidnak.

Frissítés, 2022.12.05.:

Ne ess túlzásokba a hibaüzeneteknél!

A hibák megelőzése érdekében sokan túlságosan agresszív megoldásokhoz folyamodnak a weboldalakon. A Nielsen Norman Group szerint alapvetően két probléma szokott előfordulni:

• A túlságosan korán felbukkanó hibaüzenet – vagyis, amikor a hibát még el sem követte a felhasználó, de már valamilyen jelzéssel találkozik
• Hibáknál megjelenő vizuális jelzések nem csak hibáknál, hanem figyelmeztetések esetén történő alkalmazása – ilyen lehet egy piros szöveg, keret, jel, ami feleslegesen megakasztja a felhasználót.

A túlságosan korán felbukkanó hibaüzenetek esetében a rendszer annyira igyekszik a hibát elkerülni, hogy már akkor jelez a felhasználónak, amikor az még nem ért el egy olyan pontra, hogy valóban elkövette volna a hibát. Ilyennel gyakran találkozhatsz űrlapoknál, ahol ha elkezdesz beírni egy telefonszámot vagy e-mailt, a rendszer már írás közben jelez, teljesen feleslegesen. Sőt, olyan is előfordul, amikor már akkor hibaüzenetet kapsz, ha épp csak belekattintasz a mezőbe, vagy már eleve alapértelmezetten ott egy hibaüzenet.

Természetesen a felhasználókat érdemes valós időben értesíteni az űrlapoknál elkövetett hibáknál, tehát nem akkor, amikor elküldenék az űrlapot. Ugyanakkor sokan túlzásokba esnek a „valós idő” értelmezésével, így valójában egy hibátlan – de folyamatban lévő – kitöltés kap hibajelzést, ami megakaszthatja, de legalábbis mindenképpen zavarja a felhasználót. Ez a hibaüzenet általában addig meg is marad, amíg az előre meghatározott formát el nem éri a felhasználó.

A megoldás annyi lenne, hogy addig ne mutass hibaüzenetet a felhasználónak, amíg be nem fejezte az adott mező kitöltését, és ki nem lépett a mező szerkesztéséből. Ha pedig valamit közölni akarsz, akkor egy csillagozott megjegyzéssel megteheted a mezőnél (nem piros színű betűkkel).

A másik probléma, amikor egy üzenet vagy figyelmeztetés hibaüzenetnek néz ki, de nem az. Ezek sokszor nem kritikus fontosságú rendszerüzenetek, viszont vizuális megjelenésük hibaüzenetre hasonlít.

Persze a kritikus fontosságú üzeneteket és figyelmeztetéseket ki kell emelni, hogy a felhasználó felfigyeljen rájuk, kifejezetten megzavarja őket a feladatuk elvégzésében. Ilyenkor van értelme a zavaró vizuális jelek alkalmazásának, mint például a piros szöveg, keret vagy figyelmeztető szimbólum, mint amilyen egy felkiáltójel.

Ugyanakkor a megszokott rendszerüzenetek, melyeknek nincs nagy fontosságuk, nem lehetnek annyira zavaróak, hogy megakasszák a felhasználót a feladat végrehajtásában. Láthatónak kell lenniük, de nem tolakodónak.

A tájékoztatásnak így kellene megjelennie:

A lényeg ugyanis az, hogy a felhasználókat segíteni kell, nem pedig büntetni.

Frissítés, 2023.01.03.:

Milyen legyen a hibaüzenet szövege?

Hibaüzenet esetében annak szövege is segít abban, hogy pozitív élménnyé váljon a felhasználó számára egy kellemetlen dolog. Ehhez azonban először meg kell érteni, hogy mit is akarunk mondani a hibaüzenettel a felhasználónak. Elsősorban informálni akarjuk arról, hogy valami hiba következett be, másodsorban pedig megoldást találni a hibára. Ebből kell kiindulni, emellett megfogadni néhány tanácsot:

• Ideális esetben egy hibaüzenet egyszerű, világos és végrehajtható. Nem az a cél, hogy az emberek még jobban összezavarodjanak.
• Fontos, hogy emberi hangnemben íródjon, hiszen emberekhez szólunk, nem robotokhoz.
• Kerüld a szakkifejezéseket! Olyan nyelvet használj, amit bárki megért.
• Segítőkész legyen, ne lekezelő! A hibaüzenet hangnemén érződjön, hogy segíteni akarsz a felhasználónak, nem pedig kioktatni. Sokan automatikusan utóbbit választják, mert a személyiségük része, értelme, haszna azonban nincs a weboldalakon. A megoldás keresése legyen a cél.
• Pozitív állításokat fogalmazz meg! Ha lehetséges, akkor a hibaüzenet pozitív, barátságos hangvételű legyen.
• Legyen összhangban a cég hangnemével! A cég image-ének a hibaüzenetekben is meg kellene jelennie, nem kezelheted ezeket teljesen idegen elemként.
• Ha nem muszáj, ne hibakódokkal kommunikálj! Ha meg is kell jelennie a hibakódnak az üzenetben az egyértelműség miatt, legyen mellette egy érthető magyarázat, hogy miről is van szó.

The post Milyenek legyenek a hibaüzenetek a weboldaladon? (Frissítve, 2023.01.03.) appeared first on Webshark Blog.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

Ha nem vagy járatos a design világában, akkor nem sokat mond neked, hogy valakit grafikus designernek vagy webdesignernek hívnak. Ugyanazt a munkát – alapvetően persze a weboldalad tervezését – vajon el tudja végezni mindkét szakember? Ugyanazt tudják vagy csak elnevezésekről van szó, ami a lényegen nem változtat?

Mi az a grafikus design?

A grafikus designerek olyan vizuális designokat készítenek, melyeken megjelennek grafikai elemek, illusztrációk, betűk, fotók. Ezekből áll össze valami vizuálisan eredeti és kreatív dolog. A grafikus designerek hagyományosan többnyire logókat készítenek, olyan nyomtatott designokat, mint a poszterek, magazinok, könyvborítók, stb. Ez azonban az idők során változott, hiszen változott a technológia is, így a grafikus designerek ma már digitális felületekre is dolgoznak, így a webre vagy e-mailes megjelenésekre.

A grafikus designerek – ha jó szakemberek -, akkor tökéletesen tisztában vannak egy-egy vizuális design elkészítésének szabályaival, így járatosak a tipográfiában, a színek használatában, a vizuális hierarchia kialakításában, stb. Olyan szoftvereket használnak a munkájuk során, mint az Adobe Photoshop, az Illustrator, vagy az InDesign.

Mi az a webdesign?

Ugyanez a tudás szükséges egy webdesigner számára is. Ennek oka, hogy mindketten vizuális designnal foglalkoznak, melybe beletartozik a grafikus design és a webdesign is. A webdesign azonban egy olyan folyamat, melynek során egy weboldal kerül megtervezésre. A webdesign viszont nem pusztán vizuális design, hiszen meg kell tervezni a weboldal felhasználói élményét, drótvázat kell készíteni, információs architektúrát, ki kell találni a felhasználói utakat, ennek megfelelően szervezni a szöveges és vizuális tartalmakat, és csak mindezekre kerül rá a vizuális design.

Egy webdesignernek tisztában kell lennie azokkal az alapokkal, melyet a grafikus designerek is tudnak, tehát érteni kell a tipográfiához, a színekhez, a hierarchia kialakításához, a webdesign azonban nem merül ki a vizuális designban, hiszen egy weboldal esetében is egy olyan termékről van szó, melynek designja a jó használhatóságról szól. Arról, hogy miként is működik a termék, mennyire jó a felhasználói élmény, milyen könnyen járható a felhasználói út. És ehhez több kell, mint a vizuális élmény.

Milyen különbséget jelent ez?

Egyrészt az előbb felsorolt különbségek abban nyilvánulnak meg, hogy némileg eltérő technikai jártasságra van szüksége egy grafikus designernek és egy webdesignernek. Nem árt, ha egy webdesigner tisztában van a HTML és CSS-alapokkal, és azzal, hogy miként működik egy design a weben. Míg a grafikus design esetében szinte korlátok nélkül kiélheti egy designer a kreativitását, elég csak a vizualitásra figyelni, addig a webdesignernek a technikai korlátokkal is számolnia kell. Például figyelembe kell venni olyan tényezőket, mint a fájlméretek, hiszen a túl naggyá váló weboldalak betöltése lassabb lesz, amit rontja a felhasználói élményt.

Ugyancsak korlátozó tényezőt jelentenek a webdesign esetében a betűtípusokkal kapcsolatos korlátozott lehetőségek. Egy weboldal esetében ugyan beállíthatunk a CSS-ben egy szép betűtípust, azonban, ha a felhasználó böngészője azt nem támogatja, akkor neki egy alap-betűtípussal kerül megjelenítésre a weboldal, így pedig széteshet a design.

A megjelenésnél különbséget jelent, hogy ha egy grafikus design elkészül, akkor az kész van, úgy is marad, miközben egy webdesignnál dinamikus megjelenésről van szó, vagyis a későbbiekben is folyamatosan változik. Egy weboldalba mindig kerülnek új funkciók, új tartalmak, melyekhez igazodni kell, néhány évenként jelentősebb redesignra kerül sor, hiszen a cégeknek alkalmazkodniuk kell a változásokhoz.

Hasonlóképpen, míg a webdesign interaktív, hiszen a felhasználók kapcsolatba lépnek a weboldallal, az pedig reagál rájuk, addig a grafikus design nem interaktív. Egy weboldalon a felhasználók gombokat nyomogatnak, navigálnak az oldalon linkeket használva, videókat néznek meg, stb. A felhasználói cselekvésekhez pedig igazodniuk kell a designerek által készített tervnek.

És melyek a hasonlóságok?

Az előbbiek alapján talán már úgy tűnhet, hogy a két szakma egyáltalán nem kapcsolódik, ugyanakkor, mint korábban jeleztük, egy területnek az alkategóriáról van mégis szó. Ahogy egy grafikus designernek, úgy egy webdesignernek is tisztában kell lennie a vizuális design alapjaival. Mindkettejüknek folyamatosan figyelniük kell a designrendek változásait, mindkettejüknek az ügyfelek problémáit kell kreatív módon megoldaniuk.

És míg a művészet az alkotásról és az örömről szól, addig akár grafikus designról, akár webdesingról van szó, azok valamilyen célt szolgálnak, problémát oldanak meg. A különbség csak a hordozónál jelentkezik: a webdesign a jól tervezett weboldallal oldja meg azt a problémát, hogy a látogatóból ügyfelek legyenek, míg a grafikus design a logóval, a márkamegjelenéssel kommunikálja az üzeneteket a felhasználók felé.

Összességében tehát elmondható, hogy bár sokan azt hiszik, hogy egy weboldal mindössze vizuális designt jelent, amit akár egy grafikus designer is el tud készíteni, hiszen ért a színekhez, a formákhoz, betűkhöz, a weboldalak esetében számos egyéb tényezővel számolni kell, melyek túlmutatnak a vizuális megjelenésen: egy dinamikus környezetben, az interaktivitást figyelembe véve kell létrehozni jó felhasználói élményt, könnyű használhatóságot, miközben szorítanak a technikai korlátok.

The post Mi a különbség webdesign és grafikus design között? appeared first on Webshark Blog.