Egy honlap áttervezés története

(Ez a blogbejegyzés honlapunk 2013-as áttervezésének történetét meséli el. A Szerk.)

Az úgy indult, hogy az uram megtanulta, mi a programozási módja annak, hogy egy honlap egy gombnyomásra átszíneződjön, sőt, a betűtípusok és a fotók is kicserélődjenek rajta. Ez 2012. kora nyarán történt.

Mondhatnánk, hogy az ötletet tett követte, de nem. A honlaptervező akkor tud hozzányúlni a saját honlapjához, ha az ügyfeleknek készített munkák közé be tudja ütemezni – erre pedig szerencsére nem került sor, annyi munka volt.

Milyen legyen az új design?

Beleszerettem a lila színbe. Ennek aztán következményei is lettek: hetekig kerestem különféle lila “fotóalanyokat”, még az Ecserin is!

Mert hogy menet közben beindítottuk új szolgáltatásunkat is: elkészítjük a honlapra illő hangulatfotókat is. Több tucat lila-fotó készült, legalább 4 menetben. Tökéletes terep a gyakorlásra!

A színválasztás egy honlapon sosem véletlen: a lila színnek ugyanúgy üzenete van, mint a narancs-bordó párosításnak.

Csak a színeket átvariálni még nem lett volna akkora átalakulás – egyébként is csak azoknál történt volna meg, akik rákattintanak egy valamilyen “Színt váltok” feliratú gombra. Ennél sokkal fontosabbak voltak a honlapon kezdetek óta látható gyümölcsfotók, amibe eddig nem egy ügyfelünk szeretett bele, és emiatt keresett meg bennünket, hogy igényt tart a munkánkra. Hogyan alakuljunk át úgy, hogy a gyümölcsök is maradnak?

Az idő telt… beüzemeltük a hírlevelet

A hírlevél, mint funkció 2012. januárjától épült bele a honlapba, anélkül, hogy komolyabb terveink lettek volna vele. Amikor technikai problémák adódtak a kiküldéssel, nem is tekintettük elsődleges prioritásnak, hogy ezt megoldjuk – hamut szórok a fejemre.

2012. októberében, amikor tárhelyszolgáltató váltáson kezdtünk gondolkodni, az új tárhelyszolgáltató említette a MailChimp (Postásmajom) rendszert.

Onnantól kezdve elkezdtünk – egészen kevés szabadidőnkben – a hírlevél beállításokon dolgozni, amit karácsony előtt az első éles hírlevelünk kiküldése követett.

Újabb átvett ötlet: online chat

Az új tárhelyszolgáltató oldalán nagyon jól működő online chat volt a következő, amelyet kipróbáltunk. Egyelőre teszt jelleggel, az ingyenes – és ezért kevéssé testreszabható – verziót.

A szálak itt futottak össze: kiderült, hogy sokkal többen iratkoznának fel a hírlevélre, ha szembeötlőbb lenne a menüpont.

A chat másik üzenete

A csetelők kérdéseiből világossá vált, amit már sejtettünk: a látogatók számára nem egészen világos, hogy mi pontosan mivel is foglalkozunk.

Most írhatnám, hogy

Akkor telt be a pohár, amikor a Facebook számlázási problémáikkal minket kerestek meg…

de ez már jóval korábban megtörtént.

A következtetés: teljes átszervezés szükséges

Világos lett, hogy itt már nem apró változtatások azok, amik megoldják a helyzetet. És az is egyértelmű volt, hogy amekkora mértékű átalakítás szükséges, annak már nem szabad csak úgy nekiesni.

A honlap átalakítás első lépése: vizsgáljuk felül, korábbi hipotézisünk igazolható-e

Amikor a honlapot fejben megtervezzük, akkor azt döntjük el, mit szeretnénk hogy lásson a látogató, illetve megpróbáljuk segíteni az oldalon való navigálást.

A 2012. januárban publikált honlapszerkezet – többek között – két fő elemmel rendelkezett:

  1. hangsúlyozzuk ki infoanyagainkat, illetve a fő üzenetünket, miszerint mi marketing hátteret is teszünk honlapjaink mögé (“honlap+marketing” című oldaldoboz)
  2. segítsük címkékkel és címkefelhővel az oldalon belüli navigációt

Ahhoz, hogy megtudjuk, ez mennyire sikerült, először a Google Analytics webstatisztikát elemeztem.

A meghatározott oldalról más oldalakra kattintás arányát remekül mutatja a Google Analytics-ben a látogatók folyamata. Ez alapján látható volt, hogy

  • hiába tolok a látogató arcába oldaldobozokat és nagy MEGRENDELEM gombokat, ettől nem fognak vásárolni, ha ők információt keresnek
  • a címkék nagyon hasznos eszközök egy ilyen méretű honlapon

Vagyis: a durván értékesítési célú honlap nehézkesen lép házasságra a szakértői honlappal. Nem működik az innen átveszem ezt, onnan átveszem azt történet.

Ráadásként tegyük hozzá, hogy mi nem infoanyagok árusításából élünk, és nem is akarunk abból élni… Mi a folyamatos, személyre szabott kreatív alkotást szeretjük.:)

Hogy lássuk, mi is történik akkor, amikor egy látogató a honlapra látogat, hol hezitál, hová akarna kattintani, regisztráltam egy honlap hőtérképet előállító szolgáltatás, a ClickTale weboldalán. (Csak zárójelben: egészen meglepett, hogy már másnap felhívtak telefonon, hogy sikerült-e installálni a követőkódot. Mikor mondtam, hogy még nem, rögtön küldték a részletesebb leírást. A kapcsolatot azóta is tartják velem, pedig egyelőre még az ingyenes felhasználó kategóriában vagyunk. No kérem, így kell ezt csinálni, ha valaki erre az értékesítési modellre szavaz!)

Az egérmozgásos vizsgálatok sem okoztak túl nagy meglepetést, bár kétségtelen, hogy egy-két érdekes apróság azért kiderült.

A honlap áttervezés következő állomása: nézzünk körül a világban!

Ha már áttervezünk, célszerű körülnézni, mi most a honlapkészítési divat, hogy néznek ki a modern oldalak. Ízlés dolga, de mi mindig a britekhez megyünk világot látni. A nézelődés végén a következő tanulságokat szűrtem le:

  • ezek az angolok nem hülyék (ajánlott filmirodalom: Gyaloggalopp): látszik, hogy először a marketing üzenetet definiálják, erre ráépítik a honlapot, és ha kiderül valami hiba, nem utólag odabiggyesztett táblákkal, nyilakkal, bannerekkel szórakoznak, hanem áttervezik az oldalt
  • keveset mondanak először, de azt egyértelműen. Aki akar, mélyebbre áshat.
  • RENDKÍVÜL hangsúlyos az elérhetőség megjelenítése
  • a design ahhoz van igazítva, amit el akarnak adni, minden részletében

A nagy lépés: honlap optimalizálás mobilra

Úgy döntöttünk, ezt is megtanuljuk, és 2013-tól már minden honlapunkat így készítjük. Ez egyrészt a programozásban jelent másfajta megközelítést, másrészt a design-ben. Rögtön neki is ültünk, és már folyamatban lévő munkáinkat is ezzel a módszerrel készítettük/készítjük. (Az első fecske a www.medveczkykata.hu honlap lett, amelyet március közepén publikáltunk.)

Megvannak a következtetések: itt a teljes káosz…

A rengeteg következtetésből nem egy egyszerű kép rajzolódott ki, hanem az, hogy ezt is, azt is, amazt is rá kéne tenni a honlapra, a rögtön látható régióba, nagy betűkkel, miközben a szép gyümölcsfotóknak és egyebeknek is látszaniuk és érvényesülniük kell…

Nem lehet egyszerre… nagy betűkkel is írni és sok menüpontot is elhelyezni a menüsorban.

Megkérdeztük

Hogy még tisztábban lássuk, merre tovább, gondoltuk, megkérdezzük azokat, akik már használták a honlapunkat. Először egy olyan szolgáltatásra regisztráltam (i-perceptions a neve), amely felugró ablakban teszi fel a honlap használhatóságára vonatkozó kérdéseket – világszinten standard kérdésekkel és válaszokkal.

Azonban ez nem volt annyira testre szabható, amennyire én akartam.

Egy merész lépéssel létrehoztam a kérdőívet a saját honlapunkon.

Két csoporthoz fordultam: a Facebook rajongóinkhoz és a hírlevél feliratkozókhoz. Kértem, hogy segítsenek nekünk azzal, hogy kitöltik a kérdőívet.

Kérésem döbbenetes eredményt hozott annak felismerésében, hogy melyik csoporttól milyen aktivitás várható el: a Facebookon többször is közzétett kérésre egy ember reagált – a legalacsonyabb pontszámot adva az oldalnak, aminek ő egyébként “rajongója”… (Akinek ilyen rajongói vannak, annak nincs szüksége ellenségekre.)

A hírlevélben kiküldött linkre több mint 30-an kattintottak és töltötték ki a kérdőívet.

A marketinges levonta a tanulságot: ne tévesszen meg semmilyen hangzatos név, mint pl. “rajongó”. A lényeg ennél sokkal mélyebben van.

A kérdőív eredményei

Azt mondják, az emberek nem gondolkodnak és nem próbálnak meg következetesek lenni, ha kérdőívet tolunk eléjük. Ez bebizonyosodott jelen esetben is: sokan jelölték meg, hogy kicsik a betűk a menüsorban és nehezen lehet megtalálni bizonyos menüpontokat, de azt is mondták, hogy maradjon meg ez a struktúra, ezekkel a menüpont nevekkel…

Vagyis igazolódott a számomra, hogy itt most bizony döntést kell hozni: valamit előtérbe fogunk léptetni valami másnak a rovására.

És most már tudjuk: 1 év múlva felülvizsgáljuk, helyesen döntöttünk-e.

A legfőbb mutatószámunk az lesz, hogy hány megkeresést, hány árajánlatkérést fogunk kapni fő szolgáltatásunkra, a Google-ra és mobileszközökre optimalizált honlap tervezésére.

A design és a programozás

Nem könnyű egy nagy forgalmú honlap áttervezése úgy, hogy közben folyamatosan vannak látogatók, akik épp nézik az oldalt… A technikai megvalósítást kitalálni sem volt egyszerű, bár számos dolgot lehet a háttérben végezni.

A megoldás végül elég fájdalmas volt: egy másik tárhelyre kellett felépíteni a teljes honlapot, az összes szöveg átmásolásával és természetesen az új menüpontok szövegének megírásával.

A slide show (váltókép) és a gyümölcsök

Több napig tartó dilemma előtt álltunk: mit rakjunk a váltóképbe? Maradjunk a gyümölcsöknél vagy referenciáinkból mutassunk be néhányat. Hosszas tépelődés és számos vázlat feltöltése után végül maradtunk a gyümölcsöknél. Ehhez részben korábban már elkészített fotóimat használtuk fel, de újat is kellett fotózni – szerencsére az import eper már megjelent a boltokban. (Csodálatos volt, de gyakorlatilag ehetetlen.)

A teljes design-t két dolog figyelembevételével kellett felépíteni:

  1. viszonylag egyszerű legyen a narancs-lila váltást programozni
  2. a különféle tartalmak oldalon belüli elhelyezésénél prioritást élvezzen a fő üzenet – a mobil verzió későbbi programozásához

Közben persze más munkáink is voltak, így nem tudtuk minden időnket a saját honlapunk áttervezésének szentelni, de ami biztos, hogy jóval több munka volt vele és sokkal tovább tartott, mint azt eredetileg terveztük.

A blog is költözik

2007. augusztusa óta írtam a Marketing Izék blogot, amire az utóbbi hónapokban már egyrészt nem nagyon volt időm, másrészt azt a blogot ÚGY már nem akartam folytatni. A blog.hu közönsége sokkal lájtosabb, sokkal bulvárosabb témákat kedvel, mint amilyenekkel én foglalkozni szeretnék.

Nagy döntés, de a továbbiakban a külföldön sokkal jellemzőbb szakmai blog kategóriát szeretném írni, ami azt jelenti, hogy ritkábban írok, de akkor komolyabb hangvételűt.

A régi blognak azok az írásai, amelyeket arra érdemesnek tartok, fokozatosan átkerülnek majd erre a blogra.

Gondolnom kellett azokra is, akik ott megkedvelték az írásaimat: ezért a blog arculatát kicsit hozzáigazítottuk a Marketing Izékhez – a pingvinek családi fotója mindenképp át kellett hogy kerüljön.:)

És megszületik a LILA DESIGN…

Az utolsó napokban, amikor már a legtöbb dolog elkészült a honlapon, akkor változott át a honlap egy kattintásra lilává… (Egy-két napig játszottunk vele, nem tagadjuk.) Ott fent, a dobozban, illetve a honlap más oldalain a felső régióban ül egy kaméleon. Ha eddig nem tetszettek volna rájönni, ő áll az alkalmazásunkban, és más dolga nincs, mint hogy színt váltson a narancs és a lila változat között.

Utolsó simítások: a mobil és a tablet verzió

Erről a nem egyszerű programozási feladatról az uram tudna mesélni, de nem akar, mert örül, hogy túl van rajta… És reméli, hogy minden klappol.

Ezekkel a szavakkal indítjuk útjára az új dizájnos honlapot, és reméljük, hamarosan a kedves Olvasót is ügyfeleink között üdvözölhetjük!

Bemutatkozunk

Webstúdió és marketing műhely vagyunk Budapesten. Amit csinálunk: honlaptervezés, keresőoptimalizálás, mobiloptimalizálás és marketing – komplex egészként, marketing stratégiai alapokon.

Gyakorlati tapasztalatainkat tréningjeinken is megosztjuk.

A honlapon olvasható minden cikk saját tudásunkon, tapasztalatainkon alapszik.

Ossza meg másokkal is!