Обеспечение качества веб-сайта (QA): руководство

Print Friendly, PDF & Email

Почему нет конверсий на сайте? Возможно, он попросту не работает! Ошибки на сайте — убийцы конверсии. Очевидно и просто, но не для всех. Как обеспечить должное качество работы сайта? Необходимо проводить эффективный контроль качества. Самое время познакомиться в деталях с работой QA Engineer.

Сегодня мы поговорим про обеспечение качества сайта с помощью QA. Обсудим разницу между тестированием и обеспечением качества, поговорим об этапах и нюансах в работе QA-инженера. Как всегда, в деталях и с примерами. Приготовьтесь конспектировать пользу!

Что такое гарантия качества сайта?

Гарантия качества сайта — это когда QA-специалист проводит контроль качества работы всех функций веб-ресурса на всех возможных устройствах до того, как пользователь столкнется с возможными проблемами и ошибками. 

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

Важно подчеркнуть один момент — контроль качества нужно проводить до запуска сайта в работу. Однако, как утверждают ведущие QA-специалисты, тестировать сайт на технические ошибки никогда не поздно. Далее мы поговорим о разнице в тестировании и обеспечении качества.

Разница между пользовательским тестированием и обеспечением качества

Часто понятия тестирования и обеспечения качества используются как синонимы. Профессионалы разделяют эти определения, поскольку в них есть существенная разница. Если вы желаете разобраться во всех деталях того, как работает QA-инженер, рекомендуем поспешить зарегистрироваться на курс Тестировщик ПО (QA Engineer).

Пользовательское тестирование

Пользовательское тестирование сайта предполагает взгляд на ресурс со стороны потребителя. Выделим основные свойства пользовательского тестирования (далее — ПТ).

  • ПТ рассматривает, как реальные люди воспринимают и используют ваш сайт или софт.
  • Исследует, с какими ошибками, непониманием и трудностями сталкиваются юзеры во время использования ресурса.
  • Дает понимание, чем отличается восприятие сайта конечным пользователем и намерениями разработчиков веб-страницы.

Обеспечение качества

Обеспечение качества (ОК) веб-страницы рассматривается больше как технический процесс. 

  • ОК изучает непосредственно техническую сторону сайта.
  • QA Engineer ищет баги, глюки, битые ссылки, ошибки в коде, дизайне, верстке.
  • QA-специалист устраняет несоответствия в задумке разработчиков и восприятии сайта пользователем. 

То есть в итоге обеспечение качества делает сайт чистым, доступным и понятным для использования для конечного пользователя.

Основное отличие пользовательского тестирования от обеспечения качества: контроль качества, как правило, проводится QA Engineer до релиза сайта. Пользовательское тестирование с исправлением внешних ошибок возможно уже после запуска веб-страницы в работу.

Желаете получать больше полезного контента и заряд мотивации на работу и личностный рост? Подпишитесь на наш Telegram!

Базовый уровень UX

Что, если объединить подходы пользовательского тестирования и тщательного контроля качества? Получится базовый уровень UX! Детальнее о UX-подходе вы можете узнать в этом полезном материале нашего блога.

UX-подход объединяет в себе качественные данные пользовательского тестирования с количественными данными обеспечения качества. Базовый уровень UX преследует две цели.

  1. Понять, к чему приводят качественные изменения в дизайне сайта.
  2. Проследить преимущества функционала вашего сайта по сравнению с конкурентами.

Директор по исследованиям агентства Speero Бен Лабей отмечает, что добиваться базового уровня UX следует на этапе исследования конверсий. Этапы тестирования сайта мы рассмотрим в этом материале ниже, а пока поговорим о количественных данных контроля качества.

Как получать и обрабатывать данные для исследования уровня UX сайта?

  • Выделите цели сбора данных и критерии успеха.
  • Создайте удаленный опрос-тестирование пользователей без модерации.
  • Соберите данные и проведите оценку качества по каждому параметру, который влияет на обеспечение качества работы страницы.

Регулярная проверка качества и определение уровня UX поможет вам эффективно проследить улучшение сайта для пользователей во временной перспективе.

Почему важна гарантия качества?

Как гласит старая поговорка, все тайное рано или поздно становится явным. Даже если вы сотрудничаете с профессиональным агентством по разработке, вам все равно не избежать каких-либо явных или скрытых ошибок и багов в работе сайта. 

