Станислав Хрусталёв написал о каталоге товаров.

— Кнопку каталога размещайте в шапке, таббаре (на мобильных устройствах), чтобы она была доступна при любом уровне прокрутки страницы;
— Лучше расположить её рядом со строкой поиска, так как это два основных способа поиска товаров;
— Она должна привлекать внимание, быть акцентной, включать иконку и текст (привычный вариант — «Каталог»);
— Меню каталога должно отображаться при нажатии, а не при наведении курсора на эту кнопку;
— Каталог можно структурировать по нескольким направлениям (типам товаров, поводам, стилям, брендам и так далее), отталкиваясь от пользовательских шаблонов поиска;
— Разделение каталога на категории и подкатегории должно быть достаточно детальным, чтобы пользователь экономил время (зачем переходить в категорию «Ноутбуки» тому, кто хочет купить Макбук), и в то же время таким, чтобы в итоговом списке товаров было из чего выбрать;
— Аксессуары к товарам размещайте в одной с ними категории;
— Если каталог большой, чтобы избежать информационной перегрузки, подкатегории можно отображать только для выбранной категории (поэтапное отображение);
— На десктопе раскрытие подкатегорий — при наведении курсора на категорию, открытие списка товаров — при нажатии на неё;
— На мобильном раскрытие подкатегорий может происходить при нажатии на специальный контрол (например, плюс рядом с названием категории), либо при нажатии на категорию. Тогда для перехода в список товаров категории может быть отдельный пункт в раскрывающемся списке подкатегорий;
— В выбранной категории (например, «Детские товары») можно показывать и подкатегории, и популярные бренды (вроде Lego);
— Также в меню каталога можно разместить ссылки на конструкторы, гайды по выбору товаров, тематические подборки;
— Если верхнеуровневых категорий немного, можно разместить их прямо в шапке, сопроводить иллюстрациями, сделать частью главной страницы;
— Сортируйте категории (по типам товаров) по популярности. Бренды лучше сортировать по алфавиту;
— Собирайте подкатегории в вертикальный список, а не в строку;
— Добавляйте кнопку «Ещё» или «Ещё N», если подкатегорий слишком много. Не отображайте её, если не влезла всего одна подкатегория. Визуально она должна отличаться от подкатегорий в списке. После нажатия дайте возможность вернуться к сокращённому списку подкатегорий («Свернуть»).

Канал Станислава. #catalog #ecommerce

Эдвард Скотт написал о частых ошибках в дизайне интернет-магазинов одежды.

— 94% исследованных Baymard Institute магазинов совершают как минимум одну из этих ошибок;
— Если в интернет-магазине нет нужной для принятия решения информации, покупатель скорее откажется от покупки, так как рискует купить то, что будет плохо сидеть;
— 1) Недостаточно информации о размерах. Добавьте мерки предметов одежды, используйте разные единицы измерения (дюймы, сантиметры), добавьте таблицы соответствия международных размеров, инструкции по снятию мерок, укажите параметры моделей на фото;
— 2) Разновидности товара по цветам, размерам и другим параметрам представлены отдельными карточками товаров. Объедините их в одну, а параметры покажите в переключателе (но будет сложно технически и организационно);
— 3) Не очевидно, какие размеры есть в наличии. Не используйте раскрывающийся список для выбора размера, показывайте все доступные размеры отдельными кнопками;
— 4) Нет фотографий вещей на моделях. Манекенов или виртуальных моделей стоит использовать только в крайнем случае;
— 5) Низкое разрешение фотографий, невозможность приблизить их хотя бы на 50%, чтобы рассмотреть детали.

In English. #ecommerce

Станислав Хрусталёв написал о карусели.

— Размещайте её на первом экране, но не занимайте ей всё пространство по вертикали;
— На первых слайдах — наиболее важные и релевантные предложения. Не стоит показывать предложения для городов, отличающихся от выбранного пользователем. Можно привязывать предложения ко времени суток или типу клиента (новым — рассказать о скидке за первый заказ);
— Соблюдайте баланс между качеством изображения и скоростью его загрузки;
— Добавьте на слайд кнопку с призывом к действию. Здорово, если она будет не изображением, а настоящей кнопкой, реагирующей на наведение и нажатие курсора. Также можно внедрить интерактивные отметки конкретных товаров (мебель в интерьере на фото), таймер обратного отсчёта до конца акции;
— Не забудьте об адаптации для мобильных, чтобы текст на слайде не становился слишком мелким;
— Карусель лучше одного статичного баннера. Добавьте возможность переключения между слайдами кнопками «Предыдущий» и «Следующий» (можно показывать при наведении на слайд), свайпами, клавишами «Влево» и «Вправо», на конкретный слайд — с помощью Page Control;
— Областью клика для кнопок «Предыдущий» и «Следующий» можно сделать всю левую и правую части слайда;
— В Page Control отображайте столько точек, сколько в карусели слайдов. Чтобы они не сливались с содержимым, их можно вынести за пределы слайда. Также их можно заменить на миниатюры слайдов;
— Слайды должны быть закольцованы;
— Переключайте слайды автоматически. Специальными индикаторами можно показывать, сколько времени осталось до переключения. Приостанавливайте переключение, если пользователь навёл на карусель курсор или прокрутил страницу, и карусель оказалась не видна;
— Можно показывать часть следующего слайда или несколько небольших слайдов одновременно.

#carousel #ecommerce

Эдвард Скотт написал о навигации по функциям личного кабинета.

— 81% интернет-магазинов, исследованных Baymard Institute, для навигации по функциями личного кабинета использует большое количество текстовых ссылок (в том числе разделённых на блоки);
— Такой объём текста пугает пользователей, не позволяет быстро находить нужные функции;
— Чтобы улучшить сканируемость страницы, каждый блок ссылок можно дополнить иконкой (Staples) или небольшой иллюстрацией (Microsoft). Это меняет пользовательское поведение: сначала они сканируют страницу в поисках подходящей иконки, а затем читают текстовую подпись, чтобы удостовериться, что это нужная им функция;
— Не стоит оставлять одни иконки без текстовых подписей, так как не все метафоры можно понять однозначно;
— Также не стоит совмещать на одной странице блоки с иконками и без (Amazon), так как пользователи будут игнорировать последние.

In English. #ecommerce #navigation

В Antro написали о лучших практиках входа и регистрации в интернет-магазинах.

— Пользователи входят не только для того, чтобы что-то купить. Они могут проверять статус заказа, искать сделанную ранее покупку, чтобы порекомендовать её и так далее;
— Располагайте кнопку входа в правом верхнем углу страницы;
— При наведении на неё курсора можно рассказывать о преимуществах личного кабинета;
— Показывайте, что пользователь авторизован. СберМегаМаркет отображает только количество баллов, Озон — имя пользователя, Яндекс Маркет — фото. Это удобно, если одним устройством пользуются несколько человек;
— Совмещайте вход и регистрацию;
— Не давайте в одно и то же поле вводить номер телефона, логин и адрес электронной почты. Такое поле нельзя автоматически заполнить, не получится установить подходящий тип клавиатуры для мобильных, нельзя использовать маски, подсказки и сообщения об ошибках будут громоздкими;
— Для входа отправляйте код — вместо входа по паролю. 78% пользователей запрашивают восстановление пароля в течение 90 дней;
— Не деактивируйте кнопки, если какие-то поля не заполнены. Не все люди знают, что в вебе так бывает (в офлайне кнопки обычно не перестают нажиматься, даже если нажатие ни к чему не приводит). Лучше при нажатии отображайте сообщения об ошибках для некорректно заполненных полей;
— Предлагайте несколько способов входа и регистрации. Если телефон разряжен или сейчас стоит другая симкарта, пользователю может быть удобен вход через электронную почту;
— Маркируйте поле для автозаполнения, чтобы можно было подставить номер телефона или имейл;
— Давайте очищать поле одним нажатием.

#sign_up #log_in #ecommerce

Фейфей Лиу написала о переводе пользовательского контента.

— Если продуктом пользуются люди из разных стран и пользовательский контент важен (например, это могут быть отзывы), дайте пользователям возможность перевода всех или отдельных записей или заранее переводите весь контент;
— Если отзывов мало, пригодится кнопка перевода отдельного отзыва, чтобы дополнить их мнениями иностранных покупателей (Etsy);
— Не отображайте кнопку перевода, если язык отзыва совпадает с языком пользователя;
— Если преобладают отзывы от иностранцев, пригодится кнопка «Перевести все», чтобы не переводить каждый отдельный отзыв (Amazon). Особенно актуально для развлекательного контента, когда пользователям проще уйти на другой ресурс, чем переводить вручную или прокручивать недоступный контент;
— В таком случае можно переводить контент заранее и отображать отметку о переводе и кнопку для просмотра оригинального текста;
— Стоит учесть, что сервисы для такого автоматического перевода не бесплатны;
— Если отзывов на разных языках достаточно много, дайте возможность отфильтровать их по языку (Booking, Weverse).

In English. #localization #ecommerce

Ким Салазар написала о возможности выбрать модель при покупке одежды и косметики.

— Покупатели обращают внимание, если товары демонстрируют модели разных размеров, возрастов и рас. Приятно видеть людей, похожих на них и проще определиться с выбором. Так магазин показывает, что ориентируется на таких клиентов;
— Дайте возможность выбрать модель (например, по размеру и росту). Одежда сидит по-разному в зависимости от типа фигуры, а восприятие макияжа зависит от тона кожи;
— Делать это можно на странице товара и странице категории;
— Объясняйте, к каким категориям товаров будет применяться выбранная модель, и сохраняйте выбор модели в этих категориях;
— В списке товаров и на странице товара отображайте их изображения с выбранной моделью;
— Учитывайте размеры товаров. Нет смысла показывать на стандартных моделях товары plus-size, если у них даже нет стандартных размеров (но это скорее к вопросу об использовании реальных фото);
— Используйте реальные фотографии. Затея не будет иметь смысла, если автоматически растягивать (сжимать) изображение товара под размер модели;
— Возможность выбора модели имеет смысл, если большинство товаров в категории (если не все) могут быть на ней отображены;
— Если это не так, можно просто показать фото с разными моделями на странице товара;
— Покупатели высоко ценят функцию выбора модели, сделайте её заметной.

In English. Ставьте 👍 если статья понравилась. #ecommerce

Станислав Хрусталёв написал о быстрых действиях в iOS.

— Разместите в них полезные действия, часто совершаемые пользователями в приложении. Хорошие кандидаты — действия, для перехода к которым в приложении надо больше одного касания;
— Нет смысла размещать там переход на главный экран, который открывается при запуске приложения;
— Добавьте 4 действия (столько сейчас возможно) — кому-то из пользователей это упростит жизнь. Можно отслеживать использование быстрых действий и заменять непопулярные;
— Но не обновляйте их слишком часто и кардинально, чтобы не ломать привычки;
— Действия могут быть динамическими и зависеть от контекста и стадии пользовательского пути. Скрывайте нерелевантные действия. Например, «Открыть заказы» не имеет смысла, если пользователь ещё ничего не заказывал;
— Расскажите о быстрых действиях в онбординге. Не все пользователи iOS знакомы с этой функцией;
— Проверьте, что названия у действий есть, они краткие, не обрезаются, локализованы, форматированы единообразно, дают понять, что произойдёт. Сделать действие понятнее помогают подзаголовки;
— Если добавлять подзаголовки, то лучше для всех пунктов;
— Добавьте релевантные иконки. Они не должны дублироваться. Хорошо, если метафоры совпадают с иконками таких же действий в приложении;
— Сделайте толщину иконок и размер такими же, как у иконок системных действий;
— Для приложения магазина в быстрых действиях можно разместить: бонусная карта (и статус программы лояльности в подзаголовке), акции, новинки, избранное, список покупок, корзина, где мой заказ, штрихкод заказа (или данные для его получения), оценка заказа, промокод, магазины, авторизация.

Канал Станислава. #ecommerce #mobile

Станислав Хрусталёв собрал идеи для страницы с сообщением о сделанном заказе.

— Детали заказа, чтобы пользователь мог удостовериться, что нигде не ошибся;
— Что произойдёт дельше. Например, если для подтверждения заказа позвонит оператор, сообщите, в течение какого времени и с какого номера;
— Статус заказа, чтобы для отслеживания его изменения никуда не переходить. Можно показать стрим процесса обработки заказа;
— Контакты службы поддержки, условия обмена и возврата товара;
— Если это логистически возможно, возможность изменить адрес и время доставки, отменить заказ, изменить его состав;
— В блоке допродажи показывайте комплементарные заказу товары, а не заменители, чтобы покупатель не сомневался в сделанном выборе;
— Скидка на следующий заказ повысит шанс, что клиент придёт снова;
— Что ещё может сделать клиент, уже оформивший заказ: подписаться на соцсети компании и рассылку (расскажите о её ценности для клиента), дать обратную связь об оформлении и оплате заказа (метрика CSAT), скачать приложение, порекомендовать магазин по реферальной программе;
— Если заказан конкретный товар, можно рассказать о его преимуществах и особенностях и поделиться материалами об установке и настройке (чтобы клиент ничего не упустил и был максимально доволен покупкой), отзывы других клиентов (укрепить уверенность в выборе);
— Если заказ можно сделать без авторизации, предложите войти. Мотивацией может быть программа лояльности;
— Добавление в календарь интервала доставки;
— Построение маршрута до пункта выдачи заказов.

Канал Станислава. #ecommerce

Виталий Фридман написал об отзывах и рейтингах товаров.

— В отзывах люди ищут подтверждения, что реклама не врёт, цена справедлива, товар их удовлетворит, есть похожие на них люди, которые остались довольны;
— Также их интересуют важные детали, решаются ли выявленные проблемы и худшее, что может случиться после покупки;
— Люди сначала изучают негативные отзывы. У хороших продуктов их немного, по ним понятно, что проблемы эпизодические: сорвали сроки доставки из-за праздников и подобное;
— Не все негативные отзывы люди считают таковыми. Значимы отзывы похожих на них людей относительно важных им аспектов. Если не нужна доставка за границу, не важно, что есть жалобы на соответствующую упаковку;
— Важно, чтобы клиенты писали честные негативные отзывы. Просите конкретно указывать, что не устроило и была ли проблема в конечном итоге решена;
— Показывайте среднюю оценку, лучше с одной цифрой после запятой (например, «4,7 из 5»), чтобы товары с оценкой 3,6 и 4,4 не получали одинаковый рейтинг 4;
— Показывайте общее количество голосов. Большинство людей выберет товар с рейтингом 4,5 и 57 голосами, а не с рейтингом 5 и пятью голосами;
— Идеальный рейтинг — между 4,5 и 4,89, если отзывов достаточно много (больше 75). Слишком высокий рейтинг вызывает подозрения, покупатели начинают искать недостатки, о которых не сказано прямо;
— Покажите диаграмму распределения оценок. Там должно быть J-образное распределение: достаточно отрицательных отзывов, очень мало средних и очень много положительных;
— Почему не нормальное распределение: обычно люди тратят время на отзыв, когда товар обрадовал или расстроил;
— Оценки и диаграммы распределения можно показывать по отдельным атрибутам товара;
— При написании отзыва предлагайте выбрать теги. Они могут касаться как товара (и зависеть от категории товаров), так и купивших его людей. Эти теги могут быть отдельными фильтрами;
— Можно спросить, готов ли покупатель рекомендовать товар. Даже с оценкой в 3 звезды он всё ещё может его рекомендовать. Для усиления эффекта можно совместить процент рекомендаций с характеристиками этих людей: «86% клиентов (занимаются бизнесом более 5 лет) рекомендуют этот продукт»;
— Анализируйте отзывы и давайте резюме положительных и отрицательных отзывов. Особенно полезно для страницы сравнения товаров;
— Дайте возможность отмечать полезные отзывы, фильтровать и сортировать отзывы по оценке, дате написания, полезности, наличию фото и так далее, а также искать в них отдельные слова;
— Дополняйте отзывы данными клиентов: имя, местоположение, диапазон возраста, роль или должность, ссылка на соцсети, фото и так далее.

In English. #feedback #rating #ecommerce

Елена Тарасюк написала о повышении конверсии.

— Детализируйте воронку продаж, чтобы было понятно, на каком шаге уходит больше всего клиентов;
— Анализируйте статистику по отдельным сегментам пользователей. Сегментировать можно по географии, типам устройств, социально-демографическим признакам, интересовавшим клиентов продуктам, ключевым запросам в поисковых системах и так далее;
— Можно обнаружить, например, что конверсия проседает только для мобильных устройств;
— В электронной коммерции есть много решений, которые можно скопировать, чтобы починить конверсию. Но важно не забывать об изначальной концепции, чтобы не стать ещё одним интернет-магазином и не растерять клиентов, которых она привлекла;
— Улучшайте воронку снизу вверх. Нет смысла наращивать трафик, если он уходит в решето;
— Чтобы понять, с какими барьерами сталкиваются пользователи на низкоконверсионных этапах и что можно улучшить, проинтервьюируйте их.

#ecommerce #conversion

В Antro написали о частых ошибках в дизайне главных страниц и каталогов интернет-магазинов.

— Главная однобоко раскрывает ассортимент. Пользователи видят в новинках только походное снаряжение, когда компания продаёт разные спортивные товары. Покажите не менее 40% типов товаров. Также можно вынести ключевые категории в главное меню;
— Не помогает сформировать представление о товарах. Добавьте в карточки названия, цены (понять уровень), несколько фотографий (на десктопе можно менять при наведении курсора), цвета, ключевые характеристики;
— Если магазин малоизвестен, напишите на первом экране о его специализации, особенностях товаров, на каких покупателей ориентирован;
— В каталоге данных о товарах слишком мало (приходится открывать страницы товаров, люди устают и сдаются) или много (перегруженные страницы, лишняя информация отвлекает). Покажите важные для выбора характеристики и возможные вариации товара (вроде цвета), его фото отдельно, в контексте, во время использования;
— Повторяющиеся элементы (например, кнопку «В избранное») на десктопе можно показывать при наведении курсора на карточку товара;
— Не видно, что применён фильтр, из-за чего пользователь неправильно воспринимает ассортимент. Покажите все применённые параметры фильтрации, дайте возможность быстро их сбросить по отдельности и все разом;
— Отображайте значение и название параметра фильтра («Длина 15 см»);
— Нет подходящих параметров фильтрации. Дайте возможность фильтровать по всем характеристикам. Основные параметры, не зависящие от типа товара: цена, пользовательский рейтинг, цвет, размер, бренд;
— Если товара в наличии нет и не будет, не давайте ложных надежд, сразу сообщите об этом и предложите альтернативы. Если он скоро появится, просто увеличьте сроки доставки.

#ecommerce

Томас Лауринавичюс написал о корзине.

— Разместите иконку корзины в правом верхнем углу, где люди привыкли её искать;
— Показывайте количество товаров в корзине. Лучше использовать контрастный значок, чтобы напомнить о забытых в корзине товарах;
— Подтверждайте, что товар добавлен в корзину. Кнопка «Перейти к оформлению заказа» подталкивает пользователей оформить заказ;
— Часто интернет-магазины открывают корзину после добавления в неё товара, что прерывает процесс выбора товаров. Можно отображать модальное окно с мини-корзиной, где будет основная информация о товарах, их цена и количество, а также общая стоимость и кнопка оформления заказа;
— Сделайте заметной информацию о бесплатной доставке. Дополнительные расходы — одна из главных причин, почему люди бросают свои корзины;
— В корзине основной акцент должен быть на кнопке оформления заказа.

In English. #ecommerce #cart

Станислав Хрусталёв написал о выборе города в интернет-магазине.

— Обычно он находится в левом верхнем углу;
— Определяйте город по IP-адресу. Запрос доступа к геолокации может быть воспринят нарушением приватности;
— Достаточно только названия города, без подписи «Город». Для облегчения восприятия добавьте иконку геометки. Текст «Текущий город» можно разместить в тултипе;
— Не обрезайте название города;
— Привлечь внимание к текущему городу можно анимацией вместо немодального попапа с просьбой подтвердить, что город определён правильно;
— Кроме попапа запрос на подтверждение города иногда размещают в растяжке у верхней границы страницы;
— Но в любом случае, не блокируйте интерфейс этим запросом;
— В сообщении: выделите название города; кнопку подтверждения сделайте основной; можно пояснить, почему важен выбор правильного города;
— Иногда запрос закрывают автоматически по истечению времени, не требуя действий от пользователя;
— Если городов много, интерфейс выбора города отображайте в лайтбоксе в несколько столбцов. Для облегчения восприятия можно сгруппировать их по первой букве в названии;
— Если городов очень много, можно подсветить это как ещё одно преимущество: «Вы можете выбрать более 150 000 населённых пунктов по всей России»;
— Выделите популярные города. Иногда показывают только популярные и дают возможность переключиться на полный список или искать остальные города поиском;
— В списке можно отметить города, где есть офлайн-магазины, собственная или бесплатная доставка, показать количество магазинов в городе. Не забудьте показать легенду для этих меток;
— Если пользователь ввёл нужный город в поиск, но его не оказалось в списке, предложите выбрать ближайший город или связаться с поддержкой.

