Всплывающие окна как элемент UX: правила создания, распространенные ошибки и полезные советы дизайнерам
Pop-up — неоднозначный элемент, который часто применяется в дизайне сайтов и приложений. Некоторые категорично заявляют, что использовать его нельзя. Другие, наоборот отстаивают полезность всплывающих окон.
В этом материале разберёмся, в каких случаях поп-апы будут полезны. Пройдёмся по ошибкам дизайнеров и поделимся советами.
Прежде чем переходить к расшифровке понятия, начнём с базовых определений. Существуют модальные и немодальные экраны. В первом случае пользователь не может взаимодействовать с контентом пока оверлей находится в активном состоянии. Немодальный экран не блокирует фоновые блоки. Юзер может использовать меню или переходить по ссылкам даже когда половину рабочей области занимает всплывающее окно.
Виды модальных экранов:
Ещё один важный нюанс — затемнение фона. Если после появления всплывающего окна оставшаяся область не отображается или слегка проглядывает через наложенный бэкграунд — перед вами lightbox.
10 лет назад преимущества использования всплывающих окон были очевидными. Это новый формат, который привлекал внимание аудитории и мотивировал на выполнение определённых действий. Людям было интересно, что будет если нажать кнопку.
Со временем поп-апы начали использовать для разных задач. Сайты, которые не заботились о своих пользователях, отображали в них рекламу. Модальные окна быстро потеряли репутацию и стали ассоциироваться с опасными действиями. Главный аргумент скептиков — всплывающие окна разрушают пользовательский опыт. Они отвлекают юзеров и мешают им сделать то, зачем они пришли.
Если pop-up сделан неправильно или разработчик допустил появление критических ошибок, то элемент действительно негативно повлияет на опыт людей. В некоторых случаях оверлей сложно закрыть. Кнопку с крестиком делают слишком мелкой или используют нестандартные механизмы. Мало кто знает, что лайтбокс можно закрыть по клику за областью всплывающего окна. Старайтесь внедрять понятные сценарии, которые легко распознают пользователи.
Главная цель всплывающих окон — показать важную информацию и мотивировать на выполнение целевых действий. Когда они только появились, конверсия формата зашкаливала. Теперь люди относятся к поп-апам с осторожностью. Они нажмут кнопку или заполнят форму только если ненавязчиво преподнести оффер или предложить бонус.
Опасения по поводу использования всплывающих окон легко понять. Pop-up прерывает сёрфинг по странице и переключает внимание. В большинстве случаев элемент воспринимается как раздражитель. Особенно, если есть грубые ошибки, которые разработчик пропустил при тестировании отображения контента. Представьте, что во время просмотра любимой телепередачи появляется навязчивая реклама, которая рассказывает о новом шампуне.
Поп-апы работают по похожему сценарию. Они забирают у пользователя контроль и переключают внимание. Если совместить хороший дизайн с выгодным предложением, лояльность потенциальных клиентов не пострадает. Человек вернётся к просмотру контента или нажмёт на кнопку подписки.
Pop-up действительно потерял изначальную эффективность, но это не значит, что от формата надо отказаться. Наши рекомендации будут полезны новичкам, которые ещё не сталкивались с разработкой структуры лайтбоксов и других типов модальных экранов. Опытные дизайнеры тоже получат ценную информацию и смогут пересмотреть подход к созданию интерактивных диалогов.
Эксперименты веб-аналитиков и опыт крупных компаний показал, что пользователи лояльно воспринимают поп-апы если:
Всегда будут люди, которые отрицательно относятся к разным элементам UI. Кто-то не любит анимированные логотипы, других раздражает плавающее меню, третьи терпеть не могут нестандартные скроллбары. Угодить всем невозможно. Юзеры приходят на сайт или в приложение за решением конкретной задачи. Если интерфейс помогает в этом, значит он сделан правильно.
Никогда не используйте такой подход, если хотите сохранить лояльность аудитории. Поп-апы должны заинтересовать, а не любыми способами знакомить с товарами или услугами.
Некоторые из советов ниже больше относятся к разработчикам, но многие дизайнеры разрабатывают структуру всплывающих окон и доводят проекты до логического завершения и выпуска в продакшн.
Если хотите прервать знакомство пользователя с контентом, предложение должно быть мощным и релевантным. Просите почту или создать учётную запись — дайте бонус. Люди не будут вводить свои контакты, если они не уверены в том, что получат что-то ценное.
Хороший пример использования формата. Длинная форма записи на приём иногда занимает половину страницы. Дизайнер разработал минималистичное оформление, а разработчик представил запись в виде интерактивного диалога с несколькими шагами. Пользователь решает свою проблему, а бизнес получает лояльного клиента и сохраняет хорошие поведенческие факторы.
На некоторых сайтах всплывающие окна начинают возникать с первых секунд. Человек ещё не успевает понять, найдёт ли он на странице интересную информацию, а его уже со всех сторон соблазняют разными предложениями. Просьбы зарегистрироваться, ввести email или пройти ознакомительный тур по системе надо предлагать вовремя. В идеале, через 20-30 секунд после старта визита. И только тогда, когда человек совершает определённые действия: двигает скроллбар или взаимодействует с контентом.
Виджеты онлайн-консультантов бывают чересчур навязчивыми. Владельцы бизнеса думают, что таким способом они смогут перевести больше аудитории из случайных посетителей в действующих клиентов. На самом деле формат всплывающего диалога чаще раздражает. Особенно, если у пользователя не было цели задать вопрос. Анимированное изображение выше — идеальный пример взаимодействия. Блок находится в зоне видимости и раскрывается целиком только после клика. Контроль остаётся у юзера, ему не навязывают лишнюю информацию.
Решение этой проблемы ложится на плечи разработчика. Он должен внедрить механизм запоминания cookies, чтобы всплывающее окно с контентом показывалось один или несколько раз за визит. Можно реализовать разные сценарии: до нажатия на кнопку закрытия, через день-неделю-месяц после первого посещения сайта, после выполнения определённых действий.
Дизайнер должен поддерживать связь с клиентом даже после утверждения макета. Так он покажет, что не просто поставил галочку и добавил проект в портфолио, а заинтересован в крутом результате. Если разработчик допустил ошибку — сообщите клиенту и расскажите, как воспроизвести проблему.
С помощью всплывающего окна можно решить любую задачу. Например, запросить подтверждение на выход из приложения.
Некоторые дизайнеры настолько следуют стереотипам, что забывают о важности пользовательского опыта. В pop-up не обязательно размещать форму подписки на обновления по электронной почте или предложение перейти в социальные сети. Стандартные сценарии не нравятся аудитории. Они устаревшие, малоэффективные и негативно влияют на поведенческие факторы. Используйте креативные идеи, думайте про аудиторию и старайтесь решать её проблемы.
Модальное окно в данном случае решает важную задачу — помогает восстановить пароль от учётной записи. Если письмо не пришло, человек нажмёт кнопку ещё раз. Поп-ап оформлен ярко и лаконично, есть атрибутика бренда.
Всплывающие окна ассоциируются с внезапным появлением. Они возникают в самый неподходящий момент, не закрываются и затягивают решение проблемы. Лучше использовать pop-up для внутренних задач. Это неплохой способ сэкономить время и полезную площадь.
Модальные окна идеально подходят для мобильных устройств с маленьким экраном. К примеру, человек запускает приложения календаря и создаёт задачу на определённый день. В конце появляется диалог с двумя вариантами действий. Если его заменить на блок внутри контента, рабочая область сильно увеличится. Поп-ап экономит пространство и лучше фокусирует внимание.
Аналитика важна для информационных и коммерческих проектов. В первом случае она помогает лучше узнать предпочтения аудитории, во втором — составить портрет клиента на основе его поведения.
Всплывающие окна надо показывать на основе продуманных сценариев. Форму подписки на обновление стоимости товара демонстрировать тем, кто заходил на страницу и провёл на ней достаточно времени. Предложение подписаться на push-уведомления пользователям, которые постоянно читают новости и взаимодействуют с контентом. Такой подход называется глубоким таргетингом. Он обеспечивает максимально точное попадание в определённый сегмент целевой аудитории. Если человек интересуется мопедами, вряд ли он захочет получать сообщения о скидках на велосипеды.
Дизайнеры часто забывают о том, что элементы дизайн-системы должны быть созданы в одном стиле. Единая цветовая схема, повторяющиеся градиенты, одинаковая типографика. Если у бренда есть фирменный знак или символ в виде животного — обязательно добавьте его.
Посмотрите, как красиво сделана форма подписки на обновления. Пользователю чётко описали преимущества: релевантный контент и отсутствие спама. Как только человек наводит на крестик возникает расстроенный медведь. Пример не совсем подходит под идеал, на который стоит равняться, но он креативный. Человеку не создают дополнительные препятствия, а просто немного давят на психологию с помощью милого образа.
Использование всплывающих окон тесно соприкасается с негативным воздействием на аудиторию. Часть посетителей сайта закроет его после возникновения поп-апа. С этим надо смириться и сосредоточиться на создании качественных предложений.
Многочисленные опросы показывают, что люди взаимодействуют с pop-up только если видят в этом необходимость. Повысить конверсию помогают экономия времени, ощущение заботы и приятные бонусы.
Почему всплывающие окна раздражают:
По некоторым данным, пользователи видят до 25 всплывающих окон в неделю. Эта статистика очень примерная, но она подтверждает, что у дизайнера и разработчика нет права на ошибку. Если сделать что-то не так, пострадает репутация бренда. Заказчик останется недоволен и прекратит сотрудничество. Такой вариант развития событий возможен если в проблеме виноват дизайнер. Он слишком переусердствовал с креативом, добавил неподходящий шрифт или сделал резкий призыв к действию. Стоит сделать один неверный шаг, и работа будет проделана зря.
Каждый элемент на сайте влияет на пользовательский опыт, а всплывающие окна особенно. Распространённые ошибки помогут сформировать представления о правильной разработке макетов pop-up и способах взаимодействия с аудиторией.
Некоторые сайты и приложения используют поп-апы просто ради галочки. Они добавляют в форму поле ввода email и шаблонный текст. Человек не успевает ознакомиться с контентом и видит навязчивое уведомление. Скорее всего, он просто закроет интерфейс и в будущем не захочет менять своё мнение.
Решение: протестируйте несколько вариантов и выберите идеальный момент появления модального окна. Создавайте несколько форматов и показывайте их определённым сегментам аудитории. Предлагайте подписаться на рассылку новостей по электронной почте тем, кто дочитал статью до конца.
В статье мы показывали GIF с плохой проработкой механизма отображения всплывающего окна. Когда пользователь кликает на крестик, появляется дополнительный диалог. Такие примеры встречаются крайне редко, а вот появление нескольких оверлеев одновременно или с небольшой задержкой — вполне реальная ситуация.
Решение: перед запуском проекта в открытый доступ протестируйте разные сценарии. В готовых системах управления можно создать гибкие условия для отображения всплывающих окон. Старайтесь свести к минимуму ситуации, когда пользователь видит поп-апы несколько раз за один визит.
Любой бизнес хочет получить контакты потенциальных клиентов, чтобы увеличить базу. Нельзя решать эту проблему любыми способами. Дайте людям полезный контент или предложите релевантные товары. В знак благодарности они подпишутся на email-рассылку, группу проекта в социальной сети и зарегистрируют учётную запись.
Решение: встраивайте формы подписки в контент или добавьте кнопки с триггерами. Фолловеров будет меньше, зато они точно заинтересованы в сотрудничестве.
Любой стандартный элемент дизайна можно сделать так, что он будет раздражать аудиторию и негативно повлияет на user experience. Или, наоборот, продумать нестандартные варианты, добавить креатив и привлекать внимание. Результат зависит от подхода специалиста.
Начнём с плюсов всплывающих окон:
Минусы:
Всплывающие окна могут положительно повлиять на вовлечённость аудитории, если дизайнер знает предпочтения пользователей, а разработчик создаст идеальный механизм работы. Ставьте людей на первое место и не повышайте конверсию навязчивыми форматами.
Веб-студия IDBI специализируется на разработке сайтов для коммерческих проектов. Мы знаем, как дорого ценится лояльность аудитории в этой нише и заботимся о целевой аудитории.