Milyen a jó weboldal? A több milliárd bevétellel rendelkező cégeken keresztül lehet ezt igazán jól bemutatni. Mi szerepel a weboldalukon? Hogyan használják a digitális marketinget, az online jelenlétet? Ehhez készítettünk egy körképet, elemzést. Csak úgy szállingózni fognak neked is az ötletek.

Apropó! Ez a cikk annak a pozitívabb változata, mint amikor azt vadásztuk, hogy melyik cégnek gyatra a weboldala, pedig óriási vállalkozás. Ott láttuk, hogy rövid időn belül a legtöbb cég a cikkünk hatására megváltoztatta a weboldalát. De a Rába példáján is látjuk, hogy nemzetközi piacon már érezhető a hatása a gyenge digitális jelenlétnek.
A cikksorozat korábbi részei:

• Milliárdos cégek változtatták meg a weboldalaikat a Minner miatt?! Videoton, Alföldi tej…
• A Rába óriási lehetőség előtt áll. A weboldalát kellene fejlesztenie. Kell-e egy ilyen nagy…

Összefogott a Minner és a Billingo, hogy a digitalizáció igazán kézzelfogható legyen egy magyar vállalkozás számára. Legyél Te is innovátor! Használd a digitális megoldásokat! Mutatjuk, hogyan kell. 

Weboldal mustra – Milyen a jó weboldal?

Alapok:

• Az érintett weboldalak mind rendelkezik SSL tanúsítvánnyal. Tehát a weboldalak, domainjeik rendelkeznek biztonsági tanúsítvánnyal. Egyre nagyobb probléma, ha ez nincs rendbe téve a weboldalnál, hátrébb sorolhatja a Google, vagy rosszul jelenik meg a weboldal a látogatók előtt, sőt odaírja a böngésző, hogy az oldal nem biztonságos. Ha van SSL akkor ez a veszély nem fenyeget minket.
• A weboldalak mobilról jól betöltődnek, minden látszik, nem csúszik össze a weboldalakon a szöveg, a kép, könnyű navigálni. Ezt hívjuk reszponzív weboldalnak.
• Weboldal látogatottság becsléséhez a Similarweb adott támpontot számunkra. Ha az ő adatbázisukban van adat, akkor azt is jelenti, hogy tényleg van látogatószáma az oldalnak.
• Olvasd el figyelmesen az elemzéseket, mert közben beszúrok statisztikákat, kutatásokat is! Így kellő összképed lehet, hogy neked milyen legyen a weboldalad.

Ilyen kiemeléssel jelzem a fontos tényezőket, információkat.

Umbroll – Terasztetők, árnyékolás

• Cég neve: ROLL-LAMELL Árnyékolástechnikai Kft. , márkaneve: Umbroll
• Cég weboldala: umbroll.hu
• Utolsó éves árbevétel (nettó): 1,7 milliárd forint
• Weboldal látogatottság:
  • 17-25 000 látogatás/hónap
  • Átlagos oldalon töltött idő: 2 perc felett
  • Átlagos oldalmegtekintés látogatásonként: 4,27
  • Látogatottság forrása:
    
    Direct= bepötyögte a látogató, hogy umbroll.hu
    Email = e-mailből jött a látogató a weboldalra
    Referrals = másik weboldalon lévő linkről
    Social = Facebook, Youtube
    Organic search = Google kereső (tudod ez akár a keresőoptimalizálás eredménye)
    Paid search = Google Ads hirdetés
    (ezt a magyarázatot később nem írom oda a többi elemzéshez)
    
• Slider-t használ?: Igen (vagyis itt a felső részen egy videót látunk).
• Videót használ a weboldalán? Igen
• Van-e CTA gomb a weboldalán (pl. vásárlás gomb / időpont kérés gomb…), aloldalain: Igen

Részletesebben a weboldal elemzés, kiemelve a fő részeket

Nem fotózom ide ki az egészet, mert vagy 12 mega lenne egy ilyen teljes kép a weboldalról és sok idő lenne, míg betölt az oldal, nem beszélve arról, hogy úgy aztán tényleg 8 órán át olvasnád ezt a tartalmat.

