Як створити працюючий дизайн інтернет-магазину

Коли ми починали тему про те, з чого необхідно починати роботу над проектом інтернет-магазину, ми охопили багато чого: аналітику, юзабіліті, проектування та ін. Єдине, чому було мало приділено увагу, так це безпосередньо самому дизайну.

Мало хто розуміє, що кожна частина дизайну повинна працювати на підвищення конверсії, і це дійсно так. І справа не в тому, що так написано в підручниках з веб-дизайну, а в тому, що це перевірено на особистому досвіді.

По header(у)

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

Шапки сайтів можуть бути різними, але для інтернет-магазинів краще дотримуватися певних стандартів. Що може міститися в шапці інтернет-магазину? Логотип компанії, пошук, контактна інформація, кошик, кнопка зворотного зв'язку, панель авторизації, кнопка Home. Тобто все те, що необхідно користувачу для швидкого доступу до будь-якої сторінки ресурсу.

Тепер давайте по черзі.

Логотип зазвичай розташовується в шапці зліва. Чому так: в більшості своїй люди пишуть зліва направо, а значить і увагу в першу чергу падає на ліву сторону сторінки. Саме тому сама інформація розміщується зліва направо, за ступенем її значущості. Так як логотип є візуальним ідентифікатором бренду, а значить, одним з найважливіших елементів, він розташовується на самому помітному місці.

До створення логотипу необхідно підійти якомога серйозніше: вдалий логотип повинен легко запам'ятовуватися і підсвідомо пов'язувати хороший сервіс з вдалими покупками.

Після логотипу одним із значущих елементів є пошук. Знайти потрібний товар, не перегортаючи численні сторінки каталогу і заощадити час - важлива функція. Пошук повинен бути завжди під рукою, і для нього також виділяється місце в шапці. Якщо по загальному дизайну пошук в шапку не вписується, його розташовують в лівому сайтбарі. Пошук може бути простим і складним. Останній дозволяє конкретизувати товар по категорії, ціною, виробнику та ін. Хороший, доступний пошук дозволяє збільшити конверсію сайту в 1,5-2 рази.

Контактні дані. Багато покупців довіряють консультаціям по телефону. Їм важливо почути голос живої людини, усвідомити, що робота налагоджена. Он-лайн чати в більшості своїй ігноруються користувачами і на традиційне запитання «Чи можу я Вам чимось допомогти?» Натискається кнопка «Ні». Зате дзвінки спрацьовують набагато ефективніше: користувач сам приймає рішення набрати номер, додзвонитися і уточнити всю необхідну інформацію. Номер телефону прописується великим кеглем і розміщується праворуч зверху сторінки. Поруч можна розмістити кнопку «Замовити дзвінок» або «Зворотній дзвінок». У цьому випадку, користувач визначає, в який час оператор може зателефонувати потенційному покупцеві для консультації. Крім цього, дзвінок від оператора економить кошти користувача, що позитивно впливає на репутацію ресурсу.

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

Загальні правила елементів головної сторінки

Розглянувши основні елементи шапки, ми кілька разів зачепили тему розміщення функцій безпосередньо на сторінці сайту. Що повинна містити головна сторінка сайту інтернет-магазину?

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

При розміщенні каталогу на сторінках сайту не варто застосовувати креативність мислення - класика жанру: вертикальне чи горизонтальне розташування зліва - звично й зрозуміло користувачам. Ні в якому разі не можна розміщувати каталог праворуч: давно відомо, що там зазвичай крім нав'язливої ​​реклами немає нічого корисного. Правий сайтбар вважається «сліпою зоною», пам'ятайте про це створюючи інтернет-магазин.

Поведінка відвідувача на сторінці сайту давно піддалася дослідженням, які довели, що після того, як перший погляд впав на верхній лівий кут, туди, де знаходиться логотип компанії, він переміщається в середину сторінки. Саме тут розташовують слайдери, пропозиції про кращі товари, хіти продажів, короткі маркетингові тексти, промо-блоки, які стимулюють продажі вигідних товарів («Акція! Супер-пропозиція! Тільки сьогодні!» Та ін.) Великі якісні зображення, анімовані об'єкти, креативні дизайнерські рішення - тут розміщується все те, що може зацікавити потенційного покупця і переконає залишитися на сайті для подальшої роботи.

Практично всі елементи сторінки ми розглянули. Залишився ще один важливий елемент - підвал (footer). Що міститься в підвалі? Інформація про магазин, варіанти оплати і доставки, контактні дані, FAQ. Тут же допустимо продублювати меню категорій, розмістити форму підписки, іконки соцмереж, платіжних систем та ін. Для створення футера немає строгих правил. Головне пам'ятати, що якщо інформації буде багато, підвал повинен мати достатньо простору. Футером закінчується дослідження користувачем сторінки, а значить, при його створенні не варто нехтувати перевіреними порадами: колір підвалу і тексту повинні контрастувати, а підібрана і розміщена інформація не випадкова.

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

Яндекс.Метрика