A konverzió általános értelemben átalakítást, átváltoztatást jelent. Így, amint a képen is látható, beszélünk egy „A” (változás előtti) és egy „B” (változás utáni) állapotról. A két állapot között végbemenő folyamat, a valamilyen változást előidéző esemény bekövetkezése maga a konverzió.

Miért érdekes a konverzió?

Önmagában semmit nem ér. Viszont, ha a konverzió valamilyen céllal következik be, valamint nyomon követhető, mérhető, elemezhető, és így fejleszthető is, akkor ismerete kulcs az eredményességhez!

Nézzünk néhány példát!

Tipikus konverziós cél lehet, hogy honlapunk látogatója feliratkozzon a hírlevelünkre (egyszeri látogatóból rendszeres olvasóvá váljon), árajánlatot kérjen vagy megrendelje termékünket.

Hogyan néz ki ezekben az esetekben az „A” és a „B” állapot?

A konverziós ráta egy adott időszakra vonatkozóan megmutatja, hogy a „B” státuszra váltók száma hogyan aránylik az „A” státuszt elérők számához.

Az „A” állapotot elérőkről (példáinkban a honlap látogatóiról) rendelkezhetünk több információval is. Többek között tudhatjuk, hogy honnan, milyen hirdetésen keresztül, mikor érkeztek a honlapunkra, és így még izgalmasabbá válik a konverzió elemzése.

Kimutathatjuk, hogy hol, mikor, milyen költségek mellett érdemes hirdetnünk, és hogy mennyibe kerül egy látogatónál a „B” állapot elérése.

Például: egy 50 Ft/kattintás díjú hirdetés és 5%-os konverziós ráta mellett 1000 Ft-ba kerülne, hogy egyetlen egy vásárlóhoz eljussunk. (100/5×50=1000)

Mi a teendő?

Először is honlapja rendelkezzen legalább egy konverziós céllal!
A honlapjához több konverziós célt is kitalálhat, illetve a konverziós célokat feloszthatja részcélokra. Lényeg, hogy legalább a tevékenységéhez legfontosabb konverziót elkezdje mérni.

Vizsgálja céljai teljesülését! Vizsgálja a konverziót!
Nézzen a mért számok mögé, gondolja át az ok-okozati összefüggéseket! Tévedni jobb, mint tétlenül várni a sült galambot.

Időről időre optimalizáljon!
A Világ körülöttünk folyamatosan változik, optimális megoldás csak adott pillanatban létezik. Így a tökéletes megoldást, ha nem is érjük el, folyamatosan törekedhetünk rá. Javíthatjuk a konverziós rátát, növelhetjük a látogatószámot, elhagyhatjuk a gazdaságtalanul teljesítő hirdetéseket.

A konverzió elemzésével jobbá teheti szolgáltatását, eredményesebbé tevékenységét.
Meggyőztem? Ha igen, kérem, kattintson a „Tetszik” gombra!

Jelenleg a profilképe vidám, komoly, személyes, esetleg hivatalos hangulatú?

Mit gondol, mi jut eszébe a képről annak, aki először látja? Amennyiben a profilképét feldobná, olvassa el tippjeink!

A profilkép mérete

Jelenleg a Facebook egy legfeljebb 200 pixel széles és 600 pixel magas, hosszúkás téglalap felületet biztosít profilképünkhöz.
Sokan az ebben a méretben rejlő előnyöket nem ismerik, és egy fekvő formátumú, 4:3 oldalarányú fényképet töltenek fel. A fekvő, 4:3 oldalarányú fényképet a Facebook 200×150 pixel méretűre kicsinyíti, ami meglehetősen szerény méret, pláne, ha teljes alakos fényképről van szó.
Nagyobb méretű, részletgazdagabb profilképhez használjunk négyzet alakú kivágást vagy álló formátumot!

Miniatűr (Bélyegkép)

A feltöltött profilképből készül egy 50×50 pixel méretű miniatűr, amely – többek között – a hírfolyamban, az üzenőfalon, a hozzászólásainknál jelenik meg.
Ha a profilkép feltöltésekor a képkivágást a Facebook-ra bíztuk, és az nem lett túl szerencsés, lehetőségünk van módosítani. Ehhez menjünk a Facebook oldalunkra (a miniatűrünkre vagy az „Adatlap” menüpontra kattintással, vagy ha céges oldalról van szó, a Profilom – Oldalak kezelése menüpontokon keresztül), és húzzuk az egeret profilképünkre. Kattintsunk a megjelenő „Kép lecserélése” gombra, majd válasszuk a „Bélyegkép szerkesztése” lehetőséget. A felugró ablakban, ha a miniatűr fölé húzzuk az egeret és lenyomjuk, majd lenyomva tartjuk annak bal gombját, akkor az egér mozgatásával beállíthatjuk a kívánt képkivágást.

Kreatív megoldások

	Facebook oldalon a profilkép teteje világos kékesszürke, további része fehér háttér elé kerül. A két színt ráadásképp egy kontúrvonallal el is választották. Alakítsuk úgy a képünket, hogy a háttér előnnyé váljon! Először is olvadjunk bele!
	Profilképünk háttere legyen azonos a Facebook hátterével. Ezt előkészítettük Önnek, itt letölthet egy 200×600 pixel méretű gif fájlt.
Majd a hátteret…
	…használjuk fel! A Facebook háttérszíneit elválasztó kontúrvonalat profilképünkben használhatjuk horizontként, egy fal tetejeként, vagy bármi másként, ami csak eszünkbe jut.
	…alakítsuk át! A két háttérszín között elhelyezkedő vonalat át is alakíthatjuk. Az egyenes vonal helyett íveket, sziluetteket rajzolhatunk.
	…tegyük térbelivé! Árnyékolással, térbeli ábrázolással a háttér síkjából ki is szakadhatunk.

Képszerkesztő-bűvölés nélkül

Ha képek szerkesztésében még nem rendelkezik tapasztalattal, akkor se essen kétségbe. Az alább található linkkel olyan oldalra jut, amivel könnyedén kivághatja kedvenc fényképéből az ideális méretű profilképét.

Képek vágásához: mypictr

A lényeg a részletekben rejlik: apró változtatásokkal a weboldal eredményessége növelhető.

Milyen a könnyen használható, figyelemirányító megjelenés?
Erre a kérdésre ne saját magától várjon választ, hanem tudja meg a látogatóktól!
Megmutatjuk, hogy az A/B teszttel ezt hogyan teheti meg.

Az A/B teszttel megtudhatja, hogy két vagy több csupán egyetlen egy részletben eltérő, vagy teljesen különböző felépítésű, de azonos célú weboldal közül melyik az eredményesebb.

Megvalósítás

1. A fejleszteni kívánt és konverziós céllal rendelkező oldalának (pl.: érkeztető oldalának vagy értékesítési oldalának) készítse el két változatát!
   (Egy eredeti változat és egy módosított változat elegendő.)
   A két változat lehet csupán egyetlen egy grafikai elemben, színeiben, felépítésében, betűméreteiben vagy szövegezésében (akár csak egyetlen egy szóban) eltérő.
2. A Google Webhely-optimalizáló eszköze a weboldal különböző változatait jeleníti majd meg egy-egy látogatójának. A konverzió értékelésével megtudható, melyik változat teljesít jobban.
3. Amennyiben még nincs Google fiókja, regisztráljon a szolgáltatás igénybevételéhez a google.com/websiteoptimizer oldalon. Regisztrációhoz kattintson a „Start testing now” feliratú gombra.
   Amennyiben már rendelkezik Google fiókkal, lépjen be ugyanitt.
4. Kattintson a „Create a new experiment” linkre, majd válassza az „A/B Experiment – The simplest way to start testing fast” lehetőséget.
5. Ezt követően kap egy ellenőrző listát:
   1. Kiválasztotta az oldalt, amit tesztelni kíván?
   2. Elkészítette az oldal legalább egy eltérő változatát?
   3. Rendelkezik konverziós oldallal? (Az az oldal, ahova a látogató a konverziót követően kerül. Például, ahol megköszöni a megrendelését, vagy, hogy feliratkozott hírlevelére.)
   Ha mindegyik kérdésre igennel válaszolt, pipálja ki a jelölőnégyzetet az „I’ve comleted the steps…” szöveg előtt, és kattintson a „Create” gombra.
6. Adja meg a teszt nevét, rögzítse a tesztelni kívánt oldal URL-jét, az oldal legalább egy változatának és a konverziós oldalnak az URL-jét, majd kattintson a „Continue” gombra.
7. A következő oldalon válassza a „You will install and validate the JavaScript tags” opciót, majd ismét kattintson a „Continue” gombra.
8. Kap 4 kódot.
   Az első kódot illessze be a tesztelni kívánt eredeti oldal elejére. A másodikat úgyszintén ebbe a fájlba, csak a végére. A harmadik kód a tesztelni kívánt oldal változatának végére kerüljön, a negyedik a konverziós oldal végére.
9. A „Validate pages” gombbal ellenőrizze, vajon minden a helyére került-e! Amennyiben igen, a „Continue” gombbal folytassa!
10. Az összefoglaló oldal áttekintését követően a „Start Experiment” gombbal indíthatja a tesztelést.

Hamarosan kapja is az eredményeket!

Hogy a lehető legrövidebb idő alatt saját tapasztalatot szerezhessen, készítettünk minta fájlokat.
Kattintson ide a letöltéshez!

A mintául szolgáló A/B tesztet itt tekintheti meg: http://milu.hu/mdp/ab-test/
Teszteljük, hogy a zöld vagy a sárga gombra kattintanak-e többen…

Amit eddig – némi html és php tudás birtokában – a sablon kódjának szerkesztésével tehettük meg, most már csak néhány kattintás! Feltéve, hogy a sablonunk támogatja ezt a funkciót…

Amennyiben élni kívánunk a lehetőséggel, két választásunk van: vagy használunk kifejezetten WordPress 3-hoz készített sablont, vagy korábbi sablonunkat alkalmassá tesszük e funkció működtetésére.

A menük kezelése

A WordPress adminisztrációs felületén kattintsunk a Megjelenés – Menük menüpontra! Ha ezt tettük, két oszlopba rendezett dobozokat (paneleket) látunk. A bal oszlopban kiválaszthatjuk az éppen aktív menü helyét a weboldalon, a „Saját linkek”, „Oldal” és „Kategóriák” panellel menüpontokat adhatunk a menükhöz. A jobb oszlopban található panel a menük létrehozását, törlését, és a menüpontok sorrendjének, struktúrájának meghatározását teszi lehetővé.

Lényeges, hogy több menüt is létrehozhatunk, és hogy a menüpontokat strukturálhatjuk, azaz igény esetén készíthetünk almenüpontokat is.

Hogyan használhatjuk ezt a funkciót a WordPress 3 megjelenése előtt készített sablonunkkal?

Csupán néhány sor kód elhelyezésére lesz szükségünk.

1. Először a function.php-ba illesszük be a következő kódot.

if ( function_exists( 'register_nav_menus' ) ) {
	register_nav_menus(
		array(
		  'a-menuhely' => 'A menühely megnevezése',
		  'b-menuhely' => 'B menühely megnevezése ',
		  'c-menuhely' => 'C menühely megnevezése '
		)
	);
}

(Értelemszerűen a menühelyek száma tetszés szerint növelhető/csökkenthető, és a menühelyek elnevezése is szabadon megválasztható.)

2. Ezt követően a sablonunkat (a header.php-t, a sidebar.php-t és/vagy a footer.php-t), a menük kívánt helyének függvényében, egészítsük ki az alábbi kóddal.

<?php wp_nav_menu('theme_location=a-menuhely'); ?>
...
<?php wp_nav_menu('theme_location=b-menuhely'); ?>
...
<?php wp_nav_menu('theme_location=c-menuhely'); ?>

3. A menüket építsük fel az adminisztrációs felületen, majd a CSS stíluslapon adjunk nekik igényes megjelenést.

Kész is vagyunk!

(Amennyiben a fenti leírást túl tömörnek találja, valahol elakad, ne habozzon, írjon egy e-mail-t!)

A színválasztással olyan érzelmi reakciót szeretnénk kiváltani, ami a látogatót aktiválja.

A megfelelő színek közvetítik a cég küldetését, erősítik az arculatot, a honlap célközönségét megérintik és irányítják a látogatók figyelmét. Azaz a színek sokkal nagyobb jelentőséggel bírnak, mint azt elsőre gondolnánk.

Előkészületek

A színek kiválasztása előtt mindenképp tegyük fel a következő kérdéseket:

• Kiket, milyen jellemzőkkel bíró célcsoportot szeretnénk megszólítani a honlapon?
• Milyen terméket, szolgáltatást kínálunk a honlapon?
• Mi a honlapunk célja?

A célközönség meghatározásával vizsgálhatjuk, hogy a célközönségünk fejében az egyes színek milyen jelentést, milyen érzelmi társításokat hordoznak. Szükségünk van erre, mert nemenként, korcsoportonként, társadalmi és kulturális környezetenként más és más benyomást kelthetünk ugyanazokkal a színekkel.
Mivel képernyőről olvasni kényelmetlenebb, mint papírról, a szövegháttér és a szöveg színével kapcsolatban a jó olvashatóságot is kiemelt fontossággal kell kezelnünk.

Színválasztás

A színválasztás történhet jó érzékkel, ösztönösen vagy véletlenszerűen, sok-sok színvariáció hosszas próbálgatásával, vagy – hogy a dolgunkat módszeressé tegyük – némi színismeret segítségével is.

Mindannyian tapasztaltuk már, hogy a színek egymás mellett illetve egymás közelében kellemesen, kellemetlenül, esetlegesen közömbösen hatnak. Nem külön-külön, hanem adott környezetben együttesen hoznak életre egy hangulatot. Emiatt egy-egy szín egymástól független kiválasztása helyett, törekedjünk 4-5 egymással és a célközönség világával összhangban lévő szín megtalálására.

A színeknél – a zenéhez hasonlóan – harmóniáról vagy disszonanciáról beszélünk aszerint, hogy a színek egymás mellett miként hatnak. A harmónia az azonosságon, a hasonlóságon vagy a kontraszton alapul. Az ellentétes vagy inverz színek azonos mennyiségű jelenléte egyensúlyt teremt, valamint ezek a színpárosok hangsúlyossá teszik egymást.

A színek harmóniája helyett kivételes esetekben a disszonancia is célravezető lehet, azonban ezt most nem tárgyaljuk. Az érzékeltetés kedvéért viszont gondoljunk csak a komolyzenében vagy a jazz zenében hallható, feloldódó disszonanciák különleges hatására.

Hogy találjunk egymással harmonizáló 4-5 színt?

Hívjuk segítségül a 3 alapszínből, a hagyományos színelmélet szerint a pirosból, a kékből és a sárgából felépülő, a szivárvány színeit kör alakba rendező színkört! (Lásd ábrát!)

A színkörben egymással szemben elhelyezkedő színek a komplementer vagy kiegészítő színek.
A színkörbe ha rajzolunk egy átlót, egy egyenlő oldalú vagy egy egyenlő szárú háromszöget (esetleg egy téglalapot), akkor a csúcsok egymással harmonizáló színeket választanak ki számunkra. Azonban ezek a színek kizárólag kiinduló pontként szolgálnak, árnyalataik és szomszédos színeik közül válogatnunk kell, hogy elérjük a kívánt, ízléses megjelenést.

Háttér háttér hátán

A honlapnak szüksége lesz egy háttérszínre, ami lehetőleg legyen egy tompa szín. Sötétebb és világosabb tónusaival gyenge, hangsúly nélküli színátmenetet hozhatunk létre, valamit textúrával megtörhetjük az egyébként természetellenes, homogén jellegét.

Ebből a háttérből célszerű eltérő hattérrel kiemelnünk a fejlécet, a láblécet, esetleg a navigációt segítő, hirdetéseket, valamint egyéb funkcionális elemeket tartalmazó oldalsávot is. Minderre azért van szükség, hogy az ezekben a blokkokban található elemeket jól elkülönítsük a honlap valódi, az átadni kívánt üzenetet hordozó tartalmától.
Fontos, hogy a honlap látogatója számára már az első pillanatban érthető legyen, milyen honlapra került, ott miképp navigálhat.

A különböző blokkok, elemek színeinek kiválasztását követően korszerű megjelenést fények és árnyékok alkalmazásával, tükröződéssel és átlátszó felületek bevetésével érhetünk el.

3+1 szempont, amire különösen figyeljünk a színek kiválasztásakor

1. A honlap színe legyen összhangban a cég arculatának színeivel, a kínált termékkel vagy szolgáltatással. A színeket következetesen használjuk.
2. A dizájn színeinek az a célja, hogy a tartalom közvetítését, átadását élvezetessé tegye. Túl élénk, túl domináns háttérszínek megfojtják a tartalmat. A jó olvashatóság a legfontosabb!
3. Ne használjunk túl sok színt. A honlapnak legyen karakteres, jellemző színvilága. 4-5 szín (ebből 2 linkeknek), a fekete, a fehér és ezek árnyalatai maximálisan elegendőek.
4. A honlapot a látogatók különböző típusú monitorok képernyőjén fogják megtekinteni, amelyek a színek más és más megjelenítését produkálják. Meglepetések elkerülése céljából a honlap színösszeállítását érdemes több számítógépen is megtekintenünk.

Oldalak, amelyek segíthetnek a színválasztásban
(Nem döntenek helyettünk, és nem szolgálnak kész megoldásokkal! Számtalan lehetőséget viszont kiválóan megmutatnak.)

• Kuler
• Colorotate
• Colorspire