Как и кога да се показва скрито съдържание

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

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

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

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

Примери за скрито съдържание

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

Към днешна дата няма единен стандарт за това как трябва да се показва скритото меню. В резултат на това, когато попаднат на целева страница за първи път, потребителите не знаят как да активират този елемент: или просто задържат курсора на мишката над определена област, или щракват върху конкретен елемент на интерфейса.

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

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

Как да разбера какво иска потребителят?

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

Ако скритото съдържание закрива важни елементи, има смисъл да увеличите времето за спиране на курсора, необходимо за активиране. С други думи, колкото по-сериозни могат да бъдат последствията от неправилното тълкуване на намерението на потребителя, толкова по-ясни сигнали са необходими за показване на скрито съдържание. В този случай е необходимо да настроите визуална обратна връзка за потребителя, която показва интерактивността на конкретен елемент (дори ако курсорът не се е спрял върху него). Много е важно сигналът, който комуникира интерактивност, да е ясен и видим за посетителите, но в същото време ненатрапчив.

Анимацията може да включва "спиране на курсора" част от времето: например, можете да го настроите така, че когато курсорът се задържа в определена област, анимацията започва да се показва и завършва, когато курсорът я напусне.

Този трик минимизира объркването на посетителите и риска от грешка. Добро решение е да покажете алтернативно изображение на продукт, когато задържите курсора на мишката върху него. Например на уебсайта на Herschel ново изображение замества предварително зададеното, когато потребителят задържи курсора на мишката върху изображението. Всичко това е придружено от ефект на плавно затъмняване.

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

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

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

Има и други подходи към "диагоналния проблем". Така например през 1986 г. специалисти от Tog разработиха нов интерфейс на Apple. Те решиха, че най-ефективният начин да установят намерението на потребителя е да проверят дали курсорът остава в триъгълната зона (катовърховете на "контролния триъгълник" се приемат като начална позиция на курсора, както и горната и долната точка на подменюто).

Можете да го направите по различен начин (тази опция е приета от Amazon): трябва постоянно да анализирате движението на курсора. В този случай системата проследява траекторията си и оценява вероятността курсорът да се насочи към определена цел. Този подход включва и по-дълги забавяния преди затваряне на менюто, което позволява на хората, които нямат светкавични реакции, да се ориентират добре в ресурса.

Задаване на времето за показване на скрито съдържание

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

Появата на скрито съдържание може да се инициира или чрез щракване на мишката, или чрез спиране на курсора в целевата област за около 0,3-0,5 секунди (през това време анимацията може да започне да се зарежда). Недвусмислен сигнал за отмяна на показването на съдържание е щракване (натискане на клавиш) извън целевата област или фактът, че потребителят е преместил курсора настрани за повече от 0,5 секунди.

Настройката на показването на елементи, които се появяват след щракване или щракване, е доста проста:

В рамките на 0,1 секунда след щракването активирайте визуалната обратна връзка и започнете да показвате скритото съдържание.
Продължете да показвате съдържание, докато потребителят не натисне клавиш (или щракне върху бутон на мишката)извън целевата зона.

Ако говорим за елементи, чието появяване се инициира чрез задържане на курсора, алгоритъмът изглежда малко по-сложен:

В рамките на 0,1 секунда след като курсорът влезе в целевата област, активирайте визуална обратна връзка.
Изчакайте 0,3-0,5 секунди.
Ако курсорът все още е в целевата област, покажете скритото съдържание в рамките на 0,1 секунда.
Продължете да показвате съдържанието, докато потребителят не премести курсора от целевата област и показания елемент за повече от 0,5 секунди.