Модальные окна: излишество или необходимость?

Модальное окно (в дальнейшем “Pop-up”) — элемент веб-интерфейса, требующий максимально обоснованного применения. Все чаще модальные окна используются не по назначению, а для избежания «неудобных» ситуаций, созданных самим же веб-дизайнером. Примеры хороших рекламных всплывающих окон и вовсе редкость.

Появление таких окон должно быть не только оправданным, но и желаемым для современного пользователя, ценящего свое время.
Наши рекомендации позволят вам спроектировать не только полезные, но и запоминающиеся Pop-up окна.

Можно выделить 3 категории всплывающих окон:

1. Концентрирующие внимание

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

2. Привлекающие внимание

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

3. Улучшающие usability

Такие окна делают сайт компактнее. Вместо перехода на другую страницу, при наведении или клике элемента, вся необходимая информация предоставляется в модальном окне.

Что отличает хорошие модальные окна:

• Простота оформления. Безусловно, окно должно вписываться в стиль сайта, содержание излишеств в дизайне и наполнении окна только усложнит восприятие.


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


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


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


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


• Сохранение баланса между частотой и контекстом появления Pop-ups. Особенно это касается рекламных баннеров. Они не должны присутствовать на каждой странице. Разработка алгоритма анализирования поведения пользователя и других параметров взаимодействия с сайтом позволит не только избегать неприятных ситуаций, но и повысить конверсию.


• Предоставление возможности отказаться от просмотра баннера повторно. Пример: “Нажмите здесь, чтоб не видеть это всплывающее окно в дальнейшем”.


• Производительность. Время загрузки окна не должно быть заметно глазу.

Протестируйте несколько версий модального окна. Результаты таких исследований очень важны, потому что они наилучшим образом позволят определить лучшие Pop-up’s в реальном контексте.

Kогда использование модальных окон оправдано:

Фото/Видео галереи

+ Экономия пространства веб страницы.
+ Нет необходимости переходить на другую страницу для просмотра медиа.
+ Внимание пользователя максимально сконцентрировано.

Контактные формы, авторизация и регистрация

+ Такие формы моментально доступны, что хорошо с точки зрения usability.

Подсказки и оповещения.

+ В поисках ответов нет необходимости покидать страницу: все объяснения появляются здесь и сейчас.

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

• Действительно ли пользователи нуждаются в предлагаемой информации? Количество и частота появления попап окон должна быть минимизирована.
• Гармонично ли окно вписывается в UI/UX дизайн?
• Интуитивно и удобно ли проходит процесс взаимодействия с окном (открытие, закрытие, повторное открытие)?

Несмотря на то, что модальные окна не индексируются поисковыми системами и часто блокируются специальными плагинами, мудрое использование таких окон сделает ваш сайт только удобнее и полезнее.
Статистика показывает, что использование Pop-up’s увеличивает количество новых подписчиков на 1570%, а авторизация с их помощью поднимает конверсию на 1000%.
____

Компания Perfectorium одна из самых молодых, но в то же время самых быстро развивающихся IT компаний в Украине. Perfectorium предлагает универсальные услуги по созданию и продвижению сайтов, разработке мобильных приложений и программ, UI/UX design. Мы воплощаем в жизнь планы и мечты Вашего бизнеса, заботясь о присутствии бренда онлайн и оффлайн. С нами очень просто связаться по телефону или по Скайпу и обсудить Ваш новый проект. Заполните форму обратной связи и мы с Вами быстро свяжемся и предоставим бесплатную консультацию и предварительный расчет проекта.