НИР: Сбор и анализ UX-метрик для оптимизации пользовательского веб-интерфейса

РЕФЕРАТ

НИР-3 содержит: 23 с., 5 рис., 4 табл., 24 источника.

UX-МЕТРИКИ, ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС, МОБИЛЬНОЕ ПРИЛОЖЕНИЕ, A/B-ТЕСТИРОВАНИЕ, ИНТЕРНЕТ ВЕЩЕЙ (IoT), ЭРГОНОМИКА, АГРОПРОМЫШЛЕННЫЙ КОМПЛЕКС.

Объект исследования — пользовательский веб-интерфейс системы мониторинга и управления тепличным комплексом.

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

Цель работы — снизить количество пользовательских ошибок и ложных срабатываний в веб-интерфейсе системы управления тепличным комплексом путём сбора и анализа UX-метрик.

В ходе работы выполнено проектирование клиентского веб-приложения (MVP) по принципу Mobile-First на фреймворке React.js. Разработан программный модуль автоматической фиксации метрик взаимодействия — времени реакции (TTR) и частоты ошибок ввода (Error Rate). Для выявления паттернов ложных срабатываний проведено тестирование интерфейса на группе пользователей в условиях имитации тепличной среды. По итогам анализа внедрены методы контекстной адаптации: высококонтрастный режим и масштабирование сенсорных зон (Glove Mode).

В результате разработан и оптимизирован MVP мобильного веб-приложения. Сравнение метрик до и после изменений (A/B-тестирование) подтвердило их эффективность. Масштабирование активных зон по закону Фиттса снизило долю ошибочных нажатий при работе в перчатках более чем в 8 раз — с 34% до 4%.

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

Содержание ВВЕДЕНИЕ 7

1 РАЗРАБОТКА MVP КЛИЕНТСКОГО ПРИЛОЖЕНИЯ И МЕТОДИКА ИССЛЕДОВАНИЯ 9

1.1 Обоснование выбора стека технологий и архитектуры Mobile-First для IoT-интерфейса 9

1.2 Проектирование базовой версии (MVP) веб-интерфейса системы управления теплицей 9

1.3 Разработка программного модуля для сбора UX-метрик (Time on Task, Error Rate)

................................................................................................................................................ 11

1.4 Формирование сценариев и методики проведения практического тестирования.. 12

2 ПРОВЕДЕНИЕ ТЕСТИРОВАНИЯ И АНАЛИЗ ПОЛЬЗОВАТЕЛЬСКОГО ВЗАИМОДЕЙСТВИЯ 14

2.1 Условия проведения эксперимента (имитация инсоляции и работы в средствах защиты) 14

2.2 Сбор и анализ метрик скорости реакции и успешности выполнения задач........... 15

3 ОПТИМИЗАЦИЯ ВЕБ-ИНТЕРФЕЙСА И ОЦЕНКА ЭФФЕКТИВНОСТИ................. 17

3.1 Внедрение адаптивных изменений на основе паттернов ошибок............................ 17

3.2 Повторное тестирование и сравнительный анализ UX-метрик (A/B тестирование)

................................................................................................................................................ 18

3.2.2 Результаты................................................................................................................ 19

3.2.4 TTR и Time on Task................................................................................................... 19

3.3 Подготовка итогового интерфейса к интеграции с бэкендом (для ВКР)................ 20

3.3.2 Точки интеграции.................................................................................................... 20

3.3.3 Обработка отказов................................................................................................... 21

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ............................................................. 23

ПЕРЕЧЕНЬ СОКРАЩЕНИЙ И ОБОЗНАЧЕНИЙ

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

API (Application Programming Interface) — программный интерфейс приложения, набор готовых классов, процедур, функций, структур и констант, предоставляемых приложением для использования во внешних программных продуктах

DOM (Document Object Model) — объектная модель документа, независимый от платформы и языка программный интерфейс, позволяющий программам и скриптам получать доступ к содержимому HTML и изменять его

HCI (Human-Computer Interaction) — человеко-машинное взаимодействие, междисциплинарное научное направление, изучающее процессы взаимодействия человека и компьютерных систем

IoT (Internet of Things) — Интернет вещей, концепция вычислительной сети физических предметов («вещей»), оснащённых встроенными технологиями для взаимодействия друг с другом или с внешней средой

MVP (Minimum Viable Product) — минимально жизнеспособный продукт, ранняя версия продукта (в данном случае — интерфейса), обладающая минимальным, но достаточным набором функций для удовлетворения первичных потребностей и сбора обратной связи для дальнейшей разработки

SPA (Single Page Application) — одностраничное веб-приложение, использующее один HTML-документ как оболочку для всех страниц и динамически подгружающее контент с помощью jаvascript

ToT (Time on Task) — время выполнения задачи, объективная метрика юзабилити, отражающая количество времени, затраченного пользователем на успешное завершение целевого сценария в интерфейсе

TTR (Time to Respond) — время реакции (отклика) оператора на возникший инцидент (от момента появления визуального сигнала до целевого действия)

UI (User Interface) — пользовательский интерфейс, совокупность графических элементов (кнопки, меню, формы), через которые пользователь взаимодействует с программным обеспечением

UX (User Experience) — пользовательский опыт, восприятие и ответные реакции пользователя, возникающие в результате использования или предстоящего использования системы (удобство, логика, эмоциональный отклик)

WCAG (Web Content Accessibility Guidelines) — международное руководство по обеспечению доступности веб-контента, устанавливающее стандарты контрастности и читаемости интерфейсов

ВВЕДЕНИЕ

Сейчас системы управления тепличными комплексами все чаще строятся как веб-приложения, которые оператор открывает прямо со смартфона на объекте. Это удобно — не нужно идти к стационарному терминалу, чтобы отреагировать на инцидент. Но вместе с тем интерфейс попадает в непростые условия: яркое естественное освещение бьёт в экран, перчатки мешают точному касанию, а принимать решения надо быстро. Все это в совокупности повышает риск ошибочных действий и ложных срабатываний. [1]

В ходе работы разработан прототип интерфейса и проверены три способа адаптации: цифровой двойник, высококонтрастный режим и Glove Mode. Количественные оценки получены на имитационных данных. Однако прототип ещё не готов для реальной эксплуатации. Чтобы продолжить работу над ВКР, нужно собрать метрики на действующем MVP и понять, какие именно ошибки допускают люди при работе с интерфейсом [2].

Объект исследования — пользовательский веб-интерфейс системы управления тепличным комплексом «Умная грядка».

Предмет исследования — методы сбора и анализа UX-метрик, направленные на снижение числа ошибок пользователя.

Цель работы — снижение количества пользовательских ошибок и ложных срабатываний в веб-интерфейсе системы управления тепличным комплексом на основе сбора и анализа UX-метрик.

Для достижения цели поставлены следующие задачи:

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

Методы исследования: анализ литературы, проектирование по принципам Mobile-First, имитация условий эксплуатации, A/B-тестирование, количественный анализ UX-метрик.

Практическая значимость. Разработанный MVP, методика сбора метрик и результаты экспериментов — это основа клиентской части проекта «Умная грядка» для ВКР. Предложенный подход к автоматизированному сбору UX-метрик можно

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