Главная Коллекция "Revolution" Журналистика, издательское дело и СМИ Минимализм как принцип визуальной организации новостных порталов

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

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

Рубрика Журналистика, издательское дело и СМИ
Вид диссертация
Язык русский
Дата добавления 18.11.2017
Размер файла 19,8 M
рефераты на заказ со скидкой

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

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

Страница:

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

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

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

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

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

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

ЗАКЛЮЧЕНИЕ

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

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

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

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

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

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

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

СПИСОК ИСТОЧНИКОВ И ЛИТЕРАТУРЫ

Ашманов И., Иванов А. Оптимизация и продвижение сайтов в поисковых системах. -- СПб.: Питер, 2009

Баканов А. С., Обознов А. А. Эргономика пользовательского интерфейса: от проектирования к моделированию человеко-компьютерного взаимодействия. М.: Институт психологии РАН, 2011.

Берд Д. Веб-дизайн: руководство разработчика. СПб.: Питер, 2012.

Бородаев Д. В. Веб-сайт как объект графического дизайна: монография. Харьков: Септима, 2006.

Воронов Н.В. Суть дизайна. М, 2002.

Гаррет Д. Веб дизайн, ориентированный на пользователя. Элементы опыта взаимодействия. СПб.: Симбо, 2008.

Герчук Ю.Я. Функциональная графика XX века // История графики и искусства книги. 2000.

Глазычев В.Л. Дизайн как он есть. М.: «Европа», 2006.

Головач В. Дизайн пользовательского интерфейса. 2009.

Головко С.Б. Дизайн деловых периодических изданий. М.: Юнити-Дана, 2008.

Демарко Т., Листер Т. «Человеческий фактор: успешные проекты и команды». СПб: Символ Плюс, 2005

Интернет-СМИ: Теория и практика: Учеб.пособие для студентов вузов/ Под ред. М.М.Лукиной. - М.: Аспект Пресс, 2010.

Калиновский А.И. Юзабилити - как сделать сайт удобным. М: Новое знание, 2005.

Картер М. Современный дизайн газет. М.: Российско-Американский Информационный Пресс-Центр, 1995.

Круг С. Веб-дизайн. -- М.: Символ-плюс, 2009.

Купер А. Об интерфейсе. Основы проектирования взаимодействия. М.: Символ, 2009.

Купер А. Психбольница в руках пациентов: почему высокие технологии сводят нас с ума. М.: Символ, 2007.

Королькова А. Живая типографика. М.: IndexMarket, 2010.

Кричевский В. Типографика в терминах и образах. Том I. М.: Слово, 2000.

Курушин В.Д. Графический дизайн и реклама. М.: ДМК Пресс, 2008.

Лаврентьев, Б. З. История дизайна. М.:Гардарики, 2007.

Лаптев В. Типографика: порядок и хаос. М.:, 2008.

Лаптев В. Модульные сетки: проектирование многополосных изданий. М.: РИП-холдинг, 2007.

Лесняк В.И. Графический дизайн: основы профессии. М.: IndexMarket, 2011.

Левит С.Я., Гордон А.В., Зверева Г.И. Культурология. Энциклопедия. Том 1., М.: Росспэн, 2007.

Магазанник В. Д., Львов В. М. Человеко-компьютерное взаимодействие. Тверь: Триада, 2005.

Макнейл П. Веб-дизайн. Идеи, секреты, советы. СПб.: Питер, 2012.

Мандел Т. Разработка пользовательского интерфейса. - М.: ДМК-Пресс, 2008.

Маркотт И. Отзывчивый веб-дизайн. СПб.: Питер, 2012.

Никитин В.А., Привалова О.Ю. Шрифты: современные начертания, характерологические особенности, типология. «Техника и технология СМИ: Дизайн газеты». СПб. : СПбГУ, 2004.

Нильсен Я. Веб-дизайн: книга Якоба Нильсена. СПб.: Символ-Плюс. 2003.

Нильсен Я. Дизайн Web-страниц. Анализ удобства и простоты использования 50 узлов. М.: Вильямс, 2002.

Нильсен Я., Перниче К. Веб-дизайн: анализ удобства использования веб-сайтов по движению глаз. Москва: Вильямс, 2010.

Нильсен Я. Веб дизайн: книга Якоба Нильсена. Спб.: Символ-Плюс, 2003.

Норман Д. А. Дизайн привычных вещей. М.: Вильямс, 2006.

Ньюарк К. Что такое графический дизайн? М.: Астрель, 2005.

Пикулевский В.О. Практическая эстетика. Харьков: Lap Lambert, 2012.

Пикулевский О.В.Дизайн и культура. Харьков: Гуманитарный центр, 2014.

Раскин Д. Интерфейс: новые направления в проектировании компьютерных систем. М.: Символ-плюс, 2005.

Речинский А. В., Сергеев С. Ф. Разработка пользовательских интерфейсов. Юзабилити-тестирование интерфейсов информационных систем. -- СПб.: Изд-во Политехн. ун-та, 2012.

Розенфельд Л., Морвиль П. Информационная архитектура в Интернете. М.: Символ-Плюс, 2008.

Самара Т. Типографика цвета. Практикум. М.: Рип Холдинг, 2010.

Сергеев С. Ф. Юзабилити-тестирование интерфейсов информационных систем в гуманитарных науках и искусстве. -- СПб.: С.-Петерб. ун-та, 2012

Солсо Р. Когнитивная психология. Спб.: Питер, 2015.

Туэмлоу Э. Графический дизайн. Фирменный стиль, новейшие технологии и креативные идеи. М.: Астрель, 2007.

Феличи Дж. Типографика: шрифт,верстка, дизайн. СПб.: БХВ-Петербург, 2004.

Чихольд Я. Облик книги. М., 1980 .

Уэйшенк С. 100 главных принципов дизайна: как удержать внимание. СПб.: Питер, 2012.

Якунин А.В. Веб-дизайн и оформление электронных СМИ. СПб.: С.Петерб. гос. ун-т, Высш. шк. журн. и мас.коммуникаций, 2013.

Якунин А.В. Веб-юзабилити и эргономика интернет-СМИ. СПб.: С.-Петерб. гос. ун-т, Ин-т Высш. шк. журн. и мас.коммуникаций, 2015.

Ambrose G., Harris P. The Fundamentals of Typography. NY.: A&C Black, 2006.

Benyon D., Turner P., Turner S. Designing Interactive Systems: People, Activities, Contexts, Technologies, NY.: Addison-Wesley, 2005.

Bernhaupt R. Game User Experience Evaluation. London: Springer, 2015.

Bhangal S., Jankowski T. Foundation Web Design: Essential HTML, JavaScript, CSS, Photoshop, Fireworks, and Flash. NY.: Apress, 2003.

Bishop S., Hartman A. Interactive Media Design and Development with Adobe CS6. Delmar Cangage Learning., 2013.

Carroll J.M. HCI Models, Theories, and Frameworks: Toward a Multidisciplinary Science. San Francisco: Morgan Kaufmann Publishers, 2003.

Colpitt F. Minimal Art: The Critical Perspective. Washington: University of Washington Press, 1993.

Curtis N. Modular Web Design: Creating Reusable Components for User Experience Design and Documentation. New Riders, 2010.

DiMarco J. Web Portfolio Design and Applications. NY.: Idea Group Inc, 2006.

Goldberg R. Digital Typography Pocket Primer. London: Windsor Professional Information, 2000.

Grabinger, R. S. Designing screens for learning. In H. van Oostendorp & S. de Mul (Eds.) Cognitive aspects of electronic text processing. Norwood, NJ: Ablex Publishing Corporation, 1996.

Hillner M. Basics Typography: Virtual Typography. NY.: AVA Publishing, 2009.

Hollis R. Graphic Design: A Concise History. London: Thames and Hudson, 2001.

Holmqvist K., Nystrom M., Andersson R., Eye Tracking: A comprehensive guide to methods and measures. Oxford, 2011.

Horton, W. Designing and writing online documentation: Help files to hypertext. NY: John Wiley & Sons, 1989.

Kuniavsky M. Smart Things: Ubiquitous Computing User Experience Design. London: Elsever, 2010.

McCarthy J., Wright P. Technology as Experience. London: The Mit Press, 2012.

Marcus A. Design, User Experience, and Usability: User Experience Design Practice. Springer., 2014.

Marcus A. Return on Investment for usable user-interface design: Examples and statistcs for Usability. Nielsen Norman Group, 2013 URL: http://goo.gl/OpjcJA. (дата обращения: 24.01.2016)

Marzona D. Minimal Art. Berlin: Tashen, 2004.

Meyer J. Minimalism: Art and Polemics in the Sixties, 2000.

Mullet K., Sano D., Designing Visual Interfaces // Englewood Cliffs, NJ: Prentice Hall PTR. 1995.

Nielsen J. Usability Engineering. NY.: Morgan Kaufmann, 1993.

Obendorf H. Minimalism: Designing Simplicity. NY: Springer, 2009.

Obendorf H. Where «less» is «more» - notions of minimalism and the design of interactive systems: A constructive analysis of products & processes of human-computer-interaction design from a minimalist standpoint. Hamburg University, 2007.

Overy P. De Stijl: Art, Architecture, Design / P.Overy. - N.Y., Publisher: Thames & Hudson Ltd, 1991.

Redish J., Dumas J., A Practical Guide to Usability Testing. NY.: Intellect Ltd, 1999.

Reiss E. Usable Usabilty. Simple Steps for Making Stuff Better. John Wiley & Sons, Inc., 2012.

Rizvanoglu K., Gorkem C. Research and Design Innovations for Mobile User Experience. NY: Information Science Reference, 2014.

Spool J.M., Scanlon T., Schroeder W., Snyder C., DeAngelo T. Web Site Usability: A Designer's Guide, User Interface Engineering. NY.: North Andover MA. 1997.

Strickland E. Minimalism: Origins. Bloomington: IU Press, 2000.

Stuff C. After Modernist Painting : The History of a Contemporary Practice, NY.: I.B.Tauris & Co, 2013.

Tognazzini B. Tog on Interface. NY.: Addison-Wesley, 1996.

Tselentis J., Haley A., Poulin R., Seddon T., Leonidas G., Saltz I., Henderson K., Alterman T. Typography, Referenced: A Comprehensive Visual Guide to the Language, History, and Practice of Typography. NY.: Rockport Publishers, 2012.

White, J. V. Editing by design: Word and picture communication for editors and designers. NY.: R.R. Bowker Company, 1984.

Wolfersperger S.K., Carlston E. Experimenting with Art. NY: Good Year Books, 1991.

Wilson C. User Experience Re-Mastered: Your Guide to Getting the Right Design. Burlington: Morgan Kaufmann Publishers, 2010.

Статьи:

Баева Л.В. Виртуальная сансара: трансформация модели реальности в условиях информационной культуры // Информационное общество. 2012. № 2.

Бакаев М.А. Об ограниченной применимости некоторых базовых законов в сфере человеко-машинного взаимодействия для пожилых пользователей // Научный вестник НГТУ. 2008. № 1(30)

Беляев А.А. Дизайн-модель интернет-версии как результат трансформации модели печатного издания (на материале российских сми) // Вестник Московского университета. Серия 10: Журналистика. 2008. № 2.

Блинникова И.В., Величковский Б.Б., Капица М.С., Леонова А.Б. Экспериментальное исследование прерываний в компьютеризированной деятельности: анализ стратегий переключений между основной и дополнительной задачами // Экспериментальная психология. 2009. № 1. С. 35-51

Величковский Б.М. Исследование когнитивных функций и современные технологии // Вестник РАН. 2010. № 80. С. 440-446.

Долгих М.Н. Дизайн и виртуальная среда: дигитальные ландшафты в аспекте гибридных медиа. // Вестник Томского государственного университета. 2014. № 379.

Егорова И.Н., Рыгина В.Е. Исследование методов оптимизации структуры web-страниц // Восточно-Европейский журнал передовых технологий. 2010. Т. 5. № 2 (47)

Конюхова О.В. Применение метода CMN-GOMS для анализа требований к графическому пользовательскому интерфейсу компьютерной системы на примере графического редактора // Информационные системы и технологии. 2005. № 1 (7).

Копов С. А., Макарычев П. П., Шибанов С. В. Разработка метрик измерения юзабилити на основе деятельностного подхода // НиКа. 2010.

Назаренко Н.А., Никулин М.Н. Оценка пользовательского интерфейса проектируемых специализированных систем // Сборник "XII всероссийского совещания по проблемам управления ВСПУ-2014". 2014. ( С.6402-6407)

ПРИЛОЖЕНИЕ

Рис. 1 Макеты рассматриваемых сайтов: «Lenta.ru», «РИА Новости», «РБК», «Meduza».

«Lenta.ru», «РИА Новости» и «Meduza» имеют адаптивный макет, подразумевающий следованию стандартам отзывчивого дизайна.

Рис. 2 Соблюдение «F-паттерна визуального восприятия» : «Lenta.ru», «РИА Новости», «РБК», «Meduza».

Рис. 3 Зонирование страницы (модульная сетка) «Lenta.ru».

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

Рис. 4 Зонирование страницы (модульная сетка) «РИА Новости».

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

Рис. 5 Зонирование страницы (модульная сетка) «РБК.ру».

Область экрана разделена на модули, но есть нарушения в использовании сетки: «дыры» внутри сетки, а так же несоответствие вертикальных и горизонтальных разделителей. Верстка смешанная.

Рис. 6 Зонирование страницы (модульная сетка) «Meduza».

Наиболее ярко выраженная модульная верстка из всех рассматриваемых медиаресурсов. Разные по форме блоки (тяготеющие к квадратной и прямоугольной форме), верстка преимущественно по горизонтали. Горизонтальные и вертикальные разделители четко фиксируются

Рис. 7 Негативное пространство страницы (по порядку: «Lenta.ru», «РИА Новости», «РБК.ру», «Meduza»).

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

Рис. 8 Зонирование страницы (контрастное оформление блоков информации) на сайте «Lenta.ru».

Рис. 9 Зонирование страницы (контрастное оформление блоков информации) на сайте «РИА Новости».

Рис. 10 Зонирование страницы (контрастное оформление блоков информации) на сайте «РБК».

Рис. 11 Зонирование страницы (контрастное оформление блоков информации) на сайте «Meduza».

Рис. 12 Просмотр сайта «Lenta.ru» с экрана компьютера

Рис. 13 Просмотр сайта «РИА Новости» с экрана компьютера

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

Рис. 14 Просмотр сайта «РБК.ру» с экрана компьютера

Рис. 15 Просмотр сайта «Meduza» с экрана компьютера

Рис. 16 Соотношение полей и области контента (по порядку: «Lenta.ru», «РИА Новости», «РБК», «Meduza».

Как видим, минимальные поля используют в своем дизайне сайты «РБК» и «Meduza»: пространство экрана на этих сайтах максимально задействовано под область контента. «Lenta.ru» использует довольно широкие поля, тем не менее не превышающие площадь, отведенную под контент. Сайт «РИА Новости» имеет широкие поля, превышающие площадь контента.

Рис. 17 Значения кегля и интерлиньяжа на сайте «Lenta.ru» (px)

Рис. 18 Значения кегля и интерлиньяжа на сайте «РИА Новости» (px)

Рис. 19 Значения кегля и интерлиньяжа на сайте «РБК» (px)

Рис. 20 Значения кегля и интерлиньяжа на сайте «Meduza» (px)

Рис. 21 Контраст литерного контура на главной странице «Lenta.ru»

Рис. 22 Контраст литерного контура на главной странице «РИА Новости»

Рис. 23 Контраст литерного контура на главной странице «РБК»

Рис. 24 Контраст литерного контура на главной странице «Meduza»

Рис. 25 Тонально-цветовой контраст графемы и фона первого экрана (главные новости). По порядку: «Lenta.ru» «РИА Новости», «РБК», «Meduza»

Рис. 26 Тонально-цветовой контраст графемы и фона ленты новостей (главные новости). По порядку: «Lenta.ru» «РИА Новости», «РБК», «Meduza»

ПРИЛОЖЕНИЕ 2.

Рис. 1 Зонирование страницы (модульная сетка) на странице «Lenta.ru»

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

Рис. 3 Зонирование страницы (модульная сетка) на странице «РБК»

Нарушения в использовании модульной сетки на сайте «РБК» распространяются и на новостной странице.

Рис. 4 Зонирование страницы (модульная сетка) на странице «Медуза»

Активное использование модулей (использование ярко выраженных геометрических блоков по всей площади страницы).

Рис. 5 Негативное пространство страницы (по порядку: «Lenta.ru», «РИА Новости», «РБК.ру», «Meduza»).

Рис. 6 Зонирование страницы (Контрастное оформление блоков информации) на сайте «Lenta.ru»

Рис. 7 Зонирование страницы (Контрастное оформление блоков информации) на сайте «РИА Новости»

Рис. 8 Зонирование страницы (Контрастное оформление блоков информации) на сайте «РБК»

Рис. 9 Зонирование страницы (Контрастное оформление блоков информации) на сайте «Meduza»

Рис. 10 Интерлиньяж и контраст литерного контура на странице «Lenta.ru»

Рис. 11 Интерлиньяж и контраст литерного контура на странице «РИА Новости»

Рис. 12 Интерлиньяж и контраст литерного контура на странице «РБК»

Рис. 13 Интерлиньяж и контраст литерного контура на странице «Meduza»

Рис. 14 Длина наборной строки и абзацный отступ на странице «Lenta.ru»

Рис. 15 Длина наборной строки и абзацный отступ на странице «РИА Новости»

Рис. 16 Длина наборной строки и абзацный отступ на странице «РБК»

Рис. 17 Длина наборной строки и абзацный отступ на странице «Meduza»

Рис. 18 Тонально-цветовой контраст текста и фона

ПРИЛОЖЕНИЕ 3

Рис. 1 Использование модульной сетки на сайте «Lenta.ru»

Как мы видим, главная страница медиаресурса «Lenta.ru» активно использует возможности своей модульной организации. В общем виде на сайте преобладает вертикальная верстка. Что же касается ленты новостей, то нельзя сказать, что в ней ярко доминирует либо квадратный либо прямоугольный модуль, Квадратные блоки (текст + фото) смешаны с прямоугольными блоками, содержащими только заголовок новости.

Рис. 2 Использование модульной сетки на сайте «РИА Новости»

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

Рис. 3 Использование модульной сетки на сайте «РБК»

Рассматривая общий макет страницы «РБК», мы можем выделить модули, по большей части прямоугольной формы, использование квадрата практически не встречается.

Рис. 4 Использование модульной сетки на сайте «Meduza»

Рис. 5 Соблюдение геометрической точности линий согласно сетке на сайте «РБК»

Рис. 7 Соблюдение геометрической точности линий согласно сетке на сайте «РИА»

Рис. 6 Соблюдение геометрической точности линий согласно сетке на сайте «Lenta.ru

Рис. 8 Соблюдение геометрической точности линий согласно сетке на сайте «Meduza»

Рис. 9 Типографика и шрифтовое расписание на сайте «Lenta.ru»

Рис. 10 Типографика и шрифтовое расписание на сайте «РИА Новости»

Рис. 11 Типографика и шрифтовое расписание на сайте «РБК»

Рис. 12 Симметричность композиции

Рис. 13 Использование цвета

Рис. 14 Негативное пространство

Рис. 15 Ритм и повторы на сайтах «Lenta.ru» и «РИА Новости»

Рис. 16 Ритм и повторы на сайтах «РБК» и «Meduza»

Рис. 17 Функциональность интерфейса на сайте «Lenta.ru»

Рис. 18 Функциональность интерфейса на сайте «РБК»

Рис. 19 Функциональность интерфейса на сайте «РИА Новости»

Рис. 20 Функциональность интерфейса на сайте «Meduza»

ПРИЛОЖЕНИЕ 4.

Табл. 1. Кодировочный лист структурно-функционального анализа главной страницы медиаресурса в контексте задач юзабилити

№

Категория кодирования

Код

1

Область экрана («F-паттерн визуального восприятия»)

Максимально используется

3

Минимально используется

1

Не используется

0

2

Зонирование страницы (модульная сетка)

Область экрана разделена на очевидные модули, активное использование сетки

3

Область экрана разделена на модули, но

есть нарушения в использовании сетки

1

Модульная сетка не используется

0

3

Негативное пространство страницы

Умеренное распределение негативного пространства между блоками контента

3

Широкое разделение блоков контента, много «воздуха»

1

Слишком узкое разделение блоков контента, «воздуха» нет

0

4

Зонирование страницы

Контрастное оформление блоков информации

Высокая контрастность (наличие акцидентального, аффордативного, селективного контаста)

3

Низкоконтрастное (присутствует 1 или 2 контраста)

1

Гомогенность

0

Дополнительно:

Присутствует акцент на элементах рубрикации - 1 балл;

1

Присутствует акцент на самые актуальные новости- 1 балл;

1

5

Поля страницы

Поля меньше, чем пространство контента

3

Поля незначительно меньше или равнозначны пространству контента

1

Поля больше области контента

0

6

Интерлиньяж :

На 2-4 px больше кегля

3

На 5-6 px больше кегля

1

Более 7 px

0

Дополнительно:

Нет ошибок интерлиньяжа

1

Наличие 1-2 ошибок интерлиньяжа

0

Наличие более 2 ошибок

-1

7

Контраст литерного контура

Класс шрифтов в заголовках:

Сансериф (рубленные, гротеск)

3

Сериф (с засечками)

1

Используются разные гарнитуры

1

Акцидентные

0

Насыщенность заголовков:

Использование жирного или полужирного начертаний

3

Использование нормального или иных начертаний

0

Класс шрифтов в ленте новостей:

Сансериф (рубленные, гротеск) - 3 балла;

3

Сериф (с засечками) - 1 балл;

1

Используются разные гарнитуры - 1 балл;

1

Акцидентные - 0 баллов;

0

Насыщенность шрифтов в ленте новостей:

Использование жирного или полужирного начертаний - 3 балла;

3

Используется только нормальное начертания - 0 баллов;

0

8

Тонально-цветовой контраст

Первый экран (главное):

Высокая контрастность текста и фона - 3 балла;

3

Средняя контрастность текста и фона - 1 балл;

1

Низкая контрастность текста и фона - 0 баллов;

0

Лента новостей:

Высокая контрастность текста и фона - 3 балла;

3

Средняя контрастность текста и фона - 1 балл;

1

Низкая контрастность текста и фона - 0 баллов;

0

9

Гарнитура

Использование 2 гарнитур - 3 балла;

3

Использование 1 гарнитуры - 1 балл;

1

Использование > 2 гарнитур - 0 баллов;

0

Табл. 2. Кодировочный лист структурно-функционального анализа новостной страницы медиаресурса в контексте задач юзабилити

№

Категория кодирования

Код

1

Зонирование страницы (модульная сетка)

Область экрана разделена на очевидные модули, активное использование сетки

3

Область экрана разделена на модули, но есть нарушения в использовании сетки

1

Модульная сетка не используется

0

2

Негативное пространство страницы

Умеренное распределение негативного пространства между блоками контента

3

Отсутствие лишних деталей, много «воздуха»

1

Концентрация элементов, мало «воздуха»

0

Дополнительно

Рекламные блоки отсутствуют

3

1-2 рекламных блока

1

3 и более рекламных блоков

0

3

Зонирование страницы

Контрастное оформление блоков информации

Высокая контрастность (наличие акцидентального, аффордативного, селективного контаста)

3

Низкоконтрастное (присутствует 1 или 2 контраста)

1

Гомогенность

0

Дополнительно:

Наличие иллюстраций к тексту

3

Иллюстрации отсутствуют

0

4

Интерлиньяж:

Заголовок

На 2-4 px больше кегля

3

На 5-6 px больше кегля

1

>7 px или < 2 px

0

Основной текст

На 2-4 px больше кегля

3

На 5-6 px больше кегля

1

>7 px или < 2 px

0

Дополнительно:

Нет ошибок интерлиньяжа

1

Наличие 1-2 ошибок интерлиньяжа

0

Наличие более 2 ошибок

1

5

Контраст литерного контура

Класс шрифтов в заголовках:

Сансериф (рубленные, гротеск)

3

Сериф (с засечками)

1

Акцидентные

0

Насыщенность заголовков:

Использование жирного или полужирного начертаний

3

Использование нормального или иных начертаний

0

ЛИД:

Используется отличная от основного текста гарнитура или начертание

3

Используется та же гарнитура и начертание, что и в основном тексте

1

Лид отсутствует

0

Основной текст:

Сериф (с засечками)

3

Сансериф (рубленные, гротеск)

1

Акцидентные

0

6

Длина строки

60-80 символов - 3 балла;

3

80-95 символов - 1 балл;

1

< 60 символов или > 95 символов - 0 баллов;

0

7

Тонально-цветовой контраст

Высокая контрастность текста и фона

3

Средняя контрастность текста и фона

1

Низкая контрастность текста и фона

0

8

Гарнитура

Использование 2 гарнитур

3

Использование 1 гарнитуры

1

Использование > 2 гарнитур

0

9

Пробелы (Абзацный отступ внутри публикации)

Пробел в 3-4 символа

3

Пробел < 3 или > 4 символов

1

Дополнительно

Фиксированный пробел

3

Нефиксированный пробел

0

Табл. 3. Кодировочный лист реализации функционально-эстетических критериев минимализма в визуальной организации медиаресурса

Категория кодирования

Код

1

Использование модульной сетки:

Модульная сетка присутствует

3

Модульная сетка отсутствует

0

Лента новостей:

Активное использование модулей (ярко выраженные одинаковые геометрических блоки по всей площади страницы)

3

Преобладание квадратного или прямоугольного модуля

1

Нет ярко выраженного доминирования

0

2

Соблюдение геометрической точности линий согласно сетке:

Геометрическая точность линий и форм соблюдена по всей странице

3

Геометрическая точность линий и форм не соблюдена

0

3

Типографика и шрифтовое расписание:

Количественный признак:

Использование 1 гарнитуры - 3 балла;

3

Использование более 2 и более гарнитур - 0 баллов;

0

Качественный признак:

Использование только сансерифа

3

Использование сансерифа и серифа

1

Использование только серифа

0

4

Симметричность композиции:

Композиция асимметрична

3

Чередование принципов симметрии и ассиметрии

1

Композиция в целом симметрична

0

5

Использование цвета:

Монохромность или 1 контрастный цвет

3

Кроме черного используется 2-3 цвета

1

Кроме черного используются > 3 цветов

0

Дополнительно (типографика):

Кроме черного и его оттенков используется 1-2 цвета

3

Кроме черного и его оттенков используется 3 цвета

1

Кроме черного и его оттенков используется >3 цветов

0

6

Использование негативного пространства страницы:

Умеренное распределение негативного пространства между блоками контента

3

Широкое разделение блоков контента, много «воздуха»

1

Слишком узкое разделение блоков контента, «воздуха» нет

0

7

Ритм и повторы:

Элементы оформления создают ритм по всей странице

3

Элементы оформления создают ритм по странице частично

1

Элементы оформления не создают ритм

0

8

Функциональность интерфейса:

Элементы навигации и поиска контента расположены в одном месте

3

Элементы навигации и поиска контента расположены в непосредственной близости, но не рядом

1

Элементы навигации и поиска контента расположены в разных областях экрана

0

9

Навигация:

Навигационное меню фиксировано и не меняет свое положения при прокрутке

3

Навигационное меню не имеет строго фиксированного положения и исчезает с области просмотра при прокрутке

0

10

Многокомпонентность навигации:

Использование одноуровневой навигации

3

Использование двухуровневой навигации

1

Более сложная организация навигации

0

11

Контрастность страницы:

Высокая контрастность между блоками информации

3

Средняя контрастность между блоками информации

1

Низкая контрастность между блоками информации

0

12

Мнение эксперта

Медиаресурс, дизайн которого наиболее соответствует эстетике минимализма

3

Медиаресурс, дизайн которого занимает 2 место в аспекте эстетики минимализма

1

Медиаресурс, дизайн которого занимает 3 место в аспекте эстетики минимализма

0

Медиаресурс, дизайн которого наименее соответствует эстетике минимализма:

-1

Табл. 4. Структурно-функциональный анализ главной страницы сайта в контексте задач юзабилити

Параметры

«Lenta.ru»

«РИА»

«РБК.ру»

«Meduza»

Кодирование

1

Область экрана («F-паттерн визуального восприятия»)

3

1

3

1

Максимально используется - 3 балла;

Минимально используется - 1 балл;

Не используется - 0 баллов;

2

Зонирование страницы (модульная сетка)

3

3

1

3

Область экрана разделена на очевидные модули, активное использование сетки - 3 балла;

Область экрана разделена на модули, но есть нарушения в использовании сетки - 1 балл;

Модульная сетка не используется - 0 баллов;

3

Негативное пространство страницы

0

3

1

Умеренное распределение негативного пространства между блоками

контента - 3 балла;

Широкое разделение блоков контента, много «воздуха» - 1 балл;

Слишком узкое разделение блоков контента, «воздуха» нет - 0 баллов;

4

Зонирование страницы

3

3

1

1

Контрастное оформление блоков информации

Высокая контрастность (наличие акцидентального, аффордативного, селективного контаста) - 3 балла;

Низкоконтрастное (присутствует 1 или 2 контраста) - 1 балл;

Гомогенность - 0 баллов;

Дополнительно:

2

2

2

Присутствует акцент на элементах рубрикации - 1 балл;

Присутствует акцент на самые актуальные новости- 1 балл;

5

Поля страницы

1

0

3

3

Поля меньше, чем пространство контента - 3 балла;

Поля незначительно меньше или равнозначны пространству контента - 1 балл;

Поля больше области контента - 0 балл;

6

Интерлиньяж :

1

3

3

3

На 2-4 px больше кегля - 3 балла;

На 5-6 px больше кегля - 1 балл;

Более 7 px - 0 баллов;

Дополнительно:

0

0

1

-1

Нет ошибок интерлиньяжа - 1 балл;

Наличие 1-2 ошибок интерлиньяжа - 0 баллов;

Наличие более 2 ошибок: - 1 балл;

7

Контраст литерного контура

Класс шрифтов в заголовках:

1

3

3

3

Сансериф (рубленные, гротеск) - 3 балла;

Сериф (с засечками) - 1 балл;

Используются разные гарнитуры - 1 балл;

Акцидентные - 0 баллов;

Насыщенность заголовков:

3

3

0

3

Использование жирного или полужирного начертаний - 3 балла;

Использование нормального или иных начертаний - 0 баллов;

Класс шрифтов в ленте новостей:

1

3

3

1

Сансериф (рубленные, гротеск) - 3 балла;

Сериф (с засечками) - 1 балл;

Используются разные гарнитуры - 1 балл;

Акцидентные - 0 баллов;

Насыщенность шрифтов в ленте новостей:

3

3

0

3

Использование жирного или полужирного начертаний - 3 балла; Используется только нормальное начертания - 0 баллов;

8

Тонально-цветовой контраст

3

3

1

3

Первый экран (главное):

Высокая контрастность текста и фона - 3 балла;

Средняя контрастность текста и фона - 1 балл;

Низкая контрастность текста и фона - 0 баллов;

Лента новостей:

1

Страница:


Подобные документы

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.

© 2000 — 2023, ООО «Олбест» Все права защищены