Навигация в зарубежных деловых Интернет-изданиях

Размещено на http://www.allbest.ru/

Смоленский государственный университет

Навигация в зарубежных деловых интернет-изданиях

М.А. Миронова

Аннотация

В статье рассматривается система навигации сайтов зарубежных деловых изданий The Wall Street Journal и Financial Times, определяется влияние логичной и интуитивно понятной навигации сайта на вовлеченность пользователей и индексацию в поисковых системах.

Ключевые слова: The Wall Street Journal, Financial Times, интернет-медиа, веб-дизайн, навигация, вовлеченность, интуитивно понятный интерфейс.

Abstract

The article discusses the navigation system of sites of foreign business publications The Wall Street Journal and Financial Times, determines the impact of logical and intuitive site navigation on user engagement and indexing in search engines.

Keywords: The Wall Street Journal, Financial Times, online media, web design, navigation, user engagement, intuitive interface.

Навигация -- одна из основных составляющих юзабилити сайта. Удобная навигация помогает пользователю легко сориентироваться на информационном ресурсе и найти нужный материал. Хорошо продуманные навигационные элементы во многом отвечают за вовлеченность пользователей на сайте. От них зависит глубина просмотра страниц, длительность пребывания на сайте пользователей. Эти характеристики веб-аналитики -- основные условия для привлечения рекламодателей [1].

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

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

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

Навигация на сайте выполняет сразу несколько задач: понимание местонахождения, облегчение поиска информации, обеспечение доступа к актуальной информации. Первое означает, что на каждой внутренней странице сайта должен быть указатель к переходу на главную страницу. Облегчение поиска информации достигается четкой и логичной структурой сайта, привычным для пользователя расположением навигационных элементов. Доступ к актуальной информации облегчается в том случае, если она каким-либо образом выделяется. Маркерами выделения могут быть цвет, размер шрифта, использование фотографий и инфографики [4]. Некоторые зарубежные издания в качестве маркеров актуальной информации используют таймеры: после анонса материала указывается время его появления на сайте. Логичная навигация важна и для лучшего индексирования сайта поисковыми системами. Хорошая навигация -- одно из условий появления новостного сайта на первой странице поисковой выдачи, что значительно увеличит его посещаемость.

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

Предметом данного исследования стала навигация на сайтах зарубежных деловых изданий The Wall Street Journal и Financial Times.

Сайт издания The Wall Street Journal имеет сложную структуру, что вполне отвечает масштабам глобального делового медиа. Сайт следует последним тенденциям веб-дизайна -- он предельно минима- листичен. Особенно это отражается на навигационных элементах. Согласно принципам веб-дизайна новостного медиа, 80% площади должен занимать контент и только 20% -- навигационные элементы [7]. The Wall Street Journal полностью соответствует этому принципу. Основные навигационные элементы расположены в верхней части «домашней» страницы. Здесь не создается ощущения переизбытка информации за счет четко продуманной структуры навигации. В верхней строке над заголовком перечислены котировки мировых валют. Под заголовком представлены основные рубрики издания. Тематическая группировка сделала возможным применить выпадающее меню в каждой рубрике, где перечислены более узкие по тематике направления. Группировка представлена и в горизонтальном рубрикаторе, поскольку некоторые рубрики объединены между собой одним цветом. Но цвет -- это интерактивный элемент. Он проявляется только после того, как та или иная рубрика активируется пользователем. В неактивном положении сохраняется единый монохромный стиль меню.

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

Возможно, это первые шаги новостных информационных ресурсов к новой архитектуре сайта: одна страница -- один экран. К этому решению пришли сегодня некоторые коммерческие проекты. Как показывают исследования, пользователи любого сайта просматривают наиболее подробно информацию только на первом экране. С дальнейшей прокруткой сайта внимание пользователей снижается. И редко кто из них доходит до последней страницы. Вебдизайнеры и редакторы вынуждены учитывать эти обстоятельства. Так что, возможно, в скором времени изменится и структура новостных сайтов. The Wall Street Journal уже заметно сократили длину главной страницы по сравнению с наблюдениями 2019 г.

Если вернуться к навигации издания, то следует отметить, что ниже рубрикатора The Wall Street Journal поместили бесплатные ресурсы, посвященные коронавирусу. Это вопросы о том, где найти работу, как не заболеть и подобные актуальные темы. Подчеркивая важность темы, рубрикатор о корона- вирусе выделен более крупным шрифтом. Ниже помещена бегущая строка с последними новостями. Она оформлена в телеграфном стиле информационных агентств.

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

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

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

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

Надо сказать, что The Wall Street Journal все еще сохраняет ставку на вдумчивого читателя. В большинстве случаев на сайте размещены анонсы материалов, набранные очень мелким шрифтом.

Правильным с точки зрения юзабилити сайта является закрепленная панель меню. Независимо от того, на каком расстоянии от первого «экрана» находится пользователь, он всегда может вернуться к нужной рубрике. Отличительной чертой навигации сайта The Wall Street Journal является нижняя закрепленная панель с предложением подписаться на издание. Сайт делает ставку на видеоконтент в соответствии с тенденциями современности. Делает это ненавязчиво, чтобы не отпугнуть читателей традиционных материалов. Ставка на видеоконтент подтверждается перелинковкой сайта. Первая ссылка на видео расположена сразу под заголовком, но она едва различима. Более явная ссылка крупным шрифтом на тот же видеоконтент представлена среди бесплатных ресурсов о коронавирусе. Она имеет больше шансов на просмотр. И наконец, рубрика «Видео» на седьмом «экране» главной страницы. Все эти ссылки ведут на отдельную страницу с видеоконтентом. Эта страница создана как отдельный сайт с рубриками и строкой поиска. В рубрике Browse короткие видеоролики представлены нескончаемым потоком. Для того чтобы в них сориентироваться, слева расположено вертикальное меню с тематическими направлениями видеоматериалов.

Таким образом, сайт The Wall Street Journal -- это сложная гипертекстовая структура. Навигация здесь играет решающую роль, поскольку помогает пользователю не запутаться на сайте, найти нужный материал. Навигация также помогает увеличить глубину просмотра и длительность сессии (пребывания на сайте), что является одними из главных характеристик аналитики для привлечения рекламодателей.

Сайт издания Financial Times немного изменил дизайн по сравнению с прошлым годом. Неизменной осталась верхняя часть сайта. Здесь по-прежнему размещаются котировки валют, заголовок и горизонтальное меню. В верхнем правом углу, самой заметной области, представлен значок для скачивания мобильного приложения, где пользователь может самостоятельно настроить тематику новостной рассылки. На сайте присутствуют два вида меню: горизонтальное и вертикальное. В горизонтальном меню есть выпадающие вкладки с более узкими тематическими рубриками. Однако есть и отличительная особенность: рядом с рубриками перечислены ссылки на самые читаемые материалы. В верхнем левом углу расположен значок меню-гамбургера с вертикальными выпадающими вкладками. Это меню повторяет горизонтальный рубрикатор с теми же более узкими тематическими подгруппами. Можно предположить, что вертикальное меню является адаптацией под мобильные устройства. Верхняя панель меню закреплена и помогает вернуться к нужной рубрике, на какой бы области главной страницы пользователь не находился. Значок поиска расположен слева, а не справа. Он также является интерактивным. При клике на него открывается отдельное окошко ниже с поисковой строкой.

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

При верстке контента в обновленной версии дизайна Financial Times делают ставку на цвет. Так, например, предложение подписаться на бесплатную рассылку новостей о коронавирусе выделено яркой желтой полосой ниже рубрикатора, то есть в самом центре первого «экрана». Раньше это место занимала интерактивная реклама. Новость о коронавирусе в Европе на втором «экране» выделена ярким красным цветом. Главная новость дня о взаимоотношениях Трампа и владельцев социальных сетей на втором «экране» выделена синим. Все новости о коронавирусе отмечены на третьем «экране» широкой бежевой полосой -- фирменным цветом издания. Осталось прежним цветовое оформление рубрики «Мнение»: портреты колумнистов и подложка главной новости выделены голубым цветом. Еще одним ярким акцентом является реклама мобильного приложения myFT. Она отмечена широкой полосой бордового цвета. И последняя цветная рубрика -- «Видео». Она выделана черным цветом.

Цветные маркеры -- удачное решение для навигации, так как направляют взгляд пользователя на наиболее важные материалы, по мнению редакции. Новости по большей части представлены в текстовом формате: заголовок и лид. Крупные, яркие и выразительные фотографии расположены в рубрике «Жизнь и искусство», она размещена ближе к концу главной страницы. Надо сказать, что на сайте Financial Times появилась новая функция, которой нет, например, у The Wall Street Journal. Это закрепленная сбоку панель «Обратная связь». На этой панели можно отметить, насколько удобно было пользоваться сайтом. Стоит отдать должное редакции издания -- они отслеживают реакции пользователей, чтобы улучшить юзабилити сайта.

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

Литература

1. Беляев А. А. Навигация как ключевой компонент визуальной организации веб-сайта / А. А. Беляев // МеНильсен Я. Веб-дизайн / Я. Нильсен.-- Санкт- Петербург, 2010.

2. Мешавкин С. Самоцензура в газетном дизайне / С. Ме- шавкин // Журналист, 26 декабря, 2019

3. Навигация в дизайне сайта: основные элементы и примеры использования

4. Как сделать удобную навигацию по сайту

Размещено на Allbest.ru