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

RICH FORM (ПОЛНОЦЕННАЯ ФОРМА)

Проблема

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

Решение

В дополнение к шаблонам, рассмотренным в главе 2, таким, как FORGIVING FORMAT, INPUT HINTS/PROMPTS, SMART DEFAULTS и REQUIRED FIELD INDICATORS, используйте интерактивные формы проверки, которые подтверждают информацию по мере ее введения пользователем, предотвращая возникновение ошибок, предлагая пользователям только верные альтернативы. Кроме того, по возможности, покажите зависимые или второстепенные альтернативы, близкие к варианту-родителю (рис. 8.6).

(а)

(б)

(в)

Рис. 8.6. Yahoo! Farechase использует комбинацию технологий RIA, чтобы сделать эту форму «обогащенной»: шаблон AUTOSUGGEST для полей From (От кого) и To (Кому) (а), отображение только верных дат отправления и прибытия и отключение недействительных дат (б), и сокрытие даты возвращения, если пользователи выбирают полет в один конец (в)

Зачем

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

Как

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

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

Проектируйте формы для минимизации числа ошибок

Обогащенные формы могут не только производить валидацию информации, вводимой пользователем при заполнении формы, они прежде всего способствуют сокращению числа ошибок. Например, как показано на рис. 8.6, шаблон AUTOSUGGEST/AUTOCOMPLETION может предложить пользователям верные варианты при вводе данных; эффективные средства управления календарем могут обеспечить верный выбор дат, а включение или отключение соответствующих средств управления при каждом выборе пользователя может свести к минимуму неправильный ввод данных. Другие распространенные элементы проектирования включают в себя «развернутые» подходы, обеспечивающие показ пользователям только верных зависимых опций (рис. 8.8), а также измерители надежности пароля, гарантирующие, что пользователи выберут безопасные пароли (рис. 8.9).

Рис. 8.8. После того как пользователи выберут марку, выпадающее меню All Models (Все модели) в Blue Book от Kelly обновляется и предлагает им только подходящие варианты

Рис. 8.9. После ввода пользователями пароля измеритель надежности пароля оценивает уровень его надежности, позволяя пользователям выбрать более сложные пароли

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

Как видно из примеров, богатство форм достигается за счет шаблонов, таких как AUTOSUGGEST/AUTOCOMPLETION, когда они реагируют на ввод информации пользователями, показывая только верные варианты выбора и предотвращая возникновение ошибок. Шаблоны SLIDER (помогающий пользователям вводить диапазоны данных) и DELAY/PROGRESS INDICATORS (отображающие прогресс во время ожидания пользователем) также содержат большое количество обогащенных форм (RICH FORMS).

AUTOSUGGEST/AUTOCOMPLETION (АВТОЗАПОЛНЕНИЕ)

Проблема

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

Решение

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

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

Зачем

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

Как

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

Примечание

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

Например, покажите и адрес, и имя при вводе адреса электронной почты (рис. 8.11) или предоставьте код и города, и аэропорта (рис. 8.12) при вводе названия города в приложении, помогающем забронировать авиабилеты. Другой пример – указание общего числа совпадений для данного поискового запроса, как это сделано в Google Suggest (см. рис. 8.10).

Рис. 8.11. При вводе пользователем адреса получателя Yahoo! Mail показывает как совпадающие имена, так и адреса электронной почты

Рис. 8.12. Ресурс Kayak показывает коды как городов, так и аэропортов, когда пользователи указывают места отправления и прибытия

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

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

Выделите первое совпадение в предлагаемом списке

Выделите самое первое совпадение в предлагаемом списке (см. рис. 8.11 и 8.12), чтобы пользователи могли выбрать его, нажав клавишу Tab или Enter. Приложение должно затем вписать выделенный элемент в текстовое поле. Однако важно, чтобы пользователи указали свое намерение, нажав клавишу Tab или Enter, поскольку приложение не сможет сделать логический вывод из намерений пользователей и набрать остальной текст вместо них.

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

Шаблон AUTOSUGGEST/AUTOCOMPLETION обычно используется в обогащенных формах (RICH FORMS) и динамических запросах (DYNAMIC QUERYING), чтобы ограничить вводимую пользователями информацию правильными вариантами выбора и таким образом предотвратить возникновение ошибок.

EDIT-IN-PLACE (РЕДАКТИРОВАНИЕ НА МЕСТЕ)

Проблема

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

Решение

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

(а)

(б)

Рис. 8.13. Когда пользователи наводят указатель мыши на доступный для редактирования элемент списка запланированных дел, Basecamp отображает опции Edit (Редактировать), Delete (Удалить) и Move (Переместить) (а). Когда пользователи нажимают кнопку Edit (Редактировать), им предоставляют редактор элементов списка запланированных дел с опциями Save this item (Сохранить этот элемент) и Cancel (Отмена) (б)

Зачем

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

Как

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

(а)

(б)

Рис. 8.14. В Basecamp пользователи могут редактировать элемент отслеживания времени в строке. Когда пользователь нажимает кнопку Edit (Редактировать) рядом с элементом списка (а), элемент становится доступен для редактирования и опции Edit (Редактировать) и Delete (Удалить) меняются на Save (Сохранить) и Cancel (Отмена) (б)

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

Выделите текст для элементов только с одним редактируемым свойством

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

Рис. 8.15. Ресурс Flickr позволяет пользователям редактировать название фото, щелкнув по нему мышью. Когда пользователи щелкают по названию, текст названия выделяется по умолчанию, что позволяет пользователям изменить его

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

При сохранении редактируемой информации часто бывает полезно отображать индикатор ожидания/выполнения (DELAY/PROGRESS INDICATOR) для подтверждения прогресса процедуры сохранения. При использовании редактирования-на-месте (EDIT-IN-PLACE) для нового элемента в качестве указания на дополнения в элементе может использоваться метод SPOTLIGHT/YELLOW-FADE.

OVERVIEW-PLUS-DETAIL (ОБЗОР И ДЕТАЛИ)

Проблема

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

Решение

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

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

Зачем

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

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

Данный шаблон базируется на одном из основных принципов визуализации информации: фокус плюс контекст.

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

Card et al., 1999

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

Как

Сделайте панель обзора доступной для пользователей в любое время. Она может быть расположена в виде вставки в панели подробностей (см. рис. 8.16) или находиться рядом с ней (рис. 8.17).

Рис. 8.17. Google Finance располагает панели обзора и деталей одну над другой и позволяет пользователям видеть подробные тенденции изменения цен на акции, разрешая им регулировать размер демонстрационного окна в панели обзора

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

Например, Google Finance позволяет пользователям менять размер демонстрационного окна так, чтобы они могли увеличить или уменьшить диапазон дат в диаграмме тенденций изменения цен на акции (см. рис. 8.17).

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

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

DYNAMIC QUERYING (ДИНАМИЧЕСКИЕ ЗАПРОСЫ)

Проблема

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

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

Решение

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

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

Зачем

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

Как

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

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

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

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

Несмотря на то что динамические запросы (DYNAMIC QUERYING) – это эффективный способ показать пользователям отфильтрованный набор данных практически в реальном времени, задержки обработки неизбежны. Поэтому данный шаблон обычно сопровождается шаблоном DELAY/PROCESS INDICATORS.

LIVE PREVIEW (ПРЕДПРОСМОТР В РЕАЛЬНОМ ВРЕМЕНИ)

Проблема

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

Решение

Предложите пользователям возможность предварительного просмотра элемента с их выбором сразу, без необходимости «представления» выбора и ожидания обновления страницы (рис. 8.20).

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

Зачем

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

Это похоже на шаблон RICH-TEXT EDITOR, где пользователи изменяют цвет текста и форматируют его, а затем сразу же видят результаты в стиле WYSIWYG.

Как

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

Рассмотрите возможности демонстрации элемента, модифицированного клиентом, с разных ракурсов

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

Например, Nike позволяет пользователям просматривать модифицированную в соответствии с их требованиями обувь с различных углов, к примеру, сверху, сбоку, спереди и т. д. (рис. 8.21). А BMW позволяет пользователям переключаться между видом спереди и сзади для модифицирования экстерьера «под себя» (рис. 8.20), а также между видом места водителя и видом приборной панели для изменения интерьера (рис. 8.22).

Рис. 8.21. NIKEiD предоставляет пользователям обзор модифицированного в соответствии с их пожеланиями товара с различных углов

Рис. 8.22. BMW предлагает пользователям вид кресла водителя и приборной панели при изменении интерьера автомобиля

Ресурс Lands End, с другой стороны, предлагает не только вид спереди и вид сзади, но и вид модели с модифицированным элементом (рис. 8.23).

Рис. 8.23. Веб-сайт Lands End демонстрирует модель в одежде, измененной в соответствии с требованием заказчика

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

Как уже упоминалось, шаблон LIVE PREVIEW аналогичен шаблону RICH-TEXT EDITOR в том, что он пытается обеспечить пользователям WYSIWYG просмотр по мере произведения ими выбора. Кроме того, предварительный просмотр полезен при настройке пользователями интерфейса; CUSTOMIZATION также является важным шаблоном (см. главу 4).