用好的交互设计来管理复杂-“查看更多”

“查看更多”按钮像一个链接标签的拐杖,在各类网页及App中被通用,网站现在已经大量使用这个通用的标签链接。作为一个独立的标签,“查看更多”按钮,直接描述所表达的含义,用以帮助用户从下一页了解所期望的内容。

文章目录[隐藏]


“查看更多”按钮像一个链接标签的拐杖,在各类网页及App中被通用,网站现在已经大量使用这个通用的标签链接。作为一个独立的标签,“查看更多”按钮,直接描述所表达的含义,用以帮助用户从下一页了解所期望的内容。

用好的交互设计来管理复杂-“查看更多”

现在的很多网站及App设计,越来越弱化不太重要的信息内容。也就是说,标签及按钮描述都会选择简短精致的措辞,以保证用户易于扫描,方便消化。当用户决定他们想要更多的信息的时候,他们可以挖掘一个链接或展开抽屉页面信息,从而获得不太重要的内容。无论是点击“查看更多”还是上拉加载都是获得更多收起来信息的方式之一。

“查看更多”按钮的三类变形

  • 变形1:使用描述链接目的地的关键字
  • 变形2:保留了解更多的格式并添加描述性的关键字
  • 变形3:将前面的段落转换成唯一的链接

如下图案例:

用好的交互设计来管理复杂-“查看更多”

由于“查看更多”会产生不确定性,用户不知道他们会期待什么,如果他们点击,或者所得到的内容是否会是值得等待一个新的页面等等,这一系列不确定性的感觉会导致用户犹豫,不确定性和认知压力对用户体验产生了负面影响,并转变成一种认知紧张状态,有些人可能会采取常驻在页面以评估不清楚的联系。

在移动端,无论是App抑或是Wap,由于其移动屏幕要小得多,而列表项目将占用一个相对很大一部分的屏幕,那么通常只有两到三个项目被显示在列表视图布局中,所以用户将不得不在移动设备上进行交互(即滚动)或者点击。

对比网页分页处理,App的用户更加不愿等待页面重新加载,所以产品设计的时候,应该尽量避免分页。实验证明,在移动端,无限滚动是非常有效的获得更多内容展示的方式。较长的产品列表在App上通常通过自然的上拉行为,加载更多的数据,加载过程根据产品定位变形给类的动画,以降低用户等待过程中的焦虑感,提高用户对产品的体验认知。

如下图:

用好的交互设计来管理复杂-“查看更多”

如果加载信息模块底部会有其他模块展示,处理“查看更多”的行为时,最好的解决方案是在产品列表的结尾处有一个单一的大的“加载更多”按钮,让用户选择是否在当前界面展开并加载更多数据。基于移动端的屏幕小的问题,我建议在显示“加载更多”按钮之前,在移动设备上加载15到30条数据为最佳。

“多”并不是困难的来源,在产品设计过程中,能把“多”的内容管理好,把复杂的内容处理好,是可以完善用户体验的。心理学生来说,复杂的事物更容易理解,简单的事物反倒令人困惑。适当的把复杂的东西,让用户操作,也是一种简单化的产品设计方式。

系列文章:

用好的交互设计来管理复杂-“筛选器”

用好的交互设计来管理复杂-“个人中心”

用好的交互设计来管理复杂-“Tab”

 

作者:Mandy权,微信公众号:Q产品,一名快乐的产品经理!~

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

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

(0)
CatherineCatherine
上一篇 2017-05-18
下一篇 2017-05-18

相关推荐

  • 产品信息架构的思考

    这篇适合交互设计或者对交互设计感兴趣的小伙伴们看。所以我就不解释信息架构是什么了(链接阅读:怎么理解信息架构,什么是信息架构?)。 今天写一下产品信息架构的思考。 任何产品都有信息架构,或繁杂或简单。…

    2015-11-18
  • 通过微信学习用户体验和产品迭代

    这几天一直不停的开会,讨论产品,活生生的从运营的位置跑偏到了产品,似乎可以调岗了,andy一直在聊迭代的问题,想来想去,觉得还是微信做的最牛逼,那就翻翻历史,聊一聊吧。微信是2011年1月21日才面世的,为什么能在短短六七年的时间实现9亿多用户?在QQ已经在通讯社交行业占据霸主地位时,微信又是如何脱颖而出实现反超的? 在米聊率先面世创下不俗业绩后,微信又是如何后来居上的? 微信的成功对于产品人来说有很多值得挖掘、学习的地方。初期的微信和...

    2018-05-05
  • 全国高校“用户体验、视觉界面(UI) 设计、交互设计新技术实践教学与应用师资研修班

    商务合作联系QQ:3158521867 或加微信号:jujiao01一、会议背景近年来新技术、新趋势不断爆发,同时掀起了互联网的蜕变热潮,行业和用户更加成熟理性,随着网站和平台开发需求不断增多,智能手机广泛应用,用户体验、视觉界面(UI) 设计、交互设计对于网络产品来说是赢得用户的关键特性。苹果、google等顶级企业的成功案例已经深刻说明了这一点。打破传统界限,连接商业与技术,在新商业环境中实现更大的价值,把设计领域、设计概念向外延展...

    2018-03-30
  • 版权大战后,用户体验将成音乐平台的制胜关键

    自2015年起,国家版权局叫停“独家”版权到今年腾讯、阿里和网易云三家主流音乐APP达成史上最深度版权互授,这场版权之争终于尘埃落定,期间还穿插发生了运营8年的多米音乐停运事件,版权大战背后确实有很多难言之痛,而面向未来,已经叫实了的“后版权时代”,各家APP用什么get到我的点?当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Get Over ItEagles - Hell Freezes Over (Live)一、用户体验...

    2018-03-24
  • 《用户体验要素》的笔记 (2) 第三章 战略层

    1. 战略层主要解决两个问题:1)我们想通过这个产品得到什么?即产品目标是什么?2)用户想通过这个产品得到什么?即用户需求是什么?此处的关键词是【明确】。当我们能越清楚的表达我们想要什么,以及确切的知道其他人想要从我们这里得到什么时,我们就能越精确的满足双方的需求。注:而最终导致产品失败的原因也经常出现在这个环节,很多产品口号喊的很响亮,但就是不愿意进一步去描述,并不是说产品经理一定要上层决策好目标和需求的每一个字,然后就不容易出错,没...

    微信热点 2018-04-08
  • 思路总结:从体验设计角度做有效竞品分析

    本文作者总结了自己在实践中学习和应用过的竞品分析思路,一起来看看~

    2017-05-05
  • 十张图看懂交互设计原则

    一致性保持视觉统一性,才能加深用户对产品品牌的认知,降低用户的学习成本可视性用户一看便知的操作方法认知不一味只求美感或者感觉,而是从一般人的认知习惯,比如视觉,阅读,记忆,学习等多方面开展设计反馈用户需要接收到操作结果的完整、持续的反馈信息自然操作流程顺畅不生硬,节点、逻辑跳转符合人类的思维习惯情感化与人文关怀赋予设计的产品生命力和亲和力,不要把产品当成一个冷冰冰的使用工具错误控制考虑可能出现的人为差错,在设计的时候先行避免效率简化任务...

    2018-04-12
  • 在现代网页设计中,动效常见的几种用法

    在逐步的探索和发展过程中,动效在网页和APP中的运用方法与技巧已经逐步成熟,形成了一套相对系统的模式。今天的文章我们通过一系列实例,来展示一下动效是如何改善整个用户体验的。如果你无法将等待的时长缩短,那么尽量令这个过程有趣。动效让滚动式的交互充满了趣味。

    2017-05-08
  • 四步解说,搞定吸引人的移动端详情页设计

    本文依然是关于详情页设计,涉及到了排版/构图/色彩/氛围点缀/字体等多个方面。以下是我总结了可以让你的详情页脱颖而出的四个系列的套路,兴许对你们有用!enjoy~

    2017-08-04
  • 用户体验的目标是做到“自然”

    不想错过精彩的荔枝话题,点击文章左上角关注“荔枝3十1”。每晚10:00点荔枝陪你说一事晚安文/励志妹图/荔枝工作室经作者授权发布用户体验的目标是做到“自然”导语“自然的体验是不需要用户去思考的。”1需要用文字来解释的交互不是好交互(1)我观察3岁的小孩用iphone很容易上手。比如,iphone的开锁,小孩甚至不用学就会用。因为触摸是人的天性,同时iphone通过箭头图标,向右滑动的文字条(小孩看不懂文字),来暗示手指触摸向右滑动来解...

    2018-04-28