Дизайн и юзабилити интернет-магазина: 20 советов

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

1. Сложные фильтры

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

2. Поиск – на виду

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

3. Информация о наличии

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

4. Фотографии

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

5. Корзина

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

6. Хлебные крошки

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

7. Мегаменю

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

8. Окончательная стоимость

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

9. Каждый пиксел

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

10. SEO

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

11. Оригинальность

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

12. Социальные медиа

Конечно, нишевый интернет-магазин садовой утвари или чего-то подобного вряд ли соберет толпы фанатов в социальных сетях. И все же, пренебрегать ими нельзя, хотя бы из-за SEO-эффекта. Расположение кнопок и ссылок на ваши соц. страницы и потоки – не такая простая задача, как кажется на первый взгляд. Блок не должен доминировать и привлекать к себе слишком много внимания (как скользящие полоски с кнопками на многих блогах), при этом его следует сделать заметным и очевидным для каждого посетителя. Даже если пользователь не лайкает ваш магазин, а просто «утаскивает» к себе в ленту классную фотку или оригинальное описание, вы уже получаете прибыль: о вашем магазине узнает больше людей.

13. Быстрый просмотр товара

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

14. Подписка на рассылку

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

15. Чистые страницы

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

16. Отзывы

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

17. Опции и свойства товара

В интернет-магазине Victoria’s Secret вариации по размерам и цветам вещей показаны самым очевидным образом и понятны посетителю без лишних объяснений. Когда речь заходит о выборе свойств товара, старайтесь сделать все возможное, чтобы у пользователя не возникло вопросов. Графическое отображение понятнее слов, так что цвета лучше обозначать именно цветами, другие характеристики – иконками.

18. Чекаут без препятствий

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

19. «В корзину»

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

20. Контакты

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

На основе материала Ecommerce web design: 20 essential tips

Читайте также

5 июня 2022 / Комментарии

Исследование маркетплейсов по качеству поиска товаров

В рамках исследования оценивалась удовлетворенность пользователей результатами поисковой выдачи на трех популярных площадках — Wildberries, Ozon и Яндекс.Маркет.

далее →

15 декабря 2021 / Комментарии

SEO и дизайн: продвижение интернет-магазина через оформление

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

далее →

13 марта 2019 / Комментарии

Анализ юзабилити топ-20 российских нишевых интернет-магазинов

В своем исследовании Константин Елистратов, основатель студии iarga.ru разобрал крупные нишевые интернет-магазины и их работу с юзабилити: закономерности, ошибки, интересные решения.

далее →

15 января 2019 / Комментарии

3 этапа создания дизайна интернет-магазина для малого бизнеса

Маркетплейс Satom.ru делится своим опытом по созданию дизайна для интернет-магазинов.

далее →

21 февраля 2018 / Комментарии

8 способов, когда дизайнеры могут обмануть вас и как этого избежать

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

далее →