Минимализм как принцип визуальной организации новостных порталов

На основе полученных сведений проводились и исследования, связанные с «коэффициентом сложности» веб-страницы, в рамках которых было выявлена сильная взаимосвязь между визуальной наполненностью (т.е сложностью) страницы, количеством изображений, ссылок и верхним левым углом экранного пространства. Michailidou E., S. Haper, S. Bechhofer, Visual complexity and aesthetic perception of web pages // Proceedings of the 26th Annual ACMInternational Conference on Design of Communication, 2008.

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

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

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

Главным назначением модульной организации в веб-дизайне является разумное упорядочение информации в соответствии с ее назначением и релевантностью, создание композиционной структуры веб-страницы и сайта в целом. Гаррет Д. Веб дизайн, ориентированный на пользователя. Элементы опыта взаимодействия. СПб.: Симбо, 2008. -- С. 147 Модуль рассматривается в качестве единицы соразмерности, а сетка выступает в качестве системы пропорций. Егорова И.Н., Рыгина В.Е. Исследование методов оптимизации структуры web-страниц // Восточно-Европейский журнал передовых технологий. 2010. Т. 5. № 2 (47). С. 45-47.

Наиболее простым видом модульной организации является блочная или одноколонная сетка («manuscript grid»), представляющая собой одну, размеченную область. В зависимости от оформительского решения, наполнения сайта и поставленных перед композицией задач, количество колонок в сетке может увеличиваться. Модули, в основе которых чаще всего лежит квадрат или прямоугольник, содержат поле, используемое для размещения контента.

По мнению Джеймса Фелличе, модульная сетка является основным компонентом оптимально сверстанной страницы. Феличи Дж. Типографика: шрифт,верстка, дизайн. СПб.: БХВ-Петербург, 2004. - С. 496 Благодаря ей возможно системное упорядочение элементов, позволяющее ускорить ориентацию пользователя по странице, и создание рационально организованного визуального пространства. Описывая влияние модульной организации макета на восприятие представленного контента, Владимир Лаптев называет сетку «невидимым костяком» дизайна любого графического пространства. Лаптев В. Модульные сетки: проектирование многополосных изданий. М.: РИП-холдинг, 2007. - С. 204

В рамках создания композиции и проектирования визуальной иерархии веб-страницы модульная структура макета позволяет решать ряд функционально-ориентированных задач: Curtis N. Modular Web Design: Creating Reusable Components for User Experience Design and Documentation. New Riders, 2010. -- P.5

целенаправленное разделение контента;

упорядочение контента и обеспечение связи между разными блоками;

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

сохранение визуальной преемственности при переходе от одной странице к другой;

возможность использования технологии «ленивой подгрузки» (lazy loading);

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

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

Польза модульной структуры макета становится еще более очевидной при изучении некоторых исследований в области веб-эргономики, касающихся приоритетности задач пользователей на веб-странице. Американский исследователь в области юзабилити Джерри Макговерн пришел к выводу, что пользователи просматривают страницу небольшими блоками или секциями, назвав данный феномен «блочное чтение». McGovern G. Block reading: how we read on the Web. 2008. URL: http://www.gerrymcgovern.com/new-thinking/block-reading-how-we-read-web (дата обращения: 24.04.2016) Главный его вывод заключается в том, что человек не сканирует взглядом всю страницу, а делит ее на различные блоки, в которых стремится найти нужную информации или контент. Результаты исследования приоритетности задач во многом совпали с исследованиями Нильсена: при взгляде на веб-страницу, мы склонны воспринимать ее не целиком, а в качестве распределенных кусков информации. Согласно результатам Макговерна, в левом верхнем квадрате экранного пространства пользователи ищут навигационный блок и основную информацию. И хотя центральная часть страницы является очень важным пространством, в первую очередь пользователи обращают внимание именно на «левую колонку» экрана. Правая сторона страницы оказывается наименее просматриваемой пользователями поскольку в большинстве случаев, согласно данным Макговерна, при поиске нужного контента читатели обращались в эту область в последнюю очередь.

«F-образная» верстка по-прежнему является одним из наиболее оптимальных способов организации страницы, однако нельзя упускать из виду тенденции современного веб-дизайна и количество ежедневно появляющейся и потребляемой информации. Если раньше длинная прокрутка считалась определенным недостатком дизайна, сильно влияющим на скорость чтения и, соответственно, увеличивающим длительность восприятия информации, то теперь это актуальнейшая тенденция в вебе и способ оптимальной организации контента. Количество потребляемой информации ежедневно растет, а значит, необходимо грамотно ее представлять пользователям: длинная прокрутка или технология «ленивой подгрузки» (lazy loading) позволяет догрузить более ранний контент, представленный в новостной ленте. Несмотря на практическое удобство данной технологии, ее юзабилити все еще требует доработок. Как указывает Макговерн, одним из наиболее верных способов оптимизации длинной прокрутки является разбивка длинных материалов на параграфы, с учетом оптимального использования пробельных элементов. McGovern G. Block reading: how we read on the Web. 2008. URL: http://www.gerrymcgovern.com/new-thinking/block-reading-how-we-read-web (дата обращения: 24.04.2016)

К интересным выводам пришли исследователи Сью и Чапарро, проанализировав макеты с использованием модульной организации и без нее. Согласно их результатам, отсутствие сетки макета приводит к путанице в порядке выполнения действий на странице. При этом, эмпирически было подтверждено, что в первую очередь и чаще всего пользователи обращаются к верхнему левому квадрату экранного пространства. Siu C., Chaparro B. How do Users View Search Results Presented in a Grid Layout. 2014 URL: http://usabilitynews.org/how-do-users-view-search-results-presented-in-a-grid-layout/ (дата обращения: 24.04.2016)

Таким образом, модульная организация структуры макета организует и осмысляет веб-страницу, помогает в реализации понятного и, одновременно с этим, эстетичного представление контента, выстроенного таким образом, чтобы его изучение происходило почти на интуитивном уровне и способствовало быстрому нахождению необходимой информации. Распределяя пространство страницы, она позволяет найти решение для расположения всех составляющих страницы: от целевых до вспомогательных и менее значимых. Последовательное расположение всех элементов визуального оформления способствует упрощению визуальной обработки информации, благодаря чему пользователи быстрее учатся работе с ресурсом. Шеховцова А.Н. Базовые принципы, применяемые в мультимедийном проектировании // Молодежь и XXI век - 2015 материалы V Международной молодежной научной конференции в 3-х томах. 2015. С. 374

Пробельные элементы. Важным фактором в организации пространства в полиграфии и веб-среде является так называемое «белое», «негативное» пространство страницы, иначе называемое «воздухом» (whitespace). Фомишина О.В. Повышение качества восприятия контента сетевых электронных журналов средствами модульного проектирования // Вестник современной науки. 2015. Вып.7 № 7-1. С. 170-174. В виртуальной среде оно играет значимую роль, поскольку выступает фактором организации контента и помогает концентрировать внимание пользователя на целевой информации. «Воздух» выполняет так называемую «интеллектуальную» организацию элементов по странице, выделяя и разделяя разные группы текста и графики, создает невидимый порядок и способствует улучшению в восприятии контента. DiMarco J. Web Portfolio Design and Applications. NY.: Idea Group Inc, 2006. -- P.5 Также, к числу главных функций негативного пространства можно отнести создание ритма и обеспечение равновесия как внутри контента и между разными его группами, так и в целом на странице.

Отсутствие пробельных элементов приводит к возникновению визуальной «перенасыщенности» страницы, в результате чего восприятие информации и поиск нужного контента может быть осложнены. Как указывает Якоб Нильсен, благодаря четкости выделения блоков, белое пространство выступает не только отличным инструментом разбивки разных групп контента, но к тому же позволяет ускорить время загрузки страницы. Нильсен Я. Веб дизайн: книга Якоба Нильсена. Спб.: Символ-Плюс, 2003. -- С. 29 Направляя взор пользователя по странице, «воздух» буквально обеспечивает «дыхание» дизайна, не позволяя контенту сталкиваться, толпиться и бороться друг с другом за внимание пользователя. Берд Д. Веб-дизайн: руководство разработчика. СПб.: Питер, 2012. -- С.30

Эффективное восприятие «воздуха» довольно давно является объектом изучения со стороны исследователей и специалистов в области веб-эргономики. Основная идея данных исследований заключалась в том, что использование негативного пространства влияет не только на эстетическую привлекательность дизайна, но также добавляет ему функциональности. Например, было определено, что пробельные элементы играют решающую роль в направлении внимания пользователя к тем областям страницы, где сосредоточена наиболее значимая информация. Mullet K., Sano D., Designing Visual Interfaces // Englewood Cliffs, NJ: Prentice Hall PTR. 1995. -- P.126 Утверждалось, что пробелы дают глазу место для отдыха, осуществляют визуальную взаимосвязь элементов способствуют идентификации на странице, благодаря повторению легко распознаваемых областей. White, J. V. (1974). Editing by design: Word and picture communication for editors and designers. NY.: R.R. Bowker Company, 1984.

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

Согласно исследованиям, проведенным специалистом в области юзабилити Джаредом Шпулом и его коллегами, сайты, имеющие более плотные, с точки зрения использования пробельных элементов, макеты, воспринимаются пользователями лучше, нежели чем ресурсы с большим количеством негативного пространства. Spool, J. M., Schroeder, W., Scanlon, T., Snyder, C. Web sites that work: Designing with your eyes open // Proceedings of CHI' 98. 1998, -- P. 18-23. Результаты показали, что именно сайты, активно использующие в своей визуальной организации широкие и длинные пробелы, имеют проблемы связанные с ориентацией пользователя по странице: успешный поиск целевого контента гораздо чаще реализовывался на сайтах с «плотной» организацией. В частности, они обнаружили, что при взаимодействии с сайтами, использующими крупные пробелы, пользователи испытали меньшую сосредоточенность в процессе работы и не были достаточно удовлетворены ее результатами в аспектах поиска информации, удобства чтения, использования, общей функциональности и визуального оформления. Spool J.M., Scanlon T., Schroeder W., Snyder C., DeAngelo T. Web Site Usability: A Designer's Guide, User Interface Engineering. NY.: North Andover MA, 1998. Согласно Шпулу, причина это заключается в особенностях восприятия: пользователи скользят по странице, а не читают ее. Таким образом, близкая компоновка взаимосвязанных компонентов сыграла решающую роль в определении предпочтений пользователей.

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

Эмпирически, использование средних по размеру вертикальных и горизонтальных пробельных элементов было подтверждено Майклом Бернардом и Барбарой Чапарро, взявших за основу идею о градации величины пробелов и ее влиянии на ограничения в восприятии информации. Bernard M., Chaparro B., Thomasson, R. Finding information on the web: does the amount of whitespace really matter? // Usability News. 2000. Vol. 2, Issue 1. URL: http://usabilitynews.org/finding-information-on-the-web-does-the-amount-of-whitespace-really-matter/ (дата обращения: 24.04.2016) Они проанализировали сайт, применяя на одном трехколонном макете разные по величине пробелы:

1. В первом случае, пробелы на сайте отсутствовали: применялось лишь минимальное разделение колонок друг от друга в 1 символ (3 мм). Никакого дополнительного пространства между абзацами или параграфами использовано не было.

2. Во втором случае в качестве пробельного расстояния, как между колонками, так и между абзацами использовалось расстояние в 4 символа (равное 9 мм). Это использование пробелов обозначили как умеренное или среднее.

3. В третьем случае пробельное расстрояние между колонками составляло 11 символов (19 мм) и 4 пустые строки (19 мм) между абзацами. Такое использование белого пространства обозначили как использование широких пробельных элементов.

Три макета оценивались участниками тестирования с точки зрения сложности выполнения определенных поисковых задач и восприятия веб-страниц в целом. Было определено, что пользователи были более удовлетворены, взаимодействуя с макетом, где использовались умеренные пробельные элементы. Интересно отметить, что никаких существенных различий в восприятии страницы с минимальными и широкими пробельными элементами не возникало. В целом было отмечено, что использование минимальных пробелов мешает чтению из-за «сдавливания» пространства, а использование широких пробелов приводит к замедлению чтения текстовой информацию Минимальные пробелы давали эффект переполненности страницы информацией без попытки ее распределения, а широкие пробелы создавали видимость пустоты на экране и требовали больше времени на ее просмотр. Bernard M., Chaparro B., Thomasson, R. Finding information on the web: does the amount of whitespace really matter? // Usability News. 2000. Vol. 2, Issue 1. URL: http://usabilitynews.org/finding-information-on-the-web-does-the-amount-of-whitespace-really-matter/ (дата обращения: 24.04.2016)

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

Ключевой вопрос в рамках веб-эргономики - какой величины должен быть пробел для успешного юзабилити. Горизонтальные пробельные элементы часто ориентированы на базовую сетку, а регулировка вертикальных, основана на гештальп-психологии и зависит от размера шрифта, интерлиньяжа, ширины линии и некоторых других параметров. Роль полей и отступов в опыте чтения достаточно часто рассматривается в научном сообществе. К примеру, вышеописанное исследование Бернарда и Чапарро выявило необходимость использование умеренных пробельных элементов в тексте. Эти результаты позволяют адаптировать новые способы организации контента (например, технологию «ленивой подгрузки») в соответствии со способностями человеческого восприятия. В качестве оптимального размера пробела для разграничения колонок и абзацев в рамках одного текста, Бернард и Чапарро, принимают расстояние в 4 символа (9 мм). Bernard M., Chaparro B., Thomasson, R. Finding information on the web: does the amount of whitespace really matter? // Usability News. 2000. Vol. 2, Issue 1. URL: http://usabilitynews.org/finding-information-on-the-web-does-the-amount-of-whitespace-really-matter/ (дата обращения: 24.04.2016)

В ходе другого исследования, была выявлена прямая зависимость между интерлиньяжем, скоростью чтения и пониманием прочитанного. Chaparro B., Baker J.R., Shaikh D., Hull S., Brady L. Reading Online Text: A Comparison of Four White Space Layouts. 2003. URL: http://usabilitynews.org/finding-information-on-the-web-does-the-amount-of-whitespace-really-matter/ (дата обращения: 24.04.2016) Оказалось, что использование оптимально подобранных полей (не менее 10 мм) и интерлиньяжа приводит к наименьшим уровням физической усталости во время чтения и большей удовлетворенностью макетом. Пользователям предлагалось 4 варианта оформления текстовой информации, с учетом оптимально установленных полей и интерлиньяжа, и без них. Скорость чтения при отсутствии полей возрастала со 180 до 195 слов в минуту, в то время как понимание прочитанного ухудшалось почти в два раза. В результате, наиболее удобным вариантом, с точки зрения восприятия информации и понимания прочитанной информации, большинство пользователей посчитало сочетание «Поля + оптимально установленный интерлиньяж», наименее - «Отсутствие полей + оптимальный интерлиньяж».

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

Восприятие целевого контента, во многих случаях, обусловлено характером и оформлением соседствующего с ним контента. Согласно мнению Гэри Гесслера, существует прямое влияние количества изображений и ссылок на восприятие страницы. Geissler G., Zinkhan G., Watson R.T., , The in?uence of home page complexity on consumer attention, attitudes, and purchase intent // Journal of Advertising . 2006. Vol. 35 Р. 69-80. Здесь имеет место ранее упоминаемый феномен «коэффициента сложности» веб-страницы. «Коэффициент сложности» страницы можно представить в виде двух измерений: «визуальное разнообразие» и «визуальное обогащение» или «визуальная наполненность». Визуальное разнообразие измеряется разновидностями присутствующих на странице элементов (текст, графика, гиперссылки), а визуальное обогащение их количеством. Lo L. Three ways to convert browsing into impulse buying: Website streamline and decoration // Management, Knowledge and Learning (MakeLearn) International Conference, 19-21 June, 2013. -- P.1181 (1177-1186)

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

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

Одно из первых исследований с компьютерными мониторами в этой области принадлежит Душински и Колерсу, установившим, что текст, размещаемый в строке в 187 символов, читается на 28% быстрее, чем аналогичная информация, вмещенная в текстовую линию, составляющую 62 символа. Duchnicky, J. L., & Kolers, P. A. (1983). Readability of text scrolled on visual display terminals as a function of window size. Human Factors, 25, 683-692. Эти исследования были продолжены Дайсоном и Киппингом, подтвердившим ранее заявленную гипотезу о том, что экранный текст читается быстрее при большем количестве символов. После проведения аналогичных исследований было установлено, что оптимальной, может считаться длина строки, составляющей от 75 до 100 символов. Dyson, M. C., & Kipping, G. J. (1998). The effects of line length and method of movement on patterns of reading from screen. Visible Language, 32, 150-181. Оформленный в такую ширину текст читался быстрее, чем умещенная в 25 символов информация того же объема, однако, никакой разницы в непосредственной эффективности восприятия найдено не было. Дальнейшие исследования опровергали предыдущие опыты, каждый раз устанавливая новые стандарты.

По большей части исследователи были сосредоточены исследованиях в области уменьшения длины строки. Дайсон и Хазельгроу обнаружили, что информация в строке длиной в 55 символов читается быстрее, чем любой аналогичный текст, умешенный в 100 или 25 символов. Dyson, M. C., & Haselgrove, M. (2001). The influence of reading speed and line length on the effectiveness of reading from screen. International Journal of Human-Computer Studies, 54, 585-612. Об этом же свидетельствовал на основе проведенных исследований Грабингер (45-60 символов) и многие другие исследователи. Grabinger, R. S., & Osman-Jouchoux, R. (1996). Designing screens for learning. In H. van Oostendorp & S. de Mul (Eds.), Cognitive aspects of electronic text processing. Norwood, NJ: Ablex Publishing Corporation. Хортон, Миллс и Уэйндон указывали оптимальной строку не более чем в 60 знаков, указывая на то, что увеличение длины линии приведет к более скорой утомляемости. Horton, W. (1989). Designing and writing online documentation: Help files to hypertext. John Wiley & Sons: New York. Наконец, Бернард, Фернандез и Чапарро установили, что предпочтительная длина строки составляет около 75 символов для взрослых и 45 символов для детей. Bernard, M. L., Fernandez, M., Hull, S., & Chaparro, B. S. (2003). The effects of line length on children's and adults' perceived and actual online reading performance. Proceedings of the Human Factors and Ergonomics Society 47th Annual Meeting, 1375-1379.

Таким образом, строго определенной длины строки не определено. Ее параметры колеблются в области от 60-75 символов. В целом, последние исследования в этой области показывают, что аудитория предпочитает умеренность и не слишком тяготеет к экстремально коротким (меньше 35 символов) или сверхдлинным (больше 95 символов) решениям. Shaikh A.D. The Effects of Line Length on Reading Online News // Usability News. 2005. URL: http://usabilitynews.org/finding-information-on-the-web-does-the-amount-of-whitespace-really-matter/ (дата обращения: 24.04.2016) Интересно отметить, что при максимальных показателях длины строки (95 символом и больше) скорость чтения увеличивается, а при выборе минимальных показателей она становится значительно ниже.

В среднем, оптимальное восприятие в совокупности с данными о скорости чтения, позволяет выделять в качестве оптимальной длины строки значение в области 60-80 символов.

Интерлиньяж характеризует близость двух соседних строк в тексте. Это пробельное расстояние между строками или базовыми линиями шрифта, шаг строки по вертикали. Кричевский В. Типографика в терминах и образах. Том I. М.: Слово, 2000. - стр. 126 Интерлиньяж выражается в типографских пунктах (пт), а его оптимальное значение определяется исходя из кегля и стиля шрифта, буквенного регистра, но может изменяться в зависимости от задачи данного текстового блока. Goldberg R. Digital Typography Pocket Primer. London: Windsor Professional Information, 2000. -- P. 114 Для достижения сбалансированного текстового блока, как правило, интерлиньяж должен быть несколько больше (на 2 пт), чем размер шрифта. К примеру, интелиньяж текста, с заданным кеглем в 14 пунктов, будет составлять 16 пунктов. В виртуальной среде размер кегля и измеряется не только в пунктах, но и в пикселях. 1 пункт (типографский) составляет примерно 1.32 пикселя. Соответственно, если кегль составляет 14 пт. и 16 пт. интерлиньяж, то в пикселях значение кегля будет примерно равно 18, а кегля 21. Таким образом, оптимальным размером для интерлиньяжа в рамках веб-дизайна принято считать значение от 2-5 пикселей. Особенности шрифтовой гарнитуры оказывают значительное влияние на установку определенного интерлиньяжа. Это связано с тем, что некоторые шрифты занимают больше или, напротив, меньше горизонтального или вертикального пространства. Поэтому для поддержания гармонии и равновесия текстового блока необходимо помнить о некоторых правилах. Для гарнитур, имеющих более компактный рисунок шрифта, используют наименьший интерлиньяж. И напротив, имеющие более крупный рисунок гарнитуры требуют больший пробел между строками. Ambrose G., Harris P. The Fundamentals of Typography. NY.: A&C Black, 2006. -- P. 115 Тестовый блок оформленный сильными гарнитурами, вроде «Фактуры» или «Гарамонд», должны быть оформлен таким образом, чтобы линия строки оставалась цельной, несмотря на широкий рисунок шрифта, поэтому целесообразно использование минимального пробела между базовыми линиями и обеспечить «узкий» набор. Как указывал в своих работах Ян Чихольд, если выбранная гарнитура шрифта тяготеет к антикве старого стиля, то пробел между строками должен быть больше, соответственно, чем сильнее она приближена к антикве нового стиля, тем меньше. Чихольд Я. Облик книги. М., 1980 -- P. 135

Существуют и другие, общепризнанные принципы для определения оптимального межстрочного интервала. К ним относят правило, сформулированное немецким типографом Эриком Шпикерманом, которое заключает в себе все выше обозначенные особенности выбора межсточного пробела: оптимальный интерлиньяж должен быть больше межсловного пробела. Tselentis J., Haley A., Poulin R., Seddon T., Leonidas G., Saltz I., Henderson K., Alterman T. Typography, Referenced: A Comprehensive Visual Guide to the Language, History, and Practice of Typography. NY.: Rockport Publishers, 2012 -- P. 103 Это позволяет добиться быстрого, последовательного прочтения текста, поскольку взгляд читателя будет двигаться по одной строке и затем переходить к следующей, а не прыгать по ним.

Микроуровень

Контурный контраст литеры связан с четкостью контура буквы в составе заголовков, лидов, основных текстовых блоков. Контрастность является характеристикой, определяющей рисунок шрифта, степень насыщенности и четкость литеры. Существуют шрифты с высокой контрастностью (обыкновенная группа), с меньшей (медиевальная), малой (малоконтрастная и брусковая) и неконтрастные шрифты (рубленная с едва наметившимися засечками). Никитин В.А., Привалова О.Ю. Шрифты: современные начертания, характерологические особенности, типология. "Техника и технология СМИ", "Дизайн газеты. СПб. : СПбГУ, 2004. - C. 11

Контрастность литер определяется толщиной основных и соединительных линий: если их соотношение составляет 2:1 или меньший показатель, то текст, набранный таким шрифтом, будет малоконтрастен. Королькова А. Живая типографика. М.: IndexMarket, 2010. - стр. 114 Соответственно, если указанное соотношение больше, то такой шрифт будет контрастным. Контрастность литер в веб-среде имеет доминирующее значение в аспекте удобочитаемости. Связано это с тем, что текст на экране компьютера большинством людей воспринимается хуже, ввиду множества особенностей: размер, яркость и разрешающая способность экрана, расстояние до текста, установленный масштаб веб-страницы и т.д. Соответственно, если какой-то шрифт будет иметь оптимальную контрастность на листе бумаге, то вовсе необязательно, что эта четкость сохранится при аналогичном применении шрифта в виртуальной среде. Поэтому ресурсам, где текстовая информация является доминирующим контентом, необходимо использование достаточно контрастного шрифта или выбора его оптимального контрастного начертания, для создания максимально комфортных условий восприятия информации. От контрастности шрифта на экране зависит его разборчивость, являющаяся качественной характеристикой, особенно важной для оптимального прочтения и восприятия тестовой информации: с большого расстояния за короткое время. Hillner M. Basics Typography: Virtual Typography. NY.: AVA Publishing, 2009. -- P.117 Поэтому необходимо помнить, что даже правильно подобранная гарнитура шрифта, характеризующаяся высокой контрастностью, может отражаться недостаточно четко и разборчиво на экране цифрового устройства. В таком случае, удобочитаемость текста снизится и необходимо предпринять действия по улучшению контрастности текста. Для этого, например, можно применить более контрастное начертание, предусмотренное выбранной гарнитурой или увелить параметры контрастности литер в таблице каскадных стилей CSS. В аспекте удобочитаемости длинных текстов в виртуальной среде, важно отметить, что полужирное начертание шрифта воспринимается так же хорошо, как и нормальное, а в некоторых случаях даже предпочтительнее. Кричевский В. Типографика в терминах и образах. Том I. М.: Слово, 2000. - С. 126

Гарнитура определяет все стилистические вариации шрифта, к которым относятся его рисунок, размер, пропорции и начертание. Так степень контрастности штрихов, высота литер, буквенный просвет, кернинг, форма засечек, концевых элементов -- все эти показатели могут существенно отличаться не только в разных шрифтах, но и в рамках одной шрифтовой гарнитуры, поскольку разные начертания могут отличаться степенью масштабирования по горизонтали или вертикали. Goldberg R. Digital Typography Pocket Primer. London: Windsor Professional Information, 2000. -- P. 171 Таким образом, наилучшим решением при определении шрифтового расписания веб-ресурса будет использование гарнитуры, включающей большое количество начертаний, чем стандартный набор, состоящий из нормального, курсивного, жирного, полужирного, светлого, узкого, широкого начертания. Это позволит решить ряд функционально-эстетических задач, среди которых будет соблюдение единообразия и возможность выбора нужного начертания для каждого из текстовых элементов на странице. Разнообразие начертаний гарнитуры расширяет возможности визуального оформления и представления текстовой, придает гибкость дизайну, позволяет создавать типографические акценты, без применения дополнительных шрифтов.

В контексте того, как гарнитура влияет на эффективность чтения с экрана можно отметить некоторые принципы использования разных шрифтов. Тимоти Самара выделяет следующие группы шрифтов, в соответствии с : старый стиль, переходный стиль, модерн, сериф и сансериф, рубленные, акцидентные. Самара Т. Типографика цвета. Практикум. М.: Рип Холдинг, 2010. --С. 9 В современных компьютерных технологиях чаще всего используют сериф/cансериф и рубленные. Группа шрифтов сериф или (Georgia, Times New Roman, Garamond и т.д.), представляет собой легкочитаемые, контрастные шрифты с засечками. Сансериф (Arial, Tahoma, Verdana и т.д.), что в переводе с английского означает «без засечек», так же оптимизированные под природу экрана шрифты, характеризующиеся отсутствием лишних деталей, единой шириной штрихов, плотным набором и разборчивостью при небольшом кегле. Goldberg R. Digital Typography Pocket Primer. London: Windsor Professional Information, 2000. -- P. 173 Согласно ряду исследователей, для лучшего восприятия объемных текстовых блоков желательнее выбирать шрифты с засечками, поскольку, как указывал Картер, сетчатка глаза цепляется за них и взор человека быстро и последовательно следует по всей строке текста. Картер М. Современный дизайн газет. М.: Российско-Американский Информационный Пресс-Центр, 1995. - С. 10

В центре внимания научного сообщества находятся вопросы предпочтительного выбора той или иной группы шрифтов, а также размера кегля. Многочисленные эмпирические исследования в этой области подтверждают, что пользователи предпочитают читать текст с засечками, в то время как сериф в их понимании удобен для оформления заголовков, подзаголовков и лидов. Morrison S., Noyes J., A Comparison of Two Computer Fonts: Serif versus Ornate Sans Serif // Usability News. 2003. URL: http://usabilitynews.org/a-comparison-of-two-computer-fonts-serif-versus-ornate-sans-serif/ (дата обращения: 24.04.2016) Однако некоторые исследования последних лет выявили тенденцию к наилучшему восприятию текста, оформленного сансерифом. К таким результатам пришли Боярски и Форлиззи Boyarski D., Neuwirth C., Forlizzi J.,Regli S.H. A study of fonts designed for screen display // In Proceedings of CHI'98. Los Angeles 1998. -- P. 127-128., в рамках изучения шрифтов Georgia и Verdana, а также Бернард и Миллс, установившими, что восприятие текста, оформленного серифом незначительно выше, чем оформленного шрифтом с засечками. Последние, к слову, выявили еще и то, что оптимальным размером шрифта основного текста рекомендуется устанавливать значение в 12 пунктов. Bernard M., Mills M. So, What Size and Type of Font Should I Use on My Website? // Usability News. 2000. URL: http://usabilitynews.org/so-what-size-and-type-of-font-should-i-use-on-my-website/ Интересно отметить, что, несмотря на лучшие результаты шрифтов без засечек в аспекте восприятия, пользователи все равно предпочитали сериф.

Впрочем, в широком смысле в научном сообществе принято считать, что в вопросах восприятия текста с засечками и без них нет, нет никакой разницы Tullis T.S., Boynton J.L., Hersch H. Readability of fonts in the windows environment // In Proceedings of CHI'95. 1995. -- P. 127-128..

Тонально-цветовой контраст графемы и фона отвечает за видимость буквы по отношению к фону страницы. Ни для кого не является секретом, что максимальное удобство при восприятии текстовой информации достигается благодаря применению контрастности фона и текста. Калиновский А.И. Юзабилити - как сделать сайт удобным. М: Новое знание, 2005 -- С. 128 Золотая формула в этом случае определяется стандартом «темный шрифт светлый фон», что является своего рода основным принципом в данном вопросе. Такой подход связан с возможностями нашего зрения: при недостаточном контрасте фона и текста глаза устают, поскольку читаемость и различимость графем снижается, что приводит к необходимости вглядываться в экран. В целом, следуя указанному правилу, большинство теоретиков и практиков дизайна рекомендуют использовать для оформления текста темные оттенки, а для фона подбирать более ненасыщенные цвета.

Количество цветов в композиции и правильное их использование определяется законами сочетаемости. Цветовой круг позволяет определить оптимальную цветовую комбинацию фона и текста, позволяющую создать единообразие и контраст на странице. Гаррет Д. Веб дизайн, ориентированный на пользователя. Элементы опыта взаимодействия. СПб.: Симбо, 2008. -- С. 156

Монохроматические цветовые схемы состоят из различных тонов и полутонов в пределах определенного цвета. При использовании такой схемы необходимо руководствоваться принципом контрастности фона и текста при получении оптимальных оттенков цвета и определении их функций. Wolfersperger S.K., Carlston E. Experimenting with Art. NY: Good Year Books, 1991 -- P. 44 Основной цвет добавляется немного черного, тон состоит из базового и серого цветов, а полутон из смешения базового и белого цветов. Монохромное сочетание цветов не отвлекает пользователя от контента, выглядит гармонично и умеренно, хотя при неправильном использовании цвета зачастую выглядит скучно из-за сложностей в акцентировании.

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

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

После определения методологии анализа и необходимых критериев для его осуществления, приступаем к структурно-функциональному анализу медиаресурсов. В качестве эмпирического материала наши были выбраны 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.) и особенностей ярко выраженной блочной верстки. Как и в предыдущих рассматриваемых медиаресурсах, здесь присутствует аффорданс, но в меньшей степени, чем на сайте того же «РБК». Селективность обеспечивается выделением темного и серого цвета для разных групп контента.