Nem titok, hogy egy adott vállalat minden egyes honlapja négy fő célkitűzést követ: a hűséges kapcsolat oktatása a márkához, a forgalom növekedése, a kudarcok számának csökkenése, a konverziós mutatók növelése a LIDA-hoz vagy az értékesítéshez! Itt sok mindent attól függ, hogy milyen kényelmes felhasználók voltak, akik a webhelyére esnek.

Ezért a jelenlegi cikkünkben beszélünk arról, hogy mi a navigáció a webhelyen, köszönhetően, hogy melyik a "hangulatos légkör" létrejön. Vagy inkább - a fejlődésben elkövetett leggyakoribb hibákról.

Hiba №1: Nem szabványos stílus

Úgy tűnt, hogy a felhasználók megszokta, hogy a webhely navigálása az oldal felső vagy bal részeiben való navigációt láthassa, így ne erőltesse őket arra, hogy a keresési helyszínen sétáljanak, mivel az ilyen játékok elrejtése és keresése nem tetszik ez hátrányosan befolyásolja a konverziós mutatókat, és növeli a kudarcok százalékos arányát.

Igen, a kreatív megközelítést mindig üdvözli az oldalak / webhely fejlesztésében, de a webhely navigáció nyilvánvalóan nem így van az, amelyben érdemes megadni a fantázia akaratát. Az ilyen kísérletek elvonják a felhasználók figyelmét, akik kénytelenek lesznek tanulmányozni a navigáció új stílusát, és nem az erőforrás fő tartalmát.

2. hiba: Univerzális feliratok menüelemek

Egy másik aranyszabály, hogyan kell navigálni a helyszínen, - a címkézési menünek informatívnak kell lennie. Például a menüelemek "áruk" vagy "szolgáltatások" - közös minden vállalat számára, és hasonló nevek kevéssé mondhatják a felhasználókat. Itt van egy másik példa: "Mit csinálunk" ugyanaz az arctalan kifejezés.

Ebben az esetben a webhely navigációjának javítása? Próbálja meg kiválasztani a legpontosabb feliratok minden navigációs menüpont ikonját, és meglátja, hogyan jelentik a felhasználók. A webhely látogatói eljöttek Önnek abban, hogy válaszoljanak a felmerült kérdésekre, így nem ropognak tőlük sablon kifejezésekkel és szavakkal.

Egyetértenek abban, hogy az ügyfelek nem keres elvont „áruk” vagy „szolgáltatás”, és navigálás ilyen ikonok nem befolyásolja a támogatása a helyszín az eredmények a keresési eredményeket. Tudtad magad? Tehát itt az ideje, hogy helyes! A webhely menüjét és az egész szerkezetét optimalizálni kell a keresőmotorok számára, és beszélni kell a nyelvbarát nyelven. Miután elolvasta a cikkünket, meg fogja látni, hogy hány vállalat megoldja az ilyen feladatot.

Hiba száma 3: legördülő menü

A legördülő menü navigációs elemként rendkívül népszerűvé vált, de két jelentős oka van annak, hogy a maximális óvatossággal kell megközelíteni a használatát.

Sokan valószínűleg szó szerint meg kellett érteniük a legördülő menüt. Egy kínos mozgás - és elfutott tőled! És most, összegyűjti az erőkkel, nézd újra, kattintson, és ott - meglepetés! - A cselekvési lehetőségek másik listája. Hasonló fogásokat rettenetesen bosszantottak! Gondolj arra, hogy lehet-e még egyszer, hogy az idegeket potenciális ügyfeleire fegyesítsék?

A legördülő menü meghibásodásának másik oka: a következő webhelyek alacsony részvétele vagy a mélység megtekintése. Ha problémája van a felső szintű oldalak alacsony részvételével, akkor lehetséges, hogy az ok a legördülő menü használatával jár. De a szabályokból mindig vannak kivételek. Ebben az esetben a kivételek nagy méretű részekre érvényesek, mivel az ilyen menü használatával jelentősen javul a webhely használata.

