Как сделать боковую панель меню более удобной?
Аудио перевод статьи
Боковая панель меню — идеальный компонент навигации веб-приложений. Она раскрывается на всю ширину экрана, чтобы пользователям было легче ориентироваться.
Наличия боковой панели меню недостаточно для создания хорошего опыта взаимодействия. Вам следует оптимизировать ее, чтобы посетителям приложения было удобнее ею пользоваться. Большинство дизайнеров не знают, как это сделать, потому что при разработке оптимальной навигации они не учитывают четыре следующих фактора:
- Узнаваемость.
- Доступность для нажатия.
- Четкая структура.
- Оптимизация экранного пространства.
Как только вы проработаете боковую панель меню по всем четырем направлениям, вы получите оптимальную навигацию, которой будет приятно пользоваться. Чтобы достичь этого, вам следует выполнить действия, о которых мы поговорим в этой статье.
Повышение уровня узнаваемости
Прежде чем пользователи кликнут на пункт меню, им нужно прочитать его название.
Однако можно упростить распознавание каждого пункта путем добавления к нему простых и понятных иконок. Таким образом, при просмотре меню пользователи узнают пункт по иконке до того, как прочитают его название.
По мере того, как люди будут использовать меню все больше и больше, они будут ассоциировать каждую иконку с определенным пунктом и смогут быстрее находить элементы. Убедитесь, что иконки простые и понятные. Тогда пользователи смогут с первого взгляда понять их значение.
Доступность для нажатия
Доступность для нажатия — это предоставление пользователю возможности быстро и легко прикасаться к элементам. Пункты меню следует располагать на большом расстоянии друг от друга, чтобы люди могли выбрать нужный элемент и при этом случайно не кликнуть на другой. Достаточно большое количество свободного пространства позволяет пользователям легко нажать на пункт меню, не затрагивая соседние элементы.
Текст также следует сделать достаточно большим, чтобы сенсорные цели были более заметными.
Добавление эффекта наведения элементам меню также поможет сообщить пользователям, что они находятся у цели. Получение этой обратной связи позволяет им кликать на элементы, которые визуально выделены цветом.
Четкая структура
Чем больше пунктов меню, тем сложнее его сканировать. Чтобы упростить задачу, для категорий следует использовать группировки и разделители.
Найдите общие черты между элементами и сгруппируйте их соответствующим образом. Дайте каждой группе название и используйте разделитель. Теперь, когда люди будут просматривать элементы, они смогут визуально сегментировать их на разделы и быстрее находить то, что им нужно.
Оптимизация экранного пространства
Проблема боковых меню заключается в том, чтобы понять, где лучше разместить учетную запись пользователя и панель поиска. Большинство дизайнеров предпочитают размещать их в верхней части экрана. Однако, если у вас есть дополнительная навигация, эта область может выглядеть перегруженной.
После того, как пользователи щелкнут на пункт меню на боковой панели, сверху отобразится ряд вкладок, который станет дополнительной навигацией.
Панель поиска и учётная запись пользователя в сочетании с этими вкладками может сделать верхнюю часть экрана слишком перегруженной контентом. На странице можно навести порядок, переместив элемент учетной записи пользователя и поиск на боковую панель.
Разместите элемент учетной записи пользователя вниз, а строку поиска под логотип. Так вы упростите к ним доступ. Теперь для заголовков пунктов меню, вкладок и кнопок-призывов к действию у вас будет больше экранного пространства наверху. В результате пользователи смогут находить нужные им вкладки. При этом другие элементы не будут конкурировать за их внимание.
Для планшетных устройств место на экране имеет решающее значение. Их размеры меньше десктопных, поэтому, чтобы сэкономить место, боковую панель можно сделать выдвижной.
Поместите иконку сворачивания (стрелка с полосой) рядом с логотипом, чтобы пользователи могли скрывать названия пунктов меню, но при этом иконки пунктов меню продолжат оставаться видимыми. В результате у пользователей остается место для просмотра большего количества контента с одновременным доступом к боковой панели.
Они могут нажимать кнопку сворачивания, чтобы освободить место на экране, когда им это необходимо.
Четыре фактора, влияющие на создание оптимальной навигации
Всякий раз при разработке боковой панели меню, учитывайте эти четыре фактора. Они направлены на повышение удобства использования сайта. Люди должны иметь возможность без труда прикасаться к элементам, легко сканировать информацию, быстро распознавать названия и получать беспрепятственный доступ к элементам меню. Когда у них все это будет получаться, это будет означать, что боковое меню является максимально удобным в использовании.
Боковое меню для сайта | сквозное меню | меню услуг сделать
Выбор рубрики → Управление сайтом → Вспомогательное боковое меню сайта
Основное меню
Страницы сайта
Вспомогательное боковое меню – дополнительный вид навигации на сайте, который дает быстрый доступ с важной информации, например, и идельано подходит для вывода меню Услуги, Направления деятельности и т.
д. Ссылки можно давать на любые ранее созданные страницы: текстовые, фотогалерею, статьи, формы обратной связи и т.д.
Вспомогательное меню входит в основной модуль и отдельно не тарифицируется и подключать его в «Конфигурации» не требуется.
Левое или правое меню сайта?
Вспомогательное меню принято размещать слева от основной информации, именно такое решение является сейчас общепринятым и привычным для посетителей, поэтому данный модуль чаще всего называют «
Сквозное меню
Модуль «Вспомогательное меню» на вашем сайте может быть только одним, его можно сделать «сквозным» через все разделы сайта или настроить его присутствие на отдельных разделах, в том числе, и на главной, что также позволяет модуль «Расположение».
Структура вспомогательного меню
Перед тем, как начать создавать вспомогательное меню, продумайте его структуру. В сервисе placemark.ru предусмотрено 2-х уровневое меню, т.к. по правилам конверсии и удобства пользования не рекомендовано делать более глубокое вложение страниц в подменю.
Вспомогательное меню – динамическое, т.к. при нажатии на верхний раздел «открываются» подразделы, съезжая вниз и раскрывая весь список подразделов.
Вопрос. У меня не показывается вспомогательное меню после его настройки.
Чаще всего вспомогательное меню не показывается, т.к. оно не выведено через модуль «Расположение».
Как настроить вспомогательное меню
Ссылки во вспомогательном меню могут вести на любые страницы вашего сайта: текстовые, новостные, страницы фотогалереи, отзывов и т.д.
В модуле «Вспомогательное меню» имеется таблица с информацией обо всех опубликованных или скрытых разделах.
Здесь вы видите: заголовок верхнего меню, цифровое отображение количества вложенных подразделов, адрес страницы, на которую ссылается данный пункт меню; переключатель публикации; опции редактирования, удаления и изменения.
При нажатии на «Заголовок» меню – откроется дерево вложенных подменю.
Как поменять последовательность разделов
Чтобы поменять последовательность разделов основного меню или подменю, просто «схватите» мышкой пункт меню и перетащите в нужное место. Это действие даже не требует сохранения и применяется автоматически. Чтобы увидеть изменения на самом сайте, просто обновите страницу сайта.
Добавление меню и подменю
Теперь рассмотрим добавление и редактирование раздела.
1. Чтобы добавить новый раздел, щелкните по кнопке «Добавить пункт меню
2. В поле «Название пункта меню» нужно вписать название раздела, именно в таком виде пункт меню будет отображаться на вашем сайте.
3. В следующем поле «Пункт меню ведет на страницу» вставьте ссылку, нажав на кнопку «Вставить из структуры сайта«, в ней найдите нужную страницу и примените свой выбор. И тогда пункт меню будет вести на нужную страницу.
4. Поле «Пункт меню находится в разделе» оставьте без изменений, если данный создаваемый раздел является верхним, если вы хотите
Переключатель публикации позволяет выбрать — отображать или же скрыть пункт меню на сайте.
Как задать свое название для Вспомогательного меню
Перейдите в модуль «Настройки / Вспомогательное меню»
или, просто нажав на кнопку быстрого доступа к настройкам данного модуля.
И впишите нужное название в поле «Заголовок меню».
Сохраните изменения.
Основное меню
Страницы сайта
Была ли эта статья полезной?
данетСпасибо, ваша оценка крайне важна для нас
Нам очень важно знать ваше мнение, пожалуйста напишите нам какую именно информацию вы не нашли в данной статье, мы обязательно дополним ее и отправим вам ответ письмом.
ваше имя email Ваши замечания Подтверждаю свое согласие с политикой в отношении обработки персональных данных
Лучшие примеры веб-сайтов и бесплатные дизайны боковой панели
Сделано в Webflowбоковая панельAllAnimationInteractionsCMSEcommercePortfolio
Наиболее понравившиеся
Только клонируемые сайты Продемонстрируйте свой сайт Подробнее Sticky Side bar w/ Flex Noah Raskin Подробнее T.