О чем эта статья?
- О том чтобы вы сразу поняли как должен выглядеть ваш интернет-магазин;
- О том как лучше представить товар в зависимости от ассортимента;
- О том как лучше вашему дизайнеру объяснить то что вы хотите увидеть.Ведь разработка дизайна это та стадия, на которой надо мыслить с дизайнером на одной волне, а для этого следует правильно поставить задачу. В этом мы и поможем.
Прошли те времена когда внешний вид интернет-магазина был непривлекательным и отталкивающим. Нынче дизайнерам следует изловчиться чтобы привлечь внимание посетителей интернет-магазина. И не только внешним видом, но и функциональностью, ведь покупателя надо вести к покупке на протяжении всего его пребывания на сайте.
Мы начинаем серию статей, посвященную разработке дизайна интернет-магазина, его графической и интерактивной функциональности, а также, самое главное, удобности для пользователя. Имейте ввиду, что серия статей носит рекомендательный характер и мы не беремся утверждать какой дизайн продает лучше, а какой хуже. Статьи помогут вам подчерпнуть новых идей и решений для ваших проектов.
В этой первой статье цикла мы расскажем какие основные правила создания главной страницы интернет-магазина. От дизайна зависит многое и мы постараемся направить вас в нужное русло.
В этой статье расскажем о следующих темах:
- Что необходимо учесть при разработке главной страницы интернет-магазина;
- Какова должна быть верхняя часть сайта?;
- Левая и правая часть главной страницы. Что разместить?;
- Что должно быть по центру страницы?
- Что размещать в самом низу?
- Выводы.
Статьи, безусловно, полезны, но можно просто написать мне в личные сообщения ВК или директ , и уже на следующий день у вас будет пошаговый индивидуальный план запуска интернет-магазина или продаж на маркетплейсе.
Дизайн интернет-магазина.
Так как “встречают по одежке”, то будет весьма нелишним приодеться как следует и выделиться среди толпы чем-то таким, что привлечет внимание потенциального покупателя. При разработке дизайна обратите внимание на следующие вещи:
- Что вы продаете? Если вы продаете ювелирные изделия, стоит ли делать дизайн в “детском стиле”?
- Ориентируйтесь на целевую аудиторию. Если это молодежь, то стоит сделать сайт поярче. А если целевая аудитория исключительно мужчины, розовые тона явно не подойдут.
- Посмотрите интернет-магазины, которые занимаются продажами схожего товара, а также на сайты ваших поставщиков (как их найти?). Что вы находите общего среди них?
- Вы думаете, что сможете нарисовать дизайн самостоятельно не имея профильного образования? Бросьте эти потуги. Научитесь делегировать.
- Найдите компромисс между дизайном и юзабилити. Ведь главная цель – продать. Сделайте путь покупателя к этой цели максимально простым и ясным, не перегружая его информацией.
Дизайн это вещь весьма аморфная и зачастую тяжело оценить работу того или иного дизайнера по четким критериям кроме как нравится/не нравится. Именно поэтому мы всегда с нашими клиентами четко заполняем брифлист и техническое задание (об этом тут), чтобы работа дизайнера была в четких рамках и не было больших расхождений ожиданий заказчика с полученной работой.
Главное: никогда не стоит дожидаться сразу готового дизайна, крайне редко попадаются профессионалы, которые с нуля нарисуют отличный дизайн, который сразу будет принят заказчиком. Сначала брифлист и ТЗ, потом прототипирование (примеры прототипов) и только потом пошаговая разработка дизайна с промежуточными согласованиями и контролем со всех сторон. Иначе никак. Проверено.
Элементы главной страницы.
Далее расскажем про основные правила создания главной страницы интернет-магазина. Согласитесь, что все уже привыкли что меню обычно слева, а корзина сверху справа. Рассмотрите большинство интернет-магазинов и вы увидите, что они сделаны на основе общепринятых правил.
Шапка сайта.
В шапке сайта следует размещать такие элементы, как:
- Строго слева логотип сайта, нажимая на который покупатель всегда попадет на главную страницу;
- Строго справа корзина интернет-магазина (подробней о ней). Пользователи привыкли, что она именно там;
- Контактные данные (телефон, электронная почта, другие виды связи);
- Горизонтальное меню с условиями оплаты, доставки и другими общими вопросами;
- Строка поиска.
- Краткое описание интернет-магазина, чтобы пользователи смогли понять что у вас продается;
Левый сайдбар (левая часть сайта)
Данное место зарезервировано для:
- Каталога товаров. Только для него и ни для чего другого. Не стоит делать каталог товаров горизонтальным меню в шапке, а в левой части сайта размещать информацию о доставках и прочее. Это ошибка, пользователи не привыкли к этому.
- Можно сделать несколько каталогов одновременно. Например друг под другом сначала основной каталог, затем “По цене от и до” и так далее в зависимости от вашей тематики.
Правый сайдбар (правая часть сайта).
Здесь нет четких правил размещения. Обычно тут размещают акции, новые товары или любую другую полезную информацию. Приведем пример из shoppinglive.ru:
В правой части сайта можно разместить:
- Акции и новости магазина;
- Новые товары;
- Любую другую полезную информацию, которая не будет сильно отвлекать от покупок.
Центральная часть главной страницы.
Когда посетитель открывает главную страницу впервые, обычно взгляд падает именно на центральную часть сайта, а затем на логотип сайта. Следовательно, поймав взгляд покупателя, мы его должны сразу заинтересовать:
- Наиболее популярными товарами;
- Товарами со скидкой;
- Важной текстовой информацией. Хороший пример: “Товар дня: Соковыжималка. 1000 рублей вместо 5000, осталось 3 штуки”. Плохой пример: “Добро пожаловать!”;
- Всем тем, что по вашему мнению сможет заинтересовать пользователя не закрыть страницу сразу, а остаться. Самое главное – в течение 3-х секунд пользователь должен понять что продают там куда он зашел. Казалось бы очевидная вещь, но очень много сайтов, где только через секунд 10 приходит понимание о том что продается.
Нижняя часть сайта.
На примере нижняя часть сайта BabrBabr.ru:
В этой части размещаем:
- Контакты (кстати, как выбрать контактный телефон для интернет-магазина?)
- Ссылки на основные страницы: “О магазине”, “Акции”, “Контакты”, “Вакансии” и так далее;
- Ссылка на сайт разработчика (если оговорено);
- Прочая информация, не перегружающая нижнюю часть сайта.
В итоге.
Главная страница должна иметь примерно следующую компоновку (подробно об этом изображении):
Еще раз общие советы при создании главной страницы интернет-магазина:
- Не перегружайте её информацией и изображениями;
- Пользователь должен сразу понять что вы продаете;
- 3-4 свежих анонса новостей будет достаточно для того, чтобы покупатели поняли, что магазин существует;
- Правильно оформите тег TITLE, так как поисковые машины очень сильно ориентируются на него;
- Следуйте правилам создания интернет-магазинов, не “креативьте”, идя на поводу у дизайнеров;
- Обратитесь к нам и мы поможем вам поставить правильно задачу разработки главной страницы.
Что дальше?
А дальше мы на примерах покажем как можно создать главные страницы интернет-магазина в зависимости от ассортимента или иных параметров, ведь сайт это вещь масштабируемая и при должной сноровке легко управляемая.
Напишите мне в личные сообщения ВК или в директ и уже через 2 недели у вас будет как минимум 3 ниши для интернет-магазина/маркетплейса, поставщики в РФ и Китае, анализ конкурентов и профессионально подготовленная финансовая модель.
Подпишитесь на обновления, чтобы следовать по пути бесплатного создания интернет-магазина вместе с нами.
Виктория #
07.11.2012 в 10:34Уважаемый Андрей! Наконец-то в интернет-море наткнулась на то, что нужно. Огромное спасибо за то, что толлкуете о таких важных для нас вещах.
Созрели для обновления сайта и интернет-магазина.
Андрей Родионов #
07.11.2012 в 10:43Виктория, спасибо за отзыв! Крайне приятно, что мои материалы действительно вам помогают.
Виктория #
07.11.2012 в 10:35Это наш сайт.
Андрей Родионов #
07.11.2012 в 10:43Что именно вы задумали изменить? Я уверен, что я смогу вам помочь.
Антон Пряников #
27.08.2013 в 6:11зачитался даже… спс!)
Станислав #
06.11.2013 в 3:44Отличная статья! То что нужно!
Сергей #
22.01.2015 в 12:24Андрей, по меню. есть впечатление что есть тенденция к размещению МЕНЮ в горизонте под шапкой
Андрей Родионов #
22.01.2015 в 12:34Сергей, не исключаю.
Иногда вообще в двух местах сразу меню ставят.
Все зависит от конкретного ассортимента и кол-ва категорий. Ну и мастерства дизайнера :)
Аноним #
21.08.2017 в 14:07Добрый день. У меня вопрос про главную страницу интернет- магазина. Возможность визуализации ее в 3D формате с категориями. Какова вероятность воплощения идеи?
Андрей Родионов #
22.08.2017 в 14:05Добрый день. А цель? Мне кажется, это только усложнит работу с сайтом.