Ikone za navigacijo – Pomagalnik

V spletnem oblikovanju srečamo pri navigaciji oz. elementih, ki označujejo navigacijo precej različnih ikon. Najbolj razširjena ikona pa je t.i. hamburger ikona – “☰”. Za boljšo razumevanje UX/UI si pobližje poglejmo nekaj primerov.

Navigacijske ikone:

Hamburger ikona

Hamburger ikono sestavljajo tri horizontalne črte in je najpogosteje uporabljena ikona za prikaz navigacije pri spletnih straneh, ter aplikacijah. Uporablja se v primerih, ko je navigacija skrita in je potreben klik na hamburger ikono za prikaz navigacije.

Kebab ikona

Kebab ikona se običajno uporablja za prikaz manjše navigacije znotraj postavitve, ki se uporablja za določen del/modul. Ikono sestavljajo tri pikice, ki so postavljene vertikalno.

Doner ikona (ali jagoda)

Doner ikona sestavljajo tri horizontalne črte pri čemer je vsaka naslednja krajša od prve. Vloga te ikone naj bi bila navigiranje/odpiranje filtrov v različnih modulih/izpisih.

Slider ikona

Slider ikona je sestavljena iz črt in krogcev (ali podoben element). Uporablja se pa za naprednejše funkcije ali filtre (podobno kot doner ikona). Običajno se zanjo skrivajo naprednejše oblike nastavitev.

Meatballs ikona

Meatballs ikono sestavljajo tri horizontalne pikice. Vloga te ikone je običajno rezervirana za hitre akcije na določenem elementu. Npr. pri objavi za shranjene, deljenje, izbris, združevanje, arhiviranje …

Bento ikona

Bento ikona sestavljajo majhni kvadratki ali krogci v matriki 3×3. Vloga te ikone je prikaz informacij na strani in sicer iz linijske oblike v mrežasto obliko (grid). V tej obliki se uporablja za prilagoditev izpisa informacij Na drugi strani lahko to obliko srečamo tudi pri združevanju/ustvarjanju skupin.

List grid ikona

List grid ikona je sestavljena iz horizontalnih pikic in črt. vloga te ikone je velikokrat povezana z Bento ikono, saj predstavlja mrežni ogled informacij. Ikona omogoča prilagoditev izpisa informacij.

Full-screen ikona

Full-screen ikono je sestavljena iz 4 “L” znakov, ki tvorijo okvir. Velikokrat srečamo pri video vsebinah, predstavlja pa ogled video vsebine celozaslonsko. Pojavlja se lahko tudi v drugih multimedijskih vložkih za zumiranje na vsebino.

Exit full-screen ikona

Exit full-screen ikona je sestavljen iz 4 obrnjenih “L” znakov, ki tvorijo križ. Ima obratno funkcijo od full-sreen ikone. Omogoča pa prehod iz povečane ali celozaslonske vsebine na normalne ogled.

X ikona

X ikona je sestavljena iz dveh črt in je v obliki križa. Njena vloga je zapiranje okna/modula. Pojavlja se z zgornjimi ikonami ali samostojno (npr. oglasi).

Katero ikono uporabiti?

Pri navigaciji in podobnih standardnih elementih se vedno držite preverjenih in široko uporabljenih metod, namreč teh so uporabniki najbolj navajeni in uporaba vaše spletne strani ali aplikacije bo tako za njih lažja in enostavnejša.

Velikokrat je priporočeno, vsaj pri nekaterih ikonah uporabiti celo napis. Npr. pri hamburger ikoni dodati napis “Menu”, tako uporabniki, ki ne poznajo pomena posameznih ikona takoj vedo, kaj dobijo, če kliknejo nanjo. Nekatera testiranja so pokazala tudi, da je bolje, da so ikone ali ikone+besedilo v okvirčku, tako da delujejo kot gumb. Saj ta oblika uporabnikom daje vedeti, da se za gumbom skriva akcija, v tem primeru navigacija. Slednje bolj velja za starejše generacije, ki niso seznanjene z novejšimi oblikami vmesnikov – ikon.