[翻译]耶,再设计(第一部分)


作为一个设计leader,我总是不停地思考:“如何让我的团队能够源源不断地为我们的用户地输出更好的产品体验?” 我得到的答案总是太雷同:“我们需要不断拥抱用户的变化,并且持续迎合他们在快速成长世界的喜好及品位。”然而,如果产品体验再设计是一种解决办法,那么我们如何进行团队内部对话开启再设计旅程?我们如何找寻到一个可扩展的解决方案,做到新功能和设计可以有效平衡,并且保持产品特有的识别性不变?

如果你也正面临相同的挑战,我希望这篇文章可以帮助你找到下列问题的答案:

  1. 用户对现有产品满意度不错,为什么仍需要对产品进行再设计?
  2. 在一个快节奏数据驱动型公司,如何执行再设计?
  3. 如何度量再设计结果?
  4. 下一步如何做?

为了回答上述问题,我想要分享我们旗舰产品Sing! Karaoke 的再设计经验,并且带大家剥开我们团队在再设计路上克服的种种阻碍。

两年半前,当我加入这个公司时,我们有四个小组,每一个小组分别负责一个app:Sing! Karaoke, Magic Piano, Autoharp and Guitar。每一个小组由一个设计师,一个产品经理,和两到三个工程师组成。每个项目组的进度不一样,Sing!成为了Smule家族领头产品,公司决定把重心从开发主导转移到打磨产品功能为主。这意味着对Sing!加大投入人力打造产品,需要更多设计师合作完成工作。随着商业模式的发展,我们知道既存的产品设计和流程并不适应扩充的团队,也无法满足我们的用户需求。

 

因此,我们知道一次再设计并不是单枪匹马能搞定的事儿,我们需要跟我们的用户,设计师,产品经理,工程师和行政人员合作。早期阶段,各方是否能够理解再设计的理由并且给出如何再设计的意见,帮助我们在下列四个方面为再设计设立清晰的目标:

  • 提升用户体验
  • 助力设计的可扩展能力
  • 增强用户的产品参与度
  • 建立可持续的技术解决方案

1. 增强Sing! 用户体验

为Sing!体验带来一致性和连贯性

从许多用户研究中表明,我们知道一致性是可用性的强属性之一。Sing! 是一个拥有很多功能很好玩的产品。2012年产品发布之初,它的功能不多且用户群体较小。小范围的功能导致在设计时可以使用不同的颜色来代表不同场景下的特定内容,例如,之前的版本Sing!使用了4种以上的颜色来展示不同用户“唤醒操作”功能。旧的设计是为了迎合用户的喜好,但慢慢地会发现,多钟颜色的“唤醒操作”功能同样会让我们的新用户感到迷惑。这样一来,我们发现再设计需要建立一套具有一致性的UI语言来提升现有的用户体验。

提升用户的产品参与度

从用户调研中我们发现新的用户第一次与Sing!产品接触时,脑海中会附带他们之前使用其他app产品的假设条件。更重要的是,当他们第一次使用Sing! app时,一旦Sing!的界面没有达到用户的期望值,用户将花费额外的时间精力来学习和理解界面,这让他们有时非常兴奋但是又伤脑筋。我们推测再设计时匹配已开发的模式,不断扩充UI标准,或者升级自定义UI库,将会帮助用户更快更容易熟悉我们的产品。它可以帮助用户减轻认知负担,从而提升融入度。

增加用户留存率

app交互体验可以从生理和心理成本来度量。生理成本可以计算用户完成一个目标的步骤次数或时间。心理成本可以度量用户完成一个任务或目标的内在和外在认知负担或压力。例如,当Sing!用户想要和其它用户开启二重唱时,他们需要在多样的UI导航中找寻,这会耗费用户时间,不理解内容情况下会找寻功能还会增大心理压力。因此,使用简洁标准的交互和UI设计,将对减轻用户的生理心理负担有明显意义。

 

 

2. 助力设计的可扩展能力

为Sing!设计一种新字体

Sing!开始使用Gotham字体,灵感来自来自中世界纽约建筑设计。Gotham是一种很棒的字体,跟Smule欢乐、异想天开、贴心的氛围相吻合。直到今天它仍然代表了Smule的品牌调性。然而,Gotham更适用于印刷或媒体应用。当在手机屏幕显示时,会产生一系列问题。Gotham的字距较宽,因此一个词或一句话占用的空间更多。手机屏幕有限的尺寸空间,因此我们设计师为了保证字体在ios 和 android 的显示效果需要付出额外的努力。很多时候,字体在小屏幕上不得不缩小,以至于可阅读性受到影响。另外一个问题是Gotham字体的对齐基线偏低,工程师需要人工加肉眼调整让其居中。诸如这样的例子,设计师面临也解决了很多类似的问题。我们意识到再设计过程中找到一个可扩展的平台标准的字体是至关重要的。

Sing!需要定义自己的设计语言

设计是一个有机的创造性过程。没有标准的UX/UI设计准则存在,产品设计容易沦为每一个独立设计师的美学的大杂烩表现。如果任由设计师这种现象发展下去,将会造成设计团队内部的困惑、限制设计师的输出,降低产品质量。这种不确定性将会给后续设计评审环节带来延误和困扰。当团队中没有一个设计师可以明确阐述设计标准目标时,所有的反馈和评判都是基于个人主观偏好,因此大部分是无效的。作为一个团队,我们理解同心协力合作是为了输出更好的产品和体验给我们的用户。为此,我们意识到我们需要一个明确清晰定义的标准供所有设计成员之间使用,从而推动整个再设计工作不断向前。这将会以后的团队的每一个产品设计决定奠定基础。

设计团队的增长让我们意识到一套规则需要建立起来。这个指南将建立IA,布局,字体,颜色,图像,和交互的设计。指南的好处是它可以提供基础的设计框架,可以被运用到不同的设计需求中,加速设计进程,让设计师可以第一时间准确判断对与错。更重要的是设计团队需要创造一个可分享的,中台存储的,及时更新的文档定义设计样式、控件和组件。有这样一套指南在手,设计的一致性、设计质量和数量都会稳步上升。这就意味着,Sing!的再设计,设计团队需要创造一套设计指南,因此减少设计脱节及设计风格个人化,产品的设计表现将会保持统一。我们的目标是,最终,设计师不会思考图标的间距是多少才是正确的。相应的,设计师可以专注于更加有创造性的工作。

设计团队需要扩充

产品功能不断增加,用户群体不断增长,设计团结需要扩充人员,合作性工作也会增加。如果没有对产品设计的共同理解,达成最基本的合作基础,业务的增长,设计的增多,会让沟通变得越来越困难。为了让团队良性发展,我们需要将设计流程和方法模式化。这就意味着我们需要创造一些设计模块作为再设计的基础。这些独立的设计模块将会帮助设计师合作起来更加容易,如果需要脱离一项设计工作也变得更为重要。更远的说,当新的设计师加入时,中级设计师可以使用这些设计模块来领导项目和为新成员建立目标。

 

 

3. 增强产品的用户参与度

提升新用户第一次体验

当新用户尝试一个新app时,他们同时在学习两个事情:(1)这个app的功能,(2)如何使用这些功能。如果没有统一标准的ux/ui设计,用户将不能完全理解界面上的功能元素。为了让用户可以更专注于功能的使用,而不是在界面上寻找,我们需要理解用户的期待并且清晰地传达有价值的信息与他们沟通。总之,新的设计需要简化之前app让人迷惑的信息,尝试让用户感到舒服顺畅地跟新功能交互。

提升用户留存率

在smule, 我们紧密地追踪用户的留存率,它被定义为新用户首次使用app、后的2天或7天内,仍旧会打开app。如果用户对app的第一印象不好,他们第二天不会想着回来。通过用户研究发现,很多功能用户都非常喜欢,前提是他们发现了这些功能的入口。或者他们要求要有一些已经存在的功能,这些发现暴露了我们设计的时候并没有很好地理解和迎合用户意图。如果设计并不能帮助用户告诉他们在哪里,如何使用一些功能,他们将会迷失并且对产品丧失星期。再设计,我们需要更好地的导航,既能满足用户的意图也能满足商业的目标。

改善开发和发布流程

2014年当我们着手进行再设计时,iOS、android端的产品功能竟然不一样。IOS 端的Sing!功能要比android端的Sing!多。两端功能不同步以后跟影响了设计团队工作,也拖慢了开发进度。Sing!在启动再设计时获取了大量新用户。我们决定借势加速推动产品设计和开发流程。当有了这个想法之后,我们知道再设计需要提升内部团队的工作流程和效率。再设计能让设计和开发的时间节省50%以上,这样我们就能有更多的时间来尝试和探索新的功能。

 

 

 

4. 建立可持续的工程解决方案

改善开发流程

不一致的ui不仅会造成一系列可用性问题,还会额外增加设计和开发负担。例如,一个icon如果有不同的颜色和大小,在界面设计和开发实现阶段就特别痛苦。开发需要额外写匹配的样式来应对特殊的界面,设计也需要花费额外的时间标注和切图。它看起来很轻松,当适配到不同端和不同尺寸的屏幕尺寸时,这个过程就相当痛苦和没有必要。通过交流,设计师和工程师都非常希望使用更好的工作方式来合作。这就引来了另外一个话题,再设计还需要创造一个设计师和工程师都能高效工作开发的系统的工作方式。

提升产品开发质量

如果一个设计师的责任是解决设计问题,确保设计方案是正确的。最让设计师和工程师沮丧的时刻是:工程师为了修改一个设计bug,从而引发了另外一些bug。结果,工程师花费了更多的时间修改设计bug,但这还是不能确保产品发布时可以完完全全按照设计的标准来交付。我们知道这个时候重新设计来解决之前遇到的问题是不科学的,但是建立一套关于如何设置边距,如何规定图标大小,按下状态如何设计等等设计规范,我们可以防止之前的某些类似尴尬场景发生。

为全球化做准备

当我们进行再设计时,Sing!已经从一个美国本土的app逐步走向全球。为了更好地服务于全球用户,我们把Sing!支持的12种语言扩充到20种语言。我们直吹在英文app基础上支持其它国家的语言,UI元素可以轻松地突破。比如,相比英语,德语或俄语使用更多的字母表达同一个意思。一个已经定义好的空间位置刚好对英文字母合适,但不适用于德语或俄语。如果没有一个很清晰地规范指导对齐方式,本地化单词或字母将会被切断或者缩小展示。如果每一种语言都各自调整一套规范,这将会耗费设计师和工程师很多时间。所以我们想,再设计过程中,我们需要找到一种可持续的方法可以适用于未来我们将会使用到的各种语言。

 

插图来源:shutterstock
原文作者:Jingle Li,Director of UX @Smule. Love food, ski, and traveling.
原文链接:https://medium.muz.li/yeah-redesign-part-1-b61af07eb41a