5 способів форматування сторінок з великою кількістю контенту

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

Головне — ретельне планування та редагування

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

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

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

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

Форматування vs структурування

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

Хороша структура допомагає користувачам сформувати ментальну модель сторінки та ефективно переміщатися нею. Ось кілька поширених стратегій структурування контенту:

Зміст. Дайте користувачам можливість отримати уявлення про зміст сторінки, не занурюючись у деталі.
Фрагменти контенту. Розбивайте текст на зручні сприйняття розділи, щоб спростити його сканування.
Поетапне розкриття інформації. Надайте користувачам доступ до першого рівня контенту та розкривайте решту інформації на запит (наприклад, за допомогою акордеонів).
Прямий доступ до окремих розділів. Використовуйте посилання всередині сторінки, щоб користувачі могли пропустити не релевантні розділи й перейти до контенту, який їх цікавить.

5 способів форматування контенту

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

Резюме/короткий зміст

Завдання резюме – донести ключові ідеї, що містяться у тексті.

Воно допомагає користувачам:

Вирішити, чи цікавий їм контент,
Вловити суть, не занурюючись у деталі.

Резюме має бути коротким та точним. Якщо основних висновків/ідей декілька, використовуйте маркований список, щоб їх було простіше сканувати.

Резюме має бути відмежовано від решти тексту. Щоб привернути увагу до цього елемента, використовуйте описовий заголовок (наприклад, «Резюме» або «Основні висновки») та чітке візуальне оформлення (наприклад, рамка або заливка).

Резюме може мати різний рівень деталізації. Хоча найчастіше вони надають короткий опис усієї статті, іноді доцільніше додати резюме для кожного розділу.

Investopedia: У резюме статті ми бачимо лаконічні формулювання та буліти, які підвищують зручність сканування. Користувачі можуть переглянути основні висновки, щоб вирішити, наскільки актуальна для них стаття. Червона рамка відмежовує резюме від решти контенту.

Розташування резюме

Резюме вирішує різні завдання, залежно від того, де воно розташоване.

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

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

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

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

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

Healthline: Ця стаття складається з п'яти розділів. Кожен із них завершується коротким резюме з ключовими ідеями.

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

Healthline: Наприкінці статті є резюме із заголовком The bottom line (підсумок). Ми радимо використовувати більш описові заголовки, наприклад Резюме, Висновок, Ключові висновки.

Виділення жирним шрифтом та кольором

Жирний шрифт та колір дозволяють привернути увагу користувачів до важливої інформації.

Medium: Користувачі можуть виділяти у статті фрагменти, які викликають у них відгук. Виділені фрагменти будуть видно їх передплатникам та автору статті.

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

Марковані списки

Марковані списки або «буліти» – один із найпоширеніших способів форматування тексту.

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

Марковані списки виділяються та привертають увагу. Коли їх пункти правильно відформатовані, миттєво сприймаються як група. У ході нашого дослідження користувачі відгукувалися про буліти позитивно. Один з учасників сказав: «Мені подобаються марковані списки. Вони лаконічні, і я можу одразу побачити, про що йтиметься».

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

Наприклад, на сторінці, присвяченій драфту НБА 2023 року, кожен пункт списку є довгим абзацом без додаткового форматування. Один з учасників дослідження, який шукав інформацію про Віктора Вембаньям, так нічого і не знайшов, хоча вона відображалася на першому екрані (див. 5 пункт).

НБА: Учаснику дослідження довелося залишити сторінку, бо він так і не знайшов потрібну інформацію у довгих абзацах маркованого списку.

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

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

Виноски

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

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

Зображення

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

Є два основні типи зображень: інформаційні та декоративні. Інформаційні (наприклад, фотографії продуктів, інфографіка) підвищують цінність контенту, тому користувачі готові витрачати час їх вивчення. Навпаки, чисто декоративні зображення не мають корисної інформації. Зазвичай їх використовують, щоб зробити лейаут візуально цікавішим. Однак завжди залишається ризик, що сторінка вийде надто довгою.

Інформаційні зображення

Інформаційні зображення полегшують розуміння вмісту. Вони можуть спростити складні концепції та зробити абстрактну інформацію образнішою. Один з учасників нашого дослідження сказав: Мені потрібен приклад, мені потрібна картинка. Я людина, якій завжди та скрізь потрібні картинки ».

У деяких випадках учасники воліли ділитися зі своїми знайомими саме зображенням, а не посиланням на всю статтю.

Журнал Quanta: У статті про теорію складності (розділ теоретичної інформатики) ілюстрація допомагає читачам зрозуміти взаємозв'язок між класами складності завдань P і NP.

Декоративні зображення

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

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

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

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

Висновок

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

Джерело

🖤

Якщо тобі сподобався цей матеріал, підпишись на наші соціальні мережі Instagram / Facebook / Linkedin / Telegram. Там ти знайдеш більше цікавих матеріалів про дизайн.💬 Дизайн-чат