От автора: всех приветствую. В прошлых двух частях статьи про поведенческие факторы очень много говорилось о читабельности. Очень много. А сегодня мы поговорим на эту тему еще конкретнее. Читабельность текста на сайте зависит от многих факторов, начиная от дизайна сайта и шрифтов, заканчивая оформлением каждой отдельной статьи. И раз это так важно, разберем все подробнее.
Дизайн/шрифты
Если говорить о читабельности и том, как на это влияет дизайн, то сразу почему-то хочется сказать про шрифты. Но оставим их пока в покое.
В первую очередь следует оценить сам внешний вид сайта. На каком фоне располагается текст? Есть ли рядом яркие блоки, которые отвлекают от чтения? Много ли на сайте рекламы, которая тоже отвлекает?
Когда-то были несчастливые времени, когда у меня не стоял блокировщик рекламы. Из-за этого иногда мне просто не хотелось просматривать страницу, потому что там была реклама ужасного содержания.
В общем, с этим все понятно. Теперь переходим к шрифтам. Очень важно, как смотрится текст на фоне. Именно тот текст, который предстоит читать. Наиболее частый вариант — черный текст на белом фоне. Это неплохо, но в целом более оптимальным считается не полный контраст. То есть не абсолютно черный на абсолютно белом. Поэтому цвет текста можно сделать чуть светлее черного.
Конечно, профессионально проконсультировать по этим вопросам вас может веб-дизайнер. Хотя иногда я видел такие макеты, что я сам бы сделал лучше, наверное. Вы должны понимать, что мелкий серый шрифт на черном фоне — это вариант, который совсем не годится.
Простой способ проверить сочетание цвета текста и фона — самому прочитать пару записей на своем сайте, а также дать это сделать друзьям. Если вы чувствуете какой-то дискомфорт, определенно что-то нужно менять.
Кстати, мы немного затронули размер шрифта. Как вы думаете, каким он должен быть? Во многих макетах я вижу, что у основного шрифта размер 10-14 пикселей. Но мое мнение (и не только мое), что минимум должно быть 16 пикселей. Буквы должны быть очень четко видны, человек со здоровым зрением не должен дополнительно напрягать глаза, чтобы что-то разглядеть.
С размером понятно, я думаю. Осталось обсудить сам шрифт, каким он должен быть. Для чтение оптимальными являются стандартные шрифты без засечек: Arial, Times New Roman, Tahoma, Verdana. Мое мнение в этом вопросе таково, что лучше не мудрить и поставить в качестве основного шрифт из числа стандартных.
Это очень полезно еще и по той причине, что наши глаза уже попросту привыкли к стандартным шрифтам — они окружают нас везде. Соответственно, когда вдруг для текста, который нужно читать, используется другой шрифт, это вызывает небольшой отторжение.
Итог по дизайну и шрифтам
Я не говорю, что сообщил вам какую-то сверх полезную информацию — вы и сами могли догадываться о тех вещах, о которых я написал. Но повторение — мать учения. Подведем итог:
Дизайн сайта в целом может влиять на читабельность. Например, яркие блоки рядом с текстом или реклама могут отвлекать
Цвет текста должен сочетаться с фоном. Лучше не брать полностью контрастные друг другу цвета, это может резать глаза
Размер шрифта должен быть побольше. Не 10-12 пикселей, а 16. А в идеале в начале каждой записи нужно сделать кнопки, кликая по которым читатель сам бы смог установить размер шрифта, удобный для него.
Для чтение лучше всего подойдет один из стандартных шрифтов без засечек
Оформление статьи
Второй и не менее важный аспект. Вы можете иметь на сайте отличный дизайн и замечательный крупный шрифт. Но если вы выложите полотно текста, мало у кого будет желание читать это до конца. В связи с этим, крайне важно использовать в записи другие html-элементы. Вот какие:
Жирный, курсивный, подчеркнутый, зачеркнутый, выделенный текст. Но не переборщить с этим тоже. Выделив нужные слова, читабельность заметно улучшается.
Подзаголовки. Наверное, самый важный элемент, который позволяет разбить статью на подразделы. Важно, чтобы подзаголовок не был слишком длинным (не более 60 символов).
Абзацы. Ну это понятно, не будете же вы писать весь текст в одном абзаце, верно? Хотя пару раз мне встречался такой текст. Это полный ужас. Но просто использовать абзацы мало. Нужно еще и контролировать кол-во содержимого внутри. Желательно не допускать, чтобы в абзаце было более 5-7 строк текста. Иначе его уже трудно воспринимать.
Списки. Где нужно — маркированные, в другом месте — нумерованные. Списки отлично улучшают внешний вид записи, привлекают внимание. Конечно, тут кое-что зависит и от дизайнера (какое он разработал оформление) потому что лично мне сильно не нравится дизайн, который есть для списков в html по умолчанию. И то он лучше, чем вообще не использовать списки.
Цитаты. Они оформляются отлично от обычного абзаца, поэтому позволяют тоже разбавить текст. Если есть возможность, стоит их использовать. Хотя бы иногда. Заодно это позволяет сделать сам текст интереснее.
Картинки. А куда же без них. Лучше использовать хоть какую-то картинку, чем вообще никакую. Основная цель изображений — разбить текст, сделать его чтение более простым, а также позволить мозгу лучше запомнить информацию. Потому что когда вы читаете про тигра, и в то же время видите его на картинке — это позволяет лучше запомнить, о чем вы вообще читали.
Собственные элементы (блоки). На многих сайтах я видел подобные блоки. Например, когда автор хочет дать какой-то совет, предупредить о чем-то, предостеречь и т.д. он заключает нужный текст в теги div с определенным стилевым классом, который и отвечает за оформление. Если дизайнер прорисовал дизайн этих блоков хорошо, то смотрится это красиво.
В принципе, из основных элементов это все. Тут бы можно было бы еще упомянуть таблицы, но часто ли вы в свои статьи вставляете таблицу? Думаю, не часто. Но там, где они есть, определенно читабельность не ухудшается.
Хорошо, а как проверить читабельность? К счастью, вы человек, поэтому можете и сами ее оценить. Если хотите, можете привлечь к оценке друзей или других вебмастеров. Этого будет достаточно.
Дополнительные советы и фишки
Как еще улучшить читабельность? Может помочь внедрение некоторых дополнительных стилей. Например, первую букву текста можно оформить не так, как все остальные. Это можно сделать в css с помощью псевдоэлемента :first-letter. Такой эффект часто встречается в книгах.
Также можно самый первый абзац начать с красной строки (свойство text-indent). Нужно обращать внимание и на такой показатель, как междустрочный интервал. Его нужно отрегулировать так, чтобы было максимально комфортно читать. Это уже более глубокая тема, которая заслуживает исследования с вашей стороны (вбейте в поисковик “вертикальный ритм текста”). Это если хотите копнуть глубже.
Пожалуй, это все, что я посчитал нужным сказать о читабельности. Можно еще добавить, что для больших статей неплохо было бы добавлять блок с кратким содержанием статьи, который содержал бы списком ссылки на все разделы записи.
Ну а основы приведения своих текстов в читабельный вид мы с вами разобрали. Используйте их, и тогда читать тексты в этом мире будет немного приятнее.
