Три вида тестирования сайтов

Как показывает опыт, готовые сайты всегда (!) отличаются от запланированных. Чтобы выявить отличия – и получить именно то, что вы заказали (а не что-то похожее), нужно проверить на соответствие запланированному внешний вид сайта (дизайн) и его работу (функционал). Иногда – скорость загрузки сайта. Об этих видах тестирования – читайте ниже.

Павел ШУДНЕВ

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

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

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

«Будет так, но немного иначе»

За пятнадцать лет мне довелось работать с приличным количеством разработчиков сайтов в России и Прибалтике. Не могу сказать, что они принципиально чем-то отличаются, нет: все работают примерно одинаково – кто-то чуть лучше, кто-то чуть хуже… Помню, когда одним из них я задал вопрос, будет ли готовый сайт внешне отличаться от утвержденного дизайна, мне ответили: да, будет. Мол, один к одному мы не делаем, и вообще так не бывает.

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

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

По моему мнению, это не нормально. На «выходе» нужно получать тот продукт, который был заказан на «входе». И поможет в этом тестирование.

Что и как тестировать

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

Во-первых, проверять соответствие дизайна готового сайта дизайну утвержденному (план/факт) и правильно ли работает функционал я рекомендую по отдельности. То есть, сначала тестируете одно, потом другое. В каком порядке – не важно. Допустим, вы решили начать с дизайна. На что обращать внимание и как тестировать?

Если вы хоть на начальном уровне владеете фотошопом, проверить соответствие готового дизайна утвержденному очень просто: нужно на утвержденный дизайн шаблона (обратите внимание: именно шаблона!) наложить отдельным слоем скриншот (снимок экрана) готового сайта, и сделать у этого слоя непрозрачность на уровне 60-70%. Выглядеть это может, например, так:

testirovanie-sajta-primer-780

Далее можно просто включать и выключать этот слой (в том числе со 100% непрозрачностью), и обращать внимание на различные блоки сайта – один за другим: навигационная панель, блок «О компании», блок новостей, футер и т.д. Различия будут сразу налицо. Например:

testirovanie-sajta-primer-2-780

Сверху – утвержденный дизайн, снизу – скриншот (снимок экрана) готового сайта. Видите отличия?

Теперь сравним те отличия, которые видите вы с теми, которые вижу я:

  • Фиолетовый цвет подложки логотипа на готовом сайте отличается от фиолетового цвета подложки навигационной панели (в дизайне это один – единый – цвет)
  • В дизайне навигационная панель (строчка со ссылками «Главная», «О компании» и пр.) отцентрована по ширине, а на готовом сайте – по левому краю
  • Про два пункта в навигационной панели разработчики почему-то забыли: ссылки «Главная» нет, ссылки «Все товары» тоже нет
  • Этого различия вы, как пользователь, скорее всего, вообще не увидите (как минимум, сразу не увидите точно): один из параметров, который указывается в дизайне – это трекинг (расстояние между символами). Вы вряд ли знакомы с этим параметром, поскольку он есть только в профессиональных редакторах, и при правильном использовании он позволяет увеличить читабельность текста. Так вот: в дизайне в навигационной панели мной задан трекинг на уровне 50, а в готовом сайте он равен нулю! Посмотрите внимательно на написание, например, «О компании» вверху и внизу: сверху отступы между символами больше, чем внизу. На случай, если вы вдруг все равно не видите разницы:
testirovanie-sajta-primer-3-780

Теперь видите?

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

testirovanie-sajta-primer-4-780

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

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

Все ссылки на сайте должны работать. И вести они должны именно туда, куда было изначально задумано, а не куда-то еще. Выпадающие меню должны выпадать. Кнопки и поля формы должны отображаться. Заполненные поля формы после нажатия кнопки «Отправить» должны приходить на заданный веб-мастером e-mail.

Если на сайте предусмотрена фотогалерея с возможностью увеличения изображений, изображения должны увеличиваться. Файлы для скачивания должны скачиваться. Если дизайнер решил, что при наведении ссылки должны подчеркиваться, то они должны подчеркиваться; если менять цвет, должны менять цвет и т.д. Сайт должен работать так, как задумал его проектировщик (или заказчик), а не как-то иначе. И работать он должен на все 100%, а не на 75% или 98%.

Наглядный пример из практики. Работающий несколько лет (!) сайт типографии. Чтобы отправить в компанию заказ для расчета, на сайте используется форма. В форме нужно заполнить несколько полей (название компании, адрес, телефон, спецификация заказа и пр.) и отправить эти данные менеджеру типографии, который должен сделать расчет. Всё хорошо. Кроме одного: на сайте не отображается кнопка «Отправить». Т.е. заполнить форму можно, а отправить нельзя – см. ниже:

flyprint-contact-form-780

Поскольку эта форма предусмотрена для потенциальных новых клиентов, можно уверенно сказать: этих клиентов компания недополучила. И всё почему? Потому то кто-то в своё время не протестировал разработанный сайт.

Тестирование скорости загрузки сайта

Хороший сайт должен быть быстрым. В идеале, главная страница должна загружаться не более 4 секунд, переход со страницы на страницу должен занимать не более 2 секунд. Даже сегодня, несмотря на наличие скоростного Интернета, встречаются сайты (в т.ч. довольно серьезных компаний), которые загружаются тааааааааааааак долго, что ни один нормальный пользователь столько времени ждать просто не будет!

Большинство людей не знают о том, что время загрузки сайта – величина переменная, и на нее можно влиять. Другими словами, время загрузки сайта можно (и нужно) минимизировать.

На скорость загрузки влияет большое количество факторов – от правильности подготовки изображений для сайта (тут есть свои тонкости, которые позволяют уменьшать размер изображений в 4-5 и более раз без потери качества), до размещения скриптов и использования распределённой сетевой инфраструктуры CDN (Content Distribution Network).

Для тестирования скорости загрузки сайта используются специальные профессиональные сервисы. Мы в своей работе используем Page Speed Insights от Google и GTmetrix канадской компании Gossamer Threads.

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

Отдельный вопрос – ускорение сайтов для разных платформ: ПК (персональных компьютеров) и мобильных устройств. Хорошие сайты должны корректно отображаться и быстро загружаться на разных устройствах: персональных компьютерах, ноутбуках, планшетах и мобильных телефонах.

Резюме

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

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

Другие статьи
Разработчик: «Контент – это всё!»
По мнению одного из моих партнёров, уникальный контент – это основа успеха сайта. Остальные факторы второстепенны. А покупка ссылок – занятие бессмысленное. Читать далее
Нужен сайт. С чего начать?
С чего начать работу над сайтом? Этот вопрос мне регулярно задают потенциальные заказчики, приятели и просто знакомые. Мой ответ: начните со структуры. Полезные советы о том, как разработать простую и понятную структуру сайта читайте в этой статье. Читать далее
Ликбез: хостинг, сервер, сайты, домены, DNS и CMS
Рассказ о пяти ключевых составляющих разработки сайта простым и понятным языком, с примерами. Читать далее
Почему я решил завести блог?
Потому, что пришло понимание: пора! Чтобы научиться им, блогом, пользоваться. Научиться его продвигать. Развивать. Чтобы с нуля создать интеллектуальный продукт и вывести его на рынок. Кто знает, быть может это станет началом большого пути? Читать далее