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

Тестирование сайтов и веб-приложений: полное руководство

В этой статье мы рассмотрим тестирование сайта (веб-приложения) с помощью наборов тестов. Она довольно длинная, поэтому усаживайтесь по удобнее.

1. Тестирование функциональности;
2. Тестирование удобства использования;
3. Тестирование интерфейса;
4. Тестирование совместимости;
5. Тестирование производительности и скорости загрузки сайта;
6. Тестирование безопасности.

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

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

Формы используются для получения информации от пользователей и взаимодействия с ними.

Что нужно проверить в формах:

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

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

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

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

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

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

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

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

При тестировании функциональности сайтов нужно проверить:

1. Внутренние ссылки;
2. Внешние ссылки;
3. Ссылки на электронную почту;
4. Битые ссылки.

1. Валидация полей;
2. Сообщения об ошибке при неверном вводе;
3. Обязательные и необязательные к заполнению поля.

Следует проверить целостность базы данных.

Тестирование юзабилити — это анализ взаимодействия пользователя и сайта, поиск ошибок и их устранение.

При этом проверяется:

• Легкость обучения;
• Навигация;
• Субъективная удовлетворенность пользователей;
• Общий вид.

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

Проверка юзабилити:

• Сайт должен быть простым в использовании;
• Инструкции должны быть очень четкими;
• Проверьте, достигают ли предоставленные инструкции поставленной цели;
• Главное меню должно быть доступно на каждой странице;
• Главное меню должно быть построено в логической последовательности.

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

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

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

Варианты поиска, карта сайта, справочные материалы и т.д. Проверьте работу всех ссылок в карте сайта. Функция «Поиск по сайту» должна помогать легко находить нужный контент.

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

Основные интерфейсы:

• Интерфейсы веб-сервера и приложения.
• Интерфейсы сервера базы данных и сервера приложения.

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

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

Нужно проверить:

• Совместимость с браузерами;
• Совместимость с операционными системами;
• Просмотр на мобильных устройствах;
• Параметры печати.

Работа некоторых веб-приложений зависит от типа браузера. Сайт должен быть совместим с различной конфигурацией и параметрами разнообразных браузеров.

Верстка сайта должна быть кроссбраузерной. При использовании Java-скриптов и AJAX, обеспечивающего функциональность пользовательского интерфейса, проверки безопасности или валидации создают большую нагрузку на систему.

Проверьте работу веб-приложения в браузерах Internet Explorer, Firefox, Netscape Navigator, AOL, Safari, Opera разных версий.

Некоторые функции веб-приложения могут быть несовместимы с определенными операционными системами. Не во всех из них поддерживаются новые технологии, используемые в веб-разработке. Поэтому проверьте работу приложения в Windows, Unix, MAC, Linux, Solaris и их различных версиях.

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

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

Тестирование производительности сайта или веб-приложения должно включать в себя:

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

Проверьте производительность приложения на различной скорости интернета.

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

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

ab тестирование функциональности также включает в себя проверку на ошибки, связанные с оперативной памяти.

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

Сплит тестирование сайта при использовании различных вариантов интернет-соединения: через модем, ISDN и т.д.

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

1. Непрерывная нагрузка;
2. Производительность памяти, процессора, обработки файлов и т. д.

Ниже приведены некоторые наборы для тестирования веб-безопасности:

• Проверка с помощью вставки внутреннего URL в адресную строку браузера без авторизации. Внутренние страницы при этом не должны открываться.
• После авторизации с помощью логина и пароля, а также просмотра внутренних страниц попробуйте изменять URL. Например, вы проверяете какую-то статистику сайта под идентификатором ID= 123. Попробуйте изменить ID URL на другой ID сайта, который не имеет отношения к авторизованному пользователю. В любом случае доступ этого пользователя к просмотру других показателей должен быть запрещен.
• Попробуйте ввести неверные данные в поля формы для авторизации. Выясните, как система реагирует на ввод недопустимых данных.
• Каталоги или файлы не должны быть доступны напрямую, если для них не предусмотрена возможность скачивания.
• Проверьте работу капчи для защиты от автоматического входа с помощью программного кода.
• Проверьте, используется ли в целях безопасности SSL. Если да, то должно отображаться сообщение при переходе пользователя с незащищенных HTTP-страниц к защищенным и наоборот.
• Все операции, сообщения об ошибках, нарушения безопасности должны записываться в файл журнала на веб-сервере.

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

