Про те, що ваш сайт має адекватно відображатися на мобільних пристроях, не сказав лише ледачий. Та ось тільки адекватно - це як? Сьогодні ми розглянемо особливості юзабіліті мобільних сайтів і дамо рекомендації щодо поліпшення їхньої зручності для відвідувачів. Отже, 5 принципів юзабіліті для мобільних пристроїв:
1 Мінімалізм
У зв'язку з обмеженістю області відображення інформації (досить порівняти монітор з екраном мобільного), той контент, який ви звикли розміщувати на сайтах, має бути зведений до мінімуму.
Якщо ви просто зменшите сторінку сайту до масштабу екрана телефона, результату це не дасть. Мобільні користувачі сканують текст і картинки, і якщо за щось увага зачепиться - лише тоді перейдуть до подробиць. Як же вони зможуть зачепитися, якщо всі букви і значки настільки дрібні, що важко їх роздивитися?
N.B. Зменшіть кількість контенту і збільште його масштаб. Тобто, замість 5-7 фотографій розмістіть одну. Замість 1500 символів тексту розмістіть 150. Взагалі, ідеальна посадкова сторінка для мобільного користувача - заголовок із заманливою пропозицією, акцент на вигоди, яскрава картинка і кнопка заклику до дії.
2 У стовпчик
Не змушуйте користувача використовувати прокрутку, щоб дочитати речення, раз у раз зменшувати і збільшувати текст. Використовуйте верстку у форматі стовпчика. Звісно, не забувайте про перший пункт - збільште масштаб контенту, скоротивши при цьому його обсяг.
N.B. Позбавтеся від усієї зайвої інформації з боків (банери, додаткові блоки). Навігаційне меню також можна заховати, зробивши його таким, що викликається при кліці на певну іконку, наприклад.
3 Акцент тільки на одному
Щоб не розсіювати увагу користувача, робіть у рамках видимої області сайту тільки один акцент. Наприклад, для інтернет-магазинів на сторінці товару доведеться відмовитися від додаткових кнопок (поділитися в соц. мережах, подивитися схожі тощо), залишивши тільки один заклик до дії - покласти до кошика.
N.B. Визначте для кожної сторінки один ключовий акцент, одне важливе повідомлення, поставте одне завдання, яке вони мають вирішити. Тут як ніколи актуальне старе добре прислів'я про трьох зайців.
4 Ведіть користувача
Покрокова інструкція про те, що і коли потрібно зробити користувачеві - для mobile дуже важлива і корисна. Ведіть "за руку" клієнта до покупки, до оформлення заявки, до реєстрації - візуалізуйте алгоритм дій, перетворивши його на інтерактивну подорож з підказками і можливістю перескочити непотрібний крок.
5 Пам'ятайте про пальчики
Твердження про те, що в інтернеті нічого не можна помацати, поступово втрачає свій сенс. Користуючись мобільними, ми, можна сказати, торкаємося товарів, які нам пропонує інтернет-магазин, або навіть послуг (приміром, можна торкнутися фотографій Таїланду в туристичному агентстві). Тому важливо не просто розмістити на сайті красиві фотографії та кнопки, а зробити їх такими, щоб їх захотілося помацати. А ще краще, дати можливість покрутити товар на всі боки, всього лише одним дотиком пальця.
N.B. Пам'ятайте про те, що більшість користувачів, як показують дослідження, "юзають" мобільний одним великим пальцем. А це означає, що тільки 1/3 екрана добре "тапабельна". Змістіть інформацію в цю область і ефективність вашого сайту зросте.
І наостанок, список важливих дрібниць:
- шрифти мають бути великими
- кнопки мають бути розміром "під пальчик"
- використовуйте прості форми (2-3 поля)
- адекватний розмір полів для заповнення (який не потребує масштабування)
- швидка швидкість загурзкі
- можливість здійснити дзвінок "в один клік"
Усі ці принципи важливо враховувати як в адаптивному веб-дизайні, так і в розробці мобільного додатку.
