→ Новые тенденции в Web-дизайне. Список товаров

Новые тенденции в Web-дизайне. Список товаров

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

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

Итак, старая версия списка товаров:

Новая версия:

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

Также, давайте обратим более пристальное внимание на то, как нам представляется сам товар.

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

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

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

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

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

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

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

Для покупки товара, разумеется, его необходимо сначала добавить в корзину. Кнопка, которая отвечает за это в старой версии выглядела абсолютно ненавязчиво, но в данном случае этот факт скорее стоит отнести к недостаткам. Словосочетание «В корзину» ассоциируется у пользователя с этапом покупки, а надпись «Купить» ассоциируется с уже совершенным фактом покупки товара, и дальнейшая регистрация станет лишь её окончательным оформлением. На некоторых других сайтах присутствует надпись «Добавить в корзину», такой вариант предпочтителен, если ввиду специфики вашего магазина, пользователи совершают на нем сразу несколько различных покупок. В таком случае, надпись «Добавить в корзину» будет подсознательно намекать на то, что ограничиваться одним товаром на этом сайте вроде-как не принято.

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


Теги: создать интернет-магазин создать сайт

Читайте также по теме статьи «Новые тенденции в Web-дизайне. Список товаров»:


Люди читают