Un smartphone înseamnă un ecran mic și degetul în loc de cursor. Utilizatorul navighează pe site din mers și poate rata ușor butoanele mici. Am adunat principalele reguli pentru o navigare facilă.
Antetul site-ului (Header) pe mobil
Afișați aici:
- Logo-ul interactiv cu link către pagina principală.
- Meniul – direct în antet dacă aveți puține secțiuni, altfel folosiți meniul de tip „hamburger”.
- Căutarea, cel puțin sub formă de pictogramă (iconiță).
- Numărul de telefon sau butonul de contact.
- Coșul de cumpărături, dacă aveți un catalog de produse.
Sunt suficiente 4-5 elemente. Fixați antetul în timpul derulării (scroll). Zona de atingere a fiecărui element trebuie să fie de cel puțin 44×44 pixeli, iar spațierea dintre ele – de cel puțin 8 pixeli.
Meniul mobil: hamburger, tab bar și FAB
- Meniul clasic este potrivit dacă aveți puține secțiuni – 5-7 linkuri. Puteți adăuga și iconițe.
- Meniul hamburger ascunde secțiunile și eliberează spațiul din antet. Plasați pictograma în stânga, iar linkurile din interior aranjați-le vertical și grupați-le după sens.
- Tab bar-ul este bara de navigație din partea de jos a ecranului, cu 3-5 secțiuni principale. Este o soluție foarte comodă, deoarece degetul mare ajunge cel mai ușor în zona inferioară.
- Butonul de acțiune rapidă (FAB) este un buton rotund suprapus peste conținut, plasat de obicei în colțul din dreapta jos, destinat unei singure acțiuni (de exemplu, chat cu suportul). Are un diametru de la 40 de pixeli în sus și se ascunde când tastatura este activă. Dacă folosiți un tab bar, un buton FAB separat nu mai este necesar.
Meniul de tip „Breadcrumbs” și filtrele pe mobil
- Navigarea prin breadcrumbs (pesmet) arată calea de la pagina principală până la secțiunea curentă. Pe telefon, acest lanț se poate întinde pe mai multe rânduri, de aceea este recomandat să-l limitați la 3 niveluri. Dacă sunt mai multe, afișați doar ultimele două niveluri și un buton „Înapoi”. Pentru un site mic, breadcrumbs-urile nu sunt necesare.
- Filtrele și sortarea sunt esențiale într-un catalog, deoarece pe un ecran mic încap puține produse. Plasați butoanele deasupra listei de produse și folosiți panouri glisante sau un ecran separat. Filtrele selectate trebuie afișate compact.
Subsolul site-ului (Footer) și adaptarea conținutului
În subsol includeți: datele de contact, linkurile către secțiuni, informațiile juridice și rețelele sociale. Dacă antetul este fixat în timpul derulării, nu este obligatoriu să duplicați meniul și în subsol.
Ajustați conținutul pentru un ecran mic: paragrafe scurte, font lizibil și tabele simple. Nu afișați bannere imediat după încărcarea paginii. Monitorizați viteza — dacă site-ul se încarcă în mai mult de 3 secunde, jumătate dintre vizitatori vor părăsi pagina.
Cum să îmbunătățiți navigarea site-ului
O navigare clară ajută utilizatorii să găsească rapid secțiunea dorită și să finalizeze achiziția. Începeți prin analizarea navigării actuale și implementați modificările treptat.
Dacă doriți ca totul să fie realizat ca la carte, apelați la VADSTUDIO. Vom efectua un audit, vom concepe structura site-ului și vom crea o versiune mobilă comodă și funcțională. Scrieți-ne — ne ocupăm noi de tot!