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

PARAMETRIC SEARCH (ПОИСК ПО ПАРАМЕТРАМ)

Проблема

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

Решение

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

Рис. 6.8. Match.com, как и многие другие сайты знакомств, позволяет пользователям формулировать запрос поиска, запрашивая у них пол, «искомый» пол, возраст и индекс. Также сервис предлагает расширенные возможности, позволяющие пользователям указывать интересы, уровень дохода и т. д.

Зачем

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

Как

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

Рис. 6.9. Yahoo! Travel отображает для пользователей параметры поиска, связанные только с выбранной панелью

Скройте параметры поиска, используемые редко

При использовании поиска по параметрам важно сохранить поиск простым и не перегружать пользователей теми параметрами поиска, которые они, скорее всего, не будут использовать. Скройте редко используемые параметры элементами «Расширенные параметры» и «Больше вариантов» и сделайте их доступными по требованию пользователей (рис. 6.10).

(а)

(б)

Рис. 6.10. Сервис «Build your Trip» на сайте Expedia скрывает нечасто используемые варианты (а). Он отображает их только когда пользователи выбирают ссылку Airline, first or business class… (Авиаперелеты, первый или бизнес-класс) в группе Additional options (дополнительные варианты) (б)

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

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

ADVANCED SEARCH (РАСШИРЕННЫЙ ПОИСК)

Проблема

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

Решение

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

Рис. 6.11. Страница Advanced Search Options (Варианты расширенного поиска) сайта IRS предлагает пользователям различные варианты уточнения их поисковых запросов

Зачем

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

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

Как

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

(а)

(б)

Рис. 6.12. IRS предлагает ссылку Advanced Search (Расширенный поиск) рядом с простым поисковым блоком (а), в то время как MSN Live Search предлагает ссылку Advanced (Расширенный) на странице результатов поиска (б)

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

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

Упростите терминологию

Хотя расширенный поиск нацелен на опытных пользователей, разработчики могут принимать во внимание доменную опытность пользователей, но не обязательно опытность в поиске. Расширенный поиск должен быть доступен для понимания. Например, вместо того чтобы просить пользователей уточнить критерии поиска с помощью логических операторов, таких как AND, OR, XOR и др., предложите пользователям такие варианты, как «все эти слова», «любое из этих слов», «не включать эти слова» и т. д. (рис. 6.14).

(а)

(б)

Рис. 6.14. Страницы Advanced Search (Расширенный Поиск) у Flickr (a) и Safari Books (б) используют простую терминологию и избегают логических операторов

Позвольте пользователям вернуться на начальную страницу

Большое количество параметров, предлагаемых расширенным поиском, может показаться чрезмерным для некоторых пользователей. Позвольте им вернуться к простому поиску. Если расширенный поиск накладывается на текущую страницу, как у iStockPhoto на рис. 6.13, щелчок по ссылке «Вернуться к простому поиску» («Back to Basic Search») снимает наложение и возвращает пользователей на начальную страницу поиска. С другой стороны, если расширенный поиск расположен на отдельной странице, дайте пользователям возможность вернуться на связанную страницу простого поиска (рис. 6.15). Во избежание путаницы, не отображайте простой и расширенный поиск на одной странице.

(а)

(б)

Рис. 6.15. Flickr использует ссылку возврата к простому поиску под кнопкой Search (Поиск) на странице расширенного поиска (а), которая отсылает пользователей на страницу простого поиска (б)

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

Подобно поиску по параметрам (PARAMETRIC SEARCH) расширенный поиск (ADVANCED SEARCH) не гарантирует меньшего количества результатов поиска и также выиграет от фильтрации (FILTERING) и многоаспектного поиска (FACETED SEARCH), помогая пользователям сократить количество результатов поиска (SEARCH RESULTS).

SEARCH TIPS (СОВЕТЫ ПО ПОИСКУ)

Проблема

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

Решение

Предложите пользователям легко доступные советы по поиску и разъясните различные методы уточнения критериев поиска и формулирование точных поисковых запросов. (рис. 6.16).

Рис. 6.16. Инструмент Search Tips (Советы по поиску) на странице IRS предлагает руководство по работе поиска и по улучшению поисковых запросов пользователей. Подсказки даются не только для простого и расширенного поиска, но и для страницы результатов поиска. Также предлагаются советы по поиску в файле формата PDF (формат файлов программы Adobe Acrobat)

Зачем

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

Как

Сделайте советы по поиску доступными и заметными, разместив соответствующую ссылку рядом с областью поиска (рис. 6.17).

Рис. 6.17. Ресурс iStockPhoto размещает ссылку Need help? (Нужна помощь?) в поисковой панели под ссылкой Advanced Search (Расширенный поиск)

Советы по поиску могут быть представлены пользователям следующим образом:

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

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

• Они могут быть отображены на той же странице, используя подход «раскрытия на месте». Например, Nabble раскрывает секцию подсказок по поиску и отображает ее между поисковой панелью и результатами поиска (рис. 6.18).

(а)

(б)

Рис. 6.18. Nabble использует ссылку Show Tips (Показать подсказки) рядом с кнопкой Go (Поиск), для того, чтобы подсказки по поиску были легкодоступны (а). Нажатие кнопки Show Tips (Показать подсказки) приводит к раскрытию подсказок под областью поиска и отображению примеров, как точные поисковые запросы связаны с результатами поиска (б)

Включите примеры соответствующих поисковых запросов

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

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

Шаблон SEARCH TIPS должен считаться частью справки. По этой причине важно, чтобы советы по поиску содержали ответы на часто задаваемые вопросы (FREQUENTLY ASKED QUESTIONS) пользователей (см. главу 14).

SEARCH RESULTS (РЕЗУЛЬТАТЫ ПОИСКА)

Проблема

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

Решение

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

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

Рис. 6.19. Google упорядочивает результаты поиска по степени соответствия, используя запатентованный алгоритм PageRank. Он использует более крупный полужирный шрифт для результатов поиска, подсвечивает термины поиска и вновь заполняет поисковое поле пользовательским поисковым запросом с возможностью уточнять его. (Обратите внимание: для каждого связанного результата поиска Google использует тег <h2>, который повышает доступность страницы, упрощая пользователям, использующим экранные дикторы, переходить от одного результата поиска к другому. Чтобы получить больше информации по созданию веб-приложений с доступом, см. главу 11)

Зачем

Пользователи осуществляют поиск, потому что они ищут либо конкретный предмет поиска, либо набор предметов, связанных с терминами их поиска. Так что предметы, наиболее совпадающие с терминами их поиска (т. е. с наибольшим соответствием), должны отображаться наверху страницы результатов поиска. Любой другой способ отображения результатов может запутать пользователей, или им придется обращаться к результатам по степени соответствия, чтобы попасть к наиболее подходящим совпадениям. В дополнение к этому большинство пользователей не смотрят дальше второй страницы в результатах поиска (Nielsen, 2001; Spool, 2008b). Исходя из этого, если пользователи специально не указали, что данные необходимо сортировать иначе (к примеру, при использовании расширенного поиска (ADVANCED SEARCH)), отображайте результаты, отсортированные по степени соответствия.

Как

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

Рис. 6.20. Страница Search Results (Результаты поиска) на сайте Dell показывает, что именно пользователи искали, и отображает запрос пользователя в поле поиска

Сделайте ключевые слова поиска нечувствительными к регистру

Пользователи обычно не обращают внимания на регистр ключевых слов и вводят критерии поиска в верхнем, нижнем или смешанном регистре. Кроме случаев, указываемых самими пользователями (например, при использовании расширенного поиска (ADVANCED SEARCH)), игнорируйте регистр поисковых терминов при отображении результатов поиска. Например, выдавайте одинаковые результаты поиска для запросов «ВЕБ-ДИЗАЙН», «Веб-Дизайн» и «веб-дизайн».

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

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

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

Отображайте описательную информацию с каждым результатом поиска

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

Рис. 6.22. Safari (из O’Reilly) демонстрирует несколько описательных характеристик книги на странице результатов, чтобы пользователям было проще определить, какая книга им больше подходит

Отображайте изображения предметов поиска для упрощения просмотра

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

(а)

(б)

(в)

Рис. 6.23. Blockbuster показывает изображения к фильмам, чтобы упростить просмотр результатов поиска (а). Также предлагается формат «только текст» (б) и формат «только изображение без текстового описания» (в)

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

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

(а)

(б)

Рис. 6.24. Zagat предлагает пользователям переключаться между видом в форме списка (a) и в форме карты (б) при отображении информации о ресторанах

Сгруппируйте результаты поиска

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

Рис. 6.25. При поиске по ключевому слову Dell группирует результаты поиска во All Results (Все результаты), Browse Products (Просмотр товаров), Support&Help (Поддержка и помощь) и т. д. Это позволяет фильтровать результаты по категориям, если требуется. Dell также показывает количество найденных результатов в каждой категории

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

(а)

(б)

(в)

Рис. 6.26. Amazon использует механизм кластеров для группировки результатов поиска. Категории, показанные при поиске по словам «Гарри Поттер» (а), несколько отличаются от категорий по запросу «iPod» (б). Plaxo, с другой стороны, использует механизм группирования и может иметь нулевое значение предметов в категории (в)

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

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

Рис. 6.27. Home Depot показывает пользователям по умолчанию 12 результатов на страницу. Для пользователей, которые хотят видеть больше результатов, предусмотрена возможность отображения 24 и 48 результатов на странице

Предлагайте альтернативу, когда поиск не приносит результатов

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

1. Контент, в котором пользователь заинтересован, недоступен.

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

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

Рис. 6.28. NexTag отмечает, что по запросу «kindella» не было найдено результатов и показывает результаты по наиболее приближенному термину, «kinsella». В дополнение к этому показывается несколько связанных предметов, таких как «kinsella» и «sophie kinsella»

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

На странице результатов поиска (SEARCH RESULTS) пользователи могут захотеть реорганизовать результаты, используя критерий, отличный от степени соответствия (SORTING). В дополнение к этому, когда им представлено большое количество результатов, они могут захотеть сократить его до управляемого набора (FILTERING, FACETED SEARCH). Результаты поиска обычно сопровождаются постраничным выводом информации (PAGINATION) и непрерывной прокруткой (CONTINUOUS SCROLLING), так как в большинстве приложений они не могут быть размещены на одной странице.