Usability для інтернет-магазину

13 Липень, 2014

by Тарас Василишин

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

Як правило, недосвідчені власники щойно спечених інтернет магазинів пускаються у всілякі експерименти з настройками інтерфейсу та функціоналу своїх проектів і в підсумку, одержують зовсім неефективний за своїм юзабіліті проект, обсяги продажів з якого, м’яко кажучи, не дуже надихають. Давайте ж розглянемо все по порядку і проілюструємо механізм здійснення покупки у вигляді чотирьох етапів. 

а. Відвідувач приходить на сайт

• На цьому етапі відбувається наступне:
  • По-перше, відвідувач потрапивши на ваш ресурс, насамперед, звертає увагу на дизайн – так вже влаштована механізм сприйняття інформації в інтернеті.
  • По-друге, відвідувач визначає призначення сайту – це робиться теж суто візуально допомогою прочитання одного-двох пропозицій.
  • По-третє, відвідувач приймає рішення – чи буде він користуватися послугами, які ви йому надаєте чи ні.
• б. Відвідувач залишився на сайтіНа цьому етапі відбувається не менш значущі події:
  • По-перше, відвідувач здійснює знайомство з навігацією вашого інтернет-магазину.
  • По-друге, відбувається остаточне усвідомлення того, наскільки широкий спектр товарів пропонується клієнту. Все це можна об’єднати в один процес – вивчення можливостей вашого інтернет-магазину.
• в. Відвідувач зацікавлений і перейшов до вивчення асортименту. Як правило, на цьому етапі відбувається звернення до каталогу інтернет-магазину або ж перехід за спеціальними посиланнями – наприклад, “топ-продажів”, “знижка” і т.п.
• г. Відвідувач вирішує здійснити покупку.Що тут скажеш – цей етап заключний і якщо проведений замовлення, то ви досягли своєї мети.

Загальні вимоги підвищення юзабіліті сайту

1. Логотип магазину добре помітний і розміщений у верхній частині кожної сторінки, клікабельним
2. На сайті в шапці вказано номер телефону. Номер телефону розташований на одному і тому ж місці на всіх сторінках
3. Номер телефону зазначений з кодом міста
4. Номер телефону видно на будь-якій сторінці протягом перших 3-х секунд перегляду
5. Пошук по сайту знаходиться у верхній частині всіх сторінок сайту і видний протягом перших 3-х секунд перегляду
6. Всі номери в текстах підкреслені
7. Всі номери форму зворотного зв’язку або номер телефону забезпечуються закликами до дії «Зателефонуйте нам», «Поставити запитання»
8. На всьому сайті використовується єдиний принцип вирівнювання тексту
9. Кольори шрифтів і фону контрастні
10. Сторінка 404 помилки виконана в дизайні сайту і містить посилання на основні навігаційні сторінка магазину
11. Будь-яка сторінка сайту повинна містити комерційну пропозицію
12. При мінімальному розмірі екрану (1024 × 768) горизонтальна смуга прокрутки відсутня при перегляді в основних браузерах: IE, Firefox, Oper
13. На сайті є фавікон
14. При наведенні на клікабельні елементи (кнопки) курсор повинен бути у вигляді руки
15. Відстані між абзацами має бути більше, ніж поміжрядкове.
16. Всі тексти повинні легко читатися при масштабування
17. Сайт швидко завантажується

Поліпшення юзабіліті головної сторінки

1. Головна сторінка містить список основних послуг
2. УТП видно відразу протягом перших 3-х секунд перегляду (банер, текст, слоган)
3. Пункти меню оплата, доставка повинні бути помітними з будь-якої точки сторінки
4. Головна сторінка не містить pop-up банерів
5. Головна сторінка не містить ніяких звуків запускаються без дій користувача
6. Детальна контактна інформація (номер телефону, адреса, email, посилання на форму зворотного зв’язку і детальну контактну інформацію)

Оптимізація навігації

1. На головній сторінці виводиться список основних категорій, напрямків
2. Меню каталогу товарів містить не більше 8 пунктів
3. Меню основної навігації продубльовано в нижній частині сайту
4. Поточний пункт меню завжди виділений
5. Посилання в меню на поточний пункт не активна
6. Використовуються «хлібні крихти» для всіх сторінок сайту. Якщо на сайті є сторінки більш 2-УВ

Підвищення юзабіліті картки товару / послуги

1. Містить заголовок назву товару, послуги
2. Містить підзаголовок, на підставі вигоди
3. Існує опис товару, написане людською мовою
4. Присутні технічні характеристики
5. Присутній ціна
6. Кнопка «купити», «замовити», або «покласти в кошик» знаходиться після всіх елементів
7. У разі якщо сторінка довше одного екрана, то кнопка «купити / замовити» використовується двічі або більше разів
8. Є фотографія товару, послуги
9. Якщо фотографія збільшується у спливаючому вікні то, розміри і оформлення всіх вікон однакове
10. На картці товару відсутня відволікаючі елементи (новини, вітрина, реклама)
11. Використовуються вкладки для розділення змісту
12. Показано кілька цін залежно від типу користувача термінів і способів покупки
13. Показані «супутні товари, послуги» з можливістю додати в кошик разом з основним товаром.
14. Вказані способи оплати та доставки (або посилання на сторінки з відповідною інформацією).

Оптимізація кошика і процедури оформлення замовлення

1. Блок кошика знаходиться на всіх сторінках на одному і тому ж місці
2. Блок корзини є одним з яскравих плям і помітний при перших трьох секундах перегляду сайту.
3. При додаванні товару в кошик ПОРУЧ з кнопкою додавання з’являється інформація про те, що товар у кошик доданий
4. При додаванні товару в корзину в блоці «Кошик» відбувається видима зміна
5. При натисканні на посилання «додати в корзину» повторно з’являється інформація про те, що товар вже в кошику і пропозиція «переглянути вміст кошика» або «додати ще один такий товар»
6. При наведенні на блок кошик мишки в підказці виводяться всі товари і їх ціни
7. Сторінка кошика не містить вітрини магазину
8. Сторінка кошика не містить новин
9. Сторінка кошика не містить банерів і будь-який інший реклами
10. Сторінка кошика не містить анімації
11. На сторінці кошика є інформація про доставку
12. На сторінці кошика є інформація про те як поставити запитання або зв’язатися з менеджером
13. Використовується дві кнопки «Оформити замовлення» (оформити замовлення звичайним і незвичайним способом)
14. Оформлення замовлення не переривається, якщо користувач не зареєстрований
15. Для незареєстрованих користувачів потрібно ввести тільки ім’я, телефон, e-mail
16. Пропонується кілька варіантів доставки
17. Пропонується максимум варіантів оплати
18. Пропонуються способи знизити вартість покупки
19. У блоці кошика не використовуються написи «ваша кошик порожній» або «0 товарів на 0 рублів»
20. Після завершення оформлення замовлення пропонується upsell

Підвищення юзабіліті каталог товарів

1. В основному меню каталогу не більше 10-ти пунктів
2. Розділи сформовані за одним принципом оформлені однаково, за різними – по різному.
3. Оформлення посилань у меню на віртуальні розділи «новинки», «бестселери», «розпродаж»
4. На будь-якій сторінці каталогу є товар і пропозиція його купити.
5. Користувач має можливість управляти виведенням
6. Блок товару як мінімум містить:
7. назва товару
8. зображення товару
9. опис товару
10. ціну товару (або кілька цін)
11. значки та іконки акцій і знижок
12. кнопку «купити» або «додати в корзину»
13. Кількість товарів по рядках і колонках не завжди збігається
14. У розділах і підрозділах міститися посилання на популярні розділи

Юзабіліті чек лист процедури реєстрації

1. Користувачеві пояснюється вигода реєстрації поруч з кнопкою “зареєструватися”.
2. процес реєстрації має мінімум два варіанти, один з яких повинен бути гранично коротким (Ім’я, email)
3. при помилку в введенні даних помилковий пункт виділяється кольором
4. при помилку введення даних, форма не перевантажується і введені дані не потрібно вводити повторно.
5. При реєстрації потрібно запитати згоду на отримання листів від магазину

Оптимізація пошуку на сайті

1. Пошук завжди повинен мати результати (якщо нічого не знайдено, то потрібно запропонувати найбільш близькі результати, якщо немає і таких то вивести або найбільш часті результати пошуку, або кілька спеціальних пропозицій)

Оптимізація сторінки контактів

1. Наявність карти з відміченим розташуванням компанії
2. Наявність телефонів з кодом міста
3. Наявність e-mail адреси
4. Зазначено робочі години (час прийому).