Ergonomikus weboldalt készíteni szerkesztése

== Hogyan kell ergonomikus weboldalt készíteni? == 

[[Fájl:Weboldal.jpg|right]]A webergonómia kiemelten fontos egy honlapprojekt során. Hiába van fent ugyanis minden tartalom az oldalon, hiába jók a szövegek, ha a felhasználó nem érzi magát kényelmesen, tovább fog állni. Ahhoz, hogy a látogatóink jól érezzék magukat a weboldalunkon, be kell tartani néhány szabályt. 

== Lépések ==
# '''Legyen egyértelmű az oldal struktúrája!''' Ha azt szeretnénk, hogy a látogatók ne tévedjenek el az oldalon, hibátlan struktúrát kell kialakítanunk. Fontos, hogy az összekapcsolódó tartalmak egy menüponton belül legyenek elérhetőek, méghozzá ott, ahol a látogató keresni fogja.
# '''Használjunk navigációt segítő megoldásokat!''' 
## Kereső: hagyományosan a webodalak jobb felső sarkában szokták elhelyezni. Összetettebb honlapok esetében érdemes használni.
## Webmorzsa: Szintén összetettebb, legalább 3 mélységű oldalak esetében ajánlott. Megmutatja, hogy éppen hol jár a látogató a honlapon belül. 
## Aktív menüpont jelölése: Fontos, hogy a menüben is jelezzük, hogy éppen melyik menüponton áll a látogató.
## Oldaltérkép: Amellett, hogy a felhasználóinkat is segíti, a keresőoptimalizálást is támogatja.
# '''Használjunk egyértelmű elnevezéseket!''' Sokszor találkoztam olyan megoldással, hogy a kreativitás oltárán feláldozták az egyértelműséget. Pl. „Szolgáltatások” helyett az egyik weboldalon „Csipegess innen!” lett a menü elnevezése. Ebben az esetben félő, hogy sok látogató azért fogja elhagyni az oldalunkat, mert nem lesz türelme/ideje azon gondolkodni, hogy hol találja meg az adott vállalat szolgáltatásait.
# '''Használjuk ki a webes konvenciókat!''' A honlapokon számos olyan megoldás van, amelyek széles körben elterjedtek, és a látogatók dolgát is jelentősen megkönnyítik. Ilyen például, hogy a honlap felső bal sarkában található a cég logója, amelyre kattintva a nyitóoldalra jut vissza a látogató. De ilyenek a különböző ikonok, mint például a vásárlást jelző kosár vagy letöltésre utaló lefelé mutató nyíl. Ezeket az elemeket érdemes megtartani, hiszen jelentősen megkönnyítik a látogatók dolgát.
# '''Legyen világos, mire lehet kattintani!''' A linkeket egységesen jelöljük a teljes website-on belül. Hagyományosan a többi tartalomtól eltérő színnel és aláhúzással szokták jelölni.
# '''Egyértelmű vizuális hierarchiát alakítsunk ki!''' A legfontosabb dolgok legyenek a leghangsúlyosabbak, emellett a logikailag kapcsolódó elemek vizuálisan is kapcsolódjanak össze! A szövegben is emeljük ki a lényeget boldozással vagy eltérő betűszínnel.
# '''Webdesign:''' A webdesignnak (betűtípus, színek, képek stb.) harmonizálnia kell a weboldal tartalmával, erősítenie kell azt. Emellett számos más szempontból is meg kell vizsgálni:
## A választott betűtípus mennyire olvasható?
## A betűszín elüt-e kellően a háttértől, mennyire olvasható?
## A betűszínek mennyire illeszkednek az arculathoz?
## A választott képek mennyire illeszkednek az arculatunkhoz?
## A képek nem pixelesek?
## stb.
# '''Kép helyett szöveg:''' A szöveges tartalmakat soha ne képként tegyük fel! Egyrészt a keresők is sokkal jobban szeretik a szöveges tartalmakat, másrészt gyorsabban betöltődik, és ergonomikusabb is.
# '''Legyen áttekinthető az oldal!''' Ezt mind az elrendezés, mind a szövegek strukturálása (pl. folyó szöveg helyett felsorolás, címek, alcímek alkalmazása) segíti.
# '''Reszponzív webdizájn:''' Ma már számos eszközön neteznek az emberek, ezért fontos, hogy a weboldalunk ne csak egy asztali gép vagy notebook nagyobb képernyőjén mutasson jól, de akár egy tableten vagy okostelefonon is jól jelenjen meg. (A reszponzív webdizájn (responsive webdesign) tulajdonképpen arra utal, hogy a honlap layoutja rugalmasan alkalmazkodik az adott kijelzőhöz.)
# '''Betöltődési idő:''' Ha az oldal túl lassú, nem sok látogató fogja kivárni, hogy betöltődjön. Ezért érdemes minél gyorsabbra tervezni az oldalt. Ezt segíti a letisztult kód, pl. ha a formázásokat CSS-ben kezeljük, emellett például az is, ha minél kevesebb multimédiás tartalmat teszünk fel. A [https://developers.google.com/speed/pagespeed/insights GooglePage Speed Insights] nevű alkalmazását érdemes segítségül hívni, amely javaslatokat ad arra vonatkozóan, hogy mit érdemes megváltoztatni az oldalon annak érdekében, hogy az gyorsabb legyen. 
# '''Űrlapok kialakítása:''' A legtöbb honlap célja, hogy a látogatók valamilyen form kitöltésével kapcsolatba lépjenek a vállalattal, ajánlatot kérjenek, vásároljanak stb. Ezért az űrlapok kialakításakor legyünk nagyon körültekintőek!
## Csak annyi információt kérjünk be, amennyi mindenképp kell. Ha túl hosszú egy űrlap, ott fogja hagyni a látogató.
## Döntsük el, hogy egy oldalon kérjük be az összes adatot, vagy több oldalon át „léptetjük” a látogatót! Egyszerűbb formok esetén mindenképp az egyablakos megoldás javasolt, de összetettebb esetekben a léptetés is szóba jöhet. Ilyenkor aranyszabály, hogy a szorosan összetartozó elemek egy oldalra kerüljenek.
## Legyen egyértelmű, hogy milyen formátumban kell megadni az adatokat! Ez tipikusan a telefonszámoknál szokott gondot jelenteni. Ilyenkor jó, ha a kívánt formátumra mutatunk egy példát.
## Legyenek könnyen kitölthetők a mezők! Például a checkboxok és szövegmezők ne legyenek nagyon kicsik, ne kelljen a látogatónak küzdenie ahhoz, hogy ki tudja tölteni az űrlapot.
## Minden adatbekérésnél válasszuk a legjobb megoldást! Alkalmazhatunk például szöveges mezőket, checkboxokat, radiogombokat vagy legördülő menüket is. Egy példa: a név beírásához adjunk szöveges mezőt, ugyanakkor a címnél a várost már legördülő menüből is ki lehessen választani. 
## Ha egy kötelezően kitöltendő mezőt kihagy a látogató, egyértelműen jelezzük, hogy melyik adat hiányzik! Ilyenkor az űrlap többi részében maradjanak meg a már kitöltött adatok, ne kelljen egy hiba miatt előröl kezdeni az egész folyamatot.
## Az üzenet elküldése után e-mailben küldjünk automatikus válaszüzenetet, hogy a látogató lássa, rögzítettük a kérdését/megrendelését.
# '''Minimalizáljuk a zajt!''' Ez mind a vizuális elemekre vonatkozik (például ne zsúfoljuk tele képekkel a weboldalt), mind a szövegekre (vagyis ne fogalmazzunk terjengősen, legyünk inkább célra törőek)!


== Tippek ==
* Teszteljünk! Kérjünk meg egy áltagos látogatót, hogy nézze át a weboldalunkat! Adjunk neki egyszerű feladatokat, pl. keresse meg a kapcsolat-felvételi űrlapot, nézzen meg egy adott terméket. Figyeljük meg, hogy hogyan navigál az oldalon, mennyire egyszerűen találja meg az említett tartalmakat stb.! Kérjük meg, hogy közben hangosan mondja el a benyomásait, gondolatait, hiszen ebből is rengeteget tanulhatunk a saját weboldalunk használhatóságáról!

== Figyelmeztetések ==
* Ne feltételezzük, hogy a látogatóink is úgy gondolkodnak, mint mi! Szemben velünk ugyanis a látogatók nem ismerik úgy azt a piacot/iparágat, amelyben tevékenykedünk, ezért lehet, hogy teljesen más struktúrában gondolkodnak, és teljesen más kulcsszavakra keresnek. Fontos, hogy a honlap kialakításakor ne a saját, hanem a potenciális ügyfelek fejével gondolkodjunk! 

== Amire szükséged lehet ==
* Webfejlesztő és grafikus a layout megtervezéséhez
* Weboldal
* Sok türelem
* Egy „nem beavatott” szem a teszteléshez

== Felhasznált források, kapcsolódó webcímek ==
* Saját tapasztalatok
* [http://www.sakkom.hu/blog/2010/06/22/a-honlapkeszites-kisabc-je/ SAKKOM Interaktív blogja: A honlapkészítés kisabc-je]
* [http://www.sakkom.hu/blog/2012/03/27/kesz-a-honlapunk-kesz-a-honlapunk/ SAKKOM Interaktív blogja: Kész a honlapunk! Kész a honlapunk?]
* [http://www.sakkom.hu/blog/2012/08/07/5-banalis-honlaphiba-amit-sokan-elkovetnek/ SAKKOM Interaktív blogja: 5 banális honlaphiba – amit sokan elkövetnek]