Hamarosan áremelés

Kérj ajánlatot még a 2023-as árainkon.

nap
óra
perc
másodperc

A sikeres főoldal anatómiája [checklist-tel]

Ha inkább hallgatni szeretnéd, vidd magaddal a cikket podcast formában. 

Bunkó recepciós, igénytelen kirakat, szörnyen felépített főoldal. Több a közös bennük, mint gondolnád. Mindhárom a kulcsfontosságú első benyomást teszi meg és mindhármon ügyfeleket, vásárlókat veszíthetsz. Az első kettőben nem tudok szakmai segítséget nyújtani, viszont ebben a cikkben együtt átnézhetjük a főoldalad felépítését.

Megnézzük, hogy milyen szempontokat kell figyelned és melyek a legfontosabb, konverzió javító elemek, amiket nem szabad kihagynod. A cikk végén a könnyű felhasználás érdekében adok egy checklistet is, amin egyszerűen végig tudsz menni és folyamatosan javítani a főoldalad minőségét.

ChatGPT fogalom magyarázó

Konvezió

A weboldal konverziója azt méri, hányan végeznek el egy kívánt cselekvést a látogatóid közül, például vásárlás vagy feliratkozás. Minél több ember csinálja ezt, annál magasabb a konverziós arányod.

Weboldalad legfontosabb oldala, ahol minden elindul

Mi annyira fontos a főoldalban, hogy egy külön cikket írok róla? Ez a honlapod alapja. Ide érkezik meg látogatóid nagy része, innen kezdik el felfedezni az oldalad és a céged. És ahogy a bevezetőben írtam, ez teszi meg azt a bizonyos első benyomást, amit nem lehet megismételni.

Így működünk. Hogy agyunk ne robbanjon fel, egyszerűsítünk. Amit először érzünk, azt később már nehezen változtatjuk meg. Szóval, ha főoldalad ronda, össze-vissza, akkor az érzés, amit kelteni fogsz, a bizalmatlanság és rossz minőség. Ha még használhatatlan is, akkor fel is idegesíted a látogatót és azt fogja érezni, hogy itt a közös munka is ilyen nyögvenyelős lesz.

Már láthatod mire is kell törekedned: jó első benyomásra és azonnali, átlátható információ átadásra. Ezt így leírni és olvasni persze könnyű, kivitelezni már nehezebb, de a cikkben ebben akarok neked segíteni.

A főoldaladnak egy átfogó képet kell adnia céged tevékenységéről és kijelölni az útvonalat, amerre a látogatód tovább tud haladni.

A főoldalt egy könyv elejéhez szoktam hasonlítani, ahol a borító megfog, majd a tartalomjegyzék meggyőz arról, hogy ez a könyv érdekel téged. Így kell a főoldaladra is tekintened.

Az első kattintás előtt tervezzünk okosan

Nem várhatod el a látogatódtól, hogy átlássa az oldalad, ha te sem tudatosan tervezed meg a felépítését. Mielőtt nyakig merülnénk a címsorok, ikonok és CTA gombok tengerében, vannak startégiai szintű kérdések, amikre tudnod kell a választ, hogy jó irányba tudj indulni.

Mi a legfőbb ígéreted, az értékajánlatod?

Ez nem webdesign kérdés, ez a céged alapja. Ez jó esetben már megvan fejben, még jobb esetben leírva. Én minden tervezést innen indítok, mert tudnom kell, hogy mi az, amit szeretnénk bemutatni, értékesíteni.

Ha még nincs meg egész pontosan, javaslok egy egyszerű formulát. Ezzel az egy mondatos pitchedet tudod elkészíteni:

[X]-nek segítek, hogy elérje [Y]-t [Z] segítségével.

Az X a célközönséged, az Y a közönséged vágya, amit meg tudsz valósítani, a Z pedig a szolgáltatásod vagy terméked.

Például a miénk így néz ki: Kis és középvállalkozásoknak segítünk növelni a bevételüket azzal, hogy láthatóvá és észrevehetővé tesszük őket az online és offline világban.

Persze az értékajánlat egy olyan téma, amivel külön könyveket töltöttek meg, de kiindulásnak kelleni fog valami hasonló. Látni fogod, hogy hol használjuk ezt az oldaladon.

Milyen funkciókat és aloldalakat szeretnél az oldalra?

Érdemes készítened egy rövid “tartalomjegyzéket” és funkció listát már a tervezés elején. Mire gondolok?

Például az egyik ügyfelünk mezőgazdasági drónokkal foglalkozik. Vannak szolgáltatásaik és eladó drónjaik is. Tehát máris megjelent két fő fejezetünk. Majd ezt tovább bontottuk szolgáltatásokra, és termékekre. Ezen felül be akartuk mutatni a csapatot és az alapelveiket. Így meg is kaptuk az oldal struktuúráját.

A cél minden esetben a kapcsolatfelvétel volt, így a kapcsolatfelvételi űrlap kitöltését és a további elérhetőségek bemutatását helyeztük szem elé.

Ha ezt így át tudod látni, sokkal könnyebb lesz eldöntened mi kapjon helyet a főoldalon és mi ne.

Mit csinálnak a versenytársaid itthon és külföldön?

Természetesen nem koppintani kell őket. Viszont meg lehet figyelni fontos alapvetések, amit mindenki ugyanúgy használ. Innen pedig két lehetőséged van, vagy hasonlót alkalmazol, vagy teljesen más irányba indulsz.

Mindkettőnek van előnye és hátránya is. Az árral szemben úszva könnyebb kitűnni, viszont egy nagyon eltérő struktúra, új funkciók akár rossz felhasználói élményt is okozhat, mert a látogató “nem ezt szokta meg”.

A tömeget követve értelemszerűen nehezebb kitűnni, viszont biztos nem okozol felhasználói kihívást.

Az én tanácsom, hogy ismerd meg a közönséged, ők mire vágynak és ötvözd a j.p.é-vel (józan paraszti ész).

Milyen stílusú oldalt akarsz?

Ez már inkább a technikai kivitelezéshez tartozik. Meg kell határoznod milyen színeket és betűtípusokat használsz az oldaladon. Ha van céges arculatod, akkor érdemes ehhez nyúlnod.

Ökölszabályként elmondható, hogy érdemes maximum 3-4 színnel operálni. Ezek között mindenképp legyen feketéhez, vagy fehérhez közeli szín a hátterekhez és egy két domináns szín a fókusz irányításához.

Betűtípusokál maxiumum 2 mellett tedd le a voksod. Itt a fő szempont, amellett hogy az arculatodhoz és az üzenetedhez illeszkedik, az olvashatóság. Ha túl kacifántos betűt választasz hosszú leírásokhoz, kifolyik a szeme az olvasónak, így inkább nem is kínozza majd vele magát sokáig. Ergo a gondosan megfogalmazott üzeneted nem ér célba.

Na de most, hogy letettük az stratégiai alapköveket építsünk rá egy hatékony főoldalt. Mutatom, milyen elemekből érdemes építkezned.

A sikeres főoldal legfontosabb elemei

Itt láthatsz egy összefoglaló drótvázat. Ezután egyesével megvizsgáljuk az egyes építőkockákat és megmagyarázom a jelentőségüket.

Menüsáv- a könnyű eligazodásért

Ez az oldalad tetején lévő sáv. Itt érdemes helyet adnod céged logójának, hogy azonnali legyen az azonosítás. Ezt legtöbb esetben egy linkkel is ellátják, ami a főoldalra mutat.

Ezen kívül kötelező elem még a főmenü. Innen tud a legegyszerűbben tovább navigálni a látogatód és egy villámgyors áttekintést is kap, hogy miket talál az oldaladon. Érdemes csínján bánni a fő menüpontokkal és a számukat 5-6 körül maximalizálni. Efölött sérül a látvány és könnyebb elveszni köztük. Inkább a fő menüpontokon belül hozz létre pár al menüpontot.

Például, ha több szolgáltatásod is van, csinálj egy szolgáltatások fő menüpontot, ami alatt megjelenhet az összes szolgáltatásod almenüpontja. Így első ránézésre is egyértelmű, hogy aki ezt keresi hol találja.

Amivel még kísérletezhetsz egy Call-to-Action (CTA) gomb, ami azonnal a fő konverzióhoz vezet. Ilyen lehet a kapcsolatfelvétel, vagy időpont foglalás. Ez segíti a visszatérő látogatókat is, akik már tudják mit akarnak.

Pro tipp: ha a te területeden a hívások, közvetlen e-mailek vannak előtérben, érdemes egy u.n. másodlagos menüsávot létrehozni, ahol azonnal, fixen láthatók ezek az elérhetőségeid.

ChatGPT fogalom magyarázó

CTA gomb

A „call-to-action” (CTA) gomb olyan gomb egy weboldalon, ami arra ösztönzi a látogatót, hogy végezzen el egy bizonyos cselekvést, mint például feliratkás vagy vásárlás. Gondolj rá úgy, mint egy „Kattints ide!” felhívás, ami irányítja a látogatót.

Hero section- a hajtás feletti rész

Itt már sok minden eldől. Ez főoldalad legfontosabb része. Itt az a bizonyos első benyomás és itt dönti el a látogatód, hogy érdemes-e arra az oldalad, hogy tovább görgessen, vagy sem. Oké, akkor mit kell ide tenned, hogy minél többen döntsenek így?

Kezdjük azzal, hogy mit nem? Nem azt, hogy üdvözlünk az oldalunkon. És nem azt, hogy cégünk 1998-óta van jelen a piacon. Ne magadról beszélj. Az ügyfeledről, az ügyfeledhez beszélj.

Itt jön elő újra az értékajánlatod, a legnagyobb ígéreted. Ennek kell azonnal, jól láthatóan, jól érthetően megjelennie a fő címsorodban. Ezt kiegészítheted egy alcímmel, ami részletezi ezt az ígéretet, alátámasztja azt.

Például pénzügyi tanácsadó ügyfelemnél használtuk ezt a kombinációt:

Címsor: Legyenek a legfontosabb döntéseid a legjobbak

Alcím: Személyre szabottan segítek a legjobb pénzügyi döntéseket hozni

Szintén a hero section fontos része egy (vagy kettő) CTA gomb. Ez segít, hogy egyből kapcsolatba lépjen az oldaladdal a látogató. Kifejezze a szándékát, hogy érdekli a téma, az ajánlatod.

Gyakran két gombot használok. Az egyik azonnal a fő konverzióhoz vezet, annak aki tudja mit akar, a másik pedig több részletet mutat, például tovább viszi a szolgáltatások részhez.

A hajtás feletti részt feldobhatod és informatívabbá teheted még egy képpel, vagy grafikával, ami megmutatja a vállalkozásod fő tevékenységét, előnyét. Az agyunk sokkal gyorsabban feldolgozza a vizuális infókat, mint a szövegeseket, szóval ezzel hamarabb megszerezheted az érdeklődő figyelmét.

Problématudat rész- mutasd meg, hogy tudod mit keresnek

A következő lépés, hogy tovább mélyítsük a látogatónkban azt az érzést, hogy pontosan tudjuk mire van szüksége. Ennek az egyik legjobb módja, ha a problémáiról kezdünk beszélni. (Látod, még mindig nem szóltunk egy szót sem magunkról, csak róla.) Ehhez tudnod kell, hogy milyen problémát is old meg a “cuccod”.

Tedd a címsorba a legégetőbb problémáját, vagy kihívását, majd egy bekezdésben fejtsd ki, hogy pontosan tudod, hogy mivel küzd. Hiszen az első lépés a megoldás felé, hogy ismerjük a problémát.

USP – Mutasd meg miért érdemes téged választani

Oké, látja, hogy értjük mit keres. Most vigyük ezt tovább és mutassuk meg, hogy miért mi vagyunk azok a vízvezetkészerelők, fotósok, bármik, akik erre a problémára a legjobb megoldást tudják nyújtani.

Gondold végig: eddigi ügyfeleid miért választottak téged? Mivel tudsz kitűnni a vetélytársaid közül? Vagy mi az, amire az ügyfeleid a korábbi szolgáltatókkal kapcsolatban panaszkodtak? Ilyen lehet egy weboldal készítőnél, hogy nem lehet elérni, rosszul kommunikál. Akkor mi leírjuk (persze, csak ha így van), hogy nálunk kedves, gördülékeny kommunikációra, gyors válasz adásra számíthat. Máris látja, hogy mivel vagyunk mások, mint akikben eddig csalódott.

Pro tipp: ne aggódj, sokszor az is elég tud lenni, ha kommunikálod azokat az előnyöket, amik másoknak is megvan, csak nem mutatják meg. Gondold végig a szolgáltatásod és a legjobb dolgokat emeld ki belőle.

ChatGPT fogalom magyarázó

USP

A USP (Unique Selling Proposition) az egyedi értékesítési ajánlat, ami kiemeli a terméked vagy szolgáltatásod különlegességét a versenytársakhoz képest. Egy „ezért válassz engem” üzenet, ami megmutatja, miért vagy jobb vagy más, mint a többiek.

Szolgáltatások/aloldalak áttekintése- avagy merre tovább?

Most, hogy már alakul a látogató fejében felénk a bizalom, ideje megmutatni a konkrét megoldásainkat. Egy gyors, értehető betekintést kell adnunk, hogy milyen szolgáltatásaink vannak. Én azt javaslom, hogy legyen itt mindegyik szolgáltatásról, vagy nagy csoportról egy bevezető leírás, amiből ráismer arra, amelyik neki kell és egy gomb, amivel tovább tud menni az adott szolgáltatás/csomag/ajánlat aloldalára.

Ezt a bevezetőt szintén érdemes vásárlói probléma és megoldás szempontból vizsgálni és ezeket megemlíteni a szövegekben.

Social proof – a visszajelzések ereje

Szépet mondani magáról mindenki tud. Sőt fog is a saját weboldalán. Viszont, ha más mondja ezeket a szépeket rólunk, az sokkal hatásosabb. Az újabb felmérések szerint a vásárlók 90%-a megnézi a vásárlói visszajelzéseket, mielőtt dönt. Szóval kritikus fontosságú, hogy gyűjtsd és feltűntesd elégedett ügyfeleid visszajelzéseit.

Pro tipp: Ne kamuzz! Az a vicc, hogy ez nem vicc. Sokan csinálják, de kérlek te ne írj magadnak visszajelzéseket. A visszajelzések hiányánál már csak egy hitelességrombolóbb dolog van. Igen, eltaláltad, ha messziről süt róla, hogy magadnak írtad őket.

ChatGPT fogalom magyarázó

Social Proof

A „social proof” (társadalmi bizonyíték) olyan bizonyíték, hogy mások már megvették és élvezik a terméket vagy szolgáltatást. Mint amikor látod a barátaid kedvenc éttermét vagy olvasod a termékértékeléseket online; ha másoknak tetszik, nagyobb eséllyel fog tetszeni neked is.

Referenciák

Az előző részhez közvetlenül tartozik ez a rész. Ez a rész állhat csak a korábbi partnereid logójából, akikkel már együtt dolgoztál, vagy az eszközökéből, amiket használsz.

Viszont, ha olyan területen vagy, ahol látványos a végeredmény, akkor azt kötelező közszemlére tenned. Egy bútorasztalos mondhatja, hogy jól dolgozik, de ha látom milyen szép dolgokat csinál, már el is hiszem.

Itt érdemes lehet tesztelgetni, gondolkozni, hogy lehet a leghatásosabban megmutatni a referenciákat. Külön aloldallal, vagy csak egy galériában. A lényeg, hogy jelenjenek meg a korábbi munkáid.

Amit még meg szeretnél mutatni

A kötelező elemek végére értünk, de itt még nem kell, hogy véget érjen az oldalad. Fontos, hogy a legfontosabbak kerüljenek felülre, de utána nyugodtan megmutathatod a legutóbbi blog cikkeid, bedobhatod a csali ajánlatod, amiért feliratkozhatnak a látogatók, vagy bemutathatod a csapatod és az elveitek.

A lényeg, hogy azzal a szemüveggel mérlegelj, hogy közelebb viheti-e a látogatódat ahhoz, hogy ügyfél legyen belőle. Ha igen, akkor lehet helye a főoldaladon.

Kapcsolat felvétel- “tudok valamiben segíteni”

Szeretek minden (nem webshop) főoldal aljára egy dedikált kapcsolatfelvételi részt tenni. Itt megjelenik a telefonszám, e-mail cím, ha releváns akkor a cím is. Illetve be lehet dobni ide egy kapcsolatfelvételi űrlapot is.

Lesznek olyan látogatók, akiket meggyőztél, csak nem tudják pontosan melyik szolgáltatást is kéne választaniuk. Pl.: fogorvos vagy, weboldalt szeretnél, de nem tudod még, hogy kell-e időpontfoglaló rendszer, vagy elég egy sima bemutatkozó oldal. Így nem tudsz választani az aloldalaink közül. Akkor máris ott a főoldalon lévő általános űrlap.

Kicsit olyan ez, mint amikor a boltan megkérdezi a kedves eladó, hogy tud-e valamiben segíteni. A lényeg, hogy meglegyen a kapcsolat, onnan már tudod személyesen segíteni.

Footer- a kötelező dolgok helye

Ez az oldalad legalja. Ide jöhetnek a kötelező jogi cuccok: ÁSZF, Adatkezelési stb. Be lehet dobni a social media oldalaidat is, illetve ide is jöhetnek az elérhetőségek (ezt nem lehet elégszer feltüntetni).

Kevés látogatód fog ide eljutni, nem kell túlcsicsázni. A lényeg, hogy a kötelező dolgok szerepeljenek és az a pár fontos infó, amit megszokásból kereshet itt egy látogató.

Ezt vidd magaddal

Bízom benne, hogy már a cikk közben elkezdted rajzolgatni, hogyan építed, vagy alakítod át a főoldalad felépítését. Hogy megkönnyítsem a munkát, hoztam egy listát, amin végig haladva garantáltan jobban működő oldal lesz a jutalmad.

Checklist az ellenőrzéshez:

Facebook
Twitter
LinkedIn

Ezeket láttad már?

KAPCSOLATBeszéljük meg, miben tudunk segíteni

Főoldal form

Hívj minket

+3630/729-4220

Írj nekünk

gergo@empiredesign.hu

Kövess minket