Главное, что надо знать про попапы: люди заходят на страницу ради некоторого содержимого, а попап это содержимое перекрывает. Попап — это как блокирующий проход консультант, встречающий на пороге магазина и мешающий самому осмотреться. Даже если этот попап доверху наполнен пользой для посетителя, даже если там сообщается о скидке в 15% или выигрыше микроволновки — посетитель пришел на страницу не ради этой информации, у него есть какие-то ожидания о том, что он получит на странице, а непрошенный попап нарушает эти ожидания, перекрывая желаемое содержимое страницы. Как следствие — у современного посетителя в довесок к «банерной слепоте» развилась «попап-слепота» — машинальное закрытие любых всплывающих окон, перекрывающих страницу.
Например, вот попап, вылезший на главной странице онлайн-кинотеатра. Он полезен для пользователя — предлагает указать личные вкусы, чтобы сайт смог подстроиться и показывать только подходящие человеку фильмы. Но я всё равно, даже не читая содержимого, потянулся курсором в правый верхний угол в поисках крестика. Проблема еще и в том, что мне предлагается некоторая «дополнительная опция» еще до того, как я вообще понял, о чем сайт. Но сайт перекрыт, вместо него — непрошенная, неуместная, несвоевременная польза.
Я использую два простых правила:
1. Перекрывающий страницу попап можно показывать только ответной реакцией на действие посетителя (обычно — клик на кнопку или псеводссылку), то есть когда он явно прошенный.
2. В любых других случаях предназначенную для попапа информацию стоит разместить на элементе, не перекрывающем остальное содержимое страницы. Она должна идти дополнительно к тому, ради чего посетитель пришел на страницу, а не вместо него.
1. Перекрывающий страницу попап можно показывать только ответной реакцией на действие посетителя (обычно — клик на кнопку или псеводссылку), то есть когда он явно прошенный.
2. В любых других случаях предназначенную для попапа информацию стоит разместить на элементе, не перекрывающем остальное содержимое страницы. Она должна идти дополнительно к тому, ради чего посетитель пришел на страницу, а не вместо него.
Пример из практики. Два года назад ко мне прилетела задача для сайта Пулково, уже сформулированная как «Бабл подписки на соц сети Пулково». Администрация аэропорта взялась за развитие своих аккаунтов в соцсетях, и попап на сайте аэропорта (на некоторых страницах, не включавших главную) показался ей хорошим способом привлечь первых подписчиков. Даже был приложен референс:
После классической процедуры подъема «уровня задачи» от реализации уже задуманного решения проблемы к самой проблеме, составления «понимания задачи» с описанием мотивов аэропорта и мотивов посетителей, плюсов и минусов текущего варианта информирования о соцсетях (маленькие иконки в углу страницы) и предлагаемого (попапа поверх страницы с текстом типа «Теперь мы в соцсетях!») мы пришли к решению сообщать о соцсетях при помощи «врезок» вместо попапов.
Ничего гениального в этом, конечно, нет, но мы не просто поменяли формат. Само сообщение «Мы есть в соцсетях!» малополезно посетителю, реакцией на такое сообщение будет лишь «Рад за вас». Чтобы сообщение вызвало у пользователя интерес, оно должно сулить пользу для него. Поэтому на каждой странице, где предполагалось информировать о соцсетях, было сформулировано свое сообщение «чем соцсети полезней содержимого этой страницы»:
для страницы новостей — «Оперативней всего новости публикуются в соцсетях» и «За новостями не обязательно заходить на сайт — на них можно подписаться в соцсетях»,
для страницы «Пассажирам» — «В соцсетях мы отвечаем на вопросы, рассказываем о новых направлениях и рекомендуем выгодные предложения»,
для страницы «Об аэропорте» — «Заглянуть за кулисы повседневной жизни аэропорта можно в соцсетях».
для страницы новостей — «Оперативней всего новости публикуются в соцсетях» и «За новостями не обязательно заходить на сайт — на них можно подписаться в соцсетях»,
для страницы «Пассажирам» — «В соцсетях мы отвечаем на вопросы, рассказываем о новых направлениях и рекомендуем выгодные предложения»,
для страницы «Об аэропорте» — «Заглянуть за кулисы повседневной жизни аэропорта можно в соцсетях».
Подобные непонятки с теорией близости часто встречаются на всяких новостных сайтах. Понять, какие надписи «заодно», можно только по изучению всего блока новостей страницы, пограничных условий, выявлению правил верстки. Взгляда на одну новость недостаточно.
Пару скриншотов о том, что к возможности использования на сайте кастомного шрифта надо походить с большой ответственности, особенно когда речь не о крикливо-провокационном заголовке, а о теле текста. Читается очень тяжко:
мяу-дизайн
Главное, что надо знать про попапы: люди заходят на страницу ради некоторого содержимого, а попап это содержимое перекрывает. Попап — это как блокирующий проход консультант, встречающий на пороге магазина и мешающий самому осмотреться. Даже если этот попап…
Кстати, про попапы. Кажется, я нашел самый бесполеный в мире попап. Это сайт какой-то дизайн-студии, которая научилась делать адаптивные сайты и решила на примере своего сайта громко заявить об этом миру.