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

Всё больше людей предпочитают смартфоны компьютерам, а 19% пользователей выходят в сеть с одних только мобильных устройств. В поиске Google в этом году доля мобильных запросов достигла 60%. Кроме того, стало известно, что Google будет поощрять mobile-friendly сайты, повышая их рейтинг в результатах поисковой выдачи на смартфонах. В этих условиях для многих встает вопрос необходимости создания качественного мобильного сайта. Компания Google провела исследование и выяснила уровень конверсий для мобильных и немобильных сайтов, а также зависимость конверсий от различных факторов. И предоставила рекомендации, как избежать типовых ошибок при разработке мобильного сайта.

В совместном исследовании Google и компании Calltouch было проанализировано 1500 сайтов в 20 отраслях бизнеса. Удобство сайтов для мобильных пользователей определялось с помощью теста на Mobile-friendliness, который отслеживает, насколько хорошо сайт отображается на мобильных устройствах (проверяются различные характеристики, такие как размер шрифтов, близость расположения элементов и прочее). Помимо этого проводился тест на ошибки в области удобства и скорости сайтов. В результате анализа было исследовано распределение конверсий на бизнес-ориентированных сайтах и их зависимость от качества мобильного сайта компании.

Mobile-friendliness повышает уровень конверсии сайта

Недостаточно просто иметь сайт для мобильных устройств, важно, чтобы он был удобным для пользователей. Тест на юзабилити показал, что только 35% из анализируемых сайтов являются дружественными к мобильным устройствам. А доля их мобильного трафика составляет всего 30%, что ровно в два раза меньше доли запросов в Google с мобильных устройств (60%). Всё это говорит о том, что бизнесы ещё отстают от трендов, которые задают потребители.

В ходе исследования выяснилось, что коэффициент конверсии с мобильных сайтов в среднем на 15% выше, чем с немобильных. Таким образом, один лишь факт наличия у бизнеса сайта для мобильных устройств увеличивает среднюю конверсию с 1.64% до 1.87%. При этом сайты, показавшие лучшие результаты в тесте на mobile-friendliness, дали прирост конверсии до 50%.

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

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

Критерии качественного мобильного сайта

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

5 ШАГОВ К СОЗДАНИЮ КАЧЕСТВЕННОГО МОБИЛЬНОГО САЙТА

1. Главная страница и навигация по сайту

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

Меню должно быть кратким и содержательным
Количество элементов меню нужно сократить до минимума.

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

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

2. Поиск по сайту

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

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

Добавьте фильтры, чтобы сделать поиск по сайту более удобным
Добавьте фильтры, ограничивающие результаты поиска.

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

3.Торговля и конверсии

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

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

Используйте имеющиеся сведения для ускорения процесса
Сохраняйте и затем подставляйте данные зарегистрированных пользователей.

Добавьте интерактивный номер телефона рядом со сложными действиями
Чтобы пользователи могли сразу позвонить и уточнить непонятные им моменты.

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

4. Заполнение форм

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

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

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

Информативные подписи и проверка в режиме реального времени позволяют уменьшить количество ошибок <br>Рядом с полями должны быть заметные и понятные подписи, а форму требуется проверять на наличие ошибок при заполнении, чтобы пользователи могли их исправить до отправки.

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

5. Удобство использования и форм-фактор

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

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

Изображения товаров должны быть раскрывающимися
Добавьте качественные снимки крупным планом для фотографий товаров.

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

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

Избегайте выражения «Полная версия»
Выбирая между «полной» и «мобильной» версиями сайта, участники исследования часто выбирали полную версию, поскольку думали, что мобильная версия – это урезанный вариант. Используйте выражение «версия для компьютеров» – тогда будет понятно, что оба варианта равноценны.

По материалам Think with Google

Один из примеров такой разработки можно посмотреть по ссылке https://spider.ru/works/sites/sajt-servisa-dostavki-antej/

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