UX小课堂:交互设计定律

为什么苹果电脑的导航栏会在屏幕的边缘?为什么推荐算法越来越流行?为什么网站的banner 数通常5个以内?为什么网站的注册登录都不约而同地放在左上角?为什么越来越多的轻量版产品推出市场(百度简单搜索、微博国际版、TIM...)?为什么谷歌搜索的界面可以做到如此简洁?如果你对以上问题存疑,不妨来了解一下几个交互设计定律。

菲兹定律是由 Paul Fitts 于 1954 年提出的一个人机交互以及人体工程学中人类活动的模型。它预测了快速移动到目标区域所需的时间是目标区域的距离和目标区域的大小的函数(T=a+blog2(D/W+1))。

简单来说,目标对象尺寸越大,动作路径越短,操作越高效。

所以,为什么苹果电脑的导航栏会在屏幕的边缘?因为导航栏紧贴边缘后,操作目标就相当于无限大,用户只需将鼠标向边缘一甩就可以选中目标,从而提高了效率。菲茨定律在图形交互界面中运用广泛,例如微信删除聊天记录,“删除”按钮与“确认删除”按钮在同一个位置(图1,左),用户不需挪动手指,在同一位置上点击两次即可完成删除。反观iOS短信的删除操作,“删除”按钮距离“确认删除”按钮较远(图1,右),特别在多次删除的场景下,操作极其不便。

图1

一点小建议:

1.操作路径的起点应从上次操作的结束点算起,而非手势的常见位置。

2.尝试更巧妙地放大目标对象。比如:操作区域大于可视区域;悬停时操作区域放大;让操作区域出现在多个地方等。

3.多结合手势操作,让目标对象最大化。比如:大多移动端的视频播放器可滑动整屏来拖动进度条,而桌面端仍需鼠标瞄准进度条来操作。


以英国和美国心理学家 William Edmund Hick 命名的席克定律,描述了一个人可能做出的选择与做出决定所需的时间间的关系:增加数量选择将以对数方式增加决策时间。

简单来说,选择越多,决策越久。

所以为什么推荐算法越来越流行?因为现在的信息量巨大,选择成本太高,推荐算法为用户省下了大量的决策时间。在交互设计中,我们可以利用席克定律,省下用户时间。举一反例,在知乎APP中点击“收藏”后,用户必须要选择放在哪个分类下,否则无法收藏(图2,左)。而instagram的收藏功能(图2,右),点击后马上生效,假如用户想分类可以再次点击“收藏”按钮,体验流畅很多。


图2

一点小建议:

1.在需要快速完成的任务上(如,导航),将选项精简再精简。

2.假如无法再精简,将其分类也同样有效。

3.假如分类仍不够,可默认隐藏次要选项,展示高频/重要选项。

4.不妨试试分步式地提供选项。

5.席克定律在某些场景下未必适用,比如购物场景,太少选择会失去吸引力。


1956 年 George·A·Miller 对短时记忆能力进行了定量研究,发现人类头脑最好的状态能记忆含有7(±2)项信息块,在记忆了 5-9 项信息后人类的头脑就开始出错。

简单来说,最多记5个,9个是极限。

回到最初的问题,网站的 banner 通常在5个以内,因为超过5个后用户很难再记得banner的内容,宣传效果将大打折扣。再如,手机号码和银行卡号这种较长的字符串,分开几组较短的字符串去记忆会更加容易。

一点小建议:

1.最好的状态是0:不需用户记忆,所见即所得。比如一些表意不清的图标,最好加上文字,而不是让用户记忆图标的含义。

2.在非图形界面的交互上,米勒定律尤为重要。反面例子参考10086客服(“普通话请按1……”)。

3.设计强传播属性的对象时(如,H5运营页),牢记米勒定律。

4.席克定律和米勒定律有点相似,前者强调选择,后者强调记忆,如果还是分不清楚,请记住一点:越少越好。


雅各布定律,来自用户体验研究集团Nielsen Norman Group的创始人之一,Jakob Nielsen。他提出:用户会将大部分时间花费在其他网站 (产品) 上,因此他们会希望你的网站 (产品) 也能像他们已经掌握的其他网站 (产品) 那样拥有相似的使用模式。

简单来说,相似的模式可降低学习成本。

将网站的注册登录放在右上角已经是目前通用的做法,用户不需要再花时间寻找注册登录的入口。同样的例子还有,网页的导航栏位于页面顶部,播放器用空格键停止或播放,APP右滑返回,双击图片放大等等,不胜枚举。

一点小建议:

1.可以通过提供熟悉的设计模式来简化用户的学习过程。

2.“竞品就是这样做的”真是一句无奈而又难以抗拒的话,因为雅各布定律一定程度上也在鼓励“抄袭”其他产品。但是,“抄袭”的目的是为了保持用户习惯,还是因为没有厘清用户需求,应心里有数。


奥卡姆剃刀定律是由14世纪英格兰的逻辑学家、圣方济各会修士William of Occam提出。这个原理称为“如无必要,勿增实体”,即“简单有效原理”。正如他在《箴言书注》2卷15题说“切勿浪费较多东西去做,用较少的东西,同样可以做好的事情。”

所以,为什么越来越多的轻量版产品推出市场?倒不如反问,用户为什么需要这么多功能?为什么要使用这么复杂的产品?正如图3的两个登录页面,用户为什么需要看那两行毫不相关的广告语?

图3

一点小建议:

1.分析每个元素并尽可能多地删除。

2.假如存在两个或多个模棱两可的方案,应义无反顾地选择更简单的。


复杂度守恒定律由 Larry Tesler 于1984年提出,也称泰斯勒定律。根据复杂度守恒定律,每个应用程序都具有其内在的、无法简化的复杂度。无论在产品开发环节还是在用户与产品的交互环节,这一固有的复杂度都无法依照我们的意愿去除,只能设法调整、平衡。

简单来说,系统的复杂性无法消除,只能转移。

为什么谷歌搜索的界面可以做到如此简洁?因为搜索引擎背后有着极其复杂的算法。用户寻找信息的复杂性几乎全部转移到系统算法上。再如,因为有了精准的推荐算法,才会有类似抖音这种极其简单的信息流交互。

一点小建议:

1.体验的升级往往源于技术的进步,时刻保持对新技术的好奇心。

2.当你特别轻松地完成一项设计时,小心你可能忽略了用户使用场景的复杂性。

3.当你的产品涉及多个角色时,要保持全局观,在各个角色间取得平衡。比如,微博的客户端,其可用性很大程度上会向大V倾斜,而非普通用户。


作者:genrry,公众号:设计师阿余。热爱设计,关注用户体验,分享设计思考。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,039评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,223评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,916评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,009评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,030评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,011评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,934评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,754评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,202评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,433评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,590评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,321评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,917评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,568评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,738评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,583评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,482评论 2 352

推荐阅读更多精彩内容

  • 交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”。在交互设计领域中,有很多被时间和前人验...
    Doria2016阅读 4,638评论 2 68
  • 目录导读 1.交互设计概念 2.交互设计输出物 3.交互设计相关理论 4.交互设计流程及方法 5.交互设计常见案例...
    纪同学说阅读 7,410评论 2 133
  • 竹林里,音宁盘地而坐,随着一片片竹叶的飘落,一行人陆陆续续地出现在他面前。为首的一人穿着白袍,白色的长发无风自动。...
    疯子不哭阅读 194评论 0 3
  • 有些人,虽说在你的生命中只出现了几天甚或是几小时,一别之后便不再相见,即使相见也早已不识,如同陌路擦身而过无数次,...
    别山举水阅读 5,628评论 82 153
  • 御: 这是我在简书的第一篇文章。最早发表在微信公众号“兮哉”。 这是一篇旧文,原本是写给一个女孩的,我们相识不久的...
    草弥阅读 1,851评论 0 4