15 порад щодо мобільного дизайну для збільшення продажів електронної комерції

Чи знаєте ви, що 55% всього трафіку електронної комерції зараз на мобільному пристрої?


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

Але ось проблема: 46% топ-50 роздрібних продавців досі не мають чуйного мобільного сайту. Тож, хоча половина всього торгового трафіку відбувається на мобільному телефоні, половина роздрібних торговців не налаштована на нього. Це означає, що половина покупців щипають і збільшують масштаб і скручують телефон, щоб правильно переглянути веб-сайт.

Тож ми домовились, що чуйний, привабливий мобільний сайт є важливим. Але це лише початок Як і настільний сайт, ви можете налаштувати та оптимізувати свій мобільний сайт, щоб він ще більше збільшував продажі. Ось як:

1. Простота

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

«Простота»

Подивіться, як ETQ відображає свій асортимент взуття на своєму мобільному сайті. Це красиво своєю простотою Вони залишили більшість простору екрану повністю вільним, щоб надати своїм продуктам центральну сцену. Навіть колірну палітру було обрано відповідно до її асортименту. Це надає всьому сайту просто, згуртовано. Хоча екран крихітний, він відчуває себе просторим.

2. Подумайте про великий палець!

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

відстеження великого пальця

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

3. … Особливо великі великі пальці

На додаток до палець “охоплення” слід також розглянути “великий палець”. Усі ми використовували мобільний веб-сайт, на якому вам потрібно натиснути найдрібніше посилання. Це важко і страшно, правда? Загальне правило – вибір більш великих елементів, ніж ви вважаєте за потрібне.

«Великий

Мобільний сайт Hobbycraft – хороший приклад. Перш за все, їхні великі посилання на малюнок роблять це дуже простим для великих пальців. Але погляньте на їхні іконки вгорі (“магазини, рахунок, кошик”). Вони набагато більше, ніж ви зазвичай очікували. Хобікрафт думає про великий палець, і так слід і ви.

4. Навігаційні меню Гамбургера

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

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

Якщо у вас багато пропозицій продуктів і категорій, скористайтеся розширеним меню, щоб зробити це простіше. Не бійтеся використовувати весь простір екрану. Подивіться, як Argos представляє розширене меню нижче.

IMG_3663

5. Виберіть великий шрифт

Невеликий мобільний екран змушує нас довго і важко замислюватися про шрифт, який ми використовуємо. Тут немає місця для невеликих складних шрифтів. Натомість думайте про просто, сміливе та велике. Як правило, шрифт sans-serif чистіший і простіший (тобто Аріель кращий, ніж Times New Roman).

71950dee059b803c4a7caa30dce8f5bf

Майте на увазі, це рішення також змусить вас більш ретельно вибирати свою копію та формулювання. Скористайтеся цією можливістю для спрощення та оптимізації копії. Постарайтеся передати своє повідомлення максимально просто і просто. Зробити це коротко. Зробити це спритно. Це не просто покращить ваш дизайн мобільних пристроїв, але зробить ваш бізнес кращим.

6. Використовуйте “розумний пошук”

Люди ненавидять використовувати крихітні форми пошуку на мобільному пристрої. Це змушує нас збільшувати масштаб, натискати вікно пошуку та вводити за допомогою клавіатури. Помилки – це легко і це може призвести до розладів.

Щоб покращити роботу користувачів, використовуйте вікно “розумного пошуку”. Коли ви натискаєте поле, дизайн повинен автоматично переорієнтовуватися, щоб вікно пошуку заповнювало екран. Потім переконайтеся, що він має передбачуваний пошук, тому користувачеві потрібно лише ввести перші кілька літер.

Це можна побачити в дії на веб-сайті Europcar. Клієнт починає вводити “Norw”, і сайт автоматично пропонує різні відділення Norwich. Простий.

IMG_4331

7. Спростіть форми реєстрації та придбання

Ми багато говоримо про те, щоб зробити вашу реєстрацію та придбати форми максимально просто та швидко. Це ключова частина вашої стратегії дизайну UX. Це також місце, де сайти електронної комерції втрачають до 60% конверсій через ускладнення речей. Якщо вони розпочали процес, замовник вже впевнений. Єдиний спосіб, коли ви втратите продаж чи реєстрацію, – це зробити занадто важкими речі.

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

Подивіться, як Firebox використовує систему числення, щоб показати користувачам, які етапи залишаються в процесі. Ключовий трюк UX в дизайні – це сповіщення користувачів, де вони знаходяться. Як клієнти, ми любимо знати, що ми можемо очікувати, і Firebox робить це вміло.

img_1292-блог-половина

8. Тришаровий максимум

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

  1. Домашня сторінка: Клієнт вибирає “категорію: дівчата”
  2. Клієнт вибирає “підкатегорію: взуття”
  3. Клієнт натискає на сторінку продукту.

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

9. Спростіть повернення на головну сторінку

Коли ваш клієнт має три шари глибиною, завжди надайте їм сміливий і простий спосіб повернутися на головну сторінку. Пам’ятайте, що на мобільному сайті легко відчути себе втраченим, тому дайте користувачам простий спосіб “скинути” і повернутися до початку.

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

img_1304-блог-половина

10. Немає масштабування!

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

Apple-Pinch-to-zoom

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

11. Зверніться до проблеми безпеки

Незважаючи на величезну кількість трафіку на сайти електронної комерції для мобільних пристроїв, все ще існує загальна стурбованість тим, що купувати щось із мобільного сайту не є настільки безпечним, як робочий стіл. Звичайно, немає різниці в безпеці від мобільного до планшетного до настільного. Але дослідження 2013 року показує, що майже половина всіх онлайн-покупців відчуває себе менш захищеними, купуючи щось на смартфоні. Цей страх, ймовірно, вб’є ваші конверсії.

Це просте питання довіри. Ваша робота – зробити так, щоб клієнти відчували себе безпечніше на вашому сайті. На веб-сайті електронної комерції в ідеалі вже повинен бути сертифікат безпеки SSL. Якщо цього немає, придбайте його. Саме це дає вам маленький жовтий замок на панелі інструментів. На своєму мобільному сайті обов’язково відображайте замок SSL якомога помітніше.

зображення18

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

12. Укладання вмісту

Для багатьох людей створення мобільного сайту просто означає вибір “чуйної” теми на WordPress або Shopify або будь-якій платформі, яку ви використовуєте. Хоча це гарний початок, ви хочете приділити пильну увагу тому, як тема автоматично переміщує ваш вміст. Не знаєте, що я маю на увазі? Подивіться на цю схему нижче:

15_contentStacking

Ось як чуйна тема може автоматично складати ваш вміст на планшет (зображення зліва) або смартфон (зображення праворуч). Поміркуйте уважно, які ваші найважливіші частини вмісту, і переконайтеся, що вони правильно розміщені. Наприклад, з правого боку вироби (поле 5 – типи ванн) примусово спускаються вниз по екрану. Вони навіть можуть бути висунуті нижче “складки”.

Експериментуйте зі своїм компонуванням та укладанням вмісту, щоб переконатися, що ваш найважливіший вміст відображається в потрібному місці.

13. Втрачайте будь-який вміст Flash

Flash – це відносно застарілий формат на будь-якому пристрої. (Насправді дизайнери борються за те, щоб її вбити раз і назавжди! Він заковтує ресурси, це повільно, і це ігровий майданчик для хакерів). Хоча це погані новини на робочому столі, на смартфоні чи планшеті ще гірше.

Більшість мобільних пристроїв взагалі не відтворюватимуть флеш-носії. Тож якщо ви розраховуєте на це для демонстрації відео чи продукту, позбудьтесь цього – ваші клієнти не можуть бачити це на мобільному пристрої. Apple заблокувала його років тому, а Android пішов за цим невдовзі.

Крім того, переконайтеся, що ваш веб-сайт сумісний із HTML5 (дізнайтеся більше тут) та використовуйте YouTube для розміщення будь-яких відео.

14. Отримати обмеження!

Багато людей, з якими я говорив, висловлювали розчарування щодо обмежень мобільного сайту. Простий факт такий: ви нічого не можете з цим зробити! Натомість прийняти ці обмеження.

Це змушує вас приймати важливі рішення, які допоможуть вашому бізнесу. Як я можу спростити свій веб-сайт? Як я можу зрозуміти менше слів? Як я можу бути більш точним і переконливим у меншому просторі? Якому з моїх продуктів я повинен надавати пріоритет?

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

15. Приймайте дизайнерські рішення за допомогою Google Analytics

Проблема з дизайном для мобільних пристроїв полягає в тому, що існує так багато пристроїв, які слід врахувати. Чи оптимізуєте ваш макет та дизайн для планшетів iPad чи Android? Ви оптимізуєте для iPhone 5 чи iPhone 6? Або Samsung Galaxy?

Чуйний дизайн означає, що він буде формуватися по-різному для кожного. Ось де Google Analytics може допомогти вам. Остання версія Analytics дозволяє вам бачити, які мобільні пристрої найчастіше відвідують ваш сайт:

мобільні пристрої-аналітика-відстеження

У цьому випадку iPhone є провідним пристроєм – довгим шляхом. Тому має сенс зробити все тестування на iPhone. Оптимізуйте свій верхній пристрій під час оптимізації свого мобільного сайту.

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

Здійснюючи ці зміни та зміни, ви можете вийти на крок попереду конкуренції, використовуючи цей величезний потік трафіку.

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

Kim Martin Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map