Hatékony nyitóoldalt tervezni honlapunk számára forrásának megtekintése

== Hogyan kell hatékony nyitóoldalt tervezni honlapunk számára? ==

[[Fájl:nyitooldal.jpg|right|300 px|saját szerkesztésű fotó]]Hiába van honlapunk, ha már a kezdőoldallal problémák vannak. Tulajdonképpen ez vállalatunk virtuális bejárati ajtója, amely már rögtön az elején befolyásolhatja azt, hogy a felhasználó marad az oldalunkon vagy inkább „sarkon fordul és továbbáll”. Érdemes megfogadni és alkalmazni a következő jó tanácsokat, hogy hatékony nyitóoldalt tervezhessünk honlapunk számára.

== Lépések ==

#'''Határozzuk meg honlapunk célját!''' Első lépésben azt kell eldöntenünk, hogy mi a célunk a honlapunkkal, például információ-megosztás, értékesítés vagy éppen tanácsadás. A kitűzött cél ugyanis alapvetően meghatározza azt, hogy hogyan építjük fel honlapunkat, milyen nyitóoldalt készítünk hozzá.
#'''Jelöljük ki nyitóoldalunk fókuszát!''' A nyitóoldalak általában fejlécből, menüsorból, törzsből és láblécből épülnek fel, azonban elrendezése nagyban függhet weboldalunk céljától, felhasználásától, tartalmától. Főoldalunkon érdemes egy fókuszpontot is meghatározni, ahova a legfontosabb üzeneteink kerülnek akár képpel illusztrálva, de emellett hangsúlyossá tehetjük például a regisztrációt, a hírlevélre feliratkozást vagy az online vásárlás lehetőségét.
#'''Törekedjünk átláthatóságra!''' A felhasználók nem olvasnak, hanem böngésznek a weboldalakon, ezért elengedhetetlen az átláthatóság, honlapunkat átláthatóvá pedig jó struktúrával tehetjük. 
#*Építsük fel nyitóoldalunkat hierarchikusan, rendezzük el következetesen! Például az ügyfélszolgálat elérhetőségét szem előtt, azaz a nyitóoldal felső sávjának jobb sarkában célszerű feltüntetni.
#*Rendezzük dobozokba vagy hasábokba a tartalmakat, használjunk ikonokat, címsorokat, felsorolásokat!
#*Kerüljük a túl sok menüpontot és a több szint mélységű menüstruktúrát, legyenek informatívak a menüsor egyes pontjai!
#*Emeljük ki boldozással a fontos információkat!
#'''Könnyítsük meg a navigációt!''' Ahhoz, hogy a felhasználó ne vesszen el a nyitóoldal böngészése közben, különböző technikákkal segíthetjük navigációját.
#*Helyezzünk el keresőmezőt a fejlécben, oldaltérképet a láblécben, használjunk webmorzsákat és állítsuk be az aktív menüpontok jelzését! 
#*Legyen kattintható a fejlécben található logó, amely vigyen magára a nyitóoldalra! Így a felhasználó egy kattintással visszatérhet az aloldalakról a főoldalra.
#*Jelezzük egyértelműen a kattintható linkeket!
#'''Használjunk webes konvenciókat!''' Számos webes konvencióval gazdagíthatjuk nyitóoldalunkat, amelyek még inkább felhasználóbaráttá teszik. 
#*Alkalmazzunk beszédes, kattintható ikonokat! Például az online vásárlás lehetőségét egy bevásárlókocsi ikonjával jelezhetjük, egy dokumentum vagy egy program letöltésének lehetőségét egy lefelé mutató nyíllal.  
#*Ha weboldalunk több nyelven is elérhető, ikonnal jelezzük a fejlécben! Például ha egy kis angol zászlóra rákattint a felhasználó, akkor a weboldal angol nyelven jelenik meg.
#*Helyezzünk el [[Hatásos_akciógombot_tervezni| hatásos akciógombokat]]! Ezek alkalmazásával növelhetjük nyitóoldalunk konverzióinak számát.
#*Tüntessünk fel chickleteket! Azaz azoknak a közösségi oldalaknak a logóit, amelyeknek cégünk is tagjai, mert ezek segítségével a felhasználó egy kattintással elérhet minket ezeken a felületeken is, illetve közvetlenül lájkolhat vagy követhet minket.
#'''Töltsük meg tartalommal!''' Ahhoz, hogy látogatóink már a nyitóoldalunkon hasznos információkhoz jussanak, tartalommal kell feltöltenünk. A minőségi tartalom [[Keresőoptimalizálni_(SEO) | keresőoptimalizálás]] szempontjából sem utolsó dolog.
#*Írjunk rövid, lényegre törő bemutatkozást cégünkről/tevékenységünkről! Ez azért fontos, hogy a felhasználó számára már az első pillanatokban kiderüljön, hogy kinek-minek a honlapjára „tévedt”.
#*Kerüljük a hosszú szöveges tartalmakat! Ha mégis szükség lenne rájuk, akkor egy rövid bevezető után a hosszabb kifejtéseket egy „Tovább” gomb segítségével átvezethetjük aloldalakra. A nyitóoldalon azonban különösen törekedjünk a tömörségre, itt inkább a lényeget kell megragadnunk, hogy a látogatónak kedve legyen tovább menni.
#*Biztosítsunk helyet a híreknek, aktualitásoknak! Így nem csak a látogatók találkozhatnak az újdonságokkal, de a folyamatosan frissülő tartalomnak köszönhetően a Google keresőjétől is jobb minősítést fog kapni honlapunk.
#*Helyezzük el ügyfeleink véleményét, valamint díjainkat, elismeréseinket! Ezekkel növelhetjük hitelességünket és elnyerhetjük látogatóink bizalmát.
#*Használjuk ki a láblécet is! Feltüntethetjük benne az elérhetőségeinket, az Adatvédelmi és jogi nyilatkozatot vagy az Impresszumot, továbbá itt is kiemelhetjük a fő szolgáltatási vagy termékkategóriák linkjét, utóbbi a keresőoptimalizálás szempontjából is előnyös.
#'''Ne feledkezzünk meg a designról sem!''' Nyitóoldalunk jól szervezett felépítése, használhatósága és minőségi tartalma mellett honlapunk igényes kivitelezése sem hiányozhat. 
#*Válasszunk vagy készítsünk vállalkozásunkhoz/tevékenységünkhöz illő templatet!
#*Használjunk a cég arculatának megfelelő színsémát!
#*Maximum háromféle betűtípust alkalmazzunk, amelyek színe harmonizáljon a választott színsémával!
#*Töltsünk fel cégünkhöz/tevékenységünkhöz kapcsolódó, és nyitóoldalunk stílusához illeszkedő jó minőségű fotókat! A fotók vizuálisan erősítik a szöveges tartalmat, és a látogatói élményt is emelik.
#*Illeszkedjenek az ikonok színei a választott színsémához!
#*Ügyeljünk a fotók és az ikonok méretére és arányos elrendezésére!