• Сетевое сканирование;
• Сканирование уязвимостей;
• Возможность потенциального взлома паролей;
• Обзор журнала;
• Средства для проверки целостности;
• Обнаружение вирусов.

Следует обратить внимание на взаимодействие HTML-страниц, интернет-подключение, брандмауэры, приложения, запускаемые на веб-страницах (апплеты, JavaScript, модульные приложения), а также приложения, работающие на стороне сервера (скрипты CGI, интерфейсы баз данных, генераторы динамических веб-страниц).

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

Дополнительные факторы, которые следует учесть при тестировании сайта:

• Какова ожидаемая нагрузка на сервер (например, количество запросов за единицу времени)?
• Какая производительность требуется при различных видах нагрузки (время ответа веб-сервера, время отклика базы данных на запрос)?
• Какие инструменты потребуются для тестирования производительности?
• Кто является целевой аудиторией? Какие браузеры будут использовать пользователи? Какова скорость подключения? Предназначен ли сайт для использования внутри организации или будет доступен в интернете для широкого круга пользователей?
• Какую производительность ожидает получить клиент (насколько быстро должны загружаться страницы, как должны себя вести анимации, апплеты, нагрузка и запуск)?
• Будут ли разрешены простои сервера и техническое обслуживание, а также обновление контента? Если да, в каком количестве?
• Какие средства безопасности требуются (файерволы, шифрование, пароли и т.д.), и какую работу они будут выполнять? Как их можно проверять?
• Насколько надежным должно быть интернет-соединение? Как оно будет влиять на резервное копирование системы?
• Как будет выполняться управление обновлением контента сайта?
• Требования для технического обслуживания, отслеживания и контроля содержимого веб-страниц, графических элементов, ссылок и т.д.
• Какая спецификация HTML будет соблюдаться? Насколько точно?
• Как будут проверяться и обновляться внутренние и внешние ссылки? Насколько часто?
• Как будет происходить управление и проверка CGI апплетов, сценариев JavaScript, компонентов ActiveX и т.д.?
• Максимальный размер веб-страницы не должен превышать 3-5 экранов, кроме случаев, когда контент сосредоточен на одной теме. Если размер веб-страницы больше, предоставьте внутренние ссылки для навигации по ней.
• Разметка веб-страницы и элементы дизайна должны быть последовательными и логично связанными.
• Отображение веб-страниц должно быть независимо от типа браузера.
• На каждой странице следует указать ссылку для связи.

Данная публикация представляет собой перевод статьи «Web Testing Complete Guide (Web Application Testing Tips and Scenarios)» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

Тестирование сайта — основные этапы, порядок работ

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

Зачем это нужно?

В интернете ходят легенды о простой, но невероятно прибыльной работе, заключающейся, как раз, в проверке сайтов, потому что люди ошибочно полагают, будто тестировать очень легко — достаточно просто проверить, туда ли ведут ссылки и работают ли формы. Не стоит и говорить, что этим должен заниматься специалист, который понимает суть, знает соответствующую методику и принципы, а работа его не так уж проста. Мало того, что он систематизирует несоответствия и работает с документацией. В ходе тестирования программных продуктов его интересуют такие вопросы, как, например, «Корректно ли поведёт себя программа, если на вот эту кнопку нажать 500 раз правой кнопкой мыши?». Так что отлов ошибок лучше доверить профессионалу.

О пропуске этапа вообще не может быть и речи. Вспомните хотя бы количество ошибок после смены дизайна «ВКонтакте» или заплаток на свежевышедшую Windows 10 — всё это осталось после серьёзного тестирования, а представьте, что творилось бы без него! На рассматриваемый этап разработки может тратиться до половины отведённых на реализацию всего проекта времени и бюджета. Конечно, в большей степени это касается самописных веб-приложений, но тем не менее пренебрегать тестированием ни в коем случае нельзя.

Простое тестирование

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

Итак, в случае стандартного проекта всё тестирование сводится к сверке функционала и внешнего вида получившегося сайта с тем, что требовало ТЗ. Ссылки, формы, другие интерактивные элементы проверяются на работоспособность, а дальше — всё по заданию. Было заявлено, что ресурс должен корректно отображаться и на смартфонах и на ПК — адаптивность сайта проверяется, в ТЗ указана непременная совместимость сайта с Internet Explorer 9 — это тоже проверяется.

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

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

