7 рекомендаций для функции поиска на вашем сайте

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

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

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

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

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

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

1. Когда вам нужна кнопка поиска?

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

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

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

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

2. Используйте знакомую всем иконку лупы

При проектировании поисковой строки оставьте хорошо знакомую всем иконку лупы. 

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

3. Строка поиска должна быть заметной

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

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

Чаще всего, посетители интуитивно ищут строку поиска в верхних углах страницы, особенно на популярных сайтах, таких как YouTube, который располагает ее именно там.

4. Обеспечьте наличие кнопки “Отправить”

Механизм поиска ответов на вашем сайте похож на поиск информации в Google. По этой причине для посетителей логично, что при отправке запроса им нужно нажать клавишу “Enter”.

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

Многие зрители будут нажимать «Enter» вместо кнопки «Отправить». При разработке сайта нужно проверить, будет ли «Enter» выдавать правильные результаты.

5. Разместите поисковую строку на каждой странице

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

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

6. Поле поиска должно быть достаточно длинным

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

Таким образом, они смогут перечитать или изменить свой запрос. Текстовое поле длиной от 27 символов является идеальным, потому что большинство запросов поместится в это пространство.

Задайте ширину, используя ems (прим. единица масштабирования текста), или установите размер одной буквы равный длине буквы “m” в данном шрифте. Это позволит вам правильно оценить свое пространство.

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

7. Рассмотрите возможность применения автоподсказок

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

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

8. Советы

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

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

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

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

Автоподсказки должны быть выделены жирным шрифтом. Это поможет привлечь внимание пользователей.

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

Заключение

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

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

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

Создаем идеальную строку поиска / Хабр

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

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

Лучшие практики

1. Используйте иконку с лупой

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

Пользователи распознают информацию, которую передает иконка, даже без подписи

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

2. Располагайте строку поиска на видном месте

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

На картинке слева функция поиска скрыта за иконкой

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

Избегайте применять последовательное раскрытие для функции поиска — оно скрывает контекст

3. Снабдите строку поиска кнопкой действия

Наличие кнопки помогает донести до людей, что от выполнения действия их отделяет еще один шаг — пусть даже они решат выполнить этот шаг нажатием на Enter.

Совет: Не делайте кнопку поиска слишком маленькой, чтобы пользователям не приходилось нацеливаться на нее курсором. Чем больше места она занимает, тем проще заметить и кликнуть.

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

4. Добавьте строку поиска на каждую страницу

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

5. Строка поиска должна быть простой

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

Булев поиск

6. Разместите строку поиска там, где её ожидают увидеть

Плохо, когда пользователи вынуждены искать строку поиска — это значит, что она не притягивает взгляд и теряется на странице.

Иллюстрация, приведенная ниже, взята из исследования A. Dawn Shaikh и Keisi Lenz: на ней показано, в какой части экрана пользователи ожидают увидеть строку поиска. Эти данные были получены на базе опроса 142 респондентов. Как показало исследование, самые удачные области — верхний правый и верхний левый углы экрана: там пользователям удобнее всего обнаружить строку поиска, следуя стандартному F-паттерну.

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

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

На насыщенном контентом сайте Youtube строка поиска находится в верхней центральной части экрана

Советы:

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

7. Адекватная длина строки

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

Общее правило гласит, что в строке ввода должно помещаться 27 символов (этого достаточно для 90% запросов).

У Amazon строка поиска нужной длины

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

8. Применяйте механизм автозаполнения

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

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

Советы:

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

Автозаполнение экономит пользователю время и может даже подсказать более удачную формулировку

9. Ясно дайте понять, что именно можно искать

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

Совет

: Ограничьтесь несколькими словами, иначе вместо того, чтобы минимизировать когнитивную нагрузку, вы её только увеличите.

Заключение

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

Все, что вам нужно знать

Целевая аудитория

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

Тип и размер веб-сайта

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

Пересмотрите свои цели

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

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

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

Как и в любом аспекте дизайна веб-сайта, решения, основанные на данных, помогут вам выбрать правильный путь. Возможно, у вас уже есть панель поиска на сайте. С помощью Google Analytics вы можете отслеживать поисковые запросы пользователей, что дает вам представление о том, что люди ищут и что они могут (или не могут) найти. Требуется некоторая настройка, чтобы Google Analytics мог отслеживать запросы, вводимые на вашем веб-сайте. К счастью, Google Analytics предлагает инструкции по настройке отслеживания поиска по сайту. После того, как вы настроите это, вы можете найти используемые поисковые запросы на сайте, выбрав «Поведение»> «Поиск по сайту»> «Условия поиска». Вы можете продолжать улучшать свою панель поиска с помощью результатов поиска или параметров фильтра, а также корректировать навигацию или архитектуру сайта, чтобы обеспечить легкий поиск важных или полезных элементов поиска. Если приходят запросы на что-то конкретное, другие пользователи, скорее всего, просматривают ваш сайт в поисках того же самого. Если же поисковая строка мешает и отвлекает, уберите ее и не оглядывайтесь назад.

Примеры панелей поиска на веб-сайте

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

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

Как создать строку поиска?

На веб-сайте WordPress панель и результаты поиска относительно легко подключить в качестве шаблона архива, поскольку они уже являются частью среды WP. Конечно, существуют панели поиска, которые варьируются от самых простых до более сложных, например, панель поиска с автоматическим предложением или панель поиска, которая становится полноэкранной.

Существует множество вариантов панелей поиска, а на веб-сайтах Elementor (фаворит Solid Digital) есть множество надстроек. Например:

• Поле в строке по сравнению с увеличительным стеклом, которое представляет панель поиска при нажатии
• Новая страница, всплывающее окно или полноэкранный захват для поиска

Но где на вашем сайте должно быть это дружелюбное увеличительное стекло? Разместите панель поиска там, где ее найдет ваш пользователь. Сюда входят верхний и нижний колонтитулы или верхняя панель навигации. Если у вас есть страница блога или страница ресурсов, размещение поиска вверху поможет пользователю отсортировать ваш контент в поисках наиболее полезных элементов, показывая сообщения, соответствующие их запросу. Ознакомьтесь с рекомендациями Hubspot по дизайну панели поиска.

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

Резюме (Окончательные результаты!)

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

Как направить пользователей туда, куда им нужно

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

Должна ли быть панель поиска на вашем сайте?

Идея и психология использования панели поиска заключается в том, что она помогает пользователям быстро находить информацию. Панели поиска полезны на сложных сайтах с большим количеством контента, содержащих более 100 страниц. В секторе Business to Consumer (B2C) панели поиска используются на крупных сайтах электронной коммерции, новостных сайтах, сайтах сделок и сайтах бронирования, чтобы помочь пользователям легко находить информацию. Они также используются на крупных сайтах Business to Business (B2B), которые имеют множество клиентских сегментов и линеек продуктов. Если у вас небольшой сайт с несколькими страницами, панель поиска может не потребоваться, но она понадобится вам по мере роста сайта.

Идеи, которые следует учитывать при создании панели поиска 

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

Разместите панель поиска на видном месте

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

Окно поиска, отображаемое на видном месте (Источник)

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

Панель поиска, скрытая за значком (Источник)

Включите значок увеличительного стекла в свои панели поиска

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

Значок увеличительного стекла (Источник)

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

Наличие кнопки поиска в строке поиска

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

Панель поиска с кнопкой поиска (Источник)

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

Используйте текст-заполнитель, чтобы указать пользователям, что они могут искать 

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

Текст-заполнитель, указывающий пользователям, что они могут искать (Источник)

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

Создайте окно поиска, похожее на окно поиска и простое в использовании. Начните с простого поиска и предоставьте пользователям возможность использовать поисковые фильтры или механизмы расширенного поиска, если им это необходимо. Хорошим примером является IMDb, который позволяет пользователям выбирать тип поиска, который они хотят использовать. Если вы делаете расширенный поиск по умолчанию, упростите дизайн окна поиска, чтобы им было легко пользоваться.

Простая панель поиска с расширенными параметрами поиска (Источник)

Разместите панель поиска там, где пользователи ожидают ее найти 

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

Использовать автоподсказку 

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

Автоматические предложения (Источник)

Разместите панель поиска на каждой странице 

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

Используйте большой размер поля

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

Большое поле ввода (Источник)

Измените размер полей ввода в соответствии с размером запросов, которые вы ожидаете, и установите ширину с помощью em. Используйте растущее окно поиска, которое расширяется вместе с поисковым запросом пользователя, если вы хотите сэкономить место.

Чтобы создавать панели поиска, отвечающие на вопросы пользователей, вам нужны лучшие инструменты пользовательского интерфейса. UXPin предоставляет вам платформу «все в одном», где вы можете создавать и прототипировать свою панель поиска, сотрудничая с членами вашей команды и разработчиками. Подпишитесь на бесплатную пробную версию UXPin (кредитная карта не требуется) и начните создавать панель поиска уже сегодня.

Превратите панель поиска в компонент пользовательского интерфейса.

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

Мы только что выпустили Merge Component Manager, удобный инструмент, который позволяет дизайнерам легко импортировать компоненты пользовательского интерфейса и управлять ими в UXPin. Попробуйте на пробу. Просто попросите наших продавцов включить его для вашей пробной учетной записи.

Нашли это полезным? Поделиться с

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

Начните бесплатный пробный период

Получите советы по найму, адаптации и структурированию команды дизайнеров на основе информации от лидеров DesignOps.

Скачать электронную книгу бесплатно

Улучшите свои процессы проектирования — загрузите нашу электронную книгу DesignOps 101 и узнайте о ней все. Ознакомьтесь с мнениями ведущих дизайнеров из IBM, Salesforce, Delivery Hero и других компаний!

Скачать электронную книгу бесплатно

Проверьте другие электронные книги

Подписывайтесь на нашу новостную рассылку

• Бесплатно Электронные книги
• Бесплатно Наборы пользовательского интерфейса
• Изделия для дизайна

Мы бережно защищаем ваши данные — как описано в Политике конфиденциальности.

This entry was posted in Семантическое ядро