Способы улучшения навигации сайта.

Перевод статьи:  How to improve site navigation.
Автор:  Dan Rajan.

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

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

Будьте традиционными.

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

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

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

Будьте очевидны.

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

Взгляните на сайты, которые удостоены высоких наград за дизайн, вы сразу же заметите, что они нарушают как минимум одно из представленных мной правил построения навигации. Несмотря на все, свойственные им приемы типа свободного пространства и изысканного дизайна, которые весьма эффективны, они идут вразрез с таким понятием как юзабилити. Этот тип слабо функциональных сайтов подразумевает использование метода, который в индустрии веб-дизайна известен под унизительным термином Mystery Meat Navigation (MMN) или "Сложная для восприятия навигация". Внешне это может выглядеть впечатляюще, и быть вполне обоснованным для дизайнера: «Неужели непонятно, что при перемещении курсора мыши в левую область страницы и на расстояние 45,1 сантиметра вниз приведет к появлению ссылок, ведущих на страницу, в которой освещается моя политическая точка зрения? И вполне очевидно, что там находится обзор моей любимой книги "Фаренгейт 451", отражающей левые политические взгляды, которые я разделяю».

Если даже отбросить крайние случаи, любое проявление MMN может стать кошмаром для пользователя, который в действительности хочет использовать ваш сайт по назначению, а не просто полюбоваться красотой его дизайна. Представьте себе показатель отказов сайта, который в процессе взаимодействия с пользователем требует от него прохождения всех имеющихся ссылок. Это подобно общению с автоматизированным телефонным сервисом, когда вы выбираете нужный вариант из всех доступных, пытаясь добраться до требуемой вам услуги. Так вот MMN – это то же самое. Навели указатель на единичку – элемент меню «Домой», на двоечку — «О нас» (*вот примерно как здесь) и т.д… Улавливаете идею. Вам придется прощупать каждую имеющуюся ссылку, для того чтобы отыскать что нужно, и к тому времени, когда вы переберете все элементы навигационного меню, вы уже позабудете о цели вашего визита на сайт. Это же касается и индикации местоположения, которая осуществляется путем подсветки (обычно сменой цвета) элементов меню, давая пользователю понять, в каком месте сайта он находится.

Не распыляйтесь.

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

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

Будьте кратки.

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

Уже давно установлено, что краткосрочная человеческая память (*так называемая рабочая память человека) способна хранить только 7 объектов в течение 20 секунд, а это означает, что размер навигационного меню необходимо ограничивать семью элементами или того меньше. Имея, таким образом, логическое объяснение и отсутствие желания отягощать навигационное меню бо́льшим числом элементов, можно сделать вывод, что если у вас есть несколько относящихся непосредственно к вашему сайту ссылок, то те из них, с которыми посетители знакомы больше всего, вы можете сместить в менее важные области навигационной панели (детально этой темы мы коснемся позже). Таким образом, пользователи не будут прилагать особых усилий для их поиска, так как будут уже хорошо знакомы с их расположением.

Придерживайтесь стандартов.

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

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

Будьте последовательны.

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

Кроме того, пользователи, как правило, начинают просмотр элементов меню в направлении слева на право, предполагая, что для большинства посетителей вашего сайта это естественное направление чтения, предусмотренное особенностями их родного языка. Из этого можно сделать вывод, что ссылки с наименьшим индивидуальным эффектом привлечения внимания находятся в центре навигационного меню, однако нельзя снимать со счетов возможность их коллективного эффекта, который может быть следствием того, как пользователь подсознательно воспринимает интерфейс вашего сайта, основываясь на опыте его предыдущих посещений. Более детально этот вопрос рассматривается в моей статье «Дизайн как средство повествования», в которой я разъясняю как с помощью порядка, в котором вы располагаете элементы меню, можно предугадать последовательность и варианты действий посетителя вашего сайта. Эта теория в большинстве своем является гипотезой, однако вполне резонно предположить, что ссылка «Поддержка», размещенная сразу же за ссылкой «Магазин/Товары» в вашем навигационном меню, может навести на мысль о возможности двух следующих вариантов событий: перебои в доставке заказываемых пользователями товаров; а также то, что сервис «Поддержка» достаточно популярен и востребован на вашем ресурсе, чтобы занимать место в его главном меню.

Заключение.

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

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

Или вот другой, более очевидный пример — Google.com. Здесь мы имеем несколько иной случай, а именно наличие одного, общего навигационного баннера для сети сайтов. Вы, вероятно, заметили, что ссылка «YouTube» размещена в центре. Это объясняется тем, что сервис YouTube у большинства пользователей ассоциируется как отдельный, независимый сайт, а не как часть сети Google, поэтому ему отводится наименее важное место на панели. Выпадающий список «Ещё» находится в конце, за счет чего он воспринимается как расширение реального, видимого меню, не засоряя при этом основной баннер лишними элементами. Остальные детали вы видимо уже проработали самостоятельно. Это, конечно же, элемент «Поиск», который занимает первую позицию из тех же соображений, что и элемент «Главная» на других сайтах. А ссылка «Картинки» является второй по значимости из наиболее часто используемых, именно поэтому для ее активации вам потребуется минимум усилий, связанных с визуальным поиском и передвижением курсора мыши. И поскольку вы уже начали вникать в суть дела, для вас стало очевидным, сколько смысла вложил Google в свой навигационный интерфейс. А это в свою очередь объясняет, почему он находится в авангарде новаторов веб-дизайна.

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

* Примечание переводчика.

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

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