diff --git a/lab2/.gitignore b/lab2/.gitignore new file mode 100644 index 0000000..cbce687 --- /dev/null +++ b/lab2/.gitignore @@ -0,0 +1,6 @@ +**/* +!.gitignore +!report.tex +!img +!img/** +!*.dot \ No newline at end of file diff --git a/lab2/report.tex b/lab2/report.tex new file mode 100644 index 0000000..5e12e9b --- /dev/null +++ b/lab2/report.tex @@ -0,0 +1,334 @@ +\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{Описание программы Label Studio} + + Label Studio --- это многофункциональная платформа для разметки данных, поддерживающая широкий спектр типов данных: изображения, текст, аудио, видео, табличные данные и т.\,д. Инструмент применяется для подготовки обучающих датасетов в проектах машинного обучения, автоматизации бизнес-процессов, анализа данных и других задач, требующих структурированной разметки. + + Интерфейс Label Studio можно условно разделить на несколько ключевых областей: + + \begin{itemize} + \item \textbf{Левая панель (панель задач)} --- содержит список элементов данных, которые необходимо разметить: изображения, тексты или другие объекты. Здесь отображаются статусы задач (не размечено, в процессе, размечено), доступен выбор конкретного элемента для работы, а также возможны фильтрация и поиск по задачам. + + \item \textbf{Центральная область разметки (workspace)} --- основная область, в которой происходит взаимодействие с данными. В зависимости от типа данных она может включать: + \begin{itemize} + \item просмотр изображений с инструментами выделения областей (bounding boxes, polygons, keypoints); + \item текстовый редактор для аннотации фрагментов текста; + \item аудиоплеер с временной шкалой и инструментами выделения сегментов; + \item видеоплеер с возможностью разметки покадрово; + \item интерфейс просмотра и редактирования табличных данных. + \end{itemize} + Эта область динамически изменяется в зависимости от выбранного шаблона разметки (Labeling Config). + + \item \textbf{Правая панель (панель инструментов и свойств)} --- отображает доступные категории разметки (labels), их параметры и структуру. В зависимости от конфигурации проекта здесь могут размещаться: + \begin{itemize} + \item список меток, тегов, классов объектов; + \item параметры выбранного объекта разметки (цвет, класс, дополнительные атрибуты); + \item настройки ввода данных (например, формы для ввода тегов, числовых значений или текстовых описаний). + \end{itemize} + Эта панель позволяет изменять атрибуты аннотаций и добавлять связанные метаданные. + + \item \textbf{Верхняя панель управления} --- включает элементы управления проектом и текущей задачей: + \begin{itemize} + \item навигация между задачами (следующая/предыдущая); + \item кнопки сохранения и отправки разметки; + \item режимы просмотра и переключение инструментов; + \item действия отмены и повторения (undo/redo); + \item доступ к настройкам проекта и шаблона разметки. + \end{itemize} + + \item \textbf{Нижняя панель} --- может содержать дополнительные элементы в зависимости от типа разметки: + \begin{itemize} + \item временные шкалы для аудио/видео; + \item вспомогательные панели навигации (например, миниатюры кадров); + \item статистические данные о текущей задаче. + \end{itemize} + \end{itemize} + + Label Studio предоставляет гибкую систему настройки интерфейса через XML-подобную конфигурацию (Labeling Config), что позволяет адаптировать рабочую среду под конкретные виды задач и сложные наборы данных. Платформа поддерживает одновременную работу нескольких человек, сравнение разметки, контроль качества и интеграцию с внешними моделями машинного обучения для создания предварительной разметки. + + + \subsection{Тип пользователя и уровень подготовки} + + В рамках данной работы рассматривается \textbf{пользователь-новичок}: + + \begin{itemize} + \item ранее не работал с Label Studio; + \item обладает базовыми навыками работы с компьютером, браузером и офисными программами; + \item знает общие понятия в разметке данных, такие как ограничивающий прямоугольник (bounding box), полигональная разметка (polygon annotation), классификация (classification), сегментация (segmentation) и т. д., но не знаком со специфичными для Label Studio понятиями (labeling configuration templates, labels panel, tasks и т. п.). + \end{itemize} + + + \subsection{Пользовательское задание} + + Пользовательское задание формулируется следующим образом: + + \begin{quote} + «Создать простую разметку с использованием ограничивающих прямоугольников (bounding boxes) для нескольких изображений со светофорами и выгрузить результаты разметки в формате JSON». + \end{quote} + + Результатом выполнения задания считается наличие в Label Studio проекта, содержащего размеченные изображения со светофорами, где на каждом изображении объекты выделены корректными ограничивающими прямоугольниками, а также наличие JSON файла с разметкой. + + + \subsection{Условия использования} + + В терминах ГОСТ Р ИСО 9241-11 условия использования включают пользователей, задачи, оборудование (аппаратные средства и программные средства), физическую и социальную среду. Пользователя и задачу мы уже определили, остальные условия следующие: + + \begin{itemize} + \item \textbf{Аппаратные средства:} настольный компьютер с мышью и клавиатурой, подключённый к интернету; дисплей с разрешением 1920 на 1080 пикселей; + \item \textbf{Программные средства:} приложение Label Studio; + \item \textbf{Физическая среда:} стандартное офисное рабочее место, компьютерное кресло, стол; + \item \textbf{Социальная среда:} индивидуальная работа. + \end{itemize} + + \newpage + \section{Сценарий выполнения задания в Label Studio} + + В таблице ниже представлен сценарий действий пользователя-новичка для выполнения задания в Label Studio. + \begin{table}[h!] + \caption{Пошаговый сценарий выполнения задания в Label Studio} + \centering + \small + \begin{tabular}{|c|p{12cm}|} + \hline + \textbf{№} & \textbf{Действие} \\ \hline + + 1 & Зарегистрироваться или войти в систему Label Studio. \\ \hline + + 2 & Создать новый проект и указать его название (например, «Разметка светофоров»). \\ \hline + + 3 & Загрузить исходные изображения, содержащие светофоры. \\ \hline + + 4 & Выбрать тип разметки, основанный на использовании ограничивающих прямоугольников. \\ \hline + + 5 & Указать в настройках проекта единственный класс разметки — «Светофор». \\ \hline + + 6 & Для каждого изображения выделить светофоры с помощью ограничивающих прямоугольников. \\ \hline + + 7 & Сохранить результаты разметки для всех изображений. \\ \hline + + 8 & Выполнить экспорт проекта в формате JSON. \\ \hline + + \end{tabular} + \end{table} + + + + + +\end{document}