【UX Writing】UI Copy设计入门（方法篇）

序

一年多没更新了。这期间公司发生了很多变化：2022年10月公司决定退市与私有化，随之而来的是，一系列减员节支操作--美国英国非核心部门全部裁员，然后是在印度招人回填；这其中就包括了IX （文档部门）。到23年5月基本美国的IX同事都走的走，转部门的转部门。也就是从5月开始，印度backfill陆续到位。现在，我所在CVAD Core产品线，共入职了6位新同事。

所幸，NJ业务未受影响，而且还有所扩张。但是，小J同学3月决定转岗做PM，他的backfill只在印度招人。小J以前是一个重要项目的IX lead（包括他、我、美国三位同事参与）。一系列变化之后，我从这个项目的participant角色，转变为lead角色。面对新加入的两位毫无domain  knowledge的印度同事，我要肩负tutor的角色，手把手教他们熟悉流程、写作规范，作为peer reviewer，保证项目文档质量...与此同时，我还是另个两个项目的Independent Contributor。每日的忙碌让我严重质疑当初换工作的决定，身体透节严重。 同时，IX印度化的趋势，也让我琢磨不透新来的印度Manager的心思。最近一点想通了， don't bite off more than as you can chew。尽力把基本队伍培养起来，然后做回IC吧。

UX  Copy Design是我工作中重要的一块。通常在业内，UX Desinger与Technical Writer是两个不同的职位。但以前公司这两块都是由IX部门负责。新来的印度同事，都是TW出身，对UI Copy Design一脸蒙圈，完全没有章法。翻看我以前的blog，我也是从21年底开始慢慢接触这块的工作。一路在学习与实践的路上走了快两年，从理论与实践上都积累了一些经验。我打算借写blog，结合一些设计实例，介绍UX Design的方法步骤，以及常用的工具。

准备工作

拿到PD（UX DESINGER）的设计（比如Figma）的同时，把Engineer JIRA TICKET中的Description仔细阅读，理解EPIC的设计意图。

FIGMA初稿是 PD经过与 Feature owners几轮讨论后，提供的UI设计与文字的初稿（这一过程涉及反复沟通，IX通常不参与）。在了解了EPIC context后，带入用户视角，体验UI设计的可用性。如果觉得设计有不合理之处，及时与PD与Feature Owner讨论，修正UI设计。

示例：待提供

四段法优化文字设计

UI String需要满足以下4个终极目的：

-  Purposeful

-  Concise

-  Coverstational

-  Clear

对于经验不是很丰富的IX，可以试着从4个设计目的为步骤，逐步展开UI String的设计优化过程。

Phase I： Purposeful

在这一阶段，追求的是文字做到meet all purposes。暂且不管文字长度，不追求小而精。

Purposeful come in two dimensions:

-  purposeful for the users: 用户通过UI Copy达成哪些目的。基于这些目的，我们可以设计多个版本的文字信息。

  了解用户操作目的是关键，作为TW，

  1. 仔细研读epic description，了解这个feature的设计意图，使用场景，UI用户操作方法。

  2. 带着步骤1中产生的问题，与feature owner做充分沟通。

  3. 用文字把使用场景描述清楚。

-  Purposeful for the organization：比如提高用户粘合度，减少运营支撑部门成本。

尽量减少出现“Please contact your administrator to resolve the problem.”这样的表达。尽力挖掘问题的各种solutions，让用户能自己解决出现的问题。

Phase II: Concise

Users don't read UI text they scan it. 试着想想我们自己在操作手机淘宝APP，面对弹出的Pando提示，看到长一点的文字，我们是不是几乎直接忽视。按微软设计概要所述：Users tend to read control labels first, especially those that appear relevant to completing the task at hand. By contrast, users tend to read static text only when they think they need to.

所以文字一定要短，要字数小，便于scan---对于英文 message而言，通常要少于3行，宽度小于40个字符。如果英文翻译成其它语言，长度可能会增加1/3。

Additionally, in UI text, concisely communicate the essential information. If more information is necessary for some users or some scenarios, provide a link to more details.
示例：
左侧为原设计，右侧为我的设计。
Highlights:
1. 添加：Benefits for enabling and configuring write-back cache；并提供一个learn more link to direct users to user documents for details.

2. 原Information message太长。经过分析，前一句是可以通过UI design让用户感受到这两类cache间的联动， 因而没有必要用文字描述，删除这一句。

2‘ 在Memory cache是一个optional but recommended setting，这个信息很重要，让其显性化。

示例

Methodology

Editing for conciseness is a process of winnowing down phrases to their core meanings.

Then, try out different sequences to find the ones that are briefest and easiest to understand. Four sequences to start:

-  Start with the imperative verb.
-  Start with the purpose users might recognize. E.g. To do something, XXX.
-  Start with the context. E.g. Context: XXXX
-  Start with an emotional motivator. E.g.: Alerts: XXXX

Tips:

When three or more ideas must appear in the same sentence, it tends to be the last word or idea that will be the most powerfully remembered.

Rule 18: Place the emphatic words of a sentence at the end.
--【学习笔记】必须烂熟于心的十条 English Writing规则

Phase III Conversational

无论是技术文档写作还是界面string创作，都有一条就是：

Use everyday words you can, and avoid formal language you wouldn't use when speaking to someone in person.

When making the UX text conversational, we might still be making radical changes to the text. We will still be adding and moving words and changing their order, this time focusing on making the most conversational choices for the experience.

Tips:
The best editing tool is the human voice. Read the titles and description as if the experience is "talking" to the person, and read the buttons, options, links, and other input fields as the person responding back to the experience.

示例

Phase IV Clear

The right words will be the ones that users will recognize immediately, without having to think.

-  Remind ourselves of the purpose, to reimagine where the person is, what they are doing, and why they're seeing this UX text.
-  Check the text with teammates and partner with user researchers to get feedback from people who will use the experience. For

Write up the best options in the order that we think will be most effective, and describe the details that make them different from each other.
示例