Shopify Советы по дизайну и лучшие практики UX

Shopify обслуживает более полумиллиона предприятий электронной коммерции в 175 странах. С 2012 года количество продавцов на платформе Shopify росло в среднем на 74% в год, и эти продавцы достигли продаж более чем на 55 миллиардов долларов в результате того, что Shopify является одной из самых известных и простых в использовании платформ электронной коммерции на сегодняшний день.

Поскольку Shopify заботится о доменах, хостинге, всех внутренних и некоторых внешних функциях, больше времени, денег и ресурсов можно потратить на дизайн UX. Ожидается, что к 2021 году объем продаж электронной коммерции во всем мире достигнет нового максимума в 4,9 триллиона долларов, а поскольку нестандартный UX-дизайн является одной из основных причин заброшенных касс, более чем очевидно, что внедрение лучших практик электронной коммерции будет продолжать доказывать свою высокую эффективность.

В этой статье мы рассмотрим лучшие советы по дизайну Shopify.

Какие функции есть у Shopify?

Shopify поставляется со всеми функциями, которые вы ожидаете от ведущей платформы электронной коммерции:

• Интеграция с внешними платежными шлюзами, такими как Stripe и PayPal.
• Доступ к Shopify Payments с нулевой комиссией по сравнению с внешними вариантами
• Возможность разрешить оплату подарочной картой или кредитом магазина
• Настраиваемая страница оформления заказа (только для клиентов Shopify Plus)
• Вариант учетных записей пользователей или гостевой проверки
• Статические страницы (например, Политика конфиденциальности или Условия использования)
• Целевые страницы с рекламным контентом
• Доступ по паролю для магазинов в разработке
• Варианты продукта с рядом настраиваемых параметров
• Умные коллекции для автоматизации категоризации товаров
• Функциональность поиска и тегов для помощи в обнаружении продукта
• Функционал блога с возможностью вставлять товары в посты
• API, помогающий разработчикам создавать динамические веб-сайты и мобильные приложения.

Расширение возможностей обнаружения продуктов электронной коммерции

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

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

Пользовательская навигация

Предоставление покупателю слишком большого количества вариантов может привести к параличу анализа (когда слишком много доступных вариантов для эффективного принятия решения приводит к разочарованию и отказу). Разрабатывая настраиваемую навигацию, мы можем расставлять приоритеты для продуктов и «коллекций», которые наиболее эффективно конвертируются — например, визуально отображая коллекцию «Рабочий стол», если настольные продукты являются наиболее популярными. Эти настраиваемые переходы также можно редактировать в Shopify CMS, чтобы обеспечить возможность случайного A/B-тестирования.

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

Коллекции

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

Хотя эти коллекции определяются за кулисами, дизайнерам электронной коммерции полезно знать об этой функции при разработке для Shopify.

Теги продукта

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

Помните об этих советах по дизайну Shopify:

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

Поиск

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

Вот лучшие практики Shopify, которые следует учитывать при разработке поискового интерфейса:

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

Shopify Лучшие практики для страниц продуктов

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

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

Что делает хороший веб-сайт электронной коммерции, так это изображения, которые эмоционально очаровывают пользователей. С этой целью Shopify позволяет загружать несколько изображений и вариантов продукта. Тем не менее, в соответствии с передовой практикой Shopify отображайте хотя бы одно из этих изображений продукта в масштабе (т. е. в окружении других объектов, чтобы показать, насколько велик продукт), чтобы установить ожидания.

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

Показать четкую информацию о продукте

Шокирующее (но не удивительное) количество клиентов электронной коммерции отказываются от своих корзин из-за отсутствия информации о фактической стоимости. 60% клиентов называют непредвиденные расходы (например, доставку, налоги, сборы) причиной отказа от корзины, а 23% не могут заранее рассчитать общую стоимость. Отсутствие прозрачности — верный способ повысить конверсию на веб-сайтах электронной коммерции, поэтому помните об этих Shopify советы и рекомендации:

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

Укрепляйте доверие и уверенность

По данным Baymard Institute, именно недоверие называют причиной, по которой 19% покупателей отказываются от покупки на кассе. К счастью, все магазины Shopify по умолчанию поставляются с SSL (безопасная проверка), но они также позволяют клиентам оставлять отзывы в качестве социального доказательства.

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

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

Показать рекомендации по связанным продуктам

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

Интеграция персонализации покупательского опыта

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

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

Оптимизация оформления заказа

Гостевая проверка и учетные записи клиентов

По данным Baymard Institute, «сайт хотел, чтобы я создал учетную запись» — это вторая по распространенности причина (35%), по которой клиенты отказываются от оформления заказа, ничего не купив. Shopify рекомендует разрешить гостевую проверку (особенно на мобильных устройствах), и с этой целью по умолчанию отключены учетные записи клиентов.

Выявление недостатков UX и сокращение отказов

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

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

Для достижения наилучших результатов интегрируйте Shopify с такими инструментами, как Crazy Egg, Hotjar и FullStory, чтобы более подробно наблюдать за этими проблемными областями с помощью тепловых карт и записей посетителей.

Заключение

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

Дальнейшее чтение в блоге Toptal Design:

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