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

Принцип минимализма как фактор юзабилити в дизайне новостных порталов

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

Рубрика Журналистика, издательское дело и СМИ
Вид магистерская работа
Язык русский
Дата добавления 31.10.2017
Размер файла 5,9 M
рефераты на заказ со скидкой

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

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

Страница:

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

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

После того, как мы осуществили структурно-функциональный анализ визуальной организации главных и новостных страниц медиаресурсов «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 асессоров. Результаты тестирования ассесоров и общие результаты структурно-функционального анализа юзабилити КГМ совпали, что обозначило обоснованность выбранного нами метода.

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

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

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

Список источников и литературы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Статьи:

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

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

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

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

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

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

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

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

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

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

98. Рыбакова Ю.Ю. Дизайн интерфейса как ресурс повышения конкурентоспособности // Медиа в современном мире. Молодые исследователи. МАтериалы 14-й международной конференции студентов, магистрантов и аспирантов 11-13 марта 2015 г. C. 469 - 471 URL: http://jf.spbu.ru/upload/files/file_1425986116_2.pdf (дата обращения: 15.01.2016).

99. Хлопотникова В.Н. Минимализм: «Искусство первичных структур» // Известия РГПУ им. А.И. Герцена. 2009. № 118

100. Фомишина О.В. Повышение качества восприятия контента сетевых электронных журналов средствами модульного проектирования // Вестник современной науки. 2015. Вып.7 № 7-1

101. Шеховцова А.Н. Базовые принципы, применяемые в мультимедийном проектировании // Молодежь и XXI век - 2015 материалы V Международной молодежной научной конференции в 3-х томах. 2015.

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

103. Bernard, M. L., Fernandez, M., Hull, S., & Chaparro, B. S. The effects of line length on children's and adults' perceived and actual online reading performance //Proceedings of the Human Factors and Ergonomics Society 47th Annual Meeting, 2003. P. 1375-1379.

104. Bernard M., Mills M. So, What Size and Type of Font Should I Use on My Website? // Usability News. 2000. URL: http://usabilitynews.org/so-what-size-and-type-of-font-should-i-use-on-my-website/

105. Bernard M., Chaparro B., Thomasson, R. Finding information on the web: does the amount of whitespace really matter? // Usability News. 2000. Vol. 2, Issue 1. URL: http://usabilitynews.org/finding-information-on-the-web-does-the-amount-of-whitespace-really-matter/ (дата обращения: 24.04.2016)

106. Boyarski D., Neuwirth C., Forlizzi J.,Regli S.H. A study of fonts designed for screen display // In Proceedings of CHI'98. Los Angeles. 1998. P. 127-128.

107. Chaparro B., Baker J.R., Shaikh D., Hull S., Brady L. Reading Online Text: A Comparison of Four White Space Layouts. 2003. URL: http://usabilitynews.org/finding-information-on-the-web-does-the-amount-of-whitespace-really-matter/ (дата обращения: 24.04.2016)

108. Chaparro B., Bernard M. Finding Information on the Web: Does the Amount of White Space Really Matter? // Proceedings of the Tenth Annual Usability Professionals' Association Conference, 2001. URL: http://usabilitynews.org/finding-information-on-the-web-does-the-amount-of-whitespace-really-matter/ (дата обращения: 20.03.2016).

109. Deng L., Poole M.S. Affect in web interfaces: a study of the impacts of web page visual complexity and order // Management Information Systems Qurterly. 2010. Vol. 34 (4), Р. 711-730.

110. Duchnicky, J. L., & Kolers, P. A. Readability of text scrolled on visual display terminals as a function of window size. Human Factors, 25. 1983. P. 683-692.

111. Dyson, M. C., & Kipping, G. J. The effects of line length and method of movement on patterns of reading from screen // Visible Language, 32. 1998. P. 150-181.

112. Dyson, M. C., & Haselgrove, M. The influence of reading speed and line length on the effectiveness of reading from screen // International Journal of Human-Computer Studies. 2001. P. 585-612.

113. Fitts P.M. The information capacity of the human motor system in controlling the amplitude of movement // Jornal of Exper. Psychology. 1954. - Vol. 47, Issue 6. Р. 381-391

114. Geissler G., Zinkhan G., Watson R.T., The in?uence of home page complexity on consumer attention, attitudes, and purchase intent // Journal of Advertising . 2006. Vol. 35 Р. 69-80.

115. Geissler G., Zinkhan G., Watson R.T., Web home page complexity and communication effectiveness // Journal of the Association for Information Systems. 2001. Vol. 2 Р. 1-47.

116. Huang M.H., Designing website attributes to induce experiential encounters // Computers in Human Behavior. 2003. Issue. 19 (4), -- Р. 425-442.

117. Lo L. Three ways to convert browsing into impulse buying: Website streamline and decoration // Management, Knowledge and Learning (MakeLearn) International Conference, 19-21 June, 2013. -- P. 1177-1186

118. Meyer K. The Roots of Minimalism in Web Design. 2012 URL: https://www.nngroup.com/articles/roots-minimalism-web-design/ (дата обращения: 18.04.2016).

119. Michailidou E., S. Haper, S. Bechhofer, Visual complexity and aesthetic perception of web pages // Proceedings of the 26th Annual ACMInternational Conference on Design of Communication, 2008. -- P.216

120. Morrison S., Noyes J., A Comparison of Two Computer Fonts: Serif versus Ornate Sans Serif // Usability News. 2003. URL: http://usabilitynews.org/a-comparison-of-two-computer-fonts-serif-versus-ornate-sans-serif/ (дата обращения: 24.04.2016)

121. McGovern G. Block reading: how we read on the Web. 2008. URL: http://www.gerrymcgovern.com/new-thinking/block-reading-how-we-read-web (дата обращения: 24.04.2016)

122. Newell A., Card S.K. The prospects for psychological science in human-computer interaction // Human-Computer Interaction. 1985. Vol. 1. Р.209-242

123. Nielsen J. Usability 101: Introduction to Usability. 2012 URL: https://www.nngroup.com/articles/usability-101-introduction-to-usability/ (дата обращения: 18.01.2016).

124. Nielsen J., F-shaped pattern for reading web content. 2012 URL: http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/ (дата обращения: 27.01.2016).

125. Nielsen, J. Enhancing the explanatory power of usability heuristics. Proc. ACM CHI'94 Conf. (Boston, MA, April 24-28), 152-158.

126. Nielsen J., 10 Usability Heuristics for User Interface Design. 2012. URL: https://www.nngroup.com/articles/ten-usability-heuristics/ (дата обращения: 27.01.2016).

127. Nielsen J., User Satisfaction vs. Performance Metrics. 2012 URL: https://www.nngroup.com/articles/satisfaction-vs-performance-metrics/ (дата обращения: 20.03.2016).

128. Seow C.S. Information Theoretic Models of HCI: A Comparison of the Hick-Hyman Law and Fitts' Law // Human-Computer Interaction. 2005. Vol. 20 (3). Р. 315-352

129. Shaikh A.D. The Effects of Line Length on Reading Online News // Usability News. 2005. URL: http://usabilitynews.org/finding-information-on-the-web-does-the-amount-of-whitespace-really-matter/ (дата обращения: 24.04.2016)

130. Siu C., Chaparro B. How do Users View Search Results Presented in a Grid Layout. 2014 URL: http://usabilitynews.org/how-do-users-view-search-results-presented-in-a-grid-layout/ (дата обращения: 24.04.2016)

131. Sicilia M., Ruiz S., The effects of the amount of information on cognitive responses in online purchasing tasks, Electronic Commerce Research and Applications Vol. 9 (2) .2010. 183-191.

132. Spool, J. M., Schroeder, W., Scanlon, T., Snyder, C. Web sites that work: Designing with your eyes open // Proceedings of CHI' 98. 1998, -- P. 18-23.

133. Treisman, A., Gelade, G. A feature integration theory of attention // Cognitive Psychology. 1980. Vol 12, Р. 97-136.

134. Tullis T.S., Boynton J.L., Hersch H. Readability of fonts in the windows environment // In Proceedings of CHI'95. 1995. P. 127-128.

135. VanEenoo C. Minimalism in Art and Design: Concept, influences, implications and perspectives // Journal of Fine and Studio Art Vol. 2011. Issue 2(1)

Источники

136. Медиа-кит «Lenta.ru». URL: https://lenta.ru/mediakit/LAYOUT_Lenta_About_us_rus_2015.pdf (дата обращения: 24.04.2016)

137. Медиа-кит «РИА Новости». URL: http://mediator-rus.com/images/RIA16.pdf (дата обращения: 24.04.2016)

138. Медиа-кит «Meduza». URL: https://meduza.io/static/ads/meduza-mkit-2016-2.pdf (дата обращения: 24.04.2016)

139. Медиа-кит «РБК.РУ». URL: http://mediator-rus.com/images/rbkprez.pdf (дата обращения: 24.04.2016)

140. TNS Web Index. Апрель, 2016 год. URL: http://www.tns-global.ru/services/media/media-audience/internet/information/ (дата обращения: 24.04.2016)

141. Медиалогия. Информационно-аналитическая структура. URL: http://www.mlg.ru/ratings/federal_media/0/0/0/ (дата обращения: 24.04.2016)

142. Национальный стандарт Российской Федерации: эргономика взаимодействия человек-система. Часть 210. Человеко-ориентированное проектирование интерактивных систем. М.:Стандартинформорм. 2013

143. International Organization for Standardization. ISO 9241-11: UErgonomic requirements for office work with visual display terminals (VDTs) -- Part 11: Guidance on usability. URL: https://www.iso.org/obp/ui/#iso:std:iso:9241:-11:ed-1:v1:en (дата обращения: 18.01.2016).

144. International Standard ISO 9241-210. Ergonomics of human-system interaction -- Part 210: Human-centred design for interactive systems. ISO, 2010

Приложение 1

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

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

Рис. 3 Зонирование страницы (модульная сетка) «Lenta.ru». Область экрана разделена на очевидные модули, верстка преимущественно по вертикали. Активное использование сетки достигается за счет совмещения геометрически блоков "текст + фото", фиксации вертикальных разделителей.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Приложение 2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Приложение 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Приложение 4

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

№

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

Код

1

Область экрана («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

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

Элементы оформления с...

Страница:


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

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

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