Образец интерфейса "Этикетка с описанием"

David Anderson

Назначение

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

Зачем использовать

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

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

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

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

Когда использовать

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

Следствия

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

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

Реализация

Рассмотрим, как можно использовать "этикетки", и какие дополнительные возможности мы при этом получаем. Все приведенные здесь примеры сделаны с использованием Java JFC (Swing), но то же самое может с успехом работать и в MS Windows, Macintosh или Motif.

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

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

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

Создание, изменение и удаление

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

1.Объект-Действие

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

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

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

Теперь мы можем выбирать этот компонент щелчком мыши. Когда фокус переходит к объекту, кнопки "Edit" и "Delete" становятся доступными. Нажатие на кнопку "Edit" откроет форму ввода. Нажатие на "Delete" удалит этикетку (с подтверждением удаления).

2. Webtop - непосредственный ввод

В 1997 году фирма Sun представила новый стиль пользовательского интерфейса под названием Webtop. Он отходит от привычной модели "Объект-Действие" к более непосредственному подходу, позволяющему избежать необходимости сначала выбрать объект, а потом действие над ним. В стиле Webtop нужно выбрать только объект, а необходимое действие подразумевается само собой. Этот непосредственный способ ввода очень интересен, так что давайте взглянем на него.

Как же выглядит действие Создать?

Действительно - пустая этикетка. Она очень хорошо подходит к метафоре адресной этикетки. Если вы хотите подписать конверт, вы берете пустую этикетку.  Так что создайте на экране чистую панель. Щелчок по ней вызовет окно, как и в предыдущем методе. 

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

Следующая проблема - как реализовать действие "Удалить". Можно было бы решить эту задачу с помощью всплывающего меню.

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

3. Webtop модифицированный  - непосредственные действия

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

Специальные атрибуты

В нашем оригинальном окне для ввода адреса можно было указать, является ли адрес юридическим (registered) или почтовым (mailing). Могут быть и другие типы адресов - для расчетов, для доставки. Такие специальные атрибуты адреса можно указывать с помощью названия закладки.

Набор адресов

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

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

Теперь представьте набор этикеток.

Как видите, две этикетки легко помещаются на экране. А 6 штук легко поместятся на экране при разрешении 800х600.

Пример использования

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

Использование Адресной Этикетки позволило нам разместить больше информации в этом окне, которое разработано с расчетом занимать нижнюю половину окна при разрешении 800х600. Верхняя часть экрана при этом остается свободной, например для показа результатов поиска. Без Адресной Этикетки нам пришлось бы сделать панель больше либо удалить какие-нибудь данные.

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

Еще пример. Представьте себе контактную информацию о клиенте.

Здесь мы ввели полосы прокрутки. Для информации на рисунке они не нужны, но могут потребоваться, если данных будет много, и все они на панель не поместятся.

Возможные применения этого образца

- Контактная информация
- Адрес
- Описание объекта недвижимости
- Заметки

Образец вместо Метафоры

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

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

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

Образец - больше чем метафора

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

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

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

Вернуться к списку статей