Проектируем интернет-магазин: userfriendly, seofriendly

22.06.2015

Краткая расшифровка доклада, рассказанного в рамках внутрикорпоративного семинара.

От качества интернет-магазина зависит удобство покупки для пользователя и популярность проекта в поисковых системах. Грамотно спроектированный проект успешнее в seo-продвижении.

Проектируем интернет магазин(2)
Сначала придумываем главную страницу. Затем проектируем внутренние. В дизайне тенденции такие же: рисуем главную, потом остальные.

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

Проектируем интернет магазин(4)
Если в интернет-магазине нет фото товара, его никто не купит. Фото – первое куда падает взгляд покупателя. Фотографий не менее 4-5. Думаю, не стоит говорить, что фото размещаем высокого качества.
При наведении на фото появляется увеличенный фрагмент в отдельном окне. При клике – показ полноразмерной фотографии.
Идеально, если размещена 3D-модель товара.

Проектируем интернет магазин(5)
Цена заметна. Покупатель не должен долго искать ее на экране. Другая сторона медали: если при просмотре фото в мозге задействован центр удовольствия, то цена для покупателя это страдание. Нейрологика решений о покупке основана на простом уравнении: чистая ценность = удовольствие минус страдание. Чем выше чистая ценность, тем вероятнее покупка.
Знак рубля увеличивает страдание. Но в интернет-магазине от него не отказаться.
Если цена со скидкой, указывайте скидку в % и старую цену. Дополнительно стоит показать, сколько покупатель сэкономит в рублях. Перечеркнутая высокая цена и новая более низкая – эффективный инструмент якорения. Якорь – более высокая цена, ее покупатель должен заметить первой.

Проектируем интернет магазин(6)
Как и с ценой, кнопку покупки делаем бросающейся в глаза. В тексте используют варианты «в корзину», «добавить в корзину», «купить». Мне близок последний вариант, как однозначный и побуждающий к действию.
Обратите внимание на ссылку «Купить в один клик». По ней открывается форма, где покупатель заполняет номер телефона и имя. Вариант для тех, кто не разбирается в интернете.

Покупателю сразу показываем варианты доставки, стоимость и сроки. Типичный магазин использует 3 варианта доставки: курьерская, самовывоз из точки доставки, почтой РФ. Каждый вариант можно разделить еще на несколько, но основные эти. Пользователю стоит давать выбор, но не избыточный. Выбирать из 10 вариантов курьерской доставки с разным ценником трудно. Покупателю не интересно с кем из транспортных компаний у вас договор, его интересуют только сроки, цена и какой пункт выдачи ближе.
Поэтому стоит как можно больше стандартизировать и свести варианты доставки к 2-4 понятным пунктам с одинаковым ценнником внутри одного типа доставки.

Если интернет-магазин торгует в одном регионе, варианты доставки и стоимость указываем сразу. Не получается уместить (22 района города и везде разная стоимость доставки) – разворачиваем блок по клику.
При работе на много регионов, определяем город по ip и выводим данные о доставке для этого населенного пункта.

Проектируем интернет магазин(7)
Описание и технические характеристики товаров одинаковые. Это нормально, поисковые системы понимают, что к каждому товару уникальное описание сделать невозможно.
Но описание должно быть. Подробное, если получится. Идеально, если с видео, презентующим товар. Подходит для товаров, применение которых неочевидно.
Дополнительно добавляем обзор товара или видеобзор.

Проектируем интернет магазин(8)
Чтобы не плодить дубли страниц, размеры и варианты цветов группируем в одной карточке. Так делается далеко не всегда и происходит замусоривание ленты товаров. Если даже разные размеры/цвета обладают отдельным урл, следует их группировать в одной карточке, а в ленте не показывать.
Магазин продает обувь и одежду – обязательно добавляем ссылку на таблицу с размерами и информацией как их определить.

Проектируем интернет магазин(9)
Отзывы бывают двух видов: для интернет-магазина (отдельный раздел) и к конкретному товару. Отзывы – немаловажный фактор ранжирования в Яндексе и Google. Кроме того, это поможет покупателем определиться с покупкой. Поэтому делаем форму добавления.

Проектируем интернет магазин(10)
Повысить средний чек поможет лента аксессуаров к товару. Чехлы к телефону, сумки к фотокамере, батарейки к пульту и т.д.
Вторая лента — рекомендуемые товары. Здесь популярные товары выбранной категории или те, которые вы хотите поскорее продать.
Просмотренные товары — все товары, которые покупатель уже смотрел. Удобно будет к ним вернуться. +24% к конверсии.

Проектируем интернет магазин(11)
Преимущества выносят на главную страницу и страницу о компании. Но если входная страница карточка товара, то показать преимущества здесь будет не лишним.

Проектируем интернет магазин(12)
Информер «Товар в наличии» повысит доверие пользователя к странице. Это простой вариант. Оптимальнее показывать остатки. Если товара мало, это подтолкнет посетителя к покупке.

Проектируем интернет магазин(13)
301-302 редиректы на главную или в рубрику сомнительный вариант. Пользователь попадет не туда, куда хотел. Использовать урл для другого товара, тоже не вариант — если используем ЧПУ, там показывается другой товар.
Вариант «удалить страницу» – теряем потенциального клиента перешедшего из поисковиков, где эта страница еще ранжируется.
Лучший вариант оставить страницу, крупно написав, что товара нет в наличии. Предоставить покупателю возможность оставить е-мейл для уведомления, если товар снова появится.
Обязательно выводим ленту похожих товаров. И у нее вдвое-втрое больше элементов, чем в стандартной, когда товар в наличии.

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

Проектируем интернет магазин(14)
Артикул
«Хлебные крошки» – полезная вещь для навигации и внутренней перелинковки.
В избранное – возможность отложить товар на потом.
Сравнить товар – если товар типовой, параметры подходят под сравнение – сравнивайте!
Производитель: бренд — не забываем указывать бренд производителя ссылкой. Ссылка ведет на отдельный раздел.
Кнопки расшаривания в соц.сетях – неоднозначный инструмент. С одной стороны да, надо. Больше поделившихся – больше внимание к интернет-магазину. Но давайте смотреть правде в глаза – много ли товаров расшаркивается в магазине среднего уровня? У топовых – да, я вижу лайки. У маленьких и средних их мало.
Стоит ли ставить кучу кнопок, у которых нулевые показатели? Зачем перегружать страницу лишней информацией?

Проектируем интернет магазин(15)
Самое важное в рубриках – выстроить четкую иерархию. Избегаем чрезмерного объединения категорий и глубокого уровня вложенности страниц.
Для продвижения категорий в каждой присутствует текстовый блок. Но большой объем текста не над товарами. Только снизу или сбоку. Главное – товары!
Не забываем добавлять плашки New, распродажа, скидка, лидер продаж и т.п. к товарам, которые хотим выделить.

Проектируем интернет магазин(16)
Обязательно сортируйте список товаров (по цене, по популярности, по рейтингу). Это удобно для покупателя, это фактор ранжирования в Яндексе.
Подбор товара. Чем больше параметров, тем лучше (цена, характеристики, цвет, размер).

Проектируем интернет магазин(17)
Страницы подбора товара (цена, характеристики, цвет, размер) выводим с ЧПУ.
Каждая такая выборка годится для продвижения по низкочастотным запросам. Добавив к детским комбинизонам цвет, дополнительный параметр и цены мы получаем уникальную страницу «Красные детские комбинезоны с капюшоном до 3000руб.» Название страницы в H1, также добавляем его в title.

Проектируем интернет магазин(17-1)
В интернет-магазине 700shin.ru такими страницами стали типоразмеры шин и диск. На страницах подбора мы генерируем H1 по формуле: (сезон) шины (диаметр) (размер). Также поступаем с title.
Страницы добавили в индекс Яндекса и Гугл через сайтмэп.

Проектируем интернет магазин(18)
На главную страницу интернет-магазина выводятся следующие смысловые блоки:
Преимущества
Акции
Текстовый блок
Товары со скидкой / Спецпредложения
Новинки
Популярные товары (любые, которые хотят продать).

Проектируем интернет магазин(19)
Если магазин торгует не только в своей регионе, для пользователя стоит сделать локализацию. Населенный пункт определяем по ip пользователя. Зная регион покупателя, выдаем ему точную информацию:
1. Виды, сроки и стоимость доставки в карточке товара.
2. Виды, сроки и стоимость доставки в разделе Доставка.
3. Специальные цены для регионов.
4. Акции, бонусы для отдельного города.
6. Остаток товаров в конкретном магазине/складе.

Проектируем интернет магазин(20)
Корзина и оформление заказа – тема для отдельной статьи. Если кратко: не делайте много шагов, лучше только один. Данные на одной странице.

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

Проектируем интернет магазин(22)
Телефоны выносим в шапку, они заметны и доступны с любой страницы.
Делайте ЧПУ (человеко-понятные урлы). Многие разработчики ошибочно принимают урлы вида http://доменное-имя.ru/televizory-samsung.html за ЧПУ. В формате ЧПУ урл страницы делаем вида http://доменное-имя.ru/televizory/samsung/.
Ставьте ссылки на группы в соц.сетях.
Проектируем интернет магазин(22-1)
Проектируем интернет магазин(23)

Посмотреть презентацию на slideshare.

Метки: ,