Топ тенденции в уеб навигацията
През изминалата година видяхме много растеж и нови тенденции в света на уеб дизайна . В тази статия ще се съсредоточа върху навигацията в уебсайта и моделите, които уеб дизайнерите са възприели, за да помогнат на хората да се ориентират в техните сайтове. Всички тези навигационни тенденции работят добре за различни видове сайтове и отзивчив уеб дизайн в различни форми и размери на екрана, така че тук има много разнообразие, за да извлечете идеи за следващия си дизайнерски проект.
01. Лепливи навигационни ленти
Навигацията е предназначена да помогне на потребителите да стигнат от точка А до всички други точки на даден сайт. А поддържането на навигационното меню на фиксирано място позволява на потребителите да навигират в сайта от всяко място на страницата. Много уебсайтове „придържат“ основната си навигация към горната част на екрана, докато потребителят превърта надолу, за да изследва съдържанието.
Това стана по-лесно благодарение на CSS и jQuery плъгини и много теми на уебсайта сега идват с лепкава навигационна лента по подразбиране и тази тенденция не показва признаци за никъде. Последователната навигация и използваемостта са важни, но фиксираната навигационна лента е удобна и за мобилни потребители, където сайтът е естествено по-дълъг и по-тънък.
Как трябва да го използвате?
Ако имате сайт с много елементи за навигация, тогава е добре да го поддържате фиксиран. Това е сигурен начин да задържите посетителите на сайта за по-дълго и да увеличите общия брой показвания на страници.
Уверете се обаче, че лентата за навигация не заема твърде много място. Не трябва да е толкова голям, че да блокира големи части от съдържанието на страницата. Сайтът за US Magazine заобикаля този проблем, като преоразмерява, като навигационната лента намалява по размер, докато потребителят превърта надолу, което го прави по-малко натрапчив. Докато потребителят все още може да консумира съдържанието на страницата, той вероятно ще се възползва от универсално достъпна фиксирана навигация.
02. Мега менюта
Мега менюто се популяризира с увеличаването на блоговете в стил списания. Те се различават от нормалните падащи менюта, защото вместо просто да се стичат вертикално надолу, тези мега менюта се разширяват по-широко, обикновено съдържащи множество колони със съдържание. Тази техника работи добре, ако се използва разумно, но не е чудесна за всеки сайт. Всъщност е наистина полезно само ако имате достатъчно съдържание, което да оправдае мега меню.
Защо да ги използвам?
Посетителите могат да добият представа за вашия блог или уебсайт, като прегледат свързаното съдържание. Ако можете да предоставите повече съдържание в мега меню, защо не?
Тази тенденция не работи на мобилни устройства, тъй като няма място на екрана. Но много хора все още сърфират в мрежата на настолни компютри и лаптопи, така че има широка аудитория в подкрепа на мега менюто.
03. Универсална навигация
Някои компании работят или притежават множество марки и включват универсална навигация в целия уебсайт. Дисни например притежава тематични паркове, създава игри и продуцира филми заедно с телевизионни предавания. Има смисъл тази универсална навигация да се запази на всяка страница, независимо от марката, за да се обърне внимание на други продукти на Disney.
И тази тенденция не е изключителна за конгломерати или холдингови компании. Понякога се използва в мрежи от уебсайтове, като тези, притежавани от Ню Йорк Медиа . Друг добър пример е в заглавката на Mashable , който води до всички международни сайтове на марката.
Защо да използвам това?
Ако работите с по-голяма мрежа от продукти или марки, може да е полезно да ги свържете всички заедно, за да създадете последователна идентичност на марката. Универсалната навигация може да насочи посетителите в цялата мрежа, за да помогне за опрашване на различни аудитории.
04. Вертикална плъзгаща се навигация
Все по-голям брой уебсайтове възприемат тенденцията за вертикална навигация и когато тя работи, тя наистина работи добре. Той е особено популярен в портфолио или творчески агенции, които разширяват границите на традиционния уеб дизайн.
Примерът по-горе от AWARD е фантастичен случай на използване на вертикалната навигация, като същевременно я поддържа видима през цялото време. Иконите се свързват отстрани, за да можете да щракнете върху икона вместо иконата за хамбургер. Това е експериментален подход към навигационния дизайн, но може да работи на уебсайтове, ориентирани към творчество.
Защо да използвам това?
Изпробвайте тази техника само ако сте на цял екран, който се отдалечава от традиционния дизайн на мрежата.
Работеща вертикална навигация не е лесно да се създаде от нулата и е трудно да я накарате да работи в отзивчиви дизайни. Ако обаче сте любопитни да експериментирате и желаете да изпробвате нови идеи, тогава вертикалните навигации могат да бъдат освежаващ обрат.
05. Глобално скрити менюта
Всеки уеб дизайнер трябва да знае за иконите за хамбургери и тяхното използване в отзивчив дизайн. Но докато хората се запознават по-добре с иконата за хамбургер и какво означава тя, все повече сайтове пазят навигацията скрита от погледа през цялото време.
Това може да изглежда странно, защото не помага на посетителя да намери бързо връзки. Той обаче освобождава пространството на екрана, като премахва навигацията от погледа. Имало различни изследвания които показват, че повечето потребители се борят със скрити менюта. Но тази тенденция може да се променя, когато все повече хора използват смартфони и се запознават със значението на иконата на хамбургер.
Защо да ги използвам?
Най-добрият сценарий за глобално скрито меню е с технически ориентирана аудитория. Тези посетители разпознават иконата за хамбургер и знаят, че това означава „кликнете тук за меню“. Така че, ако проектирате технически блог или създавате B2B дигитална агенция, това може да работи. Но ако не, помислете дълго и добре преди да предприемете този подход и се уверете, че не жертвате използваемостта в полза на стила.
06. Отзивчиви подменюта
Когато проектирате уебсайт, няма начин да избегнете работата с мобилна навигация. Популярно е и е тук, за да остане. Дизайнерите често скриват някои навигационни връзки на мобилни устройства, за да помогнат на менюто да се побере по-добре на малки екрани.
Но много сайтове следват нова тенденция за запазване на всички елементи за навигация чрез падащи менюта. Това обикновено изисква навигация за хамбургер с превключващи икони за падащи менюта за връзки.
Ще видите тази техника само на мобилни екрани или в малки прозорци на браузъра. Например, Политически Мобилният сайт на Google използва малки знаци плюс (+) за обозначаване на подменю до всяка връзка.
Защо да ги използвам?
Посетителите трябва да имат достъп за сърфиране в целия ви уебсайт, независимо от устройството, което използват. Като поддържате подменютата на място, можете да предложите по-добри възможности за разглеждане на посетителите.
Просто се уверете, че всяко подменю е ясно обозначено с икона, промяна на цвета или нещо визуално. Посетителите трябва да знаят дали щракването / докосването на връзка отваря меню или ги отвежда на нова страница.
07. Топ въртележки за историята
Тази тенденция става все по-популярна в блоговете и обемните новинарски сайтове. Много от тези по-големи сайтове могат да публикуват десетки - ако не и стотици - нови статии всеки ден.
Добавянето на обикновена въртележка в горната част на страницата предлага на посетителите възможност да разгледат най-новите статии. Тези истории могат да бъдат подготвени или актуализирани динамично и могат да бъдат стилизирани с миниатюри или каквото ви харесва. Можете да видите друг пример по принцип всяка статия от Vogue .
Защо да ги използвам?
Ако създавате блог с голямо съдържание, тогава тази тенденция може да направи чудеса за потребителското изживяване. Посетителите могат да научат за последните истории и това ще увеличи средното общо време на сайта, като насърчава посетителите да изследват повече от една история на посещение. Повечето блогове, които публикуват много съдържание, искат да увеличат задържането на посетителите и въртележката за статии е чудесен начин да направите това.
08. Съдържание
Изглежда, че Google обича съдържанието на дълги форми и кара писателите да публикуват по-дълги ръководства за почти всичко. Това работи чудесно за уеб съдържание, но може да замъгли четенето. За да опростя нещата, забелязах, че повече полета със съдържание се добавят в по-дълги статии с дефинирани раздели. Най-забележителният пример е Уикипедия , който използва ToC от самото си създаване.
Защо да ги използвам?
Най-голямата причина да използвате съдържанието е да подобрите потребителското изживяване. По-дългите статии се превръщат в норма и може да бъде плашещо да кацнете върху 5000+ думи. ToC намалява този фактор на сплашване. Те са полезни и в класацията на SERP, тъй като Google може да предложи прескачане на връзки въз основа на съдържанието. Това е печеливш подход.
09. Ъглови връзки All-Caps
Това е фина навигационна тенденция, но тя се разпространява бързо през последните няколко години. Изглежда, че всеки стартиращ и професионален бизнес използва стила на текста с главни букви, за да създаде навигация, която се чувства интуитивна и симетрична.
Тези навигационни системи обикновено следват много сходни стилове:
- Всички шапки
- Малки букви
- Безсерифни шрифтове
- Допълнително хоризонтално разстояние
- Бял или много светъл оттенък
Винаги, когато видя навигация като тази, това е почти приветливо събитие. Тази тенденция в дизайна се превърна в стила на подпис за изчистена, отчетлива и професионално изглеждаща навигация.
Защо да ги използвам?
Навигационното меню с всички главни букви просто изглежда професионално; тя е фина, но забележима и дава усещане за доверие на потребителя. Ако проектирате стартиращ или корпоративен уебсайт, тогава тази тенденция е може би най-добрият стил на дизайн, който да следвате за вашата навигация. Бъдете предпазливи обаче: не искате да завършите със сайт, който е бездушен или изглежда идентичен с този на всички останали.
10. Навигация с една страница с точка
Възходът на уебсайтове с една страница насочи много нови тенденции в центъра на вниманието. Една от тях е точкова навигация: поредица от кръгови икони, разположени в лявата или дясната страна на екрана. Всяка от тези точки представлява различна секция от сайта. И тъй като оформлението е една дълга страница, тези връзки са подчертани, за да посочат текущата позиция на потребителя. Наистина харесвам изобретателността на тази тенденция, но има въпросителен въпрос дали хората разбират какво означават тези точки или как да ги използваме.
Защо да използвам това?
Ако проектирате оформление на една страница, бих препоръчал да използвате залепваща лента за навигация в горната част на страницата. Това улеснява виждането какво представлява всеки слайд и какъв вид информация има на страницата.
Но ако не можете (или не искате) да използвате най-добрата навигация, тогава тези точки са следващото най-добро нещо. Или още по-добре: комбинирайте и двете! Възможно е да имате горна навигация с текстови връзки и да включвате икони за навигация с точки. Или дори включете текст до точките. Има много възможности за избор и всички те могат да работят добре.
Свързани статии:
- Най-добрите цветни инструменти за уеб дизайнери
- Как отзивчивият уеб дизайн промени света
- Нови умения в UX дизайна
