Как сделать мобильную версию сайта

Сейчас как никогда важно, чтобы компания имела качественный мобильный сайт: 67% пользователей с большей вероятностью совершат конверсию на сайте, оптимизированном для мобильных устройств. Если же они не смогут найти нужную информацию, то в двух из трёх случаев перейдут на другой сайт. Google совместно с компанией AnswerLab в 2014 году провёл исследование с фокус-группой из 119 участников из Чикаго и Сан-Франциско, их задачей было оценить удобство покупки или выполнения других задач на сайтах разных категорий: розница, туризм, финансы, развлечения, банковские порталы и другие. В ходе исследования стало ясно, сколько времени пользователи тратят на решение конкретных задач на различных сайтах и на какие препятствия натыкаются. Так были сформулированы принципы, которые помогут создать хороший сайт для мобильных устройств.

Поиск должен быть заметным

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

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

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

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

Мобильным пользователям всегда проще выбирать что-то, чем вводить текст, поэтому нужны фильтры, которые помогут отсечь ненужные товары. Например, мужская одежда или женская, штаны или кофты. Это реализовано на многих сайтах, но некоторые слишком злоупотребляют фильтрами — нельзя делать их настолько узкими, чтобы ничего не выдавалось. Фильтры должны быть такими широкими, чтобы при выборе пользователю выдавалось не менее 3–5 товаров, тестируйте это самостоятельно.

Опишите преимущества регистрации

Пользователя нельзя заставлять регистрироваться для совершения покупки, но можно дать ему понять преимущества этого действия. Например, при регистрации не придётся заново вводить личные данные. Или регистрация даёт скидку. Что придумаете, главное — мотивировать пользователя.

Добавьте интеллектуальные функции заполнения

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

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

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

Сократите количество полей в форме до минимума

Каждое дополнительное поле сокращает вероятность того, что пользователь доведёт покупку или заполнение заявки до конца. Анкеты, которые заполняются со смартфонов лучше всего, состоят из имени-фамилии и телефона или адреса электронной почты. Понятно, что это подходит не для всех бизнесов, но надо жертвовать всеми полями, которые потом менеджеры могут дозаполнить в процессе общения с клиентом. 5–7 полей в форме — идеальный вариант, особенно если какие-то из них заполняются с помощью подстановки автоматических значений.

Добавьте понятные индикаторы выполнения

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

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

Сделайте информативные подписи рядом с полями

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

Не оставляйте пользователя одного справляться со сложными действиями

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

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

Дайте возможность завершить покупку на другом устройстве

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

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

Избегайте выражения «полная версия»

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