Этапы проверки

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

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

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

Тест юзабилити. Этот пункт выявляет удобство пользования ресурсом. Конечно, интерфейс продумывается ещё на стадии разработки ТЗ, но на практике реализованные решения не всегда бывают оптимальными. Юзабилити-тест проводится с участием пользователей. Такие работы практикуются и до, и после запуска проекта. Приёмы, подобные A/B-тестированию, призваны не только повысить удобство, но также помочь достичь целей создания проекта, например, увеличить конверсию продаж.

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

Тест безопасности. Специалист определяет устойчивость сайта ко взломам, DDoS- и другим возможным атакам злоумышленников.

Результат

На протяжении всех тестовых работ специалист ведёт учёт ошибок. Исправляться они могут как в ходе тестирования (например, после завершения каждого из этапов), так и после окончания всего процесса. Кто именно исправляет недоработки, определяет либо руководство, либо сам тестировщик. Благодаря этапу сайт после запуска будет гарантированно радовать посетителей и владельцев стабильной, бесперебойной работой.

www.seostop.ru

7 бесплатных сервисов для проверки сайтов (о которых вы могли и не знать) / Habr

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

LoadImpact: http://loadimpact.com, сервис нагрузочного тестирования сайтов (за деньги — до 5к одновременных подключений) у которого есть бесплатный тест на 50 одновременных соединений. Если вы хоститесь у безжалостного и беспощадного отечественного хостера за $0,01/месяц и у вас всего тысяча сайтов на сервере — попробуйте проверить свой, с высокой вероятностью он даже 50 одновременных подключений не выдержит.

BrowserMob: http://browsermob.com, дополнительный простой, но симпатичный сервис, позволяющий проверить скорость загрузки целевого сайта из 4 разных мест и показывающий много подробных метрик загрузки для каждого из них. А основная задача BrowserMob — автоматическое кросс-браузерное тестирование сайтов.

Alertra: http://alertra.com, сервис мониторинга аптайма, на сайте которого можно бесплатно проверить доступность (и время ответа) сайта из 11 разных мест. Работает быстро и надежно, никаких капч и прочей дребедени.

site24x7: http://site24x7.com, похожий на Alertra сервис, который использует уже 23 географически распределеные точки проверки.

You get signal: http://www.yougetsignal.com, отличный сервис позволяющий проверить открытые порты на любом хосте/IP. Частенько помогает для проверки проброса портов через NAT-ы.

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

CSE HTML Validator: http://www.onlinewebcheck.com альтернатива известнейшему validator.w3.org, построенная [судя по всему] на своем отдельном ядре анализа. Выгодно отличается очень подробными и понятными рекомендациями по исправлению ошибок и потенциальных проблем.

Built with: http://builtwith.com/ анализирует заданный сайт и выдает целое досье о нем: веб-сервер, CMS, какая служба статистики используется и так далее. Показателей очень много, для беглого анализа конкурентов вполне подходит. Также, интересно покопаться в trends.builtwith.com где владельцы сервиса выдают статистику по всем отслеживаемым параметрам. Например подавляющее большинство сайтов до сих пор использует старый блокирующий JS-код для Google Analytics.

А какие сервисы есть у вас в закладках?

habr.com

Несколько удобных инструментов для тестирования сайта / Habr

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

Websitetools

Первый в списке — websitetools.com, точнее его бесплатные инструменты. Все тесты можно проводить с 35 серверов, размещенных в разных концах Земли.

Website test позволяет проверить статус сервера, размер главной страницы, время загрузки в общем и по отдельности DNS, соединения, редиректа (если есть), загрузки первого и последнего байт.

Web Page Test проверяет доступность страницы, ее размер, показывает время загрузки различных параметров (описанных выше) для каждого из 35 объектов страницы (если зарегистрироваться на сайте, то количество объектов не ограничено, тоесть загружаются абсолютно все объекты страницы)

Последовательность загрузки объектов

Статус и время загрузки объектов

HTTP Headers test обращается к введенному адресу и отображает возвращаемые заголовки в виде:
HTTP/1.1 200 OK
Server: nginx
Date: Sun, 14 Jun 2009 12:30:54 GMT
Content-Type: text/html
Transfer-Encoding: chunked
Connection: keep-alive
Keep-Alive: timeout=25

Кроме этих есть еще несколько полезных инструментов:
— Просмотр MX записей для ящика электронной почты
— Просмотр NS записей по адресу сайта, или ip
— Сопоставление доменных имен ip адресу
— Проверка DNS в популярных черных списках DNS
— Тестирование доступности HTTP, HTTPS, FTP, SMTP, POP3, IMAP, SSH, Telnet, DNS по домену, или ip
— Проверка валидности ящика электронной почты
— Сканирование портов
— PING, Traceroute, WHOIS, MTR

XenoCode Browser Sandbox

Сервис предоставляет набор из Internet Explorer 6, 7, 8, Firefox 3, Safari 3, Chrome и Opera 9, которые не надо устанавливать, а достаточно запустить прямо с их сайта. Это дает возможность посмотреть как выглядит сайт в различных браузерах, и в отличии от не менее известного BrowserShots, который делает только снимки страницы, позволяет полноценно пользоваться сайтом в окнах разных браузеров.

FireBug

Расширение для Firefox, которое позволяет в режиме реального времени исследовать множество элементов веб-страницы: JavaScript, DHTML, CSS, а также XMLHttpRequest. С помощью этого замечательного инструмента в считанные секунды можно найти любой HTML-объект страницы, изменить и просмотреть свойство CSS, увидеть CSS-контейнеры в удобном виде, исследовать DOM, получить список ошибок на странице, а также запускать JavaScript из консоли.
Во время написания этой статьи я нашел русскоязычный сайт, на котором всегда можно получить последнюю версию расширения, а также полную документацию к нему — firebug.ru

Load Impact

Замечательный стресс-тест сервис, который позволяет симулировать большую нагрузку на Ваш сайт и предоставляет подробные и удобные отчеты проделанного теста. В бесплатной версии можно симулировать не более 50 пользователей, однако в платной ($99 в день, или $499 в месяц) это число достигает 5000.

Web Developer Firefox Extension

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

W3C сервисы проверки

Несколько официальных сервисов для тестирования сайта от Консорциума Всемирной паутины.
W3C Markup Validation показывает ошибки синтаксиса HTML веб-страницы, их описание и в некоторых случаях предлагает пути их решения.

W3C CSS Validation то же самое, что и предыдущее, но проверяет синтаксис CSS

W3C mobileOK Checker проверяет насколько корректно страница отображается в мобильных устройствах. Проверяет насколько таблицы стилей, размеры объектов, обработка вводимых данных соответсвуют спецификациям mobileOK

http://validator.w3.org/checklink — проверка на битые ссылки.

W3C Feed Validation Service — проверка синтаксиса Atom или RSS Feed

habr.com

5 бесплатных инструментов для самостоятельного юзабилити-тестирования сайта

Рассказываем, что можно тестировать и как это сделать без помощи специалистов

Аналитики американской компании Forrester Research выяснили, что около половины сайтов теряет клиентов из-за неудобного дизайна и других недочетов в юзабилити. Только представьте: неудачная форма заказа или некликабельная картинка — и потенциальный покупатель понес деньги конкурентам. Чтобы понять, нравится ли вашим посетителям сайт и удобно ли им делать на нем покупки, проведите юзабилити-тестирование.

Что нужно тестировать?

Если сайт уже работает, какие его элементы нужно протестировать станет ясно после аналитики. Реальный пример теста юзабилити компании Imaginary Landscape: из Google-Аналитики видно, что пользователи заходят на страницу с формой обратной связи, но заявку на звонок не отправляют. После юзабилити-тестирования стало понятно, что люди не хотят заполнять такое количество строк. Форму поменяли, количество строк сократили c 11 до 4, после чего конверсия выросла на 140%. Профит.

Было — стало

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

Кроме прочего, тестируют:

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

В общем, любые элементы, с которыми посетитель взаимодействует на сайте. Или не взаимодействует, но по нашему плану должен.

В идеале тестирование проводят специалисты: собирают данные, сегментируют ЦА, формируют фокус-группы, составляют анкеты, а после самого исследования анализируют результаты. Это долго и дорого, хотя и стоит того. Но получить общее представление о взаимодействии пользователей с вашим сайтом можно и самостоятельно, причем бесплатно. Для этого есть как минимум 5 способов.

1. Инструменты Яндекс Метрики

В рунете из бесплатных инструментов юзабилити-тестирования пока не придумали ничего удобнее и функциональнее счетчиков Яндекс Метрики. Чего стоит один «Вебвизор».

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

Чтобы установить «Вебвизор», авторизуйтесь на Яндекс Метрике и перейдите на вкладку «Добавить счетчик». В «Настройках» скопируйте код счетчика и вставьте на все страницы сайта.

Добавьте HTML-код счетчика на страницы своего сайта Интерфейс Вебвизора

Вот так выглядит отчет «Вебвизора». А просмотр действий пользователя начнется при нажатии на значок воспроизведения.

«Вебвизор» не единственный полезный инструмент Яндекса, который поможет отследить реакцию пользователей на ваш сайт.

Тепловая карта кликов

Тепловая карта кликов наглядно покажет самые кликабельные места на странице. Например, по карте кликов Яндекса видим, что кнопку «Получить счетчик» нажимают, а вот новости (колонка справа) особой популярностью не пользуются. Чем горячее цвет в точке, тем чаще на нее кликают пользователи.

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

2. UsabilityHub

Онлайн-сервис предлагает 5 простых тестов:

• Five Second Test — тест пяти секунд. Принцип таков: вы загружаете скриншот тестируемой страницы на сайт, участники теста смотрят на нее в течение 5 секунд, после чего дают свою оценку. Можно задавать разные вопросы, например, какой элемент больше всего привлек внимание, что запомнилось, о чем сайт и тому подобное. По завершении вы получите ответы участников теста в полном объеме + автоматически сгенерированное облако часто повторяющихся слов.

1.Загружаем скриншот страницы 2. Задаем участникам вопросы 3. Получаем отчет с ответами 4. Для наглядности изучаем облако

• Click Test — тест кликов.
  Действия те же, только вместо ответов получаем тепловую карту кликов. По ней мы увидим, что пользователи, к примеру, не жмут на стратегически важную (для нас) кнопку, зато активно кликают картинку. Дополнительно сервис предоставит отчет о количестве кликов и среднем времени щелчка.

• Question Test — тест вопросов.
  Вы спрашиваете о своем сайте — реальные люди отвечают.

• Navigation Test — анализ навигации.
  Позволяет понять, насколько удобно пользователям «лазить» по вашему сайту, понятна ли его архитектура и навигация.

• Preference Test — предпочтение.
  Поможет провести А/В тестирование дизайна сайта, приложения, листовки. Загружаете два варианта дизайна — пользователи выбирают, какой им больше нравится. Все просто и оперативно.

Тепловая карта кликов

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

3. Usabilla

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

Среди языков тестирования есть русский, но сама программа на английском. В бесплатной демо-версии можно протестировать 2 страницы с участием 10 человек.

4. Optimal Workshop

На сервисе доступны такие инструменты:

• Treejack — тестирование «дерева» сайта.
  Помогает понять, как пользователи ориентируются на вашем сайте, выполняют ли те действия, которые вы от них ждете, или теряются в его дебрях. Для тестирования нужно расписать информационную архитектуру своего сайта в форму Treejack. Звучит страшно, но каждая строка формы подписана, если знаете английский — легко справитесь. Также нужно поставить задачи участникам тестирования, к примеру, найти мобильный телефон на сайте. На выходе получите исчерпывающую статистику в виде таблиц и диаграмм. Бесплатная демо-версия позволяет опросить 10 человек.

• OptimalSort — тестирование по методу сортировки карточек.
  Помогает выяснить, как пользователь думает, какие принимает решения и как ему проще достичь конечной цели на вашем сайте. Как это работает: все элементы контента сайта «выписывается» в отдельные карточки, а участникам предлагается отсортировать их так, как им было бы понятно и удобно. В результате вы получаете отчеты в виде таблиц, матриц, дендрограмм и понимание ментальной модели ваших пользователей. В бесплатной версии можно протестировать 30 карточек, опросив 10 человек.

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

Результаты тестирования макета сайта с помощью Chalkmark

В платной версии можно проводить онлайн-опросы с быстрой обратной связью.

5. Feng-GUI

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

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

