Мобільна версія сайту: 10 правил з прикладами «до» і «після»
Більшість відвідувачів інтернет-магазину приходять з телефона, і саме там вони вирішують, купувати чи ні. Ось 10 правил мобільної версії сайту з прикладами «до» і «після» та точними розмірами кнопок і шрифтів за рекомендаціями Apple, Google і WCAG.
Чому мобільна версія — не «стиснутий» сайт?
На телефоні людина тисне пальцем, читає на маленькому екрані й часто однією рукою. Те, що зручно на комп'ютері, на телефоні стає дрібним, тісним і незрозумілим. До того ж Google індексує сайти за мобільною версією, тож від неї залежать і пошук, і продажі.
10 правил з прикладами
1. Роби великі кнопки
Користувач тисне пальцем, а не курсором. Apple радить зону натискання щонайменше 44 × 44 pt, Android — 48 × 48 dp, а стандарт доступності WCAG 2.2 задає мінімум 24 × 24 px.
2. Збільш шрифт
Те, що нормально на комп'ютері, на телефоні не прочитати. Основний текст роблять від 16 px, щоб його не доводилося збільшувати; Lighthouse від Google позначав сторінки, де понад 40% тексту дрібніше 12 px.
3. Стеж за відступами
Коли блоки стоять впритул, екран виглядає перевантаженим і дешевим. Повітря має бути більше, ніж здається потрібним.
4. Став кнопки одна під одною
Дві кнопки в ряд на телефоні виходять вузькими. Кнопки на всю ширину, одна під одною, легше натиснути і рідше натискають випадково.
5. Показуй, що можна гортати
Якщо картки гортаються, людина має це бачити: край наступної картки, крапки чи стрілки підказують, що далі є ще.
6. Зменш меню
Шапка не повинна займати пів екрана. Компактна шапка з логотипом і кнопкою меню лишає місце для головного.
7. Ховай другорядне
На телефоні не треба показувати все одразу: акордеони, вкладки й «показати більше» роблять сторінку чистішою. Ховайте, але не видаляйте — Google індексує мобільну версію, і зміст має бути той самий, що на комп'ютері.
8. Роби контакти клікабельними
Телефон і пошта мають відкриватися одним натисканням: для цього є посилання tel: і mailto:. Кнопка «Подзвонити» — ще простіше.
9. Не перевантажуй перший екран
На першому екрані місця мало: один заголовок, коротке пояснення й одна головна дія. Банери, знижки й підписки — нижче.
10. Не копіюй комп'ютерну версію
Мобільна версія — це не зменшений сайт. Блоки переставляють, три колонки перетворюють на одну, зайве прибирають.
У Metriverra видно, як конвертують відвідувачі з телефонів і з комп'ютерів, тож легко перевірити, чи покращення мобільної версії дало продажі.
Коротко
- Кнопки — від 44 × 44 pt (Apple) чи 48 × 48 dp (Android), мінімум WCAG — 24 × 24 px.
- Основний текст — від 16 px, з відступами між блоками.
- Кнопки — на всю ширину, одна під одною; контакти — клікабельні.
- Перший екран — одна головна дія, другорядне — в акордеони.
- Мобільна версія — перебудова, а не стиснутий сайт; зміст той самий, що на комп'ютері.
Джерела: Apple — Human Interface Guidelines: Accessibility · Android Developers — Make apps more accessible · W3C — WCAG 2.2: Target Size (Minimum) · Chrome for Developers — Lighthouse: legible font sizes · MDN — The Anchor element · Google Search Central — Mobile-first indexing
