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

1. HUMAN COMPUTER INTERFACES
Человеко-машинные интерфейсы
Введение в принципы и методы HCI
МФТИ 2016

2. Основные понятия и этапы HCI
• Семиотика
• Юзабилити
– Обучаемость
– Эффективность
– Безопасность
• Нидфайндинг
– A
– B
– C
• Прототипирование
– A
– B
– C
• Программная архитектура
– Software Architecture
– Model-View-Controller
• Архитектура дизайна
– Разметка, грид, навигация
– Шрифты, цвет
– Пустое пространство
• Специальные темы
– Доступность для лиц с
ограниченными возможностями
– Интернационализация
• Эвристический анализ
– Эвристика Нильсена
– Эвристика Б
– Эвристика С

3. Семиотика
• Семиотика – наука о символах
– Символы бывают не только
визуальными, звуки и слова языка
– тоже символы
• В основе нашей коммуникации с
машиной лежат знаки, которые
обозначают действия и события
• Интерфейс – это опосредование
через символы логики управления
машиной в действия и
информацию, понятные человеку
– Опосредование происходит путем
МЕТАФОРЫ – свойство знакомого
объекта переносится на объект
незнакомый

4. Метафора
Такой же длинный
и стремительный? )
Ты как
поезд-экспресс
А ты зато
как батарея
Нет, точно так же
стоишь только
одну минуту )=
Такая же горячая?
Нет, такая же
ребристая (
Хорошая метафора обладает очевидностью и недвусмысленностью

5. Юзабилити

6. Юзабилити
• Юзабилити – характеристика того,
насколько эффективно пользователи
могут использовать
функциональность системы
– Обучаемость (learnability)
– Эффективность (efficiency)
– Безопасность (safety)
• Пользователь – не дизайнер!
– Он не знает, что ему нужно
– Но то, что ему нужно, должно быть
ему доступно
• А дизайнер – не пользователь!
– Дизайнер не может увидеть систему
чужими глазами («замыленный глаз»)
ЖМИ СЮДА!
А ТУТ ЧЕТА ЕСТЬ!
ГЛЯДИ СЮДА!

7. Обучаемость
• Насколько легко пользователю
дается понимание интерфейса
• Что будет, если… ?
– Система должна указывать юзеру
через интерфейс на свою модель
– Система должна обеспечивать
обратную связь: юзер должен
понимать, к каким последствиям
привели его действия
• Обучение – движение от цели через
действия к желаемому результату
– Help читают, чтобы вылезти из уже
возникшей проблемы
• Learning curve – функция от
понимания системы во времени
Тяжело
в ученье Легко
в бою
ПОНЯТНО…
ЧЕГО CLOSE?

8. Чечече?

9. Примеры неочевидных действий

10. А вот тут уже без инструкции не разобраться

11. Составляющие обучаемости
• Последовательность (consistency) – новые
неизвестные интерфейсы должны
следовать уже известным принципам
– Внутренняя: внутри приложения
– Внешняя: в логике системы, где
приложение работает
– Метафорическая: система символов
должна быть общей для приложения
• Привычность (affordance) – информация,
транслируемая вне текста и символов!
– Между «узнать» (recognize) и «вспомнить»
(recall) есть большая разница!
– «Вот это стол, за ним сидят,
вот это стул, на нем сидят?»
– Кнопки нажимают
– Ручки крутят
– Засветка показывает активный элемент
• Обратная связь (Feedback) – система
визуально сообщает свое состояние

12. Естественный маппинг
• Естественный маппинг (natural
mapping) – организация контролей в
соответствии с логикой
происходящих действий
– Руль вправо – едем вправо
– Поворотник на руле вверх-вниз -
почему?
– А какая конфигурация ручек конфорок
«естественна» для плиты?

13. Отклик системы
• Мы не воспринимаем интервал короче
50-100 миллисекунд
– Отсюда эмпирически полученные 25
кадров в секунду (40 миллисекунд)
– 25 кадр – это легенда, на самом деле мы
замечаем только неприятную рябь и
напряжение в глазах
• Психология восприятия
– Отклик меньше 0,05 с – мгновенный
– 0,1 – 1 с – «система подтормаживает»
– 1 - 5 с. –
– > 5 с.
• Фазы получения фидбека
– Поверхностный взгляд
– Внимательное чтение
– Наведение мыши или нажатие
– Клик
– Изучение результата
 25%

14. Эффективность
• Насколько опытный пользователь
легко решает в системе свои задачи
• Рабочая память
– 4 регистра
– Срок хранения <10 сек
• Что легче запомнить?
– С К П Е O Т
– КОТ ПЕС
• Каждый регистр – один шаг
– Начинающие делят в голове
операцию на шаги
– Профи держат операцию в голове как
единый блок (так шахматисты
запоминают позиции, а дизайнеры –
работу в Фотошопе)

15. Закон Фитта
N
N
N*m
T = a + b log (D/S + 1)
где D – расстояние до цели
S – размер цели
a,b – экспериментальные константы
(~0,14, ~0.25)
В маленькую цель рядом
попадают так же быстро
как в большую далеко
Совсем просто: мы как бы
последовательно сужаем в уме
окружность вокруг цели

16. Следствие из закона Фитта
Меню 2-1
Меню 2-2
Меню 2-3 ► Подменю 2-3-1
Подменю 2-3-2
Подменю 2-3-3
Меню 1 Меню 2 Меню 3 Меню 4 Меню 5
Самые нажимабельные кнопки – на кромке экрана
( ЕСЛИ там происходит автокорректировка ! )
Время для операции drag T = a + b D/S, где D – длина, а S – ширина полосы

17. Адаптивный дизайн
• Горячие клавиши
• Часто используемые кнопки -
крупные
• Автозаполнение форм
• Автокорректор

18. KLM-анализ эффективности
• Keyboard Level Model
– K = клавиатура
– B = mouse button press
– P = mouse point
– D = mouse drag (draw)
– H = homing (перенос рук с мышь-клавиатура)
– M = mental preparation (что дальше делать?)
• Скорость ввода
– K – 0,28 сек профи, 1,20 сек новичок
– B – 0,1 сек за клик
– P = закон Фитта (аппроксим.1,1 сек)
– D = функция от ширины полосы (см.)
– H = 0,4 сек
– M = 1,2 сек
• Метод или операция описывается в
действиях пошагово!
– М – разделитель шагов!
• Временные затраты суммируются

19. Безопасность
• Безопасность – возможность не
совершать ошибок и
восстанавливаться после них
• Виды человеческих ошибок
• Тяп (slip): сделал не так
– Целился в лайк, а попал в смайлик
• Ляп (lapsus): забыл как надо
– Не нажал CTRL при копировании
• Оп (mistake) – вспомнил точно и
сделал правильно… но не то, что
надо было
– Закрыл файл без сохранения

20. Методы защиты от ошибок
• UNDO и возможность отката в
последнее состояние до ошибки
• Возможность прекратить долгую
операцию или закрыть диалог без
изменений и последствий
– Диалог подтверждения «Are you
sure?» нужно использовать редко! К
нему мгновенно привыкают
• Уникальные ярлыки и описания
действий и операций
• Четкая идентификация текущего
режима и самоотключение
временных режимов по таймеру
• Четкие сообщения об ошибках и о
дальнейших действиях пользователя
– Кратко и понятно!
– И не пугать юзера страшными
словами! Он и так напуган

21. Пример защищенного интерфейса
Бюллетень
Согласны ли Вы с решением
от 13 марта 1938 года
О воссоединении
Австрии с
Германским Рейхом
и голосуете ли Вы за партию
нашего фюрера
Адольфа Гитлера?
Плебисцит и выборы
рейхстага Великой
Германии
Да нет

22. Это ваще как??

23. Нидфайндинг и прототипирование

24. Нидфайндинг
• Аксиома: пользователь может и не
сказать, но точно может показать
• Задачи
– Объективные сведения о
пользователях и их целях
– Удачи и неудачи пользователей в
решении задач
– Не «как» они используют систему, а
«что» они пытаются сделать!
• Методы
– Интервью (собеседование в
контексте использования системы
или о том, как они решают задачи)
– Наблюдение (как они сами
используют систему)
– Участие (пользователь прямо входит
в команду разработки)
Design
Implement
Evaluate

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

26. Ассоциация
Make connections across seemingly
unrelated questions, problems, or ideas.
Put together ideas and information in
unique combinations
Has somebody else in the world solved a
problem like this before?
Could I do it better?
Решал ли кто-нибудь такую же
проблему раньше?
Могу ли я решить ее лучше?

27. Вопрос
Почему мы все еще загружаем и апгрейдим ПО,
когда мы можем делать все то же через интернет?

28. Наблюдение
Делают так… А могли б и так!

29. Эксперимент
• Я не провалился
• Я просто обнаружил 10000 способов,
которые не работают

30. Общение
Общение с умными людьми, непохожими на тебя, но от кого ты можешь чему-
нибудь научиться

31. Креативность
• Креативность – процесс создания НОВОЙ и/или ПОЛЕЗНОЙ идеи

32. Фазы креативного процесса
Подготовка
Инкубация
Инсайт
Оценка
Проработка
Лучший путь к
хорошей идее –
иметь много идей
Линус Полинг
Лауреат Нобелевской
премии

33. Мозговой штурм: порядок проведения
• Не качество излагаемых мыслей, а
их количество!
– Каждый участник должен высказать
как можно больше различных идей
• Идеи формулируются КОРОТКИМИ
ФРАЗАМИ
• НЕТ: Критика, иронические или
неодобрительные реплики
• Принимаются все идеи, даже самые
абсурдные и непрактичные
– Полет фантазии – да, логика – нет
• Идеи общие
– Каждый из участников может взять
высказанную другим мысль,
скомбинировать ее со своей
собственной, дополнить или
улучшить, и подать как новую идею
• Все идеи записываются!

34. Прототипирование
• Метод «Волшебника Оз»
– Работу системы пользователю
имитирует один из тестирующих
• Бумажное прототипирование
– Компоненты интерфейса
нарезаются из картона или
бумаги
• Эскизы
– Карандаш, доска, Фотошоп и пр.
• Инструментарий для
прототипирования
– Balsamiq, Stencil и проч.

35. Анализ на пользователях
Показать троим друзьям – не анализ!
Пользователи должны быть реальными, а анализ – статистическим
(с контрольной группой, доверительным интервалом и четкими метриками)

36. Техники наблюдения в интервью или лаборатории
• Дебрифинг
– Делаем, если хотим направить
пользователя
– Не делаем, если хотим увидеть, как
он сам разберется
• Запись
– Письменная: можно использовать
анкеты, онлайн-опросники или
готовые формы
– Видео: две камеры (или
скринкаст+фронткамера): одна на
экран, одна на лицо
• Что пишем?
– Действия
– Комментарии
– Эмоции: радость, задумчивость, гнев,
огорчение
• Что делаем?
– Молчим и мотаем на ус
… … …

37. A/B (сплит) тестирование
• Тестовая группа элементов сравнивается с контрольной группой элементов
• Вопрос: какие из изменений улучшают целевой показатель?

38. Различий не должно быть несколько!

39. Software Architecture
Model-View-Controller

40. Model-View-Controller (MVC)
• Этапы работы юзера с системой
– Ввод информации
– Обработка информации
– Получение информации
• Эти задачи можно представить в
виде трех компонентов
• Модель
– Структура системы, хранения и
обработки данных
• Контроллер
– Механизмы, которыми вид снабжает
систему информацией
– Механизмы, которыми система
манипулирует видами
• Вид
– Способ представления информации,
возвращаемой системой
– Способы ввода информации
пользователем

41. Очень условно…
Model
Controller
View

42. В чем задачи MVC ?
• Один компонент – одно свойство
системы
– Ввод – контроллер
– Обработка – модель
– Вывод – вид
• Модели, виды и контроллеры
можно создавать и изменять
независимо
– Не нужно знать, как устроен
каждый из компонентов,
достаточно знать один
• Одна модель может
обслуживать много видов и
контроллеров, а один вид –
работать с несколькими
моделями
– Компоненты можно
использовать повторно (UI
Toolkits) Twitter Bootstrap

43. Достаточно общего протокола

44. Простейший текстовой редактор
TextFile
Последовательность символов
KeyListener
Резидентный процесс
TextField
Последовательность символов
.textGet(*)
.textChange(*)
.cursorMove(*)
.textEdit(*)
.keyPress(*)
??

45. А где тут M, V и С ?

46. Вид: меняем представление, мутируя дерево
Структурно:
дерево
Визуально:
прямоугольные области

47. Контроллер
• Контроллер ввода – listener
– Он «слушает» клавиатуру, мышь,
тачскрин и т.д. на предмет начала
ввода информации
• Контроллер вывода
– При получении команды от системы
меняет дерево вида

48. HCI Анализ

49. Эвристический анализ
• Экспертный анализ по
формальным признакам
– Экспертный – значит не
пользователем, а
независимым формальным
оценщиком
• Содержание эвристического
анализа
– Перечень проблем с
указанием эвристики на
каждую
– Оценка серьезности
проблемы

50. Эвристики Нильсена
• Соответствие реальному миру
• Последовательность и стандарты
• Помощь и документация
• Контроль и свобода юзера
• Системный статус виден
• Гибкость и эффективность
• Защита от ошибок
• Узнавание, а не вспоминание
• Сообщения об ошибках, диагностика
и восстановление
• Эстетика и минимализм

51. Эвристика Тагнацини
• Предвосхищение
– предвосхищать действие
пользователя
• Независимость
– пользователь сам все контролирует
• Цветовая слепота
• Последовательность
• Стандартность
• Эффективность
• Объекты человекомашинного
интерфейса
– объекты на экране должны быть
логичны и понятны, должны
управляться физическими
действиями
• Закон Фитта
• Сокращение задержек между
действиями
– уменьшение времени отклика
• Обучаемость
• Метафоры
• Защищенные действия
– не сбрасывать действия
пользователя при ошибках
• Читаемость текста
• Отслеживание состояния
• Видимая навигация

52. Эвристика Шнайдермана
• Последовательность
• Кратчайшие расстояния между
действиями
• Обратная связь
• Законченность диалогов
(последовательностей действий)
• Простое исправление ошибок
• Способность отменить действие
• Пользователь контролирует
интерфейс (а не наоборот)
• Сокращение загрузки быстрой
памяти

53. Разберем этот интерфейс

54. Разберем этот интерфейс
1. Иконка корзины по цвету не
сбалансирована с фоном (графический
дизайн)
2. Хорошо: пользователя приветствуют по
имени (обратная связь)
3. Красный цвет используется и для
сообщений об ошибке и для
вспомогательных сообщений
(последовательность)
4. «С вашим заказом возникла проблема»,
но нет объяснений или предложений по
исправлению (исправление ошибок)
5. ExtPrice и UnitPrice – непонятные
лейблы
6. Кнопка Remove hardware другая, чем
чекбокс Remove (последовательность)
7. “Click here” не является необходимым
(простота)
8. Нет кнопки «продолжить покупки»
(пользовательский контроль)
1 2
3
4
5
6
7
8
3

55. Практические занятия по эвристике
Найдите самый ужасный (на ваш взгляд) интерфейс
и разберите его по одной из представленных эвристик

56. Спасибо за внимание и успехов!