Не хотите разбираться в интерфейсах и статистиках англоязычных ресурсов? Идите в народ. К примеру, для оценки дизайна страницы разместите скриншот на revision.ru или подобных площадках, поинтересуйтесь мнением «местных» — web-дизайнеров, разработчиков и других специалистов. Проведите опросы в соцсетях, например, в тематических сообществах, или соберите фокус-группу среди своих знакомых. Для более или менее объективного анализа юзабилити достаточно опросить 5 респондентов (по некоторым данным 8) из своей целевой аудитории.

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

---

Подготовила Ольга Мороз

pr-cy.ru

обзор и сравнение / Евростудио corporate blog / Habr

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

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

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

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

UsabilityHub

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

• Navflow позволяет анализировать, насколько легко пользователи ориентируются на странице сайта.
• Fivesecondtest помогает выявлять элементы дизайна, привлекающие наибольшее внимание посетителей.
• ClickTest создает карту кликов (heatmap), показывающую области веб-страницы, на которые пользователи кликают чаще всего.

Как это работает. На примере Fivesecondtest

Выбираем одно из трех приложений для тестирования веб-страницы.

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

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

После этого задаем желательное количество просмотров страницы и запускаем тест. Когда на вопросы ответит нужное число людей, получаем результат.

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

У каждого пользователя приложения есть своя «карма». Свежезарегистрированный пользователь получает 20 очков кармы, плюс, за каждую протестированную страничку еще по 1 очку. Сколько очков — столько людей смогут просмотреть загруженный скриншот и ответить на вопросы.

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

UserPlus

На этом сайте можно протестировать веб-страницы двумя способами:

• Самостоятельно, с помощью The Advisor Tool.
• На реальных людях, с помощью инструмента The Tester Tool.

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

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

Как это работает?

Создаем проект и загружаем скриншоты страниц сайта. (В бесплатном варианте можно загружать один скриншот в месяц.)

Затем размечаем скриншот элементами интерфейса.

Отвечаем на вопросы check-листа по всем выбранным элементам интерфейса. Список вопросов получается довольно внушительный.

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

Usabilla

Тестирование юзабилити на сайте Usabilla проходит в пять этапов:

• Создаем новый тест: указываем URL сайта, который собираемся тестировать, и язык тестирования. Доступно 20 языков, в том числе русский.
• Указываем страницы сайта для тестирования. Можно загрузить их скриншоты с компьютера или указать путь к ним на сайте.
• Выбираем вопросы, на которые хотим получить ответы от пользователей. Можно воспользоваться стандартными, заранее предопределенными вопросами или сформулировать свои собственные.
• Сами находим и приглашаем людей, готовых принять участие в тестировании и поделиться своим мнением.
• Программа аккумулирует результаты тестов и отзывы пользователей, а затем предоставляет статистику, сгруппированную в удобном для анализа виде. Тестируемые страницы можно просматривать в виде тепловых карт активности (heatmap).

Видео дает довольно точное представление о том, как работает Usabilla.

Бесплатно можно протестировать две страницы на десяти людях.

СonceptFeedback

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

В рунете есть ресурсы, аналогичные ConceptFeedback: re:vision и Russian Creators.

Optimal Workshop

На сайте OptimalWorkshop можно оптимизировать сайт, используя три разных инструмента:

• Optimalsort — это инструмент, который помогает организовать структуру сайта с помощью метода сортировки карточек.
• Treejack — приложение для тестирования многоуровневой информационной архитектуры (ИА) сайта. Чтобы начать тестирование, структуру веб-сайта необходимо организовать как таблицу и загрузить в Treejack.
• Calkmark предназначен для тестирования юзабилити веб-страниц. Он помогает понять, насколько просто (или сложно) пользователям сайта находить нужную информацию. Чтобы начать работу, загружаем скриншот веб-страницы и ставим перед пользователями какую-либо задачу. Calkmark накапливает ответы и выдает результаты тестирования в виде тепловой карты кликов, а также сообщает среднее время, необходимое для выполнения каждой задачи.

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

В бесплатной версии можно создавать только небольшие проекты, со следующими ограничениями:

• OptimalSort: десять участников и 30 карточек за один опрос.
• Chalkmark и Treejack: 10 участников и 3 обследуемые задачи за один опрос.

4Q

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

Интегрируется с Google Analytics и доступен на 10 языках, хотя русского, к сожалению, среди них пока нет.

Feng-GUI

Feng-GUI имитирует взгляд пользователя в течение первых 5 секунд воздействия визуального эффекта. Это приложение создает карту движения глаз по странице (heatmap) на основе алгоритма, который предсказывает, на что, скорее всего, будет смотреть реальный человек.

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

