Как сделать красивый поисковик
Идеальный дизайн Поля Поиска
Search box – это комбинация поля ввода и кнопки подтверждения. Некоторые считают, что окно поиска по сайту не нуждается в дизайне: это ведь всего лишь 2 простых элемента. Однако на веб-сайтах, изобилующих контентом, поиск – наиболее часто используемый элемент дизайна. Когда пользователь попадает на более-менее комплексный сайт, то первое, что он ищет, – это окно поиска, чтобы быстро и безболезненно найти нужную информацию. Его дизайн и юзабилити играют важную роль.
В этой статье мы рассмотрим, как улучшить этот элемент, чтобы сэкономить время посетителя, и помочь ему попасть туда, куда нужно, с наименьшими затратами времени.
1. Используйте иконку увеличительного стекла
Search Box всегда должен сопровождаться иконкой увеличительного стекла. Иконки по определению являются визуальным представлением объекта, действия или идеи. Существует всего несколько наиболее узнаваемых среди пользователей иконок, и увеличительное стекло – одна из них.
Пользователи узнают иконку увеличительного стекла даже без текстовой подсказки.
Совет: Используйте схематическую иконку – самый простой и понятный вариант увеличительного стекла. Чем меньше деталей – тем больше узнаваемость.
2. Поместите поле поиска в видное место
Если поиск важен для вашего приложения или сайта, то расположите его на видном месте, чтобы пользователи могли найти его максимально быстро.
Важно, чтобы поле ввода отображалось полностью, а не было скрыто за иконкой – это делает функцию поиска менее заметной и увеличивает стоимость взаимодействия:
3. Search Box нуждается в кнопке
Кнопка помогает людям понять, что для активации поиска есть дополнительный шаг, даже если они захотят сделать это с помощью клавиши Enter.
Советы:
4. Разместите окно поиска на каждой странице
Доступ к этой функции должен быть на каждой странице, потому что если ваши посетители не смогут найти нужную информацию, они попытаются использовать поиск независимо от того, в какой части сайта они находятся.
5. Упростите область поиска
Когда вы создаете дизайн окна поиска, убедитесь, что его максимально легко использовать. Исходя из юзабилити, наиболее дружелюбным по отношению к пользователям будет не отображать сложные функции по умолчанию. Продвинутые функции (как в примере ниже) будут сбивать пользователя с толку.
6. Располагайте поиск там, где пользователи ожидают его увидеть
Не очень здорово, когда пользователям приходится искать область поиска.
Диаграмма, которую вы видите внизу, взята из научного исследования Дона Шэика (Dawn Shaikh) и Кейси Ленз (Keisi Lenz): она показывает ожидаемую позицию области поиска. Исследование было проведено на 142 людях. Стало очевидно, что наиболее привычным для пользователей расположением является правый верхний угол каждой страницы вашего сайта, где его легко найти с помощью стандартного F-образного шаблона просмотра.
Исходя из этого, располагайте поиск в правом верхнем углу или в центральной верхней части вашего сайта, и будьте уверены, что пользователи обязательно его найдут.
Советы:
7. Правильный размер поля ввода
Слишком короткое поле ввода – типичная ошибка дизайнеров. Конечно пользователи могут вводить большие запросы, но только часть текста будет оставаться видимой, а это плохо для юзабилити, потому что пользователи не могут легко просматривать и редактировать свой запрос. На самом деле, когда окно поиска включает только ограниченное количество видимых букв, пользователям приходится использовать более короткие запросы, потому что остаток текста не будет виден. Когда поле ввода такого размера, какого будет его предполагаемое содержимое, то это будет удобнее и легче читаться.
Правило большого пальца предполагает, что поле ввода должно включать 27 символов, тогда в него поместится 90% всех возможных запросов.
Совет: вы можете использовать Search Box, который раскрывается по нажатию. Это сохранит место на экране, сохранив при этом достаточно визуальных подсказок, помогающих быстро найти поиск по сайту.
8. Используйте авто-заполнение
Механизм авто-заполнения помогает пользователям сформировать запрос, пытаясь предугадать его по введенным буквам. Авто-заполнение не только ускорят процесс, но и помогает пользователям сформировать их поисковой запрос. Типичный посетитель не очень силен в формулировках: если он не получит нужный результат с первого раза, то вряд ли у него получится и во второй раз. На самом деле, чаще всего они просто сдаются. Авто-заполнение помогает формулировать правильные запросы.
Google добились мастерства в этом деле, и работают с авто-заполнением уже с 2008 года. Исходя из того, что пользователи ищут одни и те же вещи более одного раза, Google запоминает историю, а затем экономит время пользователей, создавая более быстрое и приятное взаимодействие.
Советы:
9. Должно быть понятно, что пользователь может искать
Неплохо добавить в окно поиска пример запроса, чтобы пользователи могли понять, что они могут найти. Если посетители могут производить поиск по нескольким критериям, то используйте подсказку-шаблон (как в примере ниже). HTML5 позволяет с легкостью добавить такие подсказки с помощью команды placeholder.
Совет: подсказка должна состоять из небольшого количества слов, чтобы не увеличивать длительность загрузки.
Заключение
Поиск – это одно из фундаментальных действий, лежащих в основе создания приложений и сайтов с большим количеством контента. Даже такие незначительные изменения, как правильный размер поля ввода или подсказка, что можно искать на сайте, могут значительно увеличить юзабилити и общий UX.
Найдется все, или как организовать поиск на сайте
Поиск – незаменимый инструмент для крупных сайтов с большим количеством товаров или услуг, а также для блогов, информационных порталов. И очень жаль, что некоторые компании пренебрегают им, тем самым заставляя пользователя дольше выбирать товар.
Поиск позволяет решать следующие задачи:
Итак, для чего нужна форма, мы определились, теперь перейдем к ее внешнему виду.
Как должна выглядеть форма поиска
Сразу ответим на популярный вопрос: разместить одну кнопку или показать форму полностью? Лучше отразить поле ввода и кнопку запуска, чтобы не заставлять пользователя совершать лишние действия. Порой такие кнопки не всегда заметны.
Не сразу удается найти кнопку поиска на сайте туристического бюро
Удобно сразу ввести запрос на сайте интернет-магазина одежды
Вроде бы всем известно, какой должна быть форма поиска, но на практике получаются не всегда удобные варианты. Подробнее остановимся на основных элементах:
Поле ввода. Сделайте его удобным по длине и высоте, чтобы можно было ввести поисковый запрос в 2-3 слова. Используйте крупный шрифт запроса, чтобы пользователи могли разглядеть и при необходимости поправить свой запрос.
Слишком маленькое поле ввода на сайте по продаже сумок:
Достаточно места для запроса на сайте спорттоваров:
Кнопка запуска. Многие владельцы сайтов про нее забывают, и пользователи не могут понять, как запустить поиск. Кнопка должна быть заметной и удобной для клика, поэтому лучше написать на ней текст «Найти» или «Искать», а не использовать мелкую и незаметную иконку лупы. В «лупу» сложно попасть курсором мышки.
Кнопка на сайте типографии не сразу заметна и неудобна для клика:
На сайте книжного интернет-магазине располагается заметная кнопка, по которой легко кликнуть:
Пример удобной кнопки выбора категории товаров с сайта детских товаров:
Где лучше разместить форму поиска
Важно, чтобы форма была доступна со всех страниц сайта. И, как вы уже поняли из примеров выше, наиболее распространенный вариант – в шапке сайта. Пользователи привыкли искать форму именно там.
Но также обсудим другие варианты:
Главное меню. Подходит, если в меню немного ссылок и есть достаточно места для формы.
Места явно недостаточно для формы
(сайт компьютерного сервисного центра):
Форма легко поместилась в меню
(интернет-магазин чая):
Над боковым меню. Вариант неудобен тем, что боковое меню есть не на всех страницах сайта и здесь недостаточно места для ввода запроса.
На примере сайта по продаже бытовой химии видно, что поле ввода слишком короткое:
Подвал сайта. Чаще всего пользователи не докручивают страницу до подвала, поэтому и не находят форму поиска. Можно размещать только как дополнение к форме в шапке сайта.
Пример размещения формы в подвале сайта:
Другие варианты. Здесь пользователи не ожидают увидеть форму поиска и могут ее пропустить. Также будет сложно расположить форму в одном и том же месте на всех страницах сайта.
Пример размещения формы поиска в основной части страницы на сайте по продаже электронных компонентов:
Еще раз повторимся, что лучше всего разместить форму поиска в шапке сайта, так как именно туда пользователь смотрит в первую очередь. Теперь, когда мы определились с расположением, обсудим страницу результатов поиска.
Как правильно выводить результаты поиска
Лучше всего показать результаты на отдельной странице, при этом:
Сохраните введенный запрос. Пользователь должен видеть, что он ввел ранее.
На сайте по продаже одежды и обуви исчезнувший запрос только дезориентирует:
Дублирование запроса помогает не потеряться в интернет-магазине верхней одежды:
Продублируйте форму поиска на странице с результатами для повторных запросов. Возможно, пользователь передумал, а ему придется снова искать форму на сайте.
Над запросом на сайте туристического снаряжения явно не хватает формы поиска:
На странице сайта по продаже сумок удобно вводить следующий запрос:
Указывайте количество найденных результатов. Пользователь должен сразу видеть, сколько вариантов у него есть.
Не ясно, сколько найдено подходящих вариантов. Пример взят с сайта интернет-магазина мебели:
Сразу видно количество найденных статей на сайте юридических услуг:
Визуально отделяйте результаты друг от друга. Информация не должна быть в куче, поэтому добавляйте разделительные линии, отступы, выделяйте заголовки и т.д.
Несмотря на разделительные линии, однотонный текст сливается (пример взят с сайта по продаже систем безопасности):
Результаты хорошо отделены друг от друга на сайте строительного центра:
Не оставляйте страницу результатов пустой. Предложите популярные товары или список статей, возможно, они заинтересуют пользователя.
Такая страница только теряет клиентов. Пример с сайта продажи одежды:
На сайте товаров для дома грамотно выводятся похожие товары:
Используйте подсказки. Помогите потенциальному клиенту быстрее ввести запрос.
Удобно, когда пользователю подсказывают категорию и выводят подходящий товар.
Пример от интернет-магазина товаров для дома и отдыха:
На странице результатов сохраняйте основные элементы навигации. Не должно происходить смены адреса или внешнего вида страницы.
Такие страницы результатов только дезориентируют пользователей. Пример с сайта по продаже установок альтернативной энергии:
Какие инструменты использовать
Выделим основные способы и разберем их плюсы и минусы:
+ Основное преимущество – создание поиска на основе всех ваших желаний и идей, который полностью интегрируется в вашу систему сайта.
– Ограничения: особенности выбранной cms, дороговизна работы специалистов и трата времени на разработку. У многих cms есть встроенные средства, что немного ускоряет процесс настройки поиска.
+ Уже готовые бесплатные продукты с кучей плюшек (морфологический анализ, готовые подсказки, исправление ошибок, учет поисковой статистики и др.). Большое количество инструкций и туториалов, поэтому у вас или ваших специалистов будет меньше вопросов, как настроить поиск по сайту.
– Ограничения: все-таки это внешний поиск, поэтому не получится указать, какие данные наиболее важны, а какие менее. Также нужно время на индексацию изменений на сайте.
+ Большой набор функций, которые помогут сделать поиск более удобным.
– Не каждый хостинг позволит запустить выбранную систему, а цена может быть слишком высокой. Нужны специалисты, разбирающиеся в их настройке.
Какой вариант лучше, решать только вам =) Мы же для начала рекомендуем настроить сервисы от Яндекса или Google, так как они бесплатны и наиболее распространены. Позже, если возникнет необходимость, можно перейти на другие продукты или разработать свой, уже точно зная, какие функции вам нужны.
Заключение
Придерживайтесь данных рекомендаций и поиск на сайте станет надежным инструментом в работе с клиентами. Если же вы еще не определились, нужен ли вашему сайту поиск, то пишите в комментариях, подскажем =).
Если возникли вопросы с настройкой поиска по сайту – озвучьте пожелания, поможем с реализацией.
Поисковые технологии или в чем загвоздка написать свой поисковик
Когда-то давно взбрела мне в голову идея: написать свой собственный поисковик. Было это очень давно, тогда я еще учился в ВУЗе, мало чего знал про технологии разработки больших проектов, зато отлично владел парой десятков языков программирования и протоколов, да и сайтов своих к тому времени было понаделано много.
Ну есть у меня тяга к монструозным проектам, да…
В то время про то, как они работают было известно мало. Статьи на английском и очень скудные. Некоторые мои знакомые, которые были тогда в курсе моих поисков, на основе нарытых и мной и ими документов и идей, в том числе тех, которые родились в процессе наших споров, сейчас делают неплохие курсы, придумывают новые технологии поиска, в общем, эта тема дала развитие довольно интересным работам. Эти работы привели в том числе к новым разработкам разных крупных компаний, в том числе Google, но я лично прямого отношения к этому не имею.
На данный момент у меня есть собственный, обучающийся поисковик от и до, со многими нюансами – подсчетом PR, сбором статистик-тематик, обучающейся функцией ранжирования, ноу хау в виде отрезания несущественного контента страницы типа меню и рекламы. Скорость индексации примерно полмиллиона страниц в сутки. Все это крутится на двух моих домашних серверах, и в данный момент я занимаюсь масштабированием системы на примерно 5 свободных серверов, к которым у меня есть доступ.
Здесь я в первый раз, публично, опишу то, что было сделано лично мной. Думаю, многим будет интересно как же работают Яндекс, Google и почти все мне известные поисковики изнутри.
Есть много задач при построении таких систем, которые почти нереально решить в общем случае, однако с помощью некоторых ухищрений, придумок и хорошего понимания как работает железячная часть Вашего компьютера можно серьезно упростить. Как пример – пересчет PR, который в случае нескольких десятков миллионов страниц уже невозможно поместить в самой большой оперативной памяти, особенно если Вы, как и я, жадны до информации, и хотите кроме 1 цифры хранить еще много полезностей. Другая задача – хранение и обновление индекса, как минимум двумерной базы данных, в которой конкретному слову сопоставляется список документов, на которых оно встречается.
Просто вдумайтесь, Google хранит, по одной из оценок, более 500 миллиардов страниц в индексе. Если бы каждое слово встречалось на 1 странице только 1 раз, и на хранение этого надо было 1 байт – что невозможно, т.к. надо хранить хотя бы id страницы – уже от 4 байт, так вот тогда объем индекса бы был 500гб. В реальности одно слово встречается на странице в среднем до 10 раз, объем информации на вхождение редко когда меньше 30-50 байт, весь индекс увеличивается в тысячи раз… Ну и как прикажите это хранить? А обновлять?
Ну вот, как это все устроено и работает, я буду рассказывать планомерно, так же как и про то как считать PR быстро и инкрементально, про то как хранить миллионы и миллиарды текстов страниц, их адреса и быстро искать по адресам, как организованы разные части моей базы данных, как инкрементально обновлять индекс на много сотен гигов, ну и наверное расскажу как сделать обучающийся алгоритм ранжирования.
На сегодня объем только индекса, по которому происходит поиск — 57Gb, увеличивается каждый день примерно на 1Gb. Объем сжатых текстов – 25Gb, ну и я храню кучу другой полезной инфы, объем которой очень трудно посчитать из-за ее обилия.
Как сделать красивый поисковик
Создаем свой поисковик
Как создать свой поисковик? — спрашивает Коля К. из Киева.
Создать поисковик несложно — отвечаю я
Идея создания своей поисковой системы может кому-то показаться бредовой, хотя на самом деле это очень удобно.
Критиканы сразу же начинают возражать вот есть ведь яндекс, рамблер, тот же google. Зачем еще один?
Ответ лежит на поверхности.
— Во первых свою поисковую систему имеет смысл строить на ограниченом объеме выдачи. Допустим у вас есть 400 компаний поставщиков и 300 компаний партнеров. + на вашем рынке фигурирует еще 1000 тематических сайтов содержащих полезную информацию. Использование обычных ПС даст горы мусора в выдаче. Обработка в ручную для таких объемов в принципе невозможна. Вывод?
Нужна поисковая система проводящая поиск по ограниченному набору строго определенных сайтов
— Во вторых такой самостоятельно созданый поисковик является хорошей рекламной площадкой, которая может монетизироваться.
— В третьих вы определенно можете предоставить своим клиентам удобный и очень полезный сервис тематического поиска.
Ну и наконец в четвертых это вопрос брендинга. Компания способная создать поисковик всегда круче компании на это неспособной. А при учете того что большинство людей считает создание своей поисковой системы сложной, если не сказать неподъемной задачей, то ваш престиж растет до небес.
-Нужно сказать что благодаря современным технологиям достаточно нетривиальная задача разработки системы поиска вылилась в простое и лаконичное решение от команды Ашманова.
Система Flexum — cервис для создания поиска по группе сайтов.
Все гениальное просто. Пользуйтесь!
Как не надо делать сервисы и организовывать стартапы
Что русскому хорошо, то немцу похмелье. Новая биржа Индек убейся ап стену.
1. Простая регистрация. Не беспокойте меня активацией, не просите ввести 10 капч, не нужно генерить 20 полей данных, мне все равно на вашу безопасность, я хочу получить решение проблемы и если вы сделаете все красиво и быстро Вы останетесь с баблом, а я довольный
2. Чем проще — тем лучше. Хороший сервис позволяет делать 1-2 действия, но при этом офигенно. Я давно не пользуюсь ACDSee потому что она дрочь. Она умеет жарить яишницу и запускать ракеты, а я мечтаю о удобном просмотре картинок, тоже самое касается Nero. Из всего пакета 90% пользователей использует 2 программы, повторяю 2. остальное нафиг не надо.
3. Простота изменений интерфейса, самого интерфейса и интеграции системы с другими вот залог успеха. Я не хочу изучать ваш апи я хочу поставить на сайт одну строчку и получить полный автомат.
4. Не задавайте глупых вопросов. В ходе работы по косвенным данным о пользователе можно собрать достаточно информации чтобы снять тонну ненужных вопросов. Дайте человеку работать а не настраивать вашу офигенную систему.