Тестирование веб-сайта: учимся разбираться в UX и UI

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

Зачем нужно тестировать сайт

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

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

Особенности тестирования

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

Виды проверки:

  • Интеграционные. Существуют для проверки нескольких функций, которые взаимодействуют между собой. Они создают вид реальных пользователей, выполняющих конкретные действия. После проверки отправляется отчет. 
  • Блочные. Их составляют разработчики для тестирования отдельных опций сайта. Они тестируются в изолированном режиме. 
  • Тесты для проверки сразу всей системы. Проверяют всю страницу на соответствие с ТЗ.

Цели и методы

Не всегда разработчики уделяют внимание устранению багов страницы перед запуском, а зря. Если не проверить ресурс, то потом могут обнаружиться ошибки, которые сложно будет исправить. Лучше сделать это до запуска веб – страницы. Если не обратить внимание на тестирование, работа может быть провалена и проект будет отправлен на доработку. В результате портится репутация исполнителя. 

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

Поэтому одна из основных целей тестирования ресурса – обнаружение неисправностей и устранение их до запуска. Для контроля приглашается опытный специалист — тестировщик. Он создаст ситуации, которые могут возникнуть при работе ресурса. После этого проводится анализ и устранение обнаруженных ошибок. 

Тестирование делится на несколько этапов и проводится на разных браузерах для достоверных результатов. Вот основные из них:

  • Проверка контента на функциональность
  • Юзабилити – оценка удобства интерфейса для пользователей
  • Проверка производительности
  • Оценка уровня безопасности веб – страницы
  • Анализ интерфейса

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

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

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

Для тестирования веб — сайта нужен чек – лист. Он означает:

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

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

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

Как тестировать контент

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

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

Рассмотрим более подробно вышеописанные этапы. 

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

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

  • Проверяется работоспособность основных опций контента
  • Открываются ли ссылки, которые ведут на одну страницу
  • Корректны ли внутренние ссылки, можно ли на них перейти, чтобы ознакомиться с конкретной информацией или продукцией
  • Проверка функциональности со стороны пользователей. Можно ли добавить комментарии, пожелания. Проверяется возможность обратной связи
  • Успешная авторизация. Во время максимальной нагрузки сайт может плохо загружаться и не всегда удается зайти в личный кабинет. А бывает так, что заказ нужно сделать как можно быстрее. В таком случае пользователь не станет ждать, а пойдет на страницу конкурента. Тестирование позволяет выявить проблемы, и сразу устранить
  • Проверяется функциональность покупки и заказа товаров. Важно, чтобы пользователь с первого раза мог положить покупки в виртуальную корзину, а потом оформить заказ. 
  • Проверяется возможность удалить или отменить заказ. Иногда случается, что пользователь оформил заказ, потом передумал. Важно, чтобы на сайте была возможность отмены. 
  • Контент полностью сверяется с тем, который просит заказчик. Чтобы не тратить свое и заказчика время, разработчики создают контент, четко соблюдая ТЗ. 

Юзабилити тестирование

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

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

Разница между UI и UX:

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

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

Почему этот этап тестирования важен?

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

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

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

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

Рекомендации, как правильно произвести UI тестирование:

  • Важно следить за правильной последовательностью категорий товаров, если это продающий сайт. Клиенты любят порядок вплоть до того, что продукция должна быть расставлена по цветам и в алфавитном порядке. Цвет желательно подбирать один на все виды продукции. К примеру, если это конкретная бытовая техника, то на странице она должна быть в одном цвете, а ниже примечание, что расцветка может быть разная. 
  • Следите, чтобы была правильная работа скролла. Полоса прокрутки не должна отвлекать внимание от самой продукции. Если она слишком большая, ее лучше откорректировать.
  • Одна из самых распространенных ошибок, которая случается при обновлении страницы – ошибка в подвале контента. Нужно сразу исправить код. 
  • Дизайн должен быть ненавязчивым, а выравнивание должно быть по центру. 
  • Элементы должны быть одного, органического размера. Отличие в размерах не должно бросаться в глаза. 
  • При обнаружении некорректной верстки изображения, эту ошибку нужно исправить. 
  • На сайте не должно быть лишних всплывающих ссылок. Они отвлекают внимание от основного направления ресурса. 
  • Проверьте, чтобы интерфейс был адаптирован под мобильное приложение. Не всегда пользователь заходит на сайт с компьютера, иногда и с мобильного телефона или планшета. 
  • Нужно оптимизировать размер картинок. Приятно, когда картинки одного размера и формата. 

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

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

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

Когда лучше провести нагрузочное тестирование торговой площадки

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

Варианты нагрузочного тестирования:

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

Во время нагрузочного контроля чаще всего применяется инструмент Яндекс.Танк. Инструмент позволяет провести анализ производительности контента. Основное преимущество заключается в том, что все результаты сохраняются в архивах. 

Этапы нагрузочного тестирования:

  • Подготовка инструмента Яндекс.Танк
  • Проверка лимита посещаемости и активности
  • Сам тест. Его лучше провести несколько раз для более достоверных результатов. 

Тестирование на уязвимости

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

Основные принципы безопасности, которые нужно проверить перед использованием портала:

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

Уязвимость контента обнаруживается во время тестирования, поэтому этот этап проверки важно соблюсти. 

Самые распространенные виды уязвимости:

  • XSS (Cross-Site Scripting) – распространенный вид уязвимости. Он заключается в том, что на странице появляются различные вредные скрипты. Основная цель скриптов – атака пользователей. 
  • XSRF / CSRF (Request Forgery) – основан на недостатках НТТР протокола. Злоумышленники устанавливают ссылку на вредный портал прямо на странице ресурса. Сохраняются все данные пользователей, которые попадают в руки злоумышленников. 
  • Сode injections (SQL, PHP, ASP и т.д.) – появляется возможность получить код к конкретной программе. Он оказывается у злоумышленников и с его помощью они взламывают программу.
  • Server-Side Includes (SSI) Injection – в этой ошибке используется запуск команд напрямую с портала. 

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

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