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

SORTING (СОРТИРОВКА)

Проблема

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

Решение

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

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

Зачем

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

Как

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

(а)

(б)

(в)

Рис. 6.30. Тремя типичными подходами к отображению вариантов сортировки являются ссылки (выглядящие как панели), как на сайте Buy.com (а), кнопки радио, как на сайте Forrester Research (б), и раскрывающееся меню на сайте Amazon (в)

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

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

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

PAGINATION (РАЗБИВКА НА СТРАНИЦЫ)

Проблема

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

Решение

Разделите результаты поиска так, чтобы на каждой странице показывалось определенное количество предметов поиска (обычно 10–20 на страницу), и дайте пользователям возможность переходить по страницам, используя инструменты управления «назад», «вперед», «в начало», «в конец». Инструменты постраничного вывода информации могут использовать ссылки на пронумерованные страницы, чтобы позволить пользователям перейти к конкретной странице в результатах поиска (рис. 6.31).

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

Зачем

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

Как

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

Минимизируйте количество страниц и скроллинг

Определение количества предметов поиска для отображения на странице результатов – это грань между количеством страниц и скроллингом. Обычно для всех текстовых результатов с минимальным описанием для каждого предмета на странице результатов поиска отображается около 20 предметов поиска одновременно, в то время как для результатов, включающих изображения, обычно показывается не более 10–15 предметов поиска. Однако, предполагая, что пользователи ограничивают просмотр результатов поиска несколькими страницами и нормально относятся к прокрутке, в данном случае можно показывать больше результатов на странице. (Spool, 2008b). Отображение 50 результатов поиска на странице является оптимальным по сообщению Bernard et al. (2002), обнаружившему самое быстрое время поиска и предпочтений для 50 результатов в сравнении с результатами поиска от 10 до 100[11]11
  Интересно, что исследование показало медленное время поиска и низкие предпочтения для 100 результатов поиска одновременно. Это может быть примером, показывающим, почему не стоит отображать необоснованно большое количество результатов поиска.


[Закрыть].

Сделайте инструменты постраничного вывода информации удобными для перехода

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

Рис. 6.32. Типичной практикой в разработке для увеличения размера инструментов при управлении постраничным выводом информации является применение блоков как показано в примере UX Magazine (www.uxmag.com)

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

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

(а)

(б)

Рис. 6.33. Digg использует многоточие между инструментами управления постраничным выводом информации, чтобы оповестить о присутствии дополнительных результатов поиска (а). С другой стороны, NexTag показывает присутствие дополнительных страниц знаком «+» (б)

Показывайте общее количество результатов и диапазон, который пользователи просматривают

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

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

Рис. 6.34. При навигации по результатам поиска на сайте Dell пользователи знают, что они просматривают «результаты 13–24 из 4525» и что они находятся на второй странице результатов поиска

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

Для больших наборов данных (больше 10–15 страниц) позвольте пользователям переходить прямо на первую страницу, так как на ней обычно содержатся наиболее релевантные результаты. Обычно пользователям также показывается ссылка на последнюю страницу результатов поиска. Однако с недавнего времени при отображении большого количества результатов поиска ссылка на «последнюю» страницу пропадает. Это обосновано двумя причинами. Во-первых, последняя страница содержит наименее релевантные результаты и маловероятно, что пользователи перейдут к результатам на ней. Во-вторых, пользователи обычно не переходят дальше первых нескольких страниц, чтобы найти искомые предметы. Согласно результатам анализа, проведенного Нильсеном (Nielsen, 2001), «Пользователи практически никогда не заглядывают дальше второй страницы результатов поиска».

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

Продублируйте инструменты управления постраничным выводом информации в верхней части страницы

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

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

Не связывайте ссылками инструменты управления постраничным выводом информации, не являющиеся релевантными

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

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

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

• На первой странице отключите ссылки на «первую» и/или «предыдущую» страницы.

• На последней странице отключите ссылки «далее» и/или на «последнюю» страницы.

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

Найдите подходящие названия для инструментов управления постраничным выводом информации

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

(а)

(б)

Рис. 6.36. Yahoo! группирует и упорядочивает сообщения в хронологическом порядке и использует обозначения «самый новый», «новее», «старше» и «самый старый» по умолчанию (а). Когда пользователи меняют порядок сортировки, они также изменяют порядок обозначений на обратный (б)

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

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

CONTINUOUS SCROLLING (НЕПРЕРЫВНАЯ ПРОКРУТКА)

Проблема

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

Решение

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

Рис. 6.37. Ресурс Rutland Tool&Supply использует непрерывную прокрутку для отображения пользователям предметов в списке товаров

Зачем

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

В данном случае основания для предпочтения непрерывной прокрутки перед постраничным выводом информации неубедительны. Как упоминалось раньше, Бернард и др. (Bernard et al., 2002) обнаружили, что меньшее число пользователей предпочли просматривать страницы результатов со 100 предметами поиска по сравнению со страницами с количеством предметов поиска от 10 до 50, кроме того, это заняло у них больше времени.

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

Как

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

Рис. 6.38. DZone.net показывает анимированную иконку LOADING (Идет загрузка) при получении дополнительных данных с сервера

Отметьте для пользователей подмножество предметов поиска, которое они просматривают

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

Рис. 6.39. В данном примере инструмент «Live Search» на сайте MSN использует подход непрерывной прокрутки и демонстрирует набор результатов, отображаемых пользователям – «29–40 из 13’900’000»

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

Непрерывная прокрутка (CONTINUOUS SCROLLING) не применима в случаях, когда пользователи, скорее всего, захотят сделать закладки результатов поиска.

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

FILTERING (ФИЛЬТРАЦИЯ)

Проблема

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

Решение

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

Рис. 6.40. Веб-сайт Download.com позволяет пользователям фильтровать список программного обеспечения, доступного для загрузки, по операционной системе, типу лицензии, размеру файлов и категориям

Зачем

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

Как

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

Рис. 6.41. Ресурс Expedia позволяет пользователям фильтровать результаты поиска по авиалиниям и отображает параметры фильтрации как ссылки

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

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

Использование многоаспектного поиска (FACETED SEARCH) стоит также рассмотреть как альтернативу фильтрации – он предоставляет возможность делать многократные сокращения до нахождения необходимого предмета(-тов) поиска и исключить вероятность «нулевого» количества результатов поиска. Кроме того, когда результаты поиска представлены в табличных списках (TABULAR LIST), пользователи могут применять параметры фильтрации на отдельных столбцах (см. главу 7).

FACETED SEARCH (МНОГОАСПЕКТНЫЙ ПОИСК)

Проблема

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

Решение

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

Рис. 6.42. Home Depot позволяет пользователям сократить количество результатов, используя ограничения, такие как «категория», «цена», «бренд» и др.

Зачем

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

Как

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

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

(а)

(б)

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

Разрешите пользователям сбрасывать выбранные ограничения

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

Рис. 6.44. NexTag позволяет пользователям убирать ограничения, нажав на соответствующую ссылку Back to all… (Вернуться ко всем…) в секции Narrow These Results (Сократить эти результаты)

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

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

Другим вариантом при использовании богатых Интернет-приложений являются динамические запросы (DYNAMIC QUERYING), где выбор ограничения обновляет список результатов без обновления страницы. Многоаспектный поиск часто сопровождается многоаспектной навигацией (FACETED NAVIGATION). Основное различие между ними в том, что первый инициализируется пользовательским поиском, а второй нацелен на пользователей, просматривающих информационное пространство.