Промежуточные страницы в иерархии сайта.

Перевод статьи:  Intermediary Pages in a Site Heirarchy.
Автор:  Chris Coyer.

У меня как-то был один читатель, который задал интересный вопрос:

Если, допустим, имеется многоуровневая навигация типа "About > Company, Founder, History" («О нас > Компания, Учредитель, История»), то насколько, по вашему мнению, важным моментом будет наличие реальной страницы для элемента верхнего уровня такого меню?

На самом деле врядли вы найдете что-нибудь достойное размещения на отдельной странице "About", чему не нашлось бы места на следующих трех дополнительных страницах. Не следует ли просто после щелчка по ссылке "About" перенаправить пользователя на страницу "Company"? Или может такой страницы как "Company" вообще не должно быть, а ее содержимое можно переместить на страницу "About"?

Возможно существуют определенные практические наработки в этом вопросе, сформированные годами?

Я набросал подобную ситуацию примерно вот таким образом:

Пример многоуровневого выпадающего меню.

В принципе, проблема заключается в том, что один из элементов меню верхнего уровня, т.е. "About", практически бесполезен, однако он все-таки нужен для группирования ссылок на подчиненные ему страницы.

Я считаю, что без ссылки "About" просто не обойтись. Вопрос лишь в том, как с ней быть?

Возьмите и сделайте промежуточную страницу.

То есть теперь у вас будет родительская ссылка:

http://website.com/about/

И ссылки на второстепенные страницы:

http://website.com/about/company/

http://website.com/about/founder/

http://website.com/about/history/

Хорошо, как было сказано, нет ничего «достойного» для размещения на странице "About" («О нас»), но это всего лишь вопрос полемики о контенте. Вы, к примеру, могли бы создать дополнительный материал, ознакомляющий пользователя с другим важным контентом. Или представить тщательно продуманную цепочку ссылок, подталкивающую пользователя к дальнейшему углублению в иерархии сайта. В конце концов, покажите на этой странице некоторые изображения или сниппеты из страниц более низкого уровня. Уверен, что вы что-нибудь придумаете.

Сделайте редирект промежуточной страницы.

Имея ссылку:

http://website.com/about/

следует перенаправить ее на:

http://website.com/about/company/

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

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

Боковое меню - закладки.

Обойдитесь без иерархии.

Если на самом деле нет никакой необходимости в родительской странице, тогда может быть стоит и в самом URL явно показать, что ее просто нет:

http://website.com/about-company/

http://website.com/about-founder/

http://website.com/about-history/

Остается лишь использовать редирект для навигационного элемента верхнего уровня.

Разместите все на одной странице.

Действительно ли разделение этих страниц имеет для вас значение? Вы могли бы воспользоваться построенным на вкладках шаблоном страницы, разместив все необходимое содержимое в рамках одного документа. Либо просто разработать одну длинную страницу, я думаю сеть как-нибудь справится с этим =).

Тогда URL адреса будут содержать хэш-символы для перехода на соответствующее место страницы (или вкладку):

http://website.com/about/#company/

http://website.com/about/#founder/

http://website.com/about/#history/

Лучшие практические советы.

Я абсолютно не уверен, что любой из этих способов в чем-то превосходит какой-то другой. На мой взгляд, необходимые практические рекомендации предпочтительнее было бы представить в виде запретов:

  • Если вы остановились на определенном методе, то не следует через, скажем, месяц переделывать все по-другому. Достойный URL никогда не изменяется.
  • Не делайте ваше выпадающее меню 100% JavaScript зависимым.
  • Не нужно делать пункт меню "About" («О нас») в виде бессмысленной ссылки, не являющейся по-сути ссылкой, только потому, что вы еще с этим не определились. Сделайте ссылку на какую-нибудь страницу или выполните редирект.

Обзор комментариев

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

Мнения разнятся по поводу типа события, привязываемого к элементу верхнего уровня навигации. Открытие выпадающего (drop-down) меню при наведении мыши (hover) в настольных браузерах имеет свой минус, так как на устройствах с тачскрином, мыши, как таковой просто не существует, а значит в этом случае для открытия меню пользователь скорее всего просто вынужден будет коснуться (т.е. кликнуть) ссылки верхнего уровня и это может привести как к переходу на так называемую промежуточную страницу (если она все-таки предусмотрена), так и к ее недоступности, если при касании разработчик предпочтет «выпадение» элементов меню следующего уровня, что, как мне кажется, более правильно. Как первый, так и второй вариант не всегда могут совпадать с намерениями пользователя. Для решения этой проблемы существуют, конечно, отдельные мобильные версии ресурсов, однако они не всегда оправданы.

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

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

Вот радикально противоположный случай. Здесь разработчик настаивает на том, что так называемые hover-меню вообще являются ошибкой, даже в случае с десктопными браузерами, причем не голословно, а на основе результатов собственного юзабилити тестирования. То есть раскрытие меню должно происходить исключительно после кликов по элементам верхнего уровня, не смотря на то, что такой подход требует использования JavaScript, но, как утверждается, в очень легкой, практически незаметной форме. Хотя здесь степень задействования, на мой взгляд, значения не имеет, важен сам факт использования JavaScript, так как при отключенной поддержке скриптов меню будет просто недоступно. Зато у такого способа свой плюс — если уж работает, то на всех устройствах. Кроме того в этом случае значительно упрощается процесс обслуживания и модернизации кода. Смелое решение, обладающее достаточным простором для творчества. При повторном клике по элементу главного меню можно, допустим, скрывать (сворачивать) подменю или же все-таки переходить на промежуточную страницу, предварительно оформив уже активированный ранее топовый элемент меню соответствующим образом. То есть дать понять пользователю, что теперь это тоже ссылка, как и появившиеся после первого клика подэлементы, подчеркнув лишь его старшинство в навигационной иерархии величиной или жирностью шрифта.

Основным правилом, на которое автор указал в своей статье, является последовательность и постоянство вашего выбора. Однако это утверждение несколько противоречит предложенному автором же методу решения проблемы путем оформления страницы в виде закладок. Врядли с уверенностью можно сказать, что количество закладок не будет неминуемо увеличиваться с продвижением пользователя вглубь сайта или же, что в будущем не появится какое-нибудь достаточно длинное название, которое будет уродливо обрезаться правым краем закладки. Что тогда? Придется все менять? Или не все, но, так или иначе, есть возможность столкнутся с подобными ограничениями. Одним словом, использование закладок подходит не для каждой страницы. Этот случай, скорее всего, относится к вопросу организации страницы, а не навигации верхнего уровня.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *