Бесплатная школа UX/UI-дизайна с наставником

Текст интерфейса: влияние на пользовательский опыт

Автор статьи:
,

Введение

Текст в UX-дизайне — это основное средство коммуникации между продуктом и пользователем.

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

Что такое UX-копирайтинг

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

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

Психология взаимодействия с контентом

Понимание того, как пользователи воспринимают текстовый контент и взаимодействуют с ним, является важнейшим аспектом эффективного UX-дизайна. Текст — это основное средство общения с аудиторией. Если текст не сможет привлечь пользователей или передать правильные смыслы, пострадает весь пользовательский опыт.

Люди обладают развитыми навыками, позволяющими им сканировать текст, быстро улавливать смысл и оценивать важность информации. Исследования показывают, что человеческий мозг может обрабатывать текст всего за 100-200 миллисекунд. Столь быстрое восприятие подчеркивает необходимость создания лаконичного и убедительного текста, чтобы привлечь внимание пользователей.

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

asana.com

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

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

Общие принципы UX-копирайтинга

Текст веб-продукта должен отвечать следующим базовым критериям: он должен быть понятным, лаконичным, полезным и логически последовательным. Чтобы добиться этого следует придерживаться следующих принципов UX-копирайтинга:

1. Ставьте пользователя на первое место.

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

2. Делайте акцент на ясности.

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

3. Ориентируйтесь на цели.

Каждое слово, предложение и блок текста должны служить определенной цели, особенно если их цель — направить пользователя на целевое действие. Убирайте все лишнее и отвлекающее.

4. Определите tone of voice.

Текст может вызывать у пользователей самые разные эмоции, это напрямую влияет на их впечатления от взаимодействия с продуктом. Создайте руководство по ToV, которое определит тон и индивидуальность, которые должен передавать текстовый контент. Правильно подобранный стиль может создать комфортную атмосферу, которая повысит удовольствие от использования сервиса. Например, сообщение «Вы совершили ошибку» можно заменить следующим вариантом: «Что-то пошло не так. Пожалуйста, попробуйте еще раз».

5. Создайте текстовый опыт.

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

Типы текста в интерфейсе

В UX-дизайне существует несколько основных типов текста, каждый из которых выполняет свою функцию:

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

Mastercard — website redesign. Cергей Егоров ученик UPROCK

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

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

rtlq.ru

Основной текст

phq.nz

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

Кнопки призыва к действию

giga.game

Текст на кнопках призывает пользователя к действию: «Подписаться», «Узнать больше» или «Купить». Важно, чтобы он был кратким, четким и точно передавал необходимую информацию.

Вспомогательный текст

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

Советы по созданию текста интерфейса

Как можно раньше внедряйте реальные тексты в пользовательский интерфейс

Работая над ранними версиями пользовательского интерфейса, UX-дизайнеры обычно используют так называемый Lorem Ipsum. Это своего рода популярный текст-заготовка, который ничего не значит. Его цель – создать естественно выглядящий текст в макете веб-страницы, экрана мобильного устройства, страницы журнала или газеты и т. д. Когда вы глубоко погружаетесь в процесс проектирования, возникает соблазн просто вставить этот бессмысленный текст в места, запланированные для текстовых блоков. Почему это не очень хорошая идея?

Во-первых, текст — это часть дизайна. Различные сочетания букв выглядят по-разному. Слова имеют разный объем и структуру. Поэтому то, что радует глаз в Lorem Ipsum, может не сработать с реальным текстом, который будет использоваться на странице.

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

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

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

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

Использование стиля перевернутой пирамиды для подачи контента может значительно облегчить восприятие. Сначала демонстрируется самая важная информация, затем следуют важные детали, а в конце — справочные данные. Все элементы текста должны быть организованы в соответствии с типографической иерархией, чтобы, сканируя страницу или экран, пользователь мог быстро понять, какая часть несет основное сообщение, а какая менее важна. Также желательно, чтобы текст гармонично сочетался с ключевыми изображениями на странице или экране (иллюстрациями, фотографиями, 3D-изображениями и т. д.). Такая структура помогает пользователям быстро уловить основные моменты.

BRABUS, Татьяна Стребкова ученица UPROCK

Обеспечьте читабельность текста

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

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

Самарская область на ВДНХ, Андрей Меркулов ученик UPROCK

Привлекайте внимание с помощью цифр

В одном из исследований поведения пользователей, проведенных Nielsen Norman Group, был сделан интересный вывод: по результатам исследований с помощью трекинга глаз, когда пользователи сканируют веб-страницы, цифры часто останавливают блуждающий взгляд и привлекают внимание, даже если они встроены в массу слов, которые пользователи игнорируют. Люди подсознательно ассоциируют цифры с фактами, статистикой, размерами, расстоянием — с чем-то потенциально полезным для них. Поэтому они цепляются за цифры, включенные в текст, в то время как слова, обозначающие цифры, могут быть пропущены в основной массе текста. Кроме того, что бы ни представляли собой цифры, они более компактны, чем их текстовый вариант, что позволяет дизайнерам сделать контент лаконичным и экономить время на пролистывание данных.

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

BASF, Татьяна Милованова ученица UPROCK

Проводите A/B-тестирование текста интерактивных элементов

Текст кнопок — одна из важнейших частей пользовательского опыта: если вы не занимаетесь UX-дизайном и написанием текстов, то можете удивиться, как много времени и усилий нужно уделять этим маленьким, но влиятельным элементам макета. То, что написано на кнопке, должно направлять пользователей к действию и давать им понять, что произойдет дальше. Поэтому наряду с тестированием таких дизайнерских решений, как цвет, расположение или размер кнопки, рекомендуем сделать текст надписи на кнопке еще одним объектом A/B-тестирования. Особенно если вы не входите в основную целевую аудиторию. Например, вы создаете продукт для пожилых людей с низким уровнем технической грамотности. Тестирование даст вам понимание того, как реальные пользователи воспринимают кнопку и какой текст для них более убедителен.

Избегайте сленга

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

Ошибки при написании текста интерфейса

Текст не доносит причину ошибки

Повторения

Слишком много текста

Избыток канцеляризмов

Источник

Текст плохо читаем

Заключение

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

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