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

Реальность: пользователи переходят на смартфоны и планшеты

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

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

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

Решения, которые могут увеличить количество мобильных конверсий:

1. Сосредоточьтесь на скорости загрузки страниц вашего мобильного сайта.

> Инструменты производительности.

> Как увеличить время загрузки мобильного сайта.

2. Обеспечьте беспрепятственный путь мобильного пользователя.

> Создайте релевантные целевые страницы, чтобы привлечь внимание.

> Дизайн для удобной навигации.

> Направьте пользователей к конверсии.

3. Получите помощь от современных веб-технологий.

> Ускоренные мобильные страницы (AMP).

> Прогрессивные веб-приложения (PWA).

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

Скорость имеет значение

Ожидания потребителей в отношении мобильных устройств выросли. А быстрое время загрузки имеет решающее значение для обеспечения большего количества мобильных конверсий. Исследование показало, что 53% посетителей покидают сайт, загрузка которого занимает более 3 секунд.

Согласно опросу Google/Ipsos, проведенному в 2019 году, 75% пользователей смартфонов ожидают немедленного получения информации. Это означает, что любой бизнес, желающий взаимодействовать с мобильными пользователями, должен как можно быстрее донести свою информацию. Пользователи хотят, чтобы все работало быстро. Бренды должны эффективно общаться со своими пользователями во всех точках взаимодействий на протяжении всего пути пользователя.

Скорость загрузки страницы лежит в основе мобильного опыта (UX), но иногда требуются дополнительные усилия. Рассмотрите статистики, чтобы отдавать приоритет скорости:

• > Коэффициенты конверсии. Улучшение скорости даже на 0,1 секунды может привести к увеличению коэффициента конверсии и средней стоимости заказа. Узнайте больше из этого исследования, проведенного Google/Deloitte.

• > Привлечения клиентов. На каждые 100 миллисекунд улучшения времени загрузки страницы поиска eBay зафиксировал увеличение количества «добавить в корзину» на 0,5%. Узнайте больше об их инициативе по повышению скорости в масштабах всей компании в этой статье web.dev.

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

Измерьте скорость

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

Помните, что хороший веб-сайт измеряется не какой-то одной конкретной метрикой или взаимодействием — речь идет о качестве каждого взаимодействия.

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

Инструменты производительности

Web Vitals — инициатива Google, направленная на предоставление унифицированных рекомендаций по сигналам качества, необходимым для обеспечения удобного взаимодействия с пользователем в Интернете. Ресурс для разработчиков, содержащий практические рекомендации и аналитические материалы.

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

Lighthouse предоставляет лабораторные данные в виде оценки, которая рассчитывается на основе нескольких важных показателей скорости, как улучшить ваш сайт с точки зрения производительности, доступности, PWA, SEO и других передовых методов. Существует несколько способов запуска Lighthouse, в том числе возможность легкого аудита страницы из Chrome DevTools.

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

PageSpeed Insights Показывает данные поля скорости для вашего сайта, а также предложения по общей оптимизации для его улучшения. Он использует Lighthouse для сбора и анализа лабораторных данных о странице в то время как реальные полевые данные основаны на наборе данных Chrome User Experience Report.

Chrome DevTools (Инструменты разработчика Chrome) — это набор инструментов веб-разработчика, встроенных непосредственно в браузер Google Chrome. Он позволяет профилировать время выполнения страницы, а также выявлять и устранять узкие места в производительности.

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

Как увеличить время загрузки сайта

Графика и видео — две вещи, которые могут замедлить работу вашего сайта.

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

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

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

Ограничить размер каждой страницы до 1 МБ. Меньший вес страницы дает лучшую скорость.

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

Современных веб-технологий, которые могут помочь повысить производительность страницы, например ускоренные мобильные страницы (AMP) или прогрессивные веб-приложения (PWA).

Удобство для пользователей имеет значение

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

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

Плохой дизайн, плохой результат. Согласно исследованию Google/Heart+Mind, проведенному в 2018 году, 65% потребителей заявили, что перейдут с плохо разработанного мобильного сайта на альтернативный, который упрощает покупку.

Хороший дизайн, хороший результат. Согласно исследованию BCG 2020 года, компании, которые сосредоточились на оптимизации дизайна и производительности, повысили эффективность маркетинга на целых 26%.

При разработке отличного мобильного пользовательского опыта необходимо сосредоточиться на трех областях:

1). Целевые страницы

2). Навигация

3). Преобразование

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

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

На сайтах электронной коммерции, на страницах товаров убедитесь, что у вас есть:

> срок поставки;

> бесплатная доставка/стоимость;

> бесплатная политика возврата/возврата;

> информация о продукте.

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

• Соответствие страницы. Представьте запрос с заголовком «iPhone 13 Pro Max». Когда пользователь нажимает на это объявление, он должен попасть на страницу об iPhone 13 Pro Max, а не на общую домашнюю страницу сайта смартфонов.

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

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

Призыв к действию. Четкое и конкретное рекомендуемое действие для пользователей или призыв к действию помогает вселить в пользователей уверенность в продвижении вперед. Например, кнопка с надписью «Продолжить» не так привлекательна, как кнопка с надписью «Просмотреть доступные комнаты».

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

Уменьшите отвлекающие факторы. Мобильные потребители часто спешат. Удалите все ненужные навороты, чтобы упростить воронку продаж.

✓ Удалить всплывающие окна

✓ Убедитесь, что окна чата не мешают

✓ Наличие четкой иерархии, которая помогает посетителям сосредоточиться на поиске и покупке

В вашем аккаунте Google Ads есть отчет о целевых страницах. Здесь вы можете увидеть, как работают ваши целевые страницы. Отчет о целевых страницах также определяет удобство ваших страниц для мобильных устройств. Подробнее читайте в этой справочной статье Google Реклама.

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

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

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

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

• Меню. Содержание меню должно соответствовать потребностям пользователя.

• Добавьте метки к иконкам. Не все поймут значки в шапке вашего сайта. Попробуйте добавить метки к наиболее важным значкам.

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

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

✓ Реализуйте расширенную фильтрацию с возможностью выбора нескольких вариантов.

✓ Предоставьте липкие фильтры, чтобы их было легко найти.

✓ Юзабилити-тесты могут выявить типы фильтров, которые нужны вашим клиентам.

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

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

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

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

Удалите все ненужные слова.

Используйте маркированные списки для большей ясности.

Используйте четкие заголовки и подзаголовки.

Используйте значки.

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

Стив Круг, Не заставляйте меня думать: подход к юзабилити в Интернете, основанный на здравом смысле

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

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

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

Согласно исследованию Google/Ipsos, проведенному в 2019 году, 77% пользователей смартфонов с большей вероятностью совершат покупку у компаний, чьи мобильные сайты или приложения позволяют им совершать покупки быстро.

Исследование Google/Purchased 2017 года показало, что плохой опыт может повлиять на конверсию в будущем. Пользователи, у которых есть негативный опыт на мобильном сайте, на 62% реже совершают покупки на этом сайте в будущем.

При оценке того, как сделать путь к покупке более плавным и беспрепятственным.

Упростите процесс входа и регистрации

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

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

Компания Google разработала решения, которые сделают подключение пользователей к бизнесу более удобным и безопасным. Узнайте больше о One Tap из этой статьи Google Developers.

Упростите процесс оформления заказа (интернет магазин)

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

> Разрешите посетителям оформлять заказ в качестве гостей

> Укажите, зачем вам нужен адрес электронной почты или номер телефона (например, доставка)

> Используйте триггеры цифровой клавиатуры для ввода чисел и полей, текстовую клавиатуру для ввода текста

> Удалите все ненужные поля

> Используйте форму автозаполнения Google для автозаполнения

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

Используйте Google Pay, чтобы приблизить к покупке в один клик

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

С Google Pay посетители могут совершить покупку всего несколькими касаниями экрана.

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

Используйте срочность

Мотивируйте пользователей действовать быстро. Один из способов повысить срочность — показать, что товар скоро будет распродан («Осталось всего две комнаты»). Вы также можете создать срочность, показав, сколько других пользователей заинтересованы в том же продукте («Три человека имеют этот товар в своей корзине»). Или выделите специальные предложения с ограниченным сроком действия («Спешите, срок действия этого специального предложения истекает через два дня»).

✓ Лимитированные выпуски

✓ Показать низкий запас

✓ Иметь обратный отсчет до окончания распродажи

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

Завоюйте доверие  (интернет магазин)

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

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

Источник: LivePerson, 2013 г.

Позвольте добавлять отзывы к товарам (интернет магазин)

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

Добавление сравнения продуктов  (интернет магазин)

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

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

Начните A/B-тестирование вашего мобильного сайта

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

Google Optimize — это бесплатный инструмент, который поможет вам начать A/B-тестирование вашего мобильного сайта, чтобы узнать, что лучше всего подходит для ваших посетителей.

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

Ускоренные мобильные страницы (AMP)

Способ ускориться и оставаться быстрым — это AMP. AMP — это библиотека с открытым исходным кодом, которая предоставляет простой способ создания веб-страниц, которые загружаются пользователями практически мгновенно даже при подключении 3G. Среднее время загрузки страниц AMP составляет 0,5 секунды.

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

Вы также можете использовать AMP с Google Ads. Сочетая скорость и плавность загрузки, целевые страницы AMP могут обеспечить лучшее взаимодействие с целевой страницей, что является важным фактором в вашем показателе качества. Здесь описаны два разных способа A/B-тестирования AMP-кампаний.

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

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

Узнайте больше о проекте AMP.

Прогрессивные веб-приложения (PWA) — сделайте веб-страницы похожими на приложения

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

Влияние как на пользователя, так и на бизнес является значительным. Согласно исследованию Google, проведенному в 2018 году, компании отмечают увеличение коэффициента конверсии более чем на 20 %, когда добавляют возможности PWA на свой мобильный сайт. Узнайте больше об основных преимуществах PWA из этой статьи Google Developers.

Более надежный

> работает на ненадежных соединениях;

> работает полностью в автономном режиме;

Быстрее

> загружается мгновенно (менее одной секунды);

> обеспечивает быстрое взаимодействие со страницей;

> динамически реагирует на любой ввод;

> загружается почти мгновенно для повторных посещений.

Более привлекательный

> доступно с главного экрана телефона;

> запускается в полноэкранном режиме;

> отправляет push-уведомления для повторного вовлечения.

Пример БМВ

Поскольку скорость была их главным приоритетом, BMW решила использовать PWA для восстановления своего веб-сайта с нуля. Вместе со своим агентством Jung von Matt они создали новый сайт, который загружался в три раза быстрее, чем их старый сайт. Узнайте больше из этой статьи Think with Google.

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