«Вы всегда можете получить то, что хотите, но если постараетесь, то, возможно, это будет то, что вам нужно».
Мик Джаггер

В этом обзоре перечислены основные элементы юзабили (usability) &mdash удобства пользования, &mdash которые мне хотелось бы учесть при разработке своего нового сайта. Материал разбился на две части: на рекомендации, относящиеся к веб-дизайну, и на раздел веб-типографики, то есть оформления текста для веб.

Сделанному в 2003 году voxfree.narod.ru я благодарен &mdash он помог мне найти новую работу. Но теперь устарел.

Я очень неопытный веб-мастер, но сайт планирую сделать собственноручно &mdash такое хобби. Поэтому в этой статье я не учу, я делюсь.

Обзор, возможно, будет интересен начинающим журналистам, которые решили создать собственный ресурс или модернизировать существующий.

Больше того, я убежден, что познакомиться с азами html и самому сверстать простенький сайт просто необходимо любому молодому человеку, планирующему связать жизнь с журналистикой. Журналистика движется в онлайн, и пощупать своими руками механику веб &mdash полезно.

Блоггеры тоже входят в целевую аудиторию статьи, поскольку так или иначе форматируют свои текстовые посты.

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

Доказано, что первое впечатление о сайте или блоге у читателя создается практически мгновенно, за доли секунды. Эффект первого впечатления сохраняется затем довольно долго. Люди не любят пересматривать свои оценки, им нравится чувствовать себя правыми.

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

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

Веб-дизайн

01. Стиль
02. Цвет
03. Композиция страницы (верстка)
04. Навигация
05. Единство стиля
06. Скорость загрузки
07. Названия страниц
08. Форматирование изображений
09. Подписи к изображениям
10. Пустота
11. Пиктограммы

Веб-типографика (форматирование текста для экрана)

12. Контрастность текста и фона
13. Длина строки
14. Структурирование текста
15. Оформление заголовков
16. Кегль (размер шрифта)
17. Гарнитура (тип шрифта)
18. Интерлиньяж (межстрочное расстояние)
19. Выключка (выравнивание)
20. Акцентирование фрагментов текста
21. Списки
22. Эмотиконы (смайлики)
23. Оформление ссылок
24. Валидность кода
25. Размер текста

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

Сумма всех элементов дизайна (№№ 02-25). «Одежка», по которой встречают.

Веб-дазайнер Курт Клонингер (Curt Cloninger) в своей недавно вышедшей на русском языке книге «Свежие стили веб-дазайна» анализирует:

• Готический стиль
• Гранж
• Плакатный стиль
• Панк-роковый
• Суперминиатюрный городской
• Минималистский
• Стиль чертежей и моделей
• Стиль 50-х годов

Ясно, что выбор стилей практически безграничен. Сознательный отказ от стиля &mdash тоже стиль. Михаил Мошков, создатель Библиотеки своего имени заявляет на главной странице «С 1994 года библиотека не меняла дизайн. И не планирует». Правда, похоже, подвижник готов к чему-то новому.

При самом общем подходе, выбиря стиль, создатель ресурса движется по оси «навороченный &mdash пуританский». Считается, что в моде сейчас лаконичные сайты. Так, например, подчеркнуто аскетичный ресурс поддерживает гуру юзабилити Якоб Нильсен.

Моему грядущему сайту больше подойдет простой дизайн, поскольку на нем будут преобладать тексты.

Цвет и освещенность (темный дизайн, светлый дизайн):

• Помогают серферу мгновенно отличать один сайт от другого. Цвет, после названия &mdash самая устойчивая ассоциация с содержанием сайта.
• Вводят посетителя в нужное эмоциональное состояние. Look and feel &mdash «увидел и почувстовал»: официоз или фан, готичная смурь или свет.
• Разделяют интерфейс на смысловые поля. Так, например, зона меню, зона основных текстов, зона комментариев, зона инфографики и т. д. на сайте журнала «Эксперт» разнообразно раскрашены.
• Цвет дифференцирует разделы друг от друга как на гламурном сайте alloy.com
• Цветом маркируют ссылки в активном состоянии и ссылки, по которым уже состоялся переход

Словом, цвет &mdash это индивидуальность, эмоция, узнаваемость, понятность сайта.

Вместе с тем, цвет &mdash это своего рода дресс-код, хорошие манеры в Сети. Дизайнеры рекомендуют применять на сайте 3-4 цвета (не больше). При этом один может быть темным, два средних, четвертый самый открытый, яркий.

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

Часто встречается совет выбирать непременно из 216-ти так называемых безопасных цветов, которые поддерживаются всеми броузерами. Эта рекомендация во многом устарела. Современные мониторы качественно передают миллионы цветов. Так что мы можем смело назначать любые цвета.

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

Первый вопрос, который приходится решать: фиксированная будет ширина страницы или «резиновая», то есть растянутая на ширину экрана?

Сайт фиксированной ширины лучше сохраняет заданные параметры дизайна. Резиновые сайты дают больше свободы в размещении контента на странице.

О композиции. Начинающему журналисту, по совместительству дизайнеру-чайнику, достаточно соблюдать два правила:

• Принцип золотого сечения
• Принцип верстки «по модулю»

Золотое сечение применяется при назначении высоты header'а (шапки) сайта, ширины колонок и проч. Страницы, сверстанные с соблюдением принципа золотого сечения, выглядят гармонично и уравновешенно.

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

Типичные композиционные ошибки веб-верстки:

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

Композиционно бывают полезны такие элементы веб-дизайна как рамки и линейки. Линейки отделяют зоны веб-страницы одну от другой. Рамки притягивают глаз к важным местам вашей страницы, например текстовым рекламным ссылкам.

Поскольку, как читатели, мы воспитаны в эпоху Гутенберга, многие (не все!) правила верстки в оффлайне сохраняют силу и в интернете. Надеюсь, ряд полезных рекомендаций можно почерпнуть в статьях «Дизайн и верстка: базовые элементы» и «Дизайн и верстка: все начинается с макета».

На практике я, скорее всего, поступлю так: скачаю понравившийся готовый шаблон страницы и изменю его под свои задачи... до неузнаваемости. Благо, бесплатных шаблонов в Сети навалом.

Основные правила веб-навигации:

• Правило трех кликов. Самый «далеко запрятанный» материал сайта должен лежать на расстоянии не глубже трех кликов от главной страницы.
• Где я? На любой странице ресурса пользователь должен знать, в каком разделе он находится, откуда пришел, куда может пойти. Эту задачу решают, в частности, сквозные меню, текстовые ссылки, баннеры.
• Быстрый возврат. Внизу каждой страницы рекомендуют ставить ссылку «В начало». На каждой странице ставят ссылку «На главную» или пиктограмму-ссылку «Домик». Логотип сайта на каждой странице по умолчанию является ссылкой на главную (начальную) страницу.

Все страницы ресурса должны выглядеть одинаково. Это относится к цветовой гамме, композициии, шрифтам &mdash ко всему. В противном случае пользователь путался бы (и пугался! :-) ) при переходах со страницы на страницу, не смог бы иденцифицировать ресурс, попав через поисковик на одну из вложеннных страниц.

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

Кроме того, дизайнеры-профи ценят возможность поиграть с оформлением разных разделов сайта. Сошлюсь еще раз на девчоночий сайт в качестве примера. На то они и профи!

Сегодня проблема не так остра, как в 90-е годы &mdash широкополосный доступ становится все доступнее. И все равно, страницы должны быть легкими.

Утяжеляют страницы не тексты. Утяжеляют картинки.

Как снизить «вес» изображения:

• Уменьшить его разрешение до сетевого стандарта в 72 dpi
• Уменьшить линейные размеры изображения до оптимально минимальных. При необходимости показать фотографию большой и четкой &mdash выложить ее отдельно и дать на нее ссылку. Особо учтивые сообщают в теге alt, сколько килобайт весит большое фото.

К удобству тех, кто не владеет Photoshop'ом, в Сети в изобилии имеются онлайн-редакторы изображений, например, русскоязычный «Фанстудио».

Название страницы постоянно маячит наверху окна броузера. Что важнее, оно выводится в результатах выдачи поисковиков, и, вместе с описанием страницы (тег description), зовет пользователя на нашу страницу (или, увы, не зовет).

В интересах ранжирования в названии страницы &mdash содержании тега title &mdash обязательно должны присутствовать 1-2 ключевых слова.

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

Имеются и отличия. На правильной газетной полосе фотографии обязательно разных размеров и пропорций. В Сети наоборот &mdash снимки стандартизованы. Это связано с жесткостью табличного каркаса веб-страниц.

Важно для картинок в вебе:

• Вес (см. 06. Скорость загрузки)
• Наличие подписи (см. 09. Подписи к изображениям)

Снимки на сайте или в блоге, как правило, подписывают в теге alt. Я отброшу лень и стану обязательно делать это по трем причинам:

• Содержание тега alt индексируется роботами и имеет весомое значение для ранжирования страницы (при условии, что в подпись включено ключевое слово)
• Информацию о снимке получит и тот экономный читатель, кто отключил в броузере показ графики
• Каждый опубликованный снимок должен быть подписан, таков стандарт журналистики

Не нужно бояться пустого пространства на веб-странице! Пустота &mdash это воздух, легкость, стиль. Пустота &mdash это модно.

Пустоту иногда «съедает» сам пользователь, увеличивая для удобства чтения размер шрифта.

Любой текст в окружении пустоты выглядит очень значительно!

Пиктограммы (иконки) &mdash небольшие картинки-символы &mdash помогают идентифицировать сайт или раздел сайта. Разнообразят маркированные списки. Помогают навигации. Оживляют дизайн.

Пиктограмма с расширением .ico отображается рядом с url сайта в адресной строке броузера, в «Избранном» и в «Закладках», улучшая запоминаемость ресурса, повышая трафик.

Цвет и яркость текста и фона подчиняются одному требованию: чтобы первый легко читался на втором. Я точно не стану класть зеленые буквы на желтое поле. И наоборот.

Многие считают, что лучше черных букв на белом фоне ничего нет. Другие предпочитают чуть снижать контраст &mdash назначают серенький фон или на белый фон кладут темно-серые буквы.

Я не стану злоупотреблять вывороткой &mdash светлыми буквами на темном фоне. Подобный дизайн часто выглядит внушительно, но большие массивы текста на выворотке неудобочитаемы.

Большинство веб-дизайнеров сходится во мнении, что наиболее удобна для чтения строка длиной 9-10 слов или 50-70 знаков (считая пробелы).

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

Более или менее пространный текст, лежащий в Сети монолитным массивом, &mdash трагическая ошибка. Никто без жгучей необходимости не станет читать опус, от которого рябит в глазах.

Как очень многие, я разбиваю текст:

• На главки и подтемы. Каждой предпосылаю собственный подзаголовок.
• На логические абзацы. Абзацы отделяю друг от друга пустой строкой (вместо этой статьи представьте себе неподъемный «кирпич», если бы я этого не делал!)

Один абзац &mdash одна мысль. Пользователь имеет возможность своим орлиным взором выхватить в абзаце ключевые слова.

Структурированный интернет-текст легче читать. Кроме того, его легче насытить ключевыми словами, а именно: включить их в ценные для ранжирования подзаголовки.

Разбиение текста на абзацы &mdash простейшая операция, доступная блоггеру при оформлении блога.

Заголовки следует выделять тегом h1 &mdash h6, а не тегами для форматирования основного текста. «Заголовочные» теги h* весьма значимы для эффективного индексирования страницы роботами поисковиков.

Выбирая в диапазоне от h1 до h6, будем помнить правило онлайн-журналистики: «Достаточно большой заголовок делает любую новость большой».

И давайте договоримся не набирать заголовки заглавными буквами! Исследования показали, что строки, составленные из заглавных букв читаются медленнее фраз в общепринятом начертании.

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

Относительно кегля специалисты советуют:

• Воообще не задавать размер шрифта &mdash пусть юзер сам установит величину букв, какая его устроит.
• Задавать размеры шрифтов в относительных единицах (используя оператор em, проценты или слова bigger, smaller)

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

Правда, размер знаков зависит от разрешения экрана у пользователя. Буква при 800х600 выглядит в два раза больше, чем при 1600х1200 на том же самом мониторе. Единственное, что мы знаем &mdash высокие разрешения применяются все чаще, так что ориентироваться лучше на них.

В онлайне чаще всего применяются рубленые шрифты (sans serif):

• Arial
• Verdana
• Helvetica
• Tahoma

Считается, что рубленый шрифт выглядит более современно. Якоб Нильсен доказал, что рубленые шрифты лучше читаются при малых кеглях и малом разрешении монитора.

При этом заголовки иногда верстают шрифтами с засечками (serif):

• Times
• Times New Roman
• Georgia
• Сourier

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

Я не слежу пристально за эволюцией веб-шрифтов, но интуиция подсказывает мне, что современные компьютеры позволяют гораздо больше, чем разрешают советчики. Пожалуй, на своем будущем сайте я назначу приоритетным какой-нибудь Bauhaus, или Futura, или Impact, или Lucida. А то от ариалов-вердан уже тошнит.

Установка интерлиньяжа больше значения по умолчанию, &mdash например 150%, заметно улучшает удобочитаемость. Межстрочное расстояние связано с длиной строки: чем длиннее строка, тем больше должен быть интерлиньяж.

По данным Якоба Нильсена, выравнивание текста по левому краю увеличивает скорость чтения, так как левая выключка помогает глазу найти начало новой строки.

В Сети принято выделять слово или фразу:

• Полужирным
• Курсивом
• Цветом текста или фона. Якоб Нильсен цветным «маркером» выделяет лиды своих статей.

Опытные люди не советуют злоупотреблять при наборе верхним регистом: считается, что слова из заглавных букв в Сети воспринимаются как ОКРИК.

Акцентирование слов и предложений в массиве текста имеет значение. Пользователи редко читают веб-страницы слово за словом. 79% юзеров (по данным John'а Morkes'а) лишь просматривают страницу, выхватывая отдельные слова и фразы.

Маркированные и нумерованные списки позволяют изложить материал коротко, в удобной для просмотра форме. Опять же, списки хорошо «цепляют» скользящий взор юзера.

Для начала &mdash цитата из Владимира Набокова, относящаяся к 1969 году: «Я часто думаю, что необходим специальный знак пунктуации для улыбки &mdash некая вогнутая линия или лежащая на боку круглая скобка».

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

Один из бесчисленных словарей эмотиконов, выложенных в Сети.

Дизайнеры разработали множество видов ссылок и сценариев их поведения при подводе курсора. Сегодня ссылки не обязательно подчеркнуты линией. Но желательно, чтобы ссылка менялась &mdash активировалась &mdash при наведении на нее курсора. Если это не так, пользователь может счесть ссылку мертвой и &mdash не кликнет по ней!

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

Неразрывный пробел &nbsр не позволяет броузеру отрывать слово от слова, знак от знака. Например, чтобы в «и т. д.» буква «д.» ни у кого и никогда не перелетала в следующую строку, в коде ставят неразрывный пробел: «и т.&nbsрд.»

Неразрывный пробел иногда используется, чтобы подвинуть слова и строки на странице (когда других средств не хватает).

Тире &mdash черта более длинная, чем дефис. В коде тире выглядит так: &mdаsh

Существуют два вида кавычек:

• Кавычки-лапки " ". В html-коде: &quоt
• Кавычки-елочки « ». В html-коде пишутся: &laquо (левая) и &raquо (правая).

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

Троеточие в коде обозначается не тремя точками, а &hеllip

Знак copyright ©: &coрy

Знак registered ®: &rеg

Больше на тему валидного html-форматирования текста смотрите в статье «Как это пишется в интернете».

И в «Экранной типографике» Артемия Лебедева.

Правильный (валидный) код улучшает индексирование страниц.

Мне приходилось встречать рекомендации, что оптимальный текст &mdash на 3-4 экрана. Я игнорирую этот совет. Какого размера надо, такой текст и пишу. Не случайно этот «элемент» я поставил на последнеее место в своем субъективном рейтинге элементов оформления сайтов, подготовленном для начинающих журналистов.

Дистанционно ваш,
Игорь Николаевич Борисов,
журналист, копирайтер
inborisov@mail.ru

Все выпуски рассылки живут на моей веб-страничке http://voxfree.narod.ru/

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

xxxxx