15+ вечных способов обеспечить выдающееся качество страницы на Shopify

Что вы узнаете

• Что такое пользовательский опыт и почему он важен?
• Как оценивается опыт страницы?
• Как определить возможности для улучшения?
• Как обеспечить звездный опыт страницы?
• Расширенные советы по оптимизации страницы
• Выводы

Что такое пользовательский опыт и почему он важен?

По определению, пользовательский опыт — это «общий опыт человека, использующего продукт, такой как веб-сайт или компьютерное приложение, особенно с точки зрения того, насколько легко или приятно им пользоваться» (Источник: lexico).

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

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

Как оценивается опыт страницы?

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

Удобство страницы оценивается на основе ряда факторов, таких как удобство для мобильных устройств и скорость страницы, а также другие сигналы поиска, такие как безопасный просмотр, HTTPS и отсутствие навязчивых межстраничных объявлений (всплывающие объявления). Подробнее → Понимание взаимодействия со страницей в результатах поиска Google

Источник: оценка качества страницы для улучшения веб-сайта.

Работа со страницей также включает Core Web Vitals (представлен в мае 2020 г.) — набор ориентированных на пользователя показателей (или сигналов), необходимых для всех веб-приложений: скорость загрузки, скорость отклика и визуальная стабильность.

Источник: Знакомство с Web Vitals: основные показатели для здорового сайта, блог Chromium.

Почему вы должны заботиться об удобстве страницы?

По состоянию на август 2021 года сигналы качества страницы включаются в рейтинг поиска Google.

В рамках этого обновления мы также включим показатели качества страницы в наши критерии ранжирования для функции «Главные новости» в поиске на мобильных устройствах и удалим требование AMP из списка «Главные новости». (Источник: оценка качества страницы для улучшения Интернета, центральный блог Google Search)

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

Как определить возможности для улучшения?

Проведите проверку реальностью. Спросите себя: «Где я нахожусь? Что я могу улучшить с точки зрения удобства работы со страницей?» Например:

• Проверьте, оптимизирован ли ваш сайт для мобильных устройств
• Проверьте, есть ли на вашем веб-сайте проблемы с безопасностью, и защитите свой сайт с помощью HTTPS (если вы еще этого не сделали).
• Убедитесь, что ваш сайт доступен
• Измерьте основные веб-жизненные показатели вашего магазина: LCP (наибольшая отрисовка контента — скорость загрузки), FID (задержка первого ввода — скорость отклика) и CLS (кумулятивное смещение макета — визуальная стабильность).

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

• Хорошо ли вы понимаете своих клиентов? Знание своих клиентов является ключом к решению их проблем и удовлетворению их потребностей. Это также отправная точка для выбора наилучшей стратегии брендинга и маркетинга, решения о том, как вы будете представлять свои продукты, какой тип контента вы будете создавать и т. д.
• Передает ли ваша домашняя страница правильное сообщение? Предоставляет ли он достаточно информации? Это выглядит профессионально? Загружается нормально?
• Является ли дизайн вашего сайта фирменным и удобным для пользователя?
• Хорошо ли брендированы страницы ваших товаров?
• У вас есть страницы продуктов, которые вам не нужны? Например, у вас все еще есть страницы продуктов, которые больше не могут приводить к конверсиям, потому что товар распродан? Если вы не планируете пополнять запасы продукта, лучше всего удалить его страницу продукта — это максимально увеличит ваш бюджет сканирования и повысит скорость вашего сайта. Но если вы планируете продать его снова, рекомендуется добавить кнопку «Присоединиться к списку ожидания». Интересно, как это выглядит в реале? SAMARA BAGS нашла элегантное решение:

• Вы производите качественный контент? Например, достаточно ли информативны описания ваших продуктов? Содержат ли они ссылки на страницы вашей Политики? Решает ли контент реальные проблемы? Звучит искренне? Обеспечивает ли это ценность? Узнайте, что Google определяет как высококачественный контент → Основные обновления Google за 2020 г., Основные обновления за январь 2020 г., Создание высококачественного контента
• Вы производите качественный визуальный контент? Ваши фотографии продуктов демонстрируют лучшие характеристики ваших продуктов? У каждого варианта товара есть своя фотография товара? На страницах ваших продуктов есть видеоролики о продуктах? Оптимизированы ли ваши визуальные файлы для SEO (например, имеют ли они правильный размер, есть ли у них описательные теги alt и имена файлов и т. д.)?
• Пишете ли вы четкие, ориентированные на выгоду призывы к действию?
• Есть ли у вас социальное доказательство, размещенное на видном месте на вашем веб-сайте? Например, есть ли на страницах вашего продукта обзоры продуктов? У вас есть карусель отзывов на главной странице?
• Вы используете формы? Если да, то удобны ли они для пользователя, т.е. легко ли их понять и заполнить?
• Ваш сайт содержит битые ссылки?

Ниже мы рассмотрим каждый из этих факторов. Давайте погрузимся прямо в!

Как обеспечить безупречный опыт работы со страницей: идеальная стратегия из 15 шагов

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

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

Используйте тест для мобильных устройств, чтобы:

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

№ 2. Проверьте отчет о проблемах безопасности

Используйте отчет о проблемах безопасности, чтобы проверить свой магазин Shopify на:

• Взломанный контент
• Вредоносное или нежелательное программное обеспечение
• Социальная инженерия

Узнайте больше о возможных проблемах безопасности на вашем сайте:

Отчет о проблемах безопасности также:

• Показывает, какие именно страницы вашего магазина Shopify были затронуты
• Дает вам представление о том, как исправить проблемы

Источник: Отчет о проблемах безопасности.

№3. Защитите свой магазин Shopify с помощью HTTPS (защищенный протокол передачи гипертекста)

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

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

Чтобы защитить свой сайт с помощью HTTPS, вам необходимо:

• Используйте сертификат безопасности, например сертификат SSL. К счастью, Shopify предоставляет SSL-сертификаты в рамках своей подписки. Узнайте, как активировать сертификат SSL → SEO на странице для Shopify, Расширенные методы SEO на странице для Shopify
• Убедитесь, что страницы HTTPS можно сканировать и индексировать.
• Поддержка HSTS

Узнать больше → Защитите свой сайт с помощью HTTPS

№ 4. Убедитесь, что ваш магазин Shopify доступен

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

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

Источник: Google, Доступность

Чтобы сделать ваш магазин Shopify более доступным:

• Используйте контрастные цвета для текста и фона
• Убедитесь, что ваш контент понятен
• Форматируйте любое письменное содержание таким образом, чтобы его было легко читать и просматривать, т. е. используйте заголовки, подзаголовки, маркеры, цифры, пишите короткие абзацы и т. д.
• Используйте якорные ссылки, чтобы пользователи могли легко и быстро найти то, что им нужно.
• Избегайте двусмысленного и общего анкорного текста, такого как «Нажмите здесь». Вместо этого напишите описательный и богатый ключевыми словами анкорный текст. Как всегда, избегайте наполнения ключевыми словами.
• Напишите описательный альтернативный текст для изображений, которые вы загружаете в свой магазин Shopify.
• Убедитесь, что ваши веб-формы (например, форма оформления заказа, контактная форма, форма регистрации и т. д.) короткие, понятные, интуитивно понятные и простые в использовании.
• Убедитесь, что ваш контент легко доступен на мобильных устройствах
• И больше!

№ 5. Измерьте основные веб-жизненные показатели вашего магазина Shopify

Измерение Core Web Vitals вашего магазина Shopify даст вам лучшее представление о том, где вы находитесь (с точки зрения опыта страницы), а также о том, что вы можете сделать для улучшения.

Вы можете измерить Core Web Vitals с помощью всех популярных инструментов разработчика Google.

Источник: инструменты для измерения Core Web Vitals.

Статистика скорости страницы

Вы можете использовать Page Speed ​​Insights для измерения скорости страницы, отклика и визуальной стабильности.

Вы также можете использовать Shopify Performance Analyzer (от Ecom Experts), чтобы проверить, насколько быстро работает ваш магазин Shopify. Анализатор производительности Shopify проанализирует весь ваш веб-сайт и предоставит комплексное решение со списком персональных рекомендаций.

Узнайте больше о скорости страницы и почему это важный показатель:

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

Отчет об удобстве использования Chrome

Вы можете использовать отчет Chrome UX (отчет об опыте использования Chrome), чтобы измерить ряд показателей взаимодействия с пользователем:

• First Paint («сообщает время первого рендеринга браузера после навигации»)
• First Contentful Paint («сообщает время, когда браузер впервые отобразил любой текст, изображение, небелый холст или SVG»)
• DOMContentLoaded («сообщает время, когда исходный HTML-документ был полностью загружен и проанализирован»)
• onload («запускается, когда страница и зависимые от нее ресурсы закончили загрузку»)
• Задержка первого ввода (измеряет реакцию на нагрузку)
• Самая большая Contentful Paint (измеряет скорость загрузки)
• Совокупный сдвиг макета (измеряет визуальную стабильность)
• Время до первого байта (индикатор отклика сервера или других сетевых ресурсов)
• Разрешения на уведомления

Консоль поиска

Search Console поможет вам:

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

Веб-виталы

Web Vitals обеспечивает «мгновенную обратную связь по показателям загрузки, интерактивности и изменения макета». Он захватывает LCP, CLS и FID. Его основные функции включают в себя:

• Эмбиентный бейдж (проверяет, соответствует ли страница пороговым значениям Core Web Vitals)
• Детальная детализация во всплывающем окне (проверка необходимости изменения метрики или действия)
• Наложение HUD (Heads Up Display)

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

№ 6. Важно знать своих клиентов

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

Вот несколько наиболее эффективных способов узнать своих клиентов и принимать решения и прогнозы на основе данных:

• Изучите аналитические отчеты для вашей отрасли
• Собирайте аналитические данные с помощью таких инструментов, как Google Analytics и Inspectlet.
• Используйте такой инструмент, как Crazy Egg, чтобы изучить, как клиенты взаимодействуют с вашим сайтом.
• Изучите пути ваших клиентов и проанализируйте различные точки взаимодействия
• Определите триггеры клиентов и найдите способы воздействовать на них
• Используйте социальные сети — создайте частную группу Facebook для своих клиентов, создайте собственный хэштег Instagram, участвуйте в беседах в Twitter и т. д.
• Собирайте отзывы клиентов — проводите опросы, запускайте юзабилити-тесты, собирайте мгновенные отзывы и т. д.
• Добавьте чат в свой магазин — это поможет вам обеспечить лучшую поддержку клиентов, что неизбежно повысит удовлетворенность клиентов. Вот несколько приложений Shopify, которые вы можете использовать: Live Chat, ChatBot, Cart Saver (4.9), Tidio — Live Chat & Chatbots (4.8), Gorgias — Live Chat & Helpdesk (4.7).
• Внимательно прочитайте все обзоры и отзывы — извлеките из них уроки, посмотрите, что делает ваших клиентов счастливыми, поймите, что их разочаровывает, и определите возможности для улучшения. Обязательно отвечайте на все отзывы. Примечание. Обратите особое внимание на негативные отзывы — выявление проблемы и принятие мер по ее устранению необходимы для обеспечения хорошего пользовательского опыта; это также поможет вам повысить удовлетворенность клиентов и создать базу лояльных клиентов. Так что, если у вас нет времени, чтобы лично ответить на все отзывы, вы должны хотя бы обязательно ответить на все отрицательные.
• Запустите программу лояльности. Вот несколько приложений Shopify, которые вы можете использовать: Подарочные карты и программа лояльности (4.8), Yotpo Loyalty & Rewards (4.7), Loyalty, Rewards and Referrals (4.4).
• Создавайте надежные образы покупателей. Включите такие детали, как возраст, местонахождение, язык, профессия, финансовое положение, покупательские привычки, потребности, интересы, болевые точки, цели, этап жизни и многое другое.

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

№ 7. Оптимизация домашней страницы

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

• Учитывайте структурный SEO-аспект процесса оптимизации: создайте неглубокую иерархию страниц, интуитивно понятную навигацию по веб-сайту (включая вторичную навигацию, такую ​​как «хлебные крошки») и логическую структуру URL-адресов. Узнать больше → Как создать оптимизированную для SEO архитектуру веб-сайта?
• Ваша домашняя страница должна быть чистой и понятной.
• Ваши призывы к действию должны быть четкими. Например, ваши клиенты должны с первого взгляда понять, что делает кнопка. И если вы мягко подталкиваете их к подписке на вашу рассылку, убедитесь, что им ясно, что они получат взамен — «Подпишитесь на нашу рассылку и получите скидку 15% на первый заказ» звучит намного лучше, чем «Будьте в курсе» или «Никогда не пропустите распродажу».
• Учитывайте доступность. Например, если на вашей главной странице есть видео, на видном месте должны быть кнопки «Воспроизвести» и «Пауза» (видео не должно воспроизводиться автоматически при загрузке страницы).
• Страница должна загружаться быстро и корректно на всех устройствах.
• Убедитесь, что ваш главный слайдер не замедляет работу вашей страницы и сразу привлекает внимание людей. Изображения должны быть оптимизированы для SEO. Кроме того, обратите внимание на количество и тип изображений, которые вы решите использовать. Например, лучше использовать один или два релевантных и хорошо продуманных ползунка-героя (с четкими CTA) вместо пяти расплывчатых ползунков, три из которых практически не приносят никакой пользы. Узнайте, как создать удобную карусель на домашней странице → 9 UX-требований к удобному дизайну карусели на главной странице (если вам это нужно)

№8. Дизайн

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

• Чем меньше, тем лучше — делайте все проще, когда речь идет о навигации, панелях поиска, ссылках, кнопках и т. д. Каждый из этих элементов должен быть прост в использовании на разных устройствах. Отзывчивость является ключевым моментом.
• Разделите большие блоки информации на удобные для перекуса части (используйте заголовки, маркеры, нумерацию и т. д.).
• Сохраняйте единообразие на всех страницах вашего магазина. Другими словами, убедитесь, что кнопки на вашей домашней странице такие же, как кнопки на страницах ваших продуктов, страниц категорий и т. д.; использовать один и тот же шрифт по всему сайту и многое другое.
• Вместо того, чтобы использовать фиктивный текст, лучше использовать настоящую копию при разработке вашего сайта. Это даст вам лучшее представление о том, как все будет выглядеть с самого начала.
• Всегда учитывайте своих клиентов — какой тип дизайна будет привлекательным для вашей целевой аудитории? Какой шрифт выбрать? Как должны быть оформлены заголовки? Подойдут ли видео и GIF-файлы? Проще говоря, адаптируйте свой дизайн к вашим клиентам. Таким образом, вы обеспечите лучший пользовательский опыт и удовлетворите потребности своих клиентов таким образом, чтобы они соответствовали их ожиданиям. Узнайте больше о дизайне, ориентированном на пользователя → Создание потоков, ориентированных на пользователя, в дизайне электронной коммерции
• Убедитесь, что дизайн фирменный.
• Найдите баланс между привлекательным и легким для глаз.

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

№ 9. Оптимизация страницы продукта

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

• Добавьте качественные фотографии продукта, которые актуальны и демонстрируют лучшие характеристики продукта. При необходимости дополните эти фотографии видеороликами, GIF-файлами и 3D-моделями продукта. Если у вас есть ресурсы, рассмотрите возможность внедрения AR — это поможет вам обеспечить более захватывающий опыт покупок, преимущества которого многочисленны. Узнать больше → Shopify AR и VR: ключ к захватывающим покупкам
• Предоставьте достаточно подробностей о цене (и, конечно же, убедитесь, что цена сразу видна, когда покупатель переходит на страницу).
• Предоставьте полезную информацию о характеристиках и преимуществах продукта (и убедитесь, что эта информация понятна всем покупателям, независимо от их уровня знаний о продукте, который вы продаете).
• Опишите материалы или ткани, из которых изготовлено изделие (если применимо)
• Добавьте ссылки на свои страницы политики
• Добавьте ссылки на вашу таблицу размеров (если применимо)
• Убедитесь, что страница хорошо брендирована. Думайте не только о своем логотипе и торговой марке. Если возможно, расскажите о ценностях вашего бренда, цепочке поставок, воздействии на окружающую среду и многом другом.
• Убедитесь, что все элементы страницы спроектированы с учетом удобства клиента — обратите внимание на то, как представлена ​​информация, где расположены кнопки, где отображается цена, где отображаются социальные доказательства и пользовательский контент (пользовательский контент). , и больше.

№10. Создавайте качественный контент

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

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

Сегодня мы хотели бы остановиться на нескольких других важных характеристиках высококачественного контента. А именно:

• Это выходит за рамки письменного контента и всего, что с ним связано (от исследований до редактирования и визуальных эффектов).
• Все на вашем веб-сайте — каждый файл, каждое изображение, каждое слово в каждом призыве к действию, каждая форма, миниатюра и т. д. — является контентом. И каждый из этих различных типов контента должен создаваться с осторожностью и умением.
• Важно, чтобы вы оптимизировали свой контент для людей, поисковых систем и целей поиска. Также важно оптимизировать ее длину в зависимости от цели страницы — например, страница продукта будет содержать довольно небольшое количество контента по сравнению с подробным сообщением в блоге. Кроме того, разные типы страниц продуктов могут содержать разное количество контента (поскольку разные типы продуктов требуют разного типа и объема информации).
• Оставайтесь вдохновленными — смотрите, что делают другие бренды (уделите особое внимание брендам, которыми вы восхищаетесь) и учитесь у них (на том, что они делают правильно, а также на том, что они делают неправильно). Записывать. Попробуйте новые вещи. Отрегулируйте по мере необходимости.
• Найдите свой собственный голос. Это требует времени и практики. Тестируйте разные подходы. Вы поймете, когда будете на правильном пути.
• Сосредоточьтесь на предоставлении решений и повышении ценности жизни ваших клиентов — иногда это не означает, что вы совершите продажу, иногда это означает, что вам нужно рассмешить своих клиентов.
• Рассказывайте истории и убедитесь, что вы говорите искренне и по-человечески. Вам не нужно звучать официально в 100% случаев. Если это уместно (т. е. если это соответствует стилю вашего бренда и понравится вашей целевой аудитории), можно рассказать шутку или использовать более неформальный тон.
• Цель вашего контента — оживить ваш бренд. И это невероятное путешествие, в которое нужно отправиться — будьте смелыми, когда творите, находите новые способы оставаться вдохновленными и оставайтесь скромными. И здесь важно помнить кое-что: стремление к совершенству прекрасно и помогает вам расти. Но дайте себе слабину - никто не идеален! Делать все возможное, постоянно учиться и расширять свой потенциал более чем достаточно.

№ 11. Визуальный контент

Что касается визуального контента:

• Убедитесь, что вы загружаете только высококачественные изображения в свой магазин Shopify. Это относится и к другому визуальному контенту (например, видео и 3D-моделям).
• Убедитесь, что изображения оптимизированы для SEO. Узнать больше → SEO на странице для Shopify, Как оптимизировать ваши изображения
• Убедитесь, что фотографии продукта демонстрируют лучшие характеристики продукта и представляют продукт в наилучшем свете.
• Убедитесь, что видеоролики о продуктах рассказывают истории и повышают ценность жизни ваших клиентов. т. е. они решают проблему, показывают клиентам, как они могут использовать ваши продукты, предоставляют личный опыт и т. д.
• Если ваш продукт имеет несколько вариантов и у каждого варианта есть фотография продукта, убедитесь, что варианты и фотографии продукта правильно связаны.

№ 12. CTA

Ваши призывы к действию должны быть:

• Прозрачный
• лаконичный
• Прямо в точку
• Заманчиво
• Ориентированный на выгоду

Также:

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

№ 13. Социальное доказательство

Давайте немного поговорим о пользовательском контенте (пользовательском контенте):

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

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

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

Мы говорили об обзорах продуктов и отзывах клиентов в нашем руководстве по оптимизации вашего магазина Shopify для целей коммерческого поиска.

Сегодня мы покажем вам, как отображать фотографии пользовательского контента на вашем сайте Shopify.

Помимо предоставления вам социального доказательства, отображение фотографий пользовательского контента на вашем веб-сайте даст вашим клиентам контекст, то есть лучшее представление о том, как ваши продукты могут вписаться в их жизнь (как их можно использовать, какую пользу они могут принести им и т. д.). Соответственно, это облегчит принятие решения о покупке вашими клиентами и существенно уменьшит количество возвращенных заказов. В Shopify App Store есть ряд приложений, которые могут помочь вам отображать фотографии пользовательского контента на вашем веб-сайте. Сегодня мы подробно рассмотрим два из них — InstaShow — Instagram Feed и Shoppable Instagram & UGC.

В конечном счете, пользовательский контент — это стратегический ресурс, который помогает вам завоевать доверие на протяжении всего пути клиента. Это также поможет вам избавиться от догадок при совершении покупок в Интернете и обеспечить более привлекательный опыт для клиентов. Поэтому мы настоятельно рекомендуем вам поощрять и добавлять UGC в ваш магазин Shopify!

№ 14. Формы

Формы — неотъемлемая часть воронки конверсии. Вот несколько советов по дизайну форм, которые помогут вам создать форму с интуитивно понятным пользовательским интерфейсом.

