CC BY
753. Данилова Т.В., Никитина А.А., Щербакова К.Н., Щербаков С.М. Разработка и внедрение программного комплекса формирования учебной документации // Интеллектуальные ресурсы - региональному развитию. - 2016. - Т. 2. № 1. - С. 37-41.
4. Карпычев В.Ю. Методология ГОЕБ1Х и программный продукт ERWin: Учебно-методическое пособие. - Нижний Новгород: ННГУ им. Н.И. Лобачевского,
2007. - 23 с.
5. Королева И.Ю., Влазнева Д.Г. Автоматизация процесса разработки УМКД кафедры вуза // Молодой учёный. - 2012. - № 3, т. I. - с. 92-95.
6. Корчуганова М.А., Сырбаков А.П. Основные задачи автоматизации разработки учебно-методический комплекса дисциплины // Система федеральных образовательных порталов. Информационно-коммуникационные технологии в образовании,
2008. [Электронный ресурс]. - URL: http://www.ict.edu.ru/vconf/files/11252.pdf.
7. Космачëва И.М., Квятковская И.Ю., Сибикина И.В. Автоматизированная система формирования рабочих программ учебных дисциплин // Вестн. Астрахан. гос. техн. ун-та. Сер. управление, вычисл. техн. Информ. - 2016. - № 1. - С. 90-97.
8. Мирошниченко И.И. Структура и содержание образовательных процессов в вузе как основа обеспечения качества подготовки выпускников // Инновации в науке, образовании и бизнесе - 2012: Труды 10-й Международной научной конференции (Калининград, КГТУ, октябрь 2012 г.). Часть 2. - Калининград: КГТУ, 2012. - С. 167170.
9. Щербаков С.М. Программная система автоматизированного формирования учебно-методической документации УМКА // Свидетельство о государственной регистрации программы для ЭВМ. № 2017617386. - М.: Роспатент, 2017.
10. Щербаков С.М., Клименко А.А., Самарская М.В. Имитационное моделирование учебно-методической деятельности в вузе // Труды Восьмой всероссийской научно-практической конференции «Имитационное моделирование. Теория и практика» (ИММОД-2017) (г. Санкт-Петербург, 18-20 октября 2017 г.). - СПб.: Изд-во ВВМ, 2017. - С. 565-570.
УДК 004.514
Компаниец Виталий Сергеевич,
доцент, кандидат технических наук, доцент, Лызь Александр Евгеньевич,
доцент, кандидат технических наук, доцент
СИСТЕМА ЭЛЕМЕНТОВ ПОЛЬЗОВАТЕЛЬСКОГО ОПЫТА И ЕЕ ПРИМЕНЕНИЕ В ПОДГОТОВКЕ IT-СПЕЦИАЛИСТОВ
Россия, г. Таганрог, Институт компьютерных технологий и информационной безопасности Южного федерального университета, e-mail: [email protected]
Аннотация: Кратко описан опыт выстраивания в целостную систему слабо-формализованных процедур исследования пользовательского опыта в задаче проектирования интерфейса программных продуктов. В основе системы концептуальная модель элементов пользовательского опыта Дж. Гарретта, дополненная конкретными формализованными процедурами и инструментальными методами окулографии и электроэнцефалографии.
Ключевые слова: UX, элементы Дж. Гарретта, эргодизайн пользовательского интерфейса, окулография, Eye Tribe, нейрогарнитура, NeuroSky.
Vitaly S. Kompaniets,
Candidate of Technical Sciences, Associate Professor,
Aleksandr E. Lyz, Candidate of Technical Sciences, Associate Professor
THE SYSTEM OF USER EXPERIENCE ELEMENTS AND ITS USE IN
THE IT-SPECIALISTS TRAINING
Russia, Taganrog, Institute of Computer Technologies and Information Security of the Southern Federal University, e-mail: [email protected]
Abstrac/t A brief description of the complete system building of weakly formalized procedures of user experience researching in the task of a software products interface designing is given. The system is based on the conceptual model of the user experience elements of J. Garrett, supplemented by specific formalized procedures and instrumental methods of oculography and electroencephalography.
Keywords: UX, J. Garrett elements, user interface ergodesign, oculography, Eye Tribe, neuro-headset, NeuroSky.
За последние три десятилетия технологические прорывы в области IT сформировали экосистемы тотального пользования компьютерами. Расширение использования информационных технологий не только для решения профессиональных задач, но и для удовлетворения человеком разнообразных информационных, досуговых, коммуникативных потребностей предъявляет к пользовательскому интерфейсу ряд новых требований. Сегодня при проектировании программных продуктов решаются проблемы доверия пользователя к нему и задачи вовлечения пользователя [6]. В этом случае пользовательский интерфейс должен быть ориентирован не только на эффективность, продуктивность и удовлетворенность пользователей решением задачи, но и на эстетическую привлекательность, мотивационную притягательность для пользователя, а значит опираться на его целостный, «пользовательский» опыт.
В общем случае пользовательский опыт (опыт взаимодействия, англ. User experience, UX) - это восприятие и ответные действия пользователя, возникающие в результате использования и/или предстоящего использования продукции, системы или услуги (ISO 9241-210). В сфере IT в процессе использования как информационной системы в целом, так и отдельной её части (веб-сайта, приложения и пр.) термин UX применяется для описания субъективного отношения, возникающего у пользователя. Однако, при внешней простоте термина, анализ и оценка пользова-
тельского опыта - сложная и неоднозначная задача [1, 10]. В этом процессе могут быть реализованы опросы пользователей, беседы, включённое наблюдение за работой пользователей, оценка предыдущей версии сайта/программы или аналогичной системы, тестирование производительности и анализ журналов деятельности, фокус-группы и другие методы, значительная доля которых относится к субъективным, а поэтому при малых объемах выборки экспертов/пользователей (традиционно это 5-10 человек), иХ-методы не дают надежных результатов. Дополнительной серьезной проблемой изложения большинства методов является слабоструктурированный стиль, которым авторы книг по дизайну пользовательского интерфейса, юзабилити, ИХ часто описывают лишь правила «как надо» и «как не надо» проектировать интерфейс, избегая вводить строгие формализованные метрики. В результате среди достаточно проработанных и системно описанных технологий проектирования, реализации программного кода и его тестирования обнаруживаются слабо формализованные методы, применение которых, однако, должно дать столь важную оценку качества интерфейсных решений и удостоверить отсутствие проблем человеко-машинного взаимодействия.
В магистерской образовательной программе «Эргодизайн пользовательского интерфейса» предпринята попытка систематизации процедур исследования пользовательского опыта и повышения их валидности за счет включения объективных методов - инструментальных окулогра-фии и электроэнцелографии. Магистерская программа реализуется в Южном федеральном университете с 2015 года и ее качество подтверждено победой в грантовом конкурсе стипендиальной программы Фонда В. Потанина 2016/2017. Цель программы - научить студентов проектировать целеориентированный, эргономичный дизайн интерфейса и проводить его экспертизу. Программный продукт с «эргодизайнерским» интерфейсом должен отвечать расширенным требованиям, как по форме (внешний вид, дизайн интерфейса, обеспечивающий доверие и вовлеченность пользователя), так и по эргономичному содержанию. Для этого магистранты изучают основы дизайна и технической эстетики, когнитивную психологию и нейронауку, проектирование сложных пользовательских интерфейсов [3, 5].
Практикум по исследованию пользовательского опыта в учебном плане магистратуры входит в целостный профессиональный модуль «Экспертная оценка интерфейса», в котором также рассматриваются основы эргономики и инженерной психологии, методы инженерно-психологической экспертизы программных продуктов. Создание данного профессионального модуля потребовало систематизации и методической проработки как описанных в литературе методов, так и собственно-
го опыта инженерно-психологических исследований и проектирования прикладных ИС. В результате в качестве методологической основы модуля была предложена пятиуровневая концептуальная модель элементов пользовательского опыта, разработанная Джессом Гарреттом [1]: от абстрактного уровня «стратегии» до детализированного уровня «поверхности» программного продукта (рис. 1).
The Elements of User Experience
A basic duality: The Web was originally conceived as a hypertextual information space; but the development of increasingly sophisticated front- and back-end technologies has fostered its use as a remote software interface. This dual nature has led to much confusion, as user experience practitioners have attempted to adapt their terminology to cases beyond the scope of its original application. The goal of this document is to define some of these terms within their appropriate contexts, and to clarify the underlying relationships among these various elements.
Jesse James Garrett [email protected]
30 March 2000
Web as software interface Cone »,, j rete Com oletion t..... Web as hypertext system
Visual Design: graphic treatment of interface elements (the 'look' in look-and-feel") / ¡^m/ües/ß / Visual Design: visual treatment of text, graphic page elements and navigational components
Interface Design: as in traditional HCl: design of interface elements to facilitate user interaction with functionality Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Navigation Design: design of interface elements to facilitate the user's movement through the information architecture Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding
üesm
/ Momfm ües/ß /
Interaction Design: development of application flows to facilitate user tasks, defining how the user interacts with site functionality i« / WS0 fmRÉÉ® //IrcMœiâ §т/ У ti me Information Architecture: structural design of the information space to facilitate intuitive access to content
Functional Specifications: "feature set": detailed descriptions of functionality the site must include in order to meet user needs / Fmcf/ú mâû/f/tâf/ù Ш/ ûsmçmm, 7/ / is/ Content Requirements: definition of content elements required In the site in order to meet user needs
User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site / User.éâé / S/fâlmcfm / User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site
task-oriented Abst act Cone eption information-oriented
This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development) that may influence decisions during user experience development, Also, this model does not describe a development process, nor does it define roles within a user experience development team, Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
© 2000 Jesse James Garrett http:/Iww.jjg. net/ia/
Рис. 1. Элементы Дж. Гарретта (http://jjg.net/elements/)
По сути, система элементов Гарретта дает структуру («скелет») исследования пользовательского опыта, которую необходимо было наполнить конкретным набором методов и алгоритмов их применения.
Уровень стратегии. Начало разработки - абстрактное описание создаваемого или исследуемого программного продукта с учетом ожиданий заинтересованных лиц (потенциальных пользователей, заказчиков, экспертов предметной области и т.п.). Полезным инструментом данного уровня оказалась наглядная визуализация так называемого «Дерева проблемы», в котором ствол содержит наименование исследуемой проблемы предметной области, корни дерева - ветвление причины, причин причины и т.д. проблемы; ветви, листья - логическую цепочку развития следствий проблемы, известные факты, подтверждающие актуальность проблемы. Рассуждая о вариантах разрешения проблемы, магистранты рассуждают о будущем программном продукте как средстве устранения причин проблемы, а не следствий.
Уровень возможностей. Эффективным инструментом уровня оказался анализ продуктов-конкурентов. Магистранты проводят анализ существующих продуктов и формируют отчет со своим набором функциональных возможностей, которые доступны для пользователей.
Уровень структуры. Проектирование «спускается» до выбора способа реализации и взаимной организации функциональных возможностей. Выполняется проектирование взаимодействия и информационной архитектуры в виде диаграммы, отражающей навигацию и распределение функциональных элементов продукта по основным экранным формам (страницам, формам, окнам). Наглядная иллюстрация структуры призвана помочь обеспечить эффективность навигации и сделать её простой и интуитивно понятной для пользователей.
Уровень компоновки. Решаются частные вопросы наиболее эффективного расположения различных элементов интерфейса - кнопок, полей ввода/вывода, текстовых блоков и иллюстраций на каждой экранной форме. В качестве критерия эффективности может выступать минимум времени, необходимого пользователю для корректного завершения работы с конкретной формой. Так, если было разработано несколько логически верных вариантов компоновки элементов, например, для формы регистрации, то выбран будет вариант, требующий минимальных затрат времени пользователя. В этом случае оценка временных затрат для каждого варианта компоновки может быть рассчитана априорно по методу вОМБ [8] или определена экспериментально тестированием производительности. Таким образом, в ходе работы над проектом (продвижения вниз по уровням) - решения, связанные с опытом пользователя, стано-
вятся конкретнее и обретают более высокую степень детализации. Каждый последующий уровень тесно связан с предыдущим (верхним) и предполагает строгую согласованность решений. Очевидно, что при таком подходе диапазон возможных решений значительно сокращается с переходом на каждый последующий уровень. Впрочем, это не означает, что все решения на конкретном уровне должны быть приняты до перехода на следующий уровень. Между уровнями существует как прямая, так и обратная зависимость - то есть проблемы, с которыми разработчики сталкиваются на нижних уровнях, порой требуют переоценки и изменения решений, принятых на более высоких уровнях.
Уровень поверхности представляет собой внешний вид продукта с точки зрения конечного пользователя - выбранная ранее компоновка элементов пользовательского интерфейса каждой экранной формы оформляется в едином стиле дизайн-концепции: выполняется их цветовое оформление, добавляются декоративные элементы, часто применяемые навигационные и информационные пиктограммы. Именно на данном этапе возникают большинство типичных проблем разработки пользовательских интерфейсов: перегруженность элементами декора, несогласованные или неудачные цветовые комбинации с фоном, чрезмерное увлечение проектировщика скевоморфизмом, плоским дизайном или модными трендами (параллакс-эффект, гамбургер-меню и т.п.). В результате проверенные ранее варианты компоновки на уровне поверхности могут перестать эффективно «работать»: пользователи могут кликать некликабельные элементы декора или наоборот, пропускать элементы управления (например, кнопки), считая их статичными элементами. Требуется тщательное пользовательское тестирование макета.
В этой связи весьма перспективными в задачах исследования пользовательского опыта, в т.ч. его бессознательных компонентов, представляются инструментальные методы окулографии и электроэнцефалографии, реализуемые сейчас относительно недорогими и компактными устройствами, в частности, айтрекером Eye Tribe и нейрогарнитурой NeuroSky MindWave.
Айтрекинг - это метод окулографии, позволяющий отслеживать взгляд человека и определять его координаты. Несмотря на то, что отечественные исследователи отмечают ограниченность использования айтрекеров при юзабилити-тестировании [6] и необходимость стандартизации метрологических параметров айтрекинга [11], за рубежом с начала 2000-х годов он активно используется для анализа пользовательских интерфейсов и веб-дизайна [12; 13]. Айтрекинг позволяет дополнить традиционные юзабилити-исследования за счет анализа связи между кликами мышкой и визуальным поведением пользователя, позволяет
выявить компоненты веб-сайта, привлекательные для пользователя, вызывающие трудности и не замечаемые им, позволяет оценить эффективность поиска, правильность концепции бренда и других аспектов веб-дизайна [12].
В учебном процессе задействованы два прибора Eye Tracker модели Eye Tribe. В качестве пользователей-экспертов участвуют сами магистранты (10-12 человек), которым ставится задача по тестированию ключевой функциональности программного продукта. Интерактивность макета пользовательского интерфейса продукта реализуется средствами программного обеспечения OGAMA [17], позволяющего из статичных изображений страниц получить визуально скролируемую и кликабель-ную демонстрацию. Порядок подготовки и проведения процедуры исследования: запуск эксперимента в приложении OGAMA; ввод идентификационных данных о пользователе; индивидуальная калибровка прибора (каждый пользователь мог выбрать комфортную позу, положение монитора); запуск записи отслеживания движения глаз; решение пользователем тестовой задачи; завершение записи [7].
По данным, полученным от приборов, составляется тепловая карта - пространственная характеристика движения глаз, отражающая плотность точек фиксации взгляда (рис. 4). Красный и желтый цвета отражают зоны, на которых внимание было сфокусировано дольше остальных. Анализируются тепловые карты, полученные от всех испытуемых, и проводится автоматическая статистическая обработка результатов. В качестве дополнительного этапа иногда проводится сравнительный анализ результатов работы с другими аналогичными программными продуктами. Результаты исследования позволяют в целом оценить эффективность решения тестовой задачи, наглядно обозначить визуальные фрагменты веб-сайта, которым пользователь уделяет наибольшее / наименьшее внимание, и проанализировать их функциональность (например, часты ситуации, когда декоративные элементы интерфейса излишне долго удерживают внимание пользователя или наоборот, кликабельные, но слабо различимые функциональные элементы пропускаются).
Беспроводная нейрогарнитура NeuroSky MindWaveMobile относится к компактным недорогим устройствам одноканальной электроэнцефалографии (ЭЭГ). Bluetooth модуль позволяет сопрягать гарнитуру с планшетом, смартфоном или ноутбуком. Гарнитура позволяет изучать процессы ментальной активности пользователя, тренировать его способности самоконтроля эмоционального состояния, улучшать работоспособность и устойчивость к стрессам [9, 15].
В устройстве реализована аппаратная технология съема и аналого-цифрового преобразования сигнала ТhinkGear. Частотный и амплитуд-
ный анализ регистрируемых сигналов позволяет дифференцировать пять традиционных ритмов головного мозга: дельта, тета, альфа, бета и гамма [2, 14]. Наблюдаемое у пользователя соотношение ритмов может использоваться для диагностики его функционального состояния и учитываться при интерпретации результатов деятельности. Например, фиксируемые в окулографическом исследовании ошибочные действия пользователя оказывались обусловлены не проблемами в проектировании или реализации пользовательского интерфейса, а повышенными уровнями тревожности, психоэмоционального напряжения или депрессии данного испытуемого [9].
Однако профессиональная расшифровка, анализ и полная интерпретация ЭЭГ представляют собой очень сложные задачи, требующие от исследователя специальной квалификации. Поэтому в устройстве NeuroSky MindWave реализован алгоритм eSense [16], позволяющий упростить интерпретацию сигналов за счет выделения всего двух обобщенных показателей - уровня концентрации внимания (Attention) и уровня релаксации (Meditation), каждый из которых измеряется по 100 балльной шкале. С помощью визуализации биологической обратной связи в приложении BrainWave Visualizer (рис. 4) испытуемые добивались сочетания максимального уровня концентрации внимания (85-100) со спокойным «медитативным» состоянием «беспристрастного наблюдателя» (уровень релаксации 65-80). И только потом приступали к окулогра-фическому исследованию.
Обобщая полученные результаты, можно сделать вывод о высокой практической значимости системы элементов Дж. Гарретта, благодаря которой исследование пользовательского опыта приобретает достаточно логичную и понятную магистрантам структуру и четкую последовательность шагов. Использование устройств айтрекинга и нейрогарнитур, в том числе совместное, еще нуждается в уточнении и детальной спецификации, но за счет повышения эффективности экспериментов и достоверности получаемых результатов уже показало высокую целесообразность в задачах по исследованию пользовательского опыта и оптимизации интерфейсных решений.
Список литературы
1. Гарретт Д. Веб-дизайн: книга Джесса Гарретта. Элементы опыта взаимодействия. - Символ-Плюс, 2008.
2. Кирой В.Н., Ермаков П.Н. Общая характеристика ритмов ЭЭГ человека // Электроэнцефалограмма и функциональные состояния человека. - Ростов-на-Дону: Изд-во Рост. ун-та, 1998. - С. 48-76.
3. Компаниец В.С., Казанская А.Ю. Опыт реализации магистерской образовательной программы «Эргодизайн пользовательского интерфейса» // III Международ-
ная конференция «Человеческий фактор в сложных технических системах и средах: ЭРГО 2018» -СПб.: СПбГЭТУ «ЛЭТИ». - С. 60-68.
4. Компаниец В.С., Лызь А.Е. Возможности и перспективы применения инструментальных методов исследования пользовательского опыта //Информатизация и связь. - 2018, - №4. - С. 7-11.
5. Компаниец В.С., Лызь А.Е. Эргодизайн пользовательского интерфейса: методы юзабилити-исследований // Инженерный вестник Дона. 2017. Т. 46. № 3 (46). -С. 56-64.
6. Костин А.Н. Круглый стол «Юзабилити как новое направление исследований в инженерной психологии» // Психологический журнал. 2011. Т. 32. № 4. С. 113— 124.
7. Лызь А.Е., Компаниец В.С. Айтрекинг как метод оценки пользовательских интерфейсов // Новые задачи технических наук и пути их решения: Сборник статей по итогам международной научно-практической конференции. Оренбург, 2017. С. 31-33.
8. Раскин Д, Интерфейс: новые направления в проектировании компьютерных систем. — Пер. с англ. — СПб: Символ-Плюс, 2004.
9. Рувинская А.О. Исследование мозговой активности с помощью нейрогарни-туры NeuroSky MindWave //Сборник статей II Всероссийской научно-практической конференции молодых ученых, аспирантов, магистрантов и студентов «Информационные системы и технологии: фундаментальные и прикладные исследования». - Таганрог, 2017. - 479 с. - C. 101-104.
10. Унгер Р., Чендлер К. UX-дизайн. Практическое руководство по проектированию опыта взаимодействия. - Пер. с англ. - СПб.: Символ-Плюс, 2011. - 336 с., ил.
11. Фазылзянова Г.И., Балалов В.В. Применение метода айтрекинга для оценки качества графической и мультимедийной продукции // Наука и Мир. 2014. Т. 3. № 3 (7). С. 172-179.
12. Bojko A., Stephenson A. It's All in the Eye of the User: How eye tracking can help answer usability questions. User Experience. 2005. Vol. 4, No. 1.
13. Goldberg J., Stimson M., Lewnstein M., Scott N., Wichansky N. Eye Tracking in Web Search Tasks: Design Implications. In Eye Tracking Research & Applications (ETRA) Symposium. - New Orleans, LA, 2002.
14. Larsen E.A. Classification of EEG Signals in a Brain-Computer Interface System // Norwegian University of Science and Technology. Departament of Computer and Information Science. NTNU: 2011.
15. MindWave Mobile User Guides [электронный ресурс] https://ru.scribd.com/doc/191259445/Mindwave-Mobile-User-Guide
16. NeuroSky Developers Program. eSense(tm) Meters [электронный ресурс] http ://developer. neuro sky.com.
17. OGAMA - Open Gaze And Mouse Analizer http://www.ogama.net/sites/default/files/pdf/OGAMA-DescriptionV25.pdf.