A főoldalon a slider náluk valójában egy videó (Umbroll kép 1). A videó annyira interaktív, hogy egészen biztosan a bűvös 8 másodpercet a legtöbb látogatónál abszolválják, vagyis elérik, hogy ennyi időt ott legyenek a weboldalon. Ha ezt sikerül elérni, akkor nagyobb az esély, hogy tovább marad a látogató. A videó azért jó, mert az EyeWideDigital kutatásából kiderült, hogy 86%-kal növelhető a konverziók / vásárlók száma, ha videót használsz az oldaladon, főleg a termékoldaladon, vagy szolgáltatásod leírásánál, vagy promóciós oldalaidon. Miért is van ez? Van mire kattintani, elindul, elég látványos is. Az emberek szeretik, ha csak hátradőlnek, továbbá az emberek az információk nagy részét vizuálisan dolgozzák fel legnagyobb mértékben (de majd ezt a kutatást lejjebb beszúrom, ez is érdekes), a figyelmet jobban elkapja.

A videó alatt egyből az aktuális kampányajánlatuk található (Umbroll kép 2). Ami ebben az esetben az Otthonfelújítási programra felfűzött üzenet. A sikeres cégek az aktuális kampányukat, fő üzenetüket teszik ki a főoldaluk slider-ébe, vagy második képernyőjére. Második képernyő az, amikor legörget valaki és ott a következő teljes képernyő. 2-4 havonta általában új ajánlattal, kampánnyal állnak elő a cégek. Ami itt kulcsfontosságú tényező az Érdekel gomb, vagyis CTA gomb (call to action). Ezekkel tudod navigálni a látogatót, ezek megléte növeli az érdeklődők, vásárlók számát, és úgy összességében a konverziót.

Konverzió: A weboldalad célja. Határozd meg, hogy a látogató a weboldaladon mit hajthat végre, az lesz a konverzió. Például vásárlás, érdeklődő űrlap kitöltése, ajánlatkérés, videó megnézése, hírlevél feliratkozás, Google térképre navigálás, telefonhívás indítás… Átlagos konverzió 2%, vagyis 100 látogatóból 2 hajt végre valamit az oldalunkon. Ez növelhető!

Nem akarok minden információt ellőni egy cégnél, így majd olvasd el a többit is. Izgalmas!

Mire fókuszálnak? A cégek többsége nem meri meglépni azt, hogy a főoldalán az aktuális kiemelt termékét promózza, vagy éppen nincs is ilyen nála. Ezért mindent is rátesz a weboldalra. Az Umbroll főoldalán láthatóan a terasztető (pergola) van főleg kiemelve. Tudtad, hogy akkor is fogy szinte az összes terméked, ha közben csak egyet, vagy kettőt emelsz ki, vagy azokra kampányolsz?

A főoldal további elemei segítenek eligazodni az oldalon, vagy olyan dolgok vannak benne, amit a menüből például nem érhetsz el. A célod mindig az legyen, hogy segítsd a látogatót abban, hogy megtaláljon mindent. És természetesen annak eredménye lesz az, hogy konverziót érsz el a weboldalon.

A menü: A mobilmenüt fotóztam ki, hogy igazán lássunk mindent. Az elrendezés szuper. Javasolni szoktuk, hogy egy menüpontba (ami lehet lenyíló is) kerüljenek bele a fő termék -/ szolgáltatáskategóriák, de akár a fő termék is. Itt például segítheti a vevőszerzést, ha a terasztető / pergola felkerülne a menübe a Termékek menüpontba közvetlenül az első vonalba.
A kapcsolat menüpontot tapasztalataink szerint nem szükséges a menübe tenni, mert a felhasználók már rutinból az oldal alján keresik. DE! Ilyen cégnél, ahol vannak partnerek, több helyen elérhető a termékük, nekik azért érdemes odatenni.

Ha jól megnézed, a főoldalon található gombok, linkek és a menü meghatározza azt is, hogy a felhasználó első körben merre mehet, utána az aloldalaké a főszerep.

A cél: a konverzió!

Aloldalak: Készítettek külön a termékkategóriáknak egy csempés elrendezésű oldalt, ahol ahogyan a menüből is, már a végső termékhez juthatunk.