Бизнес-риски

Плохой контроль качества вызывает две глобальные проблемы, связанные с высоким риском.

  1. Нерабочий ресурс подрывает доверие клиентов к вам (как к специалисту).
  2. Ошибки на сайте снижают уровень конверсий и разочаровывают пользователей.

Итак, качественный ​​quality control — это обязательная процедура, которой не избежать. В противном случае вы рискуете всем — своей репутацией и доходом.

Управление репутацией

Почему еще важно обеспечение качества? Ваш сайт будет так или иначе протестирован. Либо ​​QA-специалист проведет контроль качества самостоятельно, либо вместо этого вы получите жалобы от неконтролированного пользовательского тестирования. Скорее всего, вы узнаете о нем, например, в отзывах на странице вашей компании в Google. То есть своевременная проверка качества ограждает от неприятных сюрпризов.

Конкуренция ОС и браузеров

Представитель Box UK Ян Ньюман в своих материалах делает упор на том, что современные браузеры и операционные системы делают множество настроек над базовым HTML в борьбе за привлечение клиентов. Тем же заняты и разработчики различных устройств. То есть, профессиональный QA Engineer должен учитывать все возможные надстройки, форматы и параметры различных ОС, браузеров и устройств, чтобы гарантированно обеспечить лучший контроль качества работы сайта.

По сути, quality assurance — это важная функция каждой компании с рабочим веб-ресурсом, которую важно выполнять на должном уровне.

Основываясь на приведенных выше причинах, по которым столь важен контроль качества работы сайта, выделим преимущества обеспечения качества от QA Engineer.

Преимущества контроля качества от QA Engineer

Профессиональный тестировщик или QA-инженер проводит комплексное обеспечение качества работы сайта. Детальнее работу QA Engineer мы рассмотрим в следующих блоках этого материала. Пока сосредоточимся на основных моментах — преимуществах работы QA-специалиста с сайтами компаний и брендов.

  • Детальная проверка функционала целевых страниц сайта.
  • Комплексный анализ багов и ошибок всего ресурса в коде, дизайне, верстке.
  • Проведение A/B-тестирования.
  • Контроль качества e-mail-рассылки.

В целом, профессиональный QA-инженер:

  • Выявляет и устраняет ошибки на сайте перед его запуском для пользователей.
  • Значительно снижает бизнес-риски и экономит ваши деньги на последующие доработки.
  • Подтверждает и обеспечивает бренду надежную репутацию.
  • Улучшает опыт использования сайта для клиентов (что напрямую влияет на уровень конверсий).
  • Помогает создать доступную, удобную и рабочую страницу для компании с последующей регулярной проверкой качества адекватности ее работы.

Желаете лучше разобраться в профессии QA Engineer? Приглашаем на бесплатный мини-курс ДНК тестировщика ПО!

Этапы тестирования сайта

Обеспечение качества QA требует не только внимательности и профессиональных навыков, но и соблюдения этапов тестирования. QA-инженер не должен пропускать какой-либо важный шаг, чтобы обеспечить эффективную проверку качества работы сайта. Выделим 7 этапов тестирования:

  1. Подготовка
  2. Тестирование функционала
  3. UI-проверка пользовательского интерфейса
  4. UХ-тестирование на удобство сайта для пользователя
  5. Тестинг безопасности веб-ресурса
  6. Чекинг производительности
  7. Повторное тестирование и составление отчетности

Рассмотрим каждый этап подробнее с пошаговым описанием действий, которые выполняет QA-специалист.

Подготовительный этап

При подготовке к тестированию QA Engineer запрашивает у разработчиков всю техническую документацию. Она может включать:

  • Техническое задание на разработку
  • Готовый дизайн-макет сайта
  • Подробное описание функционала

После чего QA-инженер вправе разработать собственный план тестирования с обязательным выполнением всех этапов, описанных ниже.

Тестирование функционала

На этом этапе QA-специалист тестирует все кнопки, ссылки и формы на сайте, то есть полностью проверяет работу функций веб-страницы. К неочевидным видам тестирования функционала также можно отнести:

  • Возможность добавления/удаления данных пользователями.
  • Работу функции регистрации/авторизации юзеров.
  • Исправность работы кнопок и форм покупки товаров на сайте.
  • Сверка размещенного контента с запланированным в макете.
  • Адекватность работы внутренних и внешних ссылок.

Напомним, что функциональное обеспечение качества работы ресурса крайне важно выполнять до его запуска в полноценную работу.

UI-проверка

На этом этапе тестировщик сверяет, насколько соответствует размещение всех элементов сайта на макете и в разработанной версии. Также в этот этап входит чекинг кроссбраузерности и проверка верного отображения сайта на всех возможных устройствах и операционных системах. Остановимся на этом подробнее.

Кросс-девайсный и кроссбраузерный контроль качества работы сайта — важнейшая функция тестировщика. Совмещение этих процессов часто называют перекрестным тестированием.

Как отмечает Крис Эштон из BBC, его команда проводит перекрестное тестирование начиная с популярного браузера на ноутбуке (как показано на скрине выше) и заканчивая самыми различными устройствами и не популярными браузерами.

Для проведения UI-тестирования специалист может использовать специальный софт вроде Google Analytics или BrowserStack. Например, в Google Analytics есть специальный раздел «Аудитория» > «Технологии» > «Браузер и ОС». С помощью этого инструмента QA-специалист может получить приоритетный список версий браузера, которые использует целевая аудитория.

Вы также можете выбрать функцию «Сравнение» в «Аудитория» > «Мобильные устройства» > «Устройства». Здесь Google Analytics покажет сравнение популярности использования устройств одного семейства.

Экспертный совет: сначала следует зафиксировать и устранить проблемы вне зависимости от браузера. Затем тестировать исправленную версию сайта в браузерах по мере убывания популярности их использования у ЦА.

Остановимся также на методах UI-тестирования.

  • Живое тестирование: проверка качества сайта в интерактивной лаборатории с возможностью запуска живых тестов в сотнях комбинаций браузеров и операционных систем.
  • Реальное тестирование: подразумевает отказ от симуляторов и тесты на реальных устройствах в реальных браузерах. Как правило, может показать более эффективные результаты.
  • Облачное тестирование: автоматизированные тесты в тысячах браузеров с отлаженной сетевой инфраструктурой.
  • Локальное тестирование: проверка ресурса перед релизом в режиме брандмауэра или рабочего стола.
  • Автоматические скриншоты: проверка дизайна сайта по автоматическим скриншотам в различных браузерах.

Качественное UI-тестирование позволит вам с уверенностью запустить сайт в работу или исправить уже рабочий сайт перед запуском рекламы. Напомним, что вы всегда можете освоить профессию тестировщика во всех нюансах на курсе Тестировщик ПО (QA Engineer).

UХ-тестирование 

Тест на юзабилити (удобство страницы) для пользователя предполагает основной момент — проверку поиска на сайте. QA должен убедиться, что пользователь легко ориентируется в структуре веб-ресурса, быстро находит необходимый контент и может запросто совершить целевое действие со всеми доступными инструкциями и подсказками.

Тестинг безопасности

Хакерские атаки, вирусы или происки конкурентов — все это может повлиять на безопасность вашего сайта для пользователей. Юзерам всегда важно понимать, что сайт достаточно защищен от слива их персональных данных. 

Какие самые опасные современные атаки? Мы выяснили у наших QA, что это SQL-инъекции — внедрение вредоносного кода на сайт с целью получения доступа к базе данных. Профессиональныйтестировщик знает, как эффективно проверить сайт на уровень защиты от подобных атак.

Чекинг производительности

Какова максимальная нагрузка посещаемости у вашего сайта? Насколько быстро загружаются страницы с «тяжелым» контентом — интерактивами, видео, объемными текстами, тестами и прочим? Все это выясняет и улучшает тестировщик во время чекинга производительности.

На этом этапе, как правило, специалист подает подробный отчет по всем найденным ошибкам для разработчиков. Те, в свою очередь, исправляют их и инициируют повторную проверку обеспечения качества.

Повторное тестирование и составление отчетности

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

На этом этапе QA-инженер составляет конечный полный отчет о процессе проверки качества сайта. Такой важный документ следует беречь, поскольку он отображает историю важных изменений на странице, полезную для разработчиков и специалистов по поддержке работы ресурса.

На что обращать внимание при тестировании обеспечения качества

Как всегда предлагаем еще больше пользы для наших регулярных читателей (спасибо, что вы с нами). Мы уже обсудили с вами все этапы тестирования. Давайте повторим еще раз и выделим основные параметры обеспечения качества. 

Чек-лист, на что обращать внимание при тестировании ресурса:

  • Скорость загрузки страниц
  • Сообщения об ошибках и наличие инструкций
  • Дубликаты контента
  • Качество и доступность изображений
  • Простота и удобство форм
  • Работа размещенных ссылок
  • Стиль и размеры шрифтов
  • Безопасность сайта
  • Техническая проверка форм регистрации
  • Тестирование email-рассылки
  • Баги и сбои

В качестве бонус-контента предлагаем также экспертное мнение и ценные советы по тестированию сайта на мобильных устройствах от Талии Вульф из GetUplift.co

  • Убедитесь, что при попытке набора текста в мобильной версии сайта открывается верная клавиатура (числовая — для заполнения формы с номером телефона или кредитной карты; текстовая — для заполнения имени и email).
  • Проверяйте скорость загрузки. У пользователей смартфонов, как правило, высокие ожидания от скорости работы вашего сайта, поэтому тяжелые изображения для мобильной версии страницы следует обязательно заменять на легкие форматы.
  • Тестируйте возможность сохранения данных и продолжение работы пользователей с сайтом с различных девайсов. До 65% всех онлайн-покупок начинаются с мобильных гаджетов и продолжаются на других устройствах! Например, можно рекомендовать добавить кнопку «Продолжить позже» или просто «Сохранить». Также полезно отправлять автоматический email с напоминанием и ссылкой, по которой пользователь может продолжить оформлять покупки.
  • Обратите внимание на сообщения об ошибках. В мобильной версии не так много места на кране для развернутой инструкции. Лучше всего, если вы уведомите пользователя о возможной ошибке (например, о неверно введенном промокоде) в небольшой яркой форме с кратким описание (буквально в пару слов).
  • Проверяйте отображение видео! Существует ли что-то более раздражающее, чем уведомление, что видео не может быть отображено в мобильной версии сайта? Не забывайте адаптировать весь контент для корректного отображения на мобильных устройствах.

Основываясь на всех данных о процессе тестирования, важно отметить: команды UX и QA должны тесно сотрудничать. Изначальное качественное выполнение дизайна и разработки сайта позволяет упростить работу QA. Также и профессиональная работа QA обеспечивает качество работы для UX-команды.

Чем занимается QA-инженер

Итак, мы уже много чего выяснили о работе QA-инженера. Давайте вкратце подытожим, какие функции выполняет тестировщик.

  • Специалист оценивает объем тестирования вашего сайта.
  • Проверяет адекватность спецификаций и бизнес-требований для разработчиков.
  • Тестирует проект или отдельные оговоренные функции на сайте.
  • Выполняет комплексный процесс поэтапного тестирования до и после релиза ресурса.
  • Создает отчеты и конечную документацию о процессах и результатах тестирования.

Выходит, что QA Engineer — это важный член любого проекта по запуску онлайн-бизнеса. Пожалуй, это основной посыл данного материала! 

Многие опасаются, что развитие современных технологий вскоре может сменить профессию тестировщика на использование автоматизированного софта. Однако поспешим вас успокоить. Креативный человеческий фактор всегда имеет решающую роль в проверке качества сайта, ведь тестировщик проверяет продукт, созданный людьми для людей.

Заключение

Обеспечение качества работы веб-ресурса посредством привлечения QA специалистов — важная опция для бизнеса. Профессиональное поэтапное тестирование сайта позволяет улучшить пользовательский опыт целевой аудитории, обеспечить положительную репутацию странице и повысить уровень конверсий.

Сомневаетесь в своих возможностях? Развейте сомнения на бесплатном мини-курсе ДНК тестировщика ПО.

Хотите сразу комплексно освоить профессию? Регистрируйтесь на курс Тестировщик ПО (QA Engineer).

Надеемся, материал был для вас полезен. Поделитесь этой ценной статьей с друзьями и подписчиками, а также не забывайте следить за нами в Telegram!