design Archives - Webshark Blog https://blog.webshark.hu/tag/design-2/ ... jquery, ajax, design, psd, plugin, modul, web2, social, miegymás... Wed, 17 Nov 2021 05:46:00 +0000 hu hourly 1 https://wordpress.org/?v=6.1.6 Mi az a favicon? És hogyan alakítsd ki? https://blog.webshark.hu/2020/07/22/favicon/ Wed, 22 Jul 2020 17:27:09 +0000 http://blog.webshark.hu/?p=8110 A favicon nem egyenlő a céged logójával, sok esetben ugyanis egyáltalán nem használható egy logó faviconként. De mi is az a favicon? És mire kell figyelned a kialakításánál? Elmondjuk. Mivel a favicon mérete kicsi, ezért a logód nem feltétlenül alkalmas arra, hogy betöltse a favicon szerepét. Lehet hogy azt gondolod, nem igazán számít ez az […]

The post Mi az a favicon? És hogyan alakítsd ki? appeared first on Webshark Blog.

]]>
A favicon nem egyenlő a céged logójával, sok esetben ugyanis egyáltalán nem használható egy logó faviconként. De mi is az a favicon? És mire kell figyelned a kialakításánál? Elmondjuk.

Mivel a favicon mérete kicsi, ezért a logód nem feltétlenül alkalmas arra, hogy betöltse a favicon szerepét. Lehet hogy azt gondolod, nem igazán számít ez az apróság, ezért nem is fordítasz időt a designjának kialakítására, pedig egy rosszul kivitelezett favicon rossz fényt vet a céged image-ére.

Mi az a favicon?

Amikor megnyílik egy weboldal a böngésződben, akkor a címsor mellett látsz egy kis ikont. Ez a favicon. Ugyanez jelenik meg a könyvjelzők között, ha elmented az oldalt. A favicon tehát az a kicsi, adott esetben részben átlátszó ikon, mely megjeleníti a weboldalad, a céged, a márkád a weben. A favicon segít javítani a felhasználói élményen azáltal, hogy egy következetes jelzést küld az embereknek, megmutatva számukra, hogy hol járnak, illetve, hogy még mindig ugyanazon az oldalon böngésznek, ahová megérkeztek.

A favicon szó egyébként a favorite icon, azaz könyvjelző ikon szóból származik. A kifejezés még az Internet Explorer hőskorában született meg, amikor is a könyvjelzőket “favorites”-nek hívták. A favicont 2000 környékén adaptálta a W3C a HTML 4.0-ba, és ekkortól kezdett el következetesen megjelenni a böngészők ablakaiban.

A favicon tehát alkalmas arra, hogy a böngészőfüleknél beazonosítson egy oldalt, segítsen a könyvjelzőknél a megtalálásukban, de megjelenik az okostelefonokon is elmentett parancsikonként.

Hogyan alakítsd ki?

Miközben a favicon olyan, mint egy ikon, azt gondolhatod, hogy felesleges még ennek a megtervezésével is plusz köröket futni. Egy favicon azonban kifejezi a céged, a márkád és a weboldalad is azonosítja. Hozzájárul a felhasználói és a márkaélményhez. Ezért az alábbi tényezőkre figyelj a tervezésnél:

A faviconnak kapcsolódnia kell a márkád image-éhez, de 16, illetve 32 pixeles méret túl kicsi ahhoz, hogy a logód egy az egyben elfogadható legyen faviconként. Olyan azonosítható elemet kell használnod, mint mondjuk a cégneved első betűje, vagy a logóból kivett részlet, ami jól beazonosítja a márkát.

Minél kevesebb a betű, annál tisztább a design, vagyis a legjobb megoldás, ha egyetlen betű kerül csak bele. De ha a cégneved két szóból áll, akkor jó megoldás, ha kétbetűs rövidítést használsz. Mindenesetre győződj meg arról, hogy a logód lényegi elemei azért megjelennek benne, azaz világos legyen a designnyelv alapján a felhasználók számára, hogy ugyanarról a cégről van szó. Amit mindenképpen kerülj el, azok a szavak és az egyéb összetett megjelenés, mert abból semmi nem fog látszódni, ha a böngészőfülön jelenik meg.

A másik lehetőség, ha egy ábra a logód, melyen nincs szöveg. Ha egyszerű a grafika, akkor ideális lehet a megjelenése változtatás nélkül is faviconként (gondolj például a Nike logójára). Néha azonban szükség lehet némi egyszerűsítésre, hogy faviconként is működjön a logó. Ilyen például a Puma, ahol a logó része a Puma felirat is, így a favikonjuknál elhagyják a szöveget, és csak a grafika marad.

Azt se felejtsd el, hogy alapértelmezésben egy favicon négyzet alakú. Ha valami más formát akarsz, akkor átlátszó háttérre lesz szükséged. Arra is gondolj, hogy néhány rendszer lekerekíti a sarkokat, ami adott esetben átírhatja az általad elképzelteket.

Fájltípus

A favicon hagyományosan .ico kiterjesztéssel jelenik meg, de ez ma már nem kötelező. Bármilyen transzparens fájltípus megfelel a faviconnal szemben támasztott technikai követelménynek, tehát egy .png is használható, ugyanakkor a Microsoft ico formátumának is vannak előnyei, miközben általában elég jól működik minden böngésző esetében.

Méret

Ami a méretet illeti, régen minden favicon 16 pixeles kis négyzet volt, ez azonban ma már a nagyfelbontású mobilkijelzők esetén nem állja meg a helyét. A HTML 5 olyan szabványokat tartalmaz, melyek a különféle használathoz eltérő méreteket határoznak meg egészen az apró böngészőikontól a mobilos parancsikonokig. Vagyis az már nem elég, ha legyártasz egy 16 pixeles ikont.

Ezért is használ az ico formátum különböző méreteket egyetlen fájlban. A lényeg, hogy mindig lennie kell egy 16×16 pixeles verziónak, valamint legalább egy 32×32-esnek, de felsorakozhat még melléjük egy 128-as is. Ha csak 16 pixeles a faviconod, akkor bizonyos esetekben pixelessé fog válni, amikor a felhasználó nagyobb méretben látja. Az alábbi méretekben és felhasználási helyeken jelenhet meg egy favicon:

32×32: a legtöbb asztali böngésző esetében már ez a szabvány a korábbi 16 pixeles méret helyett
128×128: Chrome áruház és Windows kijelző ikon
152×152: iPad touch
167×167: iPad retina touch
180×180: iPhone retina
192×192: a Google Developer ajánlása
196×196: androidos parancsikon

Szín

Ahogy a formánál, úgy a színeknél is mértéktartásra kell törekedni, szintén a kis méret miatt. A legtöbb favicon éppen ezért mindössze egy háttérszínt és egy másik színt használ, mégpedig úgy, hogy a kettő között elegendő a kontraszt.

Némely design esetében kis méretben jól működik, ha szürkeányalatos színsémában jelenik meg. Azt kell csak megfontolnod, hogy a favicon így is ugyanazt az üzenetet közvetíti-e, mint a megszokott színekkel. Ha nem a színek számítanak a logódnál, akkor érdemes lehet kipróbálni a fekete-fehér verziót.

Egy további probléma, hogy a háttér bármilyen színű lehet, hiszen a böngészők témája változtatható, ezáltal pedig a keret színe változik. Úgy kell tehát kiválasztani a színt, hogy az lehetőleg bármilyen háttér esetében működjön.

Fontos, hogy legyen feltűnő! Ha meg van nyitva a böngészőben egy böngészőlap, akkor a favicon mindvégig látható a felhasználó számára. Még akkor is, ha éppen egy másik tabon jár. A favicon akkor jó, ha fel tudja hívni magára a figyelmet, mert ezzel nő az esélye annak, hogy meg fogja nyitni a lapot. El lehet ezt érni egyszerűen egy erős színnel, de ez nem feltétlenül passzol a logódhoz és a márkád identitásához. Ugyanígy egy szokatlan forma is figyelemfelhívó lehet, de ebben az esetben is figyelembe kell venni a weboldalad designját és a márkád esztétikáját.

Favicont nem feltétlenül Photoshopban érdemes megtervezni, hanem olyan eszközökkel, mint az Illustrator vagy a Sketch, majd innen exportálni a megfelelő méretekbe. Ez biztosítja azt, hogy a kijelzőfelbontás váltása ne érintse hátrányosan a faviconod.

A legfőbb szabály azonban az, hogy legyen a design egyszerű: ne használj túl sok színt, ne használj szöveget. Olyan legyen, hogy 16 pixeles megjelenésnél is értelmezhető maradjon. Ez persze kihívás, hiszen ekkora méretben nem könnyű bármi értelmes dolgot könnyen olvashatóvá tenni.

The post Mi az a favicon? És hogyan alakítsd ki? appeared first on Webshark Blog.

]]>
Mi az a parallax design? És mikor érdemes használni? (Frissítve, 2021.11.17.) https://blog.webshark.hu/2014/11/05/mi-az-parallax-design-es-mikor-erdemes-hasznalni/ Wed, 05 Nov 2014 14:48:04 +0000 http://blog.webshark.hu/?p=1037 A parallax effektek már évek óta velünk élnek a webdesignban is, akad jó pár olyan oldal a weben, mely kihasználja a lehetőségeket. Látványos tud lenni a dolog, de vajon egy olyan céges oldalnál, melytől hatékonyságot, konverziót várunk el, érdemes-e alkalmazni? (Frissítés, 2021.11.17. – Egy új fejezettel bővítettünk: Néhány példa parallax oldalra). A parallax megoldások a […]

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

]]>
A parallax effektek már évek óta velünk élnek a webdesignban is, akad jó pár olyan oldal a weben, mely kihasználja a lehetőségeket. Látványos tud lenni a dolog, de vajon egy olyan céges oldalnál, melytől hatékonyságot, konverziót várunk el, érdemes-e alkalmazni? (Frissítés, 2021.11.17. – Egy új fejezettel bővítettünk: Néhány példa parallax oldalra).

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

Mi az a parallax design?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Felhívhatja valamire a figyelmet

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

Emlékezetessé tenni a weboldalt

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

Vannak korlátai

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

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

Mit tehetünk?

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

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

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

Néhány javaslat:

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

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

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

Frissítés, 2021.11.17.:

Néhány példa parallax oldalra

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

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

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

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

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

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

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

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

]]>
Hogyan növeld weboldalad bizalomfaktorát? https://blog.webshark.hu/2014/02/22/hogyan-noveld-weboldalad-bizalomfaktorat/ Fri, 21 Feb 2014 23:10:28 +0000 http://blog.webshark.hu/?p=351 Hiteles a weboldalad? Amikor a felhasználók először navigálnak egy új weboldalra, egy tanulmány szerint a honlap gazdáknak nagyjából 6 másodperc áll rendelkezésükre, hogy pozitív benyomást keltsenek a látogatóban. A színeket, a weboldal sűrűségét, átláthatóságát 200 millimásodperc alatt csekkoljuk le (igen! ennyire kevés idő alatt!), majd eldöntjük, hogy maradunk, vagy egyből továbblépünk az adott weboldalról. Ez az úgynevezett […]

The post Hogyan növeld weboldalad bizalomfaktorát? appeared first on Webshark Blog.

]]>
Hiteles a weboldalad? Amikor a felhasználók először navigálnak egy új weboldalra, egy tanulmány szerint a honlap gazdáknak nagyjából 6 másodperc áll rendelkezésükre, hogy pozitív benyomást keltsenek a látogatóban.

  • A színeket, a weboldal sűrűségét, átláthatóságát 200 millimásodperc alatt csekkoljuk le (igen! ennyire kevés idő alatt!), majd eldöntjük, hogy maradunk, vagy egyből továbblépünk az adott weboldalról. Ez az úgynevezett expozíciós szakasz.
  • Ezt követően látogatónk további 3 másodperc alatt felméri, hogy tartogat e számára hasznos információt az oldal – vet egy pillantást a tartalomra, a nyelvtanra és a rendelkezésére álló eszközökre.
  • Majd további 3 másodperc alatt kattint egy linket, megnézi, hogy a tartalom felkelti e az érdeklődését.

Ennek a folyamatnak a végén – mindössze 6 (!) másodpercet követően – a felhasználó már véleményt alkotott arról, hogy a weboldunkat megbízhatónak tartja e vagy sem.

Bizalom weboldal Ugye, hogy mennyire minimális idő áll rendelkezésünkre meggyőzni a látogatót arról, hogy az oldalunkon van olyan érdekes szolgáltatás, információ, vagy termék, amire szüksége lehet?

Hogyan lehet becsalogatni, majd marasztalni a látogatót? És még ami ennél is fontosabb, hogyan tudod csökkenteni a visszafordulók számát, milyen bizalomépítő eszközökkel tudsz pozitívan hatni az emberi érzelmekre?

Fontos! A cikk elolvasása az olvasási sebességtől függően akár 5-8 percig is tarthat, de ne hagyd abba, ha már elkezdted!

1) Elégedett ügyfél ajánlások

Talán a legelső dolog ami mindenkinek beugrik mint az egyik leghatékonyabb bizalomépítő eszköz egy cég kezében: az ügyfél-ajánlások. Ezzel bizalmat építhetsz weboldaladnak, ajánlataidnak, vonzóbbá teheted szolgáltatásaidat/termékeidet. Ez természetesen nem is alaptalan, a fogyasztók körében az ügyfél ajánlások rendkívül hitelesek és kiemelkedő fontossággal bírnak a döntéshozatalnál. Ezen kívül ezeket az ajánlásokat fel lehet használni a közösségi médiában, vagy az email marketinged során.

Elégedett ügyfelek

Valós emberek (!) valós ajánlásai (!) segítenek tájékozódni a leendő vevőknek/ügyfeleknek. A hitelesség kedvéért az ajánlásokat lássuk el névvel, adjunk neki arcot, vagy hangot, készíthetünk audio, vagy videó ajánlást is. Ezzel is mutatod a felhasználónak, hogy az ajánlás hiteles, megbízható forrásból jön, hiszen ténylegesen be lehet azonosítani. Ez mind szép és jó, de mi a jó az ajánlásokban, ha minden egyes honlapon megtalálhatóak? Valóban a világ összes cége profi volna? Ezt ugye egyetlen halandó sem feltételezi…

Minimalizálni kell a fogyasztó aggályait. Hogyan tehetjük ezt meg? A cég egyes termékei, szolgáltatásai mellé tegyük oda az ügyfelek véleményét. Tehetünk egy számlálót, ami mutatja, hogy hányan döntöttek már a termékünk/szolgáltatásaink mellett. De csillagozási, vagy pontozási lehetőséget is felkínálhatunk az odalunkon a fogyasztóknak.

TIPP – Tedd ki Facebook vagy/és G+ követőidnek dobozát az oldalsávba, ami feltünteti az elégedett ügyfelek véleményét, egy számláló pedig megmutatja, hogy mennyien döntöttek már ajánlataid mellett!

2) Design

A design – mint bizalomépítő faktor – fölött sokan képesek átsuhanni. De azért néhány dolgot érdemes megfontolni. Gondold csak végig! Egy letisztult megjelenés – ami egyértelműen profizmusról árulkodik – lehetővé teszi a potenciális vásárlók számára, hogy tudják, ez az oldal nem csak addig marad életben és lesz elérhető a neten, amíg az ügyfél pénzét meg nem kapják.

Ezt tudván, egy jó desgin segít a weboldalad hitelességének megalapozásában még mielőtt egyáltalán interakcióba lépnének a honlapodon. Amennyiben nem veszed a fáradtságot, hogy a megjelenésed a profizmusról árulkodjon, akkor biztos lehetsz abban, hogy a felhasználó keres egy hitelesebb terméket, vagy szolgáltatást amit meg fog venni.

Audi.hu

Egy weboldal tervezésénél figyelembe kell venni, hogy a felhasználói élmény az egyik legfontosabb bizalomépítő elem. Ha a felhasználónak csavarognia kell az oldalon, hogy megtalálja a keresett információt, akkor valószínűleg csalódott és frusztrált lesz. Az emberek soha nem akarnak több energiát fektetni valamibe annál, mint amennyit feltétlenül muszáj. Amikor egy rosszul megtervezett honlap erre kényszeríti őket, akkor csorbulni fog a cégbe vetett bizalom és biztosra vehetjük, hogy elpártol tőlünk.

3) Díjak és elismerések

A díjak, elismerések, oklevelek, igazolások, plecsnik szintén kiugróan magas bizalomépítő faktorok. Vannak díjnyertes termékei, vagy szolgáltatásai cégednek?

Díjak és elismerések - bavaria.hu

Sok helyet nem foglalnak, mégis meggyőzőek, bizalmat ébresztenek! A felhasználó nagyobb biztonságban érzi magát miközben navigál az oldalunkon, vagy megadja személyes adatait ha a szeme előtt vannak a díjaink. Mégha egy olyan egyszerű dolgot is szeretnél kiszedni a felhasználóból, mint például az email címe, egy hiteles „bizalom” plecsni elhelyezése az oldaladon nagy segítséget nyújt ebben.

4) A hiteles cégbemutató

Adjunk meg elérhetőséget, legalább egy telefonszámot, vagy egy címet, amelyból látszik, hogy valós irodával és valós munkatársakkal rendelkezünk.

Hívj minket

Csak maga a tudat, hogy mondjuk egy késésben lévő megrendelésről élő hús-vér embernél lehet érdeklődni, annak a bizalom keltő hatása megintcsak nagy. Az, hogy a céged folyamatosan munkatársakat keres, folyamatosan bővíti csapatát, szintén hosszútávú gondolkodásról árulkodik. Ez tovább növeli a hitelességet és egyben azt is bizonyítja a potenciális ügyfeleidnek, hogy nem csak egyszerűen létezel a piacon, hanem folyamatosan fejlődsz, mindig a legjobb munkatársakat, munkaerőt keresed.

Mi az a webes elem, ami leginkább bizalmat ébreszt?
A Bemutatkozunk/Rólunk oldal. Ennek szerepe felbecsülhetetlen! Ráadásul tudtad, hogy az egyik leglátogatottabb oldal a weboldaladon? Egy biztos,  csak abból lesz potenciális vásárlód, akit a Bemutatkozunk oldaldon meggyőztél. Légy őszinte az ügyfelekhez, nem kell lehazudni a csillagokat az égről (SŐT!) ahhoz, hogy bízzanak benned!

5) Esettanulmányok

Egy esettanulmány nagyszerű eszköz arra, hogy felhívd magadra a figyelmet azáltal, hogy számos példát felhozol, számszerűsíted a növekedést, nem csak papolsz a levegőbe.

Különösen hasznosak lehetnek az esettanulmányok, amennyiben céged szolgáltatásokat értékesít. Mutasd meg, hogy szolgáltatásod mennyire nélkülözhetetlen és hasznos azoknak az ügyfeleknek, akik már vásároltak Tőled. Ahhoz, hogy ígéreteidet készpénznek vegyék, a termék vagy szolgáltatás hasznosságát igazolni kell.

6) Közösségi média

A közösségi média az egyik legjobb eszköze a bizalomépítésnek. Nemcsak hogy személyesen tudsz kommunikálni valamennyi meglévő ügyfeleddel, de leendő ügyfeleidnek is bebizonyíthatod, mennyire dinamikus és rugalmas a céged, aki pikk-pakk kezeli a felmerülő ügyféligényeket és problémák esetén is villámgyorsan reagál.

Továbbá a weboldaladon a tartalmak mellett megtalálható megosztás gombok is elősegítik, hogy leendő ügyfeled a saját szemével lássa, hogy közted és az meglévő ügyfeleid között folyamatos interakció van, tartalmaidat szeretik, hozzászólnak, megosztják és bizalommal fordulnak feléd. Mennyivel növelheti ez a valóságban az oldalad konverzióját? A következő tanulmány szerint 400%-al!

7) Garanciák

Van már garanciád? Ha nincs, akkor legyen!

Egyrészt mert növeli a bizalmat termékeid, vagy szolgáltatásaid iránt, másrészt csökkenti a vásárlás kockázatát a vevő fejében. Ezáltal lényegesen könnyebb meghoznia a döntést! Amennyiben terméket árulsz, könnyű dolgod van, hiszen műszaki, működési, vagy élettartamra vonatkozó garanciát bármikor lehet vállalni.

Garancia - ekszer-ora.hu

Azonban ha szolgáltatást kínál a céged, akkor már nem ennyire egyértelmű a dolog. Felkínálhatod, hogy próbálja ki ingyen a szolgáltatásod – egy bizonyos ideig – és csak akkor fizessen, ha bevált és meg volt elégedve. Sok cég ódzkodik ettől a lehetőségtől, mert attól fél, hogy leredukálódik a vásárlók száma az ingyenes használatot követően. De a gyakorlatban ez nem így van!

8) Kapcsolatok

A közösségi szószólók, bloggerek, véleményvezérek bevetése – cikkmegosztás, vagy egy blogger posztja egy termékünkkel kapcsolatos tapasztalatáról – szintén hatékony eszköz, amitől a terméked, vagy szolgáltatásod hitelesebb lehet.

Ha írtál, vagy írtak már Rólad a sajtóban, volt audiovizuális szereplésed, tedd közzé! Csak a médium logóját használd, ne linkeld, különben elkattintanak a oldaladról…

A Bomb Cosmetics weboldalának átalakításánál nagy hangsúlyt kapott a bizalomfaktor nagymértékű növelése. Az összes medium logóját láthatjuk, ahol partnerünk valamilyen formában megjelent. A garancia vállalással a vevő szemében csökken a vásárlás kockázata. Élő, hús-vér kontakt található az oldalon e-mail címmel és névvel. Megjelenik a közösségi média gomb és a követők száma. Amennyiben még soha nem jártunk az oldalon, akkor egy kényeztető ajándékot is kaphatunk!

Bomb cosmetics elemzés

Összefoglalva: Sokan tudják, hogy szükség lenne a hitelesség építésére a weboldalon, mégis kevés figyelmet fordítanak rá. Remélhetőleg ezek a példák világossá teszik, hogy a megfelelő hitelesség bizalmat kelt az ügyfélben és nagy mértékben növelheti egy termék, vagy szolgáltatás online konverzióját!

Amíg a weboldalad nem hiteles, addig az ügyfelek kicsúszhatnak a markodból. Ne hagyd hogy ez megtörténjen! 

Hasznosnak találtad cikkünket? Szeretnél hasonló cikkeket olvasni? Egy Like vagy egy + elég hozzá!

Ajánlatot kérnél? Köszönjük! Lépj tovább az Ajánlatkérés oldalra!

The post Hogyan növeld weboldalad bizalomfaktorát? appeared first on Webshark Blog.

]]>