Всплывающие окна по отношению к юзабилити, конверсии и коэффициенту отказов

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

Roman Jarmukhametov
Роман Джармухаметов
Senior Web Designer
Всплывающие окна по отношению к юзабилити, конверсии и коэффициенту отказов

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

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

Возникновение модального всплывающего окна

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

Всплывающее окно может использоваться по-разному: от доставки не релевантного всплывающего спама до предложений релевантного контента и звонков с подтверждением. По мнению UX Mag, для дизайнеров пользовательского интерфейса всплывающее окно быстро стало представлять собой "дар вновь обретенного пространства" - возможность в последнюю минуту дополнить или сократить существующий контент страницы.

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

Положительные стороны всплывающих окон

Прежде чем рассмотреть все причины, по которым всплывающие окна так часто попадают в списки "самых ненавистных элементов пользовательского интерфейса", нельзя и не отметить положительные моменты. В конце концов, когда мы провели онлайн-опрос на тему "Останутся ли всплывающие окна?", 21% респондентов ответили утвердительно, отстаивая силу всплывающих окон против 23%, считающих их дьявольской моделью дизайна, и 56% сомневающихся.Итак, давайте рассмотрим некоторые плюсы этого элемента пользовательского интерфейса.

1. К - коэффициент конверсии

Во-первых, "Большие конверсии". Большинство производителей онлайн-контента стремятся прежде всего к одному - конверсии. Будь то подписка на рассылку по электронной почте, скачивание или покупка.

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

Почему это так важно для электронной коммерции? В мире Интернета, где, по данным Отта Ниггулиса из ConversionXL, 99% посетителей сайта не совершают"покупку" при первом посещении вашего сайта, но 75% намереваются вернуться для этого в будущем, модальное всплывающее окно кажется незаменимыми инструментом для сбора последующих электронных адресов. Почему? Все это благодаря силе "убеждения", или маркетингу прерывания.

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

Результаты использования всплывающих окон, ориентированных на конверсию, могут быть убедительными. В Университете Альберты наблюдалось увеличение числа подписчиков на рассылку, когда они ввели всплывающую форму подписки: с 1-2 подписок в день они выросли до 12-15 - все еще крошечные цифры, но, тем не менее, это значительный процентный рост.

2. П - показатель отказов

Но, конечно, если вы постоянно прерываете своих пользователей и отвлекаете их от навигации всплывающими окнами, они уйдут с вашего сайта, не так ли? Согласно ConversionXL, неверно. В двух примерах, приведенных Ниггулисом, WPBeginner и Backlinko, введение модальных всплывающих окон не оказало никакого влияния на показатель отказов сайта. Ноль.

С чисто конверсионной точки зрения всплывающие окна, похоже, работают.

Отрицательные стороны

1. Большие цифры, нулевая вовлеченность

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

2. Надежность бренда

На самом деле, всплывающие окна могут нанести вред вашему бренду, даже если они одновременно повышают конверсию. Nielsen Norman Group в своем материале о "нуждающихся паттернах дизайна", а точнее о всплывающих окнах с целью выхода (всплывающие окна, которые пытаются заставить вас выполнить какое-либо действие перед тем, как покинуть веб-страницу),определяет, что " требующие внимания паттерны, такие как всплывающее окно"пожалуйста, не уходите"... разрушают представление профессионального, уверенного веб-сайта". Они также наносят ущерб восприятию пользователями доверия".

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

Возможно, эра маркетинга прерывания в целом и всплывающих окон в частности подходит к концу. Входящий маркетинг не подает признаков того, что оно слабит свою хватку в цифровую эпоху, и в условиях все более переполненного онлайн-рынка пользователи как никогда свободны в выборе брендов, которым они пообещают свою лояльность. Как говорит Джон Рид в своем обличительном слове в адрес всплывающих окон, аудитория B2B, в частности, "ищет долгосрочных отношений с экспертами, которым они могут доверять". Если ваш продукт или контент хорош, есть шанс, что пользователи найдут к нему дорогу без всплывающего окна.

3. Пользовательский опыт и юзабилити

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

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

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

4. Мобильные всплывающие окна

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

Всплывающие окна - непростая задача для дизайнеров мобильных пользовательских интерфейсов. Разные операционные системы требуют разного дизайна. Обычная правая верхняя кнопка закрытия находится далеко от зоны большого пальца, и по ней сложно попасть точно, а слишком часто всплывающие окна на мобильных устройствах не могут изменить размер, оставляя пользователей прокручивать страницу в отчаянном поиске кнопки "закрыть". В основном, как отмечает UX Mag, модальные всплывающие окна "просто не работают как следует на планшетах и мобильных устройствах".

Так может ли всплывающее окно когда-либо способствовать хорошему пользовательскому опыту?

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

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

Если вы разрабатываете подобное программное обеспечение, попробуйте провести A/B-тесты на то, как лучше общаться с пользователями. Может оказаться, что ваши интерактивные всплывающие окна, созданные по прототипу, будут лучше восприниматься пользователями, если они увидят истинную ценность прерывания.

Однако имейте в виду, что A/B-тесты между двумя всплывающими окнами дадут вам только лучшее из двух миров. Запустите вариант без всплывающих окон, чтобы увидеть, какой опыт действительно ценят пользователи.

Как правильно делать всплывающие окна

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

  1. Заставлялоих подтверждать действие или решение в решающий момент рабочего процесса
  2. Дало им полезную обратную связь или совет
  3. Сосредоточьте их на одном, релевантном фрагменте контента ("релевантный" здесь очень важно)

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

Вот несколько советов от команды дизайнеров ideaflow:

  • Несмотря на то, что утверждает ConversionXL, не поддавайтесь искушению быть умником, когда речь идет о написании текста, потому что никому не нравится принижение качества контента.Вместо этого важны позитивные призывы к действию и тексты, которые действительно добавляют ценность для пользователя, а не только для вашего бренда.
  • Отслеживайте всплывающие окна с помощью cookie, чтобы не показывать одним и тем же пользователям одно и то же cookie несколько раз. Конечно, вы предполагаете, что один и тот же пользователь будет постоянно заходить на ваш сайт через один и тот же браузер с одного итого же устройства. Попутно отмечу, что HubSpot действительно следует заняться этим: каждый раз, когда я захожу на их блог, они спрашивают меня, хочу ли я подписаться на обновления, что я сделал несколько месяцев назад.
  • Предлагайте пользователям ценный контент и стимулы, а не хлам. И не просите у них просто контактные данные - это создает неприятный пользовательский опыт. Как насчет удобных всплывающих окон, которые не запрашивают контактные данные, а отправляют читателей на страницу бесплатных ресурсов? Для многих это желанный перерыв.
  •  Тщательно продумайте время и положение. Компания SumoMe установила, что наилучшее (т.е. наиболее благоприятное для конверсии) время для внедрения всплывающего окна - после того, как пользователь пробыл на сайте 5 секунд, но с точки зрения пользовательского опыта это, вероятно, далеко не так. Зачем пользователю взаимодействовать с вашим брендом или контентом, если он даже не успел оценить его? Не делайте своих пользователей заложниками коэффициента конверсии.
  •  Если вы разрабатываете дизайн для мобильных устройств, следуйте совету UXMag и размещайте "сенсорные цели" там, где пользователи смогут до них дотянуться, исходя из сценариев использования (и зоны большого пальца). Поместите вкладку закрытия в нижнем правом углу и не просите пользователей прокручивать всплывающее окно.
  • Самое главное, каждый раз, когда вы разрабатываете всплывающее окно, задавайте себе вопрос: "Действительно ли моим пользователям нужно это прерывание?" Чаще всего это не так. Как сказал один из наших респондентов, "используйте молоток только тогда, когда вам нужен молоток".

Вывод

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

Они не собираются обнимать вас в знак благодарности за разработку интерфейса с полноэкранными всплывающими окнами ПОДПИСАТЬСЯ ЗДЕСЬ и снисходительным текстом, но, опять же, они, вероятно (вероятно!), не покинут ваш сайт.

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

Хотите получать нашу рассылку по дизайну и автоматизации бизнеса?

Вы будете два раза в месяц  получать обзор советов по дизайну и автоматизации.
Спасибо за подписку!
Упс! Что-то пошло не так при отправке формы.

Похожие посты блога

Актуальная тема для обсуждения: устойчивое развитие в цифровом дизайне и посредством него

Актуальная тема для обсуждения: устойчивое развитие в цифровом дизайне и посредством него

Потому что существует только планета А, и дизайнеры могут сделать гораздо больше для её спасения
Читать полностью
arrow_forward
Обеспечьте развитие пользовательского опыта вашего сайта

Обеспечьте развитие пользовательского опыта вашего сайта

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

2022 год - год дизайн систем

Причины, по которым вы (и ваша компания) должны использовать дизайн системы для вашего следующего цифрового продукта
Читать полностью
arrow_forward
Как мы повышаем ценность проектов для клиентов

Как мы повышаем ценность проектов для клиентов

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