Оптимизация сайта под мобильные устройства

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

Мобильная коммерция (m-commerce) растет из года в год. В 2017 году доля покупок в США, сделанных через мобильные устройства, составила 34,5% от общего количества онлайн заказов, а к 2021 году ожидается рост до 54%.

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

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

Характеристики и варианты товара

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

Опишите продукт детально

Описание товара должно легко просматриваться (получить общую картину) и сканироваться (для поиска конкретной информации). В левом примере ниже пользователь может быть разочарован неполной информацией о продукте:

• Размер: неясно, доступны ли вообще определенные размеры или просто временно закончились; нет размерной сетки.
• Цвет: нет визуального представления вариантов цветов.
• Наличие: нет информации о наличии на складе и способах доставки.
• Отсутствуют характеристики и описание.

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

Уберите поля для ввода текста со страницы продукта

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

Фотографии товаров

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

Используйте большие и качественные фотографии

Чтобы изображение было эффективным, оно быть большого размера и высокого качества. Это особенно важно для магазинов одежды, где потребители больше заботятся о деталях.

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

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

Позвольте пользователю контролировать уровень масштабирования

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

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

Количество изображений

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

Вот несколько советов для галереи изображений:

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

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

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

4) Поддерживайте масштабирование с помощью двойного касания

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

Стоимость товара

Существует два подхода, как отображать стоимость на странице товара:

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

Наличие и варианты доставки

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

Покажите наличие в магазине

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

Стоимость и сроки доставки

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

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

Отзывы

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

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

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

Разрешите фильтрацию отзывов

Разрешите пользователям сортировать и фильтровать отзывы, чтобы они могли узнать «правду» о товаре.

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

Добавьте кнопку «Сохранить» в корзину

Основное препятствие на пути к оформлению заказа — небольшой размер экрана мобильного устройства. По данным Baymard Institute, 61% мобильных пользователей предпочтут настольный компьютер для совершения покупки.

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

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

Один из A/B-тестов Growth Rock показал 250% рост регистраций на сайте магазина после добавления такой возможности. Такой рост объясняется тем, что регистрация предлагается только тем, кто уже готов оформить заказ, и проходят регистрацию только при необходимости. Добавление стимула к регистрации с простым и ясным призывом к действию значительно может увеличить количество регистраций.

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

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

Оптимизируйте формы

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

Несколько рекомендаций, как это сделать:

• Сохраните введенную информацию после каждого шага. Это позволит избежать потенциальное разочарование пользователя от полной потери введенных данных, вызванной случайным щелчком или проблемах при подключении к интернету.
• Максимально сократите длинные формы, запрашивайте только самую необходимую информацию.
• Если нет возможности сократить длинную форму, разбейте ее на несколько этапов. Это сделает процесс заполнения менее пугающим. Однако у этого подхода есть и обратная сторона: каждый новый шаг — это загрузка новой страницы, а если соединение у пользователя плохое, это может негативно сказаться на его опыте.
• Капча — убийца конверсии. Поищите другие варианты отделить спам от реальных заявок/заказов.
• Замените поле ввода и выпадающий список степпером или тумблером, где это возможно.
• Используйте маски полей. Они помогут уменьшить количество ошибок и ускорить заполнение формы, отображая правильный формат ответа, который может иметь разные форматы, например, номер телефона или кредитной карты.
• Определяйте тип ввода и возвращайте соответствующую клавиатуру, когда пользователь нажимает на поле. Например, если требуется указать номер телефона, отображайте цифровую клавиатуру; если нужно ввести почту, сразу предлагайте символ «@».
• Настройте валидацию в режиме реального времени. Этот прием хорош для форм на любых устройствах, но особенно на мобильных. Это позволяет исправлять ошибки немедленно, что помогает избежать фрустрацию и положительно сказывается на удобстве использования.

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

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

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

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

3) Предлагайте поиск товара в специальных разделах. Например, по запросу «перчатки» можно предложить поиск по разделу мужской или женской одежды.

4)Запоминайте история поиска. Это облегчает повторный поиск и улучшает пользовательский опыт.

Умные подсказки и автозаполнение полей

Одна из заповедей юзабилити — не заставляйте пользователей думать. Людям проще узнать что-то, чем вспомнить это по памяти.

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

Более продвинутый вариант подсказок при поиске товаров — это предложить не название, конкретный товар с иконкой, названием и кратким описанием, при клике по которому пользователь попадает на страницу товара.

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

Автозаполнение также стоит использовать при указании города, улицы, индекса и адреса электронной почты.

Важно, чтобы подсказки предлагались быстро — если сайт или приложение реагирует дольше 1 секунды, пользователь может испытать раздражение.

Блоки для апсейла и кросс-сейла

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

Скидки в корзине

Те же исследования Growth Rock показывают, что даже в премиум-сегменте со средним чеком более $1000 покупателям нравится думать, что они нашли лучшую цену и закрыли удачную сделку.

Серия A/B-тестов показал 4% рост дохода на пользователя и 3% рост конверсии в корзине при указании экономии на уровне каждого товара и общую сумму в конце списка.

Резюме

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

Основные идеи, которые нужно запомнить:

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

Вам также могут быть интересны следующие статьи:

• UX для интернет-магазинов: как создать лучший пользовательский опыт
• Google Аналитика для интернет-магазина: инструкция для новичков
• Как продавать свои товары на Wildberries