知识分享

  • 首页
  • 市场分析
  • 需求分析
  • UI设计
  • 产品运营
  • 产品设计
  • 项目管理
  • 新玩意儿
不积跬步无以至千里
不要停留,欣赏沿途的风景
  1. 首页
  2. 产品设计
  3. 正文

为什么导航这么设计,体验更好?

2020年11月24日 328点热度 0人点赞 0条评论

编辑导读:用户在使用导航页面的时候,最关心的就是效率问题,用最短的时间找到他们想要的东西。导航菜单的层级越多,消耗的时间也就越多。本文将以最常见的三级导航为例,分析如何优化导航设计,希望对你有帮助。

当用户使用PC端导航时,效率是最重要的衡量标准之一,让用户更快的找到想要的东西,他们就能在任务流中节省更多的时长。

效率对于多个级别的导航菜单是至关重要的,菜单的层级越多消耗的时间越长,最常见的是三级导航,优化三级导航的高效性最简单的方式是优化布局。

常见的三级导航布局包括:上-上-上、上-左-左、上-上-左、上-左-上、左-左-左、左-上-上、左-左-上、左-上-左。级别标注按优先级和层级排序,研究方向包括导航时间、用户犹豫、光标移动、选择错误和用户偏好。

一、导航时间

研究表明,左侧导航比顶部导航效率更高,当一级导航和二级导航分开时,识别速度更快,总之:左-上-上、上-左-左排版时效率最高。

二、用户犹豫

犹豫是指用户在将光标从一个导航移动到另一个导航时犹豫不决思考的时长。在所有布局中,左-上-上结构的犹豫值最小,上-左-上犹豫值最大。其中当二级和三级导航在同一平面时犹豫值最小。

三、光标移动

当一级导航在左侧时,光标移动较少。一级和二级导航分开时,光标移动也较少。当二级和三级导航不在同一方向时,会发生许多光标移动,反之则光标移动较少。

左-左-左和上-上-上的光标移动量最少,上-上-左和上-左-上的光标移动量最大。这种效果是有意义的,因为当所有导航都在同一方向时,用户就更难将光标移到错误的平面上。

四、选择错误

单击次数过多表示选择错误。当一级导航在左侧时,选择错误率最低(左侧与顶部相比错误率减少了80%)。

当一级和二级导航都在顶部时,会出现大量的选择错误。上-上-上和上-上-左效率最差,当二级和三级导航与一级导航不在同一方向时,选择错误率会大幅度降低。

五、用户偏好

大多数用户更喜欢一级导航在左侧,最优布局是左-左-左和左-上-上。人们强烈倾向于二级和三级导航在同一方向。

六、最佳布局

根据所有类别的表现,对每个布局进行总体评分。性能最好的导航布局是左-上-上,其次是左-左-左。表现最差的两个是上-上-左和上-左-上。在两个最好之中,左-上-上比左-左-左快17秒左右。

左-左-左慢于左-上-上,因为当所有菜单都在左侧时,它要求用户滚动浏览项目列表。随着级别的扩展和深入,用户必须滚动查看更多内容,并且无法再在一个屏幕上查看所有主要项目类别。但是,左-左-左的好处是用户可以在每个屏幕视图中消费更多内容。用户花费在导航内容屏幕上的时间少。

总结:

一级导航应该在左侧而不是顶部(节省约17秒)。

因为以列表式组织菜单项使它们更容易扫描。

一级导航与二级、三级导航应在不同方向(节省约23秒)。

因为主菜单是父类别,它比子类别具有更高的优先级。当二级和三级与一级分离时,它可以清楚地区分层次结构并防止在同一方向上出现视觉混乱。

二级和三级导航应该在同一方向上(节省约9秒)。

因为二级和三级都是父类的子类,这使得它们更为相关。将它们放在同一个平面上,可以使从一个孩子到另一个孩子的导航更加直观和容易理解。

 

本文由 @UX Talk 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash ,基于 CC0 协议

给作者打赏,鼓励TA抓紧创作!

标签: 暂无
最后更新:2020年11月24日

小虾米

同理心,洞察力!

点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复
最新 热点 随机
最新 热点 随机
爽剧依然很香,阅文知乎都来了 2023年底,云计算“水逆” 从线索到订单LTO:传统汽车销售在哪些步骤可以数字化? 沉浸式空间娱乐连锁门店小程序产品设计方案 【大模型】企业内部如何快速应用GPT为我们提效——产品经理视角 产品猎人(一)丨带你探索更多体验案例 抖音心晴、百度万话上线,大厂押注AI社交能跑出下一个微信吗? 民宿市场@2023,木鸟途家美团翻红战背后 中台列表如何设计,才能兼具实用性与多样性? 产品周报276期 | Google发布AI大模型Gemini,腾讯NOW直播宣布12月26日停止运营 Axure高保真教程:树筛选中继器表格 猫狗拼「斜杠」微短剧:毒药还是解药? AI 产品经理和 AIGC 产品经理有什么区别,怎么选择? 2023 年度热词,只能是它 B 站更新:把抖音当做方法 腾讯 TDesignFlutter 组件库开源啦🎉🎉🎉 推荐策略在图库行业的应用 平台多商家如何进行到家服务产品设计? 短剧付费,一场抖音快手和小程序的“不对称战争” 消费金融数字化专题研究(二):消费金融行业发展PEST分析
OpenAI CEO总裁联合声明透露被罢免经过:在线会议中被解雇;事件几大原因分析为什么受伤的,总是数据管理部门?Sam Altman卸任CEO的几点猜想供应链系统中的编码和条码,你真的懂了吗?OpenAI不感谢Altman消费金融数字化专题研究(二):消费金融行业发展PEST分析啊这,以后刷抖音可能要付费了?短剧付费,一场抖音快手和小程序的“不对称战争”抖音神曲,消失了?平台多商家如何进行到家服务产品设计?【颠覆小红书】:未来的发展关键在哪些功能上?推荐策略在图库行业的应用揭秘产品经理必备的核心思维能力腾讯 TDesignFlutter 组件库开源啦🎉🎉🎉智能电视操作设计得这么复杂,真的合理吗?B 站更新:把抖音当做方法爽文短剧到底有多赚?到了横店我差点想入伙2023 年度热词,只能是它HubSpot 如何做到 20 亿美金 ARRAI 产品经理和 AIGC 产品经理有什么区别,怎么选择?
8000字干货:从售前到交付,一场以交接为主的修行 你画的不是图,画的是思路,四步教你绘制大厂标准状态图(终结篇) 被围猎的小红书 卧底周杰伦粉丝群一个月:爱豆那套,我们不屑 互联网平台广告收入增长转正背后的「五个信号」 后滴滴时代,华为腾讯要抢谁的4000亿蛋糕? 产品思考 | 以跑步为例,通过场景连接功能 抖音本地生活头上的两朵乌云 千亿美金独角兽“SHEIN”是如何炼成的? 电商售后—售后流程与状态详解 从银行角度,说说票据及其业务细节 干货 | 如何做好To B的产品? 如何设计优惠券系统?一文带你看懂优惠券 当我在为新行业领域产品规划发愁时,总监给了我这五点思路! B端产品设计中,为什么「下架」功能更常见? 新拟态设计——未来的设计趋势? 数字重塑人生 / 理解即将被Metaverse与数字转型重构的世界 那些红极一时的千万粉微博大V,现在怎么样了? 横屏 VS 竖屏,一场注定的溃败 我在越南教人直播带货

COPYRIGHT © 2023 知识分享. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang