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

На основе материала Ecommerce web design: 20 essential tips Наверное, с каждым такое случалось: находишь в поисковике ссылку на страницу с нужным товаром, переходишь туда, и через несколько секунд закрываешь вкладку, так как вид магазина оставляет желать лучшего и доверия не вызывает. Или наоборот: попадаешь на страницу красивую, изящную, но мудреную сверх всякой меры. Энди Бут, английский дизайнер и разработчик, уже много лет работающий в сфере электронной коммерции, собрал 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 для бесплатных звонков. Как минимум, указывайте свой адрес электронной почты и обычный номер телефона, а также предлагайте посетителям отправить вам сообщение непосредственно с сайта, с помощью специальной формы. Лайвчат – окно мгновенной связи с менеджером – может стать хорошим дополнением к «контактному вооружению» вашего интернет-магазина.

Автор: Vyacheslav Vityuk

Подписаться на новости

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

25 октября / Комментарии

11 принципов веб-дизайна, которые повышают конверсию

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

далее →

26 сентября / Комментарии

Разбор юзабилити интернет-магазина Ulmart.ru и его преобразования за 2016 год

Изначально статья планировалась как одно целое, где я хотел рассмотреть возможные ошибки в юзабилити топа российских интернет-магазинов. Но после нескольких дней обзора, понял, что каждый сайт заслуживает отдельного разбора. Кроме того, мне захотелось не только осветить проблему, но и предложить своё видение ее решения. В связи с этим вся статья строится по схеме: Гипотеза о проблеме > Причина и Обоснование > Решение.
Поскольку статья начата еще в ноябре 2015 года, а закончена только сейчас, Ulmart успел исправить часть проблем,  обозначенных в статье. Об этом я дополнительно говорю в примечаниях . И сейчас мы можем отследить те преобразования, которые были сделаны.

далее →

6 сентября / Комментарии

Комфорт покупателей как залог успешного бизнеса. Основные ошибки в юзабилити интернет-магазинов

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

далее →

11 августа / Комментарии

Чек-лист юзабилити интернет-магазина

По-настоящему проверить удобство интернет-магазина без подтверждения данными веб-аналитики, не получится. Контекст взаимодействия; задачи, опыт и мотивы пользователей; устройства, с которых пользователи просматривают магазин — всё это влияет на конверсию и не может быть оценено чек-листом.
При составлении чек-листа, я ориентировался на исследования института Baymard, Юзабилити Лаб, Mastercart и студии Сибирикс + некоторые собственные наблюдения.

далее →

Навигация как способ управления вниманием пользователя

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

далее →

X
Нажмите «Нравится»,
чтобы читать Shopolog.ru в Facebook