【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.
示例

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 227,533评论 6 531
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 98,055评论 3 414
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 175,365评论 0 373
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 62,561评论 1 307
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 71,346评论 6 404
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 54,889评论 1 321
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 42,978评论 3 439
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 42,118评论 0 286
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 48,637评论 1 333
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 40,558评论 3 354
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 42,739评论 1 369
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 38,246评论 5 355
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 43,980评论 3 346
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 34,362评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 35,619评论 1 280
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 51,347评论 3 390
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 47,702评论 2 370