Человеко-машинные интерфейсы:
содержание лекций

Содержание

Введение
История интерактивных компьютерных систем
Количественный анализ интерфейса
Компоновка элементов управления
Организация графического интерфейса
- Обработка событий ввода
- Императивное и декларативное описание интерфейса
Шаблон MVC и его вариации
Рекомендации по проектированию интерфейсов. Обзор документов HIG (human interface guidelines)
- Прототипирование интерфейса и итерационный процесс разработки, юзабилити-тестирование

Введение

HMI (Human-Machine Interaction), HCI (Human–Computer interaction). «Дисциплина, занимающаяся проектированием, оценкой и реализацией интерактивных компьютерных систем, предназначенных для использования человеком, а также изучением основных связанных с этим явлений.» (ACM)

Интерфейс пользователя:

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

Компьютер:

операционные системы,
компьютерная графика,
языки программирования.

Человек:

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

Человеко-машинный интерфейс

User Experience (UX, опыт взаимодействия), Usability (удобство использования), аспекты:
- Изучаемость (learnability)
  - Кривая обучаемости
- Эффективность (efficiency)
- Запоминаемость (memorability)
- Контроль ошибок
- Удовлетворенность пользователя
Accessibility (доступность для различных категорий пользователей)

История интерактивных компьютерных систем

1940-e, 50-e. Неинтерактивный компьютер (пакетная обработка).
1960-е. Компьютерный терминал, системы разделения времени, CLI.
1963. Sutherland — Sketchpad. Первая графическая интерактивная система, прообраз САПР. Демонстрация: часть 1, часть 2.
1960-e. Тед Нельсон. Концепция гипертекста и гипермедия, проект Xanadu.
Дуглас Энгельбарт. Усиление человеческого интеллекта.
- 1968. Дуглас Энгельбарт. NLS. The Mother of All Demos (1, 2, 3). Совместная работа, организация информации, гипертекст, мышь и аккордная клавиатура.
1968, 1972. Алан Кэй. Концепции KiddiComp, Dynabook. Кэй про концепцию Dynabook. Кэй с макетом.
1970-е. Xerox PARC. WIMP-интерфейсы. Alto. Smalltalk (4:30, 11:00). Программируемость. Современные наследники (Squeak, Pharo).
1984–настоящее время. Macintosh и дальнейшие реализации WIMP.

«Наша идея заключалась в том, чтобы позволить детям начать с довольно простого, наивного интерфейса, предполагая дальнейший рост до уровня эффективности NLS… Я могу охарактеризовать то, что мы имеем сегодня, как прекрасный велосипед с приставными колесами, и никто не знает про эти колеса, поэтому никто не пытается их снять.» (Алан Кэй, 1995)
Post-WIMP. Джеф Раскин. Canon Cat. ZUI. Humane Interface
Развивающиеся направления
- естественные интерфейсы и непосредственное манипулирование
  - Dynamicland
- виртуальная и дополненная реальность
- распознавание речи, виртуальные ассистенты
- нейрокомпьютерный интерфейс

Количественный анализ интерфейса

Jef Raskin. The Humane Interface: New Directions for Designing Interactive Systems. 2000. Джеф Раскин. Интерфейс: новые направления в проектировании компьютерных систем. 2004.

Модель KLM

GOMS (Goals, Operators, Methods, Selection Rules).

KLM (Keystroke-level model):

K = 0,2 с: нажатие клавиши. Зависит от опыта пользователя и характера вводимой информации.
P = 1,1 с: указание позиции.
H = 0,4 с: перемещение между клавиатурой и графическим устройством.
M = 1,35 с: ментальная подготовка.
R: ответ.
- Больше 0,25 с создает проблемы.

Значения варьируются, есть более детальные модели.

Команды и аргументы.

Установка M.

Начальная Начальная расстановка операторов M.
- Перед всеми K.
- Перед всеми P, если это выбор команды, а не аргумента.
Удаление ожидаемых операторов M. P M K → P K
Удаление операторов M внутри когнитивных единиц M K M K M K → M K K K
Удаление операторов M перед последовательными разделителями
Удаление операторов M, которые являются прерывателями команд M K → K, если К — разделитель после постоянной строки (команды, а не аргумента).
Удаление перекрывающих операторов M и R. R M → W (время ожидания)

Преобразователь температур: радиокнопки и поле ввода.

H P K H K K K K K (четыре символа температуры и Ввод) H M P M K H M K M K M K M K M K H M P K H M K K K K M K

H + M + P + K + H + M + K + K + K + K + M + K = 0.4 + 1.35 + 1.1 + 0.2 + 0.4 + 1.35 + 4*(0.2) + 1.35 + 0.2 = 7.15 с

Переключатель уже в требуемом положении (50 %): M K K K K M K, 3,7 с. (7.15 + 3.7) / 2 = 5.4

Процент ошибок?

Идеальный случай H P K P K H M P M K M P M K (нажать, переместить, отпустить) H M P K M P K (правило 1) 0.4 + 1.35 + 1.1 + 0.2 + 1.35 + 1.1 + 0.2 = 5.7 с
С прокруткой (S = 3 с) и масштабированием H + 3(M + P + K + S + K) + M + P + K + K 0.4 + 3*(1.35 + 1.1 + 0.2 + 3.0 + 0.2) + 1.35 + 1.1 + 0.2 + 0.2 = 20.8 с

