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

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

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

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

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

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

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

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

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

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

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

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

• показать, что компания работает в сфере госзакупок;
• показать основные направления в сфере госзакупок;
• показать партнеров, с которыми мы сотрудничаем (тендерные площадки);
Онлайн-курс "Excel та Power BI для аналізу даних" від robot_dreams.
Навчіться самостійно аналізувати й візуалізувати дані, знаходити зв’язки, розуміти кожен аспект отриманої інформації та перетворювати її на ефективні рішення.
Детальніше про курс
• показать прозрачность в сфере госзакупок.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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