—»     —»   Веские причины прекращения применения вертикального меню навигации
  Раздел: Меню и Навигация   Комментариев: 4  

Веские причины прекращения применения вертикального меню навигации



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

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

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

Это может обескуражить архитектуру информации

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

Промышленный пластик Thora

Веские причины прекращения применения вертикального меню навигации

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

И только после прочтения содержимого сайта можно понять, что они и производители, и установщики, и ремонтники. Но ведь эту всю информацию можно было разместить в виде навигации с ссылками типа «Производство», «Ремонт» и т.д. – вместо того, что у них там: «Системы влажных процессов», «Корпусы» и «Распределение воздуха». Это позволило бы дальше развить сайт за счет горизонтальной навигации, и обеспечило бы более организованную структуру сайта, которая не была бы глубиной всего лишь в одну страницу.

Дизайн должен основываться на тщательном анализе содержимого

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

Джеффри Зельдман в процессе анализа содержимого перед началом работы над дизайном.

Веские причины прекращения применения вертикального меню навигации

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

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

Оно попусту растрачивает место на дисплее

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

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

Признание ограниченности

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

Dan Conaway

Веские причины прекращения применения вертикального меню навигации

Хотя на сайте Dan Conaway (который выше) есть пару нареканий по поводу удобства, применение горизонтального меню позволяет сфокусироваться на области с важным содержимым или на предоставляемых услугах. На этом сайте посетитель заостряет внимание на этих больших элементах, но в то же время с легкостью может найти основное меню навигации в самом верху страницы.

WebDesignGuys

Веские причины прекращения применения вертикального меню навигации

На сайте WebDesignGuys (который выше) все внимание сконцентрировано на основной их деятельности – на услугах и продукции. И сразу же посетитель может понять, что компания предоставляет доступные варианты дизайнов, а также разработку CMS и интернет-магазинов.

Тем временем такие функции, как просмотр портфолио или контактных данных очень доступны посредством простого ненавязчивого горизонтального меню в самом верху страницы. Как бы выглядел и создавал впечатление, будь там вертикальное меню?

Это не соответствует процессу чтения в реальной жизни

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

Разоворот журнала от mikeweader в системе Flickr

Веские причины прекращения применения вертикального меню навигации

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

Читатели не привязаны к левостороннему меню

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

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

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

Вылетающие меню не так практичны как выпадающие

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

Пример вертикального меню с выдвигающими подменю

Веские причины прекращения применения вертикального меню навигации

Пример горизонтального меню с выпадающим подменю

Веские причины прекращения применения вертикального меню навигации

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

Индикаторы выпадающих и вылетающих меню

Конечно же, нельзя упускать из внимания и правильное оформление субменю, и нельзя забывать про индикатор. Например, для горизонтального меню больше всего подойдет стрелка или треугольник, направленные вниз, а для вертикального меню, те же самые стрелка или треугольник будут направлены в правую сторону. Тут дело в том, что если стрелка направленная вниз однозначно говорит о том, что в меню есть подменю, выпадающее вниз, то стрелка, показывающая вправо, иногда может быть воспринята совсем не по назначению. Стрелкой вправо часто также обозначают ссылки, переходящие разделы навигации и т.д. Посмотрите на скриншот, взятый с сайта CNN:

Индикаторы ссылок на внешние ресурсы на сайте CNN

Веские причины прекращения применения вертикального меню навигации

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

Если бы эти ссылки были расположены в левостороннем вертикальном меню, то посетитель 100% подумал бы о том, что за этими ссылками вылетающее подменю, что может привести к мнению, что они просто не работают, потому что их там нет. Нам кажется, что способ отображения внешних ссылок по типу как в Wikipedia более подходящий, но способ, выбранный для CNN, лучше подходит из-за горизонтальной строки, потому что никто не станет ждать от треугольников вылетающих подменю.

Что всё это значит? То, что если сайт когда-нибудь решит внедрить подменю в свои основные разделы – это моментально вызовет путаницу, в то время, как с горизонтальным меню вряд ли такое случится.

Согласно исследованием, этот метод не очень успешен

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

Ниже мы приведем несколько цитат из такого типа исследования:

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

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

Левостороннее меню навигации часто игнорируют

Способ чтения содержимого веб-страницы по шаблону «F»

Веские причины прекращения применения вертикального меню навигации

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

Чуть-чуть не считается

Те, кто спорят и выступают за вертикальные меню навигации (или пытаются поставить его в равные с горизонтальным), часто предоставляют незначительные и неубедительные факты. Единственное за что может ручаться левосторонне меню, это то, что есть возможность вписывать длинные ссылки, и даже одну ссылку расписать на несколько строк. Таким образом, Вы можете вносить как коротенькие ссылки, так и длинные неразборчивые, в которых теряется суть.

Еще одно незначительное преимущество вертикальных меню заключается в том, что есть возможность с легкостью добавлять новые пункты меню. Если Вам нужно будет вставить еще одну ссылку в горизонтальное меню – то Вам придется поменять всю структуру, а может ссылка и вовсе уже никуда не влезет. А с вертикальным меню, добавление нового пункта не составляет труда.

Ниже приведенные изображения демонстрируют видимое преимущество вертикального меню:

Веские причины прекращения применения вертикального меню навигации
Веские причины прекращения применения вертикального меню навигации

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

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

Исключения из правил

Если посыл данной статьи заключается в том, чтобы никогда не применять на практике вертикальные меню оформления, то существуют все же некоторые исключения:

* Сайты, сильно загруженные информацией, часто будут нуждаться в обновлении ссылок и пунктов навигационного меню
* Сайты, в которых есть потребность использования длинных ссылок
* Сайты, на которых используется как вертикальное, так и горизонтальное меню
* Дизайн в стиле минимализма
* Если настаивает клиент

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

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

Эффективное применение вертикального меню

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

Porsche

Веские причины прекращения применения вертикального меню навигации

Auxiliary Design Co.

Веские причины прекращения применения вертикального меню навигации

Sensis

Веские причины прекращения применения вертикального меню навигации

Poli Maraton

Веские причины прекращения применения вертикального меню навигации

Resource Design [rede] (сайт умер)

Веские причины прекращения применения вертикального меню навигации

Chapters Indigo Books

Веские причины прекращения применения вертикального меню навигации

House of Spy

Веские причины прекращения применения вертикального меню навигации

Jodi Arnold

Веские причины прекращения применения вертикального меню навигации

mytheresa.com

Веские причины прекращения применения вертикального меню навигации

From The Couch

Веские причины прекращения применения вертикального меню навигации

Envira Media Inc.

Веские причины прекращения применения вертикального меню навигации

Заключение

Правильное замечание сделал Зельдман: «Контент превосходит дизайн». Если разработчики веб-сайта сохранят это в памяти, то есть большая вероятность того, что их проекты будут гораздо успешнее.

Часто, если веб-сайт подлежит редизайну, то в первую очередь вертикальное меню заменяют горизонтальным, но крайне редко в обратном направлении.

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

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

Автор статьи © Louis Lazaris
Русский перевод © CoolWebmasters.Com 2010
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Mysterious Master   Прочитано (раз): 16620   |   Оставлено комментариев: 4
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 14 мая 2010 @ 23:45
Написал: Вася — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Статья ни о чем
Комментарий #2: 28 июля 2010 @ 20:16
Написал: Александр — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
абсолютно неубедительная статья. Горизонтальное меню годится только в некоторых случаях, тогда как вертикальное меню необходимо практически всегда, если это конечно же не промо сайт
Комментарий #3: 10 августа 2011 @ 14:08
Написал: Лёшка Камикулькин — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
надуманная хрень...
Комментарий #4: 21 сентября 2012 @ 20:56
Написал: Вася Пупкин — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
В статье вы забыли упомянуть еще один фактор, что вся информация расположенная в одну строку сложнее воспринимается
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Май 2018    »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031