Удобное и рентабельное меню на сайте

Удобное и рентабельное меню на сайте

(00:10) Здравствуйте, меня зовут Ткачев Владислав Владимирович, и я являюсь основателем веб-агентства Station. Вы смотрите целую серию мастер-классов, посвящены основам юзабилити. И в сегодняшнем видео мы поговорим об удобном и рентабельном меню на сайте. Как правильно делать меню, чтобы оно было не только удобным, но и соответственно, приносило свой вклад в конверсию вашего сайта.
(00:36) Горизонтальное меню и технические страницы. Вначале стоит рассказать о технических страницах на сайте. Это те самые страницы, к которым человек может обратиться в любой момент путешествия по вашему сайту. К примеру, раздел «о компании», раздел «акции», разделы «контакты», разделы «техподдержка», либо какой-то определенный раздел «гарантии» и так далее. Соответственно, здесь очень важный момент. Частая ошибка, когда в технические страницы сайта выводят новости. Либо, соответственно, к примеру, отдельным разделом отзывы и благодарственные письма. Отзывы и благодарственные письма являются знаками доверия, и непосредственно по ним, как их правильно размещать в интерфейсе, у нас также есть отдельный мастер-класс. Соответственно, да, в данном мастер-классе именно рассмотрим правильное расположение меню, когда оно находится в горизонте, это технические страницы. И немножко поговорим о вертикальном. Соответственно, самый главный момент с горизонтальным меню — это не более 7 блоков, так как человек за первые 10 секунд не ухватывает большее количество элементов. Соответственно, если вы сделаете больше 7 элементов в горизонтальной строке, это приведет к тому, что человеку придется читать каждую вкладку по-отдельности. Довольно таки частая ошибка, особенно на сайтах, посвященных нише туризма. Видели, наверно, когда заходите, и в несколько рядов идет горизонтальное меню. Соответственно, начинаете читать, там, искать страну, в которую хотите отправиться путешествовать.
(02:02) Такой же важный момент, если все-таки в вашем интерфейсе невозможно уйти от данного расположения, делайте их, хотя бы в алфавитном порядке, чтобы человек наиболее быстро смог сориентироваться по начальным буквам, куда дальше двигаться ему, в какой раздел. Соответственно, только технические страницы, об этом рассказал, об ошибках с новостями, отзывами. Выпадающее меню, когда же соответственно его стоит использовать, и когда нет. Но здесь очень важный момент понимание того, где проходит непосредственно линия сгиба вашей страницы, то есть скролинга того, когда человеку придется прокручивать мышкой, чтобы увидеть нижнюю часть. Больше половины людей не прокручивает страницу. Соответственно, когда у вас с боку, к примеру, вертикальное меню, в котором указаны основные услуги или да разбивка по категориям товара находится, уходит более низко, глубоко. К примеру, вы делаете более адаптивный вариант для мобильных устройств. Копирование такого, соответственно, раздела как услуги или товары в технических страницах позволит выпадающему меню обыгрывать абсолютно весь вертикальную, соответственно, навигацию в пределах первого экрана. Во-первых, это позволяет не только человеку без скролинга перемещаться по вашему сайту. Второй момент, его также можно использовать и с коммерческой целью, то есть если у вас остается какая-то зона большая пустая, можно туда предложить какую-то акцию. И тем самым большее внимание пользователей во время да там серфинга, путешествия по вашему сайту, сковывает на какой-то определенный продукт или услугу, которая наиболее выгодна с точки зрения продаж для вашего бизнеса.
(03:49) Один из еще важных элементов — это поиск. Поиск несет в себе на самом деле очень золотой запас не только для конверсий, но и для развития сайта. О нем также есть целый отдельный мастер-класс, посвященный именно данному элементу интерфейса. Соответственно, вот примеры такого выпадающего меню на сайте озон. Как вы видите, соответственно, разбивка идет электроника и так далее, и как вы видите, с правой частью показываются какие-то товары дня. И при всем при этом идет также разбивка по брендам. Плюс к тому, что сразу можно переместиться в брендовую зону и также соответственно, они получают дополнительный обогрев от этих логотипов с точки зрения маркетинга.
(04:22) Вертикальное меню. Ну, соответственно, основное — это выравнивание шрифта по левому краю, это тоже ментальная модель, люди читают слева направо. Соответственно когда вы выравниваете текст слева направо даже в своих коммерческих предложениях и так далее он на самом деле становится более читабельным. Это более, соответственно, более симметрично смотрится с точки зрения верстки сайта. Нежелательно, чтобы блок меню выходил за границы первого экрана, то, как раз таки, о чем рассказал. Если выходит, один из способов решить данную проблему — это выпадающее меню из технических страниц. Выстраиваем товары по приоритету. Тоже один из интересных инструментов манипуляции с пользователями, когда к верху к низу выстраиваете товары в том положении, которое вам наиболее выгодно с точки зрения соответственно, продаж. Соответственно, тем самым, как в да самой первой строчке всегда как бы да обращают на них наибольшее внимание, если оно у вас соответственно более длинное.
(05:20) Следующий момент — это возможность использования инфографики в них, то есть вот ярлычков png. По поводу инфографики также есть в самом первом нашем мастер-классе довольно таки много информации. Но от себя хочу добавить, что данная инфографика здесь будет больше играть роль с точки зрения дизайна, нежели это будет какая-то разгрузка с точки зрения удобства пользования вашим сайтом или приложением. Также еще один из вариантов — сгруппировать вертикальное меню. Это деление по группам, то есть, к примеру, когда вы там, к примеру, ванные. Ванные бывают чугунные, акриловые и так далее. Можно просто их совместить да, в слоях CSS, то есть раздел «ванные». Человек кликает на ванные и у него распускается меню, то есть тем самым, соответственно, его можно поджать, чтобы он оставался в пределах первого экрана. И всегда помните, что вертикальное меню — это отчасти как указатель в торговом центре, он всегда в принципе должен как на потолке идет этот указатель то же самое у вас и здесь. Это такая быстрая, быстрый ориентир по витринам, быстрая навигация. Не всегда выгодно скрывать ее в технических страницах.
(06:20) На этом у меня все, спасибо за внимание. Делайте навигацию на сайте максимально удобной для пользователей, это принесет свои плоды в конверсии и станет более рентабельным ваше продвижение в интернете. Ставьте лайки, за репосты отдельное огромное спасибо. Если остались вопросы, можете писать их к нам на почту, которую видите на своих экранах, либо в комментариях к данному видео. Подписывайтесь на наш канал на YouTube. Спасибо!