Rea­guo­jan­ti na­vi­ga­ci­ja yra pag­rin­di­nis mobiliojo op­ti­mi­za­vi­mo aspektas. Jei mobilioji na­vi­ga­ci­ja nesugebės sklan­džiai nukreipti vartotojų iš taško A į tašką B, jie grei­čiau­siai greitai paliks puslapį, o tai lems srauto praradimą ir, dar svarbiau, pajamų praradimą. Įvairios kon­cep­ci­jos, pvz., iš­sklei­džia­mie­ji meniu ar apatinės na­vi­ga­ci­jos juostos, gali padėti pagerinti svetainės na­vi­ga­ci­jos patirtį.

Kas daro gerą rea­guo­jan­čią na­vi­ga­ci­ją?

Gera na­vi­ga­ci­jos sistema yra bet kurios svetainės pagrindas – ji padeda var­to­to­jams rasti jiems svarbią in­for­ma­ci­ją. Na­vi­ga­ci­jos elementai turėtų veikti sklan­džiai, turėti aiškią ir savaime su­pran­ta­mą struktūrą bei leisti in­tui­ty­viai naudotis. Pag­rin­di­niai rea­guo­jan­čios na­vi­ga­ci­jos iššūkiai yra ribota ekrano erdvė ir jutiklinė sąveika mo­bi­liai­siais įren­gi­niais. Vis dėlto yra keletas rea­guo­jan­čių sprendimų, kurie užtikrina aiškią ir var­to­to­jui patogią svetainės na­vi­ga­ci­ją.

Rea­guo­jan­čio­jo tink­la­la­pio dizaino pag­rin­di­nė idėja yra ta, kad puslapio turinys ir iš­dės­ty­mas di­na­miš­kai pri­si­tai­ko prie įrenginio sąlygų ir ekrano dydžio.

Daugeliu atvejų geriausia laikytis „mobile first“ principo. Ši dizaino stra­te­gi­ja teikia pirmenybę interneto projektų op­ti­mi­za­vi­mui mo­bi­lie­siems įren­gi­niams– mobiliojo įrenginio versijos dizainas, patogumas ir našumas yra svar­biau­si, o tik po to jis pri­tai­ko­mas stalinėms ir ne­šio­ja­moms kom­piu­te­rėms. Esamos svetainės na­vi­ga­ci­jos sistemos pri­tai­ky­mas mo­bi­lie­siems įren­gi­niams dažnai yra su­dė­tin­ges­nis ir laiko atžvilgiu bran­ges­nis. Todėl prieš pradėdami planuoti ir kurti rea­guo­jan­čią na­vi­ga­ci­ją, tu­rė­tu­mė­te atsakyti į keletą svarbių klausimų, ypač susijusių su na­vi­ga­ci­jos išdėstymu ir bendra struktūra.

Note

Prieinama svetainė yra svarbesnė nei bet kada anksčiau, o na­vi­ga­ci­ja atlieka pag­rin­di­nį vaidmenį, įskaitant su­de­ri­na­mu­mą su ekrano skai­ty­tu­vais, pakankamą kontrastą ir kitas pri­ei­na­mu­mo funkcijas.

Kur turėtų būti na­vi­ga­ci­ja?

Daž­niau­siai na­vi­ga­ci­ja yra talpinama apačioje arba puslapio viršuje. Naudojant na­vi­ga­ci­ją apačioje, var­to­to­jai mato tik nuorodą į na­vi­ga­ci­ją mobiliojo puslapio pradžioje, kuri nukreipia juos tiesiai į apačią, kur yra atskiri meniu elementai.

Tačiau na­vi­ga­ci­ja apačioje nėra labai patogi var­to­to­jams: var­to­to­jai tikisi, kad svarbūs na­vi­ga­ci­jos elementai bus lengvai prieinami, todėl na­vi­ga­ci­ja apačioje tampa vis rečiau naudojama. Šiandien mobilioji na­vi­ga­ci­ja dažniau yra pa­tei­kia­ma puslapio viršuje. Šis kla­si­ki­nis požiūris į pri­si­tai­kan­tį dizainą yra pa­žįs­ta­mas daugumai vartotojų.

Kaip struk­tū­ri­zuo­ta na­vi­ga­ci­ja?

Na­vi­ga­ci­jos struk­tū­ri­za­vi­mui yra įvairių galimybių. Dvi po­pu­lia­riau­sios galimybės yra sąrašo na­vi­ga­ci­ja ir rea­guo­jan­tys tinkle­liai.

Sąrašai gali būti rodomi kaip vieno lygio ir dau­gia­ly­pės na­vi­ga­ci­jos. Šis formatas turi dvi aki­vaiz­džias pra­na­šu­mus: pirma, ži­nia­tink­lio kūrėjai gali gana paprastai įgy­ven­din­ti sąrašus, be to, jis pri­tai­ky­tas prie vartotojo įpročių.

Image: List navigation in the IONOS Digital Guide
In the Digital Guide, available ca­te­gories are presented to you in a list format; Source: https://www.ionos.co.uk/di­gi­tal­gui­de/

Tinklinė na­vi­ga­ci­ja idealiai tinka trumpiems na­vi­ga­ci­jos ele­men­tams ir yra ypač populiari elekt­ro­ni­nė­je ko­mer­ci­jo­je. Elementai rodomi vienas šalia kito tink­li­nė­je išdėstymo schemoje, o stulpelių skaičius priklauso nuo ekrano dydžio. Jei pla­nuo­ja­te dviejų stulpelių tinklinę išdėstymo schemą, įsi­ti­kin­ki­te, kad elementų skaičius yra lyginis, kad iš­veng­tu­mė­te asi­met­ri­nės išdėstymo schemos.

Image: Grid navigation in the Zalando shop
Zalando presents its various product ca­te­gories in a well-struc­tu­red grid layout; Source: https://www.zalando.com/
Note

Abiem va­rian­tais galima pridėti pa­pil­do­mus poskyrius, kurie gali būti rodomi ir slopinami.

Kokios mo­bi­lio­sios na­vi­ga­ci­jos kon­cep­ci­jos yra pri­ei­na­mos?

Dabar pereikime prie pag­rin­di­nio klausimo: kaip turėtų at­si­da­ry­ti mobiliojo na­vi­ga­ci­jos meniu? Kon­cep­ci­ja priklauso nuo to, kaip na­vi­ga­ci­ja pa­tei­kia­ma var­to­to­jui. Rodymo galimybės yra įvairios: na­vi­ga­ci­ja gali būti rodoma tie­sio­giai puslapyje arba atidaryta paspaudus nuorodą. Na­vi­ga­ci­ja gali perkelti turinį žemyn arba būti virš jo. Čia surinkome keletą pavyzdžių.

Note

Nesvarbu, kokią na­vi­ga­ci­jos kon­cep­ci­ją pa­si­rink­si­te, ham­bur­ge­rio pik­to­g­ra­ma tapo stan­dar­ti­niu būdu atidaryti meniu mo­bi­liai­siais įren­gi­niais. Mažas simbolis su trimis ho­ri­zon­ta­lio­mis linijomis dabar plačiai pri­pa­žįs­ta­mas iš­ma­niuo­siuo­se te­le­fo­nuo­se ir plan­še­ti­niuo­se kom­piu­te­riuo­se kaip vi­suo­ti­nis paslėpto meniu ženklas.

Na­vi­ga­ci­ja per iš­sklei­džia­mą meniu

Vienas iš kla­si­ki­nių rea­guo­jan­čių na­vi­ga­ci­jos tipų yra iš­sklei­džia­mas meniu. Jis labai panašus į tradicinę kom­piu­te­rio na­vi­ga­ci­ją, todėl var­to­to­jams yra pa­žįs­ta­mas ir dažnai pa­si­ren­ka­mas na­vi­ga­ci­jos kon­cep­ci­ja. Meniu ak­ty­vuo­ja­mas paspaudus mygtuką arba pik­to­g­ra­mą ir pasirodo virš turinio, jo visiškai ne­už­deng­da­mas.

Image: Dropdown navigation on the Amazon website
Amazon features a dropdown na­vi­ga­tion that overlays the main page content; Source: https://www.amazon.co.uk/

Slan­kio­jan­ti na­vi­ga­ci­ja

Kitas po­pu­lia­rus na­vi­ga­ci­jos tipas yra slan­kio­jan­tis meniu, dar žinomas kaip akordeono arba iš­sklei­džia­mo lango na­vi­ga­ci­ja. Kai var­to­to­jai paliečia meniu mygtuką, na­vi­ga­ci­ja atsidaro – skir­tin­gai nuo iš­sklei­džia­mų meniu, ji ne­už­den­gia turinio, o stumia jį žemyn. Nors šis metodas yra šiek tiek su­dė­tin­ges­nis įgy­ven­din­ti, jis laikomas labai pri­tai­ko­mu ir taupantis vietą. Dėl galimybės įtraukti pa­pil­do­mus na­vi­ga­ci­jos elementus, jis yra ele­gan­tiš­kas spren­di­mas tiek pa­pras­tiems, tiek su­dė­tin­ges­niems meniu.

Image: Slidedown navigation on the URBAN TOOL website
In the URBAN TOOL online shop, the na­vi­ga­tion slides down without covering the content po­si­tio­ned below it; Source: https://www.urbantool.com/en/

Apatinė na­vi­ga­ci­jos juosta

Apatinė na­vi­ga­ci­jos juosta yra vis po­pu­lia­res­nis spren­di­mas mo­bi­lio­sioms prog­ra­mė­lėms ir sve­tai­nėms, kur meniu rodomas ekrano apačioje. Šis na­vi­ga­ci­jos stilius yra ypač patogus var­to­to­jui, nes jį lengva pasiekti iš­ma­niuo­siuo­se te­le­fo­nuo­se. Jis puikiai tinka pro­jek­tams, kuriuose yra keletas pag­rin­di­nių na­vi­ga­ci­jos elementų, ir suteikia aiškią, or­ga­ni­zuo­tą struktūrą, pa­de­dan­čią var­to­to­jams greitai pereiti iš vienos pag­rin­di­nės svetainės sekcijos į kitą.

Image: Bottom navigation bar on Snapchat
With Snapchat’s bottom na­vi­ga­tion bar, you can easily switch between main ca­te­gories like ‘Stories’ and ‘Chat’; Source: https://www.snapchat.com/

Na­vi­ga­ci­ja už ekrano ribų

Šiuo metodu rea­guo­jan­ti na­vi­ga­ci­ja pagal nu­ma­ty­tuo­sius nu­sta­ty­mus yra išdėstyta už ekrano matomos srities ribų. Meniu nėra in­te­gruo­tas į pag­rin­di­nį išdėstymą, todėl na­vi­ga­ci­ja už ekrano ribų yra erdvę taupantis spren­di­mas, kuris neužima jokios vietos ekrane. Tik palietus meniu pik­to­g­ra­mą na­vi­ga­ci­ja pasirodo ekrane, nu­stum­da­ma visą išdėstymą į šoną. Šis metodas ypač tinka didelėms na­vi­ga­ci­jos hie­rar­chi­joms su keliais pa­pil­do­mais meniu.

Image: Off canvas navigation on Uber
As soon as you tap the menu icon on Uber’s mobile site, the na­vi­ga­tion panel replaces the current content view; Source: https://www.uber.com/
Go to Main Menu