Дизайн модальных окон (popup)

Большинство сайтов используют модальные окна как элементы призыва к действию. Но иного их можно использовать для дополнительного информирования пользователей о функциях браузера таких как отключенный JavaScript или приложении Adblock.

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

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

Давайте рассмотрим несколько трендов в проектировании (дизайне) окон, чтобы выяснить как именно они работают.

Темный фон и кликабельное пространство.

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

Вместо этого, пользователь должен видеть, что за всплывающим окном есть страница сайта. Затемнение фона обычно делают 50-90%.

Дизайн модальных окон (popup)

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

Дизайн модальных окон (popup)

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

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

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

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

Методы отображения.

Существуют некоторые популярные тренды, которым следуют маркетологи, которые используют всплывающие окна для показа некоторым посетителям.

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

Но есть способы на много более эффективные:

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

Выбор каждого из сценариев зависит от конкретной аудитории сайта.

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

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

Маркетинговые сообщения на окнах.

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

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

Дизайн модальных окон (popup)

Кроме того, с помощью модального окна можно попросить пользователя отключить Adblock для данного сайт. Так поступают некоторые крупные сайт, которые хотя «отсеять» пользователей с таким приложением.

Дизайн модальных окон (popup)

Целью любого модального окна должен быть призыв пользователю что-либо сделать. Сообщение на таком окне должно быть коротким, но полезным для пользователя.

Вот некоторые плагины для создания отличных модальных окон:

  • leanModal (leanmodal.finelysliced.com.au)
  • Remodal (vodkabears.github.io/remodal)
  • SimpleModal (simplemodal.plasm.it)


Подпишитесь на обновления блога!

Будьте всегда в курсе новостей

Добавить комментарий