Инструментарий разработчика интерфейсов Средства разработки

Инструментарий разработчика интерфейсов

Средства разработки пользовательского интерфейса Программное обеспечение для разработки пользовательского интерфейса разделяется на две основные группы: инструментарий для разработки пользовательского интерфейса (toolkits) высокоуровневые средства разработки интерфейса ( higher - level developmen tools).

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

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

Средства разработки пользовательского интерфейса К таким средствам относят построители диалога (interface builders) СУПИ - системы управления пользовательским интерфейсом ( User Interface Management Systems - UIMS).

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

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

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

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

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

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

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

Передача информации визуальными способами

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

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

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

Передача информации визуальными способами Строки меню, панели инструментов и кнопки - все они могут использоваться для представления аналогичных действий. Действительно ли нужны строки меню во всех окнах или панели инструментов могут послужить адекватной заменой (или дополнением)? Могут ли кнопки управления заменить или дополнить строки меню и панели инструментов?

Передача информации визуальными способами Был разработан прототип, в котором все окна имели строки меню, а все объекты - всплывающие меню. Фоновая область открытых окон и Рабочего стола также имели всплывающие меню. Опросили 21 пользователя по поводу их выбора. 13 из них сказали, что предпочли бы всплывающее меню, 7 - строку меню. Один из опрошенных отказался от обоих вариантов.

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

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

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

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

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

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

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

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

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

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

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

Элементы управления. Кнопки Кнопкой называется элемент управления, всё взаимодействие пользователя с которым ограничивается одним действием – нажатием. Командные кнопки - нажатие на такую кнопку запускает какое-либо явное действие, поэтому правильнее называть такие кнопки « кнопками прямого действия» .

Элементы управления. Кнопки Помимо простоты нажатия на кнопку есть другая составляющая проблемы: пользователю должно быть трудно нажать не на ту кнопку. Добиться этого можно: • либо изменением состояния кнопки при наведении на неё курсором, • либо установлением пустого промежутка между кнопками.

Элементы управления. Кнопки Кнопка должна (или не должна) быть пользователем нажата. Соответственно, пользователю нужно как-то сигнализировать, что кнопка нажимаема. Лучшим способом такой индикации является придание кнопке псевдообъема , т. е. визуальной высоты.

Элементы управления. Кнопки С другой стороны, этот объем плох тем, что при его использовании возникает рассогласование между обликами кнопок прямого и непрямого действия. Рекомендация Направление теней во всех элементах управления должно быть одинаковым: снизу справа

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

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

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

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

Элементы управления. Кнопки Таким образом, следует всемерно избегать создания кнопок с ничего ни говорящим текстом, поскольку такой текст не сообщает пользователям, что именно произойдет после нажатия кнопки.

Элементы управления. Кнопки Существующие интерфейсы заполнены кнопками ОК , Отмена (Cancel) и Применить (Apply) , что позволяет разработчикам ссылаться на стандарт. Эти кнопки плохи. ОК – не глагол Отмена - отглагольные существительные воспринимаются медленнее, чем соответствующие глаголы

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

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

Пример использования кнопок Кнопка Отмена после нажатия кнопки Применить тоже начинает врать пользователю: она не отменяет действие, oна просто закрывает окно.

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

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

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

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

Элементы управления. Check box и radio button , это кнопки отложенного действия, т. е. их нажатие ни при каких обстоятельствах не должно инициировать какое-либо немедленное действие. С их помощью пользователи вводят параметры, которые скажутся после, когда действие будет запущено иными элементами управления.

Элементы управления. Check box и radio button

Элементы управления. Check box и radio button Главное различие заключается в том, что группа check box дают возможность пользователям выбрать любую комбинацию параметров, radio button же позволяют выбрать только один параметр. Это сближает эти элементы со списками множественного и единственного выбора соответственно.

Элементы управления. Check box и radio button В группе radio button как минимум одна radio button должна быть проставлена по умолчанию Всякий раз, когда пользователю нужно предоставить выбор между несколькими параметрами, можно использовать либо check box , либо radio button check box – комбинирование операций И radio button – комбинирование операций ИЛИ

Элементы управления. Check box и radio button Если же параметров всего два. Предположим, что нужно дать пользователю выбор: показывать в документе линейки или не показывать.

Элементы управления. Check box и radio button К сожалению, этот метод работает не всегда. Поскольку в самом check box написано только то, что произойдет после его включения, но не описано, что произойдет, если его не включить.

Элементы управления. Check box и radio button Например , если нужно спросить пользователя, в какой кодировке посылать ему письма, не получится заменить две radio button Windows 1251 и KOI'8 единым check box KOI'8. Пользователь не обязан понимать, в какой кодировке система будет посылать ему письма по умолчанию.

Элементы управления. Check box и radio button И check box и radio button крайне желательно расставлять по вертикали, поскольку это значительно ускоряет поиск нужного элемента При необходимости заблокировать элемент, желательно визуально ослаблять не только квадрат или круг, но и подпись.

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

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

Элементы управления. Check box и radio button Как radio button , так и check box , бывают двух видов: описанные выше стандартные, предназначенные для размещения на панелях инструментов

Элементы управления. Списки Все часто используемые списки функционально являются вариантами check box и radio button. Скорость доступа к отдельным элементам и наглядность в них принесены в жертву компактности (они экономят экранное пространство) и расширяемости (динамические списки).

Элементы управления. Списки бывают: пролистываемыми, раскрывающимися. Причем пролистываемые могут обеспечивать как единственный (аналогично группе radio button ), так и множественный выбор ( check box ); раскрывающиеся же работают исключительно как radio button.

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

Элементы управления. Списки Поскольку нужно максимально ускорить работу пользователей, необходимо сортировать элементы.

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

Элементы управления. Списки Если можно определить наиболее популярные значения, их можно сразу расположить в начале списка, но при этом придется вставлять в список разделитель, а в систему – обработчик этого разделителя.

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

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

Элементы управления. Combo box Комбобоксами ( combo box ) , называются гибриды списка c полем ввода: пользователь может выбрать существующий элемент, либо ввести свой. Комбобоксы бывают двух видов: раскрывающиеся расширенные.

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

Элементы управления. Combo box Расширенный combo box сравнительно трудно (хотя и гораздо легче, чем в интернете) реализовать в ПО, поскольку в Windows нет такого элемента, так что собирать его приходится из двух.

Элементы управления. Поля ввода Основная часть требований к полям ввода касается размера. Размер по вертикали должен быть производным от размера вводимого текста – если текста много, нужно добавить несколько строк. Ширина поля должна соответствовать объему вводимого текста, поскольку гораздо удобнее вводить текст, который видишь.

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

Элементы управления. Поля ввода Пример полей ввода, больших объема вводимых в них информации

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

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

Элементы управления. Поля ввода Это решение, будучи нестандартным, плохо работает в ПО, но неплохо работает в интернете.

Элементы управления. Крутилки Крутилка (spinner, little arrow) - поле ввода, не такое универсальное, как обычное, поскольку не позволяет вводить текстовые данные, но зато обладающее двумя полезными возможностями.

Элементы управления. Крутилки Чтобы ввести значение в крутилку, пользователю не обязательно бросать мышь и переносить руку на клавиатуру (в отличие от обычного поля ввода). Отсутствие нужды в клавиатуре оказывается большим благом.

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

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

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

Элементы управления. Ползунки Примеры ползунков. Видно, что количество параметров в ползунке может быть весьма значительным

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

Элементы управления. Меню При упоминании термина меню применительно к интерфейсу, большинство людей немедленно представляют стандартные раскрывающиеся меню.

Элементы управления. Меню В действительности, понятие меню гораздо шире. Меню – это метод взаимодействие пользователя с системой, при котором пользователь выбирает из предложенных вариантов, а не предоставляет системе свою команду.

Элементы управления. Меню Соответственно, диалоговое окно с несколькими кнопками (и без единого поля ввода) также является меню.

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

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

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

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

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

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

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

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

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

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

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

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

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

Элементы управления. Меню Зачем элементы в меню нужно группировать. Меню, группы элементов в котором разделены, сканируется значительно быстрее обычного, поскольку в таком меню больше «точек привязки» .

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

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