Найти тему

10 сопособов сделать текст читаемым на сайте. Часть 1.

Вы сделали красивый и удобный сайт, но посетители не задерживаются на нем долго, и как следствие заказчик недоволен? В чем же дело?

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

В данной статье, вы найдете 10 полезных советов, как сделать сайт читаемым.

1. Разделите информацию на смысловые блоки

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

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

Что надо сделать, чтобы исправить это? Разделите информацию по смыслу на блоки.

Демонстрация страницы, когда информация разделена на смысловые блоки, и установлен фон экрана страницы.
Демонстрация страницы, когда информация разделена на смысловые блоки, и установлен фон экрана страницы.

Визуально разделить можно двумя способами: использовать отступы (от 120 до 180 px) или устанавливать блокам разные цвета фона экрана.

2. Установите между элементами сайта отступы одинакового размера

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

Демонстрация страницы, когда между элементами разные отступы.
Демонстрация страницы, когда между элементами разные отступы.

Как это исправить? Установите одинаковые отступы между элементами.

Демонстрация страницы, когда между элементами установлены одинаковые размеры отступов.
Демонстрация страницы, когда между элементами установлены одинаковые размеры отступов.

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

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

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

Как это исправить? Сделайте отступы, позволяющие визуально разделить блоки на смысловые части.

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

Достаточным размером расстояния между блоками составляет от 120 до 180 px

4. Не используйте много стилей

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

Демонстрация страницы с разными стилями шрифтов, цветов и начертаний.
Демонстрация страницы с разными стилями шрифтов, цветов и начертаний.

Оптимальное количество до 2-х шрифтов, один акцентный цвет и до 2х начертаний.

Демонстрация страницы с оптимальным количеством стилей.
Демонстрация страницы с оптимальным количеством стилей.

5 Применяйте цветной фон для всего экрана

Выделение цветом отдельной текстовой части, ведет к «дроблению» страницы и выглядит неаккуратно.

Демонстрация экрана с "раздробленным" видом страницы
Демонстрация экрана с "раздробленным" видом страницы

Если необходимо выделить какую-то часть информации, то лучше всего выделить весь фон блока цветом.

Демонстрация экрана когда, фон выделен правильно.
Демонстрация экрана когда, фон выделен правильно.

6. Используйте мало текста в узких колонках

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

Демонстрация страницы, с перегруженными колонками.
Демонстрация страницы, с перегруженными колонками.

Не располагайте большой текст в узких колонках, или сокращайте его, если это возможно без потери смысла.

Демонстрация страницы с аккуратными и читаемыми колонками,
Демонстрация страницы с аккуратными и читаемыми колонками,

7. Большой объем текста не следует выравнивать по центру

Большой объем текста, сложно читать, если он выравнен по центру.

Демонстрация страницы с большим объемом текста по центру.
Демонстрация страницы с большим объемом текста по центру.

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

Демонстрация экрана с сокращенным текстом выровненным по центру.
Демонстрация экрана с сокращенным текстом выровненным по центру.

8. Текст не должен закрывать важную часть картинки

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

Демонстрация экрана сайта, когда текст закрывает важную часть фонового изображения.
Демонстрация экрана сайта, когда текст закрывает важную часть фонового изображения.

Попробуйте использовать выравнивание или расположить, текст так, чтобы не возникало такой проблемы.

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

9. Соблюдайте визуальную иерархию

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

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

Заголовок должен визуально отличаться от основного текста. Сделайте его крупнее, что бы стало понятно, что это заголовок, а основной текст это основной текст.

На изображении четко видна иерархия.
На изображении четко видна иерархия.

10. Текст плохо видно на фото

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

Демонстрация экрана, когда текст сливается с фоновым изображением.
Демонстрация экрана, когда текст сливается с фоновым изображением.

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

Демонстрация экрана, когда текст контрастен по отношению к фоновому изображены.
Демонстрация экрана, когда текст контрастен по отношению к фоновому изображены.

На этом все. В скором времени сделаю вторую часть. (Всего планируется 3 части). А по итогам выхода всех частей, будет собран Чек лист "как сделать текст читаемым".

И главное необходимо помнить, что веб-дизайн это не про красоту, а про удобство!

Много клиентов Вам и до скорой встречи!

#веб-дизайн #чек-лист #удобный дизайн #читаемый