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

DRAG-AND-DROP (ПЕРЕТАСКИВАНИЕ)

Проблема

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

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

Решение

Позвольте пользователям напрямую управлять элементами данных и/или компонентами страницы, используя стиль взаимодействия «перетаскивание» (рис. 8.24).

Рис. 8.24. Сервис My MSN позволяет пользователям перетащить столбцы, чтобы настроить их порядок

Зачем

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

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

Как

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

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

• перегруппировка элементов в списке (рис. 8.25);

Рис. 8.25. Ресурс Ta-Da Lists позволяет пользователям изменять порядок элементов в списке с помощью механизма перетаскивания

• перемещение накладывающихся всплывающих окон с одного места на другое (рис. 8.26);

Рис. 8.26. Ресурс Live Maps корпорации Microsoft позволяет пользователям перемещать всплывающее окно блокнота путем перетаскивания. Это также увеличивает прозрачность блокнота, позволяя пользователям видеть карту, и указывает на режим «перетаскивания»

• составление списков, такое как добавление товара в корзину (рис. 8.27);

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

• обозначение действия (рис. 8.28);

Рис. 8.28. Сервис iGoogle позволяет пользователям поместить «портлет» во вкладку, что означает перемещение его в данную вкладку. На этом примере показано, что портлет Stock Market (Рынок ценных бумаг) перетаскивают из вкладки Home (Главная) во вкладку Finance (Финансы)

• изменение размера объекта (рис. 8.29).

Рис. 8.29. Веб-сайт Picnik позволяет пользователям изменять размер изображения с помощью перетаскивания

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

Предложение необходимых эффордансов для областей перетаскивания

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

• отобразив четкие метки для перетаскивания;

• изменив указатель мыши на значок «переместить» () при наведении на элементы, которые можно перетащить, установив CSS-свойства cursor на move. При использовании перетаскивания для изменения размера используйте значок «изменение размера» (), установив CSS-свойства cursor на nw-resize, sw-resize, w-resize и т. д. по мере необходимости;

• выделив зоны размещения объекта при его перетаскивании;

• не выделив зоны, не подходящие для размещения объекта, которые должны отмечаться значком «запрещенные» (Q) при установке CSS-свойства cursor на not-allowed.

Примечание

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

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

Шаблон DRAG-AND-DROP также используется для осуществления выбора с помощью ползунков (SLIDER) в динамических запросах (DYNAMIC QUERYING) и перемещении или корректировке размеров в шаблоне OVERVIEWPLUS-DETAIL.

SLIDER (ПОЛЗУНОК)

Проблема

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

Решение

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

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

Рис. 8.31. Ресурс Kayak использует два маркера для каждого ползунка раздела Flight Times (Расписание полетов), чтобы пользователи могли установить диапазон времени Leave (Отправления) и Return (Возвращения)

Зачем

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

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

Как

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

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

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

Рис. 8.33. Сервис CheapTickets использует прерывистый ползунок, позволяя пользователям устанавливать критерии сортировки для рейтинга звезд отелей и свои оценки

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

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

Информируйте пользователей о выбранном значении(-ях)

При использовании ползунков как с непрерывными, так и с прерывистыми значениями пользователи всегда должны знать выбранное значение(-я). Кроме того, покажите пользователям все значения в случае, когда выбранные значения затрагивают более одного (например, определение цвета с помощью RGB, CMYK [голубой, пурпурный, желтый, черный] или шестнадцатеричных значений) (см. рис. 8.32).

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

Шаблон DRAG-AND-DROP важен для работы средств управления ползунком, так как пользователи перетаскивают ползунок для указания своего выбора. Управление ползунком также обычно используется в динамических запросах (DYNAMIC QUERYING) и может быть применено в обогащенной форме (RICH FORMS) для указания одного или нескольких значений в пределах диапазона.

ANIMATIONS/TRANSITIONS (АНИМАЦИИ/ПЕРЕХОДЫ)

Проблема

Важное эвристическое правило практичности заключается в том, чтобы «уведомлять пользователей» об изменениях в интерфейсе (Nielsen and Molich, 1990). При использовании RIA часто меняется только часть интерфейса, и вполне вероятно, что пользователи не будут знать об этих изменениях, поскольку они сосредоточены на других областях интерфейса.

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

Решение

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

Рис. 8.34. При добавлении товара в корзину для покупок Gap смещает корзину вниз на той же странице, чтобы указать, что выбранный товар был добавлен в нее. Это устраняет необходимость перехода пользователей на страницу корзины и создания кнопки Continue Shopping (Продолжить покупки), метод взаимодействия, обычно применяемый многими сайтами, занимающимися продажами через Интернет и не использующими RIA

Зачем

Так как наше периферийное зрение приспособлено для обнаружения движения (Faraday and Sutcliffe 1997; Peterson and Dugas, 1972), использование анимации для направления внимания пользователей на изменения на странице является практичным и эффективным методом, особенно для RIA, где страница не обновляется при внесении изменений в ее контент. Анимации и переходы также обладают эстетической ценностью, которую нельзя игнорировать. Они делают веб-приложения интерактивными и динамическими и содействуют формированию «клевого» имиджа RIA, чего нельзя сказать о традиционных веб-приложениях, которые имеют ограниченный набор относительно статичных изображений и макетов в визуальных проектах.

Как

Для RIA используйте анимацию, изменяющую внешний вид элементов страницы, но не их положение (рис. 8.35, см. рис. 8.46 далее в этой главе) или перемещающую их с одного места на другое, но не обязательно меняющую их внешний вид (см. рис. 8.34).

(а)

(б)

Рис. 8.35. Когда пользователи наводят указатель мыши на логотип Amazon (а), его внешний вид меняется (б), и он становится похожим на кнопку. Это самый основной тип анимации

Пользователям могут показать очень простую анимацию, чтобы продемонстрировать, что система занята загрузкой информации или сохранением данных (рис. 8.36, см. шаблон ICONS в главе 12).

Рис. 8.36. Широко используемая в RIA анимированная иконка «Пожалуйста, подождите»

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

После успешной обработки запросов пользователей фон обновленного элемента может поблекнуть и лишь едва различимо обозначать изменения на странице (см. шаблон SPOTLIGHT/YELLOW-FADE далее в этой главе).

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

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

(а)

(б)

Рис. 8.37. Когда пользователь щелкает по ссылке Invite a new member (Пригласить нового участника) (а), Campfire использует переход со смещением вниз, чтобы показать редактор Invite new members (Пригласить новых участников)(б)

Эффекты перехода со смещением вниз и вверх являются наиболее распространенными для действий по раскрыванию и свертыванию, соответственно, в древовидной структуре или при использовании средств управления «аккордеон» для меню.

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

Рис. 8.38. Когда пользователи нажимают на кнопки со стрелками «Далее» или «Назад», Hulu применяет переходы со смещением влево и вправо соответственно для отображения следующей или предыдущей детали эпизода

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

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

Исключите неуместные анимации

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

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

Еще один способ держать пользователей в курсе изменений интерфейса – использование шаблонов DELAY/PROGRESS INDICATORS и SPOTLIGHT/YELLOW-FADE.

DELAY/PROGRESS INDICATOR (ИНДИКАТОР ОЖИДАНИЯ/ВЫПОЛНЕНИЯ)

Проблема

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

Решение

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

Рис. 8.39. Индикатор выполнения при поиске бриллиантов на ресурсе Amazon (небольшая задержка)

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

Зачем

Отображение индикаторов ожидания/выполнения служит двум целям.

1. Они сообщают пользователям, что приложение получило их запрос и работает над ним.

2. Они держат пользователей в курсе того, на какой стадии обработки запроса находится приложение.

Пользователи могут использовать эту информацию, чтобы прогнозировать количество времени, которое они должны подождать и могут решить отменить операцию. Как и шаблон ANIMATIONS/TRANSITIONS, индикаторы выполнения обеспечивают необходимую обратную связь с пользователями и информируют их о состоянии системы (Galitz, 2002; Nielsen and Molich, 1990).

Как

В зависимости от длительности задержки, для указания процесса выполнения могут быть использованы различные подходы. Для коротких задержек (менее 10–15 секунд), индикаторы выполнения могут быть представлены в форме:

• текстовых сообщений, таких как «Загрузка» или «Подождите, пожалуйста…» (рис. 8.41).

Рис. 8.41. Ресурс Kayak использует сообщение «Обновление результатов» («Updating results») для небольших задержек

• анимированных иконок (например, песочные часы) (см. рис. 8.36).

Для длительных задержек (более чем на 10–15 секунд) используйте индикатор, отображающий степень выполнения и показывающий состояние и/или оценку оставшегося времени. Если выполнение действия займет много времени, предоставьте пользователям возможность отменить операцию в любой момент (рис. 8.42).

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

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

Рис. 8.43. Ресурс Picnik использует интересные сообщения индикатора прогресса (например, «Взбиваю облака» («Fluffing clouds») или «Разбрызгиваю росу» («Sprinkling dew»)) во время загрузки приложения

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

Обработка задержек, как правило, коротких, довольно часто встречается при осуществлении динамических запросов (DYNAMIC QUERYING) и редактировании-на-месте (EDIT-IN-PLACE). Если пользователей необходимо проинформировать о любых изменениях на странице после завершения обработки, шаблон SPOTLIGHT/YELLOW-FADE может оказаться полезным.

SPOTLIGHT/YELLOW-FADE (ПРОЖЕКТОР/ЖЕЛТОЕ ВЫЦВЕТАНИЕ)

Проблема

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

Решение

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

(а)

(б)

(в)

Рис. 8.44. Когда пользователи возвращаются к странице с недавними изменениями, измененная область выделена (а). Через несколько секунд она постепенно затухает (б) и возвращается к нормальному цвету фона (в). Таким образом, изменения доведены до сведения пользователей без загромождения интерфейса. (Источник: Линдерман, 2007.)

Зачем

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

Как

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

(а)

(б)

(в)

Рис. 8.45. Ресурс Picnik использует технику прожектора при применении метода Exposure ⇒ Autofix (Экспозиция ⇒ Автоматическая настройка). Использование данного метода устраняет необходимость выделения определенной области интерфейса для подобных сообщений. Кроме того, поскольку сообщение исчезает в течение нескольких секунд, пользователям не придется отключать его, и они могут продолжить работать с изображением

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

Использование шаблона SPOTLIGHT/YELLOW-FADE является довольно распространенным при редактировании-на-месте (EDIT-IN-PLACE) и в порталах (PORTALS) с портлетами, которые обеспечивают обновления данных в режиме реального времени (см. главу 4).