ru:https://highload.today/blogs/kak-testirovat-dizajn-sajta/ ua:https://highload.today/uk/blogs/kak-testirovat-dizajn-sajta/
logo
Тестирование      13/12/2021

Как тестировать дизайн сайта: чек-листы, которыми я пользуюсь

Владислав Фарисей BLOG

QA Engineer в Prozorro

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

Как же мы в Prozorro тестируем наш сайт или его доработки? Давайте разберем пошагово и посмотрим весь флоу.

Перед тем как тестировать сайт, нужно сначала протестировать макеты сайта. 

Макет сайта — это эскиз, на котором изображена будущая страница. От того, насколько качественно проработан макет, зависит общее восприятие информации на сайте. При работе над макетом в графическом редакторе у дизайнера нет ограничений.

«Я думаю, нам нужно это протестировать»

«Я думаю, нам нужно это протестировать»

Где может быть создан макет

Есть множество ресурсов для создания макетов, но, пожалуй, самый популярный для дизайнера — это Figma.

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

Зачем тестировать дизайн-макеты сайта

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

Примеры коммуникативных задач нашего портала Prozorro:

  • показать, что компания работает в сфере госзакупок;
  • показать основные направления в сфере госзакупок;
  • показать партнеров, с которыми мы сотрудничаем (тендерные площадки);
  • Онлайн-курс "Створення особистого бренду" від Skvot.
    Прокачайте особистий бренд для підсилення власного бізнесу, підвищення продажів та впізнаваність на ринку.
    Дізнатись більше про програму курсу і досвід лектора
  • показать прозрачность в сфере госзакупок.

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

  • тестирование функциональности;
  • проверка юзабилити сайта (удобство использования);
  • тест производительности;
  • проверка на безопасность;
  • тестинг интерфейса (UIUser Interface. Когда нужно убедиться, что все компоненты системы правильно взаимодействуют друг с другом. Testing). 

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

Давайте на примере посмотрим на блок функционального тестирования и составим чек-лист

Онлайн-курс "С++ для GameDev" від robot_dreams.
Навчіться кодити на C++ з нуля, опануйте принципи обʼєктно-орієнтованого програмування, ключові бібліотеки та інструменти.Створюйте десктопні та мобільні ігри. Розвивайтеся в геймдеві.
Детальніше
  • Проверка правильности работы главных функций ресурса.
  • Обнаружение ссылок, ведущих к одной странице.
  • Корректность внутренних ссылок.
  • Проверка пользовательских форм. Сюда входят: добавление комментарии в блог, обратная связь и прочее.
  • Проверка полей и страниц «Авторизация», «Регистрация».
  • Корректность работы «Поиск ресурса» (его открытие на странице и открытие всех его атрибутов).
  • Проверка добавление, удаление и редактирование данных пользователей, товаров и заказов.
  • Сверка контента, имеющегося на сайте с тем, что представил заказчик.

Поговорим о юзабилити-тестировании

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

Онлайн курс DevOps для сисадминов від від Web Academy.
Курс допоможе закласти в собі принципи DevOps, прагнення до автоматизації, навчить писати інфраструктурний код і покаже, що помилятися можна безпечно. Знижка у розмірі 10% доступна при використанні промокоду "ITC".
Дійзнайтеся більше

Основная цель юзабилити-тестирования:

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

Чек-лист тестирования сайта на юзабилити:

  1. Навигационное тестирование. Здесь специалист проверяет, все ли страницы, кнопки и поля понятны пользователю. Есть ли доступ к главной странице и меню со всех остальных страниц. 
  2. Тестирование контента. Специалист проверяет наличие грамматических ошибок, насколько контент информативный, имеют ли картинки и видео нужные размеры и качество, все ли заголовки проставлены корректно.
  3. Удобство пользования. Тестировщик оценивает, насколько понятна структура веб-приложения и есть ли лишние компоненты на ресурсе (проверяются все страницы).
  4. Онлайн-курс "QA Automation" від robot_dreams.
    Це 70% практики, 30% теорії та проєкт у портфоліо.Навчіться запускати перевірку сотень опцій одночасно, натиснувши лише одну кнопку.
    Детальніше про курс

UI Testing: тест пользовательского интерфейса

Не стоит путать тестирование интерфейса с проверкой юзабилити. Это два разных этапа общего теста.

UI-тест проверяет соответствие графического интерфейса сайта.

Чек-лист тестирования интерфейса:

  • проверка на соответствие всем стандартам графических интерфейсов;
  • тестирование с различными разрешениями экрана;
  • проверка совместимости со всеми браузерами и их версиями (кроссбраузерность);
  • тестирование интерфейса на смартфонах, кпп, планшетах;
  • локализованное тестирование: точность перевода, проверка длины названий и прочее.

Регрессионное тестирование 

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

Курс Project Manager від Powercode academy.
Онлайн-курс Project Manager. З нуля за 3,5 місяці до нової позиції Без знання коду, англійської та стресу.
Зарееструватися

Для понимания приведем пример: ваша компания создала приложение «Фонарик». У него всего две функции: «включить» и «выключить». Ваши специалисты провели тестирование функциональности и убедились, все работает корректно. Можно не беспокоиться. Спустя время ваша команда добавляет еще одну функцию – «включение фонарика при встряхивании смартфоном». Тестировщику уже необходимо проверить не только новую функцию, но и предыдущие две (включение/выключение). Вдруг нововведение затронуло их? Это яркий и понятный пример регрессионного тестирования в процессе разработки ПО.

Тестирование покажет, затронули новые фичи старый функционал или нет

Тестирование покажет, затронули новые фичи старый функционал или нет

Чек-лист регрессионного тестирования:

  1. Провести анализ внесенных изменений, поиск областей, которые могли быть затронуты.
  2. Правильное составление набора текст-кейсов для тестирования.
  3. Проведение регрессионного тестирования.
  4. Составление отчета о дефектах, если таковые имеются.
  5. Устранение найденных дефектов и их верификация.
  6. Проведение второго круга регрессионного тестирования (проводится до момента полного исключения багов).

Подводим итоги

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

Курс Front-end с нуля від Web Academy.
Почніть кар'єру веб-розробника через декілька місяців інтенсивної підготовки у колі однодумців та підтримки тренера. Знижка у розмірі 10% доступна при використанні промокоду "ITC". .
Реєстрація на курс

Перед тем, как приступить к проверке, обсудите все важные детали с командой. Главное использовать обширный подход с применением различных техник, анализа и набора методик тест-дизайна. 

Читайте также: Как я тестирую веб: топ-5 инструментов для QA Engineer

If you have found a spelling error, please, notify us by selecting that text and pressing Ctrl+Enter.

Онлайн-курс Product Management in IT від Web Academy.
Пройдіть повний цикл створення продукту — від генерації та валідації продуктової проблеми до аналізу користувачів, метрик і створення завдань для розробників. Знижка у розмірі 10% доступна при використанні промокоду "ITC".
Інформація про курс

Этот материал – не редакционный, это – личное мнение его автора. Редакция может не разделять это мнение.

Топ-5 самых популярных блогеров марта

PHP Developer в ScrumLaunch
Всего просмотровВсего просмотров
2434
#1
Всего просмотровВсего просмотров
2434
Founder at Shallwe, Python Software Engineer (Django/React)
Всего просмотровВсего просмотров
113
#2
Всего просмотровВсего просмотров
113
Career Consultant в GoIT
Всего просмотровВсего просмотров
95
#3
Всего просмотровВсего просмотров
95
CEO & Founder в Trustee
Всего просмотровВсего просмотров
94
#4
Всего просмотровВсего просмотров
94
Рейтинг блогеров

Ваша жалоба отправлена модератору

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: