UED资深总监分享一个用户体验经典技巧

经常有人问我:「物理和用户体验设计有什么关联?」

我是一个有着多学科知识背景的设计师,这个问题引起了我很多联想。的确,学科之间的交叉影响,使得我们可以从不同的视角上看待用户体验的时候,能够感知到截然不同的东西,概念之间穿插所呈现出来的隐喻非常具有启发性。

物理学当中的「摩擦」的概念,在用户体验设计中,也同样存在,并且是一个非常微妙和有趣的概念。

在力学当中,阻碍物体相对运动或者相对运动趋势的力,是摩擦力。在数字产品当中,「摩擦力」同样存在,当用户面对一个界面,需要完成某个任务的时候,阻碍他完成的那种「力」,不就和「摩擦力」带来的感知差不多么?

当用户需要花费气力、耗费精神来完成某个操作的时候,他们就遭遇了用户体验「摩擦力」了。用户体验「摩擦力」燃烧着用户的卡路里,让用户在执行操作的时候更加用力。

我想,每个用户体验设计师都读过 Steve Krug 的《Don’t Make Me Think》,这本书当中通过各种网页设计实例来阐述了可用性设计的原则,在 Krug 看来,设计师应该尽量让用户感到轻松,更为轻松直接地完成任务。

对于用户而言,「不要让我思考」意味着不需要查看说明就可以同 UI 进行交互,尽量少地做复杂决策,不会有太大的认知压力。对于绝大多数人而言,在健身房中燃烧卡路里流汗就行,但是让大脑燃烧卡路里会头疼。

但是,在设计领域,在实际生活中,很多问题并不能一刀切。在涉及到复杂系统和关键性操作的时候,快速、简单和标准化的处理方式,对于用户而言,并不是最好的方式。

没有摩擦力的体验固然很顺利,可是在需要用户停下来审视、仔细决策的时候,没有摩擦力来帮他们刹住车,是会有问题的。

请记住,在绝大多数的情形下,我们确实沿用「Don’t Make Me Think」的方式来进行设计,但是作为专业的 UX设计师,我们还有责任用摩擦力,让用户在关键的时刻停下来,处理重要的、特殊的状况。

接下来, 我将分三点来阐述 UX设计中,需要「摩擦力」的状况,以及相应的设计方法。

帮助用户理解信息

传统的 UX设计当中,设计师需要通过各种设计手法,减少用户的视觉负荷。但是,依然存在特殊的状况,设计师需要添加文本,增加视觉元素,甚至功能性的模块,来让整个功能显得更加清晰,能被理解,甚至是让它复杂的功能显得更加简单。

举个例子:在一个管理系统当中,有这么一个很少会被用到的功能,这个功能只有管理员亚当能操作,而这个功能的使用条件和操作手法又很复杂,每个条件都涉及到系统的不同的方面和功能,非常敏感,非常棘手。

根据我的调研,很多系统当中都存在类似的功能模块,一年都用不上一次,规则和条件之多,经验丰富的管理员都无法记住。

因此,我们需要在这个操作相关的 UI界面当中,详细现实相关的所有规则,每个规则的帮助文本链接都要附带在这个页面当中。当管理员需要查看具体规则内容的时候,需要点击到帮助文本链接当中,因为更深层的内联条目都放置在其中,或者指向完整的说明文档,这些会影响到相关的操作。

在这样的特殊情形之下,需要管理员和用户理解相应的规则,即使是以增加视觉负荷和信息量为代价,也需要这样设计,安全操作才是第一位。

通过反复确认来确保安全

在传统的用户体验设计当中,尽量减少环节,不去浪费用户的时间,是第一要务。让用户通过尽可能少的点击和步骤来完成它们的任务。

但是在某些情况下, 我们可以以更好的方式,加入更多的步骤,来相对平缓地处理敏感的操作——让用户再次确认。这样的设计能够给用户提供相应的安全感和控制感。

为了更好的演示,我们还是引用上一节所提到的案例。请记住,案例中的操作涉及到的规则将会影响到整个程序的运行,所以这个操作是关键性的,且足够敏感,还需要有最高的权限才能运行。

这次的案例中,珍妮是亚当的顶头上司,系统管理员亚当只有被珍妮授予最高的权限之后,才能按照要求重新调整编辑这个敏感的规则。这次设置规则包含两个步骤,第一步,是需要让规则系统处于激活状态(非激活和激活状态之间的切换),第二步才是对其中的具体规则进行编辑。

