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