1.Структура текста
Обязательно продумывайте структуру текста: используйте заголовки и подзаголовки, разбивайте основной текст на абзацы, добавляйте списки и изображения.
Пользователи интернет сайтов редко читают текст полностью. Современный человек существует в перенасыщенной информационной среде. Это обстоятельство и высокий темп жизни заставляют людей скорее просматривать текст, чем читать его или хотя бы просматривать прежде чем читать. Увидев сплошное полотно текста, скорее всего пользователь просто закроет страницу. Поэтому так важно создать структуру текста из заголовков и абзацев, чтобы его легко можно было пробежать взглядом, понять что полезного можно узнать, прочтя текст полностью.
В качестве примера организации структуры текста отлично подходят тексты инструкций.
Или вот другой всем известный ресурс, где прекрасно просматривается структура статей – Wikipedia.
Заголовки. Подзаголовки. Текст
Для текста небольшого объема структура важна не меньше, чем для статей.
Пользователей интернета объединяет одна черта — нам сложно воспринимать большие блоки информации. Поэтому задача владельца сайта — описать свой продукт максимально просто и коротко. Огромные «простыни» остались в прошлом. Пришло время объяснять на пальцах.
Назовем 2 принципа продающего сокращения:
- • Яркие подзаголовки и конкретные описания
- • Визуализация всего, что можно
Вот несколько примеров.
На первом экране:
В блоках с изображениями:
Даже в блоке отзывов:
Помните: заголовки нужно использовать не только в статьях. Они упрощают восприятие любого текста.
Несколько советов по форматированию текста:
- • Используйте светлый фон. На светлом фоне текст проще всего прочесть. Если вы хотите разделить пространство страницы с помощью фона блоков, просто используйте вместе с белым фоном светло-серый.
- • Избегайте ярких цветов. Иногда может казаться, что яркий цвет — лучший способ привлечь внимание. Это не так. Цвет текста на сайте нужно использовать с осторожностью. Чтобы заголовок стал заметнее, можно выделить его жирным и/или сделать цвет основного текста светлее.
- • Синий цвет – цвет ссылок. Если для выделения текста вы все же применяете цвет, не используйте синий – пользователи будут принимать его за ссылку.
- • Не используйте более 3 шрифтов на одном сайте. Дизайн сайта должен быть целостным, а не выглядеть так, словно его по очереди создавали разные люди, каждый по своему вкусу.
- • Доверьте выбор сочетания шрифтов профессионалам. Выбор правильного сочетания шрифтов – целая наука. Если вы хотите сочетать несколько шрифтов, посмотрите какие шрифты чаще всего используются вместе. Сделать это можно например на странице Google Fonts.
Выберите шрифт и посмотрите на наиболее популярные сочетания.
Выравнивание текста
Если вы сомневаетесь как лучше выровнять текст в блоке, выравнивайте по левому краю.
Многочисленные исследования поведения посетителей веб-сайтов говорят об F-образном шаблоне чтения.
- • в начале пользователь читает текст по горизонтали, слева направо;
- • затем он спускается ниже и продолжает читать по горизонтали, но область чтения уже заметно короче;
- • после чего он просто начинает сканировать строки в вертикальном направлении.
При выравнивании по левому краю пользователю проще найти начало новой строки, а значит комфортнее продолжать чтение.
В блоках с изображениями также лучше придерживаться выравнивания по левому краю. Даже если текст находится на правой стороне страницы.
Выравнивание текста по центру страницы подходит в основном для заголовков.
Но если справа или слева от текста находится другой элемент, например, изображение или видео, то лучше все же использовать выравнивание по левому краю.
Визулизированные списки
Используйте вместо стандартных буллетов иконки, иллюстрирующие текст
Еще один способ привлечь внимание пользователя и подать ему информацию так, чтобы ее было проще воспринять и запомнить – заменить стандартные буллеты и нумерованные списки иконками.
Это могут быть списки в привычном виде, с той лишь разницей, что каждый пункт списка начинается графическим изображением.
Или вот такие блоки, которые также фактически являются списками.
Ссылки
Чтобы выделить ссылку в тексте используйте синий цвет
Нет ничего проще, чем показать посетителю, что фрагмент текста является ссылкой. Просто замените цвет текста на синий. Если пользователь видит на странице синий текст он не задумываясь считает его ссылкой.
Самый распространенный пример: Подробнее > или Читать далее >. Такие ссылки обычно расположены в конце короткого текста. По ним заинтересованный пользователь можете перейти к полной версии текста.
Выделение ссылок синим цветом можно встретить в любой части сайта. Даже в шапке.
Запасной способ выделить ссылку встречается реже первого, но также довольно распространен. Этот способ – подчеркивание текста.
Используйте подчеркивание, если изменение цвета текста на синий нарушает концепцию дизайна вашего сайта. Во всех остальных случая используйте цвет.
