Рубріки: Тестирование

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Проверка правильности работы главных функций ресурса.
  • Обнаружение ссылок, ведущих к одной странице.
  • Корректность внутренних ссылок.
  • Проверка пользовательских форм. Сюда входят: добавление комментарии в блог, обратная связь и прочее.
  • Проверка полей и страниц «Авторизация», «Регистрация».
  • Корректность работы «Поиск ресурса» (его открытие на странице и открытие всех его атрибутов).
  • Проверка добавление, удаление и редактирование данных пользователей, товаров и заказов.
  • Сверка контента, имеющегося на сайте с тем, что представил заказчик.

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

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

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

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

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

  1. Навигационное тестирование. Здесь специалист проверяет, все ли страницы, кнопки и поля понятны пользователю. Есть ли доступ к главной странице и меню со всех остальных страниц.
  2. Тестирование контента. Специалист проверяет наличие грамматических ошибок, насколько контент информативный, имеют ли картинки и видео нужные размеры и качество, все ли заголовки проставлены корректно.
  3. Удобство пользования. Тестировщик оценивает, насколько понятна структура веб-приложения и есть ли лишние компоненты на ресурсе (проверяются все страницы).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Останні статті

Токсичные коллеги. Как не стать одним из них и прекратить ныть

В благословенные офисные времена, когда не было большой войны и коронавируса, люди гораздо больше общались…

07.12.2023

Делать что-то впервые всегда очень трудно. Две истории о начале карьеры PM

Вот две истории из собственного опыта, с тех пор, когда только начинал делать свою карьеру…

04.12.2023

«Тыжпрограммист». Как люди не из ІТ-отрасли обесценивают профессию

«Ты же программист». За свою жизнь я много раз слышал эту фразу. От всех. Кто…

15.11.2023

Почему чат GitHub Copilot лучше для разработчиков, чем ChatGPT

Отличные новости! Если вы пропустили, GitHub Copilot — это уже не отдельный продукт, а набор…

13.11.2023

Как мы используем ИИ и Low-Code технологии для разработки IT-продукта

Несколько месяцев назад мы с командой Promodo (агентство инвестировало в продукт более $100 000) запустили…

07.11.2023

Университет или курсы. Что лучше для получения IT-образования

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

19.10.2023