Може сайтът ти да е много красив, а съдържанието му полезно и увлекателно написано и пак посетителите да го напускат прекалено бързо и без да извършват желаното от теб действие.
Защо се получава така?
Защото навигацията на сайта не е достатъчно ясна и човек не може да се ориентира бързо къде се намира това, което търси и как да стигне до него.
⇒ Какво включва навигацията и как се решава този проблем ти разказва днес дизайнерът Любомира Попова. Статията ѝ, както винаги, е супер практична, а съветите ѝ можеш да приложиш лесно към твоя сайт. Ако нещо по темата не ти е ясно, задай въпроса си в коментар, Люба ще ти отговори.
Навигацията в уебсайта не е просто главното меню, а цялата съвкупност от елементи, които служат като преход от една страница в друга и като ориентир за местоположението на посетителите – менюта, линкове, бутони, breadcrumbs…
Тя е най-важната част от архитектурата на уебсайта и, когато е добре направена, подобрява потребителското изживяване, защото улеснява хората. А лесната ориентация е съществена част от скоростта, с която потребителят разглежда сайта, намира каквото търси, пазарува и селектира информация.
⇒ Когато помогнете на посетителите да се придвижват от една страница към друга без да се загубят в сайта ви, те намират това, което търсят бързо, без да се разочароват. Остават по-дълго, разглеждат повече страници и си създават позитивно отношение към бранда ви.
⇒ Ясната навигационна структура помага и на търсачките да обхождат и индексират сайта по-ефективно. Помага на хората, използващи гласови асистенти да не напуснат сайта ви още с влизането.
Кои са основните компоненти на навигацията в сайта и как да ги подобрим
Главно меню
То е най-съществената част от цялостната структура на сайта, защото служи като „въведение“ в това кои сте вие, за какво е този сайт и какво се изисква от потребителя. Тъй като винаги е налице, то служи и за бърз достъп до основните ви страници. Обикновено стои най-горе, защото е по-интуитивно, но се среща като странично меню или се поставя най-долу в мобилна версия. Правете го достатъчно кратко и с възможно най-малко бутони.
Падащи менюта
За сайтове с повече категории, продукти и услуги е подходящо да се добавят подменюта, които да показват по-цялостно избора, който предоставяте на потребителя.
- Странично меню (sidebar)
Въпреки че все по-рядко се използва (а на мобилна версия изпада отдолу или се добавя като падащо меню или pop-up), то е важно за сайтове с по-дълбока структура, за филтри в онлайн магазини или table of content (списък с подзаглавията на различните части в по-дълги страници, особено текстови).
Футер навигация
Тук е мястото, където да поставите повече опции за избор, новини, линкове към социалните мрежи и информация, важна за потребителя. Това е финалът на страницата, така че дайте му избор да остане още малко като го привлечете с още от интересното си съдържание. Бъдете максимално изчерпателни.
Навигационна пътека (breadcrumb)
Изключително удобен ориентир за това къде се намира потребителят в йерархията на сайта и важен ориентир за търсачки и екранни четци.
Бутони
Те са най-съществената част от призивите за действие, затова ги правете достатъчно ясни и достатъчно големи, за да могат посетителите да кликнат върху тях (особено в мобилна версия, където използват пръста си вместо прецизния връх на мишката).
Вътрешни линкове
Те са важна част от вътрешната навигация в сайта, най-вече защото са контекстуални. Направете ги видими и достатъчно различни от текста около тях. Оставете ги подчертани, за да изглеждат като линкове още преди потребителят да ги е прочел. Ако линкът е вътре в даден елемент (в главното меню, бутон, поле с фон), направете цялата област кликаема, за да не се налага на посетителите да се опитват да нацелят с пръст или мишка малък текст или да се чудят това линк ли е изобщо.
Дайте контекст на потребителя, където и да се намира – можете да използвате категории за йерархията, различни цветове за различните теми, уточняващи тагове, филтри за продуктите в онлайн магазина.
Направете търсенето в сайта лесно, а търсачката поставете в главното меню.
Линковете за социалните мрежи директно отвеждат потребителя извън сайта ви. Ако това е целта ви (например сайтът ви е чисто имиджов, а вие искате да ви следват другаде), тогава можете да ги поставите в главното меню. В противен случай, по-добре ги добавете към футера.
Как да направите навигацията в сайта максимално ефективна
Каква е целта на навигацията?
Най-важната ѝ функция е да помага на потребителите да намерят бързо необходимата им информация. Осигурява максимална яснота за структурата и позволява на потребителите да разглеждат лесно страниците в него.
Как да улесните посетителя?
Това трябва да е водещ въпрос, когато организирате структурата и всеки път, когато добавяте ново съдържание, в което има бутони и вътрешни връзки.
Каква е крайната цел на уебсайта?
Навигацията трябва да ориентира хората независимо откъде са дошли (търсачка, социални мрежи, реклама) и независимо откъде са влезли (начална страница, блог статия, продукт) така, че да могат да стигнат лесно до края (да изпратят запитване, да купят продукт).
⇒ Писала съм за това чрез едно примерно линейно движение в сайта в статията си „Как да направите уеб дизайн, който насочва потребителя към желаните от вас действия“. Само че в реалността това движение не е линейно. Посетителите могат първо да разгледат продукт, после да погледнат в „За нас“, да прочетат статия в блога, да проверят в контактите за местоположението на магазина, да се върнат при продукта, да разгледат други продукти… Могат дори да излязат от сайта и да се върнат (понякога съвсем случайно) след дни. И през цялото време трябва да са наясно къде са, защо са тук, какво се изисква от тях и най-важното – този сайт ще им реши ли проблема (чрез информация, продукт или услуга)?
Отговорни сте да изградите безупречна структура с ясна навигация. Ако се почувстват загубени, посетителите просто ще напуснат сайта ви.
Традиционни принципи за лесна работа със съдържанието с мишка, на десктоп
- Разполагайте съдържанието отгоре надолу, отляво надясно, като най-важното е в горния ляв ъгъл. Така ще сте сигурни, че то следва естествения начин на възприемане на информацията.
- Следете за местоположението на екрана на всяка отделна секция – цялото съдържание, свързано с една тема, трябва да е на екрана, за да не се налага скрол нагоре-надолу.
- Когато имате няколко бутона за едно нещо (например „Отказ” и „Изпращане”), ги разполагайте достатъчно близо един до друг.
- Хората са фокусирани върху целта си и търсят скорост преди всичко. Не е достатъчно сайтът ви е да бърз само технически – трябва и самото съдържание да е лесно за „сканиране“ и възприемане.
- Изскачащите прозорци са удобни, защото се появяват близо до мишката и не са необходими допълнителни движения в сравнение с акордеони и допълнителни менюта.
- Използвайте големи бутони, които да са удобни за клик.
- Не правете менютата с много опции, за да спестите време за четене, търсене и избор.
Добри практики за мобилни устройства
- Най-удобната зона за четене и кликане е центърът на екрана. Дръжте ключовата информация там.
- Скролът е най-удобен и изисква най-малко време и усилия. Съобразете съдържанието си с това и избягвайте допълнителни кликове и хоризонтални превъртания.
- Хората рядко са съсредоточени само в съдържанието на сайта ви, особено ако са в градска среда. Повече от всякога е важно съдържанието ви да е лесно за възприемане „по диагонал“, а кликаемите опции да са лесни за намиране и докосване.
- Не „забивайте“ интерактивни елементи до ръба на екрана – добавете малко въздух отстрани, за да могат посетителите да ги докосват спокойно.
- Не забравяйте, че на мобилна версия пръстът е над екрана при скрол, но при четене и по-задълбочено възприемане на информацията, той пречи и обикновено е отстрани на устройството (или в краен случай над долната част на екрана). Затова правете важните кликаеми елементи (особено бутоните) достатъчно широки, за да се достигат удобно с по-късо движение и с двете ръце, и от различни позиции.
- Изскачащите прозорци са отделени от контекста си и на мобилна версия са трудни за затваряне. Вместо тях използвайте табове, акордеони или линкове. Разбира се, при по-големи сайтове, особен онлайн магазини някои опции (като филтрите) е по-добре да са в изскачащ прозорец или падащо меню).
За финал: съобразявайте се с човешкия фактор и поведение (не само обичайното). Опитвайте се да си представите как хората биха използвали вашия сайт в различни среди и настроение. Те са левичари и десничари, технически грамотни или не, четат сайта ви на спокойствие вкъщи или в движение на оживен булевард, използват гласови асистенти, имат диоптри, но не си носят очилата, познават бранда ви и са били в сайта ви или не…
Но винаги за тях е важно да са уверени, че са на прав път към целта си и ще им бъде максимално лесно да я достигнат, където и да се намират в сайта. Затова изградете цялата навигация на сайта си така, че да пояснява йерархията на страниците и да улеснява този процес.
Ако имате въпроси по навигацията на вашия сайт или се нуждаете от консултация, свързана с дизайна му, питайте ме в коментарите под тази статия, ще ви отговоря.
===
Любомира Попова е уеб дизайнер на свободна практика и художник-сюрреалист с артистичен псевдоним Fineluart.
Създава първия си статичен сайт през 2008. В момента се е специализирала в изработката на WordPress сайтове и визии за уеб. Занимава се с дизайн повече от 17 години, като през повечето време е била част от рекламни фирми и агенции. Създавала е визии за почти всички рекламни среди – външна, печатна, уеб, digital, TV. Работи основно с малки бизнеси в сферата на услугите, макар през годините да е правила реклами за представители на почти всички сфери.
Има професионален интереси в областта на дигиталния маркетинг, графичния дизайн и social media. Това ѝ дава възможност да вижда уеб сайтовете не само като дизайн, а като част от визуалната комуникация между бранда и потребителя. За нея всяка отделна визия е част от цялостно развитие, а не „парче дизайн“.
„Редовно консултирам клиенти и млади колеги и винаги се радвам, когато успея да улесня някого по пътя му в моята (любима) сфера. Ако имате въпроси за дизайн и реклама, съм насреща да помогна, независимо дали става въпрос за принципи в дизайна, тенденции, технически въпроси, видове реклами или се нуждаете от конкретни съвети за личните си проекти. Питайте ме.“ Люба
