Не обращая внимания на постоянное трансформацию тенденций в веб-дизайне, кое-какие ответы остаются в данной динамичной среде на много лет: к примеру, иконка увеличительного стекла употребляется вместо хорошей поисковой строки и кнопки поиска в течении многих лет.
Казалось бы, возможно смело высказать предположение, что за продолжительное время существования этого элемента веб-дизайнеры оптимизировали его юзабилити по максимуму. Но кнопка с иконкой лупы, заменяющая поисковое окно, до сих пор остается источником конверсионного трения.
На протяжении одного из последних изучений эксперты исследовательской группы Нильсена-Нормана (Nielsen Norman Group, NNG) проанализировали влияние вышеупомянутой альтернативы поискового поля на пользовательский опыт, и вывели пара догадок ее оптимизации.
Предлагаем вам ознакомиться с рекомендациями маркетологов и ключевыми заключениями NNG.
- 4 неточности веб-дизайна, убивающие конверсию
Визитёрам сайта тяжело отыскать мелкую иконку
Пользователям тяжелее отыскать маленький значок, чем поле для ввода текста, посему
заменять поисковое окно одной кнопкой рекомендуется лишь в мобильных предположениях сайта, требующих экономии пространства для эргономичности интерфейса.
К значку поиска не требуется додавать текстовое наименование
Иконка увеличительного стекла знакома фактически всем пользователям Глобальной сети, что избавляет от потребности додавать к ней маркер с описанием функции.
Но применять кнопку со значком лупы только в качестве графического элемента не следует — визитёры веб-ресурсов привыкли к тому, что кнопка поиска предназначена для отправки поискового запроса, исходя из этого элемент с иконкой увеличительного стекла кроме этого обязан делать данную функцию.
Эксперты NNG кроме этого рекомендуют дизайнерам интернациональных сайтов применять слово «поиск» (либо его перевод) в описательном теге ALT поисковой иконки.
Нестандартное размещение поисковой строки усложняет цифровую интеракцию
Интерфейс некоторых известных сайтов кардинально изменился — веб-маркетологи и дизайнеры именитых ресурсов переместили меню навигации и поисковое окно в левую часть страницы.
Нестандартный интерфейс пользователя заставляет визитёров тратить пара секунд на нахождение поисковой строки, исходя из этого эксперты советуют размещать панель поиска в привычном для пользователей верхнем правом углу веб-страницы.
Единый элемент поиска ухудшает пользовательский опыт
Кликнув на кнопку поиска, человеку приходиться ожидать, пока покажется поисковая строка, искать ее на странице, а после этого кликать на текстовое поле, дабы начать вводить запрос.
Если сравнивать с хорошим полем поиска, интеракция с которым проходит в 1-2 действия, процесс сотрудничества с единой кнопкой поиска существенно дольше, что делается обстоятельством происхождения конверсионного трения.
Практически всем людей не привычны нововведенные графические элементы
Говоря о современных трендах в веб-дизайне, стоит упомянуть значки меню и маркера-карты.
Не обращая внимания на нередкое применение таких иконок в оформлении многих приложений и современных ресурсов, кое-какие пользователи с ними не привычны — вследствие этого эксперты рекомендуют додавать к продемонстрированным выше значкам маркеры с описанием их функций.
Советы по дизайну иконки увеличительного стекла
1. Придерживайтесь применения стандартного окна поиска — как было сообщено ранее, замена поисковой строки одним элементом есть хорошим решением лишь для мобильной версии сайта.
2. Применяйте схематическую иконку увеличительного стекла — люди принимают простые графические элементы стремительнее, чем детальные изображения.
3. Большой значок с громадным внутренним отступом (padding) делает кнопку более заметной и очень плохо.
4. Кнопку поиска стоит оформлять в броских, контрастных цветах.
5. Размещайте элемент для ввода поискового запроса в верхнем правом углу веб-страницы.
6. Кнопка поиска обязана делать 2 функции: вызывать текстовое поле и отправлять поисковой запрос.
7. Применяйте маленькое текстовое поле, которое расширяется по окончании клика.
Такое окно не занимает большое количество пространства совершает процесс ввода информации более эргономичным.
8. Не размещайте иконку поиска наряду с другими кнопками.
9. Пользователям кроме этого сложно отыскать кнопку ввода поискового запроса, если она расположена через чур на большом растоянии от вторых элементов сайта.
10. Текстовое поле должно оказаться рядом с иконкой поиска — человек не должен тратить время на нахождение поля для ввода запроса.
11. Курсор пользователя обязан машинально перемещаться в текстовое поле по окончании клика на значок поиска.
- Как создать качественный интерфейс?
Вместо заключения
Руководящие правила дизайна окон поиска, опубликованные экспертами Nielsen Norman Group в 2011 году, актуальны и сейчас:
Верно выполненная строка поиска — это комбинация заметного текстового поля и яркой кнопки, размещенная в верхней части веб-страницы.
Придерживаясь приведенных в данной статье рекомендаций, вы сможете внедрить на веб-ресурс кнопку с иконкой лупы, не навредив юзабилити интерфейса пользователя.
Высоких вам конверсий!
По данным nngroup.com, image source Andre
Случайные статьи:
Как презентовать дизайн сайтов на Behance
Подборка похожих статей:
-
Как оптимизировать юзабилити иконок интерфейса?
Кроме формирования индивидуальности бренда при помощи цветового оформления и стиля, иконки интерфейса должны прежде всего передавать сущность собственных…
-
5 Советов по оптимизации всплывающего окна (pop-up)
В веб-маркетинге существует достаточно распространенная практика: перед визитёром сайта появляется всплывающее окно (pop up, «поп-ап») с лид-формой,…
-
53 Совета оптимизации конверсии от ррс hero
Источник изображения Быть может, что эта статья покажется вам через чур долгой, но как раз в ней собрано огромное количество советов для упрочнения…
-
11 Советов по оптимизации конверсии b2b целевых страниц
Источник изображения Здравствуйте, дорогие читатели отечественного блога! В отечественной новой статье мы желаем раскрыть вам «тайную формулу успеха» B2B…