Az alábbi képen (Umbroll kép 4. – alul) egy termékoldalt láthatsz. A menü alatt egy navigációs sáv található, ami hasznos akkor, ha mélyebb a weboldalunk (értsd aloldalak további aloldalakba kapcsolódnak). Szuper a nyitókép, van felhívás (Ha kellemesre vált az időjárás… szövegre gondolok), van CTA gomb, és tartalmas oldal. Ami még segíthet:

• emberi arc az oldalon,
• csak egy CTA gomb használata javasolt az aloldalakon, termékoldalakon, promóciós oldalakon, landing page-eken. (itt kettő van).
• További termék- / szolgáltatás aloldalt javító tippek, sőt weboldal stratégia ötletek a MinnerAkadémia Átfogó marketing képzésében.

A footer, vagyis az oldal alja – plusz eszköz a felhasználók navigálására.

A footer egy újabb eszköz, hogy segítsük a felhasználót a weboldalunkon való navigációban. Ide kerülhet például:

• ahogy az Umbroll esetében látod a menüpontok, főbb termék / szolgáltatás linkek elhelyezése,
• hírlevél feliratkozás,
• kapcsolati adatok, vagy akár térkép is. Ha térképet használsz, legyen ott kiírva is a cím úgy, hogy azt másolni tudják. Ha telefonszámot adsz meg, szintén másolható legyen, ne használj / jelet!!!
• közösségi média ikonok, beágyazások
• és persze a szokásos elemek, mint az ÁSZF link, adatvédelmi tájékoztató linkje.
• Igen, ezeket vegyítheted, attól függ, mi a célod.

És ahogy ezt leírtam, a Minner footerét is egy kicsit módosítottam.

Manna – szappanok, bőrápolók krémek

• Cég neve: Manna Natúr Kozmetikum Európa Zrt., Márkaneve: Manna
• Cég weboldala: Manna.hu
• Utolsó éves árbevétel (nettó): 2,1 milliárd forint
• Weboldal látogatottság:
  • 75 -100 000 látogatás/hónap
  • Átlagos oldalon töltött idő: 4 perc felett
  • Átlagos oldalmegtekintés látogatásonként: 5,02
  • Látogatottság forrása: Láthatóan náluk sok a visszatérő látogató, vásárló (persze az első példánál érthetően kevesebb), ezt a direct forgalomból látjuk.
    
• Slider-t használ?: Igen, méghozzá az Amazon.com-hoz hasonlóan szűkebb slidert
• Videót használ a weboldalán? Igen, a termékeknél, a termékoldalaknál (promóciós oldalakon)
• Van-e CTA gomb a weboldalán (pl. vásárlás gomb / időpont kérés gomb…), aloldalain: Igen

Részletesebben a weboldal elemzés, kiemelve a fő részeket:

Gondolnád, hogy ez egy webshop? Nem az a tipikus webáruház főoldal, ahol tele van szórva a termékekkel az oldal. Igaz? Engem beszippantott! Csillagos ötös szakértői szemmel is.

A főoldal egy slider-rel indul, ami 5 elemből áll és automatikusan váltakozik a feltöltött sliderekkel, kép + szöveg. (Manna kép 1. – felül). Itt amit kiemelnék, hogy nem a teljes képernyőt teríti be, hanem szűkebb. Ez még lehetne egyébként szűkebb is, ahogy az Amazon-nál látjuk. Itt a Manna is az aktuális ajánlatait mutatja, ezeket reklámozza a közösségi médiában, hírlevélben, egyéb marketing csatornákon, tudod, amire kampányolsz éppen, az kerül az oldal felső részébe, mert azt keresik.

A következő részen egyből találkozunk az első felhívásgombbal, CTA-val.

A Manna második képernyője egyből egy felhívással (Manna kép 2. felül.), és a vevők fő problémájával, igényével indul. Itt első, amit kiemelnék a Lássunk neki! gomb. A felhívásgombok segítik a weboldalon való navigációt, a konverziót. Az ilyen „beszédes” gombok pedig még növelik is azt, hogy rákattintsanak. A cégek egyik marketing eszköze, hogy valamilyen kalkulátort, tesztet, vagy az Umbroll esetében kiterjesztett valóságos megoldást ad a felhasználók kezébe. Ez a Manna esetében a bőrtípusteszt, de láthatunk például a Triumph esetében a melltartókhoz kapcsolódó méretkalkulátort, vagy napelemes cégeknél napelemkalkulátort.

Egy eltérő színű háttérrel jól elválasztva ismét az aktuális ajánlatokat látjuk (még mindig a Manna kép 2-n vagyunk).

Rengeteg terméke van a Manna-nak, de mégsem tehet mindent ki.

A weboldalad célja mindig az, hogy konverziót érj el, ehhez viszont jól kell irányítani az embereket. A Manna főoldalán az ajánlatok alatt jól látható, hogy olyan részt tettek fel, ami már a vásárlói rutinból alakult ki (Manna kép 3 – felül). Nagyon nehéz megállni, hogy ne pakoljunk ki mindent, pedig így lehet a legtöbb információt átadni. Kicsit mintha ellentétes lenne, de itt ez alatt azt értem, hogy nem kell belemenni a részletekbe.

A felső és alsó képen azt látod, hogy a Manna ügyesen használja a piktogramokat. Ez segíti a felhasználóknál az információk gyorsabb megértését.

A Pearson Prentice Hall kutatásából kiderült, hogy az emberek 65%-a az információkat csak akkor tudja teljesen feldolgozni, ha az vizualizálva is van. Ha csak hanggal, vagy csak szöveggel van, az emberek figyelme hamar lankad, elkalandozik, vagy üveges tekintettel bár nézik az információt, agyuk nem fog fel semmit. Hm… Vajon a fenti szöveget, vagy az alábbi képet nézted meg először!

Használj te is piktogramot, ábrát, képet, videót a weboldaladon! Nem csak tovább marad a látogató az oldaladon, de segíti az információ befogadását, sőt megmaradását.

A menü: A fenti ábrán a számoknál (Manna kép 5.) azt látod, hogy a Manna.hu két menüsávot használ. Az 1-est szokták top menünek hívni (a képen az van a weboldalon legfelül), ami egyébként mobilon nem is mindig jelenik meg, a 2 a főmenü, az a megszokott, vagyis hagyományos menü. A top menübe kerül általában a bejelentkezés gomb, inkább odateszik a kapcsolat menüpontot, vagy plusz egy főoldal menüpont (ahogy a Minnernél is van). A Manna esetében például így jó döntés volt a bejelentkezés és a kapcsolat menüpontot feltenni. DE ahogy látjuk a Header részbe – ahol a logó található – tették a keresőt, gyakori kérdéseket, és a Kosarat, vagyis kihasználják a rendelkezésre álló helyet. És itt jön a csavar az egészben! Más elrendezésű és tartalmú a menü mobilon és desktopon (számítógép, laptop).
Így néz ki:

Fontos információ, hogy a blog ott van a top menüben, ami sokat jelent a Google keresőoptimalizálásban, vagyis a Google rangsorolásnál. A Google amikor pásztázza az oldalakat értelemszerűen megnézi a menüben lévő linkeket is, feliratokat. A kereső látja a blog szót, ami azért erősíti a találati listában a helyezésünket, mert a blog egyet jelent azt aktívabb oldallal. Megéri blogolni, de nem csak emiatt, hanem a bejegyzések miatt még nagyobb eséllyel rálelnek a weboldalunkra az emberek, továbbá a tartalmakat meg tudjuk osztani közösségi médiában, vagy éppen azt hirdetni (ez még olcsóbb is, mintha terméket hirdetnél).

A főmenüben a Manna honlapján a főbb kategóriák láthatók, egyébként ha belekattintunk, akkor láthatjuk, hogy még mélyebben is vannak alkategóriák, sőt rengeteg van.

Aloldalak, termékoldalak: Láthatóan jól használják az ábrákat, piktogramokat, infografikákat. Na, de menjünk mélyebbre a kép alatt!

Látod, nekik is van ilyen navigációs sávjuk (Manna kép 7 felül), vagyis ahogy ők írják Itt vagy most. A CTA gombok itt a kosárba helyezés, és itt egészen biztos vagyok benne, letesztelték, hogy gombon legyen a darab kiválasztás, és úgy több a vásárlás. Tudod, nem legördülőből választod ki, előre megadják a darabszámokat. Ügyes! Egyből fent is látod az ún social proof eszközt, ami itt az értékelések (látod a csillagokat).
A/B teszttel lehet eldönteni, hogy például egy megoldás, változtatás jobb eredményt hoz-e, érdemes ezt tesztelni (Teszt eszközök: Hotjar, Google Analytics).

