Вы смотрите на красивые отчеты маркетологов, видите рост трафика, но продажи не растут так, как хотелось бы. В чем может быть причина? Часто ответ лежит у вас в кармане. Точнее, в вашем смартфоне.
По последним данным, доля мобильного трафика в большинстве ниш уже давно перевалила за 50% и продолжает расти. Для многих бизнесов эта цифра достигает 70-80%. Это означает, что 7 из 10 ваших потенциальных клиентов впервые знакомятся с вашей компанией через экран смартфона. И если этот первый опыт будет негативным - сайт тормозит, текст нечитаемый, а в кнопку «Купить» невозможно попасть пальцем - вы просто теряете этих клиентов. Они молча закрывают вкладку и уходят к конкурентам, у которых сайт удобнее.
Руководителю не нужно быть экспертом по юзабилити, чтобы понять, теряет ли он деньги из-за плохой мобильной версии. Достаточно потратить 5 минут и пройти по пути своего клиента. Это простое упражнение откроет вам глаза на многие проблемы, которые не видны в отчетах.
5-минутный тест мобильной версии: пошаговое руководство для руководителя
Возьмите в руки свой смартфон (не планшет!), отключитесь от быстрого офисного Wi-Fi и включите мобильный интернет (LTE/4G), чтобы условия были максимально приближены к реальным. Откройте браузер в режиме инкогнито, чтобы ваш предыдущий опыт посещения сайта не влиял на результат.
Теперь представьте, что вы - ваш типичный клиент. Например, вы хотите купить робот-пылесос.
Шаг 1: Поиск и первая оценка (1 минута)
Задача: Найти свой сайт в поисковой системе и оценить первое впечатление.
1. Откройте Яндекс или Google и введите типичный коммерческий запрос, по которому вас должны находить клиенты. Например, «купить робот-пылесос москва».
2. Найдите свой сайт в поисковой выдаче. Если его там нет - это уже серьезная проблема для SEO-специалиста. Но сейчас мы оцениваем другое.
3. Кликните по ссылке и засеките время. Началась загрузка страницы. Считайте про себя: «раз-два-три...». Если на счет «четыре» страница еще не загрузилась и перед вами белый экран - это провал. Клиент, скорее всего, уже ушел.
4. Оцените первый экран. Когда страница наконец загрузилась, не скролльте. Просто посмотрите на то, что видите.
o Вам понятно, куда вы попали? Заголовок, изображение товара, название компании - все это должно быть видно сразу.
o Нет ли огромного баннера на весь экран, который невозможно закрыть? Всплывающие окна с подпиской на рассылку или сообщением о cookie, которые перекрывают весь контент, - главный раздражитель.
o Все ли элементы на месте? Не «прыгает» ли верстка? Если кнопка или картинка появляется, а потом резко сдвигается вниз, это вызывает дискомфорт и говорит о проблемах с оптимизацией.
На что обращать внимание (чек-лист для первого экрана):
• Скорость загрузки: В идеале — до 3 секунд.
• Читаемость заголовка: Шрифт не слишком мелкий и не гигантский.
• Отсутствие навязчивых поп-апов: Всплывающее окно не должно мешать просмотру основного контента.
• Стабильность верстки: Элементы не должны «скакать» при загрузке.
Шаг 2: Навигация и поиск товара (2 минуты)
Задача: Найти нужный товар, используя навигацию сайта.
1. Найдите меню. Обычно оно скрыто за иконкой-«бургером» (три горизонтальные полоски). Легко ли по ней попасть пальцем? Меню открывается быстро или с задержкой?
2. Изучите каталог. Откройте раздел «Роботы-пылесосы». Понятна ли структура каталога? Не приходится ли делать десяток кликов, чтобы добраться до списка товаров?
3. Воспользуйтесь фильтрами. Попробуйте отсортировать товары по цене или выбрать конкретный бренд. Удобно ли пользоваться фильтрами? Легко ли нажимать на чек-боксы? Применяются ли фильтры быстро?
4. Воспользуйтесь поиском по сайту. Вернитесь на главную и найдите иконку поиска. Введите название модели. Поиск работает корректно? Предлагает ли он подсказки?
На что обращать внимание (чек-лист для навигации):
• Размер интерактивных элементов: Кнопки, ссылки, иконки меню должны быть достаточно большими, чтобы по ним можно было легко попасть пальцем, не целясь. Расстояние между ссылками должно быть достаточным, чтобы случайно не нажать на соседнюю.
• Читаемость текста: Основной текст должен быть не менее 16px. Вы не должны напрягать зрение или увеличивать масштаб, чтобы прочитать описание товара.
• Отсутствие горизонтальной прокрутки: Если для просмотра контента приходится двигать страницу влево-вправо, это грубейшая ошибка верстки. Весь контент должен помещаться в ширину экрана.
• Логика навигации: Путь к товару должен быть интуитивно понятным и занимать не более 2-3 кликов.
Шаг 3: Карточка товара и добавление в корзину (1 минута)
Задача: Изучить товар и положить его в корзину.
1. Откройте карточку любого товара. Оцените, как представлена информация.
o Хорошо ли видны фотографии товара? Можно ли их увеличить и рассмотреть детали?
o Легко ли читается цена и технические характеристики?
o Нет ли огромной «простыни» неформатированного текста?
2. Найдите кнопку «Купить» или «В корзину». Она должна быть яркой, заметной и крупной. Это главная кнопка на странице. Находится ли она «под рукой», или ее нужно долго искать?
3. Нажмите на кнопку «В корзину». Что произошло дальше? В идеале вы должны получить четкую обратную связь: товар добавлен, иконка корзины изменилась, появилось всплывающее окно с предложением перейти к оформлению или продолжить покупки. Если ничего не произошло, это сбивает с толку.
На что обращать внимание (чек-лист для карточки товара):
• Видимость и размер кнопки CTA (Call to Action): Кнопка «Купить» должна быть самым заметным элементом.
• Качество изображений: Фотографии должны быть четкими и быстро загружаться.
• Обратная связь: После нажатия на кнопку должно быть понятно, что действие совершено.
Шаг 4: Корзина и начало оформления заказа (1 минута)
Задача: Проверить, насколько легко начать процесс оформления заказа.
1. Перейдите в корзину. Легко ли изменить количество товара или удалить его?
2. Найдите кнопку «Оформить заказ». Она так же заметна и удобна, как и кнопка «Купить»?
3. Нажмите на нее и посмотрите на форму оформления. Мы не будем ее заполнять, нам важен первый взгляд.
o Сколько полей нужно заполнить? Если их больше 5-7, это может отпугнуть.
o Удобно ли вводить текст в поля? Не перекрывает ли клавиатура смартфона нужные поля?
o Предлагает ли сайт простые способы входа (например, через Google или соцсети) или автозаполнение полей?
На что обращать внимание (чек-лист для корзины):
• Минимум полей для заполнения: На первом шаге просите только самую необходимую информацию (имя, телефон, e-mail).
• Крупные и удобные поля ввода: В них должно быть легко попасть и вводить текст.
• Отсутствие багов: Клавиатура не должна перекрывать важные элементы.
Итоги 5-минутного теста
Пройдя этот простой сценарий, вы получите бесценную информацию о реальном пользовательском опыте. Если на каком-то из этапов вы испытали раздражение, замешательство или дискомфорт - будьте уверены, то же самое испытывают тысячи ваших потенциальных клиентов. И большинство из них, в отличие от вас, не будут терпеть. Они просто уйдут.
Что делать с результатами?
Запишите все проблемы, с которыми вы столкнулись. Сделайте скриншоты. И на следующей встрече с разработчиками или маркетинговым агентством вместо абстрактного «Давайте улучшим мобильную версию» поставьте конкретные задачи:
• «Кнопка "Купить" слишком маленькая, ее нужно увеличить на 30%».
• «Шрифт в описании товаров нечитаемый, увеличьте его до 16px».
• «Фильтры в каталоге работают медленно и неудобно, нужно переделать этот блок».
• «Страница загружается 7 секунд. Наша цель - 3 секунды. Что для этого нужно сделать?»
Такой подход, основанный на собственном опыте, гораздо эффективнее любых отчетов. Он позволяет вам говорить с исполнителями на языке конкретных проблем и контролировать то, что действительно влияет на ваш бизнес - удобство и удовлетворенность ваших клиентов.
Получите книгу «SEO для предпринимателей»
SEO — это не магия, а управляемый инженерный процесс. Книга «SEO для предпринимателей» объяснит вам на языке бизнеса, как сделать продвижение предсказуемым и измерить его возврат на инвестиции (ROI).
Скачайте книгу «SEO для предпринимателей» бесплатно здесь.