Человеко-машинное взаимодействие. Учебное пособие

5.7. Выбор визуальных атрибутов информации

время. При уводе указателя с элемента подсказка исчезает. Есть возможность изменения свойств элемента.

5.6.7. Коллекции

Коллекция — это специальный элемент интерфейса, подобный группе переключателей, с той лишь разницей, что позволяет визуально выбирать параметр, например, тип линии, цвет и др. На рисунке показана коллекция для выбора цвета элемента графического оформления.

5.7.Выбор визуальных атрибутов отображаемой информации

Продуманный выбор визуальных атрибутов отображаемой на экране информации в значительной степени влияет на психофизиологическое состояние пользователя и на эффективность его работы. По этой причине для реализации больших и ответственных проектов часто прибегают к услугам профессиональных дизайнеров. В Интернете даже появился даже термин Web-дизайн.

Для всех приложений, использующих ГПИ, справедливы следующие рекомендации:

Все графические элементы создают единую визуальную среду. Поэтому обязательным этапом разработки является выбор концепции внешнего облика приложения.

Каждый графический элемент связан с реализуемой им функцией, эта связь должна быть понятна пользователю. Применяйте понятные пользователю пиктограммы. Избегайте применения нестандартных пиктограмм для визуализации стандартных операций.

51

5.Элементы управления

Необходимо эффективно использовать экран приложения. Не размещайте на экране много мелких элементов.

Цветовая палитра и композиция графических элементов должна быть удобна пользователю. Не применяйте чрезмерно ярких цветов, используйте цвета, облегчающие восприятие информации.

Применяйте ненавязчивые средства привлечения внимания пользователя к тем или иным элементам информации.

5.7.1. Композиция и организация

Человек значительно лучше воспринимает визуальную информацию, если она организована в пространственном отношении. Взгляд всегда привлекают фрагменты:

отдельно стоящие, а не сгруппированные,

крупные, а не мелкие,

графические, а не текстовые,

выделенные цветом, а не черно-белые.

Поэтому при проектировании визуальных элементов ПИ целесообразно опираться на следующие принципы:

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

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

Сбалансированность структуры экрана. Предполагает рациональное использование поверхности экрана, размещение на экране только той информации, которая необходима для исполнения очередного шага задания.

Визуальное объединение логически связанных элементов. Это способствует уяснению пользователем, как именно представленная на экране информация и элементы управления связаны с выполнением шага задания. Например, если на экране присутствует кнопка, при нажатии на которую меняется содержимое списка, лучше кнопку разместить рядом со списком.

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

52

5. Элементы управления

Некоторые пользователи (около 9% населения мира) могут иметь проблемы с восприятием цветов.

Выводы:

Цвет должен использоваться только как дополнительная форма отображения информации.

В рамках одного приложения используйте ограниченное множество цветов.

Лучше использовать приглушенные, пастельные цвета.

Разрешите пользователю настраивать гамму цветов, где это возможно. При разработке средств настройки цветов учитывайте сложность выполнения этой операции и квалификацию пользователя.

5.7.3. Шрифт

Шрифты способствуют организации информации и созданию определенного настроения пользователя. Изменяя размер, плотность и начертание шрифта вы можете указать пользователю на степень важности информации и желаемый порядок восприятия.

Старайтесь не использовать курсив (Italic) и рубленный шрифт (Serif), так как они труднее читаются, особенно на мониторах с низким разрешением.

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

5.7.4. Многомерность экрана

При изображении ряда элементов полезно использовать перспективу, подсветку и затенение для получения эффекта трехмерного образа. Это способствует повышению функциональности интерфейса и обратной связи при работе пользователя с компьютером. Например, с помощью таких приемов кнопки визуально отображаются нажатыми или отпущенными.

Помните однако, что многомерные элементы занимают на экране больше места, чем «плоские». Применяйте их только для интерактивных элементов, когда объемное изображение повышает функциональность. Не делайте объемные элементы «для красоты».

5.7.5.Пространственное размещение визуальных элементов

Размеры и размещение визуальных элементов важны для создания предсказуемой среды. Визуальная структура должна облегчать понимание

54

5.7. Выбор визуальных атрибутов информации

назначение элементов, отображаемых в окне. Используйте следующие правила:

Группирование. Предполагает компактное размещение взаимосвязанных элементов. Можно просто размещать элементы рядом друг с другом. Однако лучше помещать сгруппированные элементы в специальных компонент — контейнер.

Размещение групп. Для количественных оценок размещения предложена единица измерения — дискрета окна. Она равна по горизонтали одной четверти от средней ширины, а по вертикали одной восьмой от средней высоты символов текущего системного шрифта. Рекомендуется между элементами группы оставлять промежуток не менее 4 дискрет, а расстояние от края группы до границы окна не менее 7 дискрет.

Выравнивание. Это дополнительный способ отображения взаимосвязанной информации. Различают три способа выравнивания: горизонтальное (по верхнему краю, нижнему краю или по центру выравниваемых элементов), вертикальное (по левому краю, правому краю или по центру выравниваемых элементов), смежное (когда элементы смыкаются краями). При вертикальном выравнивании рекомендуется выравнивание по левому краю для текста и правому краю для чисел.

5.7.6. Визуализация выполняемых операций

Визуализация выполняемых операций — один из способов представления пользователю обратной связи с приложением. Она облегчает пользователю уяснение сущности выполняемой операции, а также коррекцию поведения при ошибочных или неудачных действиях.

Визуализация операций выбора должна позволить пользователю однозначно идентифицировать выбранный объект на фоне остальных. Для выделения объекта разумно использовать системный цвет выделения, к которому пользователь привык, работая в среде окружения с иными приложениями.

55

5. Элементы управления

Изображение выбираемого объекта должно изменяться непосредственно в процессе выполнения операции выбора. При наличии на экране нескольких связанных окон результат выбора, за редким исключением, должен отображаться только в активном окне, чтобы пользователь видел, к какому из объектов выбора относится его действие.

Иногда полезным средством визуализации является визуализация анимацией. Пример этого окно, возникающее в операционной системе при копировании файлов. Анимация позволяет также обнаружить зависание приложения.

56

6.Средства поддержки пользователя

6.1.Окно Сообщение

Окно Сообщение — это вторичное окно, используемое для вывода на экран сообщений пользователю. В нем обычно размещаются:

Заголовок.

Графический символ, визуально характеризующий сообщение. Например, знак вопроса — запрос подтверждения, восклицательный знак — предупреждение, буква i — информация, крест — невозможность действия.

Текст. Должен быть ясным, кратким и обязательно однозначным.

Кнопки выбора продолжения.

6.2. Контекстная помощь

Обеспечивает представление пользователю информации о конкретном объекте или ситуации. Примеры средств оказания контекстной помощи:

Команда ×òî ýòî? Осуществляет контекстно-зависимую подсказку. При выборе этой команды указатель мыши меняет форму на стрелку со знаком вопроса. При подведении курсора к желаемому объекту и щелчка мышью по нему из файла контекстной помощи для выбранного объекта вызывается его описание.

Всплывающая подсказка. Это небольшое всплывающее окно, появляющееся на некоторое время при наведении указателя мыши на объект. В этом окне размещается краткое описание объекта. Средство очень полезно для пиктограмм, внешний вид которых не очень ясно идентифицирует объект.

Строка состояния. Размещается в окне приложения. В него выводятся кратки сообщения о состоянии системы. Например, при завершении выбора страницы в браузере Интернета в строке состояния выводится фраза Готово.

6.3. Проблемно-ориентированная помощь

Проблемно-ориентированная помощь. Представляет собой описание последовательности шагов, необходимых для выполнения задачи. Помощь организуется в виде разделов, каждый из которых описывает один шаг. Помощь обычно снабжается навигатором для быстрого перемещения по документу. При больших размерах файл помощи снабжается кнопками-акселе- раторами с гипертекстовыми ссылками для быстрого перемещения по разделам.

57

6. Средства поддержки пользователя

6.4. Справочник

Представляет пользователю справочную информацию в форме интерактивной документации. Пример — справка по программе Front Page. Содержит поля:

Обращения к оглавлению, при выборе которого в отдельном окне выводится иерархически организованное оглавление. По оглавлению можно выбрать любой раздел.

Поле ввода текста для поиска слов в документе. Если компьютер соединен с сетью Интернет, то поиск осуществляется по всему миру.

Поле Microsoft Office Online для обращения к средствам онлайновой поддержки на Web-сайте Microsoft (это учебный курс, сообщество пользователей приложения, загрузка обновлений).

Справочники в настоящее время могут быть в виде одного файла с расширением .hlp или в виде набора HTML файлов с гиперссылками (например, справка по системе MATLAB содержит несколько тысяч файлов.

6.5. Мастера

Мастер — это специальная форма пользователю, позволяющая автоматизировать выполнение задачи посредством диалога системы с пользова-

58

6.6. Средства обучения

телем. Мастера применяют в тех случаях, когда задача достаточно сложная и требует опыта работы и знания технических деталей. Мастер «проводит» пользователя по задачи, требуя от него только конкретных данных и выполняя основную часть работы автоматически. С точки зрения ПИ мастер — это набор диалоговых панелей, последовательно отображаемых на экране по мере выполнения пользователем очередного шага задания.

Каждая панель содержит:

элементы интерфейса для ввода требуемых данных,

кнопку Далее для перехода к следующему шагу,

кнопку Назад для возврата к предыдущему шагу, если нужна коррекция (на первой странице недоступна),

кнопку Готово для применения введенных пользователем или по умолчанию данных и инициации выполнения задания.

Пример широкого использования мастеров — программа Excel.

6.6. Средства обучения

Практика показывает, что даже при наличии полной и подробной документации на программный продукт, выполненной в печатной форме, пользователи предпочитают осваивать его методом «проб и ошибок». Чтобы попробовать все и не пропустить деталей, лучше воспользоваться специальными учебными средствами, которые имитируют работу с моделью, в которой затрагиваются особенности работы приложения. Для конкретного приложения может быть несколько средств обучения, содержание которых зависит от следующих факторов:

сложность приложения,

квалификация пользователя,

время, отводимое на обучение. Различают несколько этапов обучения:

«Стимул-ответ». На этом этапе вырабатывается точная реакция пользователя на заданны стимул. Например, для вызова выпадающего меню требуется щелкнуть левой кнопкой мыши по пункту главного меню.

Обучения цепочкам событий. Например, для коррекции содержимого файла: открыть, отредактировать, сохранить.

Концептуальное обучение. Пользователь должен научиться определять общие свойства множества объектов. Например, разрешенные действия для графических объектов.

Обучение правилам. Предполагает освоение увязывания друг с другом концепций. Например, правила технологии связывания и внедрения объектов OLE (Object Linking and Embedding).

59

6.Средства поддержки пользователя

Обучение решению задач. Состоит в формировании навыков при решении конкретных задач. Например, распределение ресурсов между клиентами

Средства обучения бывают автономные и встроенные в приложения.

Êвстроенным относятся:

Полезные советы. Реализуется в виде последовательных советов по работе с приложением. По умолчанию очередной совет отображается при каждом новом запуске приложения. Пользователю дается право просмотреть все страницы советов, либо отменить их отображение. Считается, что это наименее эффективное средство обуче- ния, позволяет обеспечить только первый этап — обучение основам работы с приложением.

Подборки примеров. В этом средстве реализован наиболее традиционный принцип обучения «делай, как я». Примеры можно использовать и как прототип, для создания своего приложения, подобного примеру. Хорошим примером являются демонстрационные примеры системы компьютерной математики MATLAB, в которых представлены примеры приложений для различных предметных областей. Это средство может успешно применяться на втором и третьем этапах обучения

Демонстрационные ролики. С их помощью пользователь последовательно проводится по всем этапам работы с приложением на демонстрационном наборе данных. Это средство может применяться на четвертом и пятом этапах обучения.

Электронные учебники. В них вводится интерактивность, когда раздел обучения выбирает сам пользователь. Электронные учебники в настоящее время выполняются в форматах Help — Помошь (единый файл с перекрестными ссылками), HTML (набор файлов с перекрестными ссылками), PDF (Portable Document Format.) — формат портативного документа (единый файл с перекрестными ссылками, оформленный со страничной организацией таким образом, что воспроизводится одинаково на любой платформе). Эффективность электронного учебника повышается при наличии анимационных вставок, иллюстрирующих динамику при работе с приложением. Электронные учебники поддерживают все этапы обучения.

60