交互与时间:大幅菜单的0.5秒等待时间

在大幅菜单中,鼠标经过区域的响应时间会很大程度的影响用户的使用体验,那么在现在具体的网页设计中体验时间都是怎么设计的呢?文章分享了几个实例,一起来看看。


在大幅菜单中,鼠标经过区域的响应时间会很大程度的影响用户的使用体验,那么在现在具体的网页设计中体验时间都是怎么设计的呢?文章分享了几个实例,一起来看看。

交互与时间:大幅菜单的0.5秒等待时间

大幅菜单是一种可以折叠的菜单,它可以在一个页面里,展示两个层级的菜单选项,一般用于菜单选项比较多的场景,例如我们经常浏览的电商网站。大幅菜单可以安置比较多的选项,并且可以快速让用户一览选项全貌。

交互与时间:大幅菜单的0.5秒等待时间

淘宝的大幅菜单

交互与时间

但这篇文章里我主要想分享的内容,其实不是怎么去设计这个大幅菜单,而是一个交互时间与菜单的概念。

如果大幅菜单的详情,是通过鼠标经过出现的话,一个很大的挑战,是去区分两种不同的用户行为:

  1. 用户刚刚正在页面上无目的地浏览,但鼠标的路径刚好与大幅菜单重合了。
  2. 用户正在看这个大幅菜单,并且希望浏览菜单里更加详细的信息。

第二种场景下,的确是需要去触发这个大幅菜单,但是第一种场景下,例如说下图形式的菜单分布,用户只是刚刚使用完搜索,想从A点到B点,但却被中间菜单的弹出阻隔了。

交互与时间:大幅菜单的0.5秒等待时间

(用户浏览路径)

对比苏宁易购,京东,淘宝,一号店几电商平台,发现他们都采取左右布局的形式,而左右布局的形式,与上图那种上下布局的形式相比,可能对于操作的影响是更小的,因为他们没有切断页面的布局,而只是占据左边的区域。但,这种方式也不是全无弊端,这个在之后会继续详细说明。

交互与时间:大幅菜单的0.5秒等待时间

(各大电商平台布局对比)

0.5秒可以做什么呢

所以说,如果要使得大幅菜单的出现不会太突兀,可能就要将鼠标经过时候的响应时间减慢,根据nngroup研究文章里的分析,鼠标应该悬浮在菜单0.5秒之后,才出现二级内容。这个点虽然很小,但是却会影响用户对于网站的总体印象,试想想用户在浏览网站的时候,总是被突然弹出的菜单打扰,会是什么样的感觉呢?所以综合了鼠标移动的速度等因素,0.5秒是一个很好的临界点。

因此呢,这个时间是这样的:

  1. 等待0.5秒。
  2. 如果0.5秒之后,鼠标还在,就在0.1秒内快速展现这个菜单的次级内容。
  3. 鼠标离开点击区域之后,还是展现菜单0.5秒,之后在0.1秒内快速关闭内容。

第二点可以理解,因为要区分用户是刚好经过,还是真的想要看里面的内容,但是第三点又是为什么呢?鼠标既然移出了区域,不是证明用户已经想离开了嘛?为什么还要停0.5秒呢?

这个可能就要用一个例子来更加详细地说明,假如说我现在在淘宝上,我已经选中了女装的这个栏目,然后我希望去看里面的内容,我想要看初夏新品,会有什么样的效果呢?

交互与时间:大幅菜单的0.5秒等待时间

(淘宝截图)

我们来分析一下这个动作,如下图,用户想要去看初夏新品的话,就要从A点走到B点,路径如虚线所示。

交互与时间:大幅菜单的0.5秒等待时间

(浏览路径图1)

然而在走的过程中,路径却会经过“鞋靴/箱包/配件”的菜单,那么这个时候会发生什么呢?就是会触发到下方菜单,突然展现出其他的内容。那么其实整个路径就被打断了,变成了下图A到C的路线。所以如果等待时间不够长的话,路径就很有可能会被打断,变成下图的状态。那么用户就要重新去定位之前的内容,再作一次选择。

交互与时间:大幅菜单的0.5秒等待时间

(浏览路径图2)

所以我个人觉得,这0.5秒还是很重要的,另外这0.5秒对于不同的群体,不同的场景,可能作用效果还不一样,例如说老人家,例如说在休闲懒散状态下浏览网页的用户,在这个情况下,用户的动作时间就很有可能会变慢,进而被弹出的菜单干扰。

潜在解决方法

因此一个潜在的解决方法,是网站可以智能地预测出用户的目的,预测出他们的潜在路径,进而对于不同的行为作出关于这0.5秒的判断。于是我尝试寻找了一下各大电商对于这一点的设计,我发现我浏览的网站中,亚马逊在这一点是做得很到位的,即使我把鼠标移到最临界点,朝着一个目标移到,菜单也不会出现突兀的跳转,似乎真的预测到了我的意图(而且我还特意放慢了一点速度)。

交互与时间:大幅菜单的0.5秒等待时间

(亚马逊大幅菜单)

但,要判断亚马逊是否真的考虑到用户路径的话,个人觉得其实也要比对一下鼠标垂直移动的等待时间,以及斜方向的等待时间。纵向路线代表用户想要切换不同的主菜单,而斜向路线则代表用户想要浏览主菜单下的次级内容。

交互与时间:大幅菜单的0.5秒等待时间

(浏览意图与路线)

下图是一个对比图,看到亚马逊的纵向等待与斜向等待时间是有区别的,京东也有这个趋势,所以有可能网站对于用户的路径进行了一些考虑。

交互与时间:大幅菜单的0.5秒等待时间

(等待时间对比图)

例如说淘宝,在两个方向的等待时间都比较短,因而菜单可能会被打断。

交互与时间:大幅菜单的0.5秒等待时间

(淘宝纵向路径)

交互与时间:大幅菜单的0.5秒等待时间

(淘宝斜向路径)

例如说苏宁易购,在两个方向的等待时间都相对长一些,因而斜向运动的时候,苏宁易购的菜单并不会马上消失。

交互与时间:大幅菜单的0.5秒等待时间

(苏宁易购纵向路径)

交互与时间:大幅菜单的0.5秒等待时间

(苏宁易购斜向路径)

但再看看亚马逊,它在两个方向的反应时间是有区分的,纵向很快,斜向却较慢,纵向运动的敏捷给予用户适时的反馈,而斜向运动的反馈却相对较慢,似乎在犹豫着什么。所以我个人觉得,亚马逊在用户行为路径这方面,可能是经过了考虑。

交互与时间:大幅菜单的0.5秒等待时间

(亚马逊纵向路线)

交互与时间:大幅菜单的0.5秒等待时间

(亚马逊斜向路径)

当然我的操作也不能百分之百验证这个判断就是最准确的,因为这跟我移动的速度,路线也有一点关系,仅将结果的动图提供在此,稍微提供参考,更切身的操作与理解,就要我们自己随时打开网站去体验了。

参考资料

https://www.nngroup.com/articles/mega-menus-work-well/

https://www.nngroup.com/articles/expandable-menus/

https://sale.jd.com/act/XUh2CDEPdI6YuzZf.html?cpdad=1DLSUE

https://www.taobao.com

https://www.amazon.cn/?tag=baidu250-23&hvadid={creative}&ref=pz_ic_22fvxh4dwf_e

http://www.suning.com/?utm_source=baidu&utm_medium=brand&utm_campaign=title

 

本文由 @交互小怪兽 原创发布于人人都是产品经理。未经许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-04-28 00:22
下一篇 2017-04-28 02:24

相关推荐

  • 如何从0到1设计用户激励体系,除了积分勋章还可以做什么?

    作者:子宸君   内容概要 什么是用户激励? 为什么要做用户激励? 用户激励作用的作用是什么? 如何从0到1拆解用户行为给出激励方案? 用户激励的副作用?   在互联网运营界,说起用户运营、内容运营、活动运营都避不开…

    交互专题 2017-08-07
  • 一个小小城市选择控件引发的深度思考

    很早以前小Q在《用好的交互设计来管理复杂-“筛选器”》一文,较为全面的剖析了筛选器的各种分类及其利弊。本文会继续筛选器的城市选择控件继续分析。A-Z index(字母索引)适用于对数据量为几十到几千之间的单词、词组或短语等类型的导航,且用户能对这些数据的首字母进行精确回忆。例如:国家、省份或城市的名称、姓名、昵称等。在移动端设计中A-Z index通常以竖轴形式出现在屏幕右侧,点击字母能将内容滚动到该字母的锚点位置。

    2017-06-07
  • 快速用 Sketch 绘制30个图标

    长得好看的人都已关注操作分解:一个正方形,两个同等直径的圆形即可完成,最后旋转多选矩形 Edit 后可以一起改圆角正方形不停地裁剪一个椭圆加长方形,复制即可圆角矩形加两个不同大小的圆合成小矩形旋转角度,最后拉下 Radius 即可选中锚点删掉,调下倾斜度,复制合成添加锚点一拉一调添加左右两个锚点的时候放大比较容易处理号细节锚点的 radius合成后记得 Flatten 下,就可以选择锚点加 radius添加钢笔锚点,并且 Show Gr...

    2018-04-09
  • 交互设计创新之改变用户行为的设计

    这是百度MUX在IXDC2016北京前瞻活动『移动产品的交互设计创新』中的一次分享。 这个课程属于团队内部一个培训课程的一部分,是关于HCI用户认知结合交互设计项目管理的内容方向。该文章阐述了讲说Keynote的核心内容…

    2016-05-08
  • 用户体验是一种过程,而不是结果

    任何人都抵挡不了时间的力量,你可以斥责它的无情、也可以赞美它的给予,在这个成长的历程中,我们寻找的不是时间给我们带来了什么,而是这个过程中我经历了什么。后者,才是我们需要深思并感恩的。与「用户体验」一样,许多人会评判一个产品用户体验的好与差。但是「好」与「差」只是整体上的一种结论,普通人可以说这两个字。但作为设计师,必须懂得在体验过程中,知晓哪里好与哪里差,更要知道为什么好为什么差。就好像评书似得,真正读过某本书的人,不会单纯的说:「这...

    2018-05-04
  • 我们招人啦:高级UX/UI设计师

    For EN version, clickhere生活在笔驰!想不想为前卫的客户创造出杰出的作品?加入我们紧密团结,具有才华,能吃苦耐劳的大家庭,你将会为不同行业构建最具深刻印象的品牌形象。你将迎接带有刺激和创造性的挑战。你会和一个带有创新思维的团队一起工作,不断地推动自己,让自己继续迈向未知的步伐。有时混乱,但永远是具有想象力的一个过程,我们能够专注于做出一个非凡的设计并将它和乐趣结合到一起。我们需要的高级UX/UI设计师!我们正在寻...

    微信热点 2018-04-05
  • 用户体验方向的复试炸药包

    喜大普奔,北师大终于出分数线了,虽然心理学部的院线还没有出来~但是过没过线,你心里应该没点Balance吗?对于没有参加提前复试的同学,对于接下来的复试,师兄在这里想灵魂拷问一番,准备好复试了吗?知道怎么准备吗?知道UX复试要考什么吗?别问我,我也不知道。但是作为去年参加过正常批复试而且成绩不低的老司机,我还是可以在这说两句的。(咳咳~全场都注意啦!)参加过去年提前复试的同学应该知道去年UX的复试变动很大,比之前两年灵活了很多,辅导机构...

    2018-03-07
  • 【酒店设计】关注用户体验的酒店设计永不过时

    位于德国巴登-巴登(Baden-Baden)的Roomers酒店,建筑的外观采用简洁的黑白灰格调,错落有致的立面构成,干净利落。建筑的外观采用简洁的黑白灰格调,干净利落、错落有致的立面构成。酒店共设有130间客房及套房,另外还有餐厅与酒吧、屋顶酒吧、500m²的水疗中心、户外花园、无边泳池等等。在精品酒店的设计中,越来越关注客人的亲身体验感,其中有几个重要的关键点:家的温馨感、艺术馆般的艺术气息、现代极致的设计感。一楼的moriki餐厅...

    2018-04-07
  • 交互设计的五要素:用户、行为、目标、场景、媒介

    在公众号里经常收到朋友的留言,到底什么是交互设计师?交互设计师具体是干什么的?为什么很多互联网公司都没有交互设计师这个岗位?希望通过这篇文章把交互的本质说清道明。

    2017-05-14
  • 交互设计在商业中的价值

    转载自“创设空间”:chuangshe_space简书链接:http://www.jianshu.com/p/d0b5baa600d2作者:Mr汤进er一、前话问题:一句话概括你理解的交互设计是什么?部分回复摘录:@哎呀,我擦~:大概就是通过使用者的某些动作才能激发出的产品或包装的第二功能吧。@捉急的小慢~~O~~:界面设计,形式和功能相融而令人愉悦的互动。@lcy:信息的输入,输出的过程。从大家对于这个问题的回复,不难看出,不同人对于...

    2018-03-05