Ви створюєте редакційний контент? Перестаньте робити деякі поширені помилки, які я досі занадто часто бачу серед своїх клієнтів або у своєму повсякденному житті як читача.
Ось практичний посібник зі створення доступного контенту, придатного для всіх медіа.
Тому що сьогодні, щоб ваш контент читають, розуміють та цінують, Редакційної якості вже недостатньо. Також необхідно подбати про дизайн контенту : його формат, його структура, його читабельність та його здатність адаптуватися до реальних потреб ваших читачів.
Розуміння важливості адаптації для різних екранів
Навіть сьогодні ми бачимо забагато контенту, розробленого переважно для екранів комп’ютерів, погано структурованого, важкого для читання та, як не парадоксально, не завжди оптимізованого, навіть для великих екранів. І все ж, до 2025 року, понад 70% з веб-трафік глобальний походить від мобільний.
На смартфонах ці статті стають нескінченними, компактними, погано відформатованими і тому швидко покинутими.
Мета полягає в тому, щоб написати та структурувати контент таким чином, щоб він був зручним для сенсорної навігації та швидкого прокручування, а також добре виглядав на великому екрані. Щоб подолати ці проблеми, важливо використовувати підхід, орієнтований на мобільні пристрої.
Важливість правильного визначення пріоритетів з чіткими назвами
Гарна ієрархія допомагає швидко сканувати і зрозуміти структуру статті.
Для мобільних пристроїв, перевага короткі та яскраві заголовкиГарний заголовок H2 або H3 повинен дозволяти читачеві зрозуміти статтю, не читаючи основний текст. Якби ми витягли лише H1, H2 та H3 з вашого контенту, ми мали б отримати чіткий виклад усього.
Типова ієрархія:
- H1: Унікальний заголовок сторінки
- H2: Основні розділи (кожні 300–500 слів)
- H3: Підрозділи, якщо необхідно
Важливо візуально розрізняти заголовки за їх розміром, дотримуючись при цьому узгоджений масштабДля цього ви можете використовувати модульні сходи часто використовується під час проектування системи проектування (наприклад, 1.250, 1.333 тощо) для створення плавного переходу між рівнями.
Керування текстом та абзацами
Для плавного та приємного читання почніть із центрованої сітки з головним стовпцем. Виберіть чітка типографіка з хороший контраст щоб уникнути будь-якої зорової втоми та ніколи не вирівнюйте текст, це створює нерівномірні проміжки, що ускладнює читання.
Використовуйте жирний шрифт для ключових слів і курсив для нюансів, інтервали слід використовувати від 1.5 до 1.7, щоб зробити текст об'ємнішим і легшим для читання, особливо на екрані.
На мобільних пристроях: найкращі практики для створення читабельного контенту
Мобільні пристрої вимагають більшої ретельності у структуруванні інформації; хороший контент має бути плавним, легким та швидким для навігації.
- Текст ніколи не повинен прилипати до країв екрана, не забудьте додати бічні поля щонайменше 16 пікселів
- Мінімальний розмір шрифту від 14 до 16 пікселів для читабельності
- Уникайте занадто щільних блоків тексту, оскільки вони перешкоджають швидкому читанню під час прокручування.
- Від 3 до 6 візуальних ліній
На робочому столі: структура, вентиляція, обмеження ширини
Навіть на великому екрані ваш контент не повинен займати всю ширину!
- Ідеальна ширина для читання максимум від 600 до 750 пікселів
- Розмір тексту від 16 до 18 пікселів
- Рекомендована довжина рядка: від 60 до 75 символів на рядок
- Максимум від 2 до 4 рядків на абзац
Виділіть головне, не перевантажуючи
Ви можете структурувати контент, використовуючи непомітні візуальні елементи, такі як марковані списки у тексті, щоб виділити ключові моменти, encadrés повідомляти додаткову інформацію або попередження, та виклики щоб виділити визначення, важливі дані або короткі зведення.
Ці елементи допомагають темпувати читання, привертати увагу до того, що дійсно важливо, та покращувати загальне розуміння змісту. Однак, як згадувалося вище, занадто багато візуальних елементів може підірвати ієрархію.
Приклад статті NN/g https://www.nngroup.com/articles/ai-integration-condens/ на мобільних пристроях та комп’ютерах: чітка структура, розбірлива типографіка та просторе макетування для комфортного читання.
Посилання та заклик до дії (CTA)
Посилання в редакційному контенті
Внутрішні та зовнішні посилання збагачують статтю, покращують навігацію, підвищують довіру та сприяють SEO. Але їх інтеграцію слід ретельно продумати.
Користувачі повинні мати можливість швидко визначити, що є інтерактивним, посилання має бути чітко ідентифікованим, щоб бути доступним для всіх, включаючи людей з вадами зору або дальтоніків. посилання має бути однозначно ідентифікованим, за домовленістю ми часто ставимо різного кольору з підкресленням.
Також не рекомендується перетворювати заголовок (H1, H2, H3) на посилання, хіба що це внутрішнє посилання на якір. Крім того, формулювання посилання має бути описовим: уникайте розпливчастих заяв «натисніть тут», на користь точних якорів, таких як «див. наш повний посібник з редакційного UX».
CTA
Щоб бути ефективним, заклик до дії повинен використовувати чітке, лаконічне та захопливе дієслово наприклад: Завантажте посібник, Запитайте пропозицію ou Дивіться повну статтюОбіцяна дія завжди повинна відповідати наступному вмісту або сторінці, щоб уникнути «пасток для кліків», які часто дратують користувачів.
Остерігайтеся закликів до дії, замаскованих під прості гіперпосилання, оскільки вони ризикують залишитися непоміченими. Щоб максимізувати свою ефективність, заклики до дії мають бути одразу ідентифікованими, як візуально, так і семантично.
Розміщуйте заклики до дії стратегічно, часто після блоку інформації або в кінці статті. Не соромтеся повторювати їх у довгому контенті у вступі, середині та висновку, за умови, що їхня присутність залишається природною та ненав’язливою.
Візуальні елементи
зображень
Зображення відіграють ключову роль у процесі читання, вони дозволяють нам зробити читання приємним, підкріплювати повідомлення та додавати візуальну інформацію.
Розміщуйте зображення стратегічно, після пояснювального абзацу, перед важливим моментом, щоб привернути увагу. Між абзацами вони дозволяють перерву, свого роду візуальна перерва або розрив наративу. Дуже ефективний для щоб знову привернути увагу читача, проілюструвати сильну концепцію або занурити в атмосферу.
Уникайте нецікавих «декоративних» зображень або надто шаблонних стокових зображень. Зображення повинні чітко ілюструвати ідею чи емоцію тексту. Однак будьте обережні: занадто багато зображень уповільнює завантаження та відволікає від читання.
А щодо доступності, не забудьте чітко називати зображення, щоб зробити їх зрозумілими та описовими, і подумайте про описовий тег ALT для програм зчитування з екрана.
Приклад статті NN/g https://www.nngroup.com/articles/ux-copy-sizes/ Зображення підсилює розуміння, водночас дотримуючись темпу читання, візуальний матеріал розроблений для всіх видів медіа.
Інфографіка, ілюстрації та графіка
Ці візуальні елементи відіграють життєво важливу роль: вони допомагають ефективно узагальнювати ключову інформацію, спрощувати складні поняття, покращувати запам'ятовування та заохочувати до обміну контентом.
Щоб вони були справді корисними, переконайтеся, що вони оформлені чітко та зрозуміло, з достатньо великий текст, особливо для мобільного перегляду. Пам’ятайте, що на смартфонах зображення відображається у зменшеному форматі, не змушуйте користувача збільшувати масштаб і переконайтеся, що інформація видно з першого погляду, як на екрані комп’ютера.
Однак, послання ілюстрації чи інфографіки не повинно покладатися виключно на візуальний елемент. Подумайте про те, щоб супроводжувати її описовим текстом, щоб інформація була доступною також для людей, які не бачать зображення, особливо тих, хто користується програмою зчитування з екрана. Якщо зображення містить важливі дані, опишіть їх чітко та повно.
відео
Вони пропонують цікаву альтернативу традиційному читанню та можуть допомогти доповнити інформацію. Однак додати короткий виклад або ключові моменти Крім того, це допомагає користувачам, які віддають перевагу читанню або не можуть дивитися відео.
Розміщуйте відео на таких платформах, як YouTube або Vimeo щоб не збільшувати час завантаження вашої сторінки. Не забудьте увімкнути або активувати субтитри щоб покращити доступність та дозволити перегляд без звуку.
на закінчення
Гарний редакційний контент – це вже не просто хороший текст. Це досвід читання сам по собі, де форма служить змісту, де ергономіка робить такий самий внесок у вплив, як і редакційна якість. Йдеться про прагнення до плавності, ієрархії, балансу. Коротше кажучи, йдеться про написання з ясністю, але також і з емпатією.
Не варто нехтувати інтерфейсом для комп’ютерів, але контент слід розробляти в першу чергу для мобільних пристроїв, щоб адаптуватися до всіх форматів. Не забудьте протестувати макет на реальних мобільних пристроях, а не лише в інструменті попереднього перегляду.
Анаель Стален, дизайнер UX/UI та дизайнер продуктів в UX-Republic
