Читабельність тексту: що це і як підвищити цей показник?

57

Від автора: всіх вітаю. У минулих двох частинах статті про поведінкові фактори дуже багато говорилося про читабельності. Дуже багато. А сьогодні ми поговоримо на цю тему ще конкретніше. Читабельність тексту на сайті залежить від багатьох факторів, починаючи від дизайну сайту і шрифтів, закінчуючи оформленням кожної окремої статті. І раз це так важливо, розберемо все докладніше.

Дизайн/шрифти

Якщо говорити про читабельності і тому, як на це впливає дизайн, то відразу чомусь хочеться сказати про шрифти. Але залишимо їх у спокої.

В першу чергу слід оцінити сам зовнішній вигляд сайту. На якому тлі розташовується текст? Є поруч яскраві блоки, які відволікають від читання? Чи багато на сайті реклами, яка теж відволікає?

Коли-то були нещасливі часу, коли у мене не стояло блокувальник реклами. З-за цього іноді мені просто не хотілося переглядати сторінку, тому що там була реклама жахливого змісту.

Загалом, з цим все зрозуміло. Тепер переходимо до шрифтів. Дуже важливо, як виглядає текст на тлі. Саме той текст, який належить читати. Найбільш частий варіант — чорний текст на білому фоні. Це непогано, але в цілому більш оптимальним вважається не повний контраст. Тобто не абсолютно чорний на абсолютно білому. Тому колір тексту можна зробити трохи світліше чорного.

Звичайно, професійно проконсультувати з цих питань може веб-дизайнер. Хоча іноді я бачив такі макети, що я сам би зробив краще, напевно. Ви повинні розуміти, що дрібний сірий шрифт на чорному фоні — це варіант, який зовсім не годиться.

Простий спосіб перевірити поєднання кольору тексту і фону — самому прочитати пару записів на своєму сайті, а також дати це зробити друзям. Якщо ви відчуваєте якийсь дискомфорт, безумовно щось потрібно міняти.

До речі, ми трохи торкнулися розмір шрифту. Як ви думаєте, яким він повинен бути? У багатьох макетах я бачу, що у основного шрифту розмір 10-14 пікселів. Але моя думка (і не тільки моє), що мінімум має бути 16 пікселів. Літери повинні бути дуже чітко видно, людина зі здоровим зором не повинен додатково напружувати очі, щоб щось розгледіти.

З розміром зрозуміло, я думаю. Залишилося обговорити сам шрифт, яким він повинен бути. Для читання оптимальними є стандартні шрифти без зарубок: Arial, Times New Roman, Tahoma, Verdana. Моя думка в цьому питанні така, що краще не мудрувати і поставити в якості основного шрифт з числа стандартних.

Це дуже корисно ще і з тієї причини, що наші очі вже просто звикли до стандартних шрифтів — вони оточують нас всюди. Відповідно, коли раптом для тексту, який потрібно читати, використовується інший шрифт, це викликає невеликий відторгнення.

Підсумок по дизайну та шрифтів

Я не кажу, що повідомив вам якусь понад корисну інформацію — ви й самі могли здогадуватися про ті речі, про які я написав. Але повторення — мати навчання. Підіб’ємо підсумок:

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

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

Розмір шрифту повинен бути побільше. Не 10-12 пікселів, а 16. А в ідеалі на початку кожного запису потрібно зробити кнопки, клікаючи по яким читач сам би зміг встановити розмір шрифту, зручний для нього.

Для читання найкраще підійде один із стандартних шрифтів без зарубок

Оформлення статті

Другий і не менш важливий аспект. Ви можете мати на сайті відмінний дизайн та чудовий великий шрифт. Але якщо ви викладете полотно тексту, мало у кого буде бажання читати це до кінця. У зв’язку з цим, вкрай важливо використовувати записи інші елементи html. Ось які:

Жирний, курсивний, підкреслений, закреслений, виділений текст. Але не переборщити з цим теж. Виділивши потрібні слова, читабельність помітно поліпшується.

Підзаголовки. Напевно, найважливіший елемент, який дозволяє розбити статтю на підрозділи. Важливо, щоб підзаголовок не був занадто довгим (не більше 60 символів).

Абзаци. Ну це зрозуміло, не будете ж ви писати весь текст в одному абзаці, вірно? Хоча пару разів мені зустрічався такий текст. Це повний жах. Але просто використовувати абзаци мало. Потрібно ще й контролювати кількість вмісту всередині. Бажано не допускати, щоб в абзаці було більше 5-7 рядків тексту. Інакше його вже важко сприймати.

Списки. Де потрібно — марковані, в іншому місці — нумеровані. Списки відмінно покращують зовнішній вигляд запису, привертають увагу. Звичайно, тут дещо залежить і від дизайнера (яке він розробив оформлення) бо особисто мені сильно не подобається дизайн, який є для списків в html за замовчуванням. І він краще, ніж взагалі не використовувати списки.

Цитати. Вони оформляються відмінно від звичайного абзацу, тому дозволяють теж розбавити текст. Якщо є можливість, варто їх використовувати. Хоча б іноді. Заодно це дозволяє зробити сам текст цікавіше.

Картинки. А куди ж без них. Краще використовувати хоч якусь картинку, ніж взагалі жодної. Основна мета зображень — розбити текст, зробити його читання більш простим, а також дозволити мозку краще запам’ятати інформацію. Тому що коли ви читаєте про тигра, і в той же час бачите його на зображенні — це дозволяє краще запам’ятати, про що ви взагалі читали.

Власні елементи (блоки). На багатьох сайтах я бачив подібні блоки. Наприклад, коли автор хоче дати якусь пораду, попередити, застерегти і т. д. він укладає потрібний текст в теги div з певною стильовою класом, який і відповідає за оформлення. Якщо дизайнер намалював дизайн цих блоків добре, то виглядає це красиво.

В принципі, з основних елементів це все. Тут би можна було б ще згадати таблиці, але чи часто ви в свої статті вставляєте таблицю? Думаю, не часто. Але там, де вони є, безумовно читабельність не погіршується.

Добре, а як перевірити читабельність? На щастя, ви людина, тому можете і самі її оцінити. Якщо хочете, можете залучити до оцінки друзів або інших вебмайстрів. Цього буде достатньо.

Додаткові поради та фішки

Як ще покращити читабельність? Може допомогти впровадження деяких додаткових стилів. Наприклад, першу літеру тексту можна оформити не так, як всі інші. Це можна зробити в css за допомогою псевдоэлемента :first-letter. Такий ефект часто зустрічається в книгах.

Також можна перший абзац почати з нового рядка (властивість text-indent). Потрібно звертати увагу і на такий показник, як міжрядковий інтервал. Його потрібно відрегулювати так, щоб було максимально комфортно читати. Це вже більш глибока тема, яка заслуговує дослідження з вашої сторони (забийте в пошуковик «вертикальний ритм тексту»). Це якщо хочете копнути глибше.

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

Ну а основи приведення своїх текстів в читабельний вигляд ми з вами розібрали. Використовуйте їх, і тоді читати тексти в цьому світі буде трохи приємніше.