A fenti szövegnek a duplája látható leírásban (csak nem fotóztam ki) ezen a termékoldalon, láthatóan bő lére eresztették a leírást. A Marketingexperiments kutatása alapján a hosszabb promóciós oldalak 220%-kal is növelik a konverziós rátát. Igen ez már volt feljebb is! Nos ennek az oka, hogy ha van elég tartalom, akkor lehetőséged van betalálni pont az egyes embereknél abba, ami érdekelheti őket, ami megfogja őket. Vevőt akarunk, ebben az esetben a vásárlást, a konverziót. Nos ezek nem trükkök, hanem pusztán a vásárló továbbmegy, ha nem talál elég információt, vagy nem elég vonzó a termék. Ha nem igényel több leírást, akkor egyébként is megy és vásárol, nem az ilyen gyors vásárlókkal kell foglalkoznod!

Na, de a sok szöveg után jönnek az újabb vizuális elemek. Először is egy videó, aztán sok piktrogram, kép, ábra:

Majd ezután izgalmas ábrák, képek

Ilyen egy igazi termékoldal!

Terjedelmes, van rajta vélemény, értékelés, ábra, bővebb leírás, piktogram, többféle kép, és persze videó. Ezek mind növelik az oldalon töltött átlagidőt, továbbá a későbbi vásárlás valószínűségét is.

Miért kell ábra? Ebben a videóban elmagyarázom

Manna mobilnézete még rejteget egy két fontos dolgot:

A felső slidert megbontották több részre, egymás alá tették a kártyákat, és kaptak egy tovább gombot (lásd fenti képek). Utána a bőrtípusteszt, és alatta ami érdekes, lapozhatók a további főbb ajánlatok és nem egymás alatt vannak. Mobilon még fontosabb a helytakarékosság, és hogy próbáljunk minél több változatos dolgot a fogyasztók elé tenni.

Mielőtt rátérnék a 3. weboldal elemzésére. Ezek biztos felmerültek benned.

• Egyrészt milyen weboldalad legyen? Egyedi fejlesztésű vagy jó például a WordPress? Ehhez kapcsolódóan itt találsz egy jó útmutatót: Útmutató weboldal létrehozásához, weboldal készítéshez
• Ott a weboldal, de közben ki kellene találnom a teljes online stratégiát, marketinget. Ebben segít ez a képzés, tele példával, tippel: Átfogó marketing online képzés. Alapok + haladó

Kite Zrt – a mezőgazdasági innovátor, mezőgazdasági eszközök

A cég azért érdekes, mert ritkán látunk például mezőgazdasággal foglalkozó cégnél digitális jelenlétet. A Kite Zrt. többször is úgy utal magára, mint innovátor. És ezt bizony a digitális jelenléttel is mutatja.

• Cég neve: Kite Zrt.
• Cég weboldala: Kite.hu
• Utolsó éves árbevétel (nettó): 301 milliárd forint
• Weboldal látogatottság:
  • 60 000 látogatás/hónap
  • Átlagos oldalon töltött idő: 9 perc felett – Khm,khm, megéri ezzel a digitalizációval foglalkozni?
  • Átlagos oldalmegtekintés látogatásonként: 6,03
  • Látogatottság forrása: Ilyen nagy látogatottság mellett látni, hogy az 54%-a bepötyögi a kite.hu oldalt, sikeresen kikerekíti még a szakértői szemeket is.
    
• Slider-t használ?: Nem, borítóképet használ.
• Videót használ a weboldalán? Igen, több helyen is látni videót. Most éppen egyből a főoldalon egy popupban.
• Van-e CTA gomb a weboldalán (pl. vásárlás gomb / időpont kérés gomb…), aloldalain: Igen

Részletesebben a weboldal elemzés, kiemelve a fő részeket:

Az oldal nem slider-t, hanem egy fix képet használ a főoldalon. Egyébként ilyen sűrű látogatottságnál, a sok visszatérő látogató miatt érdemes lenne vagy slider-t használni, vagy időnként változtatni a felső képet (Kite kép 1.)

Tudástár, blog:

Nagyon aktív a blogbejegyzések írásában a Kite, amit ő a Tudástár nevű részbe tesz. Látható, hogy feljebb helyezkedik el az a weboldalon, a látogatókat erre is terelik.

Aztán észrevettem egy nagyon jó részt a főoldalon:

A Kite 3. képén egy nagyon jó példa arra, hogy sok olyan információt érdemes leírni, amit bár lehet tud a fogyasztó, de pont ettől kapjuk el a figyelmét és érzi magát kényelmesen a weboldalon. Itt nem töltelék szövegekről van szó, sőt ahogy látod majd a főoldalon ezt látványosan, interaktívra meg is oldják.

Na, de hol is vannak főoldalon a termékek? Szolgáltatások?

Eléggé lent! Most következik!

De ezt a helytakarékos információátadást még tovább viszik a főoldalon. Lapfüleken keresztül láthatod a teljes palettát, amivel foglalkoznak. Természetesen mindezt piktogramok és képek társaságában teszik, ezt látod a Kite kép 4-en, a szöveg alatt.

A láblécet, vagyis a footer-t, már le sem írom, ahogy feljebb is volt rá példa, egy szinte oldaltérkép szerű linkelés van rajta. Na jó mégis beteszem, mert jó példa (alul a Kite kép 5.).

A menü: Na mit látsz az alábbi képen? Igen! A top menü, ami a másik menü felett van. Ide került a cím, telefonszám (jól kiírva, kimásolhatóan), a kapcsolat menüpont, a kereső. A főmenü esetében egy kicsit nagy rész nyílik meg, az lehet kicsit túlzás. Bár igaz, hogy megkönnyíti a navigációt. Ilyen esetben A/B tesztelni kell a látogatókat, és megnézni, hogy mennyivel változott az átkattintás a többi verzió esetében (ehhez eszköz pl. Hotjar, és UTM paraméterek a linkeknél, Google Analytics). Például itt letesztelni így, ahogy a képen van, utána pedig levenni a „Milyen növényekhez keres képet részt„. Majd összevetni a hatékonyságot, kattintások számát, vagy éppen a végső konverziót.

Kampányok? A fenti példákkal ellentétben nem a slide-rre, hanem a Hírek menüpontba teszi be a cég az aktuális ajánlatait, továbbá mivel eléggé szezonális termékeket értékesít, így az esetükben talán még könnyebben is tudják ezt tálalni.

Aloldalak

Ha rákattintunk egy linkre a menüben, például traktorokra, akkor egy fő kategória oldalra csöppenünk. Ez is egy opció lehet, hogy nem a termékoldalra gyúrunk rá, hanem adott esetben a kategória oldalt készítjük el minél jobban.
Van slider, jó kis szűrési feltételek, CTA gomb, képek. És mi még? Hát a navigációs sáv a menü alatt, vagyis, hogy éppen hol járunk.

Ez hosszú volt! De milyen tartalmas!

Egy cikkbe bele akartam tenni 10 ilyen elemzést is, de az már kész könyv lenne, így egy újabb cikkbe fogok újabb 3-at elemezni, picit más dolgokat kutatunk bennük majd. De egyébként ezt a cikket is frissítem még, érdemes visszanézned néhány nap múlva.

Ha nagyon rápörögtél és van még benned szusz, akkor az alábbiakra menj tovább (vagy gyere vissza később):

Itt a 2. rész további példákkal:
2. rész: Milliárdos forgalmuk van. Mit csinálnak online?

Képzés ezzel kapcsolatban:

• Átfogó marketing online képzés. Alapok + haladó
• Útmutató weboldal létrehozásához, weboldal készítéshez
• Hogyan lehet olcsóbb a marketinged. Vagyis kevesebb pénzből több vevőd?

A Billingo a Digitális Ninja rovat támogatásával is sokat segített, hogy kiaknázd a digitalizációban rejlő lehetőségeket. Ha már rákanyarodtál erre az útra, ne állj meg – nézz körül Billingo digitális megoldásai között, és kezdd el őket használni! Digitalizációra, innovációra fel! Kattints ide!

Fotó: KOBU Agency / Unsplash
Forrás, vagyis kutatások: EyeWideDigital – videók növelik a konverziót,
Pearson Prentice Hall – a vizuális elemek növelik az információ feldolgozást
Marketingexperiments – több szöveg, magasabb konverzió