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

Мик Джаггер

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

Сделанной в 2003 году первой версии настоящего сайта я благодарен – он помог мне найти новую работу. Но теперь устарел.

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

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

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

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

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

Мы никогда не сможем изменить первое впечатление о себе

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

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

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

25 важнейших элементов юзабилити

Веб-дизайн

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. Размер текста

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

01. Стиль

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

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

* Готический стиль

* Гранж

* Плакатный стиль

* Панк-роковый

* Суперминиатюрный городской

* Минималистский

* Стиль чертежей и моделей

* Стиль 50-х годов

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

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

Счастливая возможность, даруемая нам интернетом, – соединение на одном сайте текста, изображения, анимации, звука, видео. Очень полезная возможность для теле - и радиожурналистов. Но здесь я бы призвал к целомудрию: видео на сайте, значит видео, подкасты (радиопередачи в Сети), значит подкасты. А не пихать на одну страницу все возможности мультимедиа.

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

02. Цвет

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

* Помогают серферу мгновенно отличать один сайт от другого. Цвет, после названия – самая устойчивая ассоциация с содержанием сайта.

* Вводят посетителя в нужное эмоциональное состояние. Look and feel – «увидел и почувстовал»: официоз или фан, готичная смурь или свет.

* Разделяют интерфейс на смысловые поля. Так, например, зона меню, зона основных текстов, зона комментариев, зона инфографики и т. д. на сайте журнала «Эксперт» разнообразно раскрашены.

* Цвет дифференцирует разделы друг от друга как на гламурном сайте alloy.com

* Цветом маркируют ссылки в активном состоянии и ссылки, по которым уже состоялся переход

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

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

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

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

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

03. Композиция страницы

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

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

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

* Принцип золотого сечения

* Принцип верстки «по модулю»

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

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

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

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

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

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

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

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

04. Навигация

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

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

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

* Быстрый возврат. Внизу каждой страницы рекомендуют ставить ссылку «В начало». На каждой странице ставят ссылку «На главную» или пиктограмму-ссылку «Домик». Логотип сайта на каждой странице по умолчанию является ссылкой на главную (начальную) страницу.

05. Единство стиля

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

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

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

06. Скорость загрузки

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

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

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

* Уменьшить его разрешение до сетевого стандарта в 72 dpi

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

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

07. Названия страниц

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

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

08. Форматирование изображений

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

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

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

* Вес (см. 06. Скорость загрузки)

* Наличие подписи (см. 09. Подписи к изображениям)

09. Подписи к изображениям

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

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

* Информацию о теме снимка получит и тот читатель, кто отключил в броузере показ графики

* «Фотография без подписи – деньги на ветер» (Главред «Известий» Владимир Мамонтов, GQ, октябрь 2006, стр. 246). Каждый опубликованный снимок должен быть подписан, таков стандарт журналистики.

10. Пустота

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

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

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

11. Пиктограммы

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

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

12. Контрастность текста и фона

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

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

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

13. Длина строки

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

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

14. Структурирование текста

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

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

* На главки и подтемы. Каждой предпосылаю собственный подзаголовок.

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

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

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

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

15. Оформление заголовков

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

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

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

16. Кегль (размер шрифта)

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

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

* Воообще не задавать размер шрифта – пусть юзер сам установит величину букв, какая его устроит.

* Задавать размеры шрифтов в относительных единицах (используя оператор em, проценты или слова bigger, smaller)

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

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

17. Гарнитура (тип шрифта)

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

* Arial

* Verdana

* Helvetica

* Tahoma

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

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

* Times

* Times New Roman

* Georgia

* Сourier

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

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

18. Интерлиньяж (межстрочное расстояние)

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

19. Выключка (выравнивание)

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

20. Акцентирование фрагментов текста

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

* Полужирным

* Курсивом

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

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

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

«Все исследования нового типа чтения показывают, что электронные тексты читают не целиком, а кусками. Читатель нового века сам выбирает, что именно ему читать» (Роже Шартье, профессор, «Книжное обозрение» № 41, 2006, стр. 3).

21. Списки

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

22. Эмотиконы (смайлики)

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

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

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

23. Оформление ссылок

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

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

24. Валидность кода

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

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

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

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

* Кавычки-лапки . В html-коде: &quоt

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

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

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

Знак copyright ©: &coрy

Знак registered ®: &rеg

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

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

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

25. Размер текста

Мне приходилось встречать рекомендации, что оптимальный текст — на 3-4 экрана. Часто я вынужден игнорировать этот совет. Какого размера надо, такой текст и пишу.

Не случайно этот «элемент» я поставил на последнее место в своем субъективном рейтинге элементов веб-дизайна и веб-типографики для начинающих журналистов.

Вместе с тем желаю (не всегда успешно) себе придерживаться великого правила «Текст должен быть коротким, если он не уникальный».