10 советов по созданию отличной витрины

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

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

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

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

«Каждый элемент, каждый фрагмент контента должен быть функциональным на мобильных устройствах», - сказал Джимми Родригес, главный операционный директор (COO) в 3dcart. «Если вы начинаете с нуля, вы разрабатываете для мобильных устройств. Благодаря адаптивному дизайну вы можете создать веб-сайт для мобильных устройств, а затем перенести его на рабочий стол».

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

1. Липкий заголовок навигации

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

С помощью Sticky Headers, когда вы прокручиваете страницу вниз, меню изменяет размеры и настраивается. Меню сопровождает вас на протяжении всей поездки, чтобы сохранить навигацию на экране, если вам нужно быстро переходить по страницам. Вы можете увидеть это на Bose.com. Несмотря на то, что вы находитесь на полпути по странице, вы все равно можете получить доступ к основной навигации страницы, не возвращаясь к верхней части экрана.

2. Гамбургер-меню

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

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

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

Вы можете увидеть меню гамбургеров в верхнем правом углу Target.com и на мобильном сайте Target. Вы также можете увидеть это на картинке ниже.

3. Параллакс Скроллинг

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

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

4. Бесконечная прокрутка

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

Вы можете увидеть аналогичную функцию на UnderArmour.com. К сожалению, Under Armour требует от вас нажать кнопку «Загрузить еще», чтобы увидеть дополнительный контент. Некоторые веб-сайты оснащены механизмом автоматического открытия, который покажет вам больше контента, не требуя клика.

5. Плавающая кнопка «Добавить в корзину»

Подобно инструменту Sticky Navigation, плавающие кнопки «Добавить в корзину» позволяют вашим покупателям добавлять товары в свою корзину независимо от того, где они находятся на странице товара. Раньше пользователи прокручивали вниз до отзывов пользователей, сведений о продукте и других элементов нижней страницы, и для добавления продукта в корзину им приходилось прокручивать страницу вверх. Теперь такие компании, как Diesel.com, позволяют видеть цену, количество, цветовые варианты и изображение товара, а также кнопку «Добавить в корзину», независимо от того, где вы находитесь на странице товара.

6. Используйте Закон Фитца

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

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

7. Показать отзывы клиентов и отзывы

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

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

8. Эффективная служба поддержки клиентов

Взаимодействие с вашим клиентом имеет решающее значение для успеха в розничной торговле, и нигде это не проще и не эффективнее, чем в отделе обслуживания клиентов. Правильный уход за разгневанным, недовольным или даже просто сбитым с толку клиентом - один из самых надежных способов повторить бизнес. Современные службы поддержки и приложения службы поддержки делают это проще, чем когда-либо. Использование одного из этих приложений не только организует запросы клиентов, но и позволяет собирать данные о клиентах и ​​ответах, которые они генерируют, и направлять их в механизмы управления взаимоотношениями с клиентами (CRM), маркетинга и бизнес-аналитики. Это позволяет вам внимательно следить за тем, что покупатели думают о вашем магазине и его товарах.

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

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

9. Оформление крошки

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

10. 360-градусный просмотр

Вы когда-нибудь покупали, казалось бы, скромную куртку онлайн только для того, чтобы понять, что у нее спинка со стразами? Ну, когда вы вернули этот продукт, вы потратили впустую свое время и время продавца, и вы стоите компании денег. Не волнуйся, это была не твоя вина. Более чем вероятно, у продавца были только изображения спереди и сбоку куртки. Если бы поставщик предлагал изображения с 360-градусным обзором, вы бы заметили эти стразы и нажали кнопку «Отменить заказ».

Не делайте ту же ошибку на своем сайте. В дополнение к тому, что клиенты могут увеличивать изображения, предоставьте им возможность поворачивать или просматривать несколько углов изображения, как это делает Kenneth Cole.com. Таким образом, они не удивляются, когда открывают коробку с доставкой и достают продукт, которого не ожидали.