Текст книги "Шаблоны проектирования веб-приложений"

HIGHLIGHT (ВЫДЕЛЕНИЕ)

Проблема

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

Решение

Следует выделить выбранные или измененные элементы, чтобы направить на них внимание пользователей (рис. 12.18). В случае необходимости укажите «значение» или степень изменения.

Рис. 12.18. Dell применяет несколько способов выделения на этой странице: рекомендованные опции выделяются с помощью зеленого фона, а элементы, измененные и с обновленной конфигурацией, выделены в разделе My Components (Мои компоненты) с помощью желтого фона

Зачем

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

• демонстрация элементов, находящихся в фокусе;

• демонстрация того, какие элементы выбраны;

• указание, что элемент имеет особое значение;

• указание, что элемент претерпевает изменения;

• побуждение пользователей произвести действия с элементом.

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

Как

Существует несколько способов выделения элементов страницы, с тем чтобы сделать их заметными: изменить цвет фона, изменить цвет текста, набрать текст полужирным шрифтом или сделать его более крупным, изменить границы, использовать анимацию (см. шаблоны ANIMATIONS/TRANSITIONS и SPOTLIGHT/YELLOW-FADE в главе 8), затемнить некоторые элементы или использовать иконки. В идеале примените комбинацию этих стилей (рис. 12.19 и 12.20).

Рис. 12.19. Backpack показывает текущую (т. е. выбранную) вкладку, используя сочетание цвета фона, границ, размера и цвета шрифта. На данной странице выделено сообщение: Get reminders on your email or cell phone (Получайте напоминания на вашу электронную почту или на мобильный телефон) путем изменения цвета фона и использования более жирного и крупного шрифта. Backpack отменяет выделение (т. е. не выделяет) ссылки вспомогательной навигации в нижнем колонтитуле, сделав их меньшего размера и серыми

Рис. 12.20. Данная демонстрационная панель инструментов BrightPoint Consulting (www.brightpointinc.com) иллюстрирует несколько различных способов выделения элементов страницы: изменяется цвет фона выбранной кампании, итоги кампании выделены желтым цветом, а различные размеры пузырей выделяют кампании с более высокими расходами на рекламу

Выделяйте выбранные элементы в списке

Четко укажите пункты, с которыми пользователи работают или будут совершать действия, выделив каждый выбранный элемент. Даже если для выбора используются флажки, выделение – это лучший визуальный способ отличить выбранные элементы от невыбранных (рис. 12.21).

Рис. 12.21. Gmail выделяет выбранные элементы, изменяя цвет их фона

Используйте кратковременное выделение для информирования пользователей об изменениях на странице

Мгновенное выделение элемента (обычно с помощью затухающего и вспыхивающего выделения) создает эффект анимации и привлекает внимание пользователей к измененной области на странице (см. шаблоны ANIMATIONS/TRANSITIONS и SPOTLIGHT/YELLOW-FADE в главе 8).

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

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

Рис. 12.22. Picnik выделяет регистрационную форму, затемняя фон страницы, требуя, чтобы пользователи либо продолжили создавать учетную запись, либо закрыли сайт, нажав на значок «закрыть» (х)

Соблюдайте единообразие методов выделения

Соблюдайте единообразие методов выделения похожих взаимодействий по всему приложению. Хотя в проекте могут применяться различные способы выделения для различного контекста, такого как выбранные элементы, сообщения (например, ошибки, отзывы, благодарности и оповещения), выбранные элементы навигации и т. д., они должны оставаться неизменными на протяжении всего приложения. На рисунке 12.21 Gmail использует желтый фон для выделения выбранных сообщений электронной почты, голубой фон – для выделения выбранного элемента навигации (в данном случае Inbox (Входящие)), а зеленый значок – для обозначения пользователей, которые в настоящее время находятся на сайте для общения (в данном случае Pawan Vora).

Связанные шаблоны проектирования

Анимация и переходы также являются удачными методами привлечения внимания пользователей к измененным элементам (см. шаблоны ANIMATIONS/TRANSITIONS и SPOTLIGHT/YELLOW-FADE в главе 8).

ICONS (ИКОНКИ)

Проблема

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

Решение

Используйте иконки для представления наиболее часто применяемых объектов и действий (рис. 12.23).

Рис. 12.23. Yahoo! Mail использует иконки для обозначения как объектов (например Inbox (Входящие), Drafts (Черновики), Spam (Спам) и т. д.), так и действий (например, Delete (Удалить), Reply (Ответить), Forward (Вперед) и т. д.

Зачем

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

• иконки для общих целей и задач легче узнаются и запоминаются;

• они занимают меньше места, чем соответствующие текстовые ссылки.

Иконки, как правило, более универсальны при распознавании, чем текст, поэтому при локализации веб-приложений иконки, используемые надлежащим образом, оказывают минимальное воздействие на макет. Однако если иконки используются с ярлыками, следует учитывать возможность увеличения объема текста при переводе ярлыка на другие языки (см. шаблон EXTENSIBLE DESIGN в главе 10).

Как

Самое главное – используйте знакомые иконки (Nolan, 1989), т. е. используйте конкретные (а не абстрактные) иконки и те, которые напоминают пользователям уже известные вещи. Применяйте иконки, ясно указывающие на объекты или действия, которые они представляют. В идеале пользователи должны легко узнавать иконки без сопроводительного текстового ярлыка.

Дополните иконки ярлыками

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

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

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

Исключите текст из иконок

Старайтесь не использовать текст в качестве части изображения иконки, так как это затрудняет ее локализацию (т. е. перевод на другие языки, см. главу 10). Из-за малого размера иконки текст также может быть труден для восприятия, а при использовании ярлыка пользователям может быть непонятно, на что обращать внимание при расшифровывании значения иконки – на ярлык или на текст. Кроме того, пользователям с дефектами зрения, возможно, будет трудно прочитать текст при увеличении (см. шаблон ACCESSIBLE IMAGES в главе 11).

Используйте модификаторы для указания или изменения статуса объекта

Одна и та же базовая иконка может быть использована для обозначения нескольких статусов объекта – например, новые электронные письма, прочитанные электронные письма и письма, на которые ответили (рис. 12.24). В приложениях, занимающихся мониторингом, аналогичные модификаторы, называемые «карты здоровья», часто используются для обозначения предупреждений или статуса объектов. Они расположены либо рядом, либо в правом или левом нижнем углу основной иконки (рис. 12.25). Иконка-модификатор может применяться поверх основной иконки, если основная иконка остается узнаваемой и не скрыта иконкой-модификатором (например, наложение «X» поверх иконки).

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

Рис. 12.25. В этом примере иконки-модификаторы расположены рядом с иконкой сети для обозначения «здоровья» сети: (слева направо) критические проблемы, серьезные проблемы, незначительные проблемы и нормальный статус

Используйте иконки-переключатели для обозначения альтернативного состояния

Иконки-переключатели используются для обозначения наличия или отсутствия атрибута или для определения состояния. Например, на рис. 12.26 показана иконка звезды, используемая как переключатель в Gmail для обозначения «избранного» или «нормального» состояния электронной почты. Это очень похоже на метод «установки флажков», предлагаемый системами электронной почты на базе настольных приложений, таких как Outlook.

Рис. 12.26. Gmail переключает иконку звезды для обозначения «избранного» или «нормального» состояния электронной почты

Иконки-переключатели также используются для обозначения выключенного и включенного состояния объектов. Некоторые распространенные способы применения иконок-переключателей – отображение развернутого и свернутого состояний в древовидных структурах, а также применение для навигации или для определенных элементов страницы (как в портлетах) (рис. 12.27).

(а)

(б)

Рис. 12.27. Yahoo! Mail (a) и Netvibes (б) используют иконки с изображением стрелок для обозначения развертывания и сворачивания разделов

Создавайте иконки, визуально отличающиеся друг от друга

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

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

Рис. 12.28. В иконках, используемых Mint, применяются различные фигуры, чтобы их отличие друг от друга было явным

Используйте один визуальный стиль для иконок

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

(а)

(б)

Рис. 12.29. В иконках, используемых Hulu (а) и Brightcove (б), применяется метод последовательного использования стиля

Совет

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

Используйте анимированные иконки только в случае крайней необходимости

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

Рис. 12.30. Анимированные иконки, как правило, применяются для информирования пользователей о том, что приложение обрабатывает информацию. В данном примере показаны 11 из 24 кадров, используемых для создания анимированной иконки (Источник: www.ajaxload.info.)

Связанные шаблоны проектирования

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

Глава 13
Библиотеки шаблонов

Введение

Как обсуждалось в главе 1, шаблоны проектирования могут предложить такие преимущества, как проверенные дизайнерские решения и руководство для их использования, улучшенный процесс дизайна, возможность многократного использования, непротиворечивые интерфейсы и т. д. Чтобы реализовать все эти преимущества, важно, чтобы шаблоны были документированы и доступны в формате, поддерживающем многократное использование. В настоящее время существует несколько документированных коллекций шаблонов, обычно называемых библиотеки шаблонов. Наиболее известные из них – коллекция Дженифер Тидвелл (Тидвелл, 2008), веб-сайт Мартина ван Вели о шаблонах проектирования (www.welie.com), книга «Проектирование сайтов» (Van Duyne et al., Design of Sites. 2006), а также библиотека шаблонов проектирования Yahoo! (developer.yahoo.com/ypatterns/).

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

Библиотека шаблонов

Проблема

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

Решение

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

Рис. 13.1. Библиотека шаблонов проектирования Yahoo! компании Developer Network имеет открытый исходный код. То есть интерактивные дизайнеры получают комплект заготовок, облегчающих создание каркасов и схем большинства шаблонов в виде фрагментов кода в библиотеке YUI, получая, таким образом, помощь в использовании этих шаблонов, не вдаваясь в подробности их разработки

Зачем

Для больших и/или распределенных групп дизайнеров в пределах объединения распространено находить отличающиеся дизайны пользовательского интерфейса и различные интерактивные подходы для одной и той же проблемы дизайна на разных линиях продукта; для них также свойственны различные визуальные интерпретации. Результатом этого являются противоречивые интерфейсы, которые могут снизить работоспособность приложения и сделать его разобщенным (Malone et al., 2005). Способствуя многократному использованию дизайнерских решений, библиотеки шаблонов предлагают эффективный метод документации и совместного использования решений к повторяющимся проблемам дизайна и помогают достигнуть желаемой согласованности. Библиотеки шаблонов могут также сделать процесс проектирования более эффективным и увеличить продуктивность дизайнеров сокращением количества повторных исследований и минимизацией «умных указателей на массив» (Malone et al., 2005).

Несмотря на то что шаблоны являются дизайнерскими решениями независимо от определенных проблем реализации, группы по разработке и дизайну могут в дальнейшем уменьшить время, расходуемое на разработку пользовательского интерфейса, создавая программные компоненты, поддерживающие шаблоны проектирования. После того как шаблон проектирования выбран, группы по разработке могут многократно использовать и адаптировать программные компоненты и фрагменты кода для того, чтобы реализовать выбранные шаблоны (Sinnig et al., 2004). Возможность многократного использования и другие полезные действия также достигаются с тех пор, как программные компоненты стали постоянно включаться в связанные шаблоны проектирования. Например, программный компонент шаблона TABULAR LIST может включать в себя шаблоны SORTING и PAGINATION и упростить тем самым задачу разработчиков по реализации всех трех шаблонов.

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

Как

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

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

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

Решение. Краткий вывод и изображение примера, которое показывает успешное дизайнерское решение. Изображение может быть эскизом или фактическим скриншотом; последний вариант предпочтителен, поскольку показывает дизайнерское решение на практике и помогает продемонстрировать достоинства шаблона.

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

Лучшие варианты применения дизайнерских решений на практике (ответ на вопрос «Как?»). В большинстве случаев применение дизайнерского решения требует рассмотрения дополнительных вопросов. Например, при использовании шаблона DELAY/PROGRESS INDICATOR (см. главу 8) дизайнерам может быть важно узнать, как показать затраченное или сэкономленное время и в каком контексте. Определение лучших вариантов применения является самым важным для обеспечения корректного использования выбранного шаблона.

Связанные шаблоны проектирования. Большинство шаблонов не является самостоятельными. Они связаны с другими шаблонами, в том числе потому, что при их применении требуется слияние с другими шаблонами или потому, что они содержат в себе другие шаблоны. Например, при создании форм дизайнеры должны рассмотреть такие шаблоны, как SHORT FORMS, ACTION BUTTONS, REQUIRED FIELD INDICATORS, ERROR MESSAGES, а также ACCESSIBLE FORMS и т. д. (см. главу 2). Определение таких связей может помочь дизайнерам обнаружить взаимосвязь между шаблонами и обеспечить непротиворечивый и пригодный для использования дизайн. Раздел связанных шаблонов проектирования иногда также ссылается на похожие шаблоны в других коллекциях.

Другие разделы, которые могут быть полезными, включают:

Комментарии. Чтобы стимулировать совместное использование и обсуждение шаблона среди дизайнеров и разработчиков, страница с шаблоном может включать обсуждение или секцию комментариев (рис. 13.2). Это поможет найти «коллективную мудрость» дизайнеров и может помочь улучшить шаблоны или, по крайней мере, различные сценарии документа, в котором шаблон был применен успешно или требовал изменений. Секция комментариев распространена в общедоступных библиотеках, таких как Welie.com, библиотека шаблонов UC Berkeley и библиотека шаблонов с открытым исходным кодом Fluid.

Рис. 13.2. Сайт Welie.com позволяет пользователям оставлять комментарии, чтобы обсудить шаблон, и подписаться на рассылку RSS, если они хотят, чтобы их информировали об изменениях шаблона

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

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

Рис. 13.3. В библиотеке шаблонов «Sakai» показаны последние изменения шаблонов в разделе «Recent Changes»

Как для больших, так и для малых дизайнерских групп разработка библиотек шаблонов может быть грандиозной задачей[28]28
  Интересно узнать, что многие из популярных архивов библиотек шаблонов в Интернете, например, Welie.com, ui-patterns.com, uipatternfactory.com и designinginterfaces.com, являются работами одного-единственного человека.


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

Обязательно включите пригодные для (многократного) использования компоненты дизайна

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

Рис. 13.4. Библиотека шаблонов проектирования Yahoo! предлагает пользователям комплект заготовок в различных форматах (в том числе OmniGraffle, Microsoft Visio, PDF и др.), чтобы помочь дизайнерам в каркасном проектировании инструментами, которые они предпочитают

Аналогично, чтобы упростить многократное использование разработчиками, включите фрагменты кода в HTML, каскадные таблицы стилей, JavaScript, PHP, ASP, JSP и все, что необходимо группе разработчиков для упрощения работы, чтобы им оставалось только копировать и вставлять фрагменты в код при проектировании приложения (рис. 13.5).

Рис. 13.5. Библиотека UI Yahoo! содержит несколько компонентов, помогающих реализовать ее шаблоны (они, так или иначе, не связаны с шаблонами)

Выбирая программные компоненты для многократного использования, важно тестировать их на совместимость между браузерами, производительность и взаимодействие с другими компонентами, прежде чем включить их в библиотеку шаблонов. Необходимо также подчеркнуть, что компоненты могут не являться «съемными» решениями и могут требовать некоторой тонкой настройки и обновлений. Как в практике разработки и внесении технологических изменений, многократно осматривайте и заново тестируйте компоненты, чтобы гарантировать их дальнейшую полноценность.

Добавляйте как можно больше примеров

По определению, шаблоны доказывают свои достоинства по мере их использования (Winn and Calder, 2002). Без четкого доказательства успешного применения шаблоны, возможно, имели бы ограниченную «прочность». Шаблоны Александра (Alexander et al., 1977) и несколько коллекций шаблонов проектирования пользовательского интерфейса (Bochers, 2001; Graham, 2003) постоянно показывают уровень «прочности» шаблона при помощи системы «звездной» оценки. Грэм (Graham, 2003) утверждает:

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

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

Рис. 13.6. Сайт «Фабрика шаблонов UI» (www.uipatternfactory.com) показывает галерею скриншотов для каждого шаблона. Пользователи могут также увидеть дополнительные скриншоты на сопроводительной общедоступной странице группы Flickr

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

Рис. 13.7. В библиотеке шаблонов Yahoo! присутствуют примеры использования шаблонов, которые можно найти на панели меню Yahoo! (в разделе «As Used on Yahoo!»), а также примеры кода (в разделе «YUI Code Examples»)

Продемонстрируйте более богатую интерактивность

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

Рис. 13.8. В библиотеке шаблонов Yahoo! используется анимация, чтобы проиллюстрировать более высокую интерактивность

Включите аспекты расширенного доступа и интернационализации

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

Несмотря на то что некоторые библиотеки шаблонов включают аспекты расширенного доступа (например, библиотека шаблонов Yahoo! шаблоны UI и библиотека шаблонов проектирования с открытым исходным кодом Fluid; рис. 13.9), в настоящие время ни одна из них не включает аспектов интернационализации. Однако их включение важно для компаний, планирующих локализовать свои приложения (см. главу 10 для уточнения деталей интернационализации).

Рис. 13.9. В библиотеке шаблонов проектирования с открытым исходным кодом Fluid перечисляются соображения расширенного доступа для ее шаблонов; в данном случае – для шаблона LIST BUILDER (см. www.uidesignpatterns.org/content/list-builder)

Проанализируйте использование антишаблонов

Антишаблоны – это неподходящие в целом решения, которые подходят только для решения данной проблемы, их еще называют ловушками (Гамма и др., 2007). Несмотря на то что они не были упомянуты Кристофером Александром (Alexander et al., 1977), предложившим термин «шаблон», их включение в библиотеки шаблонов может быть полезным, если использование нестандартных решений является частой практикой. Хорошим примером является антишаблон HOVER&COVER, упомянутый Скоттом (Scott, 2008); который описал его как наведение указателя непосредственно на важную контекстную информацию, окружающую объект, или достижение «перекрытия» иным образом (рис. 13.10). В список антишаблонов, изучаемых Скоттом, входят: MEANDERING WAY, TINY TARGETS, POGO STICK NAVIGATION, LINKITUS, ANIMATION GONE WILD, WINDOWS APLENTY, MISSED MOMENTS и т. д.

Рис. 13.10. Описание антишаблона HOVER&COVER. (Источник: Scott, 2008.)

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