Hiba №4: nagyszámú menüelem

Tehát korábban volt, de nem ragaszkodhatsz erre a hagyományra, akut szükségesség nélkül, mert néha akár 8 pont is túl sok lehet. Próbálja korlátozni őket, hogy egy kisebb számú, de legfeljebb 5: minél kisebb a kisebb tételek, annál kevésbé a felhasználó elől fogják tárolni őket, annál hangosabb lesz beszélni a legfontosabb.

Ez a szabály a webhely teljes tartalmára is működik, és nem csak navigálni. Minden távoli elem a fennmaradó észrevehetőbbé teszi. Navigációs rövidség is fontos a SEO számára. Mivel leggyakrabban a felhasználók a linken a főoldalra esnek, és nem a webhely belső oldalain, így a keresőmotorok "hiteles". Ha a navigáció tele van linkekkel, a webhely honlapja kevésbé hitelessé válik a belsőhez képest.

5. hiba száma: A menüpont nem megfelelő helye megrendeléshez

A pszichológia területén végzett kutatások kimutatták, hogy a listák első és legutóbbi elemei könnyebbek, mint a középső elemek. Hasonló hatás történik a felhasználókkal. Ez a jelenség megkapta a "soros pozíciók" nevét ", és egyértelműen grafikon formájában fejeződik ki:

A figyelem koncentrációja szignifikánsan magasabb a lista elején (elsődleges hatás) és a végén (újdonság hatás). Ezért helyes, hogy a navigáció kezdetén a legfontosabb pontokat rendezze el, kisebben - a központban. A "Kapcsolat" menüpontot a szélsőjobb sarokban lévő felső navigáció végén kell elhelyezni.

Bónusz Tipp: Linkek - Örökké, Gombok - Soha!

Amennyiben Ön mögött tendenciái web design 8 éve, és még mindig használható grafikus navigációs gombok helyett szöveges linkek, akkor neked adunk 5 ok, hogy vizsgálja felül a szokások:

• A gombok szövege nem látható a keresőmotorok számára.
• Frissítse a gombokat bonyolultabb, mint a szöveges linkek.
• A gombok lassabbak, ami lehetővé teszi számukra elfogadhatatlanok a mobil alkalmazások számára.
• A gombokat a beszéd és a szövegböngészők nem olvasták.
• A gombok nem szükségesek, még akkor is, ha nem szabványos betűtípusokat szeretne használni, például olyan eszközöket használva, mint a Tyeskit.

És most, ahogy azt ígértük: 5 példa a helyszíni navigációra hibák nélkül.

A navigáció bármely webhely legfontosabb szempontja. A felhasználó képes lesz arra, hogy megtalálja a releváns információkat magának, és hogy visszatérjen-e - függ-e a webes navigáció hatékonyságától.

A navigáció nem szabályozott: átlátszó és intuitív vagy többszintű és nem szabványos lehet.

Hogyan lehet a navigációt a helyszínen a lehető leghatékonyabbá tenni a lehető leghatékonyabbnak és milyen formatervezésnek felel meg?

webfejlesztés Vannak válaszok az összes kérdésre.

De először az első dolog.

Mi a navigáció?

Helyszíni navigáció vagy web navigáció- Ez egy olyan szoftver és vizuális eszközök rendszere, amelyek segítenek a felhasználónak a webhelyen, és megtalálják a szükséges információkat.

Navigációs tervezés

A leghatékonyabb web navigációt 3 bálnán tartják:

• Szerkezet
• Laconitás
• Tervezés

• Szerkezet: A navigáció részletes tanulmányokkal kezdődik információs architektúra (EA), amely lehetővé teszi, hogy optimális hozzáférést biztosítson a webhelyhez és a szerkezet tartalmához a felhasználó szempontjából. Ideális esetben a webhely egy minimális navigációs rétegből áll, és mindössze néhány kattintással hozzáférést biztosít a kívánt szakaszhoz. Ugyanakkor a szakaszok megosztása tiszta, logikus és kiszámítható.

