разрабатываем идеальный внутренний поиск для E-commerce — Маркетинг на vc.ru

4687
просмотров

Главная задача поисковой строки — быстро привести клиентов к тому, что они ищут. Поэтому важно, чтобы пользоваться ею было просто и удобно. Именно UX/UI Design решает такие вопросы. Сегодня рассмотрим, что же такое UX и UI: в чем разница и что их объединяет. Расскажем, как улучшить пользовательский опыт и пользовательский интерфейс страницы поисковой выдачи.

Дизайн имеет значение

Дизайн — это не то, как предмет выглядит, а то, как он работает.
Стив Джобс

Если дизайн удобен пользователям — совершить целевое действие будет легче. Так, в 1954 году Пол Моррис Фиттс открыл закон, который позволяет определять оптимальные размеры, зоны нажатия и расположение элементов интерфейса в соответствии с простотой их использования. Из главных тезисов исследований Фиттса можно выделить, что:

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

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

Поиск на Amazon

Ecommerce гигант подошел ответственно к разработке функционала строки, создал не просто отдел, а учредил свою компанию A9, нацеленную на производство технологий для поиска. A9 создали в 2003 году как независимую компанию со штаб-квартирой в Пало-Альто, Калифорния. Компания на протяжении 16 лет занималась развитием поиска на сайтах Amazon. Свое сотрудничество они прекратили после скандала в 2019 году из-за изменений в алгоритме строки в пользу более прибыльных для площадки продуктов.

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

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

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

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

User Interface или UI (пользовательский интерфейс) — это способ взаимодействия пользователя с продуктом, сервисом или услугой. UI фокусируется на том, как выглядит интерфейс: меню, поиск, фильтрация на сайте и другие элементы.

1.1. Внешний вид поисковой строки

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

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

Подсказка

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

Подсказка в строке поиска

Призыв к действию

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

Пример правильного и неправильного оформления кнопки

Иконка

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

Иконка поиска

Цвет

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

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

Цвет поисковой строки

Размер

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

Оптимальный размер поисковой строки должен вмещать 27-30 символов.

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

Оптимальный размер 27-30 символов

1.2. Внешний вид страницы выдачи

Перейдем к визуализации результатов поиска:

Фото и цены в результатах выдачи

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

Фото и цены

Количество результатов поиска

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

Количество товаров в выдаче

Поисковая выдача над разворотом

Термин «разворот» позаимствован веб-дизайнерами у полиграфистов. Это линия, по которой складывается газета. Концепция “видимой области” применима и в цифровых продуктах. Десктопные и мобильные версии ресурсов тоже имеют зону, видимую сразу после загрузки, и скрытый контент, ознакомление с которым требует дополнительных действий — скроллинга.

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

Не стоит опускать карточки товаров под рекламный баннер как на этом примере:

Карточки товаров под рекламным баннером

На следующем скриншоте результаты поиска размещены над разворотом. Пользователь сразу видит релевантные товары и заинтересован прокрутить страницу дальше.

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

Макет страницы выдачи

Дайте пользователям возможность самостоятельно выбирать, как отображать результаты поиска — списком или блоком. Пример:

Можно выбирать способ отображения

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

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

Прогресс поиска

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

Индикатор прогреса поиска

Индикатор прогреса поиска

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

Второй аспект, который нужно учитывать при разработке формы поиска на сайте — это ее расположение.

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

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

F-образный шаблон чтения

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

3.1. Функциональность строки поиска

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

Сохранять исходный текст в поле ввода

Настройте строку так, чтобы запросы пользователей не исчезали после нажатия кнопки “Поиск”. Если пользователи не найдут то, что ищут с первой попытки, они смогут уточнить свой запрос дополнительными словами. Чтобы им было проще это сделать, оставьте первоначальный запрос видимым в поле поиска как на рисунке ниже. Тогда пользователям не придется повторно вводить его.

Исходный текст сохранён

Предлагать автоподсказки

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

• автозаполнение или продолжение запроса;
• категории товаров;
• список товаров;
• продвигаемый товар/бренд.

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

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

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

По статистике Multisearch 10-15% пользователей допускают ошибки в запросе, более 50% из них не уточняют поисковой запрос. Они просто покидают сайт в надежде найти нужный товар в другом месте. Поэтому важно, чтобы поиск понимал, что ищет клиент.

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

Понимать синонимы и учитывать морфологию

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

Поиск понимает синонимы

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

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

Транслитерация работает

Хранить историю запросов

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

Отображается история запросов

3.2. Функциональность страницы с результатами

Рассмотрим дальше возможности для улучшения поисковой выдачи:

Предоставлять точные и актуальные результаты

Первая страница результатов — “золотая”. Именно результаты, которые посетители видят на этой странице, формируют окончательное решение посетителя: купить продукт в этом интернет-магазине или посмотреть его в другом. Все зависит от их релевантности. Пользователи очень часто судят о ценности веб-ресурса, основываясь на качестве результатов выдачи. Таким образом, важно правильно расставить приоритеты — все самые релевантные товары должны появиться на первой странице выдачи. Синоним качества поиска — его релевантность. Когда результаты выдачи соответствуют ожиданиям пользователя, значит они релевантны. Но, чтобы сделать из строки настоящий генератор дохода, одной релевантности будет недостаточно. Для этого умный поиск может влиять на порядок ранжирования результатов. То есть строка будет учитывать, какие товары показывать выше, а какие ниже, с учетом важных для Ecommerce признаков. Хороший пример релевантной выдачи на сайте доставки продуктов питания:

Релевантная выдача

Предоставлять возможность для сортировки и фильтрации товаров

Сузив результаты поиска, вы облегчите процесс выбора и ускорите покупку. Фильтры и сортировка в этом помогут:

Есть фильтры на странице выдачи

Корзина в результатах поиска

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

Товар можно сразу добавить в корзину

Правильно наполняйте страницу “Ничего не найдено”

Если по запросу ничего не найдено, важно предоставить посетителям альтернативные варианты товаров. Альтернативы служат своего рода стимулом для дальнейшего изучения сайта. Например:

Страница «ничего не найдено»

Подведем итог

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

UX поиска: как создать доступную форму поиска

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

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

Поиск влияет на вашу прибыль

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

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

Вот несколько фактов:

• До 80% пользователей покидают сайт, если качество поиска не соответствует норме.
• Успешный поиск приводит к увеличению коэффициента конверсии в 2 раза.
• В среднем пользователи сдаются после 8 секунд на попытку что-то найти.

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

Где лучше разместить форму поиска?

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

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

Давайте взглянем на некоторые примеры.

1. Verywell

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

На то есть две причины:

• Это сайт, ориентированный на информацию и ее доступность.
• Verywell использует «Поиск» и «Категории» в качестве фактической функции навигации по сайту.

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

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

Вот так:

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

Это просто показывает, как, казалось бы, скучную форму можно превратить в нечто замечательное.

2. Quora

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

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

Если вы посмотрите вверх, вы увидите функцию автозаполнения:

И если автозаполнения недостаточно, вы можете перейти к реальной странице поиска.

Она выглядит так:

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

В поиске главное не только внешний вид, но и то, что происходит после того, как пользователи нажимают клавишу Enter!

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

А что насчет мобильного интерфейса?

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

А в верхнем левом или правом углу полностью зависит от других функций вашего сайта.

Символы и кнопки

Существует два часто используемых типа поисковых форм: одна простая, а другая с дополнительной иконкой, в качестве кнопки «отправить».

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

И хотя вы видите это увеличительное стекло повсюду, не все дизайны позволяют отправить запрос без нажатия клавиши «Enter».

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

Сделайте поиск доступным на любой странице

Дизайн должен быть последовательным.

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

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

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

Подумайте о расширенных параметрах поиска

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

Вот пример функции поиска на Stack Overflow:

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

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

А вот пример от Airbnb:

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

Проектирование доступного поиска для мобильных пользователей

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

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

Автозаполнение – обязательная функция для больших сайтов

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

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

Этот пример от Alibaba – только один из многих, которые вы найдете среди самых популярных платформ электронной коммерции.

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

A / B тест нескольких вариантов

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

Поэтому, чтобы добиться наилучших результатов, настоятельно рекомендуется опробовать поиск по стилю и размещению с помощью A/B тестирования.

Изображение BoldMinded

К инструментам для тестирования относятся Optimizely, AB Tasty, и, если у вас есть ресурсы, вы можете использовать все сразу. Разные сайты имеют разные типы аудитории, поэтому A / B-тестирование разных мест размещения даст вам четкое представление о том, что работает, а что нет.

Вывод

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

Вот резюме всего, что мы узнали в этой статье:

• Поиск влияет на прибыль вашего бизнеса. Поиск без усилий приводит к переходам без усилий.
• Широко признано, что размещение формы поиска в верхнем колонтитуле обеспечивает лучший пользовательский опыт.
• Использование таких кнопок, как увеличительное стекло, дает пользователю необходимый триггер и возможность отправлять свой поисковый запрос различными способами.
• Будьте готовы, что пользователи попадут на несуществующие страницы. Чтобы вытащить их с этих страниц, сделайте поиск доступным по всему сайту.
• Расширенные параметры поиска позволяют пользователям сузить область поиска до нужной им страницы / сегмента.
• Мобильные формы должны быть четко видны и учитывать экраны разных размеров.
• Автозаполнение сокращает время, необходимое для поиска конкретной страницы или продукта.
• A / B-тестирование показывает, как различные места размещения формы поиска влияют на коэффициент конверсии и, в конечном итоге, на пользовательский опыт.

Знаете другие способы, как сделать поиск в интерфейсах доступным для всех? Пишите в комментариях!

Об авторе: Алекс Ивановс – специалист по цифровому маркетингу, обладающий талантом копирайтера и UX-дизайнера. Посетите его сайт The Divine Indigo.

Перевод статьи icons8.com

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

1. Просмотр Автобазар Найти автомобиль — опыт панели поиска

   Автобазар Найти автомобиль — опыт панели поиска

2. Вид Минимальная клиентская панель – Пользовательский интерфейс

   Минимальная клиентская панель — Пользовательский интерфейс

3. Посмотреть 🔍 Умный поиск

   🔍 Умный поиск

4. Просмотр веб-приложения «Найти вакансию» — пользовательский интерфейс панели инструментов

   Веб-приложение «Найти вакансию» — интерфейс панели управления

5. Просмотр результатов поиска

   Результаты поиска

6. Меню View Command + K — интерфейс без названия

   Меню Command + K — Пользовательский интерфейс без названия

7. Просмотреть встряхнуть — Поиск

   Встряхнуть — Поиск

8. Просмотр меню поиска Command+K — Пользовательский интерфейс без названия

   Меню поиска Command+K — Пользовательский интерфейс без названия

9. Посмотреть веб-приложение «Найти работу»: все страницы

   Веб-приложение «Найти работу»: все страницы

10. Просмотр боковой панели навигации для приложения для повышения производительности

    Боковая панель навигации для приложения для повышения производительности

11. View Travello — целевая страница путешествия

    Travello — целевая страница путешествия

12. Просмотр меню поиска Command+K — Пользовательский интерфейс без названия

    Меню поиска Command+K — Пользовательский интерфейс без названия

13. Просмотр расширенного поиска

    Расширенный поиск

14. Меню View Command + K — интерфейс без названия

    Меню Command + K — Пользовательский интерфейс без названия

15. Посмотреть анимацию строки поиска

    Анимация панели поиска

16. Просмотр меню поиска Command+K — Пользовательский интерфейс без названия

    Меню поиска Command+K — Пользовательский интерфейс без названия

17. Меню View Command + K — интерфейс без названия

    Меню Command + K — Пользовательский интерфейс без названия

18. Посмотреть 🚙🌎 Домашнюю страницу по аренде автомобилей и панель поиска

    🚙🌎 Домашняя страница проката автомобилей и панель поиска

19. Просмотр меню поиска Command+K — Пользовательский интерфейс без названия

    Меню поиска Command+K — Пользовательский интерфейс без названия

20. Просмотр DSM — заголовок героя v4

    DSM — заголовок героя v4

21. Меню View Command + K — интерфейс без названия

    Меню Command + K — Пользовательский интерфейс без названия

22. Просмотр анимации пустого состояния для панели поиска

    Анимация пустого состояния для панели поиска

23. Просмотр мобильного интерфейса поиска работы _ Список вакансий

    Мобильный интерфейс поиска работы _ Список вакансий

24. Посмотреть домашнюю страницу по аренде автомобилей Исследование 🚙🌎

    Домашняя страница по аренде автомобилей Исследование 🚙🌎

Зарегистрируйтесь, чтобы продолжить
или войдите

Загрузка еще…

20 отличных примеров панели поиска для улучшения UX

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

1. Uniqlo: элегантный интеллектуальный поиск

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

• Сильные стороны: Минималистичный дизайн, расширенный функционал, предлагаемые категории и продукты.

Посетите вебсайт

Реклама

2. Samsung: Полная страница Предлагаемые поисковые запросы

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

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

Посетите вебсайт

3. Turkish Airlines: панель расширенного интеллектуального поиска

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

• Сильные стороны: Расширенный функционал, предлагаемые города и рейсы, стильный дизайн.

Посетите вебсайт

4. SAP: контраст и невозможно промахнуться

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

• Достоинства: Минималистичный дизайн, отличная контрастность, микроанимация.

Посетите вебсайт

5. Prada: расширенный поиск модной одежды

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

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

Посетите вебсайт

6. Adidas: рекомендуемые продукты

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

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

Посетите вебсайт

7. Alibaba: рекомендуемые теги

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

• Сильные стороны: Расширенная функциональность по продуктам и поставщикам, предлагаемые поисковые теги.

Посетите вебсайт

8.

Verizon: Удобный полностраничный поиск

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

• Достоинства: Минималистичный дизайн, полностраничный поиск, предлагаемые категории и продукты.

Посетите вебсайт

9. Lay’s: иногда достаточно красивого дизайна

Lay’s — один из самых популярных в мире брендов чипсов, у которого красивый веб-сайт. Он прост в использовании и имеет привлекательную интерактивную панель поиска, которая позволяет легко находить любимые ароматы.

• Достоинства: Отличный дизайн, хорошая контрастность

Посетите вебсайт

10. IMDB: быстрый и легкий поиск всего

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

• Сильные стороны: Расширенный функционал, предлагаемые категории и результаты по категориям

Посетите вебсайт

11. Speedo: акцент с темным наложением

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

• Сильные стороны: Контраст, темное наложение

Посетите вебсайт

12. Mercedes-Benz: что вы ищете?

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

• Сильные стороны: Сообщение об альтернативном поиске, отдельный раздел поиска, предлагаемые теги и результаты

Посетите вебсайт

13. Grifo: растягивающееся окно поиска

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

• Сильные стороны: Растягивание анимации окна поиска

Посетите вебсайт

14. Классические автомобили: Расширенный поиск по модели

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

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

Посетите вебсайт

15. QVC: что мы можем вам помочь?

У QVC есть удивительный текст-заполнитель — вместо «Поиск» здесь действительно интересный вопрос. Поле поиска расположено посередине, а увеличительное стекло окружено серой кнопкой. Кроме того, есть несколько вариантов автозаполнения с изображениями, которые встречаются довольно редко.

• Сильные стороны: Альтернативное поисковое сообщение, контрастность, анимация при наведении

Посетите вебсайт

16. Fandom: Поиск по Fandom

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

• Достоинства: Минималистичный дизайн, отдельная поисковая секция

Посетите вебсайт

17. Colossal: рассмотрим некоторые эффекты при наведении курсора

На одном из крупнейших арт-порталов в мире есть очень интересное окно поиска. Хотя он расположен в правом углу, на том же уровне, что и другие параметры, он становится синим, когда вы наводите на него курсор. А когда нажимаешь — становится серым. Очень художественный подход! Нам это определенно нравится.

• Достоинства: Минималистичный дизайн, анимация при наведении, удобная навигация

Посетите вебсайт

18. Billboard: визуальная привлекательность благодаря микроанимации

Billboard — один из популярных сайтов музыкальных чартов. Отличительной особенностью является то, что увеличительное стекло превращается в толстое окно поиска, которое привлекает внимание пользователя вместо Войти и Подписаться . Хотя это нельзя назвать визуально привлекательным, это уникальный подход, который позволит избежать путаницы.

• Сильные стороны: Минималистичный дизайн, анимация

Посетите вебсайт

19. Arduino: красивый округлый дизайн

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

• Достоинства: Минималистичный дизайн, удобная навигация

Посетите вебсайт

20. Boohoo: Предлагаемые категории

Японский веб-сайт одежды просто потрясающий.

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