A weboldal oldaltípusai

Kiss ErnőKiss Ernő2017. szeptember 18.
A weboldal oldaltípusai
Egy komplex weboldal többféle aloldalból épül fel. Az egyes aloldalak céljai különbözőek, ezért a megjelenésük is eltérő annak érdekében, hogy a mondanivalójuk könnyebben áttekinthető legyen.
Ilyen oldalstílusokra lehet például szükséged, egy könnyen áttekinthető weboldal esetében:
  1. Főoldal
  2. Teljes oldalszélességű szöveges tartalom, kép, vagy videós beillesztéssel Pl.: bemutatkozás, szolgáltatás ismertetése stb.
  3. Oldalsávval rendelkező oldal, ahol az úgynevezett sliderben navigáció van elhelyezve. Pl.: praktikus ez a megjelenítés, ha több szolgáltatásod van, így az egyes szolgáltatások közötti navigálás egyszerűbben kezelhető és könnyebben átlátható. Pl: Online termékkatalógusokban, vagy webáruházakban a termék fő és alkategóriák megjelenítésére is gyakran használt oldal típus.
  4. Referenciák megjelenítése. Pl.: építőipari projektek, vagy akár weboldal készítés esetén érdemes alkalmazni projekt listát, ahol ajánlókép és a projekt rövid ismertetése olvasható. A részletek, vagy további információk gombra kattintva a látogató megismerheti az adott projekt bővebb ismertetését, több szöveggel, akár képgalériákkal, vagy videókkal.
  5. Online termékkatalógusok, vagy webáruházak, vagy ingatlanos weboldalak esetében alkalmazunk terméklistákat, ahol a termék ajánlóképe és a legfőbb információk láthatóak. A részletek gombra kattintva megtekinthetőek a kiválasztott termékhez kapcsolódó bővebb információk, több szöveggel, képekkel, videókkal, esetleg letölthető dokumentumokkal..
  6. Gyakori kérdések menüpont.
  7. BLOG lista és a BLOG bejegyzések részletes adatlapjai.
  8. Ügyfélvélemények megjelenítése, kedvenc termékek listázása, vagy termékek összehasonlítása.
  9. Részletes termék keresők, ajánlatkérő űrlapok, stb.
  10. Kapcsolat menüpont.

 

A főoldal (nyitólap)

 A főoldal megtervezése az egyik legfontosabb része a weboldal tervezésnek.

A keresőkből bármely aloldaladra érkezhetnek a látogatók, a reklámkampányaidhoz tervezhetsz úgynevezett landing page (érkeztető oldalakat) mégis az egyik leggyakoribb eset az, hogy az érdeklődők a weboldalad főoldalán találkoznak veled és a cégeddel először.   

Amint az érdeklődők a weboldalra érkeznek tudni akarják, hogy mivel foglalkozol. Nem akarják a drága idejüket arra pazarolni, hogy feltérképezzék az oldalt, hiszen ezernyi releváns találatot kapnak a keresőben a számukra fontos kulcsszavakra.

Éppen ezért a főoldal az egész weboldal zászlós hajója. Itt dőlhet el akár 2 -6 másodperc alatt, hogy az érdeklődőd marad e a weboldalaodon, vagy visszalép a keresőbe és nézi a következő találatot a konkurensedet.

Nagyon fontos, hogy aki most először érkezik a weboldalra, ránézésre, azonnal tudja, hogy mit nyújthatsz neki, mivel foglalkozol.

Régi hiba üdvözlő szöveggel fogadni a látogatókat és nem érdemes az aktuális akciókat sem itt megjeleníteni. Az új felhasználók valamilyen konkrét problémával érkeznek, és erre akarnak azonnali válaszokat és megoldásokat találni.

A főoldalon azonnal kikell tűnjön mi az amivel foglalkozol, és átláthatóvá kell tenned, hogy  milyen problémákra nyújtasz megoldásokat. A foglalkozásod bemutatásához használhatsz ütős címszavakat, a főbb tevékenységeidet pedig lista, vagy dobozos elrendezésben is megjelenítheted. A tevékenységeidnek a felsorolása egyben navigáció is legyen az ezt bemutató aloldalakhoz.

Néhány javaslat a főoldalhoz:
  • Kerüld, a felesleges elemeket melyek elterelik a lényegről a figyelmet és lassítják a betöltődést. Elsődleges az átlátható üzenet arról, hogy mire számíthat a látogató.
  • Használj a főoldalon egymondatos, ütős szlogent mely megragadja a figyelmet.
  • Segíts informálni a látogatókat, hogy mikre találhatnak megoldást a weboldaladon. Emeld ki a főbb tevékenységeidet, vagy termékcsoportjaidat.
  • A látogatók fentről lefelé tapogatják le az oldaladat, ezért a legfontosabb elemeket jelenítsd meg felül. Ezek az elemek a legfontosabb kulcsszavaid is legyenek, mert a főoldalad kiemelt fontosságú a kereső optimalizálási szempontok miatt is.
  • Amennyiben nagy terjedelmű a weboldalad helyezz el itt egy kereső sávot, mely legalább 30 karakter beírására alkalmas. A keresés elindítását ne szövegesen helyezd el a kereső ablak mellett, hanem gombot használj, mert az egyértelműbb.

Tévedés azt gondolni, hogy azért mert a főoldalad az egyik leglényegesebb eleme a weboldaladnak, bonyolult grafikai elemeket és látványos színkombinációkat kellene tartalmazzon.

Éppen ellenkezőleg! A látogatók a grafikákat sok esetben reklámként érzékelik, ráadásul ezek lassítják is a weboldalad betöltődési sebességét.

A profi fotók segítik az információ átadását, de csak akkor, ha valóban szorosan köthetőek a mondanivalódhoz.

Leggyakoribb hiba a főoldalon!

Egy szűkített egyértelmű áttekintést kell nyújtson a főoldal. Sok cégtulajdonos viszont már itt mindent elakar mondani! Mintha ez valami gyűjtőoldal lenne és ezzel pont ellenkezőjét érik el mint ami az eredeti cél. A Főoldal lassan fog betöltődni és átláthatatlan lesz…

Törekedj az egyszerűségre és az átláthatóságra!

A bemutatkozás

Legtöbb embert elsőre nem érdekli a céged bemutatkozása, de a komolyabb üzleteknél elkerülhetetlen, hogy a cégedet „átvilágítsák” az üzleti partnereid.

Segítsd a munkájukat azzal, hogy a bemutatkozásban minden információt részletesen közölsz a cégedről, jelenítsd meg valamennyi fontos cégadatodat. (Cégnév, adószám, cégjegyzékszám, székhely, folyószámlaszám stb.)

A cégvezetők mindenképpen jelenjenek meg fotóval és rövid bemutatkozással. (Nem kell modellnek lenned, viszont a fotók egységes háttérrel, egységes távolságból, jó minőségben, igényesen készüljenek el.)

A kis és a közepes vállalkozások a személyességükkel kerülhetnek előnybe a multinacionális cégekkel szemben. Így a szakmai bemutatkozásodon túl, akár a magánéletedbe is engedhetsz némi bepillantás. Pl: „X” éve nős, 2 gyermek büszke édesanyja, édesapja, stb.

A bemutatkozásban a kollégáidat is érdemes megjeleníteni, és itt semmi esetre se használj  stock fotókat (akkor sem ha pl valamilyen munkafolyamat bemutatásával szeretnéd illusztrálni a vállalkozásodat) mert furcsán veszi ki magát, ha az érdeklődők egy konkurensednél ugyanezeket a fotókat látják viszont.

Tegyél fel képeket az irodádról, a telephelyedről készíts részletes leírást a vállalkozásodról, akár úgy nevezet storytelling –et is ahol részletesen leírod honnan indultál, milyen nehézségekkel szembesültél és milyen út vezetett odáig ahol most tartasz.

Szolgáltatások leírása

Amennyiben 1 -3 szolgáltatásod van, akkor azokat nem érdemes betenni egy főmenüpont alá, előnyösebb inkább direktben megjeleníteni a menü sávban.  

Akkor viszont ha több szolgáltatásod van, célszerű egy főmenüpont alá besorakoztatni ezeket.

Pl.:

  • Szolgáltatásaink
    • Kőműves munkák
    • Gipszkartonozás
    • Burkolás
    • Festés
    • Egyéb takarítás
    • Stb.

A szolgáltatásaidat mutasd be rövid összefoglalókkal. Az információ éhesebb érdeklődőknek (és a Googlenak...) viszont bővebb leírásokat is közzé tehetsz, melyek egy „Tovább olvasok” gombra kattintva érhetőek el.  Adj teljes körű leírást mi a munka menete, hogyan dolgoztok, milyen garanciát vállaltok stb.

Az egyes munkafolyamatokat illusztrálhatod fotókkal, vagy még előnyösebb, ha videóban is bemutatod ezeket. 

Amennyiben több szolgáltatásod is van, praktikus lehet, az egyes szolgáltatásokon belül, baloldali navigációs sávval is megkönnyítened az egyes szolgáltatás leírások közötti átjárást.  

Referenciák megjelenítése

A referenciákat meglehet jeleníteni:

  • szöveges listában (ez a legkevésbé hatékony),
  • kép galéria formában,
  • videókkal,
  • vagy a leghatékonyabb, ha projektként mutatod be a munkáidat, melyben használsz tökéletes minőségben elkészült fotókat és videókat, leírod pontosan mi volt a feladat és hogy lett megvalósítva, valamint az ügyfeledet is nyilatkoztatod, mennyire volt elégedett a megrendelt szolgáltatással.

A referenciáknak adj címet, mely az adott munka megnevezése, vagy valamilyen ötletes, a munka típusára utaló mondat lehet.

Jeleníts meg a referencia listádban ajánlófotót és adj rövid leírást, mely felkelti a látogatóid figyelmét, majd a Tovább gombra kattintva navigáld őket a referencia részletes ismertetéséhez.

A további leírásban ismertesd részletesebben is mi volt a megrendelőnek az igénye, hogyan valósult meg a projekt, mik a Te tapasztalataid és lehetőség szerint jeleníts meg több fotót, akár a munkafolyamatról, vagy ha van rá lehetőséged, akkor Pl. előtte / utána állapotokról, és azt is feltüntetheted, hogy mikor valósult meg az adott projekt.

A munkáid elvégzése után mindig kérd ki az ügyfeled véleményét! mennyire elégedett, mik voltak a tapasztalatai, volt e valami amit hiányolt, ajánlana e másoknak? (és ha igen van e esetleg olyan akinek a közvetlen környezetéből, és mi az illető neve, telefonszáma, email címe….) J

Amennyiben negatív véleményt kapsz, akkor tanulhatsz belőle és jobbá teheted a szolgáltatásodat, vagy a kommunikációdat. Viszont ha pozitívan nyilatkozik az ügyfél (és reméljük, hogy a legtöbb esetben erre lesz példa.) akkor azt feltüntetheted (Fel kell tüntetned!) az ügyfélvélemények menüpontodban, valamint ide is csatolhatod az adott projekthez.

Ha lehetőséged van rá, akkor készíts videós projekt bemutatót, mert ezeket szeretik a látogatók és kevesen jelenítik meg így a referenciáikat.

A videós referencia bemutatók további előnye, hogy még többet képesek elmondani, mint a szövegek és a képek önmagukban, valamint erősítik a:

  • kereső optimalizációdat
  • és a látogatók weboldalon töltött idejét is.

Amennyiben értékesítettél celebeknek, vagy híres embereknek mindenképpen törekedj arra, hogy legyen tőlük referálásod, fotóval vagy videóval (Sőt ha lehetőséged van rá kérj tőlük közös fotót is!)

Termékek bemutatása

Amennyiben több termékkel és / vagy termékkategóriával rendelkezel úgy 2 -5 oldaltípusra van szükséged a termékeid átlátható és hatékony bemutatásához.

Több termék ismertetésénél általánosan használt megoldás a bal oldali navigációs sáv, melyben megjelenítheted a termékcsoportjaidat és termék alcsoportjaidat.

1.) Kategória / alkategória választás:

Az első amit nem mindenki használ, hogy az egyes termékkategóriákon belül ha vannak alkategóriák, akkor a tartalmi mezőben ezeket kategória megnevezéssel és ajánlóképpel is meglehet jeleníteni, majd erre kattintva jut el a látogató a terméklistához.

2.) Terméklista

A terméklistában jelennek meg az adott kategória termékei.

Ennek az elrendezése lehet „Girld” rácsos, ez esetben a termék ajánlóképe látható és a termék neve esetleg 2 – 3 legfontosabb információ, akár kis ikonokkal és az ár. (Amennyiben van ár megjelenítés) A részletek gombra kattintva a látogató megnézheti a termék részletes adatlapját, melyen bővebben tájékozódhat az adott termékről.  

Vagy lehet úgy nevezet „List” azaz listás elrendezésed, ez esetben baloldalon van az ajánlókép és mellette jobbra helyezkedik el a figyelemfelhívó szöveges ismertető, a kiemelt információ és az ár.  (Amennyiben van ár megjelenítés.) A részletek gombra kattintva a látogató megnézheti a termék részletes adatlapját, melyen bővebben tájékozódhat az adott termékről.   

A terméklistának van alapértelmezett rendezési módja, de érdemes betenni különböző választási lehetőségeket a listázására. Pl: ár szerinti listázás, teljesítmény szerinti listázás, márka szerinti listázás, stb.

Amennyiben olyan termékeid vannak, melyek többféle paraméterrel is rendelkeznek, Pl: technikai eszközök, mint tv, számítógép stb. Úgy érdemes szűrőket is elhelyezned a weboldaladon, mellyel a látogatóid végezhetnek egy első szűrést, de a terméklistában való böngészéskor ezzel tovább is finomíthatják a keresési találatot.

3.) Részletes termék adatlap

A részletes termék adatlapon mutatod be az adott termékről fellelhető valamennyi információt.

Ezek lehetnek:

  • Termék neve és cikkszáma,
  • ajánlókép és további képek,
  • 3D forgatható képek,
  • Youtube vagy más videók, melyeken akár Te magad, vagy egy kollégád mutatja be az adott terméket. Kevesen használják, pedig akár mobiltelefonnal is készíthetsz ilyen felvételeket. Ha Pl.: babakocsira keresel rá akkor rengeteg ilyen videót találsz, ahol bemutatják hogyan lehet a babakocsikat kinyitni, összecsukni, milyen átalakítási lehetőségek vannak stb. Ezek a videók erősítik a kereső optimalizációdat, látogatókat hozhatnak a Youtube ról is és a  látogatód weboldalon töltött idejét is jelentősen megfogják növelni.
  • a termék részletes leírása,
  • technikai adatok táblázatosan, könnyen áttekinthetően,
  • ezt a terméket vásárlók ügyfélvéleményei, letölthető összeszerelési útmutatók, vagy egyéb technikai adatok.
  • nyomtatás gomb és közösségi portálokon megosztási lehetőség
  • és egy gomb, melyre kattintva érdeklődhetnek a látogatóid az adott termékről. (Nem webáruházról beszélünk, ahol egyből kosárba is helyezhetik őket.

A termék információk alatt listázhatsz ide esetleg más termékeket, melyeket vagy ajánlasz emellé, vagy nagyon hasonlítanak az itt megtekintett termékhez ezért az érdeklődőid figyelmébe ajánlod őket.  

4.) Összehasonlító oldal

Amennyiben olyan termékeket értékesítesz, melyek hasonló tulajdonságokkal, paraméterekkel rendelkeznek, úgy érdemes lehetőséget biztosítanod a látogatóidnak arra, hogy ezeket összehasonlíthassák.

Ilyenkor egy gombnyomással bekerülnek a termékek az „Összehasonlítás” menüpontodba és itt egymás mellett jeleníti meg őket a rendszer, az egyes tulajdonságaikat egy sorba helyezve. Így megkönnyíted az érdeklődők dolgát a helyes termékválasztást illetően.

Természetesen ez az oldal is legyen kinyomtatható, hiszen lehetséges hogy a döntést csak később hozza meg a leendő ügyfeled.

Ami fontos:

  1. Amikor egy termék az összehasonlításba kerül, akkor az összehasonlítás menüpont váltson aktív színre és / vagy íródjon ki elé, mennyi termék van az összehasonlításban.
  2. Látszódjon a terméklistában, ha egy termék már az összehasonlításba van helyezve (ikon aktívan világít), és lehessen innen kivenni is.
  3. Látszódjon a részletes termék adatlapon, ha egy termék már az összehasonlításba van helyezve (ikon aktívan világít), és lehessen innen kivenni is.
5.) Kedvencek oldal.

Az összehasonlításhoz hasonlóan, érdemes egy kedvencek gombot is elhelyezni a termékeknél. Amennyiben a látogató erre kattint, a rendszer behelyezi ezen termékeket egy „Kedvencek” menüpontba.

Ezeket a látogató mindaddig visszanézheti, amíg nem törli a böngészési előzményeit (Amennyiben ugyanerről a készülékről látogat vissza később is. Akkor lehet böngésző függetlenül tárolni a kedvenceket, ha regisztráltatod a látogatóidat és bejelentkezés után használható csak ez a funkció.)  

Ami fontos:

  1. Amikor egy termék a kedvencekbe kerül, akkor a kedvencek menüpont váltson aktív színre és / vagy íródjon ki elé, mennyi termék van a kedvencekbe.
  2. Látszódjon a terméklistában, ha egy termék már a kedvencekbe van helyezve (ikon aktívan világít), és lehessen innen kivenni is.
  3. Látszódjon a részletes termék adatlapon, ha egy termék már a kedvencekbe van helyezve (ikon aktívan világít), és lehessen innen kivenni is.
Kapcsolat menüpont

A kapcsolat menüpont a menüsorodban az utolsó legyen, mert ezt szokták meg a felhasználók ezért általában itt keresik elsőnek.  

Bizonyára már Te is találkoztál azzal a problémával, amikor keresed egy szolgáltató elérhetőségeit és egyszerűen nem találod. Ide – oda kell kattintgass a weboldalon, keresed a menüpontok között a bal oldali sávban, a láblécben és vagy megtalálod, vagy nem…

(Mindemellett érdemes a főbb kapcsolati adataidat megjelenítened a weboldal legfelső részében egy sávban és, amennyiben van a weboldaladnak lábléce ott is.)

Szóval visszatérve a kapcsolat menüpontra, tartalmilag a következő adatokat célszerű itt megjeleníteni és az alábbi módon.

Telefonos elérhetőségek:

Több telefonszám esetén fontos, hogy mindegyik telefonszámhoz legyen kiírva, melyiket milyen ügyben lehet hívni. Pl.: általános információ kérés, rendelés, időpont foglalás, pénzügy, panaszbejelentés, garancia, stb.

E-mailes elérhetőségek:

Több e-mailes elérhetőség esetén fontos, hogy mindegyik e-mail címhez legyen kiírva, melyikre milyen ügyben lehet írni. Pl.: általános információ kérés, rendelés, időpont foglalás, pénzügy, panaszbejelentés, garancia, stb.

Cégadatok.

Cég neve, székhelye, telephelyei, adószám, cégjegyzékszám, bankszámla szám, stb.

Nyitva tartás ideje:

Nagyon fontos megjeleníteni! Akkor, ha csak hivatali munkaidőben dolgoztok azért, hogy az érdeklődők tudják, hogy azért nem veszi fel senki a telefont, mert aznap már nem vagytok elérhetőek.

Ha ezen munkaidőn túl is dolgoztok, akkor pedig pont azért, hogy tudasd az érdeklődőkkel hogy Pl. hétvégén is hívhatóak vagytok vagy akár NON STOP rendelkezésre álltok.

A kapcsolat menüpontban szintén érdemes megjelenni fotóval a cégvezetőknek és azoknak a munkatársaknak, akik e-mailes, vagy telefonos elérhetőségeken állnak az ügyfelek rendelkezésére.

A lábléc felett (ha van, ha nincs akkor egyszerűen a lap alján.) jelenítsd meg a Google térkép segítségével a telephelyedet. 

Több telephely esetén érdemes mindegyiket megjeleníteni, egymástól jól láthatóan elkülönítve, egymás alatt, vagy mellett az adott telephely elérhetőségeivel és Google térképen való megjelenítésével. (Amennyiben az egyes telephelyek nyitvatartási ideje különböző, akkor ne felejtsd el ezt is feltüntetni.)

Egyéb menüpontok:

Az alábbi menüpontokat és tartalmakat érdemes még elhelyezni a weboldaladon.

1.) Ügyfélvélemények

Az egyik legfontosabb dolog! Minden ügyfeledtől kérj véleményt, egyet se hagyj ki! Ha negatív ügyfélvéleményt kapsz, abból tanulhatsz, ha pozitívat azt jelenítsd meg a weboldaladon.

A weboldaladon megjelenített ügyfélvéleményeknek akkor van hitelük,  ha a referáló legalább az arcképét adja hozzá, és / vagy egy céghez, szervezethez köthető a leírás, de még nagyobb hatást fogsz elérni, ha mindezeket videó felvételen is közzé tudod tenni.

Az ügyfélvéleményeket gyűjtsd ide egy helyre és ezt a menü pontodat linkeld be minden e-mailben kiküldött ajánlatodba is. (Minél többet gyűjtesz, annál jobb, nincs maximum korlát! J )

Az ügyfélvélemények kérése akár automatizálható is. Amennyiben a weboldaladról érkező kapcsolatfelvételeket adatbázisba rögzíted, és ezeket kezeled, nyomon követed, akkor arra is van lehetőség, hogy automatizáld a már kiszolgált vevőid véleménykérését. (Mi Pl. a Webrakéta tartalomrendszerben biztosítunk ilyen megoldásokat, de ha egy CRM rendszert integráltatsz a weboldaladba, akkor is lehet erre lehetőséged.)

Plusz infó:

Az ügyfél véleményeket mindenképpen gyűjtsd ide a weboldaladra, de érdemes arra is megkérni az ügyfeleket, hogy ezeket töltsék fel Google találati listájában megjelenő cégprofilodhoz is, valamint a Facebook oldaladra is.

Amennyiben Te a vendéglátásban dolgozol, úgy természetesen neked ezek az ügyfélvélemények nagyon hasznosak lesznek, ha az ügyfeleid a TripAdvisor‎ -ra, vagy a Booking ra is feltöltika pozitív tapasztalataikat .

2.) Gyakori kérdések

A gyakori kérdéseket és az ezekhez kapcsolódó válaszokat érdemes elhelyezni a weboldaladon, mert így segíted a látogatóid információszerzését, valamint magadnak is időt spórolsz, ha nem kell ezeket mindenkinek egyesével elismételni.

Értékes volt számodra a blog bejegyzés?
Kérlek küldj visszajelzést a szavazatoddal!

34 szavazat