• Lahetőség: A gyakorlati web navigáció mindig egyszerű és intuitív. Csak a hatékony kommunikációhoz szükséges elemeket tartalmazza. A siker kulcsa egy menü, amely minimális számú egyenértékű részből áll, amely nem hagy semmilyen hibát.

• Tervezés: A design kiválasztásakor összpontosítson az olvashatóságra, a szerves és az egységességre. Előnyben részesíti az általánosan elfogadott navigációs elemeket. Kusza rendszer nem szabványos ikonok, gombok és parancsikonok rossz ötlet, amely negatívan befolyásolhatja webhelyének kényelmét és gyakorlatiasságát. Minél kisebb az extra aktív elemek - a bővelkedő felhasználók.

A webes navigációs tervezés trendjei

A web navigáció kialakítása szokatlanul változó, de néhány eleme nagy népszerűséget nyert, mint mások. Umbrella Kiválasztott 10 példát a legsikeresebb web-navigációs tervekre, amelyek egyenként és egymással együtt dolgoznak. Mindegyikük rendelkezik saját előnyeivel és hátrányaival, és melyik a legjobb - csak akkor oldja meg.

1. Vízszintes navigáció

A vízszintes navigáció egy klasszikus kialakítás, amely kombinált kényelmet a funkcionalitással.

Előnyök:

• Szerves oldat a legtöbb monitor szabványos képernyő-tájolásához;
• A navigációs menü összes eleme aktív és elérhető egyszerre;
• A partíciók listájának bővítése egy menüvel a kurzor vagy a préselés menü segítségével.

Minuszok:

• Nagyszámú partíció és a volumetrikus legördülő menü átfedheti a fontos tartalmat;
• Új menüelemek hozzáadása nehéz.

2. Függőleges navigáció

Függőleges navigáció - Közvetlen vízszintes navigációs alternatíva - Az oldal bal oldali oszlopában található menü.

Előnyök:

• Könnyű szerkesztés és korlátlan menü bővítés - nagyszerű lehetőség a komplex multifunkcionális szolgáltatásokra és az e-kereskedelemre;
• Optimálisan különböző eszközökre.

Minuszok:

• A telepített formában átfedheti a tartalmat;
• Az alacsonyabb navigációs elemek kisebbek.

3. Lowning menü

Az utazási menü vagy a diavetítés menü az egyik módja annak, hogy mentse a teljes funkcionalitást és a képernyőterületet. A menü a képernyő bal szélének mögött van elrejtve, és megjelenik a kattintás vagy az érintés.

Előnyök:

• A leginkább kompakt módon a webhely megszervezéséhez;
• A tervezés adaptív lehet, hogy egy hamburger-ikon kombinálva nagyszerű lehetőséget kínál a webhely mobil verziójának felületére;
• A Rejtett menü lehetővé teszi, hogy erős hangsúlyt fektet a tartalomra;
• Kényelmes hozzáférés a menühöz bárhonnan.

Minuszok:

• A rejtett navigáció megnehezíti a menü elérését;
• A menü telepítésében átfedi a tartalmat.

4. Ledding

A leszállás egy egyoldalú webhely, hosszú vagy végtelen görgetéssel, bizonyos célokra optimalizálva.

Előnyök:

• Fordítsa a gyorsabban, mint a kattintás - megfelelő lehetőség a hírszolgáltatásokhoz, online áruházakhoz és webhelyekhez, amelyek a tartalmat valós időben frissítik;
• A végtelen görgetés fenntartja a felhasználó figyelmét;
• Lehetővé teszi, hogy nagy mennyiségű vizuális információt helyezzen;
• Kényelmes interfész mobil platformokhoz.

Mínusz:

• Korlátozott Felhasználói szabadság: Lehetetlen szabályozni az információrendet és a tartalom képviseletének módját;
• Lehetetlen használni láblécet;
• Növeli a kiszolgálók terhelését;
• Csökkenti a SEO mutatókat.

5. Fix menü

Rögzített vagy "ragadós" navigáció Statikus biztosítja a menüpanelt az oldal egy adott részében, biztosítva a felhasználó számára, hogy állandó hozzáférést biztosítson a menüopciókhoz.

Előnyök:

• Kényelmes hozzáférés minden szakaszhoz bárhonnan a webhelyen - a legoptimálisabb megoldás az egyoldalas oldalak számára;
• Lehetővé teszi, hogy megerősítse a márka tudatosságát a fejlécben kompetens logóban;
• Növeli az Analytics indikátorokat, növelve a böngészési oldalak számát a webhely látogatásához.

Minuszok:

• A túlterhelt és rögeszmés Heder megnehezíti a webes navigációt és átfedi a tartalmat.

6. Hamburger menü

Hamburger-menü - Navigációs menü, amelyet eredetileg okostelefonokra terveztek, de egyre inkább megjelenik a laptop képernyőkön. Ez egy olyan ikon, amely számos lehetőséget és kategóriákat rejt. A megnevezett menü az ikon hasonlósága miatt Hamburger, három vízszintes menüszalag szimbolizálja a híres szendvics három rétegét.

Előnyök:

• A Hamburger-ikon elérhető a webhely bármely pontjáról egy kattintással vagy érintéssel;
• Lehetővé teszi, hogy korlátlan számú lehetőséget hozzon létre;
• A maximális megmenti a helyet, és ideális esetben megjelenik a mobileszközökön;
• Segíti a másodlagos opciókat (például a történelem és a beállítások) tömörítését, anélkül, hogy nem a képernyő vagy a felhasználó túlterhelt.

Minuszok:

• A prevalenciájának ellenére a felhasználók nem mindig találhatók rejtett menüt;
• Hamburger egy unbelled szabvány menü az Android platform, és használata az iOS vezet sérti a egységességét az alapvető navigációs elemek és túlterheli a navigációs panel.

7. Adaptív navigáció

Adaptív navigáció - változó kialakítás, automatikusan beállított különböző képernyőszélességekhez és mobil platformokra.

Előnyök:

• Keresztlemez: A webhely eredetileg a számítógépeken és a mobil eszközökön kiváló minőségű kijelzőre tervezhető;
• Egységes URL: Adaptív navigáció esetén, nem kell létrehoznia a webhely mobil verzióját, és az átirányítások hiánya növeli a keresőoptimalizálását.

Minuszok:

• A webhelyek asztali verzióira jellemző (beépített kártyák, videó, animáció) lassítják a mobileszközök webhelyterhelését;
• A design mobil verziója olvashatatlan és túlterhelt lehet, tekintettel arra a tényre, hogy a mobileszközök felhasználóit általában a webhely szűkebb működési funkciója használja;
• Hiány alternatívák: Egy független mobilverzió esetében mindig van lehetőség arra, hogy visszatérjen a webhely teljes verziójához. Az adaptív kialakítás nem teszi lehetővé ezt: Ha az adaptált elrendezés kényelmetlen, vagy egy fontos navigációs elemet elrejti, az egyetlen lehetőség, hogy keressen laptopot, vagy forduljon a versenytársak helyén.

8. Mega-menü

A Mega-Menu egy kiterjedt navigációs panel, amely felbukkan, ha a kurzort vagy a nyomást lebegíti. A Mega-menü nem egyszerűen a csoportok és a hangsugárzók szöveg formátumában, hanem aktívan használ különböző vizuális eszközöket is.

Előnyök:

• Minden lehetőség egyszerre érhető el: a felhasználó leggyorsabb iránya egy nagy plusz az online áruházakhoz és webhelyekhez, amelyek kiterjedt opciókkal, kategóriákkal és szolgáltatásokkal rendelkeznek;
• Feltárja és elrejti a kurzor lebegését, kattintson vagy érintse meg a tartalom kár nélkül.

Minuszok:

• a szervezet elvének megsértése bonyolíthatja a navigációt;
• nehéz végrehajtani a mobil eszközökön.

9. Advanced Futher.

A webhely futrol vagy "alagsor" az oldal alja. A standard lábléc, általában további információkat tartalmaz: Névjegyek, linkek, szerzői jogi közlemény és közösségi hálózatok gombok. Egy kiterjesztett foottorban, ezen adatok mellett tartalmaz egy teljes körű navigációs menüt, amely alap- vagy alternatív navigációs rendszerként használható. A Fejlett Futher könnyű módja annak, hogy túlmutatjon a szabványos tervezés határain, és javítsa webhelyének funkcionalitását.

Előnyök:

• Alternatív vagy kiegészítő menüt biztosít azok számára, akik nem találták meg a kívánt tartalmat a fő dologban;
• Lehetővé teszi, hogy fontos, de nem illeszkedjen a tartalom fő oldalainak tartalmába;
• További lehetőségek a klasszikus láblécben (csak érintkező információtartalmúak) lehetővé teszik az ügyfélbázis kibővítését;
• Hangsúlyozza a figyelmet bizonyos információkra.

Minuszok:

• A rendes felhasználó gyakran nem fejezi be a lábszárat.

10. Teljes képernyős navigáció

Az itt bemutatott összes tervezési lehetőségekkel ellentétben a teljes képernyős navigáció nem állítja be a képernyőn megjelenő helyet. Éppen ellenkezőleg, a teljes képernyős navigáció 100 százalékos intro oldalt használ, amely ötvözi a szöveget grafikával.

Előnyök:

• Világos struktúrát biztosít a helyszínen;
• Széleskörű lehetőségeket nyit meg a vizuális tervezéshez;
• A túlterhelt honlapnak köszönhetően a fő alszakaszok csak olyan tartalmat tartalmaznak, amelyek jelentősen megmentenek a képernyőn;
• Egyszerű megvalósítás a mobil platformokon;
• Tökéletes lehetőség a magasan speciális webhelyekre.

Minuszok:

• Lehetőség van a terhelési sebesség csökkentésére;
• Belső választás a komplex navigációs kártyával rendelkező webhelyekhez.

És a hagyományos bónusz az esernyőből, amely mindig készen áll arra, hogy több - 11 opció - Animált navigációs elemek .

Az animált elemek és a további navigációs eszközök racionális használata lehetővé teszi a konzervatív kialakítás diverzifikálását és a felhasználók figyelmét.

Előnyök:

• Vonzza a felhasználó figyelmét;
• Struci menü;
• Javítsa meg a webhely használhatóságát és irányítsa a felhasználót.

Minuszok:

• A túlzott vizuális túlterhelés megnehezíti a webhely navigálását;
• Lassíthatja az oldal letöltési sebességét.

A webes navigációs tervezés kiválasztásánál és fejlesztésénél nehéz megjósolni pontosan Melyik lehetőség, hogy megnyerje. Az egyes konkrét esetek sikere számos tényezőtől függ: a webhely üzleti célpontjaitól, céljaitól és célkitűzéseitől, a tartalom természetét, a célközönséget és a személyes preferenciáit.

A bemutatott példák csak egy kis rész a modern webdesign megvalósítására.Kérdése van?, És mi Segítünk a legvadabb projektek megvalósításában a valóságban.

Szia, kedves előfizetők!

Csak befejezte a következő projektet. Benne, a főmenü mellett is jelen volt, és navigáció. És úgy döntöttem, hogy jó lenne megmutatni, hogy az ilyen dolgok szó szerint szó szerint néhány kódban. És ez kizárólag HTML és CSS-vel történik.

Az ilyen navigáció általában a helyszínen helyezkedik el. Nincs semmi bonyolult a fejlődésben. Minden tétel navigáció a címkén zárul

…

. Hivatkozik.

PSD elrendezés Ez a képzés letölthető.

Ezen lecke is elérhető videó verzióamely itt letölthető:

Nos, általában minden! Nézzük meg a kódot, és minden tiszta lesz.