Глава II. Дизайн и интерфейс школьного сайта.

Текст на веб-странице

Вопросам размещения текста на странице сайта, которое обеспечивало бы его комфортное восприятие пользователем, посвящен не один десяток статей. Здесь перед нами проблема и технологическая, и психологическая: веб — специфическая среда, и информационная подача здесь не может быть напрямую перенесена, например, с бумажного носителя.

Прежде всего поговорим о цветовом соотношении текста и фона, на котором он размещен. Неслучайно многовековая традиция книгопечатания выработала стандарт: на белом фоне размещается черный текст. Дело здесь не в экономических причинах (на черную страницу уйдет больше типографской краски), а именно в комфорте восприятия. Представьте себе чтение больших объемов текста на сайте Oper.Ru и подумайте, через какое время устанут у вас глаза. Кроме того, здесь перед нами опять же вопрос инерции восприятия пользователя: он подсознательно привык, что черный текст размещается на белом фоне, и в случае каких-либо отклонений от этого правила будет искать причину изменений, ощутит психологический дискомфорт. Кроме того, черный цвет, конечно, ассоциируется с чем-то мрачным, что настраивает определенным образом на восприятие материала21.

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

30

Таким образом, сделаем вывод: оптимальным в нашем случае будет темный текст на светлом фоне. Необязательно четко придерживаться антиномии «черный — белый»: посмотрите на отображение текста на сайтах Gramma.Ru или Mlis.Ru — фон не белый, но чтение все равно комфортно.

31

32

В веб-дизайне существуют такие понятия, как «жесткий» (фиксированный) и «резиновый» дизайн22. В первом случае ширина контентной области (и сайта в целом) определена точно и указана в пикселах23 (например, 1000 px). В «резиновом», т. е. растягивающемся дизайне ширина задана в процентах от общей ширины окна (например, левое меню — 15%, правое — 15 %, контентная область — 70%). И при загрузке такая страница растягивается на весь экран сообразно указанным процентным соотношениям. От разницы верстки страницы в жесткий или резиновый формат зависит, в том числе, и восприятие текста на экране.

Сравните два сайта. На «Авторском проекте Алекса Экслера» использована «жесткая» верстка: вне зависимости от размера экрана монитора посередине размещается колонка с фиксированной шириной. Восприятие информации комфортно.

33

И обратный пример: сайт Oper.Ru — с «резиновым» дизайном, где текст занимает всю ширину экрана. Если такой сайт с близкого расстояния читать на мониторе с большой диагональю (19 и более), создается ощущение, что при переходе со строки на строку читатель будет вертеть головой влево-вправо.

34

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

Человек воспринимает текст с листа и экрана монитора по-разному. Если в бумажных книгах ширина строк составляет 200–250 знаков, то для отображения текста на мониторе такая ширина поля абсолютно неприемлема: глаз будет постоянно «спотыкаться» при переходе со строчки на строчку.

Таким образом, максимальная ширина колонки текста, не вызывающая усталости при продолжительном чтении и предназначенная для чтения с монитора, не должна превышать 120–150 символов. При этом сужение текстового поля сказывается на удобочитаемости значительно меньше, чем его расширение.

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

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

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

35

В том случае, когда публикуются короткие материалы с фиксированной шириной колонок, на строку текста должно приходиться порядка 70 символов. На сайте Lenta.ru ширина строки составляет примерно такое количество знаков — при этой ширине текст хорошо, удобно читается, не возникает проблем, связанных с выравниванием строк, когда взгляд спотыкается на больших пробелах между словами.

Еще одной немаловажной особенностью размещения текста на странице является необходимость его дробления. Мы без проблем читаем текст в книге, не разделенный на блоки, в котором расстояние между абзацами равняется межстрочному интервалу. Но откройте любой значительный по объему «неразделенный» текст в Библиотеке Максима Мошкова (например, «Героя нашего времени») — чтение затруднено. Здесь мы снова сталкиваемся с различной природой восприятия текста с бумажного носителя и с экрана.

36

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

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

13

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

Здесь упомянуты лишь основные принципы позиционирования текста в Сети. Более подробно эта проблематика освещается в работе Д. Прайс и Л. Прайс «Текст для WEB. Доступность и привлекательность», М., СПб., Киев, 2003.


Сноски:

21: В этом смысле показательно, что сайты, посвященные тяжелой, металлической музыке практически все исполь-зуют черный или темный фон: Darkside.Ru, Metallibrary.Ru, Rock.Ru. Согласитесь, эмоциональная интонация школьного сайта все же немного иная.

22: Существует еще «блочный» дизайн, но он сейчас не имеет отношения к нашему разговору.

23: Точка на мониторе, мельчайшая единица цифрового изображения, прямоугольной (обычно квадратной) формы, обладающая определенным цветом. Любое компьютерное изображение состоит из пикселов, расположенных по строкам и столбцам (англ. pixel = picture element, элемент картинки).

24: Подробно останавливаться на всех этих аспектах в рамках данного пособия мы не можем – для этого существует специальная компьютерная литература.

25: Вероятно, здесь немаловажным фактором является и то, что до недавнего времени использование Интернета тарифицировалось повременно. Читатель знакомился с сайтом, но постоянно помнил, что «деньги текут». Отсюда стремление за свои деньги оперативно получить нужную информацию и отключиться. Сравните: с книгой можно сесть в кресло и просидеть весь вечер, в Сети: подключился – быстро нашел – прочитал (скачал) – отключился. Да, сейчас уже практически всюду состоялся переход на постоянное подключение, но традиция оформления сетевого текста складывалась в период «повременки».

 

 

←  Предыдущая глава | Содержание | Следующая глава  →