6 видов тестирования web-сайтов: особенности и с чего начать

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

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

Если вы клиент студии или агентства, которая разрабатывала ваш сайт, тогда эта статья для вас.

Представьте ситуацию: вы обратились в профессиональное свадебное агентство, чтобы оно организовало ваше свадебное торжество, обговорили с ним декоративное и музыкальное оформление, программу. Обещанная волшебная атмосфера должна подарить гостям и молодоженам незабвенные мгновения, но событие получилось «незабываемым» в переносном значении этого слова. Оно не соответствовало вашим ожиданиям, и вы разочаровались в нем.

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

С чего начать тестирование

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

Основные виды или работы при тестировании:

1. Соотнесение фактического дизайна утвержденному в ТЗ;
2. Проверка верстки на валидность;
3. Функциональное тестирование;
4. Нагрузочное тестирование;
5. Тестирование безопасности сайта;
6. Тестирование совместимости;

Соотнесение фактического дизайна утвержденному в ТЗ

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

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

1. Шрифты.
2. Цвет. Проверьте на соответствие плану цветовую гамму сайта – шрифтов, иконок, линий, кнопок, фона различных блоков и навигационных панелей.
3. Заголовок (h1). Он должен выделяться от текста, по меньшей мере, увеличенным размером и быть уникальным и единственным для каждой страницы. Заголовок h1 служит темой страницы, допустим, для блога таким заголовком будет название статьи.
4. Подзаголовки (h2-h3). Они также обычно отличаются от абзацев, но могут повторяться и быть на странице в любом необходимом количестве. Пример – подтема статьи блога.
5. Ссылки. Проверьте, чтобы гиперссылки на сайте отличались оформлением от основного текста. Самый популярный вариант — сплошное или пунктирное подчеркивание и контрастный цвет шрифта. При наведении мышкой также должно происходить изменение цвета (обычно в меню) или только декорирования текста ссылки. Это обязательно для улучшения поведенческих характеристик – при просмотре страницы и увидев ссылку, посетитель определит возможность перехода по ней.
6. Списки. Чтобы перечисления эффектно выглядели на странице, выделите маркеры списка цветом отличным от текстового (вот как нумерация этого списка перед каждым пунктом).
7. Абзацы и отступы. Расстояние между любыми элементами сильно влияет на впечатления, которые получит пользователь при контакте с вашим контентом и сайтом в целом. Уделите этому внимание. Проверьте расстояние между абзацами, списком и абзацами, заголовком и абзацем, отступы блочных элементов и так далее.
8. Таблицы. Если вы собираетесь представлять информацию на web-сайте в виде таблицы – стилизуйте ее под общий дизайн.
9. Цитаты. Для блога актуально наличие контрастного фона или изменение только размера и цвета текста цитат с вертикальной чертой с левой стороны. Не обязательно выделять цитату. К примеру, в начале этой статьи мы акцентировали внимание на важной по нашему мнению информации.
10. Расположение. Может быть так, что один из блоков на сайте не отцентрован или наоборот находится посередине, а на макете визуализировано другое положение. Почекайте расстояния, как по горизонтали, так и вертикали.
11. Наличие блоков. Проверьте присутствие иконок социальных сетей, кнопок для шаринга, карты местоположения, кнопки «наверх» после скроллинга и других вспомогательных элементов.

Читайте также: Интернет-маркетинг: что это, значение для бизнеса, инструменты и стратегии.

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

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

Существует стандарт, определяющий нормы и правила сайтостроения — Консорциум Всемирной паутины (W3C). На его основе разработан сервис W3C Markup Validation. Проверьте в нем свой сайт. Если «вылезло» много ошибок, обратитесь к веб-мастеру для их устранения. Часть из них может остаться даже после исправлений, но не быть критичными.

Функциональное тестирование

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

Функционал зависит от типа проверяемого ресурса, но есть базовые элементы, на что стоит обратить внимание:

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

Нагрузочное тестирование

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

Тестирование безопасности сайта

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

Чтобы по-настоящему обезопасить ваш интернет-ресурс, нужно обращаться к дорогостоящим программистам для детального тестирования.

Основные объекты проверки на уязвимость:

• Контроль доступа
• Диагностика аутентификации
• Валидация входных значений
• Криптография
• Механизмы обработки ошибок
• Интеграция со сторонними сервисами
• Проверка устойчивости сайта к Dos/DDos атакам
• Конфигурация сервера

Тестирование совместимости

1366×768, 1920×1080, 1600×900 — наверно, вы знаете, что означают все эти комбинации цифр. Правильно, разрешение мониторов или экранов, на которые мы ежедневно смотрим. Так вот здесь можно увидеть «картинку», сколько процентов пользователей имеют устройство с тем или иным количеством пикселей. Посмотрите сколько много разных форматов. Как же веб-сайт смотрится на каждом из них? На этот вопрос и об уровне кроссбраузерности ответит тестирование совместимости со следующими видами работ:

• Просмотра сайта на мониторах, имеющих различную разрешающую способность;
• Просмотра сайта с помощью различных браузеров и их версий;
• Проверки правильности отображения шрифтов различными браузерами и их версиями.

Заключение

На сайте всегда найдется, что проверить — это факт! К примеру: поиск ошибок в контенте и проверка его на уникальность, тестирование скорости загрузки сайта, юзабилити, соответствие мета-тэгов и Title хорошему тону интернет-продвижения и так далее.

Чтобы провести некоторые виды тестирования нужно обладать компетентностью в технических вопросах и интернет-маркетинге. Однако часть работ вы можете сделать сами – достаточно потратить немного времени на изучение.

Буду рад вашим комментам и отзывам.