10 помилок у мобільній версії сайту, які вбивають конверсію
Тому ми щільно і серйозно зайнялися розробкою нової мобільної версії віджету, щоб не втрачати мобільний трафік. В результаті зібрали список найсмертельніших помилок у мобільній версії сайту. Всі ці помилки вбивають конверсію і час звернути на це увагу:
1. Занадто довгі форми захоплення.
На прикладі видно, наскільки грамотно вчинили хлопці з Тінькофу банку, які розбили довгу заявку "на кредит" на кроки. Заповнивши всього 4 поля, відвідувач стане лідом і якщо він відвалиться на другому кроці, то контакти його залишаться.
Це просто пекельне пекло! Є особливе місце в пеклі для таких сайтів, коли замість 1 кліка потрібно запам'ятовувати номер і самостійно його вводити. Чорт! А якщо я їду за кермом?
3. Використання Flash на сайті або контент, який не можна відтворити на мобільному.
4. Віджети та поп-апи на сайті, які не адаптовані під мобільні.
Онлайн-консультанти, віджети зворотного дзвінка, соц. шаринги, e-mail збирачі - ці інструменти допоможуть збільшити конверсію сайту, але якщо вони не адаптовані під мобільний трафік, вантажать сайт, перекривають контент, то, швидше за все, завдадуть більше шкоди, ніж користі. Тому обов'язково перевіряйте ваш сайт на мобільних пристроях після того, як встановите сторонній сервіс.
5. Відсутність адаптивної мобільної версії. Кросбраузерності та кросплатформенності.
Які переваги від наявності мобільної версії?
По-перше, пошукові системи віддають перевагу у видачі. Так Google позначає сайти відміткою "Mobile friendly":
По-друге, користувачам зручно переглядати ваш сайт із різних пристроїв.
Існує хороший сервіс quirktools.com для перевірки сайту на різних пристроях.
Звичайно, щоб точно переконатися в правильності, варто перевірити це живою на справжніх пристроях:
Перевірити мобільну версію сайту на зручність та швидкість завантаження можна через Google сервіс. Рекомендації по швидкості можна дотримуватись до оцінки 90, далі вони втрачають актуальність.
6. Занадто дрібний шрифт та відсутність відступів.
Важливий текст не повинен бути меншим за 16px і переконайтеся, що міжрядковий інтервал не перетворює текст на єдину кашу.
Не забудьте про відступи. Мінімум 15px від краю екрану. Часто, контент прилипає до краю екрану, що псує зовнішній вигляд:
7. Кнопки та посилання, які не дружать з тач-скрином.
Кнопка "купити" або "залишити заявку" має бути не тільки помітною, але й зручною для тач-торкання пальцем.
8. Довге завантаження сайту.
Ще один пункт, який може зменшити конверсію сайту.
У цьому питанні нам допоміг розібратися Микола Мацієвський, технічний директор айрі.рф.
Для довідки: 1 секунда затримки "коштує" близько 3-7% конверсії сайту (10 секунд "коштує" 20-40%). Якщо сайт завантажується 15 секунд і більше, то прискорення до 3-5 секунд підвищить конверсії на 20-40 пунктів.
Перевірити швидкість сайту можна за допомогою сервісів: Айрі.рф чи WebPageTest чи Pingdom
Для вирішення проблеми відстані потрібно переконатися, що хостинг сайту нормально доступний із мереж основних мобільних операторів. Оптимальним буде розміщення в хорошому московському (або регіональному – для регіональних проектів) датацентрі, який заявляє хорошу зв'язність із мережами мобільних операторів. Закордонний хостинг мало підходить (і має низку проблем зі швидкістю передачі даних з-за кордону).
Длякомплексного вирішення проблем зі швидкістю та доступністю як мобільного, так і звичайного сайту можна використовувати спеціалізовані сервіси. Наприклад, Айрі.рф
9. Помилковий редирект. Відсутність переходу на повну версію сайту
Звичайно, всі мобільні користувачі повинні потрапляти на мобільну версію сайту, але трапляються типові помилки в редиректі.
Наприклад, як це буває?
Доповнення: Не завжди мобільної версії достатньо, можливо, ви приховали потрібні клієнту функції, посилання або взагалі клієнт звик до десктопного варіанту. Завжди залишайте можливість повернутись до повної версії сайту.
10. Автозаповнення. Увімкнення набору цифр.
Конверсія зростає, якщо ми зменшуємо опір клієнта. Кожне поле можна зробити зручнішим для заповнення. Для цього прописуємо відповідно:
Поле Телефон – input type="tel"
Поле Адреса – input type="text"
Поле Індекс, номер картки – input type="text" pattern="\d*"
Поле Дата – input type="date"
Поле Кнопка «Надіслати» – input type="submit"
Більш докладний посібник з наочним прикладом можна переглянути на цьому сайті: http://ionicframework.com/
Додаток для зручності:
Мало хто знає, що можна додати закладку на робочий стіл для швидкого доступу. Іконка виглядає як програма та буде закріплена на головному екрані користувача.
Як це зробити:
Зробіть іконку розміром 180px на 180px (без заокруглення), а на сайті додайте тег: link rel=«apple-touch-icon» href=«іконка.png»
Сподіваюся, ці 10 пунктів допоможуть вам покращити мобільну версію сайту та зробити клієнтів задоволеними. Деякі з них можуть бути вже відомими та очевидними для вас, але невключити їх до списку смертельних помилок було б не правильно.
Висока конверсія вашої мобільної версії сайту!