作为这个项目的 UX设计师,我负责和亚当、珍妮进行沟通,并且按照他们的要求来实现这个部分的功能。

亚当:「我希望这个活动状态的切换可以一键完成,这样我就可以更快地进行规则的编辑,这个按钮最好放在主屏幕上。」

听了亚当的需求说明之后,我开始钻研这个事情。随后,我发现在整个系统当中,会用到这一模块的用户并不只有他一个,而是牵涉到多个不同权限的用户群,并且各自都有各自的路径、目标和功能,这下情况就比较复杂了。

这个时候珍妮开始和我进行沟通。当珍妮知道亚当的想法之后,说道:「如果亚当可以如此方便的调用最高权限来调整这个规则,我们都会感到不安的,这个规则非常敏感,操作需要非常谨慎,他还想在主界面一键切换?!这不可能。」

有意思。

接下来,珍妮继续补充道:「我希望这个关键性的操作必须得是在我们批准之后才能授权操作。没办法,快速便捷的操作可能会给我们带来巨大的损失,这个责任亚当担不起,我也担不起。」

珍妮深思熟虑之后,希望我给这个关键操作增加一些「摩擦力」,这会让珍妮感到控制感。我们给整个界面增加了一个弹出框,在切换活动状态的时候,用户不会在主界面上和其他普通权限的模块一起操作,并且这个状态切换除了需要进行单独保存,绝对不会自动保存,此后还需要进行二次确认,并且每次打开这个弹出框的时候,都会看到说明,告知操作者这个操作带来的结果,提高警惕。

多个步骤确保了用户不会误触,在情况说明和相对繁复的操作过程中,用户会逐渐警醒起来,不会随便操作。

根据敏感级别调整「摩擦力」

通常而言,无论是进行产品设计还是服务设计的时候,设计师会借助模板和模式化的设计,来确保整个体验的统一性,培养用户的使用习惯,让用户更好地使用系统。但是,在处理产品中敏感度不同的对象和元素的时候,我们应当进行适当的修改和调整,确保高敏感度的操作和对象不会被用户「顺手」执行了,甚至「自动运行」。

我们不妨设置三个对象:

  1. 对象A——不敏感的
  2. 对象B——中等敏感度的
  3. 对象C——最敏感的

这些对象的敏感度不同,重要性不同,相应的在上下文中的影响也不同,因此我们在对它们执行「删除」操作的时候,就不能完全一样了:

  • 对象A:「删除」按钮可以显示在主界面当中,其中包含所有的A类对象,由于删除是常见的操作,因此这些条目的删除不会对项目本身造成损害。
  • 对象B:想要删除 B类对象是一个相对关键的操作,可能会给项目带来伤害,因此不希望任何人在不做任何准备的情况下删除 B类对象,B类对象的删除操作只能通过UI的子菜单来执行,或者通过其他的方式触发之后才能执行。
  • 对象C:绝对不希望任何人错误的删除 C类对象,通常草率删除 C类对象会导致系统崩溃、进程停止或者其他灾难级的问题。因此,在主视图的任何地方都找不到删除 C类对象的功能,只有获得权限之后,在 C对象的详情页面下才能进行相关的操作。

相同的操作,在面对不同敏感度不同级别的元素的时候,应当是不同的,用户面对的「摩擦力」级别也不相同,逻辑上来说,用户当前的操作越是关键,越是会遭遇更大的摩擦力。

很多时候,一致性并不是全部的规则,涉及到安全性和可靠性的设计,一致性需要靠边。需要通过「摩擦力」来强化这些关键而重要的组成部分。

我们在做表单设计的时候,一方面希望我们的表单可以对用户有引导,可以针对用户的操作作出适当的回应,防止他们放弃表单填写;另一方面我们不希望一开始加载大量表单,一下子就把用户吓到,下面是我在项目中做表单设计的一些考虑。

针对如何提升表单设计的引导性主要会考虑以下几个问题:

一、如何排列体验是最优的?

用户在填写表单的时候经常会犹豫不决,所以要尽可能简化表单填写过程,表单设计要遵循内在系统逻辑,符合用户的使用习惯,减少视觉负荷,创建良好的信息层次。

1. 国外的设计研究员mattero penzo做了眼动实验,如果将label放置在input框上面,眼睛扫描表单速度会更快。

图片1来源于Uxmatters

2. 按照逻辑顺序聚合排列表单,便于用户理解。

图片2 UX Planet的注册页面

图片2 UX Planet的注册页面把birthday表单填写聚合在一起,方便用户理解。

3. 将input框与将要输入的长度匹配,尤其是可能会输入很多信息的输入框大小一定要留够,让用户对将要输入的内容有所预期。

图片3 Salesforce Object界面

图片3 Salesforce Object 表单里面description input框比较大,提醒用户可能会输入比较多的内容。

二、额外的提示怎么做到恰到好处?

为什么需要提示?

Sting TV的数字负责人Yakir Reznik做了A/B测试,在A版本只给用户提供姓名和电话号码表单让用户填写,在B版本中除了给用户提供姓名和电话号码表单,还添加了一个解释,即如果用户需要找回密码,则需要此信息,虽然提示比较长,甚至在移动设备上面还需要额外滚动,但是转换率却提高了11%。所以好的提示对用户的引导性和防止用户放弃有很重要的作用。

在做项目的过程中一般会遇到以下几种提示,每种提示都各有优缺点,大家可以根据自己的实际情况使用提示。

1. 静态提示,在界面上固定显示,不会消失。

  • 优点:始终在界面呈现提示,用户不会错过它,对指导用户操作有重要作用。
  • 缺点:占地方,会让界面不整洁。
  • 建议:如果是特别重要的信息或者是不容易理解的信息,建议采用静态提示。

图片4 Salesforce Object 界面

图片4 Salesforce表单填写有大量静态提示,帮助用户理解自己需要做的任务。

2. 按需显示,当鼠标点击或者悬停在图标“?”、“!”、“i”或者链接上出现提示。

  • 优点:不占用很大区域,还可以指导用户。
  • 缺点:对于不熟悉的用户会错过重要信息。
  • 建议:如果是对用户填写前作指导,且表单信息容易理解,避免信息过载最好隐藏提示,如果是对用户操作作出反馈,建议预留提示消息空间,且要立即提示最好。

图片5 WIX Login 界面

图片5 针对用户操作作出反馈,提示用户输入错误。

3. 自动出现,当label或者input框获得焦点时,提示自动出现,随着焦点变化而改变。

  • 优点:在需要的时候出现不会有负担,也不会被忽略。
  • 缺点:信息填写完即使不再需要它也会出现。

图片6 Zeplin Login界面

图片6 Username input框获得焦点时,提示自动出现,当焦点在password时提示在password右侧出现,username右侧的提示消失。

4. 自动消失(一般指占位符),输入框提示用占位符,一旦用户焦点在该框,占位符消失。

  • 优点:不占用很大区域,还可以指导用户。
  • 缺点:显示提示信息空间有限;当用户输入一半信息想要看提示的时候是无法显示提示的。
  • 建议:如果提示信息不多建议用占位符。

图片7 Invison 注册界面

三、如何减少用户输入次数?

好的表单设计可以减少用户输入次数,提升工作效率,目前主要从下面几个方面去考虑。

  • 打字交互成本高,尽量用单选或者多选代替,让用户做选择题,减少用户输入。
  • 区分可选和必选字段,必选可以加 * 号,让用户可以集中于必填字段。

图片8

图片8 用 * 号标识出必填字段,但是如果大多数是必填且有大量表单,建议只标识出非必填,如下图9。

图片9

四、如何鼓励用户继续填写信息?

给用户持续的激励,会刺激多巴胺的产生,多巴胺是一种化学奖赏的神经递质,会产生神经系统的兴奋性,所以为让用户可以愉快的完成表单,不中途放弃,要有一些激励设计。

1. 完成过程中提醒用户进程,鼓励用户继续填写表单。

图片10

2. 完成任务之后给用户一些称号激励,例如给用户设置青铜、白银、黄金、铂金等等级,给用户升级刺激。

图片11 WIX 界面

后面我会讲当表单数量很多时,如何做设计?

 

结语

在我们进行 UX 设计的时候,在总体上是要让大家生活更加方便快捷,更加简单地完成任务。但是事情有轻重缓急,对于重要而敏感的部分,始终还是要审慎。UX设计和很多领域都是交叉互通的,重要的概念和处理事情的方法也是共通的。合理的利用「摩擦力」,确实可以降低出事情的机率。

 

原创文章,作者:海阁,如若转载,请注明出处:http://www.pm28.com/1752.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:403567334@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息