blog.7digits-dev.eu

Tag: UI

17 bombajó UI design megoldás

[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=””]

UI design ötletek

[/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” 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=”01.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:83px” css=”.vc_custom_1764582412480{margin-bottom: 18px !important;}”][impeka_slogan title=”RÉSZLETEKBEN REJLIK A NAGYSÁG” subtitle=”ALGOLIA” 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=””]

ALGOLIA

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?

Bravó, Srácok, nyugati mércével is gyönyörű UI design 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-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=”11.” font_container=”tag:div|font_size:80|text_align:left|color:%23d1d1d1|line_height:83px” css=”.vc_custom_1768932148993{margin-bottom: 18px !important;}”][impeka_slogan title=”3D marketing” subtitle=”LINEAR APP” 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=””]

LINEAR APP

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]

April 15, 2026
Customer journey 101 – Út a vásárló szívéhez és pénztárcájához
[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?
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css=””]

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:
1. 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.
2. É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)
3. 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..
4. 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.)
5. 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.
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”39272″ img_size=”full” add_caption=”yes” alignment=”center” onclick=”img_link_large” img_link_target=”_blank” css=””][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”39273″ img_size=”full” add_caption=”yes” alignment=”center” onclick=”img_link_large” img_link_target=”_blank” css=””][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css=””]

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

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”39269″ img_size=”large” alignment=”center” css=””][vc_column_text css=””]

E-kereskedelem
- Tudatosság: A felhasználó meglátja a hirdetést a közösségi médiában vagy keres egy terméket a keresőmotorban.
- Érdeklődés: A felhasználó meglátogatja a weboldalt és megnézi a termékeket, árakat, értékeléseket.
- Döntés: A vásárló kiválasztja a terméket, és hozzáadja a kosarához.
- Vásárlás: A vásárló megvásárolja a terméket, kitölti a szállítási és fizetési információkat.
- Utókövetés: A vásárlás után e-mailt kap a rendelés visszaigazolásáról, majd a csomag megérkezéséről.
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”39266″ img_size=”large” css=””][vc_column_text css=””]

Mobilalkalmazás használata
- Tudatosság: A felhasználó tudomást szerez a mobilalkalmazásról (barátoktól vagy hirdetésekből).
- Letöltés: Letölti az alkalmazást valamelyik store-ból.
- Bevezetés: Az alkalmazás bemutatja az alapvető funkciókat, és a felhasználó regisztrál vagy belép a fiókjába.
- Használat: A felhasználó használja az alkalmazást a céljainak megfelelően (pl. hírek olvasása, vásárlás, zenehallgatás).
- Visszajelzés: Az alkalmazás lehetőséget nyújt a felhasználóknak visszajelzést adni, és a felhasználó értékelést írhat az alkalmazásról.
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”39274″ img_size=”large” css=””][vc_column_text css=””]

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.

💡 Tipp: Nyújts személyre szabott ajánlatokat és kedvezményeket a felhasználók korábbi vásárlásai vagy érdeklődései alapján.

Könnyedség

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]
July 9, 2024
Webshop Pszichológia – 5 haladó fogás e-kereskedőknek

[vc_row][vc_column][vc_column_text]

Nem csekély mértékben a koronavírusnak köszönhetően az e-kereskedelem minden szeglete komoly fejlődésen ment keresztül Magyarországon az elmúlt másfél évben. Ma már néhány kompetitívebb hazai piacon működő webshopban a vásárlói élmény megközelíti a fejlettebb nyugati országokban tapasztaltakat (Mínusz email marketing, mert az a legtöbb webshopnál még mindig sírnivaló.) Elég csak a táplálékkiegészítők, a fashion, a játékok, a háztartási elektronika, vagy épp az utazások piacán egyre többször látható webshop pszichológiai fogásokra és UI megoldásokra gondolni.

A fejlődés “profi UI” lépcsőjét immár nyugati szinten megugró vállkozásoknak is mindig van továbbfejlődési lehetőség… Amikor ugyanis egy webshop forgalma már több ezer látogató naponta, akkor akár a nüansznyi javítások is sokat hozhatnak a konyhára.

Ilyenkor lép színre a konverzió optimalizálás számos eszköze, köztük az online vásárlásokra kihegyezett pszichológia, s bár a kommerszebb pszicho technikákat sokan már kívülről tudják, a ritka gyöngyszemek talán még adnak némi inspirációt a weben kereskedő vállalkozó Kollégáknak. Íme öt pszicho technika, amire lehet, hogy nem gondoltál…

[lwptoc depth=”3″ hierarchical=”1″ numeration=”none” numerationSuffix=”none” title=”Tartalomjegyzék” toggle=”1″ labelShow=”Mutatás” labelHide=”Elrejtés” width=”full” skipHeadingLevel=”h1,h2″ skipHeadingText=”ÉRDEKEL*”]

Prémium webshop pszichológiai trükkök

1. A bizonytalanság csökkentése – Farfetch

A farfetch.com a vásárlási folyamat során – mobil nézetben – a méretválasztást követően visszajelez, hogy a választásunk tökéletes – bármilyen méretet is választottunk.

Pszichológiai háttér: az olyan vásárlási helyzetekben, ahol sok variáció közül kell választanunk, ott az emberi agy nem csak a pénz azonnali elvesztése miatt fúj riadót, hanem a választás bizonytalansága miatt is igyekszik késlelteni a döntést.

Amikor azonban a döntés megszületik, akkor egy úgynevezett choice-supportive bias lép fel, azaz a döntéshozó utólag igyekszik racionalizálni a döntését. Pontosan erre erősít rá, ezt támogatja a Farfetch kis UI trükkje és a “félelem” csökkentése révén könnyíti meg a vásárlást.

A megváltozott szöveget tudatosan aligha veszik észre sokan, az azonban éppen ezért oly hatékony: a tudatos agyterületek helyett a tudatalatti “krokodil agyig” jutó információ kiváló eszköz arra, hogy indukálja a Choice-supportive bias-nek, vagy más néven vásárlás utáni racionalizálásnak nevezett folyamatot.

Alkalmazási lehetőség: Bármilyen webshopban alkalmazható, ahol egy adott terméknek több variációja van, azaz méret, szín, műszaki paraméterek, stb.

Technikai nehézség: A webshop pszichológia fogásainak ez a megoldás a technológia-heavy fajtája: szinte biztosan egyedi fejlesztést igényel, így nem lesz sem olcsó, sem egyszerű.

[/vc_column_text][/vc_column][/vc_row][vc_row section_id=”nickis”][vc_column][vc_column_text]

2. Vásárlási élmény kiterjesztése – Nicki’s

Mindegyik webshop küld a megrendelések fogadása után olyan – úgynevezett tranzakciós – emaileket, amiben a vásárlás részletei mellett megerősíti, hogy köszönik, vették, csinálják. Persze egy dolog ezt tudni, és egy teljesen másik élmény a saját szemünkkel látni…

A Nicki’s nevű német gyerekruha oldal a megrendelést követő köszönőoldalon egy kis videóban mutatja be, hogy mi is történik a megrendelés után a színfalak mögött; hogyan választják ki a munkatársak a megrendelt árut, milyen gondosan csomagolják és hogyan adják át a futárszolgálatnak. Alább a screenshot, a thank you oldalról, utána pedig a Nicki’s vásárlás utáni videója:

A videó, ami automatikusan elindul az oldal betöltődésével:

https://youtu.be/5ac1znMsrE8

Pszichológiai háttér: a vásárlást követően mindig fellép egy buyer’s remorse-nak is nevezett lelkiismeret-furdalás, egyfajta veszteségélmény. Online ezt még természetszerűleg az is tetézi, hogy (kártyás fizetés esetén) a pénzbeli veszteségélmény azonnali, ugyanakkor a terméket nem foghatjuk azonnal a kezünkbe. A webshop pszichológia ezen találékony alkalmazása azonban segít ezen a problémán:

A vásárlási élmény pozitív részének kiterjesztése és időbeni megnyújtása késlelteti, illetve mérsékli a buyer’s remorse jelenségét, arról nem is beszélve, hogy a webshopoknál értelemszerűen nagyon nehezen kommunikálható szolgáltatást és a minőség-érzést egy videón keresztül beemeli az összképbe.

Alkalmazási lehetőség: Bárhol alkalmazható a vásárlók érzelmi kötődésének és a vásárlási élmény felturbózásának növelésére.

Technikai nehézség: A videó miatt költséges, de technikailag rendkívül egyszerű webshop pszichológiai fogás. Amennyiben a webshop motorod lehetővé teszi a vásárlás utáni köszönő oldal szerkesztését, akkor csak beágyazod a videót és kész is.

3. Videó a termékről – Glossier

Ha már videó, akkor íme még egy nagyon egyszerű fogás, amit bármelyik webshop tulajdonos használhat: a termékképek mellett nyugodtan lehet rövid videókat is használni a termékek bemutatására – már ha az adott webshop motor képes ezt lekezelni (WooCommrce, Shopify és Magento környezetben ez simán megoldható). Valahogy így néz ki a dolog élőben:

[cvm_video id=”30433″ volume=”25″ width=”820″ aspect_ratio=”16×9″ loop=”0″ autoplay=”0″]

Pszichológiai háttér: A termékről készült statikus képek korlátozottan képesek visszaadni a felhasználáshoz kapcsolódó érzéseket – ez azonban mozgóképpel simán áthidalható. Amikor a látogató látja, ahogy mások használják a terméket, akkor ugyanazok a kémiai folyamatok indulnak el az agyában, mint ha Ő maga is éppen ezt tenné. (Amúgy ennek a agyi mechanizmusnak köszönhető például a focimeccseken a gólöröm miatti ösztönös felállás is – de erről majd máskor…)

Alkalmazási lehetőség: Szinte bármilyen webshopban alkalmazható. Nem csak használat közben érdemes bemutatni a terméket, hanem a részletekből is össze lehet vágni egy pár másodperces videót. A videós tartalmaktól sokan megijednek, hogy “hű, biztos méregdrága”, de gondolj csak bele: ezek 3-4 másodperces snittek – jellemzően egy kaptafára. Azoknál a webáruházaknál, ahol 40-50 kiemelt termék van, és a termékek forgási sebessége sem vészes, ez akár egyetlen forgatási nap alatt is megvan. A konverzióra gyakorolt hatása azonban elképesztő!

Technikai nehézség: Ha profi webshop motort használsz, ami lehetővé teszi ezt a funkciót, akkor pofon egyszerű és a megvalósítás költsége sem horror. Ha nem, akkor érdemes elengedni, mert csupán némi webshop pszichológia miatt belehegesztgetni valami petákolt webshop motorba, amihez képest az első kvarcórád földönkívüli technológiának számított, az nem túl nyerő ötlet. Persze ilyenkor mindig ott van számodra a nagy sóhaj és migrálás Shopify-ra lehetőség… 😉

[adning id=”29660″]

Csak mondom… 🤷‍♂️

4. Kis webshop pszichológia a visszaküldés csökkentésére

2020-ban az online vásárlások 10%-át,

világszerte összesen 428 milliárd dollár értékű árut küldtek vissza a vásárlók!

Ez brutális mennyiség. E-kereskedelemmel foglalkozó ügyfeleinktől itthon is horror sztorikat hallunk az egyre növekvő visszaküldési szokásokról. S bár a visszaküldéseket megszüntetni nem lehet, a profi e-kereskedelmi vállalatok számos technikai trükk mellett pszichológiával is felvehetik a harcot a visszaküldések ellen.

A visszaküldési feltételeknek a visszaküldési arányra gyakorolt hatásáról megannyi kutatás született – akit mélyebben érdekel a webshop pszichológia, az kezdje ezzel a cikkel, vagy ezzel az infografikával. Hogy ne csigázzam a kedélyeket:

Ha kisebb visszaküldési arányt akarsz, biztosíts hosszabb időt a visszaküldésre.

[/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]

Hogy MICSODA??? 😳

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Nem elírás, a paradoxon valós és a fenti linkeken található mérések bizonyítják! E meglepő tapasztalati ténynek több magyarázata is lehet (kauzalitást tekintve egyiket sem igazolták, de ettől még működik). Valószínűleg szerepet játszik a jelenségben a megvásárolt termékhez történő hozzászokás és a feledékenység is – csakúgy, mint a viszonosság elve. Amit érdemes megjegyezni, hogy a hosszabb visszaküldési idő lehetősége alacsonyabb visszaküldési aránnyal jár, ráadásul

a return policy visszafizetést érintő engedékenyebb passzusai egyértelműen korrelálnak a megnövekedett kosárértékkel.

Alkalmazási lehetőség: Fashion-ben óvatosan, a visszaküldési arány csökkentését szolgáló egyéb UX megoldásokkal együtt alkalmazandó, más iparágakban önmagában is működik ez az egyszerű kis webshop pszichológia.

Technikai nehézség: Nagyon könnyű, de a megengedőbb szabályokat megfelelően kommunikálni kell a vásárlók felé, hogy tudatában is legyenek a nagyvonalúságnak. Értelemszerűen a vásárlást megelőzően kommunikáld – mondjuk a termék oldalon -, ne a vásárlást követő tranzakciós emailekben hívd fel rá a figyelmet…

5. A vásárlási élmény folytatása – Burberry

Finom pszichológiai fogásokat a nagy márkáknál is bőven lehet látni – a Burberry például tableten (desktopon nem próbáltam) mutat egy bezárható sávot az oldalra visszatérőknek azokról a termékekről, amiket utoljára megnézett – valahogy így:

Pszichológiai háttér: Nem kell körmönfont webshop pszichológia ahhoz, hogy belássuk: ha egy vásárló nyitva hagyott valamit egy böngésző ablakban, akkor azt valószínűleg azért tette, mert még vissza akart térni az adott oldalra. Ha azonban mindig azon a termékoldalon “hagyod” a vásárlót, ahol abbahagyta a böngészést, akkor a korábban látott termékeket simán elfelejti. A Burberry a Zeigarnik-hatásra apellál, azaz arra a jelenségre, hogy a befejezetlen dolgok tovább megmaradnak a memóriában. Amikor egy vásárló visszatér a Burberry oldalára és nem egy, hanem több terméket lát, akkor minden egyes látott terméket egy fokkal jobban be fog vésni a memóriájába, hiszen még egyiket sem vette meg.

Alkalmazási lehetőség: Online retail e-commerce-ben szinte bárhol alkalmazható.

Technikai nehézség: Ha a használt téma, vagy webshop motor nem is tudja, akkor is legfeljebb közepes nehézségű, egy time delayed popup ablakkal megoldható – írástudó (szoftverfejlesztő Kolléga beceneve az online marketing szlengben) azonban kelleni fog hozzá.

A webshop pszichológia megtérülése

A pszichológia – és úgy általában a konverzió optimalizálás minden formája – nem csak hatékony, hanem rendkívül olcsó eszköz is, hiszen pár apró módosítással hosszú évekre meg lehet növelni a konverziós arányokat. Amennyiben komolyan veszed a vállalkozásod e-commerce vonalát, érdemes rendszeresen áttekinteni, hogy hol és milyen módon érdemes bevetni a különböző pszichológiai fogásokat. A lényeg azonban – mint minden marketing fogásnál – a folyamatok javítását állandóan szem előtt tartó attitűd…

…a fentiekhez hasonló webshop pszichológiai fogások ugyanis csak akkor fognak hosszú távon működni, ha nem átverni és irányítani próbálod a vásárlóidat, hanem valóban segíteni próbálasz abban, hogy olyan vásárlási döntéseket hozzanak, ami boldoggá teszi őket, ha pedig meghozták ezt a döntést, akkor olyan vásárlási élményben legyen részük, ami kifogástalan!

Ha van más e-commerce pszichológiai fogás a tarsolyodban, vagy a fentiek kapcsán felmerülne kérdés, akkor kérlek ne habozz megosztani a 7Blog olvasóival; kommentek bátorítva, mint mindig! Ha pedig megteszed, hogy megosztod valakivel, akinek esetleg hasznára lehet a cikk, akkor hálás köszönet és örökös 10 fölötti FB ROAS!

[/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]Utóirat

Régebben gondolkodtam rajta, hogy kellene egy A-Z-ig Prémium összefoglaló az e-commerce UI és webshop pszichológia optimalizációs technikákról, azonban nem tölteném szívesen az időt olyan fogások taglalásával, amit amúgy mindenki kívülről fúj. Szóval itt és most felteszem a 7Blog olvasóknak a nagy kérdést:

[totalpoll id=”29787″]

Ha elég sokan kérik, akkor az e-comm-os és a designer Kollégákkal nekiállunk… Up to you![/vc_column_text][/vc_column][/vc_row]

November 8, 2021