Проек тирование сапр-интерфейса для устройств с сенсорным вводом Текст научной статьи по специальности «Компьютерные и информационные науки»

УДК 004.5

Бойков Алексей Александрович

Ивановский государственный энергетический университет им. В.И. Ленина

albophx@mail.ru

проектирование сапр-интерфейса для устройств с сенсорным вводом

В статье проанализированы недостатки САПР-интерфейсов при использовании устройств с сенсорным вводом; предложен интерфейс САПР-редактора, который может быть реализован на базе современных мобильных ОС. Использовались паттерны проектирования интерфейсов и традиционные методы оценки эффективности (Фитса, GOMS).

Ключевые слова: Интерфейс программного продукта, интерфейс пользователя, системы автоматизации проектирования (САПР), графический редактор, векторный редактор, мобильные устройства, устройства с сенсорным вводом, эргономика.

В соответствии с ФГОС ВПО по направлениям подготовки бакалавриата предусматривается «широкое применение в учебном процессе активных и интерактивных форм проведения занятий», в том числе «компьютерных симуляций». Для дисциплин инженерного, в том числе графического, цикла это означает использование САПР-редакторов на всех этапах изучения дисциплин. Системы дистанционного обучения (СДО), осуществляющие поддержку самостоятельной работы студентов, в этом случае должны обладать мощным набором средств автоматизированной проверки студенческих решений. Принципиальная возможность такой проверки показана, например, в [1, с. 11, 47-49]. Для СДО это означает необходимость наличия специализированных САПР-редакторов.

Развитие мобильных устройств на базе ОС Android, iOS и Windows Mobile, а также широкое распространение устройств с сенсорным вводом вносит свои коррективы в привычные способы работы с приложениями. В последнее время все чаще для доступа к Интернет-ресурсам, в том числе учебным, студенты пользуются мобильными устройствами - телефонами, смартфонами, планшетами. Эти устройства снабжены сенсорными экранами, но лишены традиционных для портативных компьютеров манипуляторов «мышь» и, соответственно, курсора.

Работа с графическими редакторами, используемыми в САПР, ориентирована на манипулятор «мышь», указатель которой (курсор) всегда присутствует на экране. Это, в частности, определяет основную модель управления графическим редактором: чтобы нарисовать объект, достаточно подвести указатель в какое-либо место экрана, после чего нажатие на левую кнопку мыши (левый клик) начинает построение объекта. Эта модель взаимодействия становится весьма мощным средством при использовании привязок (snap): курсор, оказавшийся вблизи характерных точек на виртуальном листе, привязывается («прилипает») к ним, -точность построений повышается, а процесс рисования становится комфортным.

Совершенно иная ситуация складывается при использовании мобильных устройств: нажатие на

сенсорный элемент традиционно трансформируется мобильными ОС в левый клик, однако без возможности позиционировать указатель до нажатия уже в самом начале пользователь сталкивается с серьезными трудностями. Если указание второй и последующих точек производится повторными левыми кликами, перемещение указателя сопровождается значками привязок (AutoCAD, 3DS Max), то на сенсорном экране повторяются все недостатки указания первой точки, причем «резиновая» нить и другие способы проявить создаваемый объект оказываются неприменимы (система не может отследить положение пальца, не касающегося экрана). Если указание второй точки осуществляется «протаскиванием» (drag) и «отпусканием» (drop), перемещение сопровождается значками привязок (Компас), то технически возможно показать образ объекта и значки привязок, но перемещаемый по сенсорной поверхности палец (и даже кончик стилуса) скрывает не только значки, но и объекты вблизи указателя, так что построение производится почти «вслепую». Таким образом, традиционные способы управления редактором оказываются бесполезны.

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

- жест протаскивания для панорамирования и прокрутки;

- жест растяжения при помощи технологии мультитач (растягивание двумя пальцами) для зум-мирования (приближения/удаления);

- жест выбора - нажатие, транслируемое ОС в левый клик;

- жест нажатия и удержания имитирует вызов контекстного меню.

Протаскивание и растягивание выполняют не требующие высокой точности команды управления видом (например, разница между масштабом отображения 1:1 и 1:1,13 не существенна). Наоборот, геометрические построения требуют вы-

© Бойков А.А., 2014

Вестник КГУ им. Н.А. Некрасова .4J- № 5, 2014

51

системотехника

Рис. 1. Эскиз интерфейса для устройств с сенсорным вводом

сокой точности. Кроме того, если протаскивание, стандартной функцией которого является панорамирование и прокрутка, будет использоваться для построений, то возрастет модальность интерфейса [1, с. 42-60]. Наиболее удобные интерфейсы сенсорных устройств содержат только жесты выбора, прокрутки и зуммирования (веб-браузер, галерея, программы для чтения книг, навигация по карте), из чего можно сделать вывод о предпочтительности жеста выбора над другими при работе с сенсорными экранами.

Рассмотрим пример интерфейса, показанного на рис. 1. Здесь строка команд (1) и поле редактора (4) доступны в любой момент времени, а строки параметров (2) и привязок (3) изменяются динамически, могут содержать разные наборы элементов, но всегда остаются «на своем месте». Инструментальные панели (команд, параметров и привязок) являются, как это традиционно для сенсорных устройств, прокручиваемыми, так что если часть инструментов не видна в пределах экрана - панель можно сдвинуть вправо или влево.

Интерфейс создания и модификации геометрических объектов основан только на указательных действиях - кликах. Протаскивание и растяжение управляют листом: приближают и отдаляют чертеж, панорамируют изображение.

Чтобы построить объект, пользователь активирует команду инструментальной панели, под ней открывается горизонтальная строка параметров, среди которых присутствуют числовые, точечные

или указательные. Числовые параметры вводятся при помощи редактора в нижней части экрана, точечные - открывают дополнительную панель точечных привязок. Нажатие на любую кнопку точечных привязок предназначено для того, чтобы отобразить в поле редактора допустимые для выбора точки. Поле числового редактора при работе с привязками и при выполнении команд используется для отображения подсказок. Центральным местом реализации привязок является подсвечивание на чертеже соответствующих кнопок для возможных привязок.

В популярном редакторе AutoCAD есть два механизма привязок: глобальные и локальные. В интерфейсе для сенсорных экранов возможна реализация обоих механизмов, но каждый из них будет иметь свои недостатки. В случае глобальной привязки на экране отображаются кнопки-маркеры всех доступных типов привязок: при большом числе они будут перекрывать друг друга. Механизм локальных привязок увеличивает число кликов: сначала пользователь выбирает тип привязки, затем указывает ее на экране. Рассмотрим два варианта работы с привязками (для простоты возьмем локальные, однако сказанное справедливо и для глобальных):

- клик на кнопке привязки отображает все доступные точки выбора (рис. 2), они могут перекрывать друг друга; зуммирование позволяет решить эту проблему, поскольку всегда можно выбрать подходящий масштаб, при котором нужные указатели различимы;

□ЕШЮВД 00000000

ШКЖЦщфТПМ шаицвчгроа ННЕНШН ИНЦ¥гаг|1|йнт|ОТ1 ЕБЗЕЕЭШШ

1 О 1

Рис. 2. Отображение всех маркеров привязок выбранного типа

52

Вестник КГУ им. Н.А. Некрасова . м l- № 5, 2014

Рис. 3. Отображение маркеров с предварительным выбором типа

Рис. 4. Построение отрезка с использованием вспомогательных объектов

- клик на кнопке привязки является указательным, на листе отображаются значки выбора объекта, затем отображаются точки в пределах этого объекта (рис. 3); если привязка подразумевает не более одной точки у каждого объекта (либо если на экране только один подходящий объект), лишний клик подавляется.

На рисунке 4 показан процесс создания отрезка, причем перед указанием первой точки строится вспомогательная горизонтальная прямая, для которой раскрывается дополнительная панель указательных привязок. Для многоточечных примитивов выбранные параметры-точки помечаются флажками. Вспомогательные точки, прямые и флажки являются временными объектами и сами убираются с листа по завершении команды.

Для выделения объектов используется команда «Указатель» (рис. 1). При ее использовании маркеры выделения появляются у всех объектов на экране. После выделения становится активна контекстная панель, содержащая набор наиболее часто используемых команд. При необходимости продолжить или снять выделение используются соответствующие маркеры.

Оценку производительности интерфейса можно выполнить, используя модель GOMS [2, с. 81-107].

Найдем приблизительно время построения отрезка, показанного на рисунке 4, с использованием интерфейса пакета AutoCAD и проектируемого интерфейса. Поскольку AutoCAD работает с курсором мыши, для большинства операций необходимо учитывать закон Фитса (перемещение курсора к командным кнопкам и назад к чертежу), в случае

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

Последовательность действий для построения отрезка в программе AutoCAD (предполагаем, что все привязки настроены):

1) переместить курсор к командной кнопке «отрезок» и активировать команду (время перемещения a+b^log^D/S^+l), время нажатия - p);

2) переместить курсор к верхней точке окружности и дождаться появления значка привязки (перемещение - a+b0-log2(D2/S +l), ожидание - s);

3) сместить курсор правее, сохраняя при этом объектное отслеживание и поставить первую точку произвольно на вспомогательной прямой (перемещение - a+b-log^^S^+l), нажатие - p);

4) сместить курсор влево к верхней точке шестиугольника и дождаться появления значка привязки (перемещение - a+b0-log2(D4/S +l), ожидание - s);

5) сместить курсор вправо, сохраняя объектное отслеживание, и найти место, где сработает угловая привязка 30°, поставить вторую точку (перемещение - a+b^-log^D^S^+l), нажатие - p).

Примем отношения равными: Dj/S=l5/l,5=l0, D2/S =24/l,7~l4, D3/S =l3,6/2,4~5,5,

2 прив ' 7 3 выб ' '

D/S =l3,7/l,7~8, D7S =l4,5/l,7~8,5.

4 прив ' ' '5 прив J? ?

Суммарное время составит: 4-a+b0-log2l485+ +b -log6l,75+2-s+3-p = 4-a+l0,5-b+6-b +2-s+3-p.

тр 2 0 тр

Подставим значения констант a = 0,5,

b0 = b = l,5, s = 0,5, p = 0,l.

0 тр

Вестник КГУ им. H.A. Некрасова № 5, 2014

53

системотехника

Результат: 28 сек. - для ноутбука с сенсорной панелью, при условии, что пользователь опытен и не совершает ни одной ошибки. Вероятность ошибки при работе с сенсорной панелью ноутбука увеличивает это время, поскольку пользователь вынужден более точно рассчитывать движение руки (случайное касание может быть воспринято редактором как управляющий клик и может прервать выполнение команды).

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

1) активация команды и построение первой вспомогательной линии (5-m+5-k);

2) построение первой точки (4-m+4-k);

3) ввод угла (2-m+4-k+c);

4) построение второй вспомогательной линии (4-m+4-k);

5) построение второй точки (4-m+4-k).

Суммарное время 19-m+21-k+c, где m - «ментальный оператор» принятия решения, k - время клика и c - время появления числового редактора в нижней части окна. Подставим значения констант m = 1,3 (колеблется от 1,1 до 1,35), k = 0,2 (колеблется от 0,1 до 0,2), c = 1.

Результат: 30 сек., что сравнимо по эффективности с интерфейсом программы AutoCAD, но подсчитано для устройства, на котором САПР с традиционным интерфейсом работать не может.

Проектируемый интерфейс имеет ряд достоинств:

1. Он является полностью немодальным: формирующиеся привычки будут ускорять работу.

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

3. Геометрическая модель легко может быть сделана параметрической (нажатие маркера привязки служит источником сведений о геометрических зависимостях между объектами), то есть пригодной для многократного повторного использования.

Для реализации графического редактора может использоваться векторный SVG-компонент, поддерживающий DOM-интерфейс управления дочерними узлами и событийную модель взаимодействия с пользователем. К сожалению, мобильные браузеры пока не в полной мере поддерживают технологию SVG, но, очевидно, через некоторое время эта поддержка будет осуществляться полностью, что позволит использовать один и тот же редактор в составе учебной системы для ПК и мобильных устройств, если реализовать его посредством HTML5/JavaScript [3, с. 302-303].

Библиографический список

1. Бойков А.А. Разработка методов обучения и контроля в автоматизированном учебном комплексе // Вестник компьютерных и информационных технологий. - 2008. - № 7.

2. Раскин Джеф. Интерфейс: новые направления в проектировании компьютерных систем. - М.: Символ-Плюс, 2005. - 272 с.

3. Сомов Д.А. HTML5 в автоматизированных системах обучения / рук. А.А. Бойков // Энергия -2013, VIII международно-технич. конференция студентов, аспирантов и молодых ученых, 23 апреля 2013 г., г. Иваново: материалы конференции. -Иваново: УИУНЛ ИГЭУ, 2013. - 345 с.

54

Вестник КГУ им. H.A. Некрасова . м l- № 5, 2014