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

Лабораторная работа №8

Тестирование пользовательского интерфейса (https://qaevolution.ru/testirovanie-po/vidy-testirovaniya-po/testirovanie-polzovatelskogo-interfejsa/)

 

Теория

 

Графический интерфейс пользователя (Graphical user interface, GUI) –разновидность пользовательского интерфейса, в котором элементы интерфейса (меню, кнопки, значки, списки и т. п.), представленные пользователю на дисплее, исполнены в виде графических изображений.

GUI (Graphical User Interface) Testing – тестирование графического пользовательского интерфейса.

Варианты реализации GUI

– интерфейс настольного приложения

– мобильный интерфейс

– веб интерфейс

 

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

ü навигация

ü цвета, графика, оформление

ü содержание выводимой информации

ü поведение курсора и горячие клавиши

ü отображение различного количества данных (нет данных, минимальное и максимальное количество)

ü изменение размеров окна или разрешения экрана

 

Проверяется в целом общий вид приложения и в отдельности формы, расположенные на странице.

 

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

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

 

UI ー это User Interface, в переводе с английского «пользовательский интерфейс».

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

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

· окно (окно браузера, диалоговое окно, модальное окно, плавающее окно)

· меню (главное, всплывающее, контекстное, системное)

· виджеты/элементы управления/контролы (аккордеон, кнопка, радио-кнопка, чек-бокс, значок (иконка), список, панель инструментов, дерево, полоса прокрутки, ползунок, строка состояния, тултип (подсказка) и др.)

· вкладка

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

Общие проверки:

· Вид элементов при уменьшении окна браузера + появление скрола

· Правильность написания текста + текст должен быть выровнен

· Правильность перемещения фокуса в окне (Tab / Tab+Shift)

· Выбранные элементы выделяются

· Неизменяемые поля выглядят одинаково и отличаются от редактируемых

· Желательно не использовать двойной клик

· Проверка наличия нужных нотификейшенов

· Унификация дизайна (цвет, шрифт, размер)

· При необходимости должны быть тултипы

· Изменение вида элемента при ховере на него

· Если формы дублируются, то должны быть одинаковые названия

 

Дополнительные проверки для веб-форм

Текстовое поле

· Проверить выделение текста с помощью Ctrl+A / Shift+стрелка

· Проверка ввода длинного текста

Радио-баттон

· Расположение возле соответствующего текста

· Переключение кнопок с помощью клавиатуры

Чек-боксы

· Установить чекбокс кликом и пробелом

· Расположение возле соответствующего текста

Выпадающие списки

· Должна быть функция прокрутки

· Должны располагаться по алфавиту (если текст), по возрастанию (если числовые значения)

· Если элемент был выбран, то должен находиться сверху либо обозначен, что он выбран

Поп-ап

· Расположение по центру окна

 

Основные моменты при проверке GUI:

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

· реализуется ли функционал приложения с помощью графических элементов

· размещение всех сообщений об ошибках, уведомленией (а также шрифт, цвет, размер, расположение и орфография текста)

· читабелен ли использованный шрифт

· переходит ли курсор из текстового в поинтер при наведении на активные элементы, выделяются ли выбранные элементы

· выравнивание текста и форм

· качество изображений

· проверить расположение и отображение всех элементов при различных разрешениях экрана, а также при изменении размера окна браузера (проверить, появляется ли скролл)

· проверить текст на орфографические, пунктуационные ошибки

· появляются ли тултипы (если есть необходимость)

· унификация дизайна (цвета, шрифты, текст сообщений, названия кнопок и т.д.)

 

Наиболее распространенные баги:

курсор не переходит в поинтер при наведении на активный элемент

· орфографические и грамматические ошибки

· не ровное расположение полей ввода в формах, самих форм

· неправильное отображение элементов при смене размера окна браузера и масштаба страницы

· изменение размера текста при смене языка

· неровное расположение форм

· разные шрифты

· выбранные элементы не отличаются от не выбранных

Задание:

 

Название приложения (тема КП)

1. Дать характеристику целевой аудитория, для которой предназначено Ваше приложение (пол, возраст, род занятий, уровень компьютерной грамотности и т.д.)

 

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

3. Провести тестирование пользовательского интерфейса в соответствии с пунктами (по возможности проиллюстрировать скриншотами):

 

1) Размер форм/окон (одинаковые /разные, квадратные/прямоугольные, размер в см …)

2) Положение форм/окон на экране (одинаковые/разные, по центру, левый верхний угол, …)

3) Характеристики теста (шрифт, размер, цвет,  читабельность, выравнивание, проверить текст на орфографические, пунктуационные ошибки…)

4) Расположение и отображение всех элементов интерфейса при различных разрешениях экрана, а также при изменении размера формы/окна (не изменяются/изменяются, появление скрола, предусмотрено изменение размера формы/окна…)

5) Перемещения фокуса в окне (Tab / Tab+Shift) (попорядку/хаотично….)

6) Поведение выбранных/выделенных элементов интерфейса (выделение, неизменяемые поля выглядят одинаково и отличаются от редактируемых…)

7) Унификация дизайна (цвета, шрифты, текст сообщений, названия кнопок и т.д. есть/нет единый стиль оформления)

8) Горячие клавиши (есть/нет, какие, где?)

9) Изображения (количество, качество, формат, размер…)

10) Меню (есть/нет, главное, всплывающее, контекстное …)

11) Характеристика сообщений об ошибках, уведомлений (есть/нет, шрифт, выравнивание, размер, формат/шаблон, иконки...)

12) Для текстовых полей: возможность ввода букв или цифр…, проверить выделение текста с помощью Ctrl+A / Shift+стрелка, проверка ввода длинного текста…

13) Для Радио-баттон: расположение возле соответствующего текста, переключение кнопок с помощью клавиатуры…

14) Для Чек-бокса: установить чекбокс кликом и пробелом, расположение возле соответствующего текста…

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