ClickHeat

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

WebVisor

Российская система, которая после установки javasript-кода на страницы сайта, позволяет отслеживать и анализировать поведение пользователей.

С ее помощью можно:

• Записывать действия посетителей сайта: клики, скроллинг, нажатие клавиш, заполнение форм, выделение и копирование текста.
• Воспроизводить записанные действия в режиме «живого видео».
• Проводить детальную аналитику поведения посетителей веб-сайта.
• Составлять карты активности пользователей: тепловые карты кликов, карты внимания и карты скроллинга.

В бесплатной версии записываются 100 посещений в день, воспроизводятся для анализа 2 из них, а данные хранятся в системе WebVisor в течении двух суток.

SitePolice

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

Как это работает?

• Заказчик выставляет свой сайт на суд «полицейских», формулирует несколько вопросов, на которые хотел бы получить ответы и выбирает тарифный план аудита.
• Аудиторы пишут отчет по сайту в практически свободной форме. В отчете есть только два обязательных раздела: «анализ юзабилити сайта и способы решения проблем» и «общий вывод». За свои отчеты и активность на сайте «полицейские» получают баллы, которые потом могут превратить в деньги.
• Если заказчик аудита не против, то все отчеты «полицейских» остаются на сайте сервиса для общего просмотра.

К сожалению, бесплатной или тестовой версии сервиса для заказчиков аудита не существует.

Сравнительная таблица инструментов для юзабилити-тестирования

Название	Русский язык	Кто тестирует	Объекты тестирования	Результаты тестирования	Наличие бесплатной версии
UsabilityHub	Есть	Тестеры сервиса; другие пользователи UsabilityHub	Скриншот веб-страницы	Ответы на вопросы, сформулированные в начале теста; тепловая карта кликов	Бесплатно с ограничением — пользователи бесплатной версии должны сами тестировать чужие сайты
UserPlus	Есть	Своими силами с помощью опросника; тестеры сервиса (в бета-версии)	Скриншот веб-страницы	Оценка страницы на соответствие международным стандартам	Бесплатно с ограничением — один скриншот в месяц
Usabilla	Нет	Пользователи, приглашенные заказчиком тестирования	Скриншот веб-страницы; страница «живого» сайта	Отчеты о действиях пользователей, сгруппированные для последующего анализа; тепловая карта кликов	Бесплатно с ограничениeм — 2 страницы, 10 пользователей
Concept Feedback	Нет	Участники сообщества веб дизайнеров	Скриншот веб-страницы; страница «живого» сайта	Отзывы, оценки и советы участников профессионального сообщества	Бесплатно
OptimalWorkshop	Нет	Пользователи, приглашенные заказчиком тестирования	Скриншот веб-страницы; информационная архитектура сайта	Информационная структура сайта; тепловая карта кликов; количество времени, потраченное пользователями на выполнения какой-либо задачи	Бесплатно с ограничением — OptimalSort: 10 участников и 30 карточек, Chalkmark и Treejack: 10 участников и 3 задачи
4Q	Нет	Реальные пользователи	Рабочий сайт	Ответы пользователей на 4 вопроса опросника	Бесплатно
Feng-GUI	Есть	Своими силами, с помощью программы, имитирующей взгляд пользователя на основании специального алгоритма	Скриншот веб-страницы	Тепловая карта движения глаз по страничке	Бесплатно с ограничением — ката движения глаз маленького размера
ClickHeat	Есть	Реальные пользователи сайта	Рабочий сайт	Тепловая карта кликов	Бесплатно
WebVisor	Есть	Реальные пользователи сайта	Рабочий сайт	Видео-запись действий реальных пользователей; карты активности; аналитика	Бесплатно с ограничением — запись 100 посетителей в день, показ 2 посещений в день, хранение информации 2 дня
SitePolice	Есть	Реальные пользователи сайта	Рабочий сайт	Отчет аудитора в свободной форме	Бесплатной версии нет

P.S. Статья про буржуйские инструменты раньше был опубликован в нашем блоге. Для Хабр-версии убрали из нее описание сервиса Userfly (о нем уже рассказывал WieFix в своем хабратопике), добавили два русскоязычных сервиса и сравнительную таблицу.

habr.com

Тестируем производительность сайта: 15 бесплатных инструментов

Я подобрал 15 инструментов для тестирования производительности и быстродействия сайта. На момент написания статьи все эти инструменты были бесплатными и не предполагали установки какого-либо программного обеспечения для тестирования.

Некоторые инструменты, такие как Webpagetest и LoadImpact, очень сложные, в то время как другие, вроде Redbot или Alertra, всего лишь осуществляют простые проверки быстродействия сайта.

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

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

Водопад-диаграммы помогают отследить, какой компонент может быть причиной медленной загрузки сайта. Webpagetest также отмечает начало отрисовки страницы и момент полной ее загрузки страницы.

Ещё один замечательный инструмент, позволяющий проверить быстродействие сайта. Он предоставляет оценки Google PageSpeed Grade и Yslow Grades. Я рекомендую этот инструмент, если вы хотите улучшить производительность.

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

Предоставляет прекрасные сервисы мониторинга и включает в себя бесплатный инструмент тестирования производительности веб-страниц. Главный отчёт – это водопад-диаграмма времени загрузки сайта.

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

Отчеты позволяют легко получить заголовки ответа от каждого HTTP-запроса. Это может принести пользу, если вы осуществляете тонкую настройку заголовков ответов HTTP для увеличения производительности.

Уделите внимание деталям. Здесь наш сайт получил 69 баллов, но время загрузки было только 0,5с. Это быстрее, чем у 97% всех протестированных сайтов.

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

Новый сервис с множеством инструментов. Результаты их работы похожи на Google PageSpeed, но размещение и удобство использования на высоте. К каждому плохому результату теста добавляется объяснение.

Feedthebot пригодится для объяснения клиентам проблем, связанных с оптимизацией производительности сайта.

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

Тест производительности сайта из 20 местоположений всего в один клик. Мне нравится этот инструмент, потому что он производит полное браузерное тестирование. Отчёт включает в себя водопад-диаграммы из всех 20 местоположений! Иногда проблемы в работе Сети могут снижать производительность сайт. Но их может быть сложно обнаружить без мониторинга из разных местоположений.

Инструмент SpotCheck от Alertra отлично подходит, чтобы быстро определить работает ли сайт при обращении к нему из нескольких местоположений. Я часто использую его, чтобы быстро проверить сайты, когда клиенты сообщают о проблемах. Обычно если тест Alertra не показывает проблем, то это значит, что проблема изолирована в узком регионе или это что-то, связанное с действиями конкретного клиента.

Это интересная маленькая утилита позволяет посмотреть, что загружается быстрее. Вставьте два URL-адреса в форму и нажмите «Go». Это может быть полезным, если требуется проводить быстрые тесты разных сайтов или продемонстрировать клиенту, насколько быстрее сайт может загружаться с другого хостинга.

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

Круговая диаграмма, показывающая распределение HTTP-запросов по типу контента. Здесь мы видим, что более 40% запросов приходятся на JavaScript, что может быть улучшено слиянием js-файлов.

Небольшая утилита для проверки HTTP заголовков. Вы удивитесь, узнав, как много сайтов имеют плохо сформированные заголовки. Они могут убить кэширование, навредить эффективности CDN-контента и привести к отображению неверных страниц на мобильных устройствах. Я использую этот инструмент, чтобы показать клиентам, какие заголовки отправляет их сайт. Если заголовки отправляет веб-приложение, они могут переслать эти отчёты своим разработчикам, чтобы исправить имеющиеся проблемы.

Осуществляет быструю проверку времени загрузки сайтов из 30 местоположений. Инструмент поможет обнаружить проблемы с Сетью, которые влияют на время загрузки страниц.

Быстрый генератор водопад-диаграмм. Может быть полезен, когда нужно проводить многократные тесты.

Быстрые отчёты с водопад-диаграммами – вот чем полезен этот инструмент. Не слишком много деталей, но тест выполняется быстро и бесплатно!

Набор утилит для проверки скорости работы хостинга, DNS и прочего. Его разработчики постоянно обновляет набор инструментов сервиса.

Это не инструмент тестирования. Но если DNS не работает, то сайт может быть недоступен. Проверяйте поддомены, использующиеся для CDN и другого контента, опубликованного на вашем сайте.

Инструмент позволяет управлять несколькими WordPress-сайтами из одного места.

Данная публикация представляет собой перевод статьи «15 Free Website Performance Testing Tools» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru