Hlavná stránka >> Články a návody >> Navigácia a usporiadanie stránky
Navigácia a usporiadanie stránky
Základné usporiadanie
Každý prvok navigácie má konkrétnu polohu. Menu, hlavičku či pätku umiestňujme tak, ako sú užívatelia zvyknutý. Presné pravidlá usporiadania navigácie asi nenájdete, ale logika nám dovolí myslieť na to, že logo nepatrí dole a pätička hore. Pozrime sa bližšie na jednotlivé časti.
Hlavička
Je rozdiel mezdi hlavičkou webu a hlavičkou HTML dokumentu. Dokumentová, ohraničená tagmi <head> a </head>, nám určuje informácie o dokumente. Tá nás však momentálne zaujímať nebude.
Hlavička webu je dôležitá časť stránky. Prezrádza nám, na aký web sme sa dostali a snaží sa vystihnúť, o čom je obsah stránky a podáva tak dôležitú informačnú hodnotu. O podanie informácie sa stará nadpis, alebo logo, ktoré musí byť výstižné. Ak robíme stránku o psoch, nedáme do hlavičky mačku. Logo by malo okrem obrazového premietnutia obsahovať názov stránky a stručný slogan. Keď sa užívateľ pozrie na logo, musí hneď vedieť kde sa dostal.
Keďže má hlavička webu dosť luxusné miesto, vrchol stránky, každý užívateľ ju vidí. Všetky podstránky webu by mali odkazovať na hlavnú, domovskú stránku. Užívatelia sú zvyknutý, že práve klikom na logo sa na hlavnú stránku dostanú. Preto túto zásadu dodržiavajte.
Obsah
Obsahová časť stránky je tá, pre ktorú prišli návštevníci. Preto ju od ostatných častí musíme dôkladne a viditeľne oddeliť. V žiadnom prípade nemiešajte menu a obsah do jedného celku. Obsah by sa mal vyskytovať približne v strede stránky - v strede pozornosti. K obsahu patrí text, o ktorom nájdete informácie v samostatnom článku.
Menu
Na stránku môžeme menu umiestniť vodorovne aj zvisle. Užívatelia sú na oba smery zvyknutý. Nepoužívajte kruhové, alebo iné originálne usporiadanie menu. Návštevníci to majú radi asi ako ošípaná eletrické vidly. Vodorovné menu vkladajte rovno pod hlavičku, nie pod obsah. Zvislé menu je najčastejšie vložené v ľavej časti webu. Niekedy je vhodné umiestniť ho aj vpravo a sú dovolené aj menšie experimenty ako umiestnenie vedľa hlavičky. Buďte však opatrný a pozor na viditeľnosť a prehľadnosť menu.
Ak máme v zvislom menu príliš veľa odkazov, oddeľujeme ich po zmysluplných skupinkách s nadpismi. Keď treba do menu umiestniť viac pododkazov, vypracujeme menu zo zložitým zoznamom. Vysúvacie menu sa používať smie, ale musí dobre fungovať aj pri vypnutých technológiách, napríklad javascriptu. Vodorovné menu by sa malo používať len pri malom počte hlavných odkazov.
Často na stránkach vidieť vodorovné aj zvislé menu zároveň. Vodorovné menu by malo slúžiť ako hlavné menu a zvislé ako vedlajšie, pričom sa mení v závislosti od vodorovného. Najhoršia chyba, ktorej sa môžete dopustiť, je vloženie rovnakých odkazov do hlavného aj vedlajšieho menu. Užívatelia sa v takomto prípade pletú, zmätkujú a ťažko pochopia ovládanie navigácie.
K menu patria odkazy, ktoré sú pre použiteľnosť veľmi dôležité. O nich toho platí viac, preto sú tipy na ich použiteľnosť rozpísané v inom článku.
Pätka
Pätka je pre každý web veľmi dôležitá. Je umiestnená vždy dole. Keď užívateľ hľadá e-mail autora, scroluje dole, keď hľadá informácie o validite, scroluje dole, keď hľadá prehlásenie o prístupnosti, scroluje dole... Do pätky sa teda vkladajú informácie, ktoré by mohli užívateľa zaujímať. Nezabúdajte tam uviesť aspoň autora stránky a jeho e-mail!
Layouty
Hlavné usporiadanie stránky je ponechané na Vás. Najprv by ste mali vedieť pár základných poznámok o tom, na čo sú užívatelia zvyknutý.
- Stránka bez rozvrhnutia (usporiadania) - stránka bez rozvrhnutia (bez menu či hlavičky) by nemala byť rozsiahla. Mala by poskytovať informácie, zamerané len na jdenu vec a počet odkazov by mal byť minimálny.
- Stránka len s vodorovným menu - takéto stránky bývajú jednoduché a prehľadné. Toto usporiadanie sa vyskytuje najmä pri stránkach so vzdelávacím charakterom.
- Dvojstĺpcový layout - menu vľavo, alebo vpravo a obsah na druhej strane. Dovoliť si môžete aj vodorovné menu.
- Trojstĺpcový layout - menu je najvhodnejšie umiestniť doľava, obsah je v strede a pravý stĺpec nemá úlohu navigácie. S vodorovným menu sa stráca prehľadnosť.
- Viacstĺpcový layout - v tom sa zorientuje málokto. Doporučujem nepoužívať.
Stabilita
Na každej stránke jedného webu musí byť rovnaké usporiadanie, farby, či poradie odkazov v menu. V hlavičke teda zostáva stále rovnaké logo, menu je vždy na jednej strane, v pätke sa nemenia e-maily, aj keď ich máte viac. Poradie odkazov teda tiež musí zostať také isté. Prečo je to vlastne také dôležité? Predstavte si, že prídete domov a tam, kde ste mali spálňu je teraz kuchyňa, v obývačke máte kúpelňu, atď. A každý deň by sa to menilo. Zvykli by ste si?
Ostatné prvky
- Vyhľadávanie - pri rozsiahlich stránkach je pre užívateľov veľmi dôležité. Umiestňujte ho na viditeľné miesto (odporúča sa do pravého horného rohu) a do tlačítka pre vyhľadávanie je najvodnejší text "hladať", alebo "vyhľadať".
- Mapa stránok - na webe s množstvom podstránok je veľmi užitočná. Obsahuje rozčlenenie odkazov na stránke a to zrozumiteľne pre užívateľa. Pre príklad si môžete pozrieť mapu stránok tohto webu
- Mininavigácia - nájdete ju aj pod názvom drobčeková. Slúži na to, aby sa užívateľ na stránke nestratil. Je v tvare: Niečo >> odkaz >> pododkaz. Takáto navigácia je aj na tejto stránke hore.
- Záložky - Pri príliš dlhých textoch sa odporúčajú vložiť záložky, aby užívateľ nemusel scrolovať. Pre bližšie informácie o záložkách skočte k Yuhuovi.
- Rozcestník - Upozorňuje na nasledujúci, resp. predchádzajúci článok na webe. Príklad opäť môžete vidieť v spodnej časti, pod každým článkom na tomto webe.
<< Súvis použiteľnosti a prístupnostiVšetky článkyPoužiteľné odkazy >>