Это, наверное, случалось с каждым: находите в поиске линк на товар, который вам нужен, кликаете, переходите по нему и тут же закрываете эту страницу. Просто потому что вам не понравился дизайн страницы сайта. Или же наоборот, вы заходите на сайт с очень красивым дизайном, но вообще не понимаете, где тут что находится. Энди Бут, английский дизайнер и разработчик, работает в сфере электронной торговли много лет и собрал 20 полезных советов по юзабилити и дизайну таких сайтов. Они будут полезны для каждого, кто думает запускать или улучшать сайт для интернет-магазина. Этот список неполный, но в него входят многие действительно важные вещи.
Роман Вилявин из Promodo собрал в одной статье для B2С 20 советов Энди Бута по дизайну и юзабилити сайтов интернет-магазинов. Редакция AIN.UA предлагает вам ее перевод.
1. Сложные фильтры
Почти каждый продукт может существовать в различных размерах, цветах, в стандартной или подарочной упаковке и т.д. Если на вашем сайте есть четкая и простая система фильтров по различным параметрам, даже самым прихотливым пользователям понравится его использовать. Проверьте, какие именно фильтры предлагают большие онлайн-магазины пользовательской электроники.
2. Поле поиска – постоянно в поле зрения
На сайте Amazon.com строка поиска расположена на самом видном месте. Подобное решение приходит после многих лет работы. Когда пользователь заходит на сайт онлайн-магазина и не может найти товар, очевидно, что он будет пробовать искать поиском по сайту. Так что не стоит прятать поле поиска. Конечно, это верно только для тех интернет-магазинов, чей поиск работает корректно.
3. Актуальные данные о наличии на складе
Конечно, с точки зрения SEO, убрать товарную позицию с сайта, если товара нет на складе – плохо. Но с точки зрения бизнеса, разве хорошо, когда посетитель наконец-то найдет нужный ему товар, добавит его в корзину и лишь затем увидит, что его сейчас нет на складе? В конце-концов, именно покупатели приносят вам деньги, а не боты поисковых систем. Так что лучше думать о покупателях. Создайте отдельное поле, где будет указана доступность товара на складе, так что это будет сразу видно. И добавьте поле “Уведомить меня, когда товар появится на складе”.
4. Фото товара
Наверное, нет такого эксперта по e-commerce, который бы не подчеркивал важность изображений товара. Ведь по сути, пользователи выбирают и “покупают глазами”, фото очень важны для интернет-магазинов, где у клиентов нет возможности потрогать и осмотреть товар. Так что качество фотографий и изображений должно быть отличным. Лучше не ограничиваться одним изображением. Если есть возможность 3D-изображения или видео о продукте – обязательно ей воспользуйтесь.
5. Корзина на видном месте
Независимо от того, какой тип корзины используется, важно помещать ее там, где пользователь может ее легко заметить. В некоторых онлайн-магазинах корзина видна, даже когда пользователь прокручивает страницу вниз. Главное: не заставляйте покупателя тяжело задумываться всякий раз, когда он хочет купить что-то на сайте. Чтобы поле корзины выглядело более симпатичным, можно добавить к списку выбранных товаров их маленькие изображения.
6. “Хлебные крошки”
Или же навигационное меню. Это очень удобный инструмент для навигации. Он позволяет покупателю легко ориентироваться в структуре сайта, быстро перемещаться на 2-3 позиции выше и понимать структуру категорий сайта.
7. Мегаменю
Мегаменю – это большое выпадающее меню с категориями и подкатегориями, занимающее большую часть страницы. Можно наблюдать, как работают подобные меню на крупных сайтах, продающих почти все виды товаров, таких, как eBay. Такое решение позволяет упростить навигацию, даже если структура каталога очень сложная. Если на вашем сайте множество категорий, задумайтесь над этим.
8. Окончательная цена товара
Еще одно правило: всегда показывайте окончательную цену товара на странице товара или в корзине. Нет ничего хуже, чем дополнительные затраты на доставку, о существовании которых покупатель узнает на последней стадии оформления заказа. Здесь есть несколько решений: установите единую цену доставки для определенной территории, предлагать бесплатную доставку, встройте калькулятор цены на странице товара, спрашивайте, из какого города покупатель и соответственно модифицируйте цены в каталоге.
9. Каждый пиксель работает на покупку
Энди нашел прекрасный пример: магазин натуральной пищи Abel & Cole. Он уверяет, что каждый пиксель этого сайта работает на успех магазина. Работая над любым улучшением или изменением своего сайта, всегда спрашивайте себя: почему этот блок должен выглядеть именно так, почему именно этот вариант – лучший, и самое главное – как это повлияет на успешность магазина и на пользователя.
10. Правильная работа с SEO
В условиях стабильного роста самого рынка e-commerce и конкуренции на нем SEO – один из ключей к успеху. В правильной работе с оптимизацией сайта дизайн тоже может играть свою роль. К примеру, поисковые машины сейчас “любят” правильную html-верстку с правильным использованием тегов заголовков H (использовать их стоит только там, где речь действительно идет о заголовке).
11. Оригинальность
Сайту нужно выделяться из толпы. В любом случае, дизайн интернет-магазина должен быть уникальным и оригинальным, хотя бы в деталях. Изобрести что-то полностью новое трудно, но если у вашего сайта нет ни одной запоминающейся детали, он легко затеряется среди конкурентов.
12. Социальные медиа
Вряд ли магазину, продающему садовые инструменты, удастся создать большую общину фанатов в социальных сетях. Но эту возможность нельзя игнорировать, хотя бы из соображений SEO. Помещая иконку социальной сети на сайт, старайтесь, чтобы она не привлекала слишком много внимания, но оставалась бы в поле зрения покупателя. Если пользователь и не “лайкнет” вашу страницу, а просто возьмет к себе на стену фото или описание товара, о вашем сайте уже узнает больше народу.
13. Быстрый просмотр товара
Это удобная возможность, которая позволяет покупателю быстро просматривать каталог, задерживаясь на тех позициях, которые ему интересны. С ее помощью можно ознакомиться с товаром, не покидая страницы категории этого товара. Быстрым просмотром считается даже страница товара, выделенная светлым фоном при затемнении остальной страницы, а не открытая в отдельной вкладке. Лучше все же, если быстрый просмотр будет чем-то средним между карточкой товара в общей категории и полноценной страницей товара.
14. Рассылка
E-mail-маркетинг пока еще никто не отменял. Поэтому создание списка потенциальных покупателей – важная задача. Поместите опцию подписки на новости компании там, где пользователь будет ее искать: в блоке новостей, в блоге, в разделе с новыми товарами. Если вы публикуете много нового контента, можно подумать о запуске нескольких рассылок: для тех, кто хочет первыми узнавать о скидках, для тех, кто хочет узнавать о новых товарах и т.д.
15. Чистые страницы
Никому не понравится покупать что-то в грязном магазине, это же правило работает и для онлайна. Не засоряйте страницы с категориями и подкатегориями ненужными элементами.
16. Отзывы покупателей
Отзывы посетителей – важная составляющая сайта современного онлайн-магазина. Обычно они размещаются на страницах товара. Но если речь идет об отзывах о работе всего магазина, Энди предполагает, что можно разместить этот блок сбоку страницы или в слайдере. На отдельную страницу с отзывами о магазине вряд ли зайдет много посетителей.
17. Варианты товара
В онлайн-магазине белья Victoria’s Secret различные варианты по размеру и цвету показаны очень четко, пользователь разберется в них без дополнительных объяснений. Когда речь идет о вариациях товара, старайтесь сделать эту информацию максимально доступной для пользователя. Изображение здесь работает лучше, чем текст. Так что наличие товаров разного цвета лучше обозначить разными цветами, другие характеристики товара – понятными иконками.
18. Простое оформление заказа
Оформление заказа – та страница, куда вы ведете пользователя. Когда он туда попадает, нельзя его оттуда выпускать. Уберите все дополнительные линки и блоки, не старайтесь продать ему что-то еще. Чем меньше отвлекающей информации, тем выше шанс покупки.
19. Кнопка “Добавить в корзину”
Очевидное правило юзабилити для онлайн-магазинов: эта кнопка должна призывать к действию, то есть, выделяться из остальных элементов сайта. Нельзя, чтобы ее было видно хуже, чем кнопки с призывами “лайкнуть” страницу в соцсетях.
20. Контакты
Многие покупатели захотят обратиться к вам с вопросами. В идеале, интернет-магазин должен иметь номер вида 8-800-ххх-ххх, звонки на который будут бесплатными. Постарайтесь хотя бы указать адрес электронной почты, телефон, предложите специальную онлайн-форму для обращения. Онлайн-чат с постоянным контактом с менеджером может стать хорошим дополнением вашей страницы.
