Подскажите как лучше расположить пункты меню

Статус
В этой теме нельзя размещать новые ответы.

Rudoy1488

Постоялец
Регистрация
29 Июл 2013
Сообщения
135
Реакции
65
Господа, нужен ваш свежий взгляд и опыт профессионалов.
Верстаем сайт, дело дошло до наполнения меню ( виды выполняемых работ ) , как и в любой областе есть примерно 5 основных направлений, а остальные второстепенные и редкие. Так вот вопрос как лучше разместить эти 5 пунктов, в первом столбце или в верхней линии меню. Делить столбцы на основные подразделы, а в них уже ранжировать поп популярности, намеренно отказались (по многим причинам). Наверное большинство дизайнеров скажет что лучше размещать в первом столбце, но сайт делаем для людей, а не для дизайнеров и программистов) Сами понимаете, тут надо мыслить откинув свой опыт и тд. Так что решил спросить совета
2014-07-21 15_24_18-Промышленный альпинизм Санкт-Петербург.jpg
 
Сейчас все больше стал замечать и не замечать, что на многих сайтах меню стало горизонтальным с много раскрывающимися подменю(только главное чтобы не больше двух расрываний т.е. раздел - подраздел - тема, а то вообще не удобно). Да и как то самому даже удобно, и физиологически читаем мы справа налево, а не как в Китае с Японией сверху вниз :D Ни вкоем случае ненадо выставлять подразделы по популярности - искать, что нужно не удобно, лучше будет если по алфавиту.
 
Последнее редактирование:
Если сайт делаете для людей, лучше всего минимализм подойдёт. То есть не стоит использовать всякие там раскрывающие подменю и прочее.
То что сейчас на скрине вполне терпимый вариант, только лучше сделать сортировку по алфавиту и добавить маленькие тематические иконки что-бы было легче найти нужный раздел.
Ли бы сделать разные категории и разные цвета, вот и всё. Так людям будет легче ориентироваться.
 
5 пунктов можно обозначить текстом (жирный, курсив, в конце концов можно как-то выделить цветом)

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

При этом, даже если второй или третий пункт будет выделен цветом или как-либо ещё, порядок восприятия всё равно будет тем же:
eb219e9da1f0530c61529c98041b.png

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

Разумеется, никто не исключает отход от правил и искусственное принуждение восприятия делать то, что нужно нам, но всегда нужно понимать, что это нарушает когнитивную логику восприятия и с определённой вероятностью информация будет считана ПОСЛЕ искуственно-выделенного пункта, а информация до него будет утеряна для восприятия вовсе:
5927c4c30d06559ffa4e3c6d4a79.png

Конкретный случай из ОП-поста может быть решён несколькими возможными путями, например так:
e8ca228692c582af02c736bdd2f4.png

Расположение приоритетных разделов в горизонтальную линию над вторичными разделами потребует от вас деления на то количество колонок, какое будет у ваших приоритетных разделов, иначе сетка поедет, и восприятие опять будет ухудшено:
530beef12da67fa8a8923e74b4e6.png

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

Не стоит бояться проблем с выпадающими пунктами на тачевых устройствах, так как обычно для выпадающего пункта делается дублирование выпадения по тапу. Разумеется, выпадающие пункты должны нести только одну функцию — показывать выпадающее меню, делать их ещё и ссылками внутрь разделов — недопустимо. Бояться логической сортировки вместо алфавитной или какой-либо ещё тоже не стоит, ведь ваша цель — предоставить посетителям наиболее удобный доступ к интересующей их информации, и если разделы, интересующие 90% ваших посетителей, будут расположены первыми (а не по алфавиту или как-то ещё), за это вам тоже только скажут спасибо, ведь эти 90% людей будут находить то, что им нужно, гораздо быстрее и эффективнее.

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

Надеюсь, это поможет :)
 
Сейчас будет много текста:)
Вышеописанное справедливо, но в наше время при таком количестве информации, веб страницы теперь просматриваются, а не читаются. Если лет 5-7 назад, человек посещал 2-4 ресурса в день, то сейчас 10-15, а времени при этом у него больше не стало. Конечно это не весомый аргумент и не какая-то подведенная статистика, это я просто взял из головы и основываюсь по своим личным наблюдениям. Как показывает практика, подобное тоже имеет шансы на существование:

521a72914f93a860f35a54a2b6817595-full.jpg

На одном сайте в верхнем горизонтальном меню из типичных 6 разделов: о нас — доставка — оплата — еще что-то, выделили болдом раздел "коллекции" и браво, количество кликов значительно увеличилась. Так же следует смотреть по тексту, если я буду искать Мойка окон, то зрение будет цепляться за все слова на букву М или (Мо...a о...н) и если в списке все слова будут начинаться на М, поиск нужного раздела усложнится. Вот как человек читает:
По рзелульаттам илссеовадний одонго анлигйсокго унвиертисета, не иеемт занчнеия, в кокам пряокде рсапожолены бкувы в солве. Галвоне, чотбы преавя и пслоендяя бквуы блыи на мсете. Осатьлыне бкувы мгоут селдовтаь в плоонм бсепордяке, все-рвано ткест чтаитсея без побрелм. Пичрионй эгото ялвятеся то, что мы чиатем не кдаужю бкуву по отдльенотси, а все солво цликеом.
А просматривает еще быстрее. Конечно, все это справедливо не для каждого, под одну гребенку всех не получится затащить, к примеру многие просматривают журналы как положено, с первой страницы, а некоторые с последней, я встречал некоторые смелые издания учитвающие привычку последних, благо на веб страницах еще такого нет:D и быть не может!

С выпадающими списками я бы поспорил. Неспроста появились лендинги с малым объемом текста и без всяких разделов с кучей "не нужной" информации, они набирают большую популярность благодаря своей простоте и эффективности. Посетитель предпочитает скрол вместо клика, три-четыре клика и он ушел с сайта. Про пагинацию уже начинаем забывать, и все благодаря планшетам, а вы предлагаете еще лишний раз тапать по тачу. Главная страница сайта, если она входная будет, вместо типичного пункта меню работы, полноценные блок в теле страницы с услугами (красивое оформление и картинки приветствуются). Многие заходят на страницу скролят вниз и уже только после этого "насилуют" меню, это при том что на домашней так ничего полезного не нашли, кроме как Добро пожаловать мы вам рады бла бла бла. Если есть возможность сделать несколько вариаций и потестировать, потому что все зависит от сферы деятельности, а точнее от ее аудитории и источника трафика
 
Можно сделать только верхнее меню в стиле мега меню, и доделать так называемый "sticky header" чтобы меню всегда было под рукой.
 
Выскажу свежий взгляд простого обывателя (без всяческих профессиональных навыков в юзабилити). Как-то органичней смотрится и больше задерживается взгляд именно на левой колонке, на услугах сверху вниз.
 
Есть же простые правила.
1. Степень вовлечённости и Послойная последовательность подачи информации.
2. Воздух/разряженность.
3. Модульная сетка.
По-сути, Для просмотра ссылки Войди или Зарегистрируйся изложил всё это в картинках.

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