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

Сайт не оптимизирован для смартфонов? Вы теряете клиентов и прибыль! Данные исследований портала 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.

1. Главная страница

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

2. Категории/каталог продуктов

Здесь qa специалист тестирует удобство фильтров, верное отображение карточек товаров (цена, модель, характеристики, тарифы и прочее), функции сравнения, поиска, выбора в “список желаний” или отправки товара в корзину.

3. Корзина

Совершение покупки клиентом — то, зачем мы все здесь собрались. 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, чтобы получать еще больше пользы и отличного настроения!