Nie je žiadnym tajomstvom, že každá webová stránka spoločnosti má štyri hlavné ciele: podpora lojality k značke, zvýšenie návštevnosti, zníženie miery okamžitých odchodov a zvýšenie miery konverzie na potenciálnych zákazníkov alebo predaje! Veľa tu závisí od toho, ako pohodlne sa cítia používatelia, ktorí prídu na váš web.

V našom dnešnom článku si preto povieme, čo je to navigácia na stránkach, vďaka ktorej sa vytvára „útulná atmosféra“. Alebo skôr o najčastejších chybách, ktorých sa dopúšťame počas vývoja.

Chyba č. 1: vlastný štýl

Stalo sa tak, že používatelia sú zvyknutí vidieť navigáciu na stránkach v hornej alebo ľavej časti stránky, a preto ich nenúťte, aby sa po stránkach túlali a hľadali ich, pretože sa im nemusia páčiť tieto hry na schovávačku, ktoré negatívne ovplyvniť miery konverzie a zvýšiť mieru okamžitých odchodov.

Áno, pri vývoji stránok / webov sa vždy odporúča kreatívny prístup, ale pri navigácii na stránkach zjavne neplatí, že by ste mali dať voľnú ruku svojej predstavivosti. Takýmito experimentmi odpútavate pozornosť používateľov, ktorí budú nútení študovať nový štýl navigácie, a nie hlavný obsah zdroja.

Chyba č. 2: Všeobecné štítky položiek ponuky

Ďalším zlatým pravidlom, ako vykonávať navigáciu na webových stránkach, je, že menovky navigačnej ponuky by mali byť informatívne. Napríklad použitie položiek ponuky „Produkty“ alebo „Služby“ je napríklad bežné pre všetky spoločnosti a tieto názvy pre používateľov znamenajú len málo. Tu je ďalší príklad: „Čo robíme“ - rovnaká fráza bez tváre.

Ako v tomto prípade zlepšiť navigáciu na webe? Skúste pre každú ikonu v navigačnej ponuke nájsť najpresnejšie štítky a uvidíte, ako hovoria s používateľmi. Návštevníci stránok k vám prišli hľadať odpoveď na ich otázky, preto ich nezavrhujte stereotypnými frázami a slovami.

Súhlasíte s tým, že vaši zákazníci nehľadajú abstraktné „produkty“ alebo „služby“ a navigácia s takýmito ikonami nebude mať vplyv na propagáciu vašich stránok vo výsledkoch vyhľadávania. Spoznal si sa? Je teda načase sa zlepšiť! Ponuka stránok a ich štruktúra ako celok by mala byť optimalizovaná pre vyhľadávače a mala by hovoriť jazykom zrozumiteľným pre cieľové publikum. Po prečítaní nášho článku až do konca uvidíte, koľko spoločností tento problém rieši.

Chyba č. 3: rozbaľovacia ponuka

Rozbaľovacia ponuka sa stala veľmi populárnou ako navigačný prvok, existujú však dva dobré dôvody, prečo by sa mala používať s maximálnou starostlivosťou.

Mnoho z vás pravdepodobne muselo doslova chytiť rozbaľovaciu ponuku. Jeden trápny pohyb - a utečie od vás! A teraz, keď ste pozbierali svoje sily, znova sa pozriete, kliknete a tam - prekvapenie! - ďalší zoznam možností akcie. Takéto dobiehania sú strašne otravné! Zamyslite sa nad tým, možno by ste už nemali stávkovať so svojimi potenciálnymi klientmi ešte raz?

Ďalší dôvod odmietnutia rozbaľovacej ponuky: nízka návštevnosť nasledujúcich stránok webu alebo hĺbka pohľadu. Ak máte problém s nízkou návštevnosťou stránok najvyššej úrovne, je možné, že dôvod spočíva v použití rozbaľovacej ponuky. Ale vždy existujú výnimky z pravidiel. V tomto prípade platia výnimky pre veľké weby s mnohými sekciami, pretože tu sa pomocou takéhoto menu výrazne zlepšuje použiteľnosť stránok.

Chyba č. 4: veľký počet položiek ponuky

Už to tak bývalo, ale dnes by ste nemali túto tradíciu bez naliehavej potreby dodržiavať, pretože niekedy je aj 8 bodov priveľa. Skúste sa obmedziť na menej z nich, nepresahujúcich 5: čím menej sekundárnych bodov, tým menej často na nich používatelia narazia a tým hlasnejšie budú hovoriť tí najdôležitejší.

Toto pravidlo platí aj pre všetok obsah stránok, nielen pre navigáciu. Každý odstránený prvok zviditeľní tie zvyšné. Stručná navigácia je dôležitá aj pre SEO. Pretože používatelia väčšinu času sledujú odkaz na domovskú stránku, a nie na interné stránky webu, je preto pre vyhľadávače „smerodajný“. Keď je vaša navigácia preplnená odkazmi, domovská stránka stránky sa stane menej smerodajnou v porovnaní s internými.

Chyba č. 5: nevhodné umiestnenie položky ponuky na objednanie

Psychologický výskum ukázal, že prvý a posledný prvok akéhokoľvek zoznamu sú ľahšie zapamätateľné ako stredné. Podobná akcia sa deje s používateľmi. Tento jav sa nazýva „krivka sériovej polohy“ a je graficky vyjadrený vo forme grafu:

Koncentrácia pozornosti je oveľa vyššia na začiatku zoznamu (vplyv prvenstva) a na konci (účinok novosti). Preto je správne umiestniť najdôležitejšie body na začiatok navigácie, sekundárne - do stredu. Položka ponuky „Kontakt“ by mala byť umiestnená na konci TOP navigácie v pravom rohu.

Bonusový tip: odkazy navždy, tlačidlá nikdy!

V prípade, že zaostávate za trendmi webového dizajnu o 8 rokov a stále používate namiesto textových odkazov grafické navigačné tlačidlá, tu je 5 dôvodov, prečo by ste mali svoje návyky prehodnotiť:

• Text tlačidla nie je pre vyhľadávače viditeľný.
• Aktualizácia tlačidiel je ťažšia ako textové odkazy.
• Tlačidlá sa načítavajú pomalšie, a preto sú pre mobilné aplikácie neprijateľné.
• Tlačidlá nie sú čitateľné v rečových a textových prehliadačoch.
• Tlačidlá sú zbytočné, aj keď chcete používať neštandardné písma, napríklad s nástrojmi, ako je TypeKit.

A teraz, ako sme sľúbili: 5 príkladov navigácie po stránkach bez chýb.

Navigácia je najdôležitejším aspektom každej webovej stránky. To, či bude používateľ schopný nájsť pre seba relevantné informácie a či sa bude chcieť vrátiť, závisí od účinnosti vašej webovej navigácie.

Navigácia nie je ničím regulovaná: môže byť transparentná a intuitívna alebo viacúrovňová a neštandardná.

Ako dosiahnuť, aby bola navigácia na webových stránkach čo najefektívnejšia a aký dizajn je pre vás ten pravý?

V spoločnosti zaoberajúcej sa vývojom webových aplikáciína všetky vaše otázky sú odpovede.

Ale najskôr.

ČO JE NAVIGÁCIA?

Navigácia na webe alebo webová navigáciaJe to systém softvérových a vizuálnych nástrojov, ktoré používateľovi pomáhajú navigovať sa na webe a nájsť potrebné informácie.

NAVIGAČNÉ PLÁNOVANIE

Najúčinnejšia webová navigácia je založená na 3 pilieroch:

• Štruktúra
• Stručnosť
• Dizajn

• Štruktúra:navigácia začína podrobnou štúdiou informačná architektúra (IA), čo vám umožňuje vytvoriť optimálny prístup na web a štruktúrovať obsah z pohľadu používateľa. V ideálnom prípade IA stránok pozostáva z minima navigačných vrstiev a poskytuje používateľovi prístup k požadovanej sekcii iba niekoľkými kliknutiami. Samotné rozdelenie sekcií je zároveň jasné, logické a predvídateľné.

• Stručnosť:praktická webová navigácia je vždy jednoduchá a intuitívna. Zahrňte do ponuky stránok iba tie prvky, ktoré sú nevyhnutné pre efektívnu komunikáciu. Kľúčom k úspechu je ponuka pozostávajúca z minimálneho počtu ekvivalentných sekcií, ktoré nenechávajú žiadnu šancu na chybu.

• Dizajn:Pri výbere dizajnu sa zamerajte na čitateľnosť, dôslednosť a dôslednosť. Uprednostnite bežné navigačné prvky. Zložitý systém Vlastné ikony, tlačidlá a štítky sú zlý nápad a môžu mať negatívny vplyv na použiteľnosť a použiteľnosť vašich stránok. Čím menej nepotrebných aktívnych prvkov, tým viac spokojných používateľov.

TRENDY NÁVRHU WEBOVEJ NAVIGÁCIE

Webový navigačný dizajn je neuveriteľne univerzálny, ale niektoré jeho prvky získali väčšiu popularitu ako ostatné. Spoločnosť Umbrella IT vybrala 10 príkladov najúspešnejších návrhov webovej navigácie, ktoré fungujú jednotlivo aj vo vzájomnej kombinácii. Každý z nich má svoje výhody a nevýhody a ktorý z nich je najlepší, je na vás.

1. HORIZONTÁLNA NAVIGÁCIA

Horizontálna navigácia je klasický dizajn, ktorý kombinuje pohodlie s funkčnosťou.

Klady:

• Organické riešenie pre štandardnú orientáciu obrazovky väčšiny monitorov;
• Všetky prvky navigačnej ponuky sú aktívne a sú k dispozícii súčasne;
• Možnosť rozšírenia zoznamu sekcií pomocou rozbaľovacej ponuky pri umiestnení kurzora myši alebo kliknutí.

Mínusy:

• Veľký počet sekcií a veľká rozbaľovacia ponuka môže prekrývať dôležitý obsah;
• Pridávanie nových položiek ponuky je náročné.

2. VERTIKÁLNA NAVIGÁCIA

Vertikálna navigácia je priamou alternatívou k horizontálnej navigácii - ponuka umiestnená v ľavom stĺpci stránky.

Klady:

• Jednoduché úpravy a neobmedzená rozšíriteľnosť ponuky je skvelou voľbou pre komplexné multifunkčné služby a elektronický obchod;
• Optimálne pre rôzne zariadenia.

Mínusy:

• Rozbalené môže prekrývať obsah;
• Spodné navigačné prvky sú sotva viditeľné.

3. VYBERTE MENU

Rozbaľovacia ponuka alebo ponuka je jedným zo spôsobov, ako zachovať plnú funkčnosť a priestor na obrazovke. Ponuka je skrytá za ľavým okrajom obrazovky a zobrazuje sa kliknutím alebo dotykom.

Klady:

• Najkompaktnejší spôsob organizácie webu;
• Dizajn môže byť responzívny, čo je v kombinácii s ikonou hamburgera vynikajúcou možnosťou pre rozhranie mobilnej verzie webu;
• Skrytá ponuka vám umožňuje klásť veľký dôraz na obsah;
• Pohodlný prístup k ponuke z ľubovoľného miesta na webe.

Mínusy:

• Skrytá navigácia sťažuje prístup do ponuky;
• Po rozbalení ponuka prekrýva obsah.

4. VYKLÁDKA

Vstupná stránka je jednostránková stránka s dlhým alebo nekonečným posúvaním, optimalizovaná na konkrétne účely.

Klady:

• Posúvanie rýchlejšie ako klikanie - vhodná možnosť pre spravodajské služby, internetové obchody a weby, ktoré aktualizujú obsah v reálnom čase;
• Nekonečné posúvanie udržuje pozornosť používateľa;
• Umožňuje odosielať veľké množstvo vizuálnych informácií;
• Pohodlné rozhranie pre mobilné platformy.

Mínusy:

• Obmedzená sloboda používateľa: nie je možné kontrolovať poradie informácií a spôsob, akým je obsah prezentovaný;
• Pätu nie je možné použiť;
• Zvyšuje zaťaženie servera;
• Znižuje metriky SEO.

5. PEVNÉ MENU

Opravená alebo priľnavá navigácia staticky ukotví panel s ponukami do konkrétnej časti stránky, čo používateľovi poskytne neustály prístup k možnostiam ponuky.

Klady:

• Pohodlný prístup do všetkých sekcií odkiaľkoľvek na webe je najoptimálnejším riešením pre jednostránkové weby;
• Umožňuje posilniť povedomie o značke pomocou loga správne upevneného v hlavičke;
• Vylepšuje analytiku zvýšením počtu stránok zobrazených na jednu návštevu webu.

Mínusy:

• Preťažená a rušivá hlavička sťažuje navigáciu na webe a prekrýva obsah.

6. MENU HAMBURGERA

Ponuka hamburgerov je navigačná ponuka pôvodne vyvinutá pre smartfóny, ale stále častejšie sa zobrazuje na obrazovkách prenosných počítačov. Je to ikona, ktorá v sebe skrýva široké možnosti a kategórie. Menu dostalo svoj názov podľa podobnosti ikony s hamburgerom - tri horizontálne pruhy ponuky symbolizujú tri vrstvy slávneho sendviča.

Klady:

• Ikona hamburgera je prístupná odkiaľkoľvek na webe jediným kliknutím alebo dotykom;
• Umožňuje umiestniť neobmedzený počet možností;
• Šetrí miesto čo najviac a dokonale sa zobrazuje na mobilných zariadeniach;
• Pomáha kompaktne umiestniť sekundárne možnosti (napríklad históriu a nastavenia) bez preťaženia obrazovky alebo používateľa.

Mínusy:

• Napriek svojmu rozšíreniu nie je pre používateľov vždy ľahké nájsť skrytú ponuku;
• Hamburger je nevypovedané štandardné menu na platforme Android a jeho použitie v iOs má za následok poruchu základných navigačných prvkov a preťaženie navbaru.

7. ADAPTÍVNA NAVIGÁCIA

Responzívna navigácia je variabilný dizajn, ktorý sa automaticky prispôsobuje rôznym šírkam obrazovky a mobilným platformám.

Klady:

• Cross-platform: stránka bola pôvodne navrhnutá pre vysokokvalitné zobrazenie na počítačoch aj mobilných zariadeniach;
• Jedna adresa URL: vďaka responzívnej navigácii nie je potrebné vytvárať mobilnú verziu webu a absencia presmerovaní zvyšuje optimalizáciu pre vyhľadávače.

Mínusy:

• Aktívne prvky typické pre desktopové verzie stránok (vložené mapy, video, animácie) spomaľujú načítavanie stránok na mobilných zariadeniach;
• Mobilná verzia dizajnu sa môže ukázať ako nečitateľná a preťažená, pretože používatelia mobilných zariadení spravidla používajú užšiu funkčnosť stránok;
• Neprítomnosť alternatívy: v prípade samostatnej mobilnej verzie je vždy možné vrátiť sa k plnej verzii stránky. Responzívny dizajn to neumožňuje: ak je prispôsobené rozloženie nepohodlné alebo skrýva dôležitý navigačný prvok, jedinou možnosťou je vyhľadať prenosný počítač alebo prejsť na webovú stránku konkurencie.

8. MEGA-MENU

Mega Menu je rozsiahly navigačný panel, ktorý sa zobrazí pri umiestnení kurzora myši alebo kliknutí. Mega menu nielen štruktúruje obsah do skupín a stĺpcov v textovom formáte, ale aktívne používa aj rôzne vizuálne pomôcky.

Klady:

• Sú k dispozícii všetky možnosti súčasne: najrýchlejší možný smer používateľa je veľkým plusom pre internetové obchody a weby so širokou škálou možností, kategórií a služieb;
• Rozbalí a skryje pri umiestnení kurzora myši, kliknutí alebo klepnutí bez ohrozenia obsahu.

Mínusy:

• porušenie princípu organizácie môže skomplikovať navigáciu;
• ťažko implementovateľné na mobilných zariadeniach.

9. POKROČILÉ NOHY

Päta alebo „päta“ stránky je päta stránky. Štandardná päta zvyčajne obsahuje ďalšie informácie, ako sú kontakty, odkazy, upozornenie na autorské práva a tlačidlá sociálnych médií. Rozšírená päta okrem týchto údajov obsahuje aj úplné navigačné menu, ktoré je možné použiť ako primárny alebo alternatívny navigačný systém. Rozšírená päta je jednoduchý spôsob, ako prekročiť štandardný dizajn a zlepšiť funkčnosť vašich webových stránok.

Klady:

• Poskytuje alternatívne alebo dodatočné menu pre tých, ktorí v hlavnom nenašli požadovaný obsah;
• Umožňuje umiestniť dôležitý obsah, ale nezapadá do obsahu hlavných stránok;
• Ďalšie možnosti v klasickej päte (obsahujúce iba kontaktné informácie) vám umožňujú rozšíriť vašu zákaznícku základňu;
• Zdôrazňuje pozornosť na určité informácie.

Mínusy:

• Bežný používateľ často nečíta do päty.

10. PLNÁ NAVIGÁCIA OBRAZOVKY

Na rozdiel od všetkých tu uvedených možností dizajnu nie je navigácia na celú obrazovku zameraná na úsporu miesta na obrazovke. Naproti tomu navigácia na celú obrazovku používa úvodnú stránku na 100 percent a kombinuje text s grafikou.

Klady:

• Poskytuje jasnú štruktúru stránok;
• Otvára množstvo príležitostí pre vizuálny dizajn;
• Vzhľadom na preťaženú domovskú stránku obsahujú hlavné podsekcie iba obsah, ktorý výrazne šetrí miesto na obrazovke;
• Jednoduchá implementácia na mobilných platformách;
• Ideálne pre vysoko špecializované stránky.

Mínusy:

• Možné zníženie rýchlosti sťahovania;
• Iracionálna voľba pre stránky so zložitou navigačnou mapou.

A tradičný bonus od Umbrella IT, ktorý je vždy pripravený ponúknuť vám viac - možnosť 11 - ANIMOVANÉ NAVIGAČNÉ PRVKY .

Racionálne používanie animovaných prvkov ako primárneho alebo sekundárneho navigačného prostriedku vám umožňuje diverzifikovať konzervatívny dizajn a upútať pozornosť používateľov.

Klady:

• Upútajte pozornosť používateľov;
• Štruktúra ponuky;
• Zlepšujú použiteľnosť stránok a orientujú používateľa.

Mínusy:

• Nadmerný vizuálny neporiadok sťažuje navigáciu na webe;
• Môže spomaliť rýchlosť načítania webových stránok.

Vo fáze výberu a vývoja návrhu webovej navigácie je ťažké predpovedať, ktorá možnosť bude víťazná. Úspech každého konkrétneho prípadu závisí od niekoľkých faktorov: od obchodného účelu, cieľov a zámerov stránky, povahy obsahu, cieľového publika a vašich osobných preferencií.

Uvedené príklady sú len malou časťou toho, čo vám umožňuje implementovať moderný webový design.Stále máte otázky?, A my pomôžeme premeniť vaše najtrúfalejšie projekty na realitu.

Dobrý deň, milí predplatitelia!

Práve som dokončil prácu na ďalšom projekte. Okrem hlavného menu obsahoval aj navigácia... A myslel som si, že by bolo pekné ukázať vám, ako sa také veci dajú robiť v niekoľkých riadkoch kódu. A to sa deje výlučne pomocou html a css.

Takáto navigácia je zvyčajne umiestnená na ľavej strane stránky. Na jeho vývoji nie je nič zložité. Každá navigačná položka je uzavretá v značke

…

... Je do neho vložený odkaz.

Maketa PSD z tejto položky na školenie je možné stiahnuť.

Táto lekcia je k dispozícii aj v video verzia ktoré je možné stiahnuť tu:

Vo všeobecnosti všetko! Pozrime sa na kód a všetko bude konečne jasné.