Как и когда отображать скрытый контент?

Posted on by riasevastopol

Применение скрытых элементов и скрытого контента навигации — очень популярный тренд современного интернет-маркетинга. На другими словами две главных обстоятельства: первая содержится в нежелании перегружать пользователей информацией, вторая — в необходимости создания адаптивных лендингов, каковые прекрасно смотрелись бы как на лептопах, так и на мобильных устройствах.

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

Этот материал посвящен не тому, какие конкретно элементы контента стоит скрывать прежде всего. Не коснемся мы и того, как прекрасно дизайн «информирует» пользователю, что на странице имеется скрытые элементы, каковые возможно отобразить.

Сейчас мы сфокусируемся на механике самого процесса показа контента, скрытого от взоров пользователей.

  • Минимизируйте когнитивную нагрузку для оптимизации юзабилити и конверсии лендинг пейдж

Примеры скрытого контента

Самый распространенный пример — это мега-меню. Этот инструмент оптимальнееиллюстрирует основную проблему скрытого контента. Иногда пользователям думается, что мега-меню владеет «собственным разумом»: оно может нежданно показаться и столь же неожиданно провалиться сквозь землю.Как и когда отображать скрытый контент?

На сегодня не выработано единого стандарта относительно того, как должно демонстрироваться скрытое меню. В итоге, в первый раз попадая на лендинг, пользователи не знают, как активировать данный элемент: то ли курсор на некую область, то ли щелкнуть по определенному элементу интерфейса.

В случае если концепт мега-меню реализован верно, неприятностей с юзабилити не появляется. В другом случае визитёры пребывают в замешательстве от того, что меню самопроизвольно, согласно их точке зрения, раскрывается, в то время, когда люди курсор по экрану.

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

Всплывающие окна, рекламные объявления и СТА-элементы, каковые активируются наведением курсора и появляются поверх контента, также будут злить людей, в случае если настройки чувствительности будут через чур высокими.

  • Как оптимизировать навигацию вебмагазинов, либо 7 раз отмерь

Как определить, чего желает пользователь?

Чтобы визитёры ощущали себя комфортно, скрытое содержание должно оказаться в необходимый момент. Нажатие либо клик на определенный элемент страницы тяжело трактовать неправильно — это признак того, что человек желает заметить контент. Но, в случае если речь идет о таком методе активации, как наведение курсора, тут все значительно сложнее: необходимо верно выявить намерение пользователя.

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

Метод появления скрытого содержания обязан трудиться, как часы. В другом случае массового оттока клиентов не избежать.

самый точным индикатором жажды просмотреть тот либо другой элемент есть задержка курсора на нем. И чем продолжительнее продолжается эта задержка, тем очевиднее намерения пользователя. В случае если курсор наведен на элемент, но наряду с этим двигается , вывод не так однозначен: в полной мере быть может, это всего лишь часть пути к второму элементу интерфейса.

Помимо этого, человек может водить курсором из стороны в сторону, пока легко что-то просматривает на сайте.

В случае если скрытый контент закрывает собой ответственные элементы, имеется суть расширить время остановки курсора, требующееся для активации. Иными словами, чем важнее смогут быть последствия неверной интерпретации намерений пользователя, тем более четкие сигналы требуются для вывода скрытого содержимого. Наряду с этим нужно настроить визуальный фидбек для пользователя, что говорит о интерактивности конкретного элемента (кроме того в случае если курсор не задерживался на нем).

Крайне важно, дабы сигнал, информирующий об интерактивности, был понятным и очевидным для визитёров, но одновременно с этим ненавязчивым.

Анимация может включать в себя часть времени «остановки курсора»: к примеру, возможно настроить ее так, дабы при зависании курсора в определенной территории начинался показ анимации, а заканчивался в тот момент, в то время, когда курсор ее покидает.

Подобный трюк минимизирует риск ошибки и дезориентацию посетителей. Успешное ответ — демонстрация другого изображения продукта при наведении на него курсора. К примеру, на сайте Herschel новое изображение сменяет предустановленное в момент, в то время, когда пользователь наводит курсор на картину.

Все это сопровождается плавным эффектом затемнения.

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

В случае если курсор мыши покидает целевую область по окончании того, как скрытый контент был продемонстрирован, блок не должен исчезать мгновенно. Нужно настроить маленькую задержку, которая позволит найти, был ли указатель переведен в другую часть экрана намеренно либо это случилось случайно. Игнорирование данной советы ведет к происхождению так называемой «неприятности диагонали» (diagonal problem) мега-меню.

Ее сущность содержится в том, что при перемещении к содержимому выпадающего меню курсор покидает целевую область и меню тут же сворачивается. Ответ — в настройках, сделанных исходя из предположения, что возвращение курсора и непрерывное движение мыши в целевую область спустя маленький временной отрезок говорит о жажде пользователя продолжить работу с меню.

Существуют и другие подходы к «проблеме диагонали». Так, к примеру, во второй половине 80-ых годов двадцатого века эксперты из Tog создали новый интерфейс Apple. Они сделали вывод, что самый эффективный метод удостовериться в намерениях пользователя содержится в том, дабы проверить, остается ли курсор в треугольной области (в качестве вершин «контрольного треугольника» берется начальная позиция курсора, и верхняя и нижняя точки подменю).

Возможно поступить и по-второму (данный вариант принят на вооружение компанией Amazon): необходимо всегда анализировать перемещения курсора. В этом случае совокупность отслеживает его траекторию и оценивает возможность того, что курсор направляется к определенной цели. Данный подход кроме этого предполагает более долгие задержки перед закрытием меню, каковые разрешают не владеющим быстрой реакцией людям прекрасно ориентироваться на ресурсе.

Панель навигации с выпадающим подменю на сайте Los Angeles Times наглядно демонстрирует сущность результата, обрисованного выше. При попытке переместить курсор от пункта Entertainment («Развлечения») верхнего уровня меню к одному из пунктов, тот на мгновение выясняется над категорией Спорт («Спорт»), что ведет к открытию ненужного подраздела.

  • Из-за чего навигация неудобна для визитёров вашего сайта?

Настройка времени отображения скрытого контента

Демонстрация скрытого содержания должна быть организована так, дабы пользователь ощущал — он всецело осуществляет контроль сотрудничество с интерфейсом. Визуальная обратная сообщение (изменение стиля либо цвета текста, смена фона) обязана активироваться не позднее, чем через 0,1 секунды по окончании наведения курсора на элемент, дабы у визитёров оказалось чувство моментального отклика со стороны совокупности.

Появление скрытого контента возможно инициировано или щелчком мыши, или остановкой курсора в целевой области приблизительно на 0,3–0,5 секунд (в течение этого времени может начинаться загрузка анимации). Однозначным знаком к отмене показа контента помогает щелчок (нажатие клавиши) за пределами целевой области, либо тот факт, что пользователь переместил курсор в сторону более чем на 0,5 секунды.

Настроить показ элементов, появляющихся по окончании клика либо нажатия, достаточно легко:

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

В случае если же речь заходит об элементах, появление которых инициируется наведением курсора, метод выглядит мало сложнее:

  1. В течение 0,1 секунды по окончании попадания курсора в целевую область активируйте визуальную обратную сообщение.
  2. Подождите 0,3–0,5 секунды.
  3. В случае если курсор все еще находится в целевой области, выведите скрытый контент на экран в течение 0,1 секунды.
  4. Продолжайте показ контента до того момента, пока пользователь не переместит курсор в сторону от целевой области и демонстрируемого элемента более чем на 0,5 секунды.

Высоких вам конверсий!

По данным: nngroup.com, image source: PROCristina Sassaro

Случайные статьи:

Удаление скрытого текста


Подборка похожих статей:

riasevastopol

More Posts