Readability – удобство чтения

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

Это почти как слушать болтовню по радио с рекламой на заднем фоне – просто ужасно. Для большинства выходом стала кнопка «Версия для печати», которая фильтрует часть спама.

Мэнди Браун написала замечательную статью для журнала «A List Apart» под названием «В защиту читателей» (In Defense Of Readers), в которой сделала попытку привлечь внимание дизайнеров к тем, кто читает все это:

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

Вопросы, которые ставятся в статье – первостепенные в сегодняшнем Интернете, где главная цель разработчиков – запихать побольше рекламы на страницу. Ответом на это безумие становится Readability.

Readability – это браузерная закладограмма.

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

Идея программы родилась после появления потрясающего приложения Instapaper Марка Армента (и не менее потрясающего дополнения для iPhone). Код Readability (включая стартовые страницы и активы) доступен на Google Code.

Прежде чем перейти к детальным пояснениям, давайте для начала зайдем в Google Analytics и посмотрим на постраничную продолжительность сеансов ваших пользователей.

Google Analytics — > Поведение — > Контент сайта — > Все страницы

Необходимая колонка – «Средняя длительность просмотра страницы». Например, пользователь провел на странице максимум 12 секунд, т.е. зашел, бегло просмотрел страницу и вышел. Что это значит?

Есть множество причин, по которым пользователи так быстро покидают страницу/сайт. Самые частые — это:

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

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

С определением тут всё просто и понятно. Пора разобраться с влиянием читабельности на поведенческие факторы и ранжирование сайта.

Влияние readability на ранжирование сайта

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

Когда вы улучшаете читабельность контента, то улучшаются и поведенческие характеристики:

время пребывания на странице;
глубина скроллинга страницы;
показатель отказов;
социальные сигналы.

Как результат, поисковые системы станут ваш сайт ранжировать выше к необходимому ТОПу.

Что важно знать о показателе отказов?

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

По умолчанию Google Analуtics присваивает высокий показатель отказа страницам, где не было взаимодействия пользователя с контентом. Акцентируем ваше внимание на том, что под взаимодействием здесь подразумевается – переход по ссылке на другую страницу.

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

просмотр видео;
клик по изображению для его увеличения;
клики по кнопкам «Заказать», «Рассчитать стоимость», поделиться в соц.сетях и т.д.

А для блогов и страниц с большим контентом, в качестве события может быть ещё настроен скроллинг.

Как улучшить readability страниц сайта?

Используйте изображения

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

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

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

Вариантов несколько:

Указывайте источник изображения
Используйте фотобанки. Там вы найдете большое количество бесплатных изображений на разную тематику и без надобности указывать авторские права.

Заголовки и подзаголовки

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

Важно:

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

Не делайте заголовки слишком длинными и тем более в две строки.

Списки

Для оформления веб-страницы хорошо использовать нумерованные и маркированные списки.

Во-первых, они привлекают внимание.

Во-вторых, структурируют текст.

В-третьих, данные в виде списка усваивается лучше .

Шрифт (Font)

Для веб страниц идеальный шрифт – это шрифт без засечек sans serif fonts. К таким относятся:

Arial,
Verdana,
Helvetica,
Trebuchet,
Lucida Sans и др.

Использование таких шрифтов облегчит чтение текста с экранов различных устройств. Протестировать каждый из шрифтов вы можете здесь: webfont-test.com

Ни в коем случае, НЕ ПИШИТЕ ПРЕДЛОЖЕНИЯ ЗАГЛАВНЫМИ БУКВАМИ. Такой текст скорее вызовет у пользователей желание уйти со страницы.

Размер шрифта (Font size)

Тут важно найти золотую середину. Если текст сделать крупным, то он будет занимать много места и предложения у вас будут в несколько строчек. Маленький — тоже не вариант, так как приходится напрягать глаза, отчего они быстрее устают. К тому же стоит позаботиться и о категории людей со слабым зрением.

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

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

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

Длина строки и предложения

Оптимальное число слов на строке — от 9 до 12 слов. Это примерно между 50-60 символами c пробелами. Строки, превышающие данную метрику, затрудняют фокусировку на информации и смысл прочитанного может потеряться.

Контрастность (Contrast ratio)

Контрастность или contrast ratio — это соотношение цвета шрифта и цвета фона.

Согласно руководству WCAG 2.01, контрастность между шрифтом и фоном должна быть минимум 4,5:1, чтобы текст был разборчивым и четким.

Показатель контрастности может принимать значения от 1:1 (отсутствует контрастность) до 21:1 (максимальная контрастность, чёрный цвет на белом фоне). Упомянутое руководство выдвигает следующие требования к контрастности текста:

3:1 — минимальная контрастность. Используется для шрифтов больших размеров (уровень АА)
4,5:1 — минимальная контрастность для обычного текста (уровень АА)
7:1 — повышенная контрастность для обычного текста (уровень ААА)

Более подробную информацию вы можете найти в самом руководстве.

Вертикальный ритм

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

Использование вертикального ритма позволяет легко читать текст, так как заданные пропорции сохраняются неизменными на странице. При этом изменение шрифта и длины строки не оказывает влияние на этот баланс.

Нашему мозгу нравятся шаблоны, так как они предсказуемыми. Когда мозг видит шаблон, у него возникает чувство, будто перед ним хорошо известная вещь, и он успокаивается. Такой приём с повторениями (читай: ритмом, шаблоном) используется во многих сферах: фотография, музыка, стихосложение и проч.

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

Неразрывные пробелы

Использование неразрывного пробела решает проблему, которая возникает, когда два и более связанных слова переносятся на разные строки. К примеру, на сайтах, где не используются такие пробелы, можно увидеть следующие проблему: “разрываются” инициалы и фамилия; “разрываются” предлог и слово, к которому он относится; “разрываются” числа и единицы измерения, “разрываются” длинные группы чисел и т.п.

На первый взгляд незначительные изменения могут улучшить читаемость текста. Подробнее с реализацией можно ознакомиться в статье А. Ёжикова здесь.

Заключение:

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

Постарайтесь учесть каждый из этих рекомендаций со всеми тонкостями, и в комплексе вы наверняка увидите хороший результат. Под результатом мы имеем в виду увеличение количества посетителей сайта, длительности нахождения на страницах, уменьшение показателя отказов, улучшение позиций сайта.

Поделитесь ссылкой с друзьями: