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

 

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

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

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

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

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

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

 

 
 
 

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

А. Е. ЛЫЗЬ 

 
 

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

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

 

 
 

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

 
 
 

 
 
 
 
 
 
 

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

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

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).