562 lines
58 KiB
TeX
562 lines
58 KiB
TeX
\documentclass[a4paper, final]{article}
|
||
%\usepackage{literat} % Нормальные шрифты
|
||
\usepackage[14pt]{extsizes} % для того чтобы задать нестандартный 14-ый размер шрифта
|
||
\usepackage{tabularx}
|
||
\usepackage{booktabs}
|
||
\usepackage[T2A]{fontenc}
|
||
\usepackage[utf8]{inputenc}
|
||
\usepackage[russian]{babel}
|
||
\usepackage{amsmath}
|
||
\usepackage[left=25mm, top=20mm, right=20mm, bottom=20mm, footskip=10mm]{geometry}
|
||
\usepackage{ragged2e} %для растягивания по ширине
|
||
\usepackage{setspace} %для межстрочно го интервала
|
||
\usepackage{moreverb} %для работы с листингами
|
||
\usepackage{indentfirst} % для абзацного отступа
|
||
\usepackage{moreverb} %для печати в листинге исходного кода программ
|
||
\usepackage{pdfpages} %для вставки других pdf файлов
|
||
\usepackage{tikz}
|
||
\usepackage{graphicx}
|
||
\usepackage{afterpage}
|
||
\usepackage{longtable}
|
||
\usepackage{float}
|
||
\usepackage{xcolor}
|
||
|
||
|
||
|
||
% \usepackage[paper=A4,DIV=12]{typearea}
|
||
\usepackage{pdflscape}
|
||
% \usepackage{lscape}
|
||
|
||
\usepackage{array}
|
||
\usepackage{multirow}
|
||
|
||
\renewcommand\verbatimtabsize{4\relax}
|
||
\renewcommand\listingoffset{0.2em} %отступ от номеров строк в листинге
|
||
\renewcommand{\arraystretch}{1.4} % изменяю высоту строки в таблице
|
||
\usepackage[font=small, singlelinecheck=false, justification=centering, format=plain, labelsep=period]{caption} %для настройки заголовка таблицы
|
||
\usepackage{subcaption} %для подфигур
|
||
\usepackage{listings} %листинги
|
||
\usepackage{xcolor} % цвета
|
||
\usepackage{hyperref}% для гиперссылок
|
||
\usepackage{enumitem} %для перечислений
|
||
|
||
\newcommand{\specialcell}[2][l]{\begin{tabular}[#1]{@{}l@{}}#2\end{tabular}}
|
||
|
||
|
||
\setlist[enumerate,itemize]{leftmargin=1.2cm} %отступ в перечислениях
|
||
|
||
\hypersetup{colorlinks,
|
||
allcolors=[RGB]{010 090 200}} %красивые гиперссылки (не красные)
|
||
|
||
% подгружаемые языки — подробнее в документации listings (это всё для листингов)
|
||
\lstloadlanguages{ SQL}
|
||
% включаем кириллицу и добавляем кое−какие опции
|
||
\lstset{tabsize=2,
|
||
breaklines,
|
||
basicstyle=\footnotesize,
|
||
columns=fullflexible,
|
||
flexiblecolumns,
|
||
numbers=left,
|
||
numberstyle={\footnotesize},
|
||
keywordstyle=\color{blue},
|
||
inputencoding=cp1251,
|
||
extendedchars=true
|
||
}
|
||
\lstdefinelanguage{MyC}{
|
||
language=SQL,
|
||
% ndkeywordstyle=\color{darkgray}\bfseries,
|
||
% identifierstyle=\color{black},
|
||
% morecomment=[n]{/**}{*/},
|
||
% commentstyle=\color{blue}\ttfamily,
|
||
% stringstyle=\color{red}\ttfamily,
|
||
% morestring=[b]",\
|
||
% showstringspaces=false,
|
||
% morecomment=[l][\color{gray}]{//},
|
||
keepspaces=true,
|
||
escapechar=\%,
|
||
texcl=true
|
||
}
|
||
|
||
\textheight=24cm % высота текста
|
||
\textwidth=16cm % ширина текста
|
||
\oddsidemargin=0pt % отступ от левого края
|
||
\topmargin=-1.5cm % отступ от верхнего края
|
||
\parindent=24pt % абзацный отступ
|
||
\parskip=5pt % интервал между абзацами
|
||
\tolerance=2000 % терпимость к "жидким" строкам
|
||
\flushbottom % выравнивание высоты страниц
|
||
|
||
|
||
% Настройка листингов
|
||
\lstset{
|
||
language=python,
|
||
extendedchars=\true,
|
||
inputencoding=utf8,
|
||
keepspaces=true,
|
||
% captionpos=b, % подписи листингов снизу
|
||
}
|
||
|
||
\begin{document} % начало документа
|
||
|
||
|
||
|
||
% НАЧАЛО ТИТУЛЬНОГО ЛИСТА
|
||
\begin{center}
|
||
\hfill \break
|
||
\hfill \break
|
||
\normalsize{МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ\\
|
||
федеральное государственное автономное образовательное учреждение высшего образования «Санкт-Петербургский политехнический университет Петра Великого»\\[10pt]}
|
||
\normalsize{Институт компьютерных наук и кибербезопасности}\\[10pt]
|
||
\normalsize{Высшая школа технологий искусственного интеллекта}\\[10pt]
|
||
\normalsize{Направление: 02.03.01 <<Математика и компьютерные науки>>}\\
|
||
|
||
\hfill \break
|
||
\hfill \break
|
||
\hfill \break
|
||
\large{Лабораторная работа №2}\\
|
||
\large{Рецензия пользовательского интерфейса LabelStudio}\\
|
||
\large{по требованиям ГОСТ Р ИСО 9241}\\
|
||
\large{по дисциплине}\\
|
||
\large{<<Разработка человеко-машинного интерфейса>>}\\
|
||
|
||
\hfill \break
|
||
\hfill \break
|
||
\end{center}
|
||
|
||
\small{
|
||
\begin{tabular}{lrrl}
|
||
\!\!\!Студент, & \hspace{2cm} & & \\
|
||
\!\!\!группы 5130201/20101 & \hspace{2cm} & \underline{\hspace{3cm}} &Тищенко А. А. \\\\
|
||
\!\!\!Преподаватель & \hspace{2cm} & \underline{\hspace{3cm}} & Курочкин М. А. \\\\
|
||
&&\hspace{4cm}
|
||
\end{tabular}
|
||
\begin{flushright}
|
||
<<\underline{\hspace{1cm}}>>\underline{\hspace{2.5cm}} 2025г.
|
||
\end{flushright}
|
||
}
|
||
|
||
\hfill \break
|
||
% \hfill \break
|
||
\begin{center} \small{Санкт-Петербург, 2025} \end{center}
|
||
\thispagestyle{empty} % выключаем отображение номера для этой страницы
|
||
|
||
% КОНЕЦ ТИТУЛЬНОГО ЛИСТА
|
||
\newpage
|
||
|
||
\tableofcontents
|
||
|
||
% \newpage
|
||
% \section*{Введение}
|
||
% \addcontentsline{toc}{section}{Введение}
|
||
|
||
% Современные интерактивные программные продукты для проектирования интерфейсов, такие как Figma, активно используются как профессиональными дизайнерами, так и начинающими пользователями. При этом фактическая удобство использования (usability) таких инструментов не всегда явно соотносится с требованиями эргономических стандартов.
|
||
|
||
% Серия стандартов ГОСТ Р ИСО 9241 посвящена эргономике взаимодействия человек--система и включает как принципы организации диалога (ГОСТ Р ИСО 9241-110), так и требования к человеко-ориентированному проектированию интерактивных систем (ГОСТ Р ИСО 9241-210). В настоящем отчёте интерфейс системы Figma рассматривается с точки зрения соответствия этим стандартам, причём объектом анализа является \emph{сам интерфейс Figma}, а не качество создаваемого в нём дизайна мобильного приложения.
|
||
|
||
% В качестве исследуемого сценария выбрано типовое учебное задание для новичка: \emph{создать один простой экран мобильного приложения}. Анализируется, насколько легко или сложно новый пользователь может выполнить это задание в Figma, какие элементы интерфейса помогают, а какие затрудняют работу, и как это соотносится с установленными в ГОСТ требованиями к диалогу и процессу проектирования.
|
||
|
||
% Работа носит характер рецензии с опорой на личный опыт выполнения задания и систематическое сопоставление наблюдений с формулировками стандартов.
|
||
|
||
\newpage
|
||
\section{Постановка задачи}
|
||
В рамках данной работы необходимо ознакомиться со стандартом ГОСТ Р ИСО 9241, а также провести экспертный анализ человеко-машинного интерфейса программы LabelStudio.
|
||
|
||
|
||
\newpage
|
||
\section{ГОСТ Р ИСО 9241}
|
||
|
||
ГОСТ Р ИСО 9241 — это комплексный стандарт, появившийся в результате адаптации и
|
||
обработки международного стандарта ISO 9241. Он посвящён человеко-машинному взаимодействию, каждая его часть посвященна отдельному аспекту проектирования и реализации человеко-машинного интерфейса. Комплекс стандартов содержит руководство по
|
||
человеко-ориентированному проектированию интерактивных компьютерных систем.
|
||
|
||
ГОСТ Р ИСО 9241 устанавливает эргономические требования для офисных работ с применением видеодисплейных терминалов. Эргономическое проектирование повышает возможности пользователей ВДТ при работе с оборудованием, управляющим экраном дисплея: безопасно, без вреда для здоровья, производительно, эффективно и в комфортных условиях. Это достигается путем эргоориентированного проектирования ВДТ, рабочих мест и рабочего пространства, в котором используются ВДТ, и путем соответствующей организации, управления и выполнения работ с применением ВДТ. Практически за все эти обеспечивающие аспекты несут ответственность целый ряд всевозможных организаций и разнообразный персонал.
|
||
|
||
Стандарт предназначен для специалистов, разрабатывающих системы с человеко-машинным
|
||
взаимодействием.
|
||
|
||
ГОСТ Р ИСО 9241 состит из следующих частей:
|
||
\begin{itemize}
|
||
\item Часть 1: Общее введение. Обзор и основные положения стандарта.
|
||
|
||
\item Часть 2: Руководство по формированию рабочих заданий. Проектирование рабочих заданий и рабочих мест, включающих работу с ВДТ.
|
||
|
||
\item Часть 3: Видеодисплейные терминалы. Проектирование экранов для ВДТ; предложения по проведению испытаний по определению эргопоказателей пользователей в качестве альтернативы направлению на выполнение требований технической документации.
|
||
|
||
\item Часть 4: Требования к клавиатуре. Эргономические аспекты проектирования алфавитноцифровой клавиатуры и предложения по проведению испытаний по определению эргопоказателей пользователей в качестве альтернативы направлению на выполнение требований технической документации.
|
||
|
||
\item Часть 5: Расположение рабочего места и требования к рабочей позе. Эргономические требования к рабочим местам с ВДТ, выполнение которых позволяет пользователям принимать комфортные и эффективные рабочие позы.
|
||
|
||
\item Часть 6: Требования к окружающей среде. Эргономические требования к окружающей рабочей среде при работе с ВДТ, устанавливаемые в целях предотвращения визуальных, акустических и термальных источников рабочей напряженности и дискомфорта и для стимуляции эффективности.
|
||
|
||
\item Часть 7: Требования к дисплеям с отражающими эффектами. Эргономические тре-
|
||
бования к методам измерений (и их подробности) эффектов отражений от поверхности экранов дисплеев, включая экраны, подвергшиеся специальной обработке.
|
||
|
||
\item Часть 8: Требования к цветным дисплеям. Эргономические требования к цветным дисплеям, которые дополняют требования стандарта ИСО 9241-3 к монохроматическим дисплеям и предложения по проведению испытаний по определению эргопоказателей пользователей.
|
||
|
||
\item Часть 9: Требования к устройствам бесклавиатурного ввода. Эргономические тре-
|
||
бования к устройствам бесклавиатурного ввода, которые могут быть использованы совместно с ВДТ.
|
||
|
||
\item Часть 10: Принципы диалога. Семь эргономических принципов, важных для проектирования и оценки диалога между человеком и информационной системой.
|
||
|
||
\item Часть 11: Руководство по пригодности. Пригодность и идентификация информации, необходимой для определения или оценки эргономической пригодности.
|
||
|
||
\item Часть 12: Представление информации. Принципы и рекомендации по представлению имеющейся и отображаемой на ВДТ информации, включая руководство по возможностям представления сложной информации, в виде буквенно-цифровых и графических/символьных кодов, экранное размещение и дизайн, а также использование окон.
|
||
|
||
\item Часть 13: Руководство пользователя. Рекомендации по проектированию и оценке руководящих материалов по программному обеспечению интерфейса пользователя.
|
||
|
||
\item Часть 14: Диалоговое меню. Эргономическое проектирование меню диалогов пользователя с вычислительной машиной, включая системное меню, меню навигации, меню выбора опций и выполнения команд, меню представления информации различного вида.
|
||
|
||
\item Часть 15: Диалоги управления. Эргономическое проектирование языка команд, используемого в диалогах пользователя с компьютером, включая системный командный язык и команды синтаксиса, команды представления данных, анализа входных и выходных данных, обратной связи и выдачи справок.
|
||
|
||
\item Часть 16: Диалоги прямого управления. Эргономическое проектирование диалогов прямого управления, включая управление программными компонентами и проектированием моделей, структур данных и их свойств.
|
||
|
||
\item Часть 17: Диалоги наполнения данными экранных форм. Эргономическое проектирование диалогов заполнения экранных форм, включая рассмотрение структуры форм, анализ входных и выходных данных и навигацию форм.
|
||
\end{itemize}
|
||
|
||
В данной лабораторной будут использованы части 10, 12, 14, 15, 17.
|
||
|
||
\newpage
|
||
\section{Тип пользователя и уровень подготовки}
|
||
|
||
В рамках данной работы рассматривается \textbf{пользователь-новичок}:
|
||
|
||
\begin{itemize}
|
||
\item ранее не работал с Label Studio;
|
||
\item обладает базовыми навыками работы с компьютером, браузером и офисными программами;
|
||
\item знает общие понятия в разметке данных, такие как ограничивающий прямоугольник (bounding box), полигональная разметка (polygon annotation), классификация (classification), сегментация (segmentation) и т. д., но не знаком со специфичными для Label Studio понятиями.
|
||
\end{itemize}
|
||
|
||
|
||
\section{Задание для пользователя}
|
||
|
||
Задание для пользователя формулируется следующим образом:
|
||
|
||
\begin{quote}
|
||
«На фотографиях городских улиц выделить автомобильные светофоры с помощью прямоугольных оболочек (bounding boxes). Оболочки задаются координатами в пространстве устройства (в пикселях) и ориентированы параллельно осям изображения. Количество оболочек на одном изображении не ограничено. Прямоугольные оболочки могут пересекаться и быть вложенными друг в друга. Результаты разметки выгрузить в формате JSON».
|
||
\end{quote}
|
||
|
||
Результатом выполнения задания считается наличие JSON файла с координатами оболочек.
|
||
|
||
|
||
\newpage
|
||
\section{Сценарий выполнения задания в Label Studio}
|
||
|
||
В таблице ниже представлен сценарий действий пользователя-новичка для выполнения задания в Label Studio. Сценарий будет использоваться как основа для анализа соответствия интерфейса Label Studio требованиям ГОСТ Р ИСО 9241.
|
||
|
||
\begin{table}[h!]
|
||
\caption{Пошаговый сценарий выполнения задания в Label Studio}
|
||
\centering
|
||
\small
|
||
\begin{tabular}{|c|p{12cm}|}
|
||
\hline
|
||
\textbf{№} & \textbf{Действие} \\ \hline
|
||
|
||
1 & Открыть Label Studio. \\ \hline
|
||
|
||
2 & Создать новый проект и указать его название - «Разметка светофоров». \\ \hline
|
||
|
||
3 & Загрузить 4 исходных изображения со светофорами. \\ \hline
|
||
|
||
4 & Ознакомиться с интерфейсом проекта: панель задач, область разметки, панель меток и основные кнопки управления. \\ \hline
|
||
|
||
5 & Открыть настройки проекта и выбрать тип разметки, основанный на использовании ограничивающих прямоугольников. \\ \hline
|
||
|
||
6 & В конфигурации разметки указать единственный класс — «Светофор». \\ \hline
|
||
|
||
7 & Перейти к первому изображению и изучить инструменты разметки (инструмент прямоугольника, кнопка сохранения, переключение задач). \\ \hline
|
||
|
||
8 & Для каждого изображения выделить объекты «Светофор» с помощью ограничивающих прямоугольников. \\ \hline
|
||
|
||
9 & Сохранить результаты для всех изображений. \\ \hline
|
||
|
||
10 & Перейти в меню экспорта и выгрузить результаты разметки в формате JSON. \\ \hline
|
||
|
||
\end{tabular}
|
||
\end{table}
|
||
|
||
|
||
\newpage
|
||
\section{Выполнение задания в Label Studio}
|
||
|
||
\subsection*{Шаг 1. Открыть Label Studio и зарегистрироваться}
|
||
|
||
После открытия Label Studio перед пользователем-новичком появляется страница для входа в систему (см. Рис.~\ref{login}).
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\linewidth]{img/login.png}
|
||
\caption{Страница входа в систему}
|
||
\label{login}
|
||
\end{figure}
|
||
|
||
\newpage
|
||
У меня как у пользователя-новичка ещё нету аккаунта в системе, а кнопки для анонимной работы не наблюдается, поэтому придётся зарегистрироваться.
|
||
Для того, чтобы зарегистрироваться, пользователь-новичок нажимает на кнопку "Sign up" ("Зарегистрироваться"), после чего откроется страница для регистрации (см. Рис.~\ref{signup}).
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\linewidth]{img/signup.png}
|
||
\caption{Страница регистрации}
|
||
\label{signup}
|
||
\end{figure}
|
||
|
||
Далее пользователь-новичёк вводит адрес электронной почты и пароль, после чего нажимает на кнопку "Create account" ("Создать аккаунт"). Это вполне привычная процедура, присущая большинству современных сервисов. После чего появляется стартовая страница (см. Рис.~\ref{first-screen}).
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\linewidth]{img/first-screen.png}
|
||
\caption{Стартовая страница}
|
||
\label{first-screen}
|
||
\end{figure}
|
||
|
||
Кнопку регистрации нашёл легко. Однако при вводе пароля возникли сложности: система не показывала требования к паролю заранее, и пришлось несколько раз подбирать подходящий вариант.
|
||
|
||
\subsection*{Шаг 2. Создать новый проект и указать его название}
|
||
|
||
После успешной регистрации, перед пользователем автоматически открывается стартовая страница (см. Рис.~\ref{first-screen}) с большой синей кнопкой "Create project" ("Создать проект"). Я, как пользователь-новичёк, догадался, что чтобы начать разметку нужно создать проект в системе. Для этого я нажал на кнопку "Create project" ("Создать проект"). После чего открылась страница для создания проекта (см. Рис.~\ref{create-project}).
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\linewidth]{img/create-project.png}
|
||
\caption{Страница создания проекта}
|
||
\label{create-project}
|
||
\end{figure}
|
||
|
||
На этой странице я указал название проекта в поле "Project name" ("Название проекта") и нажал на кнопку "Save" ("Сохранить"). После чего я автоматически попал на страницу проекта (см. Рис.~\ref{project-page}). Несмотря на то, что весь интерфейс системы представлен на английском, название проекта удалось указать на русском языке.
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\linewidth]{img/project-page.png}
|
||
\caption{Страница проекта}
|
||
\label{project-page}
|
||
\end{figure}
|
||
|
||
Создание проекта прошло быстро. Понравилось, что достаточно ввести только название и нажать одну кнопку.
|
||
|
||
\newpage
|
||
\subsection*{Шаг 3. Загрузить исходные изображения со светофорами}
|
||
|
||
После создания проекта автоматически открылась страница проекта (см. Рис.~\ref{project-page}). Название проекта отображается в верхней части страницы. По центру экрана отображается надпись <<Import data to get your project started>>, что означает <<Импортируйте данные, чтобы начать проект>>. Я, как пользователь-новичёк, догадался, что на этом этапе можно загрузить исходные изображения. На экране также видно две больших кнопки <<Connect Cloud Storage>> (<<Подключить облачное хранилище>>) и <<Import>> (<<Импортировать>>). Мои файлы с изображениями хранятся в папке на моём компьютере, а значит работа с облачным хранилищем мне не подойдёт. Поэтому далее я нажал на кнопку <<Import>> (<<Импортировать>>). После чего открылась страница для загрузки файлов (см. Рис.~\ref{upload-files}).
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\linewidth]{img/upload-files.png}
|
||
\caption{Страница загрузки файлов}
|
||
\label{upload-files}
|
||
\end{figure}
|
||
|
||
По центру открывшейся страницы видна надпись <<Dgag \& drop files here or click to browse>>, что означает <<Перетащите файлы сюда или нажмите для выбора файлов>>. Далее я просто открыл папку со своими изображениями в соседнем окне Windows, выделил нужные файлы и перетащил мышкой на надпись <<Dgag \& drop files here or click to browse>>. Это привычная для современного пользователя техника. Выбранные файлы отобразились списком на экране, справа от каждого файла появилась полоска загрузки. После завершения загрузки полоска стала зелёной (см. Рис.~\ref{upload-files-success}).
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\linewidth]{img/upload-files-success.png}
|
||
\caption{Страница загрузки после указания файлов}
|
||
\label{upload-files-success}
|
||
\end{figure}
|
||
|
||
\newpage
|
||
В правом верхнем углу этой страницы видно две кнопки <<Cancel>> (<<Отмена>>) и <<Import>> (<<Импортировать>>). Отменять загрузку я не планировал, поэтому нажал на кнопку <<Import>> (<<Импортировать>>). После этого автоматически открылась страница проекта, но теперь на ней отображается список из 4-х элементов, которые судя по всему, являются моими загруженными файлами (см. Рис.~\ref{project-page}). Хотелось бы увидеть миниатюры изображений, чтобы было понятно, что за файлы загружены, но пока видны только названия файлов и их идентификаторы.
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\linewidth]{img/project-page-with-files.png}
|
||
\caption{Страница проекта после загрузки файлов}
|
||
\label{project-page-with-files}
|
||
\end{figure}
|
||
|
||
Понравился прогресс-бар загрузки и зелёная полоска успешного завершения, понятно, что файлы загружаются и понятно, когда они полностью загружены. Сразу видно, какие форматы поддерживаются. Не понравилось, что нельзя удалить отдельный файл из списка --- только сбросить всё и начать заново.
|
||
|
||
\newpage
|
||
\subsection*{Шаг 4. Открыть настройки проекта и выбрать тип разметки}
|
||
|
||
После того, как файлы загружены, автоматически открывается страница проекта (см. Рис.~\ref{project-page-with-files}). Теперь я, как пользователь-новичёк, попробовал нажать на первый элемент из списка на экране, чтобы приступить к разметке. Я ожидал, что откроется страница с моей картинкой, но вместо этого появилось окошко с заголовком <<You're almost there>> (см. Рис.~\ref{almost-here}) и подписью <<Before you can annotate the data, set up labeling configuration>>, что означает <<Перед тем, как начать разметку данных, настройте конфигурацию разметки>>. Хоть я и первый раз работал в этой программе, но у меня есть понимание того, что существуют разные типы разметки для разных задач машинного обучения, и скорее всего именно тип разметки и нужно указать, потому что система никак не могла его угадать. На этом же окошке есть две кнопки <<Cancel>> (<<Отмена>>) и <<Go to setup>> (<<Настроить>>). Я нажал на кнопку <<Go to setup>> (<<Настроить>>), после чего открылась страница с настройками разметки (см. Рис.~\ref{templates-page}).
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\linewidth]{img/almost-here.png}
|
||
\caption{Вместо моей картинки появилось окошко с заголовком <<You're almost there>>.}
|
||
\label{almost-here}
|
||
\end{figure}
|
||
|
||
|
||
Открывшаяся страница сначала немного меня смутила (см. Рис.~\ref{templates-page}), потому что на ней отображается очень много элементов с разными картинками, но не с теми, которые я самостоятельно загружал. Однако я достаточно быстро смог соориентироваться и понять, что эти изображения действительно не мои, а являются лишь иллюстрациями к разным типам разметки. Например, первая картинка, на которой изображены, судя по всему, ноги спортсменов, иллюстрирует тип разметки для задач семантической сегментации изображений с помощью полигонов. В этом также можно убедиться, если прочитать надпись под этой картинкой: <<Semantic segmentation with Polygons>>. В меню слева можно увидеть разные категории для разных типов разметки: <<Computer Vision>> (<<Компьютерное зрение>>), <<Natural Language Processing>> (<<Обработка естественного языка>>), <<Audio/Speech Processing>> (<<Обработка аудио/голоса>>) и так далее.
|
||
|
||
Хоть я и являюсь пользователем-новичком, однако у меня есть понимание, что моя задача с разметкой изображений, относится к области задач компьютерного зрения, именно эта категория выбрана в меню слева, а значит в этом меню я могу ничего не менять. Осталось найти разметку ограничивающими прямоугольниками, на английском она называется <<Object Detection with Bounding Boxes>> (<<Обнаружение объектов с ограничивающими прямоугольниками>>), именно такому типу разметки соответствует третья карточка в списке с изображением биологических клеток (см. Рис.~\ref{templates-page}). Именно на эту карточку я и нажал, на рисунке~\ref{templates-page} видно, что она выделена синей рамкой.
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\linewidth]{img/templates-page.png}
|
||
\caption{Страница с типами разметки}
|
||
\label{templates-page}
|
||
\end{figure}
|
||
|
||
Нужный шаблон нашёлся сразу на первой странице. Однако страница с выбором типов разметки сильно нагружена, представлено большое число различных типов для различных задач машинного обучения. Это может запутать пользователя-новичка.
|
||
|
||
\subsection*{Шаг 5. В конфигурации разметки указать единственный класс — «Светофор»}
|
||
|
||
После выбора типа разметки автоматически открывается страница с настройками типа разметки (см. Рис.~\ref{template-settings}). На ней снова отображается не то изображение, которое я загружал ранее, что путает пользователя-новичка. Однако, после более внимательного ознакомления со страницей, я понял, что это снова лишь иллюстрация того, как будет выглядеть разметка. Над картинкой с самолётами выведена надпись <<UI Preview>> (<<Предварительный просмотр>>).
|
||
|
||
Также в левой части экрана есть раздел <<Labels>> (<<Классы>>), в котором виден список классов. После выбора типа разметки, система автоматически, судя по всему в качестве иллюстрации, добавила два класса <<Airplane>> (<<Самолёт>>) и <<Car>> (<<Машина>>). Хоть я и являюсь пользователем новичком, но знаю, что разметка ограничивающими прямоугольниками подразумевает присвоение какого-либо класса каждому такому прямоугольнику. В задаче, которую я перед собой поставил, меня интересует только один класс прямоугольников - <<Светофоры>>. А значит мне нужно каким-то образом удалить созданные автоматически классы <<Airplane>> (<<Самолёт>>) и <<Car>> (<<Машина>>) и добавить свой класс - <<Светофор>>.
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\linewidth]{img/template-settings.png}
|
||
\caption{Страница с настройками типа разметки}
|
||
\label{template-settings}
|
||
\end{figure}
|
||
|
||
Чтобы удалить ненужные классы я попробовал навести мышку на название класса <<Car>> (<<Машина>>). Рядом с ним появилась красная иконка с мусорной корзиной (см. Рис.~\ref{template-settings-labels}). Я нажал на неё и класс <<Car>> (<<Машина>>) удалился. Я проделал аналогичную операцию с классом <<Airplane>> (<<Самолёт>>).
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=0.4\linewidth]{img/template-settings-labels.png}
|
||
\caption{Удаление ненужных классов, созданных по умолчанию}
|
||
\label{template-settings-labels}
|
||
\end{figure}
|
||
|
||
\newpage
|
||
Автоматически созданные классы удалены, осталось добавить свой класс - <<Светофор>>. Для этого я ввёл слово <<Светофор>> в поле <<Add label names>> и нажал на кнопку <<Add>> (<<Добавить>>). Ожидаемо класс <<Светофор>> появился в разделе <<Labels>> (<<Классы>>) (см. Рис.~\ref{template-settings-labels-added}).
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\linewidth]{img/template-settings-labels-added.png}
|
||
\caption{Добавление класса светофор}
|
||
\label{template-settings-labels-added}
|
||
\end{figure}
|
||
|
||
Теперь я разобрался с классами, сходу не ясно, что делать дальше. Однако, если присмотреться, то внизу по центру страницы расположена крупная кнопка <<Save>> ("Сохранить"). Я ещё помню, что всё это время мы настраивали тип разметки, вероятно эта кнопка отвечает за сохранение тех настроек, что я сделал. До этого я выбирал тип разметки с ограничивающими прямоугольниками и указывал нужный мне класс <<Светофор>>. Нажимаю на кнопку <<Save>> (<<Сохранить>>). Рядом с кнопкой сохранения появилась зелёная надпись <<Saved!>> ("Сохранено!") (см. Рис.~\ref{template-settings-labels-saved}), в подтверждение того, что настройки разметки были сохранены успешно, а затем автоматически открылась основная страница проекта (см. Рис.~\ref{project-page-with-images}).
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=0.3\linewidth]{img/template-settings-labels-saved.png}
|
||
\caption{Рядом с кнопкой сохранения появилась зелёная надпись <<Saved!>> ("Сохранено!") в подтверждение того, что настройки были сохранены успешно}
|
||
\label{template-settings-labels-saved}
|
||
\end{figure}
|
||
|
||
|
||
\subsection*{Шаг 6. Перейти к первому изображению и изучить инструменты разметки}
|
||
|
||
Снова автоматически открылась уже знакомая основная страница проекта со списком (см. Рис.~\ref{project-page-with-images}). Но теперь у каждого элемента списка отображается миниатюрная версия с изображениями, которые я сам загружал. Снова попробую наконец приступить к разметке, нажимаю левой кнопкой мыши на одну из своих картинок.
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\linewidth]{img/project-page-with-images.png}
|
||
\caption{Список файлов на странице проекта}
|
||
\label{project-page-with-images}
|
||
\end{figure}
|
||
|
||
После нажатия открывается страница разметки (см. Рис.~\ref{labeling-page}).
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\linewidth]{img/labeling-page.png}
|
||
\caption{Страница разметки}
|
||
\label{labeling-page}
|
||
\end{figure}
|
||
|
||
На этой странице выводится само изображение, наш единственный класс <<Светофор>>. Слева выводится список изображений, которые мы загрузили ранее. Справа небольшой набор инструментов для приближения, отдаления и перемещения по картинке, при наведении на эти инструменты появляется подсказка с пояснением (см. Рис.~\ref{labeling-page-tools}).
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=0.5\linewidth]{img/labeling-page-tools.png}
|
||
\caption{Инструменты разметки с подсказками. <<Zoom In>> переводится как <<Приблизить>>. }
|
||
\label{labeling-page-tools}
|
||
\end{figure}
|
||
|
||
В правом нижнем углу расположена кнопка <<Submit>> ("Сохранить").
|
||
|
||
Понравились всплывающие подсказки при наведении на инструменты. Интерфейс не перегружен, всё необходимое под рукой. Не хватает кнопки отмены для сброса разметки без сохранения.
|
||
|
||
\newpage
|
||
\subsection*{Шаг 7. Для каждого изображения выделить объекты «Светофор» с помощью ограничивающих прямоугольников}
|
||
|
||
Теперь я как пользователь-новичёк пробую нарисовать ограничивающий прямоугольник вокруг светофора на моём изображении. Как видно на рисунке~\ref{labeling-page-object}, вокруг светофора появляется нужный мне ограничивающий прямоугольник.
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\linewidth]{img/labeling-page-object.png}
|
||
\caption{Выделение светофора с помощью ограничивающего прямоугольника}
|
||
\label{labeling-page-object}
|
||
\end{figure}
|
||
|
||
|
||
Как я уже заметил на предыдущем шаге, на панели слева выводится список загруженных изображений. С его помощью можно переключаться между ними. Остальные изображения размечаются аналогичным образом.
|
||
|
||
\subsection*{Шаг 8. Сохранить результаты для всех изображений}
|
||
|
||
После того, как все изображения размечены, я нажал на кнопку <<Submit>> ("Сохранить"), она выделена синим цветом и его предназначение интуитивно ясно. После этого автоматически открылась страница со списком изображений. Слева у каждого изображения появилась галочка, которая подтверждает, что изображение размечено.
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\linewidth]{img/labeling-page-submit.png}
|
||
\caption{Страница со списком изображений после сохранения}
|
||
\label{labeling-page-submit}
|
||
\end{figure}
|
||
|
||
\newpage
|
||
\subsection*{Шаг 9. Выгрузить результаты разметки в формате JSON}
|
||
|
||
Теперь мне нужно выгрузить результаты моей работы в формате JSON. Для этого я нажал на кнопку <<Export>> ("Экспорт") в правом верхнем углу страницы. После этого открылось окно с выбором формата выгрузки. В списке есть нужный мне JSON, именно его я и выбрал, а затем нажал на кнопку <<Export>> ("Экспорт") (см. Рис.~\ref{labeling-page-export}). В открывшемся окне проводника выбрал папку для сохранения файла.
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=0.5\linewidth]{img/labeling-page-export.png}
|
||
\caption{Окно с выбором формата выгрузки}
|
||
\label{labeling-page-export}
|
||
\end{figure}
|
||
|
||
Экспорт прошёл без проблем. Не хватило уведомления об успешном сохранении файла --- пришлось вручную проверять, что файл появился в папке.
|
||
|
||
\newpage
|
||
\section{Рецензия}
|
||
|
||
В целом система произвела позитивное впечатление. Даже будучи новым пользователем, ранее не работавшим с Label Studio, я смог достаточно быстро выполнить все шаги задания. Интерфейс в большинстве случаев интуитивен.
|
||
|
||
Понравилось, что создание проекта требует минимум действий. Загрузка файлов сопровождается прогресс-баром и индикатором успешного завершения. Шаблоны разметки удобно организованы, нужный вариант нашёлся сразу. Инструменты разметки снабжены всплывающими подсказками, что помогает быстро освоиться. Галочки у размеченных изображений наглядно показывают прогресс работы.
|
||
|
||
Не понравилось отсутствие русского языка в интерфейсе. При регистрации система не показывает требования к паролю заранее. Нельзя удалить отдельный файл из списка загружаемых. В настройках шаблона нет функции отмены последнего действия. На странице настроек шаблона всегда отображается пример с самолётом, а не загруженные пользователем изображения, что сбивает с толку. На странице разметки отсутствует кнопка для сброса всех изменений. После экспорта нет уведомления об успешном сохранении файла.
|
||
|
||
Несмотря на отдельные недостатки, система удобна и подходит для работы даже пользователю-новичку.
|
||
|
||
\newpage
|
||
\section{Анализ соответствия интерфейса требованиям ГОСТ Р ИСО 9241-110}
|
||
|
||
Интерфейс Label Studio был проанализирован на соответствие требованиям ГОСТ Р ИСО 9241-110 <<Эргономика взаимодействия человек-система. Принципы организации диалога>>.
|
||
|
||
\textbf{Пригодность для решения задачи.} Система в целом соответствует требованиям данного раздела. После регистрации появляется страница с надписью <<Welcome>>, что соответствует пункту 4.3.1 о предоставлении информации об успешном завершении задания. Этапы диалога при создании проекта сведены к минимуму (пункт 4.3.5). Формат вывода при экспорте соответствует задаче --- сразу предлагается JSON (пункт 4.3.3). Однако система не предлагает типовых значений по умолчанию для проекта, что не соответствует пункту 4.3.4.
|
||
|
||
\textbf{Самоописываемость.} Система частично соответствует требованиям. На странице загрузки файлов отображается список поддерживаемых форматов (пункт 4.4.4). В процессе загрузки показывается прогресс-бар (пункт 4.4.1). Окно экспорта содержит понятные элементы управления. Однако при регистрации не отображаются требования к паролю, что нарушает пункт 4.4.4.
|
||
|
||
\textbf{Соответствие ожиданиям пользователя.} Выявлено существенное несоответствие пункту 4.5.5: весь интерфейс представлен на английском языке, несмотря на русскоязычные настройки браузера. Терминология на странице шаблонов понятна специалистам (пункт 4.5.1). Обратная связь при сохранении соответствует ожиданиям (пункт 4.5.2).
|
||
|
||
\textbf{Пригодность для обучения.} Система хорошо поддерживает обучение. При наведении на инструменты появляются всплывающие подсказки (пункт 4.6.3). Активный инструмент визуально выделяется, границы прямоугольника отображаются в процессе рисования (пункт 4.6.4).
|
||
|
||
\textbf{Управляемость.} Темп взаимодействия определяется пользователем, автоматические переключения отсутствуют (пункт 4.7.1). На странице создания проекта есть кнопка <<Cancel>> (пункт 4.7.2). После перезапуска состояние разметки сохраняется (пункт 4.7.3). Однако в нескольких местах нарушен пункт 4.7.2: нельзя удалить отдельный файл из списка загружаемых, отсутствует кнопка отмены в интерфейсе разметки. Также нарушен пункт 4.7.4: в настройках шаблона нет функции отмены последнего действия.
|
||
|
||
\textbf{Устойчивость к ошибкам.} При неправильном заполнении поля email система подсвечивает ошибку (пункт 4.8.3). Однако выявлены несоответствия: система не предупреждает о возможных ограничениях при загрузке файлов (пункт 4.8.2), не выводит предупреждение при попытке закрыть страницу с несохранёнными данными (пункт 4.8.10), позволяет сохранить разметку без аннотаций (пункт 4.8.8).
|
||
|
||
\newpage
|
||
\section*{Заключение}
|
||
\addcontentsline{toc}{section}{Заключение}
|
||
В ходе работы был проведён анализ соответствия интерфейса Label Studio требованиям ГОСТ Р ИСО 9241-110 и ГОСТ Р ИСО 9241-210 на примере выполнения простого задания по разметке изображений bounding box-ами пользователем-новичком. В целом система продемонстрировала хорошую пригодность к задаче: базовые шаги — создание проекта, настройка разметки, работа с инструментами и экспорт результатов — выполняются интуитивно, а интерфейс предоставляет необходимую обратную связь и не перегружен лишними действиями.
|
||
|
||
При этом были отмечены и отдельные несоответствия, наиболее значимые из которых связаны с отсутствием русскоязычной локализации и ограниченной контролируемостью некоторых действий (ограниченные варианты отмены, отсутствие альтернативных путей продолжения диалога). Несмотря на эти недостатки, Label Studio в целом подходит для использования начинающими пользователями, а устранение выявленных проблем могло бы существенно повысить эргономичность системы.
|
||
|
||
\newpage
|
||
\begin{thebibliography}{9}
|
||
|
||
\bibitem{gost1}
|
||
ГОСТ Р ИСО 9241-1--2007. Эргономические требования к проведению офисных работ с использованием видеодисплейных терминалов (VDTs). Часть 1. Общее введение. -- Введ. 2008-06-01. -- М.: Стандартинформ, 2008. -- 20~с.
|
||
|
||
\bibitem{gost110}
|
||
ГОСТ Р ИСО 9241-110--2016. Эргономика взаимодействия человек--система. Часть 110. Принципы организации диалога. -- Введ. 2017-12-01. -- М.: Стандартинформ, 2016. -- 23~с.
|
||
|
||
\bibitem{gost210}
|
||
ГОСТ Р ИСО 9241-210--2016. Эргономика взаимодействия человек--система. Часть 210. Человеко-ориентированное проектирование интерактивных систем. -- Введ. 2017-12-01. -- М.: Стандартинформ, 2016. -- 29~с.
|
||
|
||
\end{thebibliography}
|
||
|
||
|
||
|
||
\end{document}
|