Чекліст тестування сайту на мобільному пристрої

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

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

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

• основні функції пристрою (мобільник, планшет та ін.);
• адаптація сайту під розміри екрану пристрою;
• відображення контенту та компонентів;
• стиль сайту;
• анімації;
• користувацький інтерфейс;
• перехід між версіями сайту;
• сповіщення.

Десктопний сайт vs мобільний сайт

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

1. Відсутність мишки та клавіатури на мобільному сайті, а це означає, що перевірки відбуватимуться за допомогою спеціальних жестів. Детальніше про жести можна прочитати у статті нашого блогу. 
2. Відсутність поняття hover-state. 
3. Наявність гамбургер меню на мобільному девайсі, яке ховається у хедері сайту та відкривається після тапу на нього.
4. Особливості коректного відображення верстки.
5. Особливості відображення тексту та його стилів.
6. Форми для вводу інформації та їхні особливості, до уваги – при негативних випадках.
7. Відображення сайту на мобільному девайсі у двох режимах – ландшафтному та портретному.
8. Особливості переходу на іншу сторінку – перегортування та плавність.

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

Тестування верстки мобільного сайту

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

• перевірка адаптації розмірів кнопок, полів тощо та їх розташування;

• перевірка іконок соціальних мереж на сайті;

• перевірка адаптації сторінки – тексту, таблиць на сторінці під розмір екрану мобільного пристрою користувача;

• перевірка випадаючих списків та бургер меню;

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

Тестування форм на мобільному сайті

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

• перевірка розмірів полів;

• перевірка назви, підказки біля полів;

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

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

(Поле активоване, так як і має бути)

• перевірка типу клавіатури;
• перевірка зміни орієнтації клавіатури після повороту пристрою (адже часто форми можуть ховатися під клавіатурою);

(Після зміни режиму, поле зникає за клавіатурою сайту)

• перевірка голосового введення (за умови, якщо воно налаштоване на самому телефоні, наприклад, завчасно вибрана мова вводу);
• перевірка сповіщень та pop-up повідомлень, адже іноді вони затемнюють усю сторінку, і важко знайти саме сповіщення, щоб закрити його, або ж навпаки, воно відсутнє і важко зрозуміти чи був опрацьований запит користувача сайту.

Перевірка блоку контактів на мобільному сайті

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

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

Перевірка фавіконів 

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

• перевірка відображення фавікону – його наявність;

( На скріншоті показаний випадок, де на одному із сайтів відображається лого системи керування сайту, а не самого сайту) 

• перевірка створення окремого ярлика на робочому столі із відповідним лого/фавіконом;

( На скріншоті зображені відразу два баги, один із сайтів підвантажив білу іконку без фавікону, а інший – мініатюрну версію головної сторінки.) 

• перевірка додавання до закладок із відповідним фавіконом;

• перевірка підлаштування відображення фавікону у світлому та темному режимі (фавікон повинен підлаштовуватись під режим і бути контрасним до нього).

Перевірки переходів між розділами, сторінками

• плавність свайпів, переходів на сторінки;
• швидкість завантаження розділів та сторінок;
• функціонування кнопки «Назад» на пристрої (повернення на один крок назад).

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

Інші цікаві перевірки на які варто звернути увагу:

• перевірка наявності посилання на десктопну версію сайту;

• перевірка відображення банерів у повному обсязі;

• перевірка контенту (відео, анімацій, каруселей).

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

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