Копирайтинг для интерфейсов: типы текста для веб-продуктов и мобильных приложений
Алеся Виноградова, руководитель направления социальных сетей и копирайтер, перевела статью диджитал-агентства Tubik Studio о типах текста, встречающихся в интерфейсах, для блога «Нетология.
Для создания хорошего пользовательского интерфейса одинаково важны как визуальные компоненты, так и текст. И это не обязательно большие блоки текста на сайтах или подробные посты в блогах. В этой статье мы разобрали основные типы текстов пользовательского интерфейса на примерах.
Что такое UI-копирайтинг?
Копирайтинг для веб-интерфейсов и мобильных приложений предполагает создание текстового контента больших и малых объемов. В интерфейсе каждое слово является важной частью дизайнерского макета, так как играет роль во взаимодействии пользователя с продуктом. Эту работу также можно назвать UX-райтингом или UX-написанием текстов, так как текст для интерфейсов всегда основан на пользовательском опыте (user experience, UX).
Правильный контент улучшает приложения и веб-сайты, делая их более удобными для пользователя, что побуждает людей больше взаимодействовать с интерфейсом.
Чтобы писать качественные тексты для интерфейсов, дизайнеру необходимо приобрести дополнительные навыки и знания, ведь это не так просто, как кажется.
В этой статье мы поговорим о различиях типов текстов для интерфейсов и поделимся советами по их созданию.
Целевая страница с различными типами текста
Информационный текст
Заголовок — это слово или фраза, которую пользователи первым делом видят в интерфейсе. Заголовки содержат ключевую информацию страницы, они должны быть запоминающимися и краткими, чтобы быстро привлечь внимание. Результаты исследования, опубликованного платформой Buffer, показали, что идеальная длина заголовка — 6 слов.
Помимо размера, чрезвычайно важную роль в названии играет смысл. Его задача не только привлечь внимание, но и информировать пользователей о содержании страницы или экрана. Чтобы усилить смысл, полезно подкрепить заголовок визуальными элементами, например фотографиями.
Подзаголовок — это одно или несколько небольших предложений, которые помогают читателю быстро понять, насколько ему интересна тема. В то время как заголовок содержит только основную идею, подзаголовок раскрывает ключевые идеи разделов страницы.
Чтобы создать визуальную иерархию, подзаголовки должны быть меньше заголовков, но больше основного текста страницы — выберите подходящий размер шрифта и сделайте подзаголовки жирным шрифтом. В этом случае даже беглый взгляд позволит читателю «зацепить» взглядом и понять основной посыл текста.
Заголовки и подзаголовки оформлены разными шрифтами и размерами для лучшей визуальной иерархии
Это текст с описанием товара или другой ключевой информацией — к чему ведет смысловая подводка из заголовка и подзаголовка. Традиционно основной текст пишется мелким тонким шрифтом, иногда курсивом для визуального контраста с заголовками.
Что касается объема текста, то здесь нет строгих канонов.
Одни авторы утверждают, что длинные тексты более серьезны и информативны, другие считают, что действительно работают только короткие тексты, потому что пользователи не хотят много читать. Оба взгляда верны лишь отчасти, поскольку размер текста определяется его целями и целевой аудиторией. У пользователей очень разные цели и предпочтения, на которые обращаются веб-ресурсы и мобильные приложения с разным интерфейсом и объемом текста.
Короткий текст будет уместен в пользовательском интерфейсе мобильных приложений и лендингов, где информацию нужно доносить кратко и понятно. Кроме того, мобильные интерфейсы ограничены в пространстве, места для полотен с текстом просто нет.
Длинный текст подходит, когда пользователям нужна подробная информация по определенной теме или для презентации нового продукта, где нужно максимально раскрыть его возможности и преимущества.
Блок с основным текстом выделен мелким курсивом
Текст для элементов интерфейса
Подпись — это короткий текст, описывающий иллюстрацию, к которой он относится. Хорошая подпись содержит точные данные, помогающие пользователям понять, что они видят на изображении. При этом важно, чтобы подпись содержала новую информацию, а не отсылала очевидные вещи, которые уже видны на изображении. Выбирайте тон подписи, соответствующий характеристикам целевой аудитории, и не забывайте указывать автора, если используете материалы из других источников.
В веб-интерфейсах для заголовков используется мелкий, часто курсивный шрифт; мобильный интерфейс использует размеры шрифта в зависимости от размера изображения.
Дизайн экрана мобильного приложения в Figma (веб-принципы в мобильном приложении)
Пример подписи
Кнопка призыва к действию — кнопка CTA
Текст такой кнопки должен рассказывать, что происходит после нажатия на нее. Оно должно быть коротким, 1-2 слова, чтобы быстро привлечь внимание пользователей и побудить их к действию. Несколько хорошо подобранных слов работают лучше, чем целое предложение. Кроме того, кнопка должна выделяться среди других элементов страницы. Для этого используйте яркие цвета и сделайте кнопки большими.
Призыв к действию меняется в зависимости от содержимого страницы
Уведомления — это короткие сообщения, информирующие пользователя о текущей активности на сайте. Текст уведомления должен быть коротким, четким и содержать только важную информацию, чтобы быть полезным и не раздражать пользователей. В уведомлении важно правильно подобрать тон сообщения, который будет соответствовать общему имиджу бренда.
Пример краткого уведомления о просадке
Сообщение об ошибке
Ошибки — неизбежная часть цифровой системы. В случае возникновения каких-либо ошибок важно предоставить пользователю информацию о том, что произошло и что необходимо делать дальше.
Сообщение об ошибке — это короткий текст, который отображается, если что-то пошло не так. Чтобы пользователям было легко определить проблему и свои дальнейшие действия, сделайте текст сообщения понятным и удобным. Постарайтесь быть вежливым и дружелюбным, чтобы люди не нервничали по этому поводу. Капелька юмора поможет снизить уровень раздражения, но шутки нужно выбирать тщательно, чтобы они были точно к месту и понятны пользователю.
Чтобы повысить эффективность сообщения об ошибке, поместите его рядом с элементом пользовательского интерфейса, с которым оно связано.
Красиво оформленное сообщение об ошибке 404
Копирайтинг с чего начать | Топ-3 биржи для копирайтеров | Сколько зарабатывают копирайтеры
Текст для онбординга
Онбординг часто используется, чтобы помочь пользователю познакомиться с продуктом. Как правило, страница появляется при первом запуске веб-сайта и знакомит пользователей с новыми функциями и элементами управления. С помощью онбординга вы также можете повысить мотивацию пользователя к постоянному использованию продукта.
Онбординговый текст обычно короткий, но лаконичный и описывает преимущества продукта. Основная задача такого текста — вовлечь пользователей. Поэтому тексты содержат только центральные неочевидные советы. В текстах для онбординга лучше использовать повелительное наклонение, чтобы уменьшить количество «воды».
Регистрация в приложении для путешествий
Меню являются основным навигационным компонентом любого пользовательского интерфейса. Меню различаются по типу размещения (боковые меню, меню в шапке или футере сайта), по внешнему виду и способам взаимодействия (прокручивающееся, выдвигающееся снизу или сбоку).
Хотя существуют разные типы меню, для каждого из них требуется текст — краткий список состоящих из одного слова команд «отправить», «сохранить» или «загрузить», указывающих действия, доступные пользователю. Если меню представляет собой список категорий контента и разделов страницы, в названиях элементов используются существительные для более четкой навигации.
Блок меню в мобильном приложении
Подсказки — это ярлыки, которые появляются при наведении или касании элемента интерфейса. Их задача — предоставить краткую информацию о назначении компонентов страницы.
Поскольку они служат полезной инструкцией, а не отвлекающим сообщением, текст всплывающей подсказки также часто используется в повелительном наклонении, чтобы не отвлекать пользователя. Практика показывает, что короткие подсказки работают лучше, поэтому мы рекомендуем уменьшить количество символов до 150. Если текст нельзя сократить, разбейте его на несколько меток.
Информационные электронные письма уведомляют вас о текущем состоянии продукта и учетной записи пользователя. Например, они напоминают вам об активации вашей учетной записи или сообщают вам об обновлениях приложения.
Такие письма можно разделить на несколько типов.
- Активационное письмо — автоматическая отправка для подтверждения адреса электронной почты при регистрации пользователя. Такие электронные письма обычно состоят из короткого приветствия и активной ссылки на учетную запись.
- Приветственное сообщение — это следующий шаг во взаимодействии с пользователем после регистрации. Помимо приветствия, такие письма содержат основную информацию об условиях использования продукта и краткий список преимуществ.
- Предупреждения безопасности — это уведомления о любых подозрительных действиях в учетной записи пользователя: изменение имени пользователя и пароля, добавление или изменение личных данных, вход с неизвестных устройств. Эти электронные письма помогают защитить учетные записи пользователей.
Электронная почта в информационном бюллетене продукта должна:
- иметь четкий заголовок, чтобы пользователи не пропустили важное уведомление;
- содержать цель письма и инструкцию дальнейших действий для пользователя;
- обращаться к пользователю по имени, чтобы подчеркнуть важность письма;
- иметь тон общения, основанный на исследованиях пользователей.
Текст — важный элемент в цепочке взаимодействий в пользовательском интерфейсе. Каждое слово должно быть тщательно подобрано, чтобы соответствовать общей концепции дизайна и положительному пользовательскому опыту продукта.
Мнения автора и редакции могут не совпадать. Хотите написать колонку для Netology? Ознакомьтесь с нашими условиями публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Telegram-каналу Netology.
Мы рады приветствовать вас на страницах нашего сайта quality21.ru — надеемся вам понравилась эта статья и вы поделитесь ею в социальных сетях!