Чек-лист: як тестувати мобільну версію сайту (робота QA Engineer)

Ваш сайт не оптимізований для смартфонів? Ви втрачаєте клієнтів та прибуток! Дані досліджень порталу Statista свідчать, що не менше 73% користувачів мережі роблять покупки за допомогою смартфона. Мобільна версія сайту має бути адаптованою до екранів різних пристроїв, зрозумілою у використанні та доступною для цільової аудиторії.

Як протестувати мобільну версію сайту? Ми розглянули всі нюанси роботи qa інженера і склали зручний чек-лист! Читайте далі, як тестувати версію сайту для планшетів і смартфонів, які методи тестування застосовує qa спеціаліст, а також бонусний корисний контент для освоєння професії qa engineer від провідних професіоналів.

Хто і навіщо тестує мобільну версію сайту

Як кажуть сучасні фахівці qa, що це “вина” нового покоління та розвитку технологій. Розглянемо докладно.

Ще якихось 5-7 років тому електронна комерція була зосереджена на настільних інтерфейсах. Покоління міленіалів (людей, народжених у 1981-1996 роках) мали звичку користувача переглядати онлайн магазини з комп’ютерів і ноутбуків (особливо, в робочий час). Тому продавці здебільшого нехтували мобільними версіями сайтів.

Бачили список сучасних затребуваних професій у 2023? Одну з провідних ролей у ньому займає qa інженер або тестувальник, і не просто так!

Нове покоління, що подорослішало, звикло використовувати смартфони. У мобільному пристрої зараз зосереджені всі корисні функції: можливість навчання, читання, прослуховування музики, здійснення покупок і навіть заробітку. Тому сьогодні робота qa engineer більш зосереджена на тестуванні мобільних версій сайтів електронної комерції. Далі поговоримо про те, яким має бути сучасний мобільний сайт, щоб залучити клієнтів та отримувати бажані конверсії.

Вимоги до сучасних мобільних сайтів

Сінді Шаффстол, засновниця маркетингової компанії Spider Trainers, вдало зауважила: «Мобільні пристрої – це не майбутнє, це сьогодення. Зустрічайте своїх клієнтів у тому середовищі, яке вони обирають, а не там, де вам зручно».

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

Минулорічні дані Statista свідчать, що для більш ніж 60% користувачів пріоритетним вважається юзабіліті, тобто зручність сайту.

Виділимо основні вимоги до сучасних мобільних сайтів.

• Автономний мобільний сайт

Мобільна версія вашого магазину має бути автономною, адаптованою та оптимізованою. Час відходити від ранньої стратегії використання m. в домені сайту — коли клієнт спочатку потрапляє на звичайну версію, а потім перенаправляється на мобільний домен.

• Адаптивна верстка

Веб-дизайн сайту для мобільної версії має бути адаптивним для різних пристроїв, що передбачає відправлення різних кодів HTML та CSS для користувачів, що працюють у різних браузерах та з різним розміром екрану.

• Зручний дизайн

Чуйний та дружній дизайн мобільної версії сайту – основа залучення покупців. Користувачам має бути зручно і комфортно використовувати веб-сайт. Зрозумілий функціонал із яскравими тригерами та кнопками — ось чого прагнуть сучасні компанії.

• Прогресивні веб-додатки

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

Кожен бізнес може вибирати власну стратегію роботи з новим поколінням користувачів, але дотримуватись усіх необхідних умов конкурентності мобільного сайту — запорука виживання на сучасному ринку. Ось чому сучасні компанії полюють за кращими qa інженерами! Нагадаємо, що комплексно освоїти професію можна на нашому курсі Тестувальник ПЗ з допомогою працевлаштування.

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

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

Адаптивність: дисплеї, браузери, пристрої

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

• Відображення елементів дизайну, функціоналу та контенту — тут qa спеціаліст тестує наскільки зручно та вірно відображаються текст, медіа та картинки у всіх браузерах, на різних екранах та пристроях.
• Чуйність на кліки та торкання — в цьому блоці перевірки qa інженер повинен переконатися, що всі кнопки та посилання в мобільній версії сайту реагують на кліки або дотику до сенсорного дисплея.
• Нюанси управління та графіки — тут qa engineer зіставляє з основним макетом сайту та технічним завданням розробників вірність відображення всіх графічних елементів, кольорів, градієнтів, меж екрана та навігації.

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

Зазначимо, що іноді ТЗ для роботи qa engineer для quality control або quality assurance може відрізнятись залежно від моделі бізнесу (B2B або B2C). Стратегія роботи з різними видами споживачів (компаніями чи приватними клієнтами) може мати відмінності у вимогах до акцентів роботи мобільної версії сайту.

Функціонал

Як правило, на цьому етапі qa engineer звіряє всі параметри функціоналу сайту на десктопній та мобільній версії. Основний орієнтир – структура сайту, описана в технічному завданні на розробку.

Кожна опція на сайті повинна виконувати свою функцію — відкривати форму, переходити на потрібну сторінку, відправляти в кошик та інше. Головна функція, яку потрібно протестувати у мобільній версії сайту, — оформлення замовлення покупцями.

Розглянемо три важливі елементи мобільного сайту для тестування QA.

• Головна сторінка

Перше, що бачить клієнт при переході на сайт, — головна або домашня сторінка. Тут має відображатися інформація про продукти, послуги, підтримку клієнтів та заклик до дії з цільовою кнопкою. Також на цій сторінці важливо надати доступ користувачам до детальної інформації про компанію (сторінку “Про нас”), карту сайту (зручну навігацію), політику конфіденційності та контакти.

• Категорії/каталог продуктів

Тут qa спеціаліст тестує зручність фільтрів, вірне відображення карток товарів (ціна, модель, характеристики, тарифи та інше), функції порівняння, пошуку, вибору “список бажань” або відправки товару в кошик.

• Кошик

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

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

Пройдіть наш безкоштовний міні-курс ДНК тестувальника ПЗ та дізнайтеся, як отримати популярну професію тестувальника та почати заробляти 40 000 грн на місяць!

Продуктивність

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

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

Тестування продуктивності мобільної версії сайту включає такі параметри:

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

Мета тестування – підвищити продуктивність мобільного сайту до максимуму. У цьому qa інженерам допомагають тести навантаження. Чим швидше завантажуватимуться всі елементи сторінок у різних браузерах і на всіляких пристроях, тим краще.

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

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

Оптимізація контенту

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

1. Гнучка композиція елементів

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

2. Адаптивний стиль

Можливість відображення мобільного сайту в різній стилістиці за однією URL-адресою з адаптацією під різні екрани. Сучасна технологія медіа-запитів без використання m. домену.

3. Гнучкість розмірів медіаконтенту

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

Отже, важлива функція qa спеціаліста — перевірка оптимізації та адаптивності контенту для різних пристроїв, операційних систем і браузерів.

Де отримати ще більшу користь від Genius.Space? Підпишіться на наш канал у Telegram!

Мобільні інструменти для роботи QA спеціаліста

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

Найочевидніший і доступніший інструмент – Google Mobile-Friendly Test Tool. Тут ви можете задати будь-яку адресу сайту та подивитися, наскільки його оптимізовано для перегляду та роботи на мобільних пристроях.

Як приклад, подивимося на результат перевірки сайту Genius.Space.

Схоже, наші qa фахівці успішно справляються зі своєю роботою!

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

Ще один доступний та простий інструмент для швидкого тестування мобільних сайтів – Browser Stack.

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

Досвідченим тестувальникам також можуть бути знайомі інструменти як LambdaTest або GhostLab. Ці сервіси дозволяють запускати тести мобільної версії сайту з імітацією роботи в 200 різних веб-браузерах і на сотнях різноманітних мобільних пристроях.

Існує ще безліч інструментів та методів тестування мобільних версій сайту. Ознайомитися з ними докладніше і зрозуміти, наскільки цікава для вас професія qa спеціаліста, можна на міні-курсі ДНК тестувальника ПЗ.

Тестування веб-додатків

Як бонусний контент пропонуємо підняти планку і розглянути тестування веб-додатків! Відразу зазначимо, що тут навички qa engineer мають бути прокачаними на порядок краще, ніж для роботи з браузерними версіями сайтів. Причини та деталі розглянемо нижче.

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

Сумісність із операційною системою

Сьогодні виробники мобільних пристроїв, переважно, використовують дві операційні системи — Android та iOS. Також існують пристрої на ChromeOS. На кожній із цих ОС випущено сотні моделей гаджетів з різними параметрами екранів. Завдання qa спеціаліста — протестувати програмну та апаратну частину сумісності веб-додатку для електронної комерції з різними операційними системами (включаючи надбудови виробників).

Сумісність з різним ПЗ

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

Доступність функцій на різних пристроях

Ваша програма може вимагати для роботи підключення до Wi-Fi, Bluetooth або камери? QA інженер повинен перевірити, наскільки коректно працюватиме програма з подібними важливими функціями на різних мобільних пристроях.

Тестування ігор

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

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

Мотивація стати QA інженером у 2023

А ось і ще один бонус-контент. Ми підготували для вас список крутих статистичних фактів, які підтверджують популярність професії “qa спеціаліст” прямо зараз!

• Ринок тестування у всьому світі зросте більш ніж на 6% у 2023 році

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

• Щодня в мережі з’являється понад 250 тис. нових сайтів

Тільки уявіть, скільки роботи для QA! Звичайно, багато з цих сайтів можуть бути одноденними, проте

• 77% тестувальників працює над тестуванням веб-версій сайтів

Подумайте про те, як ще незаповненою залишається ніша тестувальників веб-додатків!

• Понад 60% користувачів відзначають важливість зручності сайту для здійснення покупок.

Спрямованість сучасного дизайну на UX-підхід, а також якісне тестування – запорука залучення конверсій на сайт.

• 79% користувачів йдуть з сайту за наявності грубих помилок та неробочих елементів

Ще один статистичний факт на користь зростання популярності професії qa інженера у 2023!

Лише сьогодні в Україні є 72 відкриті вакансії для тестувальників на популярному сайті з пошуку працевлаштування. Погляньмо на ще один пошук.

86 доступних вакансій на запит “qa тестувальник”! А що говорити про можливість віддаленої роботи по всьому світу?

Слід також зазначити, що рівень заробітної плати стабільно перевищує 40 000 гривень на місяць (для фахівців-початківців). За даними порталу DOU.ua, середня оплата праці тестувальника зберігається у розмірі 2000 USD. Багато вакансіях фігурує рівень ЗП в 3000-4000 USD.

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

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

Як бачимо, qa інженер — затребувана і високооплачувана робота. Відмінна нагода подумати про освоєння нової професії у 2023!

Підіб’ємо підсумки

Тестування мобільної версії сайту передбачає перевірку багатьох параметрів: адаптивності, сумісності, продуктивності, функціоналу. Є свої нюанси і у тестуванні веб-додатків. Контроль якості роботи мобільних сайтів за допомогою qa фахівців — важлива частина роботи успішного бізнесу як в Україні, так і по всьому світу.

Пропонуємо вам познайомитися з професією qa інженер ближче на нашому міні-курсі ДНК тестувальника ПЗ!

Бажаєте одразу комплексно освоїти професію? Поспішайте зареєструватися на повноцінний курс Тестувальник ПЗ з допомогою працевлаштування.

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