#ecommerce

Эмиль Аминев написал о повышении конверсии в чекауте.

— Не стоит сокращать всё, что возможно (на своё экспертное усмотрение), чтобы форма стала короче;
— Поговорите с пользователями, предложите пройти чекаут и прокомментировать, что удобно, что нет;
— Поле для ввода промокода оставьте достаточно заметным. Люди скорее откажутся от покупки, не найдя возможности ввести промокод, чем передумают покупать, отправившись на его поиски;
— Людям важно знать, из чего складывается итоговая цена, даже если это 7 строк (стоимость товаров, размер скидки, сборка, доставка);
— Не прячьте это под ? или i. Как сказал Бирман, уже 30 лет известно, что никто на них не нажимает;
— Людям приятно видеть, сколько получилось сэкономить за счёт промокода;
— Можно изменить выбор доставки с выпадающего списка на карусель, чтобы даты и время были видны без дополнительных нажатий;
— Сгруппируйте поля по смысловым блокам: адрес, контакты, условия сборки и доставки, оплата. Возможность видеть всю информацию и контролировать процесс заказа важнее скорости прохождения чекаута;
— Создайте короткую версию чекаута для повторных заказов, когда все данные уже есть, но их можно изменить.

#ecommerce #checkout

Станислав Хрусталёв написал о строке поиска в мобильных интернет-магазинах.

— Чаще всего она находится в верхней части экрана или фиксируется там при скроле;
— Поиск — хороший кандидат в список быстрых действий приложения;
— Если каталог не сложный, строку поиска можно показывать после нажатия на кнопку. Общепринятая метафора — лупа;
— В поле поиска стоит разместить плейсхолдер, чтобы облегчить понимание его функции. Например, можно перечислить типы запросов, задать вопрос («Что вы ищете?»), упомянуть название компании («Найти в СберМаркете»), подсветить широту ассортимента, показать примеры конкретных запросов (в этом случае их стоит динамически менять);
— Плейсхолдер должен полностью умещаться в поле;
— При активации строки поиска избегайте сильного изменения её дизайна;
— Активированный поиск отображайте в полноэкранном формате с подсказками в виде актуальных (последних, популярных) запросов, уточнений текущего запроса, категорий, брендов, товаров;
— Также там могут быть непродуктовые подсказки вроде ссылок «Наши магазины», «Оплата»;
— Подсказки разных типов лучше не смешивать. Сгруппировать их можно заголовками, иконками, подписями (текст «Бренд», название вышестоящей категории), вкладками;
— Избегайте ложной персонализации, когда пользователь только зарегистрировался, а магазин уже показывает товары, «рекомендованные для вас»;
— При поиске учитывайте связи. Например, при поиске «джинсы» показывайте бренды, в ассортименте которых есть это слово. Можно показывать подходящие товары («адаптеры для iphone»). В аптеках — искать по симптомам;
— Показывайте количество найденных товаров: вообще и в категориях;
— В статье ещё много рекомендаций по взаимодействию со списком подсказок, истории поиска, пустым состояниям и так далее.

Канал Станислава. #search #ecommerce

Станислав Хрусталёв написал о сортировке товаров в интернет-магазине.

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

Канал Станислава. #sorting #ecommerce

Станислав Хрусталёв написал о рейтинге и отзывах в интернет-магазинах.

— Если рейтинга нет, лучше честно об этом написать, а не скрывать его. Но люди могут проходить мимо таких товаров. ВкусВилл креативно пишет в списке товаров: «Я новенький»;
— Чаще всего для обозначения отзывов используется жёлтая звезда. Часто жёлтый заменяют на фирменный цвет;
— Показывайте числовое значение рейтинга. Уточняйте его до десятых, при этом целые числа можно сократить (5,0 → 5);
— Дополнительно показывайте количество оценок или отзывов: чем их больше, тем надёжнее рейтинг. Если оценок нет, отдельно об этом можно не сообщать (с нулевым рейтингом это и так понятно);
— Подумайте об отображении количества отзывов, если их будет очень много;
— Если собираете оценки и большинство товаров оценено, стоит реализовать сортировку и фильтрацию по рейтингу. Также имеет смысл сортировка по числу отзывов;
— Сортировку лучше делать одностороннюю. Кому нужны сначала товары с низким рейтингом?
— Фильтрацию — диапазоном от выбранного пользователем значения до 5;
— На странице товара нажатие на рейтинг должно вести к отзывам;
— Предусмотрите отображение сводки с диаграммой распределения оценок (сколько оценок на 5 звёзд, на 4 и так далее), чтобы клиент быстрее сформировал впечатление о товаре;
— Покажите, какой может быть максимальная оценка (4,5 из 5), добавьте текстовое пояснение (5 из 5 — великолепно);
— Список отзывов лучше разместить на отдельной странице, чтобы не занимать много места. На странице товара оставьте его краткую версию (например, в виде горизонтальной коллекции или одного отзыва);
— Полезна фильтрация отзывов: по географии, варианту товара, производителю (если его предлагают разные компании), только от покупателей;
— Посмотреть негативные отзывы — вполне жизненная потребность.

#rating #feedback #ecommerce

Станислав Хрусталёв собрал примеры, как разнообразить список товаров.

— Использовать разные фоны (интерьеры у товаров для дома), разные изображения на устройстах с экранами;
— Показывать товары в разных ракурсах;
— Для некоторых товаров автоматически запускать видео;
— Чередовать количество товаров в строке (например, иногда отображать один товар, когда обычно — два);
— В середину списка добавить горизонтально прокручиваемый блок с популярными товарами, хитами продаж;
— При просмотре старой коллекции — прорекламировать новую;
— Если ваши специалисты консультируют и помогают подобрать товар — рассказать об этой услуге;
— Отдельной заметной карточкой можно сообщить, что на товары в корзине есть дополнительная скидка, или запросить обратную связь о купленном ранее товаре (Яндекс Маркет даёт сразу поставить оценку, не открывая страницу товара);
— У покупателя может случиться паралич выбора. Предложите подарочные карты, чтобы облегчить ему задачу;
— Контентные карточки: рецепты, подборки образов, статьи и полезные советы о товарах из списка;
— Посреди длинного списка товаров можно разместить предложение перейти в подкатегорию, чтобы конкретизировать запрос;
— Прочее: запрос оценки приложения, запрос на разрешение отправки уведомлений, анонс новой функции.

#ecommerce

Кейт Моран и Тейлор Дайкс написали о сравнительных таблицах.

— Когда альтернатив множество, выбирая товар, люди ориентируются на одну основную характеристику. С этим помогают фильтры. Когда товаров 5–7, люди учитывают достоинства каждого конкретного варианта. Здесь хорошо работают сравнительные таблицы;
— Если вы предлагаете не более 5 альтернатив (модели Apple Watch, варианты подписки), подойдёт статическая таблица. В ней можно контролировать отображение информации, редактировать формулировки;
— В динамической таблице пользователь сам выбирает, какие товары сравнить;
— Если в ней может оказаться больше 5 вариантов, предусмотрите способы сократить количество, например, добавив фильтры;
— Главная проблема динамической таблицы — неполнота данных о параметрах товаров;
— Стандартная компоновка: столбцы для товаров, строки для параметров;
— Фиксируйте заголовки столбцов при прокрутке;
— Связывайте абстрактные значения параметров с чем-то понятным: аккумулятор на 3350 мАч — хватит 1,2 раза зарядить iPhone 6;
— Объясняйте термины и непонятные параметры. Можно добавить всплывающие подсказки и ссылки на статьи;
— Если параметров много, дайте пользователю возможность управлять отображением: прятать отдельные группы параметров в аккордеон, отображать только отличающиеся параметры. В статические таблицы можно добавить краткий и полный вариант отображения;
— Сравнительные таблицы неэффективны, если варианты не взаимоисключающие (вместо сравнения двух платьев лучше оба добавить в корзину), простые (мало параметров), дешёвые или заменяемые (нет смысла тратить время на изучение таблицы), уникальные и трудно сравниваемые (разные параметры).

In English. #ecommerce #table