UXPUB 🇺🇦 Дизайн-спільнота

Редакція
Редакція

Опубліковано

Всплывающие окна на сайтах: что с ними не так и что с ними делать

#ux

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

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

Ошибка 1: перекрывать всплывающим окном контент до того, как пользователь успел с ним ознакомиться

Как правило, это окна с предложением подписаться на рассылку или получить скидку.

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

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

Ошибка 2: показывать одновременно несколько всплывающих окон

Это выглядит непрофессионально, неопрятно и раздражает пользователей, которым приходится все эти окна закрывать.

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

Важное сообщение (на желтом фоне) показывается не на всплывающем окне, а встроено в тело страницы

Ошибка 3: отвлекать всплывающим окном пользователя от его задачи

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

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

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

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

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

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

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

5. В мобильной версии сайта показывать всплывающее окно с рекомендацией воспользоваться мобильным приложением

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

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

Баннер с рекомендацией установить приложение отображается в нижней части экрана

Полный список в статье содержит 10 пунктов, но некоторые из них повторяются и пересекаются по смыслу, поэтому мы взяли на себя смелость их сгруппировать. Ссылка для тех, кто хочет посмотреть все десять проблем с иллюстрациями и подробными рекомендациями: http://bit.ly/2XJJ9r2.

Подписывайтесь на нас facebook и telegram.

Топ коментарі (0)