Человеко-компьютерное взаимодействие

В.Д. Магазанник

ЧЕЛОВЕКО-КОМПЬЮТЕРНОЕ
ВЗАИМОДЕЙСТВИЕ

2-е издание, дополненное и переработанное

Допущено Учебно-методическим объединением вузов Российской Федерации 
по университетскому политехническому образованию в качестве учебного 
пособия для студентов высших учебных заведений, обучающихся
по направлениям подготовки 09.03.01 «Информатика и вычислительная
техника» (уровень бакалавриата) и 09.04.01 «Информатика
и вычислительная техника» (уровень магистратуры)

2020
Москва 
Университетская книга

УДК 004.5
ББК 73
М12
Рецензенты
Каданцев В.Н., доктор физико-математических наук, профессор,
заведующий кафедрой прикладной синергетики института
кибернетики Московского технологического университета;
Анохин А.Н., доктор технических наук, профессор, заведующий
кафедрой автоматизированных систем управления Обнинского
института атомной энергетики Национального исследовательского
ядерного университета «МИФИ»

Магазанник В.Д.
М12  
Человеко-компьютерное взаимодействие: учебное пособие. 2-е изд., 

доп. – М.: Университетская книга, 2020. – 408 с., ил.

ISBN 978-5-98699-181-8

Представлен весь спектр вопросов человеко-компьютерного взаимодействия. Рассмотрены требования к компоновке компьютеризированных рабочих мест и планировке офисных помещений, а также 
к мониторам и средствам ввода информации. В отличие от 1-го издания обновлен и дополнен материал 3–5 глав, в которых представлены методы разработки, формирования, оценки, тестирования 
и прототипирования пользовательских интерфейсов. Представлена 
эволюция взглядов и инструментария человеко-компьютерного взаимодействия. Основное место отведено подходам, методам и инструментарию формирования и оценки пользовательского интерфейса. 
Освещены процедуры итерационного прототипирования интерфейса, 
рассмотрены виды прототипов, программные пакеты для макетирования и их сравнительные возможности. Особое внимание уделено 
вариантам и инструментарию создания навигационных структур, что 
наиболее актуально для web-сайтов. Представлена примерная учебная 
программа дисциплины. 
Для студентов и аспирантов высших учебных заведений, обучающихся по направлению подготовки «Информатика и вычислительная 
техника» (уровни бакалавриата и магистратуры). Может использоваться в учебном процессе по широкому кругу направлений подготовки кадров информатики и информационных технологий, связанных 
с разработкой и использованием средств вычислительной техники 
и программного обеспечения. Представляет интерес для специалистов 
в области web-дизайна, юзабилити, разработчиков программного обеспечения, UX-инженеров и др.

УДК 004.5
ББК 73

ISBN 978-5-98699-181-8
©  Магазанник В.Д., 2020 
©  Университетская кни
га, 2020

ОГЛАВЛЕНИЕ

Введение .....................................................................................................6

Тема 1. Рабочее место человека при работе на компьютере ......................14
1.1. Общая компоновка рабочего места .............................................14
1.2. Требования к клавиатуре ..............................................................26
1.3. Требования к мыши ......................................................................35
1.4. Сводная таблица преимуществ и недостатков различных 
устройств ввода информации ..................................................................42
1.5. Требования к монитору и к освещению рабочего места .............44
1.6. Средства моделирования компоновки рабочего места ...............48
1.7. Сводная таблица требований к компоновке рабочего места
при работе на компьютере .......................................................................51
Контрольные вопросы ........................................................................53
Литература ...........................................................................................54

Тема 2.  Эволюция взглядов и инструментария человекокомпьютерного взаимодействия ....................................................56
2.1. Общие положения ........................................................................56
2.2. Командная строка ........................................................................58
2.3.  Меню, заполнение специальных форм-таблиц, диалог 
по вопроснику ..............................................................................59
2.4. WIMP-интерфейс .........................................................................62
2.5.  Трехмерный (пространственный) интерфейс и виртуальная
 реальность. Возможности создания трехмерных изображений ....64
Контрольные вопросы ........................................................................83
Литература ...........................................................................................84

Тема 3.  Последовательность и структура разработки 
пользовательского интерфейса .....................................................86
3.1. Последовательность разработки ..................................................87
3.2. Начало работы над проектом. Уровень стратегии .......................90
3.2.1. Профилирование и сегментация пользователей ...............91
3.2.2. Метод персонажей ..............................................................93
3.2.3. Определение технических требований ..............................96
3.2.4. Пользовательские сценарии ...............................................98
3.3.  Уровень набора возможностей. Спецификация 
функциональности .....................................................................101
3.4.  Уровень структуры. Распределение контента и схемы
 взаимодействия ..........................................................................106
3.4.1. Распределение контента. Возможности и инструменты ....106
3.4.2. Схемы взаимодействия .....................................................117

Оглавление 

3.5.  Уровень компоновки. Разделение интерфейса на страницы, 
макеты страниц и сайтов, схемы навигации, структура 
справочной системы ...................................................................134
3.5.1. Разделение интерфейса на страницы...............................134
3.5.2. Макеты страниц и сайтов .................................................140
3.5.3. Схемы навигации ..............................................................148
3.5.4. Структура справочной системы .......................................154
3.6. Уровень поверхности. Визуальные свойства объектов .............157
3.6.1. Размер ................................................................................158
3.6.2. Форма ................................................................................163
3.6.3. Цвет ...................................................................................166
3.6.4. Текстура .............................................................................172
3.6.5. Шрифт ...............................................................................175
Контрольные вопросы ......................................................................186
Литература .........................................................................................188

Тема 4.  Некоторые принципы дизайна интерфейса.
Типовые элементы пользовательских интерфейсов ....................190
4.1. Единство .....................................................................................192
4.2. Баланс .........................................................................................197
4.3. Контраст .....................................................................................202
4.4. Динамика ....................................................................................205
4.5. Нюансировка ..............................................................................208
4.6. Мультимедиа ..............................................................................210
4.7. Метафоры ...................................................................................223
4.8. Письменное объяснение дизайнерских решений .....................228
4.9. Типовые элементы пользовательского интерфейса ..................234
4.9.1. Кнопки ..............................................................................235
4.9.2. Иконки ..............................................................................238
4.9.3. Пиктограммы ....................................................................241
4.9.4. Фотографии, изображения ...............................................242
4.9.5. Настройки .........................................................................243
4.9.6. Списки ..............................................................................245
4.9.7. Меню .................................................................................248
4.9.8. Прокрутки .........................................................................253
4.9.9. Вкладки .............................................................................255
4.9.10. Курсоры ...........................................................................257
4.9.11. Выделение .......................................................................259
4.9.12. Разделители .....................................................................259
Контрольные вопросы ......................................................................260
Литература .........................................................................................263

Оглавление
5

Тема 5.  Оценка и прототипирование пользовательского 
интерфейса ..................................................................................265
5.1. Общие положения и структура методов оценки
пользовательского интерфейса .............................................................266
5.2. Оценка скорости работы ............................................................297
5.3. Оценка ошибок пользователя ....................................................309
5.4. Оценка скорости обучения ........................................................317
5.4.1. Общая понятность системы .............................................317
5.4.2. Обучающие материалы .....................................................326
5.5. Субъективная удовлетворенность .............................................330
5.5.1. Эстетическая привлекательность .....................................331
5.5.2. Уровень психического напряжения .................................333
5.6. Юзабилити пользовательского интерфейса ..............................341
5.7. Прототипирование пользовательского интерфейса .................350
5.7.1. Бумажная версия прототипа ............................................351
5.7.2. Презентационная версия прототипа ...............................354
5.7.3. Псевдореальная версия прототипа ..................................358
5.7.4. Реальная версия прототипа ..............................................360
Контрольные вопросы ......................................................................361
Литература .........................................................................................363

Примерная учебная программа дисциплины.............................................365

Приложение I. Перечень стандартов  в области
человеко-компьютерного взаимодействия .................375

Приложение II. Основные понятия и часто встречаемая
терминология при разработке
пользовательского интерфейса .....................................381

Введение

Человеко-компьютерное взаимодействие –  сравнительно молодая область междисциплинарных исследований. Наиболее бурное ее 
развитие пришлось на последние 25–30 лет и связано с резким увеличением числа пользователей компьютеров и с возрастанием роли 
компьютеров в жизни и деятельности людей.
Круг специалистов, занимающихся разными аспектами взаимодействия человек – компьютер, достаточно велик. Прежде всего это 
специалисты в области дизайна (особенно web-дизайна), проектирования взаимодействия, информационной архитектуры, педагогики 
и, конечно, наиболее продвинутые программисты.
К настоящему времени человеко-компьютерное взаимодействие 
de facto стало самостоятельной профессией. Еще в 1994 г. издание 
«Harvard Business Review» опубликовало работу «Юзабилити: новое 
измерение продуктового дизайна», где делался вывод, что человекоориентированное проектирование в компьютерных науках находится 
только в стадии становления, и соответствующие специалисты в значительной мере изолированы от команды разработчиков; человекокомпьютерное же взаимодействие вообще не упоминалось. Но уже 
в 2001 г. в Ассоциации информационных систем в США была создана группа по изучению человеко-компьютерного взаимодействия 
(Special Interest Group in Human-Computer Interaction –  SIGHCI). Тематика работ этой группы была достаточно широкой и включала не 
только интерфейсные, но и организационные аспекты. Большинство 
работ имели прикладной характер и касались дизайна интерфейсов для 
электронной коммерции, возможностей рекламы, поведения людей 
в Интернете вообще и на отдельных web-сайтах в частности. В это же 
время аналогичная группа появилась и в обществе человеческих факторов и эргономики (Human Factors and Ergonomic Society –  HFES).
Разработка пользовательских интерфейсов (ПИ) стала в настоящее время не только профессией узкого круга людей, но частью деятельности многих специалистов, имеющих отношение к разработке 
программного обеспечения и/или сайтов. Это происходит, потому 
что развивается индустрия заказного создания как сайтов, так и программ, где все большее внимание уделяется интерфейсу. Это внимание обусловлено все более жесткой конкуренцией и, как следствие, 
усилением внимания к привлечению потенциальных покупателей. 

 
Введение 
7

Развитие Интернета и потребность в разработке самых разнообразных сайтов также стимулируют рост внимания к пользовательским 
интерфейсам. Возросший спрос родил еще большее предложение, 
в результате чего возникли две категории людей (программисты 
и web-дизайнеры), профессиональный успех которых напрямую связан с качеством создаваемого ими ПИ.
Человеко-компьютерное взаимодействие –  обширная междисциплинарная область, пересекающаяся с такими специальностями, 
как компьютерные науки, психология, социология и антропология, 
эргономика, дизайн и др. Поэтому исследователи нередко «соскальзывают» в ту или иную область в соответствии со своей базовой специализацией и нарушают сложное равновесие между комплексом 
дисциплин. Даже малейшее изменение «веса» той или иной дисциплины в процедуре оптимизации приводит к резко различающимся решениям интерфейса и в итоге – к неудаче проекта. Наиболее 
характерным примером такого рода «ловушки» является, например, 
отрыв дизайна интерфейса от содержательной стороны, условий работы пользователя и изменений программных и технических характеристик, вызванных им.
Обучение правилам и принципам создания качественного ПИ 
должно учитывать не только существующий, но и будущий облик человеко-компьютерного взаимодействия. Как показывает опыт, жизнеспособные интерфейсы пользователя более чувствительны к технологиям, чем многие части информатики. Например, появление 
и развитие мыши привело к графическим программам, ориентированным на «мышиное» взаимодействие с ними, т.е. к стилю работы, 
базирующемуся на «кликаньи» при редактировании информации. 
Частично базируясь на указанных тенденциях, можно ожидать будущее человеко-компьютерного взаимодействия, основанное на следующих изменениях:
• 
Обилие связей. Развитие высокоскоростных локальных сетей, широкомасштабных национальных сетей и технологий беспроводной связи (через ИК-порт, ультразвуковых, сотовых и др.). Наличие доступа к базам данных и сервисам из большинства мест, по 
которым может путешествовать пользователь.
• 
Высокая функциональность систем. Системы будут иметь большое количество функций. И таких систем будет много, так что 
большинство пользователей не смогут физически в обозримое 

Введение

время освоить их традиционным способом (например, читая толстые руководства).
• 
Массовая доступность компьютерной графики. Возможности компьютерной графики, такие как обработка изображений, графические преобразования, визуализация и интерактивная анимация, 
станут широкодоступными.
• 
Комбинация медиасред. Системы смогут одновременно обрабатывать изображения, голоса, звуки, видео, текст, форматированные данные и обеспечивать обмен результатами обработки между 
пользователями. Отдельные сферы бытовой электроники (например, стереосистемы, видеомагнитофоны, телевизоры) и компьютеры будут функционально объединяться.
• 
Высокая пропускная способность взаимодействия. Скорость взаимодействия человека с компьютером существенно возрастет 
в связи с возможностями компьютерной графики, новых медиасред и типов устройств ввода/вывода. Это приведет к появлению 
качественно различных интерфейсов, таких как виртуальная реальность или компьютерные видеоэффекты.
• 
Большие и тонкие дисплеи. Новые технологии позволят создавать 
очень большие дисплеи и в то же время тонкие и легкие. Это будет 
способствовать их сходству с бумагой, а устройство ввода станет 
сходным с авторучкой, что, конечно, сильно отличается от привычной сегодня картины взаимодействия.
• 
Групповые интерфейсы. Интерфейсы, служащие для координации действий групп людей, будут едиными (например, для встреч, 
инженерных проектов, верификации совместных документов). 
Они будут оказывать большое влияние на характер организации 
и разделение труда. Модели процесса группового проектирования 
будут встроены в системы и приведут к еще большей рационализации проектирования.
• 
Влияние профессиональных знаний пользователей. Обычные 
пользователи будут иметь возможность видоизменять приложения в своих профессиональных областях, внося собственное понимание тех или иных опций. Таким образом, они будут становиться все более важным источником новых приложений.
• 
Информация для общественных нужд. Общественные информационные услуги (например, Compuserve, Prodigy, банковские дома 
и магазины, и т.д.) и специализированные (например, погода для 

 
Введение 
9

пилотов) будут продолжать распространяться. Скорость при этом 
увеличится, повысится пропускная способность взаимодействия 
и качества интерфейсов.
Одним из следствий такого рода изменений будет практическое 
«растворение» компьютеров в окружающей среде и их более тесная 
связь с деятельностью пользователей.
Популярность планшетов привела к буму мобильных приложений для бизнеса. Теперь с их помощью можно общаться с клиентами, просто работать. Одновременно расширяется круг заказчиков. 
Например, «Сбербанк» создал компанию «Сбербанк-Технологии», 
в которой ИТ-команда была сформирована из известных специалистов, запущен и развивается портал облачных сервисов. Аналогичные процессы происходят в здравоохранении, образовании, промышленности, сфере услуг. Все это –  лишь малая часть направлений 
развития информационных технологий, требующая разработки соответствующих пользовательских интерфейсов.
В результате многолетней интенсивной практики сложились 
определенные стереотипы структур ПИ в наиболее широко практикующихся задачах. Среди них можно назвать:



документ-ориентированные: ввод и редактирование текста и гипертекста, форматирование документов, создание и обработка 
иллюстраций, работа с таблицами;



связь-ориентированные: электронная почта, компьютерные конференции, системы обмена текстовыми и голосовыми сообщениями;



ориентированные на предоставление программного инструментария для технических проектов (CAD/CAM);



направленные на обучение в режиме он-лайн, предоставление помощи;



мультимедийные информационные киоски;



системы непрерывного управления: технологическими процессами, виртуальной реальностью, симуляторами, средствами обучения и тренажа, видеоиграми;

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

Введение

их разновидностей. Здесь особенно остро стоит вопрос: какие формы должно принимать авторское право на интерфейсные решения? 
С одной стороны, ясно, что придумать и реализовать хороший интерфейс –  довольно сложная задача, и его авторам необходимо получить не только моральное вознаграждение. С другой стороны, если 
«защитить» такое решение патентом с последующими лицензионными выплатами, это может спровоцировать разработчиков новых 
продуктов искать свои, нехоженые и часто худшие пути в интерфейсе. В качестве яркого примера можно попробовать представить себе 
последствия патентования использования клавиши «F1» для вызова 
справки или стандартных навигаций. Лицензионная защита интерфейсных решений –  прямой путь к тому, что одни и те же функции 
будут реализовываться в разных продуктах по-разному, а это далеко 
не в интересах пользователя. В большинстве случаев крайне нерационально ломать сложившиеся пользовательские привычки, стереотипы, предлагая пусть и более «прогрессивный» ПИ, но сильно отличающийся от хорошо знакомого.
Сегодня Интернет стал для многих людей мощной побудительной 
причиной осваивать компьютеры. Все чаще высказываются критические замечания об интерфейсе, трудно понимаемом непрофессионалами, не сильно продвинутыми пользователями, т.е. большинством 
людей. Можно с уверенностью предсказать, что такая тенденция будет усиливаться. Прирастать пользователи будут только любителями.
В понятие пользовательского интерфейса входит не только 
и даже не столько картинка на экране –  трехмерная, анимированная, какая-то другая, а способы взаимодействия пользователя с системой. Дизайн интерфейса имеет подчиненное положение, главная 
цель ПИ –  облегчить работу пользователя. Такое понимание привело к появлению специальности «Проектирование взаимодействия», 
объединяющей многие разрозненные подходы web-дизайна, юзабилити и пр.
Хороший интерфейс похож на удобную обувь –  никто его не замечает, зато плохой у всех на виду. Но это относится и к первому, 
пользователи выделяют его подсознательно, и, когда он нравится, 
симпатии переносятся на функциональную часть программы.
Имеется множество технических решений, учитывающих «человеческий фактор» в целом и различия между людьми в частности. Например, бордюры во многих странах делают более низкими,