САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
Институт «Высшая школа журналистики и массовых коммуникаций»
На правах рукописи
РЫБАКОВА Юлия Юрьевна
Принцип минимализма как фактор юзабилити в дизайне новостных
порталов
Профиль магистратуры – «Медиадизайн»
МАГИСТЕРСКАЯ ДИССЕРТАЦИЯ
Научный руководитель –
кандидат филологических наук,
доцент А. В. Якунин
Вх. №______от__________________
Секретарь _____________________
Санкт-Петербург
2016
СОДЕРЖАНИЕ
ГЛАВА I. МИНИМАЛИЗМ КАК ФАКТОР КОМПОЗИЦИОННОГРАФИЧЕСКОГО ПРОЕКТИРОВАНИЯ СЕТЕВЫХ СМИ........................9
1.1 Функциональный подход в дизайне современных сетевых ресурсов..........9
1.2 Эстетический и функциональный аспекты минимализма в контексте задач
юзабилити-проектирования..................................................................................30
ГЛАВА II МИНИМАЛИЗМ КАК ПРИНЦИП ВИЗУАЛЬНОЙ
ОРГАНИЗАЦИИ НОВОСТНЫХ ПОРТАЛОВ..............................................44
2.1 Системообразующие факторы композиционно-графической модели вебсайта с точки зрения эффективного «опыта взаимодействия».........................44
2.2 Особенности юзабилити новостных порталов: опыт структурнофункционального анализа.................................................................................... 73
2.2 Минимализм как взаимодействие эстетического и функционального в
дизайне новостных порталов............................................................................. 102
ЗАКЛЮЧЕНИЕ................................................................................................. 114
СПИСОК ИСТОЧНИКОВ И ЛИТЕРАТУРЫ..............................................117
ПРИЛОЖЕНИЕ.................................................................................................129
ВВЕДЕНИЕ
В связи с тем, что роль технологий визуального оформления контента в
массовой коммуникации непрерывно возрастает, дизайн в современных СМИ
становится одним из ведущих факторов эффективного восприятия массовой
информации. Дизайн, построенный на основе композиционно-графического
моделирования, способствующего оптимальной организации вербальных и
невербальных компонентов издания, ориентированный на конкретную
аудиторию с ее социально-демографическими и психологическими
особенностями, является не только элементом фирменного стиля, но и
стратегическим ресурсом повышения конкурентоспособности данного
издания.1
Так, действительно эффективный сайт должен служить стратегическим
целям того или иного СМИ, одновременно с этим удовлетворяя потребности
читательской аудитории и упрощая процесс восприятия предлагаемой
информации. В эпоху конвергентной журналистики решение двух этих задач
становится одним из наиболее приоритетных для СМИ.
Однако для
достижения результата и создания эффективного интерфейса недостаточно
учитывать только технический фактор, куда важнее представляется вопрос
формирования опыта взаимодействия пользователя, поскольку именно он
принимает решения, посещая тот или иной ресурс. Описывая качества
оптимальной визуальной модели веб-сайта с функциональной точки зрения,
теоретики и практики дизайна часто используют критерий «минимализм»,
дополняя описание такими свойствами визуальной организации, как
«аскетичность» и «простота». Безусловно, использование термина
«минимализм» подразумевает следование определенным канонам данного
художественного явления. Тем не менее, в настоящее время в научном
сообществе до сих пор не выработано строго однозначное определение данного
1 Рыбакова Ю.Ю. Дизайн интерфейса как ресурс повышения конкурентоспособности // Медиа в
современном мире. Молодые исследователи. МАтериалы 14-й международной конференции студентов,
магистрантов и аспирантов 11-13 марта 2015 г. C. 469 - 471 URL:
http://jf.spbu.ru/upload/files/file_1425986116_2.pdf (дата обращения: 15.01.2016)
феномена, а вопросы точно определенного списка эстетических параметров
минимализма находятся лишь на начальном этапе своего решения.
В этой
связи, природа и конкретные свойства «минимализма» в организации
визуального облика веб-ресурсов остаются не до конца уточненными. Не до
конца ясно и то, совпадают ли принципы эстетики и функционализма.
Таким образом, актуальность работы обусловлена необходимостью
изучения критериев эффективности дизайна интерактивного медиапродукта,
которые влияют на процессы восприятия и репрезентации информации,
потребительские свойства издания, его узнаваемость читателями, эстетическую
ценность. Необходимо отметить, что до сих пор вопросы интерфейса (опыта
взаимодействия) в отечественных исследованиях рассматривались в отрыве от
теоретических вопросов дизайна как такового, значение которого нередко
сводится только к семиотическим и эстетическим факторам.
П р о б л е м а нашего исследования
заключается в определенной
двойственности большинства существующих подходов к оценке эффективности
визуальной организации веб-ресурса. В условиях медиаконвергенции дизайн
интернет-медиа стремится стать максимально эргономичным, чтобы помочь
читателю быстро сориентироваться в проекте – ведь при избыточной сложности
интерфейса актуальная информация просто не достигнет читателя, что приведет
к снижению конкурентоспособности данного средства массовой информации.
Известно, что если разработчики принимают решение улучшить свой продукт,
его монетизация может вырасти в два раза.2
В попытке сделать дизайн более эргономичным разработчики, с одной
стороны, опираются на традиционные эстетические представления о
минимализме, во многом восходящие к практике пластических и
изобразительных искусств. С другой стороны, представители функционального
подхода к дизайн-проектированию используют перцептивные и когнитивные
факторы, в большей степени связанные с поведением пользователя. При общем
2 Marcus A. Return on Investment for usable user-interface design: Examples and statistcs for Usability. Nielsen
Norman Group, 2013 URL: http://goo.gl/OpjcJA. (дата обращения: 24.01.2016)
стремлении к оптимизации визуальной структуры сетевых СМИ разница между
данными подходами до сих пор практически не исследована.
Объектом исследования являются российские новостные сетевые СМИ.
Предметом исследования являются особенности реализации принципов
юзабилити в дизайне новостных порталов, учитывающие не только факторы
перцепции, но и законы интерактивной коммуникации, т.н.
«опыт
взаимодействия» (медийный интерфейс).
Цель исследования:
выявить и охарактеризовать роль эстетики
минимализма в юзабилити-проектировании новостных сетевых СМИ.
Для достижения данной цели необходимо выполнить ряд задач:
1. Рассмотреть современное понимание функционального подхода к
визуальной организации сетевых СМИ;
2. Концептуально определить содержание понятия «минимализм»
применительно к практике дизайн-проектирования;
3. Определить факторы композиционно-графической модели вебстраницы, релевантные как для оценки юзабилити, так и для
эстетической составляющей дизайна сетевых медиа;
4. Провести структурно-функциональный анализ визуальной
организации новостных порталов в соответствии с теоретической
базой и целью исследования;
5. Рассмотреть взаимодействие принципов минимализма и юзабилити
в визуальной организации новостных сетевых СМИ.
Теоретико-методологическую базу исследования, в первую очередь,
составили работы, посвященные стилистическим и эстетическим аспектам
дизайн-проектирования: труды А.Н.Лаврентьева, В.О.Пикулевского,
В.И.Лесняка, Э.Туэмлоу, Р.Холлиса, К.Ньюарка, С.Уэйшенк, А.А.Беляева,
Р.Ю.Овчинниковой, А.В.Якунина, Д.В.Бородаева, А.А. Беляева, М.Н.Долгих и
некоторых других авторов. Изучить содержание и принципы функционального
подхода, раскрыть понятие и принципы юзабилити, а также выявить основные
подходы к оценке эргономичности веб-ресурсов помогли труды Я.Нильсена,
Е.Реииса, А.Маркоса, Ш.Бишопа и А.Хартман, С.Круг, А.И.Калиновского,
Д.Раскина, В.Д.Магазанника, С.А.Копова, Д.Гаррета, М.Кунявского,
А.Ньювелла, Л.Розенфельда и некоторых других авторов. Определить факторы
композиционно-графической модели веб-страницы, релевантные как для
оценки юзабилити, так и для эстетической составляющей дизайна сетевых
медиа, позволили теоретические и практические работы Б.Чапарро, М.Дайсона,
Д.Киппинга, Д.Шпула, Г.Гесслера, М.Хуанга, Д.Макговерна, А.В.Якунина,
К.Сью, А.Шайха, Д.Целениса, Д.Нормана, Т.Туллиса и многих других
исследователей. Наконец, в определении эстетических и прикладных качеств
минимализма помогли труды Х.Обендорфа, Е.Стрикланда, Д.Марзона,
Ю.Я.Герчука, Д.Мейера, Ф.Колпитта, П.Овери, К.Ванего, Д.Беньона,
А.Маркуса, П.В.Сластерина и некоторых других авторов.
Эмпирическая база включает в себя композиционно-графические
модели сетевых СМИ «Lenta.ru», «Meduza», «РИА Новости», «РБК».
Методологическая основа: основную роль в реализации исследования
сыграли методы структурно-функционального анализа и визуального
сопоставительного анализа на основе заданных критериев. Также в работе
применялось тестирование асессоров, с последующей обработкой результатов
методами описательной статистики и метод экспертной оценки.
Апробация отдельных положений магистерской диссертации прошла на
конференциях «СМИ в современном мире. Молодые исследователи» в 2015
году и на XXII Международной научно-практической конференции «Новое
слово в науке и практике: гипотезы и апробация результатов исследований» в
2016 году. Заявленные материалы были опубликованы в сборниках по итогам
научных конференций.
Гипотеза: Основной гипотезой нашего исследования является
предположение о наличии взаимообусловленности между принципами
минималистической эстетики и функциональным подходом к дизайнпроектированию, позволяющей говорить о совпадении прикладного и
эстетического понимания минимализма в контексте визуальной организации
веб-страницы.
Структура работы включает введение, две главы, заключение, список
использованных источников и литературы, а также приложения.
Первая глава нашего исследования посвящена рассмотрению понятия
«минимализм» как фактора композиционно-графического проектирования. Для
раскрытия данного явления, в первой части теоретической главы мы
обращаемся к особенностям функционального подхода в дизайнпроектировании: подробно рассматриваем эргономические признаки
визуальной организации и их взаимосвязь
с формированием опыта
взаимодействия пользователя. Вторая часть первой главы посвящена
концептуальному определению содержания понятия «минимализм». С одной
стороны, мы обращаем пристальное внимание на традиционные эстетические
представления о данном феномене, во многом восходящие к практике
пластических и изобразительных искусств, а с другой,
разбираемся в
прикладном понимании данного феномена в рамках функционального подхода
к дизайн-проектированию и реализации принципов
юзабилити.
Предпринимается попытка определения функционально-эстетических факторов
композиционно-графической модели веб-страницы, релевантных как для
оценки юзабилити, так и для эстетической составляющей дизайна сетевых
медиа.
Вторая глава посвящена определению системообразующих факторов
композиционно-графической модели веб-сайта с точки зрения эффективного
«опыта взаимодействия», проведению структурно-функционального анализа
главных и новостных страниц медиапорталов в контексте юзабилити, а также
рассмотрению взаимодействия
принципов минимализма и юзабилити в
визуальной организации новостных сетевых СМИ.
В заключении делаются обобщающие выводы по работе, подводятся
итоги в соответствии с поставленной целью и задачами.
Приложения подробно иллюстрируют проведенный структурнофункциональный анализ главных и новостных страниц, рассматриваемых в
рамках исследования медиаресурсов, как в аспекте принципов юзабилити, так
и в контексте реализации функционально-эстетических критериев минимализма
в визуальной организации новостных порталов. Помимо этого, в приложении
содержатся кодировочные листы с пояснениями, таблицы с результатами
кодирования новостных порталов, результаты проведенного структурнофункционального анализа композиционно-графических моделей и тестирования
асессоров, а также иные результаты по итогам проведенных исследований.
ГЛАВА I. МИНИМАЛИЗМ КАК ФАКТОР КОМПОЗИЦИОННОГРАФИЧЕСКОГО ПРОЕКТИРОВАНИЯ СЕТЕВЫХ СМИ
1.1 Функциональный подход в дизайне современных сетевых ресурсов
В широком смысле, под дизайном понимается «творческая деятельность,
имеющая целью определение формальных качеств изделий: внешние черты, а
также те структурные и функциональные взаимосвязи, которые превращают
изделие в единое целое, как с точки зрения потребителя, так и с точки зрения
изготовителя».3 Как указывают исследователи, дизайн занимает центральное
место в практической эстетике, строится на обновляющихся технологиях, все
больше подчиняющихся эргономическим требованиям. 4 Современное
проектирование дизайна максимально нацелено на потребителя и окружающий
его дискурс: иными словами, в центре внимания находится человек,
обладающий определенными материальными и духовными потребностями,
желаниями, претензиями. Как указывает в своей работе С.Б.Головко, в любой
среде, пространственной или виртуальной,
дизайн воздействует на сознание
людей. 5
В сфере визуальных коммуникаций дизайн зародился на основе печати,
прежде всего, газетной периодики являвшейся основным источником
информации в 20 веке. Массовая печать формирует графический дизайн,
обслуживая сферу рекламы, агитации и пропаганды. 6 Графический дизайн – это
проектирование в сфере визуальных коммуникаций и создание языка
сообщения.7 Историк дизайна Ричард Холлис определяет графический дизайн
как определенный тип языка с «неорганизованным грамматическим строем и
постоянно расширяющимся лексиконом»8, выделяя две основные цели
дизайнерской деятельности: привлечение внимания аудитории и создание
3 Глазычев В.Л. Дизайн как он есть. М.: «Европа», 2006. – C. 14
4 Пикулевский В.О. Практическая эстетика. Харьков: Lap Lambert, 2012.
5 Головко С.Б. Дизайн деловых переодических изданий. М.: Юнити-Дана, 2008. – С.13
6 Пикулевский О.В.Дизайн и культура. Харьков: Гуманитарный центр, 2014. — С. 151
7 Там же, — С. 152
8 Hollis R. Graphic Design: A Concise History. London: Thames and Hudson, 2001 — P. 9
предельно ясного и запоминающегося текстового оформления. В.И.Лесняк, как
и швейцарские пионеры графического дизайна Макс Билл и Джосеф МюллерБрокман,
называет графический дизайн «визуальным коммуникатором»,
главная задача которого, по их мнению, заключается в «проектировании
коммуникаций и создании визуального языка».9 Элис Туэмлоу ограничивается
более лаконичным определением, подразумевая под графическим дизайном
особый вид языка, используемого для коммуникации и служащего в целях
создания связи между людьми.10
Одним из первых сторонников функционального подхода в области
дизайн-проектирования был основоположник термина «графический дизайн»,
американский дизайнер Уильям Эддисон Двиггинс. По его мнению, в своей
работе дизайнер обязан опираться «на здравый смысл и анализ, не стремясь к
удовлетворению своего творческого потенциала». 11 Т а к о й п о д х о д
обуславливался восприятиям дизайна как ремесла, где все подчинено
требованиям аудитории, а не искусства, направленного на самораскрытие и
самовыражение. Эстетический стиль, в рамках подхода Двиггинса,
экспрессивен лишь в той мере, в какой он отвечает поставленной цели и
потребностям аудитории. Таким образом, с самого зарождения графического
дизайна существвовало противостояние эстетики и функциональности,
излишества и минимализма, которое продолжается до сих пор.
Промышленное проектирование позволило освоить предметнопространственную проектную площадь, графический дизайн – визуальнокоммуникативную сферу.12 Появление и широкое внедрение в повседневную
жизнь человека компьютерной техники обозначило новое пространство для
дизайна – виртуально-медийное. Новая информационно-коммуникативная
среда, появившаяся в результате формирования глобальной информационной
9 Лесняк В.И. Графический дизайн: основы профессии. М.: IndexMarket, 2011 — С. 9
10 Туэмлоу Э. Графический дизайн. Фирменный стиль, новейшие технологии и креативные идеи. М.:
Астрель, 2007. — С. 6, 8
11 Ньюарк К. Что такое графический дизайн? М.: Астрель, 2005 — С. 10
12 Долгих М.Н. Дизайн и виртуальная среда: дигитальные ландшафты в аспекте гибридных медиа. //
Вестник Томского государственного университета. 2014. № 379. С. 86
сети, поставила перед исследователями массовой коммуникации ряд вопросов,
связанных с природой и функционированием новой медиасистемы, а также
факторами, определяющими ее эволюцию.13 По мнению ряда исследователей,
именно область виртуального пространства приобретает, доминирующее
значение в жизни современного общества.14 Безусловно, подобные изменения
невозможны без влияния определенных технологических и социальных
процессов. И если дизайн в широком смысле является проектированием
материальной культуры, то веб-дизайн проектирует культуру виртуальную.
15
Визуальное представление виртуального пространства или веб-дизайн
формируют дизайнеры, занимающиеся проектированием и созданием
цифровых ландшафтов, 16
Эстетические, коммуникативные и функциональные возможности
дизайна особенно действенно аккумулированы в сфере сетевой периодики, где
визуальная организация определяет скорость и эффективность работы
пользователя с представленной информацией, а также является объективным
фактором конкурентоспособности. 17 Визуальная организация или визуальнографическое оформление цифровых СМИ предполагает наглядное
представление информации для массового распространения посредством
графики и графических элементов предметной среды. Визуальная организация
сетевых СМИ рассматривается в рамках общей специфики дизайнерской
деятельности и характеризуется типологической преемственностью по
отношению к печатным СМИ.18
Визуальное оформление средств массовой информации чрезвычайно
важно: оно влияет не только на эстетическую ценность и узнаваемость издания
13 Якунин А.В. Веб-дизайн и оформление электронных СМИ. СПб.: С.-Петерб. гос. ун-т, Высш. шк. журн. и
мас.коммуникаций, 2013. — С. 18
14 Баева Л.В. Виртуальная сансара: трансформация модели реальности в условиях информационной
культуры // Информационное общество. 2012. № 2. С. 44–51.
15 Пикулевский О.В.Дизайн и культура. Харьков: Гуманитарный центр, 2014. — С. 7
16 Долгих М.Н. Дизайн и виртуальная среда: дигитальные ландшафты в аспекте гибридных медиа. //
Вестник Томского государственного университета. 2014. № 379. С. 86
17 Якунин А.В. Веб-дизайн и оформление электронных СМИ. СПб.: С.-Петерб. гос. ун-т, Высш. шк. журн. и
мас.коммуникаций, 2013. — С. 10
18 Беляев А.А. Дизайн-модель интернет-версии как результат трансформации модели печатного издания (на
материале российских сми) // Вестник Московского университета. Серия 10: Журналистика. 2008. № 2. С.
читательской аудиторией, но и на процессы восприятия, обработки,
репрезентации информации. Роль визуальной организации трудно переоценить:
при грамотной
ее организации, она сможет значительно увеличить
монетизацию продукта.19
Технологические, социальные и организационно-правовые изменения,
происходящие в медиасфере в последнее десятилетие, отразились не только на
организации коммуникативных процессов и функционально-технической
инфраструктуре СМИ, но и на способах визуального представления
информации пользователю.20 Т а к , т е х н о л о г и ч е с к и е и н н о в а ц и и и
функционально-эстетические тенденции в области дизайна определяют
основные тренды
визуальной организации СМИ. Качественный скачок в
развитии дигилитальных СМИ и появление новых медиаформатов обозначили
определенные видоизменения форм графического дизайна и визуальной
культуры, оставив при этом неизменной функцию эффективной передачи
информации визуальными средствами. Как указывает И.Д.Фомичева, природа
сети Интернет, в особенности ее способность к мгновенной передаче
информации определила приоритетное требование к сетевой прессе – скорость
и оперативность предоставления актуальной информации при минимальной
затрате времени на ее обработку и восприятие.21 Эта способность напрямую
влияет на эффективность издания, создавая благоприятные условия для роста
читательской аудитории и, соответственно, функционирования СМИ. Именно
поэтому, решающее значение в визуальной организации современных сетевых
СМИ приобрел фактор «юзабилити», «как эмпирически сложившаяся система
принципов, регламентирующих применение функционального подхода к
дизайну электронного издания»22.
19 Marcus A. Return on Investment for usable user-interface design: Examples and statistcs for Usability. Nielsen
Norman Group, 2013 URL: http://goo.gl/OpjcJA. (дата обращения: 24.01.2016)
20 Якунин А.В. Веб-дизайн и оформление электронных СМИ. СПб.: С.-Петерб. гос. ун-т, Высш. шк. журн. и
мас.коммуникаций, 2013. — С. 19
21 Интернет-СМИ: Теория и практика: Учеб.пособие для студентов вузов/ Под ред. М.М.Лукиной. – М.:
Аспект Пресс, 2010 — С. 64, 95
22 Якунин А.В. Веб-дизайн и оформление электронных СМИ. СПб.: С.-Петерб. гос. ун-т, Высш. шк. журн. и
мас.коммуникаций, 2013. — С. 20
По мнению ряда теоретиков и практиков дизайна, функционализм
является основой проектной культуры и квинтэссенцией всей дизайнерской
деятельности.23 В истории закрепилась не одна «формула» функционализма: это
и «функция предвещает красоту» Г.Гриноу, и «форма следует за функцией»
Л.Салливана, а также известная «форма и функция едины» Ф.Л.Райта. 24 Таким
образом, функционализм не просто обозначает первичность функции, но
означает, что ее результатом является эстетичность, а также отсутствие
излишних декоративных элементов.
Понятие «функциональный подход» появилось благодаря развитию такой
отрасли прикладной науки, как эргономика. Эргономика, или как иногда
обозначают ее западные исследователи, «человеческий фактор», направлена на
изучение того, как различные устройства и иные объекты дизайнпроектирования могут быть разработаны таким образом, чтобы соответствовать
нашим физическим и психологическим способностям. 25 Значит функционализм
– это еще и сопряженность с человеком.
Определение эргономики сформулировано Международной Ассоциацией
Эргономики, которая предлагает понимать под данным термином «научную
дисциплину, изучающую взаимодействие человека и других элементов системы,
а также сферу деятельности по применению теории, принципов, данных и
методов этой науки для обеспечения благополучия человека и оптимизации
общей производительности системы.26
Основоположником функционального подхода к дизайн-проектированию
веб-ресурсов является Якоб Нильсен, утверждающий, что «удобство и простота
управляют Сетью».27 По его мнению, Интернет – территория пользователя, где
«щелчок его мыши решает все», в том числе определяет рентабельность и
жизнеспособность того или иного веб-проекта. В этой связи, по мнению
23 Пикулевский О.В.Дизайн и культура. Харьков: Гуманитарный центр, 2014. — С. 31
24 Там же
25 Reiss E. Usable Usabilty. Simple Steps for Making Stuff Better. John Wiley & Sons, Inc., 2012 — P. 43
26 Якунин А.В. Веб-дизайн и оформление электронных СМИ. СПб.: С.-Петерб. гос. ун-т, Высш. шк. журн. и
мас.коммуникаций, 2013. — С. 20
27 Нильсен Я. Веб-дизайн: книга Якоба Нильсена. СПб.: Символ-Плюс. 2003. — С. 17
Нильсена, главной целью ресурса становится «обеспечение пользователей
простым механизмом для реализации их задач» 28. Аарон Маркус указывает, что
целью эргономичного дизайна является преодоление проблем в области
человеко-компьютерного взаимодействия и оптимизация человекоориентированного интерфейса, основанная на принципах и методах
юзабилити.29
Отечественный ГОСТ «Эргономика взаимодействия человек-система»,
введенный в 2012 году, определяет пользовательский интерфейс (ПИ) как
«компоненты интерактивной системы, предоставляющие пользователю
информацию и являющиеся инструментами управления для выполнения
определенных задач».30 В контексте данной работы нас интересует более узкое
применение понятия «пользовательский интерфейс» - графический интерфейс
пользователя (ГИП), в котором элементы интерфейса представлены в виде
графических изображений. А.И.Калиновский дает следующее определение
ГИП: «Фронтальные компоненты системы, позволяющие пользователю
выполнять необходимые задачи».31 Таким образом, ГИП обеспечивает
взаимодействие между пользователем и системой (сайтом), выступая в качестве
канала коммуникации, посредством которого юзер выполняет определенные
действия на сайте
и получает на них отклик. Человеко-ориентированный
интерфейс – это интерфейс, учитывающий особенности человеческой
психологии, сознания человека, его физические ограничения. 32 Как указывает
Джефф Раскин, интерфейс можно назвать ориентированным на человека, при
условии, если в нем учитываются его нужды и слабости.
33
, Поэтому,
ориентируясь в построении интерфейса на основы человеко-ориентированного
подхода, необходимо принимать во внимание такие аспекты взаимодействия
28 Нильсен Я. Веб-дизайн: книга Якоба Нильсена. СПб.: Символ-Плюс. 2003. — С. 17
29 Marcus A. Design, User Experience, and Usability: User Experience Design Practice. Springer ., 2014 — P. 127
30 Национальный стандарт Российской Федерации: эргономика взаимодействия человек-система. Часть 210.
Человеко-ориентированное проектирование интерактивных систем. М.:Стандартинформорм. 2013 — С. 3
31 Калиновский А.И. Юзабилити - как сделать сайт удобным. М: Новое знание, 2005 — С. 8
32 Калиновский А.И. Юзабилити - как сделать сайт удобным. М: Новое знание, 2005 — С. 13
33 Раскин Д. Интерфейс: новые направления в проектировании компьютерных систем. М.: Символ-плюс,
2005 — С. 6
человека и системы, как средняя скорость чтения, восприятие цвета,
оптимальное количество отображаемых данных, особенности когнитивного
восприятия информации и прочее.
Названные аспекты взаимодействия
человека и системы рассматриваются в рамках микроэргономики и когнитивной
психологии, охватывающей широкий диапазон психических процессов
человека: ощущения, восприятие, сознание, память, формирования понятий,
мышления, эмоций и т.д.34
С понятиями «эргономика» и «функциональный подход» к дизайну,
связано понятие «юзабилити», что в переводе с английского обозначает
«возможность использования» или «способность быть использованным».
Юзабилити – это наука о том, как обеспечить удобство. Семантическая
доминанта термина – «удобство использования в процессе». 35 Эргономичность
является количественной характеристикой,
описывающей количество
затраченных физических сил для работы с сайтом, а юзабилити – качественной,
описывающей сумму умственных усилий, требующихся от пользователя для
выполнения задач, а также общую степень удобства пользования.
С точки зрения антропологии и техногенных факторов коммуникации,
юзабилити находится в тесной связи с другими науками, оказавшими
существенное влияние на формирование его теоретической и практической
базы. Среди них графический дизайн, проектирование пользовательского
взаимодействия (дизайн интерфейса), когнитивная психология, семиотика и
некоторые другие дисциплины.
Международная организация по стандартам предлагает следующее
определение понятия юзабилити: «Юзабилити – это степень удобства, при
которой тот или иной продукт может быть использован пользователями для
достижения поставленных целей с максимальной эффективностью,
продуктивностью и удовлетворенностью в заданной области использования» 36.
34 Солсо Р. Когнитивная психология. Спб.: Питер, 2015 — С. 20
35 Nielsen J. Usability Engineering. NY.: Morgan Kaufmann, 1993 — P.12
36 International Organization for Standardization. ISO 9241-11: UErgonomic requirements for office work with
visual display terminals (VDTs) — Part 11: Guidance on usability. URL:
https://www.iso.org/obp/ui/#iso:std:iso:9241:-11:ed-1:v1:en (дата обращения: 18.01.2016).
Отечественный ГОСТ Р ИСО 9241-210—2012 «Эргономика взаимодействия
человек-система», введенный в 2012 году, определяет юзабилити как
«пригодность использования» и рассматривает ее как «свойство системы, при
наличии которого, пользователь может применить продукцию для достижения
установленных целей с необходимой результативностью, эффективностью и
удовлетворенностью»37.
Философия юзабилити заключается в удовлетворении потребностей
пользовательской аудитории и создании позитивного, качественного
пользовательского опыта.38 Теоретики и практикующие веб-дизайнеры говорят
о юзабилити в связи с оптимизацией функциональности сайта на стадии его
разработки.
Простоту и удобство использования тем или иным ресурсом
определяет, в том числе, и его визуальная организация. Соответственно, сам
визуальный облик ресурса или его дизайн, должен быть максимально нацелен
на потребности и ожидания пользователей. Это подтверждает и Якоб Нильсен,
утверждая, что отказ от проектирования ресурса в соответствии с нуждами
пользователей, приведет к их дизориентации на сайте и невозможности
приблизиться к нужным страницам.39. Данное утверждение актуально для
медиаресурсов, где зачастую большой объем информации или неправильная
визуальная организация не позволяет должным образом разобраться со всем
доступным на сайте контентом. Это приводит к «потере» информации,
поскольку он просто не доходит до всех желающих ее прочесть пользователей.
В этой связи выдвигаются принципы, которые можно описать по формуле
«разумно и просто», поскольку задачей хорошего веб-дизайна (и дизайна в
целом) является проектирование, при котором все внимание пользователя
сосредоточено на решении практических задач.
Так или иначе, юзабилити характеризует степень и скорость
практического освоения проекта пользователем, а также определяет
степень
37 Национальный стандарт Российской Федерации: эргономика взаимодействия человек-система. Часть 210.
Человеко-ориентированное проектирование интерактивных систем. М.:Стандартинформорм. 2013 — С. 2
38 Redish J., Dumas J., A Practical Guide to Usability Testing. NY.: Intellect Ltd, 1999, — P. 4.
39 Нильсен Я. Веб-дизайн: книга Якоба Нильсена. СПб.: Символ-Плюс. 2003. — С. 17
сбоев и ошибок в работе ресурса. Критериями, определяющими успешную
реализацию юзабилити, являются скорость, эффективность (полнота),
удовлетворенность. Таким образом, в контексте юзабилити,
потребности
пользователя становятся исходной точкой дизайн-проектирования и определяют
композиционные и оформительские решения того или иного веб-проекта. Весь
комплекс дизайнерских средств ориентирован на максимально быстрое и
эффективное взаимодействие с пользователем.
Шерри Бишоп и Аннеса Хартман указывают: юзабилити обращено к тому,
как легко изучить и использовать тот или иной продукт дизайн-проектирования.
Главная цель дизайна, ориентированного на юзабилити – быть невидимым. 40
Современная дизайнерская практика показывает – проектировщики часто
пренебрегают этим правилом, опираясь лишь на собственную интуицию или
рекомендации заказчика, что в конечном счете приводит к снижению
функционального компонента дизайна. По мнению Якоба Нильсена удобство
использования или юзабилити определяется 5 ключевыми компонентами 41:
1. Обучаемость. Насколько быстро пользователи выполняют основные
задачи и ориентируются в дизайне, сталкиваясь с ним впервые.
2. Эффективность. Скорость выполнения задач и ориентации в проекте,
если пользователи ранее ознакомились с дизайном.
3. Запоминаемость. Простота и скорость взаимодействия пользователей
с дизайном по прошествии длительного времени.
4. Ошибки. Количество и качество ошибок пользователей при работе с
ресурсом, а также возможность их исправления.
5. Удовлетворенность. Оценка эстетических качеств дизайна и степень
удовольствия работы с ним.
Юзабилити формирует эргономичную эффективность интерактивного
продукта.
По мере развития и совершенствования веб-технологий менялись
40 Bishop S., Hartman A. Interactive Media Design and Development with Adobe CS6. Delmar Cangage Learning.,
2013 — P. 13
41 Nielsen J. Usability 101: Introduction to Usability. 2012 URL: https://www.nngroup.com/articles/usability-101introduction-to-usability/ (дата обращения: 18.01.2016).
подходы к дизайну и критерии оптимальной эргономики медиаресурсов. Выше
мы перечислили 5 ключевых компонентов, определяющих юзабилити, в основе
же критериев успешной эргономики, как указывает Якоб Нильсен, лежит
выполнение таких принципов как:
Удобство использования средств и способов взаимодействия с
ресурсом. В идеале они должны быть незаметны пользователю и не
отвлекать его от процесса взаимодействия с продуктом.
Доступность и полнота информации при использовании
минимального количества изобразительных и технических средств.
Полезность, которая предполагает функциональное построение
композиционно-графической модели: функция в
дизайне важнее
чем декоративные элементы.
Релевантность – возможность возврата к исходной точке работы с
системой.
Эффективность – достижение желаемого результата.
Результатом взаимодействия пользователя с сайтом, по мнению Нильсена,
должно стать ощущение эффекта «ябусаме», т.е. единства намерений,
мастерства и воли проекта. Проведя многочисленные исследования юзабилити,
Нильсен установил, что при взаимодействии с эргономически безупречным
ресурсом, пользователи испытывали ощущение глубокого вовлечения в
процесс, благодаря однонаправленности всех элементов КГМ: контента, текста,
типографики, графики, кода. Среди описанных ощущений:
Ясное осознание цели, благодаря чему происходит концентация
внимания;
Ощущение постоянной обратной связи;
Осознание контроля над ситуацией;
Скоротечность времени;
В своем подходе Нильсен довольно близок к пониманию дизайна,
которого придерживался Уильям Двиггинс, утверждавший, что дизайнеру в
своей деятельности недопустимо удовлетворять свои творческие амбиции, а
опираться на здравый смысл, анализ и желания потребителя. Обладая полным
арсеналом технических и художественных инструментов, современные
дизайнеры пытаются приблизить продукты своего творчества к искусству,
пренебрегая выше обозначенными принципами в процессе дизайнпроектирования. В рамках юзабилити-подхода к дизайну недопустимо
жертвовать функционалом в угоду более эффектному и яркому оформлению.
Приоритет отдается контенту, в то время как визуальная организация тяготеет к
минималистичности и аскетизму. Тем не менее, существует ряд объектов
юзабилити от которых в рамках рассматриваемого подхода отказаться нельзя. К
ним относятся42:
Навигация – ясность и скорость в поиске нужной информации.
Интерфейс – скорость и простота в извлечении нужной
Гипертекстуальная архитектура – способы представления
ссылочной системы.
Репрезентация – эффективность информации.
Представления контента (текст – приоритет №1).
При работе с любым сетевым ресурсом, в том числе медиа, пользователь
должен понимать, каким процессом он управляет, на что тратит свое время и,
что в конечном счете рассчитывает увидеть. Поскольку создание «идеального
дизайна», разработанного для удобства использования всеми пользователями, и,
объединяющего в себе эстетические и технические характеристики,
представляется весьма нереалистичным, основной задачей дизайна является
удовлетворение потребностей пользователей при помощи имеющихся средств.
При этом, как указывают эксперты, необходимо учитывать некоторые общие
для графического дизайна правила, к которым, например, относится
необходимость использования контрастности
и монохромности при
оформлении текста.43
Именно потребности аудитории являются исходной точкой дизайнпроектирования и определяют композиционные и оформительские решения при
42 Ашманов И., Иванов А. Оптимизация и продвижение сайтов в поисковых системах. — СПб.: Питер, 2009
43 Магазанник В. Д., Львов В. М. Человеко-компьютерное взаимодействие: учебное пособие для вузов. —
Тверь: Триада, 2005. — С. 40
создании веб-проекта.
Таким образом, комфортное взаимодействие
пользователя с сайтом обеспечивает учет дизайнером определенных
эстетических и технических характеристик. В свою очередь, технические или
прикладные характеристики дизайна обеспечиваются
определенными
эргон оми че ск и ми п оказателями каче ства. К т аковым отно сят ся
Международный стандарт юзабилити ISO 9241-210:201044, сформированный на
его основе национальный стандарт юзабилити ГОСТ Р ИСО 9241-210—201245,
эвристические правила Якоба Нильсена, во многом совпадающие с
Международным стандартом, а также некоторые частные принципы юзабилити,
сформированные ежедневной практикой UX-дизайнеров.
Международный
и национальный стандарт юзабилити определяют
следующие эргономические принципы:
Определение условий использования: проектирование должно
осуществляться на основе точного определения задач проекта,
потребностей аудитории, среды;
Учет характеристик пользователей на основе их вовлечения в
проектирование и разработку;
Итеративное совершенствование проекта: улучшение проекта за
счет обратной связи с пользователями, возможность аудитории
оставлять отзывы и уведомлять о сбоях в работе проекта.
Итеративный подход позволяет улучшать качество работы проекта
при получении информации от пользователей, что приводит к
снижению риска невыполнения требований аудитории;
Дизайн должен учитывать опыт взаимодействия пользователя;
Включение в команду дизайнеров-проектировщиков специалистов
со знаниями в различных областях;
44 International Standard ISO 9241-210. Ergonomics of human-system interaction — Part 210: Human-centred
design for interactive systems. ISO, 2010
45 Национальный стандарт Российской Федерации: эргономика взаимодействия человек-система. Часть 210.
Человеко-ориентированное проектирование интерактивных систем. М.:Стандартинформорм. 2013
К общим правилам юзабилити относятся и исследования Якоба Нильсена,
посвященные так называемому «F-паттерну визуального восприятия». Суть
этого феномена заключается в характерном для человека западной цивилизации
восприятии веб-страницы, согласно которому, внимание пользователя
сосредотачивается в левой части экрана и рассеивается по мере приближения к
нижнему правому сектору экранного пространства, при условии, если дизайнер
не применял акценты, намеренно смещая фокус внимания. 46 Таким образом, для
наибольшего удобства пользователя, согласно этому подходу, рекомендовано
размещение наиболее важных элементов дизайна в левой части экрана.
Соблюдение правил F-образной верстки приводит к удержанию внимания
пользователей, а также привлечение новой аудитории посредством повышения
конверсии аудитории. Для этого достаточно размещения навигации или иных
необходимых элементов интерфейса на пути движения глаз читателей.47
«Эвристики юзабилити» или эвристические правила, сформированные
Якобом Нильсеном и Рольфом Моличем во многом совпадают с
Международными принципами юзабилити, дополняя этот список рядом
положений, вынесенных отдельно. К ним относятся 48:
Согласованность системы и реального мира подразумевает, что
коммуникация между пользователем и системой осуществляется на
языке пользователя. Человек быстрее разберется, если система
будет использовать привычную для него лексику, а не системноориентированные понятия.
Видимость состояния системы подразумевает, что пользователи
всегда должны понимать, что происходит на экране через
соответствующие механизмы обратной связи.
46 Нильсен Я. Дизайн Web-страниц. Анализ удобства и простоты использования 50 узлов. М.: Вильямс,
2002.
47 Nielsen J., F-shaped pattern for reading web content. 2012 URL: http://www.nngroup.com/articles/f-shapedpattern-reading-web-content/ (дата обращения: 27.01.2016).
48 Nielsen, J. Enhancing the explanatory power of usability heuristics. Proc. ACM CHI'94 Conf. (Boston, MA,
April 24-28), 152-158.
Контроль и свобода пользователя подразумевает, что при ошибках
системы юзер имеет возможность моментально покинуть проект
без необходимости выполнять иные действия по требованию
системы.
Последовательность и стандарты подразумевают, что пользователи
не должны задумываться, могут ли разные элементы дизайна или
действия на сайте означать одно и то же.
Предотвращение ошибок подразумевает тщательную проработку
системы до начала работы с пользователем. Необходимо устранить
источник ошибок либо исключить условия их возникновения.
Минимальные нагрузки на память человека. Объекты и действия
должны быть видны и понятны пользователю.
Эстетика и минималистический дизайн. Концентрация на наиболее
значимых объектах - информация, которая не имеет значения или
редко используется должна быть исключена.
Инструкция по эксплуатации ресурса должна быть доступна всем
пользователям. На сайтах медиа под инструкцией подразумевается
наличие карты сайта.
Рассмотренные принципы юзабилити общеприняты и в большинстве
случаев принимаются в учет разработчиками. 49 Однако, по мнению некоторых
исследователей, указанные метрики во многих случаях могут быть
недостаточно точны и размыты по содержанию, что, в конечном счете, создаст
немало трудностей в работе дизайнеров-проектировщиков. В этой связи,
исследователи разрабатывают частные подходы к оценке эргономичности
ресурсов. Одним из таких примеров является так называемый «деятельный»
подход, разработанный отечественными исследователями C.А.Коповым,
П.П.Макарычевым и С.В.Шибаноком.
49 Nielsen J., 10 Usability Heuristics for User Interface Design. 2012. URL: https://www.nngroup.com/articles/tenusability-heuristics/ (дата обращения: 27.01.2016).
Международный стандарт указывает 3 необходимых компонента
юзабилити, к которым относятся: эффективность, т.е точность и полноценность
достигнутых пользователем целей; экономичность, т.е количество затраченных
пользователем ресурсов для достижения целей; удовлетворенность, т.е
совокупное удовольствие и комфорт пользователя при работе с ресурсом.
C.А.Копов, П.П.Макарычев и С.В.Шибанок 50 расширяют данный перечень
компонентов и предлагают следующие принципы оценки эргономичности:
1. Эффективность деятельности подразумевает результативность
и
психологическую эффективность. К критериям относятся:
Успешность или степень достижения целей пользователя;
Оперативность или скорость выполнения требуемых задач, с
учетом возможных временных задержек;
Эффективность анализа информации, принятия решений,
планирования задач и исполнительности действий
2. Экономичность деятельности подразумевает процессуальные и
психологические затраты. К критериям относятся:
Количественные показатели затрат (время выполнения, количество
операций и т.д.);
Использование дополнительной информации;
Необходимость выполнения дополнительных действий и задач;
Время на обучение;
Трудоемкость и сложности при выполнении действий;
Психофизический комфорт при выполнении действий;
Выраженность негативных реакций: раздражение, недовольство,
гнев и т.п.
3. Результативная и психологическая надежность и безопасность
деятельности. К критериям относятся: стабильность выполнения задач;
количество допущенных ошибок; возможность исправления
50 Копов С. А., Макарычев П. П., Шибанов С. В. Разработка метрик измерения юзабилити на основе
деятельностного подхода // НиКа. 2010. — С.507
допущенных пользователем ошибок; вероятность возникновения
информационных ошибок (потеря данных, сбои в работе); степень
уверенности при работе с продуктом; степень концентрации внимания;
4. Удовлетворенность деятельностью подразумевает как степень
личностной удовлетворенности, так и свойствами продукта. К
критериям относятся:
Удовлетворенность функциональностью и качеством продукта;
Потребность в продукте и соответствие решаемым задачам;
Удобство представления информации и управления продуктом;
Удовлетворенность предлагаемым алгоритмом решения задач;
Эстетическая удовлетворенность продуктом;
Выраженность положительных эмоций при работе с продуктом;
Так или иначе, все вышеназванные системы принципов направлены на
обеспечение внимания пользователя, создание более управляемого и точного
процесса восприятия информации, в соответствии с конкретными задачами
пользователя. Для того, чтобы оптимизировать этот процесс, необходимо
понимать ожидания пользователей, а также принимать во внимание их
возможные действия и запросы. В этой связи уместно говорить об учете
дизайнером «опыта взаимодействия» пользователя с сайтом или
«пользовательском опыте».
«Пользовательский опыт» ориентирован на человека и его личный опыт в
процессе использования информационной системы или ее отдельной части
(веб-сайт, приложение), который зависит
не только от юзабилити, но и от
ожиданий пользователя и его предыдущего опыта.51 Иными словами, под
пользовательским опытом можно понимать субъективные отношения между
пользователем и системой.52 Стоит отметить, что в настоящее время среди
исследователей нет общепринятого определения опыта взаимодействия.
Первоначально термин «пользовательский опыт» возник благодаря
51 McCarthy J., Wright P. Technology as Experience. London: The Mit Press, 2012 — P. 12
52 Bernhaupt R. Game User Experience Evaluation. London: Springer, 2015 — P. 38
исследованиям в области человеко-компьютерного взаимодействия и был
распространен в рамках подхода к дизайну, ориентированного на пользователя
(ДОП). В 1970-е и 1980-е годы термин
нерегулярно,
использовался спорадически, т.е.
до того момента, когда в 1993 году
американский учёный в
области когнитивистики и дизайна Дон Норман сумел популяризировать
термин, присоединившись к компании «Apple» в качестве «пользовательского
инженера» (User Experience Architect), впервые используя словосочетание
«пользовательский опыт» в названии должности. Во многом благодаря этому,
данная область исследований получила громадный толчок к развитию, а
«пользовательский опыт» сосредоточился на улучшении взаимодействия между
человеком и системой.53
Говоря об опыте взаимодействия, необходимо принимать во внимание
совокупность тех факторов, которые пользователи рассматривают в качестве
своего опыта. Американский исследователь и дизайнер Майк Кунявский
предлагает следующее определение «пользовательского опыт а».
Пользовательский опыт – это совокупность представлений и восприятия
продукта взаимодействующими с ним пользователями54. Эти представления
включают в себя эффективность (полнота достигнутых целей), экономичность
или продуктивность (оценка затраченных ресурсов для достижения целей) и
эмоциональную удовлетворенность. Как видим, эти представления совпадают и
с некоторыми обязательными компонентами юзабилити. Таким образом,
юзабилити отождествляется с опытом взаимодействия, но если плохое
юзабилити может испортить хороший продукт, то отличного юзабилити
недостаточно для создания оптимального пользовательского опыта. 55
Несмотря на отсутствие общепринятого определения «пользовательского
опыта», существует универсальная концептуальная модель для создания
положительного пользовательского опыта. Эта модель была предложена
53 Rizvanoglu K., Gorkem C. Research and Design Innovations for Mobile User Experience. NY: Information
Science Reference, 2014 — P. 51
54 Kuniavsky M. Smart Things: Ubiquitous Computing User Experience Design. London: Elsever, 2010 — P. 14
55 Там же, — P. 13
американским ученым Джесси Джеймсом Гарретом и получила название «5
уровней элементов взаимодействия»56. Гаррет попытался идентифицировать и
классифицировать элементы, которые составляют конечный пользовательский
опыт, что, в конечном счете, привело к идее о взаимосвязи большинства
аспектов дизайна на разных уровнях детализации. Иными словами, Гаррет
раскладывает опыт взаимодействия на составные части. Описываемая модель
вводит 5 уровней разработки пользовательского взаимодействия: стратегия,
набор возможностей, структура, компоновка и поверхность. Эти уровни
являются концептуальной основой для обсуждения проблем опыта
взаимодействия и способов их решения 57:
Уровень стратегии -
нижний уровень, на котором необходимо
сформулировать задачи ресурса и обозначить потребности, желания
и ожидания аудитории.
Уровень набора возможностей включает в себя функциональную
спецификацию и требования к контенту, исходя из требований
нижнего уровня.
Уровень структуры основан на проектировании взаимодействия и
информационной архитектуры. На этом уровне решаются вопросы
предст авления информации, концептуальные подходы к
информационной организации сайта. Иными словами то, как сайт
будет работать.
Уровень компоновки определяет, в какой форме будет выражения
функциональность сайта. Решение вопросов в области дизайна
интерфейса, навигации, информационный дизайн.
Уровень поверхности определяет визуальный дизайн веб-ресурса.
Главнейшей задачей на этом уровне становится объединение
функциональности и эстетики в дизайне.
56 Гаррет Д. Веб дизайн, ориентированный на пользователя. Элементы опыта взаимодействия. СПб.: Симбо,
2008
57 Гаррет Д. Веб дизайн, ориентированный на пользователя. Элементы опыта взаимодействия. СПб.: Симбо,
2008. — С. 36
Таким образом, обсуждение каждого последующего уровня невозможно без
предварительной информации, полученной в ходе анализа на предыдущих
уровнях. Выполнение всех условий на каждом из представленных уровней в
конечном счете формирует позитивный «опыт взаимодействия», т.е
складывающийся из общей удовлетворенности системой, благоприятных
впечатлений возникающих при взаимодействии с сайтом, эмоций, возникающих
в процессе обмена информацией.
Частные принципы юзабилити исходят из фундаментальных законов
когнитивной психологии и сформированы непрерывной практикой дизайнеровпроектировщиков, представляя собой выработанные рекомендации,
касающиеся макетирования и верстки. Одним из наиболее популярных и
широко признанных принципов в сфере человеко-компьютерного
взаимодействия остается закон Фиттса 58. Среди исследователей, закон Фиттса
рассматривается как полезная и высокоадаптированная модель, используемая
для вычисления времени движения, которое затрачивается при выборе
определенного объекта в различных условиях и средах при помощи различных
цифровых устройств. Иными словами, исследователи оценивают, сколько
времени необходимо человеку для того, чтобы достигнуть какого-либо объекта
на экране цифрового устройства.
Количество времени, затрачиваемое на
перемещение курсора к объекту, зависит от размера объекта и его расстояния от
текущей позиции курсора: меньший размер объекта и большая удаленность от
курсора, приводит к увеличению затраченного на перемещение времени. 59
Согласно закону Фиттса, наиболее важные и часто используемые элементы
страницы рекомендуется размещать в непосредственной близости друг к другу
или в месте, откуда пользователь начинает просмотр страницы, при этом
размеры данных элементов должны быть увеличены по отношению к менее
значимым.60
58 Fitts P.M. The information capacity of the human motor system in controlling the amplitude of movement //
Jornal of Exper. Psychology. 1954. – Vol. 47, Issue 6. — Р. 381–391
59 Раскин Д. Интерфейс: новые направления в проектировании компьютерных систем. М.: Символ-плюс,
2005. — С. 72
60 Newell A., Card S.K. The prospects for psychological science in human–computer interaction //
По мнению некоторых исследователей, с точки зрения человекокомпьютерного взаимодействия, теоретическая и практическая значимость
исследований с применением закона Фиттса повышается при параллельном
использовании в них закона Хика.6162 Закон Хика описывает, какое количество
времени будет затрачено, в случае, если пользователь выбирает из нескольких
альтернатив. Иными словами, чем больше вариантов определенного типа
предоставляется пользователю, тем больше времени потратит он на выбор
нужного ему варианта.
Альтернативой законам Фиттса и Хика является метод, предложенный
С.К. Кардом, Т.П.Мораном и А. Ньюэллом и получивший название «GOMS»,
что расшифровывается как «Goals (цели), Operators (операторы или действия),
Methods (методы), Selection Rules (правила выбора)».63 Суть этого метода
заключается в моделировании определенной задачи для пользователя, где все
его действия представлены в виде набора так называемых типовых
составляющих. Время выполнения каждого действия фиксируется для
измерения и получения статистических данных, свидетельствующих о
выполнении задач за определенный промежуток времени. 64 О функциональной
составляющей свидетельствует время, потраченное пользователем на
выполнение предложенных задач: чем оно меньше, тем качественнее
спроектирован пользовательский интерфейс.65
Существуют и иные правила, основанные на психологии понимания,
которые по мере развития информационных технологий пересматриваются
либо теряют свою практическую значимость. К примеру, правило трех кликов
Human–Computer Interaction. 1985. Vol. 1. Р. 223 (209-242)
61 Бакаев М.А. Об ограниченной применимости некоторых базовых законов в сфере человеко-машинного
взаимодействия для пожилых пользователей // Научный вестник НГТУ. 2008. № 1(30) — С.13 (С. 11-25)
62 Seow C.S. Information Theoretic Models of HCI: A Comparison of the Hick-Hyman Law and Fitts' Law //
Human–Computer Interaction. 2005. Vol. 20 (3). Р. 315–352
63 Назаренко Н.А., Никулин М.Н. Оценка пользовательского интерфейса проектируемых
специализированных систем // Сборник "XII всероссийского совещания по проблемам управления ВСПУ2014". 2014. С. 6404 (С.6402-6407)
64 Баканов А. С., Обознов А. А. Эргономика пользовательского интерфейса: от проектирования к
моделированию человеко-компьютерного взаимодействия. М.: Институт психологии РАН, 2011.
65 Конюхова О.В. Применение метода CMN-GOMS для анализа требований к графическому
пользовательскому интерфейсу компьютерной системы на примере графического редактора //
Информационные системы и технологии. 2005. № 1 (7). С. 86 (85-94)
основано на том, что пользователь должен найти любую необходимую ему
информацию на сайте перейдя по ссылкам не более трех раз. 66 Данное правило
не раз критиковалось веб-разработчиками как на теоретическом уровне, так и на
основе проведенных исследований. В результате, после исследования,
проведенного американским ученым в области UX Джошуа Портером, правило
трех кликов было пересмотрено и в настоящий момент базируется на идее о
минимизации количества кликов: чем их меньше, тем быстрее пользователь
находит нужную ему информацию.67
Одним из основных инструментов исследования юзабилити является
технология айтрекинга (eye tracking). Айтрекинг – это процесс измерения точек
взгляда, либо процесс отслеживания траектории движения взгляда в режиме
реального времени в момент восприятия определенной информации. 68 В
области айтрекинга существуют два основных направления исследований:
прикладной и когнитивный. Прикладные исследования сосредоточены на
изучении эргономических характеристик и эргономической эффективности
различных медиапродуктов. Процедура исследования состоит в решении
определенной поисковой задачи, в которой главными критериями
эффективности становятся скорость и полнота выполнения задания. Данный
вид тестирования в рамках айтрекинга называют юзабилити-аудитом.
Когнитивные исследования направлены на изучение процессов восприятия и
обработки информации и называются процессуальным тестированием.69
1.2 Эстетический и функциональный аспекты минимализма в контексте
задач юзабилити-проектирования
66 Bhangal S., Jankowski T. Foundation Web Design: Essential HTML, JavaScript, CSS, Photoshop, Fireworks, and
Flash. NY.: Apress, 2003 — P. 82
67 Wilson C. User Experience Re-Mastered: Your Guide to Getting the Right Design. Burlington: Morgan
Kaufmann Publishers, 2010 — P. 29
68 Holmqvist K., Nystrom M., Andersson R., Eye Tracking: A comprehensive guide to methods and measures.
Oxford, 2011
69 Якунин А.В. Веб-юзабилити и эргономика интернет-СМИ. СПб.: С.-Петерб. гос. ун-т, Ин-т Высш. шк.
журн. и мас.коммуникаций, 2015. — С. 14
Минимализм – это художественное течение, характерными признаками
которого принято считать минимальную трансформации используемых для
творчества материалов, простоту и единообразие форм, а также творческое
самоограничение художника.70
Минимализм возник и получил бурное развитие в 1960-е годы, в
значительной степени став реакцией на абстрактный экспрессионизм,
излишнюю декоративность и эмоциональный субъективизм. Всему этому
минимализм противопоставил обезличенность, упрощение формы,
использование промышленных материалов в скульптуре, благодаря чему смог
распространить свое влияние на архитектуру, дизайн, театр и музыку. 71 Истоки
минимализма кроются в конструктивизме, супрематизме, дадаизме,
абстракционизме, поп-арте. Минимализм также испытал сильнейшее влияние
немецкого художественного движения Баухаус, в котором основное внимание
было сосредоточено на создании простого, но функционального дизайна, а
проектирование опирало сь на работу с абстрактными формами,
заимствованными из модернизма. При этом, как отмечал в своих трудах
британский историк искусства и критик Пол Овэри, минимализм не
ограничивался даже этим, черпая свои духовные начала в японском «дзене» и
концептуально обогащаясь неопластицизмом и живописью Мондриана.72
Несмотря на то, что впервые термин «минимализм» был использован еще
в конце 1920-х г. Давидом Бурлюком в каталоге одной из выставок галереи
Дьюденсинг в Нью-Йорке, общий смысл слова и диапазон использования,
заложенный в определении тех лет, изменились. Поэтому, принято считать, что
в профессиональную сферу данный термин был введен Ричардом Уолхеймом,
после публикации одной из его статей в журнале «Arts Magazine» в 1965 году.
Постепенно термин «минимализм» заменил все предыдущие дефиниции
рассматриваемого художественного течения, коих было немало: «АБСискусство» и «восстановительное искусство» (Роус, 1965), «буквальное
70 Левит С.Я., Гордон А.В., Зверева Г.И. Культурология. Энциклопедия. Том 1., М.: Росспэн, 2007. — С. 1316
71 Stuff C. After Modernist Painting : The History of a Contemporary Practice, NY.: I.B.Tauris & Co, 2013
72 Overy P. De Stijl: Art, Architecture, Design / P.Overy. – N.Y., Publisher: Thames & Hudson Ltd, 1991. – 216 р.
искусство» (Фрид), «общесистемное искусство» (Алловэй, 1965), «искусство
унитарных форм» (Сандлер), «прохладительное искусство» и др. 73
Окончательно утвердившись в общественном сознании и научном сообществе в
конце 1980-х годов, слово «минимализм» стало использоваться и в
повседневной речи обычных людей.
Тем не менее, среди исследователей минимализма не существует
общепринятого определения этого художественного явления. Для полного
понимания функциональной природы «минимализма», рассмотрим определения
разных исследователей:
М и н и м а л и з м – э т о « худ ож е с т в е н н а я т е н д е н ц и я , ч ь и
организационные принципы диктуются правильностью форм
(прямые углы, использование квадрата, куба) с минимальной
композиционной маневренностью» 74 (Колпитт, 1990).
Минимализм – это «художественное направление, возникшее в
послевоенное время в Америке, в области визуального,
музыкального и литературного искусства, характеризующееся
использованием ограниченного, если не наименьшего количества
ресурсов»75 (Стрикланд, 2000).
Под минимализмом можно понимать художественное направление,
функционирующее на принципах экономии изобразительновыразительных средств, которое можно охарактеризовать как новый
вид геометрической абстракции (Мейер, 2001).76
Как видим, несмотря на общее понимание сути минимализма,
исследователи имеют разные точки зрения относительно того, каким должно
быть его определение, поскольку это направление
охватывает слишком
большое разнообразие жанров и видов деятельности: дизайн, живопись,
музыка, скульптура. Так или иначе, основная идея минимализма была
73 Сластенин П.В. Термин «минимализм» в архитектурной теории // Традиции и инновации в строительстве
и архитектуре. Архитектура и дизайн сборник статей. 2015. С. 206-208.
74 Colpitt F. Minimal Art: The Critical Perspective. Washington: University of Washington Press, 1993 — P.1
75 Strickland E. Minimalism: Origins. Bloomington: IU Press, 2000 — P.7
76 Meyer J. Minimalism: Art and Polemics in the Sixties, 2000 — P.3
лаконично выражена американским архитектором Людвигом Мис ван дер Роэм,
провозгласившим, что «меньше – значит больше»
(«Less is more»). Идея
минимализма появилась несколько раньше, чем термин, и была выдвинута
американским критиком Клементом Гринбергом, имевшим колоссальное
влияние на многих художников и дизайнеров своей эпохи. 77 Уже в 1939 году он
заявил, что «волнение, вызываемое искусством, связано с изобретением
пространства, поверхностей, форм, цветов и восприятием "воздуха"».78
Гринберг призвал художников подчеркивать «объектность» своих работ, уделяя
особое внимание форме, которая должна быть настолько простой и ясной,
насколько это возможно.
Отвергая классические приемы творчества,
минимализм использует простые геометрические формы, пропорциональные
линии, нейтральные (черный, серый, белый) цвета и сфокусирован на простоте
(simplicity) и восприятии.
В области коммуникации складывается понятие «хорошей» формы как
способа эстетической выразительности в дизайне и искусстве, основанной на
гештальтпсихологии. Процесс формирования визуального оформления,
сочетание текста и изображения в минимализме строится на основе стремления
к простому и устойчивому состоянию. Он предполагает, во-первых, создание и
применение модульной сетки для проектирования, во-вторых, создание ясных
образов и простой композиции, в-третьих, использование функциональных
гарнитур, шрифтов «гротеск», позволяющих обеспечить удобочитаемость,
различимость и заметность текста.79 Необходимая функциональность должна
быть обеспечена на основе знаний о ментальности человека и его особенностях
восприятия. Для этого разрабатываются концептуальные модели, учитывающие
особенности человеческого сознания. Появляется понятие «функциональная
коммуникация», т.е. обеспечивающая быстрое восприятие и ясное понимание
сообщения. В графическом дизайне она предполагала понимание целостности
77 VanEenoo C. Minimalism in Art and Design: Concept, influences, implications and perspectives // Journal of
Fine and Studio Art Vol. 2011. Issue 2(1), — P. 8
78 Там же
79 Пикулевский О.В.Дизайн и культура. Харьков: Гуманитарный центр, 2014. — С. 36
визуального образа, разработку и применение в гарнитур шрифтов сансериф и
использование сетки в дизайне, воплощением чего становится международный
швейцарский стиль. 80 Понимание целостности визуального образа строится на
гештальтпсихологии, ставшей рациональной основой функционального подхода
в графическом дизайне. Минимализм, в этом контексте, рассматривается как
я зык фун к ц и он а л ь н ой ком м уникации, позволя ю щий преодолеть
многословность и нагруженность в дизайне и создавать простое и доступное
визуальное сообщение.
Выступая против принципа «приблизительности» в дизайне,
основоположник визуального функционализма Макс Билл выдвинул три
основополагающих принципов рационального структурирования сообщения,
частично упомянутых выше: использование сетки и деление на модули,
«гротеск» в качестве наборного шрифта и композиционная ассиметрия.81
Разработки рациональных, минималистичных композиций начинаются в
Баухаузе, где всесторонне вводится понимание перцептивной организации
объектов на плоскости, подразумевающей соединение элементов композиции на
основе общих свойств, создание геометрической точности линий и форм, учет
предшествующего опыта и внимания наблюдателя. Развитие этого подхода
продолжается под влиянием Ульмской щколы и появлением швейцарского
стиля, придавшем данным принципам, международное значение.82
Важным компонентом при создании минималистичного дизайна и
инструментом рационального структурирования рассматривается типографика.
Главными ее качествами выступают четкость и удобочитаемость, достижимая
за счет использования простых линий и упрощенных литер. Как указывают
исследователи, функционализм отказывается от рукописного прообраза
шрифта, т.е.
антиквы и тяготеет к упрощенной форме графем без засечек
(сериф), гротеску и брусковым гарнитурам. Антиква переосмысливается в
80 Герчук Ю.Я. Функциональная графика XX века // История графики и искусства книги. 2000. — С. 305310
81 Пикулевский О.В.Дизайн и культура. Харьков: Гуманитарный центр, 2014. — С. 161
82 Marzona D. Minimal Art. Berlin: Tashen, 2004, — P. 21-24
модерн, где литеры следуют по пути
жесткого, геометрического облика при
сохранении функции привлечения внимания благодаря созданию эстетически
привлекательных гарнитур. 83
Тем не менее, ряд исследователей указывают, что вопросы определения
строго структурированных эстетических параметров минимализма в настоящее
время все еще находятся на начальном этапе своего решения.84 На это влияют
как отсутствие строго однозначного определения термина, так и проблема
соотношения критериев, формирующих минимализм, с привычными
эстетическими категориями.
Строгое определение конкретных критериев
минимализма возможно только при системной классификации технических
приемов всех представителей минимализма в разных сферах художественной
деятельности. Но, несмотря на то, что в разных определениях минимализма, в
зависимости от направленности деятельности, могут раскрываться различные
аспекты этого течения, существуют некоторые общие, повторяющиеся в
большинстве произведений и описанные в различной литературе принципы
минимализма. К ним относятся: минимализм средств (minimality of means),
минимализм значений (minimality of meaning), минимализм структуры
(minimality of structure), использование паттернов (use of patterns) и вовлечение
потребителя (involvement of the recipient).85
Минимализм средств (minimality of means) подразумевает
минимальное использование материалов: монохромность и
ограниченность цветовых палитр для зонирования пространства в
дизайне и живописи, использование одного инструмента для
написания музыки и т.д.
Минимализм значений (minimality of meaning). Ранее художники
делали акцент на эмоциях, минимализм же исключает видимые
следы художника, его намерения и разного рода метафоры,
концентрируясь на обезличенности и понимании искусства по
83 Пикулевский О.В.Дизайн и культура. Харьков: Гуманитарный центр, 2014. — С. 165
84 Хлопотникова В.Н. Минимализм: «Искусство первичных структур» // Известия РГПУ им. А.И. Герцена.
2009. № 118 — C. 82
85 Obendorf H. Minimalism: Designing Simplicity. NY: Springer, — P.7
формуле «Ты видишь то, что ты видишь» («What you see is what you
see»).
Минимализм структуры (minimality of structure) подразумевает
использование простых правил и повторов для создания наиболее
понятной и прозрачной для потребителя структуры продукта. К
примеру, в типографике под минимализмом структуры нужно
понимать отсутствие декоративных, «укращающих» литеры
элементов. В дизайне, данный принцип проявляется при помощи
простой геометрической точности линий и форм, наличии и
рациональном распреднлении негативного пространства (space),
использовании модульной сетки.
Использование паттернов (use of patterns). Повторяющиеся
элементы и паттерны существовали в искусстве задолго до
появления минимализма и используются для создания ритма. Одни
и те же элементы повторяются с различными вариациями, для
создания оптимальной композиции.
Вовлечение потребителя (involvement of the recipient). Отсутствие в
художественном продукте метафор и скрытого смысла, художники
представляют зрителю возможность свободной интерпретации
результатов их творчества.
На основе этих общих принципов минимализма были определены и
сформулированы принципы минимализма в рамках дизайна интерактивных
систем и проектирования опыта взаимодействия.86
Разобравшись со значением минимализма в искусстве, нам необходимо
определить, какое место он занимает в медиадизайне. Несмотря на то, что
некоторые дизайнеры считают дизайн искусством, большинство теоретиков и
практиков склонны утверждать, что это ремесло, поскольку основной целью
данной деятельности является не созидание и раскрытие потенциала
86 Obendorf H. Where «less» is «more» – notions of minimalism and the design of interactive systems: A
constructive analysis of products & processes of human-computer-interaction design from a minimalist standpoint.
Hamburg University, 2007 — P.58
художника, а практическое использование человеком. В области веб-дизайна и
разработки интерактивных систем данное утверждение особенно верно,
поскольку для создания наилучшего визуального оформления сайта дизайнеру
недостаточно обладать всевозможными талантами художника, но так же
необходимо разбираться в о собенно стях человеко-компьютерного
взаимодействия. Именно поэтому, для разработки оптимальной композиционнографической модели сайта в большинстве случаев помимо дизайнераоформителя, отвечающего за внешний вид сайта, существует так называемый
«пользовательский инженер», в
чью обязанность входит проектирование
пользовательского опыта и решение практической задачи «эстетика
/эргономичность дизайна». Главной целью дизайнера является разработка такой
интерактивной системы, которая при всей своей сложности, будет максимально
простой для пользователя, поскольку будет учитывать его потребности, мотивы,
намерения и цели, что приведет к созданию более управляемого и точного
процесса восприятия информации. Для полного понимания обозначим, что под
интерактивными системами понимают класс систем обработки информации,
где управление осуществляется пользователями в интерактивном режиме. 87 Как
указывает Хартмут Обендорф, минимализм и является тем важным аспектом,
который позволяет решать как задачи, связанные с удовлетворением
пользователей и формированием пользовательского опыта, так и вопросы
создания наилучшего визуального оформления с точки зрения эргономики и
юзабилити.88
Минимализм в искусстве был реакцией на чрезмерный субъективизм
абстрактного экспрессионизма. Аналогично этому, минимализм в оформлении
веб-ресурсов стал ответной репликой на чрезмерную интерактивность эры Web
2.0.89 По словам Якоба Нильсена, «минималистичность» визуального
87 Benyon D., Turner P., Turner S. Designing Interactive Systems: People, Activities, Contexts, Technologies, NY.:
Addison–Wesley, 2005 — P.6
88 Obendorf H. Where «less» is «more» – notions of minimalism and the design of interactive systems: A
constructive analysis of products & processes of human-computer-interaction design from a minimalist standpoint.
Hamburg University, 2007 — P.62
89 Берд Д. Веб-дизайн: руководство разработчика. СПб.: Питер, 2012. — С.54
оформления предполагает концентрацию на наиболее значимых объектах в
дизайне.90 В своих эвристических правилах, главным принципом минимализма
он объявил устранение ненужной информации из интерфейса. Тем не менее,
для того чтобы понять какие конкретные различия существует в эстетическом и
прикладном понимании минимализма, необходимо рассмотреть еще одно
понятие, применяемое исследователями в контексте функционального подхода
к визуальной организации сетевых СМИ.
Описывая, каким должен быть дизайн с точки зрения человекокомпьютерного взаимодействия, исследователи часто употребляют критерий
«простота» – оформления, структуры, навигации. Но что такое простота,
является ли она синонимом минимализма и как ее измерить? На этот вопрос не
так просто ответить. В широком смысле под «простотой» опыта
взаимодействия понимают исключение ненужных задач, усложняющих работу
пользователя с системой, в целях улучшения юзабилити. 91 Но интерактивные
системы сами по себе сложны, тогда что конкретно должно быть упрощено? По
мнению Хартмута Обендорфа ,«простота» может быть использована в качестве
критерия дизайна только в некоторых, четко определенных аспектах. Эти
аспекты определяются требованиями минимализма, который и является
средством достижения простоты. 92 Следуя формуле «меньше – значит больше»
(«Less is more»), Якоб Нильсен утверждает, что «каждый элемент
пользовательского интерфейса привносит дополнительную нагрузку на
пользователя».93 Таким образом, меньшее количество возможностей часто
приводит к большему комфорту и повышению юзабилити.
Известный
исследователь в области юзабилити Брюс Тогназзини не единожды подчеркивал
90 Nielsen, J. Enhancing the explanatory power of usability heuristics. Proc. ACM CHI'94 Conf. (Boston, MA,
April 24-28), — 152-158.
91 Marcus A. Design, User Experience, and Usability: User Experience Design Practice. Springer., 2014 — P. 310
92 Obendorf H. Where «less» is «more» – notions of minimalism and the design of interactive systems: A
constructive analysis of products & processes of human-computer-interaction design from a minimalist standpoint.
Hamburg University, 2007 — P.63
93 Nielsen J. Usability Engineering. NY.: Morgan Kaufmann, 1993 — P.63
важность визуальной простоты дизайна: «Дизайнеры изучают 6 месяцев то, что
пользователи должны понять за 6 минут».94
Поскольку в данном исследовании минимализм рассматривается как
фактор юзабилити визуальной организации веб-ресурсов, то необходимо
определить, какие аспекты понятия минимализм в изобразительном искусстве
применимы в сфере человеко-компьютерного взаимодействия и медиадизайна.
Как указывают исследователи, буквальный перенос аспектов минимализма в
искусстве принесет мало пользы. Что действительно важно и может быть
передано, так это образ мышления, подразумевающий использование
минимальных средств при создании структуры, использование минимального
количества паттернов.95
В области веб-дизайна и проектирования человеко-компьютерного
взаимодействия выделяют 4 основных принципа минимализма, определяющих
«простоту и аскетизм» визуального оформления страницы 96: функциональный
минимализм, структурный минимализм, композиционный минимализм,
архитектурный минимализм.
Функциональный минимализм означает снижение (уменьшение)
функциональности интерфейса. В идеале, остаются только
необходимые и незаменимые для работы возможности.
Структурный минимализм обращается к структуре доступа для
обеспечения функциональной способности интерфейса.
Архитектурный минимализм направлена на уменьшение
м н о го ком п о н е н т н о с т ь и н т е р ф е й с а с п ом о щ ь ю я с н о го
распределения его функциональных возможностей.
Ком п о з и ц и о н н ы й м и н и ма л и зм п од ч е р к и ва е т ва ж н о с т ь
представления контента.
94 Tognazzini B. Tog on Interface. NY.: Addison-Wesley, 1996
95 Obendorf H. Where «less» is «more» – notions of minimalism and the design of interactive systems: A
constructive analysis of products & processes of human-computer-interaction design from a minimalist standpoint.
Hamburg University, 2007 — P.63
96 Obendorf H. Minimalism: Designing Simplicity. NY: Springer, — P.7
Таким образом, цель минимализма в веб-дизайне сводится к
необходимости представления содержания и основного функционала сайта в
простом виде, отсекая отвлекающие от основного внимания элементы
настолько, насколько это возможно.97 Эта стратегия подразумевает удаление
лишнего контента и набора функций со страницы, если они не работают на
выполнение основной
цели пользователя. К примеру, на сайте новостного
портала основной целью читателя является поиск, просмотр и достижение
необходимой информации. В таком случае, дизайнеры сайта должна
спроектировать визуальное оформление таким образом, чтоб аудитории было
удобно читать новости, искать нужный контент, быстро находить всю
информацию по интересующей теме. Для этого необходимо обеспечить
читателя простым механизмом поиска, просмотра, отбора информации. Иными
словами, необходимо действовать по упоминамой ранее формуле Людвига Мис
ван дер Роэма «меньше – значит больше» («Less is more»). Это мантра и для
веб-дизайна, поскольку меньшее количество элементов на странице обеспечит
меньшую когнитивную нагрузку на пользователей.98
Задачей хорошего дизайна является проектирование такой системы,
которая будет незаметна пользователю, потому что его внимание сосредоточено
на решении практических задач. Отсюда и в меиадизайне и веб-дизайне в целом
выдвигаются принципы превращения сложного в простое по принципу
«разумно и просто». В рамках создания композиционно-графической системы
это подразумевает добавление необходимого и исключения очевидно лишнего,
что и будет являться простотой и устойчивостью.
Для исследования темы чрезвычайно важно отметить, что в конце
двадцатого века минимализм только начал формироваться как отдельное
направление в области человеко-компьютерного взаимодействия.
Именно на
основе принципов минимализма в искусстве были представлены подходы к
97 Meyer K. The Roots of Minimalism in Web Design. 2012 URL: https://www.nngroup.com/articles/rootsminimalism-web-design/ (дата обращения: 18.04.2016).
98 Meyer K. The Roots of Minimalism in Web Design. 2012 URL: https://www.nngroup.com/articles/rootsminimalism-web-design/ (дата обращения: 18.04.2016).
оптимальной организации веб-сайтов. Одним из наиболее значимых стал
подход, представленный в 1990 году известным американским исследователем
Джоном М.Кэроллом, который разработал теорию минимализма в технической
коммуникации, предполагавшую, что быстродейственность проекта
обеспечивается за счет установления «краткости» в качестве главного
приоритета дизайна.99 При этом Кэролл подчеркивал, что «сокращение» или
«уменьшение» дизайна не является конечной целью минимализма. Целью
является краткость, понимаемая в значении «быстрота» и простота в действиях,
а также получении конкретных результатов пользователями. На основе этого и
некоторых других подходов позднее Якоб Нильсен и сформулировал свои
эвристические правила.
Минимализм является стратегией дизайна, которая оказывает
значительное влияние на его содержание и информационно-архитектурные
решения. В результате, как указывают исследователи «Nielsen Norman Group»,
минимализм серьезно влияет на юзабилити сетевых ресурсов.100
Та к и м о б р а з ом , п р и н ц и п ы м и н и м а л и з м а в в е б - д и з а й н е
распространяются не только на визуальное оформление сетевого проекта, но
и на структурную и композиционную организацию сайта. Именно об этом
говорят исследователи в области юзабилити, эргономики и человекокомпьютерного взаимодействия. Эстетические параметры минимализма,
обозначенные в искусстве, не могут бвть проигнорированы со стороны
дизайнеров, как не могут они не принимать в учет принципы минимализма,
разработанные в рамках дизайна интерактивных систем и проектирования
опыта взаимодействия, которые мы можем условно обозначить как
прикладные принципы минимализма. Именно учет этих двух групп
критериев позволяет говорить о минимализме, как полноценном факторе
юзабилити в дизайне сетевых ресурсов, в том числе сайтов СМИ.
99 Carroll J.M. HCI Models, Theories, and Frameworks: Toward a Multidisciplinary Science. San Francisco:
Morgan Kaufmann Publishers, 2003
100 Meyer K. The Roots of Minimalism in Web Design. 2012 URL: https://www.nngroup.com/articles/rootsminimalism-web-design/ (дата обращения: 18.04.2016).
Для того, чтобы определить выполнение функционально-эстетических
критериев минимализма необходимо проанализировать визуальную
организацию сетевого ресурса, в которой должны быть отражены ранее
н а з в а н н ы е , о с н о в о п ол а г а ю щ и е п р и н ц и п ы фу н к ц и о н а л ь н о го
структурирования и, описанные в различной литературе принципы
минимализма, повторяющиеся в большинстве ориентированных на
минимализм произведений необходимо провести анализ композиционнографической модели веб-сайта в контексте задач юзабилити-проектирования.
На основе трудов Ф.Колпитта 101, Д.Мейера102, К.Ванено103, Д.Марзона104,
Х.Обендорфа105, К.Мейера106, О.В.Пикулевского107 и Ю.Я.Герчука108
и
некоторых других авторов, мы можем составить список функциональноэстетических критериев «минимализма», актуальных для анализа визуальной
организации медиаресурсов:
Использование модульной сетки (Модульная сетка присутствует – 3
балла; Модульная сетка отсутствует – 0 баллов; Лента новостей: Активное
использование модулей (ярко выраженные одинаковые геометрических блоки
по всей площади страницы – 3 балла; Преобладание квадратного или
прямоугольного модуля – 1 балла; Нет ярко выраженного доминирования – 0
баллов;)
1. Соблюдение геометрической
точности
линий (Геометрическая
точность линий и форм соблюдена по всей странице – 3 балла;
Геометрическая точность линий и форм не соблюдена – 0 баллов;)
101 Colpitt F. Minimal Art: The Critical Perspective. Washington: University of Washington Press, 1993
102 Meyer J. Minimalism: Art and Polemics in the Sixties, 2000
103 VanEenoo C. Minimalism in Art and Design: Concept, influences, implications and perspectives // Journal of
Fine and Studio Art Vol. 2011. Issue 2(1)
104 Marzona D. Minimal Art. Berlin: Tashen, 2004
105 Obendorf H. Where «less» is «more» – notions of minimalism and the design of interactive systems: A
constructive analysis of products & processes of human-computer-interaction design from a minimalist standpoint.
Hamburg University, 2007
106 Meyer K. The Roots of Minimalism in Web Design. 2012 URL: https://www.nngroup.com/articles/rootsminimalism-web-design/ (дата обращения: 18.04.2016).
107 Пикулевский О.В.Дизайн и культура. Харьков: Гуманитарный центр, 2014
108 Герчук Ю.Я. Функциональная графика XX века // История графики и искусства книги. 2000.
2. Типографика и шрифтовое расписание (Количественный признак:
Использование 1 гарнитуры – 3 балла; Использование более 2 и
более гарнитур – 0 баллов; Качественный признак: Использование
только сансерифа – 3 балла; Использование сансерифа и серифа – 1
балл; Использование только серифа – 0 баллов;)
3. Симметричность композиции (Композиция асимметрична – 3 балла;
Чередование принципов симметрии и ассиметрии – 1 балл;
Композиция в целом симметрична – 0 баллов;)
4. Использование цвета (Монохромность или 1 контрастный цвет – 3
балла; Кроме черного используется 2-3 цвета – 1 балл;bКроме
черного используются > 3 цветов – 0 баллов; Дополнительно
(типографика): Кроме черного и его оттенков используется 1-2
цвета – 3 балла; Кроме черного и его оттенков используется 3 цвета
– 1 балл; Кроме черного и его оттенков используется >3 цветов – 0
баллов;)
5. Использование негативного пространства страницы (Умеренное
распределение негативного пространства между блоками контента
– 3 балла; Широкое разделение блоков контента, много «воздуха» –
1 балл; Слишком узкое разделение блоков контента, «воздуха» нет 0 баллов;)
6. Ритм и повторы (Элементы оформления создают ритм по всей
странице – 3 балла; Элементы оформления создают ритм по
странице частично – 1 балл; Элементы оформления не создают ритм
– 0 баллов;)
7. Функциональность интерфейса (Элементы навигации и поиска
контента расположены в одном месте – 3 балла; Элементы
навигации и поиска контента расположены в непосредственной
близости, но не рядом – 1 балл; Элементы навигации и поиска
контента расположены в разных областях экрана – 0 баллов;)
8. Навигация (Навигационное меню фиксировано и не меняет свое
положения при прокрутке – 3 балла; Навигационное меню не имеет
строго фиксированного положения и исчезает с области просмотра
при прокрутке– 0 баллов;)
9. Многокомпонентность навигации (Использование одноуровневой
навигации – 3 балла; Использование двухуровневой навигации – 1
балл; Более сложная организация навигации – 0 баллов;)
10. Контрастность страницы: (Высокая контрастность между блоками
информации – 3 балла; Средняя контрастность между блоками
информации – 1 балл; Низкая контрастность между блоками
информации – 0 баллов;)
11. Мнение эксперта (Медиаресурс, дизайн которого наиболее
соответствует эстетике минимализма – 3 балла; Медиаресурс,
дизайн которого занимает 2 место в аспекте эстетики минимализма
– 1 балл; Медиаресурс, дизайн которого занимает 2 место в аспекте
эстетики минимализма – 0 баллов; Медиаресурс, дизайн которого
наименее соответствует эстетике минимализма: -1 балл;)
Полный кодировочный лист структурного анализа
реализация
функционально-эстетических критериев минимализма находится в
приложении 4 данной магистерской работы.109
109Приложение 4, табл. 3
ГЛАВА II МИНИМАЛИЗМ КАК ПРИНЦИП ВИЗУАЛЬНОЙ
ОРГАНИЗАЦИИ НОВОСТНЫХ ПОРТАЛОВ
2.1 Системообразующие факторы композиционно-графической модели
веб-сайта с точки зрения эффективного «опыта взаимодействия»
Рассмотрев в первой главе основные подходы к определению понятия и
принципов юзабилити, их связи с принципами минимализма, а также
определив некоторые подходы оценки эргономичности веб-ресурсов можно
сделать вывод о том,
что методы повышения юзабилити сайтов уже
длительное время являются объектом изучения со стороны исследователей и
специалистов в области веб-эргономики. Основное внимание исследователей
направлено на решение практической задачи совмещения эстетических и
прикладных аспектов дизайна, принимая во внимание когнитивные
возможности аудитории для упрощения процесса восприятия информации, с
целью создания удобного интерактивного продукта, отвечающего всем
запросам и потребностям пользователей. Проектирование пользовательского
опыта, рассмотренное ранее в первой части данного исследования, позволяет
разработчикам создавать интерактивный продукт, ориентированный на
конкретные потребности, желания, ожидания, ощущения, впечатления и
эмоции пользователя, на основе которых определяются способы
представления информации, концептуальные подходы к информационной
организации сайта, формы выражения функциональности веб-ресурса.
Совокупность этих факторов обеспечивает позитивный опыт пользователя,
что в дальнейшем, может привести к повышению конкурентоспособности
данного сайта, а также увеличению его монетизации.110
Данный опыт необходимо рассматривать не только в рамках
поведенческих сценариев, но и в контексте способов организации и
представления контента. Иными словами, эстетическое восприятие и учет
110 Marcus A. Return on Investment (ROI) for Usability. Nielsen Norman Group, 2013
факторов визуальной организации веб-страницы поднимает вопрос о
методике анализа ее композиционно-графической модели. При этом важно
понимать, что КГМ должна рассматриваться не с точки зрения определенных
эстетических предпочтений и подхода дизайнера, а исходя из вполне
определенных перцептивных закономерностей, позволяющих говорить о
системных отношениях между всеми элементами дизайна.
В научной литературе последних лет достаточно часто идет речь о
возрастающей важности вопросов, связанных с функциональной
эффективностью композиционно-графической модели. В центре внимания
авторов находится множество вопросов, связанных с визуальным весом
элементов оформления, акцентированием, перцептивным восприятием и
количеством графических элементов на странице и иные вопросы. Но для
проведения каче ственного анализа необходимо сформулировать
определенные критерии оценки юзабилити композиционно-графической
модели сайта.
Благодаря исследованиям Якоба Нильсена нам известно, что
однонаправленность всех элементов КГМ позволяет пользователям глубже
вовлекаться в процесс взаимодействия с веб-ресурсом. 111 Осознание цели
взаимодействия и близости к ней, ощущение обратной связи, контроля над
ситуацией можно добиться только следуя базовым критериям эффективности
визуальной организации страницы. Напомним, что к ним относятся удобство
использования средств взаимодействия, доступность и полнота информации
при минимуме изобразительных и технических средств, полезность,
релевантность и эффективность. При этом необходимо реализовать
сверхзадачу всех критериев: обеспечить концентрацию внимания
пользователя на самом главном, сделать процесс восприятия более
управляемым соответствии с поисковой задачей пользователя.
111 Nielsen J., User Satisfaction vs. Performance Metrics. 2012 URL:
https://www.nngroup.com/articles/satisfaction-vs-performance-metrics/ (дата обращения: 20.03.2016).
На решение данной задачи может осознанно влиять дизайнер,
создающий визуальную организацию сайта,
воздействуя на различные
уровни обработки информации человеческим созданием и получая при этом
эмоциональный отклик аудитории. Как указывает американский психолог
Дональд Норман, существует три таких уровня112:
Уровень интуиции, отвечающий за спонтанную, почти
инстинктивную реакцию человека, где внимание непроизвольно.
Уровень поведения, отвечающий за рождение быстрых, не
требующих долгого времени на обдумывание благодаря нашему
визуальному опыту и тренировке, решений.
Уровень созерцания, на котором происходит осмысление
выполняемых человеком действий
и осознанное восприятие и
анализ информации.
Эргономичный подход к визуальной организации позволяет
задействовать потенциалы всех уровней одновременно: удерживать внимание
пользователя, предлагать выбор и побуждать его к определенным действиям,
подтверждать его информационные ожидания.
Рассмотренные в первой главе данной работы подходы и критерии
юзабилити западных и отечественных исследователей в области эргономики
во многом схожи. Большинство из них со ставлены на о снове
сформированных Якобом Нильсеном компонентов успешного юзабилити, к
коим относятся: обучаемость, эффективность, запоминаемость, малое
количество ошибок либо их отсутствие.113 Рассмотренные в первой главе
данной работы подходы и критерии юзабилити в понимании некоторых
западных и отечественных исследователей в области эргономики во многом
схожи и отличаются широтой предлагаемых перечней. Международный
стандарт указывает 3 необходимых компонента юзабилити, к которым
относятся: эффективность, т.е. точность и полноценность достигнутых
112 Норман Д. А. Дизайн привычных вещей. М.: Вильямс, 2006. — С. 118-134
113 Nielsen J. Usability 101: Introduction to Usability. 2012 URL: https://www.nngroup.com/articles/usability-101introduction-to-usability/ (дата обращения: 20.03.2016).
пользователем целей; экономичность, т.е. количество затраченных
пользователем ресурсов для достижения целей; удовлетворенность, т.е
совокупное удовольствие и комфорт пользователя при работе с ресурсом.
Большинство авторов сегодня, в принципе, с такими критериями согласны,
отличия наблюдаются лишь в подходах к определению факторов
композиционно-графической модели, ответственных за реализацию данных
критериев.
В современных исследованиях в области эргономики визуальной
организации сетевых проектов можно выделить несколько комплексных
подходов, касающихся роли композиционно-графической модели проекта в
формировании эффективного юзабилити веб-сайта.
Количественные и качественные характеристики контента становятся
ключевыми факторами в рамках атрибутивного подхода.114
К этим
характеристикам, к примеру, относятся размер изображений, контрастность
текста и фона, а также иные компоненты дизайна, составляющие один из
важнейших параметров элемента оформления – его визуальный вес.
Создание оптимальной организации страницы и ее визуальной иерархии
позволяет облегчить процесс поиска необходимой информации и приводит к
лучшей ориентации пользователя на сайте, позволяя в дальнейшем
сформировать
«положительный» пользовательский опыт. Наиболее
эффективными средствами в реализации этой задачи, по мнению
сторонников атрибутивного подхода, выступают контрастное выделение
ссылок, игра с размером изображений. 115
Дистрибутивный или распределительный подход предполагает, что
ключевая роль в формировании оптимальной визуальной иерархии
принадлежит элементам, окружающим целевой компонент страницы.116 В
114 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
115 Huang M.H., Designing website attributes to induce experiential encounters // Computers in Human Behavior.
2003. Issue. 19 (4), — Р. 425-442.
116 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.
этой связи исследователи говорят о, так называемом, конкурирующем
контенте, имеющим визуальное сходство с главным элементом страницы, но
не предполагающем выполнение тех же функций. По мнению сторонников
данного подхода, визуальная конкуренция может усиливаться или
уменьшаться в зависимости от нескольких факторов, важнейшим из которых
является ширина пробельных элементов.117 Многочисленные эксперименты
привели к пониманию того, что использование умеренно выраженных
пробельных элементов приводит к увеличению скорости и упрощению
поиска нужной информации.118 Менее выраженные пробелы приводят к
трудностям в восприятии текстовой информации, в то время как широкие
пробелы придают ощущение «пустоты» на странице и увеличивают время
прокрутки. Умеренное использование пробелов приводит к большей
удовлетворенности пользователей в результате взаимодействия с сайтом, чем
использование плотного или разностороннего пространства. Недостаточная
ширина пробелов или отсутствие полей на странице приводит к уменьшению
эффективности восприятия контента, в связи с чем, как отмечают
исследователи, регулярные интервалы и вертикальные пробелы
рассматриваются в качестве ключевых факторов юзабилити.119
Третий подход в рамках исследования эргономики визуальной
организации веб-страницы можно назвать композиционно-топологическим. В
рамках данного подхода, исследователи юзабилити уделяют особое
внимание, так называемой перцептивной разметке странице, т.е. поиску и
выделению зон наивысшего внимания пользователя. Иными словами,
целевой контент необходимо размещать именно в тех областях страницы, на
которые в первую очередь пользователь обращает свой взгляд при
117 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).
118 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
119 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-паттерну визуального восприятия».
Размещение целевого контента и необходимых элементов интерфейса в левой
области экрана приводит к удержанию внимания и лучшей ориентации
пользователя по сайту. Большое внимание в рамках композиционнотопологического подхода уделяется исследованиям отслеживания движения
глаз, т.е. айтрекингу. Суть этих исследований сводится к гипотезе
«согласованности мысли и взгляда», согласно которой, «люди видят то, о чем
думают». Иными словами, пользователи фиксируют свое внимание на тех
элементах оформления и том контенте, которые их интересуют, и «чем
дольше они на них смотрят, тем больше о них думают».120
Четвертый подход, в рамках рассматриваемой темы, подразумевает в
качестве ведущего фактора оптимальной визуальной организации вебстраницы детализацию ее графических элементов. В центре исследователей
находится так называемый «коэффициент сложности» веб-страницы,
имеющий прямое отношение на возможности ее восприятия. Согласно
данному подходу, большое количество разного рода деталей в элементах и
оформлении контента приводит к ее визуальной нагруженности, в результате
чего страница перенасыщена и, в целом, хуже воспринимается
пользователями.121 Одним из наиболее известных исследований в рамках
данного подхода является, так называемая концепция «визуального
обогащения» (visual richness), рассматривающая влияние избыточности
деталей элементов дизайна и детализации графики страницы на восприятие
контента аудиторией.122
120 Нильсен Я. Дизайн Web-страниц. Анализ удобства и простоты использования 50 узлов. М.: Вильямс,
2002. — C. 28
121 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.
122 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.
Таким образом, можно сделать вывод о том, что при определении
факторов реализации успешного юзабилити исследователи концентрируются
только на одном элементе макета страницы. В качестве такого аспекта могут
выступать: количественные и качественные характеристики контента,
влияние «окружающих» или «соседствующих» с целевым контентом
элементов, перцептивная разметка, «коэффициент сложности» веб-страницы
и иные феномены. Однако, изучая воздействие конкретного аспекта на
восприятие веб-страницы, исследователям сложно оценить совокупное
воздействие всех элементов композиционно-графической модели. В этой
связи нужно учитывать, что восприятие – явление системное, а значит и
архитектура страницы – тоже. Для реализации исследования, в этом случае,
необходима согласованность факторов КГМ в рамках модели, которая будет
учитывать не только прагматические, но и эстетические особенности
пользовательского опыта, а также объединит все рассмотренные ранее
подходы в формировании оптимальной визуальной иерархии.123 В основе
системного характера взаимодействия лежат особенности когнитивной
обработки информации, определяющие взаимодействие пользователя с
сайтом.
Основой для системного характера воздействия становится концепция
Бориса Величковского124, в рамках которой выделяется два основных режима
когнитивной обработки информации: фокальной обработки и общей
ориентации. Свое начало данная концепция берет из теории интеграции
признаков Энн Трисман, подразумевающую две фазы зрительного
восприятия.125 Как и в теории Трисман, режим фокальной обработки в
концепции Величковского подразумевает концентрацию внимания и
123 Якунин А.В. Композиционно-графическая модель веб - сайта как системообразующий фактор
формирования «опыта взаимодействия». // Инновационное развитие: ключевые проблемы и решения.
Сборник статей Международной научно-практической конференции.2015. С. 176 (174-178.)
124 Блинникова И.В., Величковский Б.Б., Капица М.С., Леонова А.Б. Экспериментальное исследование
прерываний в компьютеризированной деятельности: анализ стратегий переключений между основной и
дополнительной задачами // Экспериментальная психология. 2009. № 1. С. 35-51
125 Treisman, A., Gelade, G. A feature integration theory of attention // Cognitive Psychology. 1980. Vol 12, Р. 97
тщательное рассматривание целевого объекта с целью его распознавания.126
Для поиска на странице и взаимодействия с ресурсами сайта действует
режим общей ориентации, предполагающий широкое распределение
внимания и увеличение поля зрения. При этом, как мы ранее указывали, для
обеспечения максимальной концентрацию внимания пользователя на целевом
контенте и упрощения процесса восприятия должны быть задействованы все
уровни обработки информации: интуитивный, поведенче ский,
созерцательный.127
Способность человеческого внимания функционировать в двух
режимах когнитивной обработки позволила сформировать оптимальную
методику анализа композиционно-графической модели, направленной на
выявление системных отношений внутри ее структуры, объединяющей как
эргономические, так и эстетические критерии пользовательского опыта и
сохраняющей при этом традиционное для эстетического понимания дизайна
представление о системной упорядоченности ее организации. 128 В рамках
данного подхода, выделяют два уровня визуальной организации страницы,
соответствующих рассмотренным режимам обработки информации:
Макроуровень отвечает за факторы режима общей ориентации по
странице и поиска необходимого контента, в условиях широкого
распределения внимания по странице. В компоненты КГМ в
данном случае включено зонирование страницы, область
расположения контента и т.д.
Микроуровень соответствует режиму фокальной обработки и
отвечает за факторы идентификации и рассматривания контента.
На этом уровне анализируются параметры элементов,
со ставляющих графиче ское оформление контента, и,
ответственных за восприятие текстовой информации. В
126 Величковский Б.М. Исследование когнитивных функций и современные технологии // Вестник РАН.
2010. № 80. С. 440-446.
127 Норман Д. А. Дизайн привычных вещей. М.: Вильямс, 2006. — С. 118-134
128 Якунин А.В. Композиционно-графическая модель веб - сайта как системообразующий фактор
формирования «опыта взаимодействия». // Инновационное развитие: ключевые проблемы и решения.
Сборник статей Международной научно-практической конференции.2015. С. 176 (174-178.)
компоненты КГМ на данном уровне включены элементы,
отвечающие за психофизический комфорт при восприятии текста
и влияющие на удобочитаемость.
Необходимость анализа визуальной иерархии диктуется задачами ее
организации и принципами использования. Определяя ранжирование
функциональных и информационных элементов, целевого и вторичного
контента по странице, она позволяет облегчить процесс поиска требуемой
пользователем информации и формирует условия для создани
положительного пользовательского опыта. Как указывают исследователи,
некоторыми о сновными аспектами, выступающими в каче стве
«разграничителей» уровней иерархии, являются цвет, насыщенность,
контрастность, размер, положение и т.д.129 В основе оформления лежат
особенности восприятия информации: так приоритетные элементы,
вероятнее всего, имеют более крупный размер, более контрастны и могут
быть выделены цветом.
Единство всех элементов композиционно-графической модели
обеспечивает общенаправленность ее визуального языка. Как указывал Якоб
Нильсен: «простота всегда побеждает сложность, особенно в Интернете». 130
Принципы построения визуальной организации и системно-иерархических
отношений внутри КГМ в общем виде можно свести к значению принципов
минимализма в веб-дизайне (минимализм средств, значений, структуры и
т.д.): оптимальная иерархия не будет замечена пользователями, благодаря
гармоничному сочетанию в ней когнитивных особенностей восприятия
человека, функционально-эргономических и эстетических аспектов дизайна,
в то время как путаница в логике организации страницы сразу обратит на
себя внимание аудитории.
129 Шеховцова А.Н. Базовые принципы, применяемые в мультимедийном проектировании // Молодежь и
XXI век - 2015 материалы V Международной молодежной научной конференции в 3-х томах. 2015. С. 370
130 Нильсен Я. Веб дизайн: книга Якоба Нильсена. Спб.: Символ-Плюс, 2003. — С. 33
Как указывал в своих работах Йозеф Мюллер-Брокманн, «формальная
организация поверхности с помощью модульной сетки, наряду со знанием
правил четкости и удобочитаемости текста, а также значащее использование
цвета – все это срезы инструментов, позволяющих реализовать проект в
рациональной и экономической манере».131 В данном исследовании мы будем
опираться на целостное понимание композиционно-графической модели в
единстве всех ее элементов как системы.
В рамках используемого подхода, выделим элементы композиционнографической модели, которые являются опорными факторами анализа и
опишем способ присуждения баллов по каждому из представленных
критериев:
1. Макроуровень
Область экрана
Зонирование страницы;
Пробельные элементы;
Поля и отступы;
Длина наборной строки;
Интерлиньяж;
2. Микроуровень
Контурный контраст литеры;
Тонально-цветовой контраст символа-графемы и фона;
Гарнитура;
Полный кодировочный лист с описанием критериев для проведения
структурно-функционального анализа главных и новостных страниц
медиаресурсов в контексте задач юзабилити можно найти в Приложении 4 132
данного исследования.
Макроуровень
Область экрана. Ключевой вопрос, связанный с областью экрана
заключается в том, насколько сильно расположение элементов влияет на
скорость и эффективность восприятия. Ранее отмеченные в данной работе
131 Лаптев В. Типографика: порядок и хаос. М.:, 2008 – С. 44
132 Приложение 4, табл. 1, 2
исследования Якоба Нильсена, о так называемом «F-паттерне визуального
восприятия», посвящены ответу на этот вопрос. Напомним, что суть данного
феномена заключается в особом подходе к восприятию веб-страницы,
согласно которому, внимание пользователя максимально сосредоточено в
левой верхней части экранного пространства.133
Проведя исследования отслеживания движения глаз более 200 человек,
Нильсен обнаружил, что просмотр веб-страниц большинством пользователей
характеризуется определенной последовательностью действий вне
зависимости от типа посещаемого веб-ресурса. Доминирующим образцом
«считывания» информации стала F-образная траектория, осуществляемая в
следующей последовательности действий. Сначала пользователи
просматривали верхнюю область страницы по горизонтали, затем их взгляд
перемещался вниз страницы, где в какой-то момент задерживался и
незначительно смещался в правую сторону. После, пользователи
рассматривали только левую сторону экранного пространства по вертикали
или их взгляд рассеивался по мере приближения к правому нижнему углу
страницы. Такая схожесть в последовательности движения взгляда у разных
людей на разных сайтах объясняется особенностями когнитивного
восприятия: движение глаз бессознательно и инстинктивно.
На основе полученных сведений проводились и исследования,
связанные с «коэффициентом сложности» веб-страницы, в рамках которых
было выявлена сильная взаимосвязь между визуальной наполненностью (т.е
сложностью) страницы, количеством изображений, ссылок и верхним левым
углом экранного пространства.134
Зонирование страницы связано с важностью модульной организации
структуры макета, позволяющей, благодаря четкости выделения блоков в
геометрии страницы повысить скорость распознавания контента.
133 Nielsen J., F-shaped pattern for reading web content. 2012 URL: http://www.nngroup.com/articles/f-shapedpattern-reading-web-content/ (дата обращения: 27.01.2016).
134 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.
Вопросы оптимальной композиционной организации в области
книжного и газетного дизайна, а также принципы модульного построения в
графическом дизайне были исследованы рядом ученых, сумевших
сформулировать основные положения в системе организации пространства
на странице. К их числу относятся работы Я.Чихольда, Дж.Феличчи,
А.Хелберта, Д.Шульца, В.Лаптева, А.Корольковой и других исследователей в
области дизайна. Большинство принципов оптимальной организации
страницы, регламентирующих компоновку элементов в полиграфическом
дизайне, остаются актуальными и для веб-проектирования.
В процессе размещения контента и основных графических элементов
страницы необходимо логическое структурирование всех ее элементов.
Определяя стратегию расположения составляющих компонентов вебстраницы, дизайнер сталкивается с необходимостью создания системы,
позволяющей их композиционно упорядочить. Таким стратегическим
инструментом выступает модульная организация структуры макета.
Главным назначением модульной организации в веб-дизайне является
разумное упорядочение информации в соответствии с ее назначением и
релевантностью, создание композиционной структуры веб-страницы и сайта
в целом.135
Модуль рассматривается в качестве единицы соразмерности, а
сетка выступает в качестве системы пропорций.136
Наиболее простым видом модульной организации является блочная или
одноколонная сетка («manuscript grid»), представляющая собой одну,
размеченную область. В зависимости от оформительского решения,
наполнения сайта и поставленных перед композицией задач, количество
колонок в сетке может увеличиваться. Модули, в основе которых чаще всего
лежит квадрат или прямоугольник, содержат поле, используемое для
размещения контента.
135 Гаррет Д. Веб дизайн, ориентированный на пользователя. Элементы опыта взаимодействия. СПб.:
Симбо, 2008. — С. 147
136 Егорова И.Н., Рыгина В.Е. Исследование методов оптимизации структуры web-страниц // ВосточноЕвропейский журнал передовых технологий. 2010. Т. 5. № 2 (47). С. 45-47.
По мнению Джеймса Фелличе, модульная сетка является основным
компонентом оптимально сверстанной страницы. 137 Благодаря ей возможно
системное упорядочение элементов, позволяющее ускорить ориентацию
пользователя по странице, и создание рационально организованного
визуального пространства. Описывая влияние модульной организации макета
на восприятие представленного контента, Владимир Лаптев называет сетку
«невидимым костяком» дизайна любого графического пространства.138
В рамках создания композиции и проектирования визуальной иерархии
веб-страницы модульная структура макета позволяет решать ряд
функционально-ориентированных задач:139
целенаправленное разделение контента;
упорядочение контента и обеспечение связи между разными
блоками;
сохранение пропорций всех элементов страницы за счет
использование блоков, разделяющих разные группы контента;
сохранение визуальной преемственности при переходе от одной
странице к другой;
возможность использования технологии «ленивой подгрузки»
(lazy loading);
Кроме того, следуя цели построения рациональной иерархии на
странице для улучшения восприятия информации, модульная сетка
выполняет и ряд эстетических функций, придавая композиции страницы
более гармоничный и приятный, с точки зрения эстетического восприятия,
вид.
Том Демарко и Тимоти Листер довольно точно охарактеризовали
природу модульной организации, определив ее как «генеральный план
создания грандиозного и обширного», превращающий комплекс различных
137 Феличи Дж. Типографика: шрифт,верстка, дизайн. СПб.: БХВ-Петербург, 2004. – С. 496
138 Лаптев В. Модульные сетки: проектирование многополосных изданий. М.: РИП-холдинг, 2007. – С. 204
139 Curtis N. Modular Web Design: Creating Reusable Components for User Experience Design and
Documentation. New Riders, 2010. — P.5
элементов во взаимообусловленное целое.140 Расположение элементов на
странице имеет значимое влияние в контексте эффективности и скорости ее
восприятия. Вопрос заключается не только в расположении контента в
определенных зонах страницы, но и во взаимном расположении различных
элементов визуального языка относительно друг друга : взаимосвязанные
элементы располагаются рядом, в соседних блоках для облегчения процессов
визуальной обработки информации.
Польза модульной структуры макета становится еще более очевидной
при изучении некоторых исследований в области веб-эргономики,
касающихся приоритетности задач пользователей на веб-странице.
Американский исследователь в области юзабилити Джерри Макговерн
пришел к выводу, что пользователи просматривают страницу небольшими
блоками или секциями, назвав данный феномен «блочное чтение».141 Главный
его вывод заключается в том, что человек не сканирует взглядом всю
страницу, а делит ее на различные блоки, в которых стремится найти нужную
информации или контент. Результаты исследования приоритетности задач во
многом совпали с исследованиями Нильсена: при взгляде на веб-страницу,
мы склонны воспринимать ее не целиком, а в качестве распределенных
кусков информации. Согласно результатам Макговерна, в левом верхнем
квадрате экранного пространства пользователи ищут навигационный блок и
основную информацию. И хотя центральная часть страницы является очень
важным пространством, в первую очередь пользователи обращают внимание
именно на «левую колонку» экрана. Правая сторона страницы оказывается
наименее просматриваемой пользователями поскольку в большинстве
случаев, согласно данным Макговерна, при поиске нужного контента
читатели обращались в эту область в последнюю очередь.
«F-образная» верстка по-прежнему является одним из наиболее
оптимальных способов организации страницы, однако нельзя упускать из
140 Демарко Т., Листер Т. «Человеческий фактор: успешные проекты и команды». СПб: Символ Плюс, 2005
141 McGovern G. Block reading: how we read on the Web. 2008. URL: http://www.gerrymcgovern.com/newthinking/block-reading-how-we-read-web (дата обращения: 24.04.2016)
виду тенденции современного веб-дизайна и количество ежедневно
появляющейся и потребляемой информации. Если раньше длинная прокрутка
считалась определенным недостатком дизайна, сильно влияющим на
скорость чтения и, соответственно, увеличивающим длительность
восприятия информации, то теперь это актуальнейшая тенденция в вебе и
способ оптимальной организации контента. Количество потребляемой
информации ежедневно растет, а значит, необходимо грамотно ее
представлять пользователям: длинная прокрутка или технология «ленивой
подгрузки» (lazy loading) позволяет догрузить более ранний контент,
представленный в новостной ленте. Несмотря на практическое удобство
данной технологии, ее юзабилити все еще требует доработок. Как указывает
Макговерн, одним из наиболее верных способов оптимизации длинной
прокрутки является разбивка длинных материалов на параграфы, с учетом
оптимального использования пробельных элементов.142
К интересным выводам пришли исследователи Сью и Чапарро,
проанализировав макеты с использованием модульной организации и без нее.
Согласно их результатам, отсутствие сетки макета приводит к путанице в
порядке выполнения действий на странице. При этом, эмпирически было
подтверждено, что в первую очередь и чаще всего пользователи обращаются
к верхнему левому квадрату экранного пространства.143
Таким образом, модульная организация структуры макета организует и
осмысляет веб-страницу, помогает в реализации понятного и, одновременно с
этим, эстетичного представление контента, выстроенного таким образом,
чтобы его изучение происходило почти на интуитивном уровне и
способствовало быстрому нахождению необходимой информации.
Распределяя пространство страницы, она позволяет найти решение для
расположения всех составляющих страницы: от целевых до вспомогательных
142 McGovern G. Block reading: how we read on the Web. 2008. URL: http://www.gerrymcgovern.com/newthinking/block-reading-how-we-read-web (дата обращения: 24.04.2016)
143 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)
и менее значимых. Последовательное расположение всех элементов
визуального оформления способствует упрощению визуальной обработки
информации, благодаря чему пользователи быстрее учатся работе с
ресурсом.144
Пробельные элементы. В а ж н ы м ф а кто р ом в о р г а н и з а ц и и
пространства в полиграфии и веб-среде является так называемое «белое»,
«негативное»
пространство страницы, иначе называемое «воздухом»
(whitespace).145 В виртуальной среде оно играет значимую роль, поскольку
выступает фактором организации контента и помогает концентрировать
внимание пользователя на целевой информации. «Воздух» выполняет так
называемую «интеллектуальную» организацию элементов по странице,
выделяя и разделяя разные группы текста и графики, создает невидимый
порядок и способствует улучшению в восприятии контента. 146 Также, к числу
главных функций негативного пространства можно отнести создание ритма и
обеспечение
равновесия как внутри контента и между разными его
группами, так и в целом на странице.
Отсутствие пробельных элементов приводит к возникновению
визуальной «перенасыщенности» страницы, в результате чего восприятие
информации и поиск нужного контента может быть осложнены. Как
указывает Якоб Нильсен, благодаря четкости выделения блоков, белое
пространство выступает не только отличным инструментом разбивки разных
групп контента, но к тому же позволяет ускорить время загрузки страницы. 147
Направляя взор пользователя по странице, «воздух» буквально обеспечивает
«дыхание» дизайна, не позволяя контенту сталкиваться, толпиться и бороться
друг с другом за внимание пользователя.148
144 Шеховцова А.Н. Базовые принципы, применяемые в мультимедийном проектировании // Молодежь и
XXI век - 2015 материалы V Международной молодежной научной конференции в 3-х томах. 2015. С. 374
145 Фомишина О.В. Повышение качества восприятия контента сетевых электронных журналов средствами
модульного проектирования // Вестник современной науки. 2015. Вып.7 № 7-1. С. 170-174.
146 DiMarco J. Web Portfolio Design and Applications. NY.: Idea Group Inc, 2006. — P.5
147 Нильсен Я. Веб дизайн: книга Якоба Нильсена. Спб.: Символ-Плюс, 2003. — С. 29
148 Берд Д. Веб-дизайн: руководство разработчика. СПб.: Питер, 2012. — С.30
Эффективное восприятие «воздуха» довольно давно является объектом
изучения со стороны исследователей и специалистов в области вебэргономики. Основная идея данных исследований заключалась в том, что
использование негативного пространства влияет не только на эстетическую
привлекательность дизайна, но также добавляет ему функциональности.
Например, было определено, что пробельные элементы играют решающую
роль в направлении внимания пользователя к тем областям страницы, где
сосредоточена наиболее значимая информация. 149 Утверждалось, что пробелы
дают глазу место для отдыха, осуществляют визуальную взаимосвязь
элементов способствуют идентификации на странице, благодаря повторению
легко распознаваемых областей.150
Несмотря на видимые плюсы в использовании пробельных элементов
сущ е с т вуют и и с с л ед ова ния , д ока з ыва ю щие , ч то не обход им о
руководствоваться умеренностью в их использовании.
Согласно исследованиям, проведенным специалистом в области
юзабилити Джаредом Шпулом и его коллегами, сайты, имеющие более
плотные, с точки зрения использования пробельных элементов, макеты,
воспринимаются пользователями лучше, нежели чем ресурсы с большим
количеством негативного пространства. 151 Результаты показали, что именно
сайты, активно использующие в своей визуальной организации широкие и
длинные пробелы, имеют проблемы связанные с ориентацией пользователя
по странице: успешный поиск целевого контента гораздо чаще
реализовывался на сайтах с «плотной» организацией.
В частности, они
обнаружили, что при взаимодействии с сайтами, использующими крупные
пробелы, пользователи испытали меньшую сосредоточенность в процессе
работы и не были достаточно удовлетворены ее результатами в аспектах
п ои с ка и н ф орма ц и и , уд об с т ва ч т е ния , ис пользова ния , об ще й
149 Mullet K., Sano D., Designing Visual Interfaces // Englewood Cliffs, NJ: Prentice Hall PTR. 1995. — P.126
150 White, J. V. (1974). Editing by design: Word and picture communication for editors and designers. NY.: R.R.
Bowker Company, 1984.
151 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.
функциональности и визуального оформления. 152 Согласно Шпулу, причина
это заключается в особенностях восприятия: пользователи скользят по
странице, а не читают ее. Таким образом, близкая компоновка
взаимосвязанных компонентов
сыграла решающую роль в определении
предпочтений пользователей.
В этой связи необходимо выдерживать умеренность при использовании
пробельных элементов, помогая с их помощью концентрировать и усиливать
восприятие окружаемой информации и, не отвлекая пользователя,
сосредотачивать его внимание на контенте.
Эмпирически, использование средних по размеру вертикальных и
горизонтальных пробельных элементов было подтверждено Майклом
Бернардом и Барбарой Чапарро, взявших за основу идею о градации
величины пробелов и ее влиянии на ограничения в восприятии
информации.153 Они проанализировали сайт, применяя на одном
трехколонном макете разные по величине пробелы:
1. В первом случае, пробелы на сайте отсутствовали: применялось
лишь минимальное разделение колонок друг от друга в 1 символ (3 мм).
Никакого дополнительного пространства между абзацами или параграфами
использовано не было.
2. Во втором случае в качестве пробельного расстояния, как между
колонками, так и между абзацами использовалось расстояние в 4 символа
(равное 9 мм). Это использование пробелов обозначили как умеренное или
среднее.
3. В третьем случае пробельное расстрояние между колонками
составляло 11 символов (19 мм) и 4 пустые строки (19 мм) между абзацами.
Такое использование белого пространства обозначили как
использование
широких пробельных элементов.
152 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.
153 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-webdoes-the-amount-of-whitespace-really-matter/ (дата обращения: 24.04.2016)
Три макета оценивались участниками тестирования с точки зрения
сложности выполнения определенных поисковых задач и восприятия вебстраниц в целом. Было определено, что пользователи были более
удовлетворены, взаимодействуя с макетом, где использовались умеренные
пробельные элементы. Интересно отметить, что никаких существенных
различий в восприятии страницы с минимальными и широкими
пробельными элементами не возникало. В целом было отмечено, что
использование минимальных пробелов мешает чтению из-за «сдавливания»
пространства, а использование широких пробелов приводит к замедлению
чтения текстовой информацию Минимальные пробелы давали эффект
переполненности страницы информацией без попытки ее распределения, а
широкие пробелы создавали видимость пустоты на экране и требовали
больше времени на ее просмотр.154
Поля и отступы обеспечивают пространство между различными
элементами композиционно-графической модели. Поля определяют
пространство между границей контента и внешними элементами, а отступы
отвечают за пространство между границей элемента и внутренними
содержимым. Иными словами, полем мы называем белое пространство
вокруг текста справа, слева, сверху и внизу. Использование полей и отступов
продиктовано необходимостью: элементы страницы не должны «наезжать»
друг на друга, а текстовая информация должна быть представлена адекватно.
Поля и отступы ответственны за увеличение глубины понимания контента и
снижение усталости от чтения текстовой информации, однако, их
использование приводит к уменьшению пространства страницы и скорости ее
распознавания.
Ключевой вопрос в рамках веб-эргономики – какой величины должен
быть пробел для успешного юзабилити. Горизонтальные пробельные
элементы часто ориентированы на базовую сетку, а регулировка
154 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-webdoes-the-amount-of-whitespace-really-matter/ (дата обращения: 24.04.2016)
вертикальных, основана на гештальп-психологии и зависит от размера
шрифта, интерлиньяжа, ширины линии и некоторых других параметров. Роль
полей и отступов в опыте чтения достаточно часто рассматривается в
научном сообществе. К примеру, вышеописанное исследование Бернарда и
Чапарро выявило необходимость использование умеренных пробельных
элементов в тексте. Эти результаты позволяют адаптировать новые способы
организации контента (например, технологию «ленивой подгрузки») в
соответствии со способностями человеческого восприятия. В качестве
оптимального размера пробела для разграничения колонок и абзацев в рамках
одного текста, Бернард и Чапарро, принимают расстояние в 4 символа (9
мм).155
В ходе другого исследования, была выявлена прямая зависимость
между интерлиньяжем, скоростью чтения и пониманием прочитанного.156
Оказалось, что использование оптимально подобранных полей (не менее 10
мм) и интерлиньяжа приводит к наименьшим уровням физической усталости
во время чтения и большей удовлетворенностью макетом. Пользователям
предлагалось 4 варианта оформления текстовой информации, с учетом
оптимально установленных полей и интерлиньяжа, и без них. Скорость
чтения при отсутствии полей возрастала со 180 до 195 слов в минуту, в то
время как понимание прочитанного ухудшалось почти в два раза. В
результате, наиболее удобным вариантом, с точки зрения восприятия
информации и понимания прочитанной информации, большинство
пользователей посчитало сочетание «Поля + оптимально установленный
интерлиньяж», наименее – «Отсутствие полей + оптимальный интерлиньяж».
Таким образом, при отсутствии умеренного расстояния между
основной текстовой информацией и окружающими ее элементами, даже при
155 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-webdoes-the-amount-of-whitespace-really-matter/ (дата обращения: 24.04.2016)
156 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-ofwhitespace-really-matter/ (дата обращения: 24.04.2016)
условии соблюдении интерлиньяжа, пользователи будут испытывать
трудности в чтении. Проблемы восприятия контента будут и в том случае,
если оптимальные пробельные расстояния будут отсутствовать между
колонками и абзацами в рамках одного текста.
Восприятие целевого контента, во многих случаях, обусловлено
характером и оформлением соседствующего с ним контента. Согласно
мнению Гэри Гесслера, существует прямое влияние количества изображений
и ссылок на восприятие страницы. 157 Здесь имеет место ранее упоминаемый
феномен «коэффициента сложности» веб-страницы. «Коэффициент
сложности» страницы можно представить в виде двух измерений:
«визуальное разнообразие» и «визуальное обогащение» или «визуальная
наполненность». Визуальное разнообразие измеряется разновидностями
присутствующих на странице элементов (текст, графика, гиперссылки), а
визуальное обогащение их количеством.158
По мнению Джесса Гаррета и некоторых других исследователей, на
скорость поиска целевого контента может непосредственно влиять цвет. 159
Цветовое кодирование может быть задано для определенной группы
информации на странице. К примеру, многие новостные порталы обозначают
самые срочные новости красным цветом, что позволяет сходу определить
доминирующую информацию. Некоторые медиаресурсы используют цвет для
выделения навигационного меню и т.д. Наиболее оптимальным
соотношением цветов для восприятия текстовой информации является
типографская классика, подразумевающая сочетание черного и белого цветов
для основного массива текста. Что же касается цветового оформления
страницы и поиска контента, то здесь необходимо руководствоваться
законами сочетаемости, для сохранения эстетики и гармонии страницы.
Важна правильная работа с цветом: пользователя может оттолкнуть слишком
157 Geissler G., Zinkhan G., Watson R.T., , The influence of home page complexity on consumer attention,
attitudes, and purchase intent // Journal of Advertising . 2006. Vol. 35 Р. 69–80.
158 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)
159
яркий и контрастный фон, используемый на странице, в сочетании с таким же
ярким шрифтовым оформлением. Ни о какой удобочитаемости или поиске
контента на таком ресурсе пользователь думать не будет, поскольку покинет
такой сайт,почти сразу, как начнет смотреть на страницу.
Длина строки определяет эффективность скорости чтения. Вопросы об
определении оптимальной длины строки уже долгое время находятся под
пристальным вниманием специалистов в области веб-эргономики. При этом
данная область исследований уже много лет вызывает споры в научном
сообществе. Большинством исследователей, в качестве единицы измерения
длины строки принято принимает количество символов в строке (CPL).
Споры в вопросах определения оптимальной длины сводятся к двум
большим вопросам: какую строку читать быстрее и удобнее - длинную или
короткую? Второй вопрос заключается в том, существует ли оптимальная
длина строки и сколько символов она вмещает?
Одно из первых исследований с компьютерными мониторами в этой
области принадлежит Душински и Колерсу, установившим, что текст,
размещаемый в строке в 187 символов, читается на 28% быстрее, чем
аналогичная информация, вмещенная в текстовую линию, составляющую 62
символа.160 Эти исследования были продолжены Дайсоном и Киппингом,
подтвердившим ранее заявленную гипотезу о том, что экранный текст
читается быстрее при большем количестве символов. После проведения
аналогичных исследований было установлено, что оптимальной, может
считаться длина строки, составляющей от 75 до 100 символов. 161
Оформленный в такую ширину текст читался быстрее, чем умещенная в 25
символов информация того же объема, однако, никакой разницы в
непосредственной эффективности восприятия найдено не было. Дальнейшие
160 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.
161 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.
исследования опровергали предыдущие опыты, каждый раз устанавливая
новые стандарты.
По большей части исследователи были сосредоточены исследованиях в
области уменьшения длины строки. Дайсон и Хазельгроу обнаружили, что
информация в строке длиной в 55 символов читается быстрее, чем любой
аналогичный текст, умешенный в 100 или 25 символов. 162 Об этом же
свидетельствовал на основе проведенных исследований Грабингер (45-60
символов) и многие другие исследователи.163 Хортон, Миллс и Уэйндон
указывали оптимальной строку не более чем в 60 знаков, указывая на то, что
увеличение длины линии приведет к более скорой утомляемости. 164 Наконец,
Бернард, Фернандез и Чапарро установили, что предпочтительная длина
строки составляет около 75 символов для взрослых и 45 символов для
детей.165
Таким образом, строго определенной длины строки не определено. Ее
параметры колеблются в области от 60-75 символов. В целом, последние
исследования в этой области показывают, что аудитория предпочитает
умеренность и не слишком тяготеет к экстремально коротким (меньше 35
символов) или сверхдлинным (больше 95 символов) решениям.166 Интересно
отметить, что при максимальных показателях длины строки (95 символом и
больше) скорость чтения увеличивается, а при выборе минимальных
показателей она становится значительно ниже.
162 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.
163 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.
164 Horton, W. (1989). Designing and writing online documentation: Help files to hypertext. John Wiley & Sons:
New York.
165 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.
166 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)
В среднем, оптимальное восприятие в совокупности с данными о
скорости чтения, позволяет выделять в качестве оптимальной длины строки
значение в области 60-80 символов.
Интерлиньяж характеризует близость двух соседних строк в тексте.
Это пробельное расстояние между строками или базовыми линиями шрифта,
шаг строки по вертикали.167 Интерлиньяж выражается в типографских
пунктах (пт), а его оптимальное значение определяется исходя из кегля и
стиля шрифта, буквенного регистра, но может изменяться в зависимости от
задачи данного текстового блока.168 Для достижения сбалансированного
текстового блока, как правило, интерлиньяж должен быть несколько больше
(на 2 пт), чем размер шрифта. К примеру, интелиньяж текста, с заданным
кеглем в 14 пунктов, будет составлять 16 пунктов. В виртуальной среде
размер кегля и измеряется не только в пунктах, но и в пикселях. 1 пункт
(типографский) составляет примерно 1.32 пикселя. Соответственно, если
кегль составляет 14 пт. и 16 пт. интерлиньяж, то в пикселях значение кегля
будет примерно равно 18, а кегля 21. Таким образом, оптимальным размером
для интерлиньяжа в рамках веб-дизайна принято считать значение от 2-5
пикселей.
Особенности шрифтовой гарнитуры оказывают значительное
влияние на установку определенного интерлиньяжа. Это связано с тем, что
н екоторые ш ри фты занимают больше или, напротив, меньше
горизонтального или вертикального пространства. Поэтому для поддержания
гармонии и равновесия текстового блока необходимо помнить о некоторых
правилах. Для гарнитур, имеющих более компактный рисунок шрифта,
используют наименьший интерлиньяж. И напротив, имеющие более крупный
рисунок гарнитуры требуют больший пробел между строками. 169 Тестовый
блок оформленный сильными гарнитурами, вроде «Фактуры» или
«Гарамонд»,
должны быть оформлен таким образом, чтобы линия строки
оставалась цельной, несмотря на широкий рисунок шрифта, поэтому
167 Кричевский В. Типографика в терминах и образах. Том I. М.: Слово, 2000. – стр. 126
168 Goldberg R. Digital Typography Pocket Primer. London: Windsor Professional Information, 2000. — P. 114
169Ambrose G., Harris P. The Fundamentals of Typography. NY.: A&C Black, 2006. — P. 115
целесообразно использование минимального пробела между базовыми
линиями и обеспечить «узкий» набор.
Как указывал в своих работах Ян
Чихольд, если выбранная гарнитура шрифта тяготеет к антикве старого
стиля, то пробел между строками должен быть больше, соответственно, чем
сильнее она приближена к антикве нового стиля, тем меньше.170
Существуют и другие, общепризнанные принципы для определения
оптимального межстрочного интервала. К ним относят правило,
сформулированное немецким типографом Эриком Шпикерманом, которое
заключает в себе все выше обозначенные особенности выбора межсточного
пробела: оптимальный интерлиньяж должен быть больше межсловного
пробела.171 Это позволяет добиться быстрого, последовательного прочтения
текста, поскольку взгляд читателя будет двигаться по одной строке и затем
переходить к следующей, а не прыгать по ним.
Микроуровень
Контурный контраст литеры связан с четкостью контура буквы в
составе заголовков, лидов, основных текстовых блоков. Контрастность
является характеристикой, определяющей рисунок шрифта, степень
насыщенности и четкость литеры. Существуют шрифты с высокой
контрастностью (обыкновенная группа), с меньшей (медиевальная), малой
(малоконтрастная и брусковая) и неконтрастные шрифты (рубленная с едва
наметившимися засечками).172
Конт растно сть литер определяет ся толщиной о сновных и
соединительных линий: если их соотношение составляет 2:1 или меньший
показатель, то текст, набранный таким шрифтом, будет малоконтрастен. 173
Соответственно, если указанное соотношение больше, то такой шрифт будет
170 Чихольд Я. Облик книги. М., 1980 — P. 135
171 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
172 Никитин В.А., Привалова О.Ю. Шрифты: современные начертания, характерологические особенности,
типология. "Техника и технология СМИ", "Дизайн газеты. СПб. : СПбГУ, 2004. – C. 11
173 Королькова А. Живая типографика. М.: IndexMarket, 2010. - стр. 114
контрастным. Контрастность литер в веб-среде имеет доминирующее
значение в аспекте удобочитаемости. Связано это с тем, что текст на экране
компьютера большинством людей воспринимается хуже, ввиду множества
особенностей: размер, яркость и разрешающая способность экрана,
расстояние до текста, установленный масштаб веб-страницы и т.д.
Соответственно, если какой-то шрифт будет иметь оптимальную
контрастность на листе бумаге, то вовсе необязательно, что эта четкость
сохранится при аналогичном применении шрифта в виртуальной среде.
Поэтому ресурсам, где текстовая информация является доминирующим
контентом, необходимо использование достаточно контрастного шрифта или
выбора его оптимального контрастного начертания, для создания
максимально комфортных условий восприятия информации. От
контрастности шрифта на экране зависит его разборчивость, являющаяся
качественной характеристикой, особенно важной для оптимального
прочтения и восприятия тестовой информации: с большого расстояния за
короткое время.174 Поэтому необходимо помнить, что даже правильно
п од о б р а н н а я г а р н и ту р а ш р и ф т а , ха р а кт е р и зу ю щ а я с я в ы с о ко й
контрастностью, может отражаться недостаточно четко и разборчиво на
экране цифрового устройства. В таком случае, удобочитаемость текста
снизится и необходимо предпринять действия по улучшению контрастности
текста. Для этого, например, можно применить более контрастное
начертание, предусмотренное выбранной гарнитурой или увелить параметры
контрастности литер в таблице каскадных стилей CSS. В аспекте
удобочитаемости длинных текстов в виртуальной среде, важно отметить, что
полужирное начертание шрифта воспринимается так же хорошо, как и
нормальное, а в некоторых случаях даже предпочтительнее. 175
Гарнитура определяет все стилистические вариации шрифта, к которым
относятся его рисунок, размер, пропорции и начертание. Так степень
174 Hillner M. Basics Typography: Virtual Typography. NY.: AVA Publishing, 2009. — P.117
175 Кричевский В. Типографика в терминах и образах. Том I. М.: Слово, 2000. – С. 126
контрастности штрихов, высота литер, буквенный просвет, кернинг, форма
засечек, концевых элементов — все эти показатели могут существенно
отличаться не только в разных шрифтах, но и в рамках одной шрифтовой
гарнитуры, поскольку разные начертания могут отличаться степенью
масштабирования по горизонтали или вертикали.176 Таким образом,
наилучшим решением при определении шрифтового расписания веб-ресурса
будет использование гарнитуры, включающей большое количество
начертаний, чем стандартный набор, состоящий из нормального, курсивного,
жирного, полужирного, светлого, узкого, широкого начертания. Это позволит
решить ряд функционально-эстетических задач, среди которых будет
соблюдение единообразия и возможность выбора нужного начертания для
каждого из текстовых элементов на странице. Разнообразие начертаний
гарнитуры расширяет возможности визуального оформления и представления
текстовой, придает гибкость дизайну, позволяет создавать типографические
акценты, без применения дополнительных шрифтов.
В контексте того, как гарнитура влияет на эффективность чтения с
экрана можно отметить некоторые принципы использования разных
шрифтов. Тимоти Самара выделяет следующие группы шрифтов, в
соответствии с : старый стиль, переходный стиль, модерн, сериф и сансериф,
рубленные, акцидентные.177 В современных компьютерных технологиях чаще
всего используют сериф/cансериф и рубленные. Группа шрифтов сериф или
(Georgia, Times New Roman, Garamond и т.д.), представляет собой
легкочитаемые, контрастные шрифты с засечками. Сансериф (Arial, Tahoma,
Verdana и т.д.), что в переводе с английского означает «без засечек», так же
оптимизированные под природу экрана шрифты, характеризующиеся
отсутствием лишних деталей, единой шириной штрихов, плотным набором и
разборчивостью при небольшом кегле.178 Согласно ряду исследователей, для
лучшего восприятия объемных текстовых блоков желательнее выбирать
176 Goldberg R. Digital Typography Pocket Primer. London: Windsor Professional Information, 2000. — P. 171
177 Самара Т. Типографика цвета. Практикум. М.: Рип Холдинг, 2010. —С. 9
178 Goldberg R. Digital Typography Pocket Primer. London: Windsor Professional Information, 2000. — P. 173
шрифты с засечками, поскольку, как указывал Картер, сетчатка глаза
цепляется за них и взор человека быстро и последовательно следует по всей
строке текста.179
В центре внимания научного сообщества находятся вопросы
предпочтительного выбора той или иной группы шрифтов, а также размера
кегля. Многочисленные эмпирические исследования в этой области
подтверждают, что пользователи предпочитают читать текст с засечками, в то
время как сериф в их понимании удобен для оформления заголовков,
подзаголовков и лидов.180 Однако некоторые исследования последних лет
выявили тенденцию к наилучшему восприятию текста, оформленного
сансерифом. К таким результатам пришли Боярски и Форлиззи 181, в рамках
изучения шрифтов Georgia
и Verdana, а также Бернард и Миллс,
установившими, что восприятие текста, оформленного серифом
незначительно выше, чем оформленного шрифтом с засечками. Последние, к
слову, выявили еще и то, что оптимальным размером шрифта основного
текста рекомендуется устанавливать значение в 12 пунктов.182 Интересно
отметить, что, несмотря на лучшие результаты шрифтов без засечек в аспекте
восприятия, пользователи все равно предпочитали сериф.
Впрочем, в широком смысле в научном сообществе принято считать, что
в вопросах восприятия текста с засечками и без них нет, нет никакой
разницы183.
Тонально-цветовой контраст графемы и фона отвечает за видимость
буквы по отношению к фону страницы. Ни для кого не является секретом, что
максимальное удобство при восприятии текстовой информации достигается
179 Картер М. Современный дизайн газет. М.: Российско-Американский Информационный Пресс-Центр,
1995. – С. 10
180 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)
181 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.
182 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/
183 Tullis T.S., Boynton J.L., Hersch H. Readability of fonts in the windows environment // In Proceedings of
CHI’95. 1995. — P. 127-128.
благодаря применению контрастности фона и текста. 184 Золотая формула в
этом случае определяется стандартом «темный шрифт светлый фон», что
является своего рода основным принципом в данном вопросе. Такой подход
связан с возможностями нашего зрения: при недостаточном контрасте фона и
текста глаза устают, поскольку читаемость и различимость графем
снижается, что приводит к необходимости вглядываться в экран. В целом,
следуя указанному правилу, большинство теоретиков и практиков дизайна
рекомендуют использовать для оформления текста темные оттенки, а для
фона подбирать более ненасыщенные цвета.
Количество цветов в композиции и правильное их использование
определяется законами сочетаемости. Цветовой круг позволяет определить
оптимальную цветовую комбинацию фона и текста, позволяющую создать
единообразие и контраст на странице.185
Монохроматические цветовые схемы состоят из различных тонов и
полутонов в пределах определенного цвета. При использовании такой схемы
необходимо руководствоваться принципом контрастности фона и текста при
получении оптимальных оттенков цвета и определении их функций.186
Основной цвет добавляется немного черного, тон состоит из базового и
серого цветов, а полутон из смешения базового и белого цветов.
Монохромное сочетание цветов не отвлекает пользователя от контента,
выглядит гармонично и умеренно, хотя при неправильном использовании
цвета зачастую выглядит скучно из-за сложностей в акцентировании.
Как указывает Джейсон Берд, чтобы максимально использовать
монохроматическую сочетаемость необходимо помнить о некоторых приемах
акцентирования контента.187 Использование яркого компонента предполагает
увеличение контрастности страницы за счет включения в светло-темную
гамму элементов черного, белого или серого цвета. Аналоговая коррекция
184 Калиновский А.И. Юзабилити - как сделать сайт удобным. М: Новое знание, 2005 — С. 128
185 Гаррет Д. Веб дизайн, ориентированный на пользователя. Элементы опыта взаимодействия. СПб.:
Симбо, 2008. — С. 156
186 Wolfersperger S.K., Carlston E. Experimenting with Art. NY: Good Year Books, 1991 — P. 44
187 Берд Д. Веб-дизайн: руководство разработчика. СПб.: Питер, 2012. — С. 93
позволяет акцентировать внимание на контенте, благодаря максимальному
повышению насыщенности одного из используемых в цветовой палитре
сайта цветов и понижение контрастности для всех других оттенков так же
позволит выделить важные элементы страницы.
2.2 Особенности юзабилити новостных порталов: опыт структурнофункционального анализа
После определения методологии анализа и необходимых критериев для
его осуществления, приступаем к структурно-функциональному анализу
медиаресурсов. В качестве эмпирического материала наши были выбраны 3
крупных сетевых СМИ, ориентированных на освещении актуальных
новостей в режиме онлайн и не имеющих непосредственной печатной
версии: «Lenta.ru», «Meduza», «РИА Новости», «RBK.ru». Выбор данных
медиаресурсов обусловлен:
1. Совпадением базовой цели функционирования, которая заключается в
оперативном освещении актуальной новостной информации о событиях в
России и мире, а также широкой областью освещаемых тем: политика,
экономика, культура, наука, спорт, музыка и т.д.
2. Схожей читательской аудиторией: согласно предоставляемым «Lenta.ru»
188
, «РИА Новости»189, «Meduza»190 и «РБК.ру»191 медиакитам, аудиторию
порталов составляют в большей степени мужчины (женская аудитория
меньше вполовину) от 18 до 44 лет, имеющие высшее образование, по
роду деятельности являющиеся специалистами и руководителями и
имеющими доход выше среднего.
3. Эффективностью присутствия рассматриваемых СМИ в веб:
188 Медиа-кит «Lenta.ru». URL: https://lenta.ru/mediakit/LAYOUT_Lenta_About_us_rus_2015.pdf (дата
обращения: 24.04.2016)
189 Медиа-кит «РИА Новости». URL: http://mediator-rus.com/images/RIA16.pdf (дата обращения: 24.04.2016)
190 Медиа-кит «Meduza». URL: https://meduza.io/static/ads/meduza-mkit-2016-2.pdf (дата обращения:
24.04.2016)
191 Медиа-кит «РБК.РУ». URL: http://mediator-rus.com/images/rbkprez.pdf (дата обращения: 24.04.2016)
Количество ежедневных посетителей. Согласно данным «TNS Web
Index»192, «Lenta.ru» ежедневно посещают около 1,1 миллионов человек;
«РИА Новости» не менее 1,2 миллионов человек; «РБК.ру» около 1.4
миллионов; «Meduza», как наиболее молодой проект не достигла
подобных показателей, но стремительно улучшает свои позиции и в
среднем количество пользователей достигает около 300 тыс. человек;
Количество ежедневных просмотров. Ежедневные просмотры «Lenta.ru»
достигают от 4 до 7 миллионов; «РИА Новости» от 2.5 до 5 миллионов;
«РБК.ру» от 4.5 до 9 миллионов; «Meduza» до 2 миллионов;
Индекс цитируемости.193 Все рассматриваемые порталы входят в 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 уровня визуальной организации
веб-страниц указанных новостных порталов. В качестве опорных факторов
анализа будут использованы указанные ранее элементы КГМ в рамках микро
и макроуровней. Показатели в таблице определяются для каждой страницы,
192 TNS Web Index. Апрель, 2016 год. URL: http://www.tns-global.ru/services/media/mediaaudience/internet/information/ (дата обращения: 24.04.2016)
193 Медиалогия. Информационно-аналитическая структура. URL:
http://www.mlg.ru/ratings/federal_media/0/0/0/ (дата обращения: 24.04.2016)
потом все данные в столбцах суммируются. Данная сумма показывает
степень эффективности визуальной организации страницы с точки зрения
современных представлений о юзабилити – чем сумма балов больше, тем она
выше. В рамках функционально-структурного анализа мы рассмотрим как
главные страницы, так и новостные страницы медиаресурсов «Lenta.ru»,
«РИА Новости», «РБК», «Медуза».
Структурно-функциональный анализ главной страницы сайта в
контексте задач юзабилити
Для начала,
мы рассмотрим, как реализовываются принципы
юзабилити на главной странице указанных медиапорталов. Переходим к
подробному рассмотрению результатов по каждому из описанных в таблице
критериев.194 Для того, чтобы рационально оценить медиаресурсы в
соответствии с указанными принципами, необходимо взглянуть, как выглядят
макеты сайтов каждого из анализируемых медиаресурсов целиком.195 Первым
критерием оценки КГМ, в рамках структурно-функционального анализа
главной страницы в контексте задач юзабилити, является соблюдение «Fпаттерна визуального восприятия». Известно, что следование данному
принципу позволяет существенно улучшить восприятие контента. Для этого
необходимо расположить наиболее важные навигационные элементы и самый
значимый контент согласно F-образной траектории просмотра страницы.
Данный параметр максимально используется порталами «Lenta.ru» и «РБК»:
в указанной зоне располагется навигационное меню, поиск по сайту, а также
блок главных новостей.196 На сайте «РБК» именно в этой зоне, а не ниже по
странице, располагается лента новостей. Во многом, реализации данного
принципа способствует то, что эти сайты находятся в левой части экрана чего
нельзя сказать о сайтах «РИА Новости» и «Meduza», использующих центр
экранного пространства.
194 Приложение 4, табл. 1
195 Приложение 1, рис. 1
196 Приложение 1, рис. 2
Зонирование страницы связано с модульной организацией и является
одним из наиболее важных параметров в рамках нашего анализа. В аспекте
восприятия контента ее наличие играет одну из первостепенных ролей
благодаря способности логической организации элементов по странице. По
данному критерию максимальный балл смогли получить порталы «Lenta.ru»,
«РИА Новости» и «Meduza». При взгляде на макет «Lenta.ru» видно, что
область контента разделена на очевидные модули, вертка материалов
осуществляется преимущественно по вертикали. 197 Активное использование
модульной сетки проявляется за счет совмещения геометрически блоков
«текст + фото», фиксации вертикальных разделителей. «РИА Новости» так
же используют возможно сти модульной организации: активное
использование сетки достигается за счет различной компоновки ярко
выраженных, фиксированных по всей длине сайта, блоков (как вертикальных,
так и горизонтальных), которые свидетельствуют о применении смешанной
верстки.198 Максимально модульная организация выражена на сайте
«Meduza»: весь контент главной странице заключен в прямоугольные модули
разной величины, которые повторяются по всей длине страницы. 199
Аутсайдером по рассматриваемому критерию стал сайт «РБК». Несмотря на
использование сетки, наблюдаются многочисленные нарушения ее
соблюдения: необоснованные «дыры» между блоками контента, а так же
грубое несоответствие вертикальных и горизонтальных разделителей и
компоновки контента относительно друг друга.200
Негативное пространство страницы является третьим в списке
критериев функционально-структурного анализа КГМ. Для того, чтобы
оценить насколько рационально оно используется и исключить все
отвлекающие факторы, мы конвертируем элементы контента на макетах всех
изданий в черно-белые объекты и преобразуем их в про стые
197 Приложение 1, рис. 3
198 Приложение 1, рис. 4
199 Приложение 1, рис. 6
200 Приложение 1, рис. 5
прямоугольники.201 Макеты страниц представлены в одинаковом масштабе, с
учетом полей страниц как при просмотре в браузере. Как мы видим,
наименьшее количество негативного пространства имеет порталы «Lenta.ru»
и «Meduza». Важно отметить, что для того, чтобы контент не смотрелся
слишком плотно, «Meduza»в некоторых случаях используют белую подложку
в блоке информации. Новостная лента «Lenta.ru»
представлена на белом
фоне для сохранения баланса пробелов на странице, тем не менее, блоки
информации располагаются близко с друг другом и параллельно друг другу в
3 колонки. Умеренное количестве негативного пространства мы видим на
странице «РИА Новости» - контент имеет постоянную структуру и пробелы
между блоками информации фиксированы. Широкие пробелы использует
сайт «РБК», однако, здесь оно связано с недостатками структурирования
контента и следования модульной организации. Как мы успели заметить, в
некоторых областях страницы наблюдаются «дыры» и не совсем
рациональное использование площади страницы. При доминировании
ахроматического белого, более наглядное фоновое пространство оправдано,
однако,
в случае с «РБК» белые области не дополняют черные, а
концентрируют внимание на себе.
Одним из наиболее эффективных средств улучшения восприятия
контента, является контрастное зонирование пространства, проявляющиеся в
применении цвета. В контексте привлечения внимания, разграничения
контента и создания акцентов выделяют 3 основные функции цветового
зонирования: акцидентальная (позволяет привлекать внимание к наиболее
значимому контенту), функция аффорданса (указание на интерактивность),
селективная (функция разделения разных групп контента). По данному
критерию максимальный балл получили порталы «Lenta.ru» и «РИА
Новости». Контраст главной страницы портала «Lenta.ru» реализует все три
функции: аффордативную, акцидентальную и селективную.202 Как средство
201 Приложение 1, рис. 7
202 Приложение 1, рис. 8
акциденции, он используется на главном экране сайте и при помощи желтого
цвета выделяет блок главных новостей и материала дня. Так же, данная
функция реализуется благодаря наличию фотографий у наиболее значимых
материалов. Аффордативная функция контраста на ресурсе «Лента.ру»
позволяет выделять элементы, которые обеспечивают взаимодействие с
сайтом: навигацию и футер («подвал» страницы). Селективный контраст
менее выражен на сайте, поскольку для этого используется серый цвет, но,
тем не менее, такая функция на странице тоже присутствует. Контрастное
оформление блоков дополняется использованием фотографий на главной
странице для наиболее значимых новостей.
На главной странице
«РИА Новости» так же реализуются все три
функции, что свидетельствует о высоком уровне контрастности. 203
Аффорданс обеспечивается выделением «подвала» страницы, где находятся
все рубрики и ссылки на иные страницы сайта, а также ресурсы «РИА
Новости». Селективный контраст позволяет выделять блок мультимедиа.
Важно отметить, что
для контраста используется один и тот же оттенок
черного цвета, в отличие от «Lenta.ru», где важные блоки выделяются
отличным от общей цветовой палитры оттенком. Навигация вверху страницы,
отвечающая за перемещение по сайту «РИА Новости» никак цветом не
выделена. Фотографии на сайте «РИА Новости» выполняют акцидентальную
функцию, привлекая внимание к наиболее значимым материалам.
Сайт «РБК» характеризует большое количество аффорданса на
странице.204 Он проявляется как выделением подвала страницы и навигации
по сайту
вверху страницы, так и наличием единичных цветовых пятен
(активные ссылки на контент), призывающих к их нажатию. Не слишком
широко, но тем не менее применяется зонирование при разделении контента
на определенные группы, обусловленное форматом и содержательной
моделью издания (селективная функция).
203 Приложение 1, рис. 9
204 Приложение 1, рис. 10
Для достижения необходимо
контраста на странице используются и фотографии, однако, на сайте «РБК»
они не сильно выразительны ввиду своего небольшого размера (160 на 100
px). Напротив, благодаря выраженной блочной верстке, основным средством
привлечения внимания к контенту на сайте «Meduza»205 становится
фотография. Фотографии присутствуют на главной странице каждого из
рассматриваемых сайтов, но на «Meduza» они привлекают больше внимания
ввиду своего размера (не менее 370 на 245 px.) и особенностей ярко
выраженной блочной верстки. Как и в предыдущих рассматриваемых
медиаресурсах, здесь присутствует аффорданс, но в меньшей степени, чем на
сайте того же «РБК». Селективность обеспечивается выделением темного и
серого цвета для разных групп контента.
Для того, чтобы оценить медиаресурсы по следующему критерию,
необходимо четко видеть различия в представлении информации при
просмотре в браузере. Иными словами, необходимо показать, как все
рассматриваемые ресурсы смотрятся с экрана компьютера при одинаковом
разрешении и масштабе страницы.206 Только теперь мы можем увидеть
различия в размере полей страниц при просмотре. Как видим, минимальные
поля используют в своем дизайне сайты «РБК» и «Meduza»: пространство
экрана на этих сайтах максимально задействовано под область контента. 207
«Lenta.ru» использует довольно широкие поля, тем не менее, не
превышающие площадь, отведенную под контент. И только портал «РИА
Новости» имеет широкие поля, превышающие площадь контента.
Следующим критерием оценки становится интрелиньяж или значение
междустрочного интервала. Минимальным требованием в данном случае
является соблюдение разницы не менее 2 и не более 6 px между пробелом и
заданным кеглем. Максимальный бал обеспечивается при полном отсутствии
ошибок интрелиньяжа по всей площади страницы. Было интересно
обнаружить, что лидером по данному критерию стал сайт «РБК»: несмотря
205 Приложение 1, рис. 11
206 Приложение 1, рис. 12, 13, 14, 15
207 Приложение 1, рис. 16
на довольно широкий спектр различных параметров интерлиньяжа на сайте
«РБК», все формальные правила в этом аспекте сохранены. 208 Ошибка
использования равнозначного кегля и интерлиньяжа не встречается, однако,
существует иная проблема, косвенно влияющая на общую организацию
страницы: встречаются слишком разные показатели кегля и интерлиньяжа (20
и 22, 14 и 19, 18 и 21, 14 и 18, 28 и 33, 12 и 15, 14 и 17), хотя среднее число
между этими показателями составляет около 4-5 px. На наш взгляд,
необходимо уравновесить эти параметры по тому принципу, как это работает
у сайта «РИА Новости», где практически по всей площади страницы
значения интерлиньяжа фиксировано. «РИА Новости» руководствуются
классическим правилом, гласящим, что число заданного интерлиньяжа
должно быть больше заданного кегля на 2. 209 В организации типографики
практически не было замечено ошибок, кроме одинаковых параметров в
заголовках второстепенных новостей в новостной ленте (Кегль 12,
интерлиньяж 12). В целом, типографику на сайте «РИА Новости» можно
назвать гармоничной, поскольку отступ в 2 px сохраняется по всей странице,
чем не может похвастаться «Lenta.ru» или «РБК».
На сайте все портала «Lenta.ru» формальные показатели оптимального
интерлиньяжа соблюдены. Однако, на главной странице встречаются и
ошибки его использования.210 Так, неправильно заданы параметры пробела в
заголовке главной новости часа, а также в заголовках ленты новостей.
Среднее показание интерлиньяжа составляет 6 px. Что касается портала
«Meduza», то главная страница сайта использует адаптивный дизайн. Это
подразумевает то, что код станицы сам задает параметры изображений, кегля
шрифта и интерлиньяжа. Заданный на сайте «Meduza» по умолчанию отступ
соответствует разнице в 1.5-2 пикселя, из-за чего на странице возникают
определенные проблемы, проявляющиеся в «наползании» литер друг на
208 Приложение 1, рис. 19
209 Приложение 1, рис. 18
210 Приложение 1, рис. 17
друга.211 Данная ошибка распространяется на блоки, где есть сочетание
шрифтов с засечками и без них. Обращая же внимание на блоки,
оформленные одной гарнитурой, мы замечаем, что межстрочный интервал в
целом выдержан.
Следующим критериев в рамках структурно-функционального анализа
КГМ главной страницы является контраст литерного контура. Как в
заголовках и тексте на первом экране сайта, так и в ленте новостей на сайте
«Lenta.ru» используется разные классы шрифтов – это и сериф и сансериф,
составляющее классическое сочетание «гротеск +антиква». 212 Высокая
насыщенность заголовков обеспечивается обязательным использованием
жирного начертания как на первом экране (главные новости дня), так и в
ленте новостей. Что касается портала «РИА Новости» 213, то здесь, как в
заголовках и тексте на первом экране сайта, так и в ленте новостей
используется сансериф «Arial». Как мы выяснили в теоретической главе,
большинство исследователей и практиков дизайна придерживается мнения о
том, что наилучшим классом шрифтов для оформления заголовков (или
небольших фрагментов текста) являются гротески. Высокая насыщенность
заголовков обеспечивается обязательным использованием
жирного
начертания как на первом экране (главные новости дня), так и в ленте
новостей. Также, высокий контраст литерного контура в блоке главных
новостей дня на первом экране достигается использованием темной
подложки и белого цвета текста. Шрифтовое расписание сайта «РБК» 214
включает только сансериф «Helvetica». В отличие от сайта «РИА Новости»,
где так же по всей странице используются исключительно гротеск, на сайте
«РБК» жирное начертание в заголовках используется не повсеместно, а
только к самой главной новости каждого раздела. Во всех остальных случаях,
текст по странице имеет нормлаьное начертание. Это позволяет говорить о
211 Приложение 1, рис. 20
212 Приложение 1, рис. 21
213 Приложение 1, рис. 22
214 Приложение 1, рис. 23
недостаточности контраста литерного контура, которая усиляется
использованием небольшого кегля текста по странице (14 px). К примеру, на
странице «Lenta.ru» помимо использования сансерифа, который сам по себе
более контрастен, шрифт имеет больший кегль (16 px). «Meduza» 215
использует кнопку переключения вида сайта – таким образом, лента новостей
в привычном понимании включается в верхнем правом краю. На главной
странице сайта заголовки оформлены сансерифом жирного начертания,
благодаря чему достигается высокий контраст. В ленте новостей
используется 2 гарнитуры – сансериф Circe (имеет жирное начертание) и
сериф PfRegal (обычное начертание, достаточно контрастное ввиду класса
шрифта).
Более подробно, контраст текста и фона на анализируемых ресурсах
рассматривается в последнем критерии – тонально-цветовом контрасте
графемы и фона. Подробный визуальный разбор этого важного пункта
рассматривается в приложении.216 Высокая контрастность текста и фона на
первом экране главной страницы «Lenta.ru» достигается за счет
использования контрастного шрифа с засечками Georgia, сочетания темного
цвета (почти чистый черный) литер и белого фона. «РИА Новости»
используют малоконтрастный шрифт без засечек, однако высокая
контрастность на странице достигается за счет использования темной
подложки и белого текста, имеющего в некоторых слушаях полужирное
начертание. Первый экран с главными новостями дня на сайте «РБК»
отмечается контрастностью среднего уровня. Это достигается за счет черного
цвета литер и белого фона, при использовании малоконтрастного шрифта без
засечек. Важно отметить, что только для одного из множества заголовков в
пространстве экрана
на сайте «РБК»используется жирное начертание.
Главная страница «Meduza» имеет высокую контрастность теста и фона, за
счет использования жирного начертания для всех заголовков по странице,
215 Приложение 1, рис. 24
216 Приложение 1, рис. 25
большого кегля текста (по сравнению с остальными сайтами, размер текста и
заголовком на сайте «Meduza» в среднем больше на 2-4 px). Отдельно стоит
отметить, что «Meduza» использует в качества фона для заголовков
некоторых новостей фотографии, подбираемые в соответствии с законом
контраста и используя жирное начертание.
Поскольку лента новостей является одним из наиболее важных
компонентов на всех рассматриваемых медиаресурсах, подробно
проанализируем соблюдение в ней контраст текста и фона отдельно. 217 Как
мы видим, лента новостей «Lenta.ru» характеризируется контрастностью
среднего уровня: при использовании высококонтрастного серифа Georgia,
текст набирается на белом фоне серым цветом. В результате, при выборе
оптимальной гарнитуры, цвет текста слишком светлый и кажется
недостаточно контрастным, особенно при включении монитора на
максимальную яркость. При проектировании медиаресурса, в соответствии с
принципами юзабилити, необходимо помнить, что главный параметр
удобочитаемости - контрастность текста и фона. В ленте новостей на сайте
«Lenta.ru» данный принцип реализован частично, поэтому рекомендуется
выбрать более темный цвет текста. При этом, в ленте новостей отмечается
применения разного размера шрифта (14 px, 16 px). Лента новостей «РИА
Новости» так же отмечается средней контрастностью текста и фона. Это
связано с использованием гротеска Arial и применением серого цвета для
текста и заголовков. Хотя оттенок серого на сайте «РИА Новости» темнее,
чем оттенок в ленте новостей «Lenta.ru», шрифт Arial, как гротеск, менее
контрастен чем Georgia. Лента новостей сайта «РБК» отмечается низкой
контрастностью текста и фона, даже несмотря на применение черного цвета
для текста и белого фона. Это связано с выбором низкоконтрастного
начертания шрифта Helvetica и особенно рисунка литер. Графемы вытянуты
по горизонтали, имеют плотный межбуквенный интервал, а также
отмечаются неярким контуром, что особенно заметно при сравнении с Arial
217 Приложение 1, рис. 26
на сайте «РИА Новости». Лента новостей медиапортала «Meduza»
характеризуется высокой контрастностью: при белом фоне используется
черный цвет текста (для длинных заголовков с серифом). Заголовки
оформленные гротеском имеют жирное начертание, больший кегль
оформлены темно-серым оттенком, однако с учетом насыщенности смотря
даже контастнее, чем заголовки, оформленные серифом.
По итогам проведенного структурно-функционального анализа главных
страниц новостных порталов в контексте юзабилити мы выявили, что
максимальный индекс эргономичности достигается у сайта «РИА Новости».
На втором месте по данному показателю находится «Meduza», немного
отставая по общему количеству набранных баллов, затем . Аутсайдером по
реализации юзабилити на главной странице стал портал «РБК». Полученные
в ходе анализа баллы представлены в таблице 4 приложения 4.218 Визуальное
представление реализации каждого из рассмотренных критериев находится в
Приложении 1.
Структурно-функциональный анализ новостных страниц в контексте
задач юзабилити
Рассмотрев, как реализовываются принципы юзабилити на главных
страницах сетевых ресурсов «Lenta.ru», «РИА Новости», «РБК» и «Meduza»,
перейдем к структурно-функциональному анализу новостных страниц
данных медиапорталов. Формальные критерии для оценки индекса
эргономичности остаются неизменными, но добавляем пункт, отвечающий за
эффективность скорости чтения и восприятия текстовой информации. 219
Сначала нам необходимо проследить, соблюдаются ли модульная
организации на новостной странице. По данному критерию результаты
совпадают с баллами, полученными данными изданиями в ходе анализа
218 Приложение 4, табл. 4
219 Приложение 4, табл. 2
главной страницы. Активное использование модулей по всей площади
новостной страницы «Lenta.ru» выражено даже более явно, чем на главной. 220
Так же максимальный балл по данному показателю вновь получает
информационное агенство «РИА Новости»221. Что касается портала «РБК», то
нарушения в использовании модульной сетки распространяются и на
новостной странице данного медиаресурса.222 Среди видимых недостатков
снова встречаются необоснованные белые «дыры» в пространстве страницы,
н е с о от в е т с т в и е в е рт и ка л ь н ы х р а зд е л и т е л е й . Н е п о н я т н о , ч е м
руководствовался дизайнер сайта, поскольку если мы взглянем на
выравнивание контента по вертикали, то увидим полнейшую путаницу: все
элементы ниже новостной заметки абсолютно хаотично размещены
относительно друг друга. Отдельно стоит отметить, что отчасти нарушения
сетки связаны с неправильным размещением рекламных блоков, не имеющих
четко фиксированной внутренней организации. Новостная страница
«Meduza» отмечается отсутствием каких-либо элементов, кроме заголовка и
текста публикации, навигационного меню и футера, а также блока с
рекомендуемыми новостями.223 Здесь, как и на главной странице сайта
прослеживается очевидное следование модульной организации.
Совершенно иные, по сравнению с главной страницей, результаты
ожидают нас при рассмотрении «воздуха» на новостных страницах
рассматриваемых порталов. Как и в предыдущем анализе, для оценки
рационального использования негативного пространства, мы конвертируем
элементы контента на макетах всех изданий в черно-белые объекты и
преобразуем их в черные прямоугольники.224 Макеты страниц, так же
представлены в одинаковом масштабе, с учетом полей страниц как при
просмотре в браузере. Если главная страницы «Lenta.ru» отмечалась
небольшим количеством негативного пространства, то новостная страница
220 Приложение 2, рис. 1
221 Приложение 2, рис. 2
222 Приложение 2, рис. 3
223 Приложение 2, рис. 4
224 Приложение 2, рис. 5
выглядит куда более разряженной и свободной.
Окружающая текст зона
имеет достаточно широкие пробельные элементы (не менее 4 символов).
Пробелы между текстом и рекламными блоками больше (не менее 6
символов), что позволяет акцентировать внимание непосредственно на тексте
публикации, а не на ее окружении. В целом, как мы видим на иллюстрации,
белые области на странице «Lenta.ru» дополняют черные, что
свидетельствует о рациональном распределении негативного пространства.
Страница «РИА Новости» использует больше негативного
пространства, чем «Lenta.ru», однако важной особенностью здесь является
строе совпадение пробелов в каждой отдельной зоне по странице. Это значит,
что отдельные блоки, отвечающие за определенную группу контента,
оформлены в полном единообразии. Белые области дополняют черные, а
также акцентируют внимания на каждой отдельном тематическом блоке и
тексте публикации.
Новостная страницы «РБК» тоже использует большое количество
белого пространства. В отличии от пробелов на главной странице, здесь
пробелы используются более рационально и не перетягивают внимание с
ко н т е н т а н а с е бя , ка к н а гл а в н о й с т р а н и ц е . Те м н е м е н е е ,
концентрированность объектов вокруг основного текста публикации не
позволяет оценить использование воздуха на странице «РБК» как
рациональное. Во-первых, это связано с различной величиной пробелов,
которая при таком обилии
отдельных элементов небольшого размера,
кажется недостаточно оптимальной (минимальный пробел сбоку менее 3
символов). Также, пробел вокруг текста не фиксированный, как не
зафиксирован он и для соседствующих с главным контентом на странице
элементов. «Meduza» использует много воздуха, если просматривать
страницу с экрана компьютера. В зависимости от уменьшения окна браузера,
количество негативного пространства будет сокращаться, ввиду адаптивной
верстки сайта. Если на странице «РБК» слишком много элементов, то на
новости от «Meduza» их слишком мало.
Несмотря на то, что главным контентом на новостной странице
является, непосредственно, сам текст публикации, после его прочтения
читатель должен либо закрыть страницу, что рано или поздно негативно
скажется как на монетизации ресурса, так и на эффективности его
присутствия в веб, либо, обойдя взглядом страницу, перейдет к другому
заинтересовавшему его контенту. В этой связи, функции контраста на
странице продолжают играть значимую роль как в процессе управления
вниманием пользователя, так и в аспекте формирования положительного
опыта пользователя. По данному критерию, портал «Lenta.ru» продолжает
традицию главной страницы сайта и характеризуется высокой
контрастностью, благодаря реализации акцидентальной, аффордативной,
селективной функций контраста.225 Акцидентная контрастность используется
в блоке главных новостей дня слева от текста новости: желтый цвет
привлекает внимание пользователей к важной и актуальной информации.
Селективный контраст позволяет разграничить одни блоки с другими. Как мы
видим, на новостной странице эта функция позволяет отделить блок
дополнительной навигации по странице от текста публикации. Аффорданс,
как и на главной странице, выражается в фиксированном меню рубрикации
сайта, а также присутствуют активные кнопки интеграции с социальными
сетями (особенно выделена кнопка «Поделиться»). Как мы видим на общем
макете226, она является одним из наиболее контрастных элементов на
странице, буквально крича о том, чтобы ее использовали. Отдельно стоит
отметить, что для каждой ново сти использует ся фотография,
иллюстрирующая содержание материала. Новостная страница «РИА
Новости» характеризуется относительно низкой контрастность, по причине
использования только селективного контраста и наличия аффорданса на
странице.227 С помощью цветной подложки разграничивается область
интеграции с социальными сетями и область текста. Аффорданс на странице,
225 Приложение 2, рис. 6
226 Приложение 2, рис. 6
227 Приложение 2, рис. 7
как и везде, выражается в виде футера, навигации, а также активных
гиперссылок и кнопок соцсетей.
Новостная страница «РБК» характеризуется реализацией контрастом
как акцидентального, так селективного и аффордативной функций.228 К
сожалению, по большей части контраст на странице привлекает внимание к
рекламным блокам - для этого используется желтая «кричащая» подложка в
верхней и нижней части страницы. Внутри текста публикации присутствует
селективный контраст, используемый в целях цветового зонирования,
отделяющего одни блоки контента от других. На новостной странице «РБК» ,
селективный контраст проявляется в виде цветного блока фотогалереи,
который разграничивает зоны страницы. Одновременно с этим, фотографии
привлекают внимание. Новостная страница «РБК», так же как и «РИА
Новости», характеризуется относительно низкой контрастностью:
используется только подложка для оформления и разграничения блока
дополнительного контента на странице, а также выделен футер и навигация
страницы.229 Важно отметить, что никакого иллюстративного контента
новостная страница «Медузы» не содержит, зато с левой стороны от
публикации располагается рекламный блок.
В контексте восприятия текстовой информации на новостной странице,
критерии оптимального интерлиньяжа и контраста литерного контура входят
в число наиболее значимых. На странице «Lenta.ru» 230 межстрочный интервал
выдержан: в тексте публикации пробел между строками составляет 20 px, при
размере кегля в 16 px, что является нормой. Тем не менее, ошибка
интерлиньяжа встречается в оформлении заголовка: там межстрочный пробел
равен значению интерлиньяжа, что недопустимо в аспекте удобочитаемости:
при такой минимальной разнице заголовок кажется слишком плотным. Один
и тот же шрифт Georgia используется как для заголовка страницы, так и для
текста публикации, что в принципе допустимо, поскольку засечки хорошо
228 Приложение 2, рис. 8
229 Приложение 2, рис. 9
230 Приложение 2, рис. 10
воспринимаются человеческим глазом. Однако, наличие гротеска в заголовке,
могло бы внести дополнительный контраст в оформление страницы. В
остальном формальные требования соблюдены - жирное начертание в
заголовке делает его более заметным, а нормальное начертание текста при
использовании темного цвета позволяет быстро прочитать новость. Лид в
структуре новости отсутствует.
Максимальный показатель по критериям интерлиньяжа и контраста
литерного контура показывает «РИА Новости». 231 Во-первых, здесь
отсутствуют ошибки интерлиньяжа: в заголовке интерлиньяж составляет 40
px. при заданном размере кегля в 35 px, а в тексте это значение составляет 22
px. при размере текста в 16 px. Межстрочный пробел внутри текста
публикации немного больше, чем общепринятая норма и составляет 6 px. Вовторых, соблюдены все формальные правила контрастного оформления: текст
использует нормальное начертание, а заголовок насыщен за счет применения
гротеска жирного начертания. Важно отметить, что как и в предыдущем
примере, на странице «РИА» отсутствует лид.
Что касается интерлиньяжа и контраста литерного контура на странице
«РБК»232, то здесь размер интерлиньяжа в заголовке составляет 37 px., что на
5 пикселей больше, чем размер кегля. В тексте разница пробела с текстом
составляет 7 px. Важно отметить, что при использовании гротеска с таким
рисунком (малоконтрастен, вытянут по вертикали), такой большой интервал
кажется не совсем оправданным: текст выделяется на белом фоне, но
приходится напрягать глаза, особенно при длинном чтении. Однако,
новостная страница «РБК» единственная из рассматриваемых порталов,
имеющая ЛИД (показатель интерлиньяжа в нем оптимален и больше размера
текста на 6 px).
Высокие показатели удобочитаемости текста показывает новостная
страница медиаресурса «Meduza»233: разница между кеглем составляет 2 px.,
231 Приложение 2, рис. 11
232 Приложение 2, рис. 12
233 Приложение 2, рис. 13
при крупном заголовке в 37 px.
Что касается основного текста, то здесь
разница так же максимально функциональна: пробел составляет 22px. при
размере кегля в 18px. Это самый большой кегль для текста публикации, из
всех рассматриваемых сетевых СМИ. Единственным недостатком является
недостаточная насыщенность заголовка – используется нормальное, а не
жирное или полужирное начертание.
Длина наборной строки и абзацный отступ, отвечают за эффективность
скорости чтения и восприятия текстовой информации. По данному критерию
максимальный результат показывают медиаресурсы «Lenta.ru», «РИА
Новости» и «Meduza». Длина наборной строки на сайте «Lenta.ru» 234 в
среднем составляет 62-64 символа в строке. Абзацный отступ внутри текста
соответствует оптимальному размеру и насчитывает 3 символа.
Длина
наборной строки на сайте «РИА Новости»235 так же оптимальна и в среднем
составляет 62-65 символов в строке. Абзацный отступ внутри текста, так же
как и у «Lenta.ru» ,насчитывает 3 символа по вертикали.
новостной страницы «РБК»236, то здесь
Что касается
длина наборной строки не
соответствует оптимальной и в среднем составляет менее 60 символов в
строке. Абзацный отступ внутри текста непостоянен и в рамках одной
публикации представлен то 3, то 4 символами между строками. С учетом
выбора гротеска для объемных текстов, можно сделать вывод о том, что
удобочитаемость на данном портале значительно ниже, чем у других
рассматриваемых ресурсах. Длина строки на сайте «Meduza»237 соответсвует
стандартам – 62 символов в строке. Абзацный отступ внутри текста
постоянен и составляет 3 символа.
Наконец, подробно и близко рассмотрим последний критерий нашего
анализа
– тонально-цветовой контраст графемы и фона. 238 Максимальный
контраст между текстом и фоном достигается на новостной странице
234 Приложение 2, рис. 14
235 Приложение 2, рис. 15
236 Приложение 2, рис. 16
237 Приложение 2, рис. 17
238 Приложение 2, рис. 18
«Meduza». Причиной этому служит, во-первых, использование контрастного
шрифта с засечками PFRegal, во-вторых, применение черного цвета для
текста и белого цвета для фона. Новостная страница
«Lenta.ru» вновь
повторяет ошибку главной страницы сайта: при оптимально подобранном
шрифте с засечками Georgia, используется недостаточно контрастный к
белому фону оттенок серого.
При выборе не самого удачного варианта
начертания шрифта Helvetica,
в контексте длинного чтения, умеренная
контрастность тонально-цветового контраста достигается и
новостной
страницей «РБК»: текст, оформленный черным цветом на белом фоне читать
куда удобнее, чем темно-серые заметки, оформленные гротеском Arial на
сайте «РИА Новости».
По итогам анализа, наиболее эргономичной признана новостная
страница портала «Lenta.ru», за ней по количеству набранных баллов следует
«РИА Новости» и на последнем месте «РБК». Таким образом, результаты
функционально-структурного анализа новостных страниц отличны от
аналогичных результатов юзабилити главных страниц.
Напомним, что по
степени эргономичности, главные страницы рассматриваемых медиаресурсов
распределились в следующем порядке: «РИА Новости», «Meduza»,
«Lenta.ru», «РБК». Полученные в ходе анализа баллы представлены в таблице
5 приложения 4239. Визуальное представление реализации каждого из
рассмотренных критериев находится в Приложении 2.
Для получение общего индекса эргономичности по итогам
проведенного структурно-функционального анализа как для главных, так и
новостных страниц рассматриваемых медиаресурсов, совместим полученные
данные. Полученный результат показывает, что максимальный уровень
эргономичности имеет портал «Lenta.ru», в котором принципы юзабилити
были реализованы в большей степени именно на новостных страницах. На
втором месте находится «РИА Новости», незначительно отстающий по
количеству баллов от «Lenta.ru». Третье место по итогам структурного
239 Приложение 4, табл. 5
анализа закрепилось за медиаресурсом «Meduza», а аутсайдером стал сайт
«РБК».
Для получения полноценного результата о степени эффективности
визуальной организации рассматриваемых СМИ, добавим к полученным в
ходе анализа КГМ данным, результаты тестирования ассессоров,
оценивавших визуальную организацию рассматриваемых порталов по
критериям, основанным на общих принципах юзабилити Якоба Нильсена, а
также принципах, описанных в Международном стандарте юзабилити ISO
9241-210:2010 и в национальном стандарта ГОСТ Р ИСО 9241-210—2012.
Группа ассессоров состояла из 11 человек (5 мужчин, 6 женщин),
возраст которых колеблется в пределах 23-38 лет, имеющих высшее
образование, по роду деятельности являющиеся специалистами и имеющими
средний доход. Аудитория подобрана таким образом, чтобы соответствовать
целевой аудитории рассматриваемых СМИ. Оценки участников
суммировались, после чего подсчитывался общий балл. Полученные данные
и визуализация результатов тестирования ассесоров можно найти в
приложении240 данной исследовательской работы.
За соответствие каждому критерии участники тестирования
присуждали баллы. В общем виде ранжирование баллов осуществлялось по
следующей схеме: 3 балла причислялось за полное соответствие данному
критерию; 1 балл причислялся, если указанный компонент юзабилити был
реализован не в полной мере; 0 баллов причислялось в том случае, если
заданный критерий не выполнялся. Приведем список критериев и
проанализируем полученные результаты:
1. Обучаемость: насколько быстро пользователь сумел научиться
взаимодействовать с сайтом. Ассессоры причисляли 3 балла в случае, если
процесс обучения проходил быстро, медиаресурс был удобен с точки зрения
просмотра и поиска информации, а также общей обучаемости. 1 балл
участники причисляли, если в процессе обучения возникали сложности и
240 Приложение 4, табл. 3, 4;
требовалось несколько больше времени на обучение. 0 баллов причислялось,
если организация медиаресурса имела серьезные нарекания со стороны
участников, а обучение было затруднено. Беспрецедентным лидером по
реализации первого критерия стала «Lenta.ru», набравшая по этому
показателю максимальное количество баллов. Ассессоры отмечали простоту
работы с ресурсом и понятную организацию главной страницы сайта, где с
легкостью можно распознать наиболее и наименее актуальную информацию.
Чуть менее высокие результаты показал сайт «РИА Новости», но в целом
пользователи так же отмечали простую и функционально организованную
страницу главную страницу сайта. Важно отметить, что в этом году «РИА
Новости» сделали редизайн и часть участников отметили схожесть
визуальной организации материалов и оформления новостной ленты этих
двух порталов. В целом, никаких серьезных проблем при изучении
взаимодействия с данными медиаресурсами выявлено не было. Гораздо хуже
оценили участники знакомство с ресурсом «Meduza»: он получил 0 баллов
сразу от 4 участников тестирования. Основная трудность, возникающая при
первом взаимодействии, была связана с организацией материалов на главной
странице. Участники не сразу замечали, что на сайте предусмотрено 2
режима просмотра: лента новостей в режиме реального времени и
ранжированная, в соответствии с инфоповодом, страница. Возможно, это
связано с тем, что кнопка переключения находится в верхнем правом углу, в
одной
из наименее просматриваемых зон экранного пространства.
Участники, низко оценившие «Медузу» по этому критерию, также отмечали,
что крупные блоки контента в ленте новостей препятствуют долгому
нахождению на сайте, из-за необходимости долгой прокрутки страницы вниз.
Хуже всего участники оценили сайт «РБК», отмечая проблемы при просмотре
страницы вниз: новостная лента как бы разваливалась.
2. Эффективность подразумевала оценку функциональной части
дизайна и успешность выполнения задач. 3 балла причислялось в случае,
если пользователь легко ориентировался на сайте, осознавал свое
местоположение в его структуре и мог быстро отыскать какой-либо заданный
контент. 1 балл соответствовал ситуации, когда пользователь мог
ориентироваться на сайте, но возникали сложности при поиске искомого
контента. 0 баллов присуждалось, если все указанные действия вызывали
сложности из-за организации ресурса. Как и в случае с обучаемостью,
высокие баллы по критерию эффективности получили «Lenta.ru» и «РИА
Новости». Это можно объяснить тем, что успешность выполнения задач во
многом зависит от степени удобства работы с ресурсом. При взаимодействии
с рассматриваемыми СМИ, участники тестирования отмечали удобное
расположение навигации по сайту и понятное распределение контента по
рубрикам. Интереснее рассмотреть указанные недостатки визуальной
организации. Наименьшее количество баллов вновь получил медиапортал
«РБК». Помимо уже указанной проблемы с «плавающими» блоками
рубрикации по сайту, участники указали необходимость применения единого
навигационного блока по сайту, по типу используемого в «РИА Новости»,
где все разделы сайта представлены в виде двухуровневой навигации в
верхней части страницы, а не в виде блоков информации в середине
страницы.
3.Запоминаемость: простота, скорость и успешность взаимодействия с
медиаресурсом после перерыва. 3 бала присуждалось в случае, если после
обучения ассессор ощущал легкость во взаимодействии с сайтом по
прошествии небольшого временного промежутка (в рамках данного
исследования взят трехдневный перерыв) и изъявил желание обратится к
данному ресурсу в снова. 1 бал причислялся, если у пользователя возникали
небольшие затруднения во взаимодействии с сайтом, но на вопрос о
возвращению к данному медиаресурсу, как источнику новостной
информации, он отвечал утвердительно. 0 баллов присуждалось, если сайт
по-прежнему был неудобен в использовании и отсутствовало желание
обратится к данному СМИ снова. Возобновление работы с медиаресурсами
после трехдневного перерыва повлияло только на оценку портала «РИА
Новости» в сторону незначительного ухудшения, успешность взаимодействия
с остальными порталами качественно не изменилась. Большинство
участников сошлось во мнении, что приятнее всего было вернуться к
использованию «Lenta.ru» и «РИА Новости». Желающих в дальнейшем
использовать «РБК», в качестве источника информации оказалось
значительно меньше (почти половина опрошенных выставила сайту
минимальный бал по этому критерию). Такая оценка может объясняться
сформированным негативным пользовательским опытом из-за проблем на
стадии обучения и решения задач.
4. Ошибки: количество системных или иных ошибок, возникающих при
взаимодействии с ресурсом. 3 бала присуждалось, если при просмотре сайта
в разных браузерах пользователи не выявили каких-либо ошибок, влияющих
на работу ресурса и восприятие информации. 1 балл присуждался, если были
выявлены 1-2 проблемы, не носящих системный характер. 0 присуждалось в
случае существования ошибки, влияющей на взаимодействие с
медиаресурсом. Большое количество ошибок может привести к падению
траффика сайта и снижению эффективности его функционирования в вебсреде. Никаких проблем, носящих системный характер во время проведения
тестирования асессорами выявлено не было, тем не менее, были обнаружены
некоторые незначительные сбои. В том числе, при работе на сайте «РБК»
страница находилась в постоянной подгрузке. При попытках обновления
страницы сайта данная ошибка не устранилась. Небольшие системные сбои
обозначились и на сайте «РИА Новости». Так, при тестировании в разных
браузерах, портал некорректно отображался в браузере «Internet Explorer».
Проблема локализовалась на первом «экране» сайта, где представлены
главные новости дня: заголовок и кэпшн новости, а также дата публикации
смещались в правый блок, из-за чего полностью прочитать их не
представлялось возможным.
5. Удовлетворенность: оценка эстетических качеств дизайна и степень
удовольствия работы с ним. 3 бала причислялось в случае эстетической
удовлетворенно сть пользователя оформлением сайт а и общим
положительным впечатлением от работы, сочетание красоты и
функциональности дизайна. 1 бал начислялся, если общее впечатление о
ресурсе было положительным, но пользователь не был полностью
удовлетворен сочетанием эстетических и функциональных качеств. 0 баллов
присуждалось, в случае, если у пользователя сложилось отрицательное
впечатление о взаимодействии с ресурсом и он низко оценил эстетические
качества дизайна. Данный критерий характеризуется наибольшей степени
субъективности. Второй раз за время проведения исследования портал
«Lenta.ru» получил максимально возможную оценку. Ассессоры единогласно
признали оформление этого медиапортала наиболее эстетически
привлекательным. Высокий результат показал и «РИА Новости»: как
отмечалось ранее, пользователи успели обратить внимание на визуальную
схожесть в оформлении этих медиаресурсов. В число лидеров не сумела
пробиться «Meduza» несмотря на использование самого минимального, по
отношению к «РИА Новости» и «Lenta.ru» количества элементов на странице
и ярко выраженной блочной верстки. Высокий балл по искомому критерию
получил даже сайт «РБК»: участники тестирования отмечали необычное, по
отношению к другим сайтам, цветовое сочетание на странице.
6. Скорость работы ресурса. 3 балла причислялось, если ресурс
загружался почти моментально. 1 балл присуждался, в случае общей быстрой
загрузки, но наличия некоторых проблем при подгрузке контента. 0 баллов
соответствовали относительно медленной загрузке сайта или различного
контента медиаресурса. По данному критерию все тестируемые ресурсы
получили высокий балл. Интересно отметить, что именно в этом пункте сайт
«Meduza» разделил лидерство с «Lenta.ru»: главная страница сайта
загружалась почти мгновенно, без подвисаний, даже при длительной
«ленивой подгрузке». Необходимо отметить, что чаще всего проблема
задержки ответа сервера возникает не по вине медиаресурса, а ввиду
медленного соединения у тестирующего сайт человека.
Анализ скорости
загрузки каждого из сайтов с помощью портала «PrCY» подтвердил
ощущения пользователей: «Meduza» загружается быстрее всех (0.33 сек) и
лучше оптимизирована (оптимизированы изображения, включено сжатие и
т.д) , а общий результат скорости составил 81%. На сайте «РБК» отключено
сжатие, а на сайте «РИА Новости», помимо этого, не оптимизированы
изображения. Все это приводит к более низкой загрузке страницы, однако
существенного замедления ответа сервера замечено не было.
По итогам тестирования асессоров, наиболее эргономичным признан
портал «Lenta.ru», набравший максимальное количество баллов, на втором
месте расположился сайт «РИА Новости». С большим отрывом от лидеров,
третье место занимает «Meduza», неожиданно набравшая в два раза меньше
баллов, чем «РИА Новости».
расположился
На последнем месте, как и ожидалось,
портал «РБК», не сумевший набрать и 100 былов в ходе
тестирования. Полученные в ходе анализа баллы представлены в
Приложения 4241 данной работы. Таким образом, мы можем говорить о
совпадении результатов тестирования асессоров и общих результатов
функционально-структурного анализа КГМ рассматриваемых ресурсов.
2.2 Минимализм как взаимодействие эстетического и функционального
в дизайне новостных порталов
Рассмотрев особенности природы и принципы минимализма в
теоретической главе данного исследования, мы пришли к выводу о том, что в
области проектирования визуальной организации сетевых ресурсов
минимализм используется как стратегия, на основе трансформации общих
эстетических принципов данного феномена в функционально-прикладные.
Эти принципы оказывают существенное влияние формирование, содержание
и информационно-архитектурные решения в области дизайн-проектирования.
Ряд экспертов рассматривает минимализм в качестве важного аспекта,
позволяющего решать как задачи, связанные с удовлетворением
241 Приложение 4, табл. 6, 7
пользователей и формированием положительного пользовательского опыта,
так и вопросы создания наилучшего визуального оформления с точки зрения
эргономики и юзабилити. Масштабом данного явления объясняется
отсутствие в научном сообществе строго однозначного определение данного
феномена, а вопросы точно определенного списка эстетических параметров
минимализма все еще находятся под прицелом исследователей.
Формирование визуального оформления и организации сетевого ресурса на
основе принципов эстетики минимализма строится на основе стремления к
п р о с том у и у с то й ч и в ом у с о с тоя н и ю . Н а о с н о в е и м е ю щ и хс я
основополагающих принципов функционального структурирования и,
описанных в различной литературе принципов минимализма, повторяющихся
в большинстве ориентированных на минимализм произведений, мы вывели
перечень так называемых функционально-эстетических критериев
минимализма и можем проследить, выполняются ли данные условия
рассматриваемыми медиаресурсами.242 Сопоставив общие результаты
функционально-структурного анализа КГМ в аспекте юзабилити с
результатами структурного анализа функционально-эстетических критериев
м и н и м а л и з м а , м ы с м ож е м в ы я в и т ь н а л и ч и е и л и от с у т с т в и е
взаимообусловленности между принципами минималистической эстетики и
функциональным подходом в дизайн-проектировании. Это позволит говорить
о совпадении или отсутствии связи между прикладным и эстетическим
пониманием минимализма в контексте визуальной организации вебстраницы.
В аспекте структурирования контента, важнейшим критерием
минимализма в графическом дизайне выступает модульная сетка, как способ
упорядочения элементов на странице посредством их гармоничного
распределения.
Главной целью модульной организации в минимализме
становится приведение всех элементов страницы к устойчивости, точности и
простоте форм. Главная страница медиаресурса
242 Приложение 4, табл. 3
«Lenta.ru» активно
использует возможности своей модульной организации.
Что же касается
ленты новостей, то нельзя сказать, что в ней ярко доминирует либо
квадратный либо прямоугольный модуль: Квадратные блоки (текст + фото)
смешаны с прямоугольными блоками, содержащими только заголовок
новости.243 Страница сайта «РИА Новости» разбита на очевидные модули,
верстка смешанная, в ленте новостей преобладают геометрические блоки
прямоугольной формы.244 Кроме того, сайт «РИА Новости» имеет
фиксированную ячеистую структуру, в отличие от «Lenta.ru», где на первый
план в ленте новостей выходит линейность восприятия. Рассматривая общий
макет страницы «РБК»245, мы можем выделить модули, по большей части,
прямоугольной формы, использование квадрата практически не встречается.
Однако, из-за неравномерного распределения негативного пространства
между контентом страницы, модульная организация визуально разваливается,
появляются пустые «коридоры» между контентом. Кроме того, наблюдаются
некоторые ошибки при соблюдении сетки, о чем более подробно будет
сказано в следующем пункте. Главная страница «Meduza» 246 целиком и
полностью состоит из одинаковых фиксированных блоков, внутри которых
происходит дробление на еще меньшие модули информации.
Соблюдение геометрической точности линий согласно сетке является
одним из наиважнейших критериев в аспекте эстетики минимализма. Если
горизонтальные, а в особенности вертикальные направляющие не совпадают,
то строгость и устойчивость композиции будет нарушена, а расположение
элементов не будет способствовать гармонии на странице. По данному
критерию максимальный балл сумели получить сразу 3 издания («Lenta.ru»,
«РИА Новости» и «Meduza»), что говорит о стремлении данных ресурсов
обеспечить баланс на странице.247 На сайте «Lenta.ru» это выражается в чуть
меньшей степени из-за компоновки контента ленты новостей, где
243 Приложение 3, рис. 1
244 Приложение 3, рис. 2
245 Приложение 3, рис. 3
246 Приложение 3, рис. 4
247 Приложение 3, рис. 6,7
расположение элементов чуть более вариативно. «Meduza» так же соблюдает
абсолютную точность как вертикальных, так и горизонтальных
направляющих. Такое же единообразие соблюдается и внутри крупных
блоков, где контент неизменно выравнивается в соответствии сеткой и
расположением материалов в соседствующих блоках.248 Единственным, не
реализовавшим данный критерий ресурсом, стал «РБК». Использование
сетки не уберегло главную страницу сайта от ошибок: при проведении
вертикальных и горизонтальных направляющих по всей области страницы
мы видим множественные ошибки взаимного размещения элементов.249
Критерий оценки типографики и шрифтового расписания на
рассматриваемых медиаресурсах, состоит, с одной стороны, из
ко л и ч е с т в е н н о г о п р и з н а к а , п о д р а з у м е в а ю щ е г о п р и м е н е н и е
моногарнитурности, и качественного признака, предусматривающего
использование гротесков. Если применение 2 гарнитур, в особенности
сочетания антиквы и гротеска, может положительно расцениваться с точки
зрения контраста и шрифтовой сочетаемости, то в рамках минимализма
наилучшим решением будет использование только одной гарнитуры.
Использование гротесков, как наиболее аскетичного вида шрифта,
обуславливается отсутствием лишних деталей в виде засечек, а также
акцента, проявляющегося в виде разной толщины основного и
дополнительного штрихов. Иными словами, главными качествами
типографики минимализма выступают четкость и удобочитаемость,
достижимая за счет использования простых линий и упрощенных литер. Как
мы видим, сайт «Lenta.ru»250 этого принципа не придерживается: шрифтовой
состав страницы включает в себя сериф Georgia и гротеск Helvetica Neue.
Шрифтовое расписание портала «РИА Новости» 251 целиком и
полностью построено на применении гротеска Arial, используемым
248 Приложение 3, рис. 8
249 Приложение 3, рис. 5
250 Приложение 3, рис. 9
251 Приложение 3, рис.10
практически в каждом текстовом элементе на данном медиаресурсе. Можно
сказать, что почти все рекламные блоки, появляющиеся на главной странице,
подчинены этой устойчивости, и, в соответствии с принципами
единообразия, они так же оформляются в едином со шрифтовым
расписанием стилем. По такому же принципу, максимальный бал по
количественному и качественному признаку типографики на сайте, получает
медиаресурс «РБК»252, полностью оформленный гротеском Helvetica.
Симметричная композиция подразумевает одинаковое размещение
элементов страницы относительно вертикальной направляющей оси, а также
зеркальное расположение объектов с учетом их визуального веса. С учетом
специфики рассматриваемых медиаресурсов, довольно тяжело использовать
такой подход к организации главной страницы. Как указывает
О.В.Пикулевский и другие теоретики дизайна, минимализм абстрагируется
от идеи симметрии оформления в сторону ассиметричной композиции,
позволяющей расставлять акценты на страницы при помощи использования
чистых форм и геометрических линий.253 При взгляде на общие макеты
изданий, мы сможем увидеть, какого принципа придерживается каждый из
них.254 Композиционная организация медиаресурса «Meduza» построена на
принципе симметрии для достижения нейтральной композиции. Это
проявляется в геометрическом подобии всех элементов (блоков) на странице.
Смешанную композицию использует портал «Lenta.ru»: главный экран, где
размещены главные новости, а также лента новостей ассиметричны,
поскольку при прокрутке страницы вниз, колонки постоянно меняют свое
положение относительно друг друга, после чего вновь следует принцип
симметрии. Чередование принципов симметрии и ассиметрии проявляется и
в организации главной страницы «РИА Новости», но в меньшей степени, чем
на портале «Lenta.ru». Наименее симметричной из представленных, можно
252 Приложение 3, рис.11
253 Пикулевский О.В.Дизайн и культура. Харьков: Гуманитарный центр, 2014. — С. 165
254 Приложение 3, рис.12
считать организацию сайта «РБК», где по всей длине страницы присутствует
наибольшее количество неравномерно размещенных элементов.
Основным правилом цветового оформления в рамках минимализма
является использование нейтральных цветов (черный, серый, белый и т.д.)
или применения неярких монохромных решений. Во многом это связано с
эмоциональной составляющей цвета, в то время как минимализм
руководствуется правилом обезличенности и ограничением цветовых палитр
для зонирования пространства. Все рассмотренные медиапорталы, в целом,
придерживаются аскетизма в своей цветовой организации и используют
монохромные сочетания с применением 1-2 акцентирующих цветов. Для
того, чтобы наглядно увидеть цветовую палитру каждого из рассматриваемых
м е д и а р е с у р с о в , о б р а т и м с я к п р и л о ж е н и ю 3 . 255 Н а и б о л ь ш е й
последовательностью при использовании цвета в аспекте минимализма
обладает портал «Meduza». Используя разные оттенки черного (серый,
светло-серый и т.д), они применяют только один контрасный цвет,
соответствующий оттенку логотипа. Он используется как для разграничения
блоков с контентом, так и для выделения ссылок и активных кнопок сайта. На
основе этих же принципов построена цветовая организация на сайте «РИА
Новости»: помимо использования монохромной палитры черного цвета,
применяется только 1 дополнительный цвет, так же соответствующий цвету
логотипа. «Lenta.ru» не стала исключением и тоже руководствуется
монохромностью, с использованием одного акцентирующего цвета,
применяемого для привлечения внимания к важной информации (блок
главных новостей). В типографике, для выделения выходных данных
публикаций используется красный оттенок, но кроме этого какие-либо яркие
цвета на сайте отсутствуют. Единственным сайтом, формально не сумевшим
выдержать ограниченность цветовой палитры, стал сайт «РБК»: дизайн этого
ресурса выдержан в максимально неярких монохромных оттенках черного,
однако, в типографике главной страницы используется более 7 разных
255 Приложение 3, рис.13
цветов.
В контексте минимализма, большую опасность представляет
отсутствие пробелов по странице, чем их чрезмерное использование. Тем не
менее, для создания устойчивой композиции необходимо помнить не о
кол и че стве н егати вн ого про ст ранства, а о рациона льном его
распределении.256
Умеренное количестве негативного пространства мы
видим на странице «РИА Новости», где контент имеет постоянную структуру
и пробелы между блоками информации практически неизменны. Широкие
пробелы использует сайт «РБК», однако, по нашему мнению здесь оно
связано с погрешностями использования модульной сетки. Как мы видим,
наименьшее количество негативного пространства имеет порталы «Lenta.ru»
и «Meduza».
Визуальный ритм на странице придает композиции большую
упорядоченность, за счет создания эффекта предсказуемости, приводящему к
увеличению скорости восприятия информации. Соблюдение критерия
композиционного ритма предусматривает единообразие размера пробельных
элементов и интервалов, а также наличие у акцентированных элементов
комментария и общий повтор элементов. Фактором обеспечения ритма
выступает единообразие оформления блоков, наличие повторяющихся блоков
с контентом, или цветовой повтор по странице. В визуальной организации
«Lenta.ru»257 можно увидеть разделение страницы на 2 части, на основании
ритма: в первой половине, включающей главный новостной блок и ленту
новостей, повтор проявляется в виде наличия повторяющейся конструкции
«текст + фото» (иными словами наличием у акцентированных элементов
комментария). Вторая часть страницы, включающая актуальный контент по
каждой из рубрик, состоит из одинаковых вертикальных блоков, внутреннее
наполнение которых так же подчинено повтору. Таким образом, ритм
создается на протяжении всей страницы. Чуть менее выражен ритм на
станице портала «РИА Новости».258 Соблюдение критерия композиционного
256 Приложение 3, рис.14
257 Приложение 3, рис.15
258 Приложение 3, рис.15
ритма основано осуществляется благодаря наличию у акцентированных
элементов комментария, а также повторяющихся блоков типа «фото + текст»
и «фото как подложка + текст». Аналогичным образом ритмичная
композиция осуществляется и на медиапортале «Meduza» 259: за счет
и с п ол ь зова н и е ма кс и ма льно блоч ной ве рс т ки м ож но ув ид е т ь
многочисленные повторы. Интересной особенностью построения ритма на
«Медузе» является создание цветового повтора. В меньшей степени ритм
прослеживается на медиаресурсе «РБК»: элементы страницы не создают
повторы по абсолютно всей длине страницы, хотя присутствуют и частично
повторяющиеся блоки, и комментарии у акцентированных элементов.
Аналогичным образом ритмичная композиция реализуется и на медиапортале
«Meduza»: за счет использование максимально блочной верстки можно
увидеть многочисленные повторы.260
Наконец, последними рассматриваемыми критериями, в рамках анализа
реализации функционально-эстетических принципов минимализма, являются
функциональность интерфейса и навигации. Данные критерии выражаются
фиксированностью навигационного меню и его многокомпонентностью. На
сайте «Lenta.ru»261 элементы навигации и поиска контента расположены в
одном блоке, при этом, они имеют фиксированное положение даже при
прокрутке сайта вниз. Простое одноуровневое меню без выпадающих при
наведении мыши элементов так же указывает на стремление к
минималистичности оформления. Аналогичное проявление простоты и
функции проявляется и в организации навигации на сайте «РБК». 262 На
портале «РИА Новости»263 элементы навигации и поиска контента
расположены в непосредственной близости, но не в рамках одного блока.
Навигационное меню не имеет строго фиксированного положения и исчезает
с области просмотра при прокрутке сайта вниз.
259 Приложение 3, рис.16
260 Приложение 3, рис.16
261 Приложение 3, рис.17
262 Приложение 3, рис.18
263 Приложение 3, рис.19
Выявление взаимообусловнности между прикладным и эстетическим
пониманием минимализма нельзя считать полноценным без
обращения к
мнению экспертного сообщества. В качестве эксперта в области дизайна в
рамках данной исследовательской работы выступил арт-директор
издательского дома «Сфера», дизайнер и специалист по визуальной
идентификации Павел Хан. По его мнению, минимализм – это не стиль, и не
направление, а некое состояние, которое характеризует предмет или не
характеризует его. Наиболее значимыми принципами эстетического
минимализма эксперт выделяет
чистоту и строгость композиции, а также
лаконичность выразительных средств. Павел Чангирович считает, что
функциональный подход должен исходить от редакционного коллектива, если
его нет - получается каша. Среди рассматриваемых медиаресурсов, наиболее
минималистичным дизайном, по его мнению, обладает портал «Lenta.ru»,
хотя сейчас он выглядит хуже, чем в момент его создания именно по причине
изменения состава редакции данного ресурса.
По мнению Хана, дизайн
«Медузы» не такой сложный, но там есть большая согласованность между
формой и содержанием. Что же касается «РБК», то этот сайт эксперт
расценивает как наиболее слабый, с точки зрения эстетики минимализма.
По итогам проведенного структурного анализа в контексте реализации
функционально-эстетических критериев минимализма, наибольшее
количество баллов набрал сайт «Lenta.ru». На втором месте располагается
«Meduza», на третьем – «РИА Новости». Аутсайдером по результатам
анализа вновь стал портал «РБК».
Полученные в ходе анализа баллы
представлены в таблице 8 приложение 4264.
После того, как мы осуществили структурно-функциональный анализ
визуальной организации главных и новостных страниц медиаресурсов
«Lenta.ru», «РИА Новости», «РБК» и «Meduza», получили результаты
тестирования асессоров и провели структурно-функциональный анализ в
контексте реализация функционально-эстетических критериев минимализма
264 Приложение 4, табл. 8
в КГМ указанных медиаресурсов, мы можем подвести итоги и выяснить,
подтвердилась ли гипотеза нашего исследования.
В качестве основного метода исследования нами использовался
структурно-функциональный анализ композиционно-графической модели.
Для подтверждения его валидности, мы дополнительно применили метод
эвристической оценки на тестовой группе из 11 асессоров. Результаты
тестирования ассесоров и общие результаты структурно-функционального
анализа юзабилити КГМ совпали, что обозначило обоснованность
выбранного нами метода.
Финальные результаты по каждому проведенному анализу
представлены в Приложении 4 данной магистерской диссертации. 265
Результаты структурно-функционального анализа визуальной организации
главных и новостных страниц в контексте юзабилити не совпали. По итогам
анализа новостных страниц, наиболее эргономичной визуальной
организацией обладает страница портала «Lenta.ru». За ней по количеству
набранных баллов следует «РИА Новости», затем «Meduza» и на последнем
месте «РБК». Главные страницы рассматриваемых медиаресурсов, по
степени эргономичности распределились в ином порядке: «РИА Новости»,
«Meduza», «Lenta.ru», «РБК». Наивысший индекс эргономичности, согласно
совмещенным результатам функционально-структурного анализа главных и
новостных страниц, имеет портал «Lenta.ru». На втором месте распологается
информационное агентство «РИА Новости», на третьем «Meduza» и
наименьший индекс эргономичности, ожидаемо, обозначился у аутсайдера по
результатам всех исследований портала «РБК».
Общие результаты функционально-структурного анализа юзабилити и
результаты структурного анализа по минимализму близки, но не совпадают.
Это свидетельствует о том, что хотя принципы прикладного минимализма в
проектировании веб-ресурсов во многом ориентированы на принципы
эстетического минимализма, но тем не менее они не совпадают и не зависит
265 Приложение 4, табл. 9
друг от друга.
Таким образом, мы определенно можем говорить о
существовании существенных различий в понимании феномена
"минимализм" с точки зрения сторонников эстетического и функционального
подхода.
Так же мы пришли к выводу о том, что в области проектирования
визуальной организации сетевых ресурсов минимализм используется как
стратегия, на основе трансформации общих эстетических принципов данного
феномена в функционально-прикладные.
Основной гипотезой нашего исследования являлось предположение о
наличии взаимообусловленности между принципами минималистической
эстетики и функциональным подходом к дизайн-проектированию,
позволяющей говорить о совпадении прикладного и эстетического
понимания минимализма в контексте визуальной организации веб-страницы.
Частично, гипотеза подтвердилась – действительно, некоторая
взаимообусловленность между двумя эти подходами существует, поскольку
мы может выделить группу применяемых на практике критериев, актуальных
как для функционального, так и для эстетического понимания минимализма.
Тем не менее, результаты проведенных исследований показали, что
прикладное и эстетическое понимание минимализма не совпадают. Таким
образом, это несовпадение обозначило проблемную область, актуальную для
дальнейших работ в этой области. В частности, остается актуальным вопрос
о соотношении функциональных и эстетических критериев не только
минимализма, но и других аналогичных понятий и принципов в практике
различных дизайнерских школ и подходов.
ЗАКЛЮЧЕНИЕ
Данная магистерская диссертация
была посвящена особенностям
реализации принципов юзабилити в дизайне новостных порталов,
учитывающих не только факторы перцепции, но и законы интерактивной
коммуникации, т.н.
выявление
«опыт взаимодействия».
Главной
целью было
и характеристика роли эстетики минимализма в юзабилити-
проектировании новостных сетевых СМИ. Для достижения данной цели был
выполнен ряд задач.
Мы подробно рассмотрели современное понимание функционального
подхода к визуальной
организации сетевых СМИ, обозначив при этом,
основные принципы юзабилити, а также факторы формирования
пользовательского опыта. Определили концептуальное содержание понятия
«минимализм» как в контексте понимания его в качестве эстетического
явления и художественного стиля, так и применительно к практике дизайнпроектирования. Опираясь на целостное понимание композиционнографической модели в единстве всех ее элементов как системы, мы выделили
элементы микро и макро уровней композиционно-графической модели,
ставшие опорными факторами анализа визуальной организации. Согласно
выделенным критериям, мы провели структурно-функциональный анализ
визуальной организации новостных порталов в соответствии с
теоретической базой и целью исследования, и пришли к нескольким выводам.
Результаты структурно-функционального анализа визуальной
организации главных и новостных страниц в контексте юзабилити не
совпали. По итогам анализа новостных страниц, наиболее эргономичной
визуальной организацией обладает страница портала «Lenta.ru». За ней по
количеству набранных баллов следует «РИА Новости», затем «Meduza» и на
по следнем ме сте «РБК». Главные страницы, рассматриваемых
медиаресурсов, по степени эргономичности распределились в ином порядке:
«РИА Новости», «Meduza», «Lenta.ru», «РБК». Наивысший индекс
эргономичности, согласно совмещенным результатам
функционально-
структурного анализа главных и новостных страниц, имеет портал «Lenta.ru».
На втором – информационное агентство «РИА Новости», на третьем
«Meduza» и наименьший индекс эргономичности, ожидаемо, обозначился у
аутсайдера по результатам всех исследований портала «РБК».
Для подтверждения его валидности выбранного нами метода
функционально-структурного анализы, мы дополнительно применили метод
эвристической оценки на тестовой группе из 11 асессоров. Результаты
тестирования ассесоров и общие результаты структурно-функционального
анализа юзабилити КГМ совпали, что обозначило обоснованность
выбранного нами метода.
Наконец, мы рассмотрели взаимодействие принципов минимализма и
юзабилити в визуальной организации новостных сетевых СМИ. Сначала, на
основе описанных в различной литературе принципов минимализма в
искусстве и графическом дизайне, мы сформулировали список
функционально-эстетических критериев минимализма, актуальных для
оценивания на их основе степени «минималистичности» визуальной
организации рассматриаемых медиаресурсов. Сопоставив общие результаты
функционально-структурного анализа КГМ в аспекте юзабилити с
результатами структурного анализа функционально-эстетических критериев
минимализма, мы смогли выявить наличие взаимообусловленности между
принципами минималистической эстетики и функциональным подходом в
дизайн-проектировании. Тем не менее, общие результаты функциональноструктурного анализа юзабилити
и результаты структурного анализа по
минимализму близки, но не совпадают. Это свидетельствует о том, что хотя
принципы прикладного минимализма в проектировании веб-ресурсов во
многом ориентированы на принципы эстетического минимализма, но тем не
менее они не совпадают и не зависит друг от друга.
Таким образом, мы
определенно можем говорить о существовании существенных различий в
понимании феномена «минимализм» с точки зрения сторонников
эстетического и функционального подхода.
Так же мы пришли к выводу о том, что в области проектирования
визуальной организации сетевых ресурсов минимализм используется как
стратегия, на основе трансформации общих эстетических принципов данного
феномена в функционально-прикладные.
Основной гипотезой нашего исследования являлось предположение о
наличии взаимообусловленности между принципами минималистической
эстетики и функциональным подходом к дизайн-проектированию,
позволяющей говорить о совпадении прикладного и эстетического
понимания минимализма в контексте визуальной организации веб-страницы.
Частично, гипотеза подтвердилась – действительно, некоторая
взаимообусловленность между двумя эти подходами существует, поскольку
мы может выделить группу применяемых на практике критериев, актуальных
как для функционального, так и для эстетического понимания минимализма.
Тем не не менее, результаты проведенных исследований показали, что
прикладное и эстетическое понимание минимализма не совпадают. Таким
образом, это несовпадение обозначило проблемную область, актуальную для
дальнейших работ в этой области. В частности, остается актуальным вопрос
о соотношении функциональных и эстетических критериев не только
минимализма, но и других аналогичных понятий и принципов в практике
различных дизайнерских школ и подходов.
СПИСОК ИСТОЧНИКОВ И ЛИТЕРАТУРЫ
1.
Ашманов И., Иванов А. Оптимизация и продвижение сайтов в поисковых
2.
системах. — СПб.: Питер, 2009
Баканов А. С., Обознов А. А. Эргономика пользовательского интерфейса:
от проектирования к моделированию человеко-компьютерного
3.
4.
взаимодействия. М.: Институт психологии РАН, 2011.
Берд Д. Веб-дизайн: руководство разработчика. СПб.: Питер, 2012.
Бородаев Д. В. Веб-сайт как объект графического дизайна: монография.
5.
6.
Харьков: Септима, 2006.
Воронов Н.В. Суть дизайна. М, 2002.
Гаррет Д. Веб дизайн, ориентированный на пользователя. Элементы
7.
опыта взаимодействия. СПб.: Симбо, 2008.
Герчук Ю.Я. Функциональная графика XX века // История графики и
искусства книги. 2000.
8. Глазычев В.Л. Дизайн как он есть. М.: «Европа», 2006.
9. Головач В. Дизайн пользовательского интерфейса. 2009.
10. Головко С.Б. Дизайн деловых периодических изданий. М.: Юнити-Дана,
2008.
11. Демарко Т., Листер Т. «Человеческий фактор: успешные проекты и
команды». СПб: Символ Плюс, 2005
12. Интернет-СМИ: Теория и практика: Учеб.пособие для студентов вузов/
Под ред. М.М.Лукиной. – М.: Аспект Пресс, 2010.
13. Калиновский А.И. Юзабилити - как сделать сайт удобным. М: Новое
знание, 2005.
14. Картер М. Современный дизайн газет. М.: Российско-Американский
Информационный Пресс-Центр, 1995.
15. Круг С. Веб-дизайн. — М.: Символ-плюс, 2009.
16. Купер А. Об интерфейсе. Основы проектирования взаимодействия. М.:
Символ, 2009.
17. Купер А. Психбольница в руках пациентов: почему высокие технологии
18.
19.
20.
21.
22.
сводят нас с ума. М.: Символ, 2007.
Королькова А. Живая типографика. М.: IndexMarket, 2010.
Кричевский В. Типографика в терминах и образах. Том I. М.: Слово, 2000.
Курушин В.Д. Графический дизайн и реклама. М.: ДМК Пресс, 2008.
Лаврентьев, Α. Η. История дизайна. М.:Гардарики, 2007.
Лаптев В. Типографика: порядок и хаос. М.:, 2008.
23. Лаптев В. Модульные сетки: проектирование многополосных изданий.
М.: РИП-холдинг, 2007.
24. Лесняк В.И. Графический дизайн: основы профессии. М.: IndexMarket,
2011.
25. Левит С.Я., Гордон А.В., Зверева Г.И. Культурология. Энциклопедия. Том
1., М.: Росспэн, 2007.
26. Магазанник В. Д., Львов В. М. Человеко-компьютерное взаимодействие.
Тверь: Триада, 2005.
27. Макнейл П. Веб-дизайн. Идеи, секреты, советы. СПб.: Питер, 2012.
28. Мандел Т. Разработка пользовательского интерфейса. – М.: ДМК-Пресс,
2008.
29. Маркотт И. Отзывчивый веб-дизайн. СПб.: Питер, 2012.
30. Никитин В.А., Привалова О.Ю. Шрифты: современные начертания,
характерологические особенности, типология. «Техника и технология
СМИ: Дизайн газеты». СПб. : СПбГУ, 2004.
31. Нильсен Я. Веб-дизайн: книга Якоба Нильсена. СПб.: Символ-Плюс. 2003.
32. Нильсен Я. Дизайн Web-страниц. Анализ удобства и простоты
использования 50 узлов. М.: Вильямс, 2002.
33. Нильсен Я., Перниче К. Веб-дизайн: анализ удобства использования веб34.
35.
36.
37.
38.
39.
сайтов по движению глаз. Москва: Вильямс, 2010.
Нильсен Я. Веб дизайн: книга Якоба Нильсена. Спб.: Символ-Плюс, 2003.
Норман Д. А. Дизайн привычных вещей. М.: Вильямс, 2006.
Ньюарк К. Что такое графический дизайн? М.: Астрель, 2005.
Пикулевский В.О. Практическая эстетика. Харьков: Lap Lambert, 2012.
Пикулевский О.В.Дизайн и культура. Харьков: Гуманитарный центр, 2014.
Р а с к и н Д . Интерфейс: новые направления в проектировании
компьютерных систем. М.: Символ-плюс, 2005.
40. Речинский А. В., Сергеев С. Ф. Разработка пользовательских интерфейсов.
Юзабилити-тестирование интерфейсов информационных систем. —
СПб.: Изд-во Политехн. ун-та, 2012.
41. Розенфельд Л., Морвиль П. Информационная архитектура в Интернете.
М.: Символ-Плюс, 2008.
42. Самара Т. Типографика цвета. Практикум. М.: Рип Холдинг, 2010.
43. Сергеев С. Ф. Юзабилити-тестирование интерфейсов информационных
систем в гуманитарных науках и искусстве. — СПб.: С.-Петерб. ун-та,
2012
44. Солсо Р. Когнитивная психология. Спб.: Питер, 2015.
45. Туэмлоу Э. Графический дизайн. Фирменный стиль, новейшие технологии
и креативные идеи. М.: Астрель, 2007.
46. Феличи Дж. Типографика: шрифт,верстка, дизайн. СПб.: БХВ-Петербург,
2004.
47. Чихольд Я. Облик книги. М., 1980 .
48. Уэйшенк С. 100 главных принципов дизайна: как удержать внимание.
СПб.: Питер, 2012.
49. Якунин А.В.
Веб-дизайн и оформление электронных СМИ. СПб.:
С.Петерб. гос. ун-т, Высш. шк. журн. и мас.коммуникаций, 2013.
50. Якунин А.В. Веб-юзабилити и эргономика интернет-СМИ. СПб.: С.Петерб. гос. ун-т, Ин-т Высш. шк. журн. и мас.коммуникаций, 2015.
51. Ambrose G., Harris P. The Fundamentals of Typography. NY.: A&C Black,
2006.
52. Benyon D., Turner P., Turner S. Designing Interactive Systems: People,
Activities, Contexts, Technologies, NY.: Addison–Wesley, 2005.
53. Bernhaupt R. Game User Experience Evaluation. London: Springer, 2015.
54. Bhangal S., Jankowski T. Foundation Web Design: Essential HTML,
JavaScript, CSS, Photoshop, Fireworks, and Flash. NY.: Apress, 2003.
55. Bishop S., Hartman A. Interactive Media Design and Development with Adobe
CS6. Delmar Cangage Learning., 2013.
56. Carroll J.M. HCI Models, Theories, and Frameworks: Toward a
Multidisciplinary Science. San Francisco: Morgan Kaufmann Publishers, 2003.
57. Colpitt F. Minimal Art: The Critical Perspective. Washington: University of
Washington Press, 1993.
58. Curtis N. Modular Web Design: Creating Reusable Components for User
Experience Design and Documentation. New Riders, 2010.
59. DiMarco J. Web Portfolio Design and Applications. NY.: Idea Group Inc,
2006.
60. Goldberg R. Digital Typography Pocket Primer. London: Windsor Professional
Information, 2000.
61. Grabinger, R. S. Designing screens for learning. In H. van Oostendorp & S. de
Mul (Eds.)
Cognitive aspects of electronic text processing. Norwood, NJ:
Ablex Publishing Corporation, 1996.
62. Hillner M. Basics Typography: Virtual Typography. NY.: AVA Publishing,
2009.
63. Hollis R. Graphic Design: A Concise History. London: Thames and Hudson,
2001.
64. Holmqvist K., Nystrom M., Andersson R., Eye Tracking: A comprehensive
guide to methods and measures. Oxford, 2011.
65. Horton, W. Designing and writing online documentation: Help files to
hypertext. NY: John Wiley & Sons, 1989.
66. Kuniavsky M. Smart Things: Ubiquitous Computing User Experience Design.
London: Elsever, 2010.
67. McCarthy J., Wright P. Technology as Experience. London: The Mit Press,
2012.
68. Marcus A. Design, User Experience, and Usability: User Experience Design
Practice. Springer., 2014.
69. Marcus A. Return on Investment for usable user-interface design: Examples
and statistcs for Usability. Nielsen Norman Group, 2013 URL:
http://goo.gl/OpjcJA. (дата обращения: 24.01.2016)
70. Marzona D. Minimal Art. Berlin: Tashen, 2004.
71. Meyer J. Minimalism: Art and Polemics in the Sixties, 2000.
72. Mullet K., Sano D., Designing Visual Interfaces // Englewood Cliffs, NJ:
Prentice Hall PTR. 1995.
73. Nielsen J. Usability Engineering. NY.: Morgan Kaufmann, 1993.
74. Obendorf H. Minimalism: Designing Simplicity. NY: Springer, 2009.
75. Obendorf H. Where «less» is «more» – notions of minimalism and the design
of interactive systems: A constructive analysis of products & processes of
human-computer-interaction design from a minimalist standpoint. Hamburg
University, 2007.
76. Overy P. De Stijl: Art, Architecture, Design / P.Overy. – N.Y., Publisher:
Thames & Hudson Ltd, 1991.
77. Redish J., Dumas J., A Practical Guide to Usability Testing. NY.: Intellect Ltd,
1999.
78. Reiss E. Usable Usabilty. Simple Steps for Making Stuff Better. John Wiley &
Sons, Inc., 2012.
79. Rizvanoglu K., Gorkem C. Research and Design Innovations for Mobile User
Experience. NY: Information Science Reference, 2014.
80. 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.
81. Strickland E. Minimalism: Origins. Bloomington: IU Press, 2000.
82. Stuff C. After Modernist Painting : The History of a Contemporary Practice,
NY.: I.B.Tauris & Co, 2013.
83. Tognazzini B. Tog on Interface. NY.: Addison-Wesley, 1996.
84. 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.
85. White, J. V. Editing by design: Word and picture communication for editors and
designers. NY.: R.R. Bowker Company, 1984.
86. Wolfersperger S.K., Carlston E. Experimenting with Art. NY: Good Year
Books, 1991.
87. Wilson C. User Experience Re-Mastered: Your Guide to Getting the Right
Design. Burlington: Morgan Kaufmann Publishers, 2010.
Статьи:
88. Баева Л.В. Виртуальная сансара: трансформация модели реальности в
условиях информационной культуры // Информационное общество. 2012.
№ 2.
89. Бакаев М.А. Об ограниченной применимости некоторых базовых законов
в сфере человеко-машинного взаимодействия для пожилых пользователей
// Научный вестник НГТУ. 2008. № 1(30)
90. Беляев А.А. Дизайн-модель интернет-версии как результат трансформации
модели печатного издания (на материале российских сми) // Вестник
Московского университета. Серия 10: Журналистика. 2008. № 2.
91. Блинникова И.В., Величковский Б.Б., Капица М.С., Леонова А.Б.
Экспериментальное исследование прерываний в компьютеризированной
деятельности: анализ стратегий переключений между основной и
дополнительной задачами // Экспериментальная психология. 2009. № 1.
С. 35-51
92. Величковский Б.М. Исследование когнитивных функций и современные
технологии // Вестник РАН. 2010. № 80. С. 440-446.
93. Долгих М.Н. Дизайн и виртуальная среда: дигитальные ландшафты в
аспекте гибридных медиа. // Вестник Томского государственного
университета. 2014. № 379.
94. Егорова И.Н., Рыгина В.Е. Исследование методов оптимизации структуры
web-страниц // Восточно-Европейский журнал передовых технологий.
2010. Т. 5. № 2 (47)
95. Конюхова О.В. Применение метода CMN-GOMS для анализа требований
к графическому пользовательскому интерфейсу компьютерной системы на
примере графического редактора // Информационные системы и
технологии. 2005. № 1 (7).
96. Копов С. А., Макарычев П. П., Шибанов С. В. Разработка метрик
измерения юзабилити на основе деятельностного подхода // НиКа. 2010.
97. Назаренко Н.А., Никулин М.Н. Оценка пользовательского интерфейса
проектируемых специализированных систем // Сборник "XII
всероссийского совещания по проблемам управления ВСПУ-2014". 2014.
( С.6402-6407)
98. Р ы б а к о в а Ю . Ю . Дизайн интерфейса как ресурс повышения
конкурентоспособности // Медиа в современном мире. Молодые
исследователи. МАтериалы 14-й международной конференции студентов,
магистрантов и аспирантов 11-13 марта 2015 г.
C. 469 - 471 URL:
http://jf.spbu.ru/upload/files/file_1425986116_2.pdf (дата обращения:
15.01.2016).
99. Хлопотникова В.Н. Минимализм: «Искусство первичных структур» //
Известия РГПУ им. А.И. Герцена. 2009. № 118
100.Фомишина О.В. Повышение качества восприятия контента сетевых
электронных журналов средствами модульного проектирования //
Вестник современной науки. 2015. Вып.7 № 7-1
101.Шеховцова А.Н. Базовые принципы, применяемые в мультимедийном
проектировании // Молодежь и XXI век - 2015 материалы V
Международной молодежной научной конференции в 3-х томах. 2015.
102. Якунин А.В. Композиционно-графическая модель веб - сайта как
системообразующий фактор формирования «опыта взаимодействия». //
Инновационное развитие: ключевые проблемы и решения. Сборник
статей Международной научно-практической конференции.2015. (С. 174178.)
103. Bernard, M. L., Fernandez, M., Hull, S., & Chaparro, B. S. 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, 2003. P. 1375-1379.
104. 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-sizeand-type-of-font-should-i-use-on-my-website/
105. 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-doesthe-amount-of-whitespace-really-matter/ (дата обращения: 24.04.2016)
106. 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.
107. Chaparro B., Baker J.R., Shaikh D., Hull S., Brady L. Reading Online Text: A
C o m p a r i s o n o f F o u r W h i t e S p a c e L a y o u t s . 2003. URL:
http://usabilitynews.org/finding-information-on-the-web-does-the-amount-ofwhitespace-really-matter/ (дата обращения: 24.04.2016)
108. Chaparro B., Bernard M. Finding Information on the Web: Does the Amount
of White Space Really Matter? // Proceedings of the Tenth Annual Usability
P r o f e s s i o n a l s ’ A s s o c i a t i o n C o n f e r e n c e , 2 0 0 1 . URL:
http://usabilitynews.org/finding-information-on-the-web-does-the-amount-ofwhitespace-really-matter/ (дата обращения: 20.03.2016).
109. 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.
110. Duchnicky, J. L., & Kolers, P. A. Readability of text scrolled on visual display
terminals as a function of window size. Human Factors, 25. 1983. P. 683-692.
111. Dyson, M. C., & Kipping, G. J. The effects of line length and method of
movement on patterns of reading from screen // Visible Language, 32. 1998. P.
150-181.
112. Dyson, M. C., & Haselgrove, M. The influence of reading speed and line length
on the effectiveness of reading from screen // International Journal of HumanComputer Studies. 2001. P. 585-612.
113. Fitts P.M. The information capacity of the human motor system in controlling
the amplitude of movement // Jornal of Exper. Psychology. 1954. – Vol. 47,
Issue 6. Р. 381–391
114. Geissler G., Zinkhan G., Watson R.T., The influence of home page complexity
on consumer attention, attitudes, and purchase intent // Journal of Advertising .
2006. Vol. 35 Р. 69–80.
115. 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.
116. Huang M.H., Designing website attributes to induce experiential encounters //
Computers in Human Behavior. 2003. Issue. 19 (4), — Р. 425-442.
117. 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. 1177-1186
118. Meyer K. The Roots of Minimalism in Web Design. 2012 URL:
https://www.nngroup.com/articles/roots-minimalism-web-design/ (дата
обращения: 18.04.2016).
119. 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. — P.216
120. Morrison S., Noyes J., A Comparison of Two Computer Fonts: Serif versus
Ornate Sans Serif // Usability News. 2003. URL: http://usabilitynews.org/acomparison-of-two-computer-fonts-serif-versus-ornate-sans-serif/ (дата
обращения: 24.04.2016)
121. 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)
122. Newell A., Card S.K. The prospects for psychological science in human–
computer interaction // Human–Computer Interaction. 1985. Vol. 1. Р.209-242
123. Nielsen J. Usability 101: Introduction to Usability. 2012 URL:
https://www.nngroup.com/articles/usability-101-introduction-to-usability/
(дата обращения: 18.01.2016).
124. 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).
125. Nielsen, J. Enhancing the explanatory power of usability heuristics. Proc. ACM
CHI'94 Conf. (Boston, MA, April 24-28), 152-158.
126. Nielsen J., 10 Usability Heuristics for User Interface Design. 2012. URL:
https://www.nngroup.com/articles/ten-usability-heuristics/ (дата обращения:
27.01.2016).
127. Nielsen J., User Satisfaction vs. Performance Metrics. 2012 URL:
https://www.nngroup.com/articles/satisfaction-vs-performance-metrics/ (дата
обращения: 20.03.2016).
128. Seow C.S. Information Theoretic Models of HCI: A Comparison of the HickHyman Law and Fitts' Law // Human–Computer Interaction. 2005. Vol. 20 (3).
Р. 315–352
129. Shaikh A.D. The Effects of Line Length on Reading Online News // Usability
News. 2005. URL: http://usabilitynews.org/finding-information-on-the-webdoes-the-amount-of-whitespace-really-matter/ (дата обращения: 24.04.2016)
130. 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-resultspresented-in-a-grid-layout/ (дата обращения: 24.04.2016)
131. Sicilia M., Ruiz S., The effects of the amount of information on cognitive
responses in online purchasing tasks, Electronic Commerce Research and
Applications Vol. 9 (2) .2010. 183–191.
132. 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.
133. Treisman, A., Gelade, G. A feature integration theory of attention // Cognitive
Psychology. 1980. Vol 12, Р. 97-136.
134. Tullis T.S., Boynton J.L., Hersch H. Readability of fonts in the windows
environment // In Proceedings of CHI’95. 1995. P. 127-128.
135. VanEenoo C. Minimalism in Art and Design: Concept, influences, implications
and perspectives // Journal of Fine and Studio Art Vol. 2011. Issue 2(1)
136. М е д и а - к и т
Источники
«Lenta.ru».
URL:
https://lenta.ru/mediakit/LAYOUT_Lenta_About_us_rus_2015.pdf (дата
обращения: 24.04.2016)
137. М е д и а - к и т « Р И А Н о в о с т и » . U R L : h t t p : / / m e d i a t o r rus.com/images/RIA16.pdf (дата обращения: 24.04.2016)
138. Медиа-кит «Meduza». URL: https://meduza.io/static/ads/meduza-mkit-20162.pdf (дата обращения: 24.04.2016)
139. Медиа-кит «РБК.РУ». URL: http://mediator-rus.com/images/rbkprez.pdf
(дата обращения: 24.04.2016)
140. T N S W e b I n d e x . Апрель, 2016 год. URL: http://www.tnsglobal.ru/services/media/media-audience/internet/information/ (дата
обращения: 24.04.2016)
141. Медиалогия. Ин ф ормационно- ана литиче ская ст руктура. URL:
http://www.mlg.ru/ratings/federal_media/0/0/0/
(дата обращения:
24.04.2016)
142. Национальный стандарт Российской Федерации: эргономика
взаимодействия человек-система. Часть 210. Человеко-ориентированное
проектирование интерактивных систем. М.:Стандартинформорм. 2013
143. International Organization for Standardization. ISO 9241-11: UErgonomic
requirements for office work with visual display terminals (VDTs) — Part 11:
Guidance on usability. URL: https://www.iso.org/obp/ui/#iso:std:iso:9241:11:ed-1:v1:en (дата обращения: 18.01.2016).
144. International Standard ISO 9241-210. Ergonomics of human-system
interaction — Part 210: Human-centred design for interactive systems. ISO,
2010
ПРИЛОЖЕНИЕ
Рис. 1 Макеты рассматриваемых сайтов: «Lenta.ru», «РИА Новости», «РБК», «Meduza».
«Lenta.ru», «РИА Новости» и «Meduza» имеют адаптивный макет, подразумевающий
следованию стандартам отзывчивого дизайна.
Рис. 2 Соблюдение «F-паттерна визуального восприятия» : «Lenta.ru», «РИА
Новости», «РБК», «Meduza».
Рис.
3 Зонирование страницы (модульная сетка) «Lenta.ru».
Область экрана разделена на очевидные модули, верстка преимущественно по вертикали.
Активное использование сетки достигается за счет совмещения геометрически блоков
"текст + фото", фиксации вертикальных разделителей.
Рис. 4 Зонирование страницы (модульная сетка) «РИА Новости».
Область экрана разделена на очевидные модули, смешенная верстка (используется как
размещение по вертикали, так и по горизонтали). Активное использование сетки
достигается за счет различной компоновки блоков (как вертикальных, так и
горизонтальных) при четкой фиксации горизонтальных и вертикальных разделителей.
Рис. 5 Зонирование страницы (модульная сетка) «РБК.ру».
Область экрана разделена на модули, но есть нарушения в использовании сетки: «дыры»
внутри сетки, а так же несоответствие вертикальных и горизонтальных разделителей.
Верстка смешанная.
Рис. 6 Зонирование страницы (модульная сетка) «Meduza».
Наиболее ярко выраженная модульная верстка из всех рассматриваемых медиаресурсов.
Разные по форме блоки (тяготеющие к квадратной и прямоугольной форме), верстка
преимущественно по горизонтали. Горизонтальные и вертикальные разделители четко
фиксируются
Рис. 7 Негативное пространство страницы (по порядку: «Lenta.ru», «РИА Новости»,
«РБК.ру», «Meduza»).
Наименьшее количество негативного пространства имеет порталы «Lenta.ru» и «Meduza».
Умеренное количестве негативного пространства мы видим на странице «РИА Новости» контент имеет постоянную структуру и пробелы между блоками информации практически
неизменны. Широкие пробелы использует сайт «РБК», однако, по нашему мнению здесь
оно связано с недостатками структурирования контента.
Рис. 8 Зонирование страницы (контрастное оформление блоков информации) на
сайте «Lenta.ru».
Рис. 9 Зонирование страницы (контрастное оформление блоков информации) на
сайте «РИА Новости».
Рис. 10 Зонирование страницы (контрастное оформление блоков информации) на
сайте «РБК».
Рис. 11 Зонирование страницы (контрастное оформление блоков информации) на
сайте «Meduza».
Рис. 12 Просмотр сайта «Lenta.ru» с экрана компьютера
Рис. 13 Просмотр сайта «РИА Новости» с экрана компьютера
Для того, чтобы четко видеть различия в представлении информации необходимо
показать, как все рассматриваемые ресурсы смотрятся с экрана компьютера при
одинаковом разрешении и масштабе страницы. Мы можем увидеть различия в полях
страниц и общем просмотре
Рис. 14 Просмотр сайта «РБК.ру» с экрана компьютера
Рис. 15 Просмотр сайта «Meduza» с экрана компьютера
Рис. 16 Соотношение полей и области контента (по порядку: «Lenta.ru», «РИА
Новости», «РБК», «Meduza».
Как видим, минимальные поля используют в своем дизайне сайты «РБК» и «Meduza»:
пространство экрана на этих сайтах максимально задействовано под область контента.
«Lenta.ru» использует довольно широкие поля, тем не менее не превышающие площадь,
отведенную под контент. Сайт «РИА Новости» имеет широкие поля, превышающие
площадь контента.
Рис. 17 Значения кегля и интерлиньяжа на сайте «Lenta.ru» (px)
Рис. 18 Значения кегля и интерлиньяжа на сайте «РИА Новости» (px)
Рис. 19 Значения кегля и интерлиньяжа на сайте «РБК» (px)
.
Рис. 20 Значения кегля и интерлиньяжа на сайте «Meduza» (px)
Рис. 21 Контраст литерного контура на главной странице «Lenta.ru»
Рис. 22 Контраст литерного контура на главной странице «РИА Новости»
Рис. 23 Контраст литерного контура на главной странице «РБК»
Рис. 24 Контраст литерного контура на главной странице «Meduza»
Рис. 25 Тонально-цветовой контраст графемы и фона первого экрана (главные
новости). По порядку: «Lenta.ru» «РИА Новости», «РБК», «Meduza»
Рис. 26 Тонально-цветовой контраст графемы и фона ленты новостей (главные
новости). По порядку: «Lenta.ru» «РИА Новости», «РБК», «Meduza»
ПРИЛОЖЕНИЕ 2.
Рис. 1 Зонирование страницы (модульная сетка) на странице «Lenta.ru»
Активное использование модулей - использование ярко выраженных
геометрических блоков по всей площади страницы. На новостной странице такое
деление выражено даже более явно, чем на главной.
Рис. 2 Зонирование страницы (модульная сетка) на странице «РИА Новости»
Активное использование модулей использование ярко выраженных геометрических
блоков по всей площади страницы)
Рис. 3 Зонирование страницы (модульная сетка) на странице «РБК»
Нарушения в использовании модульной сетки на сайте «РБК» распространяются и на
новостной странице.
Рис. 4 Зонирование страницы (модульная сетка) на странице «Медуза»
Активное использование модулей (использование ярко выраженных геометрических
блоков по всей площади страницы).
Новостная страница «Meduza» отмечается отсутствием каких-либо элементов, кроме
заголовка и текста публикации, навигационного меню и футера, а также блока с
рекомендуемыми новостями. Здесь, как и на главной странице сайта прослеживается
очевидное следование модульной организации.
Рис. 5 Негативное пространство страницы (по порядку: «Lenta.ru», «РИА Новости»,
«РБК.ру», «Meduza»).
Рис. 6 Зонирование страницы (Контрастное оформление блоков информации) на
сайте «Lenta.ru»
Рис. 7 Зонирование страницы (Контрастное оформление блоков информации) на
сайте «РИА Новости»
Рис. 8 Зонирование страницы (Контрастное оформление блоков информации) на
сайте «РБК»
Рис. 9 Зонирование страницы (Контрастное оформление блоков информации) на
сайте «Meduza»
Рис. 10 Интерлиньяж и контраст литерного контура на странице «Lenta.ru»
Рис. 11 Интерлиньяж и контраст литерного контура на странице «РИА Новости»
Рис. 12 Интерлиньяж и контраст литерного контура на странице «РБК»
Рис. 13 Интерлиньяж и контраст литерного контура на странице «Meduza»
Рис. 14 Длина наборной строки и абзацный отступ на странице «Lenta.ru»
Рис. 15 Длина наборной строки и абзацный отступ на странице «РИА Новости»
Рис. 16 Длина наборной строки и абзацный отступ на странице «РБК»
Рис. 17 Длина наборной строки и абзацный отступ на странице «Meduza»
Рис. 18 Тонально-цветовой контраст текста и фона
ПРИЛОЖЕНИЕ 3
Рис. 1 Использование модульной сетки на сайте «Lenta.ru»
Как мы видим, главная страница медиаресурса «Lenta.ru» активно использует возможности
своей модульной организации. В общем виде на сайте преобладает вертикальная верстка.
Что же касается ленты новостей, то нельзя сказать, что в ней ярко доминирует либо
квадратный либо прямоугольный модуль, Квадратные блоки (текст + фото) смешаны с
Рис. 2 Использование
модульной только
сетки на
сайте «РИА
Новости»
прямоугольными
блоками, содержащими
заголовок
новости.
Главная страница сайта «РИА Новости» разбита на очевидные модули, верстка
смешанная. В ленте новостей преобладают геометрические блоки
прямоугольной формы. Сайт «РИА Новости» имеет фиксированную ячеистую
структуру, в отличие от «Lenta.ru», где на первый план выходит линейность.
Рис. 3 Использование модульной сетки на сайте «РБК»
Рассматривая общий макет страницы «РБК», мы можем выделить модули, по большей
части прямоугольной формы, использование квадрата практически не встречается.
Рис. 4 Использование модульной сетки на сайте «Meduza»
Рис. 5 Соблюдение геометрической точности линий согласно сетке на сайте «РБК»
Рис. 6 Соблюдение геометрической точности линий согласно сетке на сайте
«Lenta.ru»
Рис. 7 Соблюдение геометрической точности линий согласно сетке на сайте «РИА»
Рис. 8 Соблюдение геометрической
точности линий согласно сетке на сайте
«Meduza»
Рис. 9 Типографика и шрифтовое расписание на сайте «Lenta.ru»
Рис. 10 Типографика и шрифтовое расписание на сайте «РИА Новости»
Рис. 11 Типографика и шрифтовое
расписание на сайте «РБК»
Рис. 12 Симметричность композиции
Рис. 13 Использование цвета
Рис. 14 Негативное пространство
Рис. 15 Ритм и повторы на сайтах «Lenta.ru» и «РИА Новости»
Рис. 16 Ритм и повторы на сайтах «РБК» и «Meduza»
Рис. 17 Функциональность интерфейса на сайте «Lenta.ru»
Рис. 18 Функциональность интерфейса на сайте «РБК»
Рис. 19 Функциональность интерфейса на сайте «РИА Новости»
Рис. 20 Функциональность интерфейса на сайте «Meduza»
ПРИЛОЖЕНИЕ 4.
Табл. 1. Кодировочный лист структурно-функционального анализа главной
страницы медиаресурса в контексте задач юзабилити
№
1
2
3
4
5
6
7
Категория кодирования
Область экрана («F-паттерн визуального восприятия»)
Максимально используется
Минимально используется
Не используется
Зонирование страницы (модульная сетка)
Область экрана разделена на очевидные модули, активное
использование сетки
Область экрана разделена на модули, но
есть нарушения в использовании сетки
Модульная сетка не используется
Негативное пространство страницы
Умеренное распределение негативного пространства между
блоками контента
Широкое разделение блоков контента, много «воздуха»
Слишком узкое разделение блоков контента, «воздуха» нет
Зонирование страницы
Контрастное оформление блоков информации
Высокая контрастность (наличие акцидентального,
аффордативного, селективного контаста)
Низкоконтрастное (присутствует 1 или 2 контраста)
Гомогенность
Дополнительно:
Присутствует акцент на элементах рубрикации – 1 балл;
Присутствует акцент на самые актуальные новости– 1 балл;
Поля страницы
Поля меньше, чем пространство контента
Поля незначительно меньше или равнозначны пространству
контента
Поля больше области контента
Код
3
1
0
3
1
0
3
1
0
3
1
0
1
1
3
1
0
Интерлиньяж :
На 2-4 px больше кегля
На 5-6 px больше кегля
Более 7 px
Дополнительно:
Нет ошибок интерлиньяжа
Наличие 1-2 ошибок интерлиньяжа
Наличие более 2 ошибок
1
0
-1
Контраст литерного контура
Класс шрифтов в заголовках:
Сансериф (рубленные, гротеск)
Сериф (с засечками)
Используются разные гарнитуры
Акцидентные
3
1
1
0
3
1
0
8
9
Насыщенность заголовков:
Использование жирного или полужирного начертаний
Использование нормального или иных начертаний
Класс шрифтов в ленте новостей:
Сансериф (рубленные, гротеск) - 3 балла;
Сериф (с засечками) - 1 балл;
Используются разные гарнитуры - 1 балл;
Акцидентные - 0 баллов;
Насыщенность шрифтов в ленте новостей:
Использование жирного или полужирного начертаний – 3 балла;
Используется только нормальное начертания – 0 баллов;
Тонально-цветовой контраст
Первый экран (главное):
Высокая контрастность текста и фона – 3 балла;
Средняя контрастность текста и фона – 1 балл;
Низкая контрастность текста и фона – 0 баллов;
Лента новостей:
Высокая контрастность текста и фона – 3 балла;
Средняя контрастность текста и фона – 1 балл;
Низкая контрастность текста и фона – 0 баллов;
Гарнитура
Использование 2 гарнитур – 3 балла;
Использование 1 гарнитуры – 1 балл;
Использование > 2 гарнитур – 0 баллов;
3
0
3
1
1
0
3
0
3
1
0
3
1
0
3
1
0
Табл. 2. Кодировочный лист структурно-функционального анализа
новостной страницы медиаресурса в контексте задач юзабилити
№
1
2
3
4
5
Категория кодирования
Зонирование страницы (модульная сетка)
Область экрана разделена на очевидные модули, активное
использование сетки
Область экрана разделена на модули, но есть нарушения в
использовании сетки
Модульная сетка не используется
Негативное пространство страницы
Умеренное распределение негативного пространства между
блоками контента
Отсутствие лишних деталей, много «воздуха»
Концентрация элементов, мало «воздуха»
Дополнительно
Рекламные блоки отсутствуют
1-2 рекламных блока
3 и более рекламных блоков
Зонирование страницы
Контрастное оформление блоков информации
Высокая контрастность (наличие акцидентального,
аффордативного, селективного контаста)
Низкоконтрастное (присутствует 1 или 2 контраста)
Гомогенность
Дополнительно:
Наличие иллюстраций к тексту
Иллюстрации отсутствуют
Интерлиньяж:
Заголовок
На 2-4 px больше кегля
На 5-6 px больше кегля
>7 px или < 2 px
Основной текст
На 2-4 px больше кегля
На 5-6 px больше кегля
>7 px или < 2 px
Дополнительно:
Нет ошибок интерлиньяжа
Наличие 1-2 ошибок интерлиньяжа
Наличие более 2 ошибок
Контраст литерного контура
Класс шрифтов в заголовках:
Сансериф (рубленные, гротеск)
Сериф (с засечками)
Акцидентные
Насыщенность заголовков:
Код
3
1
0
3
1
0
3
1
0
3
1
0
3
0
3
1
0
3
1
0
1
0
1
3
1
0
6
7
8
9
Использование жирного или полужирного начертаний
Использование нормального или иных начертаний
ЛИД:
Используется отличная от основного текста гарнитура или
начертание
Используется та же гарнитура и начертание, что и в основном
тексте
Лид отсутствует
Основной текст:
Сериф (с засечками)
Сансериф (рубленные, гротеск)
Акцидентные
Длина строки
60-80 символов – 3 балла;
80-95 символов – 1 балл;
< 60 символов или > 95 символов – 0 баллов;
Тонально-цветовой контраст
Высокая контрастность текста и фона
Средняя контрастность текста и фона
Низкая контрастность текста и фона
Гарнитура
Использование 2 гарнитур
Использование 1 гарнитуры
Использование > 2 гарнитур
Пробелы (Абзацный отступ внутри публикации)
Пробел в 3-4 символа
Пробел < 3 или > 4 символов
Дополнительно
Фиксированный пробел
Нефиксированный пробел
3
0
3
1
0
3
1
0
3
1
0
3
1
0
3
1
0
3
1
3
0
Табл. 3. Кодировочный лист реализации функционально-эстетических
критериев минимализма в визуальной организации медиаресурса
1
2
3
4
5
6
7
8
Категория кодирования
Использование модульной сетки:
Модульная сетка присутствует
Модульная сетка отсутствует
Лента новостей:
Активное использование модулей (ярко выраженные одинаковые
геометрических блоки по всей площади страницы)
Преобладание квадратного или прямоугольного модуля
Нет ярко выраженного доминирования
Соблюдение геометрической точности линий согласно сетке:
Геометрическая точность линий и форм соблюдена по всей странице
Геометрическая точность линий и форм не соблюдена
Типографика и шрифтовое расписание:
Количественный признак:
Использование 1 гарнитуры – 3 балла;
Использование более 2 и более гарнитур – 0 баллов;
Качественный признак:
Использование только сансерифа
Использование сансерифа и серифа
Использование только серифа
Симметричность композиции:
Композиция асимметрична
Чередование принципов симметрии и ассиметрии
Композиция в целом симметрична
Использование цвета:
Монохромность или 1 контрастный цвет
Кроме черного используется 2-3 цвета
Кроме черного используются > 3 цветов
Дополнительно (типографика):
Кроме черного и его оттенков используется 1-2 цвета
Кроме черного и его оттенков используется 3 цвета
Кроме черного и его оттенков используется >3 цветов
Использование негативного пространства страницы:
Умеренное распределение негативного пространства между блоками контента
Широкое разделение блоков контента, много «воздуха»
Слишком узкое разделение блоков контента, «воздуха» нет
Ритм и повторы:
Элементы оформления создают ритм по всей странице
Элементы оформления создают ритм по странице частично
Элементы оформления не создают ритм
Функциональность интерфейса:
Элементы навигации и поиска контента расположены в одном месте
Код
3
0
3
1
0
3
0
3
0
3
1
0
3
1
0
3
1
0
3
1
0
3
1
0
3
1
0
3
9
10
11
12
Элементы навигации и поиска контента расположены в непосредственной
близости, но не рядом
Элементы навигации и поиска контента расположены в разных областях экрана
Навигация:
Навигационное меню фиксировано и не меняет свое положения при прокрутке
Навигационное меню не имеет строго фиксированного положения и исчезает с
области просмотра при прокрутке
Многокомпонентность навигации:
Использование одноуровневой навигации
Использование двухуровневой навигации
Более сложная организация навигации
Контрастность страницы:
Высокая контрастность между блоками информации
Средняя контрастность между блоками информации
Низкая контрастность между блоками информации
Мнение эксперта
Медиаресурс, дизайн которого наиболее соответствует эстетике минимализма
Медиаресурс, дизайн которого занимает 2 место в аспекте эстетики
минимализма
Медиаресурс, дизайн которого занимает 3 место в аспекте эстетики
минимализма
Медиаресурс, дизайн которого наименее соответствует эстетике минимализма:
1
0
3
0
3
1
0
3
1
0
3
1
0
-1
Табл. 4. Структурно-функциональный анализ главной страницы сайта в
контексте задач юзабилити
«Me duz a
»
« Р Б К. р
у»
« Р ИА»
« Le n t a. r
u»
Параметры
Кодирование
1
2
3
4
5
6
7
Область экрана («F-паттерн визуального восприятия»)
Максимально используется – 3 балла;
Минимально используется – 1 балл;
Не используется – 0 баллов;
Зонирование страницы (модульная сетка)
Область экрана разделена на очевидные модули, активное
использование сетки – 3 балла;
Область экрана разделена на модули, но есть нарушения в
использовании сетки – 1 балл;
Модульная сетка не используется – 0 баллов;
Негативное пространство страницы
Умеренное распределение негативного пространства между блоками
контента – 3 балла;
Широкое разделение блоков контента, много «воздуха» – 1 балл;
Слишком узкое разделение блоков контента, «воздуха» нет – 0 баллов;
Зонирование страницы
Контрастное оформление блоков информации
Высокая контрастность (наличие акцидентального, аффордативного,
селективного контаста) – 3 балла;
Низкоконтрастное (присутствует 1 или 2 контраста) – 1 балл;
Гомогенность – 0 баллов;
Дополнительно:
Присутствует акцент на элементах рубрикации – 1 балл;
Присутствует акцент на самые актуальные новости– 1 балл;
Поля страницы
Поля меньше, чем пространство контента - 3 балла;
Поля незначительно меньше или равнозначны пространству контента
- 1 балл;
Поля больше области контента - 0 балл;
Интерлиньяж :
На 2-4 px больше кегля – 3 балла;
На 5-6 px больше кегля – 1 балл;
Более 7 px – 0 баллов;
Дополнительно:
Нет ошибок интерлиньяжа – 1 балл;
Наличие 1-2 ошибок интерлиньяжа – 0 баллов;
Наличие более 2 ошибок: – 1 балл;
Контраст литерного контура
Класс шрифтов в заголовках:
3
1
3
1
3
3
1
3
0
3
1
0
3
3
1
1
2
2
2
2
1
0
3
3
3
3
1
-1
1
0
3
0
Сансериф (рубленные, гротеск) - 3 балла;
Сериф (с засечками) - 1 балл;
Используются разные гарнитуры - 1 балл;
Акцидентные - 0 баллов;
Насыщенность заголовков:
Использование жирного или полужирного начертаний - 3 балла;
Использование нормального или иных начертаний – 0 баллов;
Класс шрифтов в ленте новостей:
Сансериф (рубленные, гротеск) - 3 балла;
Сериф (с засечками) - 1 балл;
Используются разные гарнитуры - 1 балл;
Акцидентные - 0 баллов;
Насыщенность шрифтов в ленте новостей:
Использование жирного или полужирного начертаний – 3 балла;
Используется только нормальное начертания – 0 баллов;
8
9
Тонально-цветовой контраст
Первый экран (главное):
Высокая контрастность текста и фона – 3 балла;
Средняя контрастность текста и фона – 1 балл;
Низкая контрастность текста и фона – 0 баллов;
Лента новостей:
Высокая контрастность текста и фона – 3 балла;
Средняя контрастность текста и фона – 1 балл;
Низкая контрастность текста и фона – 0 баллов;
Гарнитура
Использование 2 гарнитур – 3 балла;
Использование 1 гарнитуры – 1 балл;
Использование > 2 гарнитур – 0 баллов;
ИТОГО:
1
3
3
3
3
3
0
3
1
3
3
1
3
3
0
3
3
3
1
3
1
1
0
3
1
1
3
28
32
23
31
3
Табл. 5. Структурно-функциональный анализ новостной страницы в
контексте задач юзабилити
«Me duz a
»
« Р Б К. р
у»
« Р ИА»
« Le n t a. r
u»
Параметры
Кодирование
1
2
3
4
5
Зонирование страницы (модульная сетка)
Область экрана разделена на очевидные модули, активное
использование сетки – 3 балла;
Область экрана разделена на модули, но есть нарушения в
использовании сетки – 1 балл;
Модульная сетка не используется – 0 баллов;
Негативное пространство страницы
Умеренное распределение негативного пространства между блоками
контента - 3 балла;
Отсутствие лишних деталей, много «воздуха» – 1 балл;
Концентрация элементов, мало «воздуха» – 0 баллов;
Дополнительно:
Рекламные блоки отсутствуют – 3 балла;
1-2 рекламных блока – 1 балл;
3 и более рекламных блоков – 0 баллов;
Зонирование страницы
Контрастное оформление блоков информации
Высокая контрастность (наличие акцидентального, аффордативного,
селективного контаста) – 3 балла;
Низкоконтрастное (присутствует 1 или 2 контраста) – 1 балл;
Гомогенность – 0 баллов;
Дополнительно:
Наличие иллюстраций к тексту – 3 балла;
Иллюстрации отсутствуют – 0 баллов;
Интерлиньяж
Заголовок
На 2-4 px больше кегля – 3 балла;
На 5-6 px больше кегля – 1 балл;
>7 px или < 2 px – 0 баллов;
Основной текст
На 2-4 px больше кегля – 3 балла;
На 5-6 px больше кегля – 1 балл;
>7 px или < 2 px – 0 баллов;
Дополнительно:
Нет ошибок интерлиньяжа – 1 балл;
Наличие 1-2 ошибок интерлиньяжа – 0 баллов;
Наличие более 2 ошибок: – 1 балл;
Контраст литерного контура
Класс шрифтов в заголовках:
3
3
1
3
3
3
0
1
1
0
0
1
3
1
3
1
3
3
3
0
0
1
1
3
3
0
0
3
0
1
1
1
6
7
8
9
Сансериф (рубленные, гротеск) – 3 балла;
Сериф (с засечками) – 1 балл;
Акцидентные – 0 баллов;
Насыщенность заголовков:
Использование жирного или полужирного начертаний – 3 балла;
Использование нормального или иных начертаний – 0 баллов;
ЛИД:
Используется отличная от основного текста гарнитура или начертание –
3 балла;
Используется та же гарнитура и начертание, что и в основном тексте –
1 балл;
Лид отсутствует – 0 баллов;
Основной текст:
Сериф (с засечками) – 3 балла;
Сансериф (рубленные, гротеск) – 1 балл;
Акцидентные – 0 баллов;
Длина строки
60-80 символов – 3 балла;
80-95 символов – 1 балл;
< 60 символов или > 95 символов – 0 баллов;
Тонально-цветовой контраст
Высокая контрастность текста и фона – 3 балла;
Средняя контрастность текста и фона – 1 балл;
Низкая контрастность текста и фона – 0 баллов;
Гарнитура
Использование 2 гарнитур – 3 балла;
Использование 1 гарнитуры – 1 балл;
Использование > 2 гарнитур – 0 баллов;
Пробелы (Абзацный отступ внутри публикации)
Пробел в 3-4 символа – 3 балла;
Пробел < 3 или > 4 символов – 1 балл;
Дополнительно
Фиксированный пробел – 3 балла;
Нефиксированный пробел – 0 баллов;
ИТОГО:
1
3
1
1
3
3
3
0
0
0
1
0
3
1
1
3
3
3
0
3
1
0
1
3
1
1
3
1
3
3
3
3
3
3
0
0
34
29
22
27
Табл. 6 Результаты тестирования ассесоров
№
критери
я
«Lenta.ru»
«РБК»
«РИА Новости»
«Meduza»
1
33333333333
31100101031
13313333331
01313111113
2
33113333333
31111101110
13313333333
10313311011
3
11333333333
11310000130
13310313331
10313111111
4
33333333333
31111111131
13133313331
00333101313
5
31333333331
31310310111
03311333331
01311113111
6
33313333333
13311333331
33133333331
33331333333
ИТОГО
184
87
156
108
Табл. 7 Результаты тестирования ассесоров
№
критерия
«Lenta.ru»
«РБК»
«РИА
Новости»
«Meduza»
1
33
11
27
16
2
3
4
5
6
29
29
33
29
11
10
15
15
29
22
25
24
15
14
18
14
31
25
29
31
184
87
156
108
ИТОГО
Табл. 8. Реализация функционально-эстетических критериев минимализма
«Me duz a
»
« Р Б К. р
у»
« Р ИА»
« Le n t a. r
u»
Параметры
Кодирование
1
2
3
4
5
6
7
Использование модульной сетки:
Модульная сетка присутствует – 3 балла;
Модульная сетка отсутствует – 0 баллов;
Лента новостей:
Активное использование модулей (ярко выраженные одинаковые
геометрических блоки по всей площади страницы) – 3 балла;
Преобладание квадратного или прямоугольного модуля – 1 балла;
Нет ярко выраженного доминирования – 0 баллов;
Соблюдение геометрической точности линий согласно сетке:
Геометрическая точность линий и форм соблюдена по всей странице
– 3 балла;
Геометрическая точность линий и форм не соблюдена – 0 баллов;
Типографика и шрифтовое расписание:
Количественный признак:
Использование 1 гарнитуры – 3 балла;
Использование более 2 и более гарнитур – 0 баллов;
Качественный признак:
Использование только сансерифа – 3 балла;
Использование сансерифа и серифа – 1 балл;
Использование только серифа – 0 баллов;
Симметричность композиции:
Композиция асимметрична – 3 балла;
Чередование принципов симметрии и ассиметрии – 1 балл;
Композиция в целом симметрична – 0 баллов;
Использование цвета:
Монохромность или 1 контрастный цвет – 3 балла;
Кроме черного используется 2-3 цвета – 1 балл;
Кроме черного используются > 3 цветов – 0 баллов;
Дополнительно (типографика):
Кроме черного и его оттенков используется 1-2 цвета – 3 балла;
Кроме черного и его оттенков используется 3 цвета – 1 балл;
Кроме черного и его оттенков используется >3 цветов – 0 баллов;
Использование негативного пространства страницы:
Умеренное распределение негативного пространства между блоками
контента – 3 балла;
Широкое разделение блоков контента, много «воздуха» – 1 балл;
Слишком узкое разделение блоков контента, «воздуха» нет - 0
баллов;
Использование негативного пространства страницы:
3
3
3
3
0
1
1
3
3
3
0
3
0
3
3
0
1
3
3
1
1
1
3
0
3
3
3
3
3
3
0
3
0
3
1
0
8
9
10
11
12
Умеренное распределение негативного пространства между блоками
контента – 3 балла;
Широкое разделение блоков контента, много «воздуха» – 1 балл;
Слишком узкое разделение блоков контента, «воздуха» нет - 0
баллов;
Функциональность интерфейса:
Элементы навигации и поиска контента расположены в одном месте
– 3 балла;
Элементы навигации и поиска контента расположены в
непосредственной близости, но не рядом – 1 балл;
Элементы навигации и поиска контента расположены в разных
областях экрана – 0 баллов;
Навигация:
Навигационное меню фиксировано и не меняет свое положения при
прокрутке – 3 балла;
Навигационное меню не имеет строго фиксированного положения и
исчезает с области просмотра при прокрутке– 0 баллов;
Многокомпонентность навигации:
Использование одноуровневой навигации – 3 балла;
Использование двухуровневой навигации – 1 балл;
Более сложная организация навигации – 0 баллов;
Контрастность страницы:
Высокая контрастность между блоками информации – 3 балла;
Средняя контрастность между блоками информации – 1 балл;
Низкая контрастность между блоками информации – 0 баллов;
Мнение эксперта:
Медиаресурс, дизайн которого наиболее соответствует эстетике
минимализма – 3 балла;
Медиаресурс, дизайн которого занимает 2 место в аспекте эстетики
минимализма – 1 балл;
Медиаресурс, дизайн которого занимает 3 место в аспекте эстетики
минимализма – 0 баллов;
Медиаресурс, дизайн которого наименее соответствует эстетике
минимализма: -1 балл;
ИТОГО
3
3
1
3
3
1
3
3
3
0
3
0
3
1
3
3
1
3
0
3
3
0
-1
1
30
28
26
29
Табл. 9. Результаты исследования
«Lenta.
ru»
«РИА
Новос
ти»
«РБК»
«Meduza»
Ранжирование
результатов
Структурно-функциональный
1
анализ главной страницы
сайта в контексте задач
юзабилити
Структурно-функциональный
2 анализ новостной страницы в
контексте задач юзабилити
28
32
23
31
34
29
22
27
ПРОМЕЖУТОЧНЫЙ
РЕЗУЛЬТАТ
62
61
45
58
30
28
26
29
92
89
71
87
184
156
87
108
273
246
158
194
«РИА Новости»
«Meduza»
«Lenta.ru»
«РБК»
«Lenta.ru»
«РИА Новости»
«Meduza»
«РБК»
«Lenta.ru»
«РИА
Новости»
«Meduza»
«РБК»
«Lenta.ru»
«Meduza»
«РИА
Новости»
«РБК»
«Lenta.ru»
«РИА
Новости»
«Meduza»
«РБК»
«Lenta.ru»
«РИА
Новости»
«Meduza»
«РБК»
1. «Lenta.ru»
2. «РИА
Новости»
3. «Meduza»
4. «РБК»
Исследование
3
Реализация функциональноэстетических критериев
минимализма
ПРОМЕЖУТОЧНЫЙ
РЕЗУЛЬТАТ
4
Результаты тестирования
асессоров
ОБЩИЙ РЕЗУЛЬТАТ
ПРИЛОЖЕНИЕ 5
Диаграмма 1. Структурно-функциональный анализ главной страницы сайта
в контексте задач юзабилити
1
3
1
1
3
3
1
2
3
3
0
1
3
3
0
3
3
4
5
5
3
3
5
0
1
2
4
6
3
1
10
6
7
12
8
6
1
8
4
4
3
1
1
9
3
0
2
4
«Lenta.ru»
6
«РИА»
8
«РБК.ру»
10
«Meduza»
12
14
Диаграмма 2. Структурно-функциональный анализ новостной страницы в
контексте задач юзабилити
3
1
1
3
3
2
0
2
3
4
1
6
3
4
6
7
2
2
4
3
4
«Lenta.ru»
«РИА»
«РБК.ру»
«Meduza»
6
5
7
7
3
3
3
3
6
3
1
7
0
1
1
3
8
1
1
3
3
9
6
6
0
1
2
3
4
5
6
7
8
Диаграмма 3. Реализация функционально-эстетических критериев
минимализма
6
4
4
1
3
3
20
3
3
1
6
6
3
1
0
4
3
1
1
5
0
6
0
1
7
1
8
3
3
3
3
3
3
3
3
3
1
3
3
110
3
1
-1
«Lenta.ru»
«РИА»
«РБК.ру»
«Meduza»
3
1
10
-2
6
6
3
0
90
-1
6
3
1
120
3
0
1
2
3
4
5
6
7
Диаграмма 5. Сравнение результатов проведенных исследований
300
250
200
150
100
50
0
«Lenta.ru»
«РИА Новости»
«РБК»
«Meduza»
100
90
80
70
60
Структурно-функциональный
анализ главной страницы сайта
в контексте задач юзабилити
Структурно-функциональный
анализ новостной страницы в
контексте задач юзабилити
30
50
40
30
20
10
M
ed
uz
a
РБ
К
РИ
А
Ле
нт
а
0
Отзывы:
Авторизуйтесь, чтобы оставить отзыв