UX та конверсія веб-сайту на мобільних пристроях - 10 порад

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

У своєму тексті про передові методи роботи з веб-сайтами я перерахував ряд порад, які допоможуть зробити ваш сайт кращим.

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

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

Тож давайте перейдемо до справи. Дізнайтеся, чому UX та конверсія сайту на мобільних пристроях так тісно пов'язані.

UX та конверсія сайту на мобільних пристроях - 10 порад

1. Насамперед, простота

Суть проблеми на мобільних пристроях полягає в тому, що не всі елементи повної сторінки варто показувати.

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

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

Надайте мобільним користувачам тільки те, що є найбільш актуальним для них на вашому сайті.

2. Пам'ятайте про швидкість

Нікому не подобається надто довго чекати на виконання певних завдань.

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

Ми можемо швидше "втратити" свою увагу на мобільному телефоні, ніж за комп'ютером. Тому зробіть все можливе, щоб ваш сайт завантажувався якнайшвидше. Пам'ятайте, що потрібно переглядати всі типи сторінок, а не лише домашню сторінку.

Можливо, вам буде корисний текст Бартломея Кільян про інструменти тестування швидкості веб-сайту. Там ви знайдете кілька справді корисних послуг.

3. Пам'ятайте про інтуїтивну навігацію

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

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

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

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

4. Дайте окремим елементам "дихати"

Відповідна відстань між елементами – одна з особливостей стилю плоского дизайну. Вони особливо важливі на мобільних пристроях.

Це просто пов'язано з нашим фізичним станом. Деякі люди краще володіють пальцями під час розмови по телефону, а в інших виникають проблеми. Така різноманітність цілком нормальна і зрозуміла. Ось чому так важливо, щоб окремі компоненти могли "дихати".

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

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

5. Обмежити використання спливаючих вікон

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

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

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

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

6. Спростити форми

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

• стилізувати форми, щоб вони радували око
• розділити їх на логічні, послідовні кроки
• упорядкувати порядок появи полів
• вибрати тексти для супроводу

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

7. Правильно визначати розмір тексту та інтервали

У своїй статті про форматування змісту записів блогу я згадав про необхідність подбати про подання текстів на сайті.

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

Тексти просто повинні бути легко читаються. Іноді користувачеві доводиться продиратися через велику кількість слів. У цьому випадку важливі розмір шрифту, інтервал між рядками і тип шрифту.

Вибирайте перевірені рішення - Open Sans, Roboto, Lato (до речі, розроблений поляком Лукашем Дзедзічем) або подібні до них, які надзвичайно розбірливі. Використовуйте великий розмір шрифту, щоб не напружувати очі.

8. Уникайте використання "важкоатлетних" зображень

Цей пункт є уточненням інформації, що міститься в розділі № 2 цього запису.

Розмір сторінки значною мірою залежить від ваги зображень, що надаються користувачам. Це особливо помітно на мобільних пристроях.

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

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

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

9. Зробіть нижній колонтитул корисним

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

Це помилка. Справді, футер не такий помітний, як вищі розділи сайту, але його роль не можна ігнорувати.

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

Тест!

Все увінчано випробуваннями.

Звичайно, іноді ви можете покластися на свою інтуїцію або досвід професіоналів, але ніщо не заважає вам періодично проводити, наприклад, A/B-тести.

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

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

UX та веб-конверсія на мобільних пристроях – навіщо її покращувати?

Все просто – адже у вас є сайт не просто так. Швидше за все, ви продаєте послуги чи товари.

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

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