最近在Review一个新业务(Image Portability Service)操作界面的UI text,我对产品了解后,对界面的文字做了较大的改动,但PD (Product Designer)对edits并不满意,他跟我强调friendly language(具体见下图)。对于UI Text的Tone/attitude相关guideline,我没有理论基础。所以,找到Microsoft UX Writing guidelines取经,收获挺大的。总结记录一下。
User Interface Text
User interface text appears on UI surfaces, which includes the following:
- Control labels: Identify controls and are placed directly on or next to the controls.
- Supplemental explanations: An elaboration of the control labels (typically for command links, radio buttons, and check boxes)
- Static text: It is not part of an interactive control, and provides users with detailed instructions or explanations so they can make informed decisions.
- Main instructions: use the prominent main instruction to explain concisely what to do in the window or page.
- Supplemental instructions: when necessary, use a supplemental instruction to present additional information helpful to understanding or using the window or page.
在上述图例中,我需要修改的是static text中的supplemental instructions. 原提案是直接陈述完成此操作的原因,我的提案是从操作的角度描述,也提到原因。我manager读过后,觉得原稿表达更亲和,但他指出,consistency最重要,要统观全局,给出最后选择。
Design Concepts
A design model for UI text
The facts that how users read UI text
- Users don't read UI text they scan it.
- When scanning a window, users are filtering it. They often don't truly comprehend the UI text unless they perceive the need to.
- 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.
You should assume that once users have decided what to do, they will immediately stop reading and do it
在上述图例中,步骤中的加黑文字是main instructions是用户首先看的,他们理论上不会去看supplemental instructions,也就是我提出建议的部分。
读了这点,我就不纠结了,把重点放在step 1 and step 2 supplemental instruction的一致性上吧,语法表达上遵从PD的写法。
Eliminate redundancy
UI text should strive to explain what users need to do once well and concisely.
Don't avoid important text. Be explicit wherever necessary but don't be redundant and don't explain the obvious.
Avoid over-communications
Don't be too wordy in an effort to explain every detail. Too much text discourages reading. The eye tends to skip right over it ironically, resulting in less communication rather than more. 这句同时也是TW的金句。句子要短要简。
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.
Use the inverted pyramid
Academic writing typically uses a "pyramid" structural style that lays down a foundation of facts, works with those facts, and builds up to a conclusion forming a pyramid-like structure. By contrast, journalists use an "inverted pyramid" style that starts with the conclusion the fundamental "takeaway" that readers must have. It then fills in progressively more detail that readers may be interested in perhaps just scan.
这点我特有共鸣,我在UI写作时(think like a customer), 也是这么做的,bottom line first。现在算是找到理论依据,他人challenge时,可用作“武器”了。
Summary
1. Work on text early because text problems often reveal design problems.
2. Design your text for scanning.
3. Eliminate redundant text.
4. Use easy-to-understand text; don't over-communicate.
5. When necessary, provide links to help content for more detailed information.
Guidelines
- Remove redundant text.
- Avoid large blocks of UI text. - Chunk text into shorter sentences and paragraphs. When necessary, provide help links to useful, but not essential, information.
- Choose object names and labels that clearly communicate and differentiate what the object does.
- If you want to make sure that users read specific text related to an action, place it on an interactive control.
读完总结:1. consistence 2. Short and plain text. 3. Inverted pyramid 4. Control text > Static text 5. Tone and style与TW一致。
后记:与manager线上讨论了一下,他的观点是:
1. UI Text写作规范不同于TW,比如象TW在写作中,提倡用present tense,但在UI写作中,并没有严格的规定。
2. 他从读者的角度读了示图中的两个text,他喜欢item 1中的text,但觉得item 2中的text没写清楚。
3. UI Text的owner是PD (Product Designer), TW的role主要是review grammar与consistency。在沟通中,应该在肯定对方的角色与责任的前提下,提出自己的观点,讲明理由。
4. 在UI Text review中,我们应该从产品整体的consistency的角度,告知对方我们make edits的出发点。站在读者的角度,以事实说明问题!
5. UI text有descriptive与instructive两类。关键是前后保持一致。我给出的instructive的,但PD给text的角度,我觉得是:给出为什么要执行该步骤。
6. 在工作中的学习中最有效,最有趣的,这两天把微软的规范好好看了一遍,又把这个新产品的全部UI Text都过了一遍,让自己给出的comments里都加入了理由。然后,就是放下了,我也没有更多的时间给这个产品了。
7. 正如组里同事说的,大家刚开始一起共事,需要磨合,先尊重PD的选择。以后,工作中建立了reputation与 trust,今后的工作会慢慢顺畅的。