Alert, warning cart, trolley icon vector image. Can also be used for eCommerce, shopping, business. Suitable for web apps, mobile apps and print media.

5 опасных элементов дизайна в интернет-магазине

Графика, баннеры, внутренняя реклама, акции и другие подобные элементы очень часто используются в интернет-магазинах. Исследование юзабилити, проведенное Baymard Institute, выявило ряд типичных проблем. Слово экспертам.

Разного рода графические элементы, когда они ведут на релевантный контент, могут быть очень полезны для пользователя. Например, разве это плохо, если пользователь узнает о гигантских скидках на ряд товаров?

Однако наше исследование юзабилити ведущих интернет-магазинов показало, что есть ряд настолько «неправильных» графических элементов, что они дезориентируют и раздражают пользователей.

 

Опасность 1: баннеры над списком товаров 

Когда внутренняя реклама других страниц или разделов сайта размещается над списком товаров, это ведет к тому, что пользователи начинают смешивать то, что показано в рекламе, со списком товаров. Это часто ведет к неправильному восприятию.

На примере ниже респондент увидел рекламу мероприятия, связанного с «обивкой и чехлами» в списке товаров, но он воспринял это так, что указанный список продуктов представляет только обивку и чехлы. Это было совсем не то, что он искал, и не соответствовало действительности.

 

01

 

На другом примере ниже респондент отфильтровал список товаров, чтобы выбрать игрушки, подходящие для ребенка 8-11 лет. Над списоком товаров появился баннер «популярные товары» с двумя кнопками: «для девочек» и «для мальчиков».

Респондент решил, что данный элемент является частью фильтра товаров. Однако, когда он кликнул на ссылку «для мальчиков», он был «отправлен» на совсем другую страницу, которая показывала популярные товары для мальчиков любого возраста.

Респондент же ожидал, что ему покажут только популярные товары для мальчиков в возрасте 8-11 лет, потому что ранее он задал категорию «8-11 лет».

 

02

 

В нашем исследовании была масса подобных примеров. Было очевидно, что посетитель сайта, который спешит, очень легко может принять баннер, размещенный над списком товара за какой-то элемент фильтра товаров, который позволит ему уточнить список.

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

 

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

Проблема с баннерами внутри списка товаров в том, что пользователи часто воспринимают такой баннер, как показатель того, что они достигли конца списка. Ведь баннеры с рекламой обычно размещают в конце.

Эта проблема дополнительно усиливается тем, что в современных браузерах дефолтным поведением полосы скроллинга, является «спрятаться при неактивности». И таким образом пользователь теряет еще одну подсказку о том, что он еще далек от конца страницы. Он видит баннер и полагает, что достиг конца страницы.

На примере ниже респондент увидел баннеры «все бренды» и «конкурс в Pinterest» после первого ряда в списке товаров. Поэтому он решил, что весь список товаров состоит только 4-х фотоаппаратов, представленных в первом ряду (хотя их было еще несколько десятков ниже баннера).

 

03

 

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

 

Опасность 3: текстовые ссылки в конце списка товара

Посмотрите на пример ниже. Респондент искал новый адаптер питания для своего ноутбука Lenovo. Когда респондент достиг конца списка товаров, он увидел подчеркнутую ссылку «ноутбуки Lenovo» и подумал, что это какой-то элемент фильтрации, который позволяет уточнить его список товаров, и отобрать только те адаптеры, которые подходят к ноутбукам Lenovo. Буквально в последний момент респондент заметил там надпись «реклама от Google» и разобрался, что это какая-то реклама, а не элемент фильтра. И это не единичный случай, подобное происходило постоянно.

 

04

 

Пользователи имеют тенденцию воспринимать какие-то текстовые ссылки в конце списка товаров как элементы фильтра или ссылки подкатегорий товаров.

Однако такая ошибка восприятия никогда не происходит с графическими баннерами, потому что они воспринимаются пользователями как окончание списка товаров.

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

 

Опасность 4: всплывающие окна при загрузке страниц

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

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

Кроме того, респонденты были весьма раздражены такими всплывающими окнами. И это несмотря на то, что они почти никогда не читали их содержимое. Получается, что они в принципе отрицают возможность, что на таком окне может быть что-то полезное им. Многие респонденты называли такие окна словом «спам», что отражает их уровень негатива к ним.

На примере ниже показано всплывающее окно, которое появилось перед респондентом сразу же после загрузки списка товаров. «Я не знаю, что это такое, и мне наплевать на это, просто продайте мне мой сироп от кашля», — так описал свои ощущения наш респондент, который закрыл это окно в ту же секунду, даже не узнав, что там было.

 

05

 

«Я обычно сразу нажимаю на Х в углу экрана, даже не читая», — говорит другой респондент, когда всплывающее окно на сайте eBags предложило ему подписаться на рассылку.

 

06

 

Надо отметить, что сам по себе такой механизм, как «всплывающее окно» имеет право на жизнь в интернет-магазине. Но важно, чтобы оно не появлялось сразу же в момент загрузки страницы. Это нормально, когда всплывающее окно появляется в ответ на какое-то действие пользователя и когда контент окна связан по смыслу с тем, что делает пользователь.

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

Мы рекомендуем никогда не использовать всплывающие окна, появляющиеся в момент загрузки страницы.

 

Опасность 5: реклама на главной странице

«У них тут очень агрессивная реклама», — сказал наш респондент, попав на главную страницу интернет-магазина Drugstore: «Это очень отвлекает меня».

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

На главной странице Drugstore присутствовал баннер «20% скидка на все». Абсолютное большинство респондентов отреагировало на него негативно, несмотря на то, что в целом этот контент можно признать релевантным (продавец объявляет о скидке) и он несет пользу потребителям (они могут сэкономить 20%).

 

07

 

На главной странице интернет-магазина украшений Blue Nile присутствовало небольшое всплывающее окно с предложением поучаствовать в розыгрыше сертификата на 5000 долларов.

Несмотря на очень «скромный» дизайн и его ничему не мешающее расположение, большинство пользователей очень негативно про него высказались и сразу же его закрывали.

 

08

 

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

В техническом смысле даже трудно провести границу, что является внутренней рекламой, а что – просто графическим представлением доступного товара. Проблема в том, что пользователи «натренированные» годами показа им различных рекламных баннеров, сразу же, инстинктивно, относятся к ним плохо.

В целом наши респонденты воспринимали баннеры, где им сообщалось о каких-то конкурсах и скидках «на все» как рекламу, и относились к ним плохо. В то время как баннеры, показывающие конкретный продукт, товарную категорию или сезонные кампании, воспринимались ими как «подходящий» контент, и это не вызывало негативную реакцию.

На сайте BestBuy можно увидеть положительный пример. Несмотря на то, что реклама смартфонов Samsung доминирует на этой странице, наши респонденты не сочли ее «рекламой», а в целом отнеслись к этому баннеру как к полезному информационному контенту.

 

09

 

 В заключение повторим наши основные рекомендации.

На страницах со списком товаров: не используйте баннеры над списком товаров или внутри него. Не используйте рекламные текстовые ссылки под списком товаров, в этом месте можете использовать баннер, если хотите.

На любых страницах: не используйте окна, которые всплывают сразу после загрузки страницы.

На главной странице: не размещайте графически интенсивные баннеры на лучших местах. Особенно будьте очень осторожны, когда продвигаете через баннеры на главной скидки и конкурсы.

По материалам Baymard Institute

 

About likezilla

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