交互与时间:大幅菜单的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

相关推荐

  • 电子邮件怎么能和用户体验勾搭上?

    人们总是愿意相信,他们自己的创作本身就能够说明一切。 由于电影《梦幻成真》里 “车到山前必有路” 的这种心态,加上非理性的恐惧,通常这类思想会影响到产品的设计,造成用户体验脱节,这个过程中又很少与用户交流…

    2015-12-06
  • VR界面设计实践指南

    一篇VR实践指导文章。Smashing Magazine好久没有这样新一些的东西了。实践指导性质的内容非常简单易行,个人感觉需要重点关注的是将传统UX设计流程及方法融入VR产品设计的思路,以及作者对于VR设计开发工作前景的观点。新技术,新事物,大风刮去之后留下的一批实践者所始终坚持的那些,才是真实的、有长期价值的东西。这是走心;集体意淫无非走肾而已。

    2017-05-07
  • 一篇文章读懂用户体验(下)

    前言:一直有在梳理自己的知识结构,也靠这些所谓经验做了几年行业培训,今年是从业的第十一年,我觉得差不多是时候把这些最初来自同行、互联网和书籍的知识再还给行业,我会把所有所得分章节逐渐整理发出,希望能对行业尽一份绵薄之力,同时也作为一种仪式,好让自己重新出发。举个栗子:假设我是个潮人,同时我也是个医生,那我就有两个角色。如果给我设计一款音乐播放器,应该给我一款酷炫的,我会喜欢。但当我坐在办公桌边,给病患开药的时候,我电脑的开药软件需要很酷炫吗?我一边摇晃脑袋踩着节奏,看着充满特效的界面开出来的药,你敢吃吗?所以医院的软件需要简洁,保证开药的准确度。(然而需要强烈的视觉表达情绪的设计例外)。

    2017-06-01
  • 设计规范如何写?这20个精选案例让你大开眼界

    如下为规范汇总页,里面囊括了许多大家熟知品牌的规范。1.Brand Style Guide Examples

    2017-06-02
  • Sketch 4.0 改进矢量编辑&下载地址

    Sketch 4.0 改进矢量编辑&下载地址

    2016-09-22
  • 快速搞定日常专题,我的流程与案列分享

    有一些朋友问我能不能分享一些关于活动专题的,但是我始终觉得我前面分享的已经很多了,在banner上自己去提升和延展就已经是日常的专题活动了。

    2017-05-15
  • 交互设计师如何进行风险预判?

    在公司工作,任何职业都不可能单兵作战,协作是永恒的主题,而每一个需求和任务的实现,都是各方通力合作的成果。作为交互设计师,除了做好自己的设计工作之外,还需要花费大量的时间与产品、运营、客户端开发、前端开发、后端开发一起协作和沟通。

    2017-06-04
  • 交互设计脉络概要

    一般做交互设计师有的是刚毕业的时候就会去做。也有的是本身是做视觉设计的,然后在未来的职业规划可能对交互设计感兴趣,所以呢,有时候对产品说,我想转交互行不行,那其实整体还是要看公司对你的角色的一个定位和是否给予的机会了。当然啦,很多机会是靠你自己去争取的,这个无论是在公司本身或者另外的公司,就自己去考量自己人生一个选择。一:什么是交互到底交互设计的一个定义是什么呢,因为了解一个新行业我们首先需要知道的就是他的定义,这样才是一个准确的、一个...

    2018-04-28
  • Axure案例练习-点评打分效果

    现在,外卖也好,购物也好,打车也好,点评打分是网站常见的用户互动的功能,一般都是1~5分之间评分,分值对应几颗星或者几颗心,当用户点击确定之后打分就完成了。下面我就以大众点评网为例,制作了打分效果。做之前,我们先来分析一下,点评共涉及到6个状态:没有打分的时候、一颗星的时候、二颗星的时候、三颗星的时候、四颗星的时候、五颗星的时候。根据之前的学习,知道点评区域是一个动态面板,这个动态面板有六个状态,当鼠标分别悬停时,切换出不同的状态。我们...

    2018-04-29
  • 交互设计面试官想了解什么,你知道吗?

    丝路视觉新朋友可点击上方蓝字关注年后又是一波跳槽季,对于即将走出校园的小伙伴来说,春招也马上要开始了。今天推荐的这篇文章包含了校招过程中的所有技巧和秘籍,绝对良心面经。已有一些工作经历、现在想跳槽的朋友们也可以参考一下,不仅可以为准备的面试答案查缺补漏,也可以给心中留一个底。与面试官进行的交谈,每一句话都会影响面试官对你的判断,因此每次讲话都力求向面试官证明你是合适的人选,如果他无法从你身上获取到有效信息,自然会将你淘汰。然而很多同学在...

    2018-02-03