hdesign blog&portfolio

Egy összetett weboldalnak szüksége van breadcrumbs, vagy más néven kenyérmorzsa navigációra. Segíti a felhasználókat, hogy visszataláljanak a kiindulási pontra, ezzel is növelve az oldal ergonómiáját.

Csináljunk egy egyszerű szerkezetű, kis méretű, és könnyen felhasználható breadcrumbs navigációt:

Lista szerkezetet fogunk alkalmazni, úgy hogy az aktuális oldalt nem linkeljük.

HTML kód

<ul id="crumbs">
	<li><a href="#">Főoldal</a></li>
	<li><a href="#">Szolgáltatások</a></li>
	<li><a href="#">Árvíztűrő szolgáltatás</a></li>
	<li>Leírás</li>
</ul>

Látszik, hogy a listánkból, csak az ul kap egy ID-it, a többi elemet ezen keresztül fogjuk megszólítani css-ből.

CSS kód

Először is kinullázzuk az ul és li elemeket.

ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}

Ezután jöhet a #crumbs elemünk, aminek adunk egy border tulajdonságot, megadjuk a szélességét és a magasságát.

#crumbs {
	border: 1px solid #CCC;
	height: 30px;
	width: 580px;
}

Most formázzuk meg az ul-ben lévő li elemeket. Ugye ennek nem kell adni külön szelektort, mivel az ul-nek már adtunk, így azon keresztül megszólíthatjuk.

A float-olás azért kell, hogy egymás mellé kerüljenek a li elemek, megadjuk a magasságát, a sorközt (line-height), ami azért kell, hogy ne kelljen belső margót használnunk majd a linknél, mert akkor nem látszana a háttérkép. Viszont nem tudjuk teljesen elkerülni a belső margó használatát, a link nélküli li elem miatt. Ahhoz hogy bal oldalról távolságot tartsunk, kell adni neki egy padding-left tulajdonságot, így ez közvetve a linkre is igaz lesz.

#crumbs li {
	float: left;
	height: 20px;
	line-height: 30px;
	padding-left: 10px;
}

Most megformázzuk az a elemünket. Blokk szintű elemmé kell tenni, hogy az a teljes felületén kattintható legyen. Itt is megadjuk a magasságát, ami jelen esetben 30 pixel. Jobb oldalról kell adni neki egy belső margót, hogy a háttérképre ne lógjon rá. Végezetül megadjuk neki a háttérkép útvonalát, azt hogy ne ismételje, majd a jobb-közép igazítást.

#crumbs li a {
	display: block;
	height: 30px;
	padding-right: 10px;
	background: url(img/crumbs.png) no-repeat right center;
}

Ahhoz hogy felhasználóbarát dolgot hozzunk létre, adjunk a linknek színt, és aláhúzással jelöljük hogy az bizony kattintható…

#crumbs li a {
	text-decoration: underline;
	color: #666;
}

…majd csináljunk hover állapotot is neki, hogy a felhasználóval érzékeltessük: “ha rám kattintasz, valami történni fog”.

#crumbs li a:hover {
	color: #0C6;
}

Az webergonómia (usability) olyan, mint egy jól berendezett konyha. Minden fontos dolog kéznél van, és kényelmesen, karnyújtásnyira elérhető. Ha a kanalak a szekrény tetején lennének, akkor számunkra kényelmetlen lenne, mivel sűrűn használjuk őket. Ilyenkor mit teszünk? Átrakjuk valami kényelmesebben elérhető helyre a kanalakat, mondjuk egy fiókba. Hogy mi itt a probléma? A felhasználó ugyanezt nem tudja megtenni weboldalunkal!

Egy hosszabb autóút közben – ahol egy adminisztrációs felületről volt szó – fejtettem ki kollégáknak, hogy egy weboldal, vagy UI (user interface), ergonómiája nem akkor lesz jó, ha a felhasználó meg tudja szokni a használatát, hanem közel első ránézésre tudja azt, hogy merre-hogyan-hova-hánylépés.

Természetesen valamilyen szinten a látogatónak meg kell szoknia egyes weboldalakat, de ha betartjuk az alapszabályokat (erről majd később), akkor sokat segítünk neki ebben. Költhetünk nagyon sokat SEO-ra, meg marketing, meg mindenfélére, de ha a weboldalunk ergonómiája nem jól van megvalósítva, a felhasználó el fog navigálni oldalunkról.

Magyarországon sajnos kevesen foglalkoznak a témával, megrendelői és készítői oldalon is. Megrendelők többnyire lehúzásnak, felesleges dolognak tartják, készítői oldalon meg sokan még nem is hallottak a témáról, nem beszélve a “szomszédpisti” webergomágusokról.

Korábbi hasonlatra visszatérve, amikor egy konyhát rendezünk be (weboldalt tervezünk), mindent úgy kell elrendeznünk, hogy a szakácsnak (felhasználóknak) kézre álljon. Ehhez ismernünk kell a szakács (felhasználók) viselkedését, és meg kell határoznunk, hogy mit használ, mi az amit megszokott.

Vannak alapszabályok, amiket megszoktak a felhasználók, és amiket nekünk, weboldalak atyjainak be kell tartanunk. Ha ezeket az alapszabályokat valaki áthágja, a weboldal “szétesik” a látogató előtt. A való életben is mindent úgy rendezünk, ahogy nekünk kényelmes, ahogyan megszoktuk.

Csak egy alappélda: alapvető hogy egy űrlap elküldés gombjának, valahol az űrlap alatt kell lennie, és nem a weboldal tetején, vagy valahol egészen máshol. Képzeljük el, hogy a látogató kitölti az űrlapunkat, majd ösztönösen keresi az űrlap elküldésének lehetőségét, az űrlap alatt, mivel máshol így szokta meg.

Mi valahová egészen máshová tettük, mondjuk az űrlap tetejére. Ha nem találja meg, akkor inkább mond ránk valami nem éppen nyomdapapírt kívánót, majd bezárja a lapot. Ilyenkor a látogató a weboldalunkat elraktározza memóriájába, az “ide többet nem kell jönni” címke alá (bocsánat a szóhasználatért).

A másik súlyos tipikus hiba, ha a felhasználóknak nem jelezzük egyértelműen, hogy mi fog történni, vagy mi történt, például nem jelezzük a linkeket más színnel, aláhúzással. Ha a felhasználó a link fölé húzza az egeret, akkor éreztetni kell vele, ha oda kattint, valami történni fog (a:hover).

Azzal nemigen tudunk mit kezdeni, ha a látogató még soha nem látott számítógépet, főleg internetet, nem is ez a cél. Arra kell figyelni, hogy ha egy olyan látogató érkezik weboldalunkra, aki rendelkezik egyfajta rutinnal a weben, eligazodjon.

Természetesen a webergonómia nem csak ennyiről szól, viszont ha csak egy kicsit odafigyelnénk, minimum az alapszabályokra, máris könnyebb lenne a felhasználóknak. Nagyon hosszú sort lehetne írni ilyen alapvető problémákról, melyekkel mindenki nap mint nap találkozik, de remélem gondolatindítónak elegendő arra, hogy mindenki átgondolja: vajon az én blogom/weboldalam megfelelő a látogatóimnak? Vajon hányszor káromkodtak, miközben nézték?

Te hogy érzed? Megtettél mindent a látogatóidért?

Fotó: sxc.hu