С указанием единицы измерения символом M K K K K K M K, 3.9 с.

Единица измерения в качестве разделителя M K K K K M K, 3.7 с.

Разветвленный интерфейс M K K K K, 2.15 с.

Очистка полей?

Информационная и символьная эффективность интерфейса

Закон Фитса

\[T = a + b * \log_{2} (D / S + 1)\]

\(T\) — среднее время, затрачиваемое на совершение действия
\(a\) — среднее время запуска/остановки движения
\(b\) — величина, зависящая от типичной скорости движения
\(D\) — дистанция от точки старта до центра цели
\(W\) — ширина цели, измеренная вдоль оси движения

Меню Мак: \(50 + 150 * \log_{2} (80/50 + 1) = 256 (мс)\)
Меню Виндовс: \(50 + 150 * \log_{2} (80/5 + 1) = 664 (мс)\)

Закон Хика

Время, затрачиваемое на выбор одного из \(n\) равновероятных вариантов:

\[T = a + b * \log_{2} (n + 1)\]

Выбор из \(n\) вариантов, каждый с вероятностью \(p_i\):

\[T = a + b * H\]

\[H = \sum_{i}^{n}{p_i * \log_{2} (1/p_i + 1)}\]

Компоновка элементов управления

Адаптация к параметрам системы: стили, размеры шрифта, локализация и направление письма.

Визуальная иерархия:

размеры,
цвет и контраст,
порядок следования,
отступы (группировка и разделение),
подобие и повторение,
выравнивание.

Описание компоновки, система ограничений, иерархия компоновщиков и относительное позиционирование.

Способы описания компоновки:

императивный (создание и размещение контейнеров и элементов),
декларативный (описание структуры),
визуальный.

Примеры в Glade и Qt Creator (QML).

Организация графического интерфейса

Компьютерная графика, уровни абстракции

растровое изображение, графический буфер
система координат (Qt), дробные координаты, сглаживание
обновление, цикл отрисовки
множественная буферизация
- первичный (кадровый буфер), вторичные буферы, копирование или переключение
непосредственный режим
- графический контекст, состояние, команды рисования
абстрактный режим
- граф сцены
  - производительность, возможность отрисовки в отдельном потоке
  - Qt Quick Scene Graph

Обработка событий в непосредственном режиме (IMGUI)

нарисовать кнопку в (x, y), если сюда нажали { … }

В абстрактном режиме:

создать кнопку, добавить эту кнопку в окно, задать обработчик для события нажатия на эту кнопку.

Иерархия компонентов, компоновщик (шаблон ООП)

Обработка событий ввода

Событийно-ориентированное программирование. Очередь событий и главный цикл.

Пример: нажатие кнопки (нажать, отпустить, поиск по иерархии компонентов, перерисовка).

События клавиатуры, фокус ввода.

Длительная обработка и многопоточность.

import QtQuick 2.0

Rectangle {
    width: 300; height: 300

    Text {
        id: myText
        text: 'Click anywhere'
    }

    WorkerScript {
        id: myWorker
        source: "script.js"

        onMessage: myText.text = messageObject.reply
    }

    MouseArea {
        anchors.fill: parent
        onClicked: myWorker.sendMessage({ 'x': mouse.x, 'y': mouse.y })
    }
}

WorkerScript.onMessage = function(message) {
    // ... long-running operations and calculations are done here
    WorkerScript.sendMessage({ 'reply': 'Mouse is at ' + message.x + ',' + message.y })
}

Императивное и декларативное описание интерфейса

Императивное программирование: создание и размещение элементов интерфейса.
Управление состоянием.
Декларативное описание структуры интерфейса
- Реактивное программирование: динамическое распространение изменений.

Шаблон MVC и его вариации

Состояние системы. Объект интерфейса, семантика задачи и семантика компьютера (lec6/10.1.1.37.743.pdf).

Архитектура MVC

модель (non-visual, non-interaction)
- модель предметной области и модель приложения
- независимость модели интерфейса пользователя
контроллер (interaction information)
представление (visual information)

Сложные (иерархические) представления.

Модель коммуникации:

пользователь выполняет действие,
контроллер интерпретирует действие как запрос на изменение состояния модели и оповещает модель,
модель изменяет свое состояние и уведомляет представление,
представление запрашивает состояние у модели и обновляется соответственно.

Шаблон проектирования "Обозреватель" (Observer, Наблюдатель).

Оригинальный MVC в Smalltalk-76 и Smalltalk-80, Pluggable MVC

работа контроллера (альтернатива событийно-ориентированному программированию)
подключаемые представления (pluggable views, альтернатива шаблону проектирования "Адаптер")

GUI Architectures (Martin Fowler).

Связывание данных. Модель предметной области и модель представления. Состояние представления.

Model-View-Presenter (MVP) и Model-View-ViewModel (MVVM).

M, V, Delegate в Qt и QtQuick.

Применение в медиаплеере (задания 3 и 4).

Человеко-машинные интерфейсы: содержание лекций