{"id":14275,"url":"\/distributions\/14275\/click?bit=1&hash=bccbaeb320d3784aa2d1badbee38ca8d11406e8938daaca7e74be177682eb28b","title":"\u041d\u0430 \u0447\u0451\u043c \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u044b \u0430\u0432\u0442\u043e?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"f72066c6-8459-501b-aea6-770cd3ac60a6"}

Как обойтись без UX-редактора и сделать текст в интерфейсе понятным?

Илья Кретов, старший дизайнер в «Звуке»

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

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

Но бывает и такое, что в команде нет UX-редактора и работу с текстом приходится брать в свои руки. Для таких случаев я решил поделиться своими принципами при работе с текстом и практиками ведущих UXW-специалистов (Кира Калимулина из Ozon, Саша Вельянинова из Райффайзен и Софья Львова из билайна), которые помогут вам самостоятельно проверять текст на качество

  • Точки
  • Кавычки
  • Дефис, тире и длинное тире
  • Буква «ё»
  • Пробел
  • Минус и знак процента
  • Восклицательный знак
  • Капслок
  • Заголовки и подзаголовки
  • Кнопки
  • Канцеляризмы
  • Гендерная нейтральность

  • Эмоциональная нейтральность

  • Дубликаты текста

  • Адаптивность

  • Правдивость
  • Безконтекстность

Не ставим точку в конце одного предложения

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

Но ставим точку в конце абзацев, если их больше 2

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

Кавычки

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

Дефис, тире и длинное тире

Дефис — в словах и сокращениях

• Для присоединения префиксов (во-первых, по-французски)
• Для присоединения частиц (как-то, почему-то, зачем-то)
• В словосочетаниях и для сложносоставных словах (бизнес-аккаунт, премиум-сегмент)
• В составных названиях (Санкт-Петербург, Ростов-на-Дону)

Тире — в диапазонах

• Для обозначения диапазонов дней недели (понедельник – воскресенье)
• Для обозначения диапазонов чисел (2020 – 2021, 300 – 400)

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

Символ [ – ]

Тире на macOS: Opt+Дефис
Тире на Windows: Alt+0150

Длинное тире — в предложениях

• Вместо отсутствующего слова (Вам — музыка и хорошее настроение)
• Между подлежащим и сказуемым (Твой план — быть собой)
• Чтобы подчеркнуть мысль и сделать паузу (Качайте — и слушайте)
• При перечислении в маркированных списках

Символ [ — ]

Длинное тире на macOS: Shift+Opt+Дефис
Длинное тире на Windows: Alt+0151

Буква «ё»

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

Пробел

Неразрывный пробел

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

Неразрывный пробел на macOS: Shift+Opt+Space
Неразрывный пробел на Windows: Alt+0160

Узкий пробел

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

Минус и знак процента

Не ставим пробел между цифрой и минусом. Используем именно знак минуса, а не дефис. Аналогичное правило работает со знаком процента: между ним и числом пробел не нужен

Символ [ − ]

Восклицательный знак

Если в тексте много восклицательных знаков, он выглядит громким, кричащим и неприятным для восприятия. Мы применяем восклицательный знак только там, где это действительно необходимо и соответствует тональности: в поздравлении, благодарности, приветствии или пожелании. Используем восклицательный знак осознанно и в меру без многочисленных повторений

Капслок

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

Заголовки и подзаголовки

У людей нет, ни времени, ни желания читать экраны. Поэтому в заголовке должна быть отображена понятная суть. А подзаголовок должен быть продолжением заголовка и раскрывать его

Кнопки

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

одобряющие: «Хорошо», «Понятно», «ОК»
требующие действия: «Подключить», «Создать», «Забрать»

Если у вас в команде любят заигрывать с Conversational Design (когда на кнопках вместо «Подключить» пишут «Да, хочу!»), пристально следим, чтобы кнопка всегда была рядом с заголовком иначе с большой долей вероятности смысл будет потерян

Канцеляризмы

Общаемся как человек с человеком без сложных слов, канцеляризмов, сложноподчинённых оборотов, вводных слов, чтобы текст стал более доступным и интуитивно понятным. Использование сложных формулировок может создать путаницу и затруднить восприятие информации

Гендерная нейтральность

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

Эмоциональная нейтральность

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

Дубликаты текста

Не дублируем текст без весомой причины. Например, в формах ввода сама форма ввода уже заменяет глагол «введите»

Адаптивность

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

Правдивость

Не обманываем ложными формулировками даже в мелочах. Человек ждёт того, что мы ему обещаем

Безконтекстность

Элементы на экране должны проходить тест на новичка и быть понятны без контекста. Стараемся строить интерфейс на именительных падежах

Заключение

Данные рекомендации помогут вам улучшить текст в интерфейсе, но не заменят работу опытного UX-редактора. Ведь UX-редактор – это специалист, который обладает глубокими знаниями в области UX-дизайна, лингвистики и психологии.

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

Понравилась статья?

Ищи больше в моём телеграмм-канале. Активно его веду и постоянно выкладываю что-то интересное для самых близких

0
22 комментария
Написать комментарий...
Виктор Мельников

Хорошие карточки вышли :)

Ответить
Развернуть ветку
Илья Кретов
Автор

спасибо

Ответить
Развернуть ветку
imdeza

Да это же базовые вещи для дизайнера, они есть в любой шпаргалке редполитики.

Другое дело, если бы внесли сюда что-то свежее:
Например вместо архаичного примера со вложенными кавычками, рассказали бы почему пишете Билайн без кавычек, и это современная норма.
Либо как те же правила перенести на английскую типографику: например "отбивать тире пробелами — это ошибка", рассказать о Title Case в UI и т.д.

Ответить
Развернуть ветку
Илья Кретов
Автор

Сейчас пишем большую статью про процессы в продуктовой команде и одним из этапов там идёт работа с текстом, как обязательный пункт для дизайнера перед тем, как приступать к юзабилити-тестированию. Решил вычленить этот этап и запостить сюда

Ответить
Развернуть ветку
imdeza

Для лучшего восприятия можно попробовать разбить эти пункты на группы: например от "страшного греха дизайнера" до "ты молодец, а вот эти нюансы со звёздочкой".
В целом хороший ориентир (что можно еще добавить, не перечитывая Ильяхова) это гайды госуслуг, а из зарубежных polaris (тоже масса полезного).

Ответить
Развернуть ветку
imdeza

Кстати, с аналогичными карточками у нас была рассылка в чат на всю компанию — по 1 карточке в день для лучшей усвояемости)

Ответить
Развернуть ветку
Илья Кретов
Автор

А вы из какой компании? Спасибо, я подумаю над этим

Ответить
Развернуть ветку
imdeza

В данный момент не из какой) А тот пример с карточками в доче Сбера был.

Ответить
Развернуть ветку
Илья Кретов
Автор

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

Ответить
Развернуть ветку

Комментарий удален автором поста

Развернуть ветку
Дарья Ронжина

Статья хорошая!
Но соглашусь с комментами про базовые вещи. Очень похожие карточки почти с такими же правилами выпускала редакция Райффайзен.

Вот про вашу внутреннюю ux-кухню точно будет интересно почитать :)

Ответить
Развернуть ветку
Илья Кретов
Автор

К сожалению я не видел карточки Райфайзена (если бы вы поделились, то я бы с удовольствием почитал)

Я не буду называть себя легендарным копирайтером и уверен на просторах VC есть более опытные специалисты в этом деле. Я сам учусь писать, нарабатываю практику

Надеюсь на моём дизайнерском пути ещё представится случай выложить статью про текст с инсайтами, а пока будь как будет

Спасибо за обратную связь

Ответить
Развернуть ветку
Дарья Ронжина

Вот тут можно глянуть: https://clck.ru/39gdnN

Написано хорошо, всё по делу. Просто в сообществе уже многие писали такие гайды и правила в них примерно одинаковые. Но всё приходит с практикой, желаю скорейшего вдохновения на инсайты!

Ответить
Развернуть ветку
Илья Кретов
Автор

Благодарю

Ответить
Развернуть ветку
Дмитрий Каламарка

В принципе, многократно повторяется из рекомендаций в рекомендации, но люди все равно идут по граблям своим путём.
А вот вопрос интересный - Если в русском интерфейсе используется кнопка ОК, то что за язык подразумевается? И как эту кнопку нужно показывать в документации - в кавычках, как все другие кнопки на русском или без кавычек, предполагая, что мало того, что использованы заглавные буквы, да еще и английские?
Есть опыт в таком вопросе?

Ответить
Развернуть ветку
Илья Кретов
Автор

Я бы сказал, что кнопка должна быть зарифмована с заголовком. Без контекста «Ок» не несёт в себе никакого смысла. Интересно было бы посмотреть в каком случае вы её используете. Я же предпочитаю использовать «Понятно». Звучит чуть более эмоционально-нейтрально

Ответить
Развернуть ветку
Дмитрий Каламарка

В приложениях Windows кнопка ОК применяется повсеместно. Было бы странно в интерфейсе условного Автокада видеть подпись на кнопке "Понятно". Что понятно? Кнопка ОК в прямом кейсе означает принятие и запись изменений, произведенных в окне и закрытие окна. Вопрос был - как оформить правильно упоминание этой кнопки в документации

Ответить
Развернуть ветку
Илья Кретов
Автор

О какой документации вы говорите? Документация для передачи в разработку?

Ответить
Развернуть ветку
Дмитрий Каламарка

О пользовательской, конечно. А по поводу кнопки ОК, посмотрите ui в программах вас окружающих, там все в океях. И при разработке ПО на том же qt в gui-шаблоне там в полный рост ОК. А в приведенной статье так и раскрыта тема, неаргументировано. Я ее читал несколько лет назад.

Ответить
Развернуть ветку

Комментарий удален автором поста

Развернуть ветку

Комментарий удален автором поста

Развернуть ветку
Kuban Animator

Терпеть не могу, когда не ставят дефис там, где нужно ставить (к примеру, "онлайн школа" вместо "онлайн-школа"). Это большая проблема многих дизайнеров и маркетологов...

Ответить
Развернуть ветку
Илья Кретов
Автор

для этого и обучаем <3

Ответить
Развернуть ветку
Сервелат

Вам бы и копирайтера сменить, статья как каша малаша выглядит

Ответить
Развернуть ветку
Илья Кретов
Автор

У меня нет копирайтера, я только учусь писать лонгриды. Прошу прощения, что не оправдал ожиданий

Ответить
Развернуть ветку

Комментарий удален автором поста

Развернуть ветку
19 комментариев
Раскрывать всегда