7 правил веб-дизайна в e-commerce, актуальных в 2016 году

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

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

Чтобы подкрепить все наблюдения конкретным примерами, взглянем на первую десятку самых популярных интернет-магазинов в украинском сегменте e-commerce по данным исследования Фонда электронной коммерции.
 

Топ 10 онлайн-ритейлеров Украины по данным исследования рынка электронной коммерции Европы в сегменте B2C по итогам 2015 года, проведенному Фондом электронной коммерции при поддержке национальных ассоциаций.

Размещение логотипа и его функция

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

В Eldorado разместили лого в верхнем левом углу страницы. Изображение ведет на главную страницу сайта.

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

В девяти из десяти рассматриваемых нами e-commerce-сайтов логотип размещен в верхнем левом углу, в одном – по центру сверху. Логотипы почти всех интернет-магазинов ведут на главную страницу сайта.

Навигация по продукции

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

Из десяти самых посещаемых интернет-магазинов Украины три разместили навигацию по продукции в левой части страницы и семь – по центру в хедере. Слева навигацию обычно размещают сайты с большим количеством категорий.
 

Allo следует привычному правилу размещения навигации по продукции, поместив каталог категорий товаров слева на странице.

Строка поиска в хедере

Интернет-магазины обязательно должны включать секцию поиска по сайту в хедер страницы. Согласно исследованиям, около 40-60% покупателей предпочитают искать товары именно с помощью строки поиска на сайте.

Большинство из списка популярных украинских интернет-магазинов имеют такую функцию.
 

На сайте Lamoda строка поиска находится в хедере рядом с категориями.

Иконка корзины с ссылкой на чекаут

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

Ссылка на корзину на сайте Mobilluck размещена именно там, где ее и ожидают увидеть покупатели.

Стандартные иконки и символы

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

Comfy использует стандартные иконки для обозначения поиска и корзины на сайте.

Используя иконки и символы, обязательно выбирайте те, которые смогут распознать большинство ваших покупателей.

Разметка страницы товара

Лучшее место для фото товара – это левая часть страницы (для относительно больших экранов) и верх страницы под хедером (для экранов мобильных устройств).

Все просмотренные нами сайты последовали этому правилу.

Самое удачное место для размещения фото товара на странице – ее левая часть.

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

Иконку с корзиной следует поместить справа от фото для больших экранов и прямо под фото для экранов мобильных устройств.

“Иконка-гамбургер” для мобильных устройств

Три горизонтальные линии давно стали классическим символом меню в интернет-пространстве. Свое гастрономическое название символ получил благодаря визуальному сходству с гамбургером. Основная задача этого символа – экономия пространства на экранах небольших мобильных устройств.

Почти все интернет-магазины, рассмотренные нами, использовали “иконку-гамбургер” в своей мобильной версии.

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