Лекция № 1

Тема: "Правила проектирования визуального интерфейса приложения"

План

1. Требования к элементам интерфейса

2. Требования к проектированию окон

3. Использование в интерфейсах цвета

4. Подсказки и контекстно-зависимы справки

1. Требования к элементам интерфейса

Кнопки

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

Чем больше кнопка, тем выше скорость работы и ниже - вероятность ошибок. Имеет значение и зазор между кнопками. Хуже, если пользователь не только нажал не на ту кнопку, но и «зацепил» при этом соседнюю. Кнопка может иметь несколько состояний:

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

Названия кнопок (за исключением стандартов наподобие "ОК") должны быть глаголами или отглагольными существительными. Стандарты бывают путаными: при наличия "ОК", "Применить" и "Отмена"» кнопка "Применить", фактически, превращает кнопку "ОК" в "Закрыть", потому что все действия уже сделанны. "Отмена" после "Применить" также почти никогда не работает.

Флажки и переключатели

Флажки и переключатели являются кнопками отложенного действия. Есть несколько простых правил использования:

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

На панелях инструментов применяются флажки в виде кнопок.

Списки

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

• компактности (они экономят экранное пространство, которое актуально, если количество элементов велико);
• расширяемости (простота загрузки в списки динамически изменяемых элементов делает их очень удобными при разработке интерфейса, поскольку это позволяет не показывать пользователю сознательно неработающие элементы).
• Стандартами или правилами использования списков являются:
• ширина списка, если нет возможности вместить все строки, должна позволять различать элементы;
• необходимо сортировать элементы (по популярности, типу или алфавиту). После наиболее популярных элементов лучше вставить разделитель, чтобы отделить от алфавитного списка;
• пиктограммы обеспечивают существенное повышение субъективной привлекательности интерфейса и считываются быстрее "голого" текста;
• в раскрывающемся списке, кроме самих элементов, надо предусмотреть метаэлементыи "Все", "Ничего" и подобные, если они нужны;
• высота списка - не меньше 4-х строк (а лучше, не меньше 8-и). Пустого места в конце быть не должно.

Комбобокс (выпадающий список)

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

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

Поля ввода

Поля ввода является основой любого интерфейса. В результате, требований к ним довольно много:

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

Меню

Меню - метод взаимодействия пользователя с системой, при котором пользователь выбирает командуиз предложенных вариантов, а не вводит ее с клавиатуры. Меню позволяет снизить нагрузку на мозг пользователей, поскольку для выбора команды не надо вспоминать, какая именно команда нужна и как именно ее нужно использовать - вся (или почти вся) нужная информация уже отображается на экране. К тому же, поскольку меню ограничивает диапазон действий пользователей, появляется возможность в значительной мере изъять из этого диапазона ошибочные действия. Более того: меню показывает пользователям объем действий, которые они могут выполнить благодаря системе, и тем самым учат пользователей.

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

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

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

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

Вид элемента должен подсказывать - произойдет действие или раскроется подменю («Выбрать...»).

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

• зачем группировать элементы?
  • меню сканируется быстрее (как и с пиктограммами);
  • разделители подчеркивают связь между элементами;
  • группировка облегчает сохранение элементов в кратковременной памяти пользователя.
• как группировать элементы?
  • взаимоисключающие элементы надо помещать в отдельный уровень иерархии;
  • необходимо ориентироваться на логику пользователя, а не программиста, который досконально знает свой продукт.
• как разделять группы между собой?
  • пустым элементом;
  • в отдельные иерархические группы;
  • глубина меню увеличивает вероятность каскадных ошибок, когда неверно выбранный пункт верхнего меню порождает сознательно ошибочный выбор всех подчиненных. Главное меню лучше ограничить 2-3 уровнями;
  • в аннотации к элементу можно показать некоторые элементы нижнего уровня. Например:

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

Объем контекстного меню - не более 7-8 строк, иначе скорость работы падает. К тому же, большое меню значительно перекрывает объект, для которого оно вызвано (в отличие от традиционного меню). Порядок отображения элементов в контекстном меню более важен, чем в обычном, и сначала должны отображаться наиболее важные команды.

2. Требования к проектированию окон

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

Существуют следующие типы окон:

• главные окна программы;
• окна документа;
• режимные (модальные) диалоговые окна - блокируют доступ к других элементам системы до их закрытия;
• безрежимные диалоговые окна;
• палитры;
• окна браузера (поскольку используемая в интернете технология существенно отличается от обычной, этот тип окон стоит немного особняком).

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

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

Панели инструментов имеют следующие достоинству:

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

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

Рекомендуется самые важные кнопки кнопки делать в виде пиктограммы и текста ( к тому же в них проще попасть мышью), а другие в виде только пиктограмм (для опытных пользователей) или только текста (для неопытных).

Строка статуса может как отображать состояние системы, так и быть эффективной панелью инструментов.

Структура окна

Существует ряд устоявшихся традиций расположения элементов в окнах:

• командные кнопки (то есть кнопки, которые управляют окном, например «OK» или «Закрыть») должны быть или снизу окна, или в правой его части;
• окно должное хорошо сканироваться взглядом, то есть его основные части должны быть сразу видны и заметны;
• окно должно читаться как текст;
• чаще всего используемые элементы должны быть расположены в левой верхней части экрана, реже используемые - в правой нижней части.

Увеличение площади окна за счет применения закладолк имеет некоторые особенности.

• закладки (кроме первой) скрывают от пользователя функциональность;
• число закладок ограниченно шириной ярлыков и не должно быть более 5-7;
• не следует стремиться сделать одинаковое количество элементов в закладках: здесь важнее их правильная группировка;
• командные кнопки обязательно должны располагаться вне области закладолк.

Многооконные приложения

Сложное приложение не может ограничиваться одним окном. Поэтому, прежде всего, вам нужно разрешить проблему управления окнами.

Есть две разные модели приложений: с интерфейсом одного документа (SDI) и с интерфейсом множества документов (MDI).

 В большинстве случаев нужно отдавать преимущество интерфейсу SDI. Этот интерфейс не обязательно предполагает наличие действительно только одного окна, как в приложениях Windows, типа «Калькулятор». Такое приложение, как «Проводник» Windows, также есть SDI приложением, но в нужные моменты оно создает вторичные окна для поиска файлов или папок, задания параметров, просмотра свойств файлов и других целей.

 С другой стороны, у приложений MDI тоже есть свои преимущества. Хороший пример такого приложения – Microsoft Word. В приложении MDI есть родительское (первичное) окно и ряд дочерних окон (окон документов). Бывают ситуации, когда выгодно отображать информацию в нескольких окнах, которые совместно используют элементы интерфейса (например, меню или инструментальные линейки). Окна документов управляются и ограничиваются родительским окном. Если вы уменьшаете размер родительского окна, то дочерние окна могут исчезать из поля зрения.

Случаи, когда нужно использовать модель MDI, довольно редки. Прежде всего, это следует делать только тогда, когда все дочерние окна будут содержать идентичные объекты – например, текстовые документы или электронные таблицы. Не применяйте MDI, если вы собираетесь работать в приложении с дочерними окнами разного типа (например, текстовыми документами и электронными таблицами одновременно). Интерфейс MDI предназначен для очень узкого диапазона приложений, в которых все дочерние окна однородные (как в Word или Excel). Адаптироватьь его к чему-то другому не выйдет. В конце концов, нужно отметить, что Microsoft не поощряет разработку новых приложений MDI ( в основном потому, что было написано слишком много плохих программ этого типа).

Последовательность фокусирования элементов

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

3. Использование в интерфейсах цвета

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

• Используйте ограниченное количество цветов. Для окон не следует использовать более четырех или пяти разных цветов, в интерфейсе системы не должно быть более семи цветов.
• Используйте разные цвета для показа изменений в состоянии системы. Если на экране изменились цвета, значит, произошло какое-то событие. Выделение цветом особенно важно в сложных экранах, в которых отображаются сотни разных объектов.
• Для помощи пользователю используйте цветовое кодирование. Если внимание пользователям необходимо привлечь к каким-то аномальным элементам, выделите их цветом; если нужно показать похожие элементы, выделите их одинаковым цветом.
• Используйте цветовое кодирование продуманно и последовательно. Если в какой-нибудь части системы сообщения об ошибке отображаются, например, красным цветом, то во все других частях похожие сообщения должны отображаться таким же цветом. Тогда красным цвет не следует использовать где-нибудь еще. Если же красный цвет используется еще где-то в системе, пользователь может интерпретировать появление красного цвета как сообщения об ошибке. Нужно помнить, что у определенных типов пользователей есть свои представления о значении отдельных цветов.
• Осторожно используйте комбинации цветов. Физиологические особенности человеческого глаза не позволяют одновременно сфокусироваться на красном и синем цветах. Поэтому последовательность красных и синих изображений вызывает зрительное напряжение. Некоторые комбинации цветов также могут визуально нарушать или затруднять чтение.

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

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

Статические цвета вы выбираете самые, и они будут оставаться неизменными при работе приложения на любом компьютере. Это не очень хорошо, поскольку пользователь не сможет адаптировать вид вашего приложения к своим нуждам. При выборе желательной ему цветовой схемы пользователь может руководствоваться самыми разными соображениями: начиная из практических (например, он может хотеть установить черный фон, чтобы экономить энергию батареи) и заканчивая эстетичными (он может отдавать предпочтение, например, шкале оттенков серого, потому что не различает цвета). Все это он не может делать, если вы задали в приложении статические цвета. Но уже если из каких-то соображений вам надо их задать, старайтесь использовать базовый набор из 16 цветов. Если вы попробуете использовать 256 (или, что еще хуже, 16 миллионов цветов), это может замедлить работу вашего приложения, или оно будет выглядеть плохо на машине пользователя с 16 цветами. К тому же подумайте (а, как правило, это надо проверить и экспериментально), как будет выглядеть ваше приложение на монохромном дисплее.

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

4. Подсказки и контекстно-зависимы справки

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

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

Более подробные пояснения пользователю может дать контекстно-зависимая справка, встроенная в приложение. Она позволяет пользователю нажать в любой момент клавишу F1 и получить развернутую информацию о том компоненте, который в данный момент находится в фокусе.

Вопрос для самоконтроля

1. Какие  требования при создании кнопок вы знаете?

2. Какие  требования при создании флажков, переключателей и списков вы знаете?

3. Какие  требования при создании меню вы знаете?

4. Какие типы окон вы знаете? Дайте их характеристику.

5. Какие рекомендации относительно организации структуры окон вы знаете?

6. Приведите рекомендации относительно создания закладок.

7. Какие  типы приложений с точки зрения многооконного интерфейса вы знаете?

8. Что такое последовательность фокусирования элементов.

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

10. Дайте характеристику такому элементу интерфейса как система помощи.