• Ограничьте количество полей в форме. Чем длиннее форма, тем больше трения она создает. Например, лучше, если будет одно поле «Имя», а не два: «Имя» и «Фамилия».
• Если форма короткая, лучше, если она будет отображаться на одной странице. Но для более длинных форм многоэтапный подход оказался более эффективным. Если вам нужно разработать более длинную форму, не забудьте сгруппировать связанные вопросы по шагам или разделам.
• Если вы используете многоступенчатые формы, лучше избегать автоматического перехода к следующему шагу. Должна быть кнопка, которую клиенты могут нажать самостоятельно после заполнения всех полей на текущем этапе. Убедитесь, что отображается индикатор выполнения. Также обратите внимание на скорость перехода.
• Вы можете использовать условную логику для сокращения многошаговых форм — в этом случае каждый следующий шаг будет отображаться на основе информации, предоставленной на предыдущем шаге.
• Какой бы подход вы ни выбрали (одностраничная форма или многошаговая форма), обязательно четко обозначьте обязательные поля (если только все поля не являются обязательными). Лучше всего использовать звездочку (*).
• Поля должны быть расположены в порядке от простого к сложному для заполнения. Например, Имя → Телефон → Электронная почта → Адрес → Тема → Сообщение.
• Между полями должна быть логическая корреляция. Порядок вопросов должен звучать и ощущаться естественно.
• Дизайн с одним столбцом лучше, чем дизайн с несколькими столбцами.
• Выровняйте все поля, а также любой сопроводительный текст по левому краю — так удобнее.
• Убедитесь, что форма хорошо выглядит и правильно работает на разных устройствах. Например, убедитесь, что поля достаточно широкие, а ввод текста на мобильных устройствах так же прост, как и на настольных компьютерах.
• Говоря об удобном для мобильных устройств дизайне формы, убедитесь, что вы предлагаете полевой фокус. Вы также можете использовать встроенные функции некоторых смартфонов (например, геолокацию, выбор даты и т. д.), чтобы упростить процесс.
• Форма должна хорошо выглядеть и корректно работать во всех основных браузерах.
• Клиенты должны иметь возможность перемещаться по форме с помощью клавиши Tab.
• Сообщите об ошибках. Если клиент не заполнил поле должным образом, объясните, почему он не может продолжить, и объясните, что ему нужно исправить. Используйте положительные сообщения об ошибках — никогда не обвиняйте пользователя, если поле заполнено неправильно. Вместо этого попытайтесь определить причину, по которой пользователь был сбит с толку, и спросите себя, что вы можете сделать, чтобы избежать этого в будущем. Например, следует ли предоставить дополнительную информацию или изменить название поля?
• Используйте встроенную проверку полей формы, чтобы выявлять ошибки в режиме реального времени и немедленно предупреждать пользователей (т. е. до того, как они отправят форму).
• Если вы требуете от клиентов предоставления конфиденциальной информации, объясните, зачем вам это нужно. Избегайте сложных юридических массажей.
• Используйте заполнители, чтобы клиентам было проще заполнять форму.
• За исключением поля «Имя», включите автозамену и автозаполнение.
• If a customer has to choose between several options, radio buttons are better than drop-down menus. Use checkboxes if the customer can choose more than one option. Radio buttons and checkboxes should be displayed in a single column.
• Use predictive search for fields with multiple predefined options.
• Use an engaging and benefit-oriented CTA. The CTA should be the same width as the fields.
• Use icons to make forms more intuitive.
• Don't ask people to confirm their password more than once (in sign-up forms).
• If the form contains a “Sign up to our newsletters” checkbox, it shouldn't be marked by default. Also, it should be visible, but not so prominently displayed that it annoys your customers (unless, of course, we're talking about an email sign-up form).
• Make sure the design is beautiful and minimalistic. Simplicity is key.
• If suitable, display social proof in close proximity to your forms.
• If suitable, display your contact information in close proximity to your forms.
• The action button should be prominently placed.
• Explain what happens after a customer clicks “Submit”/“Sign up”, etc.

Ultimately, a form with good UI is:

• Простой
• Straightforward
• Прозрачный
• Интуитивно понятный
• Функциональный
• Легко использовать
• Красивый
• Minimalistic
• Contains a benefit-oriented CTA and a prominently placed action button

Быть вдохновленным!

• SAMARA BAGS
• Ina Kess
• By Far
• Vinebox

#15. Broken links

Google uses link quality to determine the authority of a website. Broken backlinks aren't in your favor - they can impact site speed and your rankings.

You can use a robust Shopify app like Smart SEO (4.9, 800+ reviews) to find and manage broken links. Smart SEO will scan your website and then query one of the most powerful APIs in the world to identify all broken backlinks (websites linking to non-existent pages on your Shopify store). Once the scan is complete, you can easily and quickly fix the broken links and make search engines fall in love with your store all over again. Smart SEO has a free plan and three paid plans. Pricing starts from $9.99/month. Learn more → Smart SEO Pricing

Advanced tips for page experience optimization

Before we wrap things up, let's take a closer look at 4 advanced practices for page experience optimization.

Hosting and CDN

Shopify offers:

• Secure hosting included with every plan

• CDN - Shopify was the first ever e-commerce platform to use a CDN (operated by Fastly) - a network of servers scattered around the world that distributes the content delivery load to the closest server to ensure faster site speed.

Minify your code

• Shopify handles SCSS.liquid minification automatically. They also offer whitespace controlling tags.
• You should remove poorly coded HTML, CSS, and JavaScrip. Here's a list of resources that can help. If you're not a skilled developer, you can reach out to a Shopify Expert that can handle the minification process.

Reduce unnecessary Liquid forloops

Forloop means the system has to crawl all products in a category when it's looking for a specific condition. Looping can take a long time if you have a large number of products and a lot of product variants. It can also be an issue in the case of advanced collection filtering and mega-navigation implementations. To solve the problem, you need to review your theme Liquid (theme code) and remove any duplicate tasks and conflicting code.

Take a closer look at the apps you use

Sometimes it is enticing to install a new Shopify app - especially if it is free. It might not be an app that you need - it might be an app that you just want to test.

The issue with having too many apps (that you don't use), is that each app is running in the background. This may hurt your site performance and speed. So, our advice is to take a closer look at the apps you have installed and ask yourself:

• How many of these apps do you actually use?
• Are there apps that essentially serve the same purpose?
• Are there apps you're not happy with (but still haven't removed)?

Remove all apps you don't use, don't find useful, or aren't happy with. And when it comes to installing a new app, make sure to weigh the benefits.

Выводы

“Page experience is a set of signals that measure how users perceive the experience of interacting with a web page beyond its pure information value.”

Providing a great page experience is paramount to your long-term success as a Shopify merchant. To provide a stellar page experience you need to:

• Use the Mobile-Friendly Test to make sure your store is mobile-friendly.
• Use the Security Issues Report to check your Shopify store for hacked content, malware or unwanted software, and social engineering.
• Secure your Shopify store with HTTPS (Hypertext Transfer Protocol Secure).
• Make sure your Shopify store is accessible - a website is considered accessible if the information it contains is robust, as well as perceivable, understandable, and usable.
• Measure your Shopify store's Core Web Vitals with tools like Page Speed Insights, Test My Store Speed, Chrome UX Report, Search Console, Web Vitals, etc.
  
• Get to know your customers - Understanding your customers' needs is the key to providing good user and page experiences. It is also the key to designing a website and building a brand that they'll trust and want to invest in. Understanding your customers is also the foundation of producing the right content, telling the right story, providing the right type and amount of information, addressing the right issues, and highlighting the benefits of your products in a way that will drive conversions and increase customer satisfaction.
• Optimize your homepage and make sure it is easy to navigate and understand. It should also be optimized for SEO and navigational search intent, as well as have a responsive design and load properly and quickly on all major browsers.
• Make sure your design is on-brand and user-friendly - functionality, responsiveness, and simplicity are the three pillars of user-friendly design.
• Make sure your product pages are well-branded and informative - they should provide enough information about the product (benefits, features, price, etc.), as well as information your customers may need (ie you should add links to your Policy pages, Size guide, Guarantee policy, and more).
• Create high-quality content, ie content that is aspiring, adds value, solves a problem, etc.
• Upload high-quality and relevant product photos that are optimized for SEO and display your products and brand in the best possible light.
• Write clear and benefit-oriented CTAs.
• Use social proof such as product reviews, customer testimonials, and UGC photos to facilitate your customers' buying decisions, boost conversions and build brand loyalty.
• Create simple and clear forms with user-friendly UI.
• Fix all broken backlinks.

Ultimately, improving your site performance and page experience requires continuous effort and takes time. We hope this guide will give you the expertise, as well as the tools and apps, needed to achieve success. If you have further questions, or want to share your experience, just leave a comment!