HUMAN COMPUTER INTERFACES Человеко-машинные интерфейсы Введение в принципы

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

Основные понятия и этапы HCI • • • Занятие 1 Семиотика Юзабилити – Обучаемость – Эффективность – Безопасность • • ЗАНЯТИЕ 2 Нидфайндинг – Креативный процесс – Общение с пользователями – «Мозговой штурм» • Прототипирование – «Волшебник Оз» , «бумажный» – A-B тестирование • • ЗАНЯТИЕ 3 Программная архитектура – Model-View-Controller – Интерфейс как древо • Архитектура дизайна – Разметка, грид, навигация – Шрифты, цвет – Пустое пространство • Специальные темы – Доступность для лиц с ограниченными возможностями – Интернационализация • Эвристический анализ – Нильсен, Тагнацини, Шнайдерман

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

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

Юзабилити

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

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

Обучаемость Усилие ▲ Тяжело в ученье Легко в бою Степень освоения системы ►

Чечече?

Неочевидные действия Введите в строку поиска android how to iphone how to KAK

Неочевидные действия

Какое из двух действий - нужное? Разумеется, HELP не предусмотрен – это ж Фейсбук

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

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

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

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

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

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

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

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

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 Evaluate Методы – Интервью (собеседование в контексте использования системы или о том, как они решают задачи) – Наблюдение (как они сами используют систему) – Участие (пользователь прямо входит в команду разработки) Implement

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

Ассоциация 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 способов, которые не работают

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

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

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

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

Прототипирование: подручные средства • Метод «Волшебника Оз» – Работу системы пользователю имитирует один из тестирующих • Бумажное прототипирование – Компоненты интерфейса нарезаются из картона или бумаги • Эскизы – Карандаш и бумага – Доска и маркеры Прототип первого планшетного компьютера Dyna. Book Модельный картон, бумага Allan Kay, Xerox PARC, 1972 Computer History Museum, #102716364 http: //www. computerhistory. org/collections/catalog/102716364

Прототипирование: цифровое • Инструментарий для прототипирования – Balsamiq, Stencil – Photoshop CC 2015 Design Space, Preview CC (mov. ), Comp CC (mob. )

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

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

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

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

Software Architecture Model-View-Controller

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

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

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

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

Простейший текстовой редактор . cursor. Move(*) Text. Field Key. Listener Последовательность символов Резидентный процесс . key. Press(*) . text. Change(*) . text. Edit(*) Text. File Последовательность символов . text. Get(*) ? ?

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

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

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

HCI Анализ

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

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

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

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

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

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

Практические занятия по эвристике Разберем ваши интерфейсы из домашних заданий

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