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

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

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

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

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

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

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

• если на сайте продают много разных товаров, стоит показать как можно больше типов продуктов. Baymard Institute рекомендует показывать не менее 40% типов товаров. Пользователи делают вывод о новом магазине по его ассортименту. Если в магазине одежды показать на главной только обувь, многие подумают, что компания продаёт одни кроссовки и туфли.
• обойдитесь без лишнего креатива. Сделайте интерфейс сайта похожим на другие интернет-магазины. Новые пользователи определяют тип сайта по навигации и оформлению главной страницы, поэтому важно, чтобы дизайн был привычным и узнаваемым.
  

• покажите не только ассортимент, но и дополнительные преимущества, которые предлагает интернет-магазин. Укажите, что доставку можно оформить в день заказа, существует программа лояльности или скидка на первую покупку. Эти факторы повлияют на то, какое впечатление составит покупатель о магазине.
• добавьте отзывы к товарам — на них полагается 95% пользователей при оценке ассортимента интернет-магазина. В интерфейсе сайта стоит отобразить среднюю оценку и количество отзывов о товаре.
• предложите пользователю разные способы подбора товаров. Распределите продукты по категориям, добавьте фильтры в поиске. Так вы акцентируете внимание на разных сценариях использования покупок.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• разбивайте текст на подзаголовки;
• делайте маркированные и нумерованные списки;
• выделяйте важное;
• делайте абзацы короткими;
• пишите просто, без сложных оборотов и непонятных терминов.

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

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

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

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

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

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

• фото товара в контексте и в отдельности от него. Покажите, как выглядит продукт на прозрачном фоне, а затем поместите его в контекст. Так пользователь сможет представить, как выглядит товар сам по себе, и как он выглядит во время использования. Например, магазин сантехники может сфотографировать кран на белом полотне, а затем добавить фото крана в ванной комнате.
• важные для выбора характеристики. Их стоит отобразить в описании карточки, либо показывать при наведении на неё. Например, в магазине матрасов можно показывать габариты и жёсткость, когда пользователь наводит курсор на фото

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

→ Дизайн-прожарка 2.0: что не так с «‎Петровичем‎»?

→ Как в интерфейсе учесть привычки клиента, чтобы привести его к покупке

→ Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах