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

Системообразующие факторы композиционно-графической модели веб-сайта с точки зрения эффективного «опыта взаимодействия»

Рассмотрев в первой главе основные подходы к определению понятия и принципов юзабилити, их связи с принципами минимализма, а также определив некоторые подходы оценки эргономичности веб-ресурсов можно сделать вывод о том, что методы повышения юзабилити сайтов уже длительное время являются объектом изучения со стороны исследователей и специалистов в области веб-эргономики. Основное внимание исследователей направлено на решение практической задачи совмещения эстетических и прикладных аспектов дизайна, принимая во внимание когнитивные возможности аудитории для упрощения процесса восприятия информации, с целью создания удобного интерактивного продукта, отвечающего всем запросам и потребностям пользователей. Проектирование пользовательского опыта, рассмотренное ранее в первой части данного исследования, позволяет разработчикам создавать интерактивный продукт, ориентированный на конкретные потребности, желания, ожидания, ощущения, впечатления и эмоции пользователя, на основе которых определяются способы представления информации, концептуальные подходы к информационной организации сайта, формы выражения функциональности веб-ресурса. Совокупность этих факторов обеспечивает позитивный опыт пользователя, что в дальнейшем, может привести к повышению конкурентоспособности данного сайта, а также увеличению его монетизации. Marcus A. Return on Investment (ROI) for Usability. Nielsen Norman Group, 2013.

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

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

Благодаря исследованиям Якоба Нильсена нам известно, что однонаправленность всех элементов КГМ позволяет пользователям глубже вовлекаться в процесс взаимодействия с веб-ресурсом. Nielsen J., User Satisfaction vs. Performance Metrics. 2012 URL: https://www.nngroup.com/articles/satisfaction-vs-performance-metrics/ (дата обращения: 20.03.2016). Осознание цели взаимодействия и близости к ней, ощущение обратной связи, контроля над ситуацией можно добиться только следуя базовым критериям эффективности визуальной организации страницы. Напомним, что к ним относятся удобство использования средств взаимодействия, доступность и полнота информации при минимуме изобразительных и технических средств, полезность, релевантность и эффективность. При этом необходимо реализовать сверхзадачу всех критериев: обеспечить концентрацию внимания пользователя на самом главном, сделать процесс восприятия более управляемым соответствии с поисковой задачей пользователя.

На решение данной задачи может осознанно влиять дизайнер, создающий визуальную организацию сайта, воздействуя на различные уровни обработки информации человеческим созданием и получая при этом эмоциональный отклик аудитории. Как указывает американский психолог Дональд Норман, существует три таких уровня Норман Д. А. Дизайн привычных вещей. М.: Вильямс, 2006. — С. 118−134:

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

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

Рассмотренные в первой главе данной работы подходы и критерии юзабилити западных и отечественных исследователей в области эргономики во многом схожи. Большинство из них составлены на основе сформированных Якобом Нильсеном компонентов успешного юзабилити, к коим относятся: обучаемость, эффективность, запоминаемость, малое количество ошибок либо их отсутствие. Nielsen J. Usability 101: Introduction to Usability. 2012 URL: https://www.nngroup.com/articles/usability-101-introduction-to-usability/ (дата обращения: 20.03.2016). Рассмотренные в первой главе данной работы подходы и критерии юзабилити в понимании некоторых западных и отечественных исследователей в области эргономики во многом схожи и отличаются широтой предлагаемых перечней. Международный стандарт указывает 3 необходимых компонента юзабилити, к которым относятся: эффективность, т. е. точность и полноценность достигнутых пользователем целей; экономичность, т. е. количество затраченных пользователем ресурсов для достижения целей; удовлетворенность, т. е совокупное удовольствие и комфорт пользователя при работе с ресурсом. Большинство авторов сегодня, в принципе, с такими критериями согласны, отличия наблюдаются лишь в подходах к определению факторов композиционно-графической модели, ответственных за реализацию данных критериев.

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

Количественные и качественные характеристики контента становятся ключевыми факторами в рамках атрибутивного подхода. E. Michailidou, S. Haper, S. Bechhofer, Visual complexity and aesthetic perception of web pages // Proceedings of the 26th Annual ACMInternational Conference on Design of Communication, 2008. — P.216 К этим характеристикам, к примеру, относятся размер изображений, контрастность текста и фона, а также иные компоненты дизайна, составляющие один из важнейших параметров элемента оформления — его визуальный вес. Создание оптимальной организации страницы и ее визуальной иерархии позволяет облегчить процесс поиска необходимой информации и приводит к лучшей ориентации пользователя на сайте, позволяя в дальнейшем сформировать «положительный» пользовательский опыт. Наиболее эффективными средствами в реализации этой задачи, по мнению сторонников атрибутивного подхода, выступают контрастное выделение ссылок, игра с размером изображений. Huang M.H., Designing website attributes to induce experiential encounters // Computers in Human Behavior. 2003. Issue. 19 (4), — Р. 425−442.

Дистрибутивный или распределительный подход предполагает, что ключевая роль в формировании оптимальной визуальной иерархии принадлежит элементам, окружающим целевой компонент страницы. Dyson M.C., Kipping G.J. The effect s of line length and method of movement on patterns of reading from screen // Visible Language, 1998. Issue 32, — Р. 150−181. В этой связи исследователи говорят о, так называемом, конкурирующем контенте, имеющим визуальное сходство с главным элементом страницы, но не предполагающем выполнение тех же функций. По мнению сторонников данного подхода, визуальная конкуренция может усиливаться или уменьшаться в зависимости от нескольких факторов, важнейшим из которых является ширина пробельных элементов. Chaparro B., Baker J.R., Shaikh A.D., Hull S., Brady L. Reading Online Text: A Comparison of Four White Space Layouts // Software Usabilty Reseach Laboratory Wichita State University, 2004. URL: https://www.nngroup.com/articles/ten-usability-heuristics/ (дата обращения: 26.03.2016). Многочисленные эксперименты привели к пониманию того, что использование умеренно выраженных пробельных элементов приводит к увеличению скорости и упрощению поиска нужной информации. 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. 1997, — P. 132 Менее выраженные пробелы приводят к трудностям в восприятии текстовой информации, в то время как широкие пробелы придают ощущение «пустоты» на странице и увеличивают время прокрутки. Умеренное использование пробелов приводит к большей удовлетворенности пользователей в результате взаимодействия с сайтом, чем использование плотного или разностороннего пространства. Недостаточная ширина пробелов или отсутствие полей на странице приводит к уменьшению эффективности восприятия контента, в связи с чем, как отмечают исследователи, регулярные интервалы и вертикальные пробелы рассматриваются в качестве ключевых факторов юзабилити. Chaparro B., Bernard M. Finding Information on the Web: Does the Amount of White Space Really Matter? // Proceedings of the Tenth Annual Usability Professionals' Association Conference, 2001. URL: http://usabilitynews.org/finding-information-on-the-web-does-the-amount-of-whitespace-really-matter/ (дата обращения: 20.03.2016).

Третий подход в рамках исследования эргономики визуальной организации веб-страницы можно назвать композиционно-топологическим. В рамках данного подхода, исследователи юзабилити уделяют особое внимание, так называемой перцептивной разметке странице, т. е. поиску и выделению зон наивысшего внимания пользователя. Иными словами, целевой контент необходимо размещать именно в тех областях страницы, на которые в первую очередь пользователь обращает свой взгляд при взаимодействии с ресурсом. Примером исследований в этой области является рассмотренные в первой главе данной работы исследования Якоба Нильсена, посвященные так называемому «F-паттерну визуального восприятия». Размещение целевого контента и необходимых элементов интерфейса в левой области экрана приводит к удержанию внимания и лучшей ориентации пользователя по сайту. Большое внимание в рамках композиционно-топологического подхода уделяется исследованиям отслеживания движения глаз, т. е. айтрекингу. Суть этих исследований сводится к гипотезе «согласованности мысли и взгляда», согласно которой, «люди видят то, о чем думают». Иными словами, пользователи фиксируют свое внимание на тех элементах оформления и том контенте, которые их интересуют, и «чем дольше они на них смотрят, тем больше о них думают». Нильсен Я. Дизайн Web-страниц. Анализ удобства и простоты использования 50 узлов. М.: Вильямс, 2002. — C. 28.

Четвертый подход, в рамках рассматриваемой темы, подразумевает в качестве ведущего фактора оптимальной визуальной организации веб-страницы детализацию ее графических элементов. В центре исследователей находится так называемый «коэффициент сложности» веб-страницы, имеющий прямое отношение на возможности ее восприятия. Согласно данному подходу, большое количество разного рода деталей в элементах и оформлении контента приводит к ее визуальной нагруженности, в результате чего страница перенасыщена и, в целом, хуже воспринимается пользователями. Geissler G., Zinkhan G., Watson R.T., Web home page complexity and communication effectiveness // Journal of the Association for Information Systems. 2001. Vol. 2 Р. 1−47. Одним из наиболее известных исследований в рамках данного подхода является, так называемая концепция «визуального обогащения» (visual richness), рассматривающая влияние избыточности деталей элементов дизайна и детализации графики страницы на восприятие контента аудиторией. Deng L., Poole M.S. Affect in web interfaces: a study of the impacts of web page visual complexity and order // Management Information Systems Qurterly. 2010. Vol. 34 (4), — Р. 711−730.

Таким образом, можно сделать вывод о том, что при определении факторов реализации успешного юзабилити исследователи концентрируются только на одном элементе макета страницы. В качестве такого аспекта могут выступать: количественные и качественные характеристики контента, влияние «окружающих» или «соседствующих» с целевым контентом элементов, перцептивная разметка, «коэффициент сложности» веб-страницы и иные феномены. Однако, изучая воздействие конкретного аспекта на восприятие веб-страницы, исследователям сложно оценить совокупное воздействие всех элементов композиционно-графической модели. В этой связи нужно учитывать, что восприятие — явление системное, а значит и архитектура страницы — тоже. Для реализации исследования, в этом случае, необходима согласованность факторов КГМ в рамках модели, которая будет учитывать не только прагматические, но и эстетические особенности пользовательского опыта, а также объединит все рассмотренные ранее подходы в формировании оптимальной визуальной иерархии. Якунин А. В. Композиционно-графическая модель веб — сайта как системообразующий фактор формирования «опыта взаимодействия». // Инновационное развитие: ключевые проблемы и решения. Сборник статей Международной научно-практической конференции.2015. С. 176 (174−178.) В основе системного характера взаимодействия лежат особенности когнитивной обработки информации, определяющие взаимодействие пользователя с сайтом.

Основой для системного характера воздействия становится концепция Бориса Величковского Блинникова И. В., Величковский Б. Б., Капица М. С., Леонова А. Б. Экспериментальное исследование прерываний в компьютеризированной деятельности: анализ стратегий переключений между основной и дополнительной задачами // Экспериментальная психология. 2009. № 1. С. 35−51, в рамках которой выделяется два основных режима когнитивной обработки информации: фокальной обработки и общей ориентации. Свое начало данная концепция берет из теории интеграции признаков Энн Трисман, подразумевающую две фазы зрительного восприятия. Treisman, A., Gelade, G. A feature integration theory of attention // Cognitive Psychology. 1980. Vol 12, Р. 97 Как и в теории Трисман, режим фокальной обработки в концепции Величковского подразумевает концентрацию внимания и тщательное рассматривание целевого объекта с целью его распознавания. Величковский Б. М. Исследование когнитивных функций и современные технологии // Вестник РАН. 2010. № 80. С. 440−446. Для поиска на странице и взаимодействия с ресурсами сайта действует режим общей ориентации, предполагающий широкое распределение внимания и увеличение поля зрения. При этом, как мы ранее указывали, для обеспечения максимальной концентрацию внимания пользователя на целевом контенте и упрощения процесса восприятия должны быть задействованы все уровни обработки информации: интуитивный, поведенческий, созерцательный. Норман Д. А. Дизайн привычных вещей. М.: Вильямс, 2006. — С. 118−134.

Способность человеческого внимания функционировать в двух режимах когнитивной обработки позволила сформировать оптимальную методику анализа композиционно-графической модели, направленной на выявление системных отношений внутри ее структуры, объединяющей как эргономические, так и эстетические критерии пользовательского опыта и сохраняющей при этом традиционное для эстетического понимания дизайна представление о системной упорядоченности ее организации. Якунин А. В. Композиционно-графическая модель веб — сайта как системообразующий фактор формирования «опыта взаимодействия». // Инновационное развитие: ключевые проблемы и решения. Сборник статей Международной научно-практической конференции.2015. С. 176 (174−178.) В рамках данного подхода, выделяют два уровня визуальной организации страницы, соответствующих рассмотренным режимам обработки информации:

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

Необходимость анализа визуальной иерархии диктуется задачами ее организации и принципами использования. Определяя ранжирование функциональных и информационных элементов, целевого и вторичного контента по странице, она позволяет облегчить процесс поиска требуемой пользователем информации и формирует условия для создани положительного пользовательского опыта. Как указывают исследователи, некоторыми основными аспектами, выступающими в качестве «разграничителей» уровней иерархии, являются цвет, насыщенность, контрастность, размер, положение и т. д. Шеховцова А. Н. Базовые принципы, применяемые в мультимедийном проектировании // Молодежь и XXI век — 2015 материалы V Международной молодежной научной конференции в 3-х томах. 2015. С. 370 В основе оформления лежат особенности восприятия информации: так приоритетные элементы, вероятнее всего, имеют более крупный размер, более контрастны и могут быть выделены цветом.

Единство всех элементов композиционно-графической модели обеспечивает общенаправленность ее визуального языка. Как указывал Якоб Нильсен: «простота всегда побеждает сложность, особенно в Интернете». Нильсен Я. Веб дизайн: книга Якоба Нильсена. Спб.: Символ-Плюс, 2003. — С. 33 Принципы построения визуальной организации и системно-иерархических отношений внутри КГМ в общем виде можно свести к значению принципов минимализма в веб-дизайне (минимализм средств, значений, структуры и т. д.): оптимальная иерархия не будет замечена пользователями, благодаря гармоничному сочетанию в ней когнитивных особенностей восприятия человека, функционально-эргономических и эстетических аспектов дизайна, в то время как путаница в логике организации страницы сразу обратит на себя внимание аудитории.

Как указывал в своих работах Йозеф Мюллер-Брокманн, «формальная организация поверхности с помощью модульной сетки, наряду со знанием правил четкости и удобочитаемости текста, а также значащее использование цвета — все это срезы инструментов, позволяющих реализовать проект в рациональной и экономической манере». Лаптев В. Типографика: порядок и хаос. М., 2008 — С. 44 В данном исследовании мы будем опираться на целостное понимание композиционно-графической модели в единстве всех ее элементов как системы.

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

• 1. Макроуровень
• · Область экрана
• · Зонирование страницы;
• · Пробельные элементы;
• · Поля и отступы;
• · Длина наборной строки;
• · Интерлиньяж;
• 2. Микроуровень
• · Контурный контраст литеры;
• · Тонально-цветовой контраст символа-графемы и фона;
• · Гарнитура;

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

Макроуровень Область экрана. Ключевой вопрос, связанный с областью экрана заключается в том, насколько сильно расположение элементов влияет на скорость и эффективность восприятия. Ранее отмеченные в данной работе исследования Якоба Нильсена, о так называемом «F-паттерне визуального восприятия», посвящены ответу на этот вопрос. Напомним, что суть данного феномена заключается в особом подходе к восприятию веб-страницы, согласно которому, внимание пользователя максимально сосредоточено в левой верхней части экранного пространства. Nielsen J., F-shaped pattern for reading web content. 2012 URL: http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/ (дата обращения: 27.01.2016).

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

На основе полученных сведений проводились и исследования, связанные с «коэффициентом сложности» веб-страницы, в рамках которых было выявлена сильная взаимосвязь между визуальной наполненностью (т.е сложностью) страницы, количеством изображений, ссылок и верхним левым углом экранного пространства. 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 Использование яркого компонента предполагает увеличение контрастности страницы за счет включения в светло-темную гамму элементов черного, белого или серого цвета. Аналоговая коррекция позволяет акцентировать внимание на контенте, благодаря максимальному повышению насыщенности одного из используемых в цветовой палитре сайта цветов и понижение контрастности для всех других оттенков так же позволит выделить важные элементы страницы.