Функциональный аспект графического интерфейса сетевых медиа

Борисова Алина Андреевна

Функциональный аспект графического интерфейса сетевых медиа

Аннотация выпускной квалификационной работы Борисовой Алины Андреевны «Функциональный аспект графического интерфейса сетевых медиа» Н. рук. - Якунин Александр Васильевич, канд. филологических наук, доцент Кафедра медиадизайна и информационных технологий Очно-заочная форма обучения Дипломная работа представляет собой изучение функционального аспекта графического интерфейса сетевых медиа. Проект включает в себя две главы. В первой рассматриваются основные понятия, подходы и методы улучшения юзабилити, вырабатываются критерии измерения эргономичности меню. Вторая глава посвящена выявлению наиболее релевантного варианта ориентации меню для качественных и массовых сетевых медиа. В неё включен анализ меню как функционального аспекта сетевых медиа по кодировочному листу, дополненный тестированием асессоров по системе SUS. Актуальность исследования заключается в обозначении способов улучшения эффективности и удобства использования меню на сайтах сетевых медиа. Цель исследования: выявить наиболее релевантный способ ориентации навигационного меню на сайтах качественных и массовых сетевых медиа в каждом отдельном случае Объект: интерфейсы сетевых медиа, использующих различные модели ориентации меню. Предмет: эргономика меню как навигационного компонента графического интерфейса сетевых медиа. Теоретическая база исследования состоит из публикаций теоретиков дизайна интерфейсов: Нильсен Я., Геррет Д., Уэншейк С. и других. Эмпирическая база исследования состоит из 18 сайтов онлайн-медиа, рассмотренных по 15 параметрам. В заключении сформулированы наиболее значимые выводы дипломной работы. Основные: Для качественных сетевых медиа наиболее эффективным является горизонтальное меню.Для массовых сетевых медиа наиболее эффективным является вертикальное меню.

Массовая коммуникация. Журналистика. Средства массовой информации

Дипломы

Вуз: Санкт-Петербургский государственный университет (СПбГУ)

ID: 5a6f88107966e12684ee9e69

UUID: ea7e04fe-799b-413f-877d-1c6c91198f23

Язык: Русский

Опубликовано: около 6 лет назад

Просмотры: 9

Борисова Алина Андреевна

Источник: Санкт-Петербургский государственный университет

Комментировать 0

Рецензировать 0

Скачать - 732,0 КБ

Поделиться работой

САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ Институт «Высшая школа журналистики и массовых коммуникаций» На правах рукописи БОРИСОВА Алина Андреевна Функциональный аспект графического интерфейса сетевых медиа ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА по направлению «Журналистика» научно-исследовательская работа Научный руководитель – кандидат филологических наук, доцент А.В. Якунин Кафедра медиадизайна и информационных технологий Очно—заочная форма обучения Вх. №______от__________________ Секретарь _____________________ Санкт-Петербург 2017

2 ОГЛАВЛЕНИЕ Введение………………………………………………………………………...…3 Глава I. Функциональный аспект графического интерфейса: основные понятия…………………………………………………………………………….7 1.1 Графический интерфейс: ключевые аспекты. Основные подходы к организации человеко-компьютерного взаимодействия...………………….......7 1.2 Теоретические аспекты юзабилити………….………….….…..……….......15 1.3 Критерии измерения эргономичности меню как основного элемента навигации графического интерфейса: выработка и обоснование методов……………………..………………………………………….……........25 Глава II. Навигационное меню как основной функциональный элемент графического интерфейса сетевых медиа……………………………………...34 2.1 Структурно-функциональный анализ меню сетевых медиа в контексте задач юзабилити……………………...……………………………………….....32 2.2 Анализ соответствия различных типов ориентации меню субъективному пользовательскому опыту…………..………....………………………………...51 Заключение……………………………………………………………………….56 Список использованной литературы…………………………………………...58 Приложение 1…………………………………………………………………....63 Приложение 2…………………………………………………………………....64 Приложение 3…………………………………………………………………....67 Приложение 4…………………………………………………………………....77

3 ВВЕДЕНИЕ Функциональность графического интерфейса оказывает значительное влияние на удовлетворенность пользователя веб-сайта сетевого медиа. Именно со взаимодействия с интерфейсом читатель начинает знакомство с сетевым медиа, и если указанное взаимодействие будет неудобным — лишь несколько кликов мышкой будет отделять пользователя от закрытия конкретного сайта и выбора другого, позволяющего решить его задачу быстрее. Роль содержания на веб-сайте сетевого медиа играет меню, поэтому в рамках данного исследования мы сосредоточимся именно на нём, как на крупнейшем элементе навигации, напрямую влияющем на функциональность интерфейса. Для выяснения наиболее эффективного способа расположения меню мы исследуем интерфейсы сетевых медиа с различными вариантами ориентации меню — горизонтально, вертикально и c использованием обоих указанных видов, с помощью опроса и критериев эргономичности, выработанных нами на основании существующего теоретического материала. Степень разработанности проблемы. Большой вклад в данную тему внесли следующие группы авторов: — выработавшие основополагающие принципы эффективного графического интерфейса: Купер Д., Мандел Т., Нильсен Д. и другие; — исследовавшие юзабилити и особенности человеко-компьютерного взаимодействия: Мэхью Д., Беван Н., Саукен К., Саффер Д., Норман Д., Хуанг М., Гайсслер Г., Уэншейк С., Дэнг Л. и Пол М., Гаррет Д. и другие; — исследовавшие особенности организации меню: Питтсли К. и Меммотт С., Леутольд С., Шмутц П., Баргас-Авила Д., Туч А. и Опвис К., Мурано П. и

4 Ломас Т., Бернард М., Хамблин С. и Чапарро Б., Баррелл А. и Содан А., Фанг Х. и Голшапль С. и другие. Актуальность исследования заключается в обозначении способов улучшения юзабилити меню на сайтах сетевых медиа. Фокус исследования направлен на выявление наиболее релевантного способа ориентации навигационного меню для массовых и для качественных сетевых изданий. Новизна работы заключается в исследовании эргономики меню как навигационного компонента применительно к сетевым медиа. Объектом данного исследования являются интерфейсы интернет-СМИ, использующих различные модели ориентации меню. Предметом исследования являются эргономика меню как навигационного компонента графического интерфейса интернет-СМИ. Целью исследования является выявление наиболее релевантного способа ориентации навигационного меню на сайтах качественных и массовых сетевых медиа в каждом отдельном случае. В ходе исследования нами была поставлена серия взаимосвязанных задач: 1) Охарактеризовать несколько ключевых для данного исследования понятий; 2) Изучить работы предшественников по данной теме; 3) Обозначить различные подходы к организации человеко-компьютерного взаимодействия; 4) Выявить и сформулировать критерии измерения эргономичности меню сетевого медиа; 5) Проанализировать выбранные графические интерфейсы сетевых медиа и оценить их в соответствии с кодировочным листом;

5 6) Дополнить исследование опросом и сделать выводы о наилучшем способе расположения меню для качественных и массовых сетевых медиа. Для составления теоретической основы исследования в нашей работе мы будем опираться как на зарубежные исследования, касающиеся как эргономичности меню, так и исследований эргономичности интерфейса в целом, так и на книги, посвященные графическим интерфейсам и характеру взаимодействия пользователя с ними, в том числе: Купер А., Кронин Д., Рейманн Р.М. «Об интерфейсе. Основы проектирования взаимодействия», Гарретт Д. «Веб-дизайн. Элементы опыта взаимодействия», Саффер Д. «Микроинтерации»; электронные ресурсы, на которых публикуются актуальная информация, связанная с темой настоящей работы, в том числе на исследования Nielsen Norman Group. Логика работы обусловлена методологической базой, собравшей в себе несколько методов научного исследования, включающих наблюдение, сравнение, счет, обобщение, анализ, опрос. Эмпирический материал исследования составляют 18 веб-сайтов сетевых медиа, которые разделены на 2 группы по 3 подгруппы в каждой. Ими являются, в частности, сетевые медиа «Российская газета», «БИЗНЕС Online», «NewsRu», «Газета.ru», «Ведомости», «Эксперт Online», «Известия», «Forbes», «Новая газета», «Югополис», «Петербургский дневник», «Lenta.ru», «Meduza», «Сноб», «Фонтанка», «The Village», «Esquire», «Cosmopolitan». Лoгикa иccлeдoвaния oбуcлoвилa cтруктуру рaбoты, cocтoящeй из ввeдeния, двух глaв, первая из которых реализована в трёх параграфах. Пeрвaя глaвa посвящена анализу уже имеющихся сведений по заданной теме исследования и включает в себя характеристику основных понятий, необходимых для раскрытия темы, рассматривает особенности взаимодействия пользователя с графическим интерфейсом, а также содержит

6 описание факторов, имеющих значение для оценки эргономичности меню. Вторая глава включает в себя два параграфа, первый из которых посвящен структурно-функциональному анализу меню, а второй — описанию хода и результатов тестирования асессоров по шкале SUS. В заключении пoдвoдятcя итоги прoвeдeннoгo иccлeдoвaния и делаются выводы.

7 ГЛАВА 1. ФУНКЦИОНАЛЬНЫЙ АСПЕКТ ГРАФИЧЕСКОГО ИНТЕРФЕЙСА: ОСНОВНЫЕ ПОНЯТИЯ 1.1 Графический интерфейс: ключевые аспекты. Основные подходы к организации человеко-компьютерного взаимодействия Важными элементами мотивации возвратов на сайт являются понятная архитектура, средства навигации и представление контента. В этой связи высокое значение приобретает эргономический аспект дизайна. В соответствии с утверждением Попова А.А.1, эргономика рассматривает факторы взаимодействия человека и компьютера. Эргономичность взаимодействия человека и техники предусматривает единство таких эргономических свойств, как управляемость, обслуживаемость, освояемость и обитаемость. Под системой взаимодействия «человек-компьютер» понимается совокупность алгоритмов, правил и соглашений для обмена информацией между программным приложением и пользователем с учетом его потребностей. Условно эргономику можно разделить на три подобласти: — Микроэргономика. Включает в себя исследование и проектирование систем «человек-машина», в том числе интерфейсов «человек-компьютер»; — Мидиэргономика. В рамках неё исследуется взаимодействие на уровне рабочих мест и производственных задач; — Макроэргономика. Включает в себя исследование и проектирование систем «человек – социум, общество, государство», «организация-система организаций»2. Попов А.А. Эргономика пользовательских интерфейсов в информационных системах. URL: http://www.knorus.ru/upload/knorus_new/pdf/11720.pdf 2 Usability.gov URL: h ttp://www.usability.ru/glossary.htm 1

8 Применительно к данному исследованию нас будет интересовать область микроэргономики интерфейса. В соответствии с определением, данным в «Большой психологической энциклопедии», «Микроэргономика» (англ. micro-ergonomics) — область эргономики, первоначально рассматривающая дизайн интерфейсов между человеком и др. элементами системы, включая интерфейсы человек-работа, человек-машина, человек-программное обеспечение и человек-среда»3. В рамках рассмотрения функционального аспекта графического интерфейса сетевых медиа необходимо дать характеристику нескольким ключевым понятиям. В соответствии с Кэмбриджским словарём, графический пользовательский интерфейс, graphical user interface, или GUI — это «способ организации информации на компьютерном экране, которую легко понять и использовать потому, что она использует иконки, меню и мышку, а не только текст»4. Изначально GUI был реализован для персональных компьютеров, но в настоящее время используется и для других устройств, в том числе бытовых. GUI делает продукт легче для использования благодаря визуальным контролерам, таким, как меню, кнопки, списки и окна. По определению «является Мандела графическим Т., графический представлением пользовательский интерфейс на экране компьютера интерактивного взаимодействия с программами, объектами и данными. Вместе с тем он обеспечивает пользователя нужным инструментарием и приложениями, а не просто списком функций»5. Основная черта GUI — возможность напрямую манипулировать объектами на экране. 3 4 ольшая Психологическая энциклопедия. URL: Б http://psychology.academic.ru/6764/ Cambridge Advanced Learner's Dictionary & Thesaurus . URL: http://dictionary.cambridge.org/ru/ 5 Мандел Т. Разработка пользовательского интерфейса. М., 2001

9 В исследовании Memon6 A. подчеркивается иерархичность GUI , которая выражается в группировке событий в окнах, иерархических меню и диалогах. Типичный пользователь графического интерфейса фокусируется на функциональности тех или иных действий, открывая конкретные окна или кликая на разворачивающееся меню. В соответствии с исследованием7 важными характеристиками графического пользовательского интерфейса являются: графическая ориентация, управление событиями, иерархическая структура, виджеты, которые он содержит, и свойства этих виджетов. В любое время во время использования конкретного GUI эти свойства имеют определенные параметры, установки которых определяют набор свойств интерфейса. Мандел Т8. выделяет две концепции, которые относятся к функциональности интерфейса и могут использоваться при определении подхода к проектированию взаимодействия, в частности: — Концепция взаимодействия пользователя с интерфейсом «Объект-операция» применима ко всем элементам интерфейса: сначала выбирается объект, а затем действие, которое необходимо с ним совершить. Если определены подобъекты объекта, можно оперировать ими и изменять их свойства. Этот подход позволяет применять схожие принципы работы со всеми объектами. — Альтернативный подход — «Операция-объект». Он применялся во многих интерфейсах на основе командной строки и меню. По версии портала Usability9, «пользовательский графический интерфейс объединяет в себе все элементы и компоненты программы, которые способны оказывать влияние на взаимодействие пользователя с emon A. GUI Ripping: Reverse Engineering of Graphical User Interfaces for Testing. M Maryland, 2003. URL: http://cgis.cs.umd.edu/~atif/papers/MemonWCRE2003.pdf 7 Там же 8 Мандел Т. Разработка пользовательского интерфейса. М., 2001 9 Usability.gov. URL:https://guidelines.usability.gov/ 6

10 программным обеспечением»10. В частности, он включает в себя следующие элементы: — «средства отображения информации, отображаемая информация, форматы и коды; — командные режимы, язык пользователь-интерфейс; — устройства и технологии ввода данных; — диалоги, взаимодействие и транзакции между пользователем и компьютером; — обратная связь с пользователем; — поддержка принятия решений в конкретной предметной области; — порядок использования программы и документация на нее»11. Любое взаимодействие пользователя с продуктом подразумевает инициацию этого взаимодействия, которая возможна благодаря элементам управления. Мандел Т.12 выделяет следующие элементы управления, используемые в графическом пользовательском интерфейсе: — Набор значений для поля ввода; — Отрывное меню для панели меню; — Флажок для панели инструментов; — Контейнер для поля списка; — Полоса прокрутки для ниспадающего меню; — Скользящий маркер для каскадных меню; — Выпадающий список для командной кнопки; — Поле ввода или поле списка для всплывающего меню; — Выпадающее поле комбинаций для радиокнопки (переключатель, который позволяет выбрать один пункт из предопределенного набора); sability.gov. URL: U http://www.usability.ru/glossary.htm#UI Там же 12 Мандел Т. Разработка пользовательского интерфейса. М., 2001 10 11

11 — Палитра инструментов13. Все перечисленные элементы относятся к навигации — комплексу средств, связанных с тем, чтобы посетитель мог как можно быстрее решить свою задачу и найти искомое. В соответствии с ГОСТ Р ИСО 14915-1-201014, понятие “Навигация” включает в себя: «1) процесс работы пользователя с сайтом; 2) - пути, проложенные на сайте; 3) - интерфейс сайта»15. Для достижения этой задачи используются следующие элементы: — логотип (он должен быть информативным, отображаться на всех страницах и ссылаться на главную); — меню (должно отображаться на всех страницах, отображать структуру сайта и не быть перенасыщенным); — поиск; — панель иконок, пиктограммы, соц.кнопки; — строка навигации braedcrumbs (адрес страницы в структуре сайта); — выделенные текстовые блоки; — анимированные баннеры; — кнопка «наверх», если страница большая; — карта сайта. В рамках данного исследования мы остановимся на навигации, а именно на меню, как на важнейшем его и наиболее функциональном аспекте. По Куперу А.16, основное назначение меню заключается в том, чтобы рассказать пользователю о доступных возможностях, о том, как ими воспользоваться и какие быстрые комбинации клавиш им соответствуют. Меню должны не только определять, где находится та или иная функция, но Мандел Т. Разработка пользовательского интерфейса. М., 2001. ГОСТ Р ИСО 14915-1-2010 Эргономика мультимедийных пользовательских интерфейсов. Часть 1. Принципы проектирования и структура. URL: http://docs.cntd.ru/document/1200082724 15 Там же 16 Купер А., Кронин Д., Рейманн Р.Об интерфейсе. Основы проектирования взаимодействия. Спб., 2009 13 14

12 и объяснять, что она делает. Выступая в роли средства обучения, меню должны предлагать исчерпывающий перечень доступных действий и средств, и предоставлять подсказки, дающие более быстрый доступ к определенным функциям. По Манделу Т.17, «меню представляет собой перечень возможных действий, отображаемых на экране или в окне для пользователей, с целью выбора нужных вариантов». «Меню позволяют пользователям перемещаться внутри системы, предоставляя маршруты и возможность выбора нужных пунктов или вариантов выполнения операций». В ходе совершенствования программного обеспечения и времени интерфейс меню постепенно изменялся. О совершенствовании этого элемента интерфейса пишет Купер А18. Самым первым, в 70-х годах 20-го века, появился интерфейс командной строки. Основной его недостаток — необходимость заранее знать команды для инициации взаимодействия, что создаёт большую нагрузку на человеческую память. Проблема с нагрузкой на память была решена в конце 70-х годов 20-го века, когда появились последовательные иерархичные меню, в которых предлагается список возможных вариантов на выбор. До их появления меню имели очень глубокую иерархию в виде последовательно отображающегося дерева команд, взаимодействии. — недоставало гибкости в человеко-компьютерном Но теперь обозначилась другая проблема: последовательные иерархичные меню вынудили пользователя плутать по вариантам выбора и параметров. По Манделу Т.19, число пунктов в меню Мандел Т. Разработка пользовательского интерфейса. М., 2001 Купер А., Кронин Д., Рейманн Р.Об интерфейсе. Основы проектирования взаимодействия. Спб., 2009 19 Мандел Т. Разработка пользовательского интерфейса. М., 2001. 17 18

13 зависит от ограничений, накладываемых кратковременной памятью пользователя. Её объём составляет 7 (+ - 2) пункта. Следующий шаг совершила в 1979 году компания Lotus. Ею было создано видимое иерархическое меню в стиле 1—2—3, которое располагалось горизонтально и могло сосуществовать вместе с самой рабочей областью. Вследствие этой разработки пользователю уже не нужно было покидать экран для того, чтобы увидеть меню. Со временем необходимость в чтении меню отпадала: пользователи могли запомнить определенную командную последовательность и выполнить свою задачу быстрее, чем если бы искали соответствующие пункты в меню. На следующем этапе появились раскрывающиеся (выпадающие) меню и диалоговые окна. Всплывающее окно появляется, перекрывая основную часть экрана до тех пор, пока не выполнит свою функцию, а затем исчезает, оставляя нетронутым начальное изображение. Контекстное меню — это разновидность выпадающего, которое открывается по клику на несколько пунктов.. По Манделу Т., и всплывающее, и контекстное меню разработаны для среды пользовательского интерфейса и их содержание зависит от контекста задач, стоящих перед пользователем. Но оба они должны содержать только те варианты, которые соответствуют выбранному пункту меню. Диалоговые окна, по Куперу А.20, послужили средством упрощения меню: они дали возможность вынести все возможные подварианты выбора пункта меню в самостоятельный интерактивный контейнер, таким образом появилась возможность поделить функции программы на осмысленные группы. Каскадное раскрывающегося меню, меню, или и подменю, оно — это подразумевают разновидность превращение упер А., Кронин Д., Рейманн Р. К Об интерфейсе. Основы проектирования взаимодействия. Спб., 2009 20

14 раскрывающегося меню обратно в иерархическое. Каскадные меню затрудняют поиск и просмотр команд, однако позволяют держать гораздо больше команд внутри групп и структурировать их иерархическим образом. Адаптивные меню отображают только те пункты, которые используются наиболее часто. Способ инициации скрытых пунктов может быть разным, — можно задержать курсор или щелкнуть по кнопке; об инициации взаимодействия поговорим позднее. Главный недостаток этого типа меню — увеличение объёма работы со стороны пользователя. Причина заключается в том, что этот тип меню противоречит 2–м функциям меню: демонстрировать пользователям охват и глубину функциональности приложения и обеспечивать доступ к менее востребованным функциям. Лента — ещё один вариант командного элемента управления. Это расположенная у верхней границы окна панель с вкладками, сочетающая меню и панель с инструментами. Мгновенное меню — это обычный заголовок меню верхнего уровня, который ведёт себя, как пункт меню. Таким пунктом меню является команда «Печать!». Купер А. видит в качестве ключа для создания разумной структуры меню понимание ментальных моделей пользователей, таким образом, чтобы пункт меню лучше и точнее отражал свое предназначение. Таким образом, прежде всего необходимо понимать, как пользователи представляют себе выполнение задач и какой терминологией они пользуются. Мандел Т. выделяет 3 ментальные, или концептуальные модели пользовательского интерфейса: пользовательской, программиста, проектировщика21. Концептуальная модель пользователя, по Манделу Т., включает в себя опыт взаимодействия в реальном мире, — в частности, задачи, процессы, 21 Мандел Т. Разработка пользовательского интерфейса. М., 2001.

15 инструменты, результаты. Модель представляет из себя формальную расшифровку ожиданий пользователя и полученного опыта в процессе работы с интерфейсом. Модель проектировщика включает в себя концептуальную модель пользователя, модель программиста и принципы и методы проектирования пользовательского интерфейса. Модель программиста включает в себя технические характеристики интерфейса, платформы, оболочки, инструментов разработки, принципов и методов. Ментальная модель — это «отображение физической системы или компьютерного программного обеспечения, в котором заложена вероятная последовательность действий при выполнении операций ввода и вывода»22. Ментальные модели базируются на персональном опыте и ожиданиях. В соответствии с исследованием Мэхью Д.23, ментальные модели позволяют: — предугадывать события; — находить причины событий; — определять, какие действия необходимо совершить для совершения определенных изменений; — использовать себя как устройства для запоминания связей и событий; — понимать аналогичные устройства; — использовать стратегии для преодоления заложенных в программе ограничений. Таким образом, можно сделать вывод о том, что ментальные модели являются фундаментом для проектирования взаимодействия24. Учитывая данное утверждение, рассмотрим существующие подходы к проектированию взаимодействия. Carrol J., Olson J. Mental models in human-computer interaction. Holland, 1988 Mayhew D. Principles and Giudelines in Software User Interface Design. Prentice-Hall, 1992 24 Мандел Т. Разработка пользовательского интерфейса. М., 2001. 22 23

16 1.2. Теоретические аспекты юзабилити В соответствии с исследованиями Якоба Нильсена, специалиста по юзабилити и основателя компании «Nielsen Norman Group», создание успешного дизайна, ориентированного на пользователя, базируется на принципах человеко-компьютерного взаимодействия25. Юзабилити — это качественный атрибут, который показывает, насколько легко использовать продукт. Беван Н. в «Руководстве по юзабилити» определяет юзабилити как «рамки (пределы), в которых продукт может быть использован определенными категориями пользователей для эффективного, оперативного, приносящего удовлетворение от достижения конкретных целей при заданных обстоятельствах использования». Нильсен Я. выделяет два ключевых компонента, которые относятся к функциональности интерфейса: удобство и простота использования. В подходе Нильсена Я. юзабилити является дополнительным и внешним качеством продукта, — лишь одним из качеств, которое может быть воплощено в продукте наряду с функциональностью, эффективностью, надежностью. По мнению Самойлова К., при данном подходе юзабилити ничего не говорит о конечном качестве и успехе продукта в реальном мире, так как юзабилити определяется как набор показателей, не связанных напрямую с особенностями использования данного продукта: «С этой позиции можно говорить о системе с отличным показателем юзабилити (великолепным простым интерфейсом), но при этом совершенно бесполезной»26. Для измерения юзабилити в данном подходе используются руководства (гайдлайны), — наборы рекомендаций, следуя которым, можно сделать продукт более удобным. ielsen Norman Group. URL: N https://www.nngroup.com/articles/usability-101-introduction-to-usability/ 26 Ковалев А., Курдюмов И. Управление проектом по созданию интернет-сайта. М., 2001 25

17 Понятие «Юзабилити» восходит к продуктивности ресурса и относится к качеству пользовательского опыта. Юзабилити — это об эффективности, работоспособности интерфейса и в общем об удовлетворенности пользователя. В соответствии с подходом к измерению юзабилити Нильсена Я., юзабилити — это комбинация факторов, включающая27: — Легкость обучения: насколько быстро пользователь, который никогда не видел этот интерфейс раньше, сможет понять базовые тактики во время первого взаимодействия с продуктом? — Эффективность: насколько легко пользователь сможет решать задачи после знакомства с интерфейсом? — Запоминаемость: после того, как пользователь вернется к интерфейсу после периода его неиспользования, сможет ли он решать свои задачи быстрее, чем при первом знакомстве, или придется учиться заново? — Ошибки: как много ошибок совершает пользователь, как он решает эти проблемы и насколько легко он может избежать этих ошибок? В данном разрезе также следует оценить, насколько серьезны могут быть последствия этих ошибок и как их можно устранить. — Удовлетворение: насколько пользователю нравится использовать данный интерфейс? Любой интерфейс можно оценить с помощью перечисленных 5 факторов, однако в некоторых случаях одни факторы становятся более весомыми, чем другие. Наиболее критичным для сетевых медиа является фактор субъективной удовлетворенности, так как в случае отрицательного опыта удовлетворения от использования сайта пользователю ничто не помешает легко уйти с него, сделав выбор в пользу аналогичного, но более приятного для использования сайта. В числовом значении юзабилити можно обозначить как время, потраченное посетителем сайта на достижение 27 Usability.gov. URL: https://www.usability.gov/what-and-why/usability-evaluation.html

18 необходимого результата. Морвилль П.28 выделяет 9 аспектов, которые необходимо учитывать при проектировании того или иного продукта, в частности по его мнению, продукт должен быть: — Полезным (необходимо учитывать среду, для которой создается продукт); — Применимым (удобство и простота продукта необходимы, но недостаточны); — Желаемым (необходимо учитывать и применять принципы эмоционального дизайна); — Обнаружимым (нужно проектировать интерфейс таким образом, чтобы пользователь мог решить свои задачи наиболее коротким способом); — Доступным (сайт должен быть доступен для людей с ограниченными возможностями); — Заслуживающим доверия (необходимо учитывать наиболее благонадежные для пользователя элементы интерфейса и применять их); — Ценным (как для пользователя, так и для учредителей). У разных авторов можно найти множество разных рекомендаций. В этом и заключается отрицательная сторона данного подхода — не все рекомендации следует использовать. Проблема заключается в том, чтобы найти рекомендацию, подходящую конкретному проекту29. К сожалению, если встает вопрос об определении группы пользователей, которые могут решать конкретные задачи в конкретных условиях, данный подход не решит эту задачу, так как решение зависит не только от простоты использования, но и от утилитарности (заложены ли в систему необходимые функции), эффективности (времени работы и реакции системы), надежности (вероятности ошибок системы и того, может ли человек восстановить orville P. User Experience Design. URL: M http://semanticstudios.com/user_experience_design/ 29 Ковалев А., Курдюмов И. Управление проектом по созданию интернет—сайта , М., 2001 28

19 систему после ошибок), удовлетворенности (субьективного показателя) и пр. Существует и другой подход к юзабилити. Однако его использование предполагается уже после реализации функциональности интерфейса в рамках решения оформления продукта или внесения в него незначительных изменений. В рамках данного подхода термином «юзабилити» определяется, может ли человек решить свою задачу, используя продукт30. Таким образом, юзабилити и качество использования определяется не только продуктом, но и взаимодействием пользователя, продукта и среды. В этом более широком смысле юзабилити оказывается синонимом «качества использования», т.е. высшим уровнем определения качества, которое позволяет продукту не просто соответствовать спецификациям, но и позволяет человеку работать с ним в реальных условиях. ISO DIS 9241-11 указывает 11 компонентов, по которым можно определить пригодность системы для использования. — удобство и простота использования (юзабилити) — качество рабочей системы в применении — эффективность, результативность — оперативность, продуктивность — удовлетворенность — контекст — рабочая система — пользователь — цель — задача — продукт Данный подход известен как человекоориентированный, в нём юзабилити определяется тем, насколько эффективно пользователь может 30 Ковалев А., Курдюмов И. Управление проектом по созданию интернет—сайта , М., 2001

20 выполнить свои задачи. При руководстве данным подходом юзабилити вносит свой вклад в конечное качество продукта и в успех продукта на рынке. Исследователи выделяют 2 подхода к проектированию взаимодействия (UX), в частности, Макро и Микро UX. Макро UX — это традиционный и наиболее распространенный подход, ориентированный на продукт. Макро UX позволяет определять пользовательские потребности и выстраивать конструкцию вокруг них, создавать дизайн, который объединяет пользователей и цель, поставленную компанией. Подходы Макро UX включают в себя нюансы разработки проектов, возведения на рынок новых продуктов. Детально разница между UI и UX описана в исследовании Saucken С., Michailidou I. и Lindemann U.31. Таблица, сормулированная на основе этого исследования, представлена в приложении 132. Микро UX — это более комплементарный и доступный метод улучшения юзабилити, который упрощает отдельные элементы и характеристики веб-сайта и позволяет создавать новые элементы для оптимизации. Микро UX концентрируется на самых маленьких элементах графического пользовательского интерфейса , которые составляют большое целое, уделяя особое внимание тому , как пользователи используют сайт33. Саффер Д., стоящий у истоков Микро UX, максимально концентрируется на маленьких элементах графического пользовательского интерфейса, предполагая, что качество дизайна продукта определяется именно ими, и выделяет 3 подхода к работе с микровоздействиями, в on Saucken С., Michailidou I., Lindemann U. How to Design Experiences: Macro UX versus V Micro UX Approach. URL: https://link.springer.com/chapter/10.1007/978-3-642-39253-5_15 32 Приложение 1, таблица 1 33 Lopez M. Micro UX, or how to improve user experience with microinteractions. URL: http://aukera.co.uk/blog/micro-ux-improve-user-experience-microinteractions/ 31

21 частности: — «фокус на каждом микровзаимодействии в отдельности — упрощение функции до ключевого микровзаимодействия — взгляд на функцию как на набор связанных микровзаимодействий»34. Он выделяет 4 аспекта микровоздействия (о них также упоминал Мандел Т.35): 1) Правила Правила определяют порядок действий, — обычно он представляет из себя последовательные шаги микровзаимодействия. Пользовательская цель — это и есть ключевой компонент правил, а правила, в свою очередь, дают возможность контролировать пользователя. Правила должны обязательно учитывать ограничения, определять состояния объектов, предотвращать ошибки. В определении правил может помочь сбор и анализ поведенческих данных. Из рекомендаций — нужно убедиться в обязательности текста; продукты должны проектироваться так, чтобы избежать возможности ошибки со стороны пользователя. 2) Триггер Триггеры предназначены для инициации взаимодействия и могут быть как пользовательскими, так и системными. По мнению Саффера Д.36, триггер должен: — Быть узнаваемым; — Удовлетворять пользовательским потребностям — это определяет место и время показа триггера; — Не ломать аффордансы (визуальные подсказки к непосредственному манипулированию); — Инициировать одно и то же действие при любых условиях% D. Microinteractions. S., 2013 Мандел Т. Разработка пользовательского интерфейса. М., 2001 36 Saffer D. Microinteractions. S., 2013 34 35 Saffer

22 — Быть более заметным для более частных действий; — Демонстрировать данные о своём состоянии в ходе микровзаимодействия. В рамках работы «Microinteractions»37 выделено 3 ключевых компонента триггера: — Собственно элемент управления, цель которого — минимизация пользовательского выбора вследствие предложения ограниченного набора вариантов и значений по умолчанию; — Состояние элемента управления (по умолчанию, дезактивированный, ховер, активный); — Надпись (текст либо иконка). Мандел Т. предлагает несколько рекомендаций относительно проектирования контроля пользователя над системой. На основании его рекомендаций мы выделили, в частности, следующее38: — гибкость (у пользователя должна быть возможность выбирать средство управления); — прерываемость (у пользователя должно быть время для фокусировки внимания); — полезность (обратная связь, которая включает в себя демонстрацию подсказок, которые помогут при работе с системой); — способность ориентировки (обеспечение условий для входа и выхода, для немедленных и обратимых действий); — прозрачность (интерфейс напрямую связан с ментальной моделью, поэтому в целях обеспечения наилучшего решения пользовательских задач лучше дать человеку настроить удобный для себя вид представления информации — поведение интерфейса, функции, расположение элементов) 37 38 Saffer D. Microinteractions. S., 2013 Мандел Т. Разработка пользовательского интерфейса. М., 2001.

23 — интерактивность (возможность манипулировать объектами интерфейса со стороны пользователя). 3) Обратная связь Обратная связь предназначена для пояснения пользователю правил взаимодействия с интерфейсом. Фактически, порядок должен быть таков — обратная связь связана с правилами, а правила должны быть связаны с триггером. В любом случае при создании обратной связи необходимо учитывать контекст. В рамках своего исследования Саффер Д.39 выделяет 3 метода обратной связи: — Визуальная; — Звуковая; —Тактильная. Визуальная обратная связь Все указанные виды обратной связи должны быть зависимы от контекста, определены по длительности, интенсивны, повторяемы40. 4) Циклы\режимы Состояние, в котором приложение работает нештатно, представляет из себя режим. Переход в режим должен быть заметен с точки зрения интерфейса, иначе это приведет к ошибкам со стороны пользователя. Смену режима следует подчеркивать, выделять, например, заметным переходом (анимацией) или переходом в отдельный экран. Цикл может быть использован для определения действия, он задаётся правилами и представляет из себя последовательность команд. Благодаря циклам жизнь микровзаимодействий продлевается. Используя циклы, можно постепенно раскрывать аспекты микровзаимодействия или наоборот, — 39 40 Saffer D. Microinteractions. S., 2013 Там же

24 микровзаимодействие может упрощаться по мере знакомства с ним. Исследователи сходятся в одном: микро UX ни в коем случае не должен полностью заменять макро UX. Например, Бертелли Ф. находит, что микро UX лучше всего работает с неформальными группами, небольшими бюджетами и мелкими продуктами в целом (хотя и не исключительно). Среди других возможных сценариев — разработка экспериментального продукта без определенной целевой аудитории, проектирование продукта-конкурента крупной марки, и обновление сайтов признанных брендов41. Норман Д. в статье «Microinteractions (My Foreword)» говорит о том, что микровзаимодействия представляют из себя шаги к макровзаимодействиям42. Норман Д. отвергает манделовскую парадигму о том, что при проектировании любого взаимодействия необходимо в первую очередь учитывать пользовательский опыт. В статье «Technology First, Needs Last43» он говорит о том, что как только появляется потребность в продукте, люди усваивают этот новый продукт, он находит свою нишу и это, в свою очередь, приводит к изменению продукта. Таким образом не имеют значения предварительные исследования. Далее, учитывая все представленную выше информацию, мы рассмотрим и сформулируем конкретные факторы, рентабельные для оценки юзабельности меню как основного элемента навигации, имеющего прямую связь с функциональным аспектом графического интерфейса, что является безусловно очень важным для сетевых медиа. В итоге мы проведем тестирование меню нескольких сайтов на соответствие выделенным Bertelli F. Micro UX. How bottom—up product design liberates designers and delights users. URL:http://www.hugeinc.com/ideas/perspective/micro-ux 42 Norman D. Microinteractions (My Foreword) URL: http://www.jnd.org/dn.mss/microinteractions_m.html 43 Norman D. Technology First, Needs Last. URL: http://jnd.org/dn.mss/technology_first_needs_last.html 41

25 критериям. Для этого структурируем информацию о «факторах композиционно-графической модели (далее − КГМ), влияющих на поведение пользователя и формирующих его впечатление от интерактивной сессии в целом»44, и затем определим критерии, в соответствии с которыми мы будем оценивать выбранные для практической части данного исследования веб-сайты сетевых медиа. 1.3. Критерии измерения эргономичности меню как основного элемента навигации графического интерфейса: выработка и обоснование методов На данном этапе необходимо выработать критерии измерения юзабилити интерфейса на основании представленного выше теоретического материала. «С учётом перцептивных и когнитивных особенностей восприятия и переработки информации можно сформулировать правила графического расположения информации на экране интерфейса, адекватного структуре действий пользователя»45. В рамках данного исследования с помощью эвристического эвристической метода, экспертизы рассмотренного в статье « Метод дизайна медиапроекта: опыт междисциплинарного подхода»46, мы углубленно рассмотрим лишь один элемент — меню, как основной элемент навигации, имеющей наибольшую Бодрунова С.С., Якунин А.В.Метод эвристической экспертизы дизайна медиапроекта: опыт междисциплинарного подхода // Медиаскоп. 2016. Вып. 3. URL: http://www.mediascope.ru/?q=node/2181/ 45 Сергеев С.Ф., Падерно П.И., Назаренко Н.А. Введение в проектирование интеллектуальных интерфейсов. Спб, 2011 46 Бодрунова С.С., Якунин А.В.Метод эвристической экспертизы дизайна медиапроекта: опыт междисциплинарного подхода // Медиаскоп. 2016. Вып. 3. URL: http://www.mediascope.ru/?q=node/2181/ 44

26 функциональную ценность в рамках исследования интерфейса сетевых медиа. Существует ряд иностранных публикаций, касающихся исследования эргономичности меню как основного элемента навигации в различных вариантах его ориентации. Например, Питтсли К. и Меммотт С.47 исследовали проблемы пользователей, не замечающих определенные навигационные подсказки, на примере сайтов с различными типами ориентации меню и пришли к ряду выводов, — в частности, о том, что уменьшение сложности заголовка может помочь в распознавании навигации по вкладкам, как и дублирование ссылок в меню. В исследовании Мельгизо П., Види У. и Остендорпа Х.48 основное внимание уделяется сложности навигационного пути как фактора, имеющего наиболее решительное значение для времени и легкости поиска информации, и, соответственно, решения пользовательской задачи. Выделена зависимость времени выполнения задачи от сложности самой задачи и навыков ориентирования пользователя. Фокус исследования Патсула П., Детембера Б. и Тенга У.49 об интерфейсах с различными типами меню был направлен на изучение механизма обработки структуры в рабочей памяти пользователя. Леутольд С., Шмутц П., Баргас-Авила Д., Туч А., Опвис К.50 исследовали три типа Pittsley K., Memmott S. Improving Independent Student Navigation of Complex Educational Web Sites: An Analysis of Two Navigation Design Changes in LibGuides. URL: https://ejournals.bc.edu/ojs/index.php/ital/article/viewFile/1880/pdf 48 Melguizo P., Vidya U., Oostendorp H. Seeking information online: The influence of menu type, navigation path complexity and spatial ability on information gathering tasks. URL: https://www.researchgate.net/publication/220208532_Seeking_information_online_The_influen ce_of_menu_type_navigation_path_complexity_and_spatial_ability_on_information_gathering_ tasks 49 Patsula P., Detenber B., Theng Y. Structure Processing of Web—Based Menus http://www.tandfonline.com/doi/abs/10.1080/10447318.2010.487197 50 Leuthold S., Schmutz P.,, Bargas—Avila J., Tuch A., Opwis K. Vertical versus dynamic menus on the world wide web: Eye tracking study measuring the influence of menu design and task complexity on user performance and subjective preference.URL: https://www.researchgate.net/publication/224774641_Vertical_versus_dynamic_menus_on_the_ 47

27 меню, расположенных в левой части страницы: простое, расширенное и динамическое. В ходе исследования было выявлено, что наиболее полезным является расширенное меню, однако для выполнения простых задач больше подходит простое меню, а для выполнения сложных — расширенное. В исследовании Мурано П. и Ломас Т.51 выявлено, что меню, расположенные сверху и слева, вызывают наименьшее количество ошибок, кроме того, для решения пользовательских задач с помощью них требуется наименьшее количество кликов. Удовлетворенность пользователей, принимавших участие в исследовании, аналогична результатам эксперимента. Бернард М., Хамблин С. и Чапарро Б.52 в ходе сравнения горизонтального, вертикального и индексного меню выявили наибольшую эффективность последнего, наивысшие результаты оно показало и по удовлетворенности пользователей. Наименее эффективным в ходе их исследования было признано горизонтальное как с точки зрения производительности, так и с точки зрения пользовательской удовлетворенности. В исследовании Баррелл А. и Содан А.53 лидером по удовлетворенности пользователей стало меню с вкладками, а его конкурентами в рамках этой работы были меню, расположенные наверху, слева, сверху слева, сверху справа и справа. Маккарти Д., Сассе А. и world_wide_web_Eye_tracking_study_measuring_the_influence_of_menu_design_and_task_co mplexity_on_user_performance_and_subjective_preference 51 Murano P., Lomas T. Menu Positioning on Web Pages. Does it Matter? URL: https://www.researchgate.net/publication/275824433_Menu_Positioning_on_Web_Pages_Does_ it_Matter?el=1_x_8&enrichId=rgreq—470964c135ef78493978de36f76a94e1—XXX&enrichSo urce=Y292ZXJQYWdlOzMwMTk0NTk3MjtBUzozNzI4MDgyNDU4OTEwNzdAMTQ2NTg5 NTgyMDU1Ng== 52 Bernard M., Hamblin C., Chaparro B.. Comparing Cascading and Indexed Menu Designs for Differences in Performance and Preference.URL: https://www.researchgate.net/publication/270723535_Comparing_Cascading_and_Indexed_Men u_Designs_for_Differences_in_Performance_and_Preference 53 Burrel A., Sodan A. URL: https://www.researchgate.net/publication/4238233_Web_Interface_Navigation_Design_Which_ Style_of_Navigation—Link_Menus_Do_Users_Prefer

28 Ригельсбергер Д.54 сосредоточились на позиционировании меню в контексте веб-сайтов, разделив их на простые и сложные, и измеряли показатели по меню, расположенным слева, сверху и справа. В рамках их исследования меню слева показало наивысшие результаты. Фанг Х. и Голшапль С.55 рассматривали три типа иерархии меню: субъективно ориентированные, ориентированные на использование и комбинацию первых двух. Последние два указанных типа показали наивысшие результаты. Показатели в приведенных выше исследованиях часто спорны Мурано П.56 видит выход в применении универсальных принципов дизайна и упрощении навигации. Также он выделяет важность возможности соответствовать потребностям конкретного пользователя: в этом контексте может идти речь об адаптивности меню или возможности настроить цвет, шрифт, расположение элементов. Для оценки эффективности меню как основного элемента навигации в рамках рассмотрения функционального аспекта графического интерфейса необходимо на данном этапе обратиться к категории эргономики и задействовать несколько её уровней. В рамках данной работы мы исходить из накопленных исследователями данных по этой теме. McCarthy J., Sasse A., Riegelsberger J. Could I have the Menu Please? An Eye Tracking Study of Design Conventions . URL: https://www.researchgate.net/publication/228784071_Could_I_have_the_Menu_Please_An_Eye _Tracking_Study_of_Design_Conventions?el=1_x_8&enrichId=rgreq-470964c135ef78493978d e36f76a94e1-XXX&enrichSource=Y292ZXJQYWdlOzMwMTk0NTk3MjtBUzozNzI4MDgyN DU4OTEwNzdAMTQ2NTg5NTgyMDU1Ng== 55 Fang H., Holsapple C. An empirical study of web site navigation structures' impacts on web site usability. URL: https://www.researchgate.net/publication/223409092_An_empirical_study_of_web_site_navigat ion_structures'_impacts_on_web_site_usability?el=1_x_8&enrichId=rgreq-470964c135ef78493 978de36f76a94e1—XXX&enrichSource=Y292ZXJQYWdlOzMwMTk0NTk3MjtBUzozNzI4M DgyNDU4OTEwNzdAMTQ2NTg5NTgyMDU1Ng== 56 Murano P. User Interface Menu Design Performance and User Preferences: A Review and Ways Forward. URL: https://www.researchgate.net/profile/Dr_Pietro_Murano/publication/301945972_User_Interface _Menu_Design_Performance_and_User_Preferences_A_Review_and_Ways_Forward/links/575 fcb8c08ae9a9c955fca3b.pdf 54

29 Таким образом, в соответствии с выделенными нами ранее подходами, мы будем анализировать навигационное меню на двух уровнях: — на макроуровне, который включает в себя структурирование страницы с точки зрения её общей площади; — на микроуровне, рассматривая характеристики элементарных единиц визуальной архитектуры57. Макроуровень Для оценки эргономичности меню важное значение будет иметь фактор квадранта страницы — расположение элемента в момент его обнаружения. Взаимосвязь между топологией страницы и эффективностью восприятия подтверждена исследователями, — наивысший приоритет имеет верхний левый квадрант58. Единообразие элементов помогает повышать толерантность к сайту, так как обеспечивает формирование стереотипов использования и даёт чувство контроля, повышая процент интуитивно выполняемых действий. В соответствии с исследованием Денга Л. и Пола М., коэффициент визуальной сложности страницы, определяющий восприятие, включает в себя две метрики: «визуальное разнообразие» (на макроуровне) и «визуальное обогащение» (это касается микроуровня, подразумевается количество деталей, степень детализации и «дробность» макета страницы)59. В соответствии с концепцией обратной «U-зависимости» между визуальной Бодрунова С.С., Якунин А.В. Метод эвристической экспертизы дизайна медиапроекта: опыт междисциплинарного подхода // Медиаскоп. 2016. Вып. 3. URL: http://www.mediascope.ru/node/2181 58 Michailidou E., Haper S., Bechhofer S. Visual complexity and aesthetic perception of web pages, 18 Proceedings of the 26th Annual ACMInternational Conference on Design of Communication, 2008 59 Deng L., Poole M.S. Affect in web interfaces: a study of the impacts of web page visual complexity and 28 order, MIS Quarterly 34 (4) 57

30 сложностью и удовлетворением пользователя, эффективность восприятия пользователя снижается при высоком коэффициенте визуальной сложности веб-страницы60. Далее мы опираемся на исследования Нильсена Я., в частности, на выделенный им аспект под названием «F-паттерн визуального восприятия». По заключению исследователя, направление взгляда при исследовании веб-страницы имеет форму буквы «F». Большой, контрастный сектор с текстом, — это первое, на что обращает внимание пользователь. Чаще всего это заголовок или логотип. После этого взгляд движется вниз, по левой стороне текстового блока. Данный паттерн неоднократно повторяется, именно поэтому популярность опций горизонтального меню (или набора вкладок) снижается по мере приближения к правому краю — пользователь начинает изучение опций слева61. Далее мы будем оценивать отображение блока с меню при переходах в различные разделы. Наилучшим вариантом считается тот, при котором меню всегда доступно для пользователя, то есть фиксировано и не меняет своего положения при прокрутке. Это связано прежде всего с необходимостью предоставлять пользователю всевозможные маршруты и средства выбора нужных пунктов. Далее мы будем оценивать обнаружимость смены режима, не учитывая контент. Саффер Д.62 указывает на необходимость выделения перехода в другой режим с точки зрения интерфейса во избежание ошибок со стороны пользователей. Применительно к веб-сайтам сетевых медиа значение имеет разовый режим, при котором совершение действие автоматически его выключает. 60 61 Нильсен Я. Дизайн Web-страниц. Анализ удобства и простоты использования 50 узлов. М., 2002 62 Saffer D. Microinteractions. S., 2013

31 Микроуровень Следует принять во внимание фактор конкурирующего контента, или параметр неальтернативного дублирования функциональных элементов. Нильсен Я. установил, что наличие конкурирующих элементов интерфейса (ссылок и кнопок) на одной странице замедляет скорость исполнения задачи 63 Самыми неэффективными Саффер Д.64 считает триггеры, спрятанные в выпадающие меню, - для большинства микровзаимодействий менять нужно не экраны, а состояния объектов в рамках одного экрана. При этом необходимо уделить особенное внимание визуальным аффордансам, то есть визуальным подсказкам к манипулированию. Они не должны быть ложными во избежания ошибок со стороны пользователя, должны позитивно подкреплять желаемое действие и должны быть минимально возможными для прояснения происходящего. Также очень важно, чтобы обратная связь была краткой, не было произвольной и всегда была связана с триггером65. Заметность триггера зависит от частоты использования микровзаимодействия. Тонально-цветовой контраст служит средством привлечения внимания и важен для привлечения внимания пользователя к существенным аспектам интерфейса, он навигационными помогает элементами разобраться и служит в соотношениях средством между обозначения информационных групп в навигационном дизайне66. К тому же, кодирование Нильсен Я. Reduce Redundancy: Decrease Duplicated Design Decisions. https://www.nngroup.com/articles/reduce-redundancydecrease-duplicated-design-decisions/ 64 Saffer D. Microinteractions. S., 2013 65 Там же 66 Сергеев С.Ф., Падерно П.И., Назаренко Н.А. Введение в проектирование интеллектуальных интерфейсов. Спб, 2011 63

32 информации влияет на ассоциативность и целостность. Его используют для «расширения возможности распознавания пользователем событий, содержащихся в изображении», и для «снижения объёма информации, которую пользователь должен воспринять в данное время». Фактор контраста оказывает большое влияние на эффективность восприятия. По мнению Гаррета Д., контрастное зонирование макета повышает скорость выполнения задачи67. Наиболее оптимальным решением, по мнению Уэншейка С., является чёрный текст на белом фоне68. Инверсионная гамма, или «выворотка», снижает эффективность чтения. Купер А.69 указывает на необходимость показывать состояние пунктов меню, однако при этом необходимо обозначать, что находится перед пользователем, выбор или описание состояния. В соответствии с исследованием Хуанга М., эффективность восприятия зависит в том числе от атрибуции графических элементов. В данном контексте имеется ввиду размер и взаимное расположение графических элементов70. Это подтверждает и теория «трех переменных», принадлежащая Гайсслеру Г., Зинкану Г., Ватсону Р., в соответствии с которой наличие изображений, длина страницы и число ссылок определяет перцептивную сложность страницы и влияет на внимание71. В подтверждение можно привести также выделенную Уэйншенком С. теорию «заметных сигналов» и концепцию опоры на избирательное внимание, из которых следует, что 67 аррет Д. Веб-дизайн: Элементы опыта взаимодействия. Спб, 2008 Г эйншенк С. 100 главных принципов дизайна: как удержать внимание. У СПб, 2012 упер А., Кронин Д., Рейманн Р.Об интерфейсе. Основы проектирования К взаимодействия. Спб., 2009 70 Huang M.H. Designing website attributes to induce experiential encounters, 2003. Computers in 21 Human Behavior 19 (4) 71 Geissler G., Zinkhan G., Watson R.T. The influence of home page complexity on consumer attention, 22 attitudes, and purchase intent, 2006. URL: https://www.jstor.org/stable/20460727?seq=1#page_scan_tab_contents 68 69

33 визуальная сложность блока контента (комбинация с изображением) предпочтительнее однообразного представления (списком)72. В соответствии с оптимальной нагрузкой на пользовательскую память количество пунктов меню должно находиться в промежутке от 5 до 9. Наивысший приоритет имеет объединение пунктов меню по логическим группам, однако это неактуально для тех меню, в которых менее 9 пунктов. Скрытые пункты меню, как подчеркивает Купер А.73, увеличивают объем работы со стороны пользователя, поэтому их лучше по возможности избегать. В соответствии с определенными параметрами был разработан кодировочный лист, представленный в приложении 274. Далее, в практической главе данного исследования, мы оценим несколько сайтов с разными видами представления меню в соответствии с разработанным нами кодировочным листом и выявим, какая ориентация меню наиболее эффективна для различных типов сетевых медиа — качественных и массовых. 72 73 эйншенк С. 100 главных принципов дизайна: как удержать внимание. СПб, У упер А., Кронин Д., Рейманн Р.Об интерфейсе. Основы проектирования К взаимодействия. Спб., 2009 74 Приложение 2, табл. 2 2012

34 Глава II. НАВИГАЦИОННОЕ МЕНЮ КАК ОСНОВНОЙ ФУНКЦИОНАЛЬНЫЙ ЭЛЕМЕНТ ГРАФИЧЕСКОГО ИНТЕРФЕЙСА СЕТЕВЫХ МЕДИА 2.1 Структурно-функциональный анализ меню сетевых медиа в контексте задач юзабилити В качестве эмпирического материала мы выбрали 18 сетевых СМИ с тремя видами расположения меню: вертикально, горизонтально и с сочетанием горизонтального и вертикального меню. Отобранные сетевые медиа были разделены на 2 тестовые группы, в каждую из которых вошли либо качественные медиаиздания (группа 1), либо массовые (группа 2). Дополнительно каждый из сайтов в соответствии со способом расположения меню был отнесен нами к определенной тестовой подгруппе (А — вертикально, B — горизонтально, С — сочетание). Распределение произошло следующим образом: Группа 1: — Подгруппа А: «Российская газета»75, «Бизнес Online»76, «NewsRu»77; — Подгруппа B: «Газета.ru»78, «Ведомости»79, «Эксперт Online»80; — Подгруппа C: «Известия»81, «Forbes»82, «Новая газета»83. Группа 2: Российская газета. URL: https://rg.ru/ Online. URL: https://www.business—gazeta.ru/ 77 NewsRu. URL: http://www.newsru.com/ 78 Газета.ru. URL: https://www.gazeta.ru/ 79 Ведомости. URL: https://www.vedomosti.ru/spb / 80 Эксперт Online. URL: http://expert.ru/ 81 Известия. URL: http://izvestia.ru/ 82 Forbes. URL: http://www.forbes.ru / 83 Новая газета. URL: https://www.novayagazeta.ru / 75 76 Бизнес

35 — Подгруппа A: «Югополис»84, «Lenta»85, «Петербургский дневник»86; — Подгруппа B: «Meduza»87, «Сноб»88, «Фонтанка»89; — Подгруппа С: «The Village»90, «Esquire»91, «Cosmopolitan»92. Выбор этих ресурсов обусловлен следующими факторами: 1. Использование русского языка как основы публикаций; 2. Аналогичными факторами присутствия данных СМИ в веб: — ежемесячное количество посетителей93 Группа 1: - Подгруппа А: 17707987 («Российская газета»), 1255685 («БИЗНЕС Online»), 4232840 («NewsRu»); - Подгруппа B: 10486898 («Газета.ru»), 7075741 («Ведомости»), 1777512 («Эксперт Online»); - Подгруппа C: 1894800 («Известия»), 843540 («Forbes»), 2768965 («Новая газета»). Группа 2: - Подгруппа A: 444745 «Югополис», 19955450 («Lenta»), 1097428 («Петербургский дневник»); - Подгруппа B: 2 800 440 («Meduza»), 1122 840 («Сноб»), 3481153 («Фонтанка»); - Подгруппа С: 1306 («The Village»), 512 («Esquire»), 1851660 («Cosmopolitan»). — индекс цитируемости (ИЦ) для каждой из групп. Данные приводятся по Югополис. URL: http://www.yugopolis.ru/ Lenta, URL: https://lenta.ru/ 86 Петербургский дневник. URL: https://www.spbdnevnik.ru/ 87 Meduza. URL: https://meduza.io/ 88 Сноб. URL: https://snob.ru/ 89 Фонтанка. URL: http://www.fontanka.ru/ 90 The Village. URL: http://www.the-village.ru/ 91 Esquire. URL: https://esquire.ru/ 92 Cosmopolitan. URL: https://www.cosmo.ru/ 93 2IP. URL: https://2ip.ru/site-statistics/ 84 85

36 показателям ресурса «Медиалогия»94. Показатели распределились следующим образом: Группа 1: - Подгруппа А: 897,26 («Российская газета»), 200,37 («БИЗНЕС Online»), 119,54 («NewsRu»); - Подгруппа B: 1645,87 («Газета.ru»), 1375,99 («Ведомости»), 137,46 («Эксперт Online»); - Подгруппа C: 2809 («Известия»), 542,06 («Forbes»), 488,1 («Новая газета»). Группа 2: - Подгруппа A: «Югополис», 1281,03 («Lenta»), 4000 («Петербургский дневник»); - Подгруппа B: 227,85 («Meduza»), 155,83 («Сноб»), 608,49 («Фонтанка») ; - Подгруппа С: 74,17 («The Village»), 71,7 («Esquire»), 106,4 («Cosmopolitan»). В рамках данной работы мы проанализируем меню как основной элемент навигации, используя в качестве опорных фактов выделенные нами в 1 главе элементы в рамках микро и макроуровней. Показатели для каждого из проектов определяются суммой баллов по результатам анализа каждого фактора по сформулированной нами таблице95. Итоговая сумма показывает степень эффективности визуальной организации меню с точки зрения сформулированных исследователями представлений о юзабилити, представленных нами в 1-й главе данного исследования. В рамках структурно-функционального анализа меню необходимо прежде всего рассмотреть, как реализовываются принципы юзабилити в рамках указанных нами ранее медиапроектов. В соответствии с выделенными нами в последнем параграфе первой главы критериями мы выразили в числовом значении некоторые аспекты графического интерфейса, 94 95 Медиалогия. URL: http://www.mlg.ru/ratings/media/ риложение 2, таблица 2 П

37 имеющие значение в рамках данной темы. Результаты в группировке по визуальной ориентации меню наглядно представлены в приложении в таблицах 3, 4 и 5, каждая из которых последовательно иллюстрирует параметры навигационного меню выбранных нами изданий в соответствии с его способом визуальной ориентации — вертикальным, горизонтальным или с сочетанием горизонтального и вертикального меню. В каждой из таблиц первые три оцениваемых издания относятся к качественным, последующие три — к массовым. В соответствии с 1-й категорией кодирования мы рассматривали топологию нашего целевого элемента — меню. Значение имеет квадрант экрана, в котором оно располагается. В соответствии с большинством исследований наиболее релевантным для расположения значимого элемента интерфейса является левый верхний квадрант в связи с эффективностью его восприятия. Таким образом, сетевые медиа, на сайтах которых меню были расположены именно в этом квадранте, получили наиболее высокую оценку по данному параметру. В этом смысле лидерами стали интерфейсы всех изданий группы А, в частности, «Российская газета», «БИЗНЕС Online», «NewsRu», «Югополис», «Петербургский дневник» и «Lenta». В группе B все издания получили 0 баллов. В группе С в «Forbes» имеется основное меню, расположенное по центру, но и дополнительное, вертикальное меню, располагается в центральной части экрана (при этом оно появляется при клике на кнопку, расположенную слева), поэтому данный сайт получил 0 баллов. В «Новой газете» кнопка для вызова дополнительного меню располагается справа, но при нажатии неё дополнительное меню появляется по центру, таким образом, данному сайту тоже присваивается 0 баллов. В «Esquire» основное меню расположено горизонтально, а кнопка для вызова дополнительного меню располагается справа, при клике на неё появляется меню, отцентрированное посередине. В «The Village» основное меню

38 ориентировано по горизонтали, а кнопка для вызова дополнительного меню располагается слева, однако оно расположено по вертикали, — данный сайт получает 2 балла. Аналогичная ситуация с сайтами «Cosmopolitan» и «Известия». Однако следует заметить, что указанные сайты «скрывают» в дополнительном меню дополнительные категории, что связано с минимизацией нагрузки на пользовательскую память. Логично структурированный интерфейс позволяет выполнить задачу с наименьшими затратами времени и усилий. В этом помогает соответствие меню модульной сетке страницы. В рамках анализа выявлено следующее в отношении исследуемых сайтов. На сайте «Российской газеты» модуль, в котором располагается меню, меньше модуля, взятого за основу на сайте. Это же утверждение справедливо и для интерфейса «Бизнес Online», и для «Lenta». В противовес, на сайтах «NewsRu», «Югополис» и «Петербургский дневник» модуль, в котором расположено меню, аналогичен новостной ленте и соответствует модульной сетке страницы. То же самое справедливо и для «Gazeta.ru» — блок с меню расположен в шапке сайта, а вместе с названием, информацией о курсах валюты и кнопками социальных сетей эта шапка по ширине равна модулям с фотографиями и блоком «Новости часа». То же самое равносильно для всей группы B: на сайте издания «Ведомости» блок с меню равен половине модуля новости в новостном блоке, на сайте бизнес-издания «Эксперт Online» меню работает в связке с лого и равно по высоте превью статей, аналогично и на сайте медиа «Сноб», но без связки с лого. На сайте медиапортала «Meduza» блок с меню растянут по ширине страницы, но равен по высоте блокам с названиями разделов. На «Фонтанке» исследуемый блок также растянут по ширине страницы, но равен по высоте блокам с заголовками разделов, с поиском. Во всех изданиях группы С также наблюдается соответствие модуля, содержащего меню, модульной структуре страницы, — чаще всего он равен по высоте блокам с заголовками.

