Страница поисковой выдачи: практика и примеры дизайна - Сайт неОчем
Сайт неОчем
Статистика


Нас находят по:
Форма входа
Инструменты сайта
Вы можете быть услышанными на следующих страницах:

Следите за новыми статьями на сайте через:
Следить в Twitter
Следить в Digg
Или читайте мысли в RSS: Читать через RSS

Так же вы можете:
  • Слушать on-line радио

Каталог мыслей


Главная » Каталог мыслей » Мои мысли » Страница поисковой выдачи: практика и примеры дизайна

2010-08-22
[17:59]
Страница поисковой выдачи: практика и примеры дизайна
В этой статье давайте рассмотрим ряд тенденций и практических примеров с различных поисковых веб-сайтов, и попытаемся научиться на чужих ошибках. Ведь правильный поиск для веб-сайта это одна из основных составляющая успеха самого сайта. 


1. Тенденции в поисковых системах.
На сегодняшний день лидером в веб поиске безоговорочно является Google. В неком смысле он задает образ для всех поисковых систем и страниц веб поиска.
Поэтому попытаемся рассмотреть основные особенности поиска Google, а также уникальные возможности на других веб-сайтах и популярных поисковых системах.
Рассмотрим основные функции результатов поиска Google:
  • Строка поиска, с запросом поиска, расположенная в самом верху;
  • Общее количество результатов, сразу под поисковой строкой;
  • Кнопка для перехода в режим "продвинутого" поиска;
  • Ajax саджест - для автозавершения поисковых запросов;
  • Рекламные ссылки сверху и с права от результатов поиска;
  • Пронумерованные результаты поиска;
  • Название результата поиска, написан большими жирными буквами и является гиперсылкой на источник;
  • Фрагмент текста из источника с выделенными искомыми словами жирным шрифтом;
  • URL-адреса показаны другим цветом;
  • Большинство результатов поиска позволяет 2 варианта для просмотра "похожие" и "сохраненная копия";
  • Посещенные ссылки выделяются другим цветом;
  • Похожие слова или фразы для поиска представлены в низу страницы;
  • Строка поиска повторяется в низу страницы;
  • С лева панель фильтров, для уточнения запроса
Все остальные поисковые системы используют приблизительно те же функции и элементы что и Google, с небольшими изменениями. Ниже приведены те элементы которые есть в других поисковых системах, но нет у Google:

Microsoft в своей поисковой системе Bing предлагал "историю поиска" на боковой панели (выделена красным на картинке выше) по каким-то причинам её отключили, наверное оказалась невостребованной.

А Yahoo предлагает нам две другие возможности: "Панель поиска" - для записи заметок на разные поиска и "Безопасный поиск" - для защиты от вредоносных сайтов в результатах поиска.
Так же стоит отметить у них панель поиска по популярным веб-сайтам, весьма удобно для навигации.

Вообще Google, Bing и Yahoo обладают немалым опытом и являются экспертами в данной области. Поэтому их структуру и тенденцию стоит учитывать при разработке своей страницы результатов поиска.


2. Результаты поиска для видео сайтов
Страницы результатов поиска по сайтам видео в основном они содержат элементы как и в разделе 1, но также и имеют некоторые свои особенности. 

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

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

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


3. Результаты поиска для мини блогов.
Большинство мини-блогов предлагают уникальные для своей области поисковые результаты, давайте посмотрим:

Twitter по средствам javascript в результаты поиска, предлагает обновить страницу, когда появляются новые сообщения по данному запросу. 

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

Результат поиска в системе Delicious содержит очень простую и понятное дерево тегов.


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

Для тех случаев когда в поиске есть книга, сервис предлагает функцию "Look Inside" - загляни во внутрь, позволяющий полистать выбранную книгу.

Позволяет изменить количество результатов на странице и возможность перейти к любому номеру странице, указав его номер

А этот сервис предлагает помимо двух уже привычных режимов просмотра, списка и сетки, ещё и режим "Window" - то есть окно, в котором представлены элементы в виде горизонтального списка с прокруткой.
Так же удобная функция, "Quick Look" - это кнопка расположенная возле каждого элемента и по нажатию на которую открывается детальная информация о элементе без перезагрузки и возможностью вернуться к общему списку.


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

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


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

Результаты поиска на сайте apple можно поделить на 2 части, общие результаты слева, и с права результаты поиска по категории для категорий: магазин, поддержка и itunes (музыкальный центр).

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

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


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

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

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



Резюме
Для удобства, ниже прилагается список некоторых из самых практичных функций, которые были перечислены выше:
  • Поисковая строка должна быть заметной, что бы пользователь мог начать новый поиск.
  • Четко указывать условия поиска, где есть возможность, в верхней части сайта или в результатах поиска.
  • Реклама может находиться сверху, снизу или с права от результатов поиска.
  • Заголовок каждого результата поиска должен находиться вверху и должен быть ссылкой.
  • Должно быть понятно, что пользователь посещал данную ссылку.
  • Сопутствующие товары, теги или ключевые слова должны быть показаны в ненавязчивой форме.
  • Для видео, картинок и интернет магазинов лучше когда имеется 2 вида: список и сетка.
  • Расширенный поиск должен быть легкодоступным.
  • Возможность сортировки или фильтрации.
  • Для сложного интерфейса должны быть простой доступ к справке или советы.
  • Популярность или оценки в виде звездочек должны быть показаны для каждого результата.
  • Желательно дать возможность пользователю указывать количество результатов поиска на странице.
  • Если результаты охватывают различные разделы веб-сайта, необходимо указать это, подзаголовками или каким-то другим способом.
  • В случае частого обновления, необходим мониторинг результатов поиска и в случае добавления нового, сообщать об этом пользователя. 

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



Источник: http://www.smashingmagazine.com/2009/09/28/search-results-design-best-practices-and-design-patterns/
Добавил: Elio | Дата: 2010-08-22 | Просмотров: 2751 | Комментариев: 3
1  
href=javascript жжот, низзя нажать средней кнопкой мыши sad

2  
А у меня можно, Chrome - рулит, Opera - angry

3  
ну да, уже даже не ИЕ, а опера виновата....
FF - та же реакция
<a onclick="window.open('http://www.smashingmagazine.com/2009/09/28/search-results-design-best-practices-and-design-patterns/');return false;" rel="nofollow" href="javascript://">http://www.smashingmagazine.com/2009/09/28/search-results-design-best-practices-and-design-patterns/</a>
href="javascript:// ну не тру!

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Карта сайта
Copyright elio.net.ua©
Хостинг от uCoz