== Tippek ==

*Tegyük reszponzívvá (responsive) honlapunkat! A reszponzív webdesign lényege, hogy a honlap szerkezete rugalmasan alkalmazkodik a kijelző vagy monitor méretéhez, így laptopon, tableten és okostelefonon is kiválóan lehet böngészni az oldalt.
*Válasszunk olyan színsémát és olyan betűtípusokat, amelyek harmonizálnak vállalkozásunkkal/tevékenységünkkel! Például egy gyógyszereket forgalmazó webáruház honlapjához a jellegzetes „orvosi szoba színei” (fehér, világoskék, szürke, halványzöld) és a „letisztult” betűtípusok illenek, míg egy kreatív hobbibolt honlapján a vidám, üde színek és a mókás betűtípusok mutatnak jól – de utóbbi esetében is ügyeljünk arra, hogy könnyen olvasható legyen.
*[[Képeket_keresőoptimalizálni | Keresőoptimalizáljuk a képeket]]! Ezzel szintén jobb minősítést szerezhetünk a Googletól és több látogatót irányíthatunk nyitóoldalunkra!
*Kérjünk meg egy „hétköznapi” felhasználót, hogy „járja be” kezdőoldalunkat és mondja el véleményét használhatóságáról, grafikai kivitelezéséről! Így sokszor kiderül, hogy ami „annyira nyilvánvaló” számunkra, másnak esetleg egyáltalán nem érthető – márpedig a honlapot a látogatóknak tervezzük…
*Kérjünk honlapauditot, ellenőriztessük le nyitóoldalunk hatékonyságát szakértőkkel!

== Amire szükséged lehet ==

*saját honlap
*szakértők (pl.: webfejlesztő, webdesigner, online marketinges, online pr-es)
*kreativitás, innovatív ötletek

== Figyelmeztetések ==

*Ügyeljünk arra, hogy nyitóoldalunk rövid idő alatt töltődjön be! 
*Ne legyen zsúfolt a nyitóoldalunk, se szövegekkel, se képekkel, se hirdetésekkel!
*Kerüljük a zavaró flasheket és az előugró ablakokat a kezdőoldalunkon! A flasht nem támogatják a mobileszközök, és akinek nincs flash lejátszója, annak nem jelenik meg, emellett nem is keresőbarát.
*Ne képként töltsük fel a szöveges tartalmat! Lassabb lenne a betöltése és keresőoptimalizálás szempontjából is hátrányt jelentene.
*Figyeljünk a [[A_honlapszövegek_helyesírását_javítani | honlapszövegek helyesírására]]!
*Ne használjunk olyan betűszíneket, amelyek elvesznek a háttér színében!

== Kapcsolódó források, hivatkozások ==

* [http://www.sakkom.hu/honlapok-kes-alatt-honlapatalakito-palyazat/ Honlapok kés/alatt – honlapátalakító pályázat]
* [http://www.sakkom.hu/blog/2013/03/25/honlapok-k%C3%A9s-alatt-elmolight-mintaprojekt/ Honlapok kés/alatt – "Elmolight" mintaprojekt]
* [http://www.sakkom.hu/blog/2013/04/24/honlapok-k%C3%A9s-alatt-xorpio-design-atalakitasa/ SAKKOM blog: Honlapok kés/alatt - a Xorpio Design honlapjának átalakítása] 
* [http://www.sakkom.hu/blog/2013/04/26/honlapok-k%C3%A9s-alatt-derus-gyermekkor-alapitvany-nyitooldalanak-atalakitasa/ SAKKOM blog: Honlapok kés/alatt - a Derűs Gyermekkor Alapítvány honlapjának átalakítása]
* [http://www.sakkom.hu/blog/2013/04/29/honlapok-kes-alatt-az-ingatlanlap.net-nyitooldalanak-atalakitasa/ SAKKOM blog: Honlapok kés/alatt - az IngatlanLap.net honlapjának átalakítása]

[[Kategória:Internet]]