Проектирование и юзабилити-исследование пользовательских интерфейсов

 

МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ 

РОССИЙСКОЙ ФЕДЕРАЦИИ 

Федеральное государственное автономное образовательное  

учреждение высшего образования 

«ЮЖНЫЙ ФЕДЕРАЛЬНЫЙ УНИВЕРСИТЕТ» 

Инженерно-технологическая академия 

 

 
 
 

В. С. КОМПАНИЕЦ 

А. Е. ЛЫЗЬ 

 
 

ПРОЕКТИРОВАНИЕ И ЮЗАБИЛИТИ-ИССЛЕДОВАНИЕ 

ПОЛЬЗОВАТЕЛЬСКИХ ИНТЕРФЕЙСОВ  

 

 
 

Учебное пособие 

 
 
 

 
 
 
 
 
 
 

Ростов-на-Дону – Таганрог 

Издательство Южного федерального университета 

2020 
 

УДК  004.5(075.8) 
ББК  32.973-018.2я73 

К637  

Печатается по решению кафедры психологии и безопасности  
жизнедеятельности Института компьютерных технологий и  

информационной безопасности Южного федерального университета  

(протокол № 6 от 23 января 2020 г.) 

Рецензенты: 

кандидат технических наук, доцент кафедры управления качеством Донского 

государственного технического университета, доцент Е. М. Зубрилина 

кандидат психологических наук, программист 1 категории АО «Научно-

конструкторское бюро вычислительных систем» М. В. Картавенко 

 

          Компаниец, В. С. 
К637       Проектирование и юзабилити-исследование пользовательских интерфейсов : 
учебное пособие / В. С. Компаниец, А. Е. Лызь ; Южный 
федеральный университет. – Ростов-на-Дону ; Таганрог : Издательство 
Южного федерального университета, 2020. – 107 с. 

ISBN 978-5-9275-3637-5 
Содержит избранные учебные материалы дисциплин «Проектирование сложных 
пользовательских интерфейсов» и «Экспертиза пользовательского интерфейса», 
изучаемых магистрантами направления «Прикладная информатика» по программе «
Эргодизайн пользовательского интерфейса» Института компьютерных 
технологий и информационной безопасности Южного федерального университета. 
Последовательно рассматриваются следующие темы: современное состояние методологии 
UX-проектирования, элементы пользовательского опыта Дж. Гарретта, 
юзабилити-исследование пользовательских интерфейсов, инструментальные методы 
в юзабилити-исследованиях. Пособие содержит практические задания по эргономическому 
проектированию пользовательских интерфейсов. В приложения вынесена 
инструкция по работе с ПО OGAMA при проведении окулографического исследования 
и краткий справочник методов UX-исследования. Пособие может быть 
также использовано в дисциплинах, реализующих вариативные профессиональные 
компетенции по продуктовой разработке и дизайну пользовательского интерфейса 
для всех магистрантов ИКТИБ и других структурных подразделений. 

 
 
 
 
 
 
 
 
 
УДК  004.5(075.8) 

ББК  32.973-018.2я73 

ISBN 978-5-9275-3637-5 

© Южный федеральный университет, 2020 
© Компаниец В. С., Лызь А. Е., 2020 
© Оформление. Макет. Издательство  
    Южного федерального университета, 2020

ОГЛАВЛЕНИЕ 

ВВЕДЕНИЕ ..................................................................................................... 5 
1. СОВРЕМЕННОЕ СОСТОЯНИЕ МЕТОДОЛОГИИ UX-
ПРОЕКТИРОВАНИЯ .................................................................................... 6 

1.1. Классический подход ............................................................................. 6 

1.2. Бережливый UX ...................................................................................... 7 

1.3. Дизайн-спринт ........................................................................................ 8 

1.4. Dual Track Agile .................................................................................... 10 

1.5. Выводы.................................................................................................. 11 

2. ЭЛЕМЕНТЫ ПОЛЬЗОВАТЕЛЬСКОГО ОПЫТА  
ДЖ. ГАРРЕТТА ............................................................................................ 12 

2.1. Общая характеристика ......................................................................... 12 

2.2. Уровень стратегии ................................................................................ 13 

2.3. Уровень возможностей ........................................................................ 26 

2.4. Уровень структуры ............................................................................... 28 

2.5. Уровень компоновки ............................................................................ 29 

2.6. Уровень поверхности ........................................................................... 31 

3. ЮЗАБИЛИТИ-ИССЛЕДОВАНИЕ ПОЛЬЗОВАТЕЛЬСКИХ 
ИНТЕРФЕЙСОВ .......................................................................................... 32 

3.1. Характеристики и показатели качества программных продуктов .... 32 

3.2. Описание целей и задач юзабилити-исследования ............................ 41 

3.3. Пример юзабилити-исследования пользовательского интерфейса 
браузеров ..................................................................................................... 47 

3.3.1. Введение ......................................................................................... 47 

3.3.2. Оценка скорости работы ................................................................ 48 

3.3.3. Анализ количества ошибок ............................................................ 49 

3.3.4. Оценка скорости обучения ............................................................ 50 

3.3.5. Оценка субъективной удовлетворенности .................................... 51 

3.3.6. Оценка технической эстетики ....................................................... 52 

Оглавление 

4 

3.3.7. Итоговая оценка эргономичности .................................................. 53 

4. ИНСТРУМЕНТАЛЬНЫЕ МЕТОДЫ В ЮЗАБИЛИТИ-
ИССЛЕДОВАНИЯХ ..................................................................................... 54 

4.1. Метод биологической обратной связи с использованием 
нейрогарнитуры NeuroSky MindWave ........................................................ 54 

4.2. Метод окулографии с использованием айтрекера  
Eye Tribe Tracker .......................................................................................... 57 

5. ПРАКТИЧЕСКИЕ ЗАДАНИЯ ПО ЭРГОНОМИЧЕСКОМУ 
ПРОЕКТИРОВАНИЮ ПОЛЬЗОВАТЕЛЬСКИХ ИНТЕРФЕЙСОВ .... 65 

Практическая работа №1 «Проблемы юзабилити в повседневных 
задачах» ........................................................................................................ 65 

Практическая работа №2 «Эвристическая оценка юзабилити 
пользовательского интерфейса» ................................................................. 65 

Практическая работа №3 «Дерево проблемы» .......................................... 68 

Практическая работа №4 «Интервью» ....................................................... 70 

Практическая работа №5 «Персонажи» ..................................................... 73 

Практическая работа №6 «Аналоги» .......................................................... 74 

Практическая работа №7 «Дизайнерская воронка» ................................... 76 

Практическая работа №8 «Раскадровка пользовательского сценария» ... 79 

Практическая работа №9 «Информационная архитектура приложения» 80 

Практическая работа №10 «XD-макет пользовательского интерфейса» . 81 

Практическая работа №11 «Формализованная оценка эргономичности 
интерфейса» ................................................................................................. 81 

ЗАКЛЮЧЕНИЕ ............................................................................................ 86 
СПИСОК ЛИТЕРАТУРЫ ........................................................................... 88 
ПРИЛОЖЕНИЯ ............................................................................................ 92 
Приложение А ................................................................................................. 92 
Приложение Б ................................................................................................. 98 
 

 

ВВЕДЕНИЕ 

Наблюдаемое расширение сферы использования ИТ не только для решения 
профессиональных задач, но и для удовлетворения человеком разнообразных 
информационных, досуговых, коммуникативных потребностей 
предъявляет к пользовательскому интерфейсу ряд новых требований. Помимо 
традиционных критериев юзабилити-исследования, современный интерфейс 
должен быть ориентирован на эстетическую привлекательность, 
мотивационную притягательность для пользователя, а значит опираться на 
его целостный, «пользовательский» опыт. В общем случае пользовательский 
опыт (опыт взаимодействия, англ. User eXperience, UX) – это восприятие 
и ответные действия пользователя, возникающие в результате использования 
и/или предстоящего использования продукции, системы или услуги (
ISO 9241-210 [34]). В сфере ИТ в процессе использования как информационной 
системы в целом, так и отдельной её части (веб-сайта, приложения 
и пр.) термин UX применяется для описания субъективного отношения, 
возникающего у пользователя. Однако при внешней простоте термина,  
UX-проектирование – сложный и неоднозначный процесс, включающий 
помимо этапов анализа и проектирования слабоформализуемые процедуры 
(опросы, наблюдение за работой пользователей, тестирование производительности 
и анализ журналов деятельности, фокус-группы и др.). К тому же 
на практике существуют разные подходы к UX-проектированию и наполнению 
этого процесса конкретным содержанием. Так возникла задача 
уточнения современного подхода к UX-проектированию, детально рассматриваемого 
в данном пособии.  

Одна из целей данного пособия – представить накопленный опыт  

UX-проектирования при реализации в вузе магистерской программы «Эр-
годизайн пользовательского интерфейса» по направлению подготовки 
«Прикладная информатика» [18–20, 23]. 

1. СОВРЕМЕННОЕ СОСТОЯНИЕ МЕТОДОЛОГИИ  

UX-ПРОЕКТИРОВАНИЯ 

1.1. Классический подход 

В своей исходной форме UX-проектирование основано на каскадной 

модели разработки (рис. 1). 

 

 

Рис. 1. Каскадная модель проектирования 

 

Команда разработки, использующая каскадную модель, стремится 

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

Классический каскадный процесс UX-проектирования обычно выгля-

дит так: 

1. Проводится исследование, чтобы выявить проблемы. 
2. Выявленным проблемам присваиваются категории и приоритет. 
3. Создаются персонажи и алгоритмы их действий, как правило, в виде 

карты путешествий. 

4. Генерируются идеи. 
5. Создается и тестируется прототип. 
6. Финальная версия прототипа передается разработчикам. 

1.2. Бережливый UX 

7 

7. Происходит запуск продукта версии 1.0. 
8. При наличии ресурсов и потребности в обновлении продукта проис-

ходит возврат к первому этапу, на котором выполненные ранее исследова-
ния дополняются отзывами пользователей. 

Проблема 
в 
том, 
что 
классическая 
каскадная 
модель 
UX-

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

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

ку нового набора функций каждые 2–4 недели и не оставляет времени на 
ожидание, пока UX-дизайнеры выполнят свои работы. Поэтому большин-
ство команд разработки сначала просто отказались от классического  
UX-проектирования. Потом вместо UX-проектировщиков в команды взяли 
графических дизайнеров, которые смогли выпускать прототипы за двухне-
дельные 
итерации. 
Эти 
дизайнеры 
не 
были 
настоящими 
UX-

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

1.2. Бережливый UX 

Бережливый (Lean) UX – это решение от Джеффа Готельфа, которое 

позволяет UX работать внутри agile и быстро обновлять проекты на основе 
отзывов пользователей (рис. 2) [47]. 

Принципы бережливого UX-дизайна [50]: 

 понимание целевой аудитории и ее проблем; 

 создание MVP (Minimum Viable Product – минимально жизнеспо-

собного продукта); 

 работа короткими итерациями; 

 постоянное тестирование нововведения на пользователях и, если 

что-то не так, следует откат нового решения; 

 работа командой: UX-проектировщики, дизайнеры, разработчики и 

тестировщики работают вместе с постоянным обменом информацией. 

 

1. Современное состояние методологии UX-проектирования 

8 

 

Рис. 2. Модель бережливого UX 

 
Но Lean UX не был идеальным решением. С одной стороны, обнов-

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

В зрелом продукте есть много отзывов пользователей, что обеспечива-

ет эффективность Lean UX. Поэтому Lean UX стал, своего рода, отрасле-
вым стандартом практически для любой группы продуктов. Однако старта-
пам необходим был свой быстрый метод валидации идей. 

1.3. Дизайн-спринт 

Дизайн спринт – метод быстрой генерации и валидации продуктовых 

гипотез, созданный в Google Ventures (GV), венчурном подразделении кор-
порации Гугл.  

1.3. Дизайн-спринт 

9 

В основе дизайн-спринта – сочетание методологии дизайн-мышления 

и Agile [13]: 

 от дизайн-мышления дизайн-спринт берет работу в мультидисци-

плинарной команде (дизайн, бизнес, технологии) и человекоцентричность 
(прямой контакт с клиентом в процессе создания решений);  

 от Agile – принцип быстрого прототипирования и тестирования ре-

шений (Build fast, fail fast). 

Типичный дизайн-спринт это 5 дней интенсивной работы (рис. 3): 
1. Погружение в вопрос, поиск и выбор проблемы.  
2. Генерация и визуализация множества идей, того как можно решить 

выбранную проблему. 

3. Обсуждение идей, выбор и проработка одной из них в деталях. 
4. Создание прототипа выбранной идеи и подготовка к тестированию. 
5. Тестирование прототипа с потенциальными пользователями, обсуж-

дение результатов и последующих шагов. 

 

Рис. 3. Модель дизайн-спринта 

 

Можно отметить, что перечисленные этапы дизайн-спринта в значи-

тельной мере повторяют рассмотренные ранее этапы классического UX-
проектирования с разницей в меньшей детализации и более высокой скоро-
сти работы.  

Если результаты тестирования прототипа положительны, то дизайн-

спринт успешно завершается формированием целей и требований для по-
следующей детальной разработки продукта по методу Lean UX / Agile. 
Иначе, если результаты теста неудовлетворительны, команда должна вер-
нуться к этапу генерации и проработки идей в новом спринте.  

1. Современное состояние методологии UX-проектирования 

10 

1.4. Dual Track Agile 

Если рассматривать представленные процессы UX-проектирования в 

целом, то можно выделить два параллельно работающих трека (подход по-
лучил название Dual Track Agile [61]): исследовательский (Discover) и про-
изводственный (Deliver). Исследовательский трек состоит из итераций ди-
зайн-спринтов, производственный выполняет итерации бережливого UX 
(рис. 4). 

 

 

Рис. 4. Модель Dual Track Agile 

 

Отзывы пользователей и свежие идеи от производственной команды 

пополняют проект новыми данными для экспериментов в исследователь-
ском треке. При наличии ресурсов эффективным решением будет выделе-
ние для исследований специальной команды, которая не привязана к темпу 
спринта Agile-метода, работает с идеями медленнее и более всесторонне, 
обеспечивая продукт наработками на будущее.  

Известны случаи, когда над продуктом работают несколько творче-

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

1.5. Выводы 

11 

Очевидно, что для продуктовой компании содержание в штате специализированной 
исследовательской команды, работающей вне сферы основного 
производства, весьма затратно. Однако в итоге обходится дешевле 
существующих альтернатив: работать без UX или заниматься проблемой 
расходов и переделки чистого Lean UX [38, 59]. 

 

 

Рис. 5. Модель Tri-Track Agile 

1.5. Выводы 

1. Результатом эволюции UX-проектирования в настоящее время является 
Dual (Tri) Track-дизайн, соединивший подходы дизайн спринта Google 
Ventures и экономичного UX Джеффа Готельфа с методологией Agile.  

2. Современное UX-проектирование по-прежнему состоит из ставших 

классическими методов и практик, но укороченных и ускоренных до темпов 
гибкой разработки.  

2. ЭЛЕМЕНТЫ ПОЛЬЗОВАТЕЛЬСКОГО ОПЫТА ДЖ. ГАРРЕТТА 

2.1. Общая характеристика 

Основываясь на сделанных в первом разделе выводах, было принято 

решение в учебном процессе рассматривать классический процесс UX-
проектирования, постепенно овладевая которым, студенты могли бы систематизировано 
развивать практические навыки, совершенствоваться и, 
повышая темп работы, в дальнейшем более успешно включаться в современные 
процессы дизайна и разработки. В качестве опорной модели была 
выбрана классическая система элементов пользовательского опыта, разработанная 
Джессом Гарреттом [7]: от абстрактного уровня «стратегии» до 
детализированного уровня «поверхности» программного продукта (рис. 6).  

 

 

Рис. 6. Элементы Дж. Гарретта (http://jjg.net/elements/) 

 

Система элементов Гарретта дает хорошо применимую в учебном 

процессе наглядную структуру классического исследования пользовательского 
опыта (от общего к частному). Система была встроена в учебный мо-