Алексей Рытов
En Ru
 
   
 

четверг, 24 сентября 2009 г.

Активные и субактивные пункты меню

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

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

В данной статье речь пойдет именно о меню. Т.е. об иерархичной структуре с единственным отношением (один пункт меню — одна страница). Множественные отношения — теги — под данное рассуждение не попадают.

Активный пункт меню

Предположим, что у вас есть сайт с меню из тех пунктов:

Новости Старости Странности

Активный пункт меню должен выделяться. Это поможет пользователю помнить (или понять, если он пришел по ссылке сразу на внутреннюю страницу), в каком именно месте сайта он находится. В нашем примере, когда пользователь щелкнет по пункту «Новости», то меню станет таким:

Новости Старости Странности

Активный пункт претерпел изменения:
  1. Графически выделен — другой цвет фона и полужирное начертание шрифта;
  2. Не залинкован — ссылка убрана, т.к. нет смысла давать ссылку на текущий URL.

Субактивный пункт меню

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

Состояние пункта меню в данном случае я называю субактивным:

Новости Старости Странности

Субактивный пункт сочетает в себе черты активного и пассивного пунктов:
  1. Графически выделен другим цветом фона — это черта активного пункта;
  2. Залинкован и не выделен полоужирным — это черты пассивного пункта.

В результате, пользователь, попав на внутреннюю страницу новости, с одной стороны поймет, что он находится в разделе «Новости», с другой — сможет перейти в корень раздела.

Ошибки в построении меню

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

Но и в данном простом вопросе встречаются ошибки:

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

Где это НЕприменимо

Меню бывают разные. Но все же описанный выше подход довольно универсален и подоходит для большинства случаев. Даже в сложном меню с табами и подпунктами разных видов принцип пассивный-активный-субактивный дает хорошие результаты и сильно улучшает навигацию.

Могу припомнить только две ситуации, где данный принцип неприменим:

  1. Выпадающее меню — в этом случае рекомендую для компенсации применять хлебные крошки;
  2. Пункт меню пропадает на странице назначения. Представьте, что кликнув по пункту «Новости», вы попадете на сайт с другим оформлением и совершенно другим меню. Такое бывает, впрочем, злоупотреблять этим не стоит.

Выводы и картинка

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

Я решил, что в каждом посте буду вставлять хотя бы одну картинку. Т.к. в процессе написания статьи я облошелся без картинок, то размещу ее тут. Как говорит старая дизайнерская поговорка, если не знаешь, что нарисовать, нарисуй яблоко. А что, яблоко — это же важная часть нашего с вами меню!

Ах, эти интерфейсы

Этот блог — рассуждения о пользовательских интерфейсах в различных их проявлениях и веб-проектах.

Блог построен на движке Google

 
  
Алексей Рытов © 1977 :-)  
Домой
  Для писем и газет: aleksritovgmailcom