blog.7digits-dev.eu

Tag: UX

  • 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]

  • 11 Bizonyított CTA Trükk – Siker Gombnyomásra

    11 Bizonyított CTA Trükk – Siker Gombnyomásra

    [vc_row][vc_column][vc_column_text]

    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.

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

    2022 Update

    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!

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

    5. CTA a semmi közepén

    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.

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

    2021 Update

    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:

    CTA példa Bóné László ügyvéd weboldaláról[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

    Summa

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

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

  • A kiváló webdizájn 10 alapszabálya

    [vc_row][vc_column][vc_column_text]

    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!

    [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”21871″ img_size=”full”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

    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.

    (Eddig egyszerű, ugye?)[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”21872″ img_size=”full”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

    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.

    [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”21873″ img_size=”full”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

    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.

    [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”22119″ img_size=”full”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

    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.

    [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”22067″ img_size=”full”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

    4. Mutass jól minden eszközön

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

    [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”22069″ img_size=”full”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

    5. Legyél gyors

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

    [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”21882″ img_size=”full”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

    6. Gondolj Mondrianra! A gridrendszer

    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.

    [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”22031″ img_size=”full”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

    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.

    [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”22121″ img_size=”full”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

    8. Figyeld a betűk testbeszédét

    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.

    [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”22070″ img_size=”full”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

    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]

  • Webdesign, ami bevételt is termel – A UX tervezés 7 trükkje

    [vc_row][vc_column][vc_column_text]

    A UX tervezés (User Experience Design) előretörése vitathatatlanul az egyik legjobb dolog, ami valaha a webdesign világával és a weben megcélzott vásárlóval történt – bár nem esztétikai szempontok kényszerítették ki. A megfelelő UX-szel felépített üzleti weboldalak ugyanis pénzt termelnek, míg más oldalak – hiába szépek és esztétikusak – valahogy csak nem hoznak a konyhára.

    Nézzük meg, hogy mire érdemes figyelni és milyen játékszabályokat kell betartani, ha egy weboldal vagy landing page megvalósítására készülsz – ugyanis az, hogy szép, az üzletileg nem lesz elég! Pszichológiai trükkökről már írtunk részletesen, itt most inkább arról lesz szó, hogy hogyan néz ki egy olyan ux tervezés folyamata, amelynek eredményeképpen a weboldalad messze kiemelkedhet majd a versenytársak közül a posztmodern kor kalandos marketing-játszóterén…

    Az alábbi 7 pont betartásával  még a nagy versenyt támasztó, zsúfolt piacokon is sikereket fogsz tudni elérni, növelni tudod a konverziós arányt és csökkenteni a visszafordulást (bounce rate).

    Mi az az UX tervezés, és miért olyan fontos?

    A felhasználói élmény tervezéséről (UX – User Experience design) lényegében bármilyen termék kapcsán beszélhetünk, legtöbbször azonban mégis online marketing funnel-ek, applikációk és weboldalak kapcsán botlunk a kifejezésbe. Az elmúlt évtizedek egyik legnagyobb marketing-tanulságára alapozva a UX tervezés abból az alapvetésből tört a csúcsra, hogy a fókusz többé már nem a terméken magán, sokkal inkább a fogyasztón, a fogyasztó problémáin van, és azon, hogy egy adott termék miként képes erre a problémára megoldást nyújtani.

    A UX tervezés a webdesignban ugyanezen az elven működik, – a weboldalad is egy termék, ami minél magasabb szinten elégíti ki a felhasználók elvárásait, annál nagyobb volumennel segít értékesíteni a célterméked/szolgáltatásod. Az pedig elég fontos, hogy a felhasználóid kellőképpen fontosnak érezzék magukat, hiszen

    a felhasználók 68%-a azért nem konvertál végül, mert úgy érzi, nem foglalkoznak vele eléggé.

    Az élményközpontú tervezés fő motivációi egyrészt a valódi érték közvetítése, másrészt a létező problémákra adható lehető legokosabb megoldás megtalálása. A “jó tett helyébe jót várj” elve tökéletesen működik itt, hiszen az ilyen termékek/szolgáltatások nemcsak vásárlói lojalitást eredményeznek, de sokszor a legértékesebb marketing eszközt, a szájról-szájra terjedő reklámot/ajánlásokat is a vásárlók életét megkönnyítő perfekcionizmusnak köszönhetjük.

    A sikeres UX tervezés receptje tehát az, hogy olyan terméked és weboldalad legyen, amely valós problémára találja meg a lehető legokosabb, legpraktikusabb, legletisztultabb (egyszóval legnagyobb “élvezeti értékkel” bíró) megoldásokat. De bármit is tervezel, a legeslegelső szabállyal kezdj; tökéletesen ismerd meg azt, akinek a termékedet szánod.

    1. Ismerd azt, akinek tervezel!

    Az UX tervezés első lépéseként mindenképpen időt kell szentelned a jövőbeli felhasználóid megismerésére.

    A célcsoport modellezése ún. perszónákból kialakított fiktív portfólió létrehozásával történik. A leghúsbavágóbb kérdések, amelyekre a célcsoportod megismeréséhez minenképpen választ kell kapnod:

    Kik fogják használni a terméket? Mekkora az átlag életkoruk? Mi a szakmájuk?  Mikor használnák és milyen problémára nyújt megoldást a termék? Mi a motivációjuk? Van-e problématudatuk? Milyen lehetséges kifogásaik lehetnek a termékkel kapcsolatban?

    A ux tervezés során feltett kérdésekre kapott válaszok segítenek meghatározni az oldal(ak) logikai felépítését, tartalmát, hangnemét és stílusát. Ha időt szánsz arra, hogy megértsd, hogyan gondolkoznak és reagálnak a jövőbeli felhasználóid, akkor fogsz tudni igazán ütőképes weboldalt vagy appot készíteni.

    Perszónák táblázatai
    Készíts a perszónákról táblázatot, ahol összegzed az adott perszónákra vonatkozó adatokat!

    2. Használd ki a pszichológia alaptörvényeit

    Egy online felület rengeteg, lényegében végtelenül sokféleképpen kombinálható összetevőből áll. Használhatsz képeket, animációkat, illusztrációkat, videót, és persze itt vannak még a gombok és egyéb CTA-k, színhasználat, betűkészlet, szöveges tartalmak, kiemelés, alacsony kontrasztú elemek. A kívánt hatás (többnyire vásárlás, esetleg valamilyen soft konverzió) elérése érdekében minden elemet tökéletesen össze kell hangolni a többivel a ux tervezés során. Érdemes olyan alapelvek szerint rendezni a tartalmakat, amiről nagy eséllyel tudjuk, hogy a legpozitívabb hatást fogja kiváltani a felhasználóban. Itt jön képbe a pszichológia. Nézzük, mik azok az elméletek, amelyek minden projektben alkalmazhatóak!

    Gestalt elmélet: a gestaltpszichológia (azaz alaklélektan) UX tervezésben való alkalmazása elsősorban a tartalom-elhelyezésben kap kiemelkedő szerepet: az emberi észlelés szabályszerűségeit veszi alapul a webdesign területén is, az egész és a részek közötti hierarchia vizsgálata révén. A tervezés során fontos tudnod, hogy a különböző grafikai elemek, színek, szövegdobozok elhelyezése és egymás mellé rendelése miként fog hatni a látogatóra, milyen érzelmeket vált ki, hogyan tehető könnyen fogyaszthatóvá akár egy terjedelmesebb weboldal is. A leggyakrabban használt alapelvei a közelség elve, a hasonlóság elve és a zártság elve.

    Hick’s elmélet: Lényegében azt állítja, hogy a választási lehetőségek számától függ az az idő, amit a felhasználó választással tölt el. Minél több a választás, annál több idő telik el és annál kisebb eséllyel fog végül pozitív lezárást kapni a folyamatunk – ennek landing oldalaknál van óriási jelentőségea ux tervezés gyakorlatát tekitve. Ezért érdemes úgy terveznünk, hogy minél kevesebb választási opció elé állítsuk a felhasználóinkat a folyamat egy adott fázisán belül.

    A Von Restorff elméletet alkalmazzuk, amikor szeretnénk elérni, hogy egy adott elemre emlékezzenek a felhasználók. Amikor sok homogén elem kerül a felhasználó elé, arra az elemre fog legjobban emlékezni, amelyik a legnagyobb mértékben tér el az átlagtól. Egy ilyen apró trükk megfelelő alkalmazásával (pl. CTA elhelyezés és színezés) nagy arányú konverziónövekedést is elérhetsz.

    pszicológiai elméletek az UX tervezés során
    Használd a vonatkozó pszichológiai elméleteket az UX tervezés során, és vezesd a felhasználóidat!

    3. Milyen a jó user interface (UI)? Leginkább letisztult

    …és közérthető! Az elmúlt évek dizájntrendjeinek koronázatlan királyai a minimal és a flat webdesign. Népszerűségüket a könnyen emészthető és átlátható, jól strukturált tartalmi felépítésnek köszönhetik.

    Természetesen ez nem azt jelenti, hogy mindig minimal vagy flat dizájnt kell alkalmaznod, csak tanulj az irányvonalak jól működő megoldásaiból és alkalmazd a saját projektednél. A jó dizájnt nem kell magyarázni, a tartalma egyszerűen értelmezhető, nem tántorítja el a júzert felesleges interakciókkal és a folyamat végén nem hagy bennük kétséget.

    Érdemes észben tartani, hogy a letisztult tervezés, a lényegretörő, könnyen olvasható szöveges tartalom mind-mind időt és energiát spórol a felhasználóidnak, ami magasabb konverzió formájában köszön vissza.

    Az egyik fontos irányadó pont a vizuális hierarchia kialakítása (méretek, színek, headerek, ikonok tudatos rendezése és használata), de idetartozik a könnyen használható navigáció, az új felhasználók tájékozódásának elősegítése, vagy épp a gördülékeny check-out folyamataid felépítése is. A letisztult UI titka az alapos UX tervezés; a folyamattervezés szakaszában ne felejts el részletes drótvázakat készíteni, eltervezni az oldal felépítését, és a már elkészült drótvázakat még a pixelpontos dizájn előtt valós személyeken tesztelni. Rengeteg időt spórolhatsz vele.

    Drótvázazás folyamata
    A pixelpontos dizájn tervezése előtt készíts drótvázakat, hogy a weboldalad ne csak szép, de átgondolt és könnyen használható is legyen!

    4. Soha ne kamuzz!

    Talán az egyik legfontosabb szabály a UX tervezés során, hogy soha ne hazudj a felhasználóknak, és ne próbálj sumákolni. Az egyenes és őszinte kommunikáció – akár árral vagy termék/szolgáltatás tartalmával kapcsolatban, – mindig a legjobb választás, lépésről lépésre alapozza meg a bizalmat a fogyasztó és a brand között. Nincs az a webdesign, ami miatt bárki kattintana a vásárlás gombra anélkül, hogy tudná mit is vesz meg pontosan és mennyiért! És senki sem ajánl másnak olyan céget, aki egyszer már átverte, vagy megvezette őt.

    Amellett, hogy a terméket/szolgáltatást tisztán, félrevezetésektől mentesen mutatod be, fontos, hogy saját céged imidzsét se hagyd ki az összképből. Adj meg minden olyan információt az oldalon, amely a cég hitelét növelheti a felhasználó szemében. Az online piacon sajnos rengeteg a csaló, így a felhasználókban egyre inkább kialakul egyfajta gyanakvás – ennek révén pedig egyre többen egyre okosabban szűrik meg, hogy kiben bízhatnak meg, így ezt a jelenséget a ux tervezés során muszáj figyelembe venni.

    5. Használd az UX tervezés konvencióit!

    Ahogy az UI-ban, úgy az UX dizájnban is vannak olyan jól bevált dizájn pattern-ek (minták), amiknek a használatával gyorsíthatunk a tervezési munkán. Így komolyabb erőfeszítések és tesztelés nélkül hozhatunk létre olyan felületeket, amiket a felhasználók már ismernek és szeretnek.

    A UX tervezés során konvencióról beszélhetünk:

    1. Interakció dizájn konvenciók: vannak olyan esetek, amikor a felhasználó interakcióba kényszerül a weboldallal / applikációval – ilyenkor érdemes egy már jól ismert módon megtervezned azt (kis kreativitás azért belefér). Egy jól megtervezett interakció (például drop down listák vagy on-off switchek megjelenítése és működésük) sokat javíthat a weboldalad használhatóságán, mert a felhasználónak nem okoz extra agymunkát a kezelési mód kitalálása.

    2. IA (Information Architecture) konvenciók: azaz az egyes típusú (elsősorban szöveges és infomatív) tartalmakat hogyan, hol és mikor érdemes megjeleníteni a weboldalon.

    3. Vizuális webdizájn konvenciók: a weboldal különböző elemeinek (például a navigációs blokk, a logó vagy a footer) elhelyezésére és a társított funkcióira már számtalanszor bevált megoldásokat alkalmazhatsz, ilyen szempontból sok jó template-ttel lehet összefutni a neten. Javasolt hero kép használata is az oldal elején, amellyel egy pillantás alatt közelebb hozhatjuk a felhasználót az oldal témájához, de ugyanilyen fontos a jól megválasztott CTA dizájn, hover állapotok, linkek stílusára vonatkozó konvenciók. Fontos szem előtt tartanunk a színek jelentéshordozó szerepét is (pl tiltó színek vs. megengedő színek). Tartalomrendezésnél pedig a gyakran használt irányelvek egyike a hármas tagolás.

    Ha pedig attól félsz, hogy a weboldalad/applikációd „template szagú” lesz a sok pattern-től (mintától), akkor játssz egy kicsit többet, hass az érzelmekre! A UX tervezés során használj egyedi illusztrációkat, izgalmas mikro-interakciókat, animációkat, igazítsd a szövegezés stílusát a célcsoporthoz a fokozott élmény eléréséért – a spanyol viaszt viszont nem kell feltalálnod.

    De ne feledd: egyik világklasszis termék (pl. facebook) sem a cuki animációk miatt lett sikeres, hanem mert működő, egyszerűen értelmezhető és szerethető megoldást kínál a felhasználók problémájára.

    UX konvenciók és trendek
    Vizsgálj meg pár konkurens weboldalt és tanulmányozd az UX trendeket. Mik az erősségeik? Mit érdemes adaptálni és mi az, amit rosszul csinálnak?

    6. Maxold ki a reszponzivitást

    Ma már nem az a kérdés a webdesign során, hogy tervezz-e mobilra (hiszen a tavalyi évben 63%-ra nőtt  a teljes mobilos forgalom az asztali gépek 37%-ához képest!!) hanem az, hogy a weblap- és UX tervezés folyamatának melyik részébe illeszted majd be.

    A legjobb módszer, hogy ha a mobilra való tervezés egy időben halad az asztali tervezéssel, vagy megelőzi azt. A dizájn kialakítása során számolj a reszponzív töréspontokkal, így könnyebben tervezhetsz fluid tartalmakat különböző felbontású és méretű kijelzőkre.

    Használj grid system–eket! Segítséget jelenthetnek a reszponzív töréspontok meghatározásában, sávokra osztva a képernyőt. Átláthatóvá teszi a tartalmak elhelyezését, rendezését, hierarchiájának meghatározását egy sokkal következetesebb webdesign érdekében.

    Grid systemek fontossága
    A grid systemek segítséget nyújthatnak neked az UX tervezés során

    Mobilon nem muszáj minden elemet ugyanúgy megjeleníteni, mint desktop-on. A 7blog főoldala például mobil nézetben nem jelenít meg egy navigációs elemet – próbáld csak ki, amikor a cikk végére értél.

    7. Tesztelj, használd, és jöjjenek a leadek!

    A UX tervezés során szinte végtelen számú lehetőséged adódik (kvalitatív és kvantitatív egyaránt) tesztelésre. Különböző haladó analitikai platformok, heat map-ek, retention (rendszeresen visszatérő látogatók) arányát mérő rendszerek, user tesztek segítik tökéletesíteni a weboldaladat/applikációdat.

    Mindezek mellett az egyik legütősebb fegyvered lehet a tökéletességért vívott harcban az A/B tesztelés, amellyel lényegében bármilyen típusú problémát tesztelhetsz, legyen az tematikai sorrend, kontextus, CTA dizájn és használat, szövegezés, képek stb. Egyszerre több verziót futtathatsz, azok külön-külön valós júzerek keze alatt futnak át majd érnek össze újra. A kapott eredményeket elemezve a gyakorlatban jobban működő megoldásokat alkalmazhatod. Egy fontos szabály van: ha valós eredményeket szeretnél, egyszerre csak egy módosítást tesztelj ugyanazon az oldalon.

    A/B teszting toolok
    Teszteld a weboldalad bevételeled növelése érdekében. Hasznos A/B testing tool-ok: pl. Google Optimize, vagy az Optimizely.

    Webdesign marketinges szemmel

    A UX tervezés fenti elveinek betartása megteremti az alapot, hogy az online marketinges kollégák még tovább tudják növelni az oldalad sikerességét a saját eszköztáruk bevetésével. Ha azonban a saját oldalad – ahol a konverzióknak, vásárlásoknak meg kellene történnie – alulteljesít, akkor azt a marketing eredménye is megsínyli lassabb eredmények és magasabb költés formájában.

    Ezért ne nyugodj bele, hogy a weboldal vacak – állj neki az itt olvasott tanácsok alapján egy tényeken alapuló webdesign megvalósításának és csiszold tökéletesre – elvégre a vállalkozásod sikere múlik rajta. Megosztásokat előre is köszönöm, és a kérdések elől sem futok el. 😉

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