Создание и дизайн поисковика

Создание и дизайн поисковика

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

Разработка поисковых ресурсов

Для создания подобных ресурсов можно использовать следующие способы:

  1. Готовые скрипты – в интернете есть огромное количество движков с широким функционалом, на которых можно сделать сайты любого уровня сложности. Среди них встречаются как простые, так и более продвинутые варианты.
  2. Самописные системы – их заказывают у программистов. Такой вариант обходится дороже, но вложенные средства окупаются высоким качеством работы. Кроме того в этом случае вы сможете получить для ресурса практически безграничные возможности.
  3. Сервисы от Google и Яндекс – конечно, на них не получится создать полноценный поисковый ресурс, как, например, на своем движке, но и затраты будут меньше.

Рекомендации по оформлению строки поиска

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

Иконка

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

Расположение

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

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

Создание и дизайн поисковика пример

Кнопка действия

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

Цвет

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

Структура

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

Размер

90% пользовательских запросов умещается в 27-30 символов, поэтому позаботьтесь о том, чтобы размер поля имел соответствующую длину. Если строка будет слишком короткой, текст будет виден не полностью. Это не позволит посетителям вводить длинные запросы, проверять правильность их написания или исправлять ошибки. Итог – человеку придется использовать короткие и неточные фразы, что негативно скажется на юзабилити. Если же размеры поля и длина запросов являются примерно одинаковыми, работать  становится проще.

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

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

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

Создание и дизайн поисковика пример 2

Функции строки поиска

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

Пример запроса  

Чтобы облегчить задачу, рекомендуется вставлять в поисковые поля примеры запросов. Они не только подскажут, какие именно позиции можно искать на ресурсе, но и привлекут дополнительное внимание посетителей.
Если вы разрешаете осуществлять поиск по нескольким критериям, используйте паттерн HTML 5. Он помогает добавить текст, который будет автоматически появляться в строке поиска в неактивном состоянии. Единственное условие – как только форма станет активной, подсказки должна исчезнуть. Что касается длины примера, ограничьтесь 3-4 словами. Иначе вместо того, чтобы уменьшить нагрузку, вы ее увеличите.

Автоподсказки

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

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

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

  • Применять автоматическое исправление, определение корней слов, предиктивное введение текста;
  • Выводить не больше 10 вариантов и не применять полосу прокрутки – так вы не станете перегружать людей информацией и отвлекать их внимание ненужными результатами;
  • Демонстрировать отличия между введенным текстом и подсказками. Например, если первый имеет стандартный шрифт, то остальную часть стоит выделить жирным;
  • Предлагать автоматические подсказки как можно быстрее (примерно после 3-го символа) – это избавит посетителя от написания лишних знаков;
  • Внедрить клавишную навигацию по вариативному списку – благодаря ей человек, дошедший до последнего пункта, сможет вернуться в начало. Кроме того после того, как будет нажато Esc, список должен свернуться.

Как видите, этот паттерн действительно очень полезен, но только при условии правильной настройки. В противном случае он будет лишь отвлекать и сбивать посетителей с толку.

Сохранение в поле ввода исходного текста

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

Исправление опечаток и ошибок

По статистике около 20% посетителей ошибаются при написании текста. Еще 50% не уточняют запрос, а уходят на конкурентные сайты. В связи с этим крайне важно, чтобы поиск понимал, что именно ищет клиент.

Распознавание синонимов и учет морфологии

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

Распознавание транслитерации

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

Хранение истории

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

Веб-дизайн страницы выдачи

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

  • Фото и цена товара – именно эти компоненты способствуют принятию окончательного решения и позволяют клиенту быстрее сделать подходящий выбор;
  • Численность результатов поискакогда посетитель видит в выдаче точное число статей или товаров, он может рассчитать время, которое понадобится для их просмотра. Если его окажется слишком много, это подтолкнет клиента к использованию фильтра или введению дополнительных слов;
  • Индикатор, указывающий на прогресс выполнения процесса – если по техническим  причинам результаты поиска не смогли отобразиться в один момент, нужно внедрить специальный индикатор. Это покажет человеку, что система работает;
  • Фильтр – обеспечивает правильную сортировку продукции или контента, ускоряет процесс оформления заказа;
  • Корзина – ее следует располагать непосредственно в результатах поиска, чтобы у человека была возможность добавить ту или иную позицию, не переходя в сторонние разделы.

Отдельно стоит рассказать о странице «Ничего не найдено». В этом случае обязательно предложите пользователям альтернативные варианты. Это послужит для них стимулом для дальнейшего изучения сайта.

Чтобы заказать разработку сайтов поиска в Москве, обратитесь в рекламное агентство BMmedia! Звоните по телефону +79295405566 пишите на почту lead@bmmedia.ru. Мы предлагаем доступные цены и качественный сервис.

Ответы на частые вопросы по Созданию и дизайну поисковика (блог)

Веб-дизайнеры рекомендуют всегда размещать выдачу с результатами поиска над разворотом. Все, что находится в верхней части страницы, незамедлительно привлекает внимание юзеров. Это значит, что как только посетитель увидит релевантные товары, он начнет скролить страницу. Но помните, если контент над разворотом будет недостаточно привлекательным, никто пролистывать ниже не станет.
Позвольте посетителям самостоятельно выбрать способ отображения результатов поиска. Это может быть список или блок. При создании макета в виде блоков обратите внимание на размер изображений. Они должны быть достаточно большими, чтобы показать товар, но при этом не загромождать пространство сайта и позволять отображать нормальное число результатов (хотя бы 4 позиции в одной строке).
Для улучшения поисковой выдачи необходимо всегда предоставлять юзерам актуальные и точные результаты. Первую страницу выдачи называют золотой, ведь именно ее контент влияет на окончательное решение посетителя о заказе или покупке. Чтобы оно было принято в вашу пользу, на первой странице нужно размещать самые релевантные результаты выдачи. Не лишним будет дополнить строку поиска функцией ранжирования продукции по определенным ecommerce признакам.
Можно, но для этого необходимо получить идентификатор поисковой системы. Вид CMS при этом не имеет никакого значения – практически в каждой из них есть модуль для внедрения быстрого расширенного поиска. Процедура установки также довольно проста, справится даже начинающий разработчик.
Поисковая строка не обязательно должна иметь стандартный вид. Ее, например, можно сделать с подсветкой. Для этого используют специальные коды. Такая подача выделит ваш сайт среди конкурентов и запомнится посетителям.
Оставить заявку