\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}). Название проекта отображается в верхней части страницы. По центру экрана отображается надпись <>, что означает <<Импортируйте данные, чтобы начать проект>>. Я, как пользователь-новичёк, догадался, что на этом этапе можно загрузить исходные изображения. На экране также видно две больших кнопки <> (<<Подключить облачное хранилище>>) и <> (<<Импортировать>>). Мои файлы с изображениями хранятся в папке на моём компьютере, а значит работа с облачным хранилищем мне не подойдёт. Поэтому далее я нажал на кнопку <> (<<Импортировать>>). После чего открылась страница для загрузки файлов (см. Рис.~\ref{upload-files}). \begin{figure}[h!] \centering \includegraphics[width=1\linewidth]{img/upload-files.png} \caption{Страница загрузки файлов} \label{upload-files} \end{figure} По центру открывшейся страницы видна надпись <>, что означает <<Перетащите файлы сюда или нажмите для выбора файлов>>. Далее я просто открыл папку со своими изображениями в соседнем окне Windows, выделил нужные файлы и перетащил мышкой на надпись <>. Это привычная для современного пользователя техника. Выбранные файлы отобразились списком на экране, справа от каждого файла появилась полоска загрузки. После завершения загрузки полоска стала зелёной (см. Рис.~\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 В правом верхнем углу этой страницы видно две кнопки <> (<<Отмена>>) и <> (<<Импортировать>>). Отменять загрузку я не планировал, поэтому нажал на кнопку <> (<<Импортировать>>). После этого автоматически открылась страница проекта, но теперь на ней отображается список из 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}). Теперь я, как пользователь-новичёк, попробовал нажать на первый элемент из списка на экране, чтобы приступить к разметке. Я ожидал, что откроется страница с моей картинкой, но вместо этого появилось окошко с заголовком <> (см. Рис.~\ref{almost-here}) и подписью <>, что означает <<Перед тем, как начать разметку данных, настройте конфигурацию разметки>>. Хоть я и первый раз работал в этой программе, но у меня есть понимание того, что существуют разные типы разметки для разных задач машинного обучения, и скорее всего именно тип разметки и нужно указать, потому что система никак не могла его угадать. На этом же окошке есть две кнопки <> (<<Отмена>>) и <> (<<Настроить>>). Я нажал на кнопку <> (<<Настроить>>), после чего открылась страница с настройками разметки (см. Рис.~\ref{templates-page}). \begin{figure}[h!] \centering \includegraphics[width=1\linewidth]{img/almost-here.png} \caption{Вместо моей картинки появилось окошко с заголовком <>.} \label{almost-here} \end{figure} Открывшаяся страница сначала немного меня смутила (см. Рис.~\ref{templates-page}), потому что на ней отображается очень много элементов с разными картинками, но не с теми, которые я самостоятельно загружал. Однако я достаточно быстро смог соориентироваться и понять, что эти изображения действительно не мои, а являются лишь иллюстрациями к разным типам разметки. Например, первая картинка, на которой изображены, судя по всему, ноги спортсменов, иллюстрирует тип разметки для задач семантической сегментации изображений с помощью полигонов. В этом также можно убедиться, если прочитать надпись под этой картинкой: <>. В меню слева можно увидеть разные категории для разных типов разметки: <> (<<Компьютерное зрение>>), <> (<<Обработка естественного языка>>), <