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

SAVED SEARCHES (СОХРАНЕННЫЕ РЕЗУЛЬТАТЫ ПОИСКА)

Проблема

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

Решение

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

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

(а)

(б)

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

Зачем

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

Как

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

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

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

Упростите процесс повторного поиска для пользователей

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

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

Рис. 6.48. Веб-сайт COHomeFinder дает пользователям возможность управлять сохраненными поисками в разделе My Account (Моя учетная запись)

Сохраненные поиски доступны в раскрывающемся списке.

Рассмотрите возможности уведомления пользователей

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

Рис. 6.49. При сохранении результатов поиска ресурс Yahoo! Jobs предлагает пользователям возможность установить требуемые параметры сигналов/уведомлений. Пользователи могут задать как метод уведомлений (например, по электронной почте или с помощью сервиса мгновенных сообщений), так и их периодичность

Новой тенденцией стало давать пользователям возможность отсылать оповещения об их поисках по электронной почте или подписке на каналы Really Simple Syndication (RSS) (рис. 6.50). При такой подписке пользователи могут использовать программу просмотра RSS и следить за обновлениями в каналах. Это исключает необходимость входа в приложение для доступа к сохраненным поискам.

(а)

(б)

Рис. 6.50. Ресурсы Indeed (а) и Forrester Research (б) предлагают пользователям сохранить их поиски как с оповещениями по электронной почте, так и по каналу RSS

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

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

Глава 7
Списки

Введение

Списки широко применяются в веб-приложениях для отображения совокупности элементов. Однако подход, используемый для представления списков, зависит от характера элементов в совокупности. Простой список (SIMPLE LIST), как правило, используется для представления совокупности элементов только с одним или двумя атрибутами. Он может быть использован и для элементов с несколькими атрибутами, если пользователь не станет ссылаться на дополнительные атрибуты при сравнении или сортировке. Для многоатрибутивных элементов, которые важно сравнить или рассортировать, лучше всего использовать табличный список (TABULAR LIST).

Для отражения отношений «родитель—ребенок» наиболее подходящим является иерархический список (HIERARCHICAL LIST). Когда отношения «родитель—ребенок» становится невозможно поддерживать вследствие изменения порядка расположения элементов, иерархический список превращается в табличный (TABULAR LIST).

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

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

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

SIMPLE LIST (ПРОСТОЙ СПИСОК)

Проблема

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

Решение

Показать пользователям простой список элементов с соответствующими действиями (рис. 7.1).

Рис. 7.1. Basecamp отображает категории сообщений в виде простого списка, для каждого элемента которого предусмотрена команда «Удалить»

Зачем

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

Как

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

Рис. 7.2. CNN показывает самые популярные статьи в виде пронумерованного списка

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

Рис. 7.3. В списке Movie Showtimes in Denver (Киносеансы в Денвере) использована иконка для обозначения элемента списка как фильма и различные оттенки цвета фона для улучшения удобочитаемости

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

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

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

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

Рис. 7.5. В Zoho Planner по умолчанию показаны только флаговые кнопки. Благодаря этому наиболее частые операции по выполнению запланированного действия становятся видимыми и очевидными. Редко совершаемые операции, такие, как редактирование и удаление, показываются пользователям при наведении

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

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

TABULAR LIST (ТАБЛИЧНЫЙ СПИСОК)

Проблема

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

Решение

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

Рис. 7.6. В данном списке «100 лучших блокбастеров напрокат в Интернете» в табличном формате представлены фильмы и соответствующие им атрибуты, такие, как категория, дата выпуска, MPAA (Американская Ассоциация кино) и средний рейтинг пользователей

Зачем

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

Как

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

Рис. 7.7. В этом «Списке ценных бумаг» ресурса MSN Money показан перечень инвестиций (в виде символов акций), а также несколько атрибутов, в том числе введенные пользователем, такие как высокие цели, низкие цели и акции. Пользователи, наиболее вероятно, воспользуются этим списком для определения рыночной стоимости своих инвестиций, выявления степени их изменения, а также причин изменения. Данная форма способствует достижению этих целей пользователей, показывая рыночную стоимость и изменения, как в отдельности, так и в совокупности

Сделайте табличные данные читаемыми и построчно, и по столбцам

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

(а)

(б)

Рис. 7.8. Общие способы улучшения удобочитаемости состоят в разделении каждой строки линией, как показано на примере Fidelity (а) и чередования цвета строк, как показано в табличном списке Related Companies (Связанные компании) Google Finance (б)

Исследование Эндерса (Enders, 2008) показало, что разметка «зебра» позволяла лучше выполнить задание (по крайней мере, не хуже), и ей чаще отдавали предпочтение по сравнению с другими стилями, такими, как ровный фон, линии, чередование строк двух цветов, две и три полосы. Кроме того, улучшить удобочитаемость столбцов можно, выровняв значения атрибутов в них в зависимости от содержания ячейки таблицы (рис. 7.9). Придерживайтесь следующих правил выравнивания данных (Galitz, 2002; Mayhew, 1992):

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

• использование десятичной точки и выравнивания по правому краю для чисел с десятичной дробью; отрицательные числа могут быть показаны красным цветом и/или заключены в скобки;

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

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

Рис. 7.9. В таблице сделок Mint.com использовано правильное выравнивание для каждого типа столбцов: флажки выровнены по центру; столбцы Merchant (Продавец), Category (Категория) и Date (Дата) – по левому краю, а в столбце Amount (Сумма) – данные указаны с десятичной точкой и выровнены по правому краю

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

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

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

Рис. 7.10. Сервис Google Documents предоставляет пользователям возможность сортировать документы по столбцам, а стрелка используется для указания способа сортировки столбца. Кроме того, градиент в написании заголовков столбцов используется для указания, что их можно активировать нажатием клавиши мыши

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

Рис. 7.11. Ресурс Home Depot не использует заголовки столбцов данных, так как вся информация – бренд, название продукта и цена – находится в одном столбце. Поэтому он предлагает раскрывающийся список Sort By (Сортировать по), который позволяет пользователям сортировать данные

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

Рис. 7.12. На этом макете показано, как можно предложить пользователям возможность сортировки по нескольким уровням атрибутов

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

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

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

С другой стороны, если не все параметры фильтрации доступны в списке и пользователи могут применить несколько фильтров одновременно, то данные опции следует отобразить отдельно над списком (рис. 7.14). Кроме того, следует учитывать вид матрицы, когда данные могут быть отфильтрованы по атрибутам строк и столбцов в отдельности или в сочетании (рис. 7.15).

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

Рис. 7.15. В Expedia цены на авиабилеты обобщены над списком полетов. Пользователь может перейти по ссылке и просмотреть обобщенный список, чтобы отфильтровать его по авиакомпании, цене, беспосадочным рейсам, сочетанию авиакомпании и цены и т. д.

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

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

(а)

(б)

Рис. 7.16. Ресурс Google Analytics позволяет пользователям переключаться между несколькими отображениями: список (а), круговая диаграмма (б), гистограмма и сопоставление средних данных сайта

(а)

(б)

Рис. 7.17. Веб-сайт Home Depot при отображении элементов представляет пользователям данные в виде сетки (а) и списка (б)

Улучшение доступа к табличным данным

Облегчите доступ к табличной информации, включив в разметки HTML следующее (см. также шаблон ACCESSIBLE TABLES в главе 11):

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

2. Опишите взаимосвязь между заголовками столбца или строки и соответствующими данными с помощью атрибута SCOPE в теге <TH>, который помогает пользователям создавать контекст для данных таблицы.

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

Большинству крупных списков необходима фильтрация (см. шаблон FILTERING в главе 6 и шаблон DYNAMIC QUERYING в главе 8) для выбора доступных проектировщикам опций сужения длинных списков. Помимо того, в длинных списках обычно невозможно показать все элементы на одной странице, так что разбиение на страницы (PAGINATION) часто является неотъемлемой частью табличных списков; непрерывная прокрутка (CONTINUOUS SCROLLING) также рассматривается в качестве опции (см. главу 6).