Як зробити тексти на сайті зручними для читання

Щоб зрозуміти, як зробити текст зручним для читання, давайте згадаємо, як же ми Новомосковськ. При читанні наші очі не переходять послідовно з літери на букву, а роблять невеликі скачки по рядку, захоплюючи по 2-4 слова за 1 раз. У разі повсякденних текстів (новини, газети, листи на електронну пошту, повідомлення в соцмережах або Скайпі) погляд перескакує і на сусідні абзаци.

Чому так відбувається? При читанні чергового тексту наш мозок намагається отримати з нього якомога більше корисної інформації за якомога менший проміжок часу:

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

Приблизно так буде виглядати траєкторія руху погляду при читанні сторінки:

Тут червоним відзначений шлях першого (оціночного) погляду.
Жовтим виділені шматки тексту, в яких користувач знайшов свої зачіпки.

Тут перший погляд ні за що не зачепився, тому траєкторія закінчується на хрестику «Закрити вкладку».

Таким чином, всі правила по оформленню тексту випливають з трьох основних принципів:

Тепер перейдемо до конкретних порад.

Поради щодо оформлення тексту:

1. Загальна Новомосковскбельность тексту

• Використовуйте шрифти без зарубок. Наприклад, Arial, Tahoma, Open Sans, Verdana.
• Рекомендований розмір шрифту - 14-16 пікселів.
• Не зловживайте курсивом і жирним шрифтом.
• Для виділення кольором використовуйте 1-2 основні кольори, не більше.
• Дотримуйтесь ієрархію заголовків. Найважливіший заголовок - найбільший за розміром. Решта - менше.
• Використовуйте трохи розріджене міжрядковий інтервал (верстальщику: line-height: 1.3).
• Для відкривають і закривають лапок використовуйте символи «»
• Поставте відступи між абзацами тексту.
• Вирівняйте текст по лівому краю по одній лінії.

2. Посилання та кнопки в тексті

• Оформіть посилання як посилання.
  Зробіть їх іншого кольору (наприклад, синього) і підкресліть. При наведенні курсора миші можна прибирати підкреслення або змінювати колір посилання на більш яскравий.
• Оформіть кнопки як кнопки =)
  Як правило, кнопка прямокутна (можуть бути закруглені краї), вона виділяється кольором фону, у неї може бути тінь. При наведенні курсора кнопка змінює колір.

3. Структура тексту

Основну структуру тексту задає копірайтер: він об'єднує текст в блоки, прописує заголовки, виносить інформацію в списки або таблиці.

Текст оформлений за правилами

Той же текст, але правила не дотримані

Залишається лише не втратити цю структуру при розміщенні тексту на сайті.

Подивіться на два приклади верстки одного і того ж тексту:

Текст слабо структурований (погляду практично нема за що зачепитися)

Текст з чіткою структурою
(Заголовок → список товарів →
список переваг → заклик до дії)

У своїх текстах ми використовуємо 9-10 основних блоків, з яких збирається текст. Розглянемо трохи докладніше деякі з них.

3.1. основний заголовок

Основний заголовок - це найбільший текст на сторінці, вирівнюємо його по центру, відбиваємо відступами від основного тексту.

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

3.2. Каталог товарів або список послуг

У каталозі товарів потрібно використовувати картинки. Назва товару і його ціну бажано зробити трохи розрізняються (наприклад, назва - жирним, а ціну - немає, або навпаки). Після списку товарів ставимо посилання на повний каталог.

Якщо назви товарів довге, то можна розташувати їх по два на сходинку (і використовувати картинки поменше):

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

3.3. список переваг

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

Або можна виділити фоном заголовки переваг:

Якщо не виходить підібрати іконки, можна обійтися без них, але виділити пункти маркерами все ж варто:

3.4. Заклик до дії

Не обов'язково розміщувати заклик до дії саме праворуч, можна поставити його по центру. Також можемо виділити його фоном:

3.5. Акції

Одна-дві коротких фрази, яка випереджає словом «Акція» або «Увага». Виділяємо цю інформацію (кольором, розміром, рамкою чи фоном), наприклад:

Добре привертають увагу картинки:

3.6. Кроки / схема роботи

Список дій, які виконують клієнт і компанія для отримання результату. Слід пронумерувати дії, наприклад, так:

Якщо всього 2-3 кроку, можна розмістити їх в один рядок і розділити стрілками:

Або такий варіант (для невеликого числа кроків з короткими текстами):

Це наочно покаже клієнту, що схема дій проста і зрозуміла.

3.7. Оплата і доставка

Це важлива інформація, яку користувач буде цілеспрямовано шукати на сторінці. Можна додати іконки (не дуже яскраві), щоб полегшити користувачеві пошук. Самі способи оплати та доставки вставляємо як список (з маркерами) - по маркерами легко розпізнається «багато / мало».

висновок

Виникають труднощі при розміщенні текстів? Напишіть нам - допоможемо.

P.S. Про те, як ще можна підвищити зручність сайту, я також розповідаю на вебінарі «Підвищуємо продажу з турботою про користувачів: 30 прийомів».