Разработка эффективных пиктограмм для веб-сайтов на основе типологии знаков (2001)

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

• с помощью Сети можно продемонстрировать всему миру свои увлечения, достижения или исследовательские работы, выполненные по другим дисциплинам школьного цикла;
• в последние два года секции информатики научных обществ учащихся (НОУ) всех уровней — от школьного до областного — рассматривают эти работы наравне с программами и докладами.

В результате учащиеся создают интересные по содержанию и зачастую уникальные контент-сайты [Кирсанов, 1999: 182]: «Освоение Сибири и Северной Америки», «Современное джиу-джитсу», «Парусные корабли», «Изучаем роман „Обломов“» и т.д. (такие проекты рассматривала секция информатики областной конференции НОУ в Омске в 2001 году). Их отличительной особенностью от обычных страничек является большой объем материала и наличие нескольких разделов, что обуславливает сложную навигацию по сайту. При компоновке навигационных панелей многие учащиеся используют собственные пиктограммы, делая их ссылками на те или иные страницы сайта, однако они далеко не всегда вызывают адекватную реакцию у пользователей. Почему же человек, попавший на некоторый сайт, не понимает смысл пиктограммы, на которую было затрачено столько времени и фантазии? Обратимся к термину «пиктограмма» в информатике.

Пиктограмма (лат. pictus — «нарисованный») — небольшое несложное изображение, в котором объект либо действие обозначены с помощью условного знака и которое заменяет пространные текстовые пояснения¹. Иногда на экране современного компьютера (в том числе на многих сайтах) пиктограмма соседствует с подписью, но последняя носит больше вспомогательный характер и может быть опущена (например, функция отключения подписей к кнопкам имеется сегодня во многих программах, использующих графический интерфейс). Пользователь понимает смысл пиктограммы благодаря условному знаку — люди «договорились» воспринимать этот знак некоторым образом, и информация об этом доступна пользователю из его предыдущего опыта работы с компьютером (в сети Интернет) и из контекста. Итак, в приведенном определении наибольшую роль играет другой термин — «знак».

1

В этом толковании автор статьи сознательно объединяет два разных определения, авторство которых утрачено, найденных на сайтах Астраханского государственного технического университета (http://www.astu.astranet.ru) и Удмуртского государственного университета (http://www.udsu.ru), полагая, что результат такого объединения полнее отражает сущность термина.

Знак — это «предмет, оказывающий внешнее воздействие на чувства», «несущий смысл, закодированную информацию; предмет, находящийся в отношении к другому предмету, указывающий на него, обозначающий его» [Борев, 1988: 185]. Наиболее важная функция знаков — это «установление связи между людьми посредством графических изображений» [Фоли, 1996: 12]. Таким образом, посредством знака, заключенного в пиктограмму на веб-странице, ее автор облегчает навигацию пользователю и помогает ему быстрее добраться до нужной информации — конечной цели его визита.

Восприняв знак, человек мысленно обращается к обозначаемому им предмету: переход этот для него практически незаметен, если в его сознании некоторый знак прочно и однозначно ассоциируется с некоторым предметом. Например, дорожный знак означает опасный поворот, а пиктограмма со стилизованной буквой «е» на рабочем столе Windows — запуск приложения Microsoft Internet Explorer. Информация об этом осталась в памяти человека после автошколы и после изучения операционной системы (предыдущий опыт); восприятию также способствует окружающая среда: дорога в первом случае и операционная система — во втором (контекст). Смог бы человек самостоятельно, интуитивно построить эти связи, не читая правил дорожного движения и ни разу не столкнувшись с браузером от фирмы Microsoft?

Аналогичный вопрос должен задавать себе и учащийся, решивший разработать новую пиктограмму и использовать ее на своем сайте: сможет ли пользователь понять смысл моего знака и угадать сопоставленное ему действие? Ответить на эти вопросы можно, обратившись к типологии знаков, предложенной американским психологом и философом Чарльзом Пирсом (1839-1914) [БСЭ, 1975: 564]. Но прежде чем использовать данную классификацию применительно к сети Интернет, следует принять одно соглашение.

К настоящему моменту в Сети сложилась определенная терминология, стремящаяся как можно сильнее сблизить Интернет и реальную жизнь, лишенную компьютеров. С точки зрения теории, львиную долю наполнения Сети составляют гипертекстовые документы, базы данных и коммуникационные программы. Однако пользователи успешно используют такие слова, как «домашняя страница» (англ. homepage), «электронное письмо» (англ. e-mail) и «карта сайта» (англ. site map), в электронных магазинах существуют «виртуальные корзины» (англ. cart), а коллекции изображений представлены в виде настоящих «галерей» (англ. gallery). Заново рождаясь в виртуальном мире, эти понятия влекут за собой в Сеть и знаки — вот почему так широко используется, например, пиктограмма с изображением дома как указатель перехода на домашнюю (начальную) страницу.

Согласно классификации Ч. Пирса, знаки делятся на три типа «по способу выражения значения и характеру смысловой нагруженности» [Борев, 1988: 187]. Рассмотрим эти типы на основе пиктограмм, наиболее часто встречающихся на популярных веб-сайтах.²

2	Здесь и далее в качестве примеров использованы прообразы пиктограмм, встретившихся на следующих сайтах: www.adobe.com; www.bolero.ru; www.etoile.ru; norilsk.net; www.xerox.ru; www.books.ru; www.mustek.com; www.referats.ru; www.tvc.ru.

Рис. 1. Иконические знаки

Иконические знаки — знаки, «обладающие сходством с обозначаемым объектом», «передающие его общие очертания» [Борев, 1988: 187-188]. Эти знаки «работают» за счет «фактического подобия означающего и означаемого» [Абдуллин, 1997]. В реальной жизни это, например, фотография невесты, стоящая на столе у бизнесмена и отсылающая его к образу любимой, а на экране — маленькая копия того понятия, с которым соотносится знак. Таковы, например, следующие пиктограммы (рис. 1):

1. вышеупомянутый дом — ссылка на домашнюю (начальную) страницу;
2. корзина для покупок — знак перехода к странице просмотра и формирования заказов электронного магазина (виртуальной корзине);
3. денежные купюры (монеты) — возможность рассчитаться наличными в электронном магазине;
4. конверт — написание электронного письма владельцу сайта.

Рис. 2. Знаки-индексы

Для знаков-индексов взаимоотношение между знаком и обозначаемым им предметом основано на «их смежности» [Абдуллин, 1997], на «причинно-следственной связи» [Борев, 1988: 188]. Классическим примером знака-индекса является дым как знак того, что горит костер: достаточно вспомнить пословицу «нет дыма без огня». Найти столь же четкие соответствия в Сети оказалось более трудной задачей, чем в жизни. Тем не менее, автор статьи предлагает рассмотреть следующие пиктограммы (рис. 2) под таким углом зрения:

1. дискета — открывает доступ к файлу, который будет непосредственно сохранен на диск без просмотра в браузере его содержимого (связь возникает, если вспомнить такое определение: файл — это поименованная область памяти на диске);
2. флаг — осуществляет переход на страницу, язык которой соответствует языку страны, чей флаг изображается (в данном примере британский флаг ведет на страницу, использующую английский язык);
3. фотоаппарат — предлагает просмотреть галерею фотографий, создание которой было бы невозможно без помощи этого инструмента (иконическое изображение фотографии вряд ли было бы столь же красноречивым);
4. цилиндр (человек в цилиндре) — ссылка на виртуальный клуб (известно, что непременным атрибутом члена солидного клуба с момента появления этого понятия считался цилиндр).

Рис. 3. Знаки-символы

Знаки-символы «находятся с объектом в ассоциативной связи, основанной на соглашении, (...) они не связаны с обозначаемым причинно-следственной связью» [Борев, 1988: 188]. Понятие «символ» в настоящее время имеет два значения: «изображение, которое выступает от имени какого-либо предмета, который может иметь совершенно иную форму, или абстрактное понятие (сова — символ мудрости)» [Фоли, 1996: 11]. Например, хорошо узнаваемые логотипы известных производителей автомобилей или бытовой техники ассоциируются в нашем сознании с конкретными названиями товаров только «благодаря неутомимой деятельности их владельцев» [Кирсанов, 1999: 269]. Приведенные ниже пиктограммы (рис. 3) могут считаться символами по следующим соображениям:

1. ключ — переход в некоторую область сайта только при наличии учетной записи и пароля для конкретного пользователя; в реальной жизни ключи, как правило, уникальны (или имеют небольшое количество копий) и открывают доступ куда бы то ни было только их владельцам;
2. вопросительный знак — вызов страницы помощи; на письме вопросительный знак венчает предложение, в котором обращаются за дополнительной информацией (за исключением риторических вопросов);
3. лупа — поиск по сайту; в жизни может использоваться для сбора улик или детальной информации о каком-либо предмете;
4. гаечный ключ — страница пользовательских настроек или технической поддержки; с помощью этого инструмента можно что-то собрать или отремонтировать.

Автор статьи не претендует на то, что соответствие приведенных выше примеров указанным типам знаков единственно верное. Основная идея применения данной классификации заключается в том, что если вновь создаваемую пиктограмму возможно отнести к одному из этих типов знаков, то ее функционирование в качестве элемента сайта будет эффективным — пользователи будут своевременно и верно понимать ее смысл и принимать решение об ее использовании. При этом одна и та же пиктограмма может быть отнесена к разным типам знаков в зависимости от ее интерпретации; лишь те, которые невозможно соотнести ни с одним типом знаков и «объяснить» с точки зрения данной классификации, не могут быть рекомендованы к использованию, так как будут значительно затруднять работу пользователя.

Проведение тестирования поможет узнать, насколько однозначно пользователи смогут идентифицировать новую пиктограмму. Конечно, профессионалы проводят тестирование всего сайта с использованием специальных методов на предмет его эксплуатационной пригодности [Нильсен, 2000], но для учащихся школы будет достаточно соблюсти одно из общих правил: «привлечь реальных пользователей и заставить их выполнять реальные задачи без вашей помощи» [Нильсен, 2000: 419].

Рис. 4. Символьный шрифт ArtsyParts DingBats JL

При разработке собственных пиктограмм учащимся могут быть полезны символьные шрифты (рис. 4) — наборы разнообразнейших по тематике символов, которые устанавливаются на компьютер и ведут себя в графических редакторах как и обычные шрифты. Использование программ просмотра шрифтов (таких, как FontLister 2.0 или FontSee 2.4) облегчает работу с ними и позволяет быстро находить нужные символы, оставляя больше времени для творчества. Нередко такие программы и шрифты бесплатны, и их можно найти с помощью сети Интернет.

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

Литература

Абдуллин А.Р. Культура и символ (монография). Уфа, 1997. 158 стр.

Большая Советская Энциклопедия. Т. 19. М., 1975. 648 стр.

Борев Ю.Б. Эстетика. М., 1988. 496 стр.

Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. СПб, 1999. 376 стр.

Нильсен Я. Веб-дизайн: книга Якоба Нильсена. СПб, 2000. 512 стр.

Фоли Дж. Энциклопедия знаков и символов. М., 1996. 432 стр.

Библиографическое описание статьи:
Рудаков Д.Ю. Разработка эффективных пиктограмм для web-сайтов на основе типологии знаков // Информатика и образование. — 2002. — № 3. — С. 85-88.

Примечание

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

———