Пунктуация в UX: полное руководство

В сегодняшней статье мы рассмотрим основные знаки препинания и разберемся, какие задачи решает каждый из них, как они влияют на восприятие интерфейса и как применять их наиболее эффективно.

Как вообще появилась эта статья?

Я сижу в 6 вечера в пятницу на созвоне, просматриваю присланный Figma-файл (не теряя надежды, что скоро будет перерыв на кофе ☕), и, понимаю, что кто-то явно переборщил с двоеточиями. Каждая строка выглядела так:

• Имя: Джон
• Электронная почта: john@whatever.com
• Телефон: +91 ХХХ ХХ ХХ
• Местоположение: Х

Я знаю, зачем мы используем двоеточия — они служат разделителями и, кстати, отлично выполняют свою функцию, но это? Это была целая армия двоеточий. Мне казалось, что я вижу строчки, экспортированные из базы данных, а не профиль пользователя, и уж точно не UI.

Это меня зацепило, и я спросила дизайнера, почему двоеточий так много, на что она ответила: «Так контент выглядит чище и его быстрее сканировать. Я всегда использую их в английском».

Справедливый аргумент, верно? Разве не я была тем самым человеком, который просил, чтобы текст был понятным и привычным для пользователей на их родном языке?

Однако... мои глаза не сканировали контент. Они застревали на каждом двоеточии. Взгляните на тепловую карту выше — это напоминает светящийся след, прыгающий от одного двоеточия к другому. Я не воспринимала никакой реальной информации (а ведь в этом и заключается весь смысл страницы профиля).

В чем же заключалась проблема?

И тогда меня осенило 💡. Дело не в грамматической правильности. Дело в визуальной ясности. Мы не должны заставлять пользователей играть в игру «соедини точки» со знаками препинания.

Вы когда-нибудь задумывались, почему пользователи как будто «застревают» на определенных экранах? Причина может быть меньше, чем вы думаете — в буквальном смысле. Эти крошечные знаки препинания, разбросанные по вашему интерфейсу, могут создавать невидимые препятствия.

Дело не в том, чтобы быть педантом, а в том, чтобы быть эмпатом. Надо помнить, что на экране, где пиксели на вес золота, а внимание аудитории кратковременно, каждый знак, который мы оставляем, говорит пользователям остановиться, сделать паузу или продолжить. Когда мы выбираем правильные знаки, опыт кажется плавным, как идеально спроектированная табличка на двери, которую вы сканируете прямо на ходу. Но когда мы ошибаемся? Пользователи спотыкаются. Они сбиваются. Они уходят. И никто этого не хочет (поверьте мне, я тщательно отслеживала метрики в течение последнего квартала).

Я знала, что мне нужно это исправить...

Я сделала то, что показалось мне по-настоящему бунтарским (это поймут только дизайнеры). Я удалила все двоеточия. Все до единого. Ну, кроме одного... внутри временной метки, потому что 5:30 без двоеточия выглядит просто нелепо, а я бунтарка не до такой степени.

Результат? Из 5 двоеточий осталось только одно. И вдруг... дизайн начал дышать.

Но вот что я сделала дальше: вместо того, чтобы сохранить эти уродливые перегруженные строки и формальную структуру, я просто выровняла всё в две аккуратные колонки. Текстовые метки слева, значения справа. Добавила небольшие отступы и сделала заголовки менее активными. Никаких двоеточий. Только продуманный лейаут.

Теперь контент выглядел гораздо чище.

Но потом я начала думать... если двоеточия вызывают такие проблемы, то что же говорить обо всех других маленьких знаках препинания, которые мы небрежно разбрасываем по нашим интерфейсам, как приправу к дизайну? Многоточия (...), точки с запятой (;), драматичные тире, которые так любит AI. Помогают ли они или просто создают визуальный шум?

Время глубоко погрузиться в психологию пунктуации: расшифруем, что значит каждый знак для пользователей

Каждый из них имеет свои особенности, свою миссию и, честно говоря, свою маленькую индивидуальность, как будто они тоже люди, у которых есть чувства.

Понимание их истинной сущности — первый шаг к тому, чтобы заставить их работать на вас. Дело не только в том, что они из себя представляют, но и в том, что они «шепчут» пользователю, часто на подсознательном уровне. Начнем с двоеточий, потому что именно они привели меня сюда.

Двоеточие (:): представляет, что будет дальше

Двоеточие говорит: «Обратите внимание. Вот категория, а вот ее значение. Или приготовьтесь, потому что я собираюсь перечислить что-то важное».

Это профессионал в установлении смысловых связей. Подумайте о настройках, формах, таблицах. «Общая стоимость: $19». «Уведомления: Вкл./Выкл.». Такой текст чистый, очень быстро сканируется и не вызывает эмоций (а это именно то, что нужно, когда вы просто представляете данные или краткие инструкции). Он эффективен, как хорошо смазанный механизм.

Но... двоеточия могут казаться немного... жесткими. Формальными. Они не подходят для заголовков или кнопок. «Функции:» выглядит неуклюже, не правда ли? Это добавляет визуальную паузу, которая может убить сценарий призыва к действию. А если ваш экран наполнен двоеточиями? Прямой путь к визуальной перегрузке. Ваши пользователи будут спотыкаться о них (часто простая двухколонная верстка или просто хорошее визуальное выравнивание могут выполнить ту же задачу, сделав интерфейс более легким и современным). Полагайтесь на дизайн, а не только на пунктуацию.

Спросите себя: идет ли значение сразу за категорией?

• Да → двоеточие
• Нет → пропустите его

Точка (.): завершение

Самый распространенный знак препинания. Символ завершения. Но следует ли ставить точки в микротекстах B2B-продуктов, например, при обозначении статуса задачи? «Готово. Закончено. Больше никаких вопросов, пожалуйста».

В конце повествовательных предложений, уведомлений, подтверждений, предупреждений, сильных заявлений это имеет смысл. Но не обязательно добавлять точку в подпись «Изменения сохранены», даже если она предполагает завершение процесса (поскольку это всего лишь быстрое обновление статуса).

Иногда точки кажутся тяжелыми и формальными. Особенно в микротекстах SaaS-продуктов, а ведь эти крошечные надписи должны быть легкими и непринужденными. Избегайте точек в заголовках, кнопках или очень коротких текстовых метках. «Сохранить» смотрится гораздо чище, чем «Сохранить.». А если пользователи наткнутся на целый абзац коротких предложений, заканчивающихся точками? Это все равно, что удариться о кирпичную стену. Они просто «отскочат» от нее и уйдут к конкурентам.

Запятая (,): небольшая освежающая пауза

Запятая похожа на передышку — она дает нам пространство, чтобы двигаться вперед. Это своего рода короткая пауза в процессе чтения, например, «выберите X, Y или Z, а затем нажмите кнопку проверки». Запятые дают понять, что сначала надо сделать это, а потом то. Они поддерживают сценарий, предотвращая появление слишком длинных предложений и усложнение текста.

Запятые, как и точки, хорошо работают внутри полных предложений, например, уведомлений или подтверждений, но не в заголовках, кнопках и микротекстах. Если ваше предложение и так очень короткое (менее 10 слов), запятая, скорее всего, не нужна. Перенос строки зачастую справляется с этой задачей лучше, визуально разделяя элементы без дополнительных знаков препинания. Меньше — значит больше, помните?

Многоточие (…): предполагает продолжение

Многоточие сигнализирует о незавершенности или указывает на то, что главное событие вот-вот произойдет. Его часто используют, когда система загружается либо сохраняет информацию.

Время от времени мы встречаем многоточия даже в заголовках модальных окон. «Прежде чем вы отмените...» Возникает ощущение небольшой паузы, но при этом заголовок не содержит никаких подробностей, а ведь я обращаю наибольшее внимание именно на него. Налицо несоответствие ментальной модели (отлично, спасибо за путаницу 🙃).

Спросите себя: действие завершено или будет продолжено?

• Завершено → без многоточия
• Продолжается → многоточие

Точка с запятой (;): нарушитель правил

Точка с запятой — довольно формальный соединитель, который постоянно используется в коде и юридической документации, но есть ли ему место в UX? Скорее нет, поэтому не думаю, что стоит уделять ему слишком много внимания.

Вот почему точка с запятой почти никогда не встречается в продуктовых текстах:

• Замедляет сканирование: Люди просматривают интерфейсы бегло. Точка с запятой заставляет их останавливаться и прилагать дополнительные когнитивные усилия.
• Выглядит формально: Точка с запятой ассоциируется с уроками английского, а не с дружелюбным ПО.
• Вредит локализации: Переводчики все равно чаще всего разбивают предложения на более мелкие фрагменты, из-за чего точка с запятой оказывается не у дел (кроме того, вы получаете гневные письма от команды локализаторов).
• Отображение на мобильных устройствах: Длинные предложения, разделенные точками с запятой, на маленьких экранах прерываются в странных местах.

Длинное тире ( — ): любимый знак AI

Длинное тире — любимец искусственного интеллекта. Это своего рода быстрая пометка или акцент. Оно может служить разделителем, но более плавным, чем запятая. Обычно длинные тире используются внутри предложений, но в целом они не слишком распространены.

Восклицательный знак (!): главное, не злоупотреблять

Восклицательный знак — мой фаворит, каюсь. Он символизирует возбуждение, успех, внимание и сильные эмоции. Но стоит ли демонстрировать эту искру энергии в UX-текстах? 

Где его обычно используют? В поздравительных сообщениях, сообщениях об успехе, баннерах. По моему мнению, восклицательные знаки делают микротексты похожими на спам. Но если вы хотите выделить новую функцию или что-то в этом роде, восклицательный знак сделает ваш текст более выразительным и заставит людей обратить на него внимание. Никогда не используйте в интерфейсах более одного восклицательного знака — это перебор (например, баннеры об ошибках и так уже красного цвета и не нуждаются в дополнительном внимании).

Вопросительный знак (?): действует на опережение

Используйте вопросительные знаки в диалогах подтверждения, например: «Вы уверены, что хотите отменить?», или в качестве иконок встроенных справок, над которыми появляются всплывающие подсказки.

Однако они будут избыточными на кнопках, например, «Повторить попытку?» или в призывах к действию, например, «Готовы? Теперь нажмите начать». Просто скажите прямо, что должны сделать пользователи.

Скобки ( ): тихий шепот

Скобки шепчут пользователям: «Псс, вот небольшая дополнительная деталь. Просто уточнение, ничего слишком важного». Это актуально для тех несущественных деталей, мягких намеков или пояснений, которые не должны прерывать основной сценарий. «Бесплатная пробная версия (карта не требуется)» — прекрасный пример, деликатное дополнение, которое добавляет ценность без навязчивости. Скобки эффективны для уточнения категорий («Электронные письма (отправленные)») и добавления краткой дополнительной информации.

Но не складывайте их стопками, как башни Дженга. Несколько наборов скобок в одной строке? Визуальный кошмар! Если информация внутри важна, она должна быть частью основного предложения, заметной подсказкой или даже отдельной строкой. Скрывать длинные дисклеймеры или важные примечания в скобках — большая ошибка; это затрудняет восприятие значимой информации. А мы хотим внести ясность, а не запутать пользователей.

Правильное vs неправильное применение пунктуации

Теория бессмысленна без практики. Вот как пунктуация ведет себя в реальных контекстах (и поверьте мне, контекст — это все):

Чеклист для быстрой проверки

Теперь, прежде чем опубликовать любой текст, я сканирую его по чеклисту (это занимает около двух минут и избавляет от головной боли):

• Удалить точки из подписей и кнопок
• Посчитать двоеточия на каждом экране (максимум 2)
• Есть ли где-нибудь точки с запятой? Удалить их.
• Многоточия стоят только там, где происходит какой-то процесс (например, загрузка)
• Двоеточия только для пар «категория – значение»
• Точки только для реальных предложений
• Вопросительные знаки только там, где есть реальные вопросы

Затем я читаю все вслух (да, я тот человек, который разговаривает со своим экраном). Если я где-то не делаю естественную паузу, знак препинания, вероятно, не нужен.

Как это связано с продуктом в целом

Речь идет не только о правилах пунктуации (хотя они и важны). Необходимо понять, что каждый крошечный знак на экране либо помогает пользователям, либо мешает им. Третьего не дано.

Хорошая пунктуация незаметна, как и хороший дизайн. Она направляет людей через контент, не заявляя о себе. Плохая же пунктуация создает своего рода «пробки» в мыслительном процессе пользователя (а на это ни у кого нет времени).

Придерживаясь минималистского подхода, позволяя вашему великолепному дизайну и лейауту делать всю тяжелую работу и всегда ставя ясность выше пыльных грамматических правил, вы, по сути, даете своим пользователям возможность без усилий «пролететь» через ваш продукт. В этом случае ваш текст не просто работает; он кажется более легким, понятным и приятным для глаз.

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