Навигацията на уебсайта – как да я направим достатъчно ефективна на десктоп и мобилна версия

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

Защо се получава така?

Защото навигацията на сайта не е достатъчно ясна и човек не може да се ориентира бързо къде се намира това, което търси и как да стигне до него.

⇒ Какво включва навигацията и как се решава този проблем ти разказва днес дизайнерът Любомира Попова. Статията ѝ, както винаги, е супер практична, а съветите ѝ можеш да приложиш лесно към твоя сайт. Ако нещо по темата не ти е ясно, задай въпроса си в коментар, Люба ще ти отговори. 

Навигацията в уебсайта не е просто главното меню, а цялата съвкупност от елементи, които служат като преход от една страница в друга и като ориентир за местоположението на посетителите – менюта, линкове, бутони, breadcrumbs…

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

⇒ Когато помогнете на посетителите да се придвижват от една страница към друга без да се загубят в сайта ви, те намират това, което търсят бързо, без да се разочароват. Остават по-дълго, разглеждат повече страници и си създават позитивно отношение към бранда ви.

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

Кои са основните компоненти на навигацията в сайта и как да ги подобрим

• Главно меню

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

• Падащи менюта

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

• Странично меню (sidebar)

Въпреки че все по-рядко се използва (а на мобилна версия изпада отдолу или се добавя като падащо меню или pop-up), то е важно за сайтове с по-дълбока структура, за филтри в онлайн магазини или table of content (списък с подзаглавията на различните части в по-дълги страници, особено текстови).

• Футер навигация

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

• Навигационна пътека (breadcrumb)

Изключително удобен ориентир за това къде се намира потребителят в йерархията на сайта и важен ориентир за търсачки и екранни четци.

• Бутони

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

• Вътрешни линкове

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

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

Направете търсенето в сайта лесно, а търсачката поставете в главното меню.

Линковете за социалните мрежи директно отвеждат потребителя извън сайта ви. Ако това е целта ви (например сайтът ви е чисто имиджов, а вие искате да ви следват другаде), тогава можете да ги поставите в главното меню. В противен случай, по-добре ги добавете към футера.

Как да направите навигацията в сайта максимално ефективна

Каква е целта на навигацията?

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

Как да улесните посетителя?

Това трябва да е водещ въпрос, когато организирате структурата и всеки път, когато добавяте ново съдържание, в което има бутони и вътрешни връзки.

Каква е крайната цел на уебсайта?

Навигацията трябва да ориентира хората независимо откъде са дошли (търсачка, социални мрежи, реклама) и независимо откъде са влезли (начална страница, блог статия, продукт) така, че да могат да стигнат лесно до края (да изпратят запитване, да купят продукт).

⇒ Писала съм за това чрез едно примерно линейно движение в сайта в статията си „Как да направите уеб дизайн, който насочва потребителя към желаните от вас действия“. Само че в реалността това движение не е линейно. Посетителите могат първо да разгледат продукт, после да погледнат в „За нас“, да прочетат статия в блога, да проверят в контактите за местоположението на магазина, да се върнат при продукта, да разгледат други продукти… Могат дори да излязат от сайта и да се върнат (понякога съвсем случайно) след дни. И през цялото време трябва да са наясно къде са, защо са тук, какво се изисква от тях и най-важното – този сайт ще им реши ли проблема (чрез информация, продукт или услуга)?

Отговорни сте да изградите безупречна структура с ясна навигация. Ако се почувстват загубени, посетителите просто ще напуснат сайта ви.

Традиционни принципи за лесна работа със съдържанието с мишка, на десктоп

• Разполагайте съдържанието отгоре надолу, отляво надясно, като най-важното е в горния ляв ъгъл. Така ще сте сигурни, че то следва естествения начин на възприемане на информацията.
• Следете за местоположението на екрана на всяка отделна секция – цялото съдържание, свързано с една тема, трябва да е на екрана, за да не се налага скрол нагоре-надолу.
• Когато имате няколко бутона за едно нещо (например „Отказ” и „Изпращане”), ги разполагайте достатъчно близо един до друг.
• Хората са фокусирани върху целта си и търсят скорост преди всичко. Не е достатъчно сайтът ви е да бърз само технически – трябва и самото съдържание да е лесно за „сканиране“ и възприемане.
• Изскачащите прозорци са удобни, защото се появяват близо до мишката и не са необходими допълнителни движения в сравнение с акордеони и допълнителни менюта.
• Използвайте големи бутони, които да са удобни за клик.
• Не правете менютата с много опции, за да спестите време за четене, търсене и избор.

Добри практики за мобилни устройства

• Най-удобната зона за четене и кликане е центърът на екрана. Дръжте ключовата информация там.

• Скролът е най-удобен и изисква най-малко време и усилия. Съобразете съдържанието си с това и избягвайте допълнителни кликове и хоризонтални превъртания.
• Хората рядко са съсредоточени само в съдържанието на сайта ви, особено ако са в градска среда. Повече от всякога е важно съдържанието ви да е лесно за възприемане „по диагонал“, а кликаемите опции да са лесни за намиране и докосване.
• Не „забивайте“ интерактивни елементи до ръба на екрана – добавете малко въздух отстрани, за да могат посетителите да ги докосват спокойно.
• Не забравяйте, че на мобилна версия пръстът е над екрана при скрол, но при четене и по-задълбочено възприемане на информацията, той пречи и обикновено е отстрани на устройството (или в краен случай над долната част на екрана). Затова правете важните кликаеми елементи (особено бутоните) достатъчно широки, за да се достигат удобно с по-късо движение и с двете ръце, и от различни позиции.
• Изскачащите прозорци са отделени от контекста си и на мобилна версия са трудни за затваряне. Вместо тях използвайте табове, акордеони или линкове. Разбира се, при по-големи сайтове, особен онлайн магазини някои опции (като филтрите) е по-добре да са в изскачащ прозорец или падащо меню).

За финал: съобразявайте се с човешкия фактор и поведение (не само обичайното). Опитвайте се да си представите как хората биха използвали вашия сайт в различни среди и настроение. Те са левичари и десничари, технически грамотни или не, четат сайта ви на спокойствие вкъщи или в движение на оживен булевард, използват гласови асистенти, имат диоптри, но не си носят очилата, познават бранда ви и са били в сайта ви или не…

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

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

===

Любомира Попова е уеб дизайнер на свободна практика и художник-сюрреалист с артистичен псевдоним Fineluart.
Създава първия си статичен сайт през 2008. В момента се е специализирала в изработката на WordPress сайтове и визии за уеб. Занимава се с дизайн повече от 17 години, като през повечето време е била част от рекламни фирми и агенции. Създавала е визии за почти всички рекламни среди – външна, печатна, уеб, digital, TV. Работи основно с малки бизнеси в сферата на услугите, макар през годините да е правила реклами за представители на почти всички сфери.

Има професионален интереси в областта на дигиталния маркетинг, графичния дизайн и social media. Това ѝ дава възможност да вижда уеб сайтовете не само като дизайн, а като част от визуалната комуникация между бранда и потребителя. За нея всяка отделна визия е част от цялостно развитие, а не „парче дизайн“.

„Редовно консултирам клиенти и млади колеги и винаги се радвам, когато успея да улесня някого по пътя му в моята (любима) сфера. Ако имате въпроси за дизайн и реклама, съм насреща да помогна, независимо дали става въпрос за принципи в дизайна, тенденции, технически въпроси, видове реклами или се нуждаете от конкретни съвети за личните си проекти. Питайте ме.“ Люба