Поиск:

Несколько примеров многоаспектных навигационных систем

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

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

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

- Чем могу вам помочь? - спросил он.

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

- У нас есть три варианта, - ответил продавец. - Сколько вы хотите потратить?

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

Вот если бы все веб-сайты могли работать так же эффективно! Если мои критерии отобразить схематически, меню навигации бы выглядело так:

appliances > dishwashers > energy consumption
(кухонные приборы > посудомойки > энергопотребление)

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

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

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

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

Рис.1. Сайт Broadmoor выводит атрибуты (в данном случае - даты) - в особом окошке.

• Выбор аспекта. Здесь использованы две важные идеи: во-первых, пользователю предлагаются различные способы выбрать те значения, которые важны для него; во-вторых, используются элементы интерфейса, которые лучше всего подходят для отображения данного типа данных. Например, посмотрим на интерфейс бронирования мест на сайте Broadmoor Hotel, который выполнен на Flash. Выбор данных осуществляется с помощью календаря. Решение тривиальное, но вспомните сколько раз вам приходилось на сайтах выбирать дату из выпадающих списков?

Рис.2. Сайт Kohler прибегает к помощи JavaScript, чтобы сделать интерфейс более гибким.

• Интерфейс отсеивания. Когда пользователь выбирает какое-либо значение для определенного аспекта, покажите общее количество объектов, удовлетворяющих данному выбору, чтобы пользователь мог увидеть, как его выбор сокращает (или в некоторых случаях, расширяет) конечный результат. Например, взглянем на веб-сайт компании Kohler, занимающейся изготовлением вентилей. Их интерфейс поиска вентилей автоматически выводит результат при изменении какого-либо параметра. Если вы выберите вентиль с отводной трубкой, количество объектов сокращается с 124 до 55. добавьте к этому крестовую ручку и выбор сократится до 7 типов. После этого можно смело нажимать ссылку "Show Products" и с легкостью просматривать результат поиска.

  Эффективность подобного типа интерфейса зависит большей частью от технологии. Сайт Kohler использует для обновления результатов JavaScript. К сожалению это требует обращения к серверу всякий раз, когда меняются критерии выбора. Чем больше логики переносится на сторону клиента, тем быстрее сможет работать интерфейс, тем свободнее сможет чувствовать себя пользователь. Это подтверждает пример Flash-интерфейса на сайте Broadmoor, который выводит результаты поиска по выбранным критериям без обращения к серверу и без обновления страницы.

Рис.3. Сайт Sears не предоставляет широкого варианта выбора, что несколько ограничивает свободу действий пользователя

• Вывод результатов. Покажите пользователю какой-либо результат его действий. Некоторые системы просто выводят число (как на сайте Kohler выше); другие - сразу выводят список совпадений, как это делает обычный поисковый сервер. Существуют также гибридные варианты, когда выводится список наилучших вариантов с общим количеством всех вариантов. Выбор интерфейса зависит от типа выводимой информации. Также важно дать возможность пользователям уточнить свой выбор на той же самой странице, где выводятся результаты. Например, на сайте компании Sear.com посетителю предоставляется замечательный интерфейс поиска товара по множеству критериев, но список результатов вы получите только после того, как вы сделаете выбор и запустите поиск. Чтобы поменять критерии, вам придется вернуться назад и начать все выбирать сначала. По крайней мере, неплохо, что интерфейс хотя бы показывает количество товаров при выборе критериев.

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

Джеффри Вин

Джеффри Вин (Jeffrey Veen) партнер-основатель компании Adaptive Path - первой компании в мире, начавшей заниматься консультациями по созданию дружественных сайтов.

« назад к списку статей

Самые популярные статьи:

• Элементы разработки веб-сайтов
• Анализ популярных решений в web-дизайне
• Шаблонные решения для web-сайтов
• 10 главных ошибок веб-дизайна 2003 года
• К черту плохие броузеры