{"id":18752,"date":"2024-02-14T14:22:22","date_gmt":"2024-02-14T14:22:22","guid":{"rendered":"https:\/\/www.shoprenter.hu\/blog\/?p=18752"},"modified":"2024-03-26T15:37:02","modified_gmt":"2024-03-26T15:37:02","slug":"23-konverzio-egyedi-design-megoldasokkal","status":"publish","type":"post","link":"https:\/\/www.shoprenter.hu\/blog\/23-konverzio-egyedi-design-megoldasokkal","title":{"rendered":"Az adat alap\u00fa tervez\u00e9s bizony\u00edtott: +23% konverzi\u00f3 egyedi design megold\u00e1sokkal"},"content":{"rendered":"\n

Az online t\u00e9r \u00e9s az e-kereskedelem egyik legnagyobb el\u0151nye az, hogy nagyon dinamikusan fejl\u0151dik. Folyamatosan j\u00f6nnek ki az \u00fajdons\u00e1gok \u00e9s jelennek meg friss trendek, amelyek mind a fogyaszt\u00f3i ig\u00e9nyeknek magasabb szint\u0171 kiel\u00e9g\u00edt\u00e9s\u00e9t c\u00e9lozz\u00e1k meg.<\/p>\n\n\n\n

Ugyan\u00fagy, mint m\u00e1s ter\u00fcleteken, a webdesign-ban is \u00e9vr\u0151l-\u00e9vre vannak \u00fajdons\u00e1gok, amelyek arra hivatottak, hogy a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt magasabb szintre emelj\u00e9k. Sok esetben ez a gyors \u00fctem\u0171 fejl\u0151d\u00e9s viszont egyfajta h\u00e1tr\u00e1nyt is hordozhat mag\u00e1ban, hiszen el\u00e9g p\u00e1r \u00e9vnek eltelnie ahhoz, hogy a web\u00e1ruh\u00e1zunk megjelen\u00e9se elavultnak min\u0151s\u00fclj\u00f6n.<\/p>\n\n\n\n

A Velekey \u00c9kszervil\u00e1g web\u00e1ruh\u00e1z gy\u00f6k\u00e9rprobl\u00e9m\u00e1ja is az volt, hogy elj\u00e1rt felette az id\u0151. Az oldal kin\u00e9zete a r\u00e9gi design trendeket k\u00f6vette, ez\u00e9rt szerettek volna egy \u00faj, korszer\u0171bb arculatot – ilyen t\u00e9ren is felv\u00e9ve a konkurensekkel a versenyt.<\/p>\n\n\n\n

Ebben a cikkben elmes\u00e9lj\u00fck, hogy milyen munkafolyamatok ment\u00e9n alkottuk meg a Velekey \u00c9kszervil\u00e1g web\u00e1ruh\u00e1z egyedi megjelen\u00e9s\u00e9t<\/a> a Shoprenter rendszer\u00e9ben.<\/p>\n\n\n\n

Kih\u00edv\u00e1sok<\/h2>\n\n\n\n

Egy projekt sem izgalmas kih\u00edv\u00e1sok n\u00e9lk\u00fcl, melyek azokr\u00f3l az \u00fcgyf\u00e9lprobl\u00e9m\u00e1kr\u00f3l sz\u00f3lnak, melyeket a design-nal kell orvosolni. Jelen esetben a probl\u00e9m\u00e1k az al\u00e1bbiak voltak:<\/p>\n\n\n\n

  1. Elavult design, amely nem k\u00f6veti le a mai design trendeket, emiatt elvesz\u00edti azt a letisztults\u00e1got \u00e9s eleganci\u00e1t, amit a c\u00e9lcsoport elv\u00e1r.<\/li>
  2. A boltban nem volt lehet\u0151s\u00e9g kiemelni egy-egy partnert, fontos vagy n\u00e9pszer\u0171 m\u00e1rk\u00e1t (mint pl.: a Pandora).<\/li>
  3. Mindemellett fontos ig\u00e9ny volt, hogy az \u00faj oldalon bemutat\u00e1sra ker\u00fcljenek az \u00fczletek \/ bemutat\u00f3termek a l\u00e1togat\u00f3k sz\u00e1m\u00e1ra, hogy tudj\u00e1k szem\u00e9lyesen is meg lehet tekinteni a web\u00e1ruh\u00e1zban \u00e9rt\u00e9kes\u00edtett term\u00e9keket. <\/li><\/ol>\n\n\n\n

    Azt m\u00e1r a projekt elej\u00e9n tudtuk, hogy az \u00faj l\u00e1tv\u00e1nyban, a r\u00e9gi kin\u00e9zet \u00e9s a brand sz\u00ednvil\u00e1g\u00e1t\u00f3l nem szeretn\u00e9nk elt\u00e9rni. Ez\u00e9rt k\u00fcl\u00f6n\u00f6sen nagy kih\u00edv\u00e1s volt a csapatnak az, hogy alkossunk valami \u00fajat, \u00fagy, hogy az ne csak egy \u201cr\u00e1ncfelvarr\u00e1s\u201d legyen.<\/p>\n\n\n\n

    Adatokra alapozott tervez\u00e9s<\/h2>\n\n\n\n

    Egy web\u00e1ruh\u00e1z megjelen\u00e9s\u00e9nek a tervez\u00e9sekor ma m\u00e1r kor\u00e1ntsem elegend\u0151 az, ha csak a sz\u00e9p\u00e9rz\u00e9k\u00fcnkre \u00e9s a szak\u00e9rtelm\u00fcnkre hagyatkozunk. Elengedhetetlen, hogy a tervez\u00e9st megel\u0151zze egy olyan \u00e1tfog\u00f3 kutat\u00e1s, amely abban fog seg\u00edteni, hogy a megtervezett design ne csak eszt\u00e9tikus legyen, hanem reflekt\u00e1ljon a felhaszn\u00e1l\u00f3k viselked\u00e9s\u00e9re \u00e9s az \u00fcgyf\u00e9l ig\u00e9nyeire egyar\u00e1nt. <\/p>\n\n\n\n

    A felhaszn\u00e1l\u00f3k elv\u00e1rj\u00e1k, hogy egy web\u00e1ruh\u00e1z k\u00f6nnyen \u00e1tl\u00e1that\u00f3 \u00e9s navig\u00e1lhat\u00f3 legyen. Ezen kutat\u00e1sok seg\u00edts\u00e9g\u00e9vel meg\u00e9rthetj\u00fck, hogy a felhaszn\u00e1l\u00f3k mik\u00e9nt l\u00e9pnek interakci\u00f3ba az oldallal, \u00e9s ez\u00e1ltal optimaliz\u00e1lhatjuk a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt.<\/p>\n\n\n\n

    A felhaszn\u00e1l\u00f3k viselked\u00e9s\u00e9nek jobb megismer\u00e9s\u00e9re a Hotjar \u00e9s a Google Analytics volt a seg\u00edts\u00e9g\u00fcnkre. <\/p>\n\n\n\n

    Els\u0151 l\u00e9p\u00e9sk\u00e9nt integr\u00e1ltuk a Hotjar<\/a>-t a megl\u00e9v\u0151 webshopba, hogy a k\u00fcl\u00f6nb\u00f6z\u0151 h\u0151t\u00e9rk\u00e9pek seg\u00edts\u00e9g\u00e9vel jobban megismerj\u00fck a webshop l\u00e1togat\u00f3inak viselked\u00e9s\u00e9t \u00e9s felt\u00e1rjuk a legfontosabb optimaliz\u00e1land\u00f3 pontokat. A v\u00e1s\u00e1rl\u00f3i viselked\u00e9st ellen\u0151rizt\u00fck mobilon \u00e9s desktopon is, hogy pontos k\u00e9pet kapjunk mindk\u00e9t platform l\u00e1togat\u00f3ir\u00f3l. <\/p>\n\n\n\n

    Mit tudtunk meg a Hotjar h\u0151t\u00e9rk\u00e9pekb\u0151l?<\/h3>\n\n\n\n
    \n
    \n
    \"Hotjar
    Kattint\u00e1s t\u00e9rk\u00e9p a Hojar-b\u00f3l<\/figcaption><\/figure>\n\n\n\n

    <\/p>\n<\/div>\n\n\n\n

    \n
    \"Hotjar
    G\u00f6rget\u00e9s t\u00e9rk\u00e9p a Hojar-b\u00f3l<\/figcaption><\/figure>\n\n\n\n

    <\/p>\n<\/div>\n<\/div>\n\n\n\n

    A r\u00e9gi kin\u00e9zetben a f\u0151oldalon volt egy \u201cM\u00e1rk\u00e1ink\u201d szekci\u00f3, ahol szinte az \u00f6sszes forgalmazott m\u00e1rka log\u00f3ja megjelent kattinthat\u00f3 form\u00e1ban. A kattint\u00e1s t\u00e9rk\u00e9p<\/a> egy\u00e9rtelm\u0171en megmutatta, hogy a rengeteg felsorolt m\u00e1rk\u00e1b\u00f3l, n\u00e9gyre kattint a l\u00e1togat\u00f3k nagy r\u00e9sze. <\/p>\n\n\n\n

    Ebb\u0151l sz\u00fcletett is egy d\u00f6nt\u00e9s, miszerint az \u00faj l\u00e1tv\u00e1nyterven ezeket a m\u00e1rk\u00e1kat ki kell emelni a f\u0151oldalon, hiszen a felhaszn\u00e1l\u00f3k nagy r\u00e9sze ezeket keresi. Ha kiemelj\u00fck, megk\u00f6nny\u00edtj\u00fck sz\u00e1mukra a navig\u00e1ci\u00f3t.<\/p>\n\n\n\n

    A g\u00f6rget\u00e9s t\u00e9rk\u00e9pek<\/a> azt mutatt\u00e1k, hogy a l\u00e1togat\u00f3k f\u0151k\u00e9nt csak az oldal fels\u0151 harmad\u00e1t n\u00e9zt\u00e9k \u00e1t. \u00cdgy a csapatunk m\u00e1r a dr\u00f3tv\u00e1z kialak\u00edt\u00e1sakor \u00fagy \u00e9p\u00edtette fel a webshop elemeinek hierarchi\u00e1j\u00e1t, hogy a l\u00e1togat\u00f3k d\u00f6nt\u0151 t\u00f6bbs\u00e9ge legal\u00e1bb az oldal k\u00f6zep\u00e9ig eljusson, hogy m\u00e9g t\u00f6bb relev\u00e1ns inform\u00e1ci\u00f3t tal\u00e1ljon a webshopr\u00f3l, boltokr\u00f3l \u00e9s a v\u00e1s\u00e1rolni k\u00edv\u00e1nt term\u00e9kekr\u0151l. <\/p>\n\n\n\n

    A Hotjarb\u00f3l kinyert adatok azt is vil\u00e1goss\u00e1 tett\u00e9k sz\u00e1munkra, hogy melyek azok a term\u00e9kkateg\u00f3ri\u00e1k, amelyek a legink\u00e1bb \u00e9rdeklik a l\u00e1togat\u00f3kat. Ez\u00e9rt az \u00fcgyf\u00e9llel k\u00f6z\u00f6sen ezeket \u00e1tbesz\u00e9lt\u00fck \u00e9s kateg\u00f3ri\u00e1kat vontunk \u00f6ssze, helyezt\u00fcnk \u00e1t, a logikusabb men\u00fc elrendez\u00e9s kialak\u00edt\u00e1sa \u00e9s a navig\u00e1ci\u00f3 megk\u00f6nny\u00edt\u00e9se \u00e9rdek\u00e9ben. <\/p>\n\n\n\n

    Google Analytics, mint fontos inform\u00e1ci\u00f3forr\u00e1s<\/h3>\n\n\n\n

    A felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny kutat\u00e1s sor\u00e1n megvizsg\u00e1ltuk az \u00e1ruh\u00e1z Google Analytics fi\u00f3kj\u00e1ban l\u00e9v\u0151 adatokat is, hogy m\u00e9g \u00e1tfog\u00f3bb k\u00e9pet kapjunk a bolt m\u0171k\u00f6d\u00e9s\u00e9r\u0151l \u00e9s a c\u00e9lk\u00f6z\u00f6ns\u00e9gr\u0151l. <\/p>\n\n\n\n

    \u00d6sszegy\u0171jt\u00f6tt\u00fck a l\u00e1togat\u00f3k demogr\u00e1fiai adatait, megvizsg\u00e1ltuk, hogy az egyes eszk\u00f6z\u00f6k milyen szerepet t\u00f6ltenek be a webshop \u00e9let\u00e9ben.<\/p>\n\n\n\n

    \"google-analytics-adatok\"<\/figure>\n\n\n\n

    Mint l\u00e1tjuk, a v\u00e1s\u00e1rl\u00f3k t\u00f6bbs\u00e9ge a 35 – 54 k\u00f6z\u00f6tti koroszt\u00e1lyba sorolhat\u00f3 \u00e9s f\u0151k\u00e9nt n\u0151. Elmondhat\u00f3 tov\u00e1bb\u00e1, hogy a c\u00e9lk\u00f6z\u00f6ns\u00e9g els\u0151dlegesen a mobilj\u00e1n b\u00f6ng\u00e9szi a web\u00e1ruh\u00e1zat, Android \u00e9s iOS eszk\u00f6zr\u0151l.<\/p>\n\n\n\n

    Design szempontb\u00f3l ezek az adatok t\u00f6bb fontos inform\u00e1ci\u00f3t is hordoznak: <\/strong><\/p>\n\n\n\n

    1. Egy\u00e9rtelm\u0171en l\u00e1tszik, hogy k\u00e9pek, a form\u00e1k \u00e9s az alkalmazott bet\u0171t\u00edpusok eset\u00e9n \u00e9rdemes lesz a n\u0151iesebb vonalat k\u00e9pviseltetni az oldalon. <\/li>
    2. A l\u00e1togat\u00f3k koroszt\u00e1ly\u00e1b\u00f3l \u00e9s a web\u00e1ruh\u00e1z term\u00e9keinek \u00e1rkateg\u00f3ri\u00e1j\u00e1b\u00f3l \u00edt\u00e9lve, azt is megtudhattuk, hogy a web\u00e1ruh\u00e1z v\u00e1s\u00e1rl\u00f3i f\u0151k\u00e9nt azok a n\u0151k, akik j\u00f6vedelm\u00fcket tekintve a k\u00f6z\u00e9p vagy fels\u0151 oszt\u00e1lyba tartoznak, st\u00edlusban pedig a modern, exkluz\u00edv \u00e9s letisztult vonalat k\u00e9pviselik.<\/li><\/ol>\n\n\n\n

      Ezeket az adatokat \u00f6sszevetett\u00fck a Hotjar-ban szerzett tapasztalatokkal a konverzi\u00f3 minimaliz\u00e1l\u00e1sa \u00e9rdek\u00e9ben, \u00e9s ezek f\u00e9ny\u00e9ben indult el a dr\u00f3tv\u00e1z \u00e9s a l\u00e1tv\u00e1nyterv kialak\u00edt\u00e1sa.<\/p>\n\n\n\n

      Dr\u00f3tv\u00e1z (wireframe)<\/h2>\n\n\n\n

      A l\u00e1tv\u00e1nyterv k\u00e9sz\u00edt\u00e9se el\u0151tt a dr\u00f3tv\u00e1z l\u00e9trehoz\u00e1s\u00e1val kezdt\u00fcnk. A dr\u00f3tv\u00e1z megrajzol\u00e1s\u00e1n\u00e1l figyelembe vett\u00fck a Hotjar h\u0151- \u00e9s klikkt\u00e9rk\u00e9pek eredm\u00e9nyeit, a Google Analytics adatokat, valamint a projektind\u00edt\u00f3 megbesz\u00e9l\u00e9sen feljegyzett \u00fcgyf\u00e9lig\u00e9nyeket is. <\/p>\n\n\n\n

      A web\u00e1ruh\u00e1z dr\u00f3tv\u00e1z\u00e1t elk\u00e9sz\u00edtett\u00fck a f\u0151oldalra, a kateg\u00f3ria oldalra, a term\u00e9koldalra, valamint a R\u00f3lunk oldalra is, mert ebben az esetben ez is egy fontos szerepet bet\u00f6lt\u0151 oldal volt.<\/p>\n\n\n\n

      \"dr\u00f3tv\u00e1z\"<\/figure>\n\n\n\n

      Miut\u00e1n az \u00fcgyf\u00e9l is \u00e1tn\u00e9zte \u00e9s j\u00f3v\u00e1hagyta a web\u00e1ruh\u00e1z dr\u00f3tv\u00e1zon \u00e1br\u00e1zolt tartalm\u00e1t, a designer koll\u00e9g\u00e1nk megkezdte a l\u00e1tv\u00e1nyterv kialak\u00edt\u00e1s\u00e1t.<\/p>\n\n\n\n

      L\u00e1tv\u00e1nyterv<\/h2>\n\n\n\n

      Miel\u0151tt bemutatn\u00e1nk a v\u00e9geredm\u00e9nyt, \u00e9rdemes a r\u00e9gi designra is vetni egy pillant\u00e1st, hogy k\u00f6nnyebben meg tudjuk \u00e1llap\u00edtani a v\u00e1ltoz\u00e1sokat:<\/p>\n\n\n\n

      A Velekey \u00c9kszervil\u00e1g r\u00e9gi megjelen\u00e9se<\/strong>
      G\u00f6rgess az ablakban, hogy a teljes oldalt \u00e1ttekinthesd!<\/em><\/p>\n\n\n\n