чмв. Лекция Понятие интерфейса. Качество пользовательского интерфейса
 Скачать 1.02 Mb.
|
|
Использование цвета в интерфейсе программных продуктов Возможно, цвет является наименее используемым элементом в разработке пользовательского интерфейса. Человек пытается придать значение всему, что видит и воспринимает. Поэтому цвет в пользовательском интерфейсе должен применяться с большой аккуратностью. Часто он используется только в качестве декоративного элемента. Это ограничивает его способность отображать значимую информацию в интерфейсе. Тафт повторяет один из основных принципов использования цвета: «Самое главное — не навреди». Рекомендации по использованию цвета. Знание теории восприятия и особенностей зрения привело к созданию очень важных фундаментальных рекомендаций по использованию цвета вне зависимости от средства представления информации. Данные рекомендации применимы к использованию цвета в печатных материалах, широковещательных средствах, а также на компьютерных дисплеях. Некоторые из этих рекомендаций могут показаться устаревшими (по дате их публикации). Однако базовые характеристики человеческого восприятия не меняются. Существует три группы рекомендаций: с точки зрения физиологии, восприятия и познавательности. Рекомендации с точки зрения физиологии ♦ Не применяйте одновременно высоконасыщенные испектрально-интенсивные цвета. ♦ Избегайте насыщенно-синего цвета для текстов, тонких линий и малых форм. ♦ Не используйте близкие цвета, отличающиеся только количеством синего. ♦ Для четкого различения цветов старшим по возрасту операторам назначайте более высокие уровни яркости. ♦ Не забывайте о том, что цвета меняют свои оттенки в зависимости от цвета окружения. PDF created with FinePrint pdfFactory trial version www.pdffactory.com 51 ♦ Помните: величина заметного изменения оттенка варьируется в диапазоне спектра. ♦ Старайтесь выделять края не только цветом. ♦ Избегайте красного и зеленого цветов на периферии. ♦ Сочетайте противоположные цвета (красный-зеленый или синий-желтый). ♦ Для пользователей с дефектами зрения в различении цветов не применяйте близких цветов. Рекомендации с точки зрения восприятия цветов ♦ Не все цвета одинаково хорошо различаемы. ♦ Освещенность не равна яркости. ♦ Различные оттенки, по существу, имеют различные уровни насыщенности. ♦ Освещенность и яркость различимы на отпечатанном документе, но не на цветном дисплее. ♦ Не все цвета одинаково разборчивы и читаемы. ♦ Оттенки изменяются при перемене интенсивности и цвета фона. ♦ На малых поверхностях цветовые различия плохо заметны. Рекомендации с точки зрения познавательности ♦ Не злоупотребляйте цветом. ♦ Учитывайте, что цвета на экране и печатных копиях различаются. ♦ Группируйте взаимосвязанные элементы с помощью общего фона. ♦ Помните: аналогичным значениям соответствуют аналогичные цвета. ♦ Не забывайте: яркость и насыщенность привлекают внимание. ♦ Свяжите степень изменения цвета с важностью события. ♦ Размещайте цвета в соответствии с их спектральным расположением. ♦ Теплые и холодные цвета должны указывать на уровень действия. Существуют дополнительные рекомендации по использованию цвета. ♦ Используйте от трех до семи цветов. ♦ Применяйте цвета, расположенные в центре и на периферии, следующим образом: красный и зеленый — в центре визуального поля; синий — для слайдов, фона и выделения границ экрана. ♦ При модификации размеров и изобразительного ряда выбирайте цвета, которые изменяются минимально от кадра к кадру. ♦ Не используйте одновременно цвета высокой интенсивности и спектрально-экстремальные. ♦ Применяйте соответствующее кодирование для стандартных элементов. ♦ Для элементов, принадлежащих к одной группе, назначайте один и тот же цвет. ♦ Выбирайте один и тот же цветовой код для тренинга, тестирования, приложений и публикаций. ♦ Для привлечения внимания пользуйтесь интенсивными и насыщенными цветами. ♦ По возможности обращайтесь к избыточному кодированию форм с помощью цвета. ♦ За счет добавления цвета улучшайте восприятие информации. Тестирование показывает, что цвет является эффективным средством повышения качества выполнения задач. Цвет в интерфейсе необходимо применять осторожно и экономно, чтобы каждое дополнение было оправдано с точки зрения затрат. Дисплей может показывать от 256 цветов до 1024 или более, однако не увлекайтесь. Основной принцип: разработайте пользовательский интерфейс сначала в черно-белом варианте и позже, при необходимости, добавьте цвет. Использование звука в анимации Использование звука в пользовательском интерфейсе Звуковой канал недостаточно используется при взаимодействии человека с компьютером. Это становится еще более очевидным, когда мы начинаем осознавать, что в некоторых (часто критических) ситуациях мы визуально немощны из-за перенасыщения визуальной системы, плохого освещения или в связи с возрастом. Поэтому данная область заслуживает и должна получать больше внимания. По вопросу использования звука в качестве обратной связи всегда велось множество дискуссий. Если все хорошо продумано, ненавязчиво, можно по желанию звук включать и отключать, то прекрасно. Однако пользователи сразу начинают искать регулировку звука и проверять, издает ли аудиосистема какие-то сигналы, щелчки, нет ли надоедливых голосов, PDF created with FinePrint pdfFactory trial version www.pdffactory.com 52 которые будут мешать работе. Прежде всего необходимо выяснить, когда стоит применять звуковую информацию вместо визуальной. Рекомендации по использованию звуковой и визуальной формы представления информации приведены в табл. 6.1. Таблица 6.1 Рекомендации по использованию звуковой и визуальной форм представления информации Звуковая форма представления Визуальная форма представления информации не используется, если Сообщение простое Сообщение короткое Сообщение короткое Сообщение длинное Сообщение не может быть отложено Сообщение может быть отложено Сообщение относится к событиям, происходящим во времени Сообщение относится к положению в пространстве Сообщение призывает к немедленному ответному действию Сообщение не призывает к немедленном ответному действию Визуальная система человека переполнена Слуховая система человека переполнена Рабочее место слишком яркое или слишком темное — необходима адаптация Рабочее место слишком шумное — необходима адаптация Характер работы требует постоянного перемещения пользователя Характер работы позволяет пользователю оставаться на месте Использование анимации в пользовательском интерфейсе Анимации, как и звуку, одинаковое внимание уделяют и разработчики, и пользователи. Сегодня вы можете встретить сотни и даже тысячи иконок на CD ROM или в Internet. При перемещении мыши по различным областям экрана ее указатель изменяет свою форму для отображения типа действия, которое вы можете совершить с данным объектом или в данной области. Существует множество форм, которые может принимать указатель мыши (стрелка, перемещение, размер, ожидание, запрещение и т.д.). Иконки и указатели с анимацией также могут быть полезными. Под анимацией понимается изменение во времени визуального представления графического элемента. Аналогично звуку главное преимущество анимации заключается именно в развлекательности действия. Курсор с анимацией упрощает его поиск на экране, особенно это важно для небольших компьютерных записных книжек с малым разрешением. Анимация может использоваться для совершенствования визуальной связи между компьютерами и пользователями. Apple Macintosh была первой из популярных интерфейсных сред, применившей анимацию. Пользователи Macintosh могут вам описать, как мусорная корзина раздувается, когда они сбрасывают на нее объект. Большинство современных графических пользовательских интерфейсов применяет по крайней мере минимальный набор методов анимации для отображения действий, выполнения и состояния процесса, запущенного пользователем или системой. Анимация, используемая в распространенном интерфейсе операционной системы, включает в себя изменяющие масштаб и уменьшающиеся при открывании и закрывании окна, иконки песочных или обычных часов для отображения выполнения кратких процессов, а также индикаторы выполнения для более длительных процессов. На рис. 6.2 показан фрагмент анимации, используемой в Windows 95 для индикации процесса выполнения. По мере того как элементы перемещаются или копируются, в диалоговом окне появляется лист бумаги, перелетающий из одной папки в другую. Под анимацией также расположена полоска, отображающая процесс выполнения. Отметим текстовую обратную связь, в динамике отображающую действие (Move в данном примере), имя файла (LIBCAP.Z), исходное положение (SOFTWARE) и конечное положение (SOFTWARE). Пользователи чувствуют себя уверенно в PDF created with FinePrint pdfFactory trial version www.pdffactory.com 53 присутствии столь хорошо разработанного диалогового окна. Рис. 6.2. Индикатор процесса выполнения в Windows95 Таблица 6.2 Вопросы, на которые может ответить анимация Объекты и действия Вопросы, на которые может отвечать анимация Идентификация Что это такое? Перемещение Откуда я пришел и куда иду? Ориентирование Где я нахожусь? Объекты и действия Вопросы, на которые может отвечать анимация Выбор Что я могу теперь сделать? Демонстрация Что я могу с этим сделать? Объяснение Как я это делаю? Обратная связь Что происходит? История Что я сделал? Интерпретация Почему это произошло? Руководство Что я теперь должен делать? Ключевые вопросы разработка Какие управляющие элементы использовать В глазах пользователя каждая деталь, каждый управляющий элемент должны служить какой-то цели. С точки зрения разработчика каждая часть данных может быть представлена несколькими способами. Как разработчики и проектировщики решают, какие управляющие элементы, текст и метки должны представлять их на экране? На рис. 6.3 приведены несколько вариантов представления обычного поля ввода, которое присутствует в любой программе. В этом поле задается вопрос о возрасте пользователя: «Вам больше или меньше 21 года?» Можно было придумать и другие варианты представления данного поля, но были выбраны элементы наиболее популярные. В левой колонке первое поле — простое текстовое окно, где пользователя просят ввести «Да» или «Нет». В следующем варианте используются две кнопки с метками «Да» и «Нет». Третьим идет окно списка с одним вариантом вы бора. В следующей колонке показаны флажок, окно с выпадающим списком, управляющий элемент типа «колодец» (термин Microsoft) или перечень величин (термин IBM), поле с набором кнопками (SpinEdit) и, наконец, линейка с ползунком. *************************** Какие управляющие элементы оптимальны для сбора определенных типов вводимой PDF created with FinePrint pdfFactory trial version www.pdffactory.com 54 пользователями информации? Не существует одного единственно правильного пути представления информации на экране! К сожалению, публикуемые рекомендации и справочные материалы от производителей мало помогают в данном вопросе. Это на самом деле зависит от типа данных, которые требуется собрать, количества доступных данных, вида представления другой информации на экране, а также способа взаимодействия пользователей с управляющими элементами экрана (с помощью клавиатуры, мыши, сенсорного экрана и т.д.). Одним из ключевых факторов, который следует учитывать при выборе управляющих элементов, является масштабируемость. Выпадающее окно списка может прекрасно работать, когда речь идет о пяти элементах, а если в списке их содержится 500? Вертикальная полоса прокрутки хорошо работает с 20-страничным документом, но что будет, если прокрутить 200- страничный? При выборе особого элемента управления всегда следует думать об объеме информации, с которым сможет работать пользователь. Взгляните на каскадное меню. Если число вариантов на одном уровне ограничено и в наличии всего несколько уровней, то такое меню работает очень хорошо. При использовании в качестве элемента интерфейса общего назначения, как в Windows 95 меню запуска Start, оно может выйти из-под контроля. Поскольку существует множество групп программ, каскадное меню программ Programs сразу заполняет весь экран, не оставляя возможности пройти при необходимости по меню и выбрать нужный элемент. Всегда следует просчитать, что произойдет с интерфейсом, если через него будет проходить больше данных, чем ожидалось. Метод Drag and Drop Интерфейсы становятся все более объектно-ориентированными, более графическими и визуальными, поэтому предпочтение все чаще отдается прямому манипулированию. Однако проблема метода Drag and Drop («перетащил и бросил») заключается в том, что отсутствует визуальное указание на то, что объекты могут или должны быть перемещены и сброшены на другие объекты. Если пользователи не выучат, как и когда использовать данный метод, то потенциальные преимущества не будут реализованы. Разработчики должны построить метафоры интерфейса и предложить интуитивно понятные схемы, призывающие и приглашающие пользователей к прямому манипулированию объектами в интерфейсе! Иначе как пользователи догадаются, какими объектами можно манипулировать? Существует четырехступенчатую подсказку, которая поможет эффективно пользоваться методом «перетащил и бросил»: v Какие объекты я могу перетаскивать? v Куда я могу их сбрасывать? v Что произойдет, если я это сделаю? v Если мне не нравится, как я могу этого избежать? Пользовательский интерфейс должен быть настолько наглядным, чтобы пользователям не приходилось долго размышлять или строить догадки, как взаимодействовать с тем, что они видят на экране. К сожалению, мы еще не выяснили, каким образом можно указывать на то, что объект можно перетаскивать и сбрасывать. И, наконец, при всей увлеченности интерфейсами с прямым манипулированием не стоит забывать о масштабируемости. Перемещение одного или нескольких объектов может быть простым и удобным, но что вы скажете о работе с сотнями объектов? Каким образом пользователи выберут группы объектов, прежде чем переместить их? Должны ли они перетаскивать и сбрасывать сотни объектов или существуют более оптимальные способы сделать это? Не заставляйте пользователей действовать прямым Манипулированием, когда другие методы более эффективны. Строка меню и панель инструментов Строки меню, панели инструментов и кнопки — все они могут использоваться для представления аналогичных действий. Обычно пользователи удивляются, не увидев привычную строку меню в окне. Действительно ли им нужны строки меню во всех окнах или панели инструментов могут послужить адекватной заменой (или дополнением)? Могут ли кнопки управления заменить или дополнить строки меню и панели инструментов? Когда компания IBM спроектировала пользовательский интерфейс OS/2, папки на Рабочем столе не имели строк меню в открытых окнах. Мы проверяли, создаст ли это проблемы для PDF created with FinePrint pdfFactory trial version www.pdffactory.com 55 пользователей. Был разработан прототип, в котором все окна имели строки меню, а все объекты — всплывающие меню. Фоновая область открытых окон и Рабочего стола также имели всплывающие меню. Опросили 21 пользователя по поводу их выбора. 13 из них сказали, что предпочли бы всплывающее меню, 7 — строку меню. Один из опрошенных отказался от обоих вариантов. Однако пользователи не хотят ограничиваться только всплывающим меню — 18 из 21 заявили, что полное удаление строки меню нежелательно. Результат данного опроса показал, что, несмотря на отдаваемое предпочтение, пользователи тем не менее выступают за существование альтернативы. Было рекомендовано обеспечить пользователей опциями, позволяющими использовать строку меню пожеланию. Перед всеми группами были поставлены задачи по обработке текста. За критерии теста были взяты скорость выбора команд и число допущенных ошибок. Кроме того, учитывалась степень субъективного удобства. Результаты показали, что пользователи действовали намного быстрее при работе с клавишами панели инструментов, когда речь шла о задачах, касающихся изменений стиля букв, курсива, подчеркивания или жирного выделения. Эти действия требовали одного щелчка мышью по панели инструментов. При использовании строки меню необходимо было выбрать один из вариантов, затем действие из выпадающего меню, а иногда открыть диалоговое окно, поставить нужные галочки и нажать на кнопку подтверждения сделанных изменений. Что касается пользователей, у которых были и панель, и строка меню, то они действовали не столь эффективно, как пользователи, снабженные только панелью инструментов. Вероятно, это можно объяснить тем, что им приходилось терять время на обдумывание варианта. Большинство пользователей заявили, что им нравилась возможность быстро осуществлять действия при помощи панели инструментов, однако они отметили, что не всегда легко разобраться со значением иконки. Результатом проведенных исследований стали некоторые рекомендации по ведению эффективной разработки: ♦ во всех приложениях использовать согласующиеся по представлению иконки; ♦ обеспечивать согласованное взаимодействие кнопок; ♦ группировать кнопки, выполняющие взаимосвязанные команды; ♦ расставлять кнопки в логичном порядке; ♦ размещать кнопки для обеспечения быстрой работы; ♦ обеспечить работу при помощи клавиатуры; ♦ разрешить пользователям самим заниматься конфигурированием; ♦ не допускать загромождения дисплея: ♦ иконки должны быть визуально различимы; ♦ использовать цвет, но с осторожностью; ♦ кнопки должны иметь визуальные подсказки к их активированию. Исследования и рекомендации обогащают профессиональный опыт в данной сфере. Панели инструментов представляют собой замечательные, хотя и не универсальные, элементы. К ним можно быстро получить доступ, но только пользователям, имеющим мышь! Знакомые и общие иконки легко распознаваемы, однако для специфических задач часто используются не вполне понятные иконки. Строки меню и выпадающие меню надо сначала просматривать — пока выбор не сделан, никаких действий не производится. По панели инструментов нужно только щелкнуть мышью, и дело сделано (всплывающие подсказки помогают пользователям просматривать и панели инструментов). Строки меню содержат все действия и маршруты для окон. Панели инструментов, в свою очередь, показываю» только общие, часто выполняемые действия. |