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

LIST ACTIONS (ОПЕРАЦИИ СО СПИСКОМ)

Проблема

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

Решение

Такие операции, как редактирование, удаление, копирование и другие, применяемые к отдельным элементам, следует четко ассоциировать с конкретными элементами и показать операции для каждого элемента. Для операций, требующих выбора двух или более элементов, выделите флажками каждый элемент в списке и соответствующие операции вне списка (рис. 7.50). Баксли (Baxley, 2003) выделяет операции со списком – такие как специальные операции и общие операции соответственно.

Рис. 7.50. Ресурс PriceGrabber отображает «сопоставление цен» – операцию, производимую для каждого элемента в списке товаров. Он также предлагает возможность установить флажки на каждый элемент так, чтобы пользователи могли отметить два или более элементов и выбрать команду Compare (Сравнить) для сравнения характеристик выбранных элементов

Зачем

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

Как

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

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

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

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

Выделение строки, соответствующей выбранному элементу

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

Рис. 7.52. Сервис Google Docs выделяет выбранные элементы, изменяя цвет фона соответствующих строк

Рассмотрите возможности использования иконок и списков для специальных операций

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

(а)

(б)

(в)

Рис. 7.53. Примеры списков со специальными операциями, представленными в виде ссылок (а), в виде кнопок на странице Your Account Dominios (Ваша учетная запись) (б) и в виде иконок (в)

(а)

(б)

Рис. 7.54. Веб-сайт Box.net предлагает меню действий для каждого элемента как в виде списка (а), так и в виде иконок (б)

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

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

Повторите общие операции для длинных списков

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

Предоставьте пользователям возможности выбирать (отменять) все товары в списках с мультивыбором

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

Рис. 7.56. Сервис Gmail позволяет пользователям выбрать все (или ни одного) электронные письма. Кроме того, пользователи имеют возможность выбора электронных писем на основе других характеристик: прочитанные, непрочитанные, отмеченные и неотмеченные

Проектируйте для предотвращения ошибок выбора

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

(а)

(б)

Рис. 7.57. Википедия позволяет пользователям выбрать две версии статьи для сравнения на странице истории. Для сравнения двух версий пользователи нажимают селективную кнопку в левой колонке для старой версии и селективную кнопку в правой колонке для новой версии, а затем – кнопку Compare selected versions (Сравнить выбранные версии). Материалы для выбора динамически обновляются в целях предотвращения выбора неправильных версий. По умолчанию для сравнения выбраны последние две версии (а). Как только пользователи добавляют в колонку другую версию, селективные кнопки в другом столбце будут автоматически обновляться, чтобы предложить только действительный выбор (б). Подобное проектирование предотвращает ситуации выбора для сравнения той же версии, а также выбор старой версии более позднего документа и новой версии старого документа

Отображайте сообщения о подтверждении и соглашении по мере необходимости

Операции со списком влияют на его элементы одним из следующих способов:

1. Они сразу же применяют операцию к выбранным элементам и показывают пользователям результат. Результат может быть отображен на той же странице или на отдельной странице. Например, такие операции, как «Обновить корзину», оставляют пользователей на той же странице, в то время как такие операции, как «Сравнить», направляют пользователей на отдельную страницу.

2. Они запрашивают у пользователей дополнительную информацию, показывая диалог или направляя их на отдельную страницу. Как только пользователи предоставят дополнительную информацию и удовлетворят запрос, их возвращают на страницу со списком, где они могут увидеть результаты выбранного действия. К действиям данной категории относятся: «Новый», «Редактировать», «Копировать», «Отправить другу» и т. д.

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

Рис. 7.58. При удалении напоминания Basecamp просит пользователя подтвердить, что он хочет его удаления. Сайт также сообщает, что удаленное напоминание невозможно будет восстановить

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

Кроме того, для операции «Удалить», которая встречается довольно часто и может раздражать пользователей, требуя подтверждения каждый раз, последней тенденцией является предвосхищение подтверждающего сообщения; вместо него пользователям предлагается операция «Отменить действие», чтобы они могли пересмотреть свои действия (Raskin, 2007). Такой подход становится распространенным в приложениях (например, в электронной почте), где при выборе операции «Удалить» от пользователя не требуется подтверждения, но предоставляется возможность отмены (рис. 7.59). Приложения могут позволить пользователям отменить только последнюю операцию, или же они могут позволить несколько уровней отмены, как в настольных приложениях.

Рис. 7.59. При совершении операции удаления Gmail немедленно перемещает элемент в корзину, но предлагает пользователям операцию Undo (Отменить действие) для восстановления удаленного элемента

Более того, приложения могут поддерживать функцию «Повторить действие».

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

Рис. 7.60. После сохранения изменений в проекте Tick показывает подтверждающее сообщение о том, что изменения были сохранены

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

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

В дополнение к операциям со списком, возможно, будет необходимо представить пользователям служебные операции, применяемые к списку в целом (см. шаблон LIST UTILITY FUNCTIONS далее).

LIST UTILITY FUNCTIONS (СЛУЖЕБНЫЕ ОПЕРАЦИИ СО СПИСКОМ)

Проблема

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

Решение

Подобно общим операциям со списком, служебные операции со списком (LIST UTILITY FUNCTIONS) представляют функции (например, отправление электронной почты, экспорт и т. д.) вне списка элементов (рис. 7.61).

Рис. 7.61. Сервис Google Analytics предлагает служебные операции Export (Экспортировать), Email (Отправить по электронной почте) и Add to Dashboard (Добавить в панель инструментов)

Зачем

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

Как

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

Последнее требует выбора элементов из списка, тогда как первое – нет.

К наиболее часто используемым форматам экспорта/загрузки относятся Adobe PDF, Excel, CSV (значения, разделенные запятыми), TSV (значения, разделенные символом табуляции) и XML (расширяемый язык разметки), поскольку они позволяют пользователям импортировать данные в предпочитаемую электронную таблицу или базу данных приложения и манипулировать ими или просматривать по мере необходимости.

Формат XML также полезен, когда данные могут быть использованы в качестве вложенных в другие приложения и/или преобразованы в другие форматы, такие как HTML (язык гипертекстовой разметки) и SVG (масштабируемая векторная графика) с целью презентации.

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

Еще одна часто используемая служебная операция – «Печать». Она может быть реализована в виде версии страницы «для печати», которую пользователи могут распечатать на стандартных принтерах. При этом удаляются баннеры, рекламные объявления, средства навигации и другая брендинговая информация, а также изменяются размеры в соответствии с форматом бумаги. Изменение размера страницы для печати особенно важно для макетов с фиксированной шириной (FIXED-WIDTH LAYOUTS) (см. главу 12), когда текст может быть обрезан справа при печати в книжной ориентации (вместо альбомной). При печати списков полезно спросить пользователей, хотят ли они включить подробную информацию в отчет о печати (рис. 7.62).

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

Отображение предварительного варианта страницы перед печатью

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

(а)

(б)

Рис. 7.63. При печати портфеля акций Morningstar пользователям сначала демонстрируют параметры печати и инструкции по использованию функций печати браузера (а), а затем показывают превью отчета (б)

Предоставьте пользователям возможности установки оповещений и/или расписаний для повторяющихся действий

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

Рис. 7.64. При отправлении отчета Google Analytics предлагает пользователям возможность запланировать данное действие. Поскольку это второстепенное действие, оно помещено на отдельной вкладке

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

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

Глава 8
Богатые веб-приложения

Введение

Как говорилось в главе 1, богатые веб-приложения (Rich Internet Applications или RIA) обеспечивают оперативность и интерактивность, сравнимые с настольными приложениями. С RIA взаимодействие представляется непрерывным и динамическим, так как пользователям не приходится ждать обновления основных данных и макета страницы, и они сразу могут видеть результаты своих действий.

Возможно, первым богатым взаимодействием в веб-приложениях был редактор полноценного форматирования (RICH-TEXT EDITOR), который позволял пользователям размещать отформатированный текст на веб-страницах, без знания лежащего в их основе HTML (языка гипертекстовой разметки). С появлением таких технологии, как Flash и Ajax (асинхронный JavaScript и XML), стало возможным более богатое взаимодействие, поскольку они позволяют общаться с веб-серверами без явного «представления» информации. Их первоначальное использование, таким образом, сводилось к замене взаимодействий, при которых пользователям приходилось ждать, пока результаты будут обработаны веб-серверами и возвращены им с обновлением страницы.

Сюда относятся проверка введенной пользователем информации и предоставление необходимой обратной связи с пользователями при заполнении форм (RICH FORM); предложение эффективных способов ввода данных (AUTOSUGGEST/AUTOCOMPLETION), предоставление пользователям возможности редактировать информацию в том же месте, где она просматривается (EDIT-IN-PLACE); панорамирование и масштабирование всего информационного пространства (OVERVIEW-PLUS-DETAIL); сортировка и фильтрация информации в режиме реального времени (DYNAMIC QUERYING), а также предварительный просмотр результатов изменений, внесенных пользователем (LIVE PREVIEW). Активация таких более богатых взаимодействий требует использования прямых методов манипуляции, широко применяемых для настольных приложений, к примеру, перетаскивание (DRAG-AND-DROP) и интерактивных средств управления, как, например, ползунки (SLIDERS).

Кроме того, для сообщения об изменениях, произведенных на странице, а также чтобы помочь пользователям сохранить визуальный контекст, проектировщики начали полагаться на визуальные эффекты (ANIMATIONS/TRANSITIONS). Популярные методы включают в себя демонстрацию ожидания и процесса выполнения при извлечении данных (DELAY/PROGRESS INDICATOR); кратковременное выделение измененной информации на странице (SPOTLIGHT/YELLOW-FADE); предоставление пользователям возможности просмотра большого набора элементов в ограниченном пространстве (CAROUSEL). Объединяя аспекты обновления данных в режиме реального времени с соответствующими визуальными эффектами, RIA, как правило, стремятся сделать взаимодействие с веб-приложением эффективным и приятным.

RICH-TEXT EDITOR (РЕДАКТОР ПОЛНОЦЕННОГО ФОРМАТИРОВАНИЯ)

Проблема

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

Решение

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

Рис. 8.1. Yahoo! Mail предлагает пользователям редактор полноценного форматирования для составления писем. Обратите внимание, что также предоставляется возможность добавления эмотиконов (например, улыбок)

Зачем

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

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

Кроме того, редакторы полноценного форматирования просты для пользователей, которые, скорее всего, сталкивались с подобными взаимодействиями в офисных приложениях, таких как Microsoft Office, Corel WordPerfect Suite, OpenOffice и т. д.

Как

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

Предоставьте пользователям альтернативные варианты ввода текста

Некоторые пользователи могут не захотеть использовать опции полноценного форматирования. По возможности предложите альтернативные варианты ввода текста, такие как простой текст или HTML. В приложениях электронной почты, например, продумайте проблему предоставления возможности ввода простого текста (рис. 8.2). С другой стороны, в блогах предложите возможность ввода непосредственно HTML (рис. 8.3). Для предотвращения возникновения сбоев в системе безопасности перед сохранением информации убедитесь, что введенные пользователем скрипты (например, JavaScript) в коде HTML удалены.

Рис. 8.2. Сервис Gmail предлагает пользователям возможность переключать текст электронного сообщения с обогащенного текста в простой текст

Рис. 8.3. Сервис Blogger предлагает пользователям вводить посты либо в виде обогащенного текста, либо в HTML-формате

Предоставьте только основные средства управления RTF-форматированием

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

Рис. 8.4. Gmail не предлагает пользователям средства управления для создания таблиц при написании электронного письма

Предоставьте пользователям возможности увеличения поля ввода текста

Когда текст, вводимый пользователями, объемный, просмотр его в доступной области может быть затруднен. В таких случаях следует предоставить пользователям возможность увеличивать поле ввода текста и/или просматривать сообщения перед публикацией. Например, сервисы Gmail (см. рис. 8.4) и Yahoo! Mail (см. рис. 8.1) предлагают пользователям опцию увеличения поля ввода текста. Для этого редактор запускается в отдельном окне, которое может быть увеличено по мере необходимости (рис. 8.5).

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

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

Редакторы полноценного форматирования (RICH-TEXT EDITOR), как и предпросмотр в режиме реального времени (LIVE PREVIEW), являются WYSIWYG-инструментами. В то время как редакторы полноценного форматирования (RICH-TEXT EDITOR) отражают результат изменений, предпросмотр в режиме реального времени (LIVE PREVIEW) позволяет пользователям просматривать результаты выбора конфигурации элемента или интерфейса.