CC BY
178
информационно-коммуникационные
технологии
УДК 37.0+371+004.5
Власова Наталья Сергеевна
Кандидат педагогических наук, доцент кафедры информационных технологий. ФГАОУВПО «российский государственный профессионально-педагогический университет», [email protected], Екатеринбург
Чернякова Татьяна Викторовна
Кандидат педагогических наук, доцент кафедры информационных технологий. ФГАОУ ВПО «российский государственный профессионально-педагогический университет», [email protected], Екатеринбург
Прокубовская Алла Олеговна
Кандидат педагогических наук, доцент, зав. кафедрой информационных технологий. ФГАОУ ВПО «российский государственный профессионально-педагогический университет», [email protected], Екатеринбург
подходы к проектированию интерфейсов информационно-образовательных сред
аннотация. При проектировании интерфейсов информационно-образовательных сред активно используются различные области знания, такие как инженерная психология, когнетика, эргономика, таксономия, системотехника. Из науки когнетики рассмотрены такие принципы, как локус и фокус внимания, интерференция, ментальная модель поведения и другие, играющие важную роль при разработке интерфейсов. Приводится несколько практических рекомендаций для проектирования интерфейсов образовательных порталов.
Ключевые слова: информационно-образовательная среда, образовательный портал, интерфейс, проектирование, восприятие.
Vlasova Natalya Sergeevna
Candidate of Pedagogical Sciences, Docent of the faculty of information technologies. Russian state vocational-pedagogical university, vlnataly2007@yandex. ru, Ekaterinburg.
Chernyakova Tatyana Vctorovna
Candidate of Pedagogical Sciences, Docent of the faculty of information technologies. Russian state vocational-pedagogical university, cherntv@yandex. ru, Ekaterinburg.
Prokubovskaya Alla Olegovna
Candidate of Pedagogical Sciences, Docent, The manager byfaculty of information technologies. Russian state vocational-pedagogical university, proku. [email protected], Ekaterinburg.
the approaches to designing interfaces of informational educational environments
Abstract. At designing interfaces of informational educational environments the various areas of knowledge, such as engineering psychology, kognetics, ergonomics, taxonomics, system engineering are actively used. From a science kognetics such principles, as locus and focus of attention, interferetion, mental model of behaviour and others, playing the important role are considered by development of interfaces. Some practical recommendations for designing interfaces educational sites are resulted.
Keywords: informational educational environment, educational site, interface, designing, perception.
Современные информационно-образовательные среды (ИОС) можно определить как программно-телекоммуникационные среды, основанные на использовании компьютерной техники и реализующие качественное информационное обеспечение участников образовательного процесса, администрацию учебного заведения и общественность. Компоненты ИОС должны соответствовать учебной, внеучебной, научно-исследовательской деятельности, измерению, контролю и оценке результатов обучения, деятельности по управлению учебным заведением. Подобная среда должна обладать максимальной вариативностью, обеспечивающей дифференциацию всех возможных пользователей.
При проектировании информационно-образовательной среды учебного заведения решаются вопросы педагогического web-дизайна. Данной теме посвящены работы В. В. Лаптева, Н. И. Рыжовой, Д. А. Шукли-на, в которых педагогический web-дизайн определяется, как совокупность «двух технологий: технологий педагогического проектирования, направленной на построение методической теории для конкретной предметной области, и технологий web-дизайна, направленных на компьютерную реализацию этой методической теории для Internet-пространства» [5, с. 108].
Web-дизайнеры играют важную роль в современном web-конструировании, в оптимизации системы «человек и машина». Качество сайта оказывает определенное психологическое воздействие на пользователя, на то, как он воспринимает информацию и применяет инструментарий web-среды. Поэтому для web-дизайнера важнее, чем для других специалистов, правильное понимание и применение принципов эргономики, когнетики, инженерной психологии, системотехники, таксономии, инжиниринга и др.
Эргономика дает очень важное понятие для web-дизайна - юзабилити (от англ. «usability» - «возможность использования»). При разработке интерфейсов термином «юзабилити» обозначают логичность, простоту в расположении элементов на странице, т. е. общую концепцию удобства их использования. Разница между эргоно-мичностью и юзабилити в том, что эргоно-мичность определяет минимум физических усилий при использовании предмета, а
юзабилити - суммарный уровень удобства, степень интеллектуального усилия для достижения положительно результата. Именно поэтому, говоря о бытовой технике и иных подручных предметах, чаще используют понятие «эргономичность», тогда как «юзабилити» описывает понятность элементов управления, количество и необходимость функций. Юзабилити означает не только улучшенную иерархию сайта или улучшенное визуальное руководство, но и контакт с потенциальным пользователем посредством профессионального, грамотного дизайна.
Не смотря на сложность современных информационно-коммуникационных технологий, в вопросе взаимодействия «человек-машина», технологическая составляющая наиболее прозрачна и понятна, чем человеческая как более сложная и изменчивая. Тем не менее, многие факторы поведения пользователя при работе с системой или технологией относятся к универсальным психологическим принципам. Эти принципы имеют непосредственное отношение к основам разработки любого интерфейса. Из науки ког-нетики (Б. Баарс, Д. Норман) рассмотрим некоторые важные особенности человека.
Локус и фокус внимания. Как показывают психологические исследования из всех явлений и объектов окружающего мира, которые мы видим, слышим и ощущаем на данный момент времени, мы можем сконцентрироваться только на одном. Каким бы ни было явление, элемент, деталь, штрих, оно становиться локусом внимания. Причем локусом не только активного внимания, но и пассивного восприятия потока поступающей информации. Человек может целенаправленно сфокусировать внимание на каком-либо локусе. При проектировании интерфейса следует учитывать, что объект являющийся предполагаемым фокусом, может находиться или не находиться в локусе внимания пользователя на данный момент времени.
Автоматизм и навык. Любая повторяющаяся последовательность действий человека, становится в течение некоторого времени автоматичной. Набор действий, составляющих последовательность, «сокращается» до одного действия. При выполнении некоторой короткой последовательности действий, требующей не более 1 или 2 секунд времени, человек не может остановиться, и проделает
все действия вплоть до завершения последовательности. Если деятельность занимает больше нескольких секунд, то ее нельзя прервать, если она не стала локусом внимания.
интерференция. Когда выполняются одновременно две задачи, ни одна из которых не является автоматичной, эффективность выполнения каждой из них снижается в результате конкуренции за область внимания. Этот феномен психологи называют интерференцией. Чем более предсказуемой, автоматичной и бессознательной становится задача, тем больше становится эффективность ее выполнения одновременно с другими задачами, и, тем менее, она конкурирует с ними.
Ментальная модель поведения, метафора, аффорданс и стандарт. Предшествующие знания и опыт формируют в деятельности человека ментальные модели, с помощью которых он познает и воспринимает окружающую среду, новые ситуации и явления. Модели определяют реакции человека в новых обстоятельствах и позволяют выбрать линию поведения наиболее экономичным способом, с точки зрения расходования когнитивных усилий. Чтобы пользователя научить работать с системой или технологией, необходимо разработчику интерфейса построить ментальную модель этой системы или технологии. Единственным критерием полезности модели является ее прогностическая сила - способность предвидения поведения пользователя в условиях новых реальных объектов. Для того чтобы пользователь быстро научился, адаптировался и комфортно работал с системой или технологией, разработчик должен спроектировать возможные ментальные модели работы системы. Одним из лучших способов добиться этого является применение метафоры.
Простым примером метафоры в интерфейсе является устройство программ для проигрывания звуков на компьютере с исторически традиционными обозначениями кнопок «Воспроизведение», «Пауза», «Назад», «Вперед». Такие кнопки присутствуют на многих устройствах проигрывания и окружают современного человека с рождения: видеомагнитофон, тр3-плеер, DVD-проигрыватель и др. Соответственно, при проектировании программных продуктов с аналогичными функциональными возможностями разумно скопировать существую-
щую систему обозначений.
Другой составляющей понятности является нечто, по-английски называемое айоМапсе («аффорданс»). В современном значении этого термина аффордансом называется ситуация, при котором объект показывает субъекту способ своего использования своими неотъемлемыми свойствами. Например, надпись «На себя» на двери не является аффордансом, а облик двери, который подсказывает человеку, что она открывается на себя, несет в себе аффорданс. Польза аффорданса заключается в том, что он позволяет пользователям обходиться без какого-либо предварительного обучения, благодаря этому аффорданс является самым эффективным и надежным средством обеспечения понятности. Наиболее значительны четыре способа передачи аффорданса. Первый, маппинг, или повторение конфигурации объектов конфигурацией элементов управления. Второй, видимая принадлежность управляющих элементов объекту. Третий, визуальное совпадение аффордансов экранных объектов с такими же аффордан-сами объектов реального мира. Четвертый, изменение свойств объекта при подведении к нему курсора (аналог тактильного исследования). В целом, создание аффордансов является наиболее сложной задачей, стоящей перед графическим дизайнером, работающим над интерфейсом.
Одной из задач при разработке web-интерфейса информационно-образовательного портала является подбор соответствия цветовой палитры кругу задач, который должен решать данный web-сайт. Восприятие сайта через его цветовую палитру рассматривается в ряде работ отечественных исследователей: Д. Кирсанова, А. Лебедева, Р. Воронежского и др. Среди зарубежных работ данной тематики наиболее значимыми являются труды следующих авторов: Д. Д. Гарретта, К. Клонингер, С. Круга, П. Морвиля, Я. Нильсена и др.
Основные рекомендации для проектирования интерфейсов и элементов дизайна должны соответствовать положениям национального стандарта Российской Федерации ГОСТ Р ИСО 14915-1-2010 «Эргономика мультимедийных пользовательских интерфейсов», в котором рассматриваются пользовательские интерфейсы, включающие,
объединяющие и согласовывающие применение различных форм представления информации [6].
Проанализировав работы ведущих ученых и исследователей, мы сформулировали несколько рекомендаций, соблюдение которых, на наш взгляд, будет способствовать лучшему восприятию информации на образовательном портале.
Визуальная иерархия. Интерфейс ИОС должен обеспечивать целостность восприятия с целью сокращения излишних «блужданий» взгляда пользователей и конструирование на этой основе целостной системы компоновки элементов интерфейса и их визуальной иерархии, которая имеет следующие черты:
• чем важнее элемент, тем более он заметен на странице. Это достигается использованием более крупных шрифтов для заголовков, выделением цветом, окружением пустым пространством, а также комбинацией перечисленных способов;
• элементы, имеющие одно логическое значение, должны быть связаны и визуально. Равнозначность элементов (группа ссылок, пункты списка, пункты меню и др.) можно показать применением одного стиля, группировкой под одним заголовком, размещением на отдельной области, имеющей цветовой фон;
• элементы должны образовывать вложения, если являются частями друг друга. Например, при организации списков литературы по отдельным темам список книг смещается относительно названия темы, образуя отступ (ступеньку), или размещением информации под одним заголовком таким образом, когда интуитивно понятно, что они
относятся именно к этому заголовку.
Хорошо организованная визуальная иерархия помогает воспринимать всю web-страницу целиком и экономит силы для поиска интересующей пользователя информации. При проектировании визуальных иерархий актуальным является использование мнемосхем (см. рис.). Взаимосвязанное графическое изображение сложной системы управления контентом сайта позволит пользователю получить более ясное представление о возможностях системы, ее функционале и направлениях потоков информации, чем обычная совокупность команд меню и кнопок. Создание наиболее эффективных с точки зрения восприятия динамических и статистических мнемосхем требует значительных усилий и затрат времени на проектирование интерфейса системы управления контентом сайта.
Традиционные м>еЬ-условности на web-сайте подразумевают использование элементов, которые общеприняты и не требуют дополнительных объяснений. Например, щелчок мышью по пиктограмме с изображением домика возвращает пользователя на главную страницу сайта. Это известно всем и поэтому совершенно не обязательно делать под пиктограммой подпись «На главную». Часто дизайнеры считают, что они должны изобретать что-то новое (для этого их и принимают на работу), и пренебрегают использованием традиционных web-условностей, что может вызвать у пользователя недоумение, когда он не находит на web-странице привычных ему элементов.
Четко выраженные области. Для обозначения различных функциональных подсистем web-страницы образовательного пор-
Рисунок - Примеры мнемосхем, используемых при проектировании визуальных иерархий
тала или для особого выделения наиболее важных элементов очень удобно цветовое кодирование. Значительный эффект дает использование цветовых зон для привлечения внимания пользователя к важным элементам интерфейса, особенно когда ему необходимо быстро реагировать на поступающую информацию, что важно для ИОС, как средства общения между участниками образовательного процесса.
Следует отметить, что фон может вызывать раздражение у зрителя, любой фоновый рисунок повышает утомляемость глаз и снижает восприятие материала, поэтому не рекомендуется применять фон, отличный от белого, к текстовым областям. Целесообразно использовать контрастный фон для подсвечивания заголовков или пунктов меню. Не допустимы следующие сочетания шрифта и фона: синий или черный цвет шрифта на красном фоне, синий шрифт на зеленом фоне, красный или черный шрифт на синем фоне и другие сочетания, когда текст не различим или различим с ошибкой. Шрифт не обязательно должен быть черным, главное, чтобы контраст с фоном был достаточным для комфортного, неутомительного чтения. Такой контраст обеспечивается различной яркостью цветов, так как «разница только в тоне или насыщенности не позволит сознанию различать текст и фон с достаточным автоматизмом, а для текста небольшого кегля его тональная окраска или степень насыщенности вообще с трудом различимы (кроме того, эти параметры цвета теряются на черно-белых устройствах вывода)» [2, с. 1].
Выделение гиперссылок. Переходы на другие разделы портала должны быть обозначены таким образом, чтобы пользователь даже не сомневался в том, является ли данный фрагмент гиперссылкой или нет. Среди web-дизайнеров существуют негласные правила при оформлении гиперссылок, например, использование размера шрифта и цветов по умолчанию браузера считается примитивным и чаще всего для гиперссылок применяются другие цвета. В настоящее время профессиональные разработчики web-сайтов рекомендуют оформлять гиперссылки синим цветом с подчеркиванием и красным цветом с подчеркиванием при наведении мыши. Такие ссылки хорошо различимы в тексте и достаточно контрастны,
чтобы обеспечить читабельность, сохраняют контраст с черным цветом в серой гамме. Это важно для людей, которые плохо различают цвета. Следует помнить, что с увеличением количества ссылок (например, список из 15-20 ссылок) подчеркивание теряет свои преимущества и начинает создавать визуальный шум.
На основе анализа опыта профессиональных web-дизайнеров, сформулируем несколько рекомендаций по оформлению гиперссылок [7]:
1. текстовые гиперссылки должны хорошо выделяться на фоне остального текста;
2. наведение мышки на ссылку должно вызывать эффект подсветки;
3. текст ссылки должен быть, по возможности коротким, но достаточно длинным, чтобы четко описать, куда попадет пользователь и что он там увидит;
4. гиперссылки на различные документы должны четко различаться;
5. гиперссылки, вызывающие неожиданные для пользователя действия, должны об этом предупреждать, например, ссылки на файлы с указанием размера файла в килобайтах, ссылки, открывающие или закрывающие окна и др.
Мы считаем, что в данном случае не может быть строгих правил, все зависит от дизайна сайта в целом и от фирменных цветов, но для того, чтобы пользователь не путал гиперссылки с другим текстом, им необходимо задать уникальный стиль, который не должен применяться ни к каким другим текстовым элементам.
Уменьшение визуального шума способствует легкости восприятия web-страниц. Множество ярких выделений, излишнее использование яркой линейной графики, дублирование графических пиктограмм подписью и др. в совокупности отвлекают от содержания, требуют дополнительной концентрации внимания, чтобы отделить второстепенное от главного, что при длительной работе с сайтом вызывают более раннюю утомляемость и ощутимое раздражение.
Цветовое решение в целом может оказывать сильное влияние на эмоциональное состояние пользователя, поэтому оно не должно быть раздражающим и едким, а наоборот, - легким и не напрягающим глаза. Не стоит возлагать на цвет функцию основ-
Библиографический список
ного носителя информации - web-страница должна оставаться читабельной и в черно-белом варианте (например, при распечатке). Окончательный вариант дизайна сайта необходимо просмотреть в «серой шкале», которая сохраняет одну из трех составляющих исходного цвета - его яркость. Если цветовое решение сделано верно, то в монохромном варианте все элементы web-страницы сохранят соответствующую им информативность.
Цвету уделяется значительное внимание при создании оптимальных условий труда и отдыха человека. Для разработчиков, учитывающих требования инженерной психологии, особый интерес представляют следующие аспекты проблемы цвета: цвет как фактор безопасности, цвет как средство улучшения видимости, цвет как гигиенический фактор и цвет как фактор, влияющий на общее психическое состояние человека [1].
В заключение отметим, что восприятие цвета всегда останется субъективным -у людей разные не только любимые цвета, но и ощущения, которые они вызывают. Тем не менее, при разработке дизайна информационно-образовательного портала стоит придерживаться универсальных правил. Это не даст гарантии, что цветовое решение будет нравиться всем, но позволит избежать распространенных ошибок и придаст дизайну сайта профессионализм.
1. Вулсон У., Коновер Д. Справочник по инженерной психологии для инженеров и художников-конструкторов. - М.: Изд-во «Мир», 1968. - 518с.
2. Кирсанов, Д. Веб-дизайн: книга Дмитрия Кирсанова. - СПб.: Символ-Плюс, 2009. - 368 с.
3. Круг С. Веб-дизайн: книга Стива Круга или «не заставляйте меня думать!». - СПб: Символ-Плюс, 2001. - 200 с.
4. Кузнецова Н. С. Веб-дизайн как инструмент моделирования виртуального пространства современной культуры дис. ... канд. культуролог. наук. - Саранск, 2010 - 171c. [Электронный ресурс]: Режим доступа: http://www. dissercat. com/ content/veb-dizain-kak-instrument-modelirovaniya-virtualnogo-prostranstva-sovremennoi-kultury: (дата обращения: 14.12.2012)
5. Лаптев В. В, Рыжова Н. И, Шуклин Д. А. Концепция подготовки специалиста в области педагогического Web-дизайна. [Электронный ресурс]: Режим доступа: http://www.ito.su/main. php?pid=26&fid=4040&PHPSESSID=kr9bsl3 ivujrboj9benl79o5g2 (дата обращения: 14.12.2012)
6. Национальный стандарт Российской Федерации ГОСТ Р ИСО 14915-1-2010 «Эргономика мультимедийных пользовательских интерфейсов» [Электронный ресурс] Режим доступа: docs. pravo. ru>document/view/26510628/ (дата обращения: 14. 12. 2012).
7. Design For Masters [Электронный ресурс] -Режим доступа URL: http://designformasters. info/posts/clear-hyperlinks/ (дата обращения: 14.12.2012)
