CC BY-NC-ND
95
В.В. Муромцев, А.В. Муромцева
ОСОБЕННОСТИ ПРЕДСТАВЛЕНИЯ ИНФОРМАЦИИ НА СТРАНИЦАХ САЙТА
В статье рассмотрены подходы к рациональному представлению информации на сайте, основанные на особенностях восприятия информации человеком. Приведены оценки времени, требуемого пользователю для знакомства со страницей сайта. Представленные рекомендации позволят создать и оформить максимально эффективный сайт (с точки зрения восприятия информации пользователем и с учетом заданного времени просмотра информации на странице).
Ключевые слова: сайт, представление информации, количество информации, информационные технологии.
Сеть Интернет полностью изменила парадигму получения и представления информации. Информационные ресурсы сети поистине безграничны. Появились новые технологии представления и получения информации, которые в свою очередь изменили стиль коммуникации.
Информационной единицей в сети Интернет является сайт1. При создании сайта реализуется одна из информационных технологий, которая обращена к конкретной аудитории и направлена на стимулирование желаемых поведенческих реакций.
Создание сайта начинается, с определения цели, ради которой сайт создается. Вся дальнейшая разработка должна быть подчинена выбранной цели. С точки зрения пользователя должны быть выполнены правила «юзабилити», т. е. сайт должен быть организован таким образом, чтобы пользователю было комфортно получать требуемую информацию и взаимодействовать в рамках сайта.
© Муромцев В.В., Муромцева А.В., 2013
Собственно, можно говорить о трех основных компонентах сайта, выражающих эту цель. Это информационное содержание (контент), представление информации (в том числе и дизайн) и навигация на сайте.
Информационное содержание и навигация на сайте определяются исходя из специфики создаваемого сайта и в каждом отдельном случае могут сильно отличаться.
Что касается представления информации на сайте, то существуют некоторые общие правила, рассмотрению которых и посвящена данная статья.
Динамика современного мира заставляет экономить основной информационный ресурс - время. Следует отметить, что представление информации идет в условиях виртуальных ком-муникаций2 и в соответствии с их основными свойствами3 сопровождается потерей части семантической информации. Поэтому необходимо представлять информацию на сайте в максимально эффективном виде.
Современный уровень развития информационных технологий, требует новых подходов к разработке пользовательских интерфейсов, в основе которых должен лежать учет особенностей восприятия информации человеком.
Страницы сайтов сети Интернет представляют собой отдельные экранные реализации с информацией в виде цифр, надписей и элементов, несущих ту или иную информацию. Обычно объемы и параметры размещаемой информации определяются исходя из некоторых общих соображений без количественных оценок и учета особенностей восприятия информации человеком.
Схожесть задач представления информации и технологий ее реализации позволяет использовать при создании сайтов опыт презентаций4. Страницы сайтов с позиции представления информации аналогичны слайдам презентации. Поэтому требования к размещению и представлению информации в основном одни и те же. Рекомендации по расположению информации на экранном поле аналогичны для слайдов презентации и страниц сайта.
Прежде всего следует обратить внимание на элементы графического дизайна. Их всего четыре. Но на основе этих четырех базовых элементов, можно создать информативные, доступные и качественные страницы сайта. Вот эти элементы.
1. Фон. Это самый нижний слой страницы сайта. Под ним ничего не может быть. Он может быть простым (одноцветным), градиентным, с повторяющимся узором или в виде рисунка.
2. Текст.
3. Графические элементы (таблицы, матрицы, иерархии, диаграммы, графики и т. д.).
4. Рисунки (фотографии, наброски, карты, значки, логотипы и т. д.).
Как было отмечено, при создании сайта можно воспользоваться правилами создания слайдов в презентациях5, а именно:
1. Основную мысль - в заголовок.
Заголовок на сайте является одним из важнейших элементов. Он содержит основную информацию о странице, статье и любом другом элементе. От того как он сформулирован6, зависит останется веб-пользователь на данной странице или нет.
При представлении информации в журналистике применяют стиль перевернутой пирамиды7. Этот же стиль все чаще используется при создании Web-страниц: «... часто (пользователи)8 ограничиваются чтением верхней части статьи. Лишь самые заинтересованные читатели промотают страницу, и лишь эти немногие увлеченные души достигнут основания пирамиды и получат в награду всю вашу историю во всех ее деталях»9.
2. Меньше значит лучше.
Нужно помнить, что страницы сайта - это не документ, а средство наглядного представления информации. Всю информацию следует представить в наглядном и легко воспринимаемом (читаемом) виде. Большое количество текста нередко вызывает эффект отворачивания от экрана. Чтобы это не произошло, его нужно разбить на группы. Желательно, чтобы каждая группа содержала по три темы, мысли или тезиса.
Кроме того, разбив материал на группы и внимательно посмотрев на него, попытаемся преобразовать его в таблицу, а затем в схему или график. Любая информация на сайте должна быть представлена в легко воспринимаемом виде. Она не должна вызывать к себе двоякого отношения и разночтений.
Дизайнеры часто увлекаются различными техническими новинками и забывают, что «простые средства представления материалов позволяют пользователям полностью управлять тремя ключевыми факторами процесса: тем, как они читают, тем, как просто они находят нужную информацию, тем, как просто они получают эту информацию»10.
Так один из основателей «юзабилити» Якоб Нильсен считает: «Если пользователь думает о том, как выполнить ту или иную задачу на сайте, владельцы сайта уже проиграли, т. к. большое количество пользователей уйдет и не будет тратить время при условии наличия конкурентов. Следовательно, дизайнеры и разработчики
должны сделать сайт таким, что пользователю не надо думать, и вместо этого он просто будет выполнять задачи на сайте»11.
3. Стилевое единство.
Любой хороший сайт должен обладать определенным стилем и придерживаться его. Помогает этому использование на сайте не более трех шрифтов, трех цветов, трех анимационных и ароматических эффектов12.
Кроме этого можно воспользоваться принципами дизайна, которые часто встречаются в различной печатной продукции13:
- контраст - если элементы не обозначают одно и то же, то оформляйте их по-разному;
- повтор - повторяйте наглядные детали оформления на протяжении всей работы;
- выравнивание - каждый элемент зрительно связывайте с другими элементами;
- приближенность - элементы, которые относятся друг к другу, располагайте рядом.
Эти принципы прекрасно сочетаются и дополняют изложенные выше рекомендации. Данное правило для сайтов подтверждено рядом статей об основах юзабилити14.
От того, как размещены различные объекты на экране, зачастую зависит, воспримет или проигнорирует представляемую информацию пользователь. Принято считать15, что когда на экране возникает новое изображение, глаза европейского зрителя обращаются к верхнему левому углу, затем, уходят вниз и вправо совершенно бессознательно. (Приобретенная привычка, основанная на особенности письменности.) Именно поэтому европейские художники чаще всего подписывают свои картины в правом нижнем углу.
Косвенным подтверждением этого факта являются исследования, проведенные Нильсеном: «При просмотре веб-страниц только 22% пользователей в первую очередь обращают внимание на графику и 78% - на текст. Другими словами, в основном смотрят вначале на заголовки, подзаголовки и резюме. Они часто не обращают внимания на изображения вплоть до второго или третьего посещения страницы»16. Именно заголовки, подзаголовки и другие элементы текста чаще всего располагаются на данной кривой.
На сайте бельгийского университета UCL17 обращают на себя внимание элементы, расположенные на рассматриваемой кривой. Это, прежде всего, название университета, средняя его часть и эмблема «One people - one planet».
Рис. 1. Восприятие информации на экране
На Ближнем Востоке книги начинаются, с точки зрения европейцев, в конце и читаются справа налево. И их глаза «настроены» начинать чтение с верхнего правого угла страницы. Поэтому кривая бессознательного восприятия информации у них другая.
Таким образом, наиболее выгодными для размещения важной информации на странице сайта, предназначенного для европейцев, являются места на кривой, проходящей из верхнего левого угла в нижний правый (рис. 1), а места 1 и 2 - менее заметными для пользователей. Для того чтобы пользователь обратил внимание на информацию, расположенную в местах 1 и 2, его нужно дополнительно мотивировать. Эту функцию могут выполнять и выпадающее меню, и различные яркие иллюстрации и т. п. Однако если движение глаз по рассматриваемой кривой не утомляет пользователя, то перемещение их в другие места создает дополнительную работу и приводит к желанию перейти в другое место, на другой сайт.
Если ранее можно было говорить в Интернете о короткой и длинной странице, то сейчас вся информация размещается в основном на длинных вертикальных страницах, просмотр которых осуществляется прокруткой страницы сайта. Следует помнить, что при каждом прокручивании страниц наш глаз снова начинает движение по данной кривой (рис. 1). Существующие неподвижные верхние части экрана с названием, логотипом, адресом и телефоном запоминаются зрителем и служат ориентиром в данном про-
странстве. Имя автора в конце страницы выполняет ту же функцию, что и подпись художника на картине.
Цветовая гамма также играет весьма значительную роль. Для сайтов, представляющих солидные организации, она выбирается исходя из рекомендаций brand book. В остальных случаях выбор осуществляется на основании рекомендаций и вкусов разработчика. Хороший эффект дает использование триад цвета, образующих равносторонний треугольник, вписанный в цветовой круг18. Однако использование цвета стоящего друг напротив друга в цветовом круге не рекомендуется. Это может привести к переключению внимания пользователя и уходу с сайта19. Наиболее безопасным считается, как и в презентациях, использование вариантов одного и того же цвета с разной интенсивностью, например: тёмно-синий, синий и светло-голубой; тёмно-зелёный, зелёный и бледно-салатовый20.
Сайты реализуются с помощью современных технических средств и, естественно, при создании их используются мультимедийные средства (аудио- и видеоряды, ароматические и звуковые эффекты21 и т. д.). Однако их использование должно быть, прежде всего, согласовано с основной задачей сайта, так как обычно они занимают достаточно большой объем памяти, а это может перегрузить сайт. В этом случае пользователь за время загрузки может просто потерять интерес к сайту.
Важным элементом сайта является объем представляемой информации и, как следствие, - время необходимое для просмотра страницы сайта. Для оценки количественных характеристик информации, размещаемой на странице сайта (слайде), могут быть предложены следующие подходы.
Обозначим число знаков (букв, цифр, символов), которые могут быть размещены на странице сайта, через т. Каждому знаку соответствует априорная вероятность P. и существует априорная условная вероятность P(j) того, что за ¿-знаком следует j-знак. В общем случае, когда значения следующих друг за другом символов сообщения не равновероятны и статистически взаимосвязаны, количество информации, предоставляемое одним знаком, равно22:
т т
I= -£P i IPi(j)logPi(j)
i=1 i=1
На практике вероятности P и P.(j) обычно не известны. Однако можно говорить о некотором приближении распределения к равновероятностному и с учетом неравенства:
m
-EPi(j)logPi(j) < log m,
получаем, что формула Хартли дает оценку количества информации сверху, и с учетом указанных выше приближений имеем:
I = -log m.
Таким образом, при отсутствии априорных сведений о законе распределения знаков, для получения максимальной информации об изучаемом процессе, следует полагать, что алфавит источника линеен.
Объем информации, представляемый N знаками на сайте, составит:
V = N*I.
С учетом пропускной способности зрительной системы человека, равной C = 50-70 двоичных единиц в секунду, время, необходимое для усвоения информации, представленной с помощью N знаков, равно:
T = V/C.
Например, для N = 500, m = 1024, C = 70 время, необходимое для усвоения информации, составит T ~ 70 секунд.
Подобный расчет можно произвести на основании экспериментальных данных. Время, необходимое для распознавания одного образа (знака), составляет T= 0,1 - 0,15 секунды23. Тогда время усвоения информации для N = 500, составит T = 50-75 секунд, что хорошо согласуется с приведенным выше расчетом.
Таким образом, время необходимое для просмотра страницы сайта может быть оценено на основе информационного либо экспериментального подхода. Это позволит рационально представлять пользователю информацию с учетом возможностей ее восприятия.
В связи с развитием технологий информационного управления при создании сайта следует обращать внимание на вопросы психоинформационной безопасности.
Имеется большое число сообщений, которые указывают на негативное воздействие некорректного представления информации на страницах сайта на психофизическое состояние пользователя24.
1S6
B.B. Муромцев, A.B. Муромцева
Это относится к таким элементам представления информации как: расположение надписей на изображении, вертикальный размер шрифта надписей, мелькания, различимость цветных надписей и т. п. Неграмотное, а в некоторых случаях целенаправленное, использование этих элементов может вызвать у пользователя психофизические дисфункции (утомление, головные боли, повышение возбудимости и тревожности).
Использование приведенных выше рекомендаций позволит создать и оформить максимально эффективный сайт (с точки зрения восприятия информации пользователем и с учетом заданного времени просмотра информации на странице). Однако только творческий подход позволит создать действительно хороший сайт.
Примечания
1 Сайт (от англ. website: web - «паутина, сеть», site - «место», буквально «место, сегмент, часть в сети») - совокупность электронных документов (файлов) частного лица или организации в компьютерной сети, объединенных под одним адресом (доменным именем или IP-адресом). Википедия. URL: http:// ru.wikipedia.org/wiki/ (дата обращения: 04.09.12).
2 Батов В.И., Муромцев В.В., Муромцева A.B. Виртуальная коммуникация как феномен культуры // Философские науки. 200S. № 7. С. 9S-107.
3 Муромцев В.В., Муромцева A.B. Основные свойства виртуальных коммуникаций / Сб. докладов XIV Международ. науч. конф. «Проблемы регионального и муниципального управления». М.: РГГУ, 2010. C. 51-53.
4 Муромцева A.B. Искусство презентации. Основные правила и практические рекомендации. М: Флинта; Наука, 2011. 109 с.
5 Там же.
6 Нильсен Я. 10 первых правил по дизайну главной страницы сайта. URL: http:// www.webmascon.com/topics/designdetails/25a.asp (дата обращения 05.0S.12); Нильсен Я. На что обращают внимание веб-читатели. URL: http://www. webmascon.com/topics/text/20a.asp (дата обращения: 05.0S.12).
7 Самарцев O.P. Творческая деятельность журналиста. Очерки теории и практики: учебное пособие / Под. ред. Я.Н.Засурского. М.: Академический проект, 2007. 52S с.
S Пояснение авторов данной статьи
9 Нильсен Я. Перевернутые пирамиды в киберпространстве. URL: http://www. webmascon.com/topics/text/1Sa.asp (дата обращения: 05.0S.12). ОТО-studio Принципы и правила юзабилити. URL: http://www.oto-studio. com/blog/usability/usability-rules/ (дата обращения: 19.07.2012). Там же.
15
16
19
20
Муромцева A.B. Указ. соч. Там же.
Тулупов В.В., Колосов A.A., Цуканова М.И., Сапунов В.И., Бобряшов A.A. Техника и технология СМИ: печать, радио, телевидение, Интернет: Учебник / Под ред. В.В. Тулупова. СПб.: Изд-во В.А. Михайлова, 2006. С. 28. Якоб Нильсен на сайте www.webmascon.com например: 10 первых правил по дизайну главной страницы сайта. URL: http://www.webmascon.com/ topics/designdetails/25a.asp (дата обращения: 05.08.12); Нильсен Я. Игры в «Верю-неверю» с посетителем веб-сайта URL: http://www.webmascon.com/ topics/designdetails/32a.asp (дата обращения: 05.08.12); Нильсен Я. Как читают web-пользователи? URL: http://www.webmascon.com/topics/text/17a. asp (дата обращения: 05.08.12) и др.; Russ Weakley A web standards checklist (Проверочный список для веб-стандартов). URL: http://www.webmascon.com/ topics/tools/09a.asp (дата обращения: 08.08.12).
Вайссман Д. Мастерство презентаций. М.: ООО «Вершина», 2004. 288с. Нильсен Я. На что обращают внимание веб-читатели. URL: http://www. webmascon.com/topics/text/20a.asp (дата обращения: 05.08.12). Сайт бельгийского университета: Universite Catholique de Louvain (UCL) URL: http://www.uclouvain.be/ (дата обращения: 18.08.12). Element K Content LLC и Ron Wilder Learning to Use Color on Your Web Site (Как подобрать гармоничную комбинацию цветов для Web-сайта) URL: http://www.webmascon.com/topics/colors/12a.asp (дата обращения 19.08.12). Муромцева A.B. Указ. соч. Там же.
Буковецкая O.A. Создание презентаций на ПК. М.: НТ Пресс, 2005. 144 с. Муромцев В.В., Муромцева A.B., Куренкова E.A. Влияние на восприятие информации музыкального, цветового и ароматического сопровождения. Сб. докладов XIV Международ. науч. конф. «Проблемы регионального и муниципального управления». М.: РГГУ, 2012. С. 200-206.
Левит A£. Введение в общую теорию телевидения. М.: «Советское радио», 1967. 116 с.
Муромцев B.B. Объемы семантической информации, воспринимаемые человеком в процессе коммуникаций. «Проблемы управления безопасностью сложных систем»: Труды XVII Международ. науч. конф. Москва, декабрь 2009 г. / Под ред. Н.И. Архиповой, В.В. Кульбы. М.: РГГУ, 2009. 520 с. Мкртумов A.C., Немцова С.Р., Муромцев B.B. Информационная безопасность персонала при воспроизведении аудио- и видеоинформации в ситуационном центре / Труды XVIII Международ. науч. конф. «Проблемы управления безопасностью сложных систем»: Москва, декабрь 2010 г. / Под ред. Н.И. Архиповой, В.В. Кульбы. М.: РГГУ, 2010. 520 с.
12
13
14
17
18
21
22
23
24
