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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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