- З чого почати тестування
- Співвіднесення фактичного дизайну затвердженим в ТЗ
- Перевірка верстки на валідність
- функціональне тестування
- Тестування навантаження
- Тестування безпеки сайту
- тестування сумісності
- висновок
Наша команда-партнер Artmisto
Перед тим як випускати розроблений web-сайт в «вільне плавання» необхідно провести ряд заходів, спрямованих на пошук і виправлення помилок в веб-дизайні, в верстці і поліпшенню користувацького досвіду. Без всього цього не добитися хороший поведінкових показників, а значить проекту складно буде потрапити в топ пошукової видачі.
Тестування сайту дозволяє перевірити працездатність всіх функцій згідно з технічним завданням, швидкість і стабільність роботи, читабельність інформації, зручність переходів по сайту, захищеність від веб-атак і багато іншого.
Якщо ви клієнт студії або агентства, яка розробляла ваш сайт, тоді ця стаття для вас.
Уявіть ситуацію: ви звернулися в професійне весільне агентство, щоб воно організувало ваше весільне торжество, обговорили з ним декоративне і музичне оформлення, програму. Обіцяна чарівна атмосфера повинна подарувати гостям і молодятам незабутні миті, але подія вийшло «незабутнім» в переносному значенні цього слова. Воно не відповідало вашим очікуванням, і ви розчарувалися в ньому.
Схожість зазначеного свята і розробленого сайту в тому, що можуть бути такі комбінації: зовнішнє оформлення свята або дизайн сайту бути на вищому рівні, а програма заходів або функціонал сайту з недоліками і навпаки. Природно буває, що все не відповідає вашим вимогам або в порядку. Щоб оцінити весілля, як банально б не звучало, досить прожити цей день. Однак не так просто визначити, що собою являє веб-сайт. Компетентне тестування тут на допомогу.
З чого почати тестування
Сервіси і методи тестування можуть бути різними, однак з самого початку визначитеся зі стратегією і дотримуйтеся нею - продумайте порядок дій і послідовно виконуйте їх.
Основні види або роботи при тестуванні:
- Співвіднесення фактичного дизайну затвердженим в ТЗ;
- Перевірка верстки на валідність;
- Функціональне тестування;
- Тестування навантаження;
- Тестування безпеки сайту;
- Тестування сумісності;
Співвіднесення фактичного дизайну затвердженим в ТЗ
Жодна розробка сайту не обходиться без помилок в дизайні. Точно зіставити макет до готового дизайну не так просто, так як перевіряти потрібно кожен елемент і вигляд сторінок. Причому мобільна і планшетні версії вимагають ще більше уваги і моделювання можливих адаптацій під кожен гаджет, браузер, але про це в шостому пункті статті.
Щоб фактичний дизайн максимально співвідносився із затвердженим в технічному завданні, нижче представлений чек-лист. Вимоги до дизайну варіюються від проекту до проекту в залежності від різновиду сайту і індивідуальних переваг клієнта, тому список елементів для перевірки включає тільки основні:
- Шрифти.
- Колір. Перевірте на відповідність плану колірну гамму сайту - шрифтів, іконок, ліній, кнопок, фону різних блоків і навігаційних панелей.
- Тема (h1). Він повинен виділятися від тексту, щонайменше, збільшеним розміром і бути унікальним і єдиним для кожної сторінки. Тема h1 служить темою сторінки, припустимо, для блогу таким заголовком буде назва статті.
- Підзаголовки (h2-h3). Вони також зазвичай відрізняються від абзаців, але можуть повторюватися і бути на сторінці в будь-якому необхідній кількості. Приклад - підтема статті блогу.
- Посилання. Перевірте, щоб гіперпосилання на сайті відрізнялися оформленням від основного тексту. Найпопулярніший варіант - суцільне або пунктирне підкреслення і контрастний колір шрифту. При наведенні мишкою також має відбуватися зміна кольору (зазвичай в меню) або тільки декорування тексту посилання. Це обов'язково для поліпшення поведінкових характеристик - при перегляді сторінки і побачивши посилання, відвідувач визначить можливість переходу по ній.
- Списки. Щоб перерахування ефектно виглядали на сторінці, виділіть маркери кольором відмінним від текстового (ось як нумерація цього списку перед кожним пунктом).
- Абзаци і відступи. Відстань між будь-якими елементами сильно впливає на враження, які отримає користувач при контакті з вашим контентом і сайтом в цілому. Приділіть цьому увагу. Перевірте відстань між абзацами, списком і абзацами, заголовком і абзацом, відступи блокових елементів і так далі.
- Таблиці. Якщо ви збираєтеся представляти інформацію на web-сайті у вигляді таблиці - стилізує її під загальний дизайн.
- Цитати. Для блогу актуально наявність контрастного фону або зміна тільки розміру і кольору тексту цитат з вертикальною лінією з лівого боку. Не обов'язково виділяти цитату. Наприклад, на початку цієї статті ми акцентували увагу на важливій на нашу думку інформації.
- Розташування. Може бути так, що один з блоків на сайті не відцентрований або навпаки знаходиться посередині, а на макеті визуализировано інше положення. Почекаев відстані, як по горизонталі, так і вертикалі.
- Наявність блоків. Перевірте присутність іконок соціальних мереж, кнопок для шаринга, карти розташування, кнопки «наверх» після скролінгу і інших допоміжних елементів.
Читайте також: Інтернет-маркетинг: що це, значення для бізнесу, інструменти і стратегії.
Перевірка верстки на валідність
Щоб розроблений веб ресурс однаково відображався в різних браузерах, витрачалося менше часу на його завантаження і пошукові системи краще розуміли контент, обов'язковим пунктом в тестуванні є перевірка на валідність.
Існує стандарт, який визначає норми і правила сайтобудування - Консорціум Всесвітньої павутини (W3C). На його основі розроблений сервіс W3C Markup Validation. Перевірте в ньому свій сайт. Якщо «вилізло» багато помилок, зверніться до веб-майстру для їх усунення. Частина з них може залишитися навіть після виправлень, але не бути критичними.
функціональне тестування
Один з найбільш времязатратних видів тестування, що вимагає правильні розрахунки функцій. Наприклад, візьмемо інтернет-магазин, у якого є не тільки акції на товари, але і безліч статусів при покупці, певне число товарів - все комбінації потрібно перевірити.
Функціонал залежить від типу перевіряється ресурсу, але є базові елементи, на що варто звернути увагу:
- Тестування для користувача форм (наприклад, залишити заявку, написати у формі зворотного зв'язку, залишити коментар або відгук);
- Перевірка працездатності пошуку та релевантності результатів видачі;
- Тестування навігації - переходи по посиланнях для виявлення неробочих;
- Перевірки подгрузки файлів на сервер;
- Випробування реєстраційної форми та авторизації.
Тестування навантаження
Щоб запобігти несподіване припинення роботи сайту в годину пік відвідування користувачів, важливо провести тестування навантаження. Для цього існують сервіси, які імітують поступове збільшення знаходяться на сайті користувачів. Якщо час завантаження сайту залишається тим самим, що і на рівні з невеликим трафіком, в такому випадку проблема не спостерігається. Для інтернет-магазинів тестувати можна і здійснення одночасних транзакцій, щоб отримати час відгуку всіх найважливіших бізнес-функцій.
Тестування безпеки сайту
Від виду сайту перелік робіт, спрямованих на пошук вразливостей, буде відрізнятися. Важливо вчасно усунути їх, щоб хакери не змогли влаштувати «колапс» вашого каналу залучення нових клієнтів через інтернет. Тестування безпеки діагностує шляху злому системи, дає оцінку захищеності сайту і аналіз ризиків доступу зловмисників до конфіденційних даних.
Щоб по-справжньому убезпечити ваш інтернет-ресурс, потрібно звертатися до дорогих програмістам для детального тестування.
Основні об'єкти перевірки на вразливість:
- Контроль доступу
- діагностика аутентифікації
- Валідація вхідних значень
- криптографія
- Механізми обробки помилок
- Інтеграція зі сторонніми сервісами
- Перевірка стійкості сайту до Dos / DDos атакам
- конфігурація сервера
тестування сумісності
1366 × 768, 1920 × 1080, 1600 × 900 - напевно, ви знаєте, що означають всі ці комбінації цифр. Правильно, дозвіл моніторів або екранів, на які ми щодня спостерігаємо. Так ось тут можна побачити «картинку», скільки відсотків користувачів мають пристрій з тією чи іншою кількістю пікселів. Подивіться скільки багато різних форматів. Як же веб-сайт виглядає на кожному з них? На це питання і про рівень кросбраузерності відповість тестування сумісності з наступними видами робіт:
- Перегляду сайту на моніторах, що мають різну роздільну здатність;
- Перегляду сайту за допомогою різних браузерів і їх версій;
- Перевірки правильності відображення шрифтів різними браузерами і їх версіями.
висновок
На сайті завжди знайдеться, що перевірити - це факт! Наприклад: пошук помилок в контенті і перевірка його на унікальність, тестування швидкості завантаження сайту, юзабіліті, відповідність мета-тегів і Title хорошому тону інтернет-просування і так далі.
Щоб провести деякі види тестування потрібно мати компетентністю в технічних питаннях і інтернет-маркетингу. Однак частина робіт ви можете зробити самі - досить витратити трохи часу на вивчення.
Буду радий вашим коментах і відгуками.
Як же веб-сайт виглядає на кожному з них?
