Розділові знаки або допомагають користувачам, або заважають їм сприймати інформацію. Хороша пунктуація непомітна, як хороший дизайн. Вона направляє людей через контент, не перетягуючи на себе увагу. У сьогоднішній статті ми розглянемо основні розділові знаки й розберемося, які завдання вирішує кожен з них, як вони впливають на сприйняття інтерфейсу і як застосовувати їх найбільш ефективно.
Я сиджу о 6-й вечора, переглядаю надісланий Figma-файл, і розумію, що хтось явно переборщив з двокрапками. Кожен рядок виглядав так:
Ім’я: Джон
Електронна пошта: john@whatever.com
Телефон: +1 ХХХ ХХ ХХ
Розташування: Х
Я знаю, навіщо ми використовуємо двокрапки — вони є роздільниками й, до речі, чудово виконують свою функцію, але це? Це була ціла армія двокрапок. Мені здавалося, що я бачу рядки, експортовані з бази даних, а не профіль користувача, і точно не UI.
Погляньте на теплову карту вище – це нагадує слід, що світиться, стрибає від однієї двокрапки до іншої. Користувач не сприймає жодної реальної інформації (адже в цьому і полягає весь зміст сторінки профілю).
У чому ж полягала проблема? Справа не в граматичній правильності. Справа у візуальній ясності. Ми не повинні змушувати користувачів грати в гру «з’єднай крапки» зі розділовими знаками.
Ви коли-небудь замислювалися, чому користувачі начебто «застрягають» на певних екранах? Причина може бути меншою, ніж ви думаєте — у буквальному значенні. Ці крихітні розділові знаки, розкидані за вашим інтерфейсом, можуть створювати невидимі перешкоди.
Річ не у тім, щоб бути педантом, а в тому, щоб бути емпатом. Треба пам’ятати, що на екрані, де пікселі на вагу золота, а увага аудиторії короткочасна, кожен знак, який ми залишаємо, каже користувачам зупинитись, зробити паузу чи продовжити. Коли ми вибираємо правильні знаки, досвід здається плавним як ідеально спроєктована табличка на двері, яку ви скануєте прямо на ходу. Але коли ми помиляємось? Користувачі спотикаються. Вони збиваються. Вони йдуть.
Це треба виправити.
І раптом… дизайн почав дихати. Тепер контент виглядав набагато чистішим.
Якщо двокрапки викликають такі проблеми, то що ж говорити про всі інші маленькі розділові знаки, які ми недбало розкидаємо по наших інтерфейсах, як приправу до дизайну? Багатокрапки (…), крапки з комою (;), драматичні тире, які так любить AI. Чи допомагають вони, чи просто створюють візуальний шум?
Справа не лише у візуалі, а й у підвищенні доступності на різних пристроях. Час глибоко поринути у психологію пунктуації: розшифруємо, що означає кожен знак для користувачів
Кожен із них має свої особливості, свою місію і, чесно кажучи, свою маленьку індивідуальність, начебто вони теж люди, які мають почуття.
Розуміння їхньої справжньої сутності — перший крок до того, щоб змусити їх працювати на вас. Справа не тільки в тому, що вони собою представляють, але і в тому, що вони «шепочуть» користувачеві, часто на підсвідомому рівні. Почнемо з двокрапок, бо саме вони привели мене сюди.
Двокрапка (:): уявляє, що буде далі
Двокрапка каже: «Зверніть увагу. Ось категорія, а це її значення. Або приготуйтеся, бо я маю намір перерахувати щось важливе».
Це професіонал у встановленні смислових зв’язків. Подумайте про налаштування, форми, таблиці. «Загальна вартість: $19». «Оповіщення: Увімк./Вимк.». Такий текст чистий, дуже швидко сканується і не викликає емоцій (а це саме те, що потрібно, коли ви просто уявляєте дані або короткі інструкції). Він ефективний як добре змащений механізм.
Але… двокрапки можуть здаватися трохи… твердими. формальними. Вони не підходять для заголовків чи кнопок. «Функції:» виглядає незграбно, чи не так? Це додає візуальну паузу, яка може вбити сценарій заклику до дії. А якщо ваш екран наповнений двокрапками? Прямий шлях до візуального навантаження. Ваші користувачі будуть спотикатися про них (часто проста двоколонна верстка або просто гарне візуальне вирівнювання можуть виконати те саме завдання, зробивши інтерфейс легшим та сучаснішим). Покладайтеся на дизайн, а не лише на пунктуацію.
Запитайте себе: чи йде значення одразу за категорією?
- Так → двокрапка
- Ні → пропустіть її
Крапка (.): завершення
Найпоширеніший розділовий знак. Символ завершення. Але чи слід ставити крапки у мікротекстах B2B-продуктів, наприклад, при позначенні статусу завдання? «Готово. Закінчено. Більше жодних питань, будь ласка».
Наприкінці оповідальних пропозицій, повідомлень, підтверджень, попереджень, сильних заяв це має сенс. Але не обов’язково додавати крапку в підпис «Зміни збережені», навіть якщо вона передбачає завершення процесу (оскільки це лише швидке оновлення статусу).
Іноді точки здаються важкими та формальними. Особливо в мікротекстах SaaS-продуктів, адже ці крихітні написи повинні бути легкими й невимушеними. Уникайте точок у заголовках, кнопках або дуже коротких текстових мітках. «Зберегти» виглядає набагато чистіше, ніж «Зберегти.». А якщо користувачі наткнуться на абзац коротких пропозицій, що закінчуються точками? Це все одно, що вдаритися об цегляну стіну. Вони просто відскочать від неї й підуть до конкурентів.
Кома (,): невелика освіжаюча пауза
Кома схожа на перепочинок — вона дає нам простір, щоб рухатися вперед. Це свого роду коротка пауза в процесі читання, наприклад, «виберіть X, Y або Z, а потім натисніть кнопку перевірки». Коми дають зрозуміти, що спочатку треба зробити це, а потім те. Вони підтримують сценарій, запобігаючи появі надто довгих речень та ускладненню тексту.
Коми, як і крапки, добре працюють всередині повних пропозицій, наприклад, повідомлень або підтверджень, але не в заголовках, кнопках та мікротекстах. Якщо ваша пропозиція і так дуже коротка (менш як 10 слів), кома, швидше за все, не потрібна. Перенесення рядка найчастіше справляється з цим завданням краще, візуально розділяючи елементи без додаткових розділових знаків. Менше — значить більше, пам’ятаєте?
Три крапки (…): передбачає продовження
Трикрапка сигналізує про незавершеність або вказує на те, що головна подія ось-ось станеться. Його часто використовують, коли система завантажується чи зберігає інформацію.
Іноді ми зустрічаємо крапки навіть у заголовках модальних вікон. «Перш ніж ви скасуєте…» Виникає відчуття невеликої паузи, але при цьому заголовок не містить жодних подробиць, адже я звертаю найбільшу увагу саме на нього. В наявності невідповідність ментальної моделі.
Запитайте себе: чи дія завершена, чи буде продовжена?
- Завершено → без крапки
- Триває → трикрапка
Крапка з комою (;): порушник правил
Крапка з комою — досить формальний з’єднувач, який постійно використовується в коді та юридичній документації, але чи є йому місце в UX? Швидше ні, тому не думаю, що варто приділяти йому надто багато уваги.
Ось чому точка з комою майже ніколи не зустрічається у продуктових текстах:
- Уповільнює сканування: Люди переглядають інтерфейси швидко. Крапка з комою змушує їх зупинятися та докладати додаткових когнітивних зусиль.
- Виглядає формально: Крапка з комою асоціюється з уроками англійської, а не з дружнім прогрманим забезпеченням.
- Шкідливість для локалізації: Перекладачі все одно найчастіше розбивають пропозиції на дрібніші фрагменти, через що точка з комою виявляється не при справах (крім того, ви отримуєте гнівні листи від команди локалізації).
- Відображення на мобільних пристроях: Довгі пропозиції, розділені крапками з комою, на маленьких екранах перериваються у дивних місцях.
Довге тире ( — ): улюблений знак AI
Довге тире — улюбленець штучного інтелекту. Це свого роду швидка позначка чи акцент. Воно може бути роздільником, але більш плавним, ніж кома. Зазвичай довгі тире використовуються всередині пропозицій, але в цілому вони не надто поширені.
Знак оклику (!): головне, не зловживати
Знак оклику — фаворит. Він символізує збудження, успіх, увагу та сильні емоції. Але чи варто демонструвати цю іскру енергії в UX-текстах?
Де його зазвичай використовують? У вітальних повідомленнях, повідомленнях про успіх, на банерах. На мою думку, знаки оклику роблять мікротексти схожими на спам. Але якщо ви хочете виділити нову функцію або щось в цьому роді, знак оклику зробить ваш текст більш виразним і змусить людей звернути на нього увагу. Ніколи не використовуйте в інтерфейсах більше одного знака оклику — це перебір (наприклад, банери про помилки й так вже красного кольору і не потребують додаткової уваги).
Знак питання (?): діє на випередження
Використовуйте знак запитаня у діалогах підтвердження, наприклад: «Ви впевнені, що хочете скасувати?», або як іконки вбудованих довідок, над якими з’являються підказки.
Однак вони будуть надмірними на кнопках, наприклад, «Повторити спробу?» або у закликах до дії, наприклад, «Готові? Тепер натисніть почати». Просто скажіть прямо, що мають зробити користувачі.
Дужки ( ): тихий шепіт
Дужки шепочуть користувачам: «Псс, ось невелика додаткова деталь. Просто уточнення, нічого надто важливого». Це актуально для тих несуттєвих деталей, м’яких натяків чи пояснень, які повинні переривати основний сценарій. «Безкоштовна пробна версія (карта не потрібна)» — чудовий приклад, делікатне доповнення, яке додає цінність без нав’язливості. Дужки ефективні для уточнення категорій («Електронні листи (надіслані)») та додавання короткої додаткової інформації.
Але не складайте їх стосами, як вежі Дженга. Декілька наборів дужок в одному рядку? Візуальний жах! Якщо інформація всередині важлива, вона повинна бути частиною основної пропозиції, помітною підказкою або окремим рядком. Приховувати довгі дисклеймери або важливі примітки у дужках — велика помилка; це ускладнює сприйняття значної інформації. А ми хочемо внести ясність, а не заплутати користувачів.
Правильне vs неправильне застосування пунктуації
Теорія безглузда без практики. Ось як пунктуація поводиться в реальних контекстах (і повірте мені, контекст це все):
- Видалити точки з підписів та кнопок
- Порахувати двокрапки на кожному екрані (максимум 2)
- Чи є десь крапки з комою? Видалити їх.
- Трикрапки стоять тільки там, де відбувається якийсь процес (наприклад, завантаження)
- Двокрапки тільки для пар «категорія – значення»
- Крапки тільки для реальних пропозицій
- Знаки запитання тільки там, де є реальні питання
Як це пов’язано з продуктом загалом
Йдеться не лише про правила пунктуації (хоча вони й важливі). Необхідно зрозуміти, що кожен крихітний знак на екрані допомагає користувачам, або заважає їм. Третього не дано.
Хороша пунктуація непомітна, як хороший дизайн. Вона спрямовує людей через контент, не заявляючи про себе. Погана пунктуація створює свого роду «затори» в розумовому процесі користувача (а на це ні в кого немає часу).
Дотримуючись мінімалістського підходу, дозволяючи вашому чудовому дизайну та лейауту робити всю важку роботу і завжди ставлячи ясність вище запилених граматичних правил, ви, по суті, даєте своїм користувачам можливість без зусиль «пролетіти» через ваш продукт. У цьому випадку текст не просто працює; він здається легшим, зрозумілішим та приємнішим для очей.
Наступного разу, коли ви переглядатимете дизайни, дивіться не тільки на кольори та розташування елементів. Зверніть увагу на речі, які вас дратують, навіть якщо це знаки пунктуації. Порахуйте двокрапки. Проаналізуйте крапки. Тому що іноді (найчастіше) найменші деталі мають найбільше значення.
Автор: Мусієнко Тимофій