UI/UX и Pixel Perfect

https://bugza.info/testirovanie-ui-i-verstki/

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

UI (user interface — пользовательский интерфейс) — является точкой взаимодействия человека и продукта. Дизайн кнопок, полей ввода и т.д. — это место, где пользователь взаимодействует с системой. Таким образом, Вы можете сравнить UI с рулем, педалями и приборной панелью автомобиля. Они используются для управления автомобилем так же, как приложение использует UI (пользовательский интерфейс) для управления системой. Короче говоря, дизайн пользовательского интерфейса (UI) — это дизайн точек взаимодействия, через которые пользователь может взаимодействовать с системой.

Тестирование интерфейса пользователя осуществляется вместе со следующими видами тестирования (UI):

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

Основные элементы графического интерфейса:

• Окно (окно браузера, диалоговое окно, модальное окно, плавающее окно).
• Меню (главное, всплывающее, контекстное, системное).
• Виджеты/элементы управления/контролы (аккордеон, кнопка, радио-кнопка, чек-бокс, значок (иконка), список, панель инструментов, дерево, полоса прокрутки, ползунок, строка состояния, тултип (подсказка) и др.).
• Вкладка.

Элементы взаимодействия: курсор мыши, текстовый курсор, поинтер (“ладошка”), курсор перетаскивания и др.

Основные проверки при тестировании UI:

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

Тестирование Pixel Perfect

Проверка точного (пиксель в пикcель) соответствия сверстанного HTML-шаблона оригиналу (PSD-макету). Другими словами, если наложить “картинку” сверстанного HTML-шаблона на картинку оригинального PSD-макета, то обе картинки должны совпадать. Совместиться должны все элементы картинок: текст, изображения, графические элементы.

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

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

User Experience (пользовательский опыт)— ощущение, испытываемое пользователем во время использования цифрового продукта, в то время как User interface — это инструмент, позволяющий осуществлять интеракцию «пользователь — веб-ресурс». UX — это то, что чувствует и запоминает пользователь в результате использования программы, приложения или сайта. UX учитывается при разработке UI, создании информационной архитектуры, юзабилити тестировании. Определив целевую аудиторию и характеристики основного пользователя можно составить список требований к проекту.

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

Ощущение, что мы получаем, когда едим бутерброд, можно считать UX, а ингредиенты сэндвича ассоциируются с UI

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

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

Процесс проектирования UX включает в себя исследование поведенческих паттернов и психологических реакций пользователей, разработку информационной архитектуры, дизайн взаимодействия (interaction design), дизайн пользовательского интерфейса, интерактивное прототипирование макета (interactive prototyping) и тестирование юзабилити (usability testing).

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

А вот дизайнеры пользовательского опыта должны дополнительно еще и разбираться в исследованиях целевого рынка, information architecture и дизайне взаимодействий (что автоматически подразумевает базовое знание поведенческой психологии) и т. д.

Тестирование удобства пользования (Usability Testing)

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

Тестирование удобства пользования (Usability Testing) — это метод тестирования, направленный на установление степени удобства использования, обучаемости, понятности и привлекательности для пользователей разрабатываемого продукта в контексте заданных условий.

Этапы тестирования удобства использования пользовательского интерфейса:

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

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

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

4. Сравнительное — данный вид тестирования может проводиться на любом этапе разработки интерфейса. В ходе сравнительного тестирования сравниваются два или более вариантов реализации пользовательского интерфейса.

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

На какие требования стоит обращать внимание при UI-тестировании:

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

Важно обращать внимание на:

• Простоту использования сайта или интерфейса.
• Эффективность использования.
• Запоминаемость.
• Ошибки, их количество и серьезность.
• Удовлетворение пользователя (субъективное).

Тестирование пользовательского интерфейса (UI) – тестирование, выполняемое путем взаимодействия с системой через графический интерфейс пользователя.

GUI тестирование включает:

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

Тестирование удобства использования (Usability Testing) – тестирование с целью определения степени понятности, легкости в изучении и использовании, привлекательности программного продукта для пользователя при условии использования в заданных условиях эксплуатации:

• визуальное оформление;
• навигация;
• логичность.

Compatibility testing (тестирование совместимости) – процесс тестирования для определения возможности взаимодействия программного продукта, проверка работоспособности приложения в различных средах (браузеры и их версии, операционные системы, их типы, версии и разрядность)

Виды тестов:

• Кросс-браузерное тестирование (различные браузеры или версии браузеров).
• Кросс-платформенное тестирование (различные операционные системы или версии операционных систем).

todo добавить инструменты UI, UX и Pixel Perfect тестирования