Юзабилити в текстах

Татьяна Лехаткова

NewMark

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

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

1. Шрифт. Существует два типа шрифтов: с засечками (serif) и без засечек (sans serif). Всем, кто хоть немного имел дело с созданием сайтов, известно, что в интернете используется шрифт без засечек, шрифты класса serif подходят только для печатной продукции. Это объясняется тем, что с экрана читать сложнее и характер восприятия не позволяет применять «цепляющие глаз» засечки. Еще незабвенный Якоб Нильсен писал: «Если сомневаетесь, используйте Verdana». На данный момент шрифты Verdana, Arial и Tahoma применяются чаще всего, в западном сегменте можно встретить шрифт Georgia с засечками.

На сайте лучше использовать один-два шрифта в разных начертаниях (полужирный, курсив). Большее их количество выглядит неприятно, заставляя пользователя постоянно перестраиваться на новое начертание. Размещение на сайте текста в стандартном «вордовском» шрифте Times New Roman выглядит убого и напоминает самодельные бесплатные сайты на «народе». Говоря о нашем примере, посмотрите на страницу:

А вот тот же фрагмент, но на другом сайте, уже без засечек. Фрагмент тоже не идеальный, но вопрос шрифта решен:

2. Размер и цвет шрифта. Размер шрифта должен быть в пределах от 10 до 14 пикселей, крупный шрифт раздражает, мелкий просто нечитабелен. Для большинства идеально подходит шрифт 10-12, для людей в возрасте нужен 14. С этим все понятно, кто не убежден, попробуйте прочитать текст на Txf.ru или, например, на Velopiter.spb.ru. В том, что касается цвета шрифта, важно учитывать не столько сам цвет, сколько его контраст с фоном.

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

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

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

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

5. Подзаголовки. Тексты длиннее 1,5-2 тысяч знаков нужно делить на подзаголовки. Дело в том, что пользователь не читает тексты в прямом смысле слова, а просто просматривает в поисках нужной информации. Подзаголовки экономят время и позволяют быстрее найти то, что нужно. Конечно, всегда можно воспользоваться поиском по странице с помощью Ctrl-F, но далеко не все «юзеры» настолько продвинуты, чтобы знать такие тонкости.

6. Шрифтовые выделения. В арсенале копирайтера есть три вида выделения основных мыслей текста: полужирное написание, курсив и ПРОПИСНЫЕ БУКВЫ. Полужирное выделение используется для обозначения главного слова абзаца, его тематики, курсив традиционно обозначает главную мысль автора, а прописные буквы используются для резюмирования и привлечения внимания. Не рекомендуется использовать прописные буквы слишком часто — это на языке шрифта обозначает крик и наводит на мысли о вменяемости автора. Попробуйте прочесть этот фрагмент:

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

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

Вместо заключения

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

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