Принципы коммуникации материала: введение в UX-письмо

1. Прежде чем начать

Ознакомьтесь с рекомендациями Material Design по коммуникации !

d226b95944e2d78.png

Четкое и лаконичное изложение текста играет важную роль в качестве пользовательского опыта. Ознакомьтесь с рекомендациями Material Design по написанию UX-текстов и начните применять принципы создания UI-текстов, которые помогут вашим пользователям достичь желаемого.

А вы знали, что раздел «Коммуникации» на Material охватывает гораздо больше, чем просто UX-тексты? Ознакомьтесь с темами, начиная от визуализации данных и заканчивая адаптацией новых пользователей и шаблонами пустого состояния .

Думайте как писатель!

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

Что вы узнаете

  • Что такое UX-копирайтинг и почему он важен
  • Как определить правильный тон и манеру речи в разных ситуациях
  • Особенности написания, специфичные для каждого компонента.
  • Ресурсы для дальнейшего обучения

Что вам понадобится

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

Предварительные требования

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

Ориентирован на английский язык, но пригоден для широкого круга читателей.

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

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

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

616b22e303cb0bee.png

Обзор

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

Мышление в стиле UX-писателя может повысить эффективность выполнения задач, удовлетворенность пользователей и общее удобство использования!

Чем отличается UX-копирайтинг?

UX-копирайтинг — это написание текстов для реальных людей.

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

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

Стиль

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

При написании текстов для приложений и интерфейсов используется менее формальный тон по двум основным причинам:

  • Онлайн-общение менее формально, чем печатное или академическое письмо.
  • Текст пользовательского интерфейса ограничен пространством экрана; длина символов ограничена.

26cdd98cb56e8ee0.png

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

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

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

Пишите так, как люди читают.

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

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

7476a332db7c2adc.png

Примеры отслеживания движений глаз из онлайн-исследований особенностей чтения. Изображение и исследование взяты с сайта nngroup.com (2006; 2017) .

Тестирование

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

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

Подходы

Просто и недорого

  • Прочитайте написанное вслух. Похоже ли это на то, что вы сказали бы реальному человеку? Если нет, попробуйте переписать.
  • Попросите кого-нибудь прочитать ваши слова и объяснить, что, по его мнению, они означают.
  • Проведите опрос нескольких человек, используя примеры вашего текста в контексте пользовательского интерфейса.
  • Используйте Google Trends или Google Books Ngram Viewer, чтобы узнать, встречается ли то или иное слово или фраза чаще, чем другое.

В масштабном контентном тестировании используются эвристические методы, такие как:

  • Понимание и читабельность
  • Завершение задачи и время, затраченное на выполнение задачи.
  • Оценка тона и восприятия

3. Принципы

968920a2b1c680f8.png

Обзор

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

Руководящие принципы позволяют нескольким людям принимать более согласованные решения в группе.

Будьте краткими, но не роботизированными.

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

e97ed7c661869cc0.png

Пишите просто и прямо

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

dd7091938a1f6486.png

Обращайтесь к пользователям четко

В английском языке обращение ко второму лицу (you или your) часто более прямолинейно и ясно. Обращение к первому лицу (i, me или my) может использоваться, когда необходимо подчеркнуть принадлежность.

Использование местоимений «вы» и «ваш» — более прямые способы обращения к пользователю.

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

d849a5f73510661f.png

Избегайте сочетания первого и второго лица.

Во избежание путаницы, слова «me»/«my» и «you»/«your» не должны употребляться в одной фразе.

462745d0da4c1c68.png

Сообщите основные детали.

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

691f2e5233fc0a60.png

4. Голос и тон

Обзор

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

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

Когда над текстом для продукта работает несколько человек, рекомендации по тону и стилю могут помочь обеспечить выбор слов с учетом общего смысла и цели .

765203f936d1b440.png

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

Что такое голос и тон?

Голос должен оставаться неизменным на протяжении всего опыта, в то время как тон зависит от контекста и может меняться.

Голос

Голос — это настроение, отношение или точка зрения, передаваемые в процессе взаимодействия с продуктом . Это один из аспектов «личности» бренда, позволяющий человеку понять, как «звучит» продукт.

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

Вот несколько распространенных примеров принципа голоса:

  • Полезно : Пишите как человек, а не как машина. Объясняйте ошибки и предлагайте решения.
  • Доступность : Сделайте текст легко понятным для любого нового пользователя. Убедитесь, что технические или сложные термины объяснены или заменены.
  • Вдохновляющий подход : Подчеркивайте преимущества и достижения на протяжении всего опыта. Излагайте цели и результаты в позитивном, активном ключе.

Тон

Тон вашего письма передает настроение и эмоции, независимо от того, намереваетесь вы это сделать или нет .

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

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

Почему это важно

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

Создайте карту тонов.

Карта тональности помогает спланировать и задокументировать стратегию корректировки голоса и тембра.

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

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

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

1. Сначала выберите два измерения или спектра, которые могут представлять диапазон желаемого вами тона.

Вот несколько идей для определения ключевых моментов в стиле UX-текстов:

  • Игривый против серьезного
  • Краткость против подробности
  • Эмоциональный против нейтрального
  • Неформальный подход против жесткого подхода

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

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

37ee5409f8d0ca13.png

3. Далее перечислите типы сообщений или шаблоны , которые вы часто используете. К типам сообщений, которые вы можете сопоставить, относятся:

  • Ввод в должность
  • Подтверждение и подтверждение
  • Помощь и обратная связь
  • Ошибки
  • Уведомления
  • Метки
  • Пустые состояния

4. Разместите каждый тип сообщения на карте относительно обеих осей.

Следует учитывать следующие моменты:

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

5. Завершенный пример

Ниже приведен пример типов сообщений, расположенных в соответствии с типичными сценариями использования приложений.

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

ba35da42583637a8.png

5. Структура контента

968920a2b1c680f8.png

Обзор

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

Начните с целей.

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

6a3d1b6c30188235.png

При необходимости раскрывайте подробности.

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

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

84109125e1570bab.png

Доступный дизайн контента

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

Видимый и невидимый текст

В текст, обеспечивающем доступность, включено:

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

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

Альтернативный текст (alt text)

Альтернативный текст помогает преобразовать визуальный пользовательский интерфейс в текстовый. Альтернативный текст — это короткая метка (до 125 символов) в коде, описывающая изображение для пользователей, которые не могут его увидеть.

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

a327ec11a8a08a4d.png

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

8690cba70c572908.png

6. Выбор слов

Обзор

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

Пишите для всех уровней чтения

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

7938ae9f12f98a8.png

Без профессионального жаргона

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

a3ea0ee65129dac8.png

Используйте последовательные слова

Используйте слова в единообразном порядке во всех элементах пользовательского интерфейса.

ba6c4e76345c54e5.png

Пишите в настоящем времени.

Используйте настоящее время для описания поведения продукта. Избегайте использования будущего времени для описания того, как продукт всегда себя ведет.

При написании предложений в прошедшем или будущем времени используйте простые формы глаголов.

3125e74655e15f6a.png

Обозначения элементов пользовательского интерфейса и средств управления приводятся по меткам.

Метки определяют функцию элемента управления. Они располагаются либо на самом элементе управления, либо рядом с ним, например, текст на кнопке или переключателе. Чтобы сослаться на элемент управления пользовательского интерфейса, используйте текст метки (не указывайте тип элемента или элемента управления).

5d752db3ba472c6f.png

Сообщите важные детали.

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

cf1825fb95e0cbcb.png

Основные выводы

  • Пишите для всех уровней чтения
  • Используйте слова последовательно, а не ради новизны.
  • Настоящее время
  • Используйте цифры

7. Написание кода для компонентов

f0434663c3f3ed39.png

Обзор

Компоненты Material Design имеют определённое предназначение в пользовательском интерфейсе, и написание кода для конкретных компонентов может подкреплять это предназначение.

Для этих компонентов на Material.io доступны рекомендации по написанию кода:

Диалоги

Диалоги используются для:

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

Компонент

Приоритет

Действие пользователя

Закусочная

Низкий приоритет

Снэк-батончики исчезают автоматически.

Баннер

Важный, средний приоритет

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

Диалог

Наивысший приоритет

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

Названия

Назначение диалогового окна должно быть указано в его заголовке и тексте кнопки.

Заголовки должны содержать краткое и ясное утверждение или вопрос.

6081893091a2e0d3.png

Снэк-бары

В батончиках Snackbar содержится текстовая метка, непосредственно связанная с выполняемым процессом. На мобильных устройствах метка может содержать до двух строк текста.

5152d51fe7a77698.png

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

fbb75c8e3393cd6.png

8. Объедините все это в матрицу контента.

Обзор

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

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

Создание контентной матрицы

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

Цель контентной матрицы — помочь вам определить и задокументировать, как любое сообщение связано со следующими элементами:

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

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

  • Принципы тона и голоса
  • Типы компонентов

Наконец, матрица контента может включать список слов:

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

Не забудьте:

  • Заменить или определить технические термины
  • Используйте наиболее распространенное слово для обозначения действия или существительное.

9. Дополнительные темы и ресурсы (необязательно)

Обзор

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

Ресурсы

10. Поздравляем!

Отличная работа! Вы на верном пути к созданию понятного и впечатляющего текста для пользовательского интерфейса!

46fad4a7c10dd9f7.png