Сайт адаптивний. Чому клієнту все одно може бути незручно з телефона

Mobile — це не зменшений desktop

На великому екрані користувач одночасно бачить меню, кілька колонок, частину наступних блоків і контакти.

На смартфоні все перетворюється на послідовність.

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

Тому правило «перебудувати все в одну колонку» вирішує проблему верстки, але не обов’язково вирішує задачу користувача.

1. Що зрозуміло з першого екрана

Перший екран не повинен вміщувати весь сайт.

Але людина має швидко відповісти хоча б на два питання:

Куди я потрапила?
Що тут можна зробити далі?

Для клініки це може бути пошук потрібної послуги або запис. Для меблів — перегляд робіт і перехід до прорахунку. Для компанії з вікон — вибір рішення та замір.

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

2. Що відбувається в момент, коли людина вже зацікавилася

Відвідувач знайшов потрібну послугу. Побачив лікаря. Переглянув роботу. Зрозумів умови.

Що він бачить поруч?

На частині перевірених сайтів усі контакти існували, але були заховані в меню, футері або на окремій сторінці.

На desktop це не завжди відчувається. На телефоні кожен додатковий пошук стає помітнішим.

Тому наступна дія повинна бути близько до моменту, коли виник намір її виконати.

3. Великий каталог може стати нескінченною прокруткою

Це особливо помітно на сайтах меблів, вікон, обладнання та інших бізнесів із великим вибором.

На desktop чотири картки стоять у ряд. На mobile вони йдуть одна за одною. Потім ще чотири. Потім ще десять.

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

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

• передати розміри;
• отримати прорахунок;
• записатися на замір;
• поставити питання.

4. Контент на телефоні потребує іншої ієрархії

На desktop великий текст може виглядати як компактна колонка. На смартфоні це вже кілька екранів.

Так само поводяться довгі списки, таблиці, FAQ, характеристики та банери.

Не потрібно автоматично видаляти інформацію. Краще визначити:

• що потрібно показати одразу;
• що можна розкрити за бажанням;
• що винести на окрему сторінку;
• де доречно повторити наступний крок.

5. Спосіб звернення повинен бути зручним саме з телефона

Телефонний номер — нормальний канал.

Але варто перевірити, що може зробити людина, яка зараз не хоче або не може дзвонити.

У різних проєктах доречними були різні варіанти: коротка форма, Telegram або Viber, онлайн-запис, надсилання фото, передача параметрів для прорахунку.

Універсальної форми немає.

Для меблів фото і розміри можуть бути кориснішими за велике поле «Коментар». Для юридичної послуги — короткий опис ситуації. Для клініки — вибір способу запису.

Тому питання mobile UX звучить так:

що людині найпростіше зробити з телефона в цьому конкретному бізнесі?

6. Перевірте маленькі інтерактивні елементи

На великому моніторі дрібне посилання ще може бути прийнятним.

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

Перевіряйте не тільки видимість, а й те, чи легко натиснути елемент пальцем.

7. Сценарій закінчується не кнопкою Submit

Людина заповнила форму і натиснула «Надіслати».

Що далі?

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

Потрібен ясний фінал: повідомлення отримано, що відбудеться далі, який наступний крок, якщо він є.

Це завершення сценарію так само важливе, як сама кнопка.

Як перевірити mobile-сценарій за 10 хвилин

Візьміть телефон і поставте собі одну конкретну задачу:

«Я хочу зрозуміти послугу, дізнатися наступний крок і звернутися».

Пройдіть шлях як нова людина. Не використовуйте знання власника сайту.

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

Повторіть перевірку на двох-трьох ключових сторінках.

Коли потрібен великий mobile-редизайн

Не кожна проблема виправдовує повну переробку.

Іноді достатньо перенести CTA, змінити порядок блоків, скоротити перший екран, додати швидкий контакт, спростити форму або зробити номер клікабельним.

Велика переробка має сенс, коли одна й та сама проблема повторюється системно.

Тому правильне питання не:

«Чи адаптивний сайт?»

А:

«Чи може людина з телефона без зайвого пошуку виконати дію, заради якої прийшла?»

Подивитися, як ми розкладаємо такі сценарії на окремі кроки, можна у Vectora Lab. Для стоматологічних сайтів цей підхід окремо зібраний на сторінці «Сайти для стоматологій».