Кейс «Техпорта»: как плавающее меню в письмах не оправдало себя

Александр Тимашев

Ведущий менеджер по продажам, EMAILMATRIX

Как появилась идея добавить плавающее меню в письмах

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

Как работало плавающее меню в письмах

Вот как выглядит html-код, написанный для меню:

	<!--[if !mso]><!-->
<input id="supportchecked" type="radio" name="supporttab" checked style="display:none;" />
<div class="mail_menu_parent">
   <label for="showmenu" class="mob_menu_mail" style="height: 0px; width: 0px; padding: 0px; border: 0px none; display: none; margin: 0px;"></label>
   <input id="hidewmenu" type="radio" checked="checked" name="mainmenutab" style="display:none;" />
   <input id="showmenu" type="radio" name="mainmenutab" style="display:none;" />
   <label for="hidewmenu" class="mob_menu_mail_overlay"></label>
   <div class="mob_menu_mail2" style="display:none;max-width: 0px;max-height: 0px;overflow:hidden;">
      <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; color:#000000;">
         <a href="http://www.techport.ru/katalog/products/?mobile=y" target="_blank" style="color:#245570;">Каталог</a><br />
         <a href="http://www.techport.ru/akcii/?mobile=y" target="_blank" style="color:#245570;">Акции</a><br />
         <a href="http://www.techport.ru/dostavka/?mobile=y" target="_blank" style="color:#245570;">Доставка</a><br />
         <a href="http://www.techport.ru/sposoby-oplaty/?mobile=y" target="_blank" style="color:#245570;">Оплата</a><br />
         <a href="http://www.techport.ru/privateoffice?mobile=y" target="_blank" style="color:#245570;">Личный кабинет</a>
      </span>
   </div>
</div>
<!--<![endif]-->

и CSS:

	@media only screen and (max-width: 660px) { 
    .mob_menu_mail{
        display: block !important;
        position:fixed;
        font-size: 0;
        top: 55px;
        right: 10px;
        width: 60px !important;
        height: 60px !important;
        border-radius: 30px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
        background-image: url(http://site.ru/menu.png);
        border: 0;
        margin: 0;
        padding: 0;
        z-index: 10;
    }
    .mob_menu_mail:focus {
        outline: 0 none !important;
    }
    .mob_menu_mail2 {
        display:none;
        position:fixed;
        top: 120px;
        right: 10px;
        z-index: 10;
        max-width: 100% !important;
        max-height: 100% !important;
    }    
    .mob_menu_mail_overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        cursor: default;
        background: rgba(0, 0, 0, 0.3);
    }
    #showmenu:checked + .mob_menu_mail_overlay,
    #showmenu:checked + .mob_menu_mail_overlay + .mob_menu_mail2{
        display:block !important;
    }
    #supportchecked:checked + .mail_menu_parent{
        display:block;
    }
    #supportchecked:checked + .mail_menu_parent + .standart_mail_menu{
        display:none !important;
    }
    .mob_menu_mail2 span{
        display: block;
        width: 150px;
        font-size: 0px !important;
        background: #e8ecf0;
        border: 1px solid #447294;
        padding: 10px 0px;
        z-index: 20;
    }
    .mob_menu_mail2 span a{
        display:block;
        padding: 0px 20px 0px;
        text-align:left;
        font-size: 14px;
    }
}
#hidewmenu, #showmenu, #supportchecked{
    display:none;
}

На каких устройствах работало меню

Как и все нововведения вёрстки, плавающее меню в письмах работает не на каждом устройстве. Стабильной работы удалось добиться только в нативных почтовых приложениях iOS и Android. И если с iOS это не вызывает проблем, то нативным почтовым приложением Android уже почти никто не пользуется. Начиная с 5 версии системы в качестве почтового клиента предустановлен Gmail.

Результаты тестирования плавающего меню

Но вернёмся к тесту плавающего меню для клиентов интернет-магазина «Техпорт». Для пользователей, у которых отображалось плавающее меню (12,5 % от базы), стандартное было скрыто. Результаты первой недели тестирования были неутешительными — количество переходов с плавающего меню было в 3‑5 раз меньше, чем со стандартного, но для чистоты эксперимента мы продлили тестирование ещё на 2 недели.

Результаты, полученные от трёхнедельного тестирования, оказались провальными:

• стандартное меню — 5124 перехода,
• плавающее меню — 953 перехода.

Почему эксперимент оказался неудачным

Уверены, на эти цифры влияли два фактора:

• Аудитория. Подписчики магазина «Техпорт» — не активные пользователи мобильных устройств, о чём свидетельствует тот факт, что с телефонов открывается лишь 25% писем. Многие, возможно, не обратили внимания на нововведение либо не поняли, что это.
• Наглядность. Точнее, её отсутствие. Если человек не видит кнопки «Акции» в письме, он и не думает искать другие акции, кроме той, о которой идёт речь.

Главный урок из кейса

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

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