Трудности в разработке интерфейсов для веб-приложений

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

«Слабо связанная» веб-архитектура

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

Загрузка каждой новой страницы или обновление страницы сопровождается приемлемыми задержками, связанными с необходимостью установить соединение, отправкой ответа на запрос, получением страницы и перезагрузкой страницы в браузере. Все это может показаться пользователям веб-приложений довольно скачкообразным и нестабильным. Например, пользователю, который просматривает данные, структурированные в виде иерархического дерева, возможно, придется ждать после каждого клика, пока узел отсчета будет дополнен или удален на перезагружаемой странице и можно будет увидеть изменения. Хотя эта проблема в большей степени связана с применением технологий создания сценариев, такими как JavaScript и богатые веб-приложения (Rich Internet Applications, см. главу 8), с ней часто сталкиваются пользователи при работе с большинством веб-приложений.

Ограниченный набор средств управления, или виджетов, для поддержки архитектуры приложения

В текущей версии стандарта HTML (версия 4.01) поддержка средств управления ограничивается текстовыми окнами, зависимыми клавишами, флажками, раскрывающимися списками и командными или управляющими кнопками. Эта версия не поддерживает сложные взаимодействия, типичные для клиентских приложений, таких как регуляторы прокрутки, календари, экспертные системы, закладки, панели инструментов, перетаскивание, плавающие панели, диалоговые окна, контекстно-зависимые меню и т. д., которые встречаются даже в базовых клиентских приложениях. Хотя подобные элементы управления можно разработать с помощью сценариев JavaScript и каскадных таблиц стилей (Cascading Style Sheets, CSS), недостаток изначальной поддержки привел к появлению разнообразных способов их реализации, обладающих неполным функционалом.

Несогласованные способы взаимодействия

Как базовая технологическая архитектура Интернета, так и ограниченный набор доступных элементов управления затрудняют создание таких способов взаимодействия пользователя с веб-приложением, которые были бы на уровне со способами взаимодействия в клиентских приложениях. Кроме этого поскольку большинство веб-приложений разработано так, чтобы с ними можно было работать через браузер, способы взаимодействия и оформление нельзя спроектировать так, чтобы они подходили ко всем операционным системам; например, закладки в интерфейсе Macintosh OS X Aqua внешне выглядят совершенно иначе, нежели закладки в интерфейсе Windows Vista (рис. 1.6).

(а)

(б)

Рис. 1.6. Закладки в интерфейсе Macintosh OS X Aqua (a) и в интерфейсе

Хотя сравнительно свободная среда проектирования Интернета предоставляет разработчикам простор для творчества, она также приводит к многообразию и неоднородности пользовательских интерфейсов и способов, что во многих случаях вызывает определенные трудности для пользователей. Сложности связаны с тем, что пользователи сталкиваются с различными вариантами интерфейсов и способов взаимодействия, каждый из которых обладает собственной терминологией для названия объектов, действий и изображений, объединенных в одном и том же приложении (см. Тидвелл, 2008). На рисунке 1.7 показан пример изменения названия закладки в Zoho Notes (веб-приложение для записей, похожее на Microsoft OneNote) и Zoho Sheet (веб-приложение для работы с таблицами, похожее на Microsoft Excel). Чтобы изменить название закладки в Zoho Notes, пользователи должны дважды щелкнуть по названию закладки, после чего появится диалоговое окно Rename (Переименовать). Чтобы изменить название закладки в Zoho Sheet, пользователи должны щелкнуть правой кнопкой мыши по закладке и выбрать пункт Rename (Переименовать), который откроет всплывающее окно, позволяющее пользователю сменить имя; при этом с помощью двойного щелчка мыши можно выделить текст и заменить его своим.

(a)

(б)

Рис. 1.7. Два различных способа взаимодействия пользователя с системой для смены названия закладки в Zoho Notes (a) и в Zoho Sheet (б)

Примечание

HTML5 будет поддерживать дополнительные элементы формы, которые на данный момент входят в спецификацию Web Forms 2.0, разработанную консорциумом World Wide Web Consortium (W3C) (www.w3.org/TR/web-forms-2/). Эта новая версия предоставит дополнительные элементы управления (например, элемент <datalist> для создания комбинированных окон и элемент <output> для того, чтобы показывать значения, производные от других элементов управления), а также в ней появятся расширения для существующих элементов управления (например, <inputtype="date"/>, <input type="email"/> и др.), что немного облегчит разработку вебприложений. Браузер Opera (версия 9 и выше) сегодня поддерживает Web Forms 2.0 и предоставляет хорошую базу для разработки интерактивных прототипов.

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

Однако применить эти принципы для разработки удобных в использовании веб-приложений не так уж и просто. Принципы разработки обладают ограниченной эффективностью, поскольку они часто предлагают высокоуровневые принципы (например, сделать видимым системный статус; использовать распознавание вместо повторного вызова; предотвращение ошибок) или предоставляют очень узкоспециализированные инструкции (например, выровнять заголовки таблиц относительно выравнивания данных в таблице). С другой стороны, руководства по стилю оформления фокусируются на создании имиджа и аспектах визуального проектирования и обычно предназначены для определенной платформы (например, Macintosh OS X Aqua и Windows Vista) или для приложений, разработанных определенной корпорацией (например, руководство по графическому пользовательскому интерфейсу браузера от компании Oracle: «Oracle Browser Look and Feel [BLAF] Guidelines», 2004), и вовсе необязательно предоставляют подробные инструкции для разработки удобных средств взаимодействия.

Руководства по разработке и стилю оформления обычно довольно объемные и сложные в использовании, поскольку для реализации одного способа взаимодействия обычно необходимо, чтобы разработчики пользовательского интерфейса ознакомились с несколькими пунктами документа. Например, руководство по проектированию пользовательских интерфейсов от компании Apple: «Human Interface Guidelines» – документ объемом почти в 400 страниц, и чтобы создать диалоговое окно с элементами управления, разработчику пришлось бы ознакомиться с несколькими пунктами части номер 3, называющейся: «Part III: The Aqua Interface» (рис. 1.8), которая содержит примерно 250 страниц, посвященных этому вопросу.

Рис. 1.8. Раздел «Часть III: Аквавзаимодействие» в «Руководстве по проектированию пользовательских интерфейсов» от компании Apple составляет примерно 250 из 400 страниц документа

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

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

Шаблоны проектирования

Упоминание о шаблонах впервые появилось применительно к архитектуре в работах Кристофера Александра и его коллег: «Язык шаблонов» (Alexander et al., 1977) и «Извечный путь строительства» (Alexander, 1979). Они объясняют суть шаблонов следующим образом:

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

Alexander et al., 1977, стр. x

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

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

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

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

• Возможность многократного применения и согласованные интерфейсы. Формирование библиотеки допускающих многократное применение элементов пользовательского интерфейса также может способствовать разработке согласованных интерфейсов приложений. Особенно это удобно для больших корпораций, в которых много рассредоточенных проектных групп, где решения для одной и той же проблемы могут применяться различными проектными группами, что приводит к несогласованности интерфейсов, разработанных одной и той же компанией. Благодаря каталогизации и обмену информацией о шаблонах проекта, группы могут повысить согласованность, предсказуемость, простоту и удобство использования своих проектов (Leacock et al., 2005) и могут сформировать корпоративную память об опыте проектирования (Borchers, 2001).

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

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

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

Документирование шаблонов

Важно, чтобы шаблоны были документально оформлены, чтобы из этой документации можно было понять, что они собой представляют, почему они работают и как они должны применяться для решения проблемы проектирования, чтобы получить вышеупомянутые преимущества. Однако интересен тот факт, что не существует какого-либо «шаблона» для документирования шаблонов (см. главу 13). Авторы шаблонов применяют различные подходы, начиная с тех, кто основывается на более описательном повествовании в духе Кристофера Александра (Borchers, 2001; Graham, 2003; van Duyne et al., 2002, 2006), заканчивая теми, кто следует более структурированному, хотя и минималистическому, подходу (Laasko, 2003); Тидвелл, 2008; www.welie.com) ^[4].

В этой книге представлен довольно краткий обзор шаблонов. В частности, в описание каждого шаблона входит:

• Название шаблона.