Тексти як інструмент забезпечення зручності вебсайтів

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

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

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

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

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

Перш за все ви маєте визначити — яку стратегію взаємодії дизайну і тексту плануєте застосувати.

Стратегії взаємодії тексту з дизайном

Існують дві основні стратегії взаємодії тексту з дизайном:

  • Зміст-орієнтований дизайн
  • Дизайн-орієнтований зміст

Якщо говорити максимально просто, кожна з цих стратегій визначає, хто є головним у взаєминах тексту з композицією.

Познайомимось з ними ближче!

Зміст-орієнтований дизайн

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

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

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

Ця ж стратегія використовується і для проєктування інтернет-магазинів, блогів і, часто, онлайн-сервісів.

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

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

Дизайн-орієнтований зміст

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

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

Яку б стратегію ви не обрали, існують і деякі універсальні принципи, яких варто дотримуватись у підготовці текстів для вебсайтів. Ознайомимось з ними!

Ключові вимоги до текстів у вебі

Тексти повинні бути осмисленими

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

Це неправильний підхід. Перше, що має робити дизайнер під час верстки будь-якого елементу, який містить текст — читати його, аналізувати. 

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

В текстах має легко зчитуватись ієрархія змісту

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

Тексти у вебі повинні бути лаконічними

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

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

 

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

Тексти повинні бути зрозумілими та швидко сприйматись

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

Стандартний час перебування користувача на сайті як правило не перевищує 2 хвилин. Тож важливо, щоб той текст, який ви використовуєте, швидко засвоювався.

Зрозумілість не завжди легко оцінити самостійно, тому корисно показувати інтерфейс і тексти тестувальникам чи навіть невеликій фокус-групі.

Стиль оповідання має бути адаптований під цільову аудиторію

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

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

Тексти повинні бути грамотними

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

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

Рекомендації щодо заголовків у вебдизайні

Розбивайте великі тексти підзаголовками

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

Робіть заголовки коротким (та осмисленими)

Ми вже зазначали, що в вебі написи мають бути лаконічними. І особливо важливо це в контексті заголовків.

Якщо конкретно: найліпша довжина заголовка — до 5 слів, включно з прийменниками. У виключних випадках — 7 слів. Але в гонитві за лаконічністю не втрачайте осмисленості. Краще, коли заголовок — це повноцінна думка, яка резюмує сенс статті чи секції, до якої він належить.

Підкреслюйте ієрархію нарисом

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

Пам’ятайте про колірні контрасти

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

Рекомендації щодо абзаців

Уникайте задовгих абзаців

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

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

Ілюструйте зміст за кожної нагоди

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

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

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

Рекомендації щодо посилань

Робіть посилання зрозумілим та зручними

У вебі будь-який текст можна робити посиланням. Але при цьому краще уникати написів на кшталт «тут» та надто коротких текстів («1», «2», «3» тощо).

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

Відповідне семантиці оформлення

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

Рекомендації щодо форм

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

Обирайте зрозумілу назву форми

В кожної форми неодмінно має бути назва. Причому бажано, щоб вона була не формальною, а максимально чітко розкривала суть наслідків заповнення форми. Наприклад, краще написати «Замовлення книги «Краса» ніж просто «Оформлення покупки».

Підписуйте поля відповідними назвами

В кожного поля, як і у форми, є власна назва. Назва поля (елемент label) пишеться, як правило, іменником. Тож краще не писати «Введіть ваше ім’я». Достатньо просто «Ваше ім’я». Так лаконічніше.

Не дублюйте в тексті наповнювачі назву поля

Текст-заповнювач (placeholder) сприяє більш коректному заповненню форми. Тож не варто переводити його на дублювання назви. Використовуйте цей елемент, як додаткову підказку. Наприклад, назвою поля може бути «Ім’я», а текст-заповнювач допоможе пояснити, що ви просите заповнити саме повне ім’я.

Доповнюйте поля корисними спливаючими підказками

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

Сповіщайте про помилки одразу

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

Створюйте стан відправленої форми

Не забувайте про стан вдалого відправлення форми. Часто дизайнери оформлюють лише саму форму, і розробники створюють цей стан на свій розсуд. Щоб такого не сталось, треба зробити стан відправлення форми та описати в ньому, що має відбутись далі. Наприклад, сповістити користувача, що тепер йому на пошту прийде лист з подальшими інструкціями, а якщо лист не прийшов — слід перевірити теку «спам».

Готуйте оформлення автоматичних листів

Часто форми, що містять поле «електронна пошта» відправляють на неї автоматизовані листи. І про оформлення цих листів також часто забувають, через що користувачі можуть отримати лист з абсолютно неприйнятною версткою. Щоб цього не сталось, дизайнер під час проєктування форми має перевірити все, відповідно до ТЗ: чи повинна вона відправляти користувачу лист після заповнення, і якщо так — зробити для цього листа відповідне оформлення.

Рекомендації щодо кнопок

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

Використовуйте дієслова (коли це доцільно)

Кнопка — це елемент, що призводить до дії. І, відповідно, написи на кнопках мають передавати сенс певної дії. А для цього корисно використовувати дієслова. Наприклад «Шукати» для поля пошуку або «Надіслати» для відправлення листа чи повідомлення в чаті.

Шукайте коротку форму написів

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

Доповнюйте важливі кнопки іконками

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

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

·
4306
·
4
·
sosogoodsuper 76
Наступна стаття
Колір як інструмент забезпечення зручності вебсайту
1462
Головна