Ошибки при дизайне интернет-магазинов: ТОП-10 для главной и каталога

Привет, это Antro. Мы провели больше 50 аудитов интернет-магазинов и собрали топ ошибок, от которых бизнес может терять деньги. Показываем примеры и объясняем с помощью исследований.

Ошибки при дизайне интернет-магазинов: ТОП-10 для главной и каталога

В своей работе мы делаем ставку на CX, клиентский опыт. Делаем дизайн не просто красивым, но и функциональным. Важно, чтобы покупатель легко ориентировался в магазине, находил нужные товары и не отвлекался от покупок. Чтобы помогать бизнесу зарабатывать, изучаем исследования авторитетных дизайнерских институтов, проводим собственную аналитику. В статье делимся главными наблюдениями.

5 ошибок главной страницы магазина

Главная встречает пользователя. В некоторых случаях по ней он принимает решение о том, знакомиться ли с магазином, либо дальше блуждать по интернету. Страница должна отображать важную для пользователя информацию, быть понятной и впечатляющей. Разбираемся, каких ошибок избежать:

Ошибка 1: главная страница не отображает ассортимент

Иногда по главной странице сложно понять, какие товары предлагает магазин. Из-за этого пользователь может растеряться: подумать, что на сайте нет нужного продукта, и уйти к конкурентам. В этом случае бизнес теряет клиента в самом начале пути — ещё до того, как он познакомился с магазином.

Ошибка на странице магазина СпортЕВ: компания продаёт спортивные товары от плавок для бассейна до велотренажёров, но на главной показывает только походное снаряжение
Ошибка на странице магазина СпортЕВ: компания продаёт спортивные товары от плавок для бассейна до велотренажёров, но на главной показывает только походное снаряжение

Как грамотно продемонстрировать ассортимент:

  • если на сайте продают много разных товаров, стоит показать как можно больше типов продуктов. Baymard Institute рекомендует показывать не менее 40% типов товаров. Пользователи делают вывод о новом магазине по его ассортименту. Если в магазине одежды показать на главной только обувь, многие подумают, что компания продаёт одни кроссовки и туфли.
  • обойдитесь без лишнего креатива. Сделайте интерфейс сайта похожим на другие интернет-магазины. Новые пользователи определяют тип сайта по навигации и оформлению главной страницы, поэтому важно, чтобы дизайн был привычным и узнаваемым.
В шапке разработанного нами сайта Skinjestique сразу отображаются типы товаров: пользователь сходу может представить ассортимент магазина
В шапке разработанного нами сайта Skinjestique сразу отображаются типы товаров: пользователь сходу может представить ассортимент магазина
  • покажите не только ассортимент, но и дополнительные преимущества, которые предлагает интернет-магазин. Укажите, что доставку можно оформить в день заказа, существует программа лояльности или скидка на первую покупку. Эти факторы повлияют на то, какое впечатление составит покупатель о магазине.
  • добавьте отзывы к товарам — на них полагается 95% пользователей при оценке ассортимента интернет-магазина. В интерфейсе сайта стоит отобразить среднюю оценку и количество отзывов о товаре.
  • предложите пользователю разные способы подбора товаров. Распределите продукты по категориям, добавьте фильтры в поиске. Так вы акцентируете внимание на разных сценариях использования покупок.
В интернет-магазине Crazy Fish пользователю предлагают спиннинги в зависимости от того, какую приманку использует рыбак, или какую рыбу он хочет поймать. Сайт у нас на техподдержке
В интернет-магазине Crazy Fish пользователю предлагают спиннинги в зависимости от того, какую приманку использует рыбак, или какую рыбу он хочет поймать. Сайт у нас на техподдержке

Ошибка 2: недостаточно информации о товаре на карточках

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

В 12 STOREEZ на карточках нет вообще никакой информации — чтобы узнать характеристики товара, потребуется открыть отдельную страницу
В 12 STOREEZ на карточках нет вообще никакой информации — чтобы узнать характеристики товара, потребуется открыть отдельную страницу

Что обязательно нужно разместить:

  • название товара;
  • фото в хорошем качестве;
  • цена и скидка, если она есть;
  • смена фото товара по ховеру, если их несколько.

Что стоит разместить:

  • ключевые характеристики товара (например, габариты);
  • кнопка для сохранения в «избранное» или корзину;
  • вариации товаров по типу, размеру или другим характеристикам;
  • средняя оценка и количество отзывов.
Пример Спортмастера: карточки содержат стоимость, название и оценку пользователей. При наведении можно посмотреть разные фото и выбрать нужный размер
Пример Спортмастера: карточки содержат стоимость, название и оценку пользователей. При наведении можно посмотреть разные фото и выбрать нужный размер

Ошибка 3: отсутствие позиционирования на первом экране

Когда пользователь заходит на сайт малоизвестного интернет-магазина, он может не сразу понять, на чём специализируется компания. Стоит понятно объяснить, что продаёт организация, на каких покупателей ориентируется, в чём особенность товаров. Так пользователю не придётся разбираться во всех тонкостях самому.

Часто большие магазины и маркетплейсы не описывают свое позиционирование. Но это не значит, что они знают какие-то определенные секреты. Просто они уже достаточно известные и могут себе позволить использовать первый экран под другие нужды :)

На первом развороте небольшого магазина Los Raketos написано позиционирование. Так случайный пользователь легко разберётся, что за сайт перед ним
На первом развороте небольшого магазина Los Raketos написано позиционирование. Так случайный пользователь легко разберётся, что за сайт перед ним

Ошибка 4: непроработанная навигация в хедэре

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

В Леруа Мерлен вообще не предусмотрена навигация в хэдере. Можно только найти конкретный товар или посмотреть продукты из подборок чуть ниже
В Леруа Мерлен вообще не предусмотрена навигация в хэдере. Можно только найти конкретный товар или посмотреть продукты из подборок чуть ниже

Решить проблему легко — перечислите категории товаров в навигации. Если продаёте одежду, добавьте категории «для мужчин», «для женщин», «для детей». Продаёте технику — добавьте разделы «ноутбуки», «наушники», «комплектующие для ПК». Так пользователь сможет бегло пройтись по навигации и составить представление о товарах в магазине.

Подробная навигация есть в спроектированном нами интернет-магазине IDDIS: с её помощью пользователь сможет быстро перейти к нужной категории
Подробная навигация есть в спроектированном нами интернет-магазине IDDIS: с её помощью пользователь сможет быстро перейти к нужной категории

Ошибка 5: полотна текста — плохая вёрстка информации

Пишите для интернетов: коротко, понятно, без премудростей. Куча букв без абзацев и оформления оттолкнёт читателя. Такой текст читать просто лень ¯\_(ツ)_/¯

Советы здесь очень простые:

  • разбивайте текст на подзаголовки;
  • делайте маркированные и нумерованные списки;
  • выделяйте важное;
  • делайте абзацы короткими;
  • пишите просто, без сложных оборотов и непонятных терминов.
На сайте интернет-магазина Vitaliv много текста, но он разбит на небольшие абзацы — так пользователь меньше устаёт от чтения. Кстати, его тоже дизайнили мы :)
На сайте интернет-магазина Vitaliv много текста, но он разбит на небольшие абзацы — так пользователь меньше устаёт от чтения. Кстати, его тоже дизайнили мы :)

5 ошибок каталога товаров

Пользователь перешёл с главной в каталог — поздравляем! Но радоваться всё равно рано: в любой момент он может передумать и закрыть сайт. Разбираем опасные места:

Ошибка 1: недостаточно информации о товаре на карточках

Когда информации мало, пользователь может не заметить продукты, которые ему подходят. Если информации много — она отвлекает. Перегруженная страница пугает пользователя, ему не хочется разбираться во всех деталях.

Тестирование Baymard Institute показало: когда информации мало, пользователь начинает переключаться между списком товаров и отдельными страницами продуктов. Каждый раз посетителю сайта нужно открывать новую вкладку и читать подробности о товаре. Пользователей хватает ненадолго: чаще всего такие неудобные сайты они закрывают через 3–15 минут.

Обратный результат — когда карточки товаров отображали дополнительную информацию при наведении. Так пользователи быстрее узнавали о нужных характеристиках и не тратили много времени на бессмысленные поиски.

В карточках «Золотого Яблока» много ошибок. Одна из них — указание цены «от» без дополнительных объяснений
В карточках «Золотого Яблока» много ошибок. Одна из них — указание цены «от» без дополнительных объяснений

Базовый минимум, который стоит показать на карточке товара:

  • фото товара в контексте и в отдельности от него. Покажите, как выглядит продукт на прозрачном фоне, а затем поместите его в контекст. Так пользователь сможет представить, как выглядит товар сам по себе, и как он выглядит во время использования. Например, магазин сантехники может сфотографировать кран на белом полотне, а затем добавить фото крана в ванной комнате.
  • важные для выбора характеристики. Их стоит отобразить в описании карточки, либо показывать при наведении на неё. Например, в магазине матрасов можно показывать габариты и жёсткость, когда пользователь наводит курсор на фото
Пример МногоСна: при наведении курсора на карточку товара отображаются свойства матраса. Сайт у нас на дизайн-поддержке
Пример МногоСна: при наведении курсора на карточку товара отображаются свойства матраса. Сайт у нас на дизайн-поддержке
  • повторяющиеся элементы. Кнопки и информацию, которая распространяется сразу на много товаров, можно вынести на карточку в каталоге. Например, «добавить в избранное», «добавить в корзину», «бесплатная доставка». Чтобы не засорять каталог, эту информацию можно показывать при наведении на карточку.
  • варианты товара. Если продукт существует в других вариациях — стоит об этом сказать. Предложите пользователю купить продукт в другом цвете, с другим размером, либо из другого материала. Так вы дадите покупателю больше выбора, и он сможет подобрать товар себе по душе.
H&M под карточкой товара выносит цветовые вариации, но делает это не совсем верно. Стоит увеличить размер иконок цвета и отобразить больше вариаций, чтобы пользователю не приходилось открывать страницу товара
H&M под карточкой товара выносит цветовые вариации, но делает это не совсем верно. Стоит увеличить размер иконок цвета и отобразить больше вариаций, чтобы пользователю не приходилось открывать страницу товара
  • фото, которые помогут в выборе. Покажите характеристики продукта с помощью фотографий. Для этого покажите его в таких сценариях, которые помогут представить его в действии. Например, сумку для ноутбука стоит показать снаружи, чтобы пользователь оценил её внешний вид, а затем показать внутри — чтобы оценить вместимость.
В магазине MALBAG у многих кошельков и сумок есть фото внутри — так можно оценить вместимость
В магазине MALBAG у многих кошельков и сумок есть фото внутри — так можно оценить вместимость

Ошибка 2: неправильно спроектированы фильтры

С фильтрами можно допустить сотни ошибок, но чаще всего мы встречаем эти:

  • нет очевидного подтверждения, что фильтры применены. Если после применения фильтры пропадают из виду, пользователь может неправильно воспринять ассортимент. Например, он может выставить фильтрацию по цвету, а затем забыть про неё. Покупатель будет смотреть на 10 товаров одного цвета и думать, что на этом ассортимент магазина закончился — всё из-за того, что применённые фильтры нигде не обозначили.
  • нельзя разом увидеть весь список фильтров. Из-за этого при тонкой настройки параметров пользователь может растеряться. Возникает та же проблема: пользователь смотрит на 10 чёрных кружек и думает, что на этом ассортимент в магазине посуды закончился.
  • нет быстрого способа удалить фильтры. Иногда после удаления каждого нового фильтра страница обновляется, либо пользователю заново приходится пролистывать список параметров. Сложными фильтрами посетители сайта просто не пользуются — проще зайти в другой магазин, чем перенастроить список фильтров.
Много ошибок с фильтрами в интернет-магазине Rendez-Vous. Например, если выставить фильтр по бренду, добавление настроек откроет новую страницу
Много ошибок с фильтрами в интернет-магазине Rendez-Vous. Например, если выставить фильтр по бренду, добавление настроек откроет новую страницу

Как исправить ошибки с фильтрами:

  • разместите фильтры в боковой панели, либо над карточками товаров. Фиксируйте там все применённые параметры. Так фильтры всегда будут в поле зрения, и пользователь не забудет, какие характеристики отметил.
  • добавьте кнопку очистки фильтров. Когда пользователь захочет найти другой товар, ему не придётся удалять каждый параметр по отдельности. Небольшой крестик в интерфейсе значительно облегчит жизнь покупателям.
  • указывайте параметр фильтра. Некоторые характеристики непонятны без дополнительных пояснений. Например, применённый фильтр «15 см» можно прочитать по-разному. Это может быть высота, длина или ширина. Чтобы не возникало путаницы, параметры стоит подписывать.
DNS выводит список активных фильтров в блоке слева и над выдачей товаров. Сразу рядом находится кнопка, чтобы сбросить параметры
DNS выводит список активных фильтров в блоке слева и над выдачей товаров. Сразу рядом находится кнопка, чтобы сбросить параметры

Ошибка 3: отсутствие релевантных фильтров

Согласно исследованию Baymard Institute, существуют пять основных фильтров, которые применяют пользователи вне зависимости от типа товара:

  • цена (12% магазинов не указывают её);
  • пользовательские рейтинги (53% сайтов отражают их);
  • цвет (10% не добавляют такой группировки);
  • размер (15% не делают таких фильтров);
  • бренд (27% не обозначают их).

Когда этих фильтров нет, пользователю сложнее подобрать товар. Если товар в магазине подобрать сложно, он пойдёт в другой магазин. Всё просто.

Как улучшить фильтрацию:

  • предлагайте фильтры в соответствии с категорией товара. Если пользователь заходит в раздел с наушниками, предложите настройки поиска по типу конструкции и диапазону частот. Не стоит тащить в раздел фильтры по количеству мегапикселей и другие параметры из остальных разделов.
  • сделайте фильтры под все характеристики. Позаботьтесь о том, чтобы пользователю не приходилось открывать все карточки подряд в поисках нужного товара. Подстройте фильтры так, чтобы они учитывали даже параметры, которые ищут не так часто — например вес у ноутбуков.
Хороший пример: в магазине «Фотосклад» для каждого раздела выставлены только целевые фильтры
Хороший пример: в магазине «Фотосклад» для каждого раздела выставлены только целевые фильтры

Ошибка 4: плохой UX для товаров, которых нет в наличии

Когда в магазине нет товара — это печально, но ситуацию можно подпортить ещё и некачественным UX с оповещением об этом. У проблемы есть несколько вариаций:

  • самое худшее — когда товара нет в магазине, но на сайте об этом не сказано. Пользователь попробует купить продукт, но в последний момент его постигнет разочарование. Очень плохой сценарий.
  • непонятное решение — просто указать, что товара нет в наличии. В этом сценарии нет понятного ответа на вопрос «а что делать?». Пользователя оставляют в растерянности: товар следует ждать? Товар прекратили выпускать?
  • костыльное решение — добавить кнопку «сообщить о поступлении товара». Так магазин старается позаботиться о пользователе, но не шибко качественно. Если товар пользуется спросом, продавец просто подаёт сигнал — «купи товар в другом магазине». Пользователь так и поступит.
В магазине «Русская Блесна» отсутствующие товары маркируют подписью «нет в наличии». При этом пользователю не подсказывают, что делать с этой информацией
В магазине «Русская Блесна» отсутствующие товары маркируют подписью «нет в наличии». При этом пользователю не подсказывают, что делать с этой информацией

Решения такие:

  • Если товара нет в наличии временно, но вот-вот появится — просто увеличьте сроки доставки. Для тех, кому товар требуется срочно, предложите аналоги: продукт в другом цвете, либо его заменители.
  • Если товара нет в наличии, и больше он не появится — сообщите об этом сразу. Не стоит давать ложных надежд. Скажите напрямую и предложите покупателю другие продукты, которые могут заменить искомый товар.
Пример магазина DNS: процессор отсутствует в магазине, но покупателю сразу же предлагают купить аналог
Пример магазина DNS: процессор отсутствует в магазине, но покупателю сразу же предлагают купить аналог

Ошибка 5: отсутствие хлебных крошек

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

Исследование Baymard Institute показывает, что от проблем с хлебными крошками страдает 68% интернет-магазинов. Из них 45% — это сайты, где хлебные крошки отображают только предыдущий этап, и не учитывают путь пользователя целиком. Остальные 23% — интернет-магазины, где хлебных крошек вовсе нет.

Решение проблемы невероятное — добавить хлебные крошки. Так пользователь сможет перемещаться по разным категориям товаров, и поиск нужного продукта станет для него гораздо удобнее.

Хлебные крошки в ОНЛАЙН ТРЕЙД.РУ сделаны подробно: в любой момент можно переключиться на нужный раздел
Хлебные крошки в ОНЛАЙН ТРЕЙД.РУ сделаны подробно: в любой момент можно переключиться на нужный раздел

Это первая статья из нашего цикла об ошибках в дизайне интернет-магазинов. Ставьте лайк и подписывайтесь на наш блог, если публикация вам понравилась. Пока мы готовим новые материалы, вы можете узнать больше о дизайне интернет-магазинов из других наших статей:

Подписывайтесь на наш канал в Telegram, чтобы узнавать больше о пользовательском опыте и дизайне. В нём мы делимся исследованиями, анонсируем наши статьи и рассказываем о работе команды.

58
47 комментариев

Следуйте этим советам и ваш интернет-магазин станет неотличим от всех остальных интернет-магазинов, которые следуют этим же советам!

5
Ответить

С одной стороны вы сейчас противоречите закону Якоба.
А с другой стороны — проблемы можно решать разными способами. Поэтому насколько ваши решения будут похожи на решения других интернет-магазинов — решать только вам :)

1
Ответить

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

Ответить

Лет 10 или больше, не вспомню уже, читаю одни и те же статьи под таким заголовком.

4
Ответить

И за 10 лет до сих пор не все умеют правильно базово проектировать интернет-магазины!)

1
Ответить

Статьи на тему "Тренды в дизайне 20хх" все равно впереди планеты всей. В них каждый год рассказывают, что нужно использовать 3d, анимацию и "нежные" пастельные цвета.

Ответить

А что еще писать если уже все важное было написано

Ответить