深度干货-Shopify的设计流程与内容编辑准则

前言

这篇文章翻译自在澳洲跟北美地区都非常普遍的电商后台产品 Shopify 。

在澳洲几乎所有的网络商店都是采用 Shopify的后台,不管在哪间 agency 工作几乎都会都会接触到,包括我工作的 NGV 的美术馆 online-store 也是使用 Shopify 后台。客制化程度高、使用便利,使用者体验相当优秀,也有很多与 Shopify成为合作伙伴的网页设计公司应运而生。

使用者体验如此成功、成长迅速的平台,到底是如何做设计的呢?这篇文章是 ShopifyUX 部门的内容策略专家 Biz Sanford 分享他们关于内容在设计流程里的重要性,如果有兴趣就继续看下去吧!

本篇除封面插画之内文及图片,版权皆为作者 Biz Sanford 及 Shopify 所有。

在建构一个产品时,有些人认为内容是最后的重点,页面或画面上的文字可以在发布之前写出来就好。

但我们知道那不是最好的作法!周到、一致的接口内容是一个良好使用者体验的核心。所以这里有一些包含内容、我在设计过程中使用的方法。我们会从草图的内容角色开始,以高真实度的模型来让内容发光发亮。把你内容策略的帽子戴上——这是你如何在每个阶段聪明的运用你的时间,运用语言去创造更好的经验。

设计流程

 用文字打草稿

草稿是一个探索点子跟方向的好方法。这是关于纸上的东西、快速移动跟沟通概念。为了打好的草稿我们需要一些内容,文字是帮助用户完成他们的任务不可或缺的,当你在打草稿时想着他们,你就能及早发现问题,而且帮助你稍后的流程跑得更快。

我发现你需要放进草稿里最重要的内容是这些:

·       页面跟区域的标题

·       关键动词跟名词

·       按钮跟链接文字

使用明确、直达核心的术语,不要担心它感觉太聪明或太轻浮。从让整个团队都能参与开始!工程师、设计师、内容策略师、项目经理、研究人员,跟你的支持团队都用不同的字汇去讨论他们的点子、还有形容一样的经验。这个分歧的意见(或是字)正是你这个阶段所需要的重点。写上关键词跟名词的范例。

如何在每个区块写上标题的范例。

把你试图解决的问题,用高保真度的内容还原。如果你试着去搞懂一个更大的方向,你会需要了解每个区块的内容应该如何运作、这些按钮会带你去哪里、在下一页你会找到哪些信息。但用你的时间在草稿里写下每一个区块的详细描述还有点太早。

具体的选择词语,并且花时间考虑为什么选择某些术语,而不是其他的。不要用搜寻(search)当你实际上是要说筛选(filter)。储存(save)跟提交(submit)或是发布(publish)是不一样的。

如果你正在做一些更静态的东西,例如一个营销网页、或是网站登陆页,就可以在草图中多放一些静态内容。比如说,如果我不知道我将会在 Shopify付款信息页 放上多少多少客户福利,我就没办法在草稿上规划布局。我应该放上三个框还是四个呢?他们会占用多少空间?他们需要配上对应的插画吗?除非我使用真正的内容,不然我没办法回答这些问题。

别担心画出没办法更改或是接触的内容草稿,像是侧边的选单或是页面上的元素都会保持原本的样子。这可以帮助我们更专注于新的或是即将变化的区块,而不会被超出范围的区块分散了注意力。

让每个人都画出自己的草稿,然后把想法呈现给团队。这是一个很棒的时机,可以公开讨论大家为何选择这些用字。这个用语能反应使用者的想法、和他们使用的话吗?

当你往线框稿(wireframe)或低真实度的模型(mockup)移动时,你就可以更理解内容、将它更好的发挥。就像 GoogleVentures 的 John Zeratsky 在他的部落格文章写的:「你不会在还没探索几种变化的情况下就决定布局,所以在确定哪个方向是最好的之前,你应该多尝试几种文字的解决方案。」

用正确的内容量来画线框稿

如果我们把草稿当成是设计的第一步,线框稿就是第二部啰。我们把大略的想法变得更具体,并且试着去解决画草稿时发现的问题。

我发现先制定所有内容元素、以及决定他们的层级结构,真的对于我们画出线框稿有很大的帮助。

制定内容元素
内容元素,我指的是页面上的所有内容。你可以用像是 Mindmeister 之类的工具,把它们在表格上记下来,或是直接在 Sketch 档案里纪录。

我发现把内容元素跟线框稿分开真的很有帮助,因为它:

·       记录可能显示在页面上的所有发生事情,特别是因为通常在同一时间很少会出现全部的元素。

·       保持模型的实际性—我们不需要显示所有可能的方案,或是所有可以在线框稿里显示的讯息。

·       帮助工程师了解哪些信息会被包含在里面。

·       建立不同内容元素之间的关系

·       确保我们不会忘记某个部份或略过一些事情。

比方说,这里有一些可能出现在银行 app 登陆页的不同的内容元素:银行 app 登陆页的内容元素跟线框稿(左边列出所有会使用的元素,右侧是实际的线框稿)

 确定内容层级结构

在你列出内容元素后,开始根据用户的优先级跟你的商业目标开始排列层级。这个练习可以确保你策略性的思考,为什么要把某些元素放在其他元素之上,并且帮助你在制定布局跟内容层级结构时,提供一个强而有力又合理的理由。

在低真实度的模型(mockups)中使用内容

当你进入低真实度的模型的阶段,你应该用一些更详细、更实际的内容。为可能发生的场景,写下最好的内容,即使你知道他可能之后会被替换掉。把它想成是一个具体的初稿,我会使用真实的数据、就像真正日期、时间跟名字,这些能帮助人们直接了解功能,而不需要过度的解释。

我们从来没有在设计过程的任何阶段使用 loremipsum。如果我们的设计中没有真正的文字,我们就不知道我们是不是正在解决正确的问题、无法从同事那边获得适当的反馈,而且使用者也无法测试任何内容。内容再决策时是很重要的,所以如果我们不使用真正的东西,最后就会试着去做出信息错误的体验。这些接口上的文字是帮助用户了解功能不可或缺的一环,帮他们找到所需的功能,并且完成任务(在小屏幕上更是如此)!早点开始思考内容会给我们更多时间去获取同事、使用者还有在不同选择中进行演练。

我们常常使用我们很显然不会出现在产品的字体(对不起啦 ComicSans)这样大家就可以确切的了解这上面切确的文字,还在工作进行中、我们还在寻找关于流程还有层次结构方面的反馈。

这应该不用特别提,但应该避免任何不当或不正式的占位符号内容。如果意外流出,可能会迅速损害使用者的信任。

(译:右边使用了真实可能会出现的内容,在做模型是越是仿真真实状况会出现的内容越好。)

集结所有上下文,你应该要对你在撰写的内容感到自信。跟你的产品经理、工程师跟项目的专家谈谈。阅读功能文件,如果你们公司有话(我真的很感谢 Shopify支持中心 )。最有询问价值的一群人之一 —— 就是客户支持团队,好好利用他们的丰富知识。他们每天都会与客户进行对话,他们知道客户描述事物的字词是什么,他们有上千个能支持你的数据等着被分析。

当您准备好进入高真实度的模型、以及核心问题得到解决后,您会需要考虑端到端(end-to-end)体验:

·       产品内所有的触碰点

·       错误讯息

·       确认

·       在线使用者

不过低真实度还是意味着高质量的内容跟设计。

在高真实度的模型中抛光打亮你的内容吧

从内容策略专家的观点来看,大部分的重大工作应该在这个阶段完成。如果您在进行高真实度的模型之前,略过了一些早期的活动,例如绘制所有内容元素或记录所有可能的错误讯息,现在是时候进行了。

“最好的种树时间是 20 年前。第二好的时间,是现在。” 
– 中国谚语

在这个阶段你要把所有内容的扭结都熨平解开,而不是在改变任何跟经验有关系的基础。在 Shopify,内容跟设计完成后,前端工程师开发这个经验后,我们的团队会坐下来做我们所谓的抛光检查。

 

我们的 UX 团队正在出货前进行抛光检查

我们会审查最终版本的产品,并且寻找任何需要进行微调的地方。从内容的观点来看,我们会寻找不正确的标点符号、遗漏没发现的旧版本内容,日期格式错误,跟任何其他没有遵循设计系统的地方。

我们会在这个会议期间做笔记,跟前端工程师一起确保所有的信息都是最新的。如果需要进行多次更改,我们会再做下一次抛光检查。这有助于确定这个产品是高质量、而且让自己也感到骄傲的。

让它帮助你做设计

我正在根据每个正在进行的项目跟他的规模,不断的调整这些技巧,而且我完全理解真实的世界绝对比这些按部就班的过程更麻烦!我们会来来回回修改,我们会为一些项目跳过某些步骤,在另一个项目我们会花更多时间在某个特定的词汇。

我很有兴趣听听看你怎么想与如何做。你是如何将内容策略纳入你的设计过程呢?你在每个阶段的内容真实度跟目标是什么?

 

【最新热文】

About the Author Stanley Xu

Leave a Comment: