ЧЕЛОВЕКО-МАШИННОЕ ВЗАИМОДЕСТВИЕ ЭЛЕМЕНТЫ ИНТЕРФЕЙСА ПОЛЬЗОВАТЕЛЯ

ЧЕЛОВЕКО-МАШИННОЕ
ВЗАИМОДЕСТВИЕ
ЭЛЕМЕНТЫ ИНТЕРФЕЙСА
ПОЛЬЗОВАТЕЛЯ
Лекция 8
преподаватель кафедры ТМСИ
Губин Максим Владимирович
Основные критерии оценки
интерфейса
• скорость работы пользователя
• количество ошибок пользователя
• скорость обучения пользователя
• удобство интерфейса для пользователя
2
Элементы интерфейсов
Элементы управления
Меню
Окна
Пиктограммы, курсоры, цвет, звук
3
Элементы управления
Кнопки
Списки
Комбоксы
Поля для ввода
Ползунки
4
Кнопки прямого действия
Кнопки запускают явные действия.
Чем больше кнопка, тем легче попасть в нее курсором.
Пользователю должно быть трудно нажать на ненужную
кнопку: использование различных состояний кнопки,
использование пробелов между кнопками.
У кнопки должен быть реальный размер.
Кнопка должна быть трехмерной.
В интернете кнопка должна быть оформлена как текстовая ссылка,
если она перемещает пользователя на другой фрагмент контента,
и как кнопка – если она запускает действие.
5
Состояния кнопки в Windows
нейтральное,
нажатое,
нейтральное с установленным фокусом ввода,
состояние кнопки по умолчанию,
по умолчанию с установленным фокусом ввода
и заблокированное.
Чем больше набор состояний, тем лучше. Необходимо отсутствие
дублирования состояний: не должно быть разных состояний,
выглядящих одинаково.
6
Правила успешной кнопки
Соответствие бренду
Соответствие содержанию
Достаточность контраста
Закругленные или форменные
кнопки
Скрываем второстепенные
элементы
Обводка и граница
Использование иконок
Первичные, вторичные и
третичные элементы
Состояние кнопки
7
Терминационные кнопки
Существующие интерфейсы заполнены терминационными кнопками
Ок, Отмена (Cancel) и Применить (Apply), что позволяет
разработчикам ссылаться на стандарт.
Это плохие кнопки.
Ок – это не глагол, плохая кнопка. Плохо и то, что эта кнопка одна и
та же во всех диалогах.
Отмена – почти глагол, но плоха, поскольку не дает контекста (к
тому же отглагольные существительные воспринимаются
медленнее, чем соответствующие глаголы).
Применить – будучи и глагольной, и сравнительно уникальной,
имеет другой недостаток: она почти всегда используется
неправильно.
8
9
10
Чекбоксеры и радиокнопки
Кнопки отложенного действия.
Чекбоксеры имеют три состояния.
В группе не может быть меньше двух
радиокнопок, одна из них должна быть
установлена по умолчанию.
Желательно располагать по вертикали.
11
Списки
Списки – вариант радиокнопок и чекбосков.
При этом, скорость доступа и наглядность принесены
в жертву компактности.
Списки бывают:
пролистываемые:
единственный выбор или множественный;
раскрывающиеся (аналогичен радиокнопкам).
Параметрами для списка могут быть: ширина списка,
сортировка элементов, дополнительные управляющие
позиции.
12
Поле ввода
Основное требование – размер поля.
Ширина поля должна соответствовать объему вводимого
текста.
Где надо размещать подписи к полям ввода?
13
Комбобоксы
Гибриды списка с полем вывода.
Комбобоксы бывают двух видов:
раскрывающиеся и расширенные.
Оба типа имеют проблемы: можно спутать с
раскрывающимися списками, потребляют много
места.
14
Крутилки и ползунки
ползунки позволяют пользователям выбирать значение из
списка, не позволяя вводить произвольное значение
15
Меню
Меню – это метод
взаимодействия пользователя с
системой, при котором
пользователь выбирает из
предложенных вариантов, а не
предоставляет системе свою
команду.
1. Не надо вспоминать, какая именно
команда нужна и как именно
её нужно использовать.
2. Ограничивает диапазон действий пользователей,
возможность в значительной мере изъять ошибочные
действия.
3. Показывает пользователям объем действий, которые они
могут совершить благодаря системе, и тем самым обучают
пользователей.
16
Классификация меню
 Статические меню – это меню, постоянно присутствующие
на экране.
Характерным примером такого типа меню является панель
инструментов.
 Динамические меню, в которых пользователь должен
вызвать меню, чтобы выбрать какой-либо элемент.
Примером является обычное контекстное меню.
 В некоторых ситуациях эти два типа меню могут сливаться
в один:
например, меню, состоящее из кнопок доступа к меню.
17
Еще одна классификация меню
 Меню, разворачивающиеся в пространстве
например, раскрывающееся меню, всякий раз, когда
пользователь выбирает элемент нижнего уровня, верхние
элементы остаются видимыми.
 Меню, разворачивающееся во времени. При использовании
таких меню элементы верхнего уровня по тем или иным
причинам исчезают с экрана.
например, в предыдущей иллюстрации диалоговое окно с меню
перекрыло элемент управления, которым это меню было
вызвано.
18
Недостатки по классификациям
Статические меню, как правило, обеспечивают
высокую скорость работы, лучше обучают
пользователей, но зато занимают место на экране.
С динамическими меню ситуация обратная: занимает
мало места на экране, но производительность может
быть хуже.
Меню, разворачивающиеся в пространстве,
обеспечивает большую поддержку контекста
действий пользователей, но эта поддержка обходится
потерей экранного пространства.
19
полезно научиться анализировать влияние и
взаимопроникновение разных типов меню, а также
осознавать их место в интерфейсе.
Например, контекстное меню на некотором уровне
абстракции оказывается временным (т.е. динамическим)
диалоговым окном, только с нестандартной структурой.
Понимание структуры «меню-диалоговое окно» позволяет
определить, какие элементы управления, помимо кнопок,
можно использовать в таком меню, чтобы оно обрело как
достоинства меню, так и достоинства диалогового окна.
20
Устройство меню
Важное свойство – название меню.
В отличие от кнопок в диалоговых окнах, элементы меню
практически никогда не несут на себе контекста действий
пользователя.
Главное (т. е. наиболее значимое) слово в элементе должно
стоять первым.
Пиктограммы в меню, могут повторять пиктограммы из
панелей инструментов.
Пиктограммами снабжают самые важные элементы меню, а
не все.
Переключаемые элементы меню должны иметь галочку как в
чекбоксе.
21
Группировки элементов меню
Быстрее сканируются, т.к.
больше точек привязки.
Быстро обучается
пользователь, т.к. быстрее
запоминается модель
меню.
22
Окна
Различают следующие типы окон:
 главные окна программы
 окна документа
 режимные диалоговые окна
 безрежимные диалоговые окна
 палитры
 окна браузера (используемая в интернете
технология существенно отличается от
технологии ПО)
23
24
Безрежимные окна
Необходимо избегать режимных окон.
Безрежимные окна не должны тонуть.
Любые окна съедают полезное пространство.
Некоторые диалоговые окна невозможно сделать
безрежимными: например, что делать с сообщениями об
ошибках?
25
Палитры
Палитры имеют малые размеры, и пользователи любят
расставлять их индивидуальным порядком.
Пользы это особой не приносит, зато существенно повышает
субъективное ощущение контроля над системой.
К сожалению, визуальный дизайн палитр, как правило, довольно
сложен и длителен, так что сугубо экономические причины
мешают переделать в палитры все диалоговые окна.
Так или иначе, но палитра перекрывает часть полезной
информации. Появляется необходимость уменьшения
периметра палитры.
26
Панели инструментов
Панель инструментов
– это палитра
прикрепленная к краю
экрана, снабженная
элементами
функционального
меню.
27
28
Окна документов вымирают
Модель документов плохо согласуется с
моделью поведения пользователя.
Плохой способ переключения между
документами, потому как самый удачный
отведен к переключению между
программами.
Способ переключения документов в MS
Word 2003 CTL+F6.
29
Элементы окон
Строка заголовка окна
Строка статуса
Панель инструментов для опытных
пользователей
Полосы прокрутки
30
31
Структура окна
Производительность можно повысить вдвое, просто изменив
расположение элементов управления, не меняя сами эти элементы.
Терминационные кнопки (т. е. командные кнопки, управляющие
окном, например, Ok или Закрыть) должны быть либо снизу окна,
либо в правой его части.
Окно должно хорошо сканироваться взглядом.
Окно должно читаться, как текст.
Чаще всего используемые
элементы должны быть
расположены в
левой верхней части экрана,
реже используемые –
в правой нижней части.
32
Использование вкладок
Вкладки позволяют умещать
максимальное количество
элементов управления в
диалоговом окне.
Могут скрывать от
неопытных пользователей не
очень нужную им
функциональность.
Проблема: когда нужно
просто уместить в окно
побольше элементов,
вкладки скрывают от
пользователей
функциональность,
возможно, что и нужную.
33
Число вкладок
Теоретически число вкладок может быть большим.
Однако память у пользователя не безграничная.
Нехорошо прятать часть вкладок.
Можно убрать часть вкладок, заменив их
раскрывающимся списком.
34
Перемещение в пределах окна
Пользователям необходимо дать возможность максимально
быстро переходить к необходимым элементам управления.
Для этого у них есть два способа – мышь и клавиатура.
Уменьшение дистанции перемещения курсора, всегда
приводит к росту (хотя и небольшому) производительности
пользователей.
Пользователь может перемещаться между элементами
управления двумя разными способами: клавишей Tab и
горячими клавишами.
Перемещаться клавишей Tab медленно, но зато для этого не
нужно обращаться к памяти или высматривать клавиатурную
комбинацию для нужного элемента. Напротив, горячие
клавиши позволяют быстрее перемещаться вглубь экрана, но
требуют запоминания клавиш.
35
Пиктограммы
Польза и возможности пиктограмм очень сильно
переоценены.
В 1981 году Истерби и Грейдон провели масштабное
исследование ста восьми пиктограмм, выбранных
экспертами ISO для использования по всему миру.
Некоторые из этих пиктограмм широко
использовались и до этого. Цель исследования
заключалась в том, чтобы определить, сколько
пиктограмм правильно бы распознавались двумя
третями целевой аудитории. Результат: три.
Смысл пиктограммы передаётся не столько
пиктограммой, сколько контекстом.
36
Достоинства пиктограмм
1. Увеличивают скорость поиска элементов взглядом за
счет того, что этот элемент с пиктограммой становится
более заметен. Однако и здесь пиктограммы не без греха:
чтобы скорость поиска увеличилась, не все элементы
должны быть снабжены пиктограммами, а только
некоторые; в идеале иметь пиктограмму должен только
нужный элемент.
2. Служат хорошими индикаторами важности элементов,
поскольку элементы с пиктограммами всегда
воспринимаются как более важные, по сравнению с теми
элементами, у которых пиктограмм нет.
3. В определенных ситуациях пиктограммы
действительно ускоряют обучение.
37
Место пиктограмм
 пиктограмма системы
 пиктограммы отдельных файлов системы, которые
пользователи могут как-либо изменять
 пиктограммы документов, которые создаются и
редактируются системой
 пиктограммы инструментов системы (не всегда,
многие системы отлично живут и без них)
 пиктограммы панели инструментов и меню
 пиктограммы объектов, использующихся для
реализации непосредственного манипулирования
38
Пиктограммы должны обладать
Разборчивость
Стандартность сюжета и его реализации
Минимально возможная детализация
сюжета
Стандартность стилистики
Эстетическая привлекательность
39
Цвета
Цветами невозможно передавать пользователям скольконибудь сложную информацию.
Как правило, схемы типа «этот объект тёмный, значит…» не
работают, поскольку требуют от пользователей длительной
тренировки.
С другой, стороны, люди хорошо способны замечать и
анализировать взаимосвязи цветов, так, строки в таблице,
окрашенные в разные цвета, подсознательно будут
группироваться пользователями по цветовому признаку.
На практике, всё, что можно передать цветом, умещается в
одно предложение: для всех красный цвет обозначает
«нельзя» или «осторожно», для многих людей зеленый
обозначает «поехали» (от умения пользоваться светофором;
интересно, что желтый цвет не работает, хотя должен).
40
Звук
Индицирование конца какого-либо процесса
Хотя не все пользователи на звук ориентированы,
например, потому что не у всех есть колонки.
41
Остаются окна программ
Доля отдельных типов окон со временем
изменяется: окна документов отмирают, заменяясь
окнами программ, режимные диалоговые окна
сменяются безрежимными, а безрежимные, в свою
очередь, палитрами.
Интересно, что идея палитр тоже клонится к закату
палитры сменяются панелями инструментов, так что
в будущем, скорее всего, в ПО останутся только
окна программ, панели инструментов и режимные
диалоговые окна (которые разработчики поленятся
переделывать).
42
Развитие интерфейсов
Так может к 2025-30 годам мы сможем
управлять программой
документооборота с помощью
голосового интерфейса. .
Устройство OmniTouch от
Microsoft - это камера,
сочетающая в себе функции
проектора и сканера.
Технологии распознавания жестов
возможно появятся в windows 8
43
Smart Interaction позволяет владельцам
телевизоров Smart TV взаимодействовать с
телевизором при помощи технологий
голосового управления, управления жестами и
распознавания лиц. Благодаря встроенной HDкамере и двойным направленным микрофонам
пользователю достаточно просто сказать
«Привет, ТВ» для активизации функции
управления голосом, произнести «Браузер»,
чтобы получить доступ в интернет, а
просматривать страницы или регулировать
громкость можно движением руки.
Технология жестов
из фильма «Особое мнение»
44
which it — «этот, как его»
«виджет» — это класс вспомогательных мини-программ — графических
модулей, которые размещаются в рабочем пространстве родительской
программы и служат для украшения рабочего пространства, развлечения,
решения отдельных рабочих задач или быстрого получения информации.
Компания Mobilizy анонсировала
браузер для реальной жизни –
Wikitude. Суть приложения в том,
чтобы снабжать пользователя
справкой о более чем 350000
точек по всему миру.
Шлем HEaDS-UP (Helmet Electronics and Display SystemUpgradeable Protection) подключается к смартфону на
Android. Программное обеспечение позволяет
использовать "живой" целеуказатель, узнать
расположение союзников и противников на поле боя,
получать текстовые общения с приказами командиров
и видео с беспилотных самолетов-разведчиков, а так
45
же общую индикацию состояния боя.
Типовые элементы интерфейса
• кнопка (button)
• split button (сдвоенная кнопка) —
кнопка, вызывающая список со
вторичным(и) действием(и) (кнопками)
• радиокнопка (radio button)
• флаговая кнопка (check box)
• значок (иконка, icon)
• список (list box)
• дерево — иерархический список
• раскрывающийся список (combo box)
• метка (label)
• поле редактирования (textbox, edit
field)
• элемент для отображения табличных
данных (grid view)
• меню (menu)
• главное меню окна (main menu или
menu bar)
• контекстное меню (popup menu)
• ниспадающее меню (pull down menu)
• окно (window)
• диалоговое окно (dialog box)
• модальное окно (modal window)
• панель (panel)
• вкладка (tab)
• панель инструментов (toolbar)
• полоса прокрутки (scrollbar)
• ползунок (slider)
• строка состояния (status bar)
• всплывающая подсказка (tooltip, hint)
46
Другие элементы управления
• Радиальное меню – кольцевое меню вокруг курсора
• Кнопка последовательного выбора – элемент, значение в котором
выбирается последовательным нажатием мыши по нему, в отличие от
раскрывающегося списка, такая кнопка не позволяет видеть другие
значения, кроме выбранного
• Счётчик – двунаправленный вариант для числовых значений. Нажатие на
кнопку позволяет изменить значение параметра на единицу в большую или
меньшую сторону.
• Heads-up display – отображение поверх всех элементов значения каких-то
параметров, либо важных сообщений.
• Пузырь — подсказка, наподобие филактера в комиксах, которая указывает
на элемент-источник сообщения.
• Валкодер — вращающийся элемент управления, наподобие ручки
настройки во многих радиоприёмниках. Может быть как одно- так и
многооборотным.
• Скрываемый виджет — элемент, позволяющий скрыть часть элементов
управления, когда они не используются.
• Индикатор уровня (Level Indicator) — элемент для индикации значения
какой-либо величины. Иногда вместо него используется индикатор
процесса, но некоторые руководства (к примеру, HIG от Apple) запрещают
подобную практику.
47
48
IllumiRoom
49