为熟练用户设计:如何设计才能帮助用户提高使用效率?

本文作者将从导航和首页的信息排布、操作时间和快捷键三个方面展开,在通讯产品、办公软件等这类被大量使用场景的产品中,该如何设计才能帮助用户提高使用效率?


本文作者将从导航和首页的信息排布、操作时间和快捷键三个方面展开,在通讯产品、办公软件等这类被大量使用场景的产品中,该如何设计才能帮助用户提高使用效率?

为熟练用户设计:如何设计才能帮助用户提高使用效率?

只有三种产品会被生成出来:被大量用户大量使用、被大量用户少量使用和被少量用户大量使用。网上大部分关于设计的讨论都是围绕着少量使用的场景展开的:如何让用户理解、如何吸引用户、如何减少学习成本、如何让产品保持兴趣……大量使用的场景往往被忽视。很大一类产品(如通讯产品、办公软件等),它们的用户需要大量使用。这种场景下吸引力、理解力等已经不再重要,只希望能够快速帮助他们完成任务,越快越好!这就是为何我这次想要集中讨论一下“为熟练用户而设计”。

一、信息排布

导航和首页,对新用户来说是最大的依仗,而对熟练用户来说,则很有可能是最大的累赘。导航和首页,前者将所有的入口都列出了,后者将最有趣的东西展示出来,但这些对熟练用户来说都没有什么意义,他们每次都还是要从导航边角的一个小小的一级菜单展开二、三级菜单,从导航找到相应的页面后,也许还要经历几轮跳转才能来到真正对他们有用的地方。

1. 频率>人群>逻辑

用单一的思维方式,信息排布方式很多,例如按照热门程度、层级、按照任务类型……但是为了让信息排布达到最佳效果,任何单一的思维方式都很难奏效,并且最佳解决方案会因为外部条件、背景、人群等因素而无法确定,但是我认为以下思考方式是适用大部分情况的:

(1)应该把高使用频率的内容放在最前面。用户的时间是很宝贵的,如果能够立即达到自己的目的,就决不会去纠结信息排布是否完全符合逻辑。

(2)就要看使用人群了。最理想的情况是,同一类用户的活动范围在一个特定的区块里,而不是分散在整个页面。这样用户就不用遍寻整个页面来进行切换了。

(3)对于那些不太受到关注,但是又不能从界面移除的东西,就需要按照逻辑来排布了。这样最能确保在用户需要它们时,能够通过逻辑关系找到。

2. 个性化

如果允许个性化的话,信息排布就可以不用那么纠结了。例如,在登录时就能判断用户类型,从而给出适合此类用户的首页和导航;或者,允许用户通过拖拽等方式来自定义首页和导航。

值得注意的是,个性化并不是绝对就是好的。某英国超市把自家购物网站的首页改成只显示用户以前购买过的东西,这种个性化却让该网站的销售量在当月下降了几个百分点(如果平时的月销售量都是上升的,那么哪怕停滞一个月也不是小问题)。他们发现后把首页改回来,然后一切又恢复正常了。可见个性化虽然是个好的想法,但是要想把握好分寸,却并不是那么融合。

3. 纵向>横向

在排布信息时,尤其是在网页上时,纵向排布通常比横向排布优先考虑。原因有三点:

(1)信息的宽度(字数)很难确定但是高度(行数)却很好确定;

(2)大部分显示器为宽屏,如果不考虑滚页,那么横向排布的距离比纵向排布的距离更长,更耗时间。如果考虑滚页,那么纵向移动的距离就大大缩短了,因为滚轮可以取代大部分的鼠标移动。

(3)以手掌的结构来说,横向平行移动相比纵向精确度是更低的,因为左右摆动的轨迹是弧形而非直线,并且长距离的横向移动是需要抬起整个手掌才可能实现的。

二、操作时间

对于新用户来说,也许在理解和学习上花费的时间远多于操作中花费的时间;但是对于熟练用户来说,情况完全颠覆了。例如,我用Photoshop时,觉得最漫长的就是整理图层了,为了能够能够长期维护,只好不停地重复同样的工作。

1. 费茨法则(Fitts’s Law)

费茨在1964年的一个研究中提出一个公式,用来计算鼠标从一个点移动并点击屏幕某个区域的难度。后来这个公式被Shannon改进成为现在比较通用的形式。

为熟练用户设计:如何设计才能帮助用户提高使用效率?

Shannon改进后的费茨法则公式

T是任务完成的平均时间,D是鼠标指针与目标边界的距离,W是目标宽度。a与b代表的是环境变量(拦截时间和设备速度),通常不需要考虑。因为这个公式是一维的,所以每次使用时你需要在鼠标指针和目标之间画一条假象线,不论这条线的斜度如何,D和W都在那条假象线上。

为熟练用户设计:如何设计才能帮助用户提高使用效率?

费茨法则使用场景(不一定都是横向移动)

从这个公式我们可以看到,目标距离越短、宽度越大,操作时间越短。熟练用户的使用时间里,操作时间占绝大部分,而思考时间占极小部分。缩短目标距离、增加目标宽度,也许看起来不算什么,但对需要重复使用产品的熟练用户来说非常重要。试想一下,如果一个任务需要你从屏幕靠左的按钮移动到靠右的按钮,并且两个按钮啊还非常小,而你每天要完成上百次这个任务,那时你一定会开始抱怨:为什么这两个按钮那么小还相距那么远?

当然,这个公式只是针对鼠标的,触屏设备会有所区别,但是减少距离、增加尺寸是不变的原则。

2. 利用边界

这一点只针对鼠标。

同样是可以用费茨法则得出的结论:当目标属于屏幕边界时,W(目标宽度)是无限大的,那么此时T(任务完成平均时间)可以非常短。如果目标在屏幕边界,那么用户在移动鼠标的时候,完全不需要考虑什么时候停下,只需往那个方向滑动就好了。

这一规则的典型代表是Windows,因为它们的窗口控件从来都是在右上角,而开始按钮从来都是在左下角。如果一个用户要关闭最大化的窗口,那么他闭着眼睛都可以把鼠标指针“甩到”右上角。

这回苹果的IOS当了一次反例。它们把窗口控件做的很小,而且与屏幕边界有一定距离,所以每次用户关闭窗口的时候都要小心翼翼地啊鼠标指针移动到一个小圆圈上,这样做的操作时间比Windows长了不少。

为熟练用户设计:如何设计才能帮助用户提高使用效率?

WindowsISO的窗口控制按钮

3. 性能

做了那么多熟练用户的访谈,性能似乎是永恒的主题。对很多用户来说,操作再不方便,习惯了也没有什么可抱怨的,但是如果每次加载好几秒钟,那么这个等待时间才是最烦人的。并且对于他们来说,加载动画根本解决不了任何问题。

性能是设计师无法解决的,但是却需要设计师来监督,因为它是可以毁灭一切设计的东西。

三、快捷键

做多了网络和移动产品,常常会忘记快捷键这个东西。但是,如果你的产品是为熟练用户而设计的桌面产品(MAC & PC),那么千万别忘记快捷键。

1. 永远能用Tab键切换焦点

试想一下,如果你的产品有大量文本框,如果不能使用Tab键切换,用户就必须不断地将右手从键盘脱离去寻找鼠标,又从鼠标脱离去寻找键盘……如此往复上百遍,真的很令人崩溃!

今年来很流行将一个很长的表单分成几步骤,让用户一步一步地填写完成。如果用户只需要做一次,那么这样很好。但是如果你的用户需要填写好多份这种表单,那么这样做只会让人不断地在鼠标和键盘之间来回切换,大量时间被浪费了。所以这种情况下,还是把填写区域集合在一起,允许用Tab键切换吧。

2. 充分利用右键

最快速的两个入口不在屏幕上,而在鼠标上:左键和右键。

互联网产品大多将菜单收在一个图标里,这样做对于新用户来说,确实更好理解一些。但是熟练用户,尤其是需要重复操作的熟练用户一定更加喜欢右键。

例如很喜欢Chrome右键菜单里的“在新标签页中打开链接”的功能。如果这个功能不放在右键菜单里而是拿出来,真的很难想象用起来该有多不方便。

3. 遵循常见的快捷键&创建新的快捷键

使用Windows时,大部分情况下都可以通过Ctrl+S保存、Ctrl+C复制、Ctrl+V粘贴、Ctrl+X剪切、Ctrl+Z回退、Ctrl+Y撤销回退、Ctrl+N新建、F5刷新……在设计产品时如果也有类似功能,最好可以关联到这种约定俗成的快捷键。

最好不要破坏约定好的习惯,不然会给用户造成学习负担和切换成本。如果产品里有很常用的功能,但又没有约定速成的快捷键,那么就可以自创快捷键了。与之搭配地,需要提供快捷键提示和自定义的渠道。

 

作者:雨涵_Zoe

来源:http://www.jianshu.com/p/8e1b6525505e

本文由 @雨涵_Zoe 授权发布于人人都是产品经理,未经作者许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/27925/

(0)
CatherineCatherine
上一篇 2017-05-19 18:21
下一篇 2017-05-19 20:32

相关推荐

  • 在无线产品中,一些普适的交互设计原则及实践(上)

    本文作者将逐条列出其总结的无线产品设计领域应当遵循的的一些基本原则,并在每条原则下辅以实例说明以便理解。

    2017-05-04
  • 设计思考模式(一):删除、组织、隐藏、附加

    “删除每个页面上一半的文字,然后把剩下的文字再去掉一半。”(《Don’t make me think》中Krug可用性第三定律)“先假定所有内容都是视觉噪音,除非你证明它们不是。”(《Don’t make me think》)“点击多少次都没关系,只要每次点击都是无须思考,明确无误的选择。”(《Don’t make me think》中Krug可用性第二定律》)

    2017-06-03
  • 巧用交互设计中的暗黑模式

    如何巧妙运用交互设计中的暗黑模式,我们需要更多的思考和学习。不要介意用户骂你流氓,那说明你流氓的不高明 有些操作非常容易就能达成,有些操作明却非要多出几个步骤;有的icon的位置按照设计规则与用户使用习惯…

    2015-12-02
  • 设计基础|设计的7条心理学原则和定律

    译者注:上图的中文版金字塔并非原文内容,找来帮助大家理解。译者注(图中文字):
    费茨定律示例
    它是什么意思呢?费茨定律表明,你应当让按钮和其他界面元素足够大,因为用户点击小按钮十分困难。
    如果你有个小按钮,像【OK】这样,可以增加一些内边距,或者让它更宽:【 OK 】
    如果说网站上有个按钮,让整个按钮都能点击——而不仅仅是文字标签。
    而且,如果你把物体放在很远的地方,最好就要增大它的尺寸作为补偿。

    2017-05-24
  • 广告与用户体验只能二选一?

    最近公司的移动端产品在优化广告投放,其中也遇到了不少的困惑,我翻看了部分APP的广告展现形式并结合了几位设计师&产品经理的想法之后,整理总结出了这篇文章。本文将结合实际案例就常见的广告形式以及它们如何合适地呈现与大家进行分享。遇到的困惑我们知道无论是自身的品牌活动宣传还是第三方的商业广告都能为公司和产品带来不小的收益,但与此同时不恰当的广告也会对用户体验造成很大的影响,特别是移动端,因为屏幕有限更是“寸土寸金”,一不小心就会引起用户反感...

    2018-04-04
  • Android 和 iOS:两个系统交互设计的不同之处在哪?

    iOS 和 Android 的设计还有许许多多的不同之处,比如字体、Tab bar 设计、物理键操作方式、编辑模式、APP 体现个性的方式……在设计移动端产品的过程中,设计师们可以更多的去思考两者的异同,并且更多的关注一下 Android 系统独有特性的运用,不仅仅节省了开发成本,同时也更好的为 Android 用户所接受。1dp(Android)=1pt(iOS)
    以48dp@160dpi计算的话
    mdpi 48px (160dpi, 1x) 基础尺寸,已经非常少使用
    hdpi 72px (240dpi, 1.5x)低分辨率
    xhdpi 96px (320dpi, 2x) 同iOS @2x
    xxdpi 144px (480dpi, 3x) 同iOS @3x
    xxxdpi 192px (640dpi, 4x) 更大更高更强的分辨率

    2017-05-06
  • 【设计观点】如何从商业/产品/体验/视觉多角度构建设计形态?

    目标:现时代设计师不应只看到美感,从长远而言,需要从商业/产品/体验/视觉多个角度综合考量构建设计形态。 资料:交互设计精粹,用户体验五线谱,集创思维矩阵-纯色。 分享:星夜Design 现时代的设计师不应只看到…

    2016-08-30
  • 【译文】UI设计评审成就微创新

    产品设计流程中,有必要对设计进行评审是大家的共识。在我每周的工作内容中,参加各类大大小小的设计评审是必不可少的一环。既有脑力激荡的评审让设计方案脱胎换骨的,也有针锋相对的评审让设计方案摇摆不定的。怎样进行一场高质量的设计评审?设计师应该如何应对设计评审,更好的表达设计意图,并收集意见改进方案?怎样避免设计评审变成竞稿或PK?如何确保设计评审这样的流程能带来更大价值?带着这些问题,我们一起看看原文作者Jason的观点。*在你点评的设计细节上开始询问背后的原因及意图。为什么我们需要这条信息?对于允许索取这条信息我们设置了哪些期望?我们会用它做什么?如果我们能回答它们,再进入讨论解释各种元素的优劣以及与之对应的不同意见会比较好。“为什么”引出一个故事,解释某件事情的真实性。如果你问为什么,一切都无法奏效,你更想要创造一个故事,无论真实与否。这是让你感到糟糕的危险领域。 与询问“为什么”不同的是,考虑询问“如何”能够引出一个创造流程的故事,不必为它的存在辩护。然后你可以问设计师之前考虑过的各种可能,认真倾听设计师在提供方案之前做过的尝试。他们也许过于看重某些东西,不过没必要深究。优秀的适时交互是让产品(服务)吸引或失去客户的关键区别。将间歇性的互动变为持久关联的秘诀在于一系列精彩微交互,以及当用户需要时恰好出现的信息内容。 在设计评审流程中,应当询问每一个行动、每一次询问或者每一次数据展示是否出现在正确的时机,以确保界面在切换时传递信息时顺畅。随着扁平化设计与用户体验趋势的摇摆变化,我们能预感到页面部件缺少视觉线索的风险,因此动画能减少这种风险。 这种动效可能是颜色、透明度的变化,也可能是用猴子的手臂延伸页面这种细节,或者用户完成任务后展示太阳升起的效果。询问在UI设计中加入逐步动效的可能将极大的推动设计师改善设计,使得设计师思考时间维度的设计细节,而不只是局限在空间维度。这是一个很好的问题,我认为它是每个人都应该吸收的教训,尽管并非如此。我总喜欢提到:对用户的真实目标来说,页面或屏幕上的任何元素都不是解决方案的一部分,而是噪音和干扰。 在设计的每一步中,我们都需要自问:我们如何能够创造更小思考成本下能发挥同样作用的产品?在设计评审中,这是要求把方案简化的最佳表达。在设计中保持界面清晰很重要,使用尽可能少的点击、文案和输入框来达成目标更好。踏踏实实的把用户需要完成工作的消耗降到最低,用户会感激不尽。我们认为,很棒的产品描述(比如产品手册)对用户来说就跟“坐在60码时速的车上看到的广告牌一样”,UI设计师们比较难理解用户是如何忽略这些产品界面细节的,尽管设计师为此付出诸多努力。 优秀的设计评审放慢节奏,考虑每个元素,但是能认识到这些设计细节可能不会被用户注意到。如果参加评审的人员在颜色、字体及体验设计方面没有专业知识,他们可以考虑以下重要因素:经验告诉我,不要试图一概而论。例如我会问“我不确定开放的banner是否足以传达品牌?”,而不是问“哇,用户根本不会理解我们的品牌价值。”这就是为什么我认为每个设计师应该花时间观察用户并且使用自己的产品(又称可用性测试)。

    2017-05-18
  • 观点解读|四两拨千斤的交互设计方法

    最近读了一本书,叫做《细节,如何轻松影响他人》,里面给出了52条意见,每一条意见都是经过大量实验得出来的,有一定的科学依据,而且这些意见也反应了人们的普遍心理,强力推荐销售人员看看。这本书的主旨就是:只需改变一点点,就可以达到四两拨千斤的显著效果。虽然有52条之多,但是我会抽取一些和交互关系比较大的观点进行解读。

    2017-05-02
  • 交互设计——绘制流程图

    在上一篇文章中了解如何寻找接触点、梳理接触点,在这篇文章中主要就是如何来绘制流程图。现在普遍对流程图的分类有四种:业务流程图、页面流程图、功能流程图、程序流程图。在这主要通过现有的APP分析来进行区分不同流程图以及如何交互设计师或者产品经理选择应该使的流程图。何为流程图在上文中讲到了流程,流程是事物进行中的次序或顺序的布置和安排。流程是自然而然就存在的,它可以不规范,可以不固定,可以充满问题。而流程图的核心就在于如何排布事物进行的次序,...

    2018-05-06