39 На сайтах всех исследуемых сетевых медиа блок с меню соответствует по ритму всей странице, исключением является лишь сайт «Бизнес Online». В «Известиях» и «Новой газете» ритм горизонтального меню аналогичен модулям с новостями, на «Forbes» примерно такое же расстояние между всеми блоками, как между блоками с меню, на «The Village» ритм новостной колонки поддерживается вертикальным меню, на сайте «Esquire» по всей странице идет горизонтально 2 или 3 модуля, а при появлении вертикального меню можно продолжать прокрутку и чтение страницы, а за счет выровненного по середине вертикального меню выдерживается немного «рваный» ритм страницы. На сайте «Cosmopolitan» поддержанию ритма способствует то обстоятельство, что горизонтальное навигационное меню прикреплено к шапке страницы, и между блоками с новостями располагаются блоки такого же черного цвета, как в меню, также растянутые по всей ширине страницы. Наличие дополнительного вертикального меню лишь дополняет вертикальные модули с публикациями. 4-й параметр, присутствие меню в области экрана «F-паттерн», показывает эффективность расположения меню в рамках конкретного сетевого медиаиздания. Категория F-паттерна визуального восприятия подразумевает расположение наиболее важных элементов интерфейса в соответствии с типичной направленностью взгляда по мере просмотра веб-страницы, в виде буквы «F». По этому параметру наивысшее количество баллов получили те интерфейсы, меню в которых располагается вертикально и горизонтально. Среди них наименьшее количество баллов получил сайт издания «Югополис», так как на нём меню вызывается с помощью клика по кнопке слева и альтернатива отсутствует, таким образом, на этом сайте меню присутствует в зоне «F» лишь частично. Также отсутствием меню в зоне «F» может похвастаться сайт «Meduza», так как на нём меню расположено в шапке сайта, оформленной черным и занимающей незначительное

40 количество пикселей, таким образом, оно не воспринимается как часть сайта при знакомстве с ним и для поиска этого меню требуется больше времени. Аналогичная ситуация по расположению меню наблюдается и на сайте «Новой газеты». однако этот сайт получает 1 балл, так как фон сайта темный и он сочетается с шапкой, таким образом, меню не отделяется от сайта. На сайте «Esquire» меню также располагается в шапке и дополнительное меню вызывается по клику на кнопку справа, однако все выполнено в одном тоне с сайтом, — тоже 1 балл. Далее мы оценивали, меняется ли положение меню на веб-страницах выбранных нами медиа при прокрутке. Среди рассматриваемых нами изданий первое, к сожалению, скорее исключение, чем правило. В частности, положение меню при прокрутке сохраняется на сайте «Бизнес Online», «Югополис», «Петербургский дневник», «Lenta» (группа А), «Газета.ru», «Ведомости» (группа B), «Известия», «Forbes», «Новая газета», «Esquire», «Cosmopolitan» (группа С). На сайте «The Village» при прокрутке страницы сохраняется положение лишь вертикального меню. После этого необходимо выявить, обнаружима ли для пользователя смена режима, в нашем случае — переход в другой раздел после клика на любой пункт меню. При оценке по данному критерию контент не учитывался. Фактически все исследуемые нами интерфейсы поделились на 2 группы: на те, в которых переход в другой режим сопровождается выделением выбранного пункта меню, и те, на которых не сопровождается. На сайте “Российской газеты” переход в другой режим осуществляется с обновлением страницы и выделением другим цветов плашки выбранного пункта меню. Аналогичное поведение наблюдается и на сайтах «NewsRu», «Lenta», «Газета.ru», «Ведомости», «Meduza», «Сноб», «Новая газета», «The Village», «Esquire». На сайте «Бизнес Online» выбранный пункт меню не выделен при переходе, в рамках меню данного интерфейса смена режима без

41 учета контента необнаружима. Аналогично на сайтах сетевых медиа «Петербургский дневник», «Эксперт Online», «Фонтанка», «Известия», «Forbes», «Cosmopolitan». При этом на сайте «Эксперт Online» не только не выделяется выбранный пункт меню при переходе, но и присутствует фактор, который нарушает опыт пользовательского взаимодействия, имеется ввиду выделение плашкой пункта, отличного от выбранного. Отдельно от этих двух групп можно поставить «Югополис» — на данном сайте после выбора нужного пункта меню сворачивается и требуется дополнительный клик для раскрытия меню. В соответствии со следующим параметром мы оцениваем неальтернативное дублирование функциональных элементов, иначе говоря — конкурирующий контент. Наибольшая функциональность интерфейса достигается в том случае, если один пункт соответствует одной функции, поэтому наивысшие баллы получили сетевые медиа, в которых отсутствуют дубликаты функциональных элементов меню. Однако в ряде СМИ пункты дублировались, в наибольшей степени это имеет отношение к сетевым медиа из подгрупп С обоих групп, в частности это коснулось сайта «Известий», в вертикальном меню которого дублировались в том числе пункты горизонтального меню. В аналогичной ситуации также оказались сетевые медиа «Forbes и «Новая газета», «Cosmopolitan» и «Esquire». Меню данных СМИ получили наименьшую оценку в соответствии с данным критерием. На сайте «The Village» из группы С, а также на сайтах медиа, входящих в группы А и B, конкурирующего контента в рамках меню не выявлено. В аспекте исследования соотношения меню и модульной структуры страницы имеет значение категория адаптивности меню. Данная категория имеет значение при изменении масштаба страницы и именно благодаря адаптивности меню может смотреться хорошо на большинстве пользовательских устройств. Меню сайта «Российской газеты» обладает

42 высокой адаптивностью, и при масштабе в 200% меню слева скрывается под кнопкой вызова меню, появляющейся справа. При масштабах до 200% эта кнопка отсутствует, меню располагается слева. Количество пунктов меню не уменьшается, но изменяется размер шрифта. На сайте «Бизнес Online» при масштабе от 125% меню скрывается и его можно вызвать при клике по плашке слева, растянутой на всю высоту экрана, однако при масштабе 500% прокрутить меню ниже невозможно, а количество вариантов выбора не сокращается. На сайте «NewsRu» адаптивность учитывает исключительно модуль, но не текст. На сайте «Югополис» адаптивность учитывает и модуль, и текст, однако при изменении масштаба меню исчезает и его необходимо вызывать кликом заново, при этом кнопка для вызова меню перемещается вправо, но зато при любом масштабе есть возможность посмотреть все пункты, для этого в меню справа появляется полоса прокрутки. На сайте «Петербургский дневник» меню учитывает модуль и текст, а при масштабе от 125% скрывается под плашку, растянутую по левой стороне экрана. На сайте сетевого медиа «Lenta» ситуация аналогична «Бизнес Online». На сайте издания «Газета.ru» при изменении масштаба не меняется количество пунктов меню, однако меняется расстояние между их блоками, учитывается и модуль, и текст. Аналогичная ситуация наблюдается на сайтах «Ведомости» и «Эксперт Online». На сайте «Meduza» после изменения масштаба от 150% меню прячется под кнопку, расположенную слева, а при меньших масштабах подобная кнопка отсутствует. При масштабах ниже учитывается модуль и текст, меняется расстояние между блоками. На сайте издания «Сноб» при изменении масштаба от 200% меню также прячется под плашку слева, которая ранее не появляется. Учитывается модуль и текст, но расстояние между блоками не меняется. Аналогично на сайте «Фонтанки», однако на сайте данного издания присутствует кнопка «ещё», с помощью которой вызывается контекстное меню, также расположенное горизонтально,

43 и им невозможно пользоваться при больших масштабах, поэтому по данной категории «Фонтанка» получает 1 балл. На сайте «Известий» при изменении масштаба от 200% меню заменяет собой основной контент, однако при любом масштабе учитывается как модуль, так и текст. На сайте «Forbes» при увеличении масштаба до 200% горизонтальное меню исчезает, и при любом изменении масштаба меняется расстояние между блоками и размер шрифта, а в вертикальном меню уменьшается количество колонок по ширине, они вытягиваются вертикально. На сайте «Новой газеты» — при масштабе от 125% кнопка вызова вертикального, дополнительного меню перемещается вправо, а горизонтальное меню исчезает. В вертикальном меню количество колонок в меню уменьшается по мере увеличения масштаба страницы, а количество пунктов не меняется. На сайте интернет-газеты «The Village» меняется расстояние между блоками и размер шрифта, однако при масштабе от 200% вертикальное меню полностью просмотреть невозможно. На сайте журнала «Cosmopolitan» данная проблема учтена и при значительном увеличении масштаба страницы можно посмотреть все пункты вертикального меню с помощью полосы прокрутки, появляющейся справа при условии, что полное количество пунктов меню не помещается на экране. На сайте «Esquire» учитывается и расстояние между блоками, и размер шрифта. Близко к категории адаптивности меню стоит категория адаптивности пунктов меню, иначе говоря, триггеров, в соответствии с классификацией Мандела Т., предназначенных для инициации взаимодействия. Данная категория имеет значения в рамках проектирования микроинтераций. В случае с меню, по классификации Саффера Д., имеет значение именно визуальная обратная связь, а тактильная и звуковая в рамках данного исследования во внимание не принимаются. В данном случае подразумевается демонстрация визуальных подсказок, которые помогают

44 решать пользовательские задачи быстрее. В том числе это обеспечивает условия для немедленных и обратимых действий и относится к ориентации пользователя в ходе интернет-сёрфинга в рамках конкретного сетевого медиаиздания. На сайте «Российской газеты» при наведении курсора на конкретный пункт меняется цвет шрифта, а при выборе пункта его подложка меняет цвет, что дает пользователю понять, в каком разделе он на данный момент находится. На сайте «Бизнес Online» при наведении курсора мышки цвет пункта меню изменяется, однако после выбора в рамках меню нет ориентации для пользователя, в каком разделе он находится. На сайте «NewsRu» меняется подложка при наведении курсора мышки на конкретный пункт меню, и дополнительным цветом обозначается выбранный пункт. На сайте «Югополис» при наведении курсора мышки на конкретный пункт меню появляется контрастный маркер слева от него, но после выбора конкретного пункта меню оно сворачивается и его необходимо вызывать заново, и в нём нет никакого указателя на выбранный пункт, и он не исчезает из списка. При этом выбранный пункт появляется в шапке сайта, таким образом пользователь может понять, где находится. На сайте «Петербургский дневник» при выборе пункт меню подчеркивается, после выбора его состояние не меняется, но заголовок выбранного пункта отображается на странице. На сайте «Lenta» цвет пункта меню меняется при наведении курсора мышки, при этом уже выбранный пункт также выделяется другим цветом шрифта. На сайте издания «Газета.ru» при наведении курсора мышки меняется цвет пункта меню, при клике выбранный пункт подчеркивается. На сайте газеты «Ведомости» при наведении курсора цвет пункта меню не меняется, но меняется цвет нижней плашки после выбора. На сайте «Эксперт Online» при наведении курсора на любой пункт меню его текст подчеркивается, при этом после выбора отсутствует визуальная подсказка, даже наоборот, присутствует отрицательный для пользовательской

45 ориентации фактор, — по умолчанию синим цветом выделена одна тема под названием «Проверки бизнеса», вне зависимости от раздела, выбранного пользователем. На сайте «Meduza» при наведении курсора на любой пункт меню цвет текста меняется на серый, а после клика — на другой, оранжевый. На сайте издания «Сноб» меняется цвет плашки рядом с тем пунктом меню, на который наведен курсор, однако после клика по нему какое—либо выделение в меню отсутствует. Ориентиром служит название выбранного раздела, появляющееся вне меню. Аналогично на сайтах медиаиздания «Известия» и «Forbes». Меню на сайте «Новой газеты» отличается от последних лишь визуальным выделением пункта меню после выбора, — меняется его цвет. Похожее поведение наблюдается и на сайтах изданий «The Village», «Esquire» и «Cosmopolitan», но выбранная тема вне меню не указывается. С предыдущим последствий критерием инициализации связан триггеров. и На параметр сайте аналогичности «Бизнес Online» большинство триггеров в меню инициируют перемещение по страницам сайта, однако два из них, никак визуально не отделенных, инициирует перенаправление на сторонние сайты той же компании. Аналогичная ситуация наблюдается на сайтах «NewsRu», «Петербургский дневник», «Сноб», «Cosmopolitan». На сайте «Фонтанки» триггер с надписью «Ещё» в случае дополнительного клика требует дополнительной активации, что только увеличивает количество возможных пользовательских ошибок. На сайтах других исследуемых изданий триггеры с отличными от большинства результатами действия либо визуально отделены, либо отсутствуют. Категории кодирования 10, 11, 12 связаны с термином «контрастность», подробно рассмотренном нами в последнем параграфе 1-й главы. Контраст является важным и одним из самых эффективных способов улучшения восприятия контента, имеющим прямую связь со скоростью

46 исполнения пользовательской задачи. Цветовое зонирование может взять на себя сразу же несколько важных функций, в частности,выделить наиболее важный контент (акцидентальная функция), разграничить несколько групп контента (селективная функция) и указать на интерактивность (аффордативная функция). На сайтах «Бизнес Online» и «Российская газета» блок с меню средне контрастируют с фоном, впрочем, и цветовая гамма у этих сайтов аналогична. Основной цвет белый, цвет меню — темно-серый. На сайтах «Югополис» и «Lenta» основной цвет сайта белый, меню черное. На сайте «NewsRu» цвет блока с меню гомогенен фону сайта. На сайте «Петербургский дневник» основной цвет белый, блок с меню голубой, то есть имеет место низкая контрастность. В группе B 0 баллов по данному критерию получили все сайты качественных изданий и сайт «Фонтанка» из массовых, так как цвет блока с меню на них не отличался от цвета страницы. В случае с «Газета.ru» имеет место быть низкая контрастность. Контраст чёрное/белое соблюли издания «Meduza» и «Сноб». В группе С наблюдались самые неоднозначные наблюдается результаты: гомогенность например, горизонтального на меню сайте и «Известий» фона, однако вертикальное меню обладает высокой степенью контрастности. Таким образом, данному интерфейсу присвоена оценка 1. Аналогичная ситуация и оценка следует для «Forbes», и для «The Village», однако для последнего сайта характера гомогенность для горизонтального меню и средняя степень контрастности для вертикального. На сайте «Новой газеты» меню оформлено чёрным, при этом основной фон сайта — белый, кроме того, под меню располагается плашка синего цвета, отделяя его от дальнейших материалов. Аналогичная ситуация на сайте «Cosmopolitan»: фон — белый, основной цвет меню — чёрный, шапка, расположенная выше, содержит периодически меняющийся паттерн. На сайте «The Village» фон — серый, темно-серый и персиковый для различных блоков, а плашка с меню при этом чёрная или

47 белая, и стоит времени найти точку с наивысшей степенью контраста, поэтому считаем, что в данном случае зонирование меню имеет низкую контрастность. Меню всех сайтов из группы А имеют высокую контрастность литера\фон — черный (темно-серый, темно-синий)/белый (светло-серый). Только на сайте «Петербургский дневник» наблюдается средняя контрастность — голубой фон и чёрный шрифт. В группе B наиболее высокой контрастностью литера/фон обладают сайты «Газета.ru», «Эксперт Online», «Meduza», «Фонтанка». Наиболее низкой контрастностью обладают «Ведомости» (черный/светло-персиковый) и «Сноб» (серый/черный и черный/серый). Неоднозначны результаты по этому параметру и в группе С: например, на сайте «Известий» литера/фон в горизонтальном меню обладают высокой контрастностью (чёрный/белый), а в вертикальном — низкой (оранжевый/коричневый), в итоге присваиваем этому интерфейсу оценку 1 и по данному критерию. На сайте «Forbes» соблюден контраст чёрный/белый в прямой и обратной последовательности в каждом из видов ориентации меню, на сайтах «Новой газеты», «Esquire», «Cosmopolitan» и «The Village» — только в прямой. Далее мы измеряем интенсивность визуальной обратной связи, и в рамках этого параметра мы оцениваем прежде всего контрастность выделения выбранного пользователем пункта меню. Интерфейсы с высокой степенью контрастности по данному параметру не выделены. Средней степень контрастности обладают: (ярко-оранжевый/темно серый), (ярко-оранжевый/темно-серый/голубой), «Lenta» (чёрный/красный), «Газета.ru» (чёрный/оранжевый), (чёрный/голубой), «Сноб» «The «Российская газета» «Бизнес Online» «Югополис» (чёрный/красный), «Meduza» (чёрный/красный), Village» (черный/красный), «Новая (чёрный/оранжевый), газета» «Meduza»

48 (чёрный/малиновый). Низкая степень: «NewsRu» (белый/светло-зеленый), «Петербургский дневник» (чёрный/тёмно-синий), «Ведомости» (чёрный/сине-зелёный), «Эксперт Online» - (чёрный/синий), «Фонтанка» (чёрный/чёрный), «Известия» (чёрный/бордовый), «Forbes» (чёрный/чёрный). В соответствии с большинством исследований наибольшая эффективность достигается при креолизации текста, в случае с меню подразумевается частичная креолизация, наличие иконического изображения, непосредственное относящееся к выбранному пункту меню, которое, теоретически, может быть удалено без ущерба для текста, в нашем случае — названия пункта меню, который является главным и автономным по отношению к невербальному. Исследования показывают, что вначале пользователи обращают внимание на изображение и лишь затем — на текст. Это соотносится с концепцией Уэншейка С., концепцией опоры на избирательное внимание и теорией «заметных сигналов». В соответствии с его теорией, комбинация с изображением предпочтительнее однообразного представления. На сайтах исследуемых нами сетевых медиа в 100% случаев для групп А и C креолизация меню отсутствовала. В группе B креолизация частично коснулась сайта «Газета.ru» — в рамках меню на этом сайте в качестве одного из модулей выступает видео, при клике на которое открывается раздел с видеорепортажами издания, и сайта «Ведомости», в рамках меню которого имеется иконическое изображение домика, при клике на который можно вернуться на главную страницу. Исследования показывают, что оптимальным количеством пунктов меню является любое число от 5 до 9, это связано со свойством человеческой памяти одновременно запоминать 5 плюс-минус 2 названия. 11 пунктов меню, поделенных на 2 подгруппы, присутствуют в меню на сайте «Российской газеты». На одном из уровней пунктов 8, на другом — ещё 2, из разделяет плашка «все рубрики», однако она также кликабельна и поэтому

49 считается пунктом. 9 пунктов в меню присутствует на сайте издания «Петербургский Дневник», в «Бизнес Online» — 10. 17 — на сайте «NewsRu». К сожалению, стремясь облегчить навигацию, её часто и ухудшают, предоставляя слишком большую возможность для выбора. 13 пунктов меню, разделенных на 2 подгруппы, наблюдаем на сайте медиа «Югополис». В негативном ключе лидирует сайт медиапортала «Lenta», в меню которого присутствует 21 пункт, распределенный по 3 подгруппам. В группе B количество пунктов в меню следующее: 12 в «Газета.ru», 11 в «Ведомостях», 10 в «Эксперт Online», 6 в «Meduza», 13 в «Снобе», 8 в «Фонтанке» (в данные расчеты не включены пункты из каскадных меню). В группе С: «Известия» — 12 в горизонтальном меню и 22 в вертикальном, «Forbes» — 8 в горизонтальном меню и 17 в вертикальном, «Новая газета» — 7 в горизонтальном меню и 13 в вертикальном. В «The Village» — 8 в горизонтальном и 9 в вертикальном. В «Esquire» — 5, которые повторяются и в горизонтальном, и в вертикальном меню. В «Cosmopolitan» — 7 в горизонтальном и 19 в вертикальном. Говоря о количестве пунктов меню, необходимо также обратить внимание на распределение негативного пространства между этими пунктами. Все меню сетевых медиа группы А, B и С получили наивысшую оценку в связи с умеренным распределением между блоками, кроме меню интернет-издания «Meduza» из группы B, в котором имеет место быть широкое распределение между блоками. В связи с оценкой количества пунктов меню необходимо также выявить их логическую сегментацию. Наименьшую оценку по данному параметру получили те сетевые медиа, пункты меню которых не объединены по логическим группам. На сайте «Ведомости» выделены 2 большие группы, одна из которых представлена в скрытом списке и представляет из себя список разделов сайта, а другая - список рубрик. На сайте «Эксперт Online»

50 логически объединены пункты меню, связанные со спецпроектами, информацией о холдинге и другими изданиями. На сайте «Российской газеты», «Югополис», «Lenta» группы пунктов меню логически разделены. Оценим также наличие скрытых пунктов в меню исследуемых сетевых медиа. На сайтах «Forbes» и «Cosmopolitan» (группа С), «Газета.ru», «Эксперт» (группа B) после клика на выбранный пункт меню появляются дополнительные пункты в скрытом до этого дополнительном горизонтальном меню. На сайтах «Сноб» и «Фонтанка» (группа B) некоторые пункты меню скрыты под кнопкой «Ещё». На сайте «Российской газеты» скрытые пункты меню представлены после инициации триггера «Все рубрики». На сайте «Бизнес Online» все рубрики доступны только после клика на кнопку «Полное меню сайта». Далее в соответствующих таблицах по типам меню96 были подсчитаны результаты выявления индекса эргономичности меню для каждого издания, затем полученные данные были просуммированы и результаты были сгруппированы по качественности и по способу расположения меню. Числовые результаты проведенной оценки по выделенным нами критериям представлены в приложении 3, таблице 6. При оценке массовых изданий было выявлено их наибольшее соответствие общепринятым стандартам построения меню в графическом интерфейсе по сравнению с интерфейсами качественных сетевых медиа. При этом наибольший индекс эргономичности был сформирован для массовых медиа с вертикальным способом ориентации меню. Интерфейсы с меню, ориентированным по вертикали, набрали наибольшее количество баллов как среди интерфейсов массовых изданий с различными типам меню, так и качественных. Среди качественных сетевых медиа наибольшего индекса эргономичности достигли интерфейсы с горизонтально 96 Приложение 3 ориентированным меню, наименьшего - с меню,

51 ориентированным по вертикали. Среди массовых сетевых СМИ наибольших показателей достигли интерфейсы с меню, ориентированным, по вертикали, наименьших - с меню, ориентированным по горизонтали. 2.2 Анализ соответствия различных типов ориентации меню субъективному пользовательскому опыту Для дополнения данного исследования и выявления наиболее подходящего способа ориентации меню для массовых и качественных изданий мы провели тестирование меню указанных сайтов на группе асессоров. В рамках исследования асессорам было предложено выполнить ряд заданий, связанных непосредственно с использованием меню на каждом из исследуемых нами сайтов, и в результате определить степень удовлетворенности использовалась ресурсом. шкала Для субъективного определения удовлетворенности пользовательского опыта под названием «SUS» — System Usability Scale97, которая стала промышленным стандартом. Данный инструмент был создан Бруком Д. в 1986 году, и предназначен для оценки удобства и простоты использования сайта. Шкала состоит из 10 вопросов, включающих по 5 вариантов ответов для респондентов. Респондентам было предложено ответить на 2 вопроса относительно каждого сайта, и затем оценить каждый из сайтов по шкале SUS. Один из вопросов включал в себя поиск конкретной статьи без указания на раздел, в котором следует её искать, второй вопрос содержал косвенное указание на конкретный раздел. Оба вопроса были направлены на знакомство с сайтом 97 https://www.usability.gov/how-to-and-tools/resources/templates/system-usability-scale-sus.html

52 В опросе приняли участие 16 асессоров в возрасте от 22 до 26 лет, по роду деятельности являющихся специалистами. Полученные результаты были выражены в численном эквиваленте от 4 до 0. Для вопросов 1, 3, 5, 7 и 9 итоговые баллы равняются выбранному асессором ответу минус 1. Для вопросов 2, 4, 6, 8 и 10 итоговый балл равен разнице между пятью и выбранным асессором значением. Далее баллы суммировались и умножались на 2,5, и в результате был подсчитан общий балл. Полученные данные представлены в приложении 4 настоящей дипломной работы. Участники тестирования присуждали баллы за соответствие каждому утверждению по шкале от 1 до 4, в соответствии со степенью своего согласия с конкретным критерием. Ранжирование происходило следующим образом: 4 баллов присуждалось, если участник был полностью согласен с утверждением, 3 — частично согласен, 2 — средне, 1 — частично несогласен и 0 — полностью несогласен. Указанная шкала была идентична для всех исследуемых изданий Далее приводим список критериев и результатов: 1. Я думаю, что хотел(а) бы часто использовать этот сайт. Лидерами по данному параметру стали массовые сетевые медиа с меню, ориентированными по вертикали, и качественные с меню, ориентированным по вертикали. Средний индекс пользовательской удовлетворенности 1,1, максимальный для «Lenta» - 1,15 и «Газета.ru» - 1,125. 2. Я обнаружил(а), что навигация слишком сложная. Лидерами по данному критерию стали сайты массовых сетевых медиа с сочетанием горизонтального и вертикального меню, средний индекс удовлетворенности 3,4. Наименьшую сложность навигации асессоры выделили на сайтах массовых изданий с горизонтальным способом ориентации меню, - средняя оценка 2,79. 3. Я думаю, что меню простое и понятное. По данному критерию лидируют качественные сетевые издания с горизонтальным меню. Наибольший балл по

53 шкале пользовательской удовлетворенности, 1,79, набрал сайт газеты «Ведомости». 4. Я думаю, что мне нужна помощь, чтобы научиться пользоваться меню на этом сайте. Наименьшая необходимость в помощи возникла у асессоров на сайтах качественных сетевых медиа с горизонтальным меню, средний показатель 3,875, однако на сайте «Сноб» этот показатель даже выше и составляет 4,375. 5. Я обнаружил(а), что различные функции в этом меню хорошо интегрированы. В наибольшей степени несогласие по данному параметру проявилось у асессоров при использовании качественных сетевых медиа с вертикальным меню, а в наименьшей - на сайтах качественных медиа с горизонтальным меню. 6. Я думаю, в меню много несогласованности. Среди асессоров наблюдалось наибольшая степень несогласия с данным утверждением на сайтах «Фонтанки», «The Village» и «Forbes», а наивысшую степень несогласованности асессоры отметили на сайте «Эксперт Online». 7. Я предполагаю, что большинство легко научатся использовать это меню. Наибольшая легкость обучения выделена асессорами на сайтах качественных медиа с горизонтальным меню. Трудности с обучением асессоры выделили на сайтах качественных медиа, в интерфейса которых используется как вертикальное, так и горизонтальное меню. 8. Я обнаружил(а), что меню слишком громоздкое для того, чтобы его использовать. Наибольшую степень несогласия асессоры выделили по итогу использования качественных медиа с горизонтальным меню. Трудности выделены на сайтах качественных медиа с горизонтальным меню, наиболее громоздким среди них асессорам показалось меню «NewsRu». 9. Я чувствовал(а) себя очень уверенно, используя это меню. Наивысшие оценки по данному критерию получили качественные сетевые медиа с

54 горизонтальным меню, однако лидерами стали сайты изданий «Lenta» и «Новая газета». Неувереннее всего асессоры чувствовали себя во время взаимодействия с меню интернет-СМИ «Фонтанка». 10. Мне нужно было узнать много вещей, прежде чем я смог(ла) использовать это меню. Однозначными лидерами по данному критерию стали качественные медиа с горизонтальным меню, на первом месте - сайт «Газета.ru», получивший 10 голосов с оценкой «абсолютно несогласен». Трудности у асессоров в большей степени возникли с меню «Фонтанки». Результаты, полученные в ходе тестирования, представлены в приложении. Таблицы 5, 7 и 9 содержат набор выбранных респондентами вариантов ответов с разбивкой по критериям и сайтам. В таблицах 6, 8 и 10 содержатся результаты интерпретации ответов респондентов по системе SUS. Таблица 11 содержит средние значения SUS с разбивкой по качественности и ориентации меню. По результатам тестирования асессоров наивысший показатель пользовательской удовлетворенности был выявлен среди тех сетевых медиа, в интерфейсе которых фигурирует меню, ориентированное горизонтально. На втором месте — сайты, использующие сочетание горизонтального и вертикального меню. На третьем месте — сайты, составляющими графических интерфейсов которых являются вертикально ориентированные меню. При сравнении уровней пользовательской удовлетворенности при использовании качественных и массовых сетевых медиа не наблюдаетя значительной разницы, — разница составляет 0,8 и может являться статистической погрешностью. Аналогичная ситуация наблюдается при сравнении индексов SUS интерфейсов качественных и массовых сетевых медиа, использующих сочетание горизонтальных и вертикальных меню, разница составляет 3,5. При этом индекс SUS на 18,5 выше для качественных

55 сетевых медиа с горизонтальным меню, чем для массовых, что говорит о преимуществе использования горизонтального меню в интерфейсах качественных сетевых медиа. Массовые сетевые медиа с вертикальным меню лидируют по сравнению с качественными с аналогично ориентированными меню, разница составляет 12,8. Таким образом, мы можем говорить о совпадении результатов тестирования асессоров по шкале субъективной пользовательской удовлетворенности и результатов структурно-функционального анализа меню на соответствие критериям юзабилити. Вследствие этого можно сделать следующие выводы: 1. Горизонтальное меню наиболее эффективно для использования в интерфейсах сетевых медиа, тяготеющих к качественности. 2. Вертикальное меню наиболее эффективно для использования в интерфейсах массовых сетевых медиа. 3. Сочетание горизонтального и вертикального меню наиболее эффективно для использования в интерфейсах массовых сетевых медиа.

56 ЗАКЛЮЧЕНИЕ Функциональность графического интерфейса может быть измерена категориями эффективности, полезности и удобства, которые входят в зону ответственности юзабилити. Навигация — это один из основных функциональных элементов интерфейса, а её главным элементом является меню, на исследование которого направлен фокус данной работы. Исследованная литература касается особенностей проектирования удобных и полезных интерфейсов, а также — различных способов ориентации меню. В ней не содержится готовых решений относительно наилучшего варианта ориентации меню для сетевых медиа, с чем и связана актуальность данного исследования. В ходе данной работы были изучены и проанализированы существующие подходы к проектированию взаимодействия и варианты улучшения юзабилити. Затем были сформулированы критерии для оценки меню, в соответствии с которыми был проанализирован ряд сетевых медиа, разделенных на группы по качественности и по подгруппам по способу ориентации меню. Исследование показало, что интерфейсы массовых изданий в наибольшей степени соответствуют общепринятым стандартам построения графического интерфейса по сравнению с интерфейсами сетевых медиа, тяготеющих к качественности. Наиболее эргономичными были признаны меню, ориентированные по вертикали. В дополнение к исследованию было проведено тестирование асессоров по системе SUS с целью оценить удобство использования меню исследуемых интерфейсов и их эффективность в решении пользовательских задач. По итогам тестирования не было выявлено значительной разницы между интерфейсами по категории качественности. Тем не менее, тестирование по

57 шкале субъективной удовлетворенности подтвердило, что для качественных сетевых медиа наиболее релевантным является горизонтальное меню, а для массовых - вертикальное. Обобщив результаты исследований, мы пришли к следующим выводам: 1. Для качественных сетевых медиа наиболее эффективным является горизонтальное меню. 2. Для массовых сетевых медиа наиболее сетевых медиа эффективным является наибольшей степени вертикальное меню. 3. Интерфейсы соответствуют массовых стандартам построения в графического интерфейса по сравнению с интерфейсами качественных сетевых медиа. Данная работа оставляет поле для дальнейших исследований. Вероятно, привлечение большего количества асессоров и исследование по другим критериям сможет дать иные результаты.

58 СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ 1. Бизнес Online. URL: https://www.business—gazeta.ru/ 2. Бодрунова С.С., Якунин А.В. Метод эвристической экспертизы дизайна медиапроекта: опыт междисциплинарного подхода // Медиаскоп. 2016. Вып. 3. URL: http://www.mediascope.ru/node/2181 3. Большая Психологическая энциклопедия. URL: http://psychology.academic.ru/6764/ 4. Ведомости. URL: https://www.vedomosti.ru/spb/ 5. Газета.ru. URL: https://www.gazeta.ru/ 6. Гаррет Д. Веб-дизайн: Элементы опыта взаимодействия. Спб, 2008 7. ГОСТ Р ИСО 14915-1-2010 Эргономика мультимедийных пользовательских интерфейсов. Часть 1. Принципы проектирования и структура. URL: http://docs.cntd.ru/document/1200082724 8. Известия. URL: http://izvestia.ru/ 9. Ковалев А., Курдюмов И. Управление проектом по созданию интернет-сайта. М., 2001 10.Купер А., Кронин Д., Рейманн Р.Об интерфейсе. Основы проектирования взаимодействия. Спб., 2009 11. Мандел Т. Разработка пользовательского интерфейса. М., 2001 12. Медиалогия. URL: http://www.mlg.ru/ratings/media/ 13.Нильсен Я. Дизайн Web-страниц. Анализ удобства и простоты использования 50 узлов. М., 2002 14. Новая газета. URL: https://www.novayagazeta.ru 15. Петербургский дневник. URL: https://www.spbdnevnik.ru 16. Российская газета. URL: https://rg.ru

59 17. Сергеев С.Ф., Падерно П.И., Назаренко Н.А. Введение в проектирование интеллектуальных интерфейсов. Спб, 2011. URL: http://www.novsu.ru/file/1034789 18. Сноб. URL: https://snob.ru 19.Уэйншенк С. 100 главных принципов дизайна: как удержать внимание. СПб, 2012. 20. Фонтанка. URL: http://www.fontanka.ru/ 21. Эксперт Online. URL: http://expert.ru/ 22. Югополис. URL: http://www.yugopolis.ru/ 23. Якунин А.В. Веб-юзабилити и эргономика интернет-СМИ. Спб, 2015. URL:http://jf.spbu.ru/upload/files/file_1432731847_4462.pdf 24. 2IP. URL: https://2ip.ru/site-statistics/ 25. Bernard M., Hamblin C., Chaparro B.. Comparing Cascading and Indexed Menu Designs for Differences in Performance and Preference. URL: https://www.researchgate.net/publication/270723535_Comparing_Cascadin g_and_Indexed_Menu_Designs_for_Differences_in_Performance_and_Pref erence 26. Bertelli F. Micro UX. How bottom—up product design liberates designers and delights users. URL: http://www.hugeinc.com/ideas/perspective/micro—uxf 27.Cambridge Advanced Learner's Dictionary & Thesaurus. URL: http://dictionary.cambridge.org/ru/ 28. Chaparro B., Bernard M. (2001) Finding Information on the Web: Does the Amount of White Space Really Matter? Proceedings of the Tenth Annual Usability Professionals’ Association Conference.URL: http://usabilitynews.org/finding-information-on-the-web-does-the-amount-of -whitespace-really-matter/ 29. Cosmopolitan. URL: https://www.cosmo.ru/

60 30. Crumlish C., Malone E. Designing Social Interfaces. C., 2015. 31. Esquire. URL: https://esquire.ru/ 32. Forbes. URL: http://www.forbes.ru/ 33. Geissler G., Zinkhan G., Watson R.T. (2006) The inuence of home page complexity on consumer attention, attitudes, and purchase intent. URL: https://www.jstor.org/stable/20460727?seq=1#page_scan_tab_contents 34. Huang M.H. Designing website attributes to induce experiential encounters, 2003. Computers in 21 Human Behavior 19 (4) 35. Lenta. URL: https://lenta.ru/ 36. Leuthold S., Schmutz P.,, Bargas—Avila J., Tuch A., Opwis K. Vertical versus dynamic menus on the world wide web: Eye tracking study measuring the influence of menu design and task complexity on user performance and subjective preference. URL: https://www.researchgate.net/publication/224774641_Vertical_versus_dyna mic_menus_on_the_world_wide_web_Eye_tracking_study_measuring_the_ influence_of_menu_design_and_task_complexity_on_user_performance_an d_subjective_preference 37. Lopez M. Micro UX, or how to improve user experience with microinteractions. URL: http://aukera.co.uk/blog/micro-ux-improve-user-experience-microinteraction s/ 38. Mayhew D. Principles and Giudelines in Software User Interface Design. Prentice-Hall, 1992. 39. McCarthy J., Sasse A., Riegelsberger J. Could I have the Menu Please? An Eye Tracking Study of Design Conventions. URL: https://www.researchgate.net/publication/228784071_Could_I_have_the_M enu_Please_An_Eye_Tracking_Study_of_Design_Conventions?el=1_x_8& enrichId=rgreq—470964c135ef78493978de36f76a94e1—XXX&enrichSour

61 ce=Y292ZXJQYWdlOzMwMTk0NTk3MjtBUzozNzI4MDgyNDU4OTEw NzdAMTQ2NTg5NTgyMDU1Ng== 40. Meduza. URL: https://meduza.io/ 41. Melguizo P., Vidya U., Oostendorp H. Seeking information online: The influence of menu type, navigation path complexity and spatial ability on information gathering tasks. URL: https://www.researchgate.net/publication/220208532_Seeking_information_ online_The_influence_of_menu_type_navigation_path_complexity_and_spa tial_ability_on_information_gathering_tasks 42. Memon A. GUI Ripping: Reverse Engineering of Graphical User Interfaces for Testing. Maryland, 2003. URL: http://cgis.cs.umd.edu/~atif/papers/MemonWCRE2003.pdf 43. Michailidou E., Haper S., Bechhofer S. Visual complexity and aesthetic perception of web pages, 18 Proceedings of the 26th Annual ACMInternational Conference on Design of Communication, 2008 44. Murano P., Lomas T. Menu Positioning on Web Pages. Does it Matter? URL: https://www.researchgate.net/publication/275824433_Menu_Positioning_on _Web_Pages_Does_it_Matter?el=1_x_8&enrichId=rgreq—470964c135ef78 493978de36f76a94e1—XXX&enrichSource=Y292ZXJQYWdlOzMwMTk0 NTk3MjtBUzozNzI4MDgyNDU4OTEwNzdAMTQ2NTg5NTgyMDU1Ng == 45. Murano P. User Interface Menu Design Performance and User Preferences: A Review and Ways Forward. URL: https://www.researchgate.net/profile/Dr_Pietro_Murano/publication/301945 972_User_Interface_Menu_Design_Performance_and_User_Preferences_A _Review_and_Ways_Forward/links/575fcb8c08ae9a9c955fca3b.pdf 46. NewsRu. URL: http://www.newsru.com/

62 47. Nielsen Norman Group. URL:https://www.nngroup.com/articles/ 48. Norman D. Microinteractions (My Foreword). URL: http://www.jnd.org/dn.mss/microinteractions_m.html 49.Norman D. Technology First, Needs Last. URL: http://jnd.org/dn.mss/technology_first_needs_last.html 50. Patsula P., Detenber B., Theng Y. Structure Processing of Web—Based Menus. URL: http://www.tandfonline.com/doi/abs/10.1080/10447318.2010.487197 51. Pittsley K., Memmott S. Improving Independent Student Navigation of Complex Educational Web Sites: An Analysis of Two Navigation Design Changes in LibGuides. URL: https://ejournals.bc.edu/ojs/index.php/ital/article/viewFile/1880/pdf 52. Saffer D. Microinteractions. S., 2013. 53. The Village. URL: http://www.the-village.ru/ 54. Usability.gov. URL:https://guidelines.usability.gov/ 55.Von Saucken С., Michailidou I., Lindemann U. How to Design Experiences: Macro UX versus Micro UX Approach. URL: https://link.springer.com/chapter/10.1007/978-3-642-39253-5_15

63 ПРИЛОЖЕНИЯ Приложение 1 Табл. 1 Информация о разнице в подходах к UX98 на основании исследования Saucken C., Michailidou I., Lindemann U.99, представленная в табличном виде Критерий Макро UX Микро UX UX подход Создание цельной картины UX и получение концепции продукта Создание элементов для улучшения потребительского опыта Пользовательские цели Статичные цели: нужно объяснить, зачем пользователю нужен этот продукт Цели действия: нужно объяснить, как пользователь будет использовать этот товар Стартовая точка Предопределенный набор пользовательских потребностей Существующий дизайн продукта Результат Эффективный UX Целесообразный UX Влияние Продуктовая концепция и функции Дизайн воплощения продукта Временной промежуток Долгосрочный: необходимо учитывать весь процесс проектирования Краткосрочный: возможна периодическая поддержка во время нескольких этапов Уровень абстракции Довольно высокий (цели, назначение) Конкретные намеки на дизайн Возможность Радикальные UX инновации Только инкрементальные UX инновации Риск Высокий: изменение целого продукта Низкий: лишь улучшения в деталях100 98 X — «user experience», в пер. с англ. — «пользовательский опыт». U on Saucken С., Michailidou I., Lindemann U. How to Design Experiences: V Macro UX versus Micro UX Approach. URL: https://link.springer.com/chapter/10.1007/978-3-642-39253-5_15 100 Там же 99

64 Приложение 2 Табл. 2 Кодировочный лист для юзабилити—тестирования меню № 1 2 3 4 5 6 Категория кодирования Код Топология целевого элемента — меню (квадрант экрана) меню в левом секторе 2 меню в правом секторе 1 меню в центральном секторе 0 Соответствие модульной структуре страницы Меню соответствует модульной сетке страницы 2 Меню не соответствует модульной сетке страницы 1 Модульная сетка отсутствует 0 Соответствие ритму страницы Меню соответствует ритму всей страницы 2 Меню соответствует ритму страницы частично 1 Меню не соответствует ритму страницы 0 Присутствие меню в области экрана «F—паттерн» Присутствует 2 Присутствует частично 1 Отсутствует 0 Фиксация меню Меню фиксировано, при прокрутке страницы не меняет своего положения 2 Меню не фиксировано, при прокрутке страницы исчезает с области просмотра 0 Смена режима (без учета контента) Обнаружима для пользователя 2

65 Не обнаружима для пользователя 7 8 9 10 11 12 13 Конкурирующий контент функциональных элементов) 0 (неальтернативное дублирование Отсутствует 2 Присутствует 0 Адаптивность меню Присутствует, учитывает модуль и текст 2 Присутствует частично 1 Отсутствует 0 Адаптивность пунктов меню (триггеров) Демонстрируют состояние в момент выбора и после 2 Демонстрируют состояние лишь в одном случае 1 Не демонстрируют состояние 0 Аналогичность последствии инициации пунктов меню (триггеров) Инициируется одно и то же действие при любых условиях 2 Инициируются различные действия при различных условиях 0 Зонирование меню Высокая контрастность 2 Низкая контрастность 1 Гомогенность 0 Тонально—цветовой контраст литера/фон в пунктах меню Высокая контрастность текста и фона в меню 2 Средняя контрастность 1 Низкая контрастность 0 Интенсивность визуальной обратной связи Высокая контрастность 2 Средняя контрастность 1

66 Низкая контрастность 14 15 16 17 18 0 Креолизация меню Креолизованный список 2 Некреолизованный список 0 Наличие обоих форм представления 1 Негативное пространство меню Умеренное распределение между блоками 2 Широкое распределение 1 Узкое 0 Количество пунктов меню 5—9 2 Менее 5 1 Более 9 0 Логическая сегментация Пункты меню объединены в логические группы 2 Пункты меню не объединены в логические группы 0 Наличие скрытых пунктов меню Скрытые пункты меню отсутствуют 1 Скрытые пункты меню присутствуют 0

67 Приложение 3 Структурно-функциональный анализ меню в контексте задач юзабилити в группировке по способу расположения меню Табл. 3 Структурно-функциональный анализ вертикальных меню в контексте задач юзабилити (включает подгруппы А тестовых групп 1 и 2) № Меню расположено вертикально Российская газета 1 БИЗНЕС Online NewsRu Югополис Петербургский дневник Lenta 2 2 2 2 2 2 Топология целевого элемента — меню (квадрант экрана) Меню в левом секторе — 2 Меню в правом секторе — 1 Меню в центральном секторе —0 2 2 2 2 2 Соответствие модульной структуре страницы Меню соответствует модульной сетке страницы — 2 Меню не соответствует модульной сетке страницы — 1 Модульная сетка отсутствует — 0 1 3 1 2 2 Соответствие ритму страницы Меню соответствует ритму всей страницы — 2 Меню соответствует ритму страницы частично — 1 Меню не соответствует ритму страницы — 0 2 4 1 2 2 Присутствие меню в области экрана «F—паттерн» Присутствует — 2 Присутствует частично — 1

68 Отсутствует — 0 2 5 2 2 2 2 2 Фиксация меню Меню фиксировано, при прокрутке страницы не меняет своего положения — 2 Меню не фиксировано, при прокрутке страницы исчезает — 0 0 6 2 0 2 2 2 2 2 0 2 2 2 2 2 2 2 2 1 2 Смена режима Обнаружима для пользователя — 2 Не обнаружима для пользователя — 0 2 7 0 Конкурирующий контент Отсутствует — 2 Присутствует — 0 2 8 2 Адаптивность меню Присутствует, учитывает модуль и текст — 2 Присутствует частично — 1 Отсутствует — 0 2 9 1 1 Адаптивность пунктов меню Демонстрируют состояние в момент выбора и после — 2 Демонстрируют состояние лишь в одном случае — 1 Не демонстрируют состояние— 0 2 10 1 2 1 Аналогичность последствий инициации пунктов меню (триггеров) Инициируется одно и то же действие при любых условиях - 2 Инициируются различные действия при различных условиях - 0 2 11 Зонирование меню 0 0 2 0 2

69 Высокая контрастность — 2 Низкая контрастность — 1 Гомогенность — 0 2 12 2 0 2 1 2 2 1 2 1 0 1 1 1 1 2 2 2 2 0 0 2 0 Тонально—цветовой контраст литера/фон в пунктах меню Высокая контрастность — 2 Средняя контрастность — 1 Низкая контрастность — 0 1 13 1 1 Интенсивность визуальной обратной связи Высокая контрастность — 2 Средняя контрастность — 1 Низкая контрастность — 0 1 14 1 0 Креолизация меню Креолизованный список — 2 Некреолизованный список — 1 Наличие обоих форм представления — 0 1 15 1 1 Негативное пространство меню Умеренное распределение между блоками — 2 Широкое распределение — 1 Узкое — 0 2 16 2 Количество пунктов меню 5—9 — 2 Менее 5 — 1 Более 9 — 0 0 17 0 Логическая сегментация Пункты меню объединены в логические группы — 2 Пункты меню не объединены в логические группы — 0

70 2 18 0 0 2 0 2 Наличие скрытых пунктов меню Скрытые пункты меню отсутствуют — 1 Скрытые пункты меню присутствуют — 0 И т о г о 0 0 1 1 1 1 26 19 20 30 22 31 Табл. 4 Структурно—функциональный анализ горизонтальных меню в контексте задач юзабилити (включает подгруппы B групп 1 и 2) № Меню расположено горизонтально Газета.ru 1 Ведомости Эксперт Online Meduza Сноб Фонтанка Топология целевого элемента — меню (квадрант экрана) Меню в левом секторе —2 Меню в правом секторе — 1 Меню в центральном секторе —0 0 2 0 0 0 0 0 2 2 2 2 Соответствие модульной структуре страницы Меню соответствует модульной сетке страницы — 2 Меню не соответствует модульной сетке страницы — 1 Модульная сетка отсутствует — 0 2 3 2 2 2 Соответствие ритму страницы Меню соответствует ритму всей страницы — 2 Меню соответствует ритму страницы частично — 1 Меню не соответствует ритму страницы — 0 2 2 2 2

71 4 Присутствие меню в области экрана «F—паттерн» Присутствует — 2 Присутствует частично — 1 Отсутствует — 0 2 5 2 2 0 2 2 Фиксация меню Меню фиксировано, при прокрутке страницы не меняет своего положения — 2 Меню не фиксировано, при прокрутке страницы исчезает — 0 2 6 2 0 0 0 0 0 2 2 0 2 2 2 2 2 2 2 1 1 Смена режима Обнаружима для пользователя — 2 Не обнаружима для пользователя — 0 2 7 2 Конкурирующий контент Отсутствует — 2 Присутствует — 0 2 8 2 Адаптивность меню Присутствует, учитывает модуль и текст — 2 Присутствует частично — 1 Отсутствует — 0 2 9 2 2 Адаптивность пунктов меню Демонстрируют состояние в момент выбора и после — 2 Демонстрируют состояние лишь в одном случае — 1 Не демонстрируют состояние— 0 2 10 2 1 2 Аналогичность последствий инициации пунктов меню (триггеров) Инициируется одно и то же действие при любых условиях - 2 Инициируются различные действия при различных условиях - 0 2 2 2 2 0 0

72 10 Зонирование меню Высокая контрастность — 2 Низкая контрастность — 1 Гомогенность — 0 1 11 0 0 2 2 0 2 1 2 1 1 0 1 1 1 2 1 2 2 0 2 0 2 Тонально—цветовой контраст литера/фон в пунктах меню Высокая контрастность — 2 Средняя контрастность — 1 Низкая контрастность — 0 2 12 1 2 Интенсивность визуальной обратной связи Высокая контрастность — 2 Средняя контрастность — 1 Низкая контрастность — 0 1 13 0 0 Креолизация меню Креолизованный список — 2 Некреолизованный список — 1 Наличие обоих форм представления — 0 0 14 0 1 Негативное пространство меню Умеренное распределение между блоками — 2 Широкое распределение — 1 Узкое — 0 2 15 2 Количество пунктов меню 5—9 — 2 Менее 5 — 1 Более 9 — 0 0 16 0 Логическая сегментация Пункты меню объединены в логические группы — 2 Пункты меню не объединены в логические группы — 0

73 2 18 2 2 0 0 0 Наличие скрытых пунктов меню Скрытые пункты меню отсутствуют — 1 Скрытые пункты меню присутствуют — 0 И т о г о 0 0 0 1 0 0 26 23 20 24 20 18 Табл. 5 Структурно—функциональный анализ интерфейсов с сочетанием горизонтальных и вертикальных меню в контексте задач юзабилити (включает подгруппы C групп 1 и 2) № Меню расположено горизонтально и вертикально Известия 1 Forbes Новая газета The Village Esquire Cosmopolitan Топология целевого элемента — меню (квадрант экрана) Меню в левом секторе —2 Меню в правом секторе — 1 Меню в центральном секторе —0 2 2 0 0 2 0 2 2 2 Соответствие модульной структуре страницы Меню соответствует модульной сетке страницы — 2 Меню не соответствует модульной сетке страницы — 1 Модульная сетка отсутствует — 0 2 3 2 Соответствие ритму страницы 2 2

74 Меню соответствует ритму всей страницы — 2 Меню соответствует ритму страницы частично — 1 Меню не соответствует ритму страницы — 0 2 4 2 2 2 2 2 1 2 Присутствие меню в области экрана «F-паттерн» Присутствует — 2 Присутствует частично — 1 Отсутствует — 0 2 5 2 1 2 Фиксация меню Меню фиксировано, при прокрутке страницы не меняет своего положения — 2 Меню не фиксировано, при прокрутке страницы исчезает — 0 2 6 2 2 2 2 2 2 2 2 0 0 2 0 0 1 2 2 2 2 Смена режима Обнаружима для пользователя — 2 Не обнаружима для пользователя — 0 0 7 0 Конкурирующий контент Отсутствует — 2 Присутствует — 0 0 8 0 Адаптивность меню Присутствует, учитывает модуль и текст — 2 Присутствует частично — 1 Отсутствует — 0 2 9 2 2 Адаптивность пунктов меню Демонстрируют состояние в момент выбора и после — 2 Демонстрируют состояние лишь в одном случае — 1 Не демонстрируют состояние— 0 1 10 1 2 2 Аналогичность последствии инициации пунктов меню (триггеров)

75 Инициируется одно и то же действие при любых условиях - 2 Инициируются различные действия при различных условиях - 0 2 10 2 2 2 2 0 2 1 1 2 1 2 2 1 1 1 1 1 1 2 2 2 2 0 0 2 0 Зонирование меню Высокая контрастность — 2 Низкая контрастность — 1 Гомогенность — 0 1 11 1 Тонально-цветовой контраст литера/фон в пунктах меню Высокая контрастность — 2 Средняя контрастность — 1 Низкая контрастность — 0 1 12 2 2 Интенсивность визуальной обратной связи Высокая контрастность — 2 Средняя контрастность — 1 Низкая контрастность — 0 0 13 0 1 Креолизация меню Креолизованный список — 2 Некреолизованный список — 1 Наличие обоих форм представления — 0 1 14 1 1 Негативное пространство меню Умеренное распределение между блоками — 2 Широкое распределение — 1 Узкое — 0 2 15 2 Количество пунктов меню 5—9 — 2 Менее 5 — 1 Более 9 — 0 0 0

76 16 Логическая сегментация Пункты меню объединены в логические группы — 2 Пункты меню не объединены в логические группы — 0 0 17 2 0 0 0 0 Наличие скрытых пунктов меню Скрытые пункты меню отсутствуют — 1 Скрытые пункты меню присутствуют — 0 И т о г о 1 0 1 1 1 0 21 21 24 25 25 22 Табл. 6 Результаты структурно-функционального анализа интерфейсов сетевых медиа с различными типами ориентации меню Ориентация меню Качественность сетевого медиа Качественные Итого Массовые Вертикально 65 (26+19+20) 83 (30+22+31) 148 Горизонтально 69 (26+23+20) 62 (24+20+18) 131 Сочетание 66 (21+21+24) 72 (25+25+22) 138 Итого 200 217

78 Приложение 4 Результаты тестирования асессоров Табл. 7 Результаты тестирования асессоров для сайтов с вертикальным меню № критерия Rg.ru БИЗНЕС Online NewsRu Югополис Петербургский дневник Lenta 1 24202422 04222242 20103321 01032132 20203421 24301022 2021342414 324022 1020142102 20224424 410142 44202242 2 14233222 31422232 02321222 20232212 33230221 31223230 0031302231 320200 1241222212 02110222 222142 11020222 3 40311223 31122403 40223423 22323440 30134223 13422033 3422322222 322342 3011132211 32224222 323012 22422322 4 00112021 01100212 00121011 12111000 00120011 01121000 0021302102 123001 0021302002 00110221 102002 10200211 5 40211122 02111242 20222222 02222222 20123223 01232232 3422342242 223423 3011122211 32123223 222310 21232332 6 34222221 42222312 14224121 42221114 24223223 42232323 0022302202 232020 0423132230 03121121 242213 00311022 7 40442122 20424124 30232333 02223233 43242232 24243232 3423244223 434242 3232212212 33222234 412421 42143421 8 44133014 33012412 14230120 42321111 24203214 20324124 0021002302 103002 0341231021 01001020 231423 20010221 9 44243242 21221223 24123222 41322323 34122124 12413422 3442422434 422323 3411024112 34232342 423402 23323323 10 24120200 41220200 14120010 04121010 04120101 41102010 0421422012 020020 0421201241 04014020 221121 11013023 Табл. 8 Интерпретация результатов тестирования асессоров для сайтов с вертикальным меню

79 № критерия Rg.ru БИЗНЕС Online NewsRu Югополис Петербургский дневник Lenta 1 1,18 0,5 0,75 1,18 0,625 1,5 2 2,625 3,25 2 3,625 3 3,75 3 1 1,5 1,18 1,5 0,625 1,5 4 4,125 4,25 0,625 3,875 4 4,125 5 0,625 0,75 0,875 1,75 0,5 1,18 6 2,75 2,875 2,5 3,625 2,875 3,75 7 1,375 1,25 1,75 1,75 1,125 1,625 8 2,75 3,25 2,25 4 3 4,25 9 1,5 1,375 1,375 2 1,125 1,75 10 3,625 3,875 1,125 3,625 3,375 3,625 Индекс SUS 53,9 57,2 36 67,3 50,6 67,6 Табл. 9 Результаты тестирования асессоров для сайтов с горизонтальным меню № критерия Газета.ru Ведомости Эксперт Online Meduza Сноб Fontanka 1 4332023242 20141201 321210 14442424 202120224 103201020 1441421 3232223 302330144 10222021220 2313443 20222 2 1021220121 04120100 222020 24201201 022031120 312323222 3112022 2333221 201201100 12012012321 2202021 32222 3 3422423422 44132442 234333 41424243 402344420 122232122 243414411 1021023 444244242 30430234212 4324322 10230 4 0012012021 00220022 21211 02120221 001310110 022001320 2202023 2213211 010100021 00023012000 0210101 23021 5 3441343312 40243402 332433 12341323 402233232 121211220 0223242 2224024 203224322 30221121302 0324223 22122 6 1021211001 11102111 021211 11012111 102112010 324223122 1021112 2422221 101221020 10221221220 1210122 12222

80 7 3422232244 44232422 244233 33433433 402332314 202231332 0233132 3213230 442242432 30334222304 4334333 32232 8 1022011012 10211012 201212 11101011 102002113 023020010 0100113 2200103 101130120 10113012141 1201113 24113 9 3421241342 44121413 424422 14344323 401013344 141341122 3343020 1222123 342412322 40120224211 4324321 21121 10 0020220020 02202210 101000 00100101 002010210 042214222 0003003 1020101 001010200 00101233001 0203003 23031 Табл. 10 Интерпретация результатов тестирования асессоров для сайтов с горизонтальным меню № критерия Газета.ru Ведомости Эксперт Online Meduza Сноб Fontanka 1 1,125 1,18 1 0,625 1,5 0,625 2 3,75 3,75 3,625 2,75 4 1,625 3 1,875 2 1,5 0,625 2,125 0,875 4 3,875 3,875 3,875 3,625 4,375 1 5 1,875 1,375 1,125 0,75 1,18 0,625 6 4 4 4 2,75 3,875 1,5 7 2 2,25 1,18 1 2,125 1,375 8 3,875 4,125 4 4 3,875 1,625 9 1,75 1,75 1,125 1 1,625 0,625 10 4,375 4,25 4,25 3,5 4,25 1,18 Индекс SUS 71,25 71,38 64,2 51,56 72,3 27,6 Табл. 11 Результаты тестирования асессоров для сайтов с сочетанием горизонтального и вертикального меню

81 № критерия Известия Forbes Новая газета The Village Esquire Cosmopolitan 1 1010323112 20312304 123223 20120343 302232333 202421322 0223233 0213224 20012001 44344223 20322143420 22122 2 2241342224 14332034 133243 43301243 240120412 102231142 1010121 0211413 00342130 42213032 00130021130 13023 3 2212212112 24423244 222222 30303222 244322442 402223420 3232223 2022302 43422422 34334423 40321343203 21332 4 1032013113 10101210 113121 40401021 000201001 002212220 1010121 0212222 02322203 22122221 04120411120 12021 5 2021202122 14323144 222323 33003423 143413222 402243022 2232223 1111223 40124201 23432422 44243214221 22121 6 2031222203 20212240 122323 21420202 201021121 200120213 2112222 2130212 04213021 04221013 02004112011 20204 7 1323122212 14241230 221233 30414221 143213424 402324022 3233423 2121333 42222232 43234432 44231424123 23322 8 22311423 10210023 02420023 00113023 9 2411322241 14214123 312323 04302421 244224242 402132130 3432422 2124231 44112441 23433431 44243124131 34421 10 1411241132 14112411 131221 14014021 042111024 002102300 2110021 2123202 04320043 21012002 04121041110 10222 20214223 00211021 Табл. 12 Интерпретация результатов тестирования асессоров для сайтов с сочетанием горизонтального и вертикального меню № критерия Известия Forbes Новая газета The Village Esquire Cosmopolitan 1 0,625 0,75 1,18 1 1 1 2 2,375 2,5 3,625 3,25 3,25 3,75 3 0,75 1,5 1,75 0,875 2 1,125 4 3,5 3,875 4,375 3,625 3,25 3,625 5 0,75 1,5 1,375 0,875 1,18 1,18 6 3,125 3,375 3,625 3,625 3,375 3,75

82 7 1 1,125 1,75 1,125 1,75 1,5 8 2,75 3 3,875 4,125 3,375 3,75 9 1,18 1,125 1,875 0,875 1,75 1,625 10 3,125 3,25 3,625 3,75 3,5 3,625 Индекс SUS 47,95 55 67,6 57,8 61 62,3 Табл. 13 Результаты тестирования асессоров с группировками по качественности и ориентации меню Ориентация меню Качественность сетевого медиа Качественные Средний индекс SUS Массовые Вертикально 49 61,8 55,4 Горизонтально 68,9 50,4 59,7 Сочетание 56,8 60,3 58,6 Средний индекс SUS 58,3 57,5

Рецензии:

Авторизуйтесь, чтобы добавить рецензию

- у работы пока нет рецензий -

Отзывы:

Авторизуйтесь, чтобы оставить отзыв