Чек-лист для проверки юзабилити текста

Оригинальный, авторский текст — это ещё один визуальный элемент на сайте. Как картинки, шаблоны или видеоролики. Чтобы текст легко читался, его делают понятным и доступным для посетителей сайта. Запомните мантру: «Читабельность, читабельность и ещё раз читабельность!».

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

По некоторым оценкам, посетители сайта изучают только 25% документа, размещенного на странице сайта. Любые препятствия для легкого чтения, например, малый шрифт, невыразительный цвет или неудобная длина строки, ещё больше снизят этот показатель.

Как создать текст, который понравится читателям WaterMillSky? Ознакомиться с критериями читабельного контента.

Когда приходится читать с экрана, длина строки всегда короче, чем на бумаге. Длинные строки неудобны для чтения — глаза двигаются из стороны в сторону. Это затрудняет переход от одной строки к другой вниз по странице. Например, длина строки в 140 символов в плане читабельности уступает строке, где представлено не более 80 символов.

В зависимости от размера шрифта, оптимальный размер столбцов — от 40 до 70 символов. Чтобы узнать длину строк, скопируйте текстовый контент и проверьте его при помощи онлайн-инструмента на сайте lettercount.com.

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

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

Если стандартная черно-белая пара кажется скучной и неинтересной, попробуйте иные цвета: серый, темно-синий, коричневый или другие темные оттенки. Можно пойти другим путем и выбрать светлый шрифт на темном фоне.

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

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

Способы улучшения текста:

• Горизонтальная линия — разделит текст на отдельные логические (смысловые) части.
• Маркированные и нумерованные списки — помогут разобраться с отдельными характеристиками товара или особенностями услуги.
• Высота строки — увеличит объём пустого пространства, сделает строки более различимыми и удобными для восприятия предложений с мелким шрифтом.

Все элементы выравниваются по левому или правому краю, по центру или по ширине.


Используйте корректное выравнивание

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


Выравнивайте правую часть

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

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

Выбирайте среди более чем 600 шрифтов для текстов в интернете. Правила следующие:

• Заголовки: применяйте стилизованные весёлые литеры. Заголовки большие и короткие, для них подойдут визуально привлекательные фактуры.
• Основной контент: используйте простые шрифты без засечек. Они предназначены для плавного и легкого чтения на экране. Подходящие варианты: Arial, Candara, Georgia, Tilda Sans, Verdana и др.
• Меню навигации: используйте простые и понятные стили, откажитесь от рукописных, вычурных или декоративных.

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

• Длина линии. Используйте столбцы и изображения, чтобы строки на целевых страницах имели длину не более 70 символов. Тексты для корпоративного или личного блога могут быть несколько больше.
• Контраст. Убедитесь, что фон страницы и цвет предложений различаются между собой.
• Пустые строки. Используйте пробелы! Короткие абзацы, маркированные списки и пространство между элементами разделяйте пустыми строками.
• Выравнивание. Выравнивайте текст по левому краю.
• Размер шрифта. Проверьте размер шрифта для заголовков, подзаголовков и основного контента.
• Стиль шрифта. Применяйте шрифты без засечек. Они разработаны для мониторов и экранов. Вместо черного цвета попробуйте бордо, темно-синий, серый или другие темные оттенки.

Следуя советам WaterMillSky легко получить красивые, удобные, легкочитаемые тексты.