120 пунктов продающей мобильной версии сайта — чек-лист

< >

Оптимизация сайта для мобильных устройств — более чем приоритетная задача, так как поисковая система Google сканирует и индексирует сайты, используя алгоритм Mobile-first index: бот анализирует и хранит мобильную, а не десктопную версию сайта. А все факторы ранжирования справедливы не только для мобильной, но и для десктопной версии.

Согласно статистике, в США количество пользователей мобильного интернета и смартфонов постоянно растет. А в исследовании на habr можно найти данные о том, что 35% аудитории рунета вообще не использует компьютер для выхода в интернет. Следовательно, все чаще первичное знакомство с бизнесом происходит со смартфона.

Рост числа мобильных пользователей в США

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

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

• улучшите ранжирование своего интернет-магазина, маркетплейса, сайта;
• получите больше продаж и заказов;
• повысите лояльность пользователей.

Сайт

1. Руководство: как провести аудит мобильной версии сайта, чтобы привлекать больше посетителей Наличие мобильной версии, реализованной одним из способов:

• адаптивный дизайн (рекомендовано Google) ;
• динамический показ;
• отдельная мобильная версия.

1. Удобное навигационное меню. Расположено привычно для пользователя слева, четко прописаны названия всех разделов, категорий и подкатегорий. Категории и подкатегории визуально выделены в меню, и пользователь не перепутает их с разделами.
2. Удобство переключения языка. В шапке сайта слева переключатель должен быть на каждой странице сайта, для которой доступен контент более, чем на одном языке.
3. Отсутствие горизонтальных и вертикальных полос скролла.
4. Размер изображений соответствует мобильному устройству, они хорошо видны без дополнительного увеличения.
5. Находясь на любой странице сайта, пользователю понятно, что это за сайт и его тематика, благодаря дизайну и шапке.
6. Все стандартные элементы (меню, телефон, корзина и прочее) должны находиться на привычных местах, чтобы пользователь мог быстро и легко их найти:

• логотип компании — вверху слева или по центру;
• контакты — вверху справа;
• поиск — вверху;
• корзина — вверху справа;
• кнопка входа/регистрации — вверху справа, в крайнем случае, в нижней части выпадающего основного меню;
• меню — слева вверху.

1. Контакты — только самые необходимые (зачем заставлять пользователя думать не о товаре, а о том, какой контакт выбрать): номер телефона, email.
2. Кликабельный логотип на всех страницах, кроме главной. По клику — переход на главную сайта.
3. Фавикон уникальный и соответствует логотипу сайта.

4. Что такое CTA: как сформировать эффективный призыв к действию Быстрый доступ к кнопкам CTA (Call To Action). Возможность купить/заказать товар/услугу/обратный звонок должна быть на каждой странице сайта.

5. Нет навязчивой рекламы, музыки, видео, pop-up форм, которые запускаются автоматически, и у пользователя нет возможности отключить их. Всегда добавляйте активную заметную кнопку отключения такого контента. Важно: она выключает, а не перенаправляет на другую страницу.
6. Мгновенный скроллинг — кнопка «Наверх» (или «В начало»), которая перемещает пользователя в начало страницы.
7. Информация на всех страницах сайта реализована на языке, выбранном пользователем.

Дизайн и элементы сайта

1. Гармоничное сочетание цветов: отсутствуют яркие оттенки, крупный цветной текст и анимация (минимум flash-элементов). Важно: избегайте текста светлым шрифтом на темном фоне.
2. Интерфейс. Все страницы сайта, кроме страниц 5ХХ ошибок, оформлены в одном стиле и цвете. Незначительно отличаются только корзина и страница оформления заказа, но и они соответствуют общему стилю сайта.
3. На сайте есть «воздух»: блоки текста и различные элементы находятся на определенном расстоянии друг от друга. Дополнительное прострaнcтво (отступы, интервалы) помогают легче воспринимать информацию, не давят друг на друга, не нависают и не склеиваются.
4. Размер кликабельных элементов. Все кнопки, ссылки, баннеры достаточно крупные, чтобы пользователь легко мог кликнуть по ним, но при этом соизмеримы с остальными элементами на странице.
5. Читабельный текст. Достаточный размер шрифта, чтобы пользователю не приходилось приглядываться или масштабировать экран.
6. Блоки элементов расположены так, что пользователю понятно — ниже тоже есть информация и нужно листать дальше.

Кнопки

1. Основной CTA — самый заметный. Главный призыв к действию на каждой странице (кнопка «Купить», «Продолжить», «Читать далее», «Заказать» и так далее) ярко выделен, удобно расположен и заметнее остальных:

1. Кнопка предназначена для выполнения действия, а не для перехода на другую страницу. Исключение: на кнопке четко указано, что результат нажатия — переход на другую страницу.
2. Кликать удобно. Нажатие на кнопку сопровождается визуальным эффектом.
3. Текст на кнопке соответствует действию, которое будет выполнено при клике:

• вот как надо — начальная форма глагола: «купить», «заказать», «скачать», «продолжить оформление»;
• а вот так не надо — абстpaктные комaнды: «продолжить», «назад», «дальше» и тому подобное.

1. Кнопки удаления, отмены и очистки форм находятся в противоположной стороне от кнопок отправки, оплаты и подтверждения. Они отличаются визуально — по такой кнопке точно случайно не кликнут, спутав ее с CTA.

Навигация и поиск

1. В мобильной версии присутствует строка поиска. Оптимально — в шапке сайта. Поиск фиксировано находится в одном месте на всех страницах сайта.
2. Строка поиска открыта — это ведет к большему количеству поисковых запросов:

1. Поиск оптимизирован таким образом, что пользователь может:

• запускать его кнопкой в строке поиска, кликом по кнопке «Перейти» и экранной лупе;
• легко очистить строку поиска — нажать на «Х» в правом углу:

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

• в результате поиска увидеть: количество найденных результатов;

• по какому принципу отсортированы результаты поиска (с возможностью изменить эту сортировку) ;
• краткую основную информацию о каждом найденном товаре/статье;
• при отсутствии результатов поиска: человеку предлагают несколько ближайших к его запросу вариантов товаров или разделов сайта (возможно, там он найдет то, что ищет) ; высвечиваются рекомендации, как можно отредактировать запрос, чтобы он был более релевантным. Опционально — следует предложение воспользоваться расширенным поиском.

1. Есть кликабельные (кроме страницы, на которой находится пользователь) «хлебные крошки» с разделами, категориями и подкатегориями (не обязательно, но желательно).
2. Заголовки h1 присутствуют на всех страницах сайта и соответствуют их содержанию.
3. Кнопка «Назад» возвращает пользователя на предыдущую страницу сайта, на которой сохранены все выбранные параметры сортировки или фильтрации.
4. Блок «Вы просматривали» доступен на всех страницах сайта и пользователь может легко найти все, что его заинтересовало раньше.

Главное меню

1. Сквозное основное меню сайта. Каталог товаров и услуг, условия доставки и оплаты, контакты и другие основные разделы находятся в главном меню сайта.
2. Основное меню располагается в шапке сайта, чаще слева вверху. Оно реализовано так, что пользователю не приходится его искать. Чаще всего это три тире, расположенные вертикально, либо надпись «MENU», что более привлекательно и понятно для пользователя:

1. Пользователю понятно, как убрать панель меню:

1. Основные пункты меню — простые общепринятые названия, которые не вызывают лишних вопросов (например, «Корзина» — привычное название, «Покупки» — нет)
2. Картинки (или иконки) для категорий товаров:

1. Раздел, в котором находится пользователь выделен определенным шрифтом или цветом и неактивен при повторном нажатии (если случайно кликнуть по нему, текущая страница не перезагружается).
2. Минимум подуровней в главном меню. Их наличие визуально выделено и понятно для пользователя:

Контакты и обратная связь с клиентом

1. Контакты находятся в одном месте на всех страницах сайта. Обычно в шапке и в футере.
2. Все контакты можно скопировать, даже если на сайте установлена защита от копирования (на контактную информацию она не распространяется).
3. Форма контактов активна и при клике на номер телефона можно совершить звонок. При клике по email (если он указан), открывается форма обратной связи, в которой можно написать по указанному адресу электронной почты.
4. Форма обратной связи:

• ее легко найти (обычно в разделе контактов) ;
• активна и доступна без регистрации и предлагает пользователю оставить удобный для него контакт обратной связи: email или телефон;
• текст сообщения в ней сохраняется даже, если посетитель неверно ввел капчу или случайно закрыл страницу;
• нет ограничения на максимальное количество символов;
• при введении большого сообщения, окно формы увеличивается и при необходимости появляется вертикальный скролл;
• после отправки сообщения/письма, пользователь получает уведомление, по типу «Ваш вопрос отправлен, ожидайте ответа на почту/смс в течение 3-х дней». И пользователь получает ответ в срок, указанным в уведомлении способом;

1. Реализован функционал «Заказ в один клик», «Заказать обратный звонок» и так далее.

Отзывы и комментарии

1. Форма отзывов и комментариев расположена в удобном понятном месте, ее не нужно искать.

2. Как получить отзывы от клиентов Можно оставлять отзывы и комментарии без регистрации.

3. Текст сохраняется даже, если пользователь неправильно ввел капчу перед его отправкой или случайно закрыл страницу.
4. Доступна авторизация через социальные сети.
5. Включена защита от спама. Предусмотрена защита от ручного и автоматического спама в комментариях и отзывах (капча, модераторская пред или пост проверка комментариев, проверка наличия сторонних ссылок и так далее). 

Онлайн-консультант (чат поддержки)

1. Иконка онлайн-консультанта:

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

1. Пользователь получает ответ на свой вопрос в любое время дня и ночи — чат активен круглосуточно.
2. Информация в чате:

• время ожидания ответа;
• уведомление о том, что сообщение доставлено/прочитано.

1. Обратная связь. Если при отправке сообщения нет доступных операторов, пользователю предлагают оставить контакт (email, телефон, соцсеть, номер мессенджера), чтобы компания могла связаться с ним в рабочее время.
2. Пользователь видит фото реального оператора, его имя, а не стандартное отображение иконки оператора с подписью «оператор».
3. Продуманы автосценарии, которые создают впечатление живого общения с человеком, а не с роботом.

Страницы категорий товара (разделы каталога)

1. Оптимальное количество товара. По умолчанию на странице категории отображается 10–15 товаров.
2. Пользователь может:

• изменить количество отображаемых товаров на странице;
• выбрать «Показать все» товары сразу, на одной странице;
• изменить формат представления товаров («витрина», «плитка», «список»).

1. Интересные предложения. Реализованы категории «Распродажа», «Акции», «Новинки», «ТОП» и так далее.
2. Отсутствуют пустые разделы. Разделы без товаров временно скрыты.

3. Карточка товара — как создать действительно крутой текст Содержится базовая информация о товаре:

• фото;
• наличие / отсутствие / доступность под заказ;
• наименование;
• цена;
• ярлык акции, распродажи, новинки, «вместе дешевле», хита продаж и тому подобное (если товар входит в эти категории) ;
• кнопка «Купить»;
• кнопка «Сообщить о появлении», если ожидается поступление (и когда можно настроить такой функционал) ;
• кнопка «Добавить в избранное».

Фильтры и сортировка

1. Кнопка фильтрации расположена удобно для пользователя. Обычно, сразу под шапкой сайта, перед перечнем товаров, рядом с кнопкой сортировки.

2. Как оптимизировать страницы фильтров — руководство для новичков Используется отложенный фильтр. Мгновенный менее предпочтителен, так как посетитель вынужден ожидать загрузки страницы и заново находить на ней следующий нужный ему фильтр. Страница выдачи не должна обновляться, пока пользователь не выберет все фильтры.

3. При наличии отложенного фильтра есть кнопка «Применить».
4. Отсутствуют «пустые» результаты:

• фильтры, которые изначально не содержат данных для выборки, скрываются совсем;
• зависимые фильтры, которые после синхронизации при выборе покажут 0 позиций, становятся неактивными, либо их тоже скрывают (менее предпочтительно).

1. После выбора фильтра пользователь видит количество позиций, которые соответствуют заданным параметрам:

1. Доступна быстрая очистка фильтра. После сброса фильтра страница каталога полностью возвращается в исходное состояние.
2. Доступна такая сортировка товаров:

• популярные (настроена по умолчанию) ;
• от дешевых к дорогим;
• от дорогих к дешевым;
• по алфавиту;
• по рейтингу;
• по наличию скидок.

1. Выделены примененные фильтры и метод сортировки. Пользователю очевидно, какой критерий сортировки и фильтры сейчас активны:

1. Товары, которых нет в наличии/снятые с производства, автоматически опускаются в самый конец списка товаров в категории независимо от способа сортировки.

Сравнение товаров

1. Наглядность добавления товара к сравнению. Например, товар перемещается с помощью анимации и добавляется в сравнение.
2. Функционал «товар добавлен к сравнению» показывает пользователю, какие товары уже выбраны.

1. На странице сравнения товаров есть быстрая кнопка удаления товара из сравнения.
2. Ссылка на сравнение товаров располагается на заметном месте сайта, ее не нужно искать.
3. Страница сравнения товаров корректно отображает определенное количество товаров и, при превышении этого количества, товары больше не добавляются.

Страница товара (карточка товара)

1. Все карточки товаров реализованы в одном стиле независимо от раздела/категории.
2. Отображается основная информация о товаре:

• фото;
• наличие / отсутствие / доступность под заказ;
• наименование;
• ценник заметен, выделен крупным кеглем;
• основные хаpaктеристики;
• ярлык акции, распродажи, новинки, «вместе дешевле», хита продаж и тому подобное — если он входит в эти категории;
• кнопка «Купить»;
• кнопка «Сообщить о появлении», если ожидается поступление и есть возможность настроить такой функционал;
• кнопка «Добавить в избранное»:

• гарантийный срок на товар;
• комплектация товара;
• данные о стране-производителе товара (опционально).

1. Присутствует расширенный список хаpaктеристик (полное и подробное описание).
2. Указана валюта цены.
3. Если цены нет, указана причина, по которой отсутствует цена: товар снят с производства, цена пока неизвестна или возле товара находится рекомендация уточнить стоимость у менеджера (указаны контакты менеджера или ссылка на них).
4. Списки и таблицы. Все хаpaктеристики, которые можно представить списком или таблицей, оформляются именно так.
5. Унифицирован стиль подачи одинаковых хаpaктеристик: единицы измерения, метрическая система и так далее. Это облегчает визуальное восприятие и сравнение разных моделей товара.
6. Отсутствует информация и реклама, которая отвлекает пользователя от товара.

Фото и видео

1. Как использовать видео для увеличения онлайн-продаж Фото и видео исключительно высокого качества.

2. Размер не превышает размер экрана, не содержит горизонтальных и/или вертикальных скроллов.
3. Видео не запускается автоматически без ведома пользователя.
4. Удобство просмотра видео:

• без посторонней рекламы;
• есть возможность остановить/поставить на паузу воспроизведение видео и продолжить просмотр с того же места, на котором остановились;
• возможность развернуть видео на весь экран по желанию пользователя.

Форма регистрации

1. Форма оформлена в дизайне сайта.
2. Кратко указано, какие преимущества дает пользователю регистрация.
3. Доступна не только стандартная регистрация на сайте, но и авторизация с помощью социальных сетей:

1. Соблюдено оптимальное расстояние между полями формы, чтобы избежать визуального нагромождения.
2. Для регистрации предусмотрено минимальное количество полей: имя и телефон/email. Причем поле «имя» не обязательно к заполнению. Принцип: чем меньше действий требуется от пользователя — тем лучше.
3. Поля формы должны быть предварительно заполнены вспомогательным текстом — это подсказка пользователю, как следует заполнять форму:

1. Вводимые данные автоматически подстраиваются под нужный формат.

1. Текстовые поля в формах подходящей длины и пользователю не приходится выполнять лишние движения.
2. Обязательные и необязательные поля в веб-форме чётко разграничены. Обязательные обозначены общеизвестным способом (знаком «*»):

1. Каждое поле автоматически проверяется: корректно ли заполнено. Это происходит сразу после ввода данных, страница при этом не перезагружается.
2. Пароль сохраняет видимость и/или ее можно включить.
3. Если к паролю есть требования (виды символов и их количество), укажите их сразу, чтобы человеку не приходилось заново придумывать и вводить пароль после клика по кнопке «Зарегистрироваться».
4. Не требуйте подтверждения регистрации по email. СМС с кодом более приемлемо (это ведь мобильная версия сайта).
5. Отправка уведомления. После регистрации пользователь должен в течении 1-5 минут получить подтверждение о регистрации по email/СМС в зависимости от того, какую форму регистрации он выбрал.

Корзина

Причины незавершенного оформления заказа («брошенная корзина»), согласно исследованию, которое приводит Ringostat:

• слишком высокие дополнительные расходы, например, доставка — 53%;
• отказ создавать учетную запись — 31%;
• длинный или сложный процесс заполнения полей и верификации — 23%;
• невозможность увидеть или рассчитать общую стоимость заказа — 20%;
• отказ заполнять данные кредитной карты на сайте — 17%;
• слишком долгий период доставки — 16%;
• ошибки на сайте — 15%;
• не удовлетворены условиями возврата — 10%;
• не нашли предпочтительный способ оплаты — 6%;
• кредитная карта была отклонена — 4%.

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

Добавление товара в корзину

1. Корзина расположена в шапке сайта (вверху справа).
2. Есть сигнал о том, что товар уже в корзине. После добавления товара в корзину кнопка «Купить» меняет свой цвет и надпись (например, «Товар уже в корзине» или «Купить еще»), или же рядом с ней появляется информация, что товар добавлен в корзину:

1. Нет автоматического перенаправления пользователя в корзину после добавления товара.
2. Есть визуальное отображение количества добавленных товаров и суммы заказа до входа в корзину.
3. Есть всплывающее окно с подтверждением того, что товар добавлен в корзину. Желательно при этом показывать пользователю форму с содержимым корзины и суммой заказа:

Оформление заказа

1. Примеры лучших страниц оформления заказа интернет-магазинов В корзине покупатель видит:

• фото каждого товара;
• основные хаpaктеристики: название, размер, цвет и так далее;
• количество;
• цену.

1. Наличие текста о безопасности веб-сайта и сохранности персональных данных.
2. В корзине нет отвлекающих элементов:

• рекламы;
• новостей;
• каталога товаров.

1. Предусмотрена быстрая связь с менеджером: указаны на видном месте телефоны или иконка онлайн-чата.
2. На каждом этапе оформления заказа закреплен список выбранных товаров.
3. Количество необходимых этапов оформления заказа видно сразу и пользователь знает, на каком этапе он находится:

1. Если пользователь авторизован на сайте, его данные автоматически подтягиваются из личного кабинета в форму заказа.
2. Заказ можно оформить как с регистрацией, так и без.
3. Наличие кнопки «Заказать по телефону» или «Перезвоните мне», чтобы пользователь мог оформить заказ по телефону.
4. Удобство подсчета стоимости доставки товара. Пользователю выводится сумма заказа, стоимость доставки и полная сумма с учетом всех нюансов (например, комиссии).

Оплата

1. Обеспечена конфиденциальность введенных данных. Пользователь видит информацию о том, что все личные данные, которые он вносит в процессе оплаты, находятся в безопасности (иконки используемых технологий безопасности, соответствующие пояснения к полям).
2. На сайте реализовано динамическое изменение вариантов оплаты в зависимости от способа доставки. Например, если пользователь выбирает доставку курьером или самовывоз, пункт «Наложенный платеж» либо скрывается, либо обозначается неактивным.
3. Явно указаны все расходы при выборе каждого типа оплаты: % комиссии, который оплатит пользователь при данном способе оплаты.
4. При оплате онлайн, пользователю показывается уведомление об успешной оплате.

Завершение заказа

1. Появляется форма «Спасибо за заказ», номер заказа и ожидаемая дата доставки либо уведомление, что менеджер свяжется в указанное время.

{\"0\":{\"lid\":\"1531306243545\",\"ls\":\"10\",\"loff\":\"\",\"li_type\":\"nm\",\"li_name\":\"name\",\"li_ph\":\"Имя\",\"li_req\":\"y\",\"li_nm\":\"name\"},\"1\":{\"lid\":\"1573230091466\",\"ls\":\"20\",\"loff\":\"\",\"li_type\":\"ph\",\"li_name\":\"phone\",\"li_req\":\"y\",\"li_masktype\":\"a\",\"li_maskcountry\":\"UA\",\"li_nm\":\"phone\"},\"2\":{\"lid\":\"1573567927671\",\"ls\":\"30\",\"loff\":\"y\",\"li_type\":\"in\",\"li_name\":\"surname\",\"li_ph\":\"Фамилия\",\"li_req\":\"y\",\"li_nm\":\"surname\"},\"3\":{\"lid\":\"1531306540094\",\"ls\":\"40\",\"loff\":\"\",\"li_type\":\"in\",\"li_name\":\"domains\",\"li_ph\":\"Адрес сайта\",\"li_rule\":\"url\",\"li_req\":\"y\",\"li_nm\":\"domains\"},\"4\":{\"lid\":\"1573230077755\",\"ls\":\"50\",\"loff\":\"\",\"li_type\":\"em\",\"li_name\":\"email\",\"li_ph\":\"Email\",\"li_req\":\"y\",\"li_nm\":\"email\"},\"5\":{\"lid\":\"1575903646714\",\"ls\":\"60\",\"loff\":\"y\",\"li_type\":\"hd\",\"li_name\":\"comment\",\"li_value\":\"Автоматический коммент: заявка из блога, без пользовательского комментария\",\"li_nm\":\"comment\"},\"6\":{\"lid\":\"1575903664523\",\"ls\":\"70\",\"loff\":\"\",\"li_type\":\"hd\",\"li_name\":\"lead_channel_id\",\"li_value\":\"24\",\"li_nm\":\"lead_channel_id\"},\"7\":{\"lid\":\"1584374224865\",\"ls\":\"80\",\"loff\":\"\",\"li_type\":\"hd\",\"li_name\":\"ip\",\"li_nm\":\"ip\"},\"8\":{\"lid\":\"1607417247299\",\"ls\":\"90\",\"loff\":\"\",\"li_type\":\"hd\",\"li_name\":\"send_email\",\"li_value\":\"1\",\"li_nm\":\"send_email\"},\"9\":{\"lid\":\"1607417262626\",\"ls\":\"100\",\"loff\":\"\",\"li_type\":\"hd\",\"li_name\":\"language\",\"li_value\":\"ru\",\"li_nm\":\"language\"},\"10\":{\"lid\":\"1609939551445\",\"ls\":\"110\",\"loff\":\"\",\"li_type\":\"hd\",\"li_name\":\"post_id\",\"li_nm\":\"post_id\"}} Оставьте конкурентам вторую страницу Google