Особенности юзабилити новостных порталов: опыт структурно-функционального анализа

После определения методологии анализа и необходимых критериев для его осуществления, приступаем к структурно-функциональному анализу медиаресурсов. В качестве эмпирического материала наши были выбраны 3 крупных сетевых СМИ, ориентированных на освещении актуальных новостей в режиме онлайн и не имеющих непосредственной печатной версии: «Lenta.ru», «Meduza», «РИА Новости», «RBK.ru». Выбор данных медиаресурсов обусловлен:

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

Схожей читательской аудиторией: согласно предоставляемым «Lenta.ru» Медиа-кит «Lenta.ru». URL: https://lenta.ru/mediakit/LAYOUT_Lenta_About_us_rus_2015.pdf (дата обращения: 24.04.2016), «РИА Новости» Медиа-кит «РИА Новости». URL: http://mediator-rus.com/images/RIA16.pdf (дата обращения: 24.04.2016), «Meduza» Медиа-кит «Meduza». URL: https://meduza.io/static/ads/meduza-mkit-2016;2.pdf (дата обращения: 24.04.2016) и «РБК.ру» Медиа-кит «РБК.РУ». URL: http://mediator-rus.com/images/rbkprez.pdf (дата обращения: 24.04.2016) медиакитам, аудиторию порталов составляют в большей степени мужчины (женская аудитория меньше вполовину) от 18 до 44 лет, имеющие высшее образование, по роду деятельности являющиеся специалистами и руководителями и имеющими доход выше среднего.

Эффективностью присутствия рассматриваемых СМИ в веб:

Количество ежедневных посетителей. Согласно данным «TNS Web Index» TNS Web Index. Апрель, 2016 год. URL: http://www.tns-global.ru/services/media/media-audience/internet/information/ (дата обращения: 24.04.2016), «Lenta.ru» ежедневно посещают около 1,1 миллионов человек; «РИА Новости» не менее 1,2 миллионов человек; «РБК.ру» около 1.4 миллионов; «Meduza», как наиболее молодой проект не достигла подобных показателей, но стремительно улучшает свои позиции и в среднем количество пользователей достигает около 300 тыс. человек;

Количество ежедневных просмотров. Ежедневные просмотры «Lenta.ru» достигают от 4 до 7 миллионов; «РИА Новости» от 2.5 до 5 миллионов; «РБК.ру» от 4.5 до 9 миллионов; «Meduza» до 2 миллионов;

Индекс цитируемости. Медиалогия. Информационно-аналитическая структура. URL: http://www.mlg.ru/ratings/federal_media/0/0/0/ (дата обращения: 24.04.2016) Все рассматриваемые порталы входят в 20 наиболее цитируемых СМИ. За каждым из них закрепились следующие показатели: «РБК.ру» 1929,25 (1-место по цитируемости среди сетевых СМИ); «Lenta.ru» 1229,32 (2-место по цитируемости); «РИА Новости» 11 194,24; «Meduza» 93,45; Данные «РИА Новости» отличаются высокой степенью цитируемости, поскольку это информационное агенства с множеством подписчиков государственных структурах, сфере бизнеса и т. д.

Присутствие в социальных сетях. Количество подписчиков в социальной сети «Вконтакте» у «Lenta.ru» составляет 314 656 подписчиков; «РИА Новости» 1 750 166 подписчиков; «РБК.ру» 494 082 подписчика;

Средняя длительность пребывания на сайте одного посетителя. Согласно данным «Alexa.com»: «Lenta.ru» 7.2 мин.; «РИА Новости» 5.3 мин.; «РБК.ру» 5.2 мин; «Meduza» 4.1 мин.;

Среднее количество страниц на человека в день: «Lenta.ru» 6.9 стр.; «РИА Новости» 3.5 стр.; «РБК.ру» 5 стр; «Meduza» 4.1 стр.;

В ходе работы, мы проанализируем 2 уровня визуальной организации веб-страниц указанных новостных порталов. В качестве опорных факторов анализа будут использованы указанные ранее элементы КГМ в рамках микро и макроуровней. Показатели в таблице определяются для каждой страницы, потом все данные в столбцах суммируются. Данная сумма показывает степень эффективности визуальной организации страницы с точки зрения современных представлений о юзабилити — чем сумма балов больше, тем она выше. В рамках функционально-структурного анализа мы рассмотрим как главные страницы, так и новостные страницы медиаресурсов «Lenta.ru», «РИА Новости», «РБК», «Медуза».

Структурно-функциональный анализ главной страницы сайта в контексте задач юзабилити Для начала, мы рассмотрим, как реализовываются принципы юзабилити на главной странице указанных медиапорталов. Переходим к подробному рассмотрению результатов по каждому из описанных в таблице критериев. Приложение 4, табл. 1 Для того, чтобы рационально оценить медиаресурсы в соответствии с указанными принципами, необходимо взглянуть, как выглядят макеты сайтов каждого из анализируемых медиаресурсов целиком. Приложение 1, рис. 1 Первым критерием оценки КГМ, в рамках структурно-функционального анализа главной страницы в контексте задач юзабилити, является соблюдение «F-паттерна визуального восприятия». Известно, что следование данному принципу позволяет существенно улучшить восприятие контента. Для этого необходимо расположить наиболее важные навигационные элементы и самый значимый контент согласно F-образной траектории просмотра страницы. Данный параметр максимально используется порталами «Lenta.ru» и «РБК»: в указанной зоне располагется навигационное меню, поиск по сайту, а также блок главных новостей. Приложение 1, рис. 2 На сайте «РБК» именно в этой зоне, а не ниже по странице, располагается лента новостей. Во многом, реализации данного принципа способствует то, что эти сайты находятся в левой части экрана чего нельзя сказать о сайтах «РИА Новости» и «Meduza», использующих центр экранного пространства.

Зонирование страницы связано с модульной организацией и является одним из наиболее важных параметров в рамках нашего анализа. В аспекте восприятия контента ее наличие играет одну из первостепенных ролей благодаря способности логической организации элементов по странице. По данному критерию максимальный балл смогли получить порталы «Lenta.ru», «РИА Новости» и «Meduza». При взгляде на макет «Lenta.ru» видно, что область контента разделена на очевидные модули, вертка материалов осуществляется преимущественно по вертикали. Приложение 1, рис. 3 Активное использование модульной сетки проявляется за счет совмещения геометрически блоков «текст + фото», фиксации вертикальных разделителей. «РИА Новости» так же используют возможности модульной организации: активное использование сетки достигается за счет различной компоновки ярко выраженных, фиксированных по всей длине сайта, блоков (как вертикальных, так и горизонтальных), которые свидетельствуют о применении смешанной верстки. Приложение 1, рис. 4 Максимально модульная организация выражена на сайте «Meduza»: весь контент главной странице заключен в прямоугольные модули разной величины, которые повторяются по всей длине страницы. Приложение 1, рис. 6 Аутсайдером по рассматриваемому критерию стал сайт «РБК». Несмотря на использование сетки, наблюдаются многочисленные нарушения ее соблюдения: необоснованные «дыры» между блоками контента, а так же грубое несоответствие вертикальных и горизонтальных разделителей и компоновки контента относительно друг друга. Приложение 1, рис. 5.

Негативное пространство страницы является третьим в списке критериев функционально-структурного анализа КГМ. Для того, чтобы оценить насколько рационально оно используется и исключить все отвлекающие факторы, мы конвертируем элементы контента на макетах всех изданий в черно-белые объекты и преобразуем их в простые прямоугольники. Приложение 1, рис. 7 Макеты страниц представлены в одинаковом масштабе, с учетом полей страниц как при просмотре в браузере. Как мы видим, наименьшее количество негативного пространства имеет порталы «Lenta.ru» и «Meduza». Важно отметить, что для того, чтобы контент не смотрелся слишком плотно, «Meduza"в некоторых случаях используют белую подложку в блоке информации. Новостная лента «Lenta.ru» представлена на белом фоне для сохранения баланса пробелов на странице, тем не менее, блоки информации располагаются близко с друг другом и параллельно друг другу в 3 колонки. Умеренное количестве негативного пространства мы видим на странице «РИА Новости» — контент имеет постоянную структуру и пробелы между блоками информации фиксированы. Широкие пробелы использует сайт «РБК», однако, здесь оно связано с недостатками структурирования контента и следования модульной организации. Как мы успели заметить, в некоторых областях страницы наблюдаются «дыры» и не совсем рациональное использование площади страницы. При доминировании ахроматического белого, более наглядное фоновое пространство оправдано, однако, в случае с «РБК» белые области не дополняют черные, а концентрируют внимание на себе.

Одним из наиболее эффективных средств улучшения восприятия контента, является контрастное зонирование пространства, проявляющиеся в применении цвета. В контексте привлечения внимания, разграничения контента и создания акцентов выделяют 3 основные функции цветового зонирования: акцидентальная (позволяет привлекать внимание к наиболее значимому контенту), функция аффорданса (указание на интерактивность), селективная (функция разделения разных групп контента). По данному критерию максимальный балл получили порталы «Lenta.ru» и «РИА Новости». Контраст главной страницы портала «Lenta.ru» реализует все три функции: аффордативную, акцидентальную и селективную. Приложение 1, рис. 8 Как средство акциденции, он используется на главном экране сайте и при помощи желтого цвета выделяет блок главных новостей и материала дня. Так же, данная функция реализуется благодаря наличию фотографий у наиболее значимых материалов. Аффордативная функция контраста на ресурсе «Лента.ру» позволяет выделять элементы, которые обеспечивают взаимодействие с сайтом: навигацию и футер («подвал» страницы). Селективный контраст менее выражен на сайте, поскольку для этого используется серый цвет, но, тем не менее, такая функция на странице тоже присутствует. Контрастное оформление блоков дополняется использованием фотографий на главной странице для наиболее значимых новостей.

На главной странице «РИА Новости» так же реализуются все три функции, что свидетельствует о высоком уровне контрастности. Приложение 1, рис. 9 Аффорданс обеспечивается выделением «подвала» страницы, где находятся все рубрики и ссылки на иные страницы сайта, а также ресурсы «РИА Новости». Селективный контраст позволяет выделять блок мультимедиа. Важно отметить, что для контраста используется один и тот же оттенок черного цвета, в отличие от «Lenta.ru», где важные блоки выделяются отличным от общей цветовой палитры оттенком. Навигация вверху страницы, отвечающая за перемещение по сайту «РИА Новости» никак цветом не выделена. Фотографии на сайте «РИА Новости» выполняют акцидентальную функцию, привлекая внимание к наиболее значимым материалам.

Сайт «РБК» характеризует большое количество аффорданса на странице. Приложение 1, рис. 10 Он проявляется как выделением подвала страницы и навигации по сайту вверху страницы, так и наличием единичных цветовых пятен (активные ссылки на контент), призывающих к их нажатию. Не слишком широко, но тем не менее применяется зонирование при разделении контента на определенные группы, обусловленное форматом и содержательной моделью издания (селективная функция). Для достижения необходимо контраста на странице используются и фотографии, однако, на сайте «РБК» они не сильно выразительны ввиду своего небольшого размера (160 на 100 px). Напротив, благодаря выраженной блочной верстке, основным средством привлечения внимания к контенту на сайте «Meduza» Приложение 1, рис. 11 становится фотография. Фотографии присутствуют на главной странице каждого из рассматриваемых сайтов, но на «Meduza» они привлекают больше внимания ввиду своего размера (не менее 370 на 245 px.) и особенностей ярко выраженной блочной верстки. Как и в предыдущих рассматриваемых медиаресурсах, здесь присутствует аффорданс, но в меньшей степени, чем на сайте того же «РБК». Селективность обеспечивается выделением темного и серого цвета для разных групп контента.

Для того, чтобы оценить медиаресурсы по следующему критерию, необходимо четко видеть различия в представлении информации при просмотре в браузере. Иными словами, необходимо показать, как все рассматриваемые ресурсы смотрятся с экрана компьютера при одинаковом разрешении и масштабе страницы. Приложение 1, рис. 12, 13, 14, 15 Только теперь мы можем увидеть различия в размере полей страниц при просмотре. Как видим, минимальные поля используют в своем дизайне сайты «РБК» и «Meduza»: пространство экрана на этих сайтах максимально задействовано под область контента. Приложение 1, рис. 16 «Lenta.ru» использует довольно широкие поля, тем не менее, не превышающие площадь, отведенную под контент. И только портал «РИА Новости» имеет широкие поля, превышающие площадь контента.

Следующим критерием оценки становится интрелиньяж или значение междустрочного интервала. Минимальным требованием в данном случае является соблюдение разницы не менее 2 и не более 6 px между пробелом и заданным кеглем. Максимальный бал обеспечивается при полном отсутствии ошибок интрелиньяжа по всей площади страницы. Было интересно обнаружить, что лидером по данному критерию стал сайт «РБК»: несмотря на довольно широкий спектр различных параметров интерлиньяжа на сайте «РБК», все формальные правила в этом аспекте сохранены. Приложение 1, рис. 19 Ошибка использования равнозначного кегля и интерлиньяжа не встречается, однако, существует иная проблема, косвенно влияющая на общую организацию страницы: встречаются слишком разные показатели кегля и интерлиньяжа (20 и 22, 14 и 19, 18 и 21, 14 и 18, 28 и 33, 12 и 15, 14 и 17), хотя среднее число между этими показателями составляет около 4−5 px. На наш взгляд, необходимо уравновесить эти параметры по тому принципу, как это работает у сайта «РИА Новости», где практически по всей площади страницы значения интерлиньяжа фиксировано. «РИА Новости» руководствуются классическим правилом, гласящим, что число заданного интерлиньяжа должно быть больше заданного кегля на 2. Приложение 1, рис. 18 В организации типографики практически не было замечено ошибок, кроме одинаковых параметров в заголовках второстепенных новостей в новостной ленте (Кегль 12, интерлиньяж 12). В целом, типографику на сайте «РИА Новости» можно назвать гармоничной, поскольку отступ в 2 px сохраняется по всей странице, чем не может похвастаться «Lenta.ru» или «РБК».

На сайте все портала «Lenta.ru» формальные показатели оптимального интерлиньяжа соблюдены. Однако, на главной странице встречаются и ошибки его использования. Приложение 1, рис. 17 Так, неправильно заданы параметры пробела в заголовке главной новости часа, а также в заголовках ленты новостей. Среднее показание интерлиньяжа составляет 6 px. Что касается портала «Meduza», то главная страница сайта использует адаптивный дизайн. Это подразумевает то, что код станицы сам задает параметры изображений, кегля шрифта и интерлиньяжа. Заданный на сайте «Meduza» по умолчанию отступ соответствует разнице в 1.5−2 пикселя, из-за чего на странице возникают определенные проблемы, проявляющиеся в «наползании» литер друг на друга. Приложение 1, рис. 20 Данная ошибка распространяется на блоки, где есть сочетание шрифтов с засечками и без них. Обращая же внимание на блоки, оформленные одной гарнитурой, мы замечаем, что межстрочный интервал в целом выдержан.

Следующим критериев в рамках структурно-функционального анализа КГМ главной страницы является контраст литерного контура. Как в заголовках и тексте на первом экране сайта, так и в ленте новостей на сайте «Lenta.ru» используется разные классы шрифтов — это и сериф и сансериф, составляющее классическое сочетание «гротеск +антиква». Приложение 1, рис. 21 Высокая насыщенность заголовков обеспечивается обязательным использованием жирного начертания как на первом экране (главные новости дня), так и в ленте новостей. Что касается портала «РИА Новости» Приложение 1, рис. 22, то здесь, как в заголовках и тексте на первом экране сайта, так и в ленте новостей используется сансериф «Arial». Как мы выяснили в теоретической главе, большинство исследователей и практиков дизайна придерживается мнения о том, что наилучшим классом шрифтов для оформления заголовков (или небольших фрагментов текста) являются гротески. Высокая насыщенность заголовков обеспечивается обязательным использованием жирного начертания как на первом экране (главные новости дня), так и в ленте новостей. Также, высокий контраст литерного контура в блоке главных новостей дня на первом экране достигается использованием темной подложки и белого цвета текста. Шрифтовое расписание сайта «РБК» Приложение 1, рис. 23 включает только сансериф «Helvetica». В отличие от сайта «РИА Новости», где так же по всей странице используются исключительно гротеск, на сайте «РБК» жирное начертание в заголовках используется не повсеместно, а только к самой главной новости каждого раздела. Во всех остальных случаях, текст по странице имеет нормлаьное начертание. Это позволяет говорить о недостаточности контраста литерного контура, которая усиляется использованием небольшого кегля текста по странице (14 px). К примеру, на странице «Lenta.ru» помимо использования сансерифа, который сам по себе более контрастен, шрифт имеет больший кегль (16 px). «Meduza» Приложение 1, рис. 24 использует кнопку переключения вида сайта — таким образом, лента новостей в привычном понимании включается в верхнем правом краю. На главной странице сайта заголовки оформлены сансерифом жирного начертания, благодаря чему достигается высокий контраст. В ленте новостей используется 2 гарнитуры — сансериф Circe (имеет жирное начертание) и сериф PfRegal (обычное начертание, достаточно контрастное ввиду класса шрифта).

Более подробно, контраст текста и фона на анализируемых ресурсах рассматривается в последнем критерии — тонально-цветовом контрасте графемы и фона. Подробный визуальный разбор этого важного пункта рассматривается в приложении. Приложение 1, рис. 25 Высокая контрастность текста и фона на первом экране главной страницы «Lenta.ru» достигается за счет использования контрастного шрифа с засечками Georgia, сочетания темного цвета (почти чистый черный) литер и белого фона. «РИА Новости» используют малоконтрастный шрифт без засечек, однако высокая контрастность на странице достигается за счет использования темной подложки и белого текста, имеющего в некоторых слушаях полужирное начертание. Первый экран с главными новостями дня на сайте «РБК» отмечается контрастностью среднего уровня. Это достигается за счет черного цвета литер и белого фона, при использовании малоконтрастного шрифта без засечек. Важно отметить, что только для одного из множества заголовков в пространстве экрана на сайте «РБК"используется жирное начертание. Главная страница «Meduza» имеет высокую контрастность теста и фона, за счет использования жирного начертания для всех заголовков по странице, большого кегля текста (по сравнению с остальными сайтами, размер текста и заголовком на сайте «Meduza» в среднем больше на 2−4 px). Отдельно стоит отметить, что «Meduza» использует в качества фона для заголовков некоторых новостей фотографии, подбираемые в соответствии с законом контраста и используя жирное начертание.

Поскольку лента новостей является одним из наиболее важных компонентов на всех рассматриваемых медиаресурсах, подробно проанализируем соблюдение в ней контраст текста и фона отдельно. Приложение 1, рис. 26 Как мы видим, лента новостей «Lenta.ru» характеризируется контрастностью среднего уровня: при использовании высококонтрастного серифа Georgia, текст набирается на белом фоне серым цветом. В результате, при выборе оптимальной гарнитуры, цвет текста слишком светлый и кажется недостаточно контрастным, особенно при включении монитора на максимальную яркость. При проектировании медиаресурса, в соответствии с принципами юзабилити, необходимо помнить, что главный параметр удобочитаемости — контрастность текста и фона. В ленте новостей на сайте «Lenta.ru» данный принцип реализован частично, поэтому рекомендуется выбрать более темный цвет текста. При этом, в ленте новостей отмечается применения разного размера шрифта (14 px, 16 px). Лента новостей «РИА Новости» так же отмечается средней контрастностью текста и фона. Это связано с использованием гротеска Arial и применением серого цвета для текста и заголовков. Хотя оттенок серого на сайте «РИА Новости» темнее, чем оттенок в ленте новостей «Lenta.ru», шрифт Arial, как гротеск, менее контрастен чем Georgia. Лента новостей сайта «РБК» отмечается низкой контрастностью текста и фона, даже несмотря на применение черного цвета для текста и белого фона. Это связано с выбором низкоконтрастного начертания шрифта Helvetica и особенно рисунка литер. Графемы вытянуты по горизонтали, имеют плотный межбуквенный интервал, а также отмечаются неярким контуром, что особенно заметно при сравнении с Arial на сайте «РИА Новости». Лента новостей медиапортала «Meduza» характеризуется высокой контрастностью: при белом фоне используется черный цвет текста (для длинных заголовков с серифом). Заголовки оформленные гротеском имеют жирное начертание, больший кегль оформлены темно-серым оттенком, однако с учетом насыщенности смотря даже контастнее, чем заголовки, оформленные серифом.

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

Структурно-функциональный анализ новостных страниц в контексте задач юзабилити Рассмотрев, как реализовываются принципы юзабилити на главных страницах сетевых ресурсов «Lenta.ru», «РИА Новости», «РБК» и «Meduza», перейдем к структурно-функциональному анализу новостных страниц данных медиапорталов. Формальные критерии для оценки индекса эргономичности остаются неизменными, но добавляем пункт, отвечающий за эффективность скорости чтения и восприятия текстовой информации. Приложение 4, табл. 2.

Сначала нам необходимо проследить, соблюдаются ли модульная организации на новостной странице. По данному критерию результаты совпадают с баллами, полученными данными изданиями в ходе анализа главной страницы. Активное использование модулей по всей площади новостной страницы «Lenta.ru» выражено даже более явно, чем на главной. Приложение 2, рис. 1 Так же максимальный балл по данному показателю вновь получает информационное агенство «РИА Новости» Приложение 2, рис. 2. Что касается портала «РБК», то нарушения в использовании модульной сетки распространяются и на новостной странице данного медиаресурса. Приложение 2, рис. 3 Среди видимых недостатков снова встречаются необоснованные белые «дыры» в пространстве страницы, несоответствие вертикальных разделителей. Непонятно, чем руководствовался дизайнер сайта, поскольку если мы взглянем на выравнивание контента по вертикали, то увидим полнейшую путаницу: все элементы ниже новостной заметки абсолютно хаотично размещены относительно друг друга. Отдельно стоит отметить, что отчасти нарушения сетки связаны с неправильным размещением рекламных блоков, не имеющих четко фиксированной внутренней организации. Новостная страница «Meduza» отмечается отсутствием каких-либо элементов, кроме заголовка и текста публикации, навигационного меню и футера, а также блока с рекомендуемыми новостями. Приложение 2, рис. 4 Здесь, как и на главной странице сайта прослеживается очевидное следование модульной организации.

Совершенно иные, по сравнению с главной страницей, результаты ожидают нас при рассмотрении «воздуха» на новостных страницах рассматриваемых порталов. Как и в предыдущем анализе, для оценки рационального использования негативного пространства, мы конвертируем элементы контента на макетах всех изданий в черно-белые объекты и преобразуем их в черные прямоугольники. Приложение 2, рис. 5 Макеты страниц, так же представлены в одинаковом масштабе, с учетом полей страниц как при просмотре в браузере. Если главная страницы «Lenta.ru» отмечалась небольшим количеством негативного пространства, то новостная страница выглядит куда более разряженной и свободной. Окружающая текст зона имеет достаточно широкие пробельные элементы (не менее 4 символов). Пробелы между текстом и рекламными блоками больше (не менее 6 символов), что позволяет акцентировать внимание непосредственно на тексте публикации, а не на ее окружении. В целом, как мы видим на иллюстрации, белые области на странице «Lenta.ru» дополняют черные, что свидетельствует о рациональном распределении негативного пространства.

Страница «РИА Новости» использует больше негативного пространства, чем «Lenta.ru», однако важной особенностью здесь является строе совпадение пробелов в каждой отдельной зоне по странице. Это значит, что отдельные блоки, отвечающие за определенную группу контента, оформлены в полном единообразии. Белые области дополняют черные, а также акцентируют внимания на каждой отдельном тематическом блоке и тексте публикации.

Новостная страницы «РБК» тоже использует большое количество белого пространства. В отличии от пробелов на главной странице, здесь пробелы используются более рационально и не перетягивают внимание с контента на себя, как на главной странице. Тем не менее, концентрированность объектов вокруг основного текста публикации не позволяет оценить использование воздуха на странице «РБК» как рациональное. Во-первых, это связано с различной величиной пробелов, которая при таком обилии отдельных элементов небольшого размера, кажется недостаточно оптимальной (минимальный пробел сбоку менее 3 символов). Также, пробел вокруг текста не фиксированный, как не зафиксирован он и для соседствующих с главным контентом на странице элементов. «Meduza» использует много воздуха, если просматривать страницу с экрана компьютера. В зависимости от уменьшения окна браузера, количество негативного пространства будет сокращаться, ввиду адаптивной верстки сайта. Если на странице «РБК» слишком много элементов, то на новости от «Meduza» их слишком мало.

Несмотря на то, что главным контентом на новостной странице является, непосредственно, сам текст публикации, после его прочтения читатель должен либо закрыть страницу, что рано или поздно негативно скажется как на монетизации ресурса, так и на эффективности его присутствия в веб, либо, обойдя взглядом страницу, перейдет к другому заинтересовавшему его контенту. В этой связи, функции контраста на странице продолжают играть значимую роль как в процессе управления вниманием пользователя, так и в аспекте формирования положительного опыта пользователя. По данному критерию, портал «Lenta.ru» продолжает традицию главной страницы сайта и характеризуется высокой контрастностью, благодаря реализации акцидентальной, аффордативной, селективной функций контраста. Приложение 2, рис. 6 Акцидентная контрастность используется в блоке главных новостей дня слева от текста новости: желтый цвет привлекает внимание пользователей к важной и актуальной информации. Селективный контраст позволяет разграничить одни блоки с другими. Как мы видим, на новостной странице эта функция позволяет отделить блок дополнительной навигации по странице от текста публикации. Аффорданс, как и на главной странице, выражается в фиксированном меню рубрикации сайта, а также присутствуют активные кнопки интеграции с социальными сетями (особенно выделена кнопка «Поделиться»). Как мы видим на общем макете Приложение 2, рис. 6, она является одним из наиболее контрастных элементов на странице, буквально крича о том, чтобы ее использовали. Отдельно стоит отметить, что для каждой новости используется фотография, иллюстрирующая содержание материала. Новостная страница «РИА Новости» характеризуется относительно низкой контрастность, по причине использования только селективного контраста и наличия аффорданса на странице. Приложение 2, рис. 7 С помощью цветной подложки разграничивается область интеграции с социальными сетями и область текста. Аффорданс на странице, как и везде, выражается в виде футера, навигации, а также активных гиперссылок и кнопок соцсетей.

Новостная страница «РБК» характеризуется реализацией контрастом как акцидентального, так селективного и аффордативной функций. Приложение 2, рис. 8 К сожалению, по большей части контраст на странице привлекает внимание к рекламным блокам — для этого используется желтая «кричащая» подложка в верхней и нижней части страницы. Внутри текста публикации присутствует селективный контраст, используемый в целях цветового зонирования, отделяющего одни блоки контента от других. На новостной странице «РБК», селективный контраст проявляется в виде цветного блока фотогалереи, который разграничивает зоны страницы. Одновременно с этим, фотографии привлекают внимание. Новостная страница «РБК», так же как и «РИА Новости», характеризуется относительно низкой контрастностью: используется только подложка для оформления и разграничения блока дополнительного контента на странице, а также выделен футер и навигация страницы. Приложение 2, рис. 9 Важно отметить, что никакого иллюстративного контента новостная страница «Медузы» не содержит, зато с левой стороны от публикации располагается рекламный блок.

В контексте восприятия текстовой информации на новостной странице, критерии оптимального интерлиньяжа и контраста литерного контура входят в число наиболее значимых. На странице «Lenta.ru» Приложение 2, рис. 10 межстрочный интервал выдержан: в тексте публикации пробел между строками составляет 20 px, при размере кегля в 16 px, что является нормой. Тем не менее, ошибка интерлиньяжа встречается в оформлении заголовка: там межстрочный пробел равен значению интерлиньяжа, что недопустимо в аспекте удобочитаемости: при такой минимальной разнице заголовок кажется слишком плотным. Один и тот же шрифт Georgia используется как для заголовка страницы, так и для текста публикации, что в принципе допустимо, поскольку засечки хорошо воспринимаются человеческим глазом. Однако, наличие гротеска в заголовке, могло бы внести дополнительный контраст в оформление страницы. В остальном формальные требования соблюдены — жирное начертание в заголовке делает его более заметным, а нормальное начертание текста при использовании темного цвета позволяет быстро прочитать новость. Лид в структуре новости отсутствует.

Максимальный показатель по критериям интерлиньяжа и контраста литерного контура показывает «РИА Новости». Приложение 2, рис. 11 Во-первых, здесь отсутствуют ошибки интерлиньяжа: в заголовке интерлиньяж составляет 40 px. при заданном размере кегля в 35 px, а в тексте это значение составляет 22 px. при размере текста в 16 px. Межстрочный пробел внутри текста публикации немного больше, чем общепринятая норма и составляет 6 px. Во-вторых, соблюдены все формальные правила контрастного оформления: текст использует нормальное начертание, а заголовок насыщен за счет применения гротеска жирного начертания. Важно отметить, что как и в предыдущем примере, на странице «РИА» отсутствует лид.

Что касается интерлиньяжа и контраста литерного контура на странице «РБК» Приложение 2, рис. 12, то здесь размер интерлиньяжа в заголовке составляет 37 px., что на 5 пикселей больше, чем размер кегля. В тексте разница пробела с текстом составляет 7 px. Важно отметить, что при использовании гротеска с таким рисунком (малоконтрастен, вытянут по вертикали), такой большой интервал кажется не совсем оправданным: текст выделяется на белом фоне, но приходится напрягать глаза, особенно при длинном чтении. Однако, новостная страница «РБК» единственная из рассматриваемых порталов, имеющая ЛИД (показатель интерлиньяжа в нем оптимален и больше размера текста на 6 px).

Высокие показатели удобочитаемости текста показывает новостная страница медиаресурса «Meduza» Приложение 2, рис. 13: разница между кеглем составляет 2 px., при крупном заголовке в 37 px. Что касается основного текста, то здесь разница так же максимально функциональна: пробел составляет 22px. при размере кегля в 18px. Это самый большой кегль для текста публикации, из всех рассматриваемых сетевых СМИ. Единственным недостатком является недостаточная насыщенность заголовка — используется нормальное, а не жирное или полужирное начертание.

Длина наборной строки и абзацный отступ, отвечают за эффективность скорости чтения и восприятия текстовой информации. По данному критерию максимальный результат показывают медиаресурсы «Lenta.ru», «РИА Новости» и «Meduza». Длина наборной строки на сайте «Lenta.ru» Приложение 2, рис. 14 в среднем составляет 62−64 символа в строке. Абзацный отступ внутри текста соответствует оптимальному размеру и насчитывает 3 символа. Длина наборной строки на сайте «РИА Новости» Приложение 2, рис. 15 так же оптимальна и в среднем составляет 62−65 символов в строке. Абзацный отступ внутри текста, так же как и у «Lenta.ru», насчитывает 3 символа по вертикали. Что касается новостной страницы «РБК» Приложение 2, рис. 16, то здесь длина наборной строки не соответствует оптимальной и в среднем составляет менее 60 символов в строке. Абзацный отступ внутри текста непостоянен и в рамках одной публикации представлен то 3, то 4 символами между строками. С учетом выбора гротеска для объемных текстов, можно сделать вывод о том, что удобочитаемость на данном портале значительно ниже, чем у других рассматриваемых ресурсах. Длина строки на сайте «Meduza» Приложение 2, рис. 17 соответсвует стандартам — 62 символов в строке. Абзацный отступ внутри текста постоянен и составляет 3 символа.

Наконец, подробно и близко рассмотрим последний критерий нашего анализа — тонально-цветовой контраст графемы и фона. Приложение 2, рис. 18 Максимальный контраст между текстом и фоном достигается на новостной странице «Meduza». Причиной этому служит, во-первых, использование контрастного шрифта с засечками PFRegal, во-вторых, применение черного цвета для текста и белого цвета для фона. Новостная страница «Lenta.ru» вновь повторяет ошибку главной страницы сайта: при оптимально подобранном шрифте с засечками Georgia, используется недостаточно контрастный к белому фону оттенок серого. При выборе не самого удачного варианта начертания шрифта Helvetica, в контексте длинного чтения, умеренная контрастность тонально-цветового контраста достигается и новостной страницей «РБК»: текст, оформленный черным цветом на белом фоне читать куда удобнее, чем темно-серые заметки, оформленные гротеском Arial на сайте «РИА Новости».

По итогам анализа, наиболее эргономичной признана новостная страница портала «Lenta.ru», за ней по количеству набранных баллов следует «РИА Новости» и на последнем месте «РБК». Таким образом, результаты функционально-структурного анализа новостных страниц отличны от аналогичных результатов юзабилити главных страниц. Напомним, что по степени эргономичности, главные страницы рассматриваемых медиаресурсов распределились в следующем порядке: «РИА Новости», «Meduza», «Lenta.ru», «РБК». Полученные в ходе анализа баллы представлены в таблице 5 приложения 4 Приложение 4, табл. 5. Визуальное представление реализации каждого из рассмотренных критериев находится в Приложении 2.

Для получение общего индекса эргономичности по итогам проведенного структурно-функционального анализа как для главных, так и новостных страниц рассматриваемых медиаресурсов, совместим полученные данные. Полученный результат показывает, что максимальный уровень эргономичности имеет портал «Lenta.ru», в котором принципы юзабилити были реализованы в большей степени именно на новостных страницах. На втором месте находится «РИА Новости», незначительно отстающий по количеству баллов от «Lenta.ru». Третье место по итогам структурного анализа закрепилось за медиаресурсом «Meduza», а аутсайдером стал сайт «РБК».

Для получения полноценного результата о степени эффективности визуальной организации рассматриваемых СМИ, добавим к полученным в ходе анализа КГМ данным, результаты тестирования ассессоров, оценивавших визуальную организацию рассматриваемых порталов по критериям, основанным на общих принципах юзабилити Якоба Нильсена, а также принципах, описанных в Международном стандарте юзабилити ISO 9241−210:2010 и в национальном стандарта ГОСТ Р ИСО 9241−210—2012.

Группа ассессоров состояла из 11 человек (5 мужчин, 6 женщин), возраст которых колеблется в пределах 23−38 лет, имеющих высшее образование, по роду деятельности являющиеся специалистами и имеющими средний доход. Аудитория подобрана таким образом, чтобы соответствовать целевой аудитории рассматриваемых СМИ. Оценки участников суммировались, после чего подсчитывался общий балл. Полученные данные и визуализация результатов тестирования ассесоров можно найти в приложении Приложение 4, табл. 3, 4; данной исследовательской работы.

За соответствие каждому критерии участники тестирования присуждали баллы. В общем виде ранжирование баллов осуществлялось по следующей схеме: 3 балла причислялось за полное соответствие данному критерию; 1 балл причислялся, если указанный компонент юзабилити был реализован не в полной мере; 0 баллов причислялось в том случае, если заданный критерий не выполнялся. Приведем список критериев и проанализируем полученные результаты:

• 1. Обучаемость: насколько быстро пользователь сумел научиться взаимодействовать с сайтом. Ассессоры причисляли 3 балла в случае, если процесс обучения проходил быстро, медиаресурс был удобен с точки зрения просмотра и поиска информации, а также общей обучаемости. 1 балл участники причисляли, если в процессе обучения возникали сложности и требовалось несколько больше времени на обучение. 0 баллов причислялось, если организация медиаресурса имела серьезные нарекания со стороны участников, а обучение было затруднено. Беспрецедентным лидером по реализации первого критерия стала «Lenta.ru», набравшая по этому показателю максимальное количество баллов. Ассессоры отмечали простоту работы с ресурсом и понятную организацию главной страницы сайта, где с легкостью можно распознать наиболее и наименее актуальную информацию. Чуть менее высокие результаты показал сайт «РИА Новости», но в целом пользователи так же отмечали простую и функционально организованную страницу главную страницу сайта. Важно отметить, что в этом году «РИА Новости» сделали редизайн и часть участников отметили схожесть визуальной организации материалов и оформления новостной ленты этих двух порталов. В целом, никаких серьезных проблем при изучении взаимодействия с данными медиаресурсами выявлено не было. Гораздо хуже оценили участники знакомство с ресурсом «Meduza»: он получил 0 баллов сразу от 4 участников тестирования. Основная трудность, возникающая при первом взаимодействии, была связана с организацией материалов на главной странице. Участники не сразу замечали, что на сайте предусмотрено 2 режима просмотра: лента новостей в режиме реального времени и ранжированная, в соответствии с инфоповодом, страница. Возможно, это связано с тем, что кнопка переключения находится в верхнем правом углу, в одной из наименее просматриваемых зон экранного пространства. Участники, низко оценившие «Медузу» по этому критерию, также отмечали, что крупные блоки контента в ленте новостей препятствуют долгому нахождению на сайте, из-за необходимости долгой прокрутки страницы вниз. Хуже всего участники оценили сайт «РБК», отмечая проблемы при просмотре страницы вниз: новостная лента как бы разваливалась.
• 2. Эффективность подразумевала оценку функциональной части дизайна и успешность выполнения задач. 3 балла причислялось в случае, если пользователь легко ориентировался на сайте, осознавал свое местоположение в его структуре и мог быстро отыскать какой-либо заданный контент. 1 балл соответствовал ситуации, когда пользователь мог ориентироваться на сайте, но возникали сложности при поиске искомого контента. 0 баллов присуждалось, если все указанные действия вызывали сложности из-за организации ресурса. Как и в случае с обучаемостью, высокие баллы по критерию эффективности получили «Lenta.ru» и «РИА Новости». Это можно объяснить тем, что успешность выполнения задач во многом зависит от степени удобства работы с ресурсом. При взаимодействии с рассматриваемыми СМИ, участники тестирования отмечали удобное расположение навигации по сайту и понятное распределение контента по рубрикам. Интереснее рассмотреть указанные недостатки визуальной организации. Наименьшее количество баллов вновь получил медиапортал «РБК». Помимо уже указанной проблемы с «плавающими» блоками рубрикации по сайту, участники указали необходимость применения единого навигационного блока по сайту, по типу используемого в «РИА Новости», где все разделы сайта представлены в виде двухуровневой навигации в верхней части страницы, а не в виде блоков информации в середине страницы.
• 3. Запоминаемость: простота, скорость и успешность взаимодействия с медиаресурсом после перерыва. 3 бала присуждалось в случае, если после обучения ассессор ощущал легкость во взаимодействии с сайтом по прошествии небольшого временного промежутка (в рамках данного исследования взят трехдневный перерыв) и изъявил желание обратится к данному ресурсу в снова. 1 бал причислялся, если у пользователя возникали небольшие затруднения во взаимодействии с сайтом, но на вопрос о возвращению к данному медиаресурсу, как источнику новостной информации, он отвечал утвердительно. 0 баллов присуждалось, если сайт по-прежнему был неудобен в использовании и отсутствовало желание обратится к данному СМИ снова. Возобновление работы с медиаресурсами после трехдневного перерыва повлияло только на оценку портала «РИА Новости» в сторону незначительного ухудшения, успешность взаимодействия с остальными порталами качественно не изменилась. Большинство участников сошлось во мнении, что приятнее всего было вернуться к использованию «Lenta.ru» и «РИА Новости». Желающих в дальнейшем использовать «РБК», в качестве источника информации оказалось значительно меньше (почти половина опрошенных выставила сайту минимальный бал по этому критерию). Такая оценка может объясняться сформированным негативным пользовательским опытом из-за проблем на стадии обучения и решения задач.
• 4. Ошибки: количество системных или иных ошибок, возникающих при взаимодействии с ресурсом. 3 бала присуждалось, если при просмотре сайта в разных браузерах пользователи не выявили каких-либо ошибок, влияющих на работу ресурса и восприятие информации. 1 балл присуждался, если были выявлены 1−2 проблемы, не носящих системный характер. 0 присуждалось в случае существования ошибки, влияющей на взаимодействие с медиаресурсом. Большое количество ошибок может привести к падению траффика сайта и снижению эффективности его функционирования в веб-среде. Никаких проблем, носящих системный характер во время проведения тестирования асессорами выявлено не было, тем не менее, были обнаружены некоторые незначительные сбои. В том числе, при работе на сайте «РБК» страница находилась в постоянной подгрузке. При попытках обновления страницы сайта данная ошибка не устранилась. Небольшие системные сбои обозначились и на сайте «РИА Новости». Так, при тестировании в разных браузерах, портал некорректно отображался в браузере «Internet Explorer». Проблема локализовалась на первом «экране» сайта, где представлены главные новости дня: заголовок и кэпшн новости, а также дата публикации смещались в правый блок, из-за чего полностью прочитать их не представлялось возможным.
• 5. Удовлетворенность: оценка эстетических качеств дизайна и степень удовольствия работы с ним. 3 бала причислялось в случае эстетической удовлетворенность пользователя оформлением сайта и общим положительным впечатлением от работы, сочетание красоты и функциональности дизайна. 1 бал начислялся, если общее впечатление о ресурсе было положительным, но пользователь не был полностью удовлетворен сочетанием эстетических и функциональных качеств. 0 баллов присуждалось, в случае, если у пользователя сложилось отрицательное впечатление о взаимодействии с ресурсом и он низко оценил эстетические качества дизайна. Данный критерий характеризуется наибольшей степени субъективности. Второй раз за время проведения исследования портал «Lenta.ru» получил максимально возможную оценку. Ассессоры единогласно признали оформление этого медиапортала наиболее эстетически привлекательным. Высокий результат показал и «РИА Новости»: как отмечалось ранее, пользователи успели обратить внимание на визуальную схожесть в оформлении этих медиаресурсов. В число лидеров не сумела пробиться «Meduza» несмотря на использование самого минимального, по отношению к «РИА Новости» и «Lenta.ru» количества элементов на странице и ярко выраженной блочной верстки. Высокий балл по искомому критерию получил даже сайт «РБК»: участники тестирования отмечали необычное, по отношению к другим сайтам, цветовое сочетание на странице.
• 6. Скорость работы ресурса. 3 балла причислялось, если ресурс загружался почти моментально. 1 балл присуждался, в случае общей быстрой загрузки, но наличия некоторых проблем при подгрузке контента. 0 баллов соответствовали относительно медленной загрузке сайта или различного контента медиаресурса. По данному критерию все тестируемые ресурсы получили высокий балл. Интересно отметить, что именно в этом пункте сайт «Meduza» разделил лидерство с «Lenta.ru»: главная страница сайта загружалась почти мгновенно, без подвисаний, даже при длительной «ленивой подгрузке». Необходимо отметить, что чаще всего проблема задержки ответа сервера возникает не по вине медиаресурса, а ввиду медленного соединения у тестирующего сайт человека. Анализ скорости загрузки каждого из сайтов с помощью портала «PrCY» подтвердил ощущения пользователей: «Meduza» загружается быстрее всех (0.33 сек) и лучше оптимизирована (оптимизированы изображения, включено сжатие и т. д), а общий результат скорости составил 81%. На сайте «РБК» отключено сжатие, а на сайте «РИА Новости», помимо этого, не оптимизированы изображения. Все это приводит к более низкой загрузке страницы, однако существенного замедления ответа сервера замечено не было.

По итогам тестирования асессоров, наиболее эргономичным признан портал «Lenta.ru», набравший максимальное количество баллов, на втором месте расположился сайт «РИА Новости». С большим отрывом от лидеров, третье место занимает «Meduza», неожиданно набравшая в два раза меньше баллов, чем «РИА Новости». На последнем месте, как и ожидалось, расположился портал «РБК», не сумевший набрать и 100 былов в ходе тестирования. Полученные в ходе анализа баллы представлены в Приложения 4 Приложение 4, табл. 6, 7 данной работы. Таким образом, мы можем говорить о совпадении результатов тестирования асессоров и общих результатов функционально-структурного анализа КГМ рассматриваемых ресурсов.