15. Помогайте пользователям по ходу
В идеальных интерфейсах помощь не нужна, т.к. они понятны и легко используемы. В реальной жизни интерфейсы иногда требуют помощи, однако ее нужно оказывать порционно и там, где она действительно нужна, скрывая в остальное время. Можно попросить людей пройти в раздел справки и найти там ответ на свой вопрос, но лучше встроить подсказки там, где они нужны. Только убедитесь, что пользователи знакомы с подобными интерфейсами.
16. Решающий момент: нулевой шаг
Первый опыт взаимодействия с интерфейсом имеет решающее значение, которое часто недооценивают дизайнеры. Сложности с интерфейсом чаще всего проявляются на этой стадии. Чтобы помочь пользователям побыстрее разобраться в интерфейсе, спроектируйте справочную страницу перед загрузкой основного содержимого. Расскажите и покажите, что и как нужно будет делать. Когда пользователи поймут правила, им будет приятнее пользоваться интерфейсом.
17. Существующие проблемы — самые главные
Люди ищут решения своих текущих проблем, а не потенциальных проблем, которые ждут их в будущем. Поэтому не стоит проектировать интерфейс, заточенный под гипотетические проблемы. Исследуйте текущие проблемы и создайте интерфейс под них. Это не так увлекательно, но однозначно даст свои плоды, когда реальные пользователи начнут пользоваться вашим интерфейсом.
18. Лучший дизайн незаметен
Парадоксально, но факт: отличный дизайн незаметен. Причина в том, что пользователь может сконцентрироваться на решении своих задач, вместо того, чтобы разбираться с интерфейсом. Когда пользователь успешно решил свою задачу, он счастлив и не видит причин благодарить за это интерфейс. Возможно это звучит разочаровывающе для дизайнеров, ведь никто не скажет, как хорош ваш дизайн. Однако, великие проектировщики знают, что счастливые пользователи молчат.
19. Черпайте вдохновение в других областях
Дизайн, типографика, копирайт, информационная архитектура и визуализация. Все эти области являются частью интерфейса. Они могут быть второстепенными или главными в вашем интерфейсе. Не замыкайтесь на проектировании, расширьте свой кругозор и поищите вдохновения в принципах других дисциплин. Подумайте, чему вы можете научиться из написания программного кода, правил оформления книг, скейтбординга или карате.
20. Интерфейсы создаются, чтобы ими пользовались
Как и с другими видами дизайна, проектирование успешно тогда, когда люди пользуются этим. Как красивый стул, на котором неудобно сидеть, интерфейс считается провальным, когда пользователи не хотят им пользоваться. Поэтому важно помнить, что проектирование интерфейса совмещает в себе как создание среды для решения задач, так и продукт, которым хочется пользоваться. Интерфейс, который удовлетворяет только эго дизайнера, не может считаться хорошим. Интерфейс хорош тогда, когда им активно пользуются.
2. Wimp-интерфейс
Так как на сегодняшний день WIMP-интерфейс является главной технологией пользовательского интерфейса и 90% программных продуктов, в том числе и операционных систем, разработаны на его технологии рассмотрим его более подробно.
Основными понятиями графического интерфейса являются понятия «рабочей области», «окна» и «иконки», или «значка».
Курсоры
Курсор в технологии командной строки. С возникновением технологии командной строки появилась необходимость указывать, в каком месте на экране дисплея будет отображаться символ, введенный с клавиатуры. В отличие от пакетной технологии, команды в методологии командной строки формируются и выполняются с терминала, при этом порядок запуска программ на выполнение, вообще говоря, произвольный.
При пакетной технологии команды считывались последовательно, перфокарта за перфокартой, символ за символом. На терминале же можно набрать на клавиатуре и запустить последовательно три команды, затем вернуться к первой, изменить ее и затем снова запустить. Однако при изменении старой команды необходима возможность редактирования строки текста. При редактировании строки на «старый» вид строки «накладывались» вновь введенные символы. Чтобы видеть, в какую часть строки будет выводиться символ, набранный на клавиатуре, появился специальный знак – курсор (cursor).
В интерфейсе командной строки курсор представляет собой мигающий прямоугольник, на месте которого появлялся символ, вводимый с клавиатуры. При этом курсор смещался вправо. Ввод символа происходил либо в режиме вставки (Insert), когда при своем перемещении курсор «раздвигал» старый текст, вписывая в пустое место набранные на клавиатуре символы, либо в режиме замены (Overwrite), когда новые символы заменяли старые.
Таким образом, курсор обозначал позицию ввода текста.
Курсор в WIMP интерфейсе. В WIMP - интерфейсе значение курсора и его смысл несколько изменился. Поскольку здесь действия происходят над объектами, то объекты необходимо выделять (select), перемещать (move), захватывать (capture) и производить другие действия.
Однако, для того чтобы произвести действие с объектом, на него необходимо указать (point). Для этого необходим графический указатель (graphic pointer). В качестве этого универсального указателя стал использоваться графический курсор (graphic cursor).
В операционных системах семейства MS Windows в качестве универсального графического указателя стал использоваться курсор мыши (mouse cursor).
Типы курсоров. Как следует из указанного выше, курсоры бывают «текстовыми» и «графическими» (курсор мыши).
Текстовый курсор в графическом интерфейсе обычно представляет собой мигающую вертикальную черту, в позицию справа от которой вводится текст. В отличие от текстового курсора в командной строке, его можно перемещать не только с помощью клавиатуры, но и мышью. В некоторых элементах графического интерфейса текстовый курсор представляет собой рамку или выделенный текст.
При передвижении мыши по поверхности рабочего стола на экране монитора одновременно и вслед за ней перемещается стрелка, прямоугольник или какая-либо другая фигурка, называемая графическим курсором.
Этот курсор обязательно указывает на одну из точек экрана – ту, к которой направляются действия оператора. На какую именно точку указывает курсор, надо определить опытным путем: обычно это один из острых краев курсора. У стрелки это верхний левый ее конец, то есть острие.
На любой объект на экране можно указать мышью, то есть подвести курсор мыши к одной из внутренних точек объекта.
Определение: курсор на экране монитора – это специальный знак (не являющийся символом), указывающий место, куда будет направлена операция манипулирования с текстом (текстовый курсор) или с графическим объектом (в WIMP - интерфейсе).
Рис. Основные курсоры манипуляторов в MS Windows XP
Рабочая область
Определение: рабочая область – это часть экрана монитора или весь экран, используемый программой графического интерфейса. Именно в рабочей области, и только в ней, можно работать с элементами графического интерфейса.
Окна
Определение: окно – область экрана, расположенная в рабочей области и предназначенная для выполнения тех или иных действий при диалоге с пользователем.
Исходя из определения, становится понятно, что окна играют наиважнейшую роль в WIMP - интерфейсе. В окнах обычно выполняются программы, приложения, выводятся сообщения о работе системы, через них осуществляется диалог с пользователем.
Особенностью современных операционных систем с WIMP - интерфейсом является то, что выполнятся могут несколько программ, или приложений (многозадачность) в нескольких окнах (многооконный интерфейс). Поэтому для упорядочения окон на экране служат органы управления окнами.
Элементы окон. Окно обязательно содержит:
1) Рамку (frame) окна, состоящую из:
а) прямоугольника заголовка (title bar);
б) окантовки, или границы (border) окна.
2) Заголовок, находящийся в прямоугольнике заголовка (title).
3) Контрольное, или контекстное меню (control menu box).
4) Рабочую область окна (workspace).
Рабочая область окна – пространство, где производится ввод и вывод информации и осуществляется диалог с пользователем. Она не может быть сжата меньше определенного минимального значения.
Контрольное меню окна обычно расположено в верхнем правом углу окна. Оно предназначено для выбора следующих режимов окна:
- «свернуть» окно в иконку (Minimize).
- увеличение окна до размеров всего экрана (Maximize).
- закрыть окно (Close).
В графическом интерфейсе используются следующие типы окон:
- перекрывающиеся;
- вспомогательные;
- дочерние.
Особым видом окон являются окна сообщений операционной системы (Messagge Window).
Перекрывающееся окно является полностью самостоятельным в управлении и не имеет родительского окна, то есть не управляется каким-либо окном.
Как правило, перекрывающиеся окна являются главным окном приложения. В нем могут быть расположены дочерние окна. Из главного окна приложения запускаются вспомогательные окна.
Вспомогательные окна (popup) – это окна, в которых выводится информация о работе приложения, устанавливаются его параметры с помощью опций управления. Примером вспомогательного окна является диалоговое окно (dialog box). Как правило, диалоговое окно всегда модально, то есть оно всегда активно и управление (или фокус) никогда не передается основной программе, пока это окно не закроется. Вспомогательное окно всегда располагается поверх всех окон на экране. Оно может иметь, а может и не иметь родительского окна. В последнем случае считается, что родитель этого окна – рабочая область экрана.
Рис. Вспомогательное окно
Дочерние окна (child) – окна с информацией рабочей программы, например, поле редактирования, лист электронной таблицы, документ MS Word и другие документы многооконных приложений. Дочерние окна обязательно имеют родительское окно. Они никогда не отображаются вне своего родительского окна. Родительским окном дочернего окна является перекрывающееся окно приложения.
В дочернем окне нет системного меню, панели управления и строки состояния – эти элементы находятся в родительском окне, а действия с этими элементами перенаправляются в дочернее окно, с которым в данный момент работает.
Еще один особый вид окон так называемые окна сообщений. Эти окна похожи на вспомогательные окна по своей структуре. Однако они часто не имеют окна – родителя, что роднит их с перекрывающимися окнами. Окно сообщения – это модальное окно, которое содержит от одной до трех кнопок.
Рис. Окно сообщений
Обычно кнопки, используемые в окнах сообщений это:
- Yes;
- No;
- Cancel («Отмена»).
Иконки
В WIMP – интерфейсе любое немодальное окно можно свернуть в иконку. Иконка (icon) представляет собой некоторую картинку с поясняющей надписью внизу.
Рис. Примеры иконок
Иконками, прежде всего, обозначаются ярлыки, или символические ссылки на файлы.
Символической ссылкой называется файл, который содержит в себе полный путь и настройки работы файла, запускаемого на выполнение при открытии ярлыка. Поэтому часто вместо термина «иконка» используют термин «значок».
Меню
При организации работы с приложением в диалоговом режиме часто бывает необходимым подать определенную команду работающей программе, выбрать необходимый режим работы или осуществить какое-либо стандартное действие. В интерфейсе командной строки эта команда просто бы набиралась с помощью клавиатуры. Это неудобно, поэтому для передачи команд приложению в графическом интерфейсе используется система меню.
Определение: меню – это набор пунктов, каждый из которых соответствует той или иной команде или действию.
Меню может быть горизонтальным, в котором пункты расположены один за другим в одну строку, и вертикальным, у которого пункты расположены друг над другом.
Меню бывает системным (system ) и всплывающим (popup). Системное меню расположено сразу под заголовком окна. Оно отображается постоянно. Всплывающее же меню появляется, когда пользователь или выбрал какой-либо пункт системного меню, или нажал кнопку вызова меню, или вызвал контекстное меню с помощью мыши.
Любое меню содержит пункты, выбор которых запускает на выполнение какую-либо команду. Пункты содержат в себе
1) описание (текст меню содержит краткое описание команды);
2) клавишу-акселератор (shortcut key). Клавиши-акселераторы указывают, каким образом можно выполнить команды с помощью клавиатуры, не активизируя меню. При работе с клавиатурой это намного ускоряет вызов команды.
Пункты меню бывают следующих типов:
1) Команда. При его выборе происходит выполнение команды, Какие-либо специальные знаки в нем отсутствуют.
2) Флажок. При его выборе устанавливается какой-либо режим работы (в левой части перед текстом появляется галочка), или этот режим сбрасывается (в левой части галочка исчезает). Иногда включение и выключение режима работы (и, соответственно, его отображение в меню) устанавливается или сбрасывается автоматически, согласно общему алгоритму работы приложения.
3) Переключатель. Этот пункт указывает на один из альтернативных режима работы приложения. Этот пункт никогда не бывает единичным – должна быть, по крайней мере, пара таких пунктов. При активизации этого пункта слева от текста меню появляется кружок, который исчезает при его сбросе.
4) Расширенная команда. При его выборе появляется диалоговое окно, осуществляющее дополнительный ввод информации.
5) Каскадное меню. При его выборе открывается новое всплывающее меню. В операционных системах семейства Windows для активизации этого пункта можно не выбирать этот пункт, а просто указать на него мышью.