[vc_row section_type=”fullwidth” header_feature=”yes” margin_bottom=”0″ section_id=”start”][vc_column width=”1/4″ column_sticky=”yes” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764582891740“}}” column_sticky_offset=”30″][impeka_slogan title=”BEVEZETŐ” subtitle=”UI DESIGN ÖTLETEK” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″ grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1646488726440“}}”][vc_column_text css=””]A professzionális felhasználói felület – szaknyelven UI-design – ma már nem csupán esztétikai kérdés, hanem alapvető része annak, hogy egy márka online értékesíthetővé váljon. Amikor a weboldal letisztult, intuitív és egyértelmű üzenetet közvetít minden látogató felé, amikor a látogatók megtalálják azt, amit keresnek – és azt is, amiről nem is tudtak -, akkor az meglátszik a látogatók vásárlási kedvén: csökken a frusztráció, nő a bizalom, így az érdeklődők nagyobb eséllyel válnak aktív, majd visszatérő ügyféllé.
A nemzetközi kutatások feketén-fehéren rávilágítanak, hogy az okosan implementált UI design ötletek akár 200%-kal is megemelhetik a konverziós rátát, de átfogó UX-/UI-stratégiával akár 400%-os növekedés elérése is lehetséges.
A látogatói élmény szempontjából éppen ezért kulcskérdés, hogy hogyan tudjuk a vizuális és interakciós elemeket olyan módon formálni, hogy azok ne csak jól nézzenek ki, hanem valódi eredményeket is hozzanak a konverziót tekintve. Sokszor bizonyított tény ugyanis, hogy kevesebb oldalelhagyás, hosszabb oldalon töltött idő, több feliratkozás és vásárlás, valamint erősebb márkahűség jellemzi a profi szakemberek által megkomponált oldalakat.
Nézzünk is pár olyan egyedi UI design ötletet, amire a 7Digits többszörös Év Honlapja díjas tervezői is elismerően mosolyodtak el. Íme, így csinálják a profik:[/vc_column_text][/vc_column][vc_column width=”1/4″ tablet_sm_width=”hide” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764582993529“}}”][/vc_column][/vc_row][vc_row section_type=”fullwidth” rc_bg_type=”color” header_feature=”yes” margin_bottom=”0″ section_id=”start” rc_bg_color=”#F7F7F7″][vc_column width=”1/4″ column_sticky=”yes” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764582840574“}}” column_sticky_offset=”30″][/vc_column][vc_column width=”1/2″ grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1646488726440“}}”][vc_column_text css=””]
Megoldás: Az Algolia weboldalán a logóra jobb gombbal kattintva felugrik egy ablak, mely készségesen felajánlja azokat a lehetőségeket, amiket a jobb gomb kattintásával a látogató el akar érni: ez általában a logó letöltése valamilyen céllal, de az Algolia tovább is megy, és a teljes brand guideline letöltését felajánlja:
Amiért zseniális: Sokan azt hiszik, hogy B2B-ben feleslegesek a UI design ötletek. Azonban a logót leszedni szándékozó látogató általában mit is akar? Hivatkozni akar a weboldalra valamilyen formában, és az Algolia designerei pont ehhez kínálnak segítséget.
Ahelyett, hogy egy pixeles logót letölthetővé tennének, oszt’ jól van az úgy, a teljes logo packet letölthetővé teszik vektoros formában, különböző színekben – azaz segítik, bátorítják a látogatót, hogy profi módon hivatkozhasson a márkára.[/vc_column_text][/vc_column][vc_column width=”1/4″ tablet_sm_width=”hide” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764583006390“}}”][/vc_column][/vc_row][vc_row section_type=”fullwidth” header_feature=”yes” margin_bottom=”0″ section_id=”start”][vc_column width=”1/4″ column_sticky=”yes” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764582902116“}}” column_sticky_offset=”30″][vc_custom_heading text=”02.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:83px” css=”.vc_custom_1765883122032{margin-bottom: 18px !important;}”][impeka_slogan title=”A SZTORI MINDENEK FELETT” subtitle=”PIXLSPACE” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″ grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1646488726440“}}”][vc_column_text css=””]
PIXELSPACE
Az újdonság: Sok weboldal esik abba a hibába, hogy újszerű UI-design ötletek híján mindent, de tényleg mindent megpróbál elmondani a főoldalon. A Pixelspace nevű designcsapat teljesen más megközelítést választott a saját oldalán: a görgetés szinte az egyetlen interakció, amire a felhasználót buzdítják, és animált, mégis finoman interaktív megoldásokkal mesélik el a sztorijukat. Az egyes elemek kattinthatósága megvan, de sehol egy CTA, sehol egy látható link; minden a sztorinak van alárendelve.
A koncepció nemcsak a főoldalon van jelen, hanem minden egyes aloldalon is sztorit mesél el. Elég csak ránézni erre az oldalukra, hogy hogyan mondanak el lineárisan egy történetet az egyik szolgáltatásukról.
Amiért zseniális: sok weboldal annyira sok opciót kínál, hogy a látogatónak kognitív terhelést jelent összerakni a kirakós egyes darabjaiból, hogy mit is lát éppen. A Pixelspace ezt a kognitív terhet veszi le a látogatók válláról, és ahelyett, hogy terhelne, sokkal inkább szórakoztat, mesél és tanít a saját történetével.[/vc_column_text][/vc_column][vc_column width=”1/4″ tablet_sm_width=”hide” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764583014962“}}”][/vc_column][/vc_row][vc_row section_type=”fullwidth” rc_bg_type=”color” header_feature=”yes” margin_bottom=”0″ section_id=”start” rc_bg_color=”#F7F7F7″][vc_column width=”1/4″ column_sticky=”yes” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764582840574“}}” column_sticky_offset=”30″][vc_custom_heading text=”03.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:83px” css=”.vc_custom_1765883133675{margin-bottom: 18px !important;}”][impeka_slogan title=”KREATÍV MIKRO-INTERAKCIÓK” subtitle=”Obys Agency” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″ grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1646488726440“}}”][vc_column_text css=””]
OBYS
Az újdonság: Az Obys Agency egy kreatív designügynökség, amely UI/UX tervezéssel, márkaépítéssel és fejlesztéssel foglalkozik. Saját portfóliójukat is egy interaktív, mikrointerakciókkal telerakott módon mutatják be. A referenciáikat böngészve nem kell klikkelni sehova, csak rolloverre megjelenik a projektek mögötti design hangulata. Érdemes megnézni a contact oldalukat is, egy nagyon letisztult, világos formmegoldással büszkélkedhetnek.
Amiért zseniális: Az Obys oldalának designja az úgynevezett editorial-style webdesign és brutálisan jó a tipográfia, amit használnak. A weboldalt a mikro-interakciók és animációk teszik dinamikussá. A különböző hover‑effektek és mozgó elemek növelik a felhasználói elköteleződést és a weboldalon töltött időt, ami az egyik legfontosabb szignál a keresők számára arról, hogy az oldal tartalma értékes. 67-es domain ratingjük (DA) nem kizárólag ennek köszönhető, de hogy volt benne szerepe, az tuti.[/vc_column_text][/vc_column][vc_column width=”1/4″ tablet_sm_width=”hide” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764583006390“}}”][/vc_column][/vc_row][vc_row section_type=”fullwidth” header_feature=”yes” margin_bottom=”0″ section_id=”start”][vc_column width=”1/4″ column_sticky=”yes” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764582902116“}}” column_sticky_offset=”30″][vc_custom_heading text=”04.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:83px” css=”.vc_custom_1764583054887{margin-bottom: 18px !important;}”][impeka_slogan title=”A SZTORI MINDENEK FELETT” subtitle=”DROPBOX” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″ grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1646488726440“}}”][vc_column_text css=””]
DROPBOX
Az újdonság: Leginkább a UI design ötletek egy újszerű trendjéről van szó, sokan csinálják ezt a megoldást mostanában. A Dropbox oldalán az animált termékdemók magasiskoláját látod, ami gyorsan, közérthetően magyarázza el a termék működését. Valahogy így:
Mi magunk is egyre több és több úgynevezett mood videót alkalmazunk a 7Digits által tervezett és kivitelezett weboldalakon. Egyszerűen azért, mert nemcsak a konverziót növelik az ilyen kiemelkedő minőségű, a megértést támogató mood-elemek, hanem a keresőmotorok számára fontos látogatói szignálokat (oldalon töltött idő, engagement rate) is jelentős mértékben javítják.
Amiért zseniális: A látogatók figyelme egyre rövidebb és rövidebb ideig köthető le. A szoftvertermékekből kivágott és profin megcsinált animációk az oldalon olyan ultra-top funnel eszköznek is tekinthetők, melyek megágyaznak az elköteleződés mélyebb szintjeit igénylő videókattintásoknak, letöltéseknek, ingyenes trialoknak. Bár az ilyen animációk elkészítése drága és időigényes, ha egyszer megvannak, akkor érdemben javítják mind a látogatói szignálokat, mind az engagement rate-et, mind a brandértéket.[/vc_column_text][/vc_column][vc_column width=”1/4″ tablet_sm_width=”hide” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764583014962“}}”][/vc_column][/vc_row][vc_row section_type=”fullwidth” rc_bg_type=”color” header_feature=”yes” margin_bottom=”0″ section_id=”start” rc_bg_color=”#F7F7F7″][vc_column width=”1/4″ column_sticky=”yes” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764582840574“}}” column_sticky_offset=”30″][vc_custom_heading text=”05.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:83px” css=”.vc_custom_1766099684283{margin-bottom: 18px !important;}”][impeka_slogan title=”KREATÍV ON-PAGE FELSOROLÁS” subtitle=”SHOPIFY” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″ grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1646488726440“}}”][vc_column_text css=””]
SHOPIFY
Az újdonság: Hol vannak már a kétezres évek bullet pointjai? A Shopify Editions – ezúttal épp a 26 Winter Edition – egy nagyon izgalmas, interaktív animációt alkalmaz az egy tartalmi blokkba tartozó elemek megjelenítésére. Valahogy így néz ki a dolog:
Amiért zseniális: Kattintás nélkül növeli az oldalon töltött időt, mikroelköteleződésként működik, és magával a struktúrájával is szórakoztat, felfedezésre sarkall – azaz a marketing nyelvén engagementet gerjeszt. A bullet pointos felsorolásnál messze nem tölt el annyi időt a látogató, mert – hiába strukturált -, úgynevezett kognitív loadot jelent az agynak.
Az agy információfeldolgozásért felelős területe (köznyelvi szófordulattal: a krokodilagy) pedig elképesztően hatékonyan védi a “processzor” kapacitását és tereli el a látogató figyelmét az unalmasnak, vagy egyszerűen csak már ismertnek ítélt formátumokról.
Ezzel szemben az ehhez hasonló interaktív UI-design ötletek ott tartják a látogatót az oldalon, mert felfedezésre és megismerésre ösztönzik.[/vc_column_text][/vc_column][vc_column width=”1/4″ tablet_sm_width=”hide” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764583006390“}}”][/vc_column][/vc_row][vc_row section_type=”fullwidth” header_feature=”yes” margin_bottom=”0″ section_id=”start”][vc_column width=”1/4″ column_sticky=”yes” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764582902116“}}” column_sticky_offset=”30″][vc_custom_heading text=”06.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:83px” css=”.vc_custom_1766393167138{margin-bottom: 18px !important;}”][impeka_slogan title=”INNOVATÍV MENÜ” subtitle=”CHARGEFLOW” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″ grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1646488726440“}}”][vc_column_text css=””]
CHARGEFLOW
Az újdonság: A Chargeflow egy AI‑alapú, automatizált megoldás e-kereskedők számára a chargebackek kezelésére. A weboldalukon számos UI-innováció található, de most ebből is a B2B-k számára olyan fontos referenciák menüpontra fókuszálnánk: A Customers menüpont nem a jól ismert és széles körű elterjedtsége miatt kicsit már lejárt “name dropping” technikáját alkalmazza, hanem konkrét eredményeket jelenít meg – már a menüben. Valahogy így néz ki a megoldás – de érdemes élőben is megnézni a Chargeflow oldalán:
Amiért zseniális: B2B-ben rendszerint bármilyen esettanulmány, eredmény, referencia letöltése a marketingtölcsér mid-funnel részén lehetséges. A Chargeflow már a menüben az arcába tolja a látogatóknak a lényeget néhány kulcsfontosságú szám megjelenítésével.
No bullshit, csak a tények – ha mélyebben érdekel, hogyan csináltuk, akkor kattints. Bármelyik komoly referenciákkal bíró B2B-nek ajánlott, hogy ehhez hasonló UI-design ötletek mentén ennyire világosan és sallangoktól mentesen kommunikáljon leendő ügyfeleivel. Érdemes ránézni amúgy a Chargeflow kalkulátoraira is, ott sem lankadt a UI-design innovatív lendülete.[/vc_column_text][/vc_column][vc_column width=”1/4″ tablet_sm_width=”hide” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764583014962“}}”][/vc_column][/vc_row][vc_row section_type=”fullwidth” rc_bg_type=”color” header_feature=”yes” margin_bottom=”0″ section_id=”start” rc_bg_color=”#F7F7F7″][vc_column width=”1/4″ column_sticky=”yes” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764582840574“}}” column_sticky_offset=”30″][vc_custom_heading text=”07.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:83px” css=”.vc_custom_1766395131004{margin-bottom: 18px !important;}”][impeka_slogan title=”HANGFÁJL A TERMÉK OLDALON” subtitle=”TAG HEUER” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″ grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1646488726440“}}”][vc_column_text css=””]
TAG HEUER
Az újdonság: A luxusiparban elképesztően fontos a kifogástalan online megjelenés. A TAG Heuer a termékoldalán egy hangfájl beillesztésével ad történeti hátteret a termékeknek.
Amiért zseniális: A 2026-os év remek alkalom arra, hogy szépen mindenki végleg leszámoljon azzal a kényszerképzetével, hogy a látogatói masszív szövegblokkokat fognak olvasgatni az oldalán.
Az olvasgatósdinak vége van…
…ennél ma már az e-kereskedelemben érdekesebb, izgalmasabb formátumok és UI-design ötletek kellenek.
A videós formátumok, a kalkulátorok, az interaktív kvízek mind-mind kitűnőek erre a célra, csak ugye sokba kerülnek; ezért is briliáns a TAG Heuer megoldása, mely a manapság nagyon népszerű podcasttrendet ülteti át az e-kereskedelembe egy egyszerű, olcsó hangfájl beillesztésével a termékoldalra.
AI segítségével akár teljes egészében le is lehet másolni valakinek a hangját, így akár a webshop tulajdonosa, a termék tervezője vagy ihletője, sőt, akár szakértők, influencerek is megszólalhatnak a termékoldalon, segítve a felhasználó számára a termék megismerését – mindezt a bonyolult formátumokhoz képest elképesztően olcsón.[/vc_column_text][/vc_column][vc_column width=”1/4″ tablet_sm_width=”hide” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764583006390“}}”][/vc_column][/vc_row][vc_row section_type=”fullwidth” header_feature=”yes” margin_bottom=”0″ section_id=”start”][vc_column width=”1/4″ column_sticky=”yes” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764582902116“}}” column_sticky_offset=”30″][vc_custom_heading text=”08.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:83px” css=”.vc_custom_1768121708057{margin-bottom: 18px !important;}”][impeka_slogan title=”ELŐZÉKENY MEGA MENÜ” subtitle=”BLUM” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″ grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1646488726440“}}”][vc_column_text css=””]
BLUM
Az újdonság: A Blum az egyik legismertebb szerelvénygyártó (szekrényekhez, fiókokhoz, gardrób, konyhabútor, stb.). A weboldalon a mega menü dinamikus, rolloverre történő képes magyarázattal segíti a navigációt és a gyors eligazodást a nevük alapján nem igazán beazonosítható termékek között.
Amiért zseniális: Mindenki igyekszik a weboldalán minden létező termékét megmutatni – ez természetes. Ahol azonban annyi lehetőség van, mint égen a csillag, ráadásul a termékek elnevezése sem közérthető halandók számára, ott a laikus látogatóknak szükségük van valami segítségre, ami alapján el tudják dönteni a menüben, hogy a H, a HK, a HS, a HL, vagy a HK-S sorozat megoldására akarnak-e navigálni.
A menüben dinamikusan, rolloverre változó vizuális segítség az egyszerűen kivitelezhető UI-design ötletek egyik legelegánsabb megoldása erre a problémára.[/vc_column_text][/vc_column][vc_column width=”1/4″ tablet_sm_width=”hide” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764583014962“}}”][/vc_column][/vc_row][vc_row section_type=”fullwidth” rc_bg_type=”color” header_feature=”yes” margin_bottom=”0″ section_id=”start” rc_bg_color=”#F7F7F7″][vc_column width=”1/4″ column_sticky=”yes” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764582840574“}}” column_sticky_offset=”30″][vc_custom_heading text=”09.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:83px” css=”.vc_custom_1768125531154{margin-bottom: 18px !important;}”][impeka_slogan title=”VIDEO A CTA-BAN” subtitle=”LIQUID” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″ grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1646488726440“}}”][vc_column_text css=””]
LIQUID
Az újdonság: A mozgókép alkalmazásának egy nagyon eredeti módját mutatja be a Liquid, amikor egyenesen a CTA-ba helyezi a videót. Nem alá, nem fölé, nem mellé – egyenesen bele. Apróság, de igazi innovatív megoldás!
Amiért zseniális: Minden valamirevaló designer képben van azzal, hogy a videó szinte minden felületen és pozícióban növeli a konverziót. A régi mondás szerint egy kép többet ér ezer szónál; hát, ma meg már egy videó többet ér ezer képnél…
A CTA-ba helyezett videó újdonságfaktora miatt a látogató szinte biztosan áthúzza az egérmutatóját a gombon. Ez pszichológiailag egy mikrokonverzió, ami nagyobb eséllyel vezet a tényleges konverzióhoz, vagyis a kapcsolatfelvételhez.[/vc_column_text][/vc_column][vc_column width=”1/4″ tablet_sm_width=”hide” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764583006390“}}”][/vc_column][/vc_row][vc_row section_type=”fullwidth” header_feature=”yes” margin_bottom=”0″ section_id=”start”][vc_column width=”1/4″ column_sticky=”yes” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764582902116“}}” column_sticky_offset=”30″][vc_custom_heading text=”10.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:83px” css=”.vc_custom_1768216825029{margin-bottom: 18px !important;}”][impeka_slogan title=”ROLLOVER VIDEÓK” subtitle=”DESIGN NATIVES” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″ grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1646488726440“}}”][vc_column_text css=””]
DESIGN NATIVES
Az újdonság: Jöjjön egy magyar csapat innovációja a UI-design ötletek sorában. A Design Natives weboldalán a korábbi munkáikat bemutató referencia résznél egy videós rollover megoldással teszik kívánatosabbá a kattintást.
Érdemes az egyébként is ötcsillagos kategóriába tartozó weboldalukat úgy nézni, hogy e megoldás nélkül is tökéletes lenne, de a csapat nem bízott semmit a véletlenre, és a videós rolloverrel igyekszik növelni az átkattintási arányt.
Amiért zseniális: A gyűjtő-, vagy kategóriaoldalak átka, hogy a legtöbben csak végigszkennelik az egészet, és ennek folyományaképpen csak felületes információkat szereznek az adott oldalról, és szinte semmit az aloldalakról. A Design Natives nyilván ezt pontosan tudja, és nem kevés energiát öltek abba, hogy a munkáikat mélyebben is meg akarja ismerni a látogató.
Hány magyar weboldal tulajdonosa áldozna pénzt egy csomó videó elkészítésébe, amikor ezek a videók semmi más célt nem szolgálnak, mint hogy egyetlen kattintási arányt megnöveljenek?
Az újdonság: 2026-ban a vizualitás új szintjeivel fogunk találkozni. Az AI elterjedésével ugyanis teljesen új horizontok nyíltak meg a UI designban. A 3D termékábrázolás ma már egy sima fotóból elkészíthető AI megoldásokkal, így nem csoda, hogy a SaaS-vállalatok is rákapcsoltak termékelőnyeik sokkal erősebb vizuális alátámasztására.
Amiért zseniális: A 3D sikere két tényezőnek köszönhető: Ezek közül a kisebb jelentőségű, hogy az ábrázolás révén kiemelhető a képernyő azon része, ami a legfontosabb lehet a látogató számára, így csökken a kognitív terhelés.
Pszichológiailag a jelentősebb tényező, hogy fizikai termék hiányában a szoftverek és SaaS-megoldások mindegyike küzd a vásárlók által alacsonyabbnak érzékelt érték problémájával. Bár attól, hogy egy szoftver képernyőképét 3D-ben mutatja be egy oldal, még nem lesz az adott szoftverből fizikai termék, de a tudatalattiban mégis ezt az érzetet kelti az ábrázolás módja.
A 3D vizualizációs technológiákra szakosodott Threekit adatai alapján a 3D konfigurátorok és interaktív elemek használata 40%-kal növeli a konverziót. A Shopify mérései alapján pedig a 3D megoldások 90% feletti konverziónövekedést képesek produkálni.[/vc_column_text][/vc_column][vc_column width=”1/4″ tablet_sm_width=”hide” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764583006390“}}”][/vc_column][/vc_row][vc_row section_type=”fullwidth” header_feature=”yes” margin_bottom=”0″ section_id=”start”][vc_column width=”1/4″ column_sticky=”yes” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764582902116“}}” column_sticky_offset=”30″][vc_custom_heading text=”12.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:83px” css=”.vc_custom_1769340015167{margin-bottom: 18px !important;}”][impeka_slogan title=”JÁTÉKOS ENGAGEMENT” subtitle=”JETON.COM” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″ grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1646488726440“}}”][vc_column_text css=””]
JETON.COM
Az újdonság: Néha egy kis játék is elég, hogy feldobj egy oldalt. A Jeton.com a viszonylag unalmas pénzügyi területen mozogva is képes játékra sarkallni a látogatóit: a valutaváltásoknál egy unalmas felsorolás helyett az egyes valutákat az országzászlókkal illusztrált kis korongok jelképezik, amik drag-and-drop funkcióval is bírnak – ide-oda lehet őket dobálni.
Amiért zseniális: Túl azon, hogy egy kis játék mindig feldobja a látogatók kedvét, ez a megoldás pszichológiailag két szempontból is zseniális. Egyrészt azt az érzetet kelti a látogatóban, hogy úgy játszik a valutákkal és azok átváltásával, ahogy kedve tartja. A másik hatása egy ilyen megoldásnak, hogy úgynevezett mikroelköteleződésként funkcionál. Ha egy látogató már interakcióba lép az oldallal, akkor nagyobb valószínűséggel fog konvertálni is.[/vc_column_text][/vc_column][vc_column width=”1/4″ tablet_sm_width=”hide” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764583014962“}}”][/vc_column][/vc_row][vc_row section_type=”fullwidth” rc_bg_type=”color” header_feature=”yes” margin_bottom=”0″ section_id=”start” rc_bg_color=”#F7F7F7″][vc_column width=”1/4″ column_sticky=”yes” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764582840574“}}” column_sticky_offset=”30″][vc_custom_heading text=”13.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:83px” css=”.vc_custom_1769364704159{margin-bottom: 18px !important;}”][impeka_slogan title=”Megszemélyesítés okosan” subtitle=”SPEEDY.IO” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″ grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1646488726440“}}”][vc_column_text css=””]
SPEEDY.IO
Az újdonság: Sokszor elég csak egyet csavarni a szokásos szlogeneken, és a UI megoldást hozzáigazítani, hogy kitűnjünk a tömegből. Az egyébként is rengeteg gyönyörű UI megoldást felvonultató honlapján, az előző példához hasonlóan, ugyancsak fintechben utazó Speedy.io app a weboldal alján egyedi UI megoldással emeli ki, hogy az app ingyenes. Nemcsak azt mondja, hogy “free” és kész, hanem megszemélyesíti az ingyenesség előnyét az alábbi módon:
Amiért zseniális: Az ingyenes ezmegaz olyannyira elterjedt a marketingben, hogy már nem kapjuk fel rá a fejünket. A Speedy.io megoldása nyomatékot ad az ingyenességnek azzal, hogy neveket rendel a kijelentéshez.
Ez a megoldás a társadalmi bizonyíték nevű motivációs alapelvre épít, és azt sugallja, hogy Linda, James, William és Michael már mind élvezik az applikáció ingyenességének előnyét – ezzel motiválva a látogatót a letöltésre. Elképesztően egyszerű, mégis egyedülállóan okos megoldás.[/vc_column_text][/vc_column][vc_column width=”1/4″ tablet_sm_width=”hide” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764583006390“}}”][/vc_column][/vc_row][vc_row section_type=”fullwidth” header_feature=”yes” margin_bottom=”0″ section_id=”start”][vc_column width=”1/4″ column_sticky=”yes” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764582902116“}}” column_sticky_offset=”30″][vc_custom_heading text=”14.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:83px” css=”.vc_custom_1769365920072{margin-bottom: 18px !important;}”][impeka_slogan title=”ANIMÁLT VÉLEMÉNYEK” subtitle=”SUPERLIST” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″ grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1646488726440“}}”][vc_column_text css=””]
SUPERLIST
Az újdonság: A Superlist testimonial megoldása apróságnak tűnhet, mégis a maga nemében teljesen egyedi. Az oldal legalján, ahol már tényleg csak a footer tartalma van hátra, egy animált hátteret hoz létre az ügyfélvéleményekből, melyre egy réteggel feljebb ráteszi a CTA-t:
Amiért zseniális: Az előző példánál bemutatott társadalmi bizonyítékra épít ez a megoldás is. Önmagában a scrollozódó testimonial nem nagy szám, de az, hogy ezt alulról felfelé teszi (úgynevezett masonry elrendezésben), azzal azt a hatást kelti, mintha ez a lista végtelen lenne (a valóságban nem az). Ehhez jön még a nagyon kontrasztos CTA egy réteggel feljebb, ami nem nagyon hagy a látogatónak más lehetőséget, mint kattintani.[/vc_column_text][/vc_column][vc_column width=”1/4″ tablet_sm_width=”hide” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764583014962“}}”][/vc_column][/vc_row][vc_row section_type=”fullwidth” rc_bg_type=”color” header_feature=”yes” margin_bottom=”0″ section_id=”start” rc_bg_color=”#F7F7F7″][vc_column width=”1/4″ column_sticky=”yes” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764582840574“}}” column_sticky_offset=”30″][vc_custom_heading text=”15.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:83px” css=”.vc_custom_1769367254888{margin-bottom: 18px !important;}”][impeka_slogan title=”Sales rep videóval” subtitle=”LA PRAIRIE” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″ grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1646488726440“}}”][vc_column_text css=””]
LA PRAIRIE
Az újdonság: 800 eurós krémek mellé nyilván dukál a tökéletes, egyedi webshopdesign, a La Prairie pedig ezt komolyan is veszi. Az oldaluk az innovatív UI design ötletek elképesztő tárháza, érdemes végigböngészni, de koncentráljunk most egyetlen megoldásra, ami nemcsak egyszerű, hanem konverziós szempontból is nagyon hasznos – ez pedig a videós sales asszisztensre terelése a vásárlóknak:
Amiért zseniális: Egy luxusmárka webshop designja elképesztően fontos, ha ugyanis nem üzeni azt a prémiumminőséget, amit a márka a termékeivel kapcsolatban ígér, akkor a látogató pszichológiailag olyan gapet fog érezni, ami elkerülhetetlenül a vásárlásokhoz kapcsolódó visszatartó erők felé fogja eltolni a döntést, és nem lesz konverzió.
A videós sales asszisztens olyan prémiumfunkció, mely ezeket a cognitive bias-nek nevezett visszatartó hatásokat igyekszik eliminálni. Külön szépsége a La Prairie megoldásának, hogy kétlépcsős: azaz alaphelyzetben kicsiben látszik a videó, rákattintva azonban megnő a méret, és láthatóvá válik a CTA.[/vc_column_text][/vc_column][vc_column width=”1/4″ tablet_sm_width=”hide” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764583006390“}}”][/vc_column][/vc_row][vc_row section_type=”fullwidth” header_feature=”yes” margin_bottom=”0″ section_id=”start”][vc_column width=”1/4″ column_sticky=”yes” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764582902116“}}” column_sticky_offset=”30″][impeka_slogan title=”ÖSSZEFOGLALÁS” subtitle=”HOGYAN TOVÁBB?” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″ grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1646488726440“}}”][vc_column_text css=””]
Ezt vidd haza ebből a cikkből
Igen, a különleges, innovatív UI design időigényes és drága. Sok magyar döntéshozó nem is érti, hogy mi a jó élet kerülhet egy weboldalfejlesztésben többe, mint 300 rugó. Pedig a matek nem nehéz: ha drágább, profibb emberek több időt töltenek egyedi UI design ötletek kidolgozásával, mint a lelkes freelancer fejlesztőd, akkor az nem 300 lesz… 🤷♂️
Csakhogy egy weboldal a hazai “csak találjanak meg” tévhittel szemben nem egy mellékszála a márkaépítésnek, hanem a teljes online megjelenés alapja.
Ez az Alfa és az Omega.
A weboldalon múlik a konverziós ráta. Ez alapozza meg a márkaértéket. Itt történik a vásárlók vagy ügyfelek bevonódása. A weboldalon “laknak” majd a tartalmaid, a fáradságos munkával elért eredményeid, a méregdrágán vett mid-funnel tartalmaid. Nem mellesleg, a weboldal egyike azon nagyon kevés kommunikációs felületeknek, ahol totális kontrollod van és lesz is sok-sok év múltán is.
De miért fontos ez?
Egy weboldal nem 1-2 évre kell, hanem jó esetben évtizedekre. Egyszer kell rendesen megcsinálni ahhoz, hogy nap mint nap látogatók százainak, ezreinek, – vagy ha egy napon elérsz oda, akkor – millióinak üzenje, hogy a márkád különleges, megbízható, és érdemes a pénzben kifejezett elköteleződésükre.
Ráadásul a hideg tények is azt mutatják, hogy a konverziót profin támogató UI-design ötletekbe fektetett pénz a maga 10 000 (tízezer; nem elírás) százalékos hozamával az egyik legmagasabb megtérüléssel bíró online marketing-befektetés.
Reméljük, inspirálóak voltak a fenti UI design ötletek; sok sikert egy szebb, jobb és valódi megtérülést termelő webes megjelenés megalkotásához! Oh, és kérlek, küldd el ezt a cikket valakinek, akinek az erőfeszítései megérdemelnének egy különleges online megjelenést. Ha pedig láttál még hasonlóan különleges UI megoldásokat, örömmel fogadjuk őket a kommentmezőben![/vc_column_text][/vc_column][vc_column width=”1/4″ tablet_sm_width=”hide” grve_css=”{“desktop“:{“padding-right“:“6%“,“padding-left“:“6%“,“class“:“grve-wpb-1764583014962“}}”][/vc_column][/vc_row]
[vc_row][vc_column][vc_column_text css=””]A customer journey a digitális marketing és UX területén egyre fontosabb szerepet tölt be. Csakhogy sokan nem tudják, hogy azon túl, hogy nagyban hozzájárulhat egy vállalkozás, egy termék sikeréhez, mi fán is terem, és miért olyan fontos.
Ha érdekel, hogyan tud segíteni a felhasználóid megértésében és az ügyfél-elégedettség növelésében egy harcedzett UX designer, akkor a legjobb helyen jársz. Ebben a cikkben részletesen áttekintjük a kapcsolódó fogalmakat, megvizsgáljuk a különbségeket a user journey és a customer journey között, illetve megismerheted, hogyan épül fel egy ideális térkép, ami megvilágítja az eredményesebb működéshez vezető utat.
User journey vs. customer journey?
Az ügyfélútvonal elemzése segít a vállalkozásoknak abban, hogy jobban megértsék ügyfeleik igényeit, érzelmeit és viselkedését, és ennek megfelelően optimalizálják a marketingstratégiájukat, illetve tegyék kiemelkedővé az ügyfélélményt.
A customer journey map és a user journey map között több különbség is van, habár mindkettő a felhasználói élmény vizsgálatára összpontosít.
Fókusz:
Customer journey map: A vásárló szemszögéből vizsgálja az utat, amelyet a vásárló végigjár egy termék vagy szolgáltatás megszerzése során. Magába foglalja az összes érintkezési pontot, amelyen keresztül a vásárló kapcsolatba lép a céggel, beleértve az érzelmi és motivációs tényezőket is.
User journey map:A felhasználó szemszögéből tekinti át az utat, amelyet a felhasználó egy adott termék vagy szolgáltatás használata során bejár. Ez inkább a termék használatára és a felhasználói interakciókra fókuszál.
Célközönség:
Customer journey map: Vásárlókra koncentrál, akik pénzt költenek a termékre vagy szolgáltatásra. Ez magába foglalhatja a potenciális vásárlókat is, akik még csak érdeklődnek.
User journey map: Olyan felhasználókra fókuszál, akik használják a terméket vagy szolgáltatást, függetlenül attól, hogy vásárlók-e vagy sem. Az alanyok itt lehetnek belső felhasználók is, például alkalmazottak.
Időtartam:
Customer journey map: Hosszabb időtartamot ölelhet fel, kezdve az első érdeklődéstől a vásárláson át az utólagos támogatásig és esetleges újravásárlásig.
User journey map: Gyakran rövidebb időszakokat vizsgál, koncentrálva azokra a lépésekre, amelyeket a felhasználó egy adott cél elérése érdekében megtesz a termék használata során.
Érintkezési pontok:
Customer journey map: Széleskörű érintkezési pontokat tartalmazhat, mint például reklámok, ügyfélszolgálat, fizikai boltok, weboldalak, és közösségi média interakciók.
User journey map: Kifejezetten a termékkel vagy szolgáltatással való interakcióra koncentrál, beleértve a felhasználói felületet, funkciókat és szolgáltatásokat.
Cél:
Customer journey map:Célja a vásárlói élmény optimalizálása, a vásárlási folyamat gördülékenyebbé tétele és a vásárlói elégedettség növelése.
User journey map:Célja a termék használhatóságának javítása, a felhasználói élmény finomhangolása és az esetleges akadályok azonosítása, megszüntetése a használat során.
Összességében, bár a két térkép hasonló módszertanra épül, a customer journey map a vásárlói élmény teljes spektrumára koncentrál, míg a user journey map a felhasználói interakciókra és azok optimalizálására összpontosít.
Hogyan segít a customer journey az ügyfélélmény optimalizálásában?
Minél jobban megismerjük a felhasználókat, annál jobban segíthetjük és ösztönözhetjük őket az útjukon, ami elősegítheti a vásárlást.
A jó customer journey összeállításához elengedhetetlen a célcsoport megismerése, és az is kulcskérdés, hogy hogyan (és hol) találkoznak először a termékkel.
A már meglévő felhasználók demográfiai adatai és vonatkozó kutatások alapján felvázolhatjuk az érdeklődési köröket, korosztály(oka)t, fájdalompontokat, jövedelemszintet, lakhelyet stb., ami releváns lehet a vásárlás szempontjából.
Miért fontos a vállalkozásod számára a customer journey?
A vásárlói útvonal elemzések a vállalkozásod számára is jelentősek lehetnek, mivel segítenek megérteni, hogyan lépnek kapcsolatba az ügyfelek/vásárlók a vállalkozásoddal, illetve segítenek optimalizálni a felhasználói élményt.
Ez pedig növeli az ügyfél-elégedettséget és a konverziós rátát, mivel lehetővé teszi a problémás pontok azonosítását és kijavítását. Emellett lehetővé teszi testreszabott marketingstratégiák kidolgozását, versenyelőnyt biztosít, és támogatja a stratégiai döntéshozatalt.
Milyen módszerekkel térképezhetjük fel a vásárlói útvonalat?
Interjúk, kutatások, tesztelés, kérdőívek, felmérések, valamint adat- és analitikai eszközök. Néhány módszer, ami segít az ügyfélélmény javításában. Van még…
Customer és user journey mapping, user flow ábrázolása, empátiatérképek, buyer perszónák alkotása és A/B tesztelés. Tudom, hogy most még a legtöbb kínainak tűnik, de mindjárt tisztul a kép.
Hogyan láss(unk) neki?
A customer journey célja, hogy a termékünk vagy szolgáltatásunk szempontjából minél valóságosabb utat vázoljunk fel, egy valósághű szereplővel.
A térképünk és történetünk főszereplője jellemzően egy buyer persona, de helyzettől függően készíthetünk több mapet különböző personák bevonásával, így több vásárlói réteg is megismerhető. [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”39275″ img_size=”full” alignment=”center” onclick=”img_link_large” img_link_target=”_blank” css=””][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css=””]Annak érdekében, hogy minél pontosabb képet alkossunk a vásárlókról, készíthetünk ügyfélinterjúkat, kérdőíveket, elemezhetjük a különböző rendelkezésre álló adatokat, hőtérképeket és visszajelzéseket.[/vc_column_text][/vc_column][/vc_row][vc_row padding_top_multiplier=””][vc_column vertical_content_position=”middle” rc_heading_color=”primary-1″ rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#203042″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“3%“,“padding-right“:“3%“,“padding-bottom“:“3%“,“padding-left“:“3%“,“border-color“:“#203042“,“border-style“:“solid“,“class“:“grve-wpb-1641856477031“}}”][vc_column_text css=””]
Pár megfontolandó kérdés a customer journey készítése előtt:
Milyen üzleti célt szeretnél elérni?
Mely érintkezési pontokra szeretnél összpontosítani?
Hogyan tudod megszerezni a szükséges adatokat?
Milyen csapatot szeretnél bevonni a tervezésbe/ötletelésbe?
Ki/kik a vizsgálni kívánt felhasználó(k)?
Milyen célt akarunk elérni?
Mely útvonalat szeretnénk optimalizálni?
Hogyan érhetőek el azon felhasználók, akik még nem vásárlók?
Ismerünk-e konkrét pain pontokat a vásárlói út során?
Mi történik mielőtt a felhasználó eljut a weboldalunkra?
Milyen kulcsszavakat használnak a potenciális vásárlók kereséskor?
Customer journey map: térkép a felhasználókhoz (és nak)
A customer journey map egy olyan folyamat ábrázolása, amelyen egy felhasználó útját kísérjük végig egy kitűzött cél eléréséig és mindeközben feltérképezzük az út során keletkezett gondolatokat, érzéseket és cselekvéseket. Ezt a módszert a user experience tervezés során szoktuk alkalmazni, hogy ezáltal minél részletesebben megértsük a felhasználók igényeit és frusztrációit.
Képzeld el, hogy egy új egeret szeretnél vásárolni a laptopodhoz. Az oldalra érkezve egymás után felugró ablakok jelennek meg a képernyődön: “Iratkozz fel”, “Ingyenes szállítás”, “Kérdésed van?”, nem győzöd bezárni az ablakokat, esetleg félrekattintasz, ami frusztrációt okoz benned. De ez még semmi.
Később a navigációs menün belül próbálod megtalálni, amit keresel, de a rossz kategorizálás miatt nem látod át, melyik kategória tartalmazhatja az általad keresett terméket.
Következő lépésként a keresőmotorba beírod a kulcskifejezést, például “vezeték nélküli egér”, de a keresési eredmény az általad keresett termékek mellett rengeteg nem releváns terméket is megjelenít, így nem látod át a termékkínálatot. Következmény? Eliszkolsz az oldalról.
Ebben az esetben hasznos lenne megvizsgálni a felhasználó útját és elakadási pontjait egy user journey map segítségével, ahol feltérképezhetjük a vásárló gondolatait, érzéseit és feljegyezhetjük a kihagyott optimalizálási lehetőségeket.[/vc_column_text][/vc_column][/vc_row][vc_row padding_top_multiplier=””][vc_column vertical_content_position=”middle” rc_heading_color=”primary-1″ rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#203042″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“3%“,“padding-right“:“3%“,“padding-bottom“:“3%“,“padding-left“:“3%“,“border-color“:“#203042“,“border-style“:“solid“,“class“:“grve-wpb-1641856477031“}}”][vc_column_text css=””]A fent említett példánál maradva megoldás lehet a felugró ablakok minimálisra csökkentése, a helyes termékkategorizálás és a keresőmotor optimalizálása, hogy a felhasználó könnyen és egyszerűen megtalálja az általa keresett terméket.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”39268″ img_size=”full” alignment=”center” onclick=”img_link_large” img_link_target=”_blank” css=””][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css=””]
Hogyan épül fel egy customer journey map?
A következő bekezdésben bemutatjuk egy általános customer journey map felépítését, azonban ez a váz nincs kőbe vésve és eltérő lehet a különböző helyzetek alapján.
A persona bevonásával indítunk, feltüntethetjük az általános adatait (kor, nem, tanulmányok, jellemző tevékenységek) és mellette a folyamat forgatókönyvét, illetve a kívánt célokat, elképzeléseket. [/vc_column_text][/vc_column][/vc_row][vc_row padding_top_multiplier=””][vc_column vertical_content_position=”middle” rc_heading_color=”primary-1″ rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#203042″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“3%“,“padding-right“:“3%“,“padding-bottom“:“3%“,“padding-left“:“3%“,“border-color“:“#203042“,“border-style“:“solid“,“class“:“grve-wpb-1641856477031“}}”][vc_column_text css=””]A következő főszakaszt általában oszlopokra osztjuk a különböző fázisok szerint. Ezek például a következők lehetnek: tudatosság, fontolgatás, döntés, vásárlás utáni szolgáltatás, hűség.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css=””]A szakaszokon végigkísérve a vásárlót, feljegyezzük annak lehetséges vagy kívánt cselekvéseit, gondolatait és érzelmeit, melyeket akár alátámaszthatunk idézetekkel vagy egyéb kutatási anyagokkal.
Gyakran különféle hangulatjelekkel is reprezentáljuk az adott felhasználói érzéseket, illetve ezeket összekötjük egy vonallal, hogy az első lépéstől az utolsóig követhessük az érzelmek változását.
Végül feltüntetjük a különböző fázisokhoz tartozó lehetőségeket, a felfedett fájdalompontokat és megoldásokat, valamint egyéb ügyfélélmény-javító javaslatokat.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”39263″ img_size=”full” alignment=”center” onclick=”img_link_large” img_link_target=”_blank” css=””][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css=””]
Mit ismerhetünk meg a customer journey map által?
A customer journey map jellemzően tartalmazza a következő elemeket:
Felhasználói fázisok: Ezek a különböző szakaszok, amelyeken a felhasználó áthalad kezdve a megismeréstől, az érdeklődésen és döntésen át egészen a vásárlás utáni fázisokig.
Érintkezési pontok: Azok a helyek és eszközök tartoznak ide, amelyeknél a felhasználó interakcióba lép a termékkel vagy szolgáltatással (ilyen például a weboldal, alkalmazás, ügyfélszolgálat vagy valamely social media felület)
Felhasználói cselekvések: Ezek konkrét tevékenységek, amelyeket a felhasználó végez a különböző fázisokban, például információkeresés, vásárlás, panasz benyújtása, stb..
Felhasználói érzelmek:Az út során feljegyezzük a látogató (később vásárló) érzelmi reakcióit és érzéseit az egyes érintkezési pontoknál (például elégedettség, frusztráció, bizalom stb.)
Kihívások és lehetőségek: A customer journey map segítségével megismerhetjük, hogy a vásárlók milyen problémákba és akadályokba ütközhetnek az útvonal során, és ez lehetőséget ad a különböző, új megoldások felvetésére és implementálására.
Nézőpontok találkozása a tervezés folyamata közben
Elsősorban azért fontos a térkép elkészítésének folyamata, mert abba a helyzetbe “kényszeríti” a csapatot, hogy egyfajta közös elméleti síkon gondolkodjanak egy-egy a vásárlói élmény javítására irányuló workshop vagy brainstorming keretein belül.
Egy vásárlási folyamatot egészen máshogy lát át egy marketinges, egy SEO szakértő, egy designer vagy egy fejlesztő. Ezért rendkívül fontos ütköztetni a nézőpontokat.
A journey mapek kulcsfontosságúak a termékkel/szolgáltatással kapcsolatos, későbbi döntéshozatal szempontjából.
Érintkezési pontok: a felhasználói élmény kulcsfontosságú pillérei a fizikai és digitális térben
Az érintkezési pontok azok a helyek és eszközök, ahol a felhasználók interakcióba lépnek egy termékkel, szolgáltatással vagy márkával.
A fizikai érintkezési pontok, például az üzletek és események, lehetővé teszik a személyes találkozást a termékekkel.
A digitális érintkezési pontok, mint például a weboldalak, közösségi média platformok és e-mailek, az online jelenlétet erősítik, és a vállalkozással való könnyebb és gyorsabb kapcsolattartást, kommunikációt segítik elő.
Ezek mellett fontos szerepet játszhatnak még az ügyfélszolgálati pontok és mobilalkalmazások is a felhasználói út során.
Az érintkezési pontokon szerzett élmények mély benyomást gyakorolnak a felhasználókra, és ezek határozzák meg azt, hogy a vásárlók visszatérnek-e, vagy ajánlják-e a vállalkozást másoknak.
Néhány példa a customer journey térképek fázisaira, különböző területekről
Szolgáltatás igénybevétele (példa: banki szolgáltatás)
Tudatosság: Az ügyfél lát egy hirdetést egy új bankszámla-lehetőségről.
Érdeklődés: Az ügyfél ellátogat a bank weboldalára, hogy többet tudjon meg az ajánlatról.
Döntés: Az ügyfél úgy dönt, hogy megnyit egy új bankszámlát, és megadja a szükséges információkat.
Vásárlás: Az ügyfél befejezi a számla megnyitását és aktiválja a számlát.
Utókövetés: A bank e-maileket küld az ügyfélnek az új szolgáltatásokról és ajánlatokról.
A vásárlói út során tapasztalt pozitív és negatív érzelmek jelentős hatással vannak a vásárlóra:[/vc_column_text][/vc_column][/vc_row][vc_row equal_column_height=”equal”][vc_column rc_heading_color=”white” rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#114402″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“5%“,“padding-right“:“5%“,“padding-bottom“:“5%“,“padding-left“:“5%“,“border-color“:“#1c6f0a“,“border-style“:“solid“,“class“:“grve-wpb-1720615039890“}}”][impeka_icon icon_library=”simplelineicons” icon_simplelineicons=”smp-icon-check” icon_color=”white”][vc_column_text css=””]
Pozitív érzések
Elégedettség
A felhasználó gyorsan megtalálja, amire szüksége van, és elégedett a szolgáltatás minőségével.
💡 Tipp: Használj egyszerű és átlátható navigációt a weboldalon vagy alkalmazásban, hogy a felhasználók könnyedén tájékozódjanak az oldalon.
Bizalom
Az ügyfél megbízik a vállalkozásban vagy márkában, miután felmerülő kételyeit eloszlatják a weboldalon látott, olvasott kulcselemek.
💡 Tipp: Weboldal esetében használj olyan, bizalmat építő elemeket, mint például a partner- vagy ügyféllogók, társadalmi bizonyítékok, vélemények, biztonságos fizetési mód badge-ek.
Izgalom
A felhasználó izgatott egy új termék vagy szolgáltatás kipróbálása miatt.
💡 Tipp: Használj interaktív elemeket, videókat vagy egy online termék esetében izgalmas megoldás lehet az AR funkció integrálása is.
Elismerés
A felhasználó értékeli a személyre szabott ajánlatokat vagy kedvezményeket, amelyeket kapott.
Az ügyfél könnyedén és egyszerűen tud vásárolni vagy használni egy szolgáltatást.
💡 Tipp: Tervezd a vásárlási vagy szolgáltatási folyamatot egyszerűre és intuitívra, hogy a vásárlók gyorsan és problémamentesen tudjanak végighaladni a vásárlói útvonalon. [/vc_column_text][/vc_column][/vc_row][vc_row equal_column_height=”equal”][vc_column rc_heading_color=”white” rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#a50220″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“5%“,“padding-right“:“5%“,“padding-bottom“:“5%“,“padding-left“:“5%“,“border-color“:“#a50220“,“border-style“:“solid“,“class“:“grve-wpb-1720615182742“}}”][impeka_icon icon_library=”simplelineicons” icon_simplelineicons=”smp-icon-close” icon_color=”white”][vc_column_text css=””]
Negatív érzések
Frusztráció
A felhasználó csalódott, mert nem találja, amit keres, vagy nehézségei vannak a weboldalon való navigálás terén.
Zavarodottság
Az ügyfél nem érti a termék vagy szolgáltatás működését, vagy zavaros, nehezen értelmezhető az információcsomag.
Bizalmatlanság
A felhasználó bizonytalan a termék vagy szolgáltatás minőségével kapcsolatban, kétségei vannak az átláthatósággal kapcsolatban.
Türelmetlenség
A felhasználó türelmetlen, ha hosszú várakozási időket tapasztal, például ügyfélszolgálatnál vagy oldalbetöltéskor.
Csalódottság
A vásárló csalódott, ha a termék vagy szolgáltatás nem felel meg az elvárásainak, illetve a hirdetésben ígérteknek.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css=””]A fent felsorolt érzelmek mind befolyásolják a vásárlói hűséget és elégedettséget. Annak érdekében, hogy az általad kínált szolgáltatás vagy termék 5 csillagot kaphasson (vagy 10-et, platformtól függően), érdemes megvizsgálni és optimalizálni a negatív érzéseket kiváltó folyamatokat.
Vegyünk egy customer journey példát az offline világból
Tudatosság:
Anna sétál az utcán, és meglát egy divatos ruházati üzletet. A kirakatban bemutatott aktuális kollekció felkelti az érdeklődését, és úgy dönt, hogy bemegy az üzletbe.
Érdeklődés:
Anna belép az üzletbe, és körbenéz. Látja a különféle ruhadarabokat, kiegészítőket és cipőket, amelyek szépen vannak elrendezve. Az üzlet munkatársa köszönti és felajánlja, hogy segít neki, ha bármilyen kérdése lenne. (Izgatottság, átláthatóság, bizalom.)
Döntés:
Anna végignézi az egyes termékeket, és talál egy neki tetsző cipőt. Megnézi az árcímkét, és az üzlet munkatársától további információkat kér a termékről, a méret- és színválasztékról, a készletről. (Izgatottság, támogatottság, bizalom, informáltság.)
Vásárlás:
Anna úgy dönt, hogy megvásárolja a cipőt, és elmegy a kasszához. Az üzlet munkatársa segít neki a vásárlási folyamatban, és felajánlja neki, hogy vásároljon a cipő mellé egy ápolószert is, kedvezményes áron. (A fizetés általában frusztrációt szül a vásárlóban, fontos ezt minél inkább csökkenteni.)
Utókövetés:
Anna kap egy nyugtát a vásárlásról, és az üzlet munkatársa megkérdezi, hogy szeretne-e részt venni a hűségprogramban, ami kedvezményeket és exkluzív ajánlatokat biztosít. Anna él a lehetőséggel, és az üzlet munkatársa regisztrálja őt a programba.(Elégedettség, bizalom, elismerés.)
UI/UX best practice-ek a nagyvilágból
A cikk végére hoztunk neked néhány olyan UI/UX példát, amelyek megmutatják, hogy a jó user experience design tervezés eredményeként, mely sok esetben tartalmazza a megfelelő customer journey elkészítését, milyen, a felhasználók számára is könnyen érthető és használható végtermék hozható létre.
Airbnb: Az Airbnb kiemelkedő felhasználói élményt nyújt a rugalmas és pontos keresési, valamint szűrési funkcióival, amelyek lehetővé teszik a felhasználók számára, hogy könnyen megtalálják az igényeiknek megfelelő szálláshelye(ke)t. Mindemellett az interaktív térképek és listanézetek még kényelmesebbé teszik a választást. Valamint a könnyen elérhető vendégértékelések és a host profilok növelik a felhasználói bizalmat, illetve segítik a döntéshozatalt.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”39264″ img_size=”full” alignment=”center” onclick=”img_link_large” img_link_target=”_blank” css=””][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css=””]Apple: A jól ismert technológiai vállalat weboldala kiemelkedik letisztult és esztétikus desigjával, ami lehetővé teszi, hogy a felhasználók könnyedén megtalálják a lényeges információkat. Az egyszerű és átlátható navigációval a látogatók gyorsan megtalálják, amit keresnek. Emellett az oldal következetes vizuális stílusa és a részletes termékleírások biztosítják, hogy a vásárlók jól informáltak legyenek.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”39267″ img_size=”full” alignment=”center” onclick=”img_link_large” img_link_target=”_blank” css=””][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css=””]Netflix: A streaming platform kiváló élményt nyújt többek között az algoritmusának köszönhetően, amely a felhasználói viselkedés alapján személyre szabottan ajánl filmeket és sorozatokat, biztosítva ezzel, hogy a nézők mindig releváns tartalmakat találjanak. Az intuitív kezelőfelület könnyűvé teszi a böngészést és a keresést a hatalmas tartalomcunamiban. Emellett a borítók, előzetesek és részletes leírások kiváló vizuális megjelenítést biztosítanak, megkönnyítve ezzel a felhasználók dolgát a film/sorozatválasztás során.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”39270″ img_size=”full” alignment=”center” onclick=”img_link_large” img_link_target=”_blank” css=””][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css=””]Spotify: A Spotify nem hiába az egyik legnépszerűbb zenei streaming platform, a zene felfedezésére szolgáló hatékony ajánló algoritmusainak és személyre szabott lejátszási listáinak köszönhetően egy átlátható és könnyen kezelhető felületet biztosítanak a felhasználók számára. A felhasználóbarát kezelőfelület egyszerűen navigálható, így a zene keresése és lejátszása könnyedén elvégezhető. Emellett a Spotify különböző eszközökkel és platformokkal való könnyű és gyors integrálhatósága biztosítja, hogy a felhasználók bárhol, bármikor meghallgathassák kedvenc számaikat.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”39271″ img_size=”full” alignment=”center” onclick=”img_link_large” img_link_target=”_blank” css=””][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css=””]Amazon: Az e-kereskedelem óriása kiemelkedő UX megoldásokat nyújt, köztük a személyre szabott termékajánlásaival, amelyek az egyéni vásárlási szokások alapján segítenek releváns termékeket találni. Az egyszerű és gyors vásárlási folyamat (beleértve az egykattintásos vásárlást és az intuitív kosárkezelést) megkönnyíti a vásárlást.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”39265″ img_size=”full” alignment=”center” onclick=”img_link_large” img_link_target=”_blank” css=””][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css=””]
Útravaló
Cikkünkben áttekintettük, hogyan segíthet a customer journey megtervezése a vállalkozásoknak abban, hogy jobban megérthessék ügyfeleik viselkedését és igényeit (a magasabb konverzió és elégedettség érdekében).
Legyen szó egy termékről vagy egy szolgáltatásról, a customer journey map készítése és folyamatos frissítése elengedhetetlen lépés az ügyfelekkel való jobb kapcsolattartás, valamint a kívánt versenyelőny megszerzése érdekében.
A customer journey nem csupán egy elméleti fogalom, hanem egy hatékony eszköz is. Az alapos megértés és a gyakorlati alkalmazás révén a vásárlói útvonal feltérképezése hozzájárulhat az ügyfélélmény optimalizálásához és az üzleti sikerhez.[/vc_column_text][/vc_column][/vc_row]
[vc_row][vc_column][vc_column_text]A Google Enhanced Conversion Tracking (rövidítve ECT, magyarul: fejlett konverziókövetés) egy vadonatúj eszköz a Google Ads-ben, amely egy zseniális újítással segít a Google-nek pontosabban azonosítani az oldalon konvertáló vásárlók kilétét és ennek segítségével tovább-optimalizálni a hirdetéseid hatékonyságát a weboldaladon keletkező látogatói szignálok alapján.
Komoly hirdetés-optimalizálási lehetőséggel kecsegtet és nem kerül pénzbe sem – bár a méréstechnika feliratú gatyát azért fel kell kötni hozzá, mert nem könnyű a helyes beállításokat megkomponálni. Az alábbiakban részletesen elmagyarázom hogyan működik az Enhanced Conversion tracking, hol tudod beállítani és mire számíthatsz, miután beizzítottad, hamarosan pedig jön egy részletes technikai útmutató videó is a beállításhoz Udvarhelyi Ádám Kollégámtól.
Kezdjük a problémával – egy példán keresztül
Hősünket, Balambért a halálba idegesíti a bérházban kettővel alatta lakó és vasárnap reggelenként a Mária Rádiót bömböltető Teri néni, ezért egy méretes hifit keres hogy egyenlő esélyekkel vághasson vissza. Olyannyira beleélte magát, hogy kedvenc Ganxsta Zolee számaival fog odverni az idegein táncoló hétvégi ájtatosságnak, hogy a munkahelyén ebédszünetben is következő csapásmérő eszközével szemezget az általad rendületlenül hirdetett hifiokosba.hu webshopodon.
Talál is egy zúzós darabot, be is teszi a kosárba a webshopodban, de beszippantja a meló és csak este tudja nyélbe ütni az év “fegyverüzletét” – a telefonján, ahol a magán e-mail címével van bejelentkezve, nem pedig a cégessel.
A hagyományos analitika ezt a konverziót direkt forráshoz könyvelné, az Ads pedig nem látná konverziónak egyáltalán…
…mivel ugye nem hirdetésből jött!
Az Enhanced Conversion Tracking azonban felismeri, hogy a magán e-mail címhez megadott 2FA telefonszám ugyanaz, mint a munkahelyi e-mail cím esetében, ahol Balambér a hirdetésre kattintott. Össze is köti a kettőt szorgosan; így egyrészt pontosabban mutatja a hirdetés-teljesítményt, másrészt Balambérhoz hasonló szomszéd-problémás arcokból is többet tud majd később a webshopodba irányítani. Na, ki a fasza gyerek?
Mit nyersz vele, ha beállítod?
Az Enhanced Conversion Tracking a konverziók sokkal pontosabb mérését teszi lehetővé, így a Google képes tovább optimalizálni a hirdetéseid teljesítményét. Magyarul: ugyanannyi költésből több zsetonod jön vissza – méghozzá nem is akármennyivel több…
Search kampányokban 5%, YouTube hirdetéseknél 17% körüli konverzió javulásra számíthatsz
Mivel tök ingyen van és hónapról-hónapra több pénzt hoz, ezért felületes szemlélő számára némileg retardáltnak tűnhet nem használni… Alaposabb áttekintést követően pedig immár teljes bizonyossággal kijelenthetjük, hogy kifejezetten ostoba döntés az Enhanced Conversion Tracking mellőzése!
További előnye, hogy az Enhanced Conversion Tracking alkalmazásával a Google Ads és az Analytics historikusan külöböző adatai “összeérnek” és többé soha nem kell a kampánymenedzseredet a két érték különbségéért terrorizálnod (nem mintha eddig is tehetett volna a méréstechnika eme hiányosságáról bármelyik performance marketing szakember)… Na nézzük, hogy is működik a dolog a gépháztető alatt:
Hogyan működik az Enhanced Conversion Tracking?
A hagyományos konverziókövetés azt méri, hogy mennyi látogató kattint a hirdetésre és hajt végre meghatározott célokat a weboldaladon
…például megtekint egy adott landing oldalt, kitölt egy űrlapot, esetleg feliratkozik egy hírlevélre. Igen ám, de ehhez úgynevezett 3rd party cookie kell, ami már pont ugyanannyira kiment a divatból, mint a boszorkányégetés, így a legtöbb böngésző már sem ezt, sem azt nem támogatja.
Ezzel szemben az Enhanced Conversion Tracking úgynevezett 1st party sütivel dolgozik, ami társadalmilag ugyanolyan elfogadott, mint a szelektív hulladékgyűjtés, ráadásul azt is lehetővé teszi a hirdetők számára, hogy további anonímra hash-elt adatokat (vásárlás összege, átlagos kosárérték, oldalak látogatási sorrendje, stb.) gyűjtsenek a felhasználók weboldalon végzett cselekedeteiről és ezeket az adatokat felhasználják a kampányteljesítmény javítására.
Bónusz, hogy ezeket az adatokat a kulcsszavak szintjén is eltárolják – tovább növelve ezzel a célzás és ezen keresztül a hirdetések teljesítményének hatékonyságát.
Az ECT úgy működik, hogy a hirdető által megjelölt űrlap mezőkbe kerülő adatokat (e-mail cím, telefonszám) kapja el, hash-eli, majd küldi anoním módon a Google-nek. A Google ezt összehasonlítja az általa tárolt, ugyancsak hash-elt felhasználói adatokkal, így ki tudja mutatni az egyezést a konkrét adat ismerete nélkül. E-commerce vállalkozások álma, de komolyan![/vc_column_text][/vc_column][/vc_row][vc_row][vc_column vertical_content_position=”middle” rc_heading_color=”primary-1″ rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#203042″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“3%“,“padding-right“:“3%“,“padding-bottom“:“3%“,“padding-left“:“3%“,“border-color“:“#203042“,“border-style“:“solid“,“class“:“grve-wpb-1641856477031“}}”][vc_column_text]FRISSÍTÉS (2023 május)
Nemrég Kollégáim konzultáltak a Google egyik szakértőjével – kifejezetten az ECT e-commerce beállításait áttekintve. Amennyiben gtag-et (Google Tag) használsz, akkor a webshopodban az ECT beállítása lényegében automatikus.
Lead generálás szempontjából, ha lehet, még fontosabb ez az új mérési módszer, mert jellemzően az online formában beérkező lead-ek száma nem éri el egy webshop napi több száz vásárlójának nagysegrendjét, így már egy-egy mellément mérési pont is komoly stratégiai hibák elköveteését eredményezheti a döntéshozóknál. Az enhanced conversion tracking révén egy hirdetésből érkező, de aztán form kitöltés helyett mondjuk telefonon érdeklő lead is hozzáköthető a hirdetési teljesítményhez, míg korábban ehhez külön call tracking megoldásra és komoly egyedi drótozgatásra volt szükség.
B2B-ben jellemzően az ilyen offline, vagy bonyolultabb attribúció nyomán végbement tranzakciók mérhetősége – és ezen keresztül ugyancsak a jobb hirdetési teljesítmény – lesz az eredménye az enhanced conversion tracking beállításának.
Mi kell a beállításhoz?
Egy hozzáértő által setup-olt Ads fiók és ugyanannek a szakértőnek – vagy egy másiknak – némi szabadideje. A beállítást elvégezheted automatikusan (GTM és gtag.js is működik automatán), vagy manuálisan Google Tag Manager segítségével, ugyancsak manuálisan Google tag-gel, vagy Google Ads API segítségével. A manuális beállítás elég macerás, ennek érdemi méréstechnikai képzettség nélkül nem érdemes nekiállni, az automata viszont egy kis affinitással “házilag” is beállítható.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column vertical_content_position=”middle” rc_heading_color=”primary-1″ rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#203042″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“3%“,“padding-right“:“3%“,“padding-bottom“:“3%“,“padding-left“:“3%“,“border-color“:“#203042“,“border-style“:“solid“,“class“:“grve-wpb-1641856477031“}}”][vc_column_text]
És a GCLID az smafu?
Korábban is létezett ugyan offline konverzió tracking a Google-nél, ugyanakkor ehhez egy URL paraméter, az úgynevezett GCLID-et kellett becsempészni a formjainkba, vagy épp a CRM rendszerünkbe. Az új méréstechnikai eszköz, az ECT ezt megspórolja nekünk, mert nem URL paraméterrel, hanem a már fent is említett 1st party sütikkel és az adatok anonimzálásával (hash-eléssel) dolgozik.
még nincs konverziós esemény a megadott URL-en, vagy
ha nem kérsz be személyes adatokat az űrlapon (ez ugye nem tipikus, de előfordul). Ugyanígy problémás lehet a beállítás,
ha több oldalon, különböző módon tárolt látogatói adatokat használsz (például több landing, több form, mindegyikben más-más adatokat kérve), vagy
ha iFrame-ben vannak az űrlapjaid (van workaround erre is, de az a hardcore kategória és nem untatnám vele itt a nagyérdeműt).
A beállítás módja
Mindenekelőtt be kell kapcsolnod az Enhanced conversion tracking-et a Google Ads-ben (itt a Google Tag-es megoldást mutatom):
A beállítás teljes mentéről hamarosan érkezik egy részletes videó a 7Blog-on, amennyiben a Belső Kör tagja vagy, el fogjuk küldeni neked, amennyiben nem, akkor fent a menüben a Trükkök menüpontot javaslom nyomogatásra.
Beállítás Tag Manager segítségével
A GTM (Google Tag Manager) WordPress plugin segítségével is be lehet állítani az ECT-t az oldaladon. Ehhez a Tag Manager WP plugin Integrációk menüpontjára kell kattintanod, ahol rögvest látni fogod a beállítási opciót. Ezután kövesd ezt a leírást és meg is van a beállítás.
Enhanced Conversion beállítás más plugin segítségével
A nagyon népszerű Pixelyoursite is támogatja az ECT beállítását – de sajnos csak a fizetős verzióban. Amennyiben ezt a plugint használod, nézd meg ezt a videót az Enhanced conversion tracking lépésről-lépésre beállításáról.
—
Beállítás lead-ekre tag managerrel
Ha Google Tag Manager-t használsz, ezen az útmutatón menj végig az Enhanced Conversion Tracking beállításához.
Összefoglalás
Amit meg kell érteni az Enhanced Conversion Tracking beállításával kapcsolatban, az az, hogy – főleg B2B-ben – nem lesz két egyforma oldal, így nem lesz két egyforma beállítás sem, mivel a konverziós útvonalak, a form-ok, az oldalon használt egyedi megoldások, de főleg a mérés logikája weboldalról weboldalra változik. Ha nem akarsz egyedül nekiállni, no worries, szakavatott PPC menedzser legtöbbször minimális fejlesztői segítséggel, vagy akár anélkül is be tudja állítani neked.
A hirdetések egyre drágábbak és túl sok az olyan döntéshozó, aki képtelen megérteni, hogy ugyanabból a havi 400 ezer forintos hirdetési büdzséből, amivel nyolc éve Ő volt a király, már nem lehet ugyanazt a mennyiségű árbevételt behozni, így minden optimalizálási lehetőséget ki kell használni. Az Enhanced Conversion Tracing javítja a mérést, többet is hoz a konyhára és ha nincs nagyon elbonyolítva az oldalad, akkor nem is atomfizika beállítani – nekem nem úgy hangzik, mintha túl sokat kellene rajta gondolkodni…
Ha találtál újdonságot a cikkben, vagy segítségedre lehettünk a beállításban, akkor kérlek, nyomd meg valamelyik megosztás gombot két jó szó kíséretében. Ha pedig már használod az enhanced conversion tracking méréstechnikáját, akkor kérlek, mondd el nekünk a tapasztalataidat a megújult komment szekcióban.[/vc_column_text][/vc_column][/vc_row]
Sokszor olvashattad a 7Blogon – és mostanában egyre több más oldalon is -, hogy adatvezérelt marketing… de ugyan mitől lesz egy online piacszerzési technika adatvezérelt? A látogatók viselkedésének mérése és üzleti szempontú elemzése a metodika kulcsa, ahhoz azonban, hogy a marketing adatvezérelt legyen, ez még édeskevés. Az alábbi cikk betekintést nyújt a szegmentációba, az A/B tesztelésbe és annak a módszertannak a technikáiba, amit sok amerikai online marketing ügynökség mellett a 7Digits is alkalmaz a mindennapokban. Íme, így működik az adatvezérelt marketing a gyakorlatban:
Szegmentáció
Az adatvezérelt működés a marketing tölcsér teljes hosszában alkalmazható, így rögtön a hirdetéseknél kezdődik. Az adatvezérelt hirdetések egyik legalapvetőbb technikája a szegmentáció. A szegmentáció lényege, hogy bizonyos ismérvek alapján szétdaraboljuk a piacot, és megnézzük, hogy melyik szegmens hogyan teljesít.
A piaci szegmentáció nem új dolog, multinacionális vállalatok évtizedek óta végeztetnek közvélemény-kutatásokat annak érdekében, hogy megtudják, hogy a férfiak vagy a nők, vagy épp a 18-25 évesek avagy a 40 év felettiek reagálnak-e jobban az üzeneteikre. A modern online marketing azonban ennél jóval tovább megy…
A nagy különbség
A közvélemény-kutatással – szemben az A/B tesztelés gyakorlatával – ugyanis van két óriási probléma: az első, hogy meglehetősen lassú és drága, így mindmáig a közép- és nagyvállalatok játékszere maradt. A másik probléma, hogy a közvélemény-kutatás véleményt mér (az emberek pedig nem feltétlenül mondanak mindig igazat). Nem azért, mert tudatosan hazudnak, hanem azért, mert a közvéleménykutatás kontextusában olyan vélt, vagy vágyott színben tüntetik fel döntéseiket, amik a valóságban máshogy alakulnak.
Nem feltétlenül van szó szándékos ferdítésről, pusztán arról, hogy pillanatnyi kedvünk óhatatlanul befolyással van arra, hogy miről mit gondolunk, nem beszélve a gyakran rosszul összeállított kérdőívekről, rossz irányból közelítő kérdésekről – amelyek szükségszerűen torzítják a végeredményt.
Az adatvezérelt marketing eszköze, az A/B tesztelés a közvélemény-kutatásokkal szemben nem véleményt, hanem viselkedést mér…
…és így olyan mély és árnyalt piacismeretet nyújt alkalmazóinak, amire egy közvélemény-kutatás soha nem lesz képes — ráadásul mindezt olcsón és gyorsan.
Ez a módszer tehát természetéből fakadóan áthatol a társadalom felé mutatott álarcon azáltal, hogy a tényleges viselkedést méri és teszi standardizálhatóvá. Márpedig aki képes kifürkészni és standardizálni az emberek viselkedését, az bizonyos mértékig képessé válik előre jelezni, illetve befolyásolni is azt — a viselkedéstervezés művesztéről alább lesz is még szó bőven.
A/B tesztelés
Ami a piac tekintetében a szegmentáció, az a hirdetések és a landing oldalak esetében az A/B tesztelés. A/B tesztnek hívjuk, amikor egy hirdetés vagy landing oldal két variációját teszteljük azáltal, hogy ugyanarra a közönségre párhuzamosan indítjuk el a két hirdetést. Az adott közönségből a Facebook algoritmusa véletlenszerűen választja ki azokat, akiknek megmutatja az egyik vagy a másik hirdetést, így pedig pontosan lemérhető a hirdetések egyes változatainak teljesítménye.
Az A/B tesztekkel kiválóan összehasonlítható két hirdetés, bár pontosabb eredményt kapunk, ha a hirdetésnek csak egy-egy elemét (mondjuk a képi kreatívot, vagy a címsort) A/B teszteljük. Ebből a lehetőségből született meg az adatvezérelt marketing egyik gyakorlati elve: minek is vitatkozzunk a kreatívokon, amikor lehetőség van a kérdés objektív eldöntésére azáltal, hogy éles környezetben leteszteljük, melyik variáció teljesít jobban és utána azt alkalmazzuk a teljes célcsoportra?
A régi iskola
A marketing régi iskolája által használt hagyományos ATL-felületeken sem a szegmentáció sem az A/B tesztelés lehetősége nem létezett; nemcsak túl drága lett volna tízféle óriásplakátot vagy TV-spotot legyártani, de — mivel úgysem lehetett pontosan mérni a vásárlók reakcióját — a több variáció nem is eredményezett volna semmilyen használható adatot.
Ezért inkább nekiültek a legjobb kreatívok, és naphosszat vitáztak azon, hogy melyik variáció legyen a nyertes; a végén megállapodtak, és soha senki nem volt képes megmondani, hogy jól döntöttek-e vagy sem… A nagy online hirdetési platformok és az adatvezérelt marketing módszertana azonban túllépett ezen a világon.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column vertical_content_position=”middle” rc_heading_color=”primary-1″ rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#203042″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“3%“,“padding-right“:“3%“,“padding-bottom“:“3%“,“padding-left“:“3%“,“border-color“:“#203042“,“border-style“:“solid“,“class“:“grve-wpb-1647175079301“}}”][vc_column_text]
Érdekesség
Az Egyesült Államokban a vállalatok 93%-a alkalmaz A/B tesztelést az email kampányaiban.
Ma nem csupán arra vagyunk képesek, hogy különböző mikroközönségeken leteszteljük a hirdetési kreatívokat, a célzást, az üzenetet, vagy épp a landing oldal teljesítményét, hanem még egy lépéssel tovább is mehetünk: a Facebook és a többi, nagy online hirdetési platform összes adatát – azok anonimitása mellett – “kölcsönkérhetjük” annak érdekében, hogy tényleg csak azok lássák a hirdetéseinket, akiktől remélhetünk is vásárlást.
Az A/B tesztelés tárgya egyébként sok mindent lehet, de jellemzően a hirdetési kreatívok, a landing oldalak és az e-mail kampányok az online marketing azon területei, ahol a legjellemzőbb ez a technika.
MVT (Multi-Variant Testing)
Az MVT (Többváltozós tesztelés), bár nagyon csúnyán és szakmaian hangzik, nem más, mint az A/B tesztelés kettőnél több variációval folytatott változata. Kellő mennyiségű forgalom esetén akár úgy is tesztelhetőek a hirdetések, hogy mondjuk 3 cím, 3 kép, 5 célközönség – ez összesen 3x3x5, azaz 45 variáció. Ezzel a módszerrel akár több száz variáció is letesztelhető egy időben, de csak akkor, ha a tesztelt minta (vagyis a hirdetési forgalom) kellő méretű, azaz nagyon sokat számít…
…az adatok mennyisége
Az adatvezérelt módszertan fenti megállapításaiból szükségszerűen következik, hogy ezzel a módszertannal nem impulzus-jellegű tevékenységet végzünk, hanem kőkemény tények alapján optimalizálunk. A tények felismeréséhez azonban adatok kellenek, az adatokhoz pedig volumen (vagyis kellően sok adat). Nagyon egyszerűen belátható, hogy minél kisebb a különbség például egy hirdetés két variációjának teljesítménye között, annál több kattintás szükséges a hirdetések közötti különbség meghatározásához.
Pontosan amiatt létezik az az összefüggés, hogy a túl alacsony hirdetési büdzséket nehezebb jó teljesítménnyel futtatni, mint a nagyobbakat, hiszen a nagyobb büdzsé magasabb forgalma sokkal több A/B tesztelés elvégzésére nyújt lehetőséget és nem csak eredményesebb, hanem gyorsabb is az eredményesség elérése.Na de mégis mennyi adatra van neked szükséged ahhoz, hogy döntést hozz a kampányaid változtatásával kapcsolatban?
Nézzük meg, hogyan is tudunk kivitelezni egy Multi-Variant-Test-et célközönségek tesztelésén keresztül. Ennek az első lépése a különböző célzások létrehozása:
(Figyelem a videóban csak a technikát mutatjuk be, nem helyeztünk nagy hangsúlyt a célközönségek kutatására és szofisztikálása.)
A célközönségek létrehozása után a Hirdetéskezelőbe vezet az utunk:
Szignifikancia
Az adatvezérelt módszertan fenti megállapításaiból szükségszerűen következik, hogy ezzel a módszertannal nem impulzusjellegű tevékenységet végzünk, hanem kőkemény tények alapján optimalizálunk és az idő előrehaladtával egyre jobb és jobb eredményeket érünk el.
A tények felismeréséhez azonban kellő mennyiségű adat kell, vagyis látogatói volumen. Nagyon egyszerűen belátható, hogy minél kisebb a különbség például egy hirdetés két variációjának teljesítménye között az A/B tesztelés során, annál több kattintás szükséges a hirdetések teljesítménye közötti különbség meghatározásához. Na, de mégis mennyi adatra lesz neked szükséged ahhoz, hogy döntést hozz a kampányaid változtatásával kapcsolatban?
A szignifikancia fogalma
Az A/B tesztelés tárgykörében érdemes tisztázni egy fontos fogalmat, ami nem más mint a szignifikancia. (És esküszünk, hogy ez lesz a legdurvább matek, ennél rosszabb ma már nem jön!) Mivel a kampányok optimalizálásánál és az adatok értelmezésénél is számokkal dolgozunk, ezért fontos tisztában lenni a statisztika e fontos mérőszámával.
Tipp: Egy eredmény akkor lesz szignifikáns, ha a véletlenek esélyének az aránya egy meghatározott érték alatt marad. Ez az érték általában 5% szokott lenni.
Ha egy kampányban az A/B tesztelés melltt döntesz, mindenképp ajánlott úgynevezett szignifikanciakalkulátort alkalmaznod. A kalkulátor értelmezéséhez szükséges elővenni a középiskolában/egyetemen statisztikából tanultakat.
Ha egy hirdetés vagy akár oldal bizonyos mutatóján (például a konverziós arányán) javítani szeretnél, akkor 3 különböző metrikát kell figyelembe venned, amennyiben ki szeretnéd számolni, mennyi adat szükséges ahhoz, hogy a teszt szignifikáns legyen:
A meglévő konverziós arány (oldal vagy hirdetés)
Az elvárt növekedést
A szignifikanciamutató nagyságát – ez a fentebb említettek értelmében 100 – 5, azaz 95%.
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”34573″ img_size=”full” alignment=”center” onclick=”link_image” css_animation=”fadeIn”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]Sok fajta szignifikancia kalkulátor létezik, ami segít neked kiszámolni, hogy mekkora közönség szükséges a teszt elvégzéséhez, illetve hány napig szükséges futtatni a tesztet. Az utóbbi metrika kiszámításához egy analitikai adatra is szükséged lesz, mégpedig a landing oldaladat látogatók átlagos számára vagy a hirdetésre kattintók napi átlagos számára.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”34572″ img_size=”full” alignment=”center” onclick=”link_image” css_animation=”fadeIn”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]Az Abtasty vagy akár a VWO angol nyelvű szoftvere segít az értékek tisztázásában.
Ezen felül a landing oldalak teljesítményének értelmezésében segít Neil Patel egyszerű programja (angol nyelvű). A rendszernek meg kell adni az adott oldal látogatóinak számát vagy a hirdetésre kattintók számát, valamint azt, hogy hány konverziót realizáltak, és kiderül, melyik teljesített jobban.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column vertical_content_position=”middle” rc_heading_color=”primary-1″ rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#203042″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“3%“,“padding-right“:“3%“,“padding-bottom“:“3%“,“padding-left“:“3%“,“border-color“:“#203042“,“border-style“:“solid“,“class“:“grve-wpb-1647175079301“}}”][vc_column_text]
Érdekesség
A szignifikancia fogalma csak a hagyományos (szaknyelven úgynevezett frekventista) statisztikai modellben létezik, azonban bizonyos A/B tesztelő eszközök nem frekventista, hanem úgynevezett bayeziánus statisztikai modellt használnak.
Ennek számos előnye mellett hátrányai is vannak, ha azonban az A/B tesztelés választott eszköze például a Google Optimize, akkor ne nagyon keresd a szignifikanciát, mert az Optimze bayeziánus logikát alkalmaz.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]
Mi van ha már nem lehet jobb?
Aki következetesen optimalizál, az előbb-utóbb eljut oda, hogy már alig van, amin képes lenne javítani. Ráadásul ellentétben az optimalizálás kezdeti lépéseivel, amikor akár duplázni is lehetett a marketing funnel adott pontjának teljesítményét egy-egy jobban eltalált hirdetési variációval, az optimalizáció egy szint fölött már elenyészően kicsi javulást képes biztosítani. Az eredményekhez egyre több és több adatra — és ezzel összhangban egyre nagyobb fizetett forgalomra — lesz szükség.
Az A/B tesztelés egyik áldásos “mellékterméke” így az lesz, hogy nemcsak az számolható ki pontosan, hogy A vagy B variáció teljesít-e jobban, hanem az is, hogy megéri-e valamivel foglalkozni – ez pedig már nem más, mint az üzleti erőforrások adatvezérelt elosztásának kapuja, tehét adatvezérelt döntés-előkészítés.
Amennyiben például egy újabb teszt legfeljebb 0,1%-os eredménynövekedést képes elérni és a teljes funnel évi 300 millió forint árbevételt termel 12%-os fedezet (azaz árrés) mellett, úgy könnyen belátható, hogy ha elvégezzük e tesztet, akkor legfeljebb
0.001 x 0.12 x 300 millió = 36 000 Ft-ot
nyerhetünk rajta. Ha a A/B teszt futtatásához szükséges fizetett forgalom ennél többe kerül, akkor az adott teszt már – legalábbis adott éven belül – nem éri meg. Ha viszont ennél kevesebbe kerül, akkor 12 hónapon belül meg fog térülni.
Egy apró segítség a mindennapokra
Ez eddig szimpla üzleti logika, a legtöbben azonban ilyenkor azt kérdezik, hogy hogy a viharba lehet előre megmondani, hogy mekkora javulást lehet majd elérni az A/B tesztelés segítségével? Nos, pont erre való az iparági mutatók betanulása.
E mutatók (benchmarkok) egy része általánosítható, mások sokkal kevésbé. Míg ugyanis például egy webshop látogatóinak vásárlási aránya az egész világon hasonló, addig például egy Facebook hirdetés kattintási költsége akár 100-szoros eltérést is mutathat mondjuk Las Vegas és Debrecen összehasonlításában.
Összegzésül annyit érdemes megjegyezni, hogy eljöhet az a pont, ahol már nem éri meg a további A/B tesztelés, mert a hirdetések teljesítményén már csak olyan elenyésző mértékben lehet javítani, hogy az kevesebbet hoz, mint amennyibe kerül.
Ha több idő, erőforrás, vagy hirdetési összeg szükséges az adott teszt elvégzéséhez, mint amennyi az egész A/B tesztelés által realizált megtérülés, akkor nem érdemes belekezdeni.
Minden teszt előtt azt javasoljuk, hogy konkrét stratégiát állíts össze az A/B tesztelés menetéről és arról, hogy mit szeretnél tesztelni, mit vársz tőle, és hogy megéri-e tesztelni ezt a szegmenst.
Szokták mondani, hogy végtelen ideig lehet tesztelni, ezért ne ess át a ló másik oldalára: csak olyan területen próbálj meg javítani, ahol a legtöbb profitot tudod realizálni a teszt segítségével. Kommentekre örömmel válaszolok és kérlek, oszd meg a cikket, ha tetszett![/vc_column_text][/vc_column][/vc_row]
A céges weboldal fejlesztés szinte minden egyes online marketing nekibuzdulás legelején megjelenik igényként – a leggyakrabban nulláról, ritkábban valami középszerű rendbetételének az igényével nekiindulva.
Ez az a terület, ahol a leginkább elvesznek még a józan, innovatív és reális megrendelők is – hát még azok, akik még mindig abban a hitben élnek, hogy a weboldal az olyan, mint az újság, csak ez a neten van…
Így 100+ weboldal létrejöttében játszott kisebb-nagyobb szerepem alapján elérkezettnek látom az időt, hogy azzal próbáljam meg segíteni a weboldal fejlesztés megrendelői oldalán rekedt döntéshozókat, hogy felkészítem őket arra, mi is vár rájuk…
Hogyan lehet elkerülni a nagy benézéseket, a végtelenbe tartó projekteket és a fundamentálisan káros döntéseket?
Úgy, hogy figyelmesen végigolvasod ezt a cikket. Cserébe…
Ha weboldal fejlesztés előtt állsz, az alábbi tévhitek helyretétele aranyat fog érni számodra!
Nemcsak a nagy csapdákat fogod tudni elkerülni, hanem jobbat, szebbet, és üzletileg is hasznosabb weboldalt fogsz birtokolni a végén. Szóval, nem kérdés, hogy online marketingben járatlanabb döntéshozóknak is megéri tanulni az itt leírtakból; azt javaslom, helyezd magad királyi kényelembe, mert nem lesz rövid – ahogyan egy komolyabb weboldal fejlesztés sem az…
Még mindig nagyon sokan tekintik a weboldal fejlesztés folyamatát egy eleje-vége jellegű projektnek, a weboldalt pedig statikus tartalomnak; pedig ugye az egész online tér lényege a bővülés, a megújulás, a friss tartalmak és a gyors változás.
Ami miatt ez a szemlélet sokkal károsabb annál, mint amilyennek elsőre tűnik, az az, hogy a “végleges” weboldalt szem előtt tartó döntéshozók a csak hat hónap múlva aktuálissá váló funkciókat is képesek különösebb átgondolás nélkül beleálmodni a weboldaluk legelső változatába.
Volt olyan ügyféljelöltünk, aki a Sothesby honlapjának mását szerette volna elkészíttetni – határozottan pár hónap alatt, persze lehetőleg pár százezer forintból… Valójában persze sosem indult el a honlapja (egy szűkebb funkcionalitással sem), ami ugyan pénzt csinálni és márkát építeni elég lett volna,
old money-t játszani azonban nem.
Tanulság: Fogadd el, hogy ha állandóan ötcsillagos weboldalt akarsz, akkor az több kisebb fejlesztési projekt lesz és nem egyetlen nagy! Az elején jobb az, ami kevesebb, de minőségi és működik. Az ilyen weboldal ugyanis pénzt hoz, márkát épít és a célcsoportod megszereti – szemben azzal a halálcsillaggal, amire most még távolról sincsen elég pénzed, tartalmad, kimunkált működési modelled és kiforrott technológiád.
Egy weboldal fejlesztés ára pedig mindig a feladat egyediségétől és bonyolultságától függ. Hacsak nem Rockefeller a vezetékneved, ne akarj elsőre pont ugyanolyan honlapot, mint azé a vállalaté, amelyik 360 millió dollárt csinál évente és 2.6 milliárd dollár a piaci kapitalizációja.
Sothesby’s részvényárfolyam, árbevétel és piaci kapitalizáció. Forrás: Investing.com
Ez az egyik leggyakoribb tévhit és az előző ikertestvére, csak itt az üzemeltetést felejti el a megrendelő. Egy webes tulajdon (weboldal, landing oldal, webshop, micro-site, Facebook oldal, Insta oldal, Twitter-fiók) folyamatos tartalomfejlesztést és optimalizálást igényel. Ráadásul a weboldal CMS-e (Tartalommenedzsment rendszere) frissül, a bővítményei elavulnak, jön a GDPR és a Google Web sztorik, megy a Flash technológia, változik az Analytics, meghekkelik, menteni kell stb. A weboldal fejlesztés nem egy eleje-vége projekt, hanem egy folyamatos feladat.
Tanulság: Ne tekintsd állóképnek a weboldalt: legyen megbízhatóan rendelkezésre álló erőforrásod fejlesztésre, mentésekre és frissítésekre, valamint mindig elérhető technikai hátországod a nem várt események profi kezelésére. Igen, pénzbe fog kerülni – üdv a kapitalizmusban! De legalább nem egy múló pillanatig lesz profi weboldalad, hanem állandóan…
Azért vettem előre, mert ez talán a legviccesebb – és persze az egyik legretardáltabb – döntéshozói hiba. Csak hogy ízlelgessük kicsit: arról van szó, hogy a döntéshozó azt hiszi, hogy nemcsak a weboldal fejlesztés képességét, hanem egy teljes online marketing ügynökségösszes szakmai készségét át lehet adni egy kétórás gyorstalpaló keretében Mancikának: tartalomgenerálás, SEO, backend és frontend dev feladatok, CRO. Ami persze Mancikát, akit adminisztratív kávéfőzésre vettek fel három hónapja, ez teljesen jogosan halálra rémíti!
Tanulság: Még a tartalomfeltöltés viszonylag egyszerű feladata is feltételez némi jártasságot a SEO, a grafikai design és a sitebuild területén. Mancika NEM FOGJA TUDNI KÉT ÓRA ALATT a weboldal fejlesztés meg a másik 4 szakma minden finomságát elsajátítani; ne hozd már döntéshozóként magadat abba a kellemetlen helyzetbe, hogy ezt a rém egyszerű összefüggést másnak kelljen megmagyaráznia neked!
Azoknál a vállalatoknál, ahol az online értékesítés, vagy lead generálás nem az elsőszámú árbevétel generáló csatorna, ott a legritkább esetekben éri meg a weboldal fejlesztés feladatára belsős csapattal dolgozni, méghozzá azért, mert általában nem fejlesztőt fogsz felvenni, hanem fejlesztőcskét. A fejlesztő és a fejlesztőcske közötti különbséget az alábbi táblázat jól szemlélteti:
Azok a fejlesztőcskék, akik kemény munkával mégis kiképzik magukat fejlesztővé (láttam már ilyet), azok a másodperc tört része alatt lécelnek majd le tőled, mert ha tényleg jók, akkor nem valószínű, hogy a te weboldaladat tekintik a karrierjük csúcsának, amit életük végéig petákolni szeretnének.
Arról nem is beszélve, hogy a kiszervezett fejlesztésért csak akkor fizetsz, amikor munka van, míg belsős fejlesztés esetén a holtszezont is te szponzorálod majd!
Tanulság: A valóságban még a jelentős fejlesztői kapacitással bíró cégek is kiszervezik a weboldal fejlesztését; egyrészt, mert ez inkább marketing, mint IT feladat, másrészt pedig az opportunity cost-ja sokkal magasabb az erőforrások megtizedelésének, mint ami egy weboldal fejlesztés ajánlatán a költségek soron szerepel.
Sokan érzik úgy, hogy komoly ügynökségekkel lassabban megy a munka, mintha egy magányos fejlesztőt közvetlenül dirigálnának. Ez így is van, méghozzá azért, mert egy professzionális, tapasztalt webfejlesztő és marketing csapat patikamérlegen egyensúlyozza ki a design, a UI, a SEO, a konverziót célzó pszichológia, a különböző integrációk, a technológia és a látogatói út megannyi követelményét és hozza kontextusba az üzleti érdekeiddel.
Tanulság: Nem a profik által csinált weboldal fejlesztés a lassú, hanem te egyszerűsíted le fejben a folyamatot, mert nem látsz igazán a mélyére. Egy gyakorlott csapat többet kérdez, több döntést igényel, ötletei, javaslatai vannak stb.
Ezzel azonban egyáltalán nem veszíted el a kontrollt csak azért, mert nem hajtják végre kérdés nélkül a rossz döntéseidet, vagy mert több tucat döntést kipasszíroznak belőled – épp ellenkezőleg:
Azáltal kerülsz kontrollba az online tulajdonaid felett hosszabb távon, hogy tudod, hogy mit miért csinálsz és biztos lehetsz benne, hogy a hibás döntéseidre visszakérdeznek. Ha el tudod engedni a kontroll illúzióját, a jutalmad a valódi kontroll lesz!
Vitán felül áll, hogy ez meg a leggyakoribb tévhit az összes közül! Nagyon sok olyan ügyféllel találkozunk a 7digits-nél, akik azzal a felütéssel keresnek meg minket, hogy
“Kész a weboldal fejlesztés, most kellene a marketing!”
A weboldalt az ügyfél persze megpróbálta megoldani okosba’ egy junior szabadúszó frontend harcossal, akinek annyi köze van a marketinghez, mint ipari áramnak a gyerekpszichológiához. A rosszabbik eset, hogy rendes fejlesztőcéggel csináltatta sokkal drágábban, ahol pont ugyanúgy nulla marketing szakértelem volt…
Sajnos 10-ből nyolcszor ilyenkor olcsóbb nulláról új honlapot fejleszteni, mint a marketing szempontokat egy szomszédos bolygóról sem ugató oldalt elemezgetni, meg hegesztgetni. Kidobott pénz az ablakon, feleslegesen eltelt hónapok – kifejezetten rosszul élem meg, amikor rögtön az elején csalódást kell okozni az ügyfélnek, de sajnos egy retek weboldallal nem lehet sikeres online marketinget folytatni.
Tanulság: Marketing szakember nélkül ne állj neki a weboldal fejlesztés nagyon is összetett feladatának – nem az a kérdés, hogy lesz-e nagy benézés, hanem az, hogy hány lesz és milyen mélységben… Ha mást nem, gondold át ezt az egy egyszerű összefüggést:
A fejlesztő abban érdekelt, hogy kész legyen a honlapod, mert ehhez kapcsolódik a pénzügyi érdeke. A marketingügynökség abban érdekelt, hogy üzletileg működjön a honlapod, mert az ügynökségeknek pénzügyileg csak a hosszú távon megmaradó ügyfél éri meg.
A valami szóban benne van minden, ami miatt a végeredmény egy nagy rakás gőzölgő trágya lesz. Egy normális weboldal az online arculat központi eleme, a legtöbb alkalmazott online marketing technológia keltetője. A weboldal az egyetlen hely az online világban, ami valóban a tiéd és azt csinálsz rajta, amit csak akarsz – ellentétben például egy facebook oldallal, vagy a Google találati listájával.
Tanulság: Ne a 20 éves honlapod ótvar kinézete miatt kezdj bele a weboldal fejlesztés folyamatába, mert az ilyen projektek vége szokott lenni egy sokkal szebb, de még mindig ugyanúgy nullát termelő honlap. Az online marketing rettentően megdrágult az elmúlt években – csak azért, hogy legyen, tényleg nem kell weboldal; ha azonban beruházol és megcsináltatod, akkor már jó lenne, ha termelne is valamit.
Bár esetenként előfordul, hogy egyik napról a másikra beindul a motoroskasza egy új honlapon, a legtöbb weboldal fejlesztés esetében sajnos nem így van. Időbe kerül, míg felépülnek a tartalmak, lesz értékelhető mennyiségű forgalom, rájövünk az adott cégnél működő attribúciós modellre stb. Az e-kereskedelemben gyorsabb és látványosabb az eredmény, mert beindulnak a vásárlások – B2B-ben azonban sokszor még hónapokig nincs semmilyen konverzió.
Tanulság: A marketing középtávú stratégia. Amennyiben úgy döntesz, hogy az online térben is profi módon akarsz látszani, akkor készülj fel rá, hogy ez egy folyamat, aminek a weboldal fejlesztés és az oldal élesítése csak egy korai mérföldköve.
Az internet-tagadóknak ezt a szintjét szerencsére egyre ritkábban látni, de néhanapján azért egy-egy példány még előbukkan. A valóság az, hogy az 50+-osok is aktívan használják az internetet, a keresőket és a közösségi platformok közül is többet, és mivel pont ugyanolyan felépítésű agyuk van, mint a huszonéveseknek, nekik sem mindegy, hogy milyen felhasználói élményt kapnak.
Tanulság: Az evolúcióban hátrányos helyzetbe került analóg döntéshozók szokták a tagadást választani a weboldal fejlesztés számukra teljesen ismeretlen és emiatt félelmetesnek tűnő terepe helyett. Akik előrelátóbbak, azok rábízzák az egészet egy busásan megfizetett profi CMO-ra, vagy drága ügynökségre és nem sok vizet zavarnak – igaz, hogy nem értenek hozzá, de kellően bölcsek ahhoz, hogy ne is csináljanak úgy, mintha tudnák a frankót.
A többiek általában húzzák lefelé magukkal a céget is, így előbb-utóbb vagy lecserélik őket, vagy tönkremennek cégestül.
Irodára meg csak az ügyvédeknek! Számítógépre pedig kizárólag programozóknak. OK, ha annyira analóg egy vezető, hogy ezt így a fejébe vette, akkor sajnos a vezető cseréjén kívül nagyon sok más lehetőség itt sem áll rendelkezésre.
Tanulság: Mindegy, hogy mi miatt nincs jelen egy cég az online térben, a végeredmény ugyanaz. És persze nincs tökéletes döntéshozó sem, de azért amelyiknek még az előző évezredben járt le a szavatossága, azokat érdemes lecserélni. Értem én, hogy idehaza mindenki nagy király, meg főméltóságú nagyvezérigazgató úr, de egy nap eljön a többetártminthasznál szintje, és akkor méltósággal le kell tudni lépni.
Marketinges kollégaként messzire kerüld el az ilyen embereket, ha néhanapján látunk egyet, mi is azonnal el szoktuk utasítani – mindegy, mennyi pénzt hagyna nálunk. Egy félegyenesnek sosem fogod tudni elmagyarázni, hogy mi az a téglatest – kirívóan rossz képességű, tájékozatlan vezetővel sem lehet sikeres online tevékenységet folytatni.
Egy weboldal fejlesztés kapcsán az üzleti jellegű tévhitek vagy a fejlesztendő honlap költségének csökkentése okán, vagy a folyamat menedzsmentjének kapcsán merülnek fel. Borzasztó károsak, sőt, potenciálisan fatálisak lehetnek.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column vertical_content_position=”middle” rc_heading_color=”white” rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#203042″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“3%“,“padding-right“:“3%“,“padding-bottom“:“3%“,“padding-left“:“3%“,“border-color“:“#203042“,“border-style“:“solid“,“class“:“grve-wpb-1641857416345“}}”][vc_column_text]
11. Méréstechnika, dokumentáció és egyéb nyalánkságok kimazsolázása
Viszonylag ritkán fordul elő, de egy-két “majdazténtudom deluxe” döntéshozó úgy gondolkodik, hogy amit nem ért, azt leszalámizza egy weboldal fejlesztésének feladat-listájáról – úgyis csak “jelen akar lenni” az online térben, hogy “megtalálják”… Aztán persze nem találják meg és ettől idővel majd ideges lesz… Ez pont olyan, mintha az autód motorjából lealkudnád a gyújtást, aztán háborognál, hogy még csak be sem indul ennyi pénzért… Hát persze, hogy nem indul be!!! Megpróbálod két lépésben kitalálni, hogy miért?
Mer’ nincs benne gyújtás, vazze!
…és azé’ nincs benne, mert TE kivetetted!
Tanulság: Ez megint az az ügyfél kategória, akiben csapágyasra jár a Dunning-Kruger jelenség – normális online marketing ügynökség ezeket az embereket azonnal sarkon fordítja. Egyszerűen ahhoz sem elég felkészült a döntéshozó, hogy belássa, hogy nem ért hozzá. Érdemes megvárni az utódját, általában belátható időn belül megérkezik…
Simán lehet akár lehúzás is – nézzük is meg közelebbről. A kérdést alapvetően az dönti el, hogy megcsinálod-e a következőket saját magad?
[/vc_column_text][/vc_column][/vc_row][vc_row margin_bottom=”0px”][vc_column][vc_tta_accordion active_section=”34512341253″ collapsible_all=”true”][vc_tta_section title=”Pár apró feladat a weboldal fejlesztése során ›” tab_id=”1620764151015-19e4f783-3971″][vc_column_text]
Weboldal fejlesztés megtervezése, projekt roadmap, wireframe, UI design a kiválasztott template alapján, mobil nézet megtervezése és a reszponzivitás ellenőrzése, látogatói / vásárlói út megtervezése, weboldal szövegeinek megírása, WP telepítése, migrációs plugin telepítése, WP téma telepítése, beállítása és testreszabása, tipográfia beállítása, szerver memória limitjének ellenőrzése és beállítása, PHP max input változók ellenőrzése és beállítása, tesztszerver felállítása és no-index-elése, www és anélküli domain-ek átirányításainak beállítása, menük beállítása, lábléc sitebuild-je, ticketing rendszer telepítése és beállítása, backup megoldás beállítása, felhasználók létrehozása, jogosultságok kiosztása és beállítása, közösségi megosztás bővítményének megvásárlása, telepítése és beállítása, közösségi oldalak linkjeinek beállítása, adatkezelési szabályzat és ÁSZF oldalainak létrehozása, a szöveg bemásolása és szerkesztése, SEO plugin telepítése, indexelhetőség ellenőrzése, Bing automata indexelés beállítása, meták megírása és beállítása minden oldalra, sitemap beállítása és beküldése Search Console-ba, indexelt és nem-indexelt tartalomtípusok beállítása, tag manager account létrehozása, analitikai követőkód beállítása és tesztelése, Search Console kód beállítása és tesztelése, marketing automatizáció követőkódjának beállítása és letesztelése, mail szerver beállítása, popup megoldás és triggerek beállítása és a felugró ablakok megtervezése, valamint lefejlesztése, blogposztok általános beállításai, képi elemek megtervezése, legyártása és méret-optimalizálása, oldalak sitebuild-je, SSL beállítása, favicon beállítása, kész oldal migrálása az éles szerverre, security plugin telepítése és beállítása, cache plugin telepítése és beállítása, online marketing eszközök integrációja, meg a többi, ami így hirtelen most épp nem jutott eszembe…
Tanulság: Ha ezeket a weboldal fejlesztés során mind megcsinálod magad, akkor a 60 dolláros témádra nálunk mondjuk egy 76 dollárnál magasabb ajánlatot biztosan nem fogsz kapni! Egy biztos, valakinek ezeket is meg kell csinálnia egy weboldal fejlesztés alkalmával, és hacsak nem találsz valakit, aki jószolgálatból megoldja, akkor fizetni fogsz érte! Pénzben, időben, opportunity cost-ban, de mindenképpen kifizeted. Ha remek WP témákat keresel, csak kattints a képre és csilliárdnyit fogsz találni:
Ha ilyen drága egy teherautó, akkor nem elég egy talicska helyette? Egy jó talicska aranyat ér! Te viszont lassan majd döntsd el, hogy mit szeretnél: full stack online marketinget, vagy közösségi média marketinget? Az előbbihez kell a weboldal; az utóbbihoz is… de évekig alibizgethetsz úgy, hogy erre senki más nem jön rá.
Ha például marketingvezetőként az állásodba kapaszkodsz és csak az a szempont, hogy senkinek ne szúrj szemet, akkor azt tanácsolom, hogy ne egy weboldal fejlesztés projekttel kezdj, mert abba mindenki bele akar dumálni. Ilyenkor sokkal jobb egy Facebook oldal, mert annak a kinézetébe a kollégák nem köthetnek bele (leszámítva a cover képet) és amikor tartalmat kellene generálni rá, akkor egy frissen vásárolt kerti locsolófej buzgalmával spriccelnek majd szét a szélrózsa minden irányába – mert ugye a tartalomgenerálás már melós…
Tanulság: Lehet a hűtőszekrényt kenyérpirítóval helyettesíteni? Ha az a cél, hogy minden konnektorba legyen bedugva valami, akkor igen. Ha a cél az, hogy kicsit lassabban rothadjon rád a kaja, akkor nem!
Ez a döntéshozói bizonytalanság iskolapéldája, ami azzal teríti szét a felelősséget, hogy 2 hozzá nem értő helyett 18 hozzá nem értőre bízza a feladatot. A gyakorlott webfejlesztő és marketingügynökségek 2 amatőrt még képesek kezelni, meg jobb belátásra bírni, de 18-at már nem. A szemfülesebb profik ilyenkor az egekbe lövik fel az árajánlatot és reménykednek, hogy az ügyfél nem őket választja, vagy ha mégis, akkor kifizeti a plusz accout menedzsment költséget – ami ilyenkor akár hónapokban is mérhető.
A zöldfülűbb kollégák ugyan megpróbálnak majd 18 hozzá nem értőnek gyorstalpalót tartani a weboldal fejlesztés amúgy sem egyszerű feladata mellett, aminek 100%-ban elégedetlen ügyfél és kompromisszumokban fogant retek weboldal az eredménye. A legszebb példája ennek, amikor az online marketinghez nyomokban sem értő vállalati IT mondja ki az utolsó szót a weboldal fejlesztés ügyében, de szigorúan csak azután, hogy a másik 17 fejenként két hétig ült rajta, mielőtt passzolta volna. Láttam 12 hónapig húzódó honlapfejlesztést, aminek a vége is minősíthetetlen lett…
Tanulság: A weboldal első verzióját egyszerűre kell venni és majd később lehet side-projektekben kielégíteni a HR, a pénzügy, a jogi osztály, a compliance, a kockázatkezelés, a beszerzés és a többi stakeholder igényeit. Nem kell 18 középvezető egy weboldalhoz! Egyetlen tapasztalt CMO bőven elég.
A legjobb és legnépszerűbb weboldalakat felkészült, profi csapatok menedzselik. A tartalom frissül, a technológia karban van tartva, a konverzió optimalizálására rendszeres belső projektek vannak – ahogy a funkciók folyamatos bevezetésére és bővítésére is.
Ezt egyetlen ember a legritkább esetben képes profin megcsinálni – ha pedig olyan szinten van, hogy képes rá, akkor nem tudod megfizetni – nem, nincs kivétel, az a pár ember, aki képes erre, az nem éri be havi két kilóval okosba’. Arról nem is beszélve, hogy mi van, ha az egy szál fejlesztődet elüti egy autó?
Tanulság: Webes fejlesztések esetén csapatokban kell gondolkodnod. Ha nagyon nagy az online kitettséged, akkor ez lehet belsős csapat, de a legtöbb cégnek a weboldal fejlesztés kiszervezése, vagy maximum a hibrid modell éri meg.
Ez amúgy nem is tévhit, csak az időzítése teszi azzá. Viszonylag ritkán látni, de annál veszélyesebb, mert végtelen ciklusba képes rakni a legfényesebb sikerrel kecsegtető weboldal fejlesztés projektjét is. A lényege, hogy az innováció lovának másik oldalára átesett döntéshozó annyira nekibuzdul a digitális transzformációnak, hogy a weboldal fejlesztés álcája alatt próbálja meg a cég hiányzó folyamatszervezését is megoldani.
Lehet persze folyamatokat automatizálni, de csak olyan folyamatot, ami létezik és bevált. A webfejlesztést kibővíteni egy belső folyamatszervezési projektté azonban epic melléfogás.
Tanulság: Inkább legyen egy működő weboldalad kevesebb funkcióval, majd – miután megtörtént a belső folyamatok szervezése – akkor a weboldal fejlesztés egy következő etapjában lehet mindent összekötögetni a weboldallal is.
Attól, hogy meg tudjuk csinálni, hogy a nagytárgyalód fényei vörösen villogjanak, ahányszor csak leadnak egy rendelést a webshopodban, még nem biztos, hogy ezt elsőre meg is kell csinálnunk!* Holnap is van nap…
Hiába a legprofibban menedzselt, legkretívabb weboldal fejlesztés is, ha nincs folytatása; semmi nem fog történni attól, hogy a sok száz millió weboldal mellé plusz egy felkerül a netre. Ahhoz, hogy látogatók is legyenek rajta, a lehető legolcsóbb – de még releváns – forgalmat kell terelned rá, aztán majd idővel úgy változtatni a forgalomterelési stratégián, ahogyan azt az üzletmeneted megköveteli. Ez kezdetben jellemzően fizetett forgalom azaz hirdetés, majd egy idő után az ingyenes forgalmi források is megjelenhetnek.
Tanulság: A weboldal egy komoly eszköz az online marketingben, de kontextusba kell helyezni az egész online tér működésével. Ha például nincs előre végiggondolva a látogatói út, akkor még sok látogatóval sem fog üzleti értelemben működni a weboldalad. Látogatói forgalom, tartalmak, mérés és attribúció nélkül önmagában a weboldal semmit nem ér.
Azt javaslom, állj ellen a hangoknak, amik azt suttogják, hogy amint van weboldalad, már látszol az online térben. A leggyakrabban elsőre nem is weboldalra van szükséged, hanem egy jó marketing startégiára, ami majd leírja a weboldalad célját, amiből leszármaztatja a funkcióit, ami után lehet budget-elni, szakaszolni, aztán tervezni és csak utána fejleszteni bármit.
A design tévhitek sokkal jellemzőbbek kisebb cégek döntéshozóira, ugyanakkor veszélyesek, mert egyszerre képesek rontani a minőséget és megdrágítani a webes projekteket.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column vertical_content_position=”middle” rc_heading_color=”white” rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#203042″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“3%“,“padding-right“:“3%“,“padding-bottom“:“3%“,“padding-left“:“3%“,“border-color“:“#203042“,“border-style“:“solid“,“class“:“grve-wpb-1641857416345“}}”][vc_column_text]
Ezt már ezerszer leírtam, de hát, ismétlés a tudás jó édes anyukája: attól, hogy egy weboldal szép, még nem feltétlenül fog konvertálni, vásárlókat hozni, márkát építeni.
Egy modern, különleges megoldásokkal megvalósított oldal sokat hozzá tud tenni az online jelenléthez és a márkaépítéshez, de ahhoz, hogy a weboldal az üzleti célját is teljesítse, ahhoz az egész weboldal fejlesztés során még kellenek a jól átgondolt mikro-elköteleződések, a pontos méréstechnika, a csúcsra járatott konverziós pszichológia, a modern interakciókra lehetőséget biztosító megoldások, az adatok alapján megtervezett attribúció és még egy rakás más dolog is…
Tanulság: Legyél egy kicsit nagyvonalúbb abban, hogy design szempontjából feláldozol bizonyos dolgokat az üzletszerzés oltárán. Nyilván, ha valami nem egyezik a céges arculattal, vagy ellene megy a kommunikációs céloknak, akkor szólj – a többit viszont hagyd rá a UI szakemberekre, mert ezer olyan szempontot is figyelembe vesznek a weboldal fejlesztés során, amiről még csak nem is hallottál.
A látogatók 38%-a valóban elnavigál egy honlapról, amennyiben az nem tetszetős, vagy nincs összhangban a tartalmával. De ez nem azt jelenti, hogy már attól működne egy weboldal, hogy jól néz ki…
Főleg kisebb cégek jellemzője, hogy a tulajdonos / vezető a döntéseit az alapján hozza meg, hogy számára mi esztétikus. Ez egy többszörösen rossz ötlet, mert egyrészt lelassítja a weboldal fejlesztés menetét, másrészt a valóban hozzáértő designer-ek vagy beletörődnek egy hozzá nem értő megrendelő amatőr tervezgetésébe, vagy ha nem, hát kénytelenek minden UI princípiumot egyenként elmagyarázni a megrendelőnek – aztán vagy elhiszi, vagy nem…
Tanulság: Ha van receptje a lassú, drága és végül katasztrofális eredménnyel záruló weboldal fejlesztés rémálmának kisebb cégek esetén, akkor az az online térben számottevő UI gyakorlat nélkül a szárnyait próbálgató cégtulajdonos az! Ha tapasztalt UI szakemberekkel dolgozol, akkor hagyd rájuk, hogy hogyan néz ki a weboldalad.
Ezek a szakemberek olyan szempontokat is figyelembe vesznek, mint például hogy neked olcsóbb legyen majd a továbbfejlesztés, gyors legyen a tartalomfeltöltés, szem előtt tartják, hogy mi a jó megoldás a konverziós pszichológia szempontjából, mik az aktuális trendek stb.
Az önkifejezésnek pedig az öltözködéstől a lakberendezésen keresztül a művészi tetoválásokig még rengeteg módja marad számodra…
Mindig örülünk, amikor egy döntéshozó maximalista, ezért a weboldal fejlesztés kellős közepén szárba szökkenő 850 órás egyedi videót igénylő random ötletekre örömünkben szoktunk is küldeni kiegészítő árajánlatot pár tízmillió forintról, egyúttal előrelátóan +10 hónappal módosítva a weboldal elkészülésének határidejét.
Tanulság: Több cég van még a tőkeerős középvállalatok között is, amely nem rendelkezik kellő mennységű vizuális tartalommal – pláne profi mozgóképes tartalommal. Megint ugyanaz a tanácsom: legyen kész a weboldal fejlesztés egy szűkített tartalommal, termeljen pénzt, aztán majd egy újabb projektben lehet olyanra csinálni, amibe belefér a 850 órát igénylő videós tartalom, meg a Kajmán-szigeteken készített csapatfotók.
Nem a stock fotóval van a baj, hanem a hanyagul, vagy tapasztalat nélkül kiválasztott, vagy épp túlzásba vitt stock fotókkal.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column vertical_content_position=”middle” rc_heading_color=”white” rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#203042″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“3%“,“padding-right“:“3%“,“padding-bottom“:“3%“,“padding-left“:“3%“,“border-color“:“#203042“,“border-style“:“solid“,“class“:“grve-wpb-1641857416345“}}”][vc_column_text]
21. “Tervezzétek meg, majd házon belül lefejlesztjük”
[/vc_column_text][/vc_column][/vc_row][vc_row bg_type=”color” bg_color=”#f4f4f4″ margin_bottom=”0px”][vc_column][vc_column_text]Nem gyakran fordul elő, hogy a megrendelőnél házon belül van valaki, aki egyszer már belépett egy WordPress-be, de azért előfordul. Ilyenkor a belső ember arra használja a weboldal fejlesztés projektjét, hogy egy ügynökséggel együtt dolgozva megtanulhasson új dolgokat, s ezt rendszerint azzal adja el a főnökének, hogy
“így sokkal olcsóbb lesz!”
A valóság az, hogy lehet, hogy a megrendelő spórol némi pénzt, de az eredmény tragikus lesz. Az ügynökségek fel vannak ugyanis készülve a kollaborációban végzett munkára, rendelkeznek a PM-eszközökkel, csapattal, tapasztalattal a weboldal fejlesztés területén – az egy szál belső ember azonban nem.
Tanulság: Inkább várj az egész weboldal fejlesztés projektjével, mint hogy egy lelkes amatőrre bízd a fejlesztést. Mivel nem ismeri az online marketing összefüggéseit, számos ponton nem olyan megoldást fog használni, ami kiállja az idő próbáját. Minél több idő telik majd el, annál több problémád lesz.[/vc_column_text][/vc_column][/vc_row][vc_row margin_bottom=”0px”][vc_column][vc_column_text]
Tartalmi tévhitek
A tartalmi tévhitek elsősorban abból adódnak, hogy a megrendelő egyszerre mindent szeretne kommunikálni, ráadásul úgy, hogy még az online tartalom-fogyasztási szokásokkal sincs tisztában. E tévhitek hatékony ellenszere a wireframing szakaszának beiktatása a weboldal fejlesztés során.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column vertical_content_position=”middle” rc_heading_color=”white” rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#203042″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“3%“,“padding-right“:“3%“,“padding-bottom“:“3%“,“padding-left“:“3%“,“border-color“:“#203042“,“border-style“:“solid“,“class“:“grve-wpb-1641857416345“}}”][vc_column_text]
Egy újabb tévhit, ami a weboldal offline magazinként történő értelmezéséből fakad. Nem kell minden tartalomnak elérhetőnek lennie a főmenüből, sőt, van, amit például kifejezetten csak azoknak akarunk megmutatni, akik más (úgynevezett top-funnel, vagy ToFu) tartalmakat korábban már láttak. A weboldal struktúrájának áttekintésére nem a főmenü való, hanem az oldaltérkép. A látogatóval pedig játékosan flörtölni kell, nem pedig letámadni szerencsétlent egy olyan menü-struktúrával, aminek a kezelése 160-as IQ alatt esélytelen.
Tanulság: Hagyd azt a marketingesekre, hogy mi honnan lesz elérhető, mert ők bámulják az analytics-et egyszerre 6-8 weboldal fejlesztés projektjében, nem te. Hidd el, egyetlen lényeges tartalmi oldalt sem fognak kihagyni a látogatói útból – épp ellenkezőleg, az egész látogatói út tervezettebb, áttekinthetőbb és üzletileg is kifizetődőbb lesz.
Az online marketingben járatlan döntéshozók hajlamosak a főoldalra feltenni mindent, mert szent meggyőződésük, hogy minden egyes látogató a főoldalon keresztül érkezik, és teljesen egyforma úton járja be az oldalt. 2021-ben gazdag jó reggelt kívánok: a legtöbb látogató vagy célzottan jön egy cikkre, vagy landing oldalra (például hirdetésből), vagy egy idő után organikusan találja meg az oldalt az alapján, hogy melyik URL-t milyen kulcsszóra optimalizáltuk.
A főoldal jellemzően a sokadik oldal, amit meglátogatnak, akkor, amikor a látogató már maga sem tudja eldönteni, hogy még mit akar látni. A jó főoldal ezért amolyan “saláta oldal”, van rajta minden, de mindenből csak egy kevés – hogy bárhová el lehessen onnan jutni.
Tanulság: A marketingeseknek az segít a weboldal fejlesztés során, ha elmondod, mi mindent akarsz kommunikálni a cégedről, nem az, ha megmondod, hogy melyik oldalon mi legyen. Az üzleti céljaidat megértve a marketingnek pont az a feladata, hogy kitalálja azt a látogatói élményt, amely a legnagyobb valószínűséggel építi a márkádat, generálja a vásárlóidat, hozza vissza a régi vásárlókat/ügyfeleket, vonzza be az új munkaerőt stb.
Egy jó étlap sem áll 400 oldalból, a weboldalad főoldalának sem kell mindent elmondania egyszerre. Ha pedig nem bírod ki, hogy ne szakértsd meg a weboldalt, akkor inkább a funnel alján lévő landing oldalakkal töltsd az időt, ne a főoldallal!
Elsősorban idősebb döntéshozók félelme, hogy a meglévő papír-alapú tartalmaikat egy új weboldal fejlesztés után majd nem tudják ugyanúgy megjeleníteni a webes felületen. Türelemmel kell hozzáállni és elmagyarázni, hogy
1.) Meg lehet jeleníteni ezeket PDF-ben, vagy e-könyvben
2.) Baromi rossz ötlet, mert a keresők számára bejárhatatlan, vagy legjobb esetben is másodrendű tartalmak lesznek, ráadásul az emberek online nem úgy fogyasztanak tartalmat, mint papír alapon, úgyhogy ők sem fogják olvasgatni.
Tanulság: Egy weboldal fejlesztés során bele kell nyugodni, hogy a megrendelőd bizonyos fokú edukálása is a projekt része. Ha megvalósítói oldalon dolgozol, akkor számolj vele, árazd be, viszont ha kifizeti, akkor legyen ez az edukáció magas minőségű, hiteles és türelmes – nem mindenki él a weboldal fejlesztés szélességi körén.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column vertical_content_position=”middle” rc_heading_color=”white” rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#203042″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“3%“,“padding-right“:“3%“,“padding-bottom“:“3%“,“padding-left“:“3%“,“border-color“:“#203042“,“border-style“:“solid“,“class“:“grve-wpb-1641857416345“}}”][vc_column_text]
Főleg az első weboldal fejlesztés esetén, vagy kisebb vállalkozásoknál fordul elő, hogy egyes tartalmi elemeket ismételni kell az egyes oldalakon. Ezt ésszel lehet csak csinálni, mert a duplikált tartalom egy bizonyos szint felett súlyos hiba, ugyanakkor teljesen rendben van például a referencia, vagy média logók ismétlése minden olyan oldalon, ahol ez a CTA körüli bizalmi faktorként kerül újra megjelenítésre, de a mid-funnel tartalmak bannerjének ismétlése sem számít hibának.
Tanulság: Amikor egy tapasztalt marketing csapat az egyes oldalakon tudatosan és tervezetten bizonyos tartalmi elemek ismétléséről dönt, az nem a valódi weboldal fejlesztés elmismásolása, hanem taktika. Egyszerűen csak engedd el a dolgot – ha nekiállsz megfúrni ezeket a tartalmi részeket és önkényesen kiveteted őket, akkor nemcsak a design-t piszkálod meg, hanem jó eséllyel a konverziót is.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column vertical_content_position=”middle” rc_heading_color=”white” rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#203042″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“3%“,“padding-right“:“3%“,“padding-bottom“:“3%“,“padding-left“:“3%“,“border-color“:“#203042“,“border-style“:“solid“,“class“:“grve-wpb-1641857416345“}}”][vc_column_text]
26. Több oldalnyi folyó szöveg a weboldalon
[/vc_column_text][/vc_column][/vc_row][vc_row margin_bottom=”0px”][vc_column][vc_column_text]Ez is egy nagyon gyakori igény a digitális világban kevésbé képzett megrendelőktől. Az van, hogy online máshogyan történik a szöveges tartalom fogyasztása, mint mondjuk egy magazin esetében. A legtöbb ember a weben szkennelve olvas, ezért a szöveges tartalmat részegységekre kell bontani és a UI designer-ek által ismert több tucat megoldás egyikével megoldani a látogató terelgetését. Nincs mese, ha a megrendelő folyó szöveget akar, akkor meg kell neki magyarázni, hogy ez miért rossz ötlet.
Tanulság: Ez a megrendelői tévhit eklatáns példa arra, hogy miben különbözik egy magányos farkas webfejlesztő és egy jó ügynökség webes dev csapata: a frontend harcos elkéri a szöveget (végülis az Ő feladata a weboldal fejlesztés, nem pedig a szövegírás, nem igaz?) és minden kritika nélkül bemásolja a weboldalba. Aztán megy a csodálkozás, hogy 90% a bounce rate (a maradék 10% az, akit úgy lesokkolt a Balzac összes művéhez mérhető mennyiségű szöveged, hogy felháborodásában még a vissza gombot sem találja meg a böngészőben…).[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column vertical_content_position=”middle” rc_heading_color=”white” rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#203042″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“3%“,“padding-right“:“3%“,“padding-bottom“:“3%“,“padding-left“:“3%“,“border-color“:“#203042“,“border-style“:“solid“,“class“:“grve-wpb-1641857416345“}}”][vc_column_text]
27. “Tartalom – na, az nem kell”
[/vc_column_text][/vc_column][/vc_row][vc_row bg_type=”color” bg_color=”#f4f4f4″ margin_bottom=”0px”][vc_column][vc_column_text]Az előző ellentéte és egy fokkal még rosszabb: ugyanis, ha egy vállalatnak van mit mondania, csak nem feltétlenül tudja strukturálni és a látogatói kontextusba helyezni a tartalmat, azt meg lehet oldani. Ha azonban nincs tartalom, akkor az egész honlap fabatkát sem ér.
Ilyenkor kezdődik a weboldal fejlesztés feladatain messze túlmutató üzleti tanácsadás az ügyfélnél: piaci szegmentálás, USP-k megfogalmazása, folyamatok rögzítése, esettanulmányok megírása stb. – hogy egyáltalán legyen valami fogyasztható tartalom, amivel meg tudod ragadni a látogatók figyelmét.
Tanulság: Egy weboldal fejlesztés előtt érdemes összeszedni a meglévő asset-eket és átgondolni, hogy milyen tartalmakra lesz szükség a jövőben. Egy jó ügynökség simán kisakkozza, hogy a látogatói út melyik részébe mi kerüljön, de ha se tartalom, se elképzelés, se hajlandóság nincs a tartalomgyártásra, akkor az a weboldal érthető módon nem lesz épp a legélesebb kés a marketing gépezetedben.[/vc_column_text][/vc_column][/vc_row][vc_row bg_type=”color” bg_color=”#f4f4f4″ margin_bottom=”0px”][vc_column][vc_column_text]
Technológiai tévhitek
A technológiai tévhitek mögött nagyjából a különböző frusztrációk teljes skálája felfedezhető. FoMo, bizalmatlanság, az ismeretlentől való félelem, confirmation bias, framing effektus – tényleg, egyedül talán csak az arachnofóbiából esne nehezemre valamilyen weboldal fejleszés során látott technológiai tévhitet levezetni. A megoldás egyszerű és egyáltalán nem újdonság: bízz meg olyan szakemberben, akinek jelentős tapasztalata van a weboldal fejlesztés területén! Ha nem értesz hozzá, ne hozz technológiai döntéseket![/vc_column_text][/vc_column][/vc_row][vc_row][vc_column vertical_content_position=”middle” rc_heading_color=”white” rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#203042″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“3%“,“padding-right“:“3%“,“padding-bottom“:“3%“,“padding-left“:“3%“,“border-color“:“#203042“,“border-style“:“solid“,“class“:“grve-wpb-1641857416345“}}”][vc_column_text]
28. Egy döntéshozó feladata, hogy eldöntse, milyen technológián valósul meg a weboldal
Nem. Egy döntéshozó feladata, hogy értelmesen kommunikálja, hogy rövid- közép és hosszú távon milyen üzleti eredményeket szeretne elérni a honlapja által – a weboldal fejlesztés során használt technológiát majd eldönti az, akinek több évtizednyi tapasztalata van abban, hogy milyen eszközök, bővítmények melyik másikkal akadnak össze, melyiknek mi az előnye-hátránya, melyik szolgál ki téged hosszabb távon és marad ugyanakkor megfizethető.
Tanulság: Egy döntéshozó feladata a döntés – lehetőleg hiteles információk alapján. A weboldal esetében az, amit a haver, a szomszéd, vagy akár a vállalati IT-s mond, nem feltétlenül hiteles – már ha a weboldal fejlesztés célja az üzletszerzés. (Például, ha az amúgy az utolsó sejtmagjáig lojális, 30 év tapasztalattal bíró vállalati IT szakember világéletében csak WP-zett, akkor már csak azért is WooCommerce-re fog szavazni – mondjuk Shopify, vagy BigCommerce helyett, mert ahhoz ért).
A weboldal technológiai stack-jének kiválasztásakor érdemes gyakorlott online marketing szakembert megkérdezni, aki az egyes technológiák előnyeit-hátrányait hitelesen be tudja mutatni a döntéshozónak).
Na, elérkeztünk a weboldal fejlesztés tévhiteinek örök klasszikusához! És amúgy még igaz is – csak az a trükk, hogy az állítás igaz más dolgokra is. Tehát például egy habverő sem biztonságos, ha mondjuk csatak részegen a szádba rakod, aztán a bizonytalan kis mutatóujjaddal a gombon elkezdesz fel-alá ugrálni… Szóval, ha nem tudsz bánni vele, vagy idióták módjára használod, akkor nagyjából semmi sem biztonságos! Atomerőműveket is meghekkelnek, és WP oldalak is elkerülik a hekkelést.
A biztonságot és a stabilitást a WP-ben is lehet biztosítani megfelelő frissítésekkel, kétfaktoros autentikációval, biztonsági plugin-ekkel, helyreállítást lehetővé tévő backup-al, load balance technológiával, stb.
Az egyedi fejlesztésű CMS-ekhez ugyanakkor nem léteznek azok az integrációk és pluginek, amikre később szükséged lehet, nincs normális dokumentációjuk, ráadásul az, aki eladta neked ezt a saját fejlesztésű CMS hülyeséget, az jó eséllyel azért tette, hogy a kezdeti bátortalan kis weboldal fejlesztés után egy életre magához láncoljon.
Tanulság: Kisebb ügynökségek és kezdő fejlesztői társulások szokták letenni a voksukat egy-egy technológia mellett egyéni szimpátia alapján. A profik általában ismerik mindegyiket, és az ügyfél üzleti igényeit és lehetőségeit figyelembe véve alkalmazzák azt, ami az adott helyzetben a legjobb választás.
Ne ülj fel ennek a “WP nem biztonságos” hülyeségnek. Ha a Disney-nek és a Fehér Háznak jó, akkor neked is jó lesz. De ha mégsem, akkor Ghost, Contentful, Craft, HubSpot – vagy bármi, csak nem egy saját CMS nulláról!
Aha. Szuper. Épp csak nem rendelkezik majd azzal a funkcionalitással, ami üzletileg egyáltalán felhelyezné a térképre a vállalkozásodat az online térben. Ha meg igen, akkor fizethetsz a Wix-nek a bővítményekért. Ráadásul, amit “összekattogsz” a Wix, a Squarespace, vagy a Gator segítségével, az messze nem lesz az a szofisztikáltságú oldal, amire a vállalatod online jelenlétét építeni akarod.
Tanulság: A weboldal fejlesztésre nem megoldás az, hogy minden egyes szükséges szereplőt kiveszel a képletből és csináld magad módon beletanulsz. Az amatőrök által petákolt weboldalakban végül minden vacak lesz: design, funkciók, nulla technológia, nyomokban sem létező organikus forgalom, mérhetetlen konverziós arányok. Könyörgöm, a teljes online arculatod alapja a weboldal!…
Oka van annak, hogy egy WP plugin-ért pénzt kérnek, pedig létezik belőle ingyenes is. Bővebb funkcionalitás, rögzített rendelkezésre állású support, folyamatos frissítések. Az ingyenes pluginok között nagyon gyakori, hogy a weboldal indulásának pillanatában működnek ugyan, később azonban a plugin fejlesztője elkezd mással játszani, és a következő WP frissítésnél kártyavárként dől össze az egész weboldal.
Tanulság: Inkább legyen kevesebb funkció, de az legyen profi, mert a professzionális megoldások felfelé húzzák a márkaértéket, az amatőrök meg lefelé. Egy weboldal fejlesztés költségvetésében nem az a 4-5 20 dolláros plugin lesz a nagy költség. Ha tényleg ez számít, inkább várj még egy hónapot és spórold össze azt a 100 dollárt a szép új honlapodra.
Bár mintákat, CMS-t, e-commerce platformokat használva és a funkcionalitást, illetve a tartalmat szűkítve nagyon fel lehet gyorsítani egy weboldal fejlesztésének folyamatát, maga a kódolás és a sitebuild csak a teljes weboldal fejlesztés mintegy 30 százalékát teszi ki. A folyamat többi része annak a pontos meghatározása, hogy mit fejlesztünk. Üzleti funkciók leképezése az online térbe, struktúra, wireframe, UI design, stb.
Tanulság: Egy sima, pár oldalas weboldal fejlesztés normálisan átbeszélve, látogatói út kitalálva, egy gyorsan reagáló és nem problémás megrendelővel általában 30-40 nap alatt azért kényelmesen megvan, ugyanakkor minél mélyebben szól bele a megrendelő a végtermékbe, annál hosszabb a folyamat.
Ja, és lehetőleg ne roadshow-zz azzal, hogy neked 10 nap múlva weboldal kell, mert csak azt éred el vele, hogy pont a profi szolgáltatók fognak elhajtani és garantáltan zöldfülűeknél kötsz ki!
Aha. Csakhogy nem ez a folyamat. Amikor elkészül egy oldal, mindig van ugyan belső tesztelés is, de nem ritka, hogy a megrendelő is talál még 50 apró hibát – ami sokszor nem is a weboldal hibája, de az idő attól még azzal is megy, hogy le kell kommunikálni, hogy
“igen, ha 150%-os nagyításon felejted a böngésződet, akkor tényleg nem pixelre olyan lesz az oldal, mint a terveken, hanem a betűk sokkal nagyobbak lesznek”
Pont azért hívják nagyításnak, mert nagyobb betűket csinál…
Tanulság: El kell fogadni, hogy a tesztelési folyamat egy weboldal fejlesztés része. Ez az, amikor amúgy a megrendelő egy csomó dolgot megtanul a vadonatúj oldalának működéséről. Ha megy vele a fejlesztő gárda ideje, akkor azt ki fogod fizetni – mindegy, milyen címszó alatt szerepel az ajánlatban, de ingyen nem lesz.
A weboldal sebességének komoly hatása van a weboldal üzleti teljesítményére. Minél lasabb egy honlap, annál többen navigálnak el róla, így csökkentve az oldal üzleti teljesítményét.
Tanulság: Értelmetlen versenyezni, hogy kinek 99 és kinek csak 80 a Page Speed Insights pontszáma, de szubjektíven 2-3 másodperc alatt kell, hogy tudjon csinálni valamit a felhasználó az oldalon. Ezért a 2-3 Megabyte-os képeket és videókat célszerű vagy elfelejteni, vagy más módon (például hosztolt videó beágyazásával) hozzáférhetővé tenni az oldalon.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column vertical_content_position=”middle” rc_heading_color=”white” rc_bg_type=”color” heading_color=”primary-1″ css=”.vc_custom_1636234731627{border-top-width: 1px !important;border-bottom-width: 1px !important;padding-top: 4% !important;padding-right: 4% !important;padding-bottom: 4% !important;padding-left: 4% !important;background-color: #1f3043 !important;border-top-color: #dd3333 !important;border-bottom-color: #dd3333 !important;border-radius: 4px !important;}” font_color=”#ffffff” rc_font_color=”#ffffff” rc_bg_color=”#203042″ grve_css=”{“desktop“:{“border-top“:1,“border-right“:1,“border-bottom“:1,“border-left“:1,“border-top-left-radius“:“4px“,“border-top-right-radius“:“4px“,“border-bottom-right-radius“:“4px“,“border-bottom-left-radius“:“4px“,“padding-top“:“3%“,“padding-right“:“3%“,“padding-bottom“:“3%“,“padding-left“:“3%“,“border-color“:“#203042“,“border-style“:“solid“,“class“:“grve-wpb-1641857416345“}}”][vc_column_text]
35. “Hosztoljuk a legolcsóbb szolgáltatónál!”
[/vc_column_text][/vc_column][/vc_row][vc_row bg_type=”color” bg_color=”#f4f4f4″ margin_bottom=”0px”][vc_column][vc_column_text]Egy normális hoszting szolgáltató havi díja sem kerül annyiba, mint egy jó vacsora. Ügynökség ugyan ritkán lát olyan megrendelőt, aki néhány ezer forinton filléreskedik, de előbb-utóbb minden webfejlesztő beleszalad egy ilyen ügyfélbe.
Tanulság: Amikor milliós összegeket fizetsz ki weboldalra, akkor ugyan kalkuláld már bele, hogy a hoszting nem havi öt rugó lesz, hanem tizenöt. Cserébe gyorsabb oldalt, jobb minőségű szolgáltatást, magasabb rendelkezésre állást kapsz. Ezek hiányában ugyanis a weboldalad nem fogja ugyanazt a látogatói élményt nyújtani.
Ha weboldal fejlesztés előtt állsz, akkor koncentrálj elsősorban az üzleti célokra. Az nem baj, ha van egy mesés víziód arról, hogy hova szeretnél eljutni, ahhoz azonban nem árt egy vérprofi online marketing szakember, hogy ezt a víziót végrehajtható és legfőképpen profitábilis egységekre bontsa számodra, és az üzleti céljaidat szem előtt tartva javasoljon olyan webes technológiákat és fejlesztési stratégiát, ami idővel majd többet hoz a konyhára, mint amennyit visz.
Azzal sem vagy egyedül, ha nem értesz az online-hoz és meg vagy ijedve egy normális ügynökség tempójától. Ez teljesen természetes jelenség, több ilyen ügyfelünk is van. Azonban ilyenkor a fokozatos tájékoztatás, a tanulás a megoldás, nem pedig az, hogy csinálsz olyat, ami már akkor is elavult volt, amikor nagyi érettségire készült. Az online világ egyre bonyolultabb, drágább és a verseny is egyre nagyobb – de még mindig lehet jól csinálni, márkát építeni, árbevételt generálni… A titok mindössze egyetlen szó: minőség!
Ha ismersz olyat, aki épp egy profi weboldal készítés szükségességén lamentál, avagy a fenti tévhitek valamelyikének képzeletbeli világában él, akkor kérlek, küldd el neki ezt a cikket, egyébként pedig sok sikert a stressz-mentes webfejlesztéshez; ne feledd, sosincs vége – de ettől még produkálhat szuper megtérülést!
Minden weboldalon, ahol akarnak valamit a látogatótól, előbb-utóbb lesz egy gomb (a CTA jelentése: Call-to-Action), amit meg kell nyomni. Talán meglepő, de menny és pokol között mozoghat az üzleti eredményed attól függően, hogy ez a gomb online marketing szempontból retek, átlagos, vagy épp tükörselyem módon van kitalálva – a CTA marketing szempontból ugyanis minden weboldal leglényegesebb eleme! Hogy jobban konvertáljon az oldalad, alább összeállítottunk egy 10 pontos pszichológiai alapú optimalizációs listát – íme ezeket csináld, hogy jobb legyen a konverziód:
1. Törd meg a mintát
Az emberi agy automatikusan rázoomolja a figyelmet a megszokottól eltérő jelenségekre. Ezt jelen esetben úgy lehet kihasználni, hogy az oldalad struktúrájába nem illeszkedő módon (off-the-grid) helyezed el a CTA-t. Mondjuk így:
Vagy így:
2. Legyen rajta hover effekt
A krokodilagy (az agyunk tudatalatti, információ-szűrésért felelős része) a mozdulatlan vackokat lazán skip-peli, ha közben talál valamit, ami mozog, villog, vagy interakciót mutat. Legyen egy hangyányi rollover (hover) effektus azon a gombon és megint csak nőni fog a nyomkodások aránya.
3. Szín
Szeresd a zöld vagy kék színű gombokat – ezek a “megengedő” színek, de vannak mérések, amik a narancssárgát vagy épp a pirosat hozták ki nyerőnek (valószínűleg a magas kontraszt miatt). Én a piros CTA-t tesztelni szoktam, nehogy a tiltó szín miatt bukjam be a témát – bár a ConversionXL szerint a piros a nyerő a zölddel szemben. Amennyiben olyan színt használsz, amit az oldalon máshol nem, a kontraszt kellően nagy és a szín maga élénk, akkor nagyon nem futhatsz lukra. Arra figyelj még, hogy a választott szín azért kontextusban legyen a kulturális környezettel és a tartalommal – ha például a ketrecharcos edzőtábort egy rózsaszín “Belekuksizok” feliratú gombbal tennéd fel a hazai gazdasági csodák térképére, akkor elképzelető, hogy mintát rágsz a kilincsbe, mire befut az első klikk…
4. Kontraszt
Még a méhek is a kontrasztosabb virágot választják – az emberek figyelmét is a magasabb kontraszttal bíró dolgok vonzzák. Minél nagyobb kontraszt a gomb és a környezete között, annál több kattintásod lesz a gombon.
Az elmúlt évek során CTA-k százainak teljesítményét mértük és elemeztük. A kontraszt bizonyult az egyik leglényegesebb tényezőnek mind közül, méghozzá kettős összefüggésben: a gomb és környezetének kontrasztja ugyanolyan fontos, mint a gomb szövegének és magának a gomb felületének a kontrasztja. Nagy kontraszt = magasabb átkattintás, ez az a szabály, ami alól nem találtunk kivételt!
Vannak, akik patológiás kényszert éreznek rá, hogy minden üres felületet szanaszét trollkodjanak valami rettentően jelentéktelen, töltelék sóderrel az oldalukon – a marketing álmoskönyv szerint ez azonban elég szuicid ötlet. Inkább legyen a gomb körül elégséges mennyiségű white space, azaz “semmi” – nem csak azért, mert elegánsabb, hanem mert a nagy fehér semmivel lesz a legkontrasztosabb a gombod.
6. Szöveg
A gomb szövegét tekintve a legfontosabb, hogy egyértelmű, rövid és érthető legyen. Az unbounce szerint ha egyes szám első személyt használsz a feliraton, az akár 90%-kal is turbózhatja a konverziót. Próbálkozhatsz a benefit megjelenítésével is. Ahelyett, hogy “Iratkozz fel”, jobban konvertál a “Feliratkozom” – persze még mindig roggyant lesz az egész, mert a “feliratkozás” egy behányásig elhasznált, az ezredfordulón lejárt szavatosságú kifejezés. Ha mondjuk csoda-fogyi tablettát árulsz, akkor a “Megveszem” helyett a “Lefogyok 10 hét alatt” jobban fog konvertálni… A szövegírás pszichológiai technikáiról amúgy van egy egész kurzusunk is, amit ezen a linken megtalálsz.
7. Click booster-ek
Klikk booster-nek hívjuk a gombok környékén elhelyezett olyan vizuális elemeket, amik álomcsapda módjára űzik el a látogatók paráit és kétségeit – legtöbbször tudat alatt. Ha a gombodat körültrappolod pár klikk booster-el, sokkal többen nyomják majd a tutit. Ilyen például a termék review, az öt sárga csillag, a garanciák, a biztonságos fizetés ikonok, a média outlet ikonok, de attól sem borul rád a tinta, ha odavésed, hogy mi fog történni, ha megnyomom a gombot.
8. Iker CTA
Az amatőr vetítéseken az fog visszhangozni, hogy egyetlen CTA-d legyen az oldalon, mondván, hogy úgy nincs figyelemelvonókúra – egy gomb mind felett, bele az arcodba: “Apafej, ne agyalj, ne keresd a tegnapi napot, kattints szépen libasorba’!”
Ne higgy a háttérzajnak, van ennél kóserebb megközelítés: Az adott akció marketing funnel-ben betöltött szerepe szerint egy vizuálisan kevésbé attraktív, és a döntés pszichológiájának szempontjából kisebb elköteleződéssel járó alternatívát is célszerű ajánlani: “Vedd meg – tudj meg többet”, “Írj nekünk – nézd meg a portfóliónkat”. Valahogy így néz ki a dolog:
vagy így:
vagy így:
A dolog háttere, hogy egyetlen gombnál a két kézenfekvő opció: megnyomni, vagy nem megnyomni – a tápos krokodilagy tudat alatt ebből a kettőből fog választani. A kettős CTA-nál a kézenfekvő opciók: megnyomni A-t, vagy megnyomni B-t – és hát mind a kettő az én gombom, úgyhogy egyik sem hozza rám a rontást… Ha most rázódsz bele a marketing mélységeibe, jobban jársz egyetlen CTA-val, de ha profi vagy, kísérletezz bátran kettővel – mérni amúgy is kötelező. Ha kíváncsi vagy az iker CTA-k Mariana-árok mélységeire, akkor ide haladj tovább.
9. Triple CTA
És van, amikor a kettő is kevés: Ha muszáj több gombot alkalmaznod (pl. egy három változatú szolgáltatás-csomagnál), akkor úgy operálj, hogy a háromból egy lógjon ki a sorból. A látogató agya ezt az Ariely-effektus (11.00-től) alapján azonnal kizárja – és marad kettő. Mondjuk a három csomag havi 29$, 59$ és 399$… hacsak nem a “Föld és a környező naprendszerekben élők” szélességű célzással hirdetsz (mondjuk Facebook-on), akkor úgyis kellően szegmentált csoportot – mondjuk kisvállalkozókat – viszel az oldalra, akiknek a krokodilagya élből dob egy fintort a havi 399 dodótól – ezért az első kettőből fognak választani. Ezt azzal is megerősítheted, ha a luxus csomag vizuálisan is kilóg a sorból…
10. Támaszd alá képpel
Próbáld ki, hogyan változik a kattintási arány, ha az oldalon található háttérkép vizuálisan a CTA irányába tereli a látogatót. Mondjuk a képen található mókusok a CTA irányába néznek, vagy a kezükkel abba az irányba mutatnak. Teszteld nyugodtan, de csípőből mondom: Mérhetően magasabb átkattintási arányt fog villantani az oldal.
11. Finoman animáld meg az egész gombot
Vannak olyan UI megoldások, amikkel az egész gombot meg tudod rázni egy kicsit. Van, ahol működik és van, ahol konverzió szempontjából kontraproduktív is lehet, ezért ki kell mérni, hogy a közönségednek mi fér bele. Ezen a linken megnézheted, hogy működik egy ilyen effektus.
Megannyi landing oldal CTA-jét tesztelve az elmúlt három évben egy nagyon fontos dolgot sikerült megtanulnom a jól működő CTA-król, ez pedig a következő: Tedd teljesen nyilvánvalóvá a látogatóidnak, hogy mit kell tenniük, és miért – azaz milyen előny elérése végett – kellene ezt tenniük.
Ezt úgy lehet a legegyszerűbben megtenni, ha a CTA akár szöveghűen arra a tartalomra reflektál, ami megelőzte a CTA-t az adott oldalon, azaz például a főcímmel azonos szavakat használva, a címmel és a tartalommal azonos előnyt ígér.
Ha például a főcím a “Hogyan szerezz ezer követőt a Twitter-en”, akkor a CTA legjobban konvertáló szöveg-alternatívja valami olyasmi lesz, hogy “Szerezz Twitter követőket ingyenes útmutatónkkal ›”. Ez nagyobb valószínűséggel rezonál majd azoknak a törekvéseivel, akik épp most olvasták végig a cikket ugyanerről a témáról, ráadásul természetes folytatását is jelenti ugyanannak a témának.
(Amúgy a fenti példa egy úgynevezett tartalom upgrade lead mágnes, ami 2021-ben már szinte alig működik. De a koncepció a CTA-ról azért remélem, átment a példával.)
Megannyi weboldal optimalizálása és felépítését követően a másik gyakorlati tapasztalatunk az volt, hogy ha a CTA alá akár nagyon halványan is, de odateszel egy pár szavas szöveget, ami a gombnyomással járó apró feszültséget hivatott csökkenteni a látogató agyában, az komolyan növelheti az átkattintási arányt. Valami ilyesmire kell gondolni:
A CTA-nak is sok ezer oldalas szakirodalma van. Mivel nincs két egyforma oldal, nincs automatikus recept a tökéletes gombra sem. A fentieket használhatod sorvezetőnek, próbálgathatod alkalmazni őket, de a legfontosabb, hogy tesztelj és mérd a különbségeket. Az online marketingben az a szép, hogy minden okoskodás addig igaz, amíg az ellenkezőjét be nem bizonyítják a mérések… Ha még több optimalizálási lehetőségre vágysz gyorsan és kódolási tudás nélkül, akkor ezt az eszközt próbáld ki:
Tisztelet a bevételnek! Folyt. köv.!
Ha van kedvetek, addig sasoljátok meg, hogyan lehet feltolni a bevételt 340%-kal egy magyar e-commerce vállalkozásban – kizárólag az AdWords-ben matatva (angol nyelvű case study).
A WordPress alegnépszerűbb tartalomkezelő rendszer (CMS) a világon. A weben elérhető összes honlap harmadát WordPress hajtja. Ezt a cikket is egy WordPress honlapon olvasod és nem légből kapott ötlet az sem, hogy valószínűleg te is dolgoztál már WP weboldallal. A CMS népszerűsége miatt több ezer (a cikk írásakor 3519), kifejezetten a WordPress oldalak Google keresőoptimalizálására készített bővítmény érhető el. A bőség zavarában nehéz eldönteni, hogy melyik plugint használjuk és mit várhatunk tőlük – e cikk végére azonban képben leszel vele, hogy mi esszenciális a jó WordPress SEO-hoz és mi az, ami nem kell.
Mivel egy weboldal sebessége maga is fontos rangsorolási szempont a keresők számára, ezért mindenekelőtt nem érdemes figyelmen kívül hagyni a bővítmények jelentette addícionális kódrészleteknek az oldal betöltési sebességét lassító hatását – a több plugin jelentette biztonsági kockázatról nem is beszélve. Ezért mindenekelőtt javasolt minél kevesebb – leginkább csupán a nélkülözhetetlen – bővítményeket telepíteni. Hogy mik ezek, az rögvest kiderül…
Összegyűjtöttük a SEO szempontból fontos területeket lefedő legjobb WordPress bővítményeket, amelyek néhány kattintással képesek a WP oldalaknál tapasztalt típushibák kijavítására és egy megfelelő alapot adnak ahhoz, hogy felvegyük a versenyt a keresési találatok között.
Ha egy jó Google helyezés elcsípéséhez elegendő lenne néhány bővítmény összekattintása, akkor minden Yoast SEO-t telepítő honlaptulajdonos lubickolna az organikus forgalomban – ez azonban közel sincs így.
Egy univerzális SEO bővítmény az alapokat adja meg ahhoz, hogy a legfontosabb technikai SEO követelményeknek megfelelő honlapot hozhassunk létre. A plugin továbbá emlékeztet az alapvető keresőoptimalizálási irányelvekre tartalmaink írásakor, ami valóban nagy segítség a keresőoptimalizálásban, de azért még nem elég.
A Yoast SEO amúgy a leggyakrabban telepített SEO bővítmény. Sok olyan funkciót pakoltak bele az eszköz fejlesztői, amit korábban csak külön-külön bővítményekkel lehetett megoldani. A bővítmény dinamikus oldaltérképet generál a honlapunkról, segít bejegyzések, kategóriák, címkék vagy épp képek noindex-re állításában és a Google Search Console megerősítését is lehetővé teszi technikailag kevésbé felkészült weboldaltulajdonosok számára is.
A legismertebb SEO bővítmény sokaknak a pirosan, sárgán vagy épp zölden villogó lámpáiról is ismerős lehet, ugyanis On-Page SEO szempontokat is figyel a Yoast. Érdemes azonban óvatosan bánni ezekkel a javaslatokkal. Sokszor nincs szükség a bővítmény javasolta kulcsszópontos egyezésekre, illetve a zöld jelzés sem feltétlen jelent egy jól optimalizált bejegyzést…
A tartalmak olvashatóságát Flesch-Kincaid értékkel ellenőrzi a bővítmény, ami magyar nyelven is hasznos lehet az egybefüggő szövegoszlopok elkerülése érdekében. A prémium verzióban olyan extra szolgáltatásokat rejtettek el a bővítmény készítői, mint az átirányítások menedzselése és belső linkelési javaslatok (amiket egyéb bővítményekkel is meg tudunk oldani).
A Yoast SEO egy könnyen kezelhető, fontos funkciókat tartalmazó WordPress SEO bővítmény, amely már önmagában sokat hozzátesz weboldalunk keresőbaráttá alakításához.
A Rank Math jelenleg talán a legjobb WordPress SEO bővítmény a piacon. Minden funkciót tartalmaz, amit a Yoast SEO, sőt a Yoast prémium szolgáltatásait is beépítették az ingyenes Rank Math-be. Nem véletlenül a Rank Math-re váltott több száz WordPress weboldal tulajdonosa, amikor a 2019-es Black Friday során egy Yoast banner jelent meg weboldaluk admin felületén.
Mivel tud többet a Rank Math? Segít egyetlen WordPress SEO bővítményen belül kezelni a különböző átirányításokat és 404-es hibákat, illetve akár 5 fókusz-kulcsszóra is optimalizálhatunk a Yoast-nál megszokott egyetlen kifejezés helyett.
Strukturált adatok tekintetében is kitett magáért a Rank Math, mivel 14 különböző rich snippet markup-ból választhatunk. Recepteink, könyveink, eseményeink vagy akár álláshirdetéseinkhez is egyedi strukturált adatot adhatunk hozzá a bővítmény segítségével.
Bár lényegesen többet tud a Yoast SEO-nál a Rank Math, azonban a jól megszokott Yoast-ról való átálláshoz ez sokszor mégsem elég. Sok WordPress tulajdonos érzi úgy, hogy nem feltétlenül nyújt annyi extra funkciót a Rank Math, hogy megérje átállni egy Yoast felhasználónak. Új weboldal esetében azonban érdemes lehet már eleve a Rank Math bővítményét telepíteni…
A Google hivatalos WordPress bővítménye összekapcsolja a WordPress oldalak szempontjából releváns Google eszközöket, így az adatokat valós időben és egyetlen központi helyen jeleníti meg. Közvetlenül beköthetjük a Search Console, Google Analytics, Tag Manager, Optimize, Adsense és PageSpeed Insights eszközöket. Az eszközök egyéb bővítmény nélküli bekötése mellett további előnyöket tartogat a Google Site Kit: oldalunk betöltési sebességének, forgalmának, az organikus találatok között nyújtott teljesítményét is egyetlen bővítményen belül elemezhetjük – ugyan mi más kellene még a hatékony WordPress SEO-hoz?
Bár a Google Site Kit jelenlegi formájában nem egy létfontosságú bővítmény, azonban a keresőóriás megígérte a plugin funkcióinak kiterjesztését, és mint tudjuk, ha a Google nekiveselkedik egy eszköz fejlezstésének, akkor ritkán lassít azelőtt, hogy a legjobbá válna… Gonduljunk bele, kitől is kaphatnánk jobb eszközöt weboldalunk keresőoptimalizálására, mint magától a Google-től?
Az ingyenes Yoast SEO plugin mellé tökéletes kiegészítő az átirányításokat kezelő Redirection bővítmény. Ha nem szeretnénk vagy nem tudjuk hogyan kell weboldalunk .htaccess fájlját módosítani, akkor ezzel a minimalista bővítménnyel be tudjuk állítani a Wordpres SEO szempontból elengedhetetlen domain szintű átirányításokat.
A domain szintű átirányítások mellett automatikusan kezeli a bővítmény az URL módosítás miatt szükségessé vált átirányításokat, amivel a linképítéssel elért eredményeinket is megtarthatjuk URL változás esetén. A Redirection plugin monitorozza a 404-es hibákat is és egyedi átirányításokat is eszközölhetünk a bővítmény segítségével.
Oldalunk betöltési sebessége alapjaiban határozza meg a honlapunkra látogatók felhasználói élményét. Egy lassú weboldal nem csak a keresőkben kattintó, majd a csigalassú betöltődés miatt lepattanó látogatók számát növeli meg, hanem a konverziós arányra is negatív hatással van.
Az oldalbetöltési sebességet javító bővítmények elsősorban nem WordPress SEO célokat szolgálnak, de jótékony hatással lehetnek az organikus helyezéseinkre is, hiszen egy weboldal sebessége egyértelműen ranking faktor a keresőknek. Válasszuk a WP Rocket, W3 Total Cache vagy bármelyik más ismertebb gyorsítótárazásra és tömörítésre képes bővítményt, a végeredmény legtöbbször másodpercekben lesz mérhető.
Oldalbetöltési sebességet javító bővítménynél a WordPress SEO szempontjából érdemes komplex, lehetőleg minél több területet egyben kezelő alternatívát választani. Az Autoptimize gyorsítótárazás mellett kisebbíti, tömöríti és gyorsítótárazza CSS, Javascript és HTML fájljainkat, emellett pedig a képek lazy-loading betöltését is lehetővé teszi.
Az Autoptimize ingyenes verziója is számtalan olyan funkciót tartalmaz, amit a legtöbb népszerű bővítmény több pluginra osztva old meg vagy csak a fizetős verzióba beépítve találunk meg.
Strukturált adatok hozzáadásával lehetséges oldalunkat bővített keresési eredményként megjeleníti a keresési találatok között. Receptjeinknél már a Google találati listájában szerepeltethetjük az étel kalóriatartalmát, kritikák írásánál csillagos értékelést adhatunk hozzá a cikkhez, vagy egy webshop termékeinél jelezhetjük, hogy épp van-e raktáron az adott termékből.
A bővített keresési eredményekkel ki lehet tűnni a többi keresési találat közül, (feltéve, ha a versenytársak nem használják ugyanazt a schema-t) így növelhető az átkattintási arány, ami végső soron jobb pozíciókat és több organikus forgalmat jelent. Az All in One Schema Rich Snippet bővítmény segítségével pár kattintással hozzáadhatjuk a leggyakoribb strukturált adatokat bejegyzéseinkhez – sablonunk vagy oldalunk forráskódjában való módosítás nélkül.
E bővítmény segítségével automatikusan generálhatunk bejegyzéseink vagy oldalaink számára egy személyre szabható, kis CSS tudással formázható tartalomjegyzéket. Amellett, hogy a hosszabb cikkek áttekintésében segíti az olvasót egy tartalomjegyzék használata, még keresőoptimalizálási előnyökkel is jár.
Az Easy Table of Contents bővítménnyel nagyobb valószínűséggel jelennek meg belső linkjeink a keresési találatok között, amik javítják az átkattintási arányt.
Mire elég pár WordPress SEO bővítmény?
Bővítmények segítségével webfejlesztői tudás nélkül lehetséges a modern keresőmotorok által támasztott követelményeknek megfelelni és egy gyorsan betöltődő, On-Page SEO elemeket konzisztensen használó weboldalt létrehozni. A szaktudást azonban nem lehet ingyenes kiegészítő programokkal helyettesíteni. A bővítmények ráadásul keretek közé szorítanak bennünket és sok olyan funkciót is tartalmaznak, amelyre nem feltétlenül van szükségünk, az oldalt azonban lassítják.
Telepítsük a leghasznosabb WordPress SEO bővítményeket, de ne ringassuk magunkat abban a tévhitben, hogy ezzel végérvényesen “megseóztuk” a honlapot. A keresőoptimalizálás jóval összetettebb annál, hogy pár kattintással a találati listák élére tudnánk kerülni és a weboldal fejlesztés során még egy rakás dologra oda kell figyelni ahhoz, hogy végül érdemi organikus forgalomnak örülhessünk. Hozzászólások, kérdések, kiegészítések bátorítva! Sok organikus találatot kívánunk!
A google keresőoptimalizálás ígérete örökzöld – mindenki akar ingyen (szaknyelven organikus) forgalmat a keresőkből. Néhányan még azt is értik, hogy sok-sok optimalizálásba és tartalomgyártásba kerül, mire egyes keresésekre előkelő helyet biztosítanak be maguknak a találati listán.
Néha azonban előfordul, hogy bár a találati lista előkelő helyén szerepelsz, a várt forgalom csak nem jön, te meg csak pislogsz, mint hal a szatyorban…
Szerencsére ilyenkor kézenfekvő magyarázatok egész arzenáljából lehet választani: indításnak ott van a magyar balsors, paranoidoknak a google összesküvés, mindenki más pedig okolhatja érte a kretén marketingest… Hiszen minden nagyarcú marketing-fotelhadvezér azt szajkózza, hogy ha első vagy a találati listán, akkor onnantól az egyetlen dolgod a pénzszámoló gép csapágyasra járatása lesz, nem?… Mekkora ordas átverés már ez az egész online marketing?
A zsákutca-magyarázatok helyett jöjjön inkább egy kis keresőoptimalizálás ingyen: nézzünk a probléma mélyére, aztán oldjuk meg 11 százasszög egyszerűségű pszichológiai trükk segítségével!
A probléma
Az “előkelő helyezés – vacak forgalom” tünetegyüttes esetén a ludas legtöbbször az adott oldal title tag-je. A meta tag-ek határozzák ugyanis meg, hogy hogyan néz ki a keresők találati oldalán az adott oldal linkje:
A title tag-ből lesz a találat címe – márpedig egyes kutatások szerint az emberek 80%-a egyedül a címeket olvassa el a találati listán – és semmi mást! Ha a title tag – unalmasabb, mint egy Wagner opera, akkor ott leszel ugyan a találati lista elején, épp csak senki nem fog a találatra kattintani…
A jó találati helyen lévő, ugyanakkor tápos klikk-számot generáló találatoknál leggyakrabban az történik, hogy a kulcsszóra kereső emberek többsége látja ugyan a találatot, de nem tartja elég relevánsnak a keresésére. Vagy a cím alapján unalmas, középszerű tartamat vízionál, ezért kattint inkább a következő találatok egyikére.
Frankón egy soron múlik a tartalom sorsa?
Méghozzá több okból is! Még ahol van is organic forgalom, a legtöbbször ott is működhetne még jobb átkattintási aránnyal: a title tag optimalizálásával ugyanis 20-100% forgalomnövekedést lehet elérni még a jól teljesítő oldalaknál is.
Ez elég komoly hozam ahhoz képest, hogy Google keresőoptimalizálás after-hours címszóval egy fél órát valamelyik délután elbogarászol vele – nem igaz?
Ráadásul – hacsak nem állítottál be más címet mindenféle ravasz pluginokkal -, akkor a title tag határozza majd meg, hogy amikor az adott oldalt megosztják valamelyik közösségi oldalon, akkor mi lesz a közösségi média poszt címe.
Sőt, a title tag még a böngészőablak “fülére” is kikerül, ezért a látogatód még akkor is látja, amikor éppen egy másik ablakban matat:
És akkor jöjjön a royal flush érv a keresőoptimalizálás e technikája mellett: a CTR maga is ranking faktor! Azaz, ha “úgy hagyod” az előkelő helyezést szerzett oldalaidat és azok szuboptimális CTR-t mutatnak, akkor egy idő után már nem lesznek előkelő helyen – és ez fordítva is igaz; amennyiben emeled egy oldal CTR-ját egy adott keresésre, akkor az idővel még feljebb mászik majd a találati listán, így még több kattintáshoz juttava az adott oldalt.
A fentiek miatt tehát borzasztóan fontos – egyben a google keresőoptimalizálás praktikái közül talán a legegyszerűbb -, hogy minden lehetséges módon optimalizáld a weboldalaid title tag-jét. Mégpedig az alábbiak szerint:
A nagy title tag voodoo
1. Csekkold a cím hosszát
A title tag desktopon legfeljebb 70 karakter, mobilon pedig 78 karakter lehet, de ezt nem érdemes kimaxolni. Egyes kutatások szerint 55 karakter az ideális, de azért 50 és 60 között teljesen jó vagy. Ennek a posztnak egy 60 karakteres title tag-et sikerült találni, cserébe közérthető, világos, és teljesen egyértelmű leírása annak, hogy milyen tartalmat fog látni a látogató.
2. Tegyél bele számot
A számok segítik az információ feldolgozását és kredibilissé teszik a tartalmakat. Próbálj egy számot beletenni a címbe, és nagy valószínűséggel emelkedni fog az átkattintási arány. Ez lehet évszám – ahogyan ennél a posztnál is csináltam -, vagy lehet a cím olyasmi, hogy “17 dolog, amivel elronthatod a bejglit”. A fentebb hivatkozott kutatás szerint a számok akár 36%-kal is növelhetik a CTR-t!
3. Legyen páratlan
Ha már a Google keresőoptimalizálás miatt teszel bele számot, próbálj páratlan számot használni, mert az emberi agy sokkal könnyebben jegyzi meg a páratlan, mint a páros számokat. Ha akarod, teszteld le nyugodtan – bár mások már megtették: a “15 marketing fogás 2018-ra” cím kábé 20%-kal több átkattintásra számíthat, mint a “20 marketing fogás 2018-ra”. Persze “a Zombi-apokalipszis 5 holtbiztos jele” mindkettőt simán veri… Íme a találati lista eleje a “SEO tactics” keresésre – micsoda véletlen, hogy mindegyik szám páratlan… 😉
4. Kommunikáljon egy előnyt
A benefit-driven kommunikáció a Google keresőoptimalizálás egyik alapvető elve – ráadásul nem új dolog, mégis sokan hagyják ki ezt a fogást a title tag megfogalmazása során. Ne az legyen a cím, hogy mi van a posztban, hanem az, hogy mit nyer vele a látogató. Például: “Légy a Google keresőoptimalizálás mestere ezzel a 11 title tag fogással“.
5. Tegyél bele évszámot
Mármint az idei évet! Sok találatnál nincs dátum, ezért első látásra nem képes eldönteni a látogató, hogy mennyire friss, vagy éppen elavult a tartalom. Ha van is dátum, az kicsi és szürke – sokkal könnyebb észrevenni a címben szereplő dátumot.
6. Tegyél bele emoji-t
Ha WordPress-t használsz és feltelepítetted a keresőoptimalizálás legnépszerűbb bővítményét, a Yoast-ot, akkor ezen a linken megtalálod az emoji kódokat. Ezeket tedd be a title tag-be, és máris sikerült vizuálisan felturbózni a találati listán elfoglalt helyedet. Az emberi agy a képi információt sokszorosan gyorsabban dolgozza fel, tehát az első, amit észrevesz a találati oldalon, az az emoji-d lesz. Címenként egy azért bőven elég, nem kell visszatérni a barlangrajzokhoz! Ez az oldal például, amit épp olvasol, nem a legnépszerűbb emoticont kapta, de legalább a pszichológiai tartalom átjön belőle… Valahogy így fog kinézni a keresőkben:
7. Kulcsszót az elejére
A címben szereplő Google keresőoptimalizálás kulcsszót sok SEO-szakértő érvelésével ellentétben nem SEO szempontból célszerű előrébb tenni – a valóságban a találati lista első helyén szereplő találatok kevesebb, mint 2%-a tartalmazza a keresési kulcsszót. Ha azonban valaki rákeres egy kulcsszóra, akkor a legkevesebb agymunkát akkor kell végeznie, ha a találat rögtön visszautal a keresésére. Mégpedig a kulcsszó megismétlésével, majd a maradék szöveg révén annak kiegészítésével. Ezzel csökken az úgynevezett kognitív terhelés, azaz könnyebben értelmezhetővé válik az információ.
8. Ne legyen duplikálva
Bár ez nem pszichológia, de ide kívánkozik: a keresőoptimalizálás projektjeinkben megfigyelhető extrém gyakori hiba, hogy egy honlap minden egyes oldalának ugyanaz a címe, amitől a keresők botjai úgy eltévednek, mint vakond a Tesco alatt. A keresőoptimalizálás lényege nem egy rakat titkos, ám annál mocsokosabb trükk alkalmazása, hanem a minél világosabb kommunikáció a keresőrobotokkal arról, hogy milyen tartalom is található az adott oldalon. Ezért adj a honlapod minden oldalának külön title tag-et, lehetőleg olyat, ami pontosan leírja az adott oldal tartalmát.
9. A márkafétist engedjük el
Komoly viták vannak róla, hogy érdemes-e a márkád nevét beletenni a title tag-be, vagy sem? Ha belekerül, az társadalmi bizonyíték, és építi az adott márkát, ugyanakkor a brand név értékes helyet foglal el a címből. A tanácsom az, hogy ne nagyon feszülj ezen: ha nem tudod mással kitölteni a helyet a 60 karakterig, akkor írd oda, mert önmagában is növelheti a CTR-t. Ha azonban értékes információtól venné el a helyet, vagy szétrontja a jól teljesítő címedet, akkor simán engedd el – a branding hatás a valóságban elhanyagolhatóan csekély, így csak az átkattintási arányra fókuszálj!
10. Google keresőoptimalizálás CTA-val
CTA-t tenni a title tag-be általában jó ötlet. A CTA (Call-to-Action) egy felszólító módú ige, amit simán alkalmazhatsz title tag-ekben is: “Töltsd le a marketing esettanulmányunkat – Így csináltunk 500% megtérülést”, vagy “Csinálj olyan almáspitét, mint a profi szakácsok – 5 egyszerű tipp”. A lehetőségek végtelenek, csak kreatívnak kell lenni és közvetlenül megszólítani a kereső személyt a title tag-en keresztül.
+1 Kérdezz a title tag-ben
A kérdések pszichológiailag ugyanolyan figyelem-mágnesek, mint a számok. Érdemes kérdést megfogalmazni a title tag-ben – növekedni fog tőle a CTR (Click-through Rate, azaz Átkattintási arány). Ráadásul ha a title tag-ben megfogalmazott kérdés magas keresési számmal bír, akkor megnő az esélyed rá, hogy a tartalmadat a Google egy featured snippet-be teszi, valahogy így:
Ne próbálj minden fenti trükköt egyszerre alkalmazni, mert napokat fogsz ülni a cím fölött. Próbáld ki őket sorban, és ami még lényegesebb, mérd, hogy a saját közönségednél melyik cím milyen átkattintási arányt produkál. Amelyik működik, azt tartsd meg, amelyik nem, azon változtass.
A hatás mérése
Amennyiben a fentiek segítségével össze-optimalizálsz egy ütős title tag-et, nem ártana, ha tudnád mérni is a hatást – már ha valami stratégia, nem pedig ad-hoc nekibuzdulás alapján végzed a Google keresőoptimalizálás áldásos tevékenységét. Ehhez semmi mást nem kell tenned, mint az Analytics-ben az Acquisition » Search Console » Landing pages menüpont alatt megsasolni az adott oldal organikus forgalmát, és megnézni az átkattintási arányt (CTR).
Az Ügyfélszerzés okosan című cikkünk címét például jól eltaláltuk az “ügyfélszerzés” kulcsszóra, de mivel nem a pillanat hevében a Kolléga nem tette bele a mocskos pszicho-trükkjeimet, némileg kevesebb kattintást kap az organikus keresésekből, mint az átlag. 21,5 %-os CTR-jét lazán a 29%-os átlag (2017-es mérés, nemzetközi, mobil eszközről) fölé lehetne tornázni – megérdemelné, mert maga az írás kiváló…
Ezt csak akkor fogod a fentieknek megfelelően látni, ha előzőleg összekötötted a Search console-t az Analytics-szel, ennek hiányában kénytelen leszel a Search console-ban keresgélni.
A hatás jelentkezéséig eltelhet néhány nap, ezért az oldalt érdemes a Search Console-on keresztül beküldeni a google indexbe, hogy felgyorsuljon a folyamat.
A CTR mellé pedig azért tedd oda az average position-t, hogy ne csapd be magadat: ha 20 helyet ugrott előre a helyezés, akkor lehet, hogy az emelkedő CTR-t nem kizárólag a title tag módosításoknak köszönheted…
Hiába írod a legjobb tartalmakat, ha az emberek nem találnak rá, nem kattintanak rá, nem olvassák végig, vagy épp nem osztják meg.
Az online marketing ugyanis olyan, mint a high-end hifi: az egész eredményt a leggyengébb láncszem fogja behatárolni – a keresőoptimalizálás pedig épp ezért nem egy titkos technika, vagy mocskos kis trükk, hanem sok-sok apró optimalizációs lépés összhangja.
Ha nincs is lehetőséged egy komoly online marketing ügynökség méregdrága automata optimalizálási megoldásaival kényeztetni az oldaladat, a fenti trükkökkel akkor is előadhatod a “keresőoptimalizálás házilag” című, nem kevésbé sikeres mutatványt, majd élvezheted a megnövekedett ingyen forgalom jutalmát!
Sok kitartást és szívet melengető átkattintási arányt hozzá! Ha tetszett, kérlek honoráld egy megosztással, hadd tanuljon bele a Google keresőoptimalizálás technikáiba más is.
[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_column_text]Nagyon sok hasznos és haszontalan cikk vagy videó kering a neten arról, hogy hogyan is tudunk egy WordPress weboldalt minél gyorsabbá, és ezáltal annál felhasználóbarátabbá is tenni. Mi most megpróbálunk segíteni eligazodni ebben az útvesztőben, ezért összegyűjtöttük a valóban hatékony, és érezhető javulással kecsegtető megoldásokat. Azt viszont fontos hozzátenni, hogy van, amiből nem lehet várat építeni, tehát itt is nagyon sok múlik azon, hogy milyen minőségű az adott weboldal – milyen sablonból, milyen pluginokkal, és milyen fejlesztő rakta össze.
Bevezetés – A sebesség, mint eladásösztönző!
Mint arra egyre több kutatás rávilágít, a gyorsan betöltődő weboldalak jelentősen növelik a látogatók elköteleződését és megtartását, ezek következményeként pedig az értékesítésben is érezhető javulást eredményeznek. Az azonnali szerver-válasz és a villámgyors oldal-betöltődési sebesség nagyobb konverziós arányt eredményez, a betöltés sebességének minden másodpercenkénti késleltetése viszont jelentős, százalékpontokban kifejezhető lemorzsolódáshoz vezethet.
Nem meglepő, hogy a betöltődési sebesség az egyik legmeghatározóbb faktor egy jól konvertáló weboldal esetében – arról nem is beszélve, hogy a sebesség hatással van az organikus forgalomra is, mivel a gyors oldalakat a találati listán előbbre, a lassúakat pedig hátrébb sorolja a Google és a Bing is.[/vc_column_text][impeka_title heading_tag=”div” heading=”h5″ align=”center” title=”Egyetlen másodperccel hosszabb betöltési idő” margin_bottom=”10px”]Egyetlen másodperccel hosszabb betöltődési idő hatása:[/impeka_title][impeka_empty_space][impeka_progress_bar bar_style=”style-2″ values=”16|VÁSÁRLÓI ELÉGEDETTSÉG CSÖKKENÉS,11|VISSZAESÉS AZ OLDALMEGTEKINTÉSEKBEN,7|KONVERZIÓS ARÁNY CSÖKKENÉS” color=”primary-4″ bar_line_style=”round”][impeka_empty_space][vc_column_text]
És mi újság a WordPress-szel ezen a téren?
Nos, mivel manapság a weboldalak több, mint 32%-a WordPress alapon fut, számtalan plugin és egyéb megoldás próbál segítségünkre lenni a sebesség-optimalizálásban. Most ezekből mutatunk egy hasznos kis csokorra valót, hogy valóban lehetőséged legyen a weboldalad felgyorsítására.[/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row rc_bg_type=”color” section_id=”joszerver” bg_color=”#f4f4f4″ margin_bottom=”0″ rc_bg_color=”#f7f7f7″][vc_column width=”1/4″][vc_custom_heading text=”0.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:90px” css=”.vc_custom_1546869803603{margin-bottom: 18px !important;}”][impeka_slogan title=”Egy jó szerver” heading=”h3″ subtitle=”Alap, de a legfontosabb:” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]Nem lehet elégszer hangsúlyozni, hogy egy megfelelően kiválasztott tárhelyszolgáltatón mennyi minden múlik! És mégis, mennyien beleesnek abba a hibába, hogy olcsó (- értsd: minőségileg is olcsó) tárhelyszolgáltatást választanak. Igaz, nagy a választék, de ezen a ponton megéri nem csak a pénztárca alapján dönteni. Az igényeknek megfelelően két nagyobb tárhelyszolgáltatás-kategóriát tudunk elkülöníteni, értelemszerűen a kisebbtől a nagyobb forgalmú webhelyek igényei felé haladva.
Osztott tárhelyek
Ezek a legnépszerűbb szolgáltatások, és valljuk be, egy átlagos honlap számára általában maximálisan elegendők is. Persze ez sok kompromisszummal is jár, ezek közül a leggyakrabban előforduló galiba az időszakos belassulás. Aki ilyen tárhelyet választ, az előbb-utóbb tapasztalni fogja ezt. Hogy miért?
Azért mert a szolgáltatók az osztott tárhelyeket túlzsúfolják, de legalábbis igyekszenek kimaxolni a kapacitásukat.
A gyakorlatban ez azt jelenti, hogy adott esetben több száz másik weboldal is ott csücsül a miénk mellett – és hát ugyanazokat az erőforrásokat használják, amit a mi honlapunk is szeretne. Ha viszont ezek az erőforrások épp foglaltak, akkor az oldalunk belassul, extrémebb esetben 500-as hibaüzenetet dob, még rosszabb esetben leáll (a szerverrel együtt). De a szerver valamelyik másik weboldalán lévő súlyos probléma is átgyűrűzhet a mienkre osztott szerver esetén, bár ez azért valóban ritka eset, tényleg csak nagyon gagyi szolgáltatóknál szokott előfordulni.
Mikor ajánlott: kis forgalmú weboldalak esetén, akkor is ideiglenesen
VPS tárhelyek
A tárhelyszolgáltatások második nagyobb csoportját az ún. VPS (Virtual Private Server) szolgáltatások alkotják. Ehhez már kicsit több szerverkezelési és fejlesztői tapasztalatra van szükség, hiszen itt már szabad kezet kapnak az ügyfelek a hardware-ek felett, de még mindig fontosabb szempont a költséghatékonyság a teljesítménynél. A saját virtuális számítógépre általában tetszőleges Linux operációs rendszer telepíthető root adminisztrátori hozzáféréssel. Mivel itt az ügyfél kezeli a szervert, hozzáértő kezekben nagyszerű választás lehet, de a megfelelő hozzáértés hiányában nem érdemes rákölteni, hiszen ilyenkor a telepítéseket, a konfigurálásokat és a karbantartást is magunknak kell megoldani.
Mikor ajánlott: nagyobb forgalmú és/vagy egyéni szerverkonfigurációt igénylő weboldalak esetén
+2 tárhelytípus
Említést érdemel még az előbbieken felül két tárhelytípus:
Amikor saját szerver üzemeltetésére adjuk a fejünket, ez azonban magasfokú szakértelmet, minőségi hardware-eket, és probléma esetén gyors rendelkezésre állást követel a tulajtól, tehát magáncélú felhasználás esetén nem elterjedt megoldás.
Illetve egyre nagyobb teret nyernek a Managed Hosting szolgáltatások, amik borsos (osztott tárhelyekhez képest akár 8-10-szeres) felár ellenében teljes szervermenedzsmentet kínálnak a honlapnak. Ebbe beletartozik a teljes backend szerver beállítás, magas rendelkezésre állású és széleskörű segítséget nyújtó ügyfélszolgálat, automatikus biztonsági mentések és egykattintásos telepítőkörnyezetek. Vastag pénztárcával megáldott teljesen kezdőknek is ajánlott.
[/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row bg_type=”color” section_id=”szerver-helye” margin_bottom=”0″][vc_column width=”1/4″][vc_custom_heading text=”01.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:90px” css=”.vc_custom_1546870575928{margin-bottom: 18px !important;}”][impeka_slogan title=”Földrajzi elhelyezkedése” heading=”h3″ subtitle=”A szerver” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]Bár nem különíthető teljesen el az előzőtől, mégis érdemes külön pontot szentelni ennek, hiszen hasonlóan fontos szerepet tölt be weboldalunk betöltődési sebességében a kiszolgáló szerverek földrajzi közelsége (vagy éppen távolsága). Mindenekelőtt tehát határozzuk meg, hogy weboldalunk látogatóinak legnagyobb része milyen országból/régióból fogja megtekinteni az oldalunkat, és lehetőleg olyan tárhelyszolgáltatót válasszunk, aminek a szerverei a régióban vagy legalábbis annak közelében találhatóak. A szerverek földrajzi elhelyezkedése ugyanis nagyon fontos szerepet játszik a hálózati késleltetés (azaz mennyi időbe telik egy adatcsomagnak eljutni az egyik pontból a másikba) és a TTFB (Time to First Byte – azaz, hogy mennyi ideig kell várnia a böngészőnek az első beérkező bájtocskára) szempontjából. A lényeg pedig, hogy ezek olyan mutatószámok, amik annál jobbak, minél kisebbek.
Pro Tipp: A helyes helyszín meghatározásában sokat segíthet a Google Analytics, adott esetben a Search Console is, vagy eCommerce esetén a vásárlók lakhelyének meghatározása.[/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row rc_bg_type=”color” section_id=”php” bg_color=”#f4f4f4″ margin_bottom=”0″ rc_bg_color=”#f7f7f7″][vc_column width=”1/4″][vc_custom_heading text=”02.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:90px” css=”.vc_custom_1546870987467{margin-bottom: 18px !important;}”][impeka_slogan title=”PHP 7.x” heading=”h3″ subtitle=”Legalább” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]Bár lehet, hogy meglepő sokak számára, de a PHP 7.x verziói hatalmas, sokszor másodprecekben mérhető javulást hozhatnak a weboldal betöltődési sebességében. A PHP 5.6-ot a PHP 7.2-vel összehasonlítvaközel 3-szoros sebességnövekedést ért el az utóbbi, ami szemmel látható különbséget jelent a gyakorlatban. És az új PHP verziók nemcsak gyorsabbak, hanem sokkal biztonságosabbak is a régebbi verzióknál, tehát a modernebb verziók használata nem csak ajánlott, hanem szinte kötelező, ha jó teljesítményű weboldalt szeretnénk üzemeltetni.
A WordPress „lelke” PHP-ben készült, nem beszélve a hozzá készült sablonokról és pluginekről, ami a PHP-t az egyik legfontosabb nyelvvé teszi WordPress használók számára.
Sok tárhelyszolgáltató még mindig kínál tárhelyet PHP 5.6-tal (vagy még régebbi verziókkal), ezeket azonban 2019-ben már messze érdemes elkerülni, hiszen ezen verziók támogatása vagy már meg is szűnt, vagy hamarosan meg fog szűnni. Annál is inkább, mert a PHP töretlenül fejlődik, pár hete már meg is jelent a PHP 7.3, ami még a 7.2-höz képest is jelentős gyorsulást ígér![/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row bg_type=”color” section_id=”wp-beallitasok” margin_bottom=”0″][vc_column width=”1/4″][vc_custom_heading text=”03.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:90px” css=”.vc_custom_1546871112967{margin-bottom: 18px !important;}”][impeka_slogan title=”WordPress beállítások” heading=”h3″ subtitle=”Megfelelő” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]Az előző pontokban végigmentünk az optimális szerver tulajdonságain, ami megfelelő környezetet biztosít a WordPressünk számára. Itt azonban nem áll meg a tudomány, a WordPress-t ugyanis be is kell állítani ahhoz, hogy igazán gyors lehessen. Nézzük is meg, mik azok a tényezők, amik a WP lassulását okozhatják:
A beépített WordPress frissítéskezelő
Ha a WordPress adminjába belépve jelentős lassulást tapasztalunk, akkor azt sok esetben a rendszer részét képező frissítéskezelő folyamatos lekérései eredményezik (viszont nem kizárólagosan, tehát előtte mindenképp ellenőrizzük a hálózat és a szerver leterheltségét, illetve PHP verzióját is). Ha az utóbbiak rendben vannak, akkor nagy eséllyel megállapíthatjuk, hogy WP frissítéskezelője fut túl sokat a háttérben.
A probléma eredete abban keresendő, hogy a frissítéskezelő külső GET lekérésekkel dolgozik. Ha ezek a lekérések csak időszakosak, akkor általában nem is szokott gondot okozni, ha viszont a lekérés valamiért gyakoribb (vagy adott esetben állandóvá válik), az a WordPress admin felületét akár használhatatlanná (vagy legalábbis idegőrlően lassúvá) is teheti. Szóval ha be van lassulva a WP vezérlőpult, érdemes tenni egy próbát az automatikus frissítések kikapcsolásával – erre számtalan plugin is lehetőséget biztosít. Ilyenkor azonban nekünk kell manuálisan ellenőrizni az egyes frissítéseket, hiszen egy-egy frissítés a funkcióbővítések mellett számtalan esetben biztonsági réseket foltoz be.
Hetekre-hónapokra frissítetlenül hagyni az oldalunkat nagyon rövidlátó magatartás; amennyiben beüt a baj, a kiesés, a hitelesség elvesztése és a sürgős javíttatás miatti számla jóval magasabb lesz, mint egy rendes üzemeltetés kiszámítható költsége.
Bár kézenfekvőnek tűnhet, mégis sokan esnek ebbe a hibába. Főleg nagyobb oldalaknál lehet ez probléma, ahol már sok bejegyzéssel (vagy egyéb bejegyzéstípussal) van tele az oldal. Ilyenkor, ha – a példa kedvéért vegyünk egy blog gyűjtőoldalt – több száz bejegyzés kilistázódik egyszerre thumbnail-képestül-mindenestül, az még egy komolyabb szervert is meg tud izzasztani. Szerencsére ez nagyon könnyen elkerülhető:
A megoldás (megfelelő magyar szó hiányában) a pagination, ami azt jelenti, hogy beállíthatjuk az egyszerre egy oldalon/lapon/fülön megjelenő bejegyzések számát. Egyszerre tehát elég mondjuk (beállítástól függően) öt bejegyzést megjeleníteni, és ha a felhasználó kíváncsi többre, akkor kattintás után újabb öt bejegyzést láthat. Ennek – ha úgy tetszik – egy még továbbfejlesztett verziója a végtelen görgetés (infinite scrolling), ami leveszi a felhasználóról a továbbkattintás terhét, és ha továbbgörget az első öt bejegyzésen, akkor automatikusan betöltődik a következő öt, és így tovább. Tehát láthatjuk, hogy ilyenkor sem egyszerre tölt be az összes bejegyzés, így jelentősen megkönnyíthetjük a szerverünk dolgát.
Erre is létezik számtalan plugin, sőt, a jobb minőségű prémium sablonok is rendelkeznek hasonló beállítási lehetőségekkel.
A HTTP lekérések minimalizálása
A weboldalunk minden eleme HTTP lekérést generál (képek, scriptek, CSS stíluslapok, videók, beágyazások, stb.), azaz minél több eleme van az oldaladunknak, annál tovább fog tartani a betöltés. Nincs azonban minden veszve, csak érdemes betartani az alábbi cikkünkben is említett pontokat a HTTP lekérések minimalizálására és a weboldal betöltődési idejének gyorsítására:
Hagyj el minden felesleges elemet az oldaladról. Ha valami tényleg haszontalan és nem jelent értéket, akkor kukába vele
Használj CSS-t képek helyett, amikor csak lehet
Kombináld egybe a stíluslapokat, amikor lehetséges
Csökkentsd le a felesleges scriptek számát az oldaladon
Ebben sokat segíthet a Gonzales plugin, ami arról híres, hogy oldalanként gyomlálhatóak ki vele a feleslegesen betöltődő kódrészletek egy alsó tagozatosok által is átlátható grafikus felületen.
[/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row rc_bg_type=”color” section_id=”sablon” bg_color=”#f4f4f4″ margin_bottom=”0″ rc_bg_color=”#f7f7f7″][vc_column width=”1/4″][vc_custom_heading text=”04.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:90px” css=”.vc_custom_1546872948416{margin-bottom: 18px !important;}”][impeka_slogan title=”Minőségi sablon” heading=”h3″ subtitle=”Prémium” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]Az egyik legfontosabb. Pont. Egy jó sablon egy jó weboldal biztos alapja. Lehet persze jó sablonnal is rossz honlapot készíteni, fordítva viszont sajnos nem szokott működni a dolog; nagyon fontos tehát a körültekintő témaválasztás. Itt érdemes megemlíteni, hogy sok sablonnak van ingyenes verziója is, azonban aki már dolgozott ingyenes és fizetős sablonnal is, az nagy valószínűséggel érteni fogja, hogy
ha honlapot szeretnénk, ne ezen a ~60$-on akarjunk spórolni!
Ez persze nem jelenti egyből azt, hogy nem is létezhet jó ingyenes sablon, ahogy azt sem, hogy minden prémium sablon automatikusan jó.
Akkor most mi van?
Ahhoz, hogy kiválasszuk a számunkra legmegfelelőbb sablont, két választási lehetőséget érdemes fontolóra venni*:
vagy olyan sablont választunk, ami kizárólag azzal a funkcionalitással rendelkezik, amire szükségünk van
vagy egy olyan sablont, ami kellően sokoldalú és funkciógazdag, de a számunkra haszontalan funkciókat ki tudjuk benne kapcsolni (így nem eszi feleslegesen az erőforrásokat)
*természetesen a jó kódminőség és a gyorsaság alap, másmilyen sablont ne is nézzünk
Amiket érdemes kikapcsolni, mert sokat lassíthatnak a honlapon, ha nincs rá szükségünk:
[/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row bg_type=”color” section_id=”plugin” margin_bottom=”0″][vc_column width=”1/4″][vc_custom_heading text=”05.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:90px” css=”.vc_custom_1546873141813{margin-bottom: 18px !important;}”][impeka_slogan title=”Megválogatott pluginek” heading=”h3″ subtitle=”Prémium” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]Szintén nagyon fontos a megfelelő pluginválasztás, de még minőségi pluginokból sem érdemes túl sokat használni egyszerre, hiszen a túl sok plugin egész egyszerűen belassítja a WordPresst. A recept tehát ez esetben is egyszerű: ha lehetséges, ne használjunk sok plugint egyszerre, és amiket használunk, azok legyenek magas minőségűek. A magas minőséget nehéz mérni, de támpontot adhatnak a következők:
saját tapasztalat
mások tapasztalata (értékelés, vélemények, tesztek, support fórumok)
Szóval, akárcsak a sablonoknál, itt is rengeteget számít a kód minősége, és a megfelelően gyors működés. Mivel viszont az elérhető pluginok száma nagyjából a végtelent karcolja, sokszor tényleg nehéz a választás. Ha pedig specifikus problémára keresünk megoldást, nem biztos, hogy van egyből megfelelő (értsd: elég jó) megoldás. Egyszerűbb igényekhez azonban érdemes átnézni ezt a gyűjtést, van köztük pár nagyon hasznos okosság.[/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row rc_bg_type=”color” section_id=”cache” bg_color=”#f4f4f4″ margin_bottom=”0″ rc_bg_color=”#f7f7f7″][vc_column width=”1/4″][vc_custom_heading text=”06.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:90px” css=”.vc_custom_1546873319023{margin-bottom: 18px !important;}”][impeka_slogan title=”Cache beállítások” heading=”h3″ subtitle=”Tökéletes” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]Ha az eddigiekkel megvagyunk (jó szerver, jó beállítások, prémium sablon és pluginek), akkor nagy esélye van az oldalunknak a gyors működésre. Viszont a sornak még nincs vége, ugyanis egy megfelelően beállított cache (gyorsítótár) még tovább tudja gyorsítani az oldalt. Fontos kiemelni, hogy „megfelelően beállított”, mivel egy rosszul beállított cache többet tud ártani, mint használni (sokat lassíthat, vagy adott esetben el is szállhat tőle az oldal). Ha viszont hozzáértő kezek állítják be a cache-elést, akkor ez az egyik legegyszerűbb megoldás a WordPressünk gyorsítására! De ne szaladjunk ennyire előre…
Mi az cache?
Ha megpróbáljuk röviden és érthetően leírni a folyamatot, akkor ez a következőképpen néz ki:
Minden egyes weboldal meglátogatása a WordPress-ünkben egy lekérdezés a szerverünk felé. A szerver feldolgozza ezeket a lekéréseket (beleértve az adatbázis-lekérdezéseket is), majd a feldolgozás után egy végső változatot küld a böngészőnknek, amit az meg tud jeleníteni. Ez az eredmény a weboldal, amit látunk minden fájllal és egyéb összetevőjével együtt. Valószínűleg már mindenki kikövetkeztette ebből, hogy minél nagyobb és összetettebb egy weboldal, annál több időbe telik a szervernek a lekérések feldolgozása – és ezáltal a végleges weboldal felhasználóhoz történő eljuttatása is.
És ez az a pont, amikor képbe kerül a cache, és megoldja a problémánkat! A gyorsítótárazás ugyanis nem csinál mást, mint hogy eltárol néhány fájlt a lemezen (vagy a memóriában, konfigurációtól függően) a felhasználó gépén. Tehát eltárolódik az a tartalom, ami már egyszer legenerálódott a múltban, ezáltal az újra-létrehozáshoz szükséges idő a töredékére csökkenhet. Az eredmény magáért beszél: az egyes weblapok sokkal gyorsabban töltődnek be közvetlenül a gyorsítótárból, ez pedig a korábban kifejtett marketing előnyökön túl elsőrangú élményt biztosít.
És hogyan tudom ezt használni a gyakorlatban?
Alapvetően két irányból is megközelíthetjük a dolgot:
Szerver-szintű cache
Szolgáltatója válogatja, hogy elérhető-e vagy sem, ha azonban igen, akkor ez az egyik legegyszerűbb módja a cache-elésnek. Bekapcsoljuk, és jó esetben működik. Éppen ezért erre a cikkben nem is térnék ki részletesebben, sokkal érdekesebb ugyanis, ha megnézzük mi van akkor, ha nem működik a szerver-szintű cachelés, vagy a szolgáltatónk egyaltalán nem is biztosít rá lehetőséget.
Cache beállítása plugin segítségével
Ha szolgáltatói szinten nem biztosított a gyorsítótárazás, akkor sem kell lemondanunk a cache-ről, hiszen WordPress rendszerre természetesen cache pluginból is annyi van, mint égen a csillag. Itt is nagyon fontos tehát a körültekintő választás és a még körültekintőbb beállítás. Általánosságokat itt sem nagyon lehet mondani, hiszen választástól függően minden cache plugin beállítása más és más. Abban viszont tudunk segíteni, hogy mutassunk pár jól működő, általunk is tesztelt és használt, azaz bevált cache plugint a teljesség igénye nélkül. Íme:
Kezes, jól testreszabható és nagyon nagy tudású cache plugin. Rendelkezik teljes értékű ingyenes verzióval is, azonban a teljesértékű és mindenre kiterjedő funkcionalitást csak a fizetős verzió biztosítja (pl.: képoptimalizáló, de erről majd később).
Az egyik legnépszerűbb, ingyenes, és nagyon részletesen beállítható pluginról van szó. Az optimális beállítás sok időt vesz igénybe, de megéri a szöszölést.
Szintén nagyon népszerű, de fizetős megoldás. Egyszerű adminisztrációs felület és gyors beállítás jellemzi – kezdők is tudják használni.[/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row bg_type=”color” section_id=”adatbazis” margin_bottom=”0″][vc_column width=”1/4″][vc_custom_heading text=”07.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:90px” css=”.vc_custom_1546873511762{margin-bottom: 18px !important;}”][impeka_slogan title=”Tiszta adatbázis” heading=”h3″ subtitle=”Optimalizált és” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]Az oldalunk sebességének szempontjából igencsak meghatározó lehet az adatbázis mérete és tisztasága. Egy teleszemetelt adatbázis ugyanis durván be tudja lassítani a WordPresst, ehhez pedig túl aktívan nem is kell tennünk semmit, elég ha hagyjuk, hogy teleszemetelődjön magától (pl. oldal/bejegyzés változatokkal). De hogyan kerülhetjük el mindezt?
Adatbázis optimalizáló plugin használata
Az egyik legnépszerűbb (és ingyenes) megoldás a WP-Optimize használata. Ez felhasználóbarát módon segít kitisztítani az adatbázisunkat, de mindenképp körültekintően használjuk, mert biztonsági mentés nélkül visszafordíthatatlan károkat is okozhatunk vele. Természetesen sok másik megoldás is létezik, vannak fizetős pluginek is (részben) ezzel a funkcionalitással, szóval aki erre adja a fejét, érdemes jól körülnéznie!
Manuális adatbázis-optimalizálás
Természetesen azokat a teendőket, amiket az előbb említett plugin elvégez, megtehetjük mi magunk is, ha tudjuk, mit csinálunk. Érdemes lehet:
üríteni a lomtárakat,
törölni a spam hozzászólásokat,
törölni a régi bejegyzés- és oldalváltozatokat,
limitálni a menteni kívánt változatok mennyiségét,
vagy ha nincs rá szükség, kikapcsolni a változatokat,
megtisztítani a wp_options táblát (ez csak hozzáértőknek ajánlott),
különösen ajánlott az átmeneti rekordokat (transients) megtisztítani (bár ezek általában lejárati idővel rendelkeznek és idővel eltűnnek, a valóságban sokszor ez nem mindig történik meg magától, és manuálisan kell megsegíteni a folyamatot),
a WordPress Sessions tisztítása,
és végül, de nem utolsó sorban érdemes kikapcsolni azokat a nem használt funkciókat, amik használják az adatbázist (pl.: népszerű/kapcsolódó poszt widgetek, amik szinte mindig sitewide lekérdezésekkel rendelkeznek; olyan képoptimalizáló bővítmények, amik nem külső szervert használnak az optimalizálásra).
[/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row rc_bg_type=”color” section_id=”kepek” bg_color=”#f4f4f4″ margin_bottom=”0″ rc_bg_color=”#f7f7f7″][vc_column width=”1/4″][vc_custom_heading text=”08.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:90px” css=”.vc_custom_1546873670451{margin-bottom: 18px !important;}”][impeka_slogan title=”Webre optimalizált képek” heading=”h3″ subtitle=”Megfelelő méretű,” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]És el is jutottunk a legtöbb weboldal fizikai (tárolókapacitásban mért) méretét leginkább meghatározó weboldal-összetevőnkhöz: a képekhez. A legtöbb weboldal méretének több, mint 50%-át teszik ki a képek, még megfelelően optimalizált képek esetében is (optimizálatlanul ez az arány bőven 90% fölé is csúszhat). Vitán felül álló tény tehát, hogy egy weboldalra szánt képet feltöltés előtt optimalizálni KELL! A nagy méretű képek ugyanis hihetetlen módon képesek belassítani oldalt.
Gondoljunk csak bele, hogy manapság egy nagyobb felbontású, akár mobillal készített kép is simán elérheti a 4-5MB-ot. Ha egy jól optimalizált weboldal óhajtott méretét 1-2MB-nak vesszük, akkor könnyen belátható, hogy akár már egyetlen optimalizálatlan képpel megháromszorozható a betöltődési sebesség. Ezt tehát igyekezzünk minden esetben elkerülni, ha akarunk még látogatókat az oldalunkon! De hogyan lehetséges jól optimalzálni a képeket? Itt is két „iskola” létezik alapvetően, de a legjobb, ha egyszerre alkalmazzuk a kettőt:
Kézi optimalizálás
A képek formázásának elsődleges célja a legalacsonyabb fájlméret és az elfogadható minőség közötti egyensúly megtalálása. Erre nincsenek konkrét szabályok, bízni kell magunkban vagy a grafikus szakemberben. Minden valamire való képszerkesztő programban lehetőségünk van webre optimalizáltan kimenteni a képeket, azonban nagyon oda kell figyelni a megfelelő fájlformátum használatára, valamint a tömörítés fajtájára és mértékére (veszteséges/veszteségmentes).
Ökölszabályként azonban elmondható, hogy szerencsés, ha egy kép a mentés után sem több 300 kB-nál.
Képoptimalizálás plugin segítségével
Természetesen a WordPress ahol tud segít, tehát ezen a téren is rengeteg plugin közül válogathatunk. Az egyik legjobb (fizetős) megoldás a cache-résznél is említett Swift Performance plugin prémium verziója, ami nagyon hatékonyan, külső szolgáltatás használatával tömöríti a feltöltött képeinket (akár feltöltés után egyből, a háttérben is).
Létezik persze ingyenes megoldás is, a TinyPNG 500 tömörített kép/hó-ig hasonlóan színvonalas munkát végez, így ha valaki eddig nem használt ilyet, de megnézné ingyenesen, hogy mennyit gyorsul optimalizált képekkel a weboldala, érdemes tenni vele egy próbát![/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row bg_type=”color” section_id=”cdn” margin_bottom=”0″][vc_column width=”1/4″][vc_custom_heading text=”09.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:90px” css=”.vc_custom_1546873854893{margin-bottom: 18px !important;}”][impeka_slogan title=”CDN használata” heading=”h3″ subtitle=”Opcionálisan” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]Ha az összes eddigi pontot betartottuk, de még mindig nem elég gyors a weboldalunk, akkor minden jel szerint ott valami sokkal nagyobb gubanc van, úgyhogy gyorsan forduljunk szakemberhez. Az azonban szinte biztos, hogy nem a CDN lesz a megoldás a problémánkra!
A CDN (Content Delivery Network) ugyanis – bár nagyon hangzatos –, csak akkor éri meg az egyszeri felhasználónak, ha:
vagy jelentős forgalma érkezik földrajzilag diverzifikált helyszínekről (a világ különböző pontjain lévő országokból)
vagy állandóan/időszakosan hatalmas terhelés éri az oldalt (egyszerre rengeteg látogató)
vagy ha pl. egy webáruháznál több tízezres termékportfólióval rendelkezik
vagy az előbbiek egyszerre.
Ha viszont a weboldalunk látogatóinak túlnyomó része a hazai piacról érkezik és nem számítunk hirtelen jelentősen megugró forgalomra sem (pl. egy egyszerű céges weboldalnál), az esetben a CDN jó eséllyel csak ablakon kidobott pénz, gyakorlati haszna nem lesz érezhető.
De miért, mit csinál pontosan a CDN?
Ha röviden össze szeretnénk foglalni, a CDN lényegében nem más, mint egy olyan, több szerverből álló hálózat, amin minden adat minden szerveren megtalálható. Mivel pedig ezek a szerverek eltérő földrajzi helyszínen (sok esetben eltérő kontinensen) találhatóak, azért sokkal gyorsabb elérést biztosítanak a felhasználóinknak, ezáltal szinte bárhonnan gyorsabban tölthet be a weboldalunk.[/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row rc_bg_type=”color” heading_color=”light” section_id=”teszt” margin_bottom=”0″ bg_color=”#232323″ font_color=”#ffffff” rc_bg_color=”#f7f7f7″][vc_column width=”1/4″][impeka_slogan title=”Weboldal tesztelése” heading=”h3″ subtitle=”Mindent megcsináltam,” btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]A cikkben eddig azzal foglalkoztunk, hogy hogyan növeljük a weboldal sebességét. Most nézzünk meg, hogy mit sikerült elérni a gyakorlatban! Összegyűjtöttük a (szerintünk) legfontosabb online mérőeszközöket, amikkel skálázhatóvá tehetjük a weboldalunk sebességét, illetve az esetleges javítani és fejlesztenivalókról is információkat kaphatunk – a lista nem teljes, de már csak ezeket az eszközöket használva is teljes képet kaphatunk a weboldalunk sebességéről.
Összességében elmondható, hogy ezeknél az eszközöknél a legszerencsésebb a minél nagyobb helyiértékű és minél zöldebb színű eredmény! 🙂
Nehéz felállítani egy sorrendet, de talán érdemes a Google dedikált eszközével kezdeni a sort, hiszen legtöbb esetben mégiscsalk a Google robotjainak akarjuk megfeleltetni az oldalunkat az előkelő helyezés érdekében.
Az eszköz által adott pontszám 0 és 100 pont közötti értéket vehet fel. Minél magasabb a kapott pont, annál jobb, a 85 (vagy annál magasabb) pontszám pedig egy jól teljesítő és gyors weboldalt jelöl.
A Google tapasztalatai szerint a látogatóink fele elhagyja az oldalunkat, ha nincs mobilra optimalizálva. Ezért adták ki a Mobile Website Speed Testing Tool névre keresztelt szolgáltatásukat, ami a PageSpeed Insights mérésein alapul, de a nevéhez hűen alapvetően mobil-orientáltan közelíti meg a weboldal sebesség-kérdést.
Pro tipp: ennél az eszköznél a 100 pont elérése lényegében lehetetlen, mert a WP beállításai, a sablon, pluginek és külső szkriptek miatt az az oldal sem fog maximális értéket kapni, amelyik tökéletesen rendben van. Ez tehát határozottan nem a fejlesztő hibája, a minél magasabb pontszámra azonban ilyenkor is lehet törekedni 🙂
Igen, a Google Analytics is képes mérni egy webhely sebességét. Ha tehát telepítve van az oldalon a mérőkód (és aki bármilyen szinten is hasznot akar húzni a weboldalából üzletileg, annak telepítve van), akkor nincs más hátra, mint az irányítópulton belül a Viselkedés menüpontra kattinva előcsalogatni a Webhelysebesség fület, ahol hosszútávú adatokból kinyerve láthatjuk többek között az oldalunk átlagolt betöltődési sebességét (illetve ezer másik, hasznos adatot), így talán a pillantnyi szerver-leterheltségtől leginkább független képet ennek az eszköznek a használatával kaphatjuk.
A Pingdom egyike a legnagyobb webhely-felügyeleti szolgáltatásoknak, de a legismertebb szolgáltatása az ingyenes weboldal sebességmérő eszköze.
Szintén 0 és 100 pont között mér, az itt kapott érték azonban 12 különálló egységre bontható – amikre szintén egyéni értékeket kap az oldalunk. A szolgáltatás nagy előnye, hogy tárolja az egyes oldalakon végrehajtott összes teszt eredményét, ezáltal később össze is lehet hasonlítani weboldalunk sebességének változását.
A GTmetrix szintén nagyon és méltán népszerű weboldal sebességelemző eszköz. A használata ennek az egyik legegyszerűbb, kezdők is hamar el tudják sajátítani.
Az eszköz egyik leghasznosabb tulajdonsága, hogy átfogó elemzést biztosít a Google PageSpeed Insights és a YSlow eredményeinek összefoglalásával. Ebben az oldal tetején felsorolva láthatjuk a teljes betöltődési időt, az oldal méretét és a lekérések számát is. Az eszköz egy vízesés-diagramban is megjeleníti a lekérések listáját, így könnyedén azonosíthatóak a problémás területek.[/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row bg_type=”color” section_id=”osszefoglalas” margin_bottom=”0″][vc_column width=”1/4″][vc_custom_heading text=”10.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:90px” css=”.vc_custom_1547482710241{margin-bottom: 18px !important;}”][impeka_slogan title=”Összefoglalás” heading=”h3″ btn_text=”” btn2_text=”” button2_text=””][/impeka_slogan][/vc_column][vc_column width=”1/2″][vc_column_text]Szerencsésen túljutottál a Nagy Sebesség Útmutatón. Gratulálunk, és köszönjük, hogy elolvastad! Reméljük, hogy legalább néhány tanács a gyakorlatban is hasznosítható lesz számodra, és gyorsítani tudsz a weboldalad betöltődési sebességén!
Ha meg esetleg még maradtak kétségek benned afelől, hogy mennyire fontos egy weboldal sebessége a felhasználói élmény szempontjából, akkor igyekszünk azokat nagyon gyorsan eloszlatni. A gyors betöltődés ugyanis az online piacok legfontosabb kulcstényezője (feltételezve azt az alapvetést, hogy nem egy gány oldal töltődik be gyorsan, mert az hiába gyors). Az online megjelenés elsősorban az ügyfelek kényelmét kell, hogy szolgálja, mindezt a megfelelő információkkal, termékekkel vagy szolgáltatásokkal, a megfelelő időben, a megfelelő helyen, és természetesen a megfelelő ügyfeleknek.
Ezek közül egyik sem lehetséges akkor, ha a weboldal sebessége nincs összhangban az egyébként kommunikálni kívánt minőséggel, és a potenciális ügyfelek idő előtt elkattintanak, mert megunják a várakozást.
A sebesség tehát nemcsak fontos, hanem egyre fontosabb, mert – bár önmagában látszólag nem képes új ügyfeleket hozni -, a hiánya már rövid távon is képes elriasztani a látogatóidat.
A cikk elkészítésében nagy segítséget nyújtott többek között a Kinsta tudásbázisa és hasznos cikkei.[/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row]
Trendek jönnek, trendek mennek, de a kiváló dizájn ismérvei nem nagyon változnak. Nincs ez másképp a dizájn egyik legfiatalabb ágával, a webdizájn területével sem.
A webdizájn definícióját hajlamosak vagyunk a különböző honlapok vizuális megjelenésére korlátozni.
A kifejezés azonban jóval többet takar, és egy egész – mérnökökből, fejlesztőkből, tervezőkből, grafikusokból – álló csapat felelős érte. A webdizájner nem csupán a külcsínnel foglalkozik, és nem is foglalkozhat kizárólag azzal, hiszen a webdizájnról is, mint a dizájn bármelyik másik ágáról elmondható, hogy a vizuális megjelenés csak a jéghegy csúcsa.
A webdizájn bizonyos kritériumai a technológia gyors fejlődésével hamar elavulnak, így nehéz velük kapcsolatban örökérvényű igazságokat felállítani. Mivel azonban a webre való tervezés alapjai a kreatív tervezés minden ágára igaz normákból következnek, elmondhatunk néhány időtállóbb alapvetést, nézzük, mik ezek!
0. Felejtsd el a palackpostát! Pontosan tudd, kinek tervezel, mit és miért
Egy lakatlan szigetről palackpostával legfeljebb egy üzenetet tudsz kijuttatni, és valószínűleg ennek sem lesz sok haszna: hiszen magad sem tudod, hol vagy, nem tudod, kinek üzensz, és hol van az, akihez beszélni próbálsz.
Minden tervezési folyamat alapköve, hogy tervezőként tisztában legyél azzal, hogy kinek tervezel, mit és miért. Ezt semmilyen esetben nem lehet megspórolni. Pontosan tudnod kell, kit akarsz megszólítani, úgy kell ismerned a célcsoportodat és a nekik szánt üzenetet, akár a tenyeredet.
1. Az első lépéseket egy felfedező óvatosságával tedd meg
Tegyük fel, hogy jól céloztál, jó áramlatba dobtad a palackodat, sőt, még az is halászta ki, akinek szántad. Kinyitja a palackot, széthajtogatja a papirost, arcára kiül az unalom, majd mérgesen félredobja a lapot: már megint ugyanaz!
Előfordul, persze, hogy két tervező a világ két különböző pontján egy problémára ugyanazt a megoldást találja ki, de ezzel mindketten nagyon szerencsétlen helyzetbe kerülnek. Elkerülheted a plágiumgyanús véletlen egybeeséseket, ha a tervezés második lépéseként alapos kutatást végzel, és tüzetesen megvizsgálod a versenytársakat. Könnyebb is lesz egyedi megoldással előállni, ha pontosan tudod, mihez képest kell kitűnnöd.
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column css=”.vc_custom_1537887962692{border-top-width: 1px !important;border-right-width: 1px !important;border-bottom-width: 1px !important;border-left-width: 1px !important;padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;background-color: #eaeaea !important;border-left-color: #9b9b9b !important;border-left-style: solid !important;border-right-color: #9b9b9b !important;border-right-style: solid !important;border-top-color: #9b9b9b !important;border-top-style: solid !important;border-bottom-color: #9b9b9b !important;border-bottom-style: solid !important;}”][vc_column_text]
PRO infó: Segítségedre lehetnek a webdizájn kezdeti lépéseiben a keresőmotorok és az online portfólióoldalak, például a Béhance, a The Dots, a Dribbble. Miközben kutatsz, jegyzetelj is! Készíts vizuális listát az inspiráló pozitív és negatív példákkal. Szuper eszköz lehet erre a Google Keep vagy a Milanote.
2. Alap nélkül nincsen ház: struktúra, struktúra, struktúra!
Képzeld el, hogy felépíted álmaid házát egy erdő szélén vagy valahol az Antillákon. Kezedben a kulcs, beköltözöl, felakasztod a falakra a kedvenc képeidet, és azt gondolod, immár boldogan élsz, amíg meg nem halsz. Ám rövidesen olyan helyzetben találod magad, mint Tom Hanks a Pénznyelő című filmben: álmaid házának falai repedezni kezdenek, egyik kisebb beomlás a másikat követi, míg végül a fejedre omlik kacsalábon forgó palotád – mert nem építettél rendes alapokat.
Minden jó webdizájn az alaposan átgondolt szerkezettel kezdődik.
Egy tökéletességig cizellált UX-ből, kifogástalan user journey-ből álló alapokra kell építkezned.
Nem lehet eléggé hangsúlyozni a drótvázak (wireframe-ek), vagyis a UX tervezés fontosságát. Ez a szerkezet lesz a házad alapja, ez fogja kijelölni a falakat és a köztük lévő szobákat, amiket majd megtölthetsz tartalommal. Drótvázazásra használhatod az ingyenesen elérhető Adobe XD-t, például.
3. Gondolj Jancsira és Juliskára! Tiszta navigáció.
Oké, megvan a házad, nem omlik össze. De hogy éreznéd magad, ha az egyik ajtón belépve olyan szobába érnél, ahonnan nincs kiút? Hogy éreznéd magad, ha elindulnál az erdőben, de a madarak felcsipegetnék mögötted az elszórt kenyérmorzsát, és nem találnál vissza?
Megjegyzés: breadcrumbs-nak, vagyis kenyérmorzsá(k)nak hívja a webdizájn azokat az elemeket, amelyek a tájékozódást, navigációt segítik. Ilyen például az aktív menüpontok színének megváltozása, a „vissza a tetejére” gombok, a már megnyitott linkek megváltozó színe, stb.)
A tervezés során soha nem veszítheted szem elől azt, akinek tervezel. Időről-időre ki kell lépned a tervezői szerepedből, és a felhasználó szemén át nézni a tervedet. Ez elég nehéz feladat, nem kell azonban varázslónak lenned: a webre való tervezés hatalmas előnye, hogy gyors és számszerűsíthető feedbacket kaphatsz arról, hogy a látogatóid hol jártak, mit néztek az oldaladon és meddig, vagy hol tévedtek el. Tesztelj!
Egy alapjaiban jó, de csiszolatlan dizájnt legkönnyebben A/B teszteléssel optimalizálhatod lépésről-lépésre. A Google Optimize segítségével kisebb változtatásokat a fejlesztő ugráltatása nélkül, magad is megtehetsz. Sőt, vannak eszközök, amikkel már a prototípusokat is tesztelheted, ilyen például a Maze.
A palackpostával könnyű: csak ráfirkantod az üzenetet egy fecnire, ami épp a kezedbe került, és úgy érkezik meg a megmentődhöz, ahogy a kezedből kiadtad. Ezzel szemben a webdizájn egyik legnagyobb kihívása, hogy a világ elképzelhető összes képernyőjén jól kell kinéznie annak, amit terveztél.
A legújabb statisztikák szerint a világ internet-forgalmának 50%-át mobilon bonyolítják le (Ázsiában és Afrikában ez az arány még nagyobb.) Nem kockáztathatod a lehetséges konverziókat azzal, hogy a felhasználónak zoomolgatnia kelljen az oldalon. Biztosan találkoztál már ilyennel. Elég idegesítő.
Másrészt, a mobilbarát oldalak régóta (a mobilegeddon óta) előnyt élveznek a keresőmotorokban. Tesztelheted az oldalad mobilbarátságát a Google eszközével, de nem tudod megspórolni, hogy a különböző felbontású és képarányú képernyőkön, illetve a különféle böngészőkben való megjelenést modellezd. A Chrome fejlesztői eszközei között a „Toggle Device Toolbar” nagy segítségedre lehet, főleg, ha párosítod a legnépszerűbb eszközök képarányait és felbontását mutató listával, például ezzel.
Miután a webre való tervezés során sokszor kell illeszkednünk különféle keretrendszerekbe, például a social media felületeire, érdemes tisztában lenni az aktuális elvárásokkal a képméreteket tekintve. Illetve azzal, hogy ezek a keretrendszerek a reszponzivitás érdekében az egyes képeket különféleképpen vágják a megfelelő méretre. Érdemes tájékozódni, hogy melyek azok a területek, amelyek a legtöbb felületen biztosan látszódni fognak. (Ezek az ún. safe area-k.)
Úgy tudod a legkönnyebben elriasztani a lehetséges ügyfeleidet, ha az oldalad nem töltődik be elég gyorsan.
Ennek elkerülése érdekében ne használj feleslegesen sok és feleslegesen nagy felbontású képet, videót, animációt, és amit használsz, mindig optimalizáld a reszponzivitásnak megfelelően! Ezzel az eszközzel például villámgyorsan vághatod és tömörítheted a grided töréspontjaihoz igazítva a képeket, de a Tinypng pandája is sok-sok kilobájtot tud neked spórolni.
Ha tutira akarsz menni, akkor a Photoshop ”Save for web” ablakában egymás melletti nézőképeken ellenőrizheted a különböző méretű képfájlok megjelenítési minőségét.
A Google eszközével ellenőrizheted a betöltési sebességed, de akármilyen gyors is vagy, előfordulhat, hogy eltart néhány másodpercig, mire betölt egy-egy tartalmad. Mindig küldj vizuális visszajelzést a látogatódnak, hogy az oldal tölt. (Tiszta navigáció!) Az utóbbi időben a loading bar-ok különféle formáinál (amiktől – Luke Wroblewski szerint – az embernek az az érzése támad, hogy még lassabban telik az idő) jobban működnek az úgynevezett skeleton screen-ek: ezek megmutatják az oldal vázát, és már előre láthatod, hogy hová fog kerülni a várva-várt tartalom. Így működik például a Facebook news feedje is, de az E-flux journal nyitólapja is kifejezetten szép példája a skeleton screen-nek.
Ahhoz, hogy reszponzív oldalakat tervezhessünk, szükségünk van arra a strukturális hálóra, amit az ötvenes években a tipográfia nagy svájci mesterei fejlesztettek ki a Bauhaus, az orosz konstruktivisták és a De Stijl örökségére támaszkodva: a gridrendszerre.
A grid a grafikában egy olyan struktúra, amit a tervező annak érdekében szerkeszt meg különböző aránybeli megfontolások alapján, hogy a szövegek és képek halmazában következetes vizuális rendet teremtsen.
A webdizájn esetében a grid elsődleges jellemzője, hogy hány oszlopot használ (A 9, 12, 16 oszlop szélességű grid a legelterjedtebb, de itt is aranyszabály a mértékletesség: ne használj többet a szükségesnél!)
Fejlesztői és tervezői oldalról is a legkézenfekvőbb megoldás létező rendszereket használni (például ezt), pláne, ha irtózol a törtektől, hiszen a gridrendszer tiszta matek.
Már a drótvázazás során ki kell találnod a grid struktúráját, de a pixelpontos kidolgozásban rengeteget segítenek a kész PSD template-ek (például egy ilyen.) Haladóbb megoldás Photoshopban hozzáadni a dokumentumodhoz egy saját guide layout-ot.
7. Biztos úr, hiszen zöld volt – színek és webdizájn
A színek hatalma vitathatatlan. Egy rosszul kiválasztott színskála el tudja buktatni a legjobb tervet is, de ha körültekintően és az első szabálynak megfelelően (pontosan tudod, kinek tervezel, mit és miért) választod ki a benne szereplő színeket, nem eshetsz hatalmas hibákba a színek kulturális beágyazottságával kapcsolatban, és az üzenetedet támogatni, nem pedig aláaknázni fogják az egyes színek pszichológiai hatásai.
Figyelembe kell venned azonban néhány földhözragadtabb szempontot is a színek kiválasztásánál: a megjelenítő eszközök sokféleségéből következik, hogy a különböző technológiát használó kijelzők különféleképpen jelenítik meg ugyanazt a színt, ráadásul a felhasználó egyéni beállításai (fényerő, kontraszt, esetleg a gyakran alkalmazott kékfény-szűrő alkalmazások) nagymértékben befolyásolják, hogy a néző milyen színt lát ahelyett, amit terveztél.
Gondolnod kell továbbá azokra a felhasználókra is, akik színérzékelési rendellenességben szenvednek. A leggyakoribb ilyen rendellenesség a piros és a zöld komplementer színpár felcserélése / nem érzékelése. Ezért egy fontos üzenetet, visszajelzést soha nem alapozhatunk kizárólag a színre, formával és verbális üzenettel is meg kell támogatnunk.
Képzeld, a betűk is metakommunikálnak. Kialakulásuk több ezer éves története alatt az egyes típusokhoz kulturális beágyazottságukból adódóan rengeteg érzet, asszociáció tapadt, minden egyes betűtípus hordoz valamilyen, a kommunikációs funkciót meghaladó többletet. Ez a többlet, még ha elenyészőnek tűnik is a jelentősége, teljesen félreviheti az üzenetet, ezért nagyon fontos a betűtípusok körültekintő kiválasztása.
A webdizájn hőskorában nagy kihívást jelentett, hogy csak limitált mennyiségű „web safe fonttal” lehetett tervezni, amelyek biztosan minden számítógépen megtalálhatóak. Ma többnyire az úgynevezett web fontokat használjuk, ezeket az oldalad assetjei közé építheted, vagy egy külső kiszolgálótól hívhatod le (pl. Google Fonts, Typekit), – utóbbinak egyetlen hátránya, hogy növelheti az oldal betöltési sebességét. Ebből következik a szabály, hogy 3-4 típusnál többet ne tervezz egy oldalra, ami nem mellesleg esztétikai szempontból is betartandó!
A képernyőre való tervezés másik, technikai szempontból elavultnak tekinthető szabálya, hogy nem szerencsés talpas betűket használni a hosszabb szövegek, bekezdések megjelenítésére, legfeljebb címekhez, alcímekhez. Ez abból következik, hogy az apró betűtalpak könnyen az olvashatóság rovására mennek a rosszabb felbontású képernyőkön. (Igaz, ez a hatás a betű méretének növelésével csökken.)
A technológia fejlődésével azonban már nem annyira releváns, inkább megszokottá vált, hogy a hosszabb szövegeket talp nélküli betűkkel szedjük. Másrészt, a talp nélküli betűt, amit a 19. század elején kereskedelmi célok hívtak életre, sokkal modernebbnek érzékeljük, ezért többnyire úgy tűnik, inkább van helye az internet világában. Természetesen a talpas betűt sem kell kiírtani a netről, néhány helyzetben kifejezetten jó választás, hiszen a talpas betű időtlen eleganciát sugall, jól jöhet például egy ékszerüzlet honlapján.
A kézírást imitáló típusokkal viszont tényleg csínján kell bánni, ezekkel soha ne szedjünk hosszabb paragrafust.
9. A kevesebb (mindig) több. Lődd ki a horror vacuit
Képzeld el, hogy a már emlegetett álmaid házát telezsúfolod szebbnél szebb dizájn kuriózumokkal. A gyönyörű és méregdrága Breuer Marcell-széked egyáltalán nem fog érvényesülni, ha át kell rajta verekedned magad a konyhába vezető úton. A negatív tér, amit whitespace-nek is szoktunk hívni, ugyanolyan fontos (ha nem fontosabb) mint a „hasznos tér”, és ha ügyesen bánsz vele, jó barátoddá válik.
Ha betartod a második szabályt, és első lépésben egy kifogástalan struktúrát alakítasz ki, amihez aztán fegyelmezetten tartod magad, elkerülheted azt a hibát, hogy felesleges információkkal áraszd el a felhasználókat. Könnyen elveszítheted valaki figyelmét, ha túlzottan sok vizuális (vagy verbális!) üzenetet akarsz ráterhelni. (Nem mellesleg az oldal betöltési sebességének sem tesz jót.) Ami egy középkori kódexlapon lenyűgözőnek tűnik, azt a webdizájn nem igazán viseli el.
10. Lásd a trendek mögött a lényeget
Mindig lesz valami, ami az újdonságával, szokatlanságával, szépségével lenyűgöz, és elfelejtesz a rózsaszín cukormáz alá nézni, elfelejted lehámozni a filtereket, elfelejted megkérdezni, hogy az a gyönyörű, zöld fagyi milyen ízű (spenótos vagy kivis?)
A trendeket ismerni kell, de önmagukban nem érnek semmit: ha nem alkalmazod körültekintően a megoldásaikat, csak légvárakat építesz. (Ezekben pedig, alapok nélkül, tudod, a Pénznyelőben élsz, hiába van melletted a gyönyörű Shelley Long.) Mindig légy következetes, gondolj a dizájn halhatatlan iskolájának, a Bauhausnak nagy mestereire, akik szerint elsődleges a funkció, és abból deriválódik a megjelenés!
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]
7. Kulcsszót az elejére
