HUMAN COMPUTER INTERFACES

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

Введение в принципы и методы HCI

МФТИ 2016

Основные понятия и этапы HCI

• Семиотика• Юзабилити

– Обучаемость– Эффективность– Безопасность

• Нидфайндинг– A– B– C

• Прототипирование– A– B– C

• Программная архитектура– Software Architecture– Model-View-Controller

• Архитектура дизайна– Разметка, грид, навигация– Шрифты, цвет– Пустое пространство

• Специальные темы– Доступность для лиц с

ограниченными возможностями– Интернационализация

• Эвристический анализ– Эвристика Нильсена– Эвристика Б– Эвристика С

Семиотика

• Семиотика – наука о символах– Символы бывают не только

визуальными, звуки и слова языка – тоже символы

• В основе нашей коммуникации с машиной лежат знаки, которые обозначают действия и события

• Интерфейс – это опосредование через символы логики управления машиной в действия и информацию, понятные человеку

– Опосредование происходит путем МЕТАФОРЫ – свойство знакомого объекта переносится на объект незнакомый

Метафора

Такой же длинный и стремительный? )

Ты как поезд-экспресс

А ты зато как батарея

Нет, точно так же стоишь только одну минуту )=

Такая же горячая?Нет, такая же ребристая (

Хорошая метафора обладает очевидностью и недвусмысленностью

Юзабилити

Юзабилити

• Юзабилити – характеристика того, насколько эффективно пользователи могут использовать функциональность системы

– Обучаемость (learnability)– Эффективность (efficiency)– Безопасность (safety)

• Пользователь – не дизайнер!– Он не знает, что ему нужно– Но то, что ему нужно, должно быть

ему доступно• А дизайнер – не пользователь!

– Дизайнер не может увидеть систему чужими глазами («замыленный глаз»)

ЖМИ СЮДА!

А ТУТ ЧЕТА ЕСТЬ!

ГЛЯДИ СЮДА!

Обучаемость

• Насколько легко пользователю дается понимание интерфейса

• Что будет, если… ?– Система должна указывать юзеру

через интерфейс на свою модель– Система должна обеспечивать

обратную связь: юзер должен понимать, к каким последствиям привели его действия

• Обучение – движение от цели через действия к желаемому результату

– Help читают, чтобы вылезти из уже возникшей проблемы

• Learning curve – функция от понимания системы во времени

Тяжело в ученье Легко

в бою

ПОНЯТНО…

ЧЕГО CLOSE?

Чечече?

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

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

Составляющие обучаемости

• Последовательность (consistency) – новые неизвестные интерфейсы должны следовать уже известным принципам

– Внутренняя: внутри приложения– Внешняя: в логике системы, где

приложение работает– Метафорическая: система символов

должна быть общей для приложения• Привычность (affordance) – информация,

транслируемая вне текста и символов!– Между «узнать» (recognize) и «вспомнить»

(recall) есть большая разница!– «Вот это стол, за ним сидят,

вот это стул, на нем сидят?»– Кнопки нажимают– Ручки крутят– Засветка показывает активный элемент

• Обратная связь (Feedback) – система визуально сообщает свое состояние

Естественный маппинг

• Естественный маппинг (natural mapping) – организация контролей в соответствии с логикой происходящих действий

– Руль вправо – едем вправо– Поворотник на руле вверх-вниз -

почему?– А какая конфигурация ручек конфорок

«естественна» для плиты?

Отклик системы

• Мы не воспринимаем интервал короче 50-100 миллисекунд

– Отсюда эмпирически полученные 25 кадров в секунду (40 миллисекунд)

– 25 кадр – это легенда, на самом деле мы замечаем только неприятную рябь и напряжение в глазах

• Психология восприятия– Отклик меньше 0,05 с – мгновенный– 0,1 – 1 с – «система подтормаживает»– 1 - 5 с. –– > 5 с.

• Фазы получения фидбека– Поверхностный взгляд– Внимательное чтение– Наведение мыши или нажатие– Клик– Изучение результата

25%

Эффективность

• Насколько опытный пользователь легко решает в системе свои задачи

• Рабочая память– 4 регистра– Срок хранения <10 сек

• Что легче запомнить?– С К П Е O Т – КОТ ПЕС

• Каждый регистр – один шаг– Начинающие делят в голове

операцию на шаги– Профи держат операцию в голове как

единый блок (так шахматисты запоминают позиции, а дизайнеры – работу в Фотошопе)

Закон Фитта

N

N

N*m

T = a + b log (D/S + 1)где D – расстояние до целиS – размер целиa,b – экспериментальные константы(~0,14, ~0.25)

В маленькую цель рядомпопадают так же быстрокак в большую далеко

Совсем просто: мы как бы последовательно сужаем в уме окружность вокруг цели

Следствие из закона Фитта

Меню 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 – ширина полосы

Адаптивный дизайн

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

крупные• Автозаполнение форм• Автокорректор

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 сек

• Метод или операция описывается в действиях пошагово!

– М – разделитель шагов!• Временные затраты суммируются

Безопасность

• Безопасность – возможность не совершать ошибок и восстанавливаться после них

• Виды человеческих ошибок• Тяп (slip): сделал не так

– Целился в лайк, а попал в смайлик• Ляп (lapsus): забыл как надо

– Не нажал CTRL при копировании• Оп (mistake) – вспомнил точно и

сделал правильно… но не то, что надо было

– Закрыл файл без сохранения

Методы защиты от ошибок

• UNDO и возможность отката в последнее состояние до ошибки

• Возможность прекратить долгую операцию или закрыть диалог без изменений и последствий

– Диалог подтверждения «Are you sure?» нужно использовать редко! К нему мгновенно привыкают

• Уникальные ярлыки и описания действий и операций

• Четкая идентификация текущего режима и самоотключение временных режимов по таймеру

• Четкие сообщения об ошибках и о дальнейших действиях пользователя

– Кратко и понятно!– И не пугать юзера страшными

словами! Он и так напуган

Пример защищенного интерфейса

БюллетеньСогласны ли Вы с решением от 13 марта 1938 года

О воссоединении Австрии с Германским Рейхом

и голосуете ли Вы за партию нашего фюрера

Адольфа Гитлера?

Плебисцит и выборы рейхстага Великой

Германии

Да нет

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

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

Нидфайндинг

• Аксиома: пользователь может и не сказать, но точно может показать

• Задачи– Объективные сведения о

пользователях и их целях– Удачи и неудачи пользователей в

решении задач– Не «как» они используют систему, а

«что» они пытаются сделать!• Методы

– Интервью (собеседование в контексте использования системы или о том, как они решают задачи)

– Наблюдение (как они сами используют систему)

– Участие (пользователь прямо входит в команду разработки)

Design

Implement

Evaluate

Как думают инноваторы?

• Ассоциация– Поиск общего в разных вопросах,

проблемах или идеях– Совмещение идей и информации в

уникальных комбинациях• Вопрос

– Способность спрашивать: «что если?», «почему?», и «почему нет?» для решения сложных задач и рассматривания большей картины

• Наблюдение– Способность увидеть детали, в

особенности детали человеческого поведения

• Эксперимент– Практическая попытка получить ответ

на вопрос• Общение

– Выслушать и сделать выводы

Ассоциация

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?

Решал ли кто-нибудь такую же проблему раньше?

Могу ли я решить ее лучше?

Вопрос

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

Наблюдение

Делают так… А могли б и так!

Эксперимент

• Я не провалился

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

Общение

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

Креативность

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

• Поиск возможностей может совершаться креативным процессом

Фазы креативного процесса

Подготовка

Инкубация

Инсайт

Оценка

Проработка

Лучший путь к хорошей идее – иметь много идей

Линус ПолингЛауреат Нобелевской премии

Мозговой штурм: порядок проведения

• Не качество излагаемых мыслей, а их количество!

– Каждый участник должен высказать как можно больше различных идей

• Идеи формулируются КОРОТКИМИ ФРАЗАМИ

• НЕТ: Критика, иронические или неодобрительные реплики

• Принимаются все идеи, даже самые абсурдные и непрактичные

– Полет фантазии – да, логика – нет • Идеи общие

– Каждый из участников может взять высказанную другим мысль, скомбинировать ее со своей собственной, дополнить или улучшить, и подать как новую идею

• Все идеи записываются!

Прототипирование

• Метод «Волшебника Оз»– Работу системы пользователю

имитирует один из тестирующих• Бумажное прототипирование

– Компоненты интерфейса нарезаются из картона или бумаги

• Эскизы– Карандаш, доска, Фотошоп и пр.

• Инструментарий для прототипирования

– Balsamiq, Stencil и проч.

Анализ на пользователях

Показать троим друзьям – не анализ!

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

Техники наблюдения в интервью или лаборатории

• Дебрифинг– Делаем, если хотим направить

пользователя– Не делаем, если хотим увидеть, как

он сам разберется• Запись

– Письменная: можно использовать анкеты, онлайн-опросники или готовые формы

– Видео: две камеры (или скринкаст+фронткамера): одна на экран, одна на лицо

• Что пишем?– Действия– Комментарии– Эмоции: радость, задумчивость, гнев,

огорчение• Что делаем?

– Молчим и мотаем на ус

… … …

A/B (сплит) тестирование

• Тестовая группа элементов сравнивается с контрольной группой элементов

• Вопрос: какие из изменений улучшают целевой показатель?

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

Software ArchitectureModel-View-Controller

Model-View-Controller (MVC)

• Этапы работы юзера с системой– Ввод информации– Обработка информации– Получение информации

• Эти задачи можно представить в виде трех компонентов

• Модель– Структура системы, хранения и

обработки данных• Контроллер

– Механизмы, которыми вид снабжает систему информацией

– Механизмы, которыми система манипулирует видами

• Вид– Способ представления информации,

возвращаемой системой– Способы ввода информации

пользователем

Очень условно…

Model

Controller

View

В чем задачи MVC ?

• Один компонент – одно свойство системы

– Ввод – контроллер– Обработка – модель– Вывод – вид

• Модели, виды и контроллеры можно создавать и изменять независимо

– Не нужно знать, как устроен каждый из компонентов, достаточно знать один

• Одна модель может обслуживать много видов и контроллеров, а один вид – работать с несколькими моделями

– Компоненты можно использовать повторно (UI Toolkits) Twitter Bootstrap

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

Простейший текстовой редактор

TextFileПоследовательность символов

KeyListenerРезидентный процесс

TextFieldПоследовательность символов

.textGet(*)

.textChange(*)

.cursorMove(*)

.textEdit(*)

.keyPress(*)

??

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

Вид: меняем представление, мутируя дерево

Структурно: дерево

Визуально: прямоугольные области

Контроллер

• Контроллер ввода – listener– Он «слушает» клавиатуру, мышь,

тачскрин и т.д. на предмет начала ввода информации

• Контроллер вывода– При получении команды от системы

меняет дерево вида

HCI Анализ

Эвристический анализ

• Экспертный анализ по формальным признакам

– Экспертный – значит не пользователем, а независимым формальным оценщиком

• Содержание эвристического анализа

– Перечень проблем с указанием эвристики на каждую

– Оценка серьезности проблемы

Эвристики Нильсена

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

и восстановление• Эстетика и минимализм

Эвристика Тагнацини

• Предвосхищение– предвосхищать действие

пользователя• Независимость

– пользователь сам все контролирует• Цветовая слепота• Последовательность• Стандартность• Эффективность• Объекты человекомашинного

интерфейса – объекты на экране должны быть

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

• Закон Фитта • Сокращение задержек между

действиями– уменьшение времени отклика

• Обучаемость• Метафоры• Защищенные действия

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

• Читаемость текста• Отслеживание состояния• Видимая навигация

Эвристика Шнайдермана

• Последовательность• Кратчайшие расстояния между

действиями• Обратная связь• Законченность диалогов

(последовательностей действий)• Простое исправление ошибок• Способность отменить действие• Пользователь контролирует

интерфейс (а не наоборот)• Сокращение загрузки быстрой

памяти

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

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

1. Иконка корзины по цвету не сбалансирована с фоном (графический дизайн)

2. Хорошо: пользователя приветствуют по имени (обратная связь)

3. Красный цвет используется и для сообщений об ошибке и для вспомогательных сообщений (последовательность)

4. «С вашим заказом возникла проблема», но нет объяснений или предложений по исправлению (исправление ошибок)

5. ExtPrice и UnitPrice – непонятные лейблы

6. Кнопка Remove hardware другая, чем чекбокс Remove  (последовательность)

7. “Click here” не является необходимым (простота)

8. Нет кнопки «продолжить покупки» (пользовательский контроль)

1 2

3 4

56

7

8

3

Практические занятия по эвристике

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

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