Mis on res­pon­siivne na­vi­gee­ri­mine? Dü­naa­mi­li­sed menüüd mo­biil­sead­me­tel sir­vi­miseks

Vas­tu­võt­lik na­vi­gee­ri­mine on mo­biil­sead­mete op­ti­mee­ri­mise oluline aspekt. Kui mobiilne na­vi­gee­ri­mine ei juhata ka­su­ta­jaid sujuvalt punktist A punkti B, siis nad tõe­näo­li­selt lahkuvad lehelt kiiresti, mis toob kaasa liikluse kaotuse ja, mis veelgi olulisem, tulude kaotuse. Mit­me­su­gu­sed kont­sept­sioo­nid, nagu alla libisevad menüüd või alumised na­vi­gee­ri­mis­ribad, võivad aidata parandada vee­bi­saidi na­vi­gee­ri­mis­ko­ge­must.

Mis teeb hea res­pon­siivse na­vi­gee­ri­mise?

Hea na­vi­gee­ri­mis­süs­teem on iga vee­bi­saidi selgroog – see aitab ka­su­ta­ja­tel leida neile olulist teavet. Na­vi­gee­ri­mis­e­le­men­tid peaksid töötama sujuvalt, olema selge ja aru­saa­dava struk­tuuriga ning või­mal­dama in­tui­tiiv­set ka­su­ta­mist. Vas­tu­võt­liku na­vi­gee­ri­mise peamised väl­ja­kut­sed seisnevad piiratud ek­raa­ni­ruumis ja puu­te­tund­li­kus in­te­rakt­sioo­nis mo­biil­sead­me­tel. Siiski on olemas mitmeid vas­tu­võt­likke lahendusi, mis tagavad puhtad ja ka­su­ta­ja­sõb­ra­li­kud vee­bi­saidi na­vi­gee­ri­mis­ko­ge­mu­sed.

Res­pon­siivse vee­bi­di­saini põhiidee on, et lehe sisu ja kujundus ko­han­du­vad dü­naa­mi­li­selt seadme tin­gi­muste ja ekraani suurusega.

Enamikul juhtudel on parim järgida „mobile first” lä­he­ne­mist. See di­sai­nistra­tee­gia seab esikohale vee­bi­pro­jek­tide mobiilse op­ti­mee­ri­mise– mo­biil­ver­siooni disain, ka­su­ta­ta­vus ja jõudlus on es­ma­täht­sad, alles seejärel ko­han­da­takse seda laua- ja süle­ar­vu­ti­tele. Ole­mas­oleva vee­bi­saidi na­vi­gat­sioo­ni­süs­teemi üm­ber­ku­jun­da­mine mo­biil­seks ka­su­ta­miseks on sageli kee­ru­li­sem ja ae­ga­nõud­vam. Seetõttu peaksite enne res­pon­siivse na­vi­gat­siooni pla­nee­ri­mise ja loomise alus­ta­mist vastama mõnele olulisele kü­si­mu­sele, eriti na­vi­gat­siooni paigutuse ja üldise struk­tuuri osas.

Kuhu tuleks na­vi­gee­ri­mine paigutada?

Na­vi­gat­siooni pai­gu­ta­mise levinud lä­he­ne­mis­vii­sid hõlmavad ja­lus­na­vi­gat­siooni ja menüü pai­gu­ta­mist lehe ülaossa. Ja­lus­na­vi­gat­siooni puhul näevad kasutajad mo­bii­li­lehe alguses ainult na­vi­gat­siooni lingi, mis viib nad otse jalusesse, kus asuvad üksikud me­nüü­e­le­men­did.

Ja­la­mär­gist põhinev na­vi­gee­ri­mine ei ole aga väga ka­su­ta­ja­sõb­ra­lik: kasutajad eeldavad, et olulised na­vi­gee­ri­mis­e­le­men­did oleksid kergesti kät­te­saa­da­vad, mistõttu ja­la­mär­gist põhinev na­vi­gee­ri­mine on muutumas üha ha­rul­da­semaks. Tä­na­päe­val pai­gu­ta­takse mobiilne na­vi­gee­ri­mine sa­ge­da­mini lehe ülaossa. See klas­si­ka­line lä­he­ne­mine res­pon­siiv­sele disainile on enamikule ka­su­ta­ja­tele tuttav.

Kuidas on na­vi­gee­ri­mine üles ehitatud?

Na­vi­gat­siooni struk­tu­ree­ri­misel on mitmeid võimalusi. Kaks po­pu­laar­se­mat valikut on loend­na­vi­gat­sioon ja res­pon­siiv­sed võr­gus­ti­kud.

Loendeid saab kuvada nii ühe­ta­san­di­lise kui ka mit­me­ta­san­di­lise na­vi­gee­ri­misena. Sellel formaadil on kaks selget eelist: esiteks saavad vee­biaren­da­jad loendeid suh­te­li­selt lihtsalt rakendada ja teiseks sobib see kasutaja har­ju­mus­tega.

Võr­gus­tik­na­vi­gat­sioon on ideaalne lühikeste na­vi­gee­ri­mis­ob­jek­tide jaoks ja on eriti po­pu­laarne e-kau­ban­duses. Objektid kuvatakse võr­gus­tiku pai­gu­tuses kõrvuti, kusjuures veergude arv sõltub ekraani suurusest. Kui kavandate ka­he­vee­ru­list võr­gus­tikku, veenduge, et objektide arv on paa­ris­ar­vu­line, et vältida asüm­meet­ri­list paigutust.

Millised mobiilse na­vi­gee­ri­mise kont­sept­sioo­nid on saadaval?

Nüüd jõuame keskse kü­si­mu­seni: kuidas peaks mobiilne na­vi­gee­ri­mis­me­nüü avanema? Kont­sept­sioon sõltub sellest, kuidas na­vi­gee­ri­mine ka­su­tajale esi­ta­takse. Ku­va­mis­või­ma­lu­sed on mit­me­ke­si­sed: na­vi­gee­ri­mine võib olla kuvatud otse lehel või avaneda lingile klõpsates. Na­vi­gee­ri­mine võib sisu alla nihutada või selle kohale jääda. Siin oleme kogunud mõned näited.

Na­vi­gee­ri­mine rippmenüü kaudu

Üks klas­si­ka­line res­pon­siivne na­vi­gee­ri­mis­tüüp on rippmenüü. See sarnaneb väga tra­dit­sioo­ni­lise töölaua na­vi­gee­ri­mi­sega, mistõttu on see ka­su­ta­ja­tele tuttav ja levinud na­vi­gee­ri­mis­kont­sept­sioon. Menüü ak­ti­vee­ri­takse nupu või ikooni va­ju­ta­mi­sega ja see ilmub sisu kohale, ilma seda täie­li­kult katmata.

Lükatav na­vi­gee­ri­mine

Teine po­pu­laarne na­vi­gee­ri­mise tüüp on alla libisev menüü, mida tuntakse ka akor­dio­nina või laien­da­tava kasti na­vi­gee­ri­misena. Kui kasutajad puu­du­ta­vad menüü nuppu, libiseb na­vi­gee­ri­mine lahti – erinevalt ripp­me­nüü­dest ei kata see sisu, vaid lükkab selle allapoole. Kuigi selle ra­ken­da­mine on veidi kee­ru­li­sem, peetakse seda lä­he­ne­mist väga ska­lee­ri­ta­vaks ja ruumi säästvaks. Tänu võimele lisada alam­me­nüüde elemente pakub see elegantse lahenduse nii liht­sa­tele kui ka kee­ru­li­se­ma­tele menüüdele.

Alumine na­vi­gee­ri­mis­rib

Alumine na­vi­gee­ri­mis­rib on üha po­pu­laar­sem lahendus mo­bii­li­ra­ken­duste ja vee­bi­sai­tide jaoks, kus menüü kuvatakse ekraani allosas. See na­vi­gee­ri­mis­viis on eriti ka­su­ta­ja­sõb­ra­lik, kuna seda on nu­ti­te­le­fo­ni­del lihtne kasutada. See sobib hästi pro­jek­ti­dele, millel on vähe olulisi na­vi­gee­ri­mis­e­le­men­did, ning pakub selget ja or­ga­ni­see­ri­tud struk­tuuri, mis aitab ka­su­ta­ja­tel kiiresti vahetada vee­bi­saidi peamiste osade vahel.

Kraadi väl­jas­pool asuv na­vi­gee­ri­mine

Selle lä­he­ne­mise puhul pai­gu­ta­takse reageeriv na­vi­gee­ri­mine vaikimisi ekraani nähtavast alast väl­ja­poole. Menüü ei ole in­teg­ree­ri­tud peamisse ku­jun­dusse, mis teeb ekraani servast väl­jas­pool asuva na­vi­gee­ri­mise ruumi säästva la­hen­duseks, mis ei võta vaa­ta­mis­ak­nas ruumi. Alles siis, kui me­nüüi­koo­nile va­ju­ta­takse, liigub na­vi­gee­ri­mine nähtavale, lükates kogu kujunduse kõrvale. See meetod sobib eriti hästi suurte na­vi­gee­ri­mis­hierar­hiate jaoks, millel on mitu alam­me­nüüd.