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

Размещено на http://www.allbest.ru/

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



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

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

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

Основными целями тестирования сайта являются:

Выявление недостатков сайта, которые препятствуют его маркетинговой и коммерческой эффективности;

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

Тестирование решает несколько основных задач:

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

Подтверждение, что приложение способно выполняться во всех заявленных режимах и на всех поддерживаемых ОС или Web-браузерах корректно;

Гарантия того, что хранимые и обрабатываемые данные надежно защищены от постороннего доступа и "взлома";

Определение максимальной нагрузки на сервер, локальную сеть и то, что БД может быть корректно обработана приложением;

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

Основными целями тестирования сайта являются:

Выявление недостатков сайта, которые препятствуют его маркетинговой и коммерческой эффективности;

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

Тестирование решает несколько основных задач:

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

Подтверждение, что приложение способно выполняться во всех заявленных режимах и на всех поддерживаемых ОС или Web-браузерах корректно;

Гарантия того, что хранимые и обрабатываемые данные надежно защищены от постороннего доступа и "взлома";

Определение максимальной нагрузки на сервер, локальную сеть и то, что БД может быть корректно обработана приложением;

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

Этапы работы

1. Предварительный аналитический этап	Анализ имеющейся маркетинговой информации о компании и статистических данных сайта; выяснение и уточнение задач, которые должен решать сайт; определение несоответствий между ожиданиями владельцев сайта и поведением пользователей.
2. Планирование	Составление плана тестирования; определение «точек» сайта, на которое нужно обратить наибольшее внимание.
3. Разработка опорных документов	Подготовка заданий пользователям, которые будут принимать участие в тестировании; подготовка анкет для опроса после тестирования.
4. Подбор пользователей для тестирования	Основные условия: пользователи должны входить в целевую аудиторию и не иметь опыта посещений тестируемого сайта.
5. Тестирование сайта(по выбранному виду)
6. Обработка результатов	Анализ видео- и аудиозаписей, сведение и анализ результатов опроса.
7. Подготовка выводов и рекомендаций по устранению ошибок и недочетов

сайт тестирование скрипт сервер

Возможные риски

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

Виды тестирования:

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

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

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

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

Проверка верности HTML-кода страниц сайта. Для такого рода тестирования написано множество утилит -- от простеньких скриптов на perl-е до мощных валидаторов, проверяющих весь сайт на соответствие стандартам (а некоторые валидаторы могут в автоматическом режиме исправлять найденные недочеты, например, пропущенные закрывающие теги и т.д.). Часто такие средства встраивают в веб-редакторы, существуют браузеры с встроенными валидаторами. Примером такого теста является утилита Tidy -- изначально консольная программа, она имеет несколько разных графических интерфейсов, может автоматически подсвечивать неверный код и исправлять некоторые ошибки. Также ее можно использовать при разработке -- TidyLib включает в себя всю необходимую функциональность и может подключаться к программам, написанным на Java, Pascal, .NET, C++, Perl, PHP.

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

Тестирование проводится с участием нескольких человек из целевой аудитории, так называемых респондентов. Для проведения тестирования достаточно 4-6 человек. Существует правило 80/20, которое гласит, что 20% пользователей дают 80% результата. Поэтому такое количество респондентов максимально эффективно с точки зрения экономии времени и затрат.

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

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

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

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

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

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

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

Метод обратной карточной сортировки



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

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

При использовании метода тестирования ожиданий выявляются дефекты. Дефекты -- это расхождение ожиданий и запланированного поведения системы.

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

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

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

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

Метод Eye tracking

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

Не стоит также забывать о тестировании сайта в различных веб-браузерах. Для этого существуют различные сервисы (например: http://browsershots.org/, http://www.lunascape.tv/). Такую проверку можно сделать самостоятельно, установив программу IETester, которая протестирует сайт во всех используемых версиях Internet Explorer, а далее протестировать в остальных браузерах.

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

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

Разработка дизайна сайта предполагает несколько основных этапов:

Формулировка цели и описание проекта.

Сбор и анализ информации о проекте.

Разработка структуры и прототипа дизайна.

Составление технического задания.

Создание дизайна.

Утверждение дизайна и переделки.

Сдача проекта заказчику.

Формулировка цели и описание проекта.

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

Разработка структуры и прототипа дизайна.

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

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

Линейная

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

Древовидная (иерархическая)

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

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



Гибридная

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

Решетчатая

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

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

Для данного сайта была выбрана простая.

Layout и модульная сетка

Layout

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

Что на сайте является главным, а что второстепенным

Логично ли располагаются блоки

Удобство

Модульная сетка

Модульная сетка (модульная система верстки) - это система верстки, при которой основой композиции разворотов и полос становится модульная сетка с заданным шагом, одинаковым или различным по вертикали и горизонтали.

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

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

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

название;

логотип фирмы или сайта;

меню навигации;

основное содержание страницы.

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

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

Модульная сетка из двух колонок считается самой популярной и ориентирована она на разрешение экрана 1024х768. Следовательно, что сумма ширины всех колонок составит 900 пикселей. Это даст пользователям возможность избавиться от горизонтальной прокрутки экрана, при малом разрешении монитора.



Пример простой модульной сетки

Пример сложной модульной сетки

Для данного дизайна сайта была сделана простая модульная сетка, которая создавалась в программе Photoshop при помощи направляющих(Grids) и прямоугольного выделения Rectangular Tool.

Настройки направляющих



Выбранная модульная сетка

Выбор цветового решения

Подбор цветового решения для веб-сайта

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

Восприятие зависит от нескольких факторов:

Восприятие сайта целиком

Психологическое и физиологическое состояние посетителя

Форма элементов дизайна

Как выглядят мелкие детали

Как читается информация

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

1. Цвета должны соответствовать теме сайта и гармонировать между собой;

2. Выбранные цвета должны отвечать правилам логики;

3. Цветовой тон и насыщенность должны соответствовать фирменному стилю;

4. Количество цветов на сайте должно быть около 3-х;

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

6. Правильно выбрать цвет шрифта.

Понятие и значение цвета

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

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

RGB и CMYK

RGB (от сокр. Red+Green+Blue) -- составлена из красного, синего и зеленого цветов, которые при смешении даю белый цвет.

CMYK (от сокр. Cayn+Magenta+Yellow+Key) -- при смешивании голубого, пурпурного и желтого образуют черный цвет.

Гармоничные и не гармоничные цвета

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

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

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

Основные цвета. Они отвечают за само меню, кнопки, блоки, подвал.

Второстепенные цвета. Цвета, которые отвечают за границы меню, блоков, цвета текстов, ссылок и прочих элементов дизайна.

Цветовые решения для сайтов

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

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

Развлекательные сайты: преобладают яркие цветовые решения и более сложные схемы оформления.

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

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

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

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

Бизнес-сайт: никаких ярких цветов,спокойные, нейтральные тона, все строго и по-деловому оформлено.

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



Градация серого

Выбор стиля дизайна сайта

Размещено на Allbest.ru