Кратък преглед на навигационните модели в адаптивния уеб дизайн

Да кажем, че адаптивният уеб дизайн (responsive design) промени уеб разработките ще бъде омаловажаване на неговото значение. Преди уеб разработчиците питаха клиентите си на кои резолюции и устройства биха искали да отговаря техният сайт, докато сега отговорът е ясен: на всички. За да отговори на това предизвикателство, браншът буквално изригна с нови модели, подходи и мислене като цяло. Тук ще разгледаме по-подробно аспектите на адаптивната навигация - тази, която е характерна за адаптивния дизайн, като се концентрираме върху информационната структура и разгледаме главните навигационни модели, които се отличават с висока ефективност.

Предизвикателствата при информационната архитектура
Първите компоненти на един уеб сайт, които се повлияват при даването на предимство на мобилните устройства, са съдържанието и информационната архитектура. Модерните сайтове имат за задача да подпомогнат извършването на действия и споделянето на информация на първо място и следователно фокусът пада върху тях.

Докато преди се наблюдаваха мега менюта и сложни навигационни структури, адаптивният дизайн промени това. Логично следва въпросът колко детайлна трябва да бъде навигацията, за да е ефективна, а оттам и дали един уеб сайт има нужда от няколко типа навигация или би работил добре само с един. Повечето адаптивни навигационни модели налагат опростяването и фокусирането върху най-важното. Тази тенденция има изключително голямо положително въздействие върху потребителското преживяване на смартфони и таблети.

Ако информационната архитектура на уеб сайта не е оптимизирана, дори и най-стилното решение за адаптивна навигация няма да работи добре. Навигационните структури трябва да са ясни и да минимизират умственото напрежение. Така се създава усещане за интуитивна навигация дори и на малък екран.

При изграждането на уеб сайт, екипът на разработчика се концентрира върху следните опорни точки, отнасящи се до навигацията, по време на концептуалната фаза на проекта:
- Ясни етикети, с които се означават компонентите на информационната архитектура - Те трябва да отразяват точно какво се предлага на посетителите на сайта, като фокусът е върху полезността на всеки елемент за потребителите.
- Намаляване на сложността на навигацията - Навигационната структура трябва да притежава колкото се може по-малко нива, за да може потребителите да се ориентират лесно в рамките на уеб сайта.
- Подробно тестване - Чрез тестването на интерактивни прототипи може да се определи най-точно дали навигацията съвпада с целите на потребителите, които посещават сайта, и да се усъвършенства, ако е необходимо.

Целта на навигацията
Тя трябва да е добре известна не само на специалистите, но и на клиентите, за да могат да вземат точните решения. Да разгледаме едно лесно разбираемо обяснение. Можем да кажем, че навигацията има три части, които дават представа на потребителя за неговото минало, настояще и бъдеще в рамките на уеб сайта. Всяка добра навигационна схема трябва веднага да отговаря на трите главни въпроса, които си задава всеки потребител:
- Къде съм? (настояще)
- Къде мога да отида (бъдеще)
- Къде съм бил? (минало)
Независимо от опростеността на навигацията на сайта, трябва да са спазени тези три фундаментални критерия.

Основни модели на адаптивната навигация
Тук ще се концентрираме върху най-ефективните, които се използват в момента.

1. Моделът „Прави много малко“
При него менюто се вижда ясно, а не е скрито. То се състои само от едно ниво, като една от най-характерните му черти е малкият брой категории. Този тип представяне прави навигацията по-лесна за ползване в сравнение с прогресивното показване на елементите. На потребителите не им се налага да извършват никакво допълнително действие, за да се ориентират.

Моделът обаче не е приложим при по-сложна информационна архитектура, особено когато се налага да се представи повече от едно ниво на уеб сайта едновременно. Ако той е подходящ, трябва да се прилага стратегически. Главно правило при използването му е менюто да не заема много вертикално място, за да може съдържанието да изпъква и потребителят да се концентрира върху него.

2. Вертикално меню с категории и подкатегории, което се извиква
Менюто се извиква на екрана чрез лесно разпознаваем бутон, който обикновено се намира в горната дясна част на екрана, където потребителят е най-вероятно да погледне, когато търси нещо на уеб сайта. Този модел е приложим когато има две или повече нива на навигация. За потребителите е лесно да се ориентират и бързо достигат до желаната информация. Това може да не е най-лъскавото решение, но е практично и създава стабилност. То се прилага при много уеб сайтове с адаптивен дизайн. Когато навигацията е изградена прогресивно, тя работи безупречно.

3. Опростено меню, което се извиква
Този модел на адаптивна навигация може да се разглежда като на кръстоска между първите два. При него менюто се извиква, както при втория модел, като същевременно има само категории, без подкатегории, както при първия. Моделът е приложим, когато уеб сайтът има по-голям брой категории и само едно ниво. В такъв случай категориите най-често се представят под формата на две колони в менюто, което обхваща екрана по ширина, когато се извика, но заема сравнително малка част от него.

Главното предимство на този модел е, че е лесен за използване и много гъвкав, като позволява размах на творчеството. Менюто може да стане и много атрактивно чрез използването на икони и цветове. Може да се експериментира с размера му и с подредбата на категориите. Някои дизайнери дори добавят най-важните бутони на уеб страниците директно в него. На потребителите могат да се предоставят и алтернативни форми на навигация, като лента за проследяване на пътя в рамките на сайта. Това решение е особено полезно при извършването на даде процес, чиито стъпки се правят на отделни страници.

4. Меню, изместващо страницата
Така нареченият off-canvas модел е може би най-популярният. При извикване на менюто, то просто избутва останалото съдържание, така че да се настани изцяло на екрана. Това е сполучливо решение при наличието на много категории и подкатегории. Въпреки това не трябва да се разчита прекалено много на безкрайното скролване, тоест не трябва вертикалното меню да е прекалено дълго.

5. Приоритет плюс
Този модел на навигация набира все по-голяма скорост през последната година. При него има ясно очертана горна лента (header), която служи за основа на падащото меню, обозначено със специална икона или просто с надпис. Моделът е подходящо решение за уеб сайтове, имащи дълго хоризонтално меню. Категориите се подреждат една под друга, когато потребителят разглежда сайта на смартфон. Основното предимство на този модел е, че той до голяма степен запазва визията на сайта еднаква на всички свързани устройства, което прави навигацията по-лесна за потребителите.

Хамбургер иконата
Тя не може да се пропусне, когато става въпрос за адаптивна навигация. Трите хоризонтални чертички, подредени една под друга, трябва да се докоснат, за да се получи достъп до менюто. Водещият въпрос тук е дали тази икона е достатъчно добре разбираема сама по себе си или има нужда от контекстен индикатор. Дебатът се върти най-вече около това дали тя трябва да се приеме за универсална.

При отговора на този въпрос уеб разработчикът трябва да обърне специално внимание на техническите познания и умения на целевата аудитория на бъдещия сайт. Дори и потребителите да са добре запознати с уеб тенденциите обаче, може към иконата да се сложи кратък, точен и ясен текст, който да я подкрепя. При вземането на решение дали той да присъства или не мога да се използват и А/В тестове.

Заключение
Разнообразието от адаптивни навигационни модели е предимство при изработката на уеб сайт. При наличието на ясна информационна архитектура и надежден процес на тестване, резултатът ще бъде възможно най-добър. Потребителите ще могат да използват лесно уеб сайта и да се възползват максимално от него. Когато проектът е в ръцете на опитен разработчик, клиентът може да разчита на екипа и за бъдещото развитие на сайта, което включва оптимизация на навигацията при промяна на потребителското поведение.

Споделете в: