Навигационная панель инструментов и особенности ее расположения на сайте

Posted on by riasevastopol

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

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

  • 5 обычных неточностей навигации сайта

Список инструментов

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

  • форма контакта с организацией (Contact us);
  • иконки социальных сетей, разрешающие подписаться на обновления социальных аккаунтов компании (Follow us);
  • языковая панель, которая предоставляет возможность поменять язык сайта;
  • форма входа на регистрации и сайт;
  • команда распечатать страницу (Print);
  • команда сохранить страницу;
  • команда поделиться страницей в соцсетях;
  • форма подписки на интернет-ресурс;
  • инструмент, разрешающий поменять размер отображаемых на странице шрифтов;
  • возможность открыть страницу в отдельном окне.

Навигационная панель инструментов и особенности ее расположения на сайтеpХотя инструмент «Корзина» есть базисным, определяющим элементом сайтов коммерческой направленности, рекомендуется, дабы иконка этого инструмента кроме этого размешалась в навигационной панели инструментов. То же самое относится и к второй частенько применяемой функции, как «Поиск».

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

  • Из-за чего хорошая навигация действеннее функции поиска на сайте?

Размещение

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

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

Попадая на новый веб-ресурс, мы инстинктивно ищем в правом верхнем углу форму регистрации либо входа

Твитнуть цитату

Панель инструментов на основной странице сайта IBM находится в правом верхнем углу, в середине страницы (иконки социальных сетей) и в футере (ссылка Contact Us).

Правый верхний угол подробно.

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

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

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

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

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

  • Как оптимизировать навигацию вебмагазинов, либо 7 раз отмерь

Советы

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

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

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

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

Твитнуть цитату

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

4. Крайне важно сделать хорошими друг от друга группу иконок, каковые ведут на социальные профайлы организации (Follow Us), и группу иконок, каковые разрешают поделиться каким-либо материалом в соцсетях (Share this, Поделиться). Визуально они весьма похожи, но, как осознаёте, отличаются по функции.

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

6. Для отображения применяемого языка достаточно указать его наименование знаками соответствующего алфавита.

7. Формы подписки на ресурс и входа на сайт должны размешаться рядом между собой.

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

Примеры размещение навигационной панели инструментов:

Панель General Electric.

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

The Вашингтон Пост: шапка.

The Вашингтон Пост: футер.

  • Из-за чего навигация неудобна для визитёров вашего сайта?

Заключение

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

Высоких вам конверсий!

По данным nngroup.comImage source: Kwok-Leung Lee

Случайные статьи:

15. Bootstrap навигационная панель


Подборка похожих статей:

riasevastopol

More Posts