Энтони Ценг написал о боковой панели меню.
— Добавьте иконки, чтобы ускорить распознавание пунктов меню;
— Расстояние между пунктами должно быть не слишком маленьким, чтобы пользователи реже нажимали не туда;
— Выделяйте пункт при наведении курсора;
— Если пунктов много, группируйте их (например, с помощью разделителей). Группы можно озаглавить;
— В сочетании с таким меню поле поиска и информацию о пользователе часто располагают в верхней части экрана;
— Если в верхней части страниц есть навигация и другие элементы управления, поиск и информацию о пользователе можно переместить на панель меню: поиск — под логотип, пользователя — в нижнюю её часть;
— На планшетах боковую панель можно сделать раздвижной. В уменьшенном состоянии на ней будут: иконки пунктов меню, поиска, фото пользователя и контрол увеличения размера панели.
In English. #sidebar #menu
— Добавьте иконки, чтобы ускорить распознавание пунктов меню;
— Расстояние между пунктами должно быть не слишком маленьким, чтобы пользователи реже нажимали не туда;
— Выделяйте пункт при наведении курсора;
— Если пунктов много, группируйте их (например, с помощью разделителей). Группы можно озаглавить;
— В сочетании с таким меню поле поиска и информацию о пользователе часто располагают в верхней части экрана;
— Если в верхней части страниц есть навигация и другие элементы управления, поиск и информацию о пользователе можно переместить на панель меню: поиск — под логотип, пользователя — в нижнюю её часть;
— На планшетах боковую панель можно сделать раздвижной. В уменьшенном состоянии на ней будут: иконки пунктов меню, поиска, фото пользователя и контрол увеличения размера панели.
In English. #sidebar #menu
www.uprock.ru
Как сделать боковую панель меню более удобной?
Боковая панель меню — идеальный компонент навигации веб-приложений. Она раскрывается на всю ширину экрана, чтобы пользователям было легче ориентироваться.
Энтони Ценг написал, на что можно заменить большое меню, состоящее из нескольких колонок.
— Недостатки такого меню: большой объём информации, сложно выделить заголовки категорий и ссылки для перехода ко всем товарам категории, ширина текста в колонках ограничена, ссылки для перехода в подкатегории мелкие, в них сложно целиться;
— Меню можно разделить на горизонтальные блоки. В каждом будет заголовок (название категории) и ссылка «Посмотреть все», а ссылки на подкатегории можно сделать горизонтальным списком чипсов;
— Название категории может быть крупнее и длиннее, ссылка «Посмотреть все» выделяется расположением, область нажатия у чипсов больше;
— Длинные горизонтальные списки подкатегорий сканировать проще, чем вертикальные (есть исследования), взгляд пользователя всегда движется слева направо;
— Появляются дополнительные возможности для оформления категорий такого меню;
— Его проще адаптировать для мобильных. Достаточно добавить горизонтальную прокрутку для чипсов, не уместившихся на экране.
In English. #menu
— Недостатки такого меню: большой объём информации, сложно выделить заголовки категорий и ссылки для перехода ко всем товарам категории, ширина текста в колонках ограничена, ссылки для перехода в подкатегории мелкие, в них сложно целиться;
— Меню можно разделить на горизонтальные блоки. В каждом будет заголовок (название категории) и ссылка «Посмотреть все», а ссылки на подкатегории можно сделать горизонтальным списком чипсов;
— Название категории может быть крупнее и длиннее, ссылка «Посмотреть все» выделяется расположением, область нажатия у чипсов больше;
— Длинные горизонтальные списки подкатегорий сканировать проще, чем вертикальные (есть исследования), взгляд пользователя всегда движется слева направо;
— Появляются дополнительные возможности для оформления категорий такого меню;
— Его проще адаптировать для мобильных. Достаточно добавить горизонтальную прокрутку для чипсов, не уместившихся на экране.
In English. #menu
Юрий Марьенко написал об основных типах навигации на сайтах.
— Статичное меню в начале страницы. Если на странице содержимого много, пригодится кнопка возврата наверх, чтобы удобно было возвращаться к меню;
— Фиксированное меню — всегда остаётся на виду при скроле страницы. С ним в любой момент можно перейти в другой раздел сайта, но оно может мешать изучать содержимое страницы;
— Сочетание большого статичного и небольшого фиксированного меню — фиксированный вариант отображается при скроле, не занимает много места по вертикали и даёт быстрый доступ к самым важным разделам;
— Бургерное меню (статичное или фиксированное) — по нажатию на иконку бургера отображает список разделов. Хорошо работает на мобильных сайтах за счёт компактности. Часто используется на популярных сайтах (с большими каталогами), так что паттерн должен быть хорошо знаком пользователям;
— Многоуровневое меню — отображает основные разделы (4–7 пунктов), по нажатию на которые можно увидеть подменю с большим количеством подразделов. Подходит компаниям с несколькими направлениями бизнеса, узкоспециализированным интернет-магазинам;
— Меню помогает посетителям быстро понять, о чём сайт.
#navigation #menu
— Статичное меню в начале страницы. Если на странице содержимого много, пригодится кнопка возврата наверх, чтобы удобно было возвращаться к меню;
— Фиксированное меню — всегда остаётся на виду при скроле страницы. С ним в любой момент можно перейти в другой раздел сайта, но оно может мешать изучать содержимое страницы;
— Сочетание большого статичного и небольшого фиксированного меню — фиксированный вариант отображается при скроле, не занимает много места по вертикали и даёт быстрый доступ к самым важным разделам;
— Бургерное меню (статичное или фиксированное) — по нажатию на иконку бургера отображает список разделов. Хорошо работает на мобильных сайтах за счёт компактности. Часто используется на популярных сайтах (с большими каталогами), так что паттерн должен быть хорошо знаком пользователям;
— Многоуровневое меню — отображает основные разделы (4–7 пунктов), по нажатию на которые можно увидеть подменю с большим количеством подразделов. Подходит компаниям с несколькими направлениями бизнеса, узкоспециализированным интернет-магазинам;
— Меню помогает посетителям быстро понять, о чём сайт.
#navigation #menu
vc.ru
Как главное меню сайта увеличивает конверсию посетителя в покупателя? — Маркетинг на vc.ru
Давайте подумаем